@charset "UTF-8";

		/* ========================================
		Base Reset & Variables (Editorial Theme)
		========================================
		*/
		:root {
			--accent-color: #eb2f5b;
			--bg-base: #fdfdfd;
			--bg-dark: #111111;
			--text-main: #1a1a1a;
			--text-sub: #666666;
			--border-color: #eaeaea;
			--border-dark: #333333;

			--c-bg: #fcfcfc;       /* ほんのり温かみのあるオフホワイト */
			--c-main: #111111;     /* 漆黒ではなく、やや柔らかい黒 */
			--c-sub: #555555;      /* 本文用グレー */
			--c-accent: #ab8667;   /* 上品なシャンパンゴールド */

			--font-sans: 'Noto Sans JP', sans-serif;
			--font-serif: 'Shippori Mincho', serif;
			--font-eng: 'Playfair Display', serif;
			--font-engs: 'Cormorant Garamond', serif;
			--font-script: 'La Belle Aurore', cursive;

			--header-height: 60px;
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-sans);
			background-color: var(--bg-base);
			color: var(--text-main);
			line-height: 1.8;
			-webkit-font-smoothing: antialiased;
		}
		a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
		a:hover { opacity: 0.7; }
		ul { list-style: none; }
		img { max-width: 100%; height: auto; display: block; object-fit: cover; }

		/* ========================================
		Header
		========================================
		*/
		.simple-header {
			position: fixed;
			top: 0; left: 0; width: 100%;
			height: var(--header-height);
			background: rgba(253, 253, 253, 0.95);
			backdrop-filter: blur(10px);
			z-index: 100;
			border-bottom: 1px solid var(--border-color);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1.5rem;
		}
		.btn-back {
			font-family: var(--font-eng); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em;
		}
		.header-logo { font-family: var(--font-eng); font-weight: 900; font-size: 1.2rem; }



/* ========================================
		Section Common
		========================================
		*/
		.section-wrap {
			padding: 5rem 1.5rem;
			max-width: 1000px;
			margin: 0 auto;
		}

		.sec-header {
			text-align: center;
			margin-bottom: 4rem;
		}

		/* キャスト詳細と同じく、h2の中で英語と日本語を縦並びにする */
.sec-title {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1rem;
}

/* 英語を「見た目上」上(1)にする */
.sec-title .en {
	order: 1;
	font-family: var(--font-eng);
	font-size: 2.5rem;
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1;
}

/* 店舗のCSSは英語(en)の下に線を引く指定なので、そのまま活かします */
.sec-title .en::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: var(--text-main);
	margin-top: 10px;
}

/* 日本語を「見た目上」下(2)にする */
.sec-title .ja {
	order: 2;
	font-family: var(--font-serif);
	font-size: 0.85rem;
	color: var(--text-sub);
	margin-top: 0.8rem;
	letter-spacing: 0.1em;
}

		/* 各セクション見出し直下のPタグ（SEO用説明文） */
		.sec-desc {
			font-size: 0.9rem;
			color: var(--text-sub);
			margin-top: 1rem;
			line-height: 1.6;
		}

		/* ========================================
		Concept Section (Magazine Column)
		========================================
		*/
		.concept-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 3rem;
		}

		@media (min-width: 768px) {
			.concept-grid {
				grid-template-columns: 1fr 1fr;
				align-items: center;
			}
		}

		.concept-image {
			aspect-ratio: 3 / 4;
			border-radius: 4px;
			overflow: hidden;
		}

		.concept-text {
			font-family: var(--font-serif);
		}

		.concept-lead {
			font-size: 1.4rem;
			font-weight: 800;
			line-height: 1.6;
			margin-bottom: 2rem;
			color: var(--text-main);
		}

		.concept-body {
			font-family: var(--font-sans);
			font-size: 0.95rem;
			color: var(--text-sub);
			line-height: 2;
		}

		/* ========================================
		Casts Section (トップページ共通カード風)
		========================================
		*/
		.cast-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem 1rem;
		}

		@media (min-width: 600px) {
			.cast-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
		}

		@media (min-width: 900px) {
			.cast-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.5rem; }
		}

		.cast-item {
			display: flex;
			flex-direction: column;
			background: #ffffff;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 10px 30px rgba(0,0,0,0.05);
			text-align: center;
			text-decoration: none;
			color: var(--text-main);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			height: 100%; /* カードの高さを揃える */
		}

		.cast-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 30px rgba(0,0,0,0.1);
		}

		.cast-thumb {
			position: relative;
			aspect-ratio: 3 / 4;
			width: 100%;
			overflow: hidden;
			background: #eee;
		}

		.cast-thumb img {
			width: 100%; height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;
		}

		.cast-item:hover .cast-thumb img {
			transform: scale(1.05);
		}

		/* ラベル（NEW, PICKUPなど） */
		.cast-label {
			position: absolute;
			top: 10px; left: 10px;
			background: var(--text-main);
			color: #fff;
			font-size: 0.7rem;
			font-weight: 700;
			padding: 5px 14px;
			border-radius: 20px;
			letter-spacing: 0.05em;
			z-index: 2;
			box-shadow: 0 4px 10px rgba(0,0,0,0.15);
		}

		.cast-label.new { background: var(--accent-color); }

		/* ========================================
		Cast Text Info (カード下部のテキスト領域)
		========================================
		*/
		.cast-info {
			padding: 1.2rem 1rem;
			display: flex;
			flex-direction: column;
			flex-grow: 1; /* 名前や時間の位置を下揃えにするため領域を広げる */
			align-items: center;
		}

		.cast-name {
			font-family: var(--font-serif);
			font-size: 1.15rem;
			font-weight: 700;
			margin-bottom: 0.5rem;
			margin-top: auto; /* カードの高さが違っても、名前と時間を下端に揃える */
		}

		.cast-age {
			font-family: var(--font-sans);
			font-size: 0.85rem;
			color: var(--text-sub);
			font-weight: normal;
		}

		/* 出勤時間（タグ風デザイン） */
		.cast-time {
			font-size: 0.85rem;
			color: var(--accent-color);
			font-weight: 700;
			background: rgba(235, 47, 91, 0.05);
			padding: 0.3rem 0.8rem;
			border-radius: 4px;
			display: inline-block;
			border: 1px solid rgba(235, 47, 91, 0.1);
			margin-bottom: 0.2rem;
		}

		/* ========================================
		System & Price Section
		========================================
		*/
		.system-area {
			background: #f9f9f9;
			border-top: 1px solid var(--border-color);
			border-bottom: 1px solid var(--border-color);
		}

		.options-title {
			font-family: var(--font-eng);
			font-size: 1.2rem;
			font-weight: 700;
			margin-bottom: 1rem;
			border-left: 3px solid var(--c-accent);
			padding-left: 0.8rem;
			letter-spacing: 0.05em;
		}

		.price-table {
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 3rem;
			background: #fff;
		}

		.price-table th, .price-table td {
			padding: 1.2rem 1rem;
			border-bottom: 1px solid var(--border-color);
		}

		.price-table th {
			text-align: left;
			font-weight: 700;
			width: 40%;
			color: var(--text-sub);
		}

		.price-table td {
			font-family: var(--font-eng);
			font-size: 1.2rem;
			font-weight: 700;
			text-align: right;
		}

		.price-table td span {
			font-family: var(--font-sans);
			font-size: 0.8rem;
			font-weight: 400;
			color: var(--text-sub);
		}

		.option-list {
			display: grid;
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		@media (min-width: 768px) {
			.option-list { grid-template-columns: 1fr 1fr; }
		}

		.option-item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px dotted #ccc;
			padding-bottom: 0.5rem;
		}

		.option-name { font-weight: 500; }
		.option-price { font-family: var(--font-eng); font-weight: 700; }

		/* ========================================
		Shop Info Section
		========================================
		*/
		.info-dl {
			display: grid;
			grid-template-columns: 1fr;
			border-top: 2px solid var(--text-main);
		}

		.info-row {
			display: flex;
			flex-direction: column;
			padding: 1.5rem 0;
			border-bottom: 1px solid var(--border-color);
		}

		@media (min-width: 768px) {
			.info-row { flex-direction: row; }
		}

		.info-row dt {
			width: 200px;
			font-weight: 700;
			color: var(--text-sub);
			margin-bottom: 0.5rem;
		}

		.info-row dd {
			flex: 1;
			font-size: 0.95rem;
		}

		.info-badges {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			margin-top: 0.5rem;
		}

		.badge {
			font-size: 0.75rem;
			padding: 4px 10px;
			border: 1px solid var(--border-color);
			border-radius: 2px;
			background: #fafafa;
		}

		/* ========================================
		Footer & Fixed Action Bar
		========================================
		*/
		.site-footer {
			text-align: center;
			padding: 3rem 1.5rem 8rem; /* 下部バーの分だけ余白を空ける */
			background: var(--bg-dark);
			color: #fff;
			font-family: var(--font-eng);
			font-size: 0.8rem;
		}

		.fixed-action-bar {
			position: fixed;
			bottom: 0; left: 0; width: 100%;
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border-top: 1px solid var(--border-color);
			padding: 1rem 1.5rem;
			z-index: 100;
			display: flex;
			justify-content: center;
			gap: 1rem;
			box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
		}

		.btn-action {
			flex: 1;
			max-width: 300px;
			padding: 1rem;
			text-align: center;
			font-weight: 700;
			border-radius: 4px;
			transition: all 0.3s;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
			font-size: clamp(0.6rem, 4vw, 0.9rem);
		}

		.btn-tel {
			background: #fff;
			color: var(--text-main);
			border: 2px solid var(--text-main);
		}

		.btn-tel:hover { background: #f5f5f5; }

		.btn-web {
			background: var(--text-main);
			color: #fff;
			border: 2px solid var(--text-main);
		}

		.btn-web:hover { background: var(--accent-color); border-color: var(--accent-color); }


		.action-bar-1 {
			position: fixed;
			bottom: 0; left: 0; width: 100%;
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			padding: 12px 15px 20px; /* iPhoneの下部バー対策で下余白多め */
			border-top: 1px solid var(--border-color);
			z-index: 100;
		}

		.balloon-1 {
			position: absolute;
			bottom: calc(100% + 15px); /* ボタンの上から浮かす */
			left: 50%;
			transform: translateX(-50%);
			background: var(--accent-color);
			color: #fff;
			padding: 6px 16px;
			border-radius: 20px;
			font-size: 0.85rem;
			font-weight: 700;
			white-space: nowrap;
			box-shadow: 0 4px 10px rgba(235, 47, 91, 0.3);
			animation: float 2s ease-in-out infinite;
			pointer-events: none;
		}

		/* 吹き出しの尻尾 */
		.balloon-1::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border: 6px solid transparent;
			border-top-color: var(--accent-color);
		}

		@keyframes float {
			0%, 100% { transform: translate(-50%, 0); }
			50% { transform: translate(-50%, -5px); }
		}

		.btn-tel-1 {
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--text-main);
			color: #fff;
			padding: 14px;
			border-radius: 8px;
			font-weight: 700;
			font-size: 1.2rem;
			text-decoration: none;
			letter-spacing: 0.05em;
			max-width: 600px;
			margin: 0 auto;
			box-shadow: 0 4px 10px rgba(0,0,0,0.1);
			transition: transform 0.2s, background 0.2s;
		}

		.btn-tel-1:hover {
			background: #333;
			transform: translateY(-2px);
		}

		.icon-tel {
			margin-right: 8px;
			font-size: 1.3rem;
			display: inline-block;
			transform: translateY(2px);
		}

		/* ========================================
		Movie Section
		========================================
		*/
		.movie-wrapper {
			width: 100%;
			max-width: 800px; /* PC閲覧時に大きくなりすぎないように制限 */
			margin: 0 auto;
			border-radius: 8px;
			overflow: hidden;
			background: #111; /* 横長・縦長で生じる余白を黒帯にする */
			box-shadow: 0 15px 30px rgba(0,0,0,0.15);
		}

		.shop-movie {
			width: 100%;
			height: auto; 
			max-height: 80vh; /* 縦長すぎる動画が画面を占領するのを防ぐ */
			object-fit: contain; /* クロップせずに全体表示 */
			display: block;
			margin: 0 auto;
		}




		/* ========================================
		Cast Accordion (アコーディオン制御)
		========================================
		*/
		/* ★ 閉じている時(is-closed)は、13番目以降のカードを消す */
		.cast-grid.is-closed .cast-item:nth-child(n+13) {
			display: none !important;
		}

		/* ボタンのラッパー */
		.accordion-btn-wrap {
			text-align: center;
			margin-top: 3rem;
		}

		/* 開閉ボタンのデザイン */
		.btn-accordion {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 0.8rem;
			background: #ffffff;
			color: var(--text-main);
			border: 2px solid var(--text-main);
			border-radius: 50px;
			padding: 14px 40px;
			font-weight: 700;
			font-size: 0.95rem;
			cursor: pointer;
			transition: all 0.3s ease;
			min-width: 280px;
			box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		}
		.btn-accordion:hover {
			background: var(--text-main);
			color: #fff;
			transform: translateY(-2px);
		}

		/* 開いている時のボタンデザイン（目立たなくする） */
		.btn-accordion.is-open {
			background: #fafafa;
			color: var(--text-sub);
			border-color: #ccc;
			box-shadow: none;
		}

		/* 矢印アイコン */
		.arrow-icon {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: rotate(45deg);
			transition: transform 0.3s ease;
			margin-bottom: 4px;
		}
		/* 開いている時は矢印を上に向ける */
		.btn-accordion.is-open .arrow-icon {
			transform: rotate(-135deg);
			margin-bottom: -4px;
		}

		/* ========================================
		Floating Close Button (追従する閉じるボタン)
		========================================
		*/
		.floating-close-btn {
			position: fixed;
			bottom: 100px; /* 固定アクションバー(フッター)の上に配置 */
			left: 20px;  /* 画面の右下に配置 */
			background: var(--text-main);
			color: #fff;
			border: none;
			border-radius: 50px;
			padding: 12px 24px;
			font-size: 0.85rem;
			font-weight: 700;
			z-index: 99;
			cursor: pointer;
			box-shadow: 0 5px 15px rgba(0,0,0,0.2);
			display: flex;
			align-items: center;
			gap: 8px;

			/* 初期状態は透明にして画面外に隠す */
			opacity: 0;
			visibility: hidden;
			transform: translateY(20px);
			transition: all 0.3s ease;
		}

		/* クラスが付いた時にフワッと出現させる */
		.floating-close-btn.is-visible {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		/* 追従ボタンの矢印は上向き固定 */
		.floating-close-btn .arrow-icon {
			border-color: #fff;
			transform: rotate(-135deg);
			margin-bottom: -4px;
		}


		/* ========================================
		Recruit Banner (求人情報ボタン)
		========================================
		*/
		.recruit-banner-wrap {
			max-width: 600px;
			margin: 0 auto;
		}

		.btn-recruit-link {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #ffffff;
			color: var(--text-main);
			border: 2px solid var(--text-main);
			padding: 1.5rem 2rem;
			text-decoration: none;
			border-radius: 8px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(0,0,0,0.05);
			position: relative;
			overflow: hidden;
		}

		/* ホバー時の美しい反転エフェクト */
		.btn-recruit-link::before {
			content: '';
			position: absolute;
			top: 0; left: 0; width: 0%; height: 100%;
			background: var(--text-main);
			transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
			z-index: 1;
		}
		.btn-recruit-link:hover::before { width: 100%; }

		.btn-recruit-link:hover {
			color: #ffffff;
			transform: translateY(-3px);
			box-shadow: 0 10px 25px rgba(0,0,0,0.15);
		}

		.btn-recruit-inner {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
		}

		.recruit-eng {
			font-family: var(--font-eng);
			font-size: 0.85rem;
			font-weight: 700;
			letter-spacing: 0.2em;
			margin-bottom: 0.2rem;
		}

		/* アクセントカラーをさりげなく使う */
		.btn-recruit-link:not(:hover) .recruit-eng {
			color: var(--accent-color);
		}

		.recruit-ja {
			font-family: var(--font-serif);
			font-size: 1.3rem;
			font-weight: 700;
			letter-spacing: 0.05em;
		}

		.recruit-arrow {
			position: relative;
			z-index: 2;
			display: inline-block;
			width: 12px; height: 12px;
			border-top: 2px solid currentColor;
			border-right: 2px solid currentColor;
			transform: rotate(45deg);
			transition: transform 0.3s;
		}

		.btn-recruit-link:hover .recruit-arrow {
			transform: rotate(45deg) translate(3px, -3px);
		}





		/* ========================================
		   Editorial Hero Section
		======================================== */
		.editorial-hero {
			width: 100%;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: calc(var(--header-height) + 3rem); /* ヘッダー高さ変数で管理 */
			padding-bottom: 3rem;
		}

		.ed-hero-inner {
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 0 5%;
			display: flex;
			align-items: center;
			gap: 5rem;
		}

		/* ----------------------------------------
		   左側：タイポグラフィ（文字）エリア
		---------------------------------------- */
		.ed-hero-content {
			flex: 0 0 45%;
			position: relative;
			z-index: 10;
		}

		/* カテゴリやエリアのメタ情報 */
		.ed-hero-meta {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			font-family: var(--font-sans);
			font-size: 0.7rem;
			font-weight: 500;
			letter-spacing: 0.2em;
			color: var(--c-sub);
			margin-bottom: 2.5rem;
		}
		.meta-line {
			width: 40px;
			height: 1px;
			background-color: #d0d0d0;
		}

		/* 巨大な英字タイトル */
		.ed-hero-title {
			font-family: var(--font-eng);
			font-size: clamp(3.5rem, 8vw, 8rem);
			font-weight: 400;
			line-height: 0.9;
			letter-spacing: -0.02em;
			margin: 0 0 3.5rem 0;
			color: var(--c-main);
			/* あえて右側の画像にはみ出させるエディトリアル手法 */
			width: 150%;
			text-shadow: 3px 3px 20px rgba(252, 252, 252, 0.9); /* 画像に乗った時の可読性確保 */
		}
		.ed-hero-title .indent {
			display: block;
			padding-left: 15%;
			font-style: italic;
			color: var(--c-accent);
		}

	/* ========================
	スマホ用の設定（改行なし）
	======================== */
	@media (max-width: 900px) {
		/* スマホの時は <br> を非表示にして改行させない */
		.ed-hero-title br {
			display: none;
		}

		/* スマホの時はブロックを解除して横並びにし、隙間を調整する */
		.ed-hero-title .indent {
			display: inline-block;
			padding-left: 0.5em; /* スマホ用に丁度いい少しの隙間 */
		}
	}

		/* 縦線の入った説明文ブロック */
		.ed-hero-body {
			border-left: 1px solid #e0e0e0;
			padding-left: 2rem;
			position: relative;
		}

		.ed-hero-subtitle {
			font-family: var(--font-serif);
			font-size: clamp(1.2rem, 2vw, 1.5rem);
			font-weight: 500;
			line-height: 1.6;
			margin: 0 0 1.5rem 0;
			color: var(--c-main);
			letter-spacing: 0.05em;
		}

		.ed-hero-h1 {
			font-family: var(--font-serif);
			font-size: 0.95rem;
			line-height: 2.2;
			color: var(--c-sub);
			margin: 0 0 20px 0;
			max-width: 420px;
		}

		.ed-hero-text {
			font-family: var(--font-serif);
			font-size: 0.95rem;
			line-height: 2.2;
			color: var(--c-sub);
			margin: 0;
			max-width: 420px;
		}


		/* 筆記体のサイン装飾 */
		.ed-hero-signature {
			font-family: var(--font-script);
			font-size: clamp(1.5rem, 3vw, 2.5rem);
			color: var(--c-accent);
			position: absolute;
			bottom: -2rem;
			right: -3rem;
			transform: rotate(-5deg);
			opacity: 0.8;
			pointer-events: none;
		}

	/* ========================
		スマホ用の設定（改行なし）
	======================== */
	@media (max-width: 900px) {
		.ed-hero-text {
			font-family: var(--font-serif);
			font-size: 0.95rem;
			line-height: 2.2;
			color: var(--c-sub);
			margin: 0;
			max-width: 850px;
		}
	}

		/* ----------------------------------------
		   右側：ビジュアル（写真）エリア
		---------------------------------------- */
		.ed-hero-visual {
			flex: 0 0 50%;
			position: relative;
			display: flex;
			justify-content: flex-end;
		}

		.ed-image-wrap {
			position: relative;
			width: 90%;
			height: 80vh;
			min-height: 500px;
		}

		.ed-image-wrap img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* 画像を少し上品に（コントラスト調整） */
			filter: saturate(0.95) contrast(1.05);
			box-shadow: -15px 20px 40px rgba(0,0,0,0.06);
		}

		/* 雑誌風の細い装飾枠線 */
		.ed-image-frame {
			position: absolute;
			top: 15px; left: 15px; right: 15px; bottom: 15px;
			border: 1px solid rgba(255, 255, 255, 0.5);
			pointer-events: none;
		}

		/* 縦書きのアクセントテキスト */
		.ed-vertical-text {
			position: absolute;
			left: -30px;
			bottom: 10%;
			writing-mode: vertical-rl;
			transform: rotate(180deg);
			font-family: var(--font-engs);
			font-size: 0.75rem;
			letter-spacing: 0.3em;
			color: #999;
		}

		/* ========================================
		   レスポンシブ (スマホ表示)
		======================================== */
		@media (max-width: 900px) {
			.editorial-hero {
				padding-top: calc(var(--header-height) + 2rem);
				padding-bottom: 3rem;
				min-height: auto;
			}
			.ed-hero-inner {
				flex-direction: column;
				gap: 3rem;
			}

			.ed-hero-content {
				flex: none;
				width: 100%;
			}
			.ed-hero-title {
				width: 100%;
				margin-bottom: 2rem;
			}
			.ed-hero-title .indent {
				padding-left: 0; /* スマホではインデント解除 */
			}
			.ed-hero-signature {
				right: 0;
				bottom: -3.5rem;
			}

			.ed-hero-visual {
				flex: none;
				width: 100%;
				justify-content: center;
				margin-top: 1rem;
			}
			.ed-image-wrap {
				width: 100%;
				height: 60vh;
				min-height: 400px;
			}
			.ed-vertical-text {
				display: none; /* スマホでは縦書き装飾を非表示 */
			}
		}


		/* ========================================
		   Bottom SEO Text
		======================================== */
		.feature-seo-block {
			max-width: 1200px; margin: 50px auto 5rem; padding: 0 1.5rem;
		}
		.feature-seo-block h2 {
			font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800;
			margin-bottom: 1rem; border-left: 4px solid var(--c-accent); padding-left: 1rem;
		}
		.feature-seo-block p {
			margin-bottom: 1rem;
			font-family: var(--font-serif);
			font-size: 0.95rem;
			line-height: 2.2;
			color: var(--c-sub);
		}







/* ========================================
Fixed Navigation (PC/スマホ共通・完全固定)
======================================== */

/* ★ 修正ポイント: リンクをクリックしてジャンプした際、タイトルがメニューの下に隠れないようにする設定 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 55px + 20px);
}

.page-nav {
	position: fixed; /* ★ sticky から fixed へ変更 */
	top: var(--header-height); /* ヘッダーのすぐ下に固定 */
	left: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border-color); /* ★ 変数名を既存のCSSに合わせた */
	z-index: 90; /* ★ 既存のヘッダーが100なので、それより下に潜り込ませる */
}

.page-nav-list {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.page-nav-list::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.page-nav-item {
	scroll-snap-align: start;
	flex-shrink: 0;
}

.page-nav-link {
	display: block;
	padding: 1rem 1.5rem;
	font-family: var(--font-eng);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--text-sub); /* ★ 変数名を既存のCSSに合わせた */
	position: relative;
	white-space: nowrap;
}

.page-nav-link:hover {
	color: var(--text-main);
}

/* PC閲覧時はメニューを中央寄せにする */
@media (min-width: 900px) {
	.page-nav-list {
		justify-content: center;
	}
}

