@charset "UTF-8";
/*---------- ゴジラランドセルLP（page-godzilla.php）専用 ----------*/

/* ゴジラランドセルLP用
   動画の上端が画面上端に達したら動画枠を固定し、
   contents を下までスクロールしたら固定を外す
---------------------------------------------- */
/* ヘッダーなどの min-width が #container からはみ出す。
   hidden だと動画の sticky が効かなくなるので、画面端で横だけ切る */

.page-btn-pagetop{
	display:none;
}

/* 購入ボタン */
.cta-box{
	width:100%;
	padding:40px 5vw;
	text-align:center;
}
.cta-box .cta-btn{
	display:inline-block;
	padding:20px 124px;
	background:#bd0010;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	border:2px solid #eee;
	text-decoration:none;
	border-radius:100vh;
	transition:all 0.3s ease;
	text-align:center;
	position:relative;
}
@media screen and (max-width: 768px) {
	.cta-box .cta-btn{
		width:100%;
		max-width:420px;
		border:1px solid #eee;
		display:block;
		margin:0 auto;
		padding:18px 10px;
		font-size:18px;
	}
	.cta-box .cta-btn::after{
		font-size:18px;
	}
}
.cta-box .cta-btn::after{
	font-family: 'Font Awesome 6 Free';
	content:'\f061';
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	font-size:20px;
	font-weight:bold;
	color:#fff;
	transition:all 0.3s ease;
}
.cta-box .cta-btn:hover{
	background:#ee270d;
	color:#fff;
}
.cta-box .note{
	font-size:15px;
	font-weight:bold;
	color:#fff;
	margin-top:20px;
}

.cta-box .cta-btn-taiki{
	display:inline-block;
	padding:20px 124px;
	background:#666;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	border:2px solid #eee;
	text-decoration:none;
	border-radius:100vh;
	transition:all 0.3s ease;
	text-align:center;
	position:relative;
	cursor:default;
	pointer-events:none;
}
@media screen and (max-width: 768px) {
	.cta-box .cta-btn-taiki{
		width:100%;
		max-width:420px;
		border:1px solid #eee;
		display:block;
		margin:0 auto;
		padding:18px 10px;
		font-size:18px;
	}
	.cta-box .cta-btn-taiki::after{
		font-size:18px;
	}
}
.cta-box .cta-btn-taiki::after{
	font-family: 'Font Awesome 6 Free';
	content:'\f061';
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	font-size:20px;
	font-weight:bold;
	color:#fff;
	transition:all 0.3s ease;
}





html:has(.godzilla-LP),
body:has(.godzilla-LP){
	overflow-x:clip;
}
#container:has(.godzilla-LP){
	overflow:visible;
}
.godzilla-LP{
	max-width:100%;
}
.godzilla-LP-body{
	overflow:visible;
	max-width:100%;
	background:#000;
}

.godzilla-LP-body-bg{
	overflow:visible;
	width:100%;
	max-width:100%;
	min-width:0;
	display:flex;
	flex-direction:column;
	padding:0;
	margin:0;
	/* 背景動画は常に画面いっぱい（PC・SPとも）。
	   lvh = アドレスバー格納時の高さ。スクロール中に動画枠が伸縮・ガタつかない */
	--godzilla-movie-h:100vh;
	--godzilla-movie-h:100lvh;
	min-height:var(--godzilla-movie-h);
}
.godzilla-LP-body-bg .godzilla-LP-body-bg-movie{
	order:-1;
	position:sticky;
	top:0;
	flex:0 0 auto;
	width:100%;
	height:var(--godzilla-movie-h);
	z-index:0;
	overflow:hidden;
	pointer-events:none;
}
.godzilla-LP-body-bg .godzilla-LP-body-bg-movie video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.godzilla-LP-contents{
	width:100%;
	max-width:100%;
	min-width:0;
	padding-bottom:150px;
	position:relative;
	z-index:1;
	/* 動画の sticky は兄弟要素なので、ここを切っても固定は外れない */
	overflow-x:clip;
	margin-top:calc(var(--godzilla-movie-h) * -1);
}

.TOP-section{
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20vw 5vw 7vw;
}
@media screen and (max-width: 768px) {
	.TOP-section{
		padding:30vw 5vw 15vw;
	}
}
.TOP-section img{
	width:80%;
	max-width:502px;
}
@media screen and (max-width: 768px) {
	.TOP-section img{
		width:55%;
		max-width:251px;
	}
}

.HERO-section{
	width:100%;
}

.HERO-section .inner{
	--canvas: min(100vw, 1280px);      /* PCでの最大幅。ここだけ調整 */
	--u: calc(var(--canvas) / 100);   /* 1u = キャンバス幅の1% */
	width: var(--canvas);
	margin: 0 auto;
	padding: calc(140 * var(--u)) 12px 150px;
	position: relative;
}

.HERO-section .photo-king-kirinuki{
	width: calc(130 * var(--u));
	position: absolute;
	top: 0;
	left: calc(-12 * var(--u));
}
.HERO-section .photo-mecha-kirinuki{
	width: calc(95 * var(--u));
	position: absolute;
	top: calc(55 * var(--u));
	right: calc(-17.4 * var(--u));
}
.HERO-section .photo-godzilla-kirinuki{
	width: calc(100 * var(--u));
	position: absolute;
	top: calc(75 * var(--u));
	left: calc(-10 * var(--u));
}
.HERO-section [class*="-kirinuki"] img{
	display: block;
	width: 100%;
	height: auto;
}

.kaijuUp{
	animation-name: kaijuUp;
	animation-duration: 0.6s;
	animation-fill-mode: both;
}

@keyframes kaijuUp{
	0%{
		opacity: 0;
		transform: translateY(calc(6 * var(--u))) scale(1);
	}
	50%{
		opacity: 0.5;
	}
	100%{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* 動きを減らす設定の端末ではフェードだけにする */
@media (prefers-reduced-motion: reduce){
	@keyframes kaijuUp{
		from{ opacity: 0; }
		to{ opacity: 1; }
	}
}

.HERO-section .h1-ttl{
	width:100%;
	margin:0 auto;
	text-align:center;
}

.HERO-section .models-photo{
	width:100%;
	margin:0 auto 6.5vw;
	text-align:center;
}
.HERO-section .hero-foot{
	width:100%;
	margin:0 auto;
	text-align:center;
}



.item-block{
	width:100%;
	padding:80px 0 40px;
}
.item-block .base{
	width:100%;
	background:rgba(0,0,0,0.5);
	padding:0px 30px 80px;
	color:#fff;
}
@media screen and (max-width: 768px) {
	.item-block .base{
		padding:80px 12px;
	}
}

.godzilla-LP-foot-cta{
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	z-index:100;
	background:rgba(0,0,0,0.8);
}
.godzilla-LP-foot-cta-wrapper{
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:6px;
}
.godzilla-LP-foot-cta-wrapper .model-link{
	width:30%;
	max-width:120px;
	min-width:0;
	display:block;
	padding:2vw 0 3.5vw;
}

.model-link-btn-area{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.model-link-btn-area .model-link{
	width:33.33%;
	min-width:0;
	display:block;
	padding:2vw 0 3.5vw;
	text-align:center;
}
.model-link-btn-area .model-link i{
	font-size:26px;
	font-weight:bold;
	transition:all 0.3s ease;
}
.model-link-btn-area .model-link:hover i{
	transform:translateY(6px);
	transition:all 0.3s ease;
}

.model-link-btn-area .btn-godzilla i{
	color:#e60013;
}
.model-link-btn-area .btn-king i{
	color:#e83f0c;
}
.model-link-btn-area .btn-mecha i{
	color:#0081cc;
}

.item-block .item-head{
	width:100%;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.item-block .item-head .h2-ttl{
	width:45%;
	max-width:660px;
	min-width:0;
	text-align:center;
}
.item-block .item-head .h2-ttl h2{
	margin-bottom:24px;
}
@media screen and (max-width: 768px) {
	.item-block .item-head .h2-ttl h2{
		margin-bottom:0px;
	}
}


.item-block .item-head .item-spec{
	width:100%;
	padding:40px 0;
}
.item-block .item-head .item-spec .item-spec-table{
	width:100%;
	max-width:660px;
	margin:0 auto;
	color:#eee;
	font-size:15px;
	border-top:1px dotted #eee;
}
@media screen and (max-width: 768px) {
	.item-block .item-head .item-spec .item-spec-table{
		font-size:14px;
	}
}
.item-block .item-head .item-spec .item-spec-table .tb-box{
	border-bottom:1px dotted #eee;
	display:table;
	width:100%;
}
.item-block .item-head .item-spec .item-spec-table .tb-box .th{
	width:30%;
	padding:16px 0;
	text-align:center;
	display:table-cell;
}
.item-block .item-head .item-spec .item-spec-table .tb-box .td{
	width:70%;
	text-align:left;
	padding:16px 0;
	display:table-cell;
}


.item-block .item-head .item-kaiten-box{
	width:55%;
	min-width:0;
}


/* SP：ロゴと360度ビューを縦並びにして、回転ビューを横幅いっぱいに */
@media screen and (max-width: 768px) {
	.item-block .item-head{
		flex-direction:column;
		gap:24px;
	}
	.item-block .item-head .h2-ttl,
	.item-block .item-head .item-kaiten-box{
		width:100%;
	}
	.item-block .item-head .h2-ttl{
		max-width:420px;
	}
}

/* 360度回転ビュー
---------------------------------------------- */
.item-kaiten-box-photo{
	position:relative;
	width:100%;
	aspect-ratio:1 / 1;
	cursor:grab;
	touch-action:pan-y;          /* SP：縦スクロールはそのまま、横の動きで回転 */
	user-select:none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent;
	outline:none;
}
.item-kaiten-box-photo.is-dragging{
	cursor:grabbing;
}
.item-kaiten-box-photo:focus-visible{
	outline:2px solid rgba(255,255,255,0.6);
	outline-offset:4px;
}
.item-kaiten-box-photo .kaiten-poster,
.item-kaiten-box-photo .kaiten-canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	pointer-events:none;
}
.item-kaiten-box-photo .kaiten-poster{
	object-fit:contain;
}
/* canvas に1コマ目が描けたら差し替え */
.item-kaiten-box-photo.is-drawn .kaiten-poster{
	visibility:hidden;
}

/* 読み込みバー */
.item-kaiten-box-photo .kaiten-loading{
	position:absolute;
	left:20%;
	right:20%;
	bottom:14%;
	height:2px;
	background:rgba(255,255,255,0.15);
	opacity:0;
	transition:opacity 0.4s ease;
	pointer-events:none;
}
.item-kaiten-box-photo.is-loading .kaiten-loading{
	opacity:1;
}
.item-kaiten-box-photo .kaiten-loading span{
	display:block;
	width:0;
	height:100%;
	background:#e60013;
	transition:width 0.2s linear;
}

/* 操作ヒント */
.item-kaiten-box-photo .kaiten-hint{
	position:absolute;
	left:50%;
	bottom:7%;
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px 16px;
	border-radius:100vh;
	background:rgba(0,0,0,0.55);
	color:#fff;
	font-size:13px;
	white-space:nowrap;
	pointer-events:none;
}
@media screen and (max-width: 768px) {
	.item-kaiten-box-photo .kaiten-hint{
		bottom:2%;
	}
}
.item-kaiten-box-photo .kaiten-hint i{
	animation:kaiten-hint-swipe 1.6s ease-in-out infinite;
}
@keyframes kaiten-hint-swipe{
	0%,100%{ transform:translateX(-5px); }
	50%{ transform:translateX(5px); }
}
@media (prefers-reduced-motion: reduce){
	.item-kaiten-box-photo .kaiten-hint i{
		animation:none;
	}
}

.scroll-anime-text{
	width:100%;
	overflow:hidden;
	font-size:10vw;
	font-weight:bold;
	color:rgba(255,255,255,0.05);
	margin-bottom:3vw;
}
@media screen and (max-width: 768px) {
	.scroll-anime-text{
		font-size:24vw;
		margin-bottom:9vw;
	}
}

.scroll-anime-text-track{
	display:flex;
	width:max-content;
	animation:scroll-anime-marquee 40s linear infinite;
}
.scroll-anime-text span{
	flex:none;
	white-space:nowrap;
	padding-right:0.6em;
}
@keyframes scroll-anime-marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.scroll-anime-text-track{
		animation:none;
	}
}


.more-link-area{
	width:100%;
	padding:6vw 12px;
	display:flex;
	justify-content:center;
	align-items:stretch;
	gap:16px;
	flex-wrap:wrap;
}
@media screen and (max-width: 768px) {
	.more-link-area{
		padding:10vw 12px;
		gap:24px;
	}
}

.more-link-area .more-link{
	width:48%;
	max-width:480px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:24px 12px;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	border-radius:12px;
	border:2px solid #eee;	
	transition:all 0.3s ease;
	position:relative;
}
.more-link-area .more-link::after{
	content: '\f061';
	font-family: 'Font Awesome 6 Free';
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	font-size:20px;
	font-weight:bold;
	color:#fff;
	transition:all 0.3s ease;
}
.more-link-area .more-link:hover::after{
	transform:translateY(-50%) translateX(6px);
	transition:all 0.3s ease;
}
.more-link-area .more-link:hover{
	color:#ee270d;
	border-color:#ee270d;
	transition:all 0.3s ease;
}


@media screen and (max-width: 768px) {
	.more-link-area .more-link{
		width:100%;
	}
}

/* 怪獣ポイント */

.kaijyu-point-area .point-list{
	width:100%;
	max-width:1620px;
	padding:0 12px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	gap:1.5%;
}
.kaijyu-point-area .point-list .point-item{
	/* 4列 + gap 1.5% が3つで100%を超えないようにする */
	width:calc((100% - 4.5%) / 4);
	max-width:480px;
	flex:0 0 calc((100% - 4.5%) / 4);
}
@media screen and (max-width: 1080px) {
	.kaijyu-point-area .point-list .point-item{
		width:48%;
		max-width:none;
		flex:0 0 48%;
		margin-bottom:48px;
	}
}

@media screen and (max-width: 768px) {
	.kaijyu-point-area .point-list .point-item{
		width:100%;
		max-width:none;
		flex:0 0 100%;
		margin-bottom:48px;
	}
}
.kaijyu-point-area .point-list .point-item .photo{
	margin-bottom:16px;
}
.kaijyu-point-area .point-list .point-item .text{
	font-size:16px;
	font-weight:600;
	line-height:1.6;
	color:#fff;
}