/* ========================================
		   Base Reset & Variables
		======================================== */
		:root {
			--bg-base: #f4f5f7; /* トップページより少し色をつけ、紙面を目立たせる */
			--bg-white: #ffffff;
			--text-main: #1a1a1a;
			--text-sub: #555555;
			--accent-pink: #eb2f5b;
			--accent-gold: #c5a059;

			--color-text-main: #1a1a1c;
			--color-text-sub: #6c757d;
			--color-accent: #ab8667;
			--color-pink: #eb2f5b;
			--color-border: #e9ecef;

			--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.6;
			-webkit-font-smoothing: antialiased;
		}
		a { text-decoration: none; color: inherit; transition: opacity 0.3s ease; }
		a:hover { opacity: 0.7; }
		ul { list-style: none; }
		img { max-width: 100%; height: auto; display: block; }

		/* ========================================
		   Header (Simple Navigation)
		======================================== */
		.simple-header {
			position: fixed;
			top: 0; left: 0; width: 100%;
			height: var(--header-height);
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			z-index: 100;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1.5rem;
		}
		.btn-back { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
		.btn-back::before { content: '←'; font-family: var(--font-eng); font-size: 1.2rem; }
		.header-logo { font-family: var(--font-eng); font-weight: 900; font-size: 1.2rem; letter-spacing: 0.05em; }

		/* ========================================
		   Feature Hero (巻頭グラビア風)
		======================================== */
		.feature-hero {
			position: relative;
			width: 100%;
			height: 80vh;
			min-height: 400px;
			max-height: 700px;
			margin-top: var(--header-height);
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}
		.feature-hero-bg {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
		}
		.feature-hero-bg img {
			width: 100%; height: 100%; object-fit: cover;
			/* 少しセピア/モノクロがかったシックなフィルター */
			filter: brightness(0.7) contrast(1.1);
		}
		/* グラデーションオーバーレイで文字を読みやすく */
		.feature-hero::after {
			content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
			z-index: 2;
		}
		.feature-hero-content {
			position: relative; z-index: 3;
			text-align: center;
			color: #fff;
			padding: 0 1.5rem;
			width: 100%; max-width: 800px;
		}
		.feature-label {
			display: block;
			font-family: var(--font-eng);
			font-size: 0.8rem;
			letter-spacing: 0.2em;
			color: var(--accent-gold);
			margin-bottom: 1rem;
		}
		.feature-title {
			font-family: var(--font-serif);
			font-size: clamp(2rem, 6vw, 3.5rem);
			font-weight: 800;
			line-height: 1.3;
			text-shadow: 0 4px 10px rgba(0,0,0,0.5);
			margin-bottom: 1.5rem;
		}

		/* ========================================
		   Intro Section (リード文)
		======================================== */
		.feature-intro {
			max-width: 800px;
			margin: -3rem auto 4rem; /* ヒーロー画像に少し被せる */
			background: var(--bg-white);
			position: relative;
			z-index: 10;
			padding: 4rem 3rem;
			border-radius: 2px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.05);
			border-top: 4px solid var(--accent-gold);
		}
		/* ドロップキャップ（最初の一文字を大きくする雑誌風の装飾） */
		.intro-text::first-letter {
			font-family: var(--font-serif);
			font-size: 4rem;
			font-weight: 800;
			color: var(--accent-gold);
			float: left;
			line-height: 0.8;
			margin-right: 0.5rem;
			margin-top: 0.2rem;
		}
		.intro-text {
			font-family: var(--font-serif);
			font-size: 1.05rem;
			color: var(--text-main);
			line-height: 2;
			text-align: justify;
		}

		@media (max-width: 768px) {
			.feature-intro {
				margin: -2rem 1rem 3rem;
				padding: 2.5rem 1.5rem;
			}
		}

		/* ========================================
		   Article List (キャスト記事)
		======================================== */
		.feature-article-wrap {
			max-width: 1000px;
			margin: 0 auto 5rem;
			padding: 0 1rem;
		}

		/* ★変更: flexからblockに変更し、パディングをカード全体に適用 */
		.article-item {
			display: block;
			background: var(--bg-white);
			margin-bottom: 3rem;
			border-radius: 8px;
			padding: 2.5rem; 
			box-shadow: 0 5px 20px rgba(0,0,0,0.03);
			border: 1px solid #eaeaea;
		}
		/* ★追加: floatを解除するためのclearfix */
		.article-item::after {
			content: "";
			display: table;
			clear: both;
		}

		/* ★変更: flexプロパティを削除し、floatとaspect-ratioを適用 */
		.article-visual {
			float: left;
			width: 42%;
			aspect-ratio: 4 / 5;
			position: relative;
			margin-right: 2.5rem;
			margin-bottom: 1rem;
			border-radius: 8px;
			overflow: hidden;
		}

		/* ★変更: 偶数番目は画像を右にfloat */
		.article-item:nth-child(even) .article-visual {
			float: right;
			margin-right: 0;
			margin-left: 2.5rem;
		}

		.article-visual img {
			width: 100%; height: 100%; object-fit: cover; display: block;
		}

		.article-badge {
			position: absolute;
			top: 1rem; left: 1rem;
			background: var(--accent-gold);
			color: #fff;
			font-family: var(--font-eng);
			font-size: 0.75rem;
			font-weight: 700;
			padding: 0.3rem 1rem;
			letter-spacing: 0.1em;
			z-index: 10;
		}
		.article-item:nth-child(even) .article-badge {
			left: auto; right: 1rem;
		}

		/* ★変更: flexプロパティとpaddingを削除 (paddingは親の.article-itemへ移動) */
		.article-body {
			display: block;
		}

		.article-shop {
			font-size: 0.8rem;
			color: var(--text-sub);
			margin-bottom: 0.5rem;
			display: block;
		}
		.article-name {
			font-family: var(--font-serif);
			font-size: 2rem;
			font-weight: 800;
			margin-bottom: 0.5rem;
			color: var(--text-main);
			margin-top: 0; /* ★追加: float時の余白調整 */
		}
		.article-age { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; color: var(--text-sub); }

		.article-spec {
			font-family: var(--font-eng);
			font-size: 0.9rem;
			color: var(--accent-pink);
			font-weight: 700;
			letter-spacing: 0.05em;
			margin-bottom: 1.5rem; /* 少し詰めました */
			padding-bottom: 1rem;
			border-bottom: 1px dashed #eaeaea;
		}

		.article-review-title {
			font-family: var(--font-eng);
			font-size: 0.85rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			color: var(--text-main);
			margin-bottom: 0.5rem;
			margin-top: 0; /* ★追加: float時の余白調整 */
		}
		.article-review-title::before {
			content: 'Editor\'s Voice';
			color: var(--accent-gold);
			display: block;
			font-size: 0.7rem;
		}

		.article-review-text {
			font-size: 0.95rem;
			color: var(--text-sub);
			line-height: 1.8;
			margin-bottom: 2rem;
			text-align: justify;
		}

		.article-tags {
			display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem;
		}
		.article-tags span {
			background: #f4f5f7;
			color: #666;
			font-size: 0.75rem;
			padding: 0.4rem 0.8rem;
			border-radius: 50px;
		}

		.btn-profile {
			display: inline-block;
			background: var(--text-main);
			color: #fff;
			padding: 1rem 3rem;
			font-weight: 700;
			font-size: 0.9rem;
			border-radius: 50px;
			text-align: center;
			transition: background 0.3s;
			margin-bottom: 1rem; /* ★追加: 記事の最後に余白 */
		}
		.btn-profile:hover { background: var(--accent-pink); }

		/* ★変更: スマホ表示時の調整 (floatの解除) */
		@media (max-width: 768px) {
			.article-item {
				padding: 1.5rem;
			}
			.article-visual { 
				float: none;
				width: 100%; 
				aspect-ratio: 4 / 5; 
				margin: 0 0 1.5rem 0; 
			}
			.article-item:nth-child(even) .article-visual {
				float: none;
				margin: 0 0 1.5rem 0;
			}
			.article-name { font-size: 1.6rem; }
			.btn-profile { display: block; width: 100%; }
		}

		/* ========================================
		   Bottom SEO Text
		======================================== */
		.feature-seo-block {
			max-width: 800px; margin: 0 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(--accent-gold); padding-left: 1rem;
		}
		.feature-seo-block p {
			font-size: 0.9rem; color: var(--text-sub); line-height: 1.8; margin-bottom: 1rem;
		}

		/* ========================================
		   More Features (回遊リンク)
		======================================== */
		.more-features {
			background: #fff; padding: 5rem 1.5rem; border-top: 1px solid #eaeaea;
		}
		.more-features-inner { max-width: 1000px; margin: 0 auto; }
		.mf-title {
			text-align: center; font-family: var(--font-eng); font-size: 1.5rem; font-weight: 900;
			letter-spacing: 0.1em; margin-bottom: 3rem;
		}
		.mf-grid {
			display: grid; grid-template-columns: 1fr; gap: 1.5rem;
		}
		@media(min-width: 768px){ .mf-grid { grid-template-columns: repeat(2, 1fr); } }

		.mf-banner {
			position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 21/9;
			box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: block;
		}
		.mf-banner:hover img { transform: scale(1.05); }
		.mf-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
		.mf-overlay {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
			padding: 1.5rem; display: flex; flex-direction: column; justify-content: center;
		}
		.mf-label { font-family: var(--font-eng); color: var(--accent-gold); font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
		.mf-banner-title { color: #fff; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 800; line-height: 1.4; }

		/* Footer */
		.site-footer { background: #111; color: #fff; text-align: center; padding: 3rem 0 130px 0; font-size: 0.8rem; }








/* ========================================
Bottom Fixed Action Bar
======================================== */
.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;
	border-top: 1px solid var(--color-border);
	z-index: 100;
}

.balloon-1 {
	position: absolute;
	bottom: calc(100% + 15px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-pink);
	color: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(192, 108, 132, 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(--color-pink);
}

@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(--color-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);
}