@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;

			--font-sans: 'Noto Sans JP', sans-serif;
			--font-serif: 'Shippori Mincho', serif;
			--font-eng: 'Playfair Display', serif;

			--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; }

		/* ========================================
		Hero Section (Cinematic Overlay Style)
		========================================
		※既存の .shop-hero から .hero-catch までのCSSを以下に丸ごと差し替えてください
		*/
		.shop-hero {
			position: relative;
			width: 100%;
			height: 60vh; /* 画面の60%の高さ */
			min-height: 400px;
			max-height: 700px;
			display: flex;
			align-items: flex-end; /* コンテンツを下部に配置 */
			overflow: hidden;
			background: var(--bg-dark);
			margin-top: var(--header-height); /* ヘッダーの高さ分下げる */
		}

		@media (min-width: 768px) {
			.shop-hero { height: 75vh; }
		}

		/* 背景画像エリア */
		.hero-bg {
			position: absolute;
			top: 0; left: 0; width: 100%; height: 100%;
			z-index: 1;
		}

		.hero-bg img {
			width: 100%; height: 100%;
			object-fit: cover;
			/* ゆっくりズームインするアニメーションで高級感を演出 */
			animation: heroZoom 15s ease-out forwards;
		}

		@keyframes heroZoom {
			0% { transform: scale(1); }
			100% { transform: scale(1.08); }
		}

		/* グラデーションオーバーレイ（文字を読みやすくする） */
		.hero-overlay {
			position: absolute;
			top: 0; left: 0; width: 100%; height: 100%;
			/* 下に行くほど暗くなる美しいグラデーション */
			background: linear-gradient(
				to bottom,
				rgba(17,17,17,0.1) 0%,
				rgba(17,17,17,0.4) 40%,
				rgba(17,17,17,0.95) 100%
			);
			z-index: 2;
		}

		/* コンテンツエリア */
		.hero-content {
			position: relative;
			z-index: 3;
			width: 100%;
			max-width: 1000px; /* 他のセクションと幅を合わせる */
			margin: 0 auto;
			padding: 2rem 1.5rem 4rem; /* 下部にゆとりを持たせる */
			color: #fff;
		}

		.hero-text-inner {
			max-width: 800px;
		}

		/* エリアバッジ */
		.hero-area {
			display: inline-block;
			font-family: var(--font-eng);
			font-size: 0.75rem;
			font-weight: 700;
			letter-spacing: 0.15em;
			color: #fff;
			margin-bottom: 1rem;
			text-transform: uppercase;
			border: 1px solid rgba(255,255,255,0.3);
			padding: 4px 12px;
			border-radius: 50px;
			background: rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(4px);
		}

		/* 店舗名 */
		.hero-title {
			font-family: var(--font-serif);
			font-size: clamp(2.2rem, 6vw, 4.5rem); /* スマホ〜PCで大きさが自動可変 */
			font-weight: 800;
			line-height: 1.15;
			margin-bottom: 1.2rem;
			letter-spacing: 0.05em;
			text-shadow: 0 4px 15px rgba(0,0,0,0.6);
		}

		/* キャッチコピー */
		.hero-catch {
			font-family: var(--font-sans);
			font-size: 1rem;
			line-height: 1.9;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.9);
			text-shadow: 0 2px 8px rgba(0,0,0,0.6);
			/* 長すぎる文章は3行で「...」にする（デザイン崩れ防止） */
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		/* ========================================
		Section Common
		========================================
		*/
		.section-wrap {
			padding: 5rem 1.5rem;
			max-width: 1000px;
			margin: 0 auto;
		}

		.sec-header {
			text-align: center;
			margin-bottom: 4rem;
		}

		.sec-title {
			font-family: var(--font-eng);
			font-size: 2.5rem;
			font-weight: 900;
			letter-spacing: 0.05em;
			position: relative;
			display: inline-block;
			line-height: 1;
		}

		.sec-title::after {
			content: '';
			display: block;
			width: 100%;
			height: 1px;
			background: var(--text-main);
			margin-top: 10px;
		}

		.sec-subtitle {
			display: block;
			font-family: var(--font-serif);
			font-size: 0.85rem;
			color: var(--text-sub);
			margin-top: 0.5rem;
			letter-spacing: 0.1em;
		}

		/* ========================================
		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);
		}

		.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;
		}
/*




/* 修正前
		@media (min-width: 768px) {
			.hero-image { aspect-ratio: auto; height: 100%; min-height: 600px; }
		}
*/
		/* 修正後（PCでも必ず横長 16:9 や 4:3 を保ちたい場合） */
/*		@media (min-width: 768px) {
			.hero-image {
				aspect-ratio: 16 / 9; /* または 4 / 3 などお好みの比率 */
/*				height: auto;
				min-height: 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);
		}