@charset "UTF-8";

/*
 * 和牛の刀 共通スタイル
 *
 * 命名は l-（レイアウト）/ c-（コンポーネント）/ p-（ページ固有）/ u-（ユーティリティ）。
 *
 * 方針
 * - 暗色を地にする。料理写真を主役にし、赤身と脂の対比を立たせるため。
 * - 純白と純黒は使わない。地は赤みを含んだ黒、文字は生成りの白。
 * - セクション見出しは欧文を大きく、和文を小さく添える。
 * - JSを持たせない。演出はCSSのみで、動きは最小限に留める。
 *   要望書3-1が Core Web Vitals の目標値設定を求めており、現行サイトの
 *   「海外回線で重い」問題を繰り返さないため、スクロール連動演出は入れない。
 */

/* --- 欧文フォント --- */

/*
 * Cormorant Garamond をセルフホストする。
 *
 * 外部CDN（fonts.googleapis.com / fonts.gstatic.com）からは読み込まない。
 * 海外回線での遅延要因になるうえ、目的1がインバウンド集客のため
 * 追加の名前解決・接続を増やしたくない。
 *
 * 使用箇所は .c-heading__en の1箇所のみ、ウェイトは 500 のみ。
 * 増やす場合はファイルも増えるので、必要性を確認してから足すこと。
 *
 * font-display: swap を選んだ理由
 *   .c-heading は line-height を数値（1.1）で指定しているため、
 *   行ボックスの高さは font-size にのみ比例し、フォントの実測値に依存しない。
 *   つまり差し替わっても後続要素は動かず、CLS が発生しない。
 *   line-height を normal に変えるとこの前提が崩れる。変更しないこと。
 *
 * ライセンス: SIL Open Font License 1.1（assets/fonts/OFL.txt に同梱）。
 * ファイル: Google Fonts が配布する latin サブセット（v21）。23KB。
 */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
	/* サブセットの収録範囲と一致させる。欄外の字を要求してもDLさせないため。 */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/*
	 * 色（2026-08-22 に暗色へ転換）
	 *
	 * 主役は料理写真。地を暗く落とすと、赤身と脂の対比が立ち上がる。
	 * 鉄板焼きの店内は照明を絞った空間なので、写真の明度とも噛み合う。
	 *
	 * 純黒（#000）と純白（#fff）は引き続き使わない。
	 * 純黒は写真の黒とぶつかって縁が消え、純白は暗い地の上で目を刺す。
	 * 地は赤みを残した黒、文字は生成りに寄せた白にして、
	 * 画面全体を温度のある暗さにまとめる。
	 */
	--wk-bg: #17130f;          /* 赤みを含んだ黒。純黒は使わない */
	--wk-bg-alt: #211b15;      /* セクションの塗り分け */
	--wk-ink: #f0ebe1;         /* 生成りの白。純白は使わない */
	--wk-ink-weak: #a89c8b;    /* 補助テキスト */
	--wk-line: #3b332a;        /* 罫線 */
	/*
	 * 緋色。ロゴの日の丸と同じ色相 1.7°・彩度 81.1% で、明度だけ 60%（2026-08-22）。
	 *
	 * 明度が高い理由（下げないこと）
	 *   この色は「暗い地の上に乗る文字」に使う（コース価格・お知らせの店舗名・
	 *   リンクのホバー）。文字なので 4.5:1 が要り、しかも塗り分け背景
	 *   --wk-bg-alt（#211b15）のほうが地色より明るいので、そちらが上限を決める。
	 *   地色 4.98:1 / 塗り分け 4.59:1 で、両方を満たす最小の明度がここ。
	 *   ロゴの #e71f19 をそのまま使うと 2.4:1 前後まで落ちて読めない。
	 *
	 *   直前まで #c0392b を使っていたが、暗色化のときに上げ切れておらず
	 *   地色で 3.40:1 / 塗り分けで 3.13:1 と AA を満たしていなかった。
	 *
	 * 予約ボタンの --wk-red-light（#d01b16）とは色相・彩度が同じで明度だけ違う。
	 * 小さい文字は明るく、広い面は深く、という役割の違いによる。
	 */
	--wk-accent: #ec4b46;
	/*
	 * 予約ボタンの赤。ロゴの日の丸から起こした三段（2026-08-22）。
	 *
	 * ロゴ（assets/images/brand/logo.svg の .cls-4）は #e71f19。
	 * これを HSL に直すと 色相 1.7° / 彩度 81.1% / 明度 50.2%。
	 * 下の3色は**色相と彩度をロゴのまま固定し、明度だけを 45/35/20% に振った**もの。
	 * 色相をずらすと日の丸と別の赤になるので、触るなら明度だけにすること。
	 *
	 * 明度の上限が 45% な理由（下げないこと）
	 *   面の上に載る文字は --wk-ink（#f0ebe1）。予約ボタンは 14px の太字で、
	 *   WCAG の「大きな文字」に当たらないため 4.5:1 が要る。
	 *   ロゴの #e71f19 をそのまま敷くと 3.84:1 で不足する。明度45%（#d01b16）で
	 *   4.59:1 となり、ここが「ロゴの赤に最も近く、かつ読める」上限。
	 *   グラデーションの最も明るい点がこの値を超えないようにすること。
	 *
	 * 単色の赤は平板に見えるが、光の当たりを作ると面に艶が出る。
	 * 金の縁は使わない。赤だけで深みを出すほうが上品にまとまる。
	 */
	--wk-red-light: #d01b16;   /* 照りの中心。明度45%・文字と 4.59:1 */
	--wk-red-mid: #a21511;     /* 面。明度35%・6.67:1 */
	--wk-red-deep: #5c0c0a;    /* 縁の落ち。明度20%・11.69:1 */

	/*
	 * 赤いボタンのボルドー版（2026-08-25 指示。参考サイトの金の艶ボタンの赤版）。
	 * 上の日の丸三段に代えて、赤いボタン（WEB予約・行動バー・上に戻る）はこちらを使う。
	 * 「色相はロゴ固定」の決め事は、この指示で意匠ごと更新された。
	 *
	 * 文字との読み比べ（文字は --wk-ink #f0ebe1）
	 *   照り #d8465f は約3.6:1 で単体では不足するため、**文字の帯には敷かない**。
	 *   縦グラデーションで照りを上端だけに置き、文字の高さは面（#9a1f33・約6.8:1）
	 *   以深に収める。text-shadow も併用する。
	 */
	--wk-bdx-light: #d8465f;   /* 照り。上端の帯だけに使う */
	--wk-bdx-mid: #9a1f33;     /* 面。文字はこの上に載る */
	--wk-bdx-deep: #521221;    /* 落ち */
	--wk-bdx-edge: #5a1322;    /* 縁取り */

	/*
	 * 字面
	 *
	 * **和文は全体を明朝にする**（2026-08-23 指示）。
	 * 鉄板焼きの静かな空間と、欧文見出しの Cormorant Garamond に合わせる。
	 *
	 * **和文フォントは読み込まない。** 字数が多く数MBになり、目的1（海外回線での
	 * 表示）と噛み合わない。OSに入っている明朝を順に拾う。
	 * 拾える顔は環境で変わる（macOS はヒラギノ明朝、Windows は游明朝、
	 * Android は Noto Serif CJK）。**同じ絵にはならない**ことを前提に、
	 * 字の大きさと行間で読みやすさを担保している。
	 */
	--wk-font-ja: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
		"YuMincho", "Noto Serif JP", "Source Han Serif JP", "Noto Serif CJK JP", serif;
	/*
	 * 欧文見出し。セルフホスト済み（上の @font-face）。
	 * 読み込み前・失敗時は Times 系で成立するようフォールバックを残してある。
	 */
	--wk-font-en: "Cormorant Garamond", "Times New Roman", "YuMincho", serif;
	/*
	 * 明朝を名指ししたい箇所のための別名。本文と同じものを指す。
	 * 既存の指定（店舗名など）を書き換えずに済ませるために残してある。
	 */
	--wk-font-ja-serif: var(--wk-font-ja);
	/*
	 * ゴシック。数字の並びや細かいラベルなど、明朝だと潰れる場所にだけ使う。
	 * 既定では使わない。使う場所を増やすときは、明朝で成立しない理由を持つこと。
	 */
	--wk-font-ja-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;

	/*
	 * 余白・幅
	 *
	 * コンテナは 1600px（2026-08-22 に 1120px から拡大）。
	 * 1120px では画面が広いほど左右の余りが増え、1920px で画面の45%が空いていた。
	 *
	 * 広げても文章は伸びない。読ませる文章のかたまりには em で行長の上限を
	 * 別に入れてある（.p-store__lead 42em / .p-concept__lead 40em /
	 * .c-menu-list__desc 44em / .c-entry__body 40em）。
	 * **コンテナを触るときは、そちらの上限が効いているかを必ず確認すること。**
	 * 上限の無い長文をコンテナ幅いっぱいに流すと、1行が100文字を超えて読めなくなる。
	 *
	 * ガターの上限は 32px のまま上げないこと。コンテナ幅に届かない画面
	 * （1600px 未満）では、ガターがそのまま左右の余白になる。ここを広げると
	 * コンテナを広げた意味が打ち消される。
	 */
	--wk-container: 1600px;
	--wk-gutter: 5vw;
	--wk-gutter-max: 32px;

	/*
	 * 動きのイージング。終わりに向けて大きく減速する（easeOutQuint 相当）。
	 * 動き出しが速く、止まる直前が非常に遅いので、勢いではなく
	 * 「浮かび上がってそっと止まる」印象になる。
	 * ease や linear に戻すと機械的な動きに見える。
	 */
	--wk-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * ヒーローのクチコミ欄でだけ使う補助文字の色。
	 * --wk-ink-weak（#a89c8b）は暗い地の上で使う想定で、写真の上に
	 * 薄い面を敷いたあの場所では 4.5:1 に届かない（最も明るい写真で 2.29:1）。
	 * この色なら同じ条件で 5.24:1。他の場所には使わないこと。
	 */
	--wk-rating-weak: #c9c0b2;
	/* 2026-08-23 に縮小（最大128px → 80px）。節の間延び対策。 */
	--wk-section-gap: clamp(48px, 7vw, 80px);
}

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

body {
	margin: 0;
	background: var(--wk-bg);
	color: var(--wk-ink);
	font-family: var(--wk-font-ja);
	font-size: 16px;
	line-height: 1.9;
	font-feature-settings: "palt";
	/*
	 * 明朝は縦画が細い。暗い地に明るい文字を置くと、なめらか化のかけ方次第で
	 * 線が痩せて読みにくくなる。ここは既定（subpixel）のまま残すこと。
	 * antialiased を指定すると、暗い地では特に細く見える。
	 */
	text-rendering: optimizeLegibility;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

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

:focus-visible {
	outline: 2px solid var(--wk-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- レイアウト --- */

.l-container,
.l-header__inner,
.l-footer__inner,
.p-section {
	width: 100%;
	max-width: var(--wk-container);
	margin-inline: auto;
	padding-inline: min(var(--wk-gutter), var(--wk-gutter-max));
}

.l-header {
	border-bottom: 1px solid var(--wk-line);
}

.l-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding-block: 20px;
	/*
	 * ヘッダーだけコンテナ幅（1120px）の制限を外し、画面幅いっぱいに使う。
	 * 広い画面でロゴが内側に入り込んで見えるのを避け、左端に寄せるため。
	 * 左右の余白は共通のガター（最大32px）に揃えるので、狭い画面では変化しない。
	 */
	max-width: none;
}

.l-header__nav {
	margin-inline-start: auto;
}

/*
 * ブランドサイトのヘッダー固定（2026-08-24 指示）。
 * ヒーローの無いページは sticky（流れに残したまま上に貼り付く）。
 * スクロール中は本文の上に重なるので、透け防止の地色とぼかしを敷く。
 */
.l-header--fixed {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: rgb(10 8 6 / 88%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*
 * ヒーローのあるページ（ブランドトップ）は absolute の代わりに fixed。
 * 配置は .p-has-hero .l-header と同じで、スクロールに追従する点だけ違う。
 * 下端まで薄く暗さを残す（既定の被せは下端透明のため、スクロール中に
 * 明るい写真の上で文字が読めなくなる）。
 */
/* .p-has-hero .l-header（後方で absolute を指定）に勝つため3クラスで書く */
.p-has-hero .l-header.l-header--fixed {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		rgb(10 8 6 / 90%) 0%,
		rgb(10 8 6 / 72%) 100%
	);
}

.l-main {
	display: block;
	min-height: 50vh;
	padding-block: clamp(40px, 6vw, 72px);
}

.l-footer {
	margin-top: var(--wk-section-gap);
	padding-block: 48px;
	border-top: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
	font-size: 0.875rem;
}

/*
 * ブランドサイトボタン＋言語切替。ヘッダーと同じ部品を
 * 行動列（電話・予約・お問い合わせ）の下に置く（2026-08-23 指示）。
 * 上のボタン列と縦幅が近いので、少し間を空けて別グループに見せる。
 */
.l-footer__global {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	margin-block-start: 12px;
}

/*
 * フッター上段。4列で組む（2026-08-22。参考：kobe-beef-miyabi.jp）。
 *
 *   ブランド（ロゴ・住所・営業時間） | サイト内リンク | 店舗 | 電話・予約
 *
 * 列幅は等分にする。参考サイトも4等分で、左に情報・右に行動を置いて
 * 視線が左から右へ流れるようにしている。
 *
 * 列数は auto-fit に任せず、クラス（--cols-3 / --cols-4）で決め打ちする。
 * auto-fit だと折り返しの位置が幅次第で変わり、2行目の先頭の列にも
 * 縦罫が残ってしまう。CSS からは「どこが行頭か」を判定できない。
 * 列はブランドサイトで3、店舗サイトで4のどちらかしか無い（footer.php 参照）。
 *
 * 店舗の増減で高さが変わっても崩れないよう、行の高さは固定しない。
 */
.l-footer__sitemap {
	display: grid;
	gap: 32px 0;
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--wk-line);
}

.l-footer__sitemap--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.l-footer__sitemap--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}



/*
 * 列の間に細い縦罫を入れて、4つのまとまりを見せる（参考サイトと同じ）。
 * 罫は左側に付け、先頭の列だけ消す。gap を 0 にして padding で間隔を取るのは、
 * gap の中に罫を置けないため。
 */
.l-footer__col {
	padding-inline: 40px;
	border-inline-start: 1px solid var(--wk-line);
}

.l-footer__col:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.l-footer__col:last-child {
	padding-inline-end: 0;
}

.c-footer-heading {
	margin: 0 0 12px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* 同じ列に2つ目の見出しを重ねるときは、上に間隔を空けて別のまとまりに見せる。 */
.c-footer-heading--sub {
	margin-top: 28px;
}

/* サイトマップ側のリンクは縦積み。ヘッダーの横並びとは別扱いにする。 */
.l-footer__sitemap .c-nav--footer {
	display: block;
	font-size: 0.875rem;
}

.l-footer__sitemap .c-nav--footer li + li {
	margin-top: 8px;
}

/*
 * ロゴは参考サイトに合わせて大きく出す。
 * width/height を属性で持たせてあるので、height だけ指定すれば比率は保たれる。
 */
/*
 * ロゴの高さと、その下の店名までの間隔。
 * 他の列の開始位置をこれに合わせるので、値は変数で持つ（下の --cols-4 参照）。
 */
/*
 * ロゴは列の外・中央に置く（2026-08-22 指示）。
 * 列から出したことで4列とも同じ高さから始まり、1列目の先頭が店名になる。
 * リンクやボタンの頭は、ずらさなくても店名とそろう。
 */
.l-footer__logo {
	display: block;
	width: fit-content;
	margin: 0 auto 32px;
}

.l-footer__logo img {
	display: block;
	width: auto;
	height: 92px;
}

.l-footer__store {
	font-style: normal;
}

.l-footer__store p {
	margin: 0;
}

.l-footer__store-name {
	font-weight: 700;
	margin-bottom: 12px;
}

/*
 * 住所・営業時間・定休日・アクセス。ラベルを値の上に置く。
 *
 * ラベルを左に並べる2列組みにはしないこと。
 * この列の幅は 304px しかなく、ラベル（56px）と間隔を引くと値に 236px しか
 * 残らない。住所は1行に 250px 要るため、番地が「浅草1-」「36-2」と
 * 途中で割れる。上に置けば値が列幅いっぱいを使えて1行に収まる。
 *
 * 1つの dt に dd が複数続く（営業時間が曜日ごと、アクセスが経路ごと）。
 * 縦に流すだけなので、そのまま続けて出せばよい。
 */
.l-footer__store-info {
	margin: 0;
}

.l-footer__store-info dt {
	margin-top: 14px;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wk-ink-weak);
}

.l-footer__store-info dt:first-child {
	margin-top: 0;
}

.l-footer__store-info dd {
	margin: 2px 0 0;
}

.l-footer__map {
	margin-top: 16px;
}

/*
 * 右端の行動列。ボタンは列の幅いっぱいに伸ばして高さを揃える
 * （参考サイトと同じ。幅がばらつくと、どちらが主かが読めなくなる）。
 */
.l-footer__col--actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.l-footer__action {
	padding-inline: 16px;
	font-size: 0.875rem;
	text-align: center;
}

/*
 * 狭い画面では2列、さらに狭ければ1列にする。
 * 列数が変わると行頭の位置も変わるので、縦罫の付け外しもここで揃える。
 * 2列のときは奇数番目が行頭になる。
 */
@media (max-width: 1023px) {
	.l-footer__sitemap--cols-3,
	.l-footer__sitemap--cols-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 0;
	}

	.l-footer__col {
		padding-inline: 28px;
	}

	.l-footer__col:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.l-footer__col:nth-child(even) {
		padding-inline-end: 0;
	}
}

@media (max-width: 599px) {
	.l-footer__sitemap--cols-3,
	.l-footer__sitemap--cols-4 {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.l-footer__col,
	.l-footer__col:nth-child(even) {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.l-footer__logo img {
		height: 72px;
	}
}

/*
 * 最下段の1行。左に規約リンク、右端にコピーライト。
 *
 * 左右の端は上段の列と揃える（2026-08-22。参考サイトも揃えている）。
 * 以前はここだけコンテナの外へ広げていたが、上段が4列の罫で区切られると
 * 端のずれが目立つ。はみ出させないこと。
 */
.l-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-top: 24px;
	font-size: 0.8125rem;
}

.l-footer__bottom small {
	font-size: 1em;
}

/*
 * ブランドサイトの最下段：リンク｜ロゴ｜コピーライトの3分割（2026-08-24 指示）。
 * 中央のロゴは grid の中央列に置くので、左右の量が違っても真ん中からずれない。
 */
.l-footer__bottom--logo {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* リンクとコピーライトはロゴの下端に揃える（2026-08-25 指示） */
	align-items: end;
	gap: 8px 24px;
	/*
	 * 上の余白を詰める（2026-08-25 指示）。ブランドのフッターはこの行だけなので、
	 * 既定の margin-top 24px を消してフッター自体の内側余白（48px）だけにする。
	 */
	margin-top: 0;
}

.l-footer__bottom--logo .l-footer__copyright {
	justify-self: end;
	/* 右端の「上に戻る」ボタンと重ならないよう逃げ場を空ける */
	padding-inline-end: 72px;
}

.l-footer__bottom-logo {
	display: block;
	justify-self: center;
	line-height: 0;
}

.l-footer__bottom-logo img {
	/* 2026-08-25 に拡大（71px → 128px） */
	inline-size: 128px;
	block-size: auto;
}

@media (max-width: 767px) {
	/*
	 * スマホは ロゴ → リンク → コピーライト の縦積み・中央揃え（2026-08-25 指示）。
	 * リンクが先頭だと下のロゴ・コピーライトとの間延びで釣り合いが悪かった。
	 */
	.l-footer__bottom--logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
	}

	.l-footer__bottom--logo .l-footer__bottom-logo {
		order: -1;
	}

	/* リンクはコンパクトに中央へ寄せる */
	.l-footer__bottom--logo .c-nav--footer {
		justify-content: center;
		gap: 0 20px;
	}

	.l-footer__bottom--logo .l-footer__copyright {
		margin: 0;
		padding-inline-end: 0;
	}
}

/*
 * .c-nav 既定の 0.9375rem を打ち消し、コピーライトと同じ大きさに揃える
 * （「同じ高さ・同じ文字の大きさ」の指定）。
 */
.l-footer__bottom .c-nav {
	gap: 8px 20px;
	font-size: 1em;
}

.l-footer__copyright {
	margin: 0;
	margin-inline-start: auto;
	color: var(--wk-ink-weak);
}

/* --- 見出し --- */

.c-heading {
	margin: 0 0 clamp(24px, 4vw, 48px);
	line-height: 1.1;
}

/*
 * 欧文を主役にする。参考サイトは 170〜256px だが、日本語ページでは
 * 情報量が多く画面を圧迫するため、上限を抑えて可読性を優先している。
 */
.c-heading__en {
	display: block;
	font-family: var(--wk-font-en);
	/* 2026-08-23 に一段縮小（最大 7.5rem → 6.5rem）。全節の見出しで共通。 */
	font-size: clamp(2.75rem, 9.5vw, 6.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wk-ink);
}

.c-heading__ja {
	display: block;
	margin-top: 0.4em;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wk-ink-weak);
}

.c-page-title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.5;
	margin: 0 0 32px;
}

/* --- セクション --- */

.p-section + .p-section {
	margin-top: var(--wk-section-gap);
}

/* --- オープニング（刀 / KATANA） --- */

/*
 * トップページと言語ルートを開いたときだけ、ブランドマークを一瞬出してから
 * ページを現す。出す場所は header.php（wk_opening_mark()）。
 *
 * 既定値を「消えている状態」にしてある理由
 *   アニメーションが動かない環境（CSSアニメーション無効・描画の取りこぼし）で
 *   帯が出たまま残ると、ページ全体が永久に隠れる。既定を hidden にしておけば、
 *   最悪の場合に起きるのは「演出が出ない」だけで、閲覧は妨げない。
 *   逆に既定を opacity:1 にすると、失敗したときサイトが白帯で埋まる。
 *
 * pointer-events は常に none。演出中でも下のリンクを押せる状態にしておく。
 *
 * LCP への影響は無い。Chrome は重なりを見ないため、下のヒーロー画像の描画は
 * これまでどおり記録される。オーバーレイ自身も opacity:1 で出るので
 * 「非表示の要素」として除外されることもない。
 *
 * JSは使っていない（テーマにJSを持たせない方針）。そのため
 * 「セッション中1回だけ」の制御はできず、トップを開くたびに再生される。
 */
.c-splash {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 写真の層を上へ張り出させているので、はみ出しを切る。 */
	overflow: hidden;
	background-color: var(--wk-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: wk-splash 2s var(--wk-ease-soft) forwards;
}

/*
 * 背景の刀の写真（2026-08-22 指示）。地色の上に薄く重ねる。
 *
 * 擬似要素に分けてあるのは、写真だけに不透明度をかけるため。
 * .c-splash 本体に opacity を置くと、消えるアニメーションと二重になる。
 *
 * 画像は長辺2000px・58KB。既定の2560pxより小さくしてある。
 * ここは最初の描画でヒーローと帯域を奪い合う位置で、しかも
 * 暗幕越しに薄く映すだけなので、細部は見えない。**大きくしないこと。**
 *
 * 先読みはしない。ヒーロー（LCP要素）より先に取りに行かせない。
 * 間に合わなければ地色だけが出る。演出が控えめになるだけで破綻はしない。
 *
 * 動きを控える設定では .c-splash ごと display: none になる。
 * 表示されない要素の背景画像はブラウザが取得しないので、
 * 通信も発生しない。
 */
/*
 * 刀を画面のやや上（高さ45%の位置）に置く（2026-08-22 指示）。
 *
 * background-position では動かせない。写真は3:2の横長で、cover で敷くと
 * 縦にほとんど余地が無い（1440×900 の画面で60px、縦長のモバイルでは0）。
 * position-y を振っても画面によって効いたり効かなかったりする。
 *
 * そこで写真の層そのものを上へ張り出させる。層の中心が刀の位置になる。
 *   中心 ＝ inset-block-start ＋ block-size ÷ 2
 *   いまは -15% ＋ 60% ＝ 45%
 * cover は層の全体を覆うので、はみ出させても隙間はできない。
 * **位置を変えるときは2つの値の関係で決めること。** 片方だけ動かすと
 * 中心と縦の余地が同時に変わり、画面比によって挙動が変わる。
 */
.c-splash::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -15%;
	block-size: 120%;
	background-image: url("../images/brand/splash-katana.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	animation: wk-splash-photo 2s var(--wk-ease-soft) forwards;
}

/*
 * 写真はゆっくり寄りながら現れる。
 *
 * わずかに大きい状態（1.06倍）から等倍へ戻す。動きが小さいので
 * 「動いている」とは見えず、奥から浮かび上がってくるように感じる。
 * 倍率を上げると画面が動いて見え、落ち着きが無くなる。
 *
 * 文字より少し遅く（55%で）止まるようにして、文字が先に立つ順にする。
 * transform と opacity だけなので、描画のやり直しは起きない。
 */
@keyframes wk-splash-photo {
	0% {
		opacity: 0;
		transform: scale(1.06);
	}

	55%,
	100% {
		opacity: 0.42;
		transform: scale(1);
	}
}

/*
 * 中央を落とす暗幕。
 *
 * 写真の中央には抜き身の刃があり、真っ白（輝度1.0）に飛んでいる。
 * ここに生成りの文字を重ねると、不透明度15%でもコントラストが4.29:1まで落ちて
 * 読めなくなる。かといって15%まで下げると写真がほとんど見えない。
 *
 * そこで写真は42%のまま見せ、文字が乗る中央だけを楕円で落とす。
 * 文字の範囲では暗幕が7割以上かかり、最も明るい刃の上でも 5.2:1 を保つ。
 * 外側へ向けて消えるので、鍔の彫りや柄の巻きは見えたまま残る。
 *
 * 文字を大きくしたり暗幕を弱めたりすると、この前提が崩れる。
 */
.c-splash::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		ellipse 60% 45% at 50% 50%,
		rgb(23 19 15 / 88%) 0%,
		rgb(23 19 15 / 55%) 45%,
		rgb(23 19 15 / 0%) 75%
	);
}

/*
 * 面が消えるのは終盤の3割（0.6秒）だけ。
 * ここを短くすると「パッと消える」印象になり、浮かび上がる導入と釣り合わない。
 */
@keyframes wk-splash {
	0%,
	70% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}

/* 写真と暗幕（::before / ::after）より前に出す。 */
.c-splash__mark {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--wk-ink);
	opacity: 0;
	animation: wk-splash-mark 2s var(--wk-ease-soft) forwards;
}

/*
 * 文字は下から浮かび上がり、消えるときはさらに上へ抜ける。
 *
 * 入りは 22px と、以前の 8px より大きく取ってある。
 * 距離が短いとイージングの減速が効かず、ただ点いたように見える。
 * 抜けるときに逆へ戻さず上へ続けるのは、動きの向きを揃えるため。
 * 戻すと「浮かんで沈む」ことになり、印象が重くなる。
 */
@keyframes wk-splash-mark {
	0% {
		opacity: 0;
		transform: translateY(22px);
	}

	45%,
	70% {
		opacity: 1;
		transform: none;
	}

	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}

.c-splash__en {
	display: block;
	/* 字送りは最後の1字の後ろにも入る。その分を打ち消して中央を合わせる。 */
	margin-inline-end: -0.24em;
	font-family: var(--wk-font-en);
	/* 画面幅いっぱいに広げない。字送りを含めて概ね画面の 6 割に収まる大きさ。 */
	font-size: clamp(2rem, 8.5vw, 4.5rem);
	font-weight: 500;
	/* 数値指定。フォントの実測値に高さを依存させない（差し替わっても動かない）。 */
	line-height: 1;
	letter-spacing: 0.24em;
	white-space: nowrap;
}

/*
 * 動きを控える設定のときは演出ごと出さない。
 * 既定が hidden なので、アニメーションを外すだけで消える。
 */
@media (prefers-reduced-motion: reduce) {
	.c-splash {
		display: none;
	}
}

/* --- ヒーロー --- */

/*
 * 画面幅いっぱいに出す。.p-section の左右余白を打ち消している。
 * aspect-ratio を指定して、画像読み込み前後で高さが変わらないようにする。
 */
.p-section--hero {
	max-width: none;
	padding-inline: 0;
	margin-bottom: var(--wk-section-gap);
}

/*
 * ヒーローの直後がセクションナビのときは、間を空けない（2026-08-22 指示）。
 * ナビはヒーローに付随する帯として見せたいので、
 * 節と節の間隔（--wk-section-gap）を挟むと切り離されて見える。
 */
.p-section--hero:has( + .c-section-nav ),
.p-section--hero + .c-section-nav {
	margin-block-start: 0;
}

.p-section--hero:has( + .c-section-nav ) {
	margin-bottom: 0;
}

/*
 * 元画像の比率は店舗ごとに違う（1440x405 / 2400x1600 / 1118x838 など）。
 * 画面上の見え方はここで統一し、object-fit で中央を切り出す。
 * img には実寸を width/height で出してあるので、CLSは起きない。
 */
.c-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center;
	background: var(--wk-bg-alt);
}

/*
 * 動画ヒーロー。見え方は静止画と完全に揃える。
 * poster と実写の比率が違っても、object-fit で同じ枠に収まる。
 */
.c-hero__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center;
	background: var(--wk-bg-alt);
}

/*
 * 動画がある場合、静止画は既定で隠す（下の prefers-reduced-motion で復活させる）。
 * 動画が無いページでは .c-hero__image--fallback が付かないので、この指定は効かない。
 */
.c-hero__image--fallback {
	display: none;
}

/*
 * 店舗ページのヒーロー（2026-08-22 指示）。
 * 先にその店の写真が出て、少し置いてからブランドの動画が現れる。
 *
 * ブランドトップの動画とは扱いが違う。あちらは動画が本体で、静止画は
 * poster（＝同じファイル）。こちらは店舗の写真が本体で、動画はその上に重ねる。
 * 写真を隠さないよう、通常の流れから外して絶対配置にする。
 * 基準は .p-section--hero（クチコミ欄のために position: relative が付いている）。
 *
 * 「少ししたら」は animation-delay で作る。テーマにJSは持たせない方針のため、
 * 時間の制御はここに寄せる。2.6秒はオープニング（2秒）が明けてから
 * 0.6秒後にあたる。オープニングの長さを変えたらここも見直すこと。
 *
 * クチコミ欄はこの後ろのDOM順で絶対配置しているため、動画より前に出る。
 *
 * prefers-reduced-motion では下の指定で .c-hero__video ごと display: none になる。
 * 店舗ページの img には --fallback が付いていないので、写真はそのまま残る。
 */
.c-hero__video--delayed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	opacity: 0;
	animation: wk-hero-video 1.4s var(--wk-ease-soft) 2.6s forwards;
}

@keyframes wk-hero-video {
	to {
		opacity: 1;
	}
}

/*
 * 「視差効果を減らす」を設定している人には動画を再生しない。
 * 自動再生される動きは、めまいや吐き気を誘発することがある。
 * テーマにJSを持たせない方針のため、CSSで表示そのものを入れ替える。
 * video を display:none にすれば再生も止まる。
 */
@media (prefers-reduced-motion: reduce) {
	.c-hero__video {
		display: none;
	}

	.c-hero__image--fallback {
		display: block;
	}
}

@media (max-width: 767px) {
	/* 横長のままだと縦が潰れるため、スマートフォンでは縦を確保する */
	.c-hero__image,
	.c-hero__video {
		aspect-ratio: 4 / 3;
	}
}

/* --- 全画面ヒーローとヘッダーの重ね --- */

/*
 * トップページ（ブランド・店舗・言語ルート）だけ、ヒーローを画面いっぱいに出し、
 * ヘッダーをその上に重ねる。内部ページのヘッダーは通常のまま。
 * 切り替えは body の .p-has-hero だけで行う（付与は functions.php）。
 */

.p-has-hero .l-header {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 10;
	border-bottom: none;
	/*
	 * 暗色化前は「明るい地の色（--wk-bg）を暗い映像の上に置く」指定だった。
	 * 暗色化で --wk-bg が黒になり、暗い被せの上に暗い文字が乗って読めなくなった。
	 * ヒーローの上でも通常時と同じ明るい文字（--wk-ink）を使う。
	 */
	color: var(--wk-ink);
	/*
	 * ヒーローは動画も写真も、明るい場面と暗い場面が入れ替わる。
	 * どの瞬間でも文字が読めるよう、上端に暗い被せを敷く。
	 * 下端は透明にして帯に見せない。
	 *
	 * 中間に不透明度を残しているのは、ヘッダーが2段に折り返す店舗ページで
	 * 2段目（言語切替）が被せの外に出てしまうため。明るい内装写真の上でも
	 * 白文字が読めるだけの濃さを確保している。
	 */
	background-image: linear-gradient(
		to bottom,
		rgb(10 8 6 / 88%) 0%,
		rgb(10 8 6 / 66%) 65%,
		rgb(10 8 6 / 0%) 100%
	);
	/* 被せだけでは足りない明部（金屏風・白い皿など）に備える保険 */
	text-shadow: 0 1px 4px rgb(0 0 0 / 75%);
}

/*
 * ヘッダー内の文字色は個別指定されているものがあるため、まとめて継承に戻す
 * （.c-lang a の --wk-ink-weak、.c-brand__store など）。
 */
.p-has-hero .l-header a,
.p-has-hero .l-header .c-brand__store,
.p-has-hero .l-header .c-lang a {
	color: inherit;
}

/* 予約ボタンは緋色の面があるため、重ねても視認できる。色は変えない。 */
.p-has-hero .l-header .c-button--reserve {
	color: var(--wk-ink);
}

/* ヘッダーが浮くぶん、本文側の上余白を消してヒーローを画面上端に付ける */
.p-has-hero .l-main {
	padding-block-start: 0;
}

.p-has-hero .p-section--hero {
	/* svh はURLバーの伸縮で高さが変わらない。vh は未対応ブラウザ向けの控え */
	height: 100vh;
	height: 100svh;
	/* 横長の画面で潰れすぎないように下限を置く */
	min-height: 420px;
}

/*
 * 全画面では比率を画面に合わせる。object-fit: cover は元の指定を引き継ぐ。
 * 高さが親（100svh）で決まるので、読み込み前後で高さが変わらない＝CLSは出ない。
 */
.p-has-hero .c-hero__image,
.p-has-hero .c-hero__video {
	height: 100%;
	aspect-ratio: auto;
}

/*
 * スマートフォンの動画は、画面いっぱいではなく中央の帯に収める
 * （2026-08-27 指示。全画面で流す案と、下に帯で置く案の折衷）。
 *
 * 動画は 1280x720 の1本しかない。縦長の画面いっぱい（100svh）に cover で敷くと
 * 3.4倍に拡大され、横は元の26%しか映らない。肉の極端なアップがぼやけて出るうえ、
 * 下に敷いた各店の写真も完全に隠れる。
 *
 * 高さを画面の40%に絞ると 1.35倍・横は65%まで戻り、鉄板の場面として成立する。
 * 上下には各店の写真が残るので、店ごとの違いも伝わる。
 *
 *   帯の高さ   拡大率   横で見える割合
 *     26%      0.88倍      100%   （16:9。動きが小さくなる）
 *     40%      1.35倍       65%
 *     60%      2.03倍       43%   ← ここを採る（2026-08-27「もっと拡大して」）
 *    100%      3.38倍       26%   （切替前の状態。左右が切れすぎる）
 *
 * 拡大率2倍に耐えるよう、動画も元素材から作り直した。差し替え前は
 * 959kbps しか無く、拡大する前からディテールが潰れていた（元素材は2004kbps）。
 * いまは 8秒・1.8MB・1862kbps。テーマの決め事「15秒以内・2MB以内」に収まる。
 *
 * すぐ上の .p-has-hero .c-hero__video が height:100% を当てているため、
 * **この指定はそれより後ろに置く必要がある**（詳細度が同じなので後勝ち）。
 * 前に置くと効かない。
 *
 * 対象は --delayed が付く店舗ページだけ。ブランドトップは動画が本体で
 * 写真は poster なので、帯にすると背景が空になる。
 */
@media (max-width: 767px) {
	.p-has-hero .c-hero__video--delayed {
		inset: 50% 0 auto;
		height: 60svh;
		transform: translateY(-50%);
		/*
		 * 上下の縁をぼかして写真になじませる。
		 * 硬い境目のままだと、動画プレーヤーを1枚貼ったように見えて浮く。
		 * ぼかす幅は帯の高さの14%程度。これ以上広げると動画の主題が痩せる。
		 */
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 14%,
			#000 86%,
			transparent 100%
		);
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0,
			#000 14%,
			#000 86%,
			transparent 100%
		);
	}
}

/* --- ボタン --- */

.c-button {
	display: inline-block;
	padding: 16px 40px;
	border: 1px solid var(--wk-ink);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.c-button:hover {
	background: var(--wk-ink);
	color: var(--wk-bg);
}

/*
 * ボタンの先頭に置くアイコン（電話・カレンダー・封筒）。
 *
 * 図形だけで意味が通る絵柄を選んでいる。英語・中国語のページでも
 * 説明を足さずに済ませるため（2026-08-22 指示）。
 *
 * 色は currentColor。ボタンの文字色に追従するので、
 * ホバーで地と文字が反転しても勝手に付いてくる。
 * SVGを直接書いているのは、アイコンフォントも画像も増やさないため
 * （追加の通信が発生しない）。
 */
.c-button__icon {
	display: inline-block;
	vertical-align: -0.15em;
	margin-inline-end: 0.5em;
	flex: 0 0 auto;
}

/*
 * 予約ボタン。ロゴの日の丸の赤に、柔らかい照りを乗せる。
 *
 * 面は放射のグラデーション。中心をやや右上に寄せ、縁に向かって落とすことで、
 * 斜めから光が当たった漆器のような艶になる。直線のグラデーションだと
 * 帯が見えて安く感じるため、放射で境目を消している。
 *
 * 三段の赤はロゴの日の丸（#e71f19）から起こした値。導出と、明るい側の
 * 上限を 45% に止めている理由は :root の --wk-red-* のコメントを参照。
 *
 * 金の縁は使わない。縁は面より暗い赤にして、面と地の境だけを締める。
 * 文字は生成りの白。--wk-bg は暗色なので赤地の上では使えない。
 */
.c-button--reserve {
	/*
	 * ボルドーの艶ボタン（2026-08-25 指示。「上に戻る」と同じ仕上げ）。
	 * 照りは上端の帯だけ。文字の高さには面（--wk-bdx-mid）以深しか来ないように、
	 * グラデーションは縦で組む（コントラストの担保。:root のコメント参照）。
	 * 上半分のガラスの映り込みで艶を足す。
	 */
	border-color: var(--wk-bdx-edge);
	background-color: var(--wk-bdx-mid);
	background-image:
		radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 55%),
		linear-gradient(
			to bottom,
			var(--wk-bdx-light) 0%,
			var(--wk-bdx-mid) 34%,
			var(--wk-bdx-deep) 100%
		);
	color: var(--wk-ink);
	/* 上端の細い明かりと下端の落ち込みで、面に厚みを持たせる。 */
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 28%),
		inset 0 -1px 0 rgb(0 0 0 / 32%),
		0 3px 12px rgb(0 0 0 / 40%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

/*
 * 照りを広げて面全体を明るく持ち上げる。
 *
 * 明るい側に新しい色は足さない。--wk-red-light が文字とのコントラストの
 * 上限（4.59:1）なので、これより明るい赤を置くと読めなくなる。
 * 代わりに照りの範囲を広げ、暗い側を外へ追いやることで明るく見せている。
 */
.c-button--reserve:hover {
	border-color: var(--wk-bdx-edge);
	/* 照りを持ち上げて面全体を明るく。新しい色は足さない */
	filter: brightness(1.12);
	color: var(--wk-ink);
}

.l-header__reserve {
	padding: 10px 24px;
	font-size: 0.875rem;
}

/* --- ブランド表示 --- */

/*
 * 通常はロゴ画像が入る。文字のスタイルはロゴが無い場合の
 * フォールバック（データ側で logo を null にした場合）のために残している。
 */
.c-brand {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.c-brand__logo {
	display: block;
	height: 60px;
	width: auto;
}

/*
 * ロゴと店舗名を横に並べる。両者の縦幅を揃えて、上下の位置を合わせる。
 */
.l-header__branding {
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * 店舗名の枠をロゴと同じ高さにする（.c-brand__logo と同値を保つこと）。
 * 文字を60pxにするとヘッダーに収まらないため、揃えるのは枠の高さ。
 * 中で上下中央に置き、ロゴと視覚的な重心を合わせる。
 */
/*
 * 明朝体で組む。欧文見出し（Cormorant Garamond）がセリフ体なので、
 * 和文も明朝に揃えるとヘッダーと本文で字面の系統が一致する。
 *
 * 新しいフォントは読み込まない。和文フォントは字数が多くファイルが数MBになり、
 * 海外回線での表示（目的1）と噛み合わないため、OS搭載の明朝を拾う。
 * 色も墨色に上げて、ロゴと対等な要素として扱う（従来は補助テキスト扱いだった）。
 */
.c-brand__store {
	display: flex;
	align-items: center;
	height: 60px;
	font-family: var(--wk-font-ja-serif);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	color: var(--wk-ink);
	text-decoration: none;
	/*
	 * 立体感。暗い地に明るい字なので、上に明かり・下に影を置いて彫り上げる。
	 * 影は 1px までに留める。強くすると明朝の細い画がにじみ、読みにくくなる。
	 */
	text-shadow:
		0 -1px 0 rgb(255 255 255 / 18%),
		0 1px 0 rgb(0 0 0 / 55%),
		0 2px 6px rgb(0 0 0 / 45%);
}

@media (max-width: 767px) {
	/* 小さい画面ではナビと同居させるため一回り下げる。店舗名の枠も同値に保つ。 */
	.c-brand__logo {
		height: 46px;
	}

	.c-brand__store {
		height: 46px;
		font-size: 1.0625rem;
	}
}

/* --- ヘッダー右端の動線（ブランドサイト・言語） --- */

/*
 * 店舗ページのヘッダーは、現在地（ロゴ＋店名）と「ここから出る」動線だけを持つ
 * （2026-08-23 指示）。ブランドサイトと言語切替を同じ大きさのボタンで揃える。
 * 出力は wk_header_actions()。
 */
.l-header__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-inline-start: auto;
}

/*
 * ブランドサイトのヘッダーメニュー（2026-08-24 指示）。
 * トップページの節へのアンカーを言語ボタンの左に並べる。
 * 英字＋和文の2段はセクションナビと同じ構成で、ヘッダー用に小さく組む。
 */
.c-header-nav__list {
	display: flex;
	align-items: stretch;
	gap: clamp(4px, 0.8vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-header-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-block-size: 44px;
	padding: 4px 10px;
	text-decoration: none;
	color: var(--wk-ink);
}

.c-header-nav__en {
	font-family: var(--wk-font-en);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	border-block-end: 1px solid transparent;
	transition: border-color 0.2s;
}

.c-header-nav__item:hover .c-header-nav__en,
.c-header-nav__item:focus-visible .c-header-nav__en {
	border-block-end-color: currentColor;
}

.c-header-nav__ja {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink-weak);
}

/* ヒーローに重なるヘッダーでは、補助の和文も含めて白系に寄せる */
.p-has-hero .l-header .c-header-nav__ja {
	color: inherit;
	opacity: 0.75;
}

/* ハンバーガー（スマホのブランドサイト専用）。PCでは出さない */
.c-nav-toggle-check,
.c-nav-toggle {
	display: none;
}

/* ヘッダー右端の動線。フッター（.l-footer__global）でも同じ部品を使う（2026-08-23）。 */
.c-header-button,
.c-lang__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-block-size: 44px;
	padding: 6px 14px;
	border: 1px solid var(--wk-line);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-decoration: none;
	color: var(--wk-ink);
	white-space: nowrap;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-header-button:hover,
.c-lang__link:hover,
.c-lang__link:focus-visible {
	background: var(--wk-ink);
	border-color: var(--wk-ink);
	color: var(--wk-bg);
}

/* ブランドサイトへのボタンだけ、欧文の名前を主にする。 */
.c-header-button__label {
	font-family: var(--wk-font-en);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
}

.c-header-button__note {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink-weak);
}

.c-header-button:hover .c-header-button__note {
	color: inherit;
}

/*
 * 言語ボタンは横幅を揃える（2026-08-23 指示）。
 * 「日本語」「English」「中文」は字数が違い、そのままだと幅がばらつく。
 * 一番長い English が収まる幅を下限にして、3つとも同じ大きさにする。
 */
.c-lang__link {
	min-inline-size: 80px;
}

/* 現在の言語は押せない。枠だけ残して、選べる2つと区別する。 */
.c-lang__link--current {
	border-color: var(--wk-ink);
	background: rgb(255 255 255 / 8%);
	cursor: default;
}

.c-lang__link--current:hover {
	background: rgb(255 255 255 / 8%);
	border-color: var(--wk-ink);
	color: var(--wk-ink);
}

.c-lang__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	/*
	 * 狭い画面では4つのボタンが横に並びきらない。
	 * 帯を折り返し可能にして、右端で切れないようにする（2026-08-23 修正）。
	 * min-width: 0 を入れないと、flex の子は中身の幅より縮まない。
	 */
	.l-header__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 6px;
		min-width: 0;
	}

	.c-header-button,
	.c-lang__link {
		min-block-size: 38px;
		padding: 4px 8px;
		font-size: 0.6875rem;
	}

	/*
	 * 狭い画面では幅を揃えるより、収まることを優先する。
	 * 下限を外し、中身なりの幅にする。
	 */
	.c-lang__link {
		min-inline-size: 0;
	}

	.c-header-button__label {
		font-size: 0.8125rem;
	}

	/* 狭い画面では補足を落とす。名前だけで役割は伝わる。 */
	.c-header-button__note {
		display: none;
	}
}

/* 節の締めに置くボタン。中央に寄せて、次の節との区切りにする。 */
.p-section__action {
	margin-top: clamp(28px, 4vw, 48px);
	text-align: center;
}

/* --- 店舗情報の地図 --- */

/*
 * 比率を先に確保しておく。iframe は読み込みまで高さを持たないため、
 * 指定しないと地図が届いた瞬間に下の内容が押し下げられる（CLS）。
 */
/*
 * 店舗情報を左、地図を右に並べる（2026-08-23 指示）。
 * 住所や営業時間を読みながら、同じ画面で場所を確かめられる。
 */
.p-store__detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 56px);
	align-items: start;
}

/*
 * 比率ではなく高さで合わせる。左の情報の量は店舗で違うので、
 * 比率で決めると地図だけが伸び縮みして並びが揃わない。
 */
.c-store-map {
	block-size: clamp(320px, 42vw, 520px);
	border: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
}

.c-store-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.p-store__detail {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 縦積みでは高さ指定をやめ、比率で確保する。 */
	.c-store-map {
		block-size: auto;
		aspect-ratio: 4 / 3;
	}
}

/* --- ナビゲーション --- */

.c-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.c-nav a {
	text-decoration: none;
}

/* --- パンくず --- */

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	width: 100%;
	max-width: var(--wk-container);
	margin: 0 auto;
	padding: 12px min(var(--wk-gutter), var(--wk-gutter-max));
	list-style: none;
	font-size: 0.8125rem;
	color: var(--wk-ink-weak);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "／";
	margin-right: 8px;
}

/* --- 店舗情報 --- */

.c-store-info {
	display: grid;
	grid-template-columns: 7em 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--wk-line);
}

.c-store-info dt,
.c-store-info dd {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--wk-line);
}

.c-store-info dt {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wk-ink-weak);
	letter-spacing: 0.08em;
}

/* 1つの項目に複数行を入れるときの1行分（営業時間の曜日別、アクセスの経路別）。 */
.c-store-info__line {
	display: block;
}

.c-store-info__map {
	display: inline-block;
	margin-inline-start: 12px;
	font-size: 0.875rem;
}

@media (max-width: 599px) {
	.c-store-info {
		grid-template-columns: 1fr;
	}

	.c-store-info dt {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/* --- セクションナビ（ヒーロー直下） --- */

/*
 * 節へのアンカーを横一列に並べる。入りきらない画面では横スクロールさせる。
 * JSは使わない。overflow-x とスクロールスナップだけで成立する。
 */
.c-section-nav {
	border-bottom: 1px solid var(--wk-line);
	background: var(--wk-bg);
}

.c-section-nav__list {
	display: flex;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wk-container);
	list-style: none;
	/* 入りきらない項目は横スクロールで拾わせる */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* スクロールバーで高さが変わらないようにする */
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.c-section-nav__item {
	display: block;
	padding: 18px 28px;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
	border-inline-end: 1px solid var(--wk-line);
}

.c-section-nav__en {
	display: block;
	font-family: var(--wk-font-en);
	font-size: 1.125rem;
	line-height: 1.2;
}

.c-section-nav__ja {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink-weak);
}

/*
 * アンカーで飛んだ先が画面上端に貼り付かないよう、見出しの上に余白を確保する。
 * ヒーローに重ねたヘッダーの下に潜り込むのも防ぐ。
 */
:target {
	scroll-margin-top: 24px;
}

html {
	scroll-behavior: smooth;
}

/* 動きを減らす設定では瞬時に移動させる */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- スマートフォンの固定行動バー --- */

/*
 * 予約・電話・アクセスを画面下に常時出す（2026-08-22 指示）。
 * 小さい画面では、下まで読まないとこれらに手が届かないため。
 *
 * **広い画面では出さない。** 既定を display: none にして、
 * 狭い画面のメディアクエリでだけ出す。逆にすると、
 * メディアクエリが効かない環境で全幅に居座る。
 */
.c-action-bar {
	display: none;
}

@media (max-width: 767px) {
	.c-action-bar {
		position: fixed;
		z-index: 90;
		inset-inline: 0;
		inset-block-end: 0;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		border-block-start: 1px solid var(--wk-line);
		background: var(--wk-bg);
		/*
		 * 端末下端のホームバーに重ならないよう、その分を下に足す。
		 * 対応していない端末では 0 になる。
		 */
		padding-block-end: env(safe-area-inset-bottom, 0);
	}

	.c-action-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 指で押す領域。高さ56pxはタップ目標の推奨値（44px）を上回る。 */
		min-block-size: 56px;
		padding: 8px 4px;
		border-inline-start: 1px solid var(--wk-line);
		color: var(--wk-ink);
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
		text-decoration: none;
	}

	.c-action-bar__item:first-child {
		border-inline-start: 0;
	}

	/* 予約だけ赤にして、3つのうちどれが主かを示す。 */
	.c-action-bar__item--reserve {
		background-color: var(--wk-bdx-mid);
		background-image:
			radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 55%),
			linear-gradient(
				to bottom,
				var(--wk-bdx-light) 0%,
				var(--wk-bdx-mid) 34%,
				var(--wk-bdx-deep) 100%
			);
		border-inline-start-color: var(--wk-bdx-edge);
		font-weight: 700;
		text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
	}

	.c-action-bar__icon {
		display: block;
	}

	/*
	 * バーが本文の末尾に重ならないよう、その分だけ下に余白を作る。
	 * 「上に戻る」ボタンの逃がしは .c-to-top の定義の直後に置いてある
	 * （こちらに書くと、後から来る .c-to-top の既定値に打ち消される）。
	 */
	body {
		padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}

/* --- お知らせの帯（店舗ページ・ヒーロー下） --- */

/*
 * 最新1件を横1行に収める（2026-08-22 指示）。
 * 節として縦に組むと、ヒーロー直下という位置に対して場所を取りすぎる。
 *
 * 並びは「見出し｜日付＋題名｜すべて見る」。題名だけを伸ばして、
 * 「すべて見る」を右端に押しやる（見出しと導線の位置が記事の長さで動かない）。
 * 狭い画面では折り返す。横スクロールはさせない。
 */
.p-news-bar {
	border-block: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
}

.p-news-bar__inner {
	width: 100%;
	max-width: var(--wk-container);
	margin-inline: auto;
	padding-block: 16px;
	padding-inline: min(var(--wk-gutter), var(--wk-gutter-max));
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px clamp(16px, 2vw, 28px);
	font-size: 0.9375rem;
}

.p-news-bar__label {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.p-news-bar__en {
	font-family: var(--wk-font-en);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
}

.p-news-bar__ja {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink-weak);
}

/*
 * 記事本体。ここだけ伸びるようにして、右端の「すべて見る」を押し出す。
 * min-width: 0 が無いと、長い題名で flex が縮まず帯からはみ出す。
 */
.p-news-bar__item {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	color: var(--wk-ink);
	text-decoration: none;
}

.p-news-bar__date {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	color: var(--wk-ink-weak);
	font-variant-numeric: tabular-nums;
}

/* 題名は1行に収め、あふれたら三点リーダーで切る。帯を2行にしない。 */
.p-news-bar__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.p-news-bar__item:hover .p-news-bar__title {
	color: var(--wk-accent);
}

.p-news-bar__more {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	white-space: nowrap;
	color: var(--wk-ink-weak);
}

@media (max-width: 599px) {
	/* 狭い画面では題名を折り返して読ませる。切るより読めるほうを優先する。 */
	.p-news-bar__title {
		overflow: visible;
		white-space: normal;
	}
}

/* --- スマートフォンの固定バー（予約・電話・アクセス） --- */

/*
 * 小さい画面では、下まで読まないと予約や電話に手が届かない。
 * 画面下に貼り付けて常時出す（2026-08-22 指示）。
 * 出力は wk_mobile_action_bar()（footer.php から呼ぶ）。店舗サイトのみ。
 *
 * 768px 以上では出さない。広い画面ではヘッダーとフッターで足りており、
 * 画面を削ってまで貼り付ける理由がない。
 */
.c-action-bar {
	display: none;
}

@media (max-width: 767px) {
	.c-action-bar {
		position: fixed;
		z-index: 90;
		inset-inline: 0;
		inset-block-end: 0;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		border-block-start: 1px solid var(--wk-line);
		background: var(--wk-bg-alt);
		/*
		 * iPhone のホームバーに隠れないよう、安全領域のぶんを足す。
		 * 対応していない環境では 0 が入る。
		 */
		padding-block-end: env(safe-area-inset-bottom, 0);
	}

	.c-action-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding-block: 10px;
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
		text-decoration: none;
		color: var(--wk-ink);
	}

	.c-action-bar__item + .c-action-bar__item {
		border-inline-start: 1px solid var(--wk-line);
	}

	/* 予約だけ赤にして、3つのうちどれが主かを示す。 */
	.c-action-bar__item--reserve {
		background: var(--wk-bdx-mid);
		background-image:
			radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 55%),
			linear-gradient(
				to bottom,
				var(--wk-bdx-light) 0%,
				var(--wk-bdx-mid) 34%,
				var(--wk-bdx-deep) 100%
			);
	}

	.c-action-bar__icon {
		display: block;
	}

	/*
	 * バーの高さぶん、ページの下に余白を作る。
	 * 入れないと、フッター最下段の文字がバーの下に潜り込む。
	 */
	body:has( .c-action-bar ) {
		padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* 「上に戻る」ボタンもバーの上に逃がす。 */
	body:has( .c-action-bar ) .c-to-top {
		inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}

/* --- ブランドの紹介（店舗ページ） --- */

/*
 * 節ごとに写真と文章を左右へ振り分ける（2026-08-23 指示）。
 * 塊に切り分けているのは PHP 側（wk_concept_layout）。ここは並べ方だけを持つ。
 *
 * 交互にするのは、同じ向きが続くと縦に単調な帯になるため。
 * 偶数番の節だけ写真を右へ回す。
 */
/*
 * 写真2：文章3の比率で組む（2026-08-23 指示。5分割の 2/5 と 3/5）。
 * 大きさは列比が決めるので、写真側に幅の上限は持たせない。
 * 偶数番（写真が右）は列比も左右で入れ替える（下の nth-child）。
 */
/*
 * カードのスライダー（2026-08-23 指示）。JSは使わない。
 * 横スクロール＋スナップで1枚ずつ止まり、矢印（アンカー）でも送れる。
 * スクロールバーは隠す。送りの手段は矢印とスワイプが担う。
 */
.p-concept-slider {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.p-concept-slider::-webkit-scrollbar {
	display: none;
}

/*
 * カード1枚。幅は容器いっぱい＝常に1枚だけ見える。
 * 枠と塗りで「カード」として独立させる。
 */
.p-concept__block {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(24px, 3vw, 48px);
	/* 文章の先頭を写真の上端に揃える。 */
	align-items: start;
	padding: clamp(20px, 3vw, 40px);
	border: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
}

/* アンカーで飛んだとき、ヘッダーの下に潜らないための余白。 */
.p-concept__block {
	scroll-margin-top: 24px;
}

/*
 * カードの送り。矢印はカードの左右の端・上下中央に置く（2026-08-23 指示）。
 * 左の矢印は写真の上に乗るため、暗い面を敷いて読めるようにしている。
 */
.p-concept__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgb(255 255 255 / 25%);
	background: rgb(10 8 6 / 70%);
	font-size: 1.125rem;
	text-decoration: none;
	color: var(--wk-ink);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.p-concept__arrow--prev {
	inset-inline-start: clamp(8px, 1.4vw, 20px);
}

.p-concept__arrow--next {
	inset-inline-end: clamp(8px, 1.4vw, 20px);
}

.p-concept__arrow:hover,
.p-concept__arrow:focus-visible {
	background: var(--wk-ink);
	border-color: var(--wk-ink);
	color: var(--wk-bg);
}

/*
 * スライダーの下の番号（01〜05）。押すとそのカードへ飛ぶ。
 * 表示中の番号の強調はJSが要るため行わない。番号は行き先の一覧として扱う。
 */
.p-concept__pager {
	display: flex;
	justify-content: center;
	gap: clamp(16px, 2.4vw, 32px);
	margin-top: clamp(16px, 2vw, 24px);
}

.p-concept__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 48px;
	min-block-size: 48px;
	font-family: var(--wk-font-en);
	/* 2026-08-23 に拡大（1rem → 1.375rem）。 */
	font-size: 1.375rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	color: var(--wk-ink-weak);
	border-block-end: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.p-concept__page:hover,
.p-concept__page:focus-visible {
	color: var(--wk-ink);
	border-block-end-color: rgb(200 168 102 / 70%);
}

/*
 * スライダーの次の節（Tasting Menu）との間隔（2026-08-23 指示で縮小）。
 * 既定の --wk-section-gap（最大128px）に塗り帯の内側余白96pxが重なり、
 * 画面上は220px超の空白になっていた。番号のすぐ下から次の節が始まるようにする。
 */
.p-section--concept + .p-section {
	margin-top: clamp(24px, 3vw, 40px);
}

/* 写真の無い節は文章だけで1段。 */
.p-concept__block--text-only {
	grid-template-columns: minmax(0, 1fr);
}



.p-concept__media {
	display: grid;
	gap: 16px;
}

.p-concept__media figure {
	margin: 0;
	overflow: hidden;
}

.p-concept__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

/*
 * 節に写真が2枚あるときは、横に並べず重ねる（2026-08-23 指示）。
 *
 * 並べると1枚あたりが小さくなり、料理の質感が伝わらない。
 * 大きい1枚を主にして、2枚目を右下にずらして重ねると、
 * 面積を取らずに両方を大きく見せられる。
 *
 * 重なりは padding-bottom で作った余地に、2枚目を絶対配置で置いている。
 * 1枚目の高さが写真ごとに違っても、余地の割合は変わらない。
 */
.p-concept__media:has( figure + figure ) {
	position: relative;
	display: block;
	padding-block-end: 22%;
}

/*
 * 大きいほう（奥）は**2枚目**、小さいほう（手前）は**1枚目**
 * （2026-08-23 指示で上下を入れ替え）。
 *
 * 本文側の並びは変えていない。ページの編集者は今までどおり
 * 見出し・写真・段落を順に置けばよく、見せ方だけをここで決めている。
 */
.p-concept__media:has( figure + figure ) figure:nth-child(2) {
	inline-size: 76%;
}

.p-concept__media:has( figure + figure ) figure:first-child {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	inline-size: 56%;
	/*
	 * 影で奥の1枚から浮かせる。枠線を引くと2枚のあいだに線が2本並んで見え、
	 * 重なりが読み取りにくくなる。
	 */
	box-shadow: 0 16px 40px rgb(0 0 0 / 55%);
}

.p-concept__media:has( figure + figure ) img {
	aspect-ratio: 4 / 5;
}

/*
 * 文章側。幅は列比（3/5）に任せる（2026-08-23 指示）。
 * 34em の上限を置いていたが、列比で整えた比率が見た目に反映されないため外した。
 * 最も広い画面で1行約49字。これ以上コンテナを広げるなら上限の再設定を検討すること。
 */
.p-concept__text {
	max-width: none;
}

.p-concept__text h2 {
	margin: 0;
	font-size: clamp(1.375rem, 2.4vw, 2rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/*
 * 見出しの上に金の細線を引く。節の始まりを示す目印。
 * 面積を取らずに格を出せるので、金はここと星・クチコミの枠だけに使う。
 */
.p-concept__text h2::before {
	content: "";
	display: block;
	inline-size: 40px;
	block-size: 1px;
	margin-block-end: clamp(16px, 2vw, 24px);
	background: rgb(200 168 102 / 70%);
}

.p-concept__text h3 {
	margin: 0.5em 0 0;
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--wk-ink-weak);
}

/*
 * 余白の初期化は「子ども全部」に同じ詳細度でかける。
 * `.p-concept__text p` と書くと詳細度が上の間隔指定より強くなり、
 * 段落間が0のまま潰れる（実際に潰れていた。2026-08-23 修正）。
 */
.p-concept__text > * {
	margin: 0;
}

.p-concept__text p {
	/* 行間 1.75（2026-08-23 に 2.0 から縮小。行のまとまりを詰める）。 */
	line-height: 1.75;
}

/*
 * 段落の間隔（2026-08-23 指示で拡大）。
 *
 * 行間が2.0なので、段落内の行の見た目の間隔は約32px ある。
 * 段落間がそれと同じだと切れ目が読み取れない。
 * 1.6em（約26px）。行間より一段広く、切れ目は読めるが間延びしない幅
 * （2026-08-23 に40pxから縮小）。
 * **行間を変えるときはここも一緒に見直すこと。**
 */
.p-concept__text > * + * {
	margin-top: 1.6em;
}

/* 強調は色ではなく太さで示す。赤や金は予約導線の色と競合する。 */
.p-concept__text strong {
	font-weight: 700;
}

/*
 * 段落まるごとが強調の行は、リード文として少し大きく出す（2026-08-23 指示）。
 * 例：「神戸牛の真価は、鉄板の上で花ひらく。」
 *
 * `> strong:only-child` で「段落の中身が強調だけ」の行に限定している。
 * 文中の一部を強調しただけの段落（「それもまた、私たち**和牛の刀**の使命です。」など）
 * は大きくしない。**この条件を緩めないこと。** 本文の途中が急に大きくなる。
 */
.p-concept__text p:has( > strong:only-child ) {
	font-size: 1.15em;
	line-height: 1.8;
}

/*
 * 狭い画面では縦に積む。写真が先、文章が後。
 * 交互の入れ替えもここで打ち消す（1列では意味を持たない）。
 */
@media (max-width: 767px) {
	.p-concept__block,
	.p-concept__block--text-only {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 16px;
	}


	/* 狭い画面では重ねない。2枚目が1枚目を覆ってしまうため。 */
	.p-concept__media:has( figure + figure ) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding-block-end: 0;
		margin-inline-start: 0;
	}

	.p-concept__media:has( figure + figure ) figure:first-child,
	.p-concept__media:has( figure + figure ) figure:nth-child(2) {
		position: static;
		inline-size: auto;
		box-shadow: none;
	}

	/* 縦積みでも、大きく見せていた2枚目を先に出す。 */
	.p-concept__media:has( figure + figure ) figure:nth-child(2) {
		order: -1;
	}

	.p-concept__media img {
		aspect-ratio: 3 / 2;
	}

	.p-concept__media:has( figure + figure ) img {
		aspect-ratio: 3 / 4;
	}

	.p-concept__text {
		max-width: none;
	}
}


/* --- 店舗バナー（フッターの直前・全ページ共通） --- */

/*
 * どのページからでも各店へ行けるようにするための帯（2026-08-22 指示）。
 * 出力は template-parts/store-banner.php（footer.php から呼ぶ）。
 *
 * 段組みにせず横一列で並べ、入りきらない画面では横スクロールさせる。
 * セクションナビと同じ作り。JSは使わない。
 * 段組みにすると店舗が増えたときに帯の高さが伸び、
 * フッターの直前で場所を取りすぎる。
 */
.l-store-banner {
	border-block-start: 1px solid var(--wk-line);
	background: var(--wk-bg);
}

.l-store-banner__inner {
	width: 100%;
	max-width: var(--wk-container);
	margin-inline: auto;
	/* 下はフッターと接するぶん、上より少し厚く取る。 */
	padding-block: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 36px);
	padding-inline: min(var(--wk-gutter), var(--wk-gutter-max));
}

/*
 * バナーの直後にフッターが来るときは、節と節の間隔（--wk-section-gap＝最大128px）を
 * 挟まない（2026-08-23 指摘）。
 *
 * バナーは上端に罫を持つ独立した帯なので、区切りはそれで足りている。
 * ここに128pxを足すと、タイルとフッターのロゴのあいだが200px近く空いて
 * 画面が途切れて見える。フッター自身の padding（48px）で十分。
 */
.l-store-banner + .l-footer {
	margin-block-start: 0;
}

/* 2026-08-23 指示で中央寄せ＋拡大、英字の下に和文を添える2段組み。 */
.c-store-banner__heading {
	margin: 0 0 clamp(16px, 2vw, 24px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.c-store-banner__en {
	font-family: var(--wk-font-en);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
}

.c-store-banner__ja {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink-weak);
}

/*
 * 全店を一度に見せる。横スクロールはしない（2026-08-22 指示）。
 * **4列×2段**に固定する（上4・下4）。
 *
 * auto-fit にはしない。画面幅によって1行になったり3列になったりして、
 * 「上4・下4」の並びが崩れるため。店舗が9店以上に増えたときは
 * 3段目ができる。列数を変えたいときはここだけ直せばよい。
 *
 * 狭い画面では2列にする。4列のままだと1枚が80px程度になり、
 * 店名が入らない。
 */
.c-store-banner__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.c-store-banner__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.c-store-banner__item {
	min-width: 0;
}

/*
 * 写真の枠を兼ねる。比率を決めて高さを確保しておく。
 *
 * 4:1 の横長にする。4列×2段では1枚が330px前後になるため、
 * 2:1 だと1枚165pxで2段合わせて340pxになり、帯が本文より目立ってしまう。
 * 4:1 なら1枚83px・2段で174pxに収まる（2026-08-22 の「縦幅を半分」の指示）。
 * 写真が無い店舗では地色の面が残り、並びが崩れない。
 */
.c-store-banner__link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 1;
	overflow: hidden;
	background: var(--wk-bg-alt);
	text-decoration: none;
	color: var(--wk-ink);
}

/*
 * 切り出す縦位置は店舗マスタの images.hero_focus で変えられる
 * （0=写真の上端 / 100=下端 / 既定50=中央）。
 * 帯は 4:1 で元写真の縦4分の1しか映らないため、店によっては
 * 中央だと調理台や床ばかりになる。値は store-banner.php が
 * --wk-banner-focus として渡す。既定はここのフォールバックが持つ。
 */
.c-store-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center var(--wk-banner-focus, 50%);
	transition: transform 0.4s var(--wk-ease-soft);
}

.c-store-banner__link:hover .c-store-banner__img,
.c-store-banner__link:focus-visible .c-store-banner__img {
	transform: scale(1.05);
}

/*
 * 店名は写真の上に重ねる。
 *
 * 下から黒を立ち上げて字の下だけを沈ませる。写真の明るさは店舗でまるで違い
 * （ひさご通り店は上位1%で 0.98）、そのまま乗せると字が飛ぶ。
 * 字が乗る下端では黒が92%かかり、最も明るい写真の上でも 5.4:1 を保つ。
 * **この濃さを薄めないこと。** 薄めるなら字を大きくして
 * 「大きな文字」の基準（3:1）に寄せるか、字色を変えること。
 */
.c-store-banner__name {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 16px 10px 7px;
	background-image: linear-gradient(
		to top,
		rgb(10 8 6 / 92%) 0%,
		rgb(10 8 6 / 62%) 55%,
		rgb(10 8 6 / 0%) 100%
	);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

/* エリア名は店名より一段弱く。どの街かを先に読ませたいが、主役は店名。 */
/* 左上のエリア表記（東京-新宿エリア- など。2026-08-25 指示） */
.c-store-banner__region {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 3px 10px;
	background: rgb(10 8 6 / 78%);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var(--wk-ink);
	line-height: 1.5;
}

/*
 * 店名は「神戸牛 和牛の刀 ◯◯店」。PCは1段で続け、スマホは2段
 * （ブランド／店名）に折る（2026-08-25 指示）。
 */
.c-store-banner__brand {
	margin-inline-end: 0.4em;
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wk-rating-weak);
}

@media (prefers-reduced-motion: reduce) {
	.c-store-banner__img {
		transition: none;
	}

	.c-store-banner__link:hover .c-store-banner__img,
	.c-store-banner__link:focus-visible .c-store-banner__img {
		transform: none;
	}
}

/* --- 上に戻るボタン --- */

/*
 * スクロール量に応じた出し入れにはJSが要るため、常時表示にしている。
 * 本文の読み取りを邪魔しないよう、右下の隅に小さく置く。
 */
/*
 * 「上に戻る」は赤の面にする（2026-08-25 指示。参考サイトの金の艶ボタンの赤版）。
 *
 * 高級感は「金属の照り」で出す。斜めのグラデーションに明→暗→明の帯を作り、
 * 漆というよりワインボトルの照りに寄せた。色は日の丸の赤（--wk-red-*）より
 * 一段ワインに振ったボルドー3色で、この部品の専用値：
 *   #c0344c 照り（明）  #7d1728 面（中）  #43101c 落ち（暗）
 * 文字は生成りの白（--wk-ink）。暗い面の上で 7:1 以上を保つ。
 */
.c-to-top {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* 触れる大きさの下限（44px）を確保する */
	height: 44px;
	border: 1px solid var(--wk-bdx-edge);
	border-radius: 50%;
	background-color: var(--wk-bdx-mid);
	/*
	 * 2026-08-25 に一段明るく（照り #c0344c→#d8465f・面 #7d1728→#9a1f33）。
	 * 上半分にガラスの映り込み（放射の白）を重ねて艶を足している。
	 */
	background-image:
		radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 0%) 58%),
		linear-gradient(
			135deg,
			var(--wk-bdx-light) 0%,
			var(--wk-bdx-mid) 40%,
			var(--wk-bdx-deep) 75%,
			#82182e 100%
		);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 30%),
		inset 0 -1px 0 rgb(0 0 0 / 32%),
		0 4px 16px rgb(0 0 0 / 45%);
	color: var(--wk-ink);
	text-decoration: none;
	transition: background-position 0.3s, filter 0.2s;
}

/*
 * スマートフォンでは画面下に固定の行動バーが出るので、その上へ逃がす。
 * **この指定は .c-to-top の定義より後ろに置くこと。**
 * 行動バーの CSS のほうに書くと、後から来る上の既定値に打ち消される。
 */
@media (max-width: 767px) {
	.c-to-top {
		inset-block-end: calc(68px + env(safe-area-inset-bottom, 0px));
	}
}

.c-to-top:hover,
.c-to-top:focus-visible {
	/* 照りを持ち上げて面全体を明るく。新しい色は足さない */
	filter: brightness(1.18);
}

.c-to-top__mark {
	font-size: 1rem;
	line-height: 1;
}

/* --- 店舗の紹介文 --- */

.p-store__lead {
	max-width: 42em;
	margin: 0 0 32px;
	font-size: 1.0625rem;
	line-height: 2;
}

/* --- 写真帯 --- */

/*
 * 文章だけの節に挟む装飾。スクロールの単調さを断つのが目的。
 * 4枚を横に並べ、狭い画面では2列に落とす。
 */
.c-photo-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: clamp(40px, 6vw, 72px) 0 0;
	padding: 0;
	list-style: none;
}

.c-photo-band__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--wk-bg-alt);
}

@media (max-width: 767px) {
	.c-photo-band {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- セクションの塗り分け --- */

/*
 * 全節が同じ地色だとスクロールが単調になる。1節おきに塗りを変えて区切りを作る。
 *
 * 背景だけを画面幅いっぱいに伸ばす手法。box-shadow を左右に広げ、
 * clip-path で上下のはみ出しを切る。追加のマークアップも JS も要らない。
 */
.p-section--tinted {
	background: var(--wk-bg-alt);
	box-shadow: 0 0 0 100vmax var(--wk-bg-alt);
	clip-path: inset(0 -100vmax);
	padding-block: clamp(40px, 6vw, 64px); /* 2026-08-23 に縮小（最大96px → 64px） */
}

/* 塗り分けた節は上下の余白を自前で持つので、節間の間隔を詰める */
.p-section--tinted + .p-section {
	margin-top: var(--wk-section-gap);
}

/* --- 店舗の写真集（右から左へ流れる帯） --- */

/*
 * 右から左へ流れ続けるマーキー（2026-08-23 指示）。JSは使わない。
 *
 * 仕組み：同じ列を2周分並べ（PHP側が2回出力）、トラック全体を
 * 半分（＝1周ぶん）だけ左へ動かして先頭に戻す。2周が同一なので
 * 継ぎ目は見えない。**片方だけ内容を変えると継ぎ目が出る。**
 *
 * 速さは1枚あたり約7秒（5枚で34秒）。距離はトラックの割合（-50%）で
 * 指定しているため、枚数が増えても1枚あたりの体感速度はほぼ変わらない。
 *
 * 画面幅いっぱいに流す。
 * この帯は .p-section の外（l-main 直下）にあり、親に左右の余白が無い。
 * **負のマージンで広げないこと。** 親より広がって横スクロールが出る
 * （実際に出た。2026-08-23 修正）。
 */
.c-gallery-marquee {
	overflow: hidden;
	max-inline-size: 100%;
}

.c-gallery-marquee__track {
	display: flex;
	width: max-content;
	gap: 16px;
	/* 2026-08-24 に少し減速（25s → 34s。1枚あたり約5秒 → 約7秒） */
	animation: wk-gallery-flow 34s linear infinite;
}

@keyframes wk-gallery-flow {
	to {
		/* 1周ぶん＋gapの半分。2列のあいだの16pxも進めないと継ぎ目で跳ぶ。 */
		transform: translateX(calc(-50% - 8px));
	}
}

/*
 * 動きを控える設定では流さない。
 * 横に並んだ列をそのまま手でスクロールできる形に戻す。
 */
@media (prefers-reduced-motion: reduce) {
	.c-gallery-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.c-gallery-marquee__track {
		animation: none;
	}
}

.c-gallery {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 1枚の幅は固定。可変にすると流れる速さが画面幅で変わってしまう。 */
.c-gallery__item {
	flex: 0 0 auto;
	inline-size: clamp(240px, 26vw, 380px);
}

/*
 * 縦横比を固定して切り抜く。元写真は 4:3 と 3:2 が混在しており、
 * そのまま並べると段ごとに高さが変わって視線が揺れる。
 * width/height 属性は実寸を出しているので、読み込み前もこの比率で場所を取る。
 */
.c-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wk-bg-alt);
}

/* --- 店舗一覧 --- */

/*
 * カード1枚の下限は 320px。280px では住所やアクセスの行が細かく折り返し、
 * 予約とRead Moreのボタンも横に並ばなくなる。
 * コンテナを 1600px に広げたとき（2026-08-22）、280px のままだと
 * 5列になって中身が窮屈になったため引き上げた。**下げないこと。**
 */
.c-store-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 枠で囲ったカードにする。地色と同じ塗りを敷いてから枠を回すことで、
 * 塗り分けた節（--tinted）の上に置いても輪郭が出る。
 *
 * 予約ボタンをカード下端に揃えるため列方向の flex にする。
 * 情報量は店舗ごとに違う（アクセスの長さ・営業時間の行数）ので、
 * 高さを揃えずボタンの位置だけを揃える。
 */
.c-store-list__item {
	display: flex;
	flex-direction: column;
	padding: 0 20px 20px;
	border: 1px solid var(--wk-line);
	background: var(--wk-bg);
}

.c-store-list__name {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wk-line);
	font-size: 1.125rem;
	line-height: 1.6;
}

.c-store-list__name a {
	text-decoration: none;
}

.c-store-list__address,
.c-store-list__tel {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wk-ink-weak);
}

/*
 * カード内の店舗情報。「項目名 / 値」を2列で揃える。
 * 項目名の幅を固定して、カードをまたいで値の開始位置を合わせる。
 */
.c-store-list__info {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 6px 12px;
	margin: 0 0 16px;
	font-size: 0.8125rem;
	line-height: 1.7;
}

.c-store-list__info dt {
	color: var(--wk-ink-weak);
}

.c-store-list__info dd {
	margin: 0;
}

/*
 * カードの高さが揃わないため、導線は下端に寄せる。
 * item を flex 列にして、この要素だけ margin-top: auto で押し下げる。
 */
.c-store-list__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: auto 0 0;
}

/* WEB予約とRead Moreは同じ大きさで2等分（2026-08-24 指示） */
.c-store-list__reserve,
.c-store-list__detail {
	flex: 1 1 0;
	padding: 10px 12px;
	font-size: 0.8125rem;
	text-align: center;
	white-space: nowrap;
}

/*
 * 予約（塗り）に対して従。面を持たず枠線だけにして主従を付ける。
 * 触れたときだけ赤を出し、予約ボタンとの系統は保ちつつ格を下げる。
 */
.c-button--ghost {
	/*
	 * 黒漆の艶ボタン（2026-08-25 指示。赤いボタンと同じ立体の作りの黒版）。
	 * 上端に照り・下へ沈む縦グラデーション＋上半分のガラスの映り込み。
	 * 縁は見出しの金の罫と同系の金をうっすら残し、黒面の高級感を締める。
	 */
	border-color: rgb(200 168 102 / 45%);
	background-color: #211c16;
	background-image:
		radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 0%) 55%),
		linear-gradient(
			to bottom,
			#3a322a 0%,
			#211c16 40%,
			#0e0b08 100%
		);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 14%),
		inset 0 -1px 0 rgb(0 0 0 / 50%),
		0 3px 12px rgb(0 0 0 / 45%);
	color: var(--wk-ink);
	font-weight: 400;
}

.c-button--ghost:hover {
	border-color: rgb(200 168 102 / 80%);
	/* 照りを持ち上げて面全体を明るく。新しい色は足さない */
	filter: brightness(1.25);
	color: var(--wk-ink);
}

/* --- エリア見出し --- */

.c-store-region {
	margin: 0 0 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wk-line);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

/* 2つ目以降のエリアは、前のカード列との間を空ける */
.c-store-list + .c-store-region {
	margin-top: clamp(40px, 6vw, 64px);
}

/* --- 投稿一覧・本文 --- */

/* --- お知らせの行リスト --- */

/*
 * 各店の最新1件を横一列（日付・店舗名・タイトル）で積む
 * （2026-08-24 指示でカード型から変更）。罫線で行を区切る。
 */
.c-news-lines {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--wk-line);
}

.c-news-lines__item {
	border-block-end: 1px solid var(--wk-line);
}

.c-news-lines__link {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 2vw, 28px);
	padding: 14px 4px;
	min-block-size: 44px;
	text-decoration: none;
	color: var(--wk-ink);
}

.c-news-lines__date {
	font-family: var(--wk-font-en);
	font-size: 0.8125rem;
	color: var(--wk-ink-weak);
	white-space: nowrap;
}

/* どの店の情報かを最初に読ませたいので、店舗名だけ色を強くする */
.c-news-lines__store {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wk-accent);
	white-space: nowrap;
}

.c-news-lines__title {
	flex: 1;
	min-inline-size: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.c-news-lines__link:hover .c-news-lines__title,
.c-news-lines__link:focus-visible .c-news-lines__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 767px) {
	/* 狭い画面では日付・店舗名を1行目、タイトルを2行目に折る */
	.c-news-lines__link {
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	.c-news-lines__title {
		flex-basis: 100%;
	}
}

.c-entry-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-entry-list__item + .c-entry-list__item {
	margin-top: 8px;
}

.c-entry-card {
	padding: 20px 0;
	border-bottom: 1px solid var(--wk-line);
}

.c-entry-card__title {
	margin: 4px 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.c-entry-card__title a {
	text-decoration: none;
}

.c-entry__date,
.c-entry-card__excerpt {
	font-size: 0.8125rem;
	color: var(--wk-ink-weak);
}

.c-entry__title {
	font-size: clamp(1.375rem, 3.5vw, 2rem);
	line-height: 1.6;
	margin: 8px 0 24px;
}

/*
 * 記事本文。行長に上限を置く。
 *
 * コンテナ（1600px）いっぱいに流すと1行が100文字を超え、
 * 行を追う目が戻る位置を見失う。40em ＝ 和文でおよそ40字。
 */
.c-entry__body {
	max-width: 40em;
}

.c-entry__body > * + * {
	margin-top: 1.5em;
}

.c-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--wk-line);
	font-size: 0.875rem;
}

.c-empty {
	color: var(--wk-ink-weak);
}

/* --- ページ送り --- */

.c-pagination {
	margin-top: 48px;
}

.c-pagination .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	padding: 8px;
	border: 1px solid var(--wk-line);
	text-align: center;
	text-decoration: none;
}

.c-pagination .current {
	background: var(--wk-ink);
	border-color: var(--wk-ink);
	color: var(--wk-bg);
}

/* --- ユーティリティ --- */

.c-skip-link {
	position: absolute;
	left: -9999px;
}

.c-skip-link:focus {
	left: 8px;
	top: 8px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--wk-bg);
	border: 1px solid var(--wk-ink);
}

.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 「すべて見る」リンク --- */

.c-more {
	margin-top: 24px;
	font-size: 0.9375rem;
}

/* --- 言語切替 --- */

.c-lang__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.c-lang a {
	text-decoration: none;
	color: var(--wk-ink-weak);
}

.c-lang [aria-current="true"] {
	font-weight: 700;
}

/* --- 店舗一覧のサムネイル --- */

/*
 * 写真はカードの上端いっぱいに出す。左右のパディングを負のマージンで打ち消す。
 * 枠の内側に写真を落とし込むより、面で見せたほうが店舗の印象が伝わる。
 */
/*
 * 店舗へのジャンプボタン（スマホ専用。2026-08-26 指示）。
 * 2列のチップで、エリア名（バナーと同じ表記）＋店舗名の2段。
 * PCでは出さない（カードが一望できるため）。
 */
.c-store-jump {
	display: none;
}

@media (max-width: 767px) {
	.c-store-jump {
		display: block;
		margin-block-end: 24px;
	}

	.c-store-jump__group + .c-store-jump__group {
		margin-block-start: 14px;
	}

	/* エリア名は小さな見出しとして1つだけ出す（チップごとには付けない） */
	.c-store-jump__area {
		margin: 0 0 6px;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		color: var(--wk-ink-weak);
	}

	.c-store-jump__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.c-store-jump__item {
		display: flex;
		align-items: center;
		justify-content: center;
		min-block-size: 44px;
		padding: 6px 4px;
		border: 1px solid var(--wk-line);
		background: var(--wk-bg-alt);
		text-decoration: none;
		color: var(--wk-ink);
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
		text-align: center;
	}

	/* 飛んだ先が画面上端に貼り付かないよう、カード側に着地の余白を持たせる */
	.c-store-list__item {
		scroll-margin-top: 16px;
	}
}

.c-store-list__thumb {
	display: block;
	margin: 0 -20px 16px;
	/* 左上の地域ラベルの基準 */
	position: relative;
}

/*
 * 店名は2段（2026-08-24 指示）。1段目に「神戸牛 和牛の刀」を小さく、
 * 2段目に店舗名を主として出す。正式名称のまま1行に押し込むと折り返し位置が
 * 店舗ごとにばらつくため、全店共通で段を固定する。
 */
.c-store-list__name-brand {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--wk-ink-weak);
}

.c-store-list__name-store {
	display: block;
	margin-top: 2px;
}

/* 写真の左上に重ねる地域名（東京・大阪・広島。2026-08-24 指示） */
.c-store-list__region {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 5px 14px;
	background: rgb(10 8 6 / 78%);
	color: var(--wk-ink);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.c-store-list__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wk-bg-alt);
}

/*
 * 写真が未登録の店舗。枠だけ確保してグリッドの段を揃える。
 * ブロック要素のまま置く。flex にすると、住所が長い店舗でカードの中身が
 * 行の高さを超えたときに、この枠だけが押し潰される。
 */
.c-store-list__thumb--empty {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--wk-bg-alt);
}

.c-store-list__hours {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wk-ink-weak);
}

/* --- コンセプト --- */

.p-concept__tagline {
	margin: 0 0 16px;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	line-height: 1.7;
	font-weight: 700;
}

.p-concept__lead {
	margin: 0;
	max-width: 40em;
}

/* --- コース一覧 --- */

/*
 * コースは横並びのカードにする。写真を主役にして、価格と品数を添える。
 * 3コースなので3列に収まるが、増減しても崩れないよう auto-fit に任せる。
 */
.c-menu-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-menu-list__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 16px;
	background: var(--wk-bg-alt);
}

.c-menu-list__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
}

.c-menu-list__name {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

.c-menu-list__price {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wk-accent);
}

/* 「（税込）」。金額と同じ緋色だと数字が読みにくくなるので弱色・小さめに落とす */
.c-menu-list__tax {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wk-ink-weak);
}

.c-menu-list__count {
	margin-inline-start: 8px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wk-ink-weak);
}

/* キャッチコピー（品数入り）。名前・価格の直下に小さめで添える */
.c-menu-list__catch {
	margin: 10px 0 0;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	color: var(--wk-ink-weak);
}

.c-menu-list__desc {
	margin: 12px 0 0;
	max-width: 44em;
}

.c-menu-list__items {
	margin: 16px 0 0;
	padding-inline-start: 1.25em;
	font-size: 0.9375rem;
	color: var(--wk-ink-weak);
}

.c-menu-list__notes {
	margin: 16px 0 0;
}

.c-menu-list__note,
.c-menu-list__halal {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--wk-ink-weak);
}

/* 包みの中では包みが外側の余白を持つ。注記同士は詰めて1つの塊に見せる */
.c-menu-list__notes .c-menu-list__note {
	margin: 0;
}

.c-menu-list__note + .c-menu-list__note {
	margin-top: 6px;
}

.c-menu-list__halal {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
}

/* --- ハラル神戸牛の予約案内（2026-08-24 支給。コース一覧の下の横長ブロック） --- */

/* 見出しは英語固定なので欧文書体で組む */
.c-halal__heading {
	margin: 0;
	font-family: var(--wk-font-en);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wk-ink);
}

.c-halal__intro {
	margin: 8px 0 0;
}

/* 3分類（Combination set / Single Steak / SET MENU）を横に並べる */
.c-halal__groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px clamp(24px, 3vw, 48px);
	margin-top: 20px;
}

@media (max-width: 767px) {
	.c-halal__groups {
		grid-template-columns: 1fr;
	}
}

.c-halal__label {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wk-line);
	font-family: var(--wk-font-en);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wk-ink);
}

.c-halal__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-halal__list li {
	margin-top: 6px;
}

.c-halal__list strong {
	font-weight: 700;
	color: var(--wk-ink);
}

.c-halal__original {
	color: var(--wk-ink-weak);
}

/* --- 404・検索 --- */

.c-404-links {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.c-404-links li + li {
	margin-top: 8px;
}

.c-404-search,
.c-search-form {
	margin-top: 32px;
	max-width: 28em;
}

.c-404-search input[type="search"],
.c-search-form input[type="search"] {
	padding: 10px 12px;
	border: 1px solid var(--wk-line);
	background: var(--wk-bg-alt);
	color: var(--wk-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.c-404-search input[type="submit"],
.c-search-form input[type="submit"] {
	padding: 10px 20px;
	border: 1px solid var(--wk-ink);
	background: var(--wk-ink);
	color: var(--wk-bg);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	/* 生成りの面に暗い字。地と文字が入れ替わるので、そのままで成立する。 */
}

/* --- 全店横断のお知らせ --- */

.c-entry-card__store {
	display: inline-block;
	margin-inline-start: 12px;
	padding: 2px 8px;
	border: 1px solid var(--wk-line);
	font-size: 0.75rem;
	color: var(--wk-ink-weak);
}

/*
 * カードを縦のフレックスにして、予約ボタンを全カードで同じ高さ（下端）に揃える
 * （2026-08-23 指示）。グリッドが行の高さを揃えるので、margin-top: auto で
 * ボタンが下端まで下がり、内容量の差はボタンの上の余白が吸収する。
 */
.c-menu-list__item {
	display: flex;
	flex-direction: column;
	/*
	 * コースごとの囲い（2026-08-24 指示）。節の塗り（--wk-bg-alt）の上に
	 * 地色の面を敷いて1コース1枚のカードに見せる。
	 * subgrid でも padding は先頭・末尾の行の外側に足されるので行揃えは崩れない。
	 */
	border: 1px solid var(--wk-line);
	background: var(--wk-bg);
	padding: clamp(16px, 2vw, 24px);
}

/*
 * 説明文の行数がコースごとに違うため、品目リストの開始位置がずれる
 * （2026-08-23 指摘）。subgrid で6行（写真・見出し・説明・品目・注記・ボタン）を
 * 3カードで共有し、各行の高さを一番長いカードに合わせる。
 *
 * row-gap: 0 は必須。親（.c-menu-list）の行間 40px をカード内部の行にまで
 * 効かせないための打ち消しで、内部の間隔は各要素の margin が作る。
 * 縦に積まれたカード同士の間には親の 40px がそのまま残る。
 *
 * 行番号は明示する。要素が欠けるコース（写真なし等）が出ても、
 * 残りの要素が上の行に繰り上がって他カードとずれるのを防ぐ。
 * 対応していないブラウザでは上のフレックス（下端揃えのみ）に落ちる。
 */
@supports (grid-template-rows: subgrid) {
	.c-menu-list__item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 7;
		row-gap: 0;
	}

	.c-menu-list__image {
		grid-row: 1;
	}

	.c-menu-list__head {
		grid-row: 2;
	}

	.c-menu-list__catch {
		grid-row: 3;
	}

	.c-menu-list__desc {
		grid-row: 4;
	}

	.c-menu-list__items {
		grid-row: 5;
	}

	.c-menu-list__notes {
		grid-row: 6;
	}

	.c-menu-list__actions {
		grid-row: 7;
		align-self: end;
	}
}

/*
 * コース単位の予約ボタン。全カード共通の下端・中央に置く（2026-08-23 指示）。
 * 現行サイトと同じ3言語（日・英・中）を横一列に並べる（2026-08-24 指示）。
 * 3等分で幅を揃え、入りきらない幅では折り返す。
 * 表示中の言語だけ c-button--reserve（赤）。
 */
.c-menu-list__actions {
	margin: 20px 0 0;
	margin-top: auto;
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/*
 * 3つとも赤の枠線で囲み、カーソルを当てたときだけ赤く塗る（2026-08-24 指示）。
 * 塗りの作り（放射グラデーション・照り）は .c-button--reserve と同じ値。
 * 変えるときは両方を揃えること。
 */
.c-menu-list__reserve {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 6px;
	font-size: 0.8125rem;
	/*
	 * 折り返しは許す。カードに枠と余白を付けて内側が約390pxになり、
	 * 3つを1行に収めるには「Reservation（English）」だけ2行になる。
	 * nowrap のままだと行ごと折れて2＋1の段違いになる（実際になっていた）。
	 */
	line-height: 1.3;
	text-align: center;
	/*
	 * 塗りは WEB予約ボタンと同じボルドーの艶（2026-08-26 指示で常時塗りに変更。
	 * 以前は赤の枠線だけでホバー時に塗る方式だった）。
	 */
	border-color: var(--wk-bdx-edge);
	background-color: var(--wk-bdx-mid);
	background-image:
		radial-gradient(120% 85% at 50% 0%, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 55%),
		linear-gradient(
			to bottom,
			var(--wk-bdx-light) 0%,
			var(--wk-bdx-mid) 34%,
			var(--wk-bdx-deep) 100%
		);
	color: var(--wk-ink);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 28%),
		inset 0 -1px 0 rgb(0 0 0 / 32%),
		0 3px 12px rgb(0 0 0 / 40%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.c-menu-list__reserve:hover,
.c-menu-list__reserve:focus-visible {
	/* 照りを持ち上げて面全体を明るく。新しい色は足さない */
	filter: brightness(1.12);
	color: var(--wk-ink);
}

/* お問い合わせの準備中表示。押せないことがひと目で分かるよう沈める（2026-08-24 指示） */
.l-footer__action--disabled {
	opacity: 0.55;
	cursor: default;
}

/* --- Googleのクチコミ評点 --- */

/*
 * ヒーローの下端に重ねる。写真の明暗が読めないので、暗い面を敷いてから字を置く。
 * ヒーロー節は position が付いていないため、ここで基準を作る。
 */
.p-section--hero {
	position: relative;
}

/*
 * 面の不透明度を 94% にしてある（2026-08-22。以前は 72%）。
 *
 * 下はヒーローの写真で、明るさは店舗によってまるで違う。
 * 実測すると、口コミが乗る左下の明るさ（上位1%）は
 * 広島1号店 0.27 に対し、ひさご通り店 0.98・西新宿1号店 0.90。
 * 72% では明るい店で本文 2.70:1・補助文字 1.19:1 となり、ほぼ読めなかった。
 *
 * **下げないこと。** 補助文字（件数・時点）が 4.5:1 を保てる下限が 94% で、
 * ここでも最も明るい写真の上で 5.24:1 しかない。
 * 写真を透かせたいなら、文字色のほうを明るくしてから下げること。
 */
.c-rating {
	position: absolute;
	inset-block-end: clamp(16px, 3vw, 32px);
	inset-inline-start: min(var(--wk-gutter), var(--wk-gutter-max));
	/*
	 * 横長のカード（2026-08-23 指示）。
	 * 左に Google のロゴと点数、右に件数・時点とリンクを置く。
	 *
	 * 並べ替えは grid-template-areas で行い、HTMLの順は変えていない。
	 * 読み上げは「Google → 点数 → 件数 → リンク」の順のまま保たれる。
	 */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"logo  meta"
		"score link";
	column-gap: clamp(16px, 2.4vw, 32px);
	row-gap: 6px;
	align-items: center;
	padding: clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 32px);
	background: rgb(10 8 6 / 90%);
	border: 1px solid rgb(200 168 102 / 55%);
	color: var(--wk-ink);
	line-height: 1.4;
}

/*
 * Google のロゴ。**加工しないこと。**
 * 色の変更・単色化・縦横比の変更・回転はブランドガイドラインで禁じられている。
 * ここで指定するのは高さだけ。幅は auto にして比率を保つ。
 */
.c-rating__logo {
	grid-area: logo;
	display: block;
	width: auto;
	height: clamp(20px, 2.2vw, 28px);
	align-self: end;
	/*
	 * 星の位置に合わせて少し右へ寄せる（2026-08-23 指示）。
	 * 下の点数は星から始まるので、ロゴを左端に揃えると頭が食い違って見える。
	 */
	margin-inline-start: 0.6em;
}

/* 星と評点。カードの主役なので大きく出す。 */
.c-rating__score {
	grid-area: score;
	display: flex;
	align-items: center;
	gap: 0.2em;
	margin: 0;
	align-self: start;
}

.c-rating__star {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1;
	color: #d8bf86;
}

.c-rating__value {
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

/*
 * 件数と時点。
 *
 * 色は --wk-ink（生成りの白）。補助情報なので一段落としたいところだが、
 * 下は写真で、面の不透明度90%でも --wk-rating-weak では 3.88:1 にしかならない。
 * **弱い色に変えないこと。** 変えるなら面の不透明度も上げること。
 */
.c-rating__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.9em;
	/*
	 * 右側の2行を少し下げて、左の点数と重心を合わせる（2026-08-23 指示）。
	 * align-self: end のため margin では動かない。transform で下げる
	 * （レイアウトに影響せず、この行だけが動く）。
	 */
	margin: 0;
	transform: translateY(5px);
	align-self: end;
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	color: var(--wk-ink);
	white-space: nowrap;
}

/*
 * Google のページへ渡す導線。金の細線で下を締める。
 * 欧文の大文字＋字送りで、カードの締めとして扱う。
 */
.c-rating__link {
	grid-area: link;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	/*
	 * 上の「クチコミ◯件 ◯時点」の行の中央あたりに置く（2026-08-23 指示）。
	 * 左端で揃えると、上の行と幅が違うぶん左に寄って見える。
	 */
	justify-self: center;
	align-self: start;
	margin-block-start: 8px;
	padding-block-end: 4px;
	border-block-end: 1px solid rgb(200 168 102 / 55%);
	font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-decoration: none;
	color: #d8bf86;
	white-space: nowrap;
}

.c-rating__link:hover,
.c-rating__link:focus-visible {
	color: var(--wk-ink);
	border-block-end-color: var(--wk-ink);
}

.c-rating__arrow {
	line-height: 1;
}



/*
 * スマートフォンでは画面下に固定の行動バーが出るので、その上へ逃がす。
 * **この指定は .c-rating の定義より後ろに置くこと**（前に置くと打ち消される）。
 */
@media (max-width: 767px) {
	.c-rating {
		inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* ============================================================
   スマートフォン向けの調整（2026-08-23）

   実測で見つかった3点を直している。
   1. タップできる要素の高さが 44px 未満（お知らせの帯・リンク類）
   2. 補助文字が 10〜12px で、明朝の細い線と暗い地では読みにくい
   3. 縦が 11,950px あり、読み終えるまでが長い

   3 はコンセプトの全文（4,194px）が主因。文章そのものは本部管理なので
   ここでは詰められる余白と写真の高さだけを詰めている。
   さらに短くするなら、店舗ページでは要約だけ出して全文は
   /concept/ へ渡す形に戻す判断が要る（要相談）。
   ============================================================ */

@media (max-width: 767px) {
	/*
	 * 指で押す要素は 44px 角を確保する（Apple/Google の目安）。
	 * 小さいと隣を誤タップする。文字の大きさは変えず、余白で高さを作る。
	 */
	.p-news-bar__item,
	.p-news-bar__more,
	.c-more a,
	.l-footer__store-info a,
	.l-footer .c-nav--footer a,
	.l-footer__bottom a,
	.c-store-list__info a,
	.c-store-info a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	/* 字を小さくしても押せる高さは保つ */
	.c-header-button,
	.c-lang__link {
		min-block-size: 44px;
	}

	/* 補助文字の下限を 12px に引き上げる。明朝は細く、暗い地では特に読みにくい。 */
	.c-header-button,
	.c-lang__link,
	.c-rating__link {
		font-size: 0.75rem;
	}

	.c-header-button__note {
		font-size: 0.6875rem;
	}

	/*
	 * 節の間隔を詰める。広い画面の余白をそのまま持ち込むと、
	 * 小さい画面では「空白をスクロールする時間」になる。
	 */
	:root {
		--wk-section-gap: clamp(48px, 12vw, 64px);
	}

	.p-concept__block + .p-concept__block {
		margin-top: 40px;
	}

	/* 写真は縦を詰める。1枚が画面の半分を超えると、読む流れが切れる。 */
	.p-concept__media img,
	.p-concept__media:has( figure + figure ) img {
		aspect-ratio: 16 / 10;
	}

	.p-concept__text > * + * {
		margin-top: 1.3em;
	}

	.p-concept__text p {
		line-height: 1.75;
	}

	/* 写真集はマーキー（横流れ）なので縦には伸びない。1枚の幅だけ詰める。 */
	.c-gallery__item {
		inline-size: 220px;
	}
}

/* --- スマートフォンの表示調整（2026-08-24 実機確認で修正） --- */

@media (max-width: 767px) {
	/* ヒーロー写真の横位置。店舗マスタの images.hero_focus_x が入る（既定は中央） */
	.c-hero__image {
		object-position: var(--wk-hero-focus-x, 50%) 50%;
	}

	/* Googleの評価カードは左右中央に置く（2026-08-24 指示） */
	.c-rating {
		inset-inline-start: 50%;
		transform: translateX(-50%);
		inline-size: max-content;
		max-inline-size: calc(100% - 2 * var(--wk-gutter));
	}

	/*
	 * カードの左右の矢印は、本文ではなく写真の上に重ねる（2026-08-24 指示で復活）。
	 * 縦中央（50%）に置くと本文の文字を隠すため（実際に隠れていた）、
	 * 写真（3:2・カード上端から余白20pxの位置）の縦中央に合わせる。
	 * 27vw ≒ 写真の高さの半分（写真幅はほぼ画面幅から余白を引いた値のため）。
	 */
	.p-concept__arrow {
		inset-block-start: calc(27vw + 20px);
	}

	/*
	 * 支給コピーの改行（<br>）は解除して文章を流す。
	 * PCの行幅に合わせた改行位置のため、狭い画面では
	 * 「ら、」だけの行のような細切れになる（実際になっていた）。
	 */
	.p-concept__text p br {
		display: none;
	}

	/* 3言語の予約ボタンは縦に積む。横並びだと2つ＋1つの段違いになる */
	.c-menu-list__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * 店舗バナーは2列組みで1枚165pxしかなく、4:1のままだと高さ41pxで
	 * 写真がほぼ見えない（下の黒の被せに沈む。実際に沈んでいた）。
	 * 2:1 に切り替えて写真の見える高さを確保する。
	 */
	.c-store-banner__link {
		aspect-ratio: 2 / 1;
	}

	/*
	 * カードの 01〜05 はスマホではカードの上に置く（2026-08-25 指示）。
	 * 出力順（スライダー → ページャー）は変えず、表示順だけ入れ替える。
	 * PCは従来どおり下。
	 */
	.p-concept__body {
		display: flex;
		flex-direction: column;
	}

	.p-concept__pager {
		order: -1;
		margin: 0 0 clamp(12px, 2vw, 20px);
	}

	/* 店名はスマホでは2段（神戸牛 和牛の刀／◯◯店） */
	.c-store-banner__brand {
		display: block;
		margin-inline-end: 0;
		font-size: 0.625rem;
	}

	.c-store-banner__store-name {
		display: block;
	}

	/*
	 * 「上に戻る」は店舗サイトでも出す（2026-08-26 指示で復活）。
	 * 下の行動バーの上へ自動で退避する（body:has(.c-action-bar) の指定）ため、
	 * 以前問題になったバーとの重なりは起きない。
	 */

	/*
	 * ヒーロー下のセクションナビは2列×2段の面で出す。
	 * 横スクロールだと「Tasting Menu」以降が切れて、スクロールバーの線も
	 * 見えてしまっていた（実機確認）。4項目が全て見える形にする。
	 */
	.c-section-nav__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow-x: visible;
	}

	.c-section-nav__list > li + li {
		border-inline-start: none;
	}

	.c-section-nav__item {
		/* マスいっぱいに広げ、左右の枠線の高さを揃える（中身の行数が違っても崩れない） */
		display: flex;
		flex-direction: column;
		justify-content: center;
		block-size: 100%;
		inline-size: 100%;
		min-inline-size: 0;
		padding: 12px 8px;
		/* 「What is WAGYU KATANA?」が半分幅の枠に収まるよう折り返しを許す */
		white-space: normal;
		border-block-end: 1px solid var(--wk-line);
	}

	.c-section-nav__en {
		font-size: 1rem;
	}

	/*
	 * ブランドサイトのヘッダー固定はスマホでは解除する。
	 * ロゴ・メニュー・言語で3段に折り返して高さが400pxを超え、
	 * 固定のままだと画面の半分が常に塞がる（実際に塞がっていた）。
	 * ヒーローのあるページは店舗ページと同じ「重ねるだけ」（absolute）に戻し、
	 * それ以外は流れに置く。PCでは従来どおり固定。
	 */
	.l-header--fixed {
		position: static;
		/* 黒の被せは敷かない（2026-08-25 指示）。地の色に直接載せる */
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.p-has-hero .l-header.l-header--fixed {
		position: absolute;
		/*
		 * ヒーローの上でも被せなし（2026-08-25 指示）。
		 * 文字の判読は text-shadow（.p-has-hero .l-header 由来）が支える。
		 */
		background-image: none;
	}

	/*
	 * ブランドサイトのヘッダーは中央揃えの縦積みにする（2026-08-25 指示）。
	 * ロゴが左・メニューと言語が右で、左側に大きな空白ができて
	 * 釣り合いが悪かった。ロゴ → メニュー → 言語 を中央にそろえる。
	 * 店舗サイト（ロゴ＋店名が現在地を示す）は従来どおり左寄せ。
	 */
	.l-header--fixed .l-header__inner {
		justify-content: center;
	}

	.l-header--fixed .l-header__actions {
		margin-inline-start: 0;
		inline-size: 100%;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	/*
	 * ロゴは上の中央に大きめに（2026-08-26 指示）。
	 * ハンバーガーは右上（absolute）、言語チップはこの行の下の右端（流れの中）。
	 */
	.l-header--fixed .l-header__branding {
		inline-size: 100%;
		display: flex;
		justify-content: center;
	}

	.l-header--fixed .c-brand__logo {
		inline-size: 96px;
		block-size: auto;
	}

	/*
	 * メニューはハンバーガーに畳む（2026-08-25 指示）。JSは使わず、
	 * チェックボックスのON/OFFをCSSで拾う（inc/i18n.php のコメント参照）。
	 * ボタンはロゴと同じ高さの右端に置く。
	 */
	.l-header--fixed {
		position: relative;
	}

	.l-header--fixed .c-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		/*
		 * スクロールしても右上に固定する（2026-08-26 合意）。
		 * ブランドのスマホには他の常設導線が無く、ページ下部からも
		 * メニューと言語に1タップで届くようにするため。
		 */
		position: fixed;
		inset-block-start: 14px;
		inset-inline-end: min(var(--wk-gutter), var(--wk-gutter-max));
		z-index: 30;
		inline-size: 44px;
		block-size: 44px;
		/* 枠は付けない（2026-08-25 指示）。明るい写真の上でも消えないよう、
		   右下のボルドーの「↑」と対になる半透明の黒い円を敷く */
		border: 0;
		border-radius: 50%;
		background: rgb(10 8 6 / 55%);
		cursor: pointer;
		filter: drop-shadow(0 1px 3px rgb(0 0 0 / 65%));
	}

	/* 三本線。チェック時は×に組み替わる */
	.c-nav-toggle__bars {
		position: relative;
		inline-size: 20px;
		block-size: 2px;
		background: var(--wk-ink);
		transition: transform 0.2s, background-color 0.2s;
	}

	.c-nav-toggle__bars::before,
	.c-nav-toggle__bars::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		block-size: 2px;
		background: var(--wk-ink);
		transition: transform 0.2s, inset-block-start 0.2s, opacity 0.2s;
	}

	.c-nav-toggle__bars::before {
		inset-block-start: -7px;
	}

	.c-nav-toggle__bars::after {
		inset-block-start: 7px;
	}

	.c-nav-toggle-check:checked + .c-nav-toggle .c-nav-toggle__bars {
		transform: rotate(45deg);
	}

	.c-nav-toggle-check:checked + .c-nav-toggle .c-nav-toggle__bars::before {
		inset-block-start: 0;
		transform: rotate(90deg);
	}

	.c-nav-toggle-check:checked + .c-nav-toggle .c-nav-toggle__bars::after {
		opacity: 0;
	}

	/* メニュー本体は畳んでおき、チェックで開く */
	.l-header--fixed .c-header-nav {
		display: none;
		/*
		 * ボタンが固定になったので、開いたパネルも画面上部に固定で出す。
		 * ページのどこで開いても同じ位置に現れる。
		 * 上端はボタンの下（14px + 44px + 余白）から。
		 * 面を敷かないと項目が映像・写真に直接載って読めない。
		 */
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 29;
		padding-block-start: 70px;
		/* 完全な不透明。半透明だと下の明るい文字（価格の金字など）が透けて読みにくい */
		background: rgb(10 8 6);
	}

	.l-header--fixed .c-nav-toggle-check:checked ~ .c-header-nav {
		display: block;
	}

	/* 開いたときは1項目1行。英字と和文を横に並べてコンパクトに */
	.l-header--fixed .c-header-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.l-header--fixed .c-header-nav__item {
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		gap: 10px;
		padding: 12px 8px;
		border-block-start: 1px solid var(--wk-line);
	}

	.l-header--fixed .c-header-nav__list {
		justify-content: center;
	}

	/*
	 * 言語ボタンは左上に小さく縦積み（2026-08-26 指示）。
	 * 右上のハンバーガーと対に置く。被せの無いヘッダーでも読めるよう
	 * 濃い面のチップにし、現在の言語だけ金の縁で示す。
	 */
	.l-header--fixed .c-lang {
		position: absolute;
		inset-block-start: 14px;
		inset-inline-start: min(var(--wk-gutter), var(--wk-gutter-max));
	}

	.l-header--fixed .c-lang__list {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}

	.l-header--fixed .c-lang__link {
		min-inline-size: 64px;
		min-block-size: 32px;
		padding: 2px 8px;
		font-size: 0.625rem;
		background: rgb(10 8 6 / 82%);
		border-color: rgb(255 255 255 / 28%);
	}

	.l-header--fixed .c-lang__link--current {
		border-color: rgb(200 168 102 / 85%);
		background: rgb(10 8 6 / 92%);
	}

	/*
	 * ヘッダーメニューは1項目1行に収める。「Tasting Menu」が2行に折れて
	 * 隣と段がずれていた（実際にずれていた）。字を一段小さくして折り返しを禁止。
	 */
	.c-header-nav__list {
		gap: 0 2px;
	}

	.c-header-nav__item {
		padding: 4px 6px;
	}

	.c-header-nav__en,
	.c-header-nav__ja {
		white-space: nowrap;
	}

	.c-header-nav__en {
		font-size: 0.8125rem;
	}

	.c-header-nav__ja {
		font-size: 0.5625rem;
	}
}

/* --- 本文中の横長の表 --- */

/*
 * 会社概要の店舗一覧など、列が多い表（2026-08-28 のAI検索診断で追加）。
 *
 * 画面幅に押し込むと列が潰れる。スマホ（375px）では店舗名の列が51pxになり、
 * 1行の高さが261pxまで膨らんだ（実測）。最低幅を持たせて、狭い画面では
 * 横に送れるようにする。包んでいる figure.wp-block-table は WordPress が
 * overflow-x: auto を当てているので、はみ出さずにその中で収まる。
 *
 * 2列の表（会社概要の本体など）には掛けない。潰れないうえ、
 * 最低幅を持たせると不要な横スクロールが出るため、専用のクラスで絞る。
 */
.wk-table--wide table {
	min-width: 30rem;
}

.wk-table--wide th,
.wk-table--wide td {
	white-space: nowrap;
}

/* 所在地だけは長いので折り返す。ここを nowrap のままにすると横に伸びすぎる。 */
.wk-table--wide td:nth-child(2) {
	white-space: normal;
	min-width: 14rem;
}