/* menu_components_v2.css
   共通テンプレート用：メニュー表示コンポーネント（追記込み・統合版）

   含むもの：
   1) コースメニュー（価格横並び＋wrap、label→value→tax 縦積み）
   2) 単品メニュー（サムネ/品名/オプション/金額/解説）
   3) ドリンクメニュー（項目と金額が左右1列）
   4) 会場ブロック（会場名＋期間の色分け）
   5) コース内容（カテゴリ付きDL）
   6) 追加オプション（グレードアップセット）
   7) 会場情報（営業時間/アクセス/注意事項をDL化）

   既存 style.css の #main h* 等に負けないよう、見出し系は #main スコープでも指定
*/
/* ========== Tokens（必要なら上位CSSで上書き） ========== */ :root {
	--mc-border: rgba(0, 0, 0, 0.14);
	--mc-border-strong: rgba(0, 0, 0, 0.18);
	--mc-muted: rgba(0, 0, 0, 0.68);
	--mc-bg: #f6f6f6;
	--mc-bg-white: #fff;
	--mc-radius: 3px;
	--mc-gap: 14px;
	--mc-title-weight: 700;
	--mc-title-size: 1.35em;
	--mc-price-weight: 700;
	--mc-price-size: 1.5em;
	--mc-tax-weight: 400;
	--mc-tax-size: 0.75em;
	--mc-card-pad: 14px;
	/* 会場カラー（必要に応じて上書き） */
	--venue-tsurumai: #e97eb3;
	--venue-kouyouen: #eb5e0c;
	/* コース帯カラー（必要に応じて上書き） */
	--course-pink: #e97eb3;
	--course-orange: #eb5e0c;
}
/* =========================================================
   0) 会場ブロック（h3を最適化：会場名＋期間を分離して色替え）
========================================================= */
.c-venueBlock {
	--venue-accent: #333;
	margin: 0 auto 3.5em;
}
.c-venueBlock--tsurumai {
	--venue-accent: var(--venue-tsurumai);
	--mc-bg-accent: var(--course-pink);
}
.c-venueBlock--kouyouen {
	--venue-accent: var(--venue-kouyouen);
	--mc-bg-accent: var(--course-orange);
}
#main .c-venueBlock__title, .c-venueBlock__title {
	margin: 0 0 0.5em;
	padding: 0.45em 0.5em 0.5em;
	background: var(--mc-bg-accent);
	font-weight: 700;
	line-height: 1.25;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
}
#main .c-venueBlock__name {
	font-size: 1em;
	transform: translateY(0);
}
#main .c-venueBlock__term {
	color: #fff;
	font-size: 1em;
	transform: translateY(0);
}
/* =========================================================
   1) コースメニュー（価格横並び）
========================================================= */
#main .c-menuCourse {
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	overflow: hidden;
	background: var(--mc-bg-white); /* 基本は白 */
	margin: 0 0 0;
}
/* グレー版（モディファイア） */
.c-menuCourse--muted {
	background: var(--mc-bg);
}
/* 画像（枠の最上段） */
.c-menuCourse__media {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	background: #ddd;
}
/* 本文 */
.c-menuCourse__body {
	padding: var(--mc-card-pad);
}
/* 見出し（帯） */
#main .c-menuCourse__title, .c-menuCourse__title {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-weight: var(--mc-title-weight);
	font-size: var(--mc-title-size);
	letter-spacing: 0.02em;
	line-height: 1.2;
	border-radius: var(--mc-radius);
	background: var(--mc-bg-white);
	border: 1px solid var(--mc-border);
}
/* 既存の色バリエーション（ユーザー側で使用中） */
#main .c-menuCourse--pinkTitle .c-menuCourse__title, .c-menuCourse--pinkTitle .c-menuCourse__title {
	background: var(--course-pink);
	color: #fff;
	border-color: var(--course-pink);
}
#main .c-menuCourse--orangeTitle .c-menuCourse__title, .c-menuCourse--orangeTitle .c-menuCourse__title {
	background: var(--course-orange);
	color: #fff;
	border-color: var(--course-orange);
}
/* 料金リスト（横5列→幅で3/2/1列へ） */
.c-menuCourse__priceGrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/*align-items: start;*/
}
/* 5列（デフォルト）: 6個目以降 = 2段目以降 */
.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(n + 6) {
	border-top: 1px solid var(--mc-border-strong);
}
.c-menuCourse__priceItem {
	padding: 0.5em 0.25em 0.5em;
	text-align: center;
	border-left: 1px solid var(--mc-border-strong);
	display: flex;
	flex-direction: column; /* label→value→tax */
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
}
.c-menuCourse__priceItem:nth-child(5n + 1) {
	border-left: 0;
}
/* ラベル（2行を想定：金額位置を揃える） */
.c-menuCourse__label {
	color: #333;
	display: block;
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
	min-height: 2.6em;
}
.c-menuCourse__labelSub {
	display: block;
	font-size: 0.72em;
	font-weight: 400;
	opacity: 0.9;
	margin-top: 4px;
}
/* 金額 */
.c-menuCourse__value {
	color: #333;
	display: block;
	font-weight: var(--mc-price-weight);
	font-size: var(--mc-price-size);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-top: 0.1em;
}
/* 税表記（任意） */
.c-menuCourse__tax {
	color: #333;
	display: block;
	margin-top: 6px;
	font-weight: var(--mc-tax-weight);
	font-size: var(--mc-tax-size);
	line-height: 1.2;
	opacity: 0.85;
}
.c-menuCourse__tax:empty {
	display: none;
}
/* セクション（コース内容 / 追加オプション / 会場情報 をまとめて管理） */
#main .c-menuCourse__section {
	width: 100%;
	margin: 0 auto 0;
	padding: 0 0 0;
}
/* サブ見出し（帯より弱い見出し） */
#main .c-menuCourse__subTitle, .c-menuCourse__subTitle {
	margin: 1.5em 0 0.25em;
	padding: 0.25em 0.5em;
	font-weight: 700;
	line-height: 1.25;
	font-size: 1.2em;
}
#main .c-menuCourse.c-menuCourse--pinkTitle .c-menuCourse__section--drinks .c-menuCourse__subTitle {
	background: var(--course-pink);
	color: #fff;
	margin-bottom: 0;
	padding: 0.45em 0.5em 0.6em;
	border: 1px solid var(--course-pink);
	border-radius: 0.5em 0.5em 0 0;
}
#main .c-menuCourse.c-menuCourse--orangeTitle .c-menuCourse__section--drinks .c-menuCourse__subTitle {
	background: var(--course-orange);
	color: #fff;
	margin-bottom: 0;
	padding: 0.45em 0.5em 0.6em;
	border: 1px solid var(--course-orange);
	border-radius: 0.5em 0.5em 0 0;
}
#main .c-menuCourse__subTitle.c-menuCourse__subTitle--redTitle {
	background: #d70c19;
	color: #fff;
	padding: 0.45em 0.5em 0.6em;
	border: none;
}
/* 注記 */
.c-menuCourse__note {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mc-muted);
}
.c-menuCourse__note--em {
	color: #c40000;
	font-weight: 800;
}
/* レスポンシブ（段落ち） */
@media (max-width: 999px) {
	.c-menuCourse__priceGrid {
		grid-template-columns: repeat(3, 1fr);
	}
	.c-menuCourse__priceItem {
		border-left: none;
		border-right: 1px solid var(--mc-border-strong);
	}
	.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(3n) {
		border-right: none;
	}
	.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(-n + 3) {
		border-bottom: 1px solid var(--mc-border-strong);
	}
}
@media (max-width: 480px) {
	.c-menuCourse__priceGrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(odd) {
		border-right: 1px solid var(--mc-border-strong);
	}
	.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(even) {
		border-right: none;
	}
	.c-menuCourse__priceGrid > .c-menuCourse__priceItem:nth-child(-n + 4) {
		border-bottom: 1px solid var(--mc-border-strong);
	}
}
/* =========================================================
   PATCH: ドリンク（サムネ＋内容を横並び） + 価格グリッド（2段目境界線）
   - このブロックは price.css の末尾に追記、もしくは別CSSとして「price.cssの後」に読み込み
========================================================= */
/* --- ドリンク：サムネ（左）＋メニュー（右） --- */
.c-menuDrinkMedia {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border: 1px solid #5b2501;
	border-radius: 0 0 0.5em 0.5em;
}
#main .c-menuCourse.c-menuCourse--pinkTitle .c-menuCourse__section--drinks .c-menuDrinkMedia {
	background: #fffeeb;
	padding: 1em 0.75em 1em;
	border: 1px solid var(--course-pink);
}
#main .c-menuCourse.c-menuCourse--orangeTitle .c-menuCourse__section--drinks .c-menuDrinkMedia {
	background: #fffeeb;
	padding: 1em 0.75em 1em;
	border: 1px solid var(--course-orange);
}
.c-menuDrinkMedia__thumb {
	flex: 0 0 160px;
	max-width: 160px;
	margin: 0;
}
.c-menuDrinkMedia__thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.c-menuDrinkMedia__content {
	flex: 1 1 auto;
	min-width: 0; /* flex内での折り返し崩れ防止 */
}
/* SPでは縦積み */
@media (max-width: 480px) {
	.c-menuDrinkMedia {
		flex-direction: column;
		gap: 10px;
	}
	.c-menuDrinkMedia__thumb {
		flex-basis: auto;
		max-width: none;
		width: 96%;
		max-width: 280px;
		margin: 0 auto;
	}
}
/* =========================================================
   1-1) コース内容：カテゴリ付きDL
========================================================= */
.c-menuCategoryList {
	margin: 0;
	padding: 0;
}
.c-menuCategoryList__item {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: 10px;
	font-size: 0.85em;
	padding: 10px 0;
	border-bottom: 1px solid var(--mc-border);
}
.c-menuCategoryList__item:last-child {
	border-bottom: 0;
}
#main .c-menuCategoryList__term {
	margin: 0;
	line-height: 1.6;
	font-weight: 700;
	padding-left: 0.85em;
}
.c-menuCategoryList__desc {
	margin: 0;
	color: rgba(0, 0, 0, 0.82);
	line-height: 1.6;
}
@media (max-width: 480px) {
	.c-menuCategoryList__item {
		grid-template-columns: 1fr;
	}
}
/* =========================================================
   1-1-2) ドリンクメニュー内容
========================================================= */
.c-menuDrinkGroup {
	margin: 1em 0 0;
}
.c-menuDrinkGroup:nth-of-type(1) {
	margin: 0 0 0;
}
#main .c-menuDrinkGroup__title, .c-menuDrinkGroup__title {
	margin: 0 0 0.5em;
	font-weight: 800;
	font-size: 1.125em;
	line-height: 1.25;
}
.c-menuDrinkGroup__title--sub {
	font-size: 1.02em;
	font-weight: 800;
	opacity: 0.95;
}
.c-menuDrinkGroup__lead {
	margin: -0.25em 0 0.75em;
	font-size: 0.95em;
	font-weight: 700;
	color: var(--mc-muted);
	line-height: 1.5;
}
.c-menuDrinkPillList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	row-gap: 0.6em;
}
.c-menuDrinkPillList__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.25em 0.65em 0.35em;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	background: rgb(239, 242, 245);
	line-height: 1.4;
}
.c-menuDrinkPillList__name {
	font-weight: 700;
}
.c-menuDrinkPillList__price {
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.c-menuDrinkPillList__tax {
	font-size: 0.75em;
	font-weight: 700;
	opacity: 0.85;
	white-space: nowrap;
}
@media (max-width: 768px) {
	.c-menuDrinkPillList__item {
		flex-wrap: wrap;
		gap: 0.15em 0.5em;
	}
	.c-menuDrinkPillList__name {
		width: 100%;
	}
}
/* =========================================================
   1-2) 追加オプション：グレードアップセット（旧 p+span 羅列の共通化）
========================================================= */
.c-addonList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.c-addonList__item {
	border: 2px solid #d70c19;
	border-radius: var(--mc-radius);
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.02);
}
.c-addonList__line {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	font-size: 1.125em;
	align-items: baseline;
	letter-spacing: -0.04em;
}
.c-addonList__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.c-addonList__tax {
	font-size: 0.65em;
	font-weight: 700;
	opacity: 0.85;
}
.c-addonList__text {
	color: #d70c19;
	font-weight: 700;
	line-height: 1.6;
}
.c-addonList__note {
	margin: 0.1em 0 0;
	color: var(--mc-muted);
	font-size: 13px;
	line-height: 1.6;
}
.c-addonList__note:empty {
	display: none;
}
@media (max-width: 480px) {
	.c-addonList__line {
		grid-template-columns: 1fr;
		gap: 0;
	}
}
/* =========================================================
   1-3) 会場情報：DL化（旧 div+p 羅列の共通化）
========================================================= */
.c-venueInfo {
	margin: 0;
	padding: 0;
}
.c-venueInfo__item {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: 10px;
	font-size: 0.85em;
	padding: 10px 0;
	border-bottom: 1px solid var(--mc-border);
}
.c-venueInfo__item:last-child {
	border-bottom: 0;
}
.c-venueInfo__term {
	margin: 0;
	font-weight: 900;
	padding-left: 0.85em;
}
.c-venueInfo__desc {
	margin: 0;
	line-height: 1.6;
}
.c-venueInfo__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
@media (max-width: 640px) {
	.c-venueInfo__item {
		grid-template-columns: 1fr;
	}
}
/* =========================================================
   2) 単品メニュー（カード）
========================================================= */
.c-menuItemList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mc-gap);
}
@media (max-width: 920px) {
	.c-menuItemList {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.c-menuItemList {
		grid-template-columns: 1fr;
	}
}
.c-menuItem {
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	overflow: hidden;
	background: var(--mc-bg-white);
	display: flex;
	flex-direction: column;
}
.c-menuItem__thumb {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	background: #ddd;
}
.c-menuItem__body {
	padding: var(--mc-card-pad);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#main .c-menuItem__name, .c-menuItem__name {
	margin: 0;
	font-weight: 800;
	line-height: 1.25;
}
.c-menuItem__options {
	margin: 0;
	padding-left: 1.1em;
	color: var(--mc-muted);
	font-size: 14px;
	line-height: 1.5;
}
.c-menuItem__price {
	margin: 0;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.c-menuItem__desc {
	margin: 0;
	color: var(--mc-muted);
	font-size: 14px;
	line-height: 1.6;
}
/* =========================================================
   3) ドリンクメニュー（左右1列）
========================================================= */
.c-menuDrinkList {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--mc-border);
}
.c-menuDrinkRow {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mc-border);
	align-items: baseline;
}
#main .c-menuDrinkRow__name, .c-menuDrinkRow__name {
	margin: 0;
	font-weight: 700;
}
.c-menuDrinkRow__meta {
	display: block;
	font-size: 12px;
	color: var(--mc-muted);
	font-weight: 600;
	margin-top: 2px;
}
.c-menuDrinkRow__price {
	margin: 0;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* =========================================================
   1-1a) コース内容（商品名を“商品ごと”に管理）
   - 商品間：1文字分の余白（gap: 1em）
   - 先頭に ● マーカー（擬似要素）
   - 折り返しは商品単位（flex-wrap）
========================================================= */
.c-menuTagList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em; /* 商品と商品の間＝1文字分 */
	row-gap: 0.6em; /* 行間（お好みで調整） */
}
.c-menuTagList__item {
	position: relative;
	padding-left: 1em; /* ●の分のインデント（1文字） */
	line-height: 1.5;
}
.c-menuTagList__item::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0;
	line-height: 1.5;
}