@charset "utf-8";
/* CSS Document */
html{font-size: 14px;line-height: 1.6em;}
body{background: #000000;font-family: 'Helvetica','ヒラギノ角ゴシック',sans-serif;overflow-wrap: anywhere;word-break: normal;line-break: strict;}
body *{box-sizing: border-box;}
body,a{color: #ffffff;}
ul,ol {list-style: none;}
table {border-collapse: collapse;}
img{display: block;width: 100%;}
a{text-decoration: none;}
body,h1,h2,h3,h4,p,ul,ol{padding: 0;margin: 0;}
main{overflow: hidden;}
@media screen and (max-width: 768px) {
	html{font-size: 12px;line-height: 1.6em;}
}

.jp{font-family: 'Noto Sans JP', sans-serif;}
.jp.bold{font-weight: bold;}
.view-pc{display: block;}
.view-sp{display: none;}
.content{max-width: 1110px;width: 100%;margin-inline: auto;}
.content-l{max-width: 1600px;width: 100%;margin-inline: auto;}
h2.contents-tit{position: relative;z-index: 5;font-size: 4rem;line-height: 1.2em;font-family: 'Helvetica', sans-serif;text-align: left;}
h2.contents-tit.m1{margin-bottom: 1em;}
.subtxt{position: relative;z-index: 5;font-size: 1rem;line-height: 1.5em;margin: 2em 0 4em;max-width: 550px;color: #fff;}
.subtxt.middle{margin-inline: auto;}
.subtxt.long{max-width: 100%;}
.subtxt span{display: block;}
.btn-more{position: relative;z-index: 5;display: inline-block;font-weight: bold;font-size: 1.25rem;width: 11em;line-height: 3em;border-radius: 1.5em;background: #fff;color: #000;text-align: center;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.fadeout{position: relative;}
.fadeout::before{position: absolute;content: '';left: 0;top: 0;z-index: 1;width: 100%;height: 25%;background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 38%,rgba(0,0,0,0) 100%);}
.fadeout::after{position: absolute;content: '';left: 0;bottom: 0;z-index: 1;width: 100%;height: 25%;background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 62%,rgba(0,0,0,1) 100%);}
.glow{display: block;position: absolute;z-index: 1;transition: all 300ms 0s ease;}
@media screen and (min-width: 1600px) {
	.fadeout::before,.fadeout::after{height: 15%;}
}
@media screen and (max-width: 1600px) {
	.content-l.p22{padding-left: 22px;padding-right: 22px;}
}
@media screen and (max-width: 1110px) {
	.content.p22{padding-left: 22px;padding-right: 22px;}
}
@media screen and (max-width: 768px) {
	h2.contents-tit,.subtxt{text-align: center;}
	.subtxt{max-width: 100%;margin-bottom: 2.66rem;}
	.subtxt.left{text-align:left;}
	.subtxt span{display: inline;}
	.view-pc{display: none;}
	.view-sp{display: block;}
}
@media screen and (max-width: 480px) {
	h2.contents-tit{font-size: 3.5rem;}
}
@media screen and (max-width: 350px) {
	h2.contents-tit{font-size: 3.2rem;}
}
@media (any-hover: hover) {
	.btn-more:hover{background: #000000;color: #ffffff;transition: all 300ms 0s ease;}
}

/* header */
header.global-header{position: fixed;top: 0;left: 0;right: 0;z-index: 10;font-size: 1rem;-webkit-transition: .25s ease;-moz-transition: .25s ease;-o-transition: .25s ease;-ms-transition: .25s ease;transition: .25s ease;}
header.global-header.on{background: rgb(0 0 0 / .7);}
header.global-header nav{display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;justify-content: center;align-items: center;padding: 6px 24px;}
header.global-header nav h1 a{width: 50px;display: block;}
header.global-header nav h1 a img{display: block;width: 100%;height: 100%;}
header.global-header .header-right{display: flex;margin-left: auto;}
header.global-header nav .header-menu{display: flex;justify-content: center;align-items: center;}
header.global-header nav .header-menu ul{display: flex;gap: 1em;}
.btn-lang{padding: 0 1em;height: 1.5em;line-height: 1.5em;margin-left: 2em;text-align: center;background: #fff;color: #000;border-radius: 1.1rem;}
.btn-nav{display: none;position: relative;background: transparent;margin-left: 1em;width: 30px;height: 30px;z-index: 70;padding: 0;border-radius: 0; border: 0;cursor: pointer;box-sizing: content-box;}
.btn-nav span{position: absolute;left: 0;right: 0;margin: auto;display: block;height: 2px;background: #fff;opacity: 1;pointer-events: none;-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0);-webkit-transition: .25s ease;-moz-transition: .25s ease;-o-transition: .25s ease;-ms-transition: .25s ease;transition: .25s ease;}
.btn-nav span:nth-child(1){top: 0;width: 30px;}
.btn-nav span:nth-child(2){top: .5rem;width: 20px;}
.btn-nav span:nth-child(3){top: 1rem;width: 10px;}
.btn-nav span:nth-child(4){top: 1.5rem;width: 5px;}
.btn-nav span:nth-child(5){top: 2rem;width: 30px;}
.btn-nav.open span{background: #fff;position: absolute;left: 0;display: block;width: 30px;height: 2.5px;}
.btn-nav.open span:nth-child(1){top: 11px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.btn-nav.open span:nth-child(2){top: 11px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.btn-nav.open span:nth-child(3),.btn-nav.open span:nth-child(4),.btn-nav.open span:nth-child(5){top: 0;left: 50%;width: 0;}

.store-menu{position: relative;}
.store-menu .header-menu-s{padding-top: 1rem;position: absolute;top: calc(100%);display: none;width: 13em;box-shadow: 1px 1px 2px rgb(0 0 0 / .3);}
.store-menu:hover .header-menu-s{display: block;}
.store-menu .header-menu-s a{display: block;padding: .4em 1em;color: #000;background: rgb(255 255 255 / .7);}

@media screen and (max-width: 875px) {
	header.global-header nav{padding: 10px 20px;}
	header.global-header nav h1 a{width: 48px;height: 36px;}
	header.global-header nav .header-menu{display: none;position: fixed;z-index: 40;top: 0;bottom: 0;left: 0;right: 0;background: #000000;padding: 75px;}
	header.global-header nav .header-menu.open{display: block;}
	header.global-header nav .header-menu ul{display: block;line-height: 1.4em;text-align: center;font-size: 3rem;font-weight: bold;}
	.btn-lang{height: 2.1em;line-height: 2.1em;}
	.btn-nav{display: block;}
	.store-menu:hover .header-menu-s{display: none;}
}
@media screen and (max-width: 480px) {
	header.global-header nav .header-menu ul{display: block;line-height: 1.4em;text-align: center;font-size: 2.3rem;}
}
@media screen and (min-width: 876px) {
	header.global-header nav h1 a:hover,header.global-header nav ul a:hover{opacity: .8;transition: all 300ms 0s ease;}
	.btn-lang:hover{background: #000;color: #fff;transition: all 300ms 0s ease;}
}

/* footer */
footer{display: flex;justify-content: center;align-items: center;position: relative;height: 80vh;background-image: url("/image/sipguzzle/footer/footer-bg02.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;}
footer:before{position: absolute;content: '';left: 0;top: 0;z-index: 1;width: 100%;height: 70%;background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(16,16,16,1) 38%,rgba(0,0,0,0) 100%);}
footer span{position: relative;z-index: 2;margin-top: -200px;}
footer img{display: block;width: 208px;margin-bottom: 6.6rem;}
footer p{font-size: 1rem;}
@media screen and (max-width: 768px) {
	footer{height: 60vh;}
}
@media screen and (max-width: 480px) {
	footer img{width: 180px;}
}