@charset "UTF-8";
.kaiju-no8 *,.kaiju-no8 *::before,.kaiju-no8 *::after {  box-sizing: border-box;}
img {margin: 0 auto; max-width: 100%; display: block;}

/* =========================
スクロールふわっと表示
========================= */
/* アニメーション本体 */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0);  }}

.fadeup {opacity: 0;transform: translateY(20px);filter: blur(3px);transition:opacity 1s ease,transform 1s ease,filter 1s ease;}
.fadeup.show {opacity: 1;transform: translateY(0);filter: blur(0);}

.fade { opacity: 0; filter: blur(3px);transition:opacity 1s ease,transform 1s ease,filter 1s ease;}
.fade.show { opacity: 1;transform: translateY(0);filter: blur(0); }


/* ========================================
kaiju-no8
======================================== */

.kaiju-no8 {  background:#000;  overflow-x: hidden;}
.container{width: 100%; position: relative;}
.intor{min-height: 230vw;background: url("../img/hero.jpg") top no-repeat , url("../img/intor-bg.jpg") bottom no-repeat #000;background-size: contain;position: relative;}

.intor .logo {transition-delay: 2.4s;max-width: 60%;width: 58vw;padding-top: 10vw;margin: 0 auto;}
.intor .limited{width: 18vw;position: absolute;right: 4vw;top: 136vw;}
.intor .mask{width: 38vw;position: absolute;right: 0;left: 0;top: 140vw;margin: 0 auto;}
.intor .lead{width: 58vw;position: absolute;right: 0;left: 0;top: 200vw;margin: 0 auto;}
.intor-item {display: -webkit-box;display: flex;justify-content: center;gap: 2vw;position: absolute;top: 167vw;right: 0;left: 0;margin: 0 auto;}
.intor-item li{width: 19vw;}
.intor-item li.show:nth-child(1){transition-delay: 0.1s;}
.intor-item li.show:nth-child(2){transition-delay: 0.3s;}
.intor-item li.show:nth-child(3){transition-delay: 0.5s;}
.intor-item li.show:nth-child(4){transition-delay: 0.7s;}
.about{min-height: 157vw;background: url("../img/about-bg.jpg") top no-repeat #000;background-size: contain;position: relative;}
.about .logo{width: 46vw;position: absolute;right: 0;left: 0;top: 24vw;margin: 0 auto;}
.about .deco{width: 2px;height: 10vw;position: absolute;right: 0;left: 0;top: 47vw;margin: 0 auto;background: #fff; }
.about .kaiju{width: 44vw;position: absolute;right: 0;left: 0;top: 65vw;margin: 0 auto; }
.about .deco.fade{transition-delay: 0.1s;}
.about .kaiju.fade{transition-delay: 0.3s;}

.store{padding: 5vw;}
.store .tit{width: 65vw;margin-bottom: 12vw;}
.store ul{width: 65vw;margin: 0 auto;}
.store ul li{margin-bottom: 4vw;}
.store ul li:last-child{width: 80%;margin: 7vw auto 16vw;}

/* ホログラム風エフェクト */
.btn {	position: relative;	display: inline-block;	background: rgba(0, 255, 255, 0.1);	font-size: 16px;	letter-spacing: 1px;	cursor: pointer;	backdrop-filter: blur(10px);	transition: all 0.3s ease;    overflow: hidden;	}
.btn::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: repeating-linear-gradient(	90deg,	transparent,	transparent 2px,	rgba(0, 255, 255, 0.05) 2px,	rgba(0, 255, 255, 0.05) 4px);
animation: scan-lines 2s linear infinite;}
.btn:hover {background: rgba(0, 255, 255, 0.2);box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),	inset 0 0 30px rgba(0, 255, 255, 0.1);transform: translateY(-2px);}
@keyframes scan-lines {  0% {    transform: translateX(-100%);  }  100% {    transform: translateX(100%);  }}


.card{background: url("../img/card-bg.jpg?260911") top -1px center repeat #000;background-size: 101%;padding: 10vw 1vw 15vw;position: relative;}
.card .tit{  width: 66vw;  margin: 0 auto 7vw;}

.card ul{display: -webkit-box;display: flex;justify-content: center;position: relative;}
.card li{width: 20vw;}
.card li img{width: calc(100% + 25%);max-width: calc(100% + 25%);}
.card-one{padding-right: 9vw;}
.card-sec{padding-left: 5vw;}
.card-one li:nth-child(1){transition-delay: 0.1s;margin-top: -2vw;}
.card-one li:nth-child(2){transition-delay: 0.3s;}
.card-one li:nth-child(3){transition-delay: 0.5s;margin-top: -2vw;}
.card-one li:nth-child(4){transition-delay: 0.7s;}
.card-sec li:nth-child(1){transition-delay: 1.0s;margin-top: -5vw;}
.card-sec li:nth-child(2){transition-delay: 1.3s;margin-top: -2vw;}
.card-sec li:nth-child(3){transition-delay: 1.5s;margin-top: -5vw;}
.card-sec li:nth-child(4){transition-delay: 1.7s;margin-top: -2vw;}
.card .ex{width: 30vw;margin: 0 2vw 1vw auto;}

.feature{background: url("../img/feature-head.jpg") top repeat #000;background-size:100% auto; }
.feature .tit{padding:0 2vw 47vw;}
.infoend{background: #fff;padding-bottom: 10vw;}
.infoend .tit{}
.infoend .lead{width: 83vw;margin: 12vw 0 8vw;}
.infoend ul{display: -webkit-box;display: flex;justify-content: center;position: relative;gap: 10vw;padding-bottom: 5vw;}
.infoend li{width: 30vw;}


/* ========================================
PC
======================================== */

@media screen and (min-width: 769px) {
.kaiju-no8 {  background: url("../img/pc-bg.jpg") center fixed #000; background-size: cover; }

.kaiju-no8::after,.kaiju-no8::before{content: "";width: 100%;height: 28px;position: fixed;z-index: 2;}	
.kaiju-no8::after{background: url("../img/pc-bgdeco-up.png") top repeat-x;background-size: 1920px;top: 0;right: 0;left: 0;margin: 0 auto;}
.kaiju-no8::before{background: url("../img/pc-bgdeco-dw.png") bottom repeat-x; background-size: 1920px; bottom: 0;right: 0;left: 0;margin: 0 auto;}	
.side-left, .side-right {position: fixed;top: 0;bottom: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 10;}
.side-left  { left: 0;  width: calc((100vw - 700px) / 2); }
.side-right { right:0;  width: calc((100vw - 700px) / 2); }
.side-left img.fix-mascode  { max-width: 313px;; width: 100%;  height: auto; display: block;     padding: 10%;}
.side-right img.fix-kaiju{  max-width: 323px; width: 100%; margin-bottom: 10px; height: auto; display: block;    padding: 10%;}
.kaiju-pc > div .fadeup{  opacity: 0;  transform: translateY(20px);  animation: fadeUp 1s ease forwards;}

.container{max-width: 700px; width: 100%; position: relative; z-index: 3;  margin: 0 calc((100vw - 700px) / 2);  min-height: 100vh; background-color: #000;}

.intor{min-height: 1600px;}
.intor .logo {max-width: 60%;width: 60%;padding-top: 60px;}
.intor .limited{width:18%;right: 20px;top: 960px;}
.intor .mask{width: 293px;top: 980px;}
.intor .lead{width:58%;top: 1400px;}
.intor-item {gap: 10px;top: 1180px;}
.intor-item li{width: 124px;}

.about{min-height: 1100px;}
.about .logo{width: 46%;top: 164px;}
.about .deco{width: 4px;height: 77px;top: 313px;}
.about .kaiju{width: 45%;top: 446px;margin: 0 auto;}


.store{padding: 5%;}
.store .tit{width: 65%;margin-bottom: 12%;}
.store ul{width: 65%;}
.store ul li{margin-bottom: 4%;}
.store ul li:last-child{width: 80%;margin: 10% auto 15%;}
.card{padding:13% 1% 17%;}
.card .tit{  width: 66%;  margin: 0 auto 7%;}
.card li{width: 20%;}
.card li img{width: calc(100% + 25%);max-width: calc(100% + 25%);}
.card-one{padding-right: 9%;}
.card-sec{padding-left: 5%;}
.card-one li:nth-child(1){margin-top: -2%;}
.card-one li:nth-child(2){}
.card-one li:nth-child(3){margin-top: -2%;}
.card-one li:nth-child(4){}
.card-sec li:nth-child(1){margin-top: -5%;}
.card-sec li:nth-child(2){margin-top: -2%;}
.card-sec li:nth-child(3){margin-top: -5%;}
.card-sec li:nth-child(4){margin-top: -2%;}
.card .ex{width: 30%;margin: 0 2vw 1vw auto;}

.feature .tit{padding:0 8px 330px;}
.infoend{padding-bottom: 80px;}
.infoend .lead{width: 83%;margin: 50px 0 40px;}
.infoend ul{gap: 10%;padding-bottom: 50px;}
.infoend li{width: 30%;}
	
.footer{position: relative; z-index: 10;}

	
	
}