@charset "UTF-8";

		/* ========================================
		Base Reset & Variables (Mature Theme)
		========================================
		*/
		:root {
			--accent-color: #eb2f5b; /* エレガントなピンク */
			--bg-base: #fdfdfd;
			--bg-sub: #f5f5f5;
			--text-main: #1a1a1a;
			--text-sub: #777777;
			--border-color: #eaeaea;

			--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; }
		ul { list-style: none; }
		img { max-width: 100%; height: auto; display: block; object-fit: cover; }



		/* ========================================
		Layout Container
		========================================
		*/
		main {
			padding-top: var(--header-height);
			max-width: 1000px;
			margin: 0 auto;
			padding-bottom: 5rem;
		}

		/* ========================================
		Hero Section (Magazine Gravure Style)
		========================================
		*/
		.cast-hero {
			display: grid;
			grid-template-columns: 1fr;
			margin-bottom: 4rem;
		}

		@media (min-width: 768px) {
			.cast-hero {
				grid-template-columns: 5fr 4fr;
				gap: 3rem;
				align-items: center;
				padding: 3rem 2rem 0;
			}
		}

		.hero-image {
			width: 100%;
			aspect-ratio: 4 / 5;
			position: relative;
		}

		.hero-image img {
			width: 100%; height: 100%;
		}

		/* 写真の端にキャッチコピーを縦書きで配置 (スマホ時は写真の下) */
		.hero-vertical-catch {
			position: absolute;
			top: 2rem;
			right: 1.5rem;
			writing-mode: vertical-rl;
			font-family: var(--font-serif);
			font-size: 1.2rem;
			letter-spacing: 0.3em;
			color: #fff;
			text-shadow: 0 2px 10px rgba(0,0,0,0.5);
			z-index: 2;
		}

		.hero-info {
			padding: 2rem 1.5rem;
			position: relative;
		}

		/* 背景に薄く英語名を入れる装飾 */
		.hero-info::before {
			content: attr(data-name); /* 動的に変える想定 */
			position: absolute;
			top: -10px;
			left: 0;
			font-family: var(--font-eng);
			font-size: clamp(5rem, 15vw, 10rem);
			font-weight: 900;
			color: var(--bg-sub);
			z-index: -1;
			line-height: 0.8;
			pointer-events: none;
		}

		.shop-name-label {
			font-size: 0.85rem;
			font-weight: 700;
			color: var(--text-sub);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			display: block;
			margin-bottom: 1rem;
			border-bottom: 1px solid var(--border-color);
			padding-bottom: 0.5rem;
		}

		.cast-name-wrap {
			margin-bottom: 2rem;
		}

		.cast-name {
			font-family: var(--font-serif);
			font-size: clamp(3rem, 8vw, 4.5rem);
			font-weight: 800;
			line-height: 1.1;
			letter-spacing: 0.05em;
		}

		.cast-age {
			font-family: var(--font-eng);
			font-size: 1.5rem;
			color: var(--accent-color);
			vertical-align: super;
		}

		.cast-intro-text {
			font-size: 0.95rem;
			color: var(--text-sub);
			line-height: 2;
			margin-bottom: 2rem;
		}



		/* ========================================
		Review Button (レビュー投稿ボタン)
		========================================
		*/
		.review-btn-wrap {
			display: flex;
			justify-content: center; /* モバイル時は中央揃え */
			margin-top: 1.5rem;
		}

		.btn-write-review {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 24px;
			background-color: var(--bg-base);
			color: var(--text-sub);
			font-size: 0.85rem;
			font-weight: 700;
			letter-spacing: 0.05em;
			border: 1px solid var(--border-color);
			border-radius: 50px;
			box-shadow: 0 4px 10px rgba(0,0,0,0.02);
			transition: all 0.3s ease;
		}

		/* ホバー時に美しく反転・浮上するエフェクト */
		.btn-write-review:hover {
			background-color: var(--accent-color);
			color: #fff;
			border-color: var(--accent-color);
			transform: translateY(-2px);
			box-shadow: 0 6px 15px rgba(235, 47, 91, 0.2);
		}

		@media (min-width: 768px) {
			.review-btn-wrap {
				justify-content: flex-end; /* PC時は右端揃え */
				margin-top: 0;
			}
		}



		/* ========================================
		Favorite Button (お気に入り登録ボタン)
		========================================
		*/
		.fav-btn-wrap {
			display: flex;
			justify-content: center; /* モバイル時は中央揃え */
			margin-top: 10px;
		}

		.btn-favorite {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 10px 24px;
			background-color: transparent;
			color: var(--accent-color);
			font-size: 0.85rem;
			font-weight: 700;
			letter-spacing: 0.05em;
			border: 1px solid var(--accent-color);
			border-radius: 50px;
			transition: all 0.3s ease;
			cursor: pointer;
			width: auto;
			min-width: 180px;
		}

		.btn-favorite:hover {
			background-color: rgba(235, 47, 91, 0.05);
			transform: translateY(-2px);
		}

		/* お気に入り登録済み状態（塗りつぶし） */
		.btn-favorite.is-active {
			background-color: var(--accent-color);
			color: #fff;
		}
		.btn-favorite.is-active svg {
			fill: #fff; /* 星の中を塗りつぶす */
		}

		@media (min-width: 768px) {
			.fav-btn-wrap {
				justify-content: flex-end; /* PC時は右端揃え */
			}
		}

		/* ========================================
		Movie Section
		========================================
		*/
		.movie-wrapper {
			width: 100%;
			max-width: 800px; /* 横長動画がPCで大きくなりすぎないように制限 */
			margin: 0 auto 60px auto;
			border-radius: 8px;
			overflow: hidden;
			background: #111; /* 余白の黒帯用 */
			box-shadow: 0 15px 30px rgba(0,0,0,0.15);
		}

		.cast-movie {
			width: 100%;
			height: auto;
			max-height: 80vh; /* 万が一縦長の動画が来ても画面を占領しないよう制限 */
			object-fit: contain; /* 横長・縦長どちらでも全体が綺麗に収まる */
			display: block;
			margin: 0 auto;
		}



		/* ========================================
		Profile Data Area
		========================================
		*/
		.profile-section {
			padding: 0 1.5rem;
			margin-bottom: 5rem;
		}

		.section-title {
			font-family: var(--font-eng);
			font-size: 2rem;
			font-weight: 800;
			margin-bottom: 1.5rem;
			position: relative;
			display: inline-block;
		}
		.section-title::after {
			content: '';
			display: block;
			width: 40px;
			height: 3px;
			background: var(--accent-color);
			margin-top: 5px;
		}

		/* Spec List (雑誌のインタビュー枠風) */
		.spec-box {
			background: var(--bg-sub);
			padding: 2rem;
			border-radius: 4px;
		}

		.spec-list {
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
			margin-bottom: 2rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid #ddd;
		}

		.spec-item {
			display: flex;
			flex-direction: column;
		}

		.spec-item dt {
			font-family: var(--font-eng);
			font-size: 0.8rem;
			color: var(--text-sub);
			letter-spacing: 0.1em;
		}

		.spec-item dd {
			font-family: var(--font-serif);
			font-size: 1.5rem;
			font-weight: 700;
			color: var(--text-main);
		}

		.qa-list {
			display: grid;
			gap: 1.5rem;
		}

		.qa-item dt {
			font-weight: 700;
			font-size: 0.9rem;
			color: var(--accent-color);
			margin-bottom: 0.3rem;
		}

		.qa-item dt::before {
			content: 'Q. ';
			font-family: var(--font-eng);
		}

		.qa-item dd {
			font-size: 0.95rem;
			color: var(--text-main);
		}

		/* ========================================
		Gallery Section (Asymmetric Grid)
		========================================
		*/
		.gallery-section {
			padding: 0 1.5rem;
			margin-bottom: 5rem;
		}

		/* データ量に依存しない洗練されたグリッド */
		.gallery-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}

		@media (min-width: 768px) {
			.gallery-grid {
				grid-template-columns: repeat(3, 1fr);
				gap: 15px;
			}
		}

		.gallery-item {
			position: relative;
			overflow: hidden;
			border-radius: 4px;
			background: #eee;
		}

		/* 画像が少なくてもカッコよく見せるための非対称化 */
		/* 1枚目は大きく表示 */
		.gallery-item:nth-child(1) {
			grid-column: span 2;
			grid-row: span 2;
			aspect-ratio: 4 / 5;
		}

		/* 2枚目以降は小さく */
		.gallery-item:not(:nth-child(1)) {
			aspect-ratio: 1 / 1;
		}

		.gallery-item img {
			width: 100%;
			height: 100%;
			transition: transform 0.5s ease;
		}

		.gallery-item:hover img {
			transform: scale(1.05);
		}

		/* ========================================
		Shop & Schedule Section
		========================================
		*/
		.info-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 3rem;
			padding: 0 1.5rem;
		}

		@media (min-width: 768px) {
			.info-grid {
				grid-template-columns: 1fr 1fr;
			}
		}

		/* Schedule */
		.schedule-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.95rem;
		}

		.schedule-table th, .schedule-table td {
			padding: 1rem 0;
			border-bottom: 1px solid var(--border-color);
			text-align: left;
		}

		.schedule-table th {
			font-weight: 500;
			color: var(--text-sub);
			width: 40%;
		}

		.schedule-table td.active {
			color: var(--accent-color);
			font-weight: 700;
		}

		/* Shop Info Card */
		.shop-card {
			border: 1px solid var(--border-color);
			padding: 2rem;
			border-radius: 4px;
			text-align: center;
		}

		.shop-card-logo {
			font-family: var(--font-serif);
			font-size: 1.5rem;
			font-weight: 800;
			margin-bottom: 1rem;
		}

		.shop-card-desc {
			font-size: 0.85rem;
			color: var(--text-sub);
			margin-bottom: 2rem;
		}

		.btn-main {
			display: inline-block;
			width: 100%;
			padding: 1rem;
			background: var(--text-main);
			color: #fff;
			font-weight: 700;
			letter-spacing: 0.1em;
			border-radius: 50px;
			transition: background 0.3s;
		}

		.btn-main:hover {
			background: var(--accent-color);
		}

		/* ========================================
		Footer
		========================================
		*/
		.site-footer {
			text-align: center;
			padding: 3rem 1.5rem;
			border-top: 1px solid var(--border-color);
			margin-top: 4rem;
			font-family: var(--font-eng);
			font-size: 0.8rem;
			color: var(--text-sub);
		}




		/* ========================================
		Gallery Modal (Lightbox)
		========================================
		*/
		.gallery-modal {
			display: none;
			position: fixed;
			z-index: 9999;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.85);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.gallery-modal.show {
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 1;
		}

		.gallery-modal-content {
			max-width: 90%;
			max-height: 85vh;
			border-radius: 4px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.5);
			transform: scale(0.95);
			transition: transform 0.3s ease, opacity 0.2s ease;
			object-fit: contain;
		}

		.gallery-modal.show .gallery-modal-content {
			transform: scale(1);
		}

		.gallery-modal-close {
			position: absolute;
			top: 20px;
			right: 30px;
			color: #fff;
			font-size: 40px;
			font-weight: 300;
			cursor: pointer;
			z-index: 10001;
			transition: color 0.2s;
			line-height: 1;
		}

		.gallery-modal-close:hover {
			color: var(--accent-color, #eb2f5b);
		}

		.gallery-modal-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(255, 255, 255, 0.1);
			color: white;
			border: none;
			cursor: pointer;
			width: 50px;
			height: 50px;
			font-size: 20px;
			border-radius: 50%;
			transition: background 0.3s, transform 0.2s;
			z-index: 10001;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.gallery-modal-nav:hover {
			background: rgba(255, 255, 255, 0.3);
			transform: translateY(-50%) scale(1.1);
		}

		.gallery-modal-nav.prev { left: 20px; }
		.gallery-modal-nav.next { right: 20px; }

		@media (max-width: 768px) {
			.gallery-modal-nav { width: 40px; height: 40px; font-size: 16px; }
			.gallery-modal-nav.prev { left: 10px; }
			.gallery-modal-nav.next { right: 10px; }
			.gallery-modal-close { top: 15px; right: 20px; font-size: 35px; }
		}




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