@charset "UTF-8";

:root {
#	--body-bg: #000;
#	--brand-purple: #1a043d;
#	--brand-red: #cc0000;
#	--menu-bg: rgba(0, 0, 0, 0.5);
#	--text-white: #ffffff;
	/* セクションあたりのスクロール量（ここを増やすと切り替わりが遅くなります） */
	--section-scroll-amount: 200vh; 
}


/* -------------------------------------
	ローディングスクリーン
----------------------------------------*/
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
#	background-image: url('/assets/img/2/loading.jpg');
	background-image: url('/assets/img/2/BG00_1.jpg');
	background-size: cover;
	background-position: center;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

#loading-screen.loaded {
	opacity: 0;
	visibility: hidden;
}

.loading-container {
	width: 90%;
	max-width: 300px;
	text-align: center;
	position: relative;
	z-index: 10;
}

.loading-icon {
	width: 45%;
	margin: 0 auto 5%;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}
@media screen and (max-width: 750px) {
	.loading-icon {
		width: 45%;
		margin: 0 auto 5%;
	}
}

.loading-bar-bg {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	margin-bottom: 10px;
}

.loading-bar-fill {
	width: 0%;
	height: 100%;
	background: var(--text-white);
	box-shadow: 0 0 10px #fff;
}

.loading-percent {
	font-family: Arial, sans-serif;
	font-size: 1.2rem;
	color: var(--text-white);
}

/* -------------------------------------
	非固定セクション
----------------------------------------*/
#hero-section {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	z-index: 100;
	background-color: var(--brand-purple);
}

/* キービジュアル画像本体 */
.hero-img-wrap {
	position: relative;
	width: 100%;
	line-height: 0;
}

.hero-img {
	width: 100%;
	height: auto;
	display: block;
}

/* KV上のグラデーション（KVからCTAへ繋ぐためのもの） */
.hero-overlay {
	position: absolute;
#	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
#	height: 100%;
	height: 10%;
	background: linear-gradient(to bottom, rgba(26, 4, 61, 0) 0%, rgba(26, 4, 61, 1) 100%);
	pointer-events: none;
}

/* Switchロゴ */
.switch-logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 9%;
	z-index: 1001;
}



/* --- 固定表示用のビューポート (INTRODUCTION以降) --- */
#main-viewport {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
}

#main-viewport.visible {
	opacity: 1;
}

.bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	z-index: 1;
}

.bg-layer.active { opacity: 1; z-index: 2; }

/* 固定セクションのグラデーションオーバーレイを削除（不要な紫の重なりを解消） */
.kv-overlay-fixed {
	display: none;
}

/* 代わりにテキストの可読性を確保するための薄い暗幕（必要に応じて） */
.bg-dimmer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 5;
}



/* -------------------------------------
	コンテンツレイヤー(固定用) 
----------------------------------------*/
.content-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
#	transition: opacity 0.6s, transform 0.6s;
	transition: opacity 0.8s, transform 0.6s;
	z-index: 10; pointer-events: none;
}

.content-layer.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.section-text-box {
	text-align: center;
	max-width: 100%;
	padding: 40px;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(10px);
	border-left: 5px solid var(--brand-red);
}

.section-text-box h2 {
	font-size: calc(20 * 100vw / 1920);
	margin: 0 0 20px 0;
	letter-spacing: 0.2em;
}
.section-text-box p {
	font-size: 1.2rem;
	line-height: 2;
}

/* スクロール用スペーサー */
.scroll-spacer {
	height: var(--section-scroll-amount);
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	background: transparent;
}

@media screen and (max-width: 750px) {
	.switch-logo { width: 20%; }
	.section-text-box h2 { font-size: 2.5rem; }
}


/* -------------------------------------
	セクションタイトル（共通）
----------------------------------------*/
.section__title {
	font-family: Arial, sans-serif;
	text-align: center;
	font-size: calc(27 * 100vw / 1920);
	letter-spacing: 0.7vw;

	img {
		margin: auto;
		width: 8%;
	}
}
@media screen and (max-width: 750px) {
	.section__title {
		font-size: calc(27 * 100vw / 750);
		letter-spacing: 0.7vw;

		img {
			width: 15%;
		}
	}
}


/* -------------------------------------
	予約バナー
----------------------------------------*/
.eservation__area {
	width: 100%;
	background-image: url('/assets/img/2/CTA_BG_300.jpg');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1002;
	margin-top: -1px;
	padding: 3% 0;
}
@media screen and (max-width: 750px) {
	.eservation__area {
		background-image: url('/assets/img/2/CTA_BG_420.jpg');
		padding: 10% 0;
	}
}

.reservation__container {
	text-align: center;
	width: 35%;

	/* 発売日テキスト */
	.release-date {
		color: #ffffff;
		font-size: calc(55 * 100vw / 1920);
		margin-bottom: 1%;
		letter-spacing: 0.05em;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	}

	/* 予約ボタンの外枠 */
	.reserve-banner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
#		height: 80px;
		border: 1px solid rgba(255, 255, 255, 0.8);
		background-color: rgba(0, 0, 0, 0.6);
		text-decoration: none;
		overflow: hidden;
		transition: background-color 0.3s ease;
	}

	.reserve-banner:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	/* メインのテキスト（予約受付中） */
	.status-text {
		display: flex;
		align-items: center;
		color: #ff0000; /* 鮮やかな赤 */
		font-size: calc(48 * 100vw / 1920);
#		font-weight: bold;
		letter-spacing: 0.1em;
		width: 50%;
		justify-content: center;
		gap: 5px;
	}

	/* 「予」の文字が入る白い枠（バー） */
	.white-bar {
		background-color: #ffffff;
		color: #ff0000;
		padding: 2%;
	}

	/* 右側の赤い矢印（再生アイコン風） */
	.arrow-icon {
		position: absolute;
		right: 25px;
		width: 0;
		height: 0;
		border-style: solid;
#		border-width: 12px 0 12px 20px;
		border-width: 10px 0 10px 15px;
		border-color: transparent transparent transparent #ff0000;
	}
}
@media screen and (max-width: 750px) {
	.reservation__container {
		text-align: center;
		width: 80%;

	        .release-date {
			font-size: calc(45 * 100vw / 750);

		}

		.status-text {
			font-size: calc(48 * 100vw / 750);
		}
	}
}


/* -------------------------------------
	TRAILERS
----------------------------------------*/
.movie__container {
	background: linear-gradient(to bottom, var(--brand-purple) 0%, var(--brand-purple) 90%, #000000 100%);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 5% 0 10%;
	box-sizing: border-box;
}

.movie__title {
	text-align: center;
	font-size: calc(27 * 100vw / 1920);
}
.movie__title-image {
	width: 8%;
	margin: auto;
}

.movie__slider-wrap {
	width: 100%;
	background: black;
	padding: 0 2%;
	box-sizing: border-box;
	margin-top: 1%;
}

.movie__slider {
	width: 50%;
	margin: auto;
	position: relative;
}
@media screen and (max-width: 750px) {
	.movie__slider {
		width: 75%;
	}
}

.movie__slider .swiper-button-prev::before,
.movie__slider .swiper-button-next::before {
	content: none !important;
}
.movie__slider .movies-swiper-button-prev,
.movie__slider .movies-swiper-button-next {
	background-size: contain;
	background-repeat: no-repeat;
}
.movie__slider .movies-swiper-button-prev {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 30px solid #cccccc;
	position: absolute;
	top: 45%;
	left: -17%;
	z-index: 100;
}
@media screen and (max-width: 750px) {
	.movie__slider .movies-swiper-button-prev {
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-right: 22px solid #cccccc;
		left: -16%;
	}
}
.movie__slider .movies-swiper-button-next {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid #cccccc;
	position: absolute;
	top: 45%;
	right: -19%;
	z-index: 100;
}
@media screen and (max-width: 750px) {
	.movie__slider .movies-swiper-button-next {
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 22px solid #cccccc;
		right: -16%;
	}
}

.movie-title-wrap {
	border: 1px solid #fff;
	padding: 1% 2%;
	font-size: calc(41 * 100vw / 1920);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2vw;
}
@media screen and (max-width: 750px) {
	.movie-title-wrap {
		padding: 1% 2%;
		font-size: calc(37 * 100vw / 750);
	        width: 40%;
	        gap: 1vw;
	        flex-direction: column;
	}
}


/* -------------------------------------
	INTRODUCTION
----------------------------------------*/
.introduction__bg {
	position: relative;
	height: 100%;
	width: 100%;
}

.introduction__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/assets/img/2/ningyo_logo_wh.png");
#	opacity: 0.15; /* ←背景だけ透明 */
opacity: 0; /* 初期状態は消しておく */
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30%;
}
@media screen and (max-width: 750px) {
	.introduction__bg::before {
		background-size: 80%;
	}
}

.introduction__bg.animated::before {
/* アニメーションの適用 */
	animation: fadeInUp 1.0s ease-out forwards;
#	animation-delay: 1.0s; /* 少し遅れて開始させる（お好みで） */
}

/* アニメーションの定義 */
@keyframes fadeInUp {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.15;
	}
}

.introduction__text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: calc(55 * 100vw / 1920);
        text-align: center;
	opacity: 0;

	span {
		font-family: "DotGothic16";
	}
}
@media screen and (max-width: 750px) {
	.introduction__text {
		width: 80%;
		font-size: calc(65 * 100vw / 750);
	}
}

.introduction__text.animated {
	animation: fadeInUp2 1.0s ease-out forwards;

}
@keyframes fadeInUp2 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.content-layer-inner {
	opacity: 0;
	width: 100%;
#	height: 100%;
	padding: 3% 0;
}

.content-layer-inner.animated {
	animation: fadeInUp2 1.0s ease-out forwards;
	animation-delay: 0.5s;
}

.introduction__container {
	width: 70%;
#	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;


}
@media screen and (max-width: 750px) {
	.introduction__container {
		width: 80%;
	}
}

.introduction__title {
	font-size: calc(42 * 100vw / 1920);
#	font-size: clamp(14px, calc(25 * 100vw / 1920), 19px);
	margin: 10px 0 15px ;
	display: flex;
	gap: 15px;
}
@media screen and (max-width: 750px) {
	.introduction__title {
		margin: 10px 0 5px ;
		font-size: calc(32 * 100vw / 750);
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
}

.introduction__title-text {
	display: flex;
	align-items: center;

	span {
		background: #fff;
		color: #ff0000;
		padding: 5px;
	}
}
@media screen and (max-width: 750px) {
	.introduction__title-text {
		font-weight: bold;
	}
}

.introduction__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: auto;

	p {
		background: #6827b370;
		padding: 1% 3%;
	}

	.introduction__box-image {
		position: relative;

		img {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transition: all .8s; 
		}

		.image-change.active {
			position: relative;
			opacity: 1;
		}
	}

	.introduction__box-image.left,
	.introduction__box-image.right {
#		width: clamp(100px, 40%, 420px);
		width: 30%;
	}
	.introduction__box-image.left {
		order: 2;
	}

	.introduction__box-text.left,
	.introduction__box-text.right {
		width: 65%;
	#	font-size: calc(22 * 100vw / 1920);
		font-size: clamp(11px, calc(22 * 100vw / 1920), 15px);
		font-weight: bold;
	}
	.introduction__box-text.left {
		text-align: left;
	}
	.introduction__box-text.right {
		order: 3;
		text-align: left;
	}

	.introduction__box-thum {
		width: 5%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		align-self: stretch;
	}

	.introduction__box-thum.thumL {
		padding-left: 1%;
	}

	.introduction__box-thum.thumR {
		padding-right: 1%;
	}

	.introduction__box-button {
	        position: relative;
		cursor: pointer;
	}
	.introduction__box-button .on {
		position: relative;
		vertical-align: top;
		opacity: 0;
		transition: all .8s; 
	}
	.introduction__box-button .off {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		transition: all .8s; 
	}
	.introduction__box-button.active .on {
		opacity: 1;
	}
	.introduction__box-button.active .off {
		opacity: 0;
	}

}
@media screen and (max-width: 750px) {
	.introduction__box {
		flex-direction: column;

		.introduction__box-image.left,
		.introduction__box-image.right {
		    width: 100%;
#		    width: clamp(100px, 100%, 200px);
		}
		.introduction__box-text.left,
		.introduction__box-text.right {
			width: 100%;
#			font-size: calc(22 * 100vw / 750);
			font-size: clamp(11px, calc(22 * 100vw / 750), 15px);
		}
		.introduction__box-text.left {
			text-align: left;
		}
		.introduction__box-text.right {
			text-align: left;
		}
		.introduction__box-image.right {
		            order: 1;
		}
		.introduction__box-text.left {
		            order: 3;
		}
		.introduction__box-thum {
			order: 2;
			flex-direction: row;
			width: 90%;
			gap: 2vw;
			align-items: center;
			margin: 0 auto;
			font-size: calc(22 * 100vw / 750);
		}

		.introduction__box-thum.thumL {
			padding-left: 0;
		}

		.introduction__box-thum.thumR {
			padding-right: 0;
		}
	}
}

.section-text-box2 {
	font-size: calc(55 * 100vw / 1920);
	opacity: 0;
	transition: 1s;
	transition-delay: 1.5s;
}
@media screen and (max-width: 750px) {
	.section-text-box2 {
		font-size: calc(45 * 100vw / 750);
	}
}
.section-text-box2.animated {
	opacity: 1;
}


/* -------------------------------------
	CHARACTERS
----------------------------------------*/
.characters__container {
	background: linear-gradient(to bottom, #000000 0%, #527c8c 90%, #527c8c 100%);
	position: relative;
	z-index: 11;
	scroll-snap-align: start; /* スナップを有効にする */
}

.characters__wrap {
	position: relative;
}
@media screen and (min-width: 751px) {
	.characters__wrap:before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(/assets/img/2/ningyo_logo_bl.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 45%;
		z-index: -1;
		opacity: 1;
	}
}

.characters__icon-box {
	width: 80%;
	margin: auto;
	padding: 3% 0;
#	display: flex;
#	flex-wrap: wrap;
	gap: 2vw;
#	align-items: center;
#	justify-content: center;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	place-items: center;
	place-content: center;

}
@media screen and (max-width: 750px) {
	.characters__icon-box {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
}

.characters__icon-image {
	width: 100%;
	border: 1px solid #666666;
	cursor: pointer;
}
@media screen and (max-width: 750px) {
	.characters__icon-image {
		width: 14%;
	}
}
.characters__icon-image.active {
	border: 1px solid red;
}

.card-container-wrap {
	position: relative;
	width: 90%;
	margin: auto;
}
@media screen and (max-width: 750px) {
	.card-container-wrap {
		width: 100%;
	}
}

@media screen and (max-width: 750px) {
	.card-container-wrap:before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(/assets/img/2/ningyo_logo_bl.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 80%;
		z-index: -1;
		opacity: 1;
	}
}

.card-container {
#	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
	transition: all .8s; 

	width: 100%;
	overflow: hidden;
	display: flex;
	margin: auto;
	align-items: flex-start;
	gap: 2vw;
}
@media screen and (max-width: 750px) {
	.card-container {
		width: 100%;
		flex-direction: column;
	}
}
.card-container.active {
	position: relative;
	z-index: 11;
	left: 0;
	top: 0;

	opacity: 1;
}

/* キャラクター画像エリア */
.character-area {
#	flex: 0 0 320px;
	flex: 0 0 25%;
	position: relative;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
@media screen and (max-width: 750px) {
	.character-area {
		order: 2;
		width: 60%;
		margin: auto;
		z-index: 1;
	}
}

.character-placeholder {
	width: 100%;
}

.character-menu {
	display: none;
}
@media screen and (max-width: 750px) {
	.character-menu {
		display: block;
		position: absolute;
		bottom: 0;
		right: -20%;
		width: 20%;
		cursor: pointer;
	}
}

/* テキストコンテンツエリア */
.content-area {
	flex: 1;
	z-index: 20;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
}
@media screen and (max-width: 750px) {
	.content-area {
		display: contents;
	}
}

/* 名前部分の黒い帯 */
.name-banner {
	background-color: #000;
	color: #fff;
#	padding: 12px 30px;
	display: flex;
	align-items: center;
	width: 100%;
}
@media screen and (max-width: 750px) {
	.name-banner {
		order: 1;
		flex-wrap: wrap;
		justify-content: center;
	}
}

.first-kanji-box {
	background-color: #fff;
	color: #d10000;
#	width: 40px;
#	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
#	font-size: 28px;
	font-size: calc(45 * 100vw / 1920);
	font-weight: bold;
	margin-right: 10px;
	padding: 1%;
}
@media screen and (max-width: 750px) {
	.first-kanji-box {
		font-size: calc(45 * 100vw / 750);
		white-space: nowrap;
	}
}

.name-text {
#	font-size: 32px;
	font-size: calc(47 * 100vw / 1920);
	letter-spacing: 4px;
	font-weight: 700;
}
@media screen and (max-width: 750px) {
	.name-text {
		font-size: calc(47 * 100vw / 750);
		white-space: nowrap;
		align-items: center;
	}
}

.cv-text {
	font-size: calc(34 * 100vw / 1920);
	font-weight: 400;
}
@media screen and (max-width: 750px) {
	.cv-text {
		width: 100%;
		text-align: center;
		font-size: calc(34 * 100vw / 750);
	}
}

/* 赤い見出し */
.catchphrase {
	color: #d10000;
#	font-size: 24px;
	font-size: calc(37 * 100vw / 1920);
	font-weight: 900;
	background: #0000009e;
	padding-top: 2%;
	padding-bottom: 2%;
#	padding-left: 30px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}
@media screen and (max-width: 750px) {
	.catchphrase {
		order: 4;
		width: 100%;
		text-align: center;
		font-size: calc(37 * 100vw / 750);
	}
}

/* 説明文 */
.description {
	color: #fff;
	background: #0000009e;
#	font-size: 15px;
	font-size: calc(25 * 100vw / 1920);
	line-height: 1.8;
	padding: 0 2%;
	text-align: justify;
	word-break: break-all;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	flex: 1 1 auto;
}
@media screen and (max-width: 750px) {
	.description {
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: 65%;
		font-size: calc(22 * 100vw / 750);
		padding: 3%;
		font-weight: bold;

		opacity: 0;
		transition: 0.3s ease-in;
	}
}
@media screen and (max-width: 750px) {
	.description.active {
		opacity: 1;
		z-index: 2;
	}
}

.description b {
	color: #fff;
	font-weight: 700;
}
.description_close {
	display: none;
}
@media screen and (max-width: 750px) {
	.description_close {
		position: absolute;
		bottom: 4%;
		left: 50%;
		transform: translateX(-50%);
		border: 1px solid #fff;
		padding: 1% 5%;
		display: block;
		cursor: pointer;
	}
}


/* -------------------------------------
	CONTENTS
----------------------------------------*/
.contents__container {
	background: #527c8cff;
	padding: 5% 0;
	position: relative;
	z-index: 1;
}
.hr_custom {
	height: 2px;
	margin: 3% auto;
	width: 100%;
}
@media screen and (max-width: 750px) {
	.hr_custom {
		margin: 7% auto;
	}
}

/* メインコンテナ */
.heading-container {
	font-family: Arial, sans-serif;
	border: 1.5px solid #ffffff; /* 白い細い枠線 */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px 28px;
	box-sizing: border-box;
#	width: fit-content;
	width: 22%;
#	cursor: pointer;
	transition: opacity 0.2s;
	margin-bottom: 2%;
}
@media screen and (max-width: 750px) {
	.heading-container {
		width: 45%;
		margin-bottom: 5%;
	}
}

.heading-container:hover {
	opacity: 0.9;
}

/* テキスト全体のスタイル */
.heading-main-text {
	color: #ffffff;
#	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
#	font-size: 24px;
	font-size: calc(24 * 100vw / 1920);
	font-weight: 700; /* 太字 */
	white-space: nowrap;
	letter-spacing: 0.08em; /* 文字間隔の微調整 */
	display: flex;
	align-items: center;
}
@media screen and (max-width: 750px) {
	.heading-main-text {
		font-size: calc(24 * 100vw / 750);
	}
}
/* セパレーター（|）のスタイル */
.heading-separator {
	margin: 0 12px;
	font-weight: 300; /* 縦棒は少し細めに */
# 	font-size: 0.95em;
}

/* 英字部分の微調整 */
.heading-en-text {
#	font-family: "Verdana", sans-serif; /* 英字用に少し横広のフォントを指定 */
#	font-size: 0.95em;
}

.contents__container-inner {
	width: 90%;
	margin: 0 auto 5%;
}


/* --- 最新 | NEWS --- */
.contents__news-container {
	background: #000;
	padding: 4% 0;
	margin-top: 4%;
}
.contents__news-wrap {
	width: 90%;
	margin: 0 auto;
}

.news-wrapper {
	width: 90%;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	user-select: none;
}
@media screen and (max-width: 750px) {
	.news-wrapper {
		width: 100%;
	}
}

/* 矢印スタイル */
.arrow {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	cursor: pointer;
	margin: 5px 0;
	transition: opacity 0.3s ease, visibility 0.3s;
	opacity: 1;
	visibility: visible;
}

/* 非表示状態のクラス */
.arrow.hidden {
	opacity: 0;
	visibility: hidden;
	cursor: default;
}

.arrow-up2 {
	border-bottom: 10px solid #fff;
}

.arrow-down2 {
	border-top: 10px solid #fff;
}

/* ニュース表示エリア */
.news-display-area {
	width: 100%;
#	border: 2px dashed #ff0000;
#	padding: 15px 10px;
	margin: 2% 0;
	box-sizing: border-box;
	height: 140px;
	position: relative;

	/* スクロール有効化 */
	overflow-y: auto;
	scroll-behavior: smooth;

	/* スクロールバーを隠す (Chrome, Safari, Edge) */
	-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 750px) {
	.news-display-area {
		height: 200px;
	}
}

/* スクロールバーを隠す (IE, Firefox) */
.news-display-area {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.news-display-area::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
#	font-size: 14px;
	font-size: calc(30 * 100vw / 1920);
	line-height: 1.4;
	color: #fff;
	gap: 3vw;
}
@media screen and (max-width: 750px) {
	.news-item {
		font-size: calc(30 * 100vw / 750);
		gap: 3vw;
	}
}

.news-date {
#	min-width: 90px;
#	margin-right: 10px;
}

.news-content {
	flex: 1;
	word-break: break-all;
}

.badge-new {
	color: #ff0000;
	font-weight: bold;
	margin-left: 5px;
	white-space: nowrap;
}

.placeholder-dots {
	letter-spacing: 2px;
}


/* --- 特報 | EXTRAS --- */
.extras__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-items: center;
	place-content: center;
	gap: 1vw;
	margin-bottom: 3%;
}
@media screen and (max-width: 750px) {
	.extras__container {
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
	}
}

/* メインコンテナ（外枠） */
.card {
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	height: 100%;
}

/* 内部のコンテンツエリア */
.inner-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 上部のグレーエリア（画像プレースホルダー） */
.image-section {

}

/* 下部の黒いテキストエリア */
.text-section {
	background-color: #1a2226;
	padding: 12px 10px;
	color: #ffffff;
	height: 100%;
}

/* 日付部分 */
.date {
	font-size: calc(21 * 100vw / 1920);
	font-weight: bold;
	margin-bottom: 8px;
	letter-spacing: 1px;
}
@media screen and (max-width: 750px) {
	.date {
		font-size: calc(21 * 100vw / 750);
	}
}

.number-list {
	font-size: calc(20 * 100vw / 1920);
	line-height: 1.5;
	word-spacing: 4px;
	letter-spacing: 0.5px;

	/* 2行で省略記号を表示するための設定 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media screen and (max-width: 750px) {
	.number-list {
		font-size: calc(20 * 100vw / 750);
	}
}

.design-box {
	width: 45%;
	padding: 1%;
	border: 1.5px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
	cursor: pointer;
	margin: auto;

}

/* 中央の逆三角形（下向き矢印）の再現 */
.arrow-down {
	width: 0;
	height: 0;
	/* 左右のボーダーを透明にして三角形を作るCSS手法 */
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	/* 上のボーダーに色をつけて底辺とする */
	border-top: 8px solid #ffffff;
	/* 若干の丸みを持たせるための調整（必要に応じて） */
}

/* ホバー時の視覚効果（オプション） */
.design-box:hover {
	background-color: rgba(255, 255, 255, 0.05);
}


/* --- 用語 | GLOSSARY --- */
.glossary__container {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 750px) {
	.glossary__container {
		flex-direction: column;
		gap: 3vw;
	}
}

.glossary__container-left {
	width: 23%;
	font-size: calc(25 * 100vw / 1920);

	ul {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
#		place-items: center;
#		place-content: center;
		gap: 1vw;
	}

	li {
		border-bottom: 1px solid #fff;
		padding-bottom: 4%;
		cursor: pointer;
	}

	.glossary-item.active {
		color: #ffd966;
	}
}
@media screen and (max-width: 750px) {
	.glossary__container-left {
		width: 100%;
		font-size: calc(25 * 100vw / 750);

		ul {
			grid-template-columns: repeat(2, 1fr);
			gap: unset;
			border-top: 1px solid #fff;
			border-left: 1px solid #fff;
		}

		li {
			box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #fff;
			border-bottom: unset;
			padding: 3%;
		}
	}
}

.glossary__container-right {
	position: relative;
	width: 70%;
	font-size: calc(25 * 100vw / 1920);

	.glossary__image {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		place-items: center;
		place-content: center;
		gap: 1vw;
	}
}
@media screen and (max-width: 750px) {
	.glossary__container-right {
		width: 100%;
		font-size: calc(25 * 100vw / 750);
	}
}
.glossary__info {
	display: flex;
	flex-direction: column;
	gap: 1vw;

	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 0.8s 0s ease-out;

}
@media screen and (max-width: 750px) {
	.glossary__info {
		gap: 3vw;
	}
}
.glossary__info.active {
	position: relative;
	opacity: 1;
}


/* --- 舞台 | SETTING --- */
.setting__container {
	display: flex;
	flex-direction: column;
	gap: 3vw;
	font-size: calc(25 * 100vw / 1920);

	ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		place-items: center;
		place-content: center;
		gap: 1vw;
		padding: 1vw;
		background: #000000;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 750px) {
	.setting__container {
		font-size: calc(25 * 100vw / 750);

		ul {
			grid-template-columns: repeat(2, 1fr);
			gap: 2vw;
			padding: 2vw;
		}
	}
}


/* --- 前作 | FIRST GAME --- */
.firstgame__container {
	display: flex;
	flex-direction: column;
	gap: 3vw;
	font-size: calc(25 * 100vw / 1920);
}
@media screen and (max-width: 750px) {
	.firstgame__container {
		font-size: calc(25 * 100vw / 750);
	}
}

/* 全体のレイアウト設定 */
.slider-layout {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	position: relative;

}

/* 中央のスライダー部分のみ背景色を設定 */
.slider-content-area {
	background-color: #000000;
	padding: 2%;
	flex-grow: 1; /* 中央のエリアを広げる */
	margin: 0 1%; /* ボタンとの間の微調整 */
	position: relative;
	overflow: hidden; /* ここで隣のスライドを確実にカット */
}
@media screen and (max-width: 750px) {
	.slider-content-area {
		margin: 0 2%; /* ボタンとの間の微調整 */
	}
}

/* スライダー本体の表示領域 */
.swiper {
	width: 100%;
	overflow: hidden; 
}

.swiper-slide {
#	text-align: center;
#	font-size: 24px;
#	display: flex;
#	justify-content: center;
#	align-items: center;
#	color: white;
#	font-weight: bold;
#	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
#	background-repeat: no-repeat;
#	background-size: cover;
#	background-position: center;
#	height: 100%;
}
.js-modal-video {
	cursor: pointer;
}

/* ナビゲーションボタン（背景色エリアの外に配置） */
/* Swiper標準の absolute 配置を解除して flex アイテムとして扱うための設定 */
.custom-button {
	position: relative;
#	width: 44px;
#	height: 44px;
	flex-shrink: 0; /* ボタンが潰れないように固定 */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2d3748; /* ボタンの色を背景色に合わせる */
}

.custom-button::after {
	font-family: swiper-icons;
	font-size: 32px;
	font-weight: bold;
}

#.button-prev::after { content: 'prev'; }
.button-prev::after {
	content: '';
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 30px solid #fff;
}
@media screen and (max-width: 750px) {
	.button-prev::after {
		content: '';
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-right: 22px solid #fff;
	}
}

#.button-next::after { content: 'next'; }
.button-next::after {
	content: '';
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid #fff;
}
@media screen and (max-width: 750px) {
	.button-next::after {
		content: '';
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 22px solid #fff;
	}
}

/* ページネーション */
.swiper-pagination {
	bottom: 5px !important;
}
.swiper-pagination-bullet {
	background: #cbd5e1;
	opacity: 0.5;
}
.swiper-pagination-bullet-active {
	background: #ffffff;
	opacity: 1;
}

/* 説明文エリアのアニメーション強化 */
#description-container {
	/* Safari等のブラウザで安定させるため transform と visibility を追加 */
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	min-height: calc(70 * 100vw / 750);
}
@media screen and (max-width: 750px) {
	#description-container {
		min-height: calc(250 * 100vw / 750);
	}
}

/* アクティブ時の状態 */
#description-container.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}


.firstgame__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 45%;
	background-color: #2b393f; /* ボタン内部の濃いグレーグリーン */
	border: 2px solid #eccf75; /* 特徴的なゴールドの細い境界線 */
	text-decoration: none;
	padding: 0.5% 2%;
	margin-top: 2%;
	margin-left: auto;
	margin-right: 3%;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	outline: none;
	cursor: pointer;
}
@media screen and (max-width: 750px) {
	.firstgame__btn {
		width: 90%;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* テキスト部分のスタイル */
.firstgame__btn-text {
	color: #ffffff;
	font-size: calc(40 * 100vw / 1920);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
	flex-grow: 1;
	margin-left: 24px; /* 右側の矢印とのバランスを取るため少し左を空ける */
	white-space: nowrap;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 750px) {
	.firstgame__btn-text {
		font-size: calc(40 * 100vw / 750);
	}
}
/* 矢印アイコンコンテナ */
.firstgame__btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

/* SVGの矢印（シャープな描画を維持するためSVGを使用） */
.firstgame__btn-icon svg {
	width: 16px;
	height: 20px;
	fill: #ffffff;
}

/* インタラクション：ホバー時の洗練されたエフェクト */
.firstgame__btn:hover {
	background-color: #35474f; /* わずかに明るくして反応を示す */
	border-color: #fff4d0; /* ゴールドを明るく輝かせる */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 柔らかな陰影 */
}

.firstgame__btn:hover .firstgame__btn-icon {
	transform: translateX(4px); /* 右側へわずかにスライドしてクリックを促す */
}

/* インタラクション：クリック（アクティブ）時 */
.firstgame__btn:active {
	transform: scale(0.99); /* わずかに沈み込むリアルなクリック感 */
	background-color: #232e33;
}


/* --- シェア --- */
.share_link_x {
	position: relative;

	 a {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 44%;
		padding: 1.5%;
	}
}
@media screen and (max-width: 750px) {
	.share_link_x {

		 a {
			width: 92%;
			padding: 4.5%;
		}
	}
}


/* --- ガイドライン --- */

.banner-container-wrap {
	width: 44%;
	margin: 5% auto 0;
}
@media screen and (max-width: 750px) {
	.banner-container-wrap {
		width: 90%;
	}
}
/* メインコンテナ */
.banner-container {
	background-color: #000000;
	border: 2px solid #ffffff;
	display: flex;
	align-items: center;
	height: 43px;
	padding: 0;
	box-sizing: border-box;
	width: fit-content;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	width: 100%;
	justify-content: center;
}
@media screen and (max-width: 750px) {
	.banner-container {
#		width: 90%;
		height: 33px;
	}
}

/* 左側の白いアイコン領域 */
.icon-box {
#	background-color: #ffffff;
#	height: 100%;
#	width: 30px;
#	display: flex;
#	justify-content: center;
#	align-items: center;
#	flex-shrink: 0;
}

/* 「動」の文字 */
.icon-text {
	color: #cc0000;
	font-weight: 400;
	font-size: calc(30 * 100vw / 1920);
#	line-height: 1;
#	margin-top: 4px;
	letter-spacing: 0.02em;
}
@media screen and (max-width: 750px) {
	.icon-text {
		font-size: calc(30 * 100vw / 750);
	}
}

/* 右側のメインテキスト */
.main-text {
	color: #ffffff;
	font-size: calc(30 * 100vw / 1920);
	font-weight: 400;
#	padding-left: 4px;
	white-space: nowrap;
	letter-spacing: 0.02em;
}
@media screen and (max-width: 750px) {
	.main-text {
		font-size: calc(27 * 100vw / 750);
	}
}


/* -------------------------------------
	PRODUCTS
----------------------------------------*/
.products__container {
	background: linear-gradient(to bottom, #527c8c 0%, #000000 90%, #000000 100%);
	position: relative;
	z-index: 1;
	padding: 6% 0;
}

.footer__software {
	background: 
		/* 1枚目: ロゴ (前面) */
		url(/assets/img/2/WGTM_logo_wh700.png) center 9% / 40% auto no-repeat,
		/* 2枚目: 背景画像 + 背景色 (背面) */
		url(/assets/img/2/BG_footer01.png) center top / 100% auto no-repeat #211c1d;
	padding: 20% 0 10%;
	position: relative;
	z-index: 11;
}
@media screen and (max-width: 750px) {
	.footer__software {
		background: 
			/* 1枚目: ロゴ (前面) */
			url(/assets/img/2/WGTM_logo_wh700.png) center 7% / 90% auto no-repeat,
			/* 2枚目: 背景画像 + 背景色 (背面) */
			url(/assets/img/2/BG_footer01.png) center top / 100% auto no-repeat #211c1d;
		padding: 43% 0 10%;
	}
}

.footer__software-obi {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2% 0;
	background: rgba(204, 0, 0, 0.5);
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: calc(45 * 100vw / 1920);
}
@media screen and (max-width: 750px) {
	.footer__software-obi {
		font-size: calc(45 * 100vw / 750);
	}
}

.footer__software-bg {
	position: absolute;
	top: 0;
	left: 0;
}

.footer__software-bg2 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40%;
}

.footer__software-info {
	position: relative;
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 750px) {
	.footer__software-info {
		width: 90%;
		flex-direction: column;
		gap: 2vw;
	}
}


.footer__software-info-left {
	width: 35%;
	display: flex;
	flex-direction: column;
	gap: 1vw;
}
@media screen and (max-width: 750px) {
	.footer__software-info-left {
		flex-direction: unset;
		width: 90%;
		gap: 4vw;
		align-items: end;
		justify-content: center;
		margin: auto;
	}
}


.footer__software-info-right {
	width: 61%;
}
@media screen and (max-width: 750px) {
	.footer__software-info-right {
		width: 100%;
	}
}

.footer__software-info-pkg {

}
@media screen and (max-width: 750px) {
	.footer__software-info-pkg {
		width: 70%;
	}
}

.footer__software-info-cero {
	width: 15%;
}
@media screen and (max-width: 750px) {
	.footer__software-info-cero {
		width: 16%;
	}
}


/** 製品紹介 **/
.container {
	width: 100%;
	height: 100%;
	background: #000000d6;
	padding: 2%;
}
@media screen and (max-width: 750px) {
	.container {
		background: #211c1d;
		width: 100%;
	}
}

.info-grid {
	display: grid;
	grid-template-columns: 10vw 1fr;
	gap: 0.2vw 0;
	margin-bottom: 3%;
	font-size: calc(23 * 100vw / 1920);
}
@media screen and (max-width: 750px) {
	.info-grid {
		grid-template-columns: 24vw 1fr;
		gap: 1vw 0;
		font-size: calc(27 * 100vw / 750);
	}
}

.label {
	color: #ffffff;
}

.value {
	font-weight: bold;
}

.price-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}



.button-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1vw;
	margin-bottom: 3%;
}
@media screen and (max-width: 750px) {
	.button-grid {
		width: 90%;
		grid-template-columns: 1fr;
		gap: 2vw;
		margin: 0 auto 5%;
	}
}

.buy-button {
	background-color: black;
	border: 2px solid #ff7e00; /* 特徴的なオレンジの境界線 */
	color: white;
	padding: 2% 3%;
	font-size: calc(23 * 100vw / 1920);
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	transition: background-color 0.2s;
}
@media screen and (max-width: 750px) {
	.buy-button {
		font-size: calc(32 * 100vw / 750);
	}
}

.buy-button:hover {
	background-color: #333;
}

.arrow2 {
	font-size: 1.2rem;
	margin-left: 10px;
}


.footer-note {
	display: flex;
	align-items: center;
	gap: 1.2vw;
	font-size: calc(23 * 100vw / 1920);
}
@media screen and (max-width: 750px) {
	.footer-note {
		font-size: calc(25 * 100vw / 750);
	}
}

.store-icon {
	width: 6%;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}


/* -------------------------------------
	xxxxxxxx
----------------------------------------*/
/* -------------------------------------
	xxxxxxxx
----------------------------------------*/