@charset "utf-8";

/* ==========================================================================
   [ly_] Layout (サイトの骨組み)
   ========================================================================== */
.ly_section {
	width: 100%;
	padding: 120px 0;
}

/* ==========================================================================
   [cm_] Common (全ページ共通パーツ)
   ========================================================================== */
.cm_inner {
	width: 100%;
	max-width: var(--width-wide);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* 共通セクションタイトル */
.cm_section_title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 60px;
}
.cm_section_title_en {
	font-family: var(--font-en);
	font-size: var(--fs-xxl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-075);
	letter-spacing: 0.05em;
	color: var(--color-main);
}

@media (max-width: 768px) {
	.cm_section_title_en {
		line-height: var(--lh-050);
	}
}

.cm_section_title_ja {
	font-size: var(--fs-sm);
	color: var(--color-text-sub);
	letter-spacing: 0.2em;
	margin-top: 8px;
}

.cm_section_header {
	display: flex;
	justify-content: space-between;
	align-items: center; /* 上下中央揃え */
	border-bottom: 2px solid var(--color-border-light);
	padding-bottom: 15px;
	margin-bottom: 40px;
}
.cm_section_header .cm_section_title {
	margin-bottom: 0; /* cm_section_title が元々持っている下余白を消す */
}

/* --- 共通ボタン --- */
.cm_btn_area {
	margin-top: 40px;
}
.cm_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 40px;
	color: var(--color-main);
	border: var(--bd-thin) solid var(--color-main);
	border-radius: var(--bd-thick);
	font-size: var(--fs-sm);
	font-family: var(--font-en);
	font-weight: var(--fw-bold);
	transition: all var(--transition-base);
}
.cm_btn:hover {
	background-color: var(--color-main);
	border: var(--bd-thin) solid var(--color-main);
	color: var(--color-bg-base);
	opacity: 1;
}
.cm_btn_icon {
	font-size: 1.2em;
	transition: transform var(--transition-base);
}
.cm_btn:hover .cm_btn_icon.is_left {
	transform: translateX(-5px);
}
.cm_btn:hover .cm_btn_icon.is_right {
	transform: translateX(5px);
}

/* ==========================================================================
   [cm_] Lower Page Common (下層ページの共通パーツ)
   ========================================================================== */

/* 下層ページのトップ見出し */
.cm_page_header {
	width: 100%;
	padding: 60px 0 70px;
	text-align: left;
	overflow: hidden;
	background-color: var(--color-bg-black);
	color: var(--color-main-wh);
}

.cm_page_title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

.cm_page_title_en {
	display: flex;
	align-items: center;
	gap: 20px; /* 文字と棒の間の隙間 */

	font-family: var(--font-en);
	font-size: var(--fs-xxl);
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	color: var(--color-main-wh);
}

/* ENタイトルの横の棒線 */
.cm_page_title_en::after {
	content: '';
	width: 80px;
	height: 1px;
	background-color: var(--color-border-wh);
}

.cm_page_title_ja {
	font-size: var(--fs-sm);
	color: var(--color-text-sub);
	letter-spacing: 0.2em;
	margin-top: var(--space-sm);
	text-align: left;
}

@media (max-width: 768px) {
	.cm_page_header {
		padding: 100px 0 40px;
	}
}

/* ページネーション（ページ送り） */
.cm_pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 60px;
}
.cm_pagination span,
.cm_pagination a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 15px;
	border-radius: 50px; /* 角丸ではなくカプセル型で統一！ */
	font-size: var(--fs-sm);
	font-family: var(--font-en);
	font-weight: bold;
	text-decoration: none;
	transition: all var(--transition-base);
}
.cm_page_current {
	background-color: var(--color-main); /* 黒テーマを適用 */
	color: var(--color-bg-base);
}
.cm_page_link {
	background-color: transparent;
	color: var(--color-text-main);
	border: 1px solid var(--color-border-dark);
}
.cm_page_link:hover {
	background-color: var(--color-main);
	border-color: var(--color-main);
	color: var(--color-bg-base);
}

/* ==========================================================================
   [ly_] Header
   ========================================================================== */
.ly_header {
	width: 100%;
	height: 64px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background-color: var(--color-bg-base);
}
.ly_header_inner {
	max-width: var(--width-wide);
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ly_header_logo {
	display: flex;
	align-items: center;
	align-items: center;
	margin: 0;
	padding: 0;
}
.ly_header_logolink {
	display: flex;
	align-items: center;
	height: 100%;
	transition: opacity var(--transition-base);
}
.ly_header_logoimg {
	display: block;
	height: 32px;
	width: auto;
	object-fit: contain;
}

/* PC Navigation */
.ly_gnav_list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 30px;
}
.ly_gnav_list li:first-child {
	display: none;
}

.ly_gnav_link {
	display: inline-block;
	font-weight: var(--fw-bold);
	color: var(--color-text-main);
	position: relative;
	font-family: var(--font-en);
}

/* NEWSとMOVIE、MOVIEとCONTACTの間に棒線を入れる */
.ly_gnav_item:nth-child(n + 3)::before {
	content: '|';
	color: var(--color-main); /* 棒線の色 */
	margin-right: 30px; /* 棒線と右側の文字との距離（既存のgapと合わせると綺麗です） */
}

.ly_gnav_list {
	display: flex;
	align-items: center;
	gap: 0; /* 疑似要素で余白を制御するため、一旦0にするか調整します */
}

/* 棒線の左側の余白（NEWSと棒線の間など）を作る */
.ly_gnav_item:nth-child(n + 3) {
	margin-left: 30px;
}

.cm_menu_btn {
	display: none;
}

/* ==========================================================================
   [ly_] Footer
   ========================================================================== */
.ly_footer {
	background: var(--color-main);
	color: var(--color-bg-base);
	padding: 80px 0 40px;
}
.ly_footer_inner {
	width: 100%;
	max-width: var(--width-wide);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ly_footer_logo {
	font-size: var(--fs-xl);
	font-weight: 800;
	text-align: center;
	margin-bottom: 40px;
	font-family: var(--font-en);
	line-height: 1.2;
}
.ly_footer_logo span {
	font-size: var(--fs-sm);
	font-weight: normal;
	color: #888;
	display: block;
	letter-spacing: 0.1em;
}
.ly_footer_nav_list {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0 0 60px;
}
.ly_footer_nav_list a {
	color: var(--color-bg-base);
	font-size: var(--fs-sm);
	position: relative;
	padding-bottom: 5px;
	font-family: var(--font-en);
}
.ly_footer_nav_list a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--color-bg-base);
	transition: width var(--transition-base);
}
.ly_footer_nav_list a:hover::after {
	width: 100%;
}
.ly_footer_copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.credit_row {
	font-size: var(--fs-xs);
	color: var(--color-border-dark);
}

/* ==========================================================================
   [ly_transition] Page Transition Animation (ページ遷移アニメーション)
   ========================================================================== */

/* 画面全体を覆う真っ白な幕 */
.ly_transition {
	position: fixed;
	inset: 0;
	background-color: var(--color-bg-base);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 幕の開け閉めを少しスピーディーに（0.8s → 0.6s）して快適に！ */
	transition:
		opacity 0.6s ease,
		visibility 0.6s ease;
}

/* 中央のロゴ */
.ly_transition_logo {
	width: 280px;
	opacity: 0;
	animation: fadeUpLogo 1.2s ease 0.2s forwards;
}

@keyframes fadeUpLogo {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------------------
   JSで付与する状態クラス
   ------------------------------------------- */
/* ① ページ読み込み完了時（幕を透明にして奥に隠す） */
body.is-loaded .ly_transition {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ② 別のページへ移動する時（真っ白な幕だけを出現させる） */
body.is-leaving .ly_transition {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ▼ 修正！旧ページでロゴが復活するバグを完全に封じる */
body.is-leaving .ly_transition_logo {
	animation: none !important;
	display: none !important;
}

/* ▼ 追加！2回目以降のアクセス（サイト内回遊時）はロゴを出さない */
body.is-visited .ly_transition_logo {
	animation: none !important;
	display: none !important;
}

/* ==========================================================================
   SP Responsive (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.ly_section {
		padding: 80px 0;
	}

	/* Header SP */
	.ly_header {
		height: 60px;
		padding: 0 16px;
	}
	.ly_header_inner {
		padding: 0;
	}
	.ly_header_logoimg {
		height: 32px;
	}

	/* Hamburger Menu Button */
	.cm_menu_btn {
		display: inline-flex;
		width: 48px;
		height: 48px;
		background: transparent;
		border: 0;
		cursor: pointer;
		position: relative;
		z-index: 2000;
	}
	.cm_menu_btn_line {
		position: absolute;
		left: 50%;
		width: 24px;
		height: 2px;
		background-color: var(--color-main);
		transform: translateX(-50%);
		transition: all var(--transition-base);
	}
	.cm_menu_btn_line:nth-child(1) {
		top: 16px;
	}
	.cm_menu_btn_line:nth-child(2) {
		top: 23px;
	}
	.cm_menu_btn_line:nth-child(3) {
		top: 30px;
	}
	body.is-menu-open .cm_menu_btn_line:nth-child(1) {
		top: 23px;
		transform: translateX(-50%) rotate(45deg);
	}
	body.is-menu-open .cm_menu_btn_line:nth-child(2) {
		opacity: 0;
	}
	body.is-menu-open .cm_menu_btn_line:nth-child(3) {
		top: 23px;
		transform: translateX(-50%) rotate(-45deg);
	}

	.cm_btn {
		padding: 10px 20px; /* 左右の余白を 40px から 20px に縮める */
		font-size: var(--fs-xs); /* 文字サイズも1段階小さく */
		gap: 8px; /* 矢印との隙間も少し詰める */
	}

	/* SP Nav Overlay */
	.ly_gnav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: var(--color-bg-base);
		z-index: 1500;
		display: flex;
		flex-direction: column;
		padding: 80px 24px 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--transition-base),
			visibility var(--transition-base);
	}
	body.is-menu-open .ly_gnav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.ly_gnav_list {
		display: block;
		width: 100%;
		padding: 0;
	}
	.ly_gnav_list li:first-child {
		display: block;
	}
	.ly_gnav_item {
		border-bottom: 1px solid var(--color-border-light);
	}
	.ly_gnav_link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20px 0;
		color: var(--color-text-main);
	}
	.ly_gnav_link::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		background: transparent; /* ←重要：PCの黒背景を透明に戻す */
		border-top: 2px solid var(--color-border-dark);
		border-right: 2px solid var(--color-border-dark);
		transform: rotate(45deg);
		position: static;
		margin-right: 8px;
		transition: none; /* ←重要：アニメーションを無効化 */
	}

	.ly_gnav_link:hover::after {
		width: 8px; /* 100%に伸びるのを防ぐ */
		height: 8px;
		background: transparent; /* 黒塗りを防止 */
	}

	/* Footer SP */
	.ly_footer {
		padding: 60px 0 40px;
	}
	.ly_footer_nav_list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25px 15px;
		margin-bottom: 50px;
	}
	.ly_footer_nav_list li {
		display: flex;
		justify-content: center;
		text-align: center;
	}
}