/* ==========================================================
   tsumugi main.css
   配色・書体・寸法は旧Muse CSS（master_b-____.css / index.css 等）の値を踏襲
   ========================================================== */

:root {
	--c-bg: #000;
	--c-text: #fff;
	--c-ink: #000;
	--c-red: #c1272d;        /* TOPボタン・バッジ */
	--c-red-hover: #f15a24;
	--c-blue: #0071bc;       /* スライドドット */
	--c-lime: #d9e021;       /* アクティブドット・ゴルフ枠 */
	--c-gray: #7f7f7f;
	--c-red-strong: #ed1c24;
	--ff-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "Yu Mincho", "YuMincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
	--ff-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Yu Gothic", "YuGothic", "游ゴシック", "Noto Sans JP", Meiryo, sans-serif;
	--w-container: 1000px;
	--w-wide: 1200px;
	--w-content: 100%;       /* セクション内の内容幅：.container の幅にそろえる（ブロックごとに幅を変えない） */
	--bar-h: 64px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--ff-mincho);
	font-size: 15px;
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
p { margin: 0; }
ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { margin: 0; font-weight: normal; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: #000; padding: 8px 16px; }
.skip-link:focus { left: 8px; top: 8px; }

.container { width: min(100% - 32px, var(--w-container)); margin-inline: auto; }

/* ---------- 背景バリエーション ---------- */
.paper {
	color: var(--c-ink);
	background: #f4e6c4 url(../images/paper.jpg) center / cover no-repeat;
}
.dark { background: var(--c-bg); color: var(--c-text); }

/* ---------- ヘッダーバー ---------- */
.site-header__bar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	height: var(--bar-h);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 16px;
	background: rgba(0, 0, 0, .88);
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.site-header { position: relative; padding-top: var(--bar-h); }
/* ログイン中は WordPress の管理バーの下に出す */
.admin-bar .site-header__bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header__bar { top: 46px; } }
.site-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 16px; letter-spacing: .1em; }
.site-header__logo img { width: 44px; height: 44px; }

.gnav { display: flex; align-items: center; gap: 24px; }
.gnav__list { display: flex; gap: 22px; }
.gnav__list a { text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.gnav__list a:hover, .gnav__list .current-menu-item a { border-color: #fff; }
.gnav__cta { display: flex; gap: 10px; }
.btn-tel {
	display: inline-block; text-decoration: none; font-family: var(--ff-gothic);
	font-size: 13px; padding: 6px 12px; border-radius: 4px; white-space: nowrap;
}
.btn-tel { border: 1px solid #fff; }

.gnav-toggle { display: none; }

@media (max-width: 900px) {
	.gnav-toggle {
		display: block; position: relative; width: 44px; height: 44px;
		background: none; border: 0; color: #fff; cursor: pointer;
	}
	.gnav-toggle__bar, .gnav-toggle__bar::before, .gnav-toggle__bar::after {
		position: absolute; left: 10px; width: 24px; height: 2px; background: currentColor; content: ""; transition: transform .3s, opacity .3s;
	}
	.gnav-toggle__bar { top: 21px; }
	.gnav-toggle__bar::before { left: 0; top: -8px; }
	.gnav-toggle__bar::after { left: 0; top: 8px; }
	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar { background: transparent; }
	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

	.gnav {
		position: absolute; top: var(--bar-h); left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: rgba(0, 0, 0, .96);
		padding: 8px 24px 24px;
		display: none;
	}
	.gnav.is-open { display: flex; }
	.gnav__list { flex-direction: column; gap: 0; }
	.gnav__list a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
	.gnav__cta { margin-top: 16px; justify-content: center; }
	.btn-tel { font-size: 15px; padding: 10px 16px; }
}

/* ---------- 写真帯（旧 #u2864〜u2867 / u3289 / u3292） ----------
   写真は左へ流れ続けるマーキー（main.js が並びを複製して継ぎ目なくつなぐ）。
   グラデーションとロゴは固定。 */
.photo-band {
	position: relative;
	height: 212px;
	overflow: hidden;
}
.photo-band__track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
}
.photo-band__track.is-running {
	animation: photo-band-marquee var(--marquee-duration, 40s) linear infinite;
}
@keyframes photo-band-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
.photo-band__item { flex: 0 0 auto; height: 100%; background: center / cover no-repeat; }
.photo-band__shade {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, #fff, #000);
	opacity: .8;
}
.photo-band__logo {
	position: absolute; left: 50%; top: 32px; transform: translateX(-50%);
	width: 148px; height: 148px; object-fit: contain;
}
@media (max-width: 600px) {
	.photo-band { height: 160px; }
	.photo-band__logo { width: 110px; height: 110px; top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
	.photo-band__track.is-running { animation: none; }
}
/* スマホ：写真が見えるよう白→黒のグラデーションを外す。ロゴは写真の上でも読めるよう白抜き＋影 */
@media (max-width: 760px) {
	.photo-band__shade { display: none; }
	.photo-band__logo { filter: invert(1) drop-shadow(0 0 6px rgba(0, 0, 0, .75)); }
}

/* ---------- スライドショー（旧 PamphletWidget #pamphletu2868） ----------
   画面幅いっぱいに追従。高さは旧サイトの比率（1200×494）で画面幅に比例し、
   文字量の多いスライドや狭い画面では min-height と内容の高さが優先される。 */
.slider {
	position: relative;
	width: 100%;
	touch-action: pan-y;
}
/* 全スライドを同じセルに重ね、高さは最も長いスライドに自動で合わせる */
.slider__track { display: grid; }
.slide {
	grid-area: 1 / 1;
	position: relative;
	aspect-ratio: 1200 / 494;
	min-height: 460px;
	background: center / cover no-repeat;
	opacity: 0; visibility: hidden;
	transition: opacity 1.3s ease, visibility 0s linear 1.3s;
	overflow: hidden;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.3s ease, visibility 0s; z-index: 1; }
/* 表示先（管理画面の「表示先」）：対象外の画面では出さない（高さの計算にも入れない） */
@media (min-width: 761px) { .slide[data-device="sp"] { display: none; } }
@media (max-width: 760px) { .slide[data-device="pc"] { display: none; } }
.slide__shade { position: absolute; inset: 0; }
.slide__shade--blue { background: linear-gradient(to bottom, #004357, #6b3400); opacity: .7; }
.slide__shade--brown { background: linear-gradient(to bottom, #000, #736357); opacity: .6; }
.slide__inner { position: relative; height: 100%; max-width: var(--w-wide); margin-inline: auto; padding: 39px 32px 56px; }

/* 型：標準 */
.slide__title { font-size: clamp(24px, 3.4vw, 40px); font-weight: bold; letter-spacing: 1px; line-height: 1.5; }
.slide__text { max-width: 602px; margin-top: 24px; font-family: var(--ff-gothic); font-size: 15px; line-height: 25px; }
.slide__text p + p { margin-top: 1em; }
.slide__btns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
/* PC：中身をスライドの縦中央に置き（選択バーの分は下の余白で確保）、本文は読みやすい大きさに */
@media (min-width: 761px) {
	.slide__inner { display: flex; flex-direction: column; justify-content: center; }
	.slide__title { font-size: clamp(28px, 3.8vw, 48px); }
	.slide__text { max-width: 760px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.85; }
	/* ボタンは高さを従来（約48px）の約2倍に */
	.slide__btns .btn-line { min-width: 260px; padding: 32px 32px; font-size: 18px; line-height: 1.6; }
}

.slider__dots { position: absolute; left: max(32px, calc((100% - var(--w-wide)) / 2 + 32px)); bottom: 14px; z-index: 5; display: flex; gap: 8px; }
/* 幅の狭い画面ではスライド数が多くても選択バーが画面からはみ出さないよう、棒を縮める */
@media (max-width: 400px) { .slider__dots { right: 24px; left: 24px; gap: 6px; } .slider__dot { flex: 0 1 40px; min-width: 0; } }
/* スライド選択：平らな棒（見た目は高さ4px、押せる範囲は高さ20px） */
.slider__dot {
	position: relative;
	width: 40px; height: 20px; border: 0; padding: 0; border-radius: 0;
	background: transparent; cursor: pointer;
}
.slider__dot::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	height: 4px; transform: translateY(-50%);
	background: var(--c-blue);
	transition: background-color .3s;
}
.slider__dot[aria-selected="true"]::before, .slider__dot:hover::before { background: var(--c-lime); }
.slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* PC：ヘッダー＋写真帯＋スライダーでウィンドウの高さ（100vh）。PC には下部の固定ボタンが無いので差し引かない。
   ログイン中は管理バーの分（32px、幅782px以下は46px）を差し引く。
   文字量が多くて収まらない時だけ、文字が切れないよう min-height（460px）が優先される。 */
@media (min-width: 761px) {
	.masthead { display: flex; flex-direction: column; min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); }
	.admin-bar .masthead { min-height: calc(100vh - var(--bar-h) - 32px); min-height: calc(100svh - var(--bar-h) - 32px); }
	.slider { flex: 1 0 auto; display: flex; flex-direction: column; }
	.slider__track { flex: 1 0 auto; }
	.slide { aspect-ratio: auto; }
	/* 文字は文節で折り返す（「宴会予／約！」のような語の途中での改行を避ける） */
	.slide__title, .slide__text { line-break: strict; word-break: auto-phrase; }
	.slide__text { text-align: start; } /* 両端揃えだと文節改行で字間が開くため */
}
@media (min-width: 761px) and (max-width: 782px) {
	.admin-bar .masthead { min-height: calc(100vh - var(--bar-h) - 46px); min-height: calc(100svh - var(--bar-h) - 46px); }
}
/* 高さの低いウィンドウ（ノートPCなど）は写真帯を縮めてスライダーの高さを確保（ロゴも比例して縮小） */
@media (min-width: 761px) and (max-height: 820px) {
	.photo-band { height: clamp(140px, 24vh, 212px); }
	.photo-band__logo { width: auto; height: 70%; aspect-ratio: 1; top: 15%; }
	/* スライドの中身もウィンドウの高さに合わせて詰める（写真＋説明パネル型の写真・赤丸バッジ型が高さを決めるため） */
	.slide { min-height: 360px; }
	.slide__inner { padding-top: 24px; padding-bottom: 44px; }
	.slide__title { font-size: clamp(26px, min(3.8vw, 5.2vh), 48px); }
	.slide__text { margin-top: clamp(12px, 2.2vh, 24px); font-size: clamp(16px, min(1.35vw, 2.5vh), 20px); line-height: 1.75; }
	.slide__btns { margin-top: clamp(14px, 2.6vh, 28px); }
	.slide__btns .btn-line { padding: clamp(18px, 3.6vh, 32px) 32px; }
}

@media (max-width: 760px) {
	.slide { aspect-ratio: auto; min-height: 420px; }
	.slide__inner { padding: 24px 20px 56px; }
	.slide__btns { gap: 12px; }
}

/* ---------- ボタン ---------- */
.btn-line {
	display: inline-block; min-width: 228px;
	border: 1px solid #fff; border-radius: 0;
	padding: 10px 16px; text-align: center; text-decoration: none;
	font-family: var(--ff-gothic); font-size: 16px; line-height: 1.75; color: #fff;
	transition: background-color 1s;
}
.btn-line:hover { background: rgba(255, 255, 255, .15); }
.btn-line--wide { min-width: min(567px, 100%); border-radius: 6px; font-size: 18px; padding: 6px 16px; }
.btn-gray {
	display: inline-block; min-width: min(365px, 100%); padding: 6px 16px;
	background: var(--c-gray); color: #fff; text-align: center; text-decoration: none;
	font-family: var(--ff-gothic); transition: background-color 1s;
}
.btn-gray:hover { background: var(--c-red-strong); }
.btn-order {
	display: inline-block; margin-top: 16px; padding: 8px 28px; border-radius: 6px;
	background: linear-gradient(to bottom, #c1272d, #8a1a1f); color: #fff; text-decoration: none;
	font-family: var(--ff-gothic);
}
.btn-order.is-disabled { cursor: default; }


/* ---------- 汎用セクション ---------- */
.sec { padding: 72px 0; }
.sec-title {
	/* 旧サイトの見出し帯（#c1272d・白抜き・白い光）を再現。文字は中央 */
	position: relative; margin: 0 0 32px; padding: 9px 16px;
	background: var(--c-red); color: #fff;
	/* 書体・大きさは全ページ共通（明朝）。以前はフロントの「Space」「お店情報」だけ Helvetica だった */
	text-align: center; font-family: var(--ff-mincho); font-weight: bold;
	font-size: clamp(20px, 2.6vw, 26px); line-height: 1.5; letter-spacing: .08em;
	/* 帯の幅は内容の幅（.container）にそろえる。旧サイト同様に白い光を添える */
	box-shadow: 0 0 19px rgba(255, 255, 255, .45);
}
/* .sec-title--ja は以前の書体切り替え用。今は .sec-title と同じなので指定なし（クラスは残しても可） */
/* 同じセクション内で前に内容がある見出しは、上に間をとる */
.container > * + .sec-title { margin-top: 80px; }
/* アンカーで飛んだとき、見出し帯が固定ヘッダーに密着しないよう少し間をあける */
.sec-title[id] { scroll-margin-top: 20px; }
/* 見出しの上に添えるキャッチ（帯の中・小さめ） */
.sec-title__kicker { display: block; margin-bottom: 2px; font-size: .64em; font-weight: normal; letter-spacing: .12em; opacity: .92; }
.sub-title { font-size: clamp(18px, 2.2vw, 20px); margin-bottom: 16px; }
.sub-title--center { text-align: center; margin-top: 24px; }
.sec-text { text-align: center; font-size: 14px; line-height: 25px; }
.sec-text + .sec-text { margin-top: 24px; }
.sec-text--left { text-align: left; }
.sec-text--lead { font-size: 18px; line-height: 1.9; margin-top: 24px; }
.sec-text .is-strong, .is-strong { font-weight: bold; }
.note-center { text-align: center; font-size: 14px; margin-bottom: 24px; }
.feature-img { text-align: center; margin: 0 auto 24px; }
.feature-img img { box-shadow: 0 0 8px rgba(127, 127, 127, .5); border-radius: 8px; }
.feature-img--wide img { width: 100%; }
.entry-content > * + * { margin-top: 1em; }
.entry-content a { text-decoration: underline; }

/* ---------- トップ：イントロ ---------- */
.intro { padding: 63px 0 90px; }
.intro__logo { text-align: center; }
.intro__logo img { width: 339px; max-width: 70%; height: 217px; object-fit: contain; }
.intro__text { margin-top: 24px; text-align: center; font-size: 14px; line-height: 25px; }
.intro__text .is-small { font-size: 13px; line-height: 23px; }
@media (max-width: 600px) { .intro__text { font-size: 13px; } }

.news { padding: 40px 0; background: #111; }

/* ---------- トップ：円形ナビ（旧 #u519 / u531 / u525 / u1329） ---------- */
.circle-nav { background: center / cover no-repeat; padding: 26px 16px; }
.circle-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 6vw, 86px); }
.circle {
	display: flex; align-items: center; justify-content: center;
	width: 216px; height: 216px; border-radius: 50%;
	text-decoration: none; color: #fff; font-size: 25px;
	opacity: .8; transition: background-color 1s ease;
}
.circle--orange { background: #f7931e; }
.circle--orange:hover { background: #662d91; }
.circle--green { background: #006837; }
.circle--green:hover { background: #998675; }
.circle--blue { background: #0071bc; }
.circle--blue:hover { background: #ed1c24; }
.circle--yellow { background: #ffce09; }
.circle--yellow:hover { background: #ed1c24; }
@media (max-width: 600px) {
	.circle-nav__list { gap: 14px; }
	.circle { width: 140px; height: 140px; font-size: 19px; }
}

/* ---------- トップ：空間 ---------- */
.space { padding: 72px 0; }
/* スマホ：Space の本文は左揃え、旧サイトの途中改行（br--pc）を外して「。」ごとの段落だけで改行 */
@media (max-width: 760px) { .space__text { text-align: left; } .space__text .br--pc { display: none; } }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 48px auto 0; }
.gallery a { display: block; overflow: hidden; cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(100%); transition: filter 1s, transform 1s; }
.gallery a:hover img, .gallery a:focus-visible img { filter: none; transform: scale(1.03); }
@media (hover: none) { .gallery img { filter: none; } }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- トップ：お店情報 ---------- */
.shop { padding: 72px 0 90px; }
.shop__logo { display: block; width: 150px; margin: 0 auto 8px; }
.shop__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.shop__photo img { width: 100%; box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
.shop__info { display: grid; grid-template-columns: 6em 1fr; gap: 10px 16px; font-size: 15px; }
.shop__info dt { color: #ccc; }
.shop__tel { font-size: 20px; text-decoration: none; }
.shop__parking { margin-top: 48px; text-align: center; }
.shop__parking p { margin-bottom: 12px; }
.shop__parking img { background: #fff; width: 436px; max-width: 100%; padding: 16px; }
.shop__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 48px; }
@media (max-width: 760px) { .shop__body { grid-template-columns: 1fr; } }

/* ---------- 下層：ヒーロー ---------- */
.page-hero { background: center / cover no-repeat; padding: 48px 16px; }
.page-hero__inner {
	width: min(100%, var(--w-container)); margin-inline: auto;
	display: flex; align-items: center; gap: 32px;
	background: rgba(0, 0, 0, .55); padding: 24px;
}
.page-hero__img { width: 279px; flex-shrink: 0; }
.page-hero__title { font-size: clamp(26px, 3.5vw, 36px); }
.page-hero__lead { font-size: 18px; }
@media (max-width: 600px) { .page-hero__inner { flex-direction: column; text-align: center; } }

/* ---------- お料理 ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 48px; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
@media (max-width: 760px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* コース：写真を大きく、右にコース例の表と説明 */
.course { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: var(--w-content); margin: 0 auto 40px; }
.course__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.course__body .sec-text { margin-top: 20px; }
/* PC：写真は右の文章の高さに合わせて伸ばし、中央基準で切り抜く（写真だけ上下に浮いて片付くのを防ぐ） */
@media (min-width: 761px) {
	.course:not(.course--portrait) { align-items: stretch; }
	.course:not(.course--portrait) .course__photo { position: relative; min-height: 300px; margin: 0; }
	.course:not(.course--portrait) .course__photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
	.course:not(.course--portrait) .course__body { align-self: center; }
}
/* 右側の小見出し：左に差し色の縦線 */
.course-example__title, .nabe__title, .bento__title { padding-left: 12px; border-left: 4px solid var(--c-lime); line-height: 1.4; }
.course-example__title { font-family: var(--ff-mincho); font-size: 18px; font-weight: bold; margin-bottom: 12px; }
/* コース例：番号付きのバッジ（タグ）として横に並べ、幅に合わせて折り返す */
.course-example { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* 色付きの面に文字を抜く（背景色の黒で文字を見せる）。番号は反転 */
.course-example li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--c-lime); color: var(--c-ink); font-family: var(--ff-gothic); font-size: 15px; font-weight: bold; line-height: 1.4; white-space: nowrap; }
.course-example__no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-ink); color: var(--c-lime); font-size: 12px; font-weight: bold; }
@media (max-width: 600px) { .course-example { gap: 8px; } .course-example li { font-size: 14px; padding-right: 12px; } }
@media (max-width: 760px) { .course { grid-template-columns: 1fr; gap: 24px; } }

/* コース価格：横並びの枠（コースの数に合わせて並ぶ） */
.course-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; max-width: var(--w-content); margin: 0 auto 56px; }
.course-prices li { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid #fff; border-radius: 10px; padding: 18px 12px; text-align: center; }
.course-prices__per, .course-prices__tax { font-family: var(--ff-gothic); font-size: 14px; }
/* 「お一人様」はコース例と同じメタバッジ（色付き・文字抜き） */
.course-prices__per { display: inline-block; padding: 2px 12px; margin-bottom: 4px; border-radius: 999px; background: var(--c-lime); color: var(--c-ink); font-weight: bold; line-height: 1.5; white-space: nowrap; }
.course-prices__yen { font-family: var(--ff-mincho); font-size: clamp(28px, 3.4vw, 38px); line-height: 1.2; letter-spacing: .02em; }
.course-prices__yen small { font-size: .5em; margin-left: .1em; }
.course-prices__name { font-family: var(--ff-gothic); font-size: 15px; font-weight: bold; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .45); align-self: stretch; }
.course-prices__plus { font-size: .7em; margin-right: .05em; }
.course-prices--drink { margin-bottom: 16px; }
/* カードの中身を行ごとに揃える（鍋名の行数が違っても価格・飲み放題の位置が横一列になる） */
.course-prices li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 2px; justify-items: center; align-content: start; }
.course-prices li:has(.course-prices__name) { grid-row: span 5; }
.course-prices__name { display: flex; align-items: center; justify-content: center; justify-self: stretch; }
/* カード内「飲み放題付きコース」：見出し付きの枠でくくる */
.course-prices__drink { justify-self: stretch; align-self: end; margin-top: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 6px; overflow: hidden; font-family: var(--ff-gothic); }
.course-prices__drink-head { background: #c1272d; color: #fff; font-size: 13px; font-weight: bold; line-height: 1.35; padding: 5px 4px; letter-spacing: .04em; }
.course-prices__drink-head small { display: block; font-size: 11px; font-weight: normal; letter-spacing: 0; }
.course-prices__drink dl { display: grid; gap: 4px; padding: 8px 10px; }
.course-prices__drink dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.course-prices__drink dt { font-size: 13px; }
.course-prices__drink dd { font-family: var(--ff-mincho); font-weight: bold; font-size: 19px; line-height: 1.3; }
.course-prices__drink dd small { font-size: .6em; margin-left: .1em; }
/* 狭いカード（PCの鍋5列・スマホ2列）では文字を詰めて折り返しを防ぐ */
.course-prices li > * { min-width: 0; }
.course-prices__drink { container-type: inline-size; }
.course-prices__drink dt, .course-prices__drink dd, .course-prices__drink-head { white-space: nowrap; }
@container (max-width: 175px) {
	.course-prices__drink dl { padding: 6px 6px; }
	.course-prices__drink dl > div { gap: 4px; }
	.course-prices__drink dt { font-size: 12px; }
	.course-prices__drink dd { font-size: 16px; }
}
/* 幅320px級のスマホ（カード幅150px以下）ではもう一段詰める */
@container (max-width: 150px) {
	.course-prices__drink-head { font-size: 11.5px; letter-spacing: 0; padding-inline: 2px; }
	.course-prices__drink-head small { font-size: 10px; }
	.course-prices__drink dl { padding: 6px 4px; }
	.course-prices__drink dt { font-size: 11px; }
	.course-prices__drink dd { font-size: 14px; }
}
@media (max-width: 600px) {
	.course-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.course-prices li { padding: 12px 6px; }
	.course-prices__per, .course-prices__tax { font-size: 12px; }
	.course-prices__yen { font-size: 22px; }
	.course-prices__name { font-size: 13px; }
	.course-prices--drink { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* 注意事項：サブタイトル＋その下に本文（枠で1つのまとまりに） */
.notice { margin: 32px 0 0; padding: 20px 24px 22px; border: 2px solid #fff; border-radius: 10px; text-align: center; }
.notice__title { font-family: var(--ff-mincho); font-size: clamp(17px, 2vw, 20px); font-weight: bold; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.notice p { font-family: var(--ff-gothic); font-size: 15px; line-height: 1.8; }
@media (max-width: 600px) { .notice { padding: 16px; } .notice p { font-size: 14px; text-align: left; } }

.drink { text-align: center; }
.drink__ext { margin-top: 16px; font-size: 16px; }

.nabe { background: #1a120c; }

.nabe__title, .bento__title { font-family: var(--ff-mincho); font-weight: bold; font-size: clamp(18px, 2.2vw, 22px); margin-bottom: 14px; }
/* 縦長の写真用：写真の列を細くし、写真は切らずに縦長のまま */
.course--portrait { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.course--portrait .course__photo img { aspect-ratio: 3 / 4; max-width: 340px; margin-inline: auto; }
@media (max-width: 760px) { .course--portrait { grid-template-columns: 1fr; } .course--portrait .course__photo img { max-width: 260px; } }
/* 鍋コースの価格枠：数が多いので1枠を少し細く */
.course-prices--nabe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.course-prices--nabe .course-prices__name { min-height: 4.2em; display: flex; align-items: center; justify-content: center; line-height: 1.4; }
@media (max-width: 600px) { .course-prices--nabe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* カードが1枚だけのときは横いっぱいに伸ばさず、通常のカード幅で中央に置く */
.course-prices--single { grid-template-columns: minmax(0, 300px); justify-content: center; }
@media (max-width: 600px) { .course-prices--single { grid-template-columns: minmax(0, 240px); } }
/* 価格の枠と同じ白い実線の囲み */
.nabe__from { display: block; margin-top: 20px; padding: 10px 20px; border: 2px solid #fff; border-radius: 10px; font-family: var(--ff-mincho); font-weight: bold; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; }

.course--last { margin-bottom: 0; }
.course__link { margin-top: 20px; }
.course-more { margin-top: 48px; text-align: center; }
/* 改行せずコンテナの左右幅いっぱいに流す（行頭・行末を揃える） */
.course-more p { text-align: left; word-break: normal; line-break: strict; }
.recruit-hero__sub { font-family: var(--ff-mincho); font-size: clamp(20px, 2.6vw, 26px); text-align: center; margin: 8px 0 12px; }
.reserve-tel { text-align: center; margin-top: 32px; font-size: 20px; }
.reserve-tel a { text-decoration: none; border-bottom: 1px solid; }

/* ---------- 採用情報 ---------- */
.recruit-hero { padding: 63px 0 72px; text-align: center; }
.recruit-hero__logo { width: 200px; height: 200px; object-fit: contain; }
.recruit-hero__url { font-family: Helvetica, Arial, sans-serif; margin-top: 8px; }
.recruit-hero__title { font-size: clamp(24px, 3.4vw, 34px); margin: 16px 0 24px; }
.recruit-hero__lead { margin: 0 0 32px; font-size: 16px; }
.recruit-hero__lead strong { font-size: 22px; }
.req-table { display: grid; grid-template-columns: 8em 1fr; margin: 0 0 32px; border-top: 1px solid rgba(255, 255, 255, .4); }
.req-table dt, .req-table dd { padding: 16px 8px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.req-table dt { font-weight: bold; }
@media (max-width: 600px) { .req-table { grid-template-columns: 1fr; } .req-table dt { border-bottom: 0; padding-bottom: 0; } }
.recruit-box { display: flex; gap: 32px; align-items: center; margin: 48px 0 0; }
.recruit-box img { width: 45%; border-radius: 8px; }
@media (max-width: 760px) { .recruit-box { flex-direction: column; } .recruit-box img { width: 100%; } }

/* ---------- 通販・仕出し ---------- */
.shidashi-hero { text-align: center; }
.shidashi-hero__logo { width: 200px; height: 200px; object-fit: contain; transform: rotate(-6deg); margin-bottom: 24px; }
.item { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.item:last-child { border-bottom: 0; }
.item__photos { display: flex; flex-wrap: wrap; gap: 12px; }
.item__photos img { border-radius: 8px; box-shadow: 0 0 8px rgba(127, 127, 127, .5); flex: 1 1 45%; object-fit: cover; }
.item__photos img:only-child { flex-basis: 100%; }
.item__title { font-size: 20px; margin-bottom: 12px; }
.item__title .em { font-size: 1.4em; color: #ffce09; }
@media (max-width: 760px) { .item { grid-template-columns: 1fr; } }

/* ---------- フッター ---------- */
.site-footer { padding: 75px 16px 48px; border-top: 1px solid rgba(255, 255, 255, .15); }
.site-footer__inner { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer__logo img { width: 125px; height: auto; }
.site-footer__info { font-size: 12px; line-height: 22px; }
.site-footer__name { font-size: 14px; }
.site-footer__tel { font-size: 17px; line-height: 31px; margin-top: 4px; }
.site-footer__tel a { text-decoration: none; }
.site-footer__copy { text-align: center; font-size: 12px; margin-top: 24px; }

.to-top {
	position: fixed; right: 0; bottom: 120px; z-index: 90;
	width: 100px; padding: 9px 0; text-align: center;
	background: var(--c-red); color: #fff; text-decoration: none;
	font-family: var(--ff-gothic); font-weight: bold; font-size: 21px; line-height: 37px;
	transition: background-color 1s, opacity .4s, visibility .4s;
	opacity: 0; visibility: hidden;
}
.to-top.is-show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--c-red-hover); }
@media (max-width: 600px) { .to-top { width: 64px; font-size: 16px; bottom: 16px; } }

/* ---------- ご予約の固定ボタン ----------
   PC：画面右端（上下中央）に縦書きの「ネット予約」
   スマホ（760px以下）：最下部に「電話予約」「ネット予約」を横並びで固定 */
:root { --reserve-bar-h: 60px; }
.fixed-reserve__tel { display: none; }
.fixed-reserve__net {
	position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 95;
	writing-mode: vertical-rl;
	padding: 22px 12px; border-radius: 8px 0 0 8px;
	background: var(--c-red); color: #fff; text-decoration: none;
	font-family: var(--ff-gothic); font-weight: bold; font-size: 17px; letter-spacing: .2em;
	box-shadow: 0 0 10px rgba(0, 0, 0, .35);
	transition: background-color .4s;
}
.fixed-reserve__net:hover, .fixed-reserve__net:focus-visible { background: var(--c-red-hover); }

@media (max-width: 760px) {
	body { padding-bottom: calc(var(--reserve-bar-h) + env(safe-area-inset-bottom)); }
	.fixed-reserve {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		display: grid; grid-template-columns: 1fr 1fr;
		height: calc(var(--reserve-bar-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: #000; box-shadow: 0 -2px 10px rgba(0, 0, 0, .4);
	}
	.fixed-reserve__tel, .fixed-reserve__net {
		position: static; transform: none; writing-mode: horizontal-tb;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		padding: 0; border-radius: 0; box-shadow: none; letter-spacing: .05em;
		color: #fff; text-decoration: none; font-family: var(--ff-gothic); font-weight: bold; font-size: 16px; line-height: 1.3;
	}
	.fixed-reserve__tel { background: #2b2b2b; border-right: 1px solid rgba(255, 255, 255, .25); }
	.to-top { bottom: calc(var(--reserve-bar-h) + 12px + env(safe-area-inset-bottom)); }
}

/* スマホ：ヘッダー＋写真帯＋スライダー＋下部の固定ボタンで画面の高さ（100svh、非対応は100vh）。
   スライダーは固定ボタンの上で終わるので、文字も選択バーも隠れない。
   内容が収まらないスライドだけは文字が切れないよう、その分だけ伸びる。 */
@media (max-width: 760px) {
	/* 画面の高さから、上の固定ヘッダーと下の固定ボタン（iPhone のホームバー分を含む）を差し引いた高さ */
	.masthead { --hero-off: calc(var(--bar-h) + var(--reserve-bar-h) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: calc(100vh - var(--hero-off)); min-height: calc(100svh - var(--hero-off)); }
	/* ログイン中は管理バー（46px）の分も差し引く */
	.admin-bar .masthead { min-height: calc(100vh - var(--hero-off) - 46px); min-height: calc(100svh - var(--hero-off) - 46px); }
	.slider { flex: 1 0 auto; display: flex; flex-direction: column; }
	.slider__track { flex: 1 0 auto; }
	.slide { min-height: 0; }
	.slide__inner { padding: 20px 18px 40px; }
	/* 縦長の画面でも偏らないよう、どの型も中身を（選択バーより上の範囲で）縦中央に置く */
	.slide__inner { display: flex; flex-direction: column; justify-content: center; }
	/* 横幅は基準（左右18px）より内側に。文字は文節で折り返し、行末の1〜2文字だけの行を避ける */
	.slide__inner { padding-inline: clamp(26px, 7.5vw, 34px); }
	.slide__title { text-wrap: balance; word-break: auto-phrase; }
	.slide__text { line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
	.slide__text { text-align: start; }
	.slider__dots { bottom: 12px; }
	/* 画面の高さに収めるための詰め（写真帯・文字は画面の高さに合わせて伸縮） */
	.photo-band { height: clamp(64px, 14svh, 120px); }
	.photo-band__logo { height: 76%; width: auto; aspect-ratio: 1; top: 12%; }
	.slide__inner { padding-top: clamp(12px, 2.4svh, 20px); }
	.slide__title { font-size: clamp(20px, 3svh, 26px); }
	.slide__text { margin-top: clamp(6px, 1.4svh, 12px); font-size: clamp(14px, 1.8svh, 16px); line-height: 1.55; }
	.slide__text p + p { margin-top: .6em; }
	.slide__btns { flex-wrap: nowrap; gap: 10px; margin-top: clamp(10px, 1.9svh, 16px); }
	/* ボタンは高さを従来（約37px）の約2倍に */
	.slide__btns .btn-line { flex: 1 1 0; min-width: 0; padding: clamp(10px, 2.2svh, 20px) 8px; font-size: clamp(14px, 1.8svh, 16px); line-height: 1.55; }
}
/* 高さの低いスマホ（iPhone SE 第2・第3世代 375×667 など）はもう一段詰める */
@media (max-width: 760px) and (max-height: 720px) {
	.photo-band { height: clamp(48px, 8svh, 72px); }
	.slide__inner { padding: 8px 24px 24px; }
	.slider__dots { bottom: 4px; }
	.slide__title { font-size: 19px; line-height: 1.4; }
	.slide__text { margin-top: 4px; font-size: 13px; line-height: 1.5; }
	.slide__text p + p { margin-top: .4em; }
	.slide__btns { margin-top: 8px; }
	.slide__btns .btn-line { padding: 12px 6px; font-size: 13px; line-height: 1.45; }
}
/* さらに低い画面（320×568 など）は一段だけ詰める */
@media (max-width: 760px) and (max-height: 600px) {
	.slide__title { font-size: 17px; }
	.slide__text { font-size: 12px; line-height: 1.45; }
	.slide__btns .btn-line { padding: 9px 6px; font-size: 12.5px; }
}


/* ---------- ライトボックス ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox__img { display: block; max-width: 92vw; max-height: 88vh; }
.lightbox__close {
	position: absolute; top: 4px; right: 4px; width: 40px; height: 40px;
	background: rgba(0, 0, 0, .6); color: #fff; border: 0; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}


/* ---------- 読み込み・スクロールの表示アニメーション ---------- */
/* ヒーロー：ページを開いた時・スライドが切り替わった時に、見出し→本文→ボタンの順にふわっと表示 */
@keyframes tsu-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tsu-fade { from { opacity: 0; } to { opacity: 1; } }
.slide.is-active .slide__title { animation: tsu-rise .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
.slide.is-active .slide__text { animation: tsu-rise .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
.slide.is-active .slide__btns { animation: tsu-rise .9s cubic-bezier(.2, .7, .2, 1) .55s both; }
.photo-band { animation: tsu-fade 1.2s ease both; }
/* スクロール：画面に入ったら表示（main.js が data-reveal を付ける。JS が動かない時は最初から表示） */
html.has-reveal [data-reveal] {
	opacity: 0;
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--reveal-delay, 0s);
}
html.has-reveal [data-reveal="up"] { transform: translateY(28px); }
html.has-reveal [data-reveal="left"] { transform: translateX(-36px); }
html.has-reveal [data-reveal="right"] { transform: translateX(36px); }
html.has-reveal [data-reveal="zoom"] { transform: scale(.94); }
html.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (max-width: 760px) {
	/* スマホは横からの動きを縦に（横スクロールの原因にしない） */
	html.has-reveal [data-reveal="left"], html.has-reveal [data-reveal="right"] { transform: translateY(28px); }
}
@media (prefers-reduced-motion: reduce) {
	.slide.is-active .slide__title, .slide.is-active .slide__text, .slide.is-active .slide__btns, .photo-band { animation: none; }
	html.has-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* 横から入る動きで一時的に横スクロールが出ないよう、各セクションの横はみ出しを切る（スクロール領域は作らない） */
html.has-reveal .sec, html.has-reveal .space, html.has-reveal .shop, html.has-reveal .intro { overflow-x: clip; }

/* ---------- NEW バッジ（期限付き。管理画面の「NEWバッジの表示期限」で出し分け） ---------- */
.badge-new {
	display: inline-block; vertical-align: .2em; margin-left: .6em; padding: .25em .8em;
	border-radius: 999px; background: #fff; color: var(--c-red);
	font-family: var(--ff-gothic); font-size: .55em; font-weight: bold; line-height: 1.2; letter-spacing: .12em;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
	animation: tsu-new-pulse 2.4s ease-in-out infinite;
}
/* ヒーローでは見出しの前に赤地・白抜きで */
.slide__title .badge-new { margin: 0 .5em 0 0; background: var(--c-red); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
@keyframes tsu-new-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .badge-new { animation: none; } }