/* --- Base Variables --- */
:root {
	--color-text: #0f3c1e;
	--color-heading: #10421d;
	--color-accent: #a88d5e;
	--color-bg: #ffffff;
	--color-bg-sub: #fcfbf9;
	--font-serif: "Noto Serif JP", serif;
	--font-sans: "Noto Sans JP", sans-serif;
	--backcolor: #f9f8f6;
	--header-height: 80px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* --- Reset & Base Styles --- */
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	color: var(--color-text);
	line-height: 1.8;
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-serif);
	color: var(--color-heading);
	margin: 0;
	font-weight: 600;
}

a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease, color 0.3s ease;
}

a:hover {
	opacity: 0.7;
	color: var(--color-accent);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Components: Section Title --- */
.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title-en {
	display: block;
	font-family: var(--font-serif);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-accent);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.section-title-en-left {
	text-align: left;
	display: block;
	margin-bottom: 10px;
}

.section-title-ja {
	display: block;
	font-size: 28px;
	letter-spacing: 0.05em;
}

.section-title-ja-greenback {
	display: block;
	font-size: 28px;
	letter-spacing: 0.05em;
	color: #ffffff;
}

.text-muted {
	color: #666;
}

.shop-text-muted {
	color: #eee;
	font-size: 21px;
	font-family: var(--font-serif);
}

/* --- Header --- */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(5px);
	z-index: 100;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	height: var(--header-height);
	display: flex;
	align-items: center;
}

/* --- Header Logo (元に戻す設定) --- */
.logo img {
	height: 60px;
	width: auto;
	display: block;
}

/* ヘッダー内での配置調整 */
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* --- Hero Logo (メイン画像の上) --- */
/* --- Heroコンテンツ全体の中央配置 --- */
.hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 100%;
	text-align: center;
}

/* --- Heroロゴ（白背景・楕円・透過） --- */
.hero-logo img {
	min-width: 280px;
	display: inline-block;
}

.hero-logo-image {
	width: 280px;
	height: auto;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.hero-logo-wrap {
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .15));
}

/* スマホ用の調整 */
@media (max-width: 768px) {
	.hero-logo-wrap {
		padding: 25px 40px;
	}

	.hero-logo-image {
		width: 200px;
	}
}

/* スマホ用の調整 */
@media (max-width: 768px) {
	.hero-logo img {
		width: 75%;
		padding: 30px 40px;
	}
}

.hero-logo img {
	width: 300px;
	max-width: 80%;
	height: auto;
	/* filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); */
}

/* スマホ対応 */
@media (max-width: 768px) {
	.logo img {
		height: 40px;
	}

	.hero-logo img {
		width: 200px;
	}
}

.nav-list {
	display: flex;
	gap: 30px;
}

.nav-item a {
	font-size: 14px;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.nav-accent {
	color: var(--color-accent);
}

/* Instagramアイコンのスタイル */
.header-instagram {
	display: flex;
	align-items: center;
	padding-top: 3px;
	margin-left: -10px;
	color: var(--green);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.header-instagram:hover {
	opacity: 0.7;
	transform: translateY(-1px);
	color: var(--green2);
}

/* --- ハンバーガーメニューのスタイル --- */
.burger-btn {
	background: none;
	border: none;
	width: 44px;
	height: 44px;
	position: relative;
	z-index: 1000;
	cursor: pointer;
}

.burger-line {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.burger-line::before,
.burger-line::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: var(--color-text);
	left: 0;
	transition: transform 0.3s;
}

.burger-line::before {
	top: -8px;
}

.burger-line::after {
	bottom: 8px;
}

/* --- モバイルパネル（スマホ用全画面メニュー） --- */
/* クラス「open」がついた時に画面にスライドしてくる */
/* 閉じるボタン（×）のスタイル */
.close-btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* モバイルメニュー内のリンク */
.mobile-nav a,
.js-accordion-trigger {
	font-size: 20px;
	font-family: var(--font-serif);
	color: var(--color-text);
	background: none;
	border: none;
	cursor: pointer;
}

/* --- レスポンシブ切り替え（980px以下） --- */
@media (max-width: 980px) {
	.pc-nav {
		display: none !important;
	}

	.burger-btn {
		display: block;
	}

	.header-instagram {
		display: none !important;
	}
}

/* --- ヘッダー・ナビゲーションの出し分け --- */
.pc-nav {
	margin-left: auto;
	margin-right: 30px;
}

.burger-btn {
	display: none;
}

/* --- 閉じるボタンのスタイル --- */
.close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 40px;
	background: none;
	border: none;
	color: var(--color-text);
	cursor: pointer;
	z-index: 1001;
	line-height: 1;
}

/* --- モバイルパネルの基本設定 --- */
.mobile-panel {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg);
	z-index: 2000;
	transition: right 0.4s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.mobile-panel.open {
	right: 0;
}

/* アコーディオンの初期状態 */
.submenu-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	list-style: none;
	padding-left: 0;
	text-align: center;
}

.has-submenu.is-open .submenu-list {
	max-height: 500px;
	margin-top: 20px;
}

.mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 30px;
	text-align: center;
}

.mobile-nav a {
	font-size: 20px;
	font-family: var(--font-serif);
	color: var(--color-text);
}

/* 画面幅が狭い時の設定 */
@media (max-width: 980px) {
	.pc-nav {
		display: none;
	}

	/* PC用ナビを消す */
	.burger-btn {
		display: block;
	}

	/* ハンバーガーを表示 */
	.header-inner {
		padding: 0 20px;
	}
}

/* --- Hero --- */
.hero {
	height: 100vh;
	min-height: 600px;
	background-color: #eee;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	margin-bottom: 60px;
}

.hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 2;
	pointer-events: none;
}

.hero-title {
	font-size: 4rem;
	margin-bottom: 20px;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	font-weight: 400;
	opacity: 0.9;
}



/* スライド画像の設定 */
.hero-slide {
	background-repeat: no-repeat;
}

/* activeクラスがついた画像を表示 */
/* 画像の上のオーバーレイ（文字を読みやすくする薄暗幕） */
#js-hero::after {
	pointer-events: none;
}

/* スクロールを促すサイン（任意追加） */
.hero-scroll {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --- ピックアップニュースとの繋がりを調整 --- */
.pickup-news {
	padding: 100px 0;
}

/* レスポンシブ対応：スマホのツールバー対策 */
@media (max-width: 768px) {
	#js-hero {
		height: 100svh;
	}

	.hero-title {
		font-size: 2.5rem;
	}
}

/* スライド画像共通設定 */
.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* 親要素の#js-heroがsvhになっているので、100%指定で十分です */
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	z-index: 1;
	display: grid;
	place-items: center;
	/* 背景画像が切れないように、coverにするか高さを固定します */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* activeクラスがついた画像だけ表示 */
.hero-slide.active {
	opacity: 1;
	z-index: 2;
}

/* 画像の上に薄い暗幕を敷く（文字を読みやすくする場合） */
#js-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 5;
}

/* --- News --- */
.news-section {
	background: var(--color-bg);
}

.news-page {
	padding-top: calc(var(--header-height) + 60px);
	padding-bottom: 100px;
	min-height: 100vh;
}

.news-list {
	max-width: 800px;
	margin: 0 auto;
}

.news-item {
	border-bottom: 1px solid #eee;
}

.news-link {
	display: flex;
	align-items: baseline;
	padding: 20px 0;
	gap: 30px;
}

.news-date {
	font-family: var(--font-serif);
	font-size: 14px;
	min-width: 100px;
}

.news-title {
	font-size: 15px;
}

.news-more {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}

.news-more-link {
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
}

/* お知らせ詳細ページのレイアウト */
.news-detail {
	padding-top: calc(var(--header-height) + 80px);
	padding-bottom: 100px;
	background-color: #fff;
}

.news-article {
	max-width: 800px;
	margin: 0 auto;
}

.article-header {
	text-align: center;
	margin-bottom: 40px;
}

.article-meta {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 20px;
}

.article-title {
	font-size: 28px;
	font-family: var(--font-serif);
	line-height: 1.4;
	color: var(--color-heading);
}

.article-eyecatch {
	margin-bottom: 50px;
}

.article-eyecatch img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* 本文エリアの装飾 */
.article-content {
	line-height: 2;
	color: #444;
	font-size: 16px;
	margin-bottom: 80px;
}

.article-content p {
	margin-bottom: 2em;
}

.article-content h3 {
	font-size: 20px;
	font-family: var(--font-serif);
	border-left: 4px solid var(--color-accent);
	padding-left: 15px;
	margin: 40px 0 20px;
}

.article-sub-image {
	margin: 40px 0;
	text-align: center;
}

.article-sub-image img {
	max-width: 100%;
}

.article-sub-image .caption {
	font-size: 12px;
	color: #888;
	margin-top: 10px;
}

.article-footer {
	border-top: 1px solid #eee;
	padding-top: 50px;
	text-align: center;
}

/* --- Original (About) --- */
.original-section {
	padding: 100px 0;
	background: var(--backcolor);
}

.original-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.original-image img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.original-text {
	padding: 20px;
	color: #131313;
}

.original-plate {
	color: #666;
	font-size: 16px;
}

.original-lead {
	font-family: var(--font-serif);
	font-size: 24px;
	margin-bottom: 30px;
	line-height: 1.6;
}

.notes {
	font-size: 12px;
}

/* --- Concept (About) --- */
.concept-section {
	padding: 100px 0;
	background: var(--color-bg-sub);
}

.concept-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.concept-image img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.concept-text {
	padding: 20px;
}

.concept-lead {
	font-family: var(--font-serif);
	font-size: 24px;
	margin-bottom: 30px;
	line-height: 1.6;
}

.news-section {
	padding: 100px 0;
}

/* --- Products (Lineup) --- */
.products-section {
	padding: 100px 0;
}

.product-card {
	display: block;
	text-align: center;
}

.product-thumb {
	aspect-ratio: 1 / 1;
	background-color: #f0f0f0;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.product-card:hover .product-thumb img {
	transform: scale(1.05);
}

.product-name {
	font-size: 18px;
	margin-bottom: 12px;
	font-family: var(--font-serif);
}

/* 商品説明 */
.product-desc {
	font-size: 13px;
	line-height: 1.6;
	color: #666;
	margin-bottom: 15px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* 価格 */
.product-price {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	font-family: var(--font-serif);
}

.products-more {
	text-align: center;
	margin-top: 60px;
}

.btn {
	border: 1px solid #ddd;
	padding: 15px 40px;
	border-radius: 30px;
	font-size: 14px;
	display: inline-block;
}

/* --- Online Shop --- */
.online-section {
	padding: 80px 0;
	background: #0f3c1e;
}

.online-more {
	text-align: center;
	margin-top: 40px;
}

.online-more-link {
	font-size: 14px;
	color: #fff;
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
}

.os-flex-container {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* 左側テキストエリア */
.os-text-side {
	flex: 1;
	z-index: 2;
}

.section-header-left {
	margin-bottom: 30px;
	text-align: left;
}

.os-description {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 40px;
	max-width: 480px;
	color: #e0e0e0;
}

/* ボタンデザイン */
.os-button-group {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 400px;
}

.os-btn-item {
	display: block;
	background: #fff;
	color: #0f3c1e;
	padding: 20px 30px;
	border-radius: 2px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.os-btn-item:hover {
	background: #fff;
	transform: translateX(10px);
	opacity: 1;
}

.os-btn-inner {
	display: flex;
	align-items: center;
	position: relative;
}

.os-btn-label {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.os-btn-sub {
	font-size: 11px;
	margin-left: 15px;
	opacity: 0.6;
	font-family: var(--font-serif);
	text-transform: uppercase;
}

.arrow-icon {
	margin-left: auto;
	font-style: normal;
	font-size: 20px;
}

/* 右側画像エリア */
.os-image-side {
	flex: 1.2;
	position: relative;
}

.os-main-img-wrapper {
	width: 100%;
	aspect-ratio: 10 / 9;
	padding-top: 30px;
	box-shadow: 20px 20px 0px rgba(15, 61, 46, 0.05);
}

.os-main-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 980px) {
	.os-flex-container {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.original-flex-container {
		display: flex;
	}

	.os-text-side {
		width: 100%;
	}

	.os-image-side {
		width: 100%;
	}

	.os-description {
		max-width: 100%;
	}

	.os-button-group {
		max-width: 100%;
	}

	.section-title-ja {
		font-size: 26px;
	}
}

/* --- Shop Info --- */
.shop-section {
	padding: 100px 0;
	background: var(--color-heading);
}

.shop-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

.shop-title {
	font-size: 20px;
	margin-bottom: 20px;
}

.shop-details dl {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 15px 0;
	margin-top: 30px;
}

.shop-details dt {
	color: var(--color-accent);
	font-size: 17px;
}

.shop-details dd {
	margin: 0;
	font-size: 17px;
	color: #eee;
}

.shop-link-wrap {
	margin-top: 30px;
}

.shop-link {
	font-size: 14px;
	color: var(--color-accent);
	border-bottom: 1px solid currentColor;
}

.map-frame {
	width: 100%;
	height: 350px;
	border: 0;
	background: #e0e0e0;
}

/* --- Footer --- */
.footer {
	background: #b3b0b0e3;
	text-align: center;
}

.footer-logo {
	font-family: var(--font-serif);
	font-size: 18px;
	letter-spacing: 0.05em;
}

.footer-logo img {
	text-align: center;
}

.copyright {
	letter-spacing: 0.05em;
}

/* --- Footer Styling --- */
.footer {
	padding: 60px 0 30px;
	background-color: #f6f6f6;
	border-top: 1px solid var(--border);
}

.footer .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ロゴエリア */
.footer-logo {
	margin-bottom: 20px;
}

.footer-logo img {
	height: 100px;
	width: auto;
	display: block;
}

/* ナビゲーション */
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 30px;
	margin-bottom: 20px;
}

.footer-nav a {
	color: var(--brand);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: color 0.3s;
}

.footer-nav a:hover {
	color: var(--brand-2);
}

/* コピーライト */
.copyright {
	font-size: 12px;
	color: var(--muted);
	border-top: 1px solid var(--border);
	width: 100%;
	text-align: center;
}

/* --- レスポンシブ (スマホ版) --- */
@media (max-width: 768px) {
	.footer {
		padding: 40px 0 20px;
	}

	.footer-logo {
		margin-bottom: 30px;
	}

	.footer-logo img {
		height: 70px;
	}

	/* スマホでは2列のグリッドにする */
	.footer-nav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		width: 100%;
		max-width: 400px;
		padding: 0 20px;
	}

	.footer-nav a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 12px 5px;
		background: var(--bg);
		border-radius: 8px;
		font-size: 13px;
	}

	/* 奇数（7個目）の「プライバシーポリシー」を中央に1枚で配置 */
	.footer-nav a:last-child:nth-child(odd) {
		grid-column: span 2;
		max-width: 60%;
		margin: 0 auto;
		width: 100%;
	}
}

/* 商品一覧ページのメインエリアに余白を作る */
.products-page {
	padding-top: calc(var(--header-height) + 40px);
	padding-bottom: 100px;
}

/* カテゴリナビ（ボタン）のスタイル調整 */
.category-nav {
	flex-wrap: wrap;
}

/* ボタンのデザイン */
.category-btn {
	border-radius: 30px;
}

/* 選択中のボタン */
.category-btn.active {
	border-color: var(--color-heading);
}

.category-btn:hover:not(.active) {
	border-color: var(--color-heading);
	color: var(--color-heading);
}

/* ふわっと表示させるアニメーション */
.animate-in {
	animation: fadeInUp 0.6s ease forwards;
	opacity: 0;
}

.product-grid-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px 20px;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 40px 20px;
}

/* おすすめラベルのスタイル */
.product-card.is-recommend::before {
	content: "recommend";
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-accent);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 2px;
	z-index: 1;
}

/* カテゴリナビ全体のコンテナ */
.category-nav {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 60px;
	padding-bottom: 10px;
}

/* ボタンの基本スタイル */
.category-btn {
	background: transparent;
	border: none;
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	padding: 10px 5px;
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease;
}

/* ホバー時にゴールドへ */
.category-btn:hover {
	color: var(--color-accent);
}

/* 案1のメイン：選択中のデザイン（下線） */
.category-btn.active {
	color: var(--color-accent);
}

.category-btn.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-accent);
	animation: lineExtend 0.4s ease forwards;
}

/* お知らせ一覧のコンテナ */
.news-full-list {
	max-width: 1000px;
	margin: 0 auto;
}

/* カード全体のリンク */
.news-list-link {
	display: flex;
	gap: 40px;
	text-decoration: none;
	color: var(--color-text);
	padding-bottom: 40px;
	border-bottom: 1px solid #eee;
	transition: opacity 0.3s;
}

.news-list-link:hover {
	opacity: 0.8;
}

/* テキストエリア (右側) */
.news-list-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.news-list-meta {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 12px;
}

.news-list-title {
	font-size: 20px;
	font-family: var(--font-serif);
	margin-bottom: 12px;
	line-height: 1.4;
}

.news-list-desc {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.news-list-more {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	font-weight: bold;
	text-decoration: underline;
}

/* スマホ対応：縦並びにする */
@media (max-width: 768px) {
	.news-list-link {
		flex-direction: column;
		gap: 20px;
		padding-bottom: 30px;
	}

	.news-list-title {
		font-size: 18px;
	}
}

.news-card-link {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.news-card-thumb {
	width: 100%;
	aspect-ratio: 21 / 9;
}

.news-card-title {
	font-size: 24px;
	line-height: 1.4;
}

.news-card-body {
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.news-card-link:hover {
	transform: translateX(10px);
}

.news-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-meta {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 8px;
}

/* リスト全体の幅を少し広げて空間を活用 */
.top-news-list {
	list-style: none;
	padding: 0;
	max-width: 1000px;
	margin: 0 auto 50px;
	border-top: 1px solid #ddd;
}

.top-news-link {
	display: flex;
	gap: 40px;
	padding: 30px 10px;
	text-decoration: none;
	color: var(--color-text);
	transition: background 0.3s;
	align-items: flex-start;
}

/* 左側：日付とカテゴリ */
.top-news-meta {
	width: 150px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.top-news-date {
	font-family: var(--font-serif);
	font-size: 16px;
	color: #888;
	line-height: 1;
}

.top-news-category {
	font-size: 10px;
	display: inline-block;
	align-self: flex-start;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	padding: 2px 8px;
}

/* 右側：タイトルと説明文 */
.top-news-content {
	flex: 1;
}

.top-news-title {
	font-size: 18px;
	font-family: var(--font-serif);
	margin-bottom: 10px;
	line-height: 1.4;
	color: var(--color-heading);
}

.top-news-desc {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* 右端の矢印（余白を埋めるアクセント） */
.top-news-arrow {
	align-self: center;
	color: var(--color-accent);
	font-size: 20px;
	transition: transform 0.3s;
}

.top-news-link:hover .top-news-arrow {
	transform: translateX(5px);
}

/* バナーセクション全体の余白 */
.bottom-banners {
	padding: 80px 0;
	background-color: #f9f8f6;
}

/* 2枚を横並びにするグリッド */
.banner-grid {
	display: flex;
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.banner-item {
	flex: 1;
}

.banner-item p {
	font-size: 12px;
	margin-bottom: -6px;
}

.banner-item h3 {
	font-size: 16px;
}

/* 変更後（これに置き換え） */
.banner-item>img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease;
}

/* ホバー時に少し浮き上がる演出 */
.store-btn img:hover {
	transform: translateY(-3px) scale(1.02);
}

.store-btn img {
	margin-top: 10px;
}

/* スマホでは縦並びに切り替え */
@media (max-width: 768px) {
	.banner-grid {
		flex-direction: column;
		gap: 20px;
		padding: 0 20px;
	}
}

/* スマホ対応 */
@media (max-width: 768px) {
	.top-news-link {
		flex-direction: column;
		gap: 15px;
		padding: 20px 10px;
	}

	.top-news-meta {
		width: 100%;
		flex-direction: row;
		align-items: center;
	}

	.top-news-arrow {
		display: none;
	}
}

.top-news-item {
	border-bottom: 1px solid #eee;
}

.top-news-link:hover {
	background-color: #fcfbf9;
}

@media (max-width: 600px) {
	.top-news-title {
		white-space: normal;
	}
}

.page-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pagination {
	margin-top: 60px;
}

.page-btn {
	background: transparent;
	border: 1px solid #ddd;
	color: var(--color-text);
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--font-serif);
	transition: all 0.3s ease;
	font-size: 14px;
}

/* 移動ボタン（矢印）は少し背景を薄くするなどの調整 */
.page-btn.move {
	font-weight: bold;
	background-color: #f9f9f9;
}

/* ホバー・アクティブ時 */
.page-btn:hover:not(:disabled) {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.page-btn.active {
	background-color: var(--color-heading);
	border-color: var(--color-heading);
	color: #fff;
}

/* 押せない状態（1ページ目の時の「前へ」など） */
.page-btn:disabled {
	cursor: default;
	opacity: 0.3;
	border-color: #eee;
}

/* 店舗案内ページ全体 */
.shop-page {
	padding-top: var(--header-height);
	padding-bottom: 120px;
}

/* 店舗セクション全体を縦並びの親にする */
.shop-item {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* 上段：写真と情報の横並び */
.shop-main-layout {
	align-items: flex-start;
}

/* 下段：マップとカレンダーの横並び */
.shop-access-group {
	width: 100%;
}



/* スマホ対応 */
@media (max-width: 800px) {

	.shop-main-layout,
	.shop-access-group {
		flex-direction: column;
	}

	.shop-visual img {
		height: 250px;
	}
}

/* 札幌店などは左右を入れ替える（オプション） */
.shop-item.reflect {
	flex-direction: row-reverse;
}

.shop-visual {
	flex: 3.0;
}

.shop-visual-sapporo {
	flex: 1.6;
}

.shop-info {
	flex: 0.5;
	margin-left: 10px;
}

.shop-name {
	font-size: 32px;
	font-family: var(--font-serif);
	color: var(--color-heading);
	margin-bottom: 30px;
	display: flex;
	align-items: baseline;
	gap: 15px;
}

.shop-name span {
	font-size: 16px;
	color: var(--color-accent);
	letter-spacing: 0.1em;
}

.shop-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.shop-table th,
.shop-table td {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	font-size: 15px;
	text-align: left;
}

.shop-table th {
	width: 100px;
	color: #888;
	font-weight: normal;
}

.shop-map {
	margin-top: 20px;
	filter: grayscale(0.2);
}

/* ページヘッダー共通スタイル */
.page-header {
	background-color: #fcfbf9;
	padding: 100px 0 60px;
	text-align: center;
	margin-bottom: 80px;
}

/* 英語タイトル（小さく上に配置） */
.page-title-en {
	display: block;
	font-family: var(--font-serif);
	font-size: 14px;
	color: var(--color-accent);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* 日本語タイトル（メイン） */
.page-title-ja {
	font-family: var(--font-serif);
	font-size: 32px;
	color: var(--color-heading);
	letter-spacing: 0.05em;
	position: relative;
	display: inline-block;
	padding-bottom: 15px;
}

/* タイトルの下の装飾線（任意） */
.page-title-ja::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background-color: var(--color-accent);
}

/* マップとカレンダーのグループ */
.shop-access-group {
	margin-top: 30px;
}

.shop-map-canvas {
	flex: 1.5;
}


.calendar-caption {
	font-size: 11px;
	color: #888;
	margin-top: 8px;
	text-align: right;
}

/* --- Pop-up (Modal) Design --- */
/* すべての要素でサイズ計算を正確にする（横並び崩れ防止） */
.modal-content * {
	box-sizing: border-box;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.is-open {
	display: flex;
}

.modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
}

.modal-content {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 1150px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 8px;
	animation: modalIn 0.4s ease-out forwards;
}

/* ★ここが重要：横並びの根幹 */
.modal-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* 左側：画像エリア */
.modal-visual {
	width: 55%;
	padding: 60px;
	border-right: 1px solid #eee;
}

.modal-main-image {
	background: #f9f9f9;
}

.modal-main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* サムネイル */
.modal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.modal-thumb-item {
	width: 60px;
	height: 60px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
}

/* 右側：情報エリア */
.modal-info {
	width: 45%;
	padding: 40px;
	display: flex;
	flex-direction: column;
}

/* --- Pop-up (Modal) Design Update --- */
/* ×ボタンを右上に固定 */
.modal-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 100;
	color: var(--color-text);
	transition: transform 0.3s ease, color 0.3s ease;
}

.modal-close-btn:hover {
	transform: rotate(90deg);
	color: var(--color-accent);
}

/* 深緑の要素を強調 */
.modal-name {
	font-size: 24px;
	color: var(--color-heading);
	border-bottom: 2px solid var(--color-heading);
	padding-bottom: 15px;
	margin-bottom: 20px;
	letter-spacing: 0.05em;
}

.modal-thumb-item.is-active {
	border-color: var(--color-heading);
	box-shadow: 0 0 5px rgba(15, 60, 30, 0.3);
}

/* 価格エリアに少しだけ背景色をつけて上品に */
.modal-price-area {
	background: #f4f7f4;
	padding: 20px;
	border-radius: 4px;
}

/* 画像にフェードアニメーション（自動切替用） */
.modal-desc {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* 価格リスト（左右並び） */
.modal-price-area {
	margin-top: auto;
}

.price-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid rgba(15, 60, 30, 0.1);
}

.price-item .val {
	font-weight: 600;
}

/* おすすめバッジのスタイル */
.recommend-badge {
	pointer-events: none;
}

.modal-desc {
	white-space: pre-wrap;
}

.store-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.store-btn {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	transition: transform 500ms ease, filter 500ms ease;
	will-change: transform;
}

.store-badge {
	width: clamp(160px, 30vw, 224px);
	height: auto;
	max-width: 100%;
	display: block;
}

.faq-page {
	padding-top: calc(var(--header-height) + 60px);
	padding-bottom: 100px;
	background-color: #fff;
}

/* --- FAQ Page --- */
.faq-container {
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 100px;
}

.faq-list {
	margin-top: 40px;
}

.faq-item {
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
}

/* 質問ボタン */
.faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 10px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-heading);
	text-align: left;
	transition: color 0.3s;
}

.faq-question:hover {
	color: var(--color-accent);
}

/* プラス・マイナスアイコン */
.faq-question .icon {
	position: relative;
	width: 20px;
	height: 20px;
}

.faq-question .icon::before,
.faq-question .icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background-color: var(--color-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.3s;
}

.faq-question .icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いている時のアイコン（マイナスにする） */
.faq-item.is-open .faq-question .icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* 回答エリア（初期は非表示） */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.faq-item.is-open .faq-answer {
	max-height: 500px;
}

.faq-answer-inner {
	padding: 0 10px 30px;
	line-height: 1.8;
	color: #666;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.modal-inner {
		flex-wrap: wrap;
	}

	.modal-visual,
	.modal-info {
		width: 100%;
		border-right: none;
	}

	.modal-info {
		padding: 25px;
	}
}

/* スマホ対応：縦に並べる */
@media (max-width: 768px) {
	.shop-calendar-canvas.responsive-iframe {
		padding-top: 100%;
		/* 6週ある月でも表示しやすい。150〜200で調整OK */
	}
}

/* スマホ対応 */
@media (max-width: 768px) {
	.page-header {
		padding: 80px 0 40px;
		margin-bottom: 50px;
	}

	.page-title-ja {
		font-size: 24px;
	}

	.shop-map {
		margin-left: -8px;
	}
}

/* スマホ対応 */
@media (max-width: 900px) {

	.shop-item,
	.shop-item.reflect {
		flex-direction: column;
		gap: 30px;
		margin-bottom: 80px;
	}

	.shop-visual img {
		height: 300px;
	}
}

/* おすすめバッジ（左上） */
.product-card {
	position: relative;
}

.recommend-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 10;
	background: var(--color-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 4px 12px;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 商品切替時のふわっとしたアニメーション */
#js-product-list.fade-in {
	animation: productsFadeIn 1.8s ease forwards;
}

/* --- お知らせ詳細ページ全体のレイアウト --- */
.news-detail-page {
	padding-top: calc(var(--header-height) + 60px);
	padding-bottom: 100px;
	background-color: #fff;
}

.news-detail-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- 記事ヘッダー（日付とタイトル） --- */
.news-detail-header {
	text-align: center;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--color-bg-sub);
	padding-bottom: 30px;
}

.news-date {
	color: var(--color-accent);
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}

.news-detail-header h1 {
	font-size: 1.8rem;
	line-height: 1.4;
	font-family: var(--font-serif);
}

/* --- 記事本文 --- */
.news-detail-body {
	line-height: 2;
	color: #444;
}

/* 営業時間のリストをおしゃれに */
.news-info-list {
	margin: 40px 0;
	padding: 30px;
	background-color: var(--color-bg-sub);
	border-radius: 8px;
}

.news-info-list li {
	margin-bottom: 15px;
	padding-left: 1.5em;
	position: relative;
}

.news-info-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: bold;
}

.news-info-list li span {
	font-weight: 600;
	color: var(--color-heading);
	margin-right: 10px;
}

.news-footer-text {
	margin-top: 40px;
	text-align: center;
}

/* 一覧へ戻るボタン */
.back-to-news {
	margin-top: 60px;
	text-align: center;
}

.back-to-home {
	margin-top: 60px;
	text-align: center;
	margin-bottom: 60px;
}

.btn-back {
	display: inline-block;
	padding: 12px 40px;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	border-radius: 999px;
	transition: all 0.3s ease;
}

.btn-back:hover {
	background-color: var(--color-accent);
	color: #fff;
	opacity: 1;
}

/* --- Privacy Policy Page --- */
.privacy-container {
	max-width: 850px;
	margin: 0 auto;
	padding-bottom: 120px;
}

.privacy-content {
	margin-top: 50px;
	line-height: 1.8;
	color: var(--color-text);
}

.privacy-intro {
	margin-bottom: 60px;
	font-size: 1.05rem;
}

.privacy-section {
	margin-bottom: 50px;
}

.privacy-section h2 {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	color: var(--color-heading);
	border-bottom: 1px solid var(--color-accent);
	padding-bottom: 10px;
	margin-bottom: 20px;
	display: inline-block;
}

.privacy-section p {
	margin-bottom: 15px;
}

.privacy-section ul {
	list-style: none;
	padding-left: 0;
}

.privacy-section ul li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 10px;
}

.privacy-section ul li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: bold;
}

.company-name {
	font-weight: 600;
}

.privacy-page {
	padding: 80px 0;
	background: var(--color-bg);
}

/* スマホ対応 */
@media (max-width: 768px) {
	.news-detail-page {
		padding-top: calc(var(--header-height) + 40px);
	}

	.news-detail-header h1 {
		font-size: 1.4rem;
	}

	.news-info-list {
		padding: 20px;
	}
}

@keyframes productsFadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* モーダル画像の切替をなめらかに */
#js-modal-img {
	transition: opacity 0.4s ease;
}

.modal-main-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #fcfbf9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@media (max-width: 480px) {
	.page-btn {
		width: 35px;
		height: 35px;
		font-size: 12px;
	}
}

/* スマホ対応 */
@media (max-width: 600px) {
	.news-card-link {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.news-card-thumb {
		width: 100%;
	}
}

/* 線がスッと伸びるアニメーション */
@keyframes lineExtend {
	from {
		width: 0;
		left: 50%;
	}

	to {
		width: 100%;
		left: 0;
	}
}

/* スマホでは横スクロールを許可 */
@media (max-width: 768px) {
	.category-nav {
		justify-content: flex-start;
		overflow-x: auto;
		gap: 20px;
		padding: 0 20px 15px;
		-webkit-overflow-scrolling: touch;
	}

	.category-btn {
		font-size: 14px;
		white-space: nowrap;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.header-inner {
		padding: 0 20px;
	}

	.nav-list {
		display: none;
	}

	/* モバイルメニューは省略 */
	.hero-title {
		font-size: 2.5rem;
	}

	.concept-inner,
	.shop-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media(max-width:820px) {
	.shop-content {
		grid-template-columns: 1fr;

	}
}


@media (max-width: 768px) {
	.product-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 40px 20px;
	}
}

@media (max-width: 768px) {

	/* フッター全体のコンテナを中央揃えに強制 */
	.footer .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
		padding: 0 20px;
	}

	.footer-logo {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 30px;
	}

	/* ナビゲーションを中央寄せにするための修正 */
	.footer-nav {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		width: 100%;
		max-width: 400px;
		margin: 0 auto 40px;
		padding: 0;
		justify-content: center;
	}

	.footer-nav a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 12px 5px;
		background: var(--surface-2);
		border-radius: 8px;
		font-size: 13px;
		width: 100%;
		margin: 0 !important;
	}

	/* 7つ目の「プライバシーポリシー」を中央に */
	.footer-nav a:last-child:nth-child(odd) {
		grid-column: span 2;
		width: 100%;
		max-width: 100%;
	}

	.copyright {
		width: 100%;
		text-align: center;
	}

	.original-inner {
		flex-direction: column;
		display: flex;
		gap: 40px;
	}
}

@media (max-width: 768px) {

	/* このまとまりを中央に */
	.shop-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-left: 0px;
	}

	/* 説明文は読みやすく左寄せに戻す（好みで） */
	.shop-text-muted {
		max-width: 32em;
		text-align: center;
		font-size: 18px;
		margin: 0px auto 14px;
	}

	/* 店舗情報のDLは「ブロックだけ中央・文字は左」 */
	.shop-details {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

@media (max-width: 768px) {

	/* dl とリンクを「同じ幅」にする（ddの左端基準が揃う） */
	.shop-details dl,
	.shop-link-wrap {
		width: min(92vw, 420px);
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	/* dlを中央に置くための保険（すでに入れててもOK） */
	.shop-details {
		display: block;
	}

	/* リンクwrap内が中央寄せになってたら解除 */
	.shop-link-wrap {
		display: block;
		margin-top: 14px;
	}

	/* 地図は中央に */
	.shop-map {
		display: flex;
		justify-content: center;
		margin-top: 16px;
	}

	/* iframe をレスポンシブに（中央のまま縮む） */
	.shop-map iframe {
		width: min(92vw, 530px);
		aspect-ratio: 530 / 450;
		height: auto;
		display: block;
	}
}



/* お知らせ一覧のレイアウト（3列グリッドなど） */
.news-full-list {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
	.news-full-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.news-full-list {
		grid-template-columns: 1fr;
	}
}

/* お知らせ一覧のコンテナ */
.news-full-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 50px;
}

/* お知らせ1件のスタイル */
.news-list-item a {
	display: flex;
	gap: 20px;
	background: #fff;
	border-bottom: 1px solid var(--border);
	padding-bottom: 24px;
	align-items: center;
	transition: transform 0.3s ease;
}

.news-list-item a:hover {
	opacity: 1;
	transform: translateX(5px);
}

/* 左側の画像エリア */
.news-list-thumb {
	flex: 0 0 200px;
	height: 140px;
	border-radius: 8px;
}

.news-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.news-list-thumb {
		width: 100%;
		aspect-ratio: 16 / 10;
		height: auto;
		display: flex;
		flex: 0.4;
		justify-content: center;
		align-items: center;
		background: #fff;
	}

	.news-list-thumb img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		display: block;
	}
}

@media (max-width: 400px) {
	.news-list-thumb {
		flex: 0.7;

	}
}

/* 右側のテキストエリア */
.news-list-body {
	flex: 1;
}

.news-list-body h3 {
	font-size: 1.15rem;
	margin: 8px 0;
	color: var(--brand);
}

.news-list-body p {
	font-size: 0.95rem;
	color: var(--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* スマホ版の調整 */
@media (max-width: 600px) {
	.news-list-item a {
		flex-direction: row;
		gap: 12px;
	}

	.news-list-body h3 {
		font-size: 1rem;
	}

	.news-list-body p {
		display: none;
	}
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0;
	padding: 0 10px;
}

.page-btn {
	min-width: 40px;
	height: 40px;
	padding: 0 5px;
}

/* 省略記号「...」のスタイル */
.page-dot {
	color: var(--muted);
	padding: 0 5px;
	user-select: none;
}

/* ふるなびセクション専用 */
.furunavi-section {
	padding: 80px 0;
	background-color: var(--color-bg-sub);
}

/* 左右レイアウトの基本構造 */
.section-layout {
	display: flex;
	align-items: center;
	gap: 60px;
}

.section-visual,
.section-info {
	flex: 1;
}

/* 画像の装飾（オリジナルデコに合わせる） */
.section-visual img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s ease;
}

.section-visual a:hover img {
	transform: scale(1.02);
}

/* テキストエリア */
.section-info .section-title-en {
	display: block;
	color: var(--color-accent);
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

.section-info .section-title-ja {
	font-size: 2rem;
	margin-bottom: 24px;
	color: var(--color-text);
}

.section-desc {
	margin-bottom: 30px;
	line-height: 2;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.section-layout {
		flex-direction: column;
		gap: 30px;
		text-align: center;
	}

	.section-info .section-title-ja {
		font-size: 1.5rem;
	}
}

/* サブカテゴリナビのスタイル */
.sub-category-nav {
	display: none;
	justify-content: center;
	gap: 20px;
	margin: -60px auto 30px;
	padding: 10px 0;
}

.sub-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: var(--color-text);
	opacity: 0.6;
	padding: 5px 10px;
	position: relative;
	transition: all 0.3s ease;
}

/* 選択中のスタイル（深緑・太字・下線） */
.sub-btn.is-active {
	opacity: 1;
	font-weight: 600;
}

.sub-btn.is-active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 80%;
	height: 2px;
	background-color: var(--color-text);
}

/* モバイル版のスタイル調整 */
@media (max-width: 768px) {
	.category-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sub-btn {
		font-size: 12px;
		/* 通常より1〜2px下げる */
		letter-spacing: -0.5px;
		/* 文字間隔を少し詰める */
	}

}

/* トップへ戻るボタンの基本スタイル */
.scroll-top-btn {
	position: fixed;
	right: 25px;
	bottom: 25px;
	width: 50px;
	height: 50px;
	background-color: var(--color-text);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 表示された時のクラス */
.scroll-top-btn.is-visible {
	opacity: 1;
	visibility: visible;
}

.scroll-top-btn:hover {
	transform: translateY(-5px);
	background-color: var(--color-accent);
}

/* 矢印（CSSで作成） */
.scroll-top-btn .arrow {
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
	margin-top: 5px;
}

/* スマホでは少し小さく、端に寄せる */
@media (max-width: 768px) {
	.scroll-top-btn {
		right: 15px;
		bottom: 15px;
		width: 45px;
		height: 45px;
	}
}

/* iframeを包む親要素の共通設定 */
.responsive-iframe {
	margin-bottom: 20px;
}

.responsive-iframe iframe {
	aspect-ratio: 16 / 9;
}

/* スマホ表示のレイアウト調整 */
@media (max-width: 768px) {
	.shop-access-group {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.responsive-iframe iframe {
		aspect-ratio: 1 / 1;
	}
}

/* セクション全体の余白 */
.shop-item {
	margin-bottom: 80px;
}

/* 塊1：店舗画像と店舗情報 */
.shop-main-layout {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.shop-main-layout {
		flex-direction: row;
		align-items: stretch;
	}

	.shop-visual {
		flex: 1;
	}

	.shop-info {
		flex: 1.2;
	}
}

.shop-visual img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 20px;
}

.shop-visual-sapporo img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 40px;
}

/* 塊2：アクセス（マップ・カレンダー） */
.shop-access-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 768px) {

	/* マップとカレンダーが両方ある場合、PCで横並びにする */
	.shop-access-group {
		flex-direction: row;
	}

	.shop-access-group>div {
		flex: 1;
	}
}

/* iframeのレスポンシブ対応 */
.responsive-iframe {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #f8f8f8;
	border-radius: 8px;
	overflow: hidden;
}

.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: none;
}

/* 店舗間の区切り線 */
.shop-divider {
	border: none;
	border-top: 1px dashed #ccc;
	margin: 60px 0;
}

.shop-name-top {
	font-family: var(--font-serif);
	font-size: 2rem;
	color: var(--color-text);
	margin-bottom: 25px;
	margin-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: baseline;
	gap: 15px;
}

.shop-name-top span {
	font-family: var(--font-en);
	font-size: 1.2rem;
	color: var(--color-accent);
	letter-spacing: 0.1em;
}

@media (max-width: 768px) {
	.footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* 4→2に */
	}

	.footer-nav a {
		white-space: nowrap;
		/* 文字だけ折り返し防止 */
	}
}

/* さらに小さい端末対策（iPhone SE など） */
@media (max-width: 360px) {
	.footer-nav a {
		font-size: 12px;
		padding: 10px 4px;
	}
}

/* パンくずリスト */
.breadcrumb {
	background-color: var(--color-bg);
	padding: 15px 0;
	font-size: 0.85rem;
}

.breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: #888;
}

.breadcrumb li {
	display: flex;
	align-items: center;
}

/* 区切り線の追加（ / ） */
.breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 10px;
	font-size: 0.7rem;
	color: #ccc;
}

.breadcrumb a {
	color: #666;
	transition: color 0.3s ease;
}

.breadcrumb a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

/* 現在のページ（リンクなし） */
.breadcrumb li:last-child span {
	color: var(--color-text);
	font-weight: 500;
}

/* モーダル内の説明文エリアのリスト調整 */
.news-detail-body h2 {
	padding: 0;
	margin-top: 40px;
}

.news-detail-body ul {
	list-style: none;
	/* デフォルトの点を消す */
	padding: 0;
	margin: 1.5rem 0;
}

.news-detail-body li {
	position: relative;
	padding-left: 1.5em;
	/* アイコン分の余白 */
	line-height: 1.8;
	/* 行間を広げて読みやすく */
	margin-bottom: 0.5rem;
	/* 項目ごとの隙間 */
	font-size: 0.95rem;
	color: #444;
	/* 文字色は少し柔らかい黒 */
}

/* 点の代わりにアクセントカラーの小さな正方形を配置 */
.news-detail-body li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.7em;
	/* 文字の高さに合わせる */
	width: 6px;
	height: 6px;
	background-color: #0f3c1e;
	/* お店のテーマカラー（深緑） */
	transform: rotate(45deg);
	/* 少し傾けてダイヤ型に */
}

@media (max-width: 768px) {
	.breadcrumb {
		padding: 10px 0;
		font-size: 0.75rem;
	}
}

/* PC（デフォルト） */
.hero-slide--1 {
	background-image: url("./lineup/images/other/other-hero-macaron-pc.JPG");
}

.hero-slide--2 {
	background-image: url("./lineup/images/other/other-hero-kyabetsu-pc.jpg");
}

.hero-slide--3 {
	background-image: url("./lineup/images/other/other-hero-donut.jpg");
}

.hero-slide--4 {
	background-image: url("./lineup/images/other/other-hero-ichigo-chan-1.jpg");
}

/* スマホ（例 432px以下） */
@media (max-width: 1000px) {

	.hero-slide--2 {
		background-image: url("./lineup/images/other/other-hero-kyabetsu-sp.JPG");
	}
}

/* スマホ（例 432px以下） */
@media (max-width: 432px) {
	.hero-slide--1 {
		background-image: url("./lineup/images/other/other-hero-macaron-sp.JPG");
	}

	.hero-slide--2 {
		background-image: url("./lineup/images/other/other-hero-kyabetsu-sp.JPG");
	}

	.hero-slide--3 {
		background-image: url("./lineup/images/other/other-hero-donut.jpg");
	}

	.hero-slide {
		background-size: auto 100%;
		/* 高さを100%に合わせる（横は必要ならはみ出す） */
		background-position: center;
		/* トリミングは左右均等に */
		background-repeat: no-repeat;
		/* 念のため */
		background-color: transparent;
		/* 余白色は出さない（緑が映るのを防ぐ） */
	}
}