@charset "UTF-8";

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	color: #111;
	background: #f2f2f2;
}

.box {
	max-width: 900px;
	margin: 20px auto 40px;
	padding: 20px 10px;
	background: #fff;
	text-align: center;
	border-radius: 5px;
}

h1 {
	font-size: 26px;
}

h1:only-child {
	margin: 0 0 0px;
}

h1:has(+ *) {
	margin: 0 0 30px;
}

h2 {
	font-size: 22px;
}

p {
	line-height: 2;
	margin: 0 0 10px;
	text-wrap: balance;
}

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

li {
	margin-bottom: 20px;
}

/* -----------------------------------
 * エリアメニュー基本設定
 * ----------------------------------- */
.area-menu {
	max-width: 900px;
	margin: 10px auto;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

.area-title {
	font-size: 1.25rem;
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 2px solid #333;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* 2つ目以降のエリアタイトル（見出しの上部に30pxの隙間を追加） */
.area-title ~ .area-title {
	margin-top: 30px;
}

/* メニューカードの親リスト (デフォルト：SP向けで縦並び) */
.menu-grid {
	list-style: none;
	padding: 0;
	margin: 10px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 各メニューグループ（枠囲みカード） */
.menu-card {
	background-color: #f2f2f2;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 0; /* 共通liのmargin-bottom(20px)を消去し、gap: 10pxを優先させる */
}

.menu-card-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin: 0 0 10px 0;
	color: #222;
}

/* カード内の箇条書きリンク */
.menu-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.menu-links li {
	margin-bottom: 8px;
}

.menu-links li:last-child {
	margin-bottom: 0;
}

.menu-links a {
	color: #0066cc;
	text-decoration: underline;
	word-break: break-all;
}

.menu-links a:hover {
	text-decoration: none;
	opacity: 0.8;
}

/* 注意書き赤枠 */
.attention-red {
	background-color: #f9e7e8;
	border-radius: 5px;
	margin: 10px 0;
	padding: 10px;
}

.attention-red p {
	margin: 0;
}

/* -----------------------------------
 * 画像コンテナ設定（下層ページ用）
 * ----------------------------------- */
.image-container {
	width: 100%;
	max-width: 900px; /* 最大幅を900pxに制限 */
	margin: 20px auto; /* 上下に余白を設定して中央配置 */
	display: flex;
	flex-direction: column; /* 画像を縦に並べる */
	gap: 20px; /* 画像間の隙間 */
	padding: 0 0px; /* スマホ表示時の画面端のはみ出し防止 */
	box-sizing: border-box;
}

.image-container img {
	width: 100%; /* コンテナの横幅に合わせる */
	height: auto; /* 縦横比を維持 */
	display: block;
}

/* -----------------------------------
 * ヘッダー全体設定
 * ----------------------------------- */
header {
	background-color: #000;
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	height: 60px; /* SP（スマホ）向け高さ */
}

/* ヘッダー内部のインナー枠 */
.header-inner {
	max-width: 960px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

header img {
	width: 136px;
	height: 34px;
	display: block;
}

/* -----------------------------------
 * フッター全体設定
 * ----------------------------------- */
.site-footer {
	background-color: #000;
	color: #fff;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0 0;
	padding: 0 15px;
	box-sizing: border-box;
	height: 40px; /* SP（スマホ）向け高さ */
}

.site-footer .copyright {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1;
}

/* -----------------------------------
 * 1. ボタン基本構造 (Base)
 * ----------------------------------- */
.btn-container {
	margin-top: 20px;
}

.btn {
	display: inline-block;
	width: 100%;
	max-width: 360px;
	padding: 14px 20px;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	border-radius: 6px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	transition: all 0.2s ease;
	box-sizing: border-box;
	position: relative;
}

.btn:hover {
	opacity: 0.95;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	transform: translateY(1px);
}

/* -----------------------------------
 * 2. カラーバリエーション (Color)
 * ----------------------------------- */
/* 赤色 */
.btn--red {
	background-color: #bc3624;
}

.btn--red:hover {
	background-color: #a52f1f;
}

/* 金色 / カーキ色 */
.btn--gold {
	background-color: #b09a68;
}

.btn--gold:hover {
	background-color: #9d885a;
}

/* -----------------------------------
 * 3. アイコン指定 (Icon)
 * ----------------------------------- */
/* 右矢印アイコン ( > ) */
.btn--arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* 別窓アイコン ( SVG ) */
.btn--blank::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* -----------------------------------
 * アコーディオン共通設定
 * ----------------------------------- */
.accordion-store {
	margin: 15px auto 0;
	max-width: 600px;
	border: 1px solid #ccc;
	border-radius: 5px; /* 単体（1つ）の場合は上下左右とも角丸 */
	overflow: hidden;
	background: #fff;
	text-align: left;
	transition: border-radius 0.2s ease;
}

/* -----------------------------------
 * 複数連続して並ぶ場合の自動調整
 * ----------------------------------- */
/* 2つ目以降のアコーディオンは上のマージンを消し、上の枠線の重複を防ぐ */
details.accordion-store + details.accordion-store {
	margin-top: -1px; /* 枠線を重なり合わせて1本の線にする */
}

/* 連続する先頭のアコーディオン：下側の角丸を解除 */
details.accordion-store:has(+ details.accordion-store) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* 連続する中間・最後のアコーディオン：上側の角丸を解除 */
details.accordion-store + details.accordion-store {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* -----------------------------------
 * アコーディオン内部パーツの基本設定
 * ----------------------------------- */
.accordion-header {
	padding: 12px 15px;
	font-weight: bold;
	background-color: #f8f8f8;
	cursor: pointer;
	position: relative;
	list-style: none; /* デフォルトの三角アイコン消去 */
	user-select: none;
}

.accordion-header::-webkit-details-marker {
	display: none;
}

/* 右側の＋／ー アイコン */
.accordion-header::after {
	content: "＋";
	position: absolute;
	right: 15px;
	font-size: 14px;
	color: #666;
}

details[open] .accordion-header::after {
	content: "ー";
}

.accordion-header:hover {
	background-color: #eee;
}

.accordion-content {
	padding: 15px;
	border-top: 1px solid #ddd;
	background-color: #fff;
}

.accordion-content p {
	margin: 0;
	line-height: 1.6;
	text-wrap: auto;
}

/* -----------------------------------
 * アコーディオン内の店舗箇条書きリスト（中黒の復元）
 * ----------------------------------- */
.store-list {
	list-style: disc; /* 中黒（・）を表示 */
	padding-left: 20px; /* ポッチが表示される領域を確保 */
	margin: 0;
}

.store-list li {
	margin-bottom: 8px; /* 各店舗の行間 */
	line-height: 1.5;
}

.store-list li:last-child {
	margin-bottom: 0;
}

/* -----------------------------------
 * 公式アプリ ストアルバッジエリア
 * ----------------------------------- */
.app-badges {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-top: 20px;
	flex-wrap: wrap; /* スマホ画面で幅が足りない場合に折り返し */
}

.app-badges a {
	display: inline-block;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-badges a:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.app-badges img {
	height: 48px; /* ストアルバッジ標準高さ */
	width: auto;
	display: block;
}

/* -----------------------------------
 * 期間限定メニュー（キャンペーンコンテンツエリア）
 * ----------------------------------- */
.campaign-section {
	margin-top: 30px;
	text-align: left;
}

.campaign-title {
	font-size: 1.3rem;
	font-weight: bold;
	color: #000;
	border-bottom: 2px solid #333;
	padding-bottom: 8px;
	margin: 0 0 10px 0;
}

.campaign-period {
	font-size: 0.95rem;
	color: #d9534f;
	font-weight: bold;
	margin: 0 0 20px 0;
}

.campaign-item-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.campaign-item {
	display: flex;
	flex-direction: column;
	background-color: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 15px;
	gap: 15px;
}

.campaign-item-media {
	width: 100%;
}

.campaign-item-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	object-fit: cover;
}

.campaign-item-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.campaign-item-name {
	font-size: 1.15rem;
	font-weight: bold;
	margin: 0 0 8px 0;
	color: #111;
}

.campaign-item-price {
	font-size: 1rem;
	color: #bc3624;
	font-weight: bold;
	margin: 0 0 10px 0;
}

.campaign-item-price .price-num {
	font-size: 1.25rem;
}

.campaign-item-desc {
	font-size: 0.9rem;
	color: #444;
	line-height: 1.6;
	margin: 0;
}

/* -----------------------------------
 * メニュー切り替えナビゲーションボタン
 * ----------------------------------- */
.nav-switch {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 auto;
	max-width: 600px;
}

/* boxの中にnav-switchしか存在しない場合（上下パディングを20pxで均等にする） */
.box:has(> .nav-switch:only-child) {
	padding-top: 20px;
	padding-bottom: 20px;
}

.nav-switch-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 15px;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	box-sizing: border-box;
	text-align: center;
	transition: all 0.2s ease;
}

/* 活性状態（リンクあり：#b09a68） */
a.nav-switch-item {
	background-color: #b09a68;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

a.nav-switch-item:hover {
	background-color: #9d885a;
	opacity: 0.95;
	transform: translateY(1px);
}

/* 非活性状態（選択中・リンクなし） */
.nav-switch-item.is-active {
	background-color: #e0e0e0;
	color: #777;
	border: 1px solid #ccc;
	cursor: default;
	pointer-events: none;
}

/* -----------------------------------
 * メディアクエリ (画面サイズ別調整)
 * ----------------------------------- */

/* スマホ小型画面向け調整 (画面幅 480px 以下) */
@media (max-width: 480px) {
	.app-badges img {
		height: 42px; /* スマホでは少しコンパクトに表示 */
	}
}

/* PC向け設定 (画面幅 600px 以上) */
@media (min-width: 600px) {
	.campaign-item {
		flex-direction: row;
		align-items: flex-start;
	}

	.campaign-item-media {
		width: 220px;
		flex-shrink: 0;
	}

	.nav-switch {
		flex-direction: row;
	}

	.nav-switch-item {
		flex: 1;
	}
}

/* PC向け設定 (画面幅 768px 以上) */
@media (min-width: 768px) {
	.box {
		padding: 20px 20px;
	}

	.menu-grid {
		flex-direction: row;
	}

	.menu-card {
		flex: 1;
	}

	header {
		height: 100px;
	}

	header img {
		width: 200px;
		height: 50px;
	}

	.site-footer {
		height: 70px;
	}

	.site-footer .copyright {
		font-size: 13px;
	}
}

/* -----------------------------------
 * メニューボタン表示（チラシ・PDF）
 * ----------------------------------- */
.menu-btn-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 20px;
}

.menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 15px;
	background-color: #fffbf1; /* クリームがかった背景色 */
	border: 1px solid #ccc; /* 枠線 */
	border-radius: 5px;
	color: #8b7a52; /* テキストカラー */
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
	transition: all 0.2s ease;
}

.menu-btn:hover {
	background-color: #f7f3e6;
	opacity: 0.9;
}

/* PDFアイコン付与 (カロリー・アレルゲン情報ボタン) */
.menu-btn--pdf::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9534f'%3E%3Cpath d='M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .8-.7 1.5-1.5 1.5H9v2H7.5V7H10c.8 0 1.5.7 1.5 1.5v1zm5 2c0 .8-.7 1.5-1.5 1.5h-2.5V7H15c.8 0 1.5.7 1.5 1.5v3zm4-3.5H19v1h1.5V10H19v2.5h-1.5V7h3v1.5zM9 8.5h-.75v1.5H9c.4 0 .75-.35.75-.75S9.4 8.5 9 8.5zm5.5 0h-1v3h1c.45 0 .75-.35.75-.75v-1.5c0-.4-.3-.75-.75-.75zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* PC表示時は2つのボタンを横並びにする */
@media (min-width: 600px) {
	.menu-btn-grid {
		flex-direction: row;
	}

	.menu-btn {
		flex: 1;
	}
}

/* -----------------------------------
 * 退会フォーム専用：画面ピッタリ表示
 * ----------------------------------- */
/* 退会フォームページのみスクロールを固定 */
.page-account-quit {
	overflow: hidden;
	height: 100vh;
	height: 100dvh; /* スマホのアドレスバー表示・非表示の変化に対応 */
	display: flex;
	flex-direction: column;
}

/* boxの高さを画面の残りの高さ一杯に引き伸ばす */
.page-account-quit .box--form {
	flex: 1;
	margin: 10px auto;
	width: calc(100% - 20px);
	max-width: 900px;
	padding: 0;
	overflow: hidden;
	border-radius: 5px;
	box-sizing: border-box;
}

/* iframeをbox内で高さいっぱいに表示 */
.page-account-quit .form-iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.box--form {
	padding: 0;
	overflow: hidden;
}

.form-iframe {
	width: 100%;
	height: 1200px; /* フォームの全内容が入る十分な高さを確保 */
	border: none;
	display: block;
}

/* -----------------------------------
 * スクロールボタン矢印アイコン指定
 * ----------------------------------- */
.nav-switch-item {
	position: relative; /* 矢印の位置基準 */
}

/* 活性ボタン右側の共通矢印ベース */
a.nav-switch-item[data-direction]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transition: transform 0.2s ease;
}

/* 下矢印アイコン ( ↓ ) */
a.nav-switch-item[data-direction="down"]::after {
	transform: translateY(-65%) rotate(135deg);
}

/* 上矢印アイコン ( ↑ ) */
a.nav-switch-item[data-direction="up"]::after {
	transform: translateY(-35%) rotate(-45deg);
}