@charset "utf-8";
/* ゆうなぎ倉敷本店 — テーマ側のCSS
   現行サイトのCSS（/assets/css/）を先に読み、ここで足りないぶんだけ足す。
   現行の見た目を壊さないよう、body や a のような広いセレクタは触らない。 */

.yn-skip { position: absolute; left: -9999px; }
.yn-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 100; }

/* ------------------------------------------------------------------
 * 言語の切り替え
 *
 * 本文の中に置いたとき（[yn_switcher]）は全長で出す。
 * ヘッダーは幅の事情が PC と スマホ・タブレットで違うので、それぞれ別に組む。
 * ------------------------------------------------------------------ */
.yn-switcher { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; font-size: 13px; }
.yn-switcher__item.is-current { font-weight: bold; }
.yn-switcher__short { display: none; }	/* 短縮（JA/EN/繁）はPCヘッダーでだけ使う */

/* --- PC幅（1200px以上） -------------------------------------------- */
@media screen and (min-width: 1200px) {

	/* 【隙間の修正 2026-08-28】
	   現行CSSは PC幅で #sandwich_menu を消していない（menu-pc.css にルールが無い）。
	   中の「メニュー」の文字が居座るぶん #header が高さを持ち、
	   position:fixed の #menu-pc に隠れきらずに、ヘッダーとアイキャッチの間に
	   黒い帯（body の背景）が見えていた。
	   #main-content の margin-top:3vw は fixed ヘッダーぶんの余白なので、
	   #header 自身は高さ0であるのが正しい。 */
	#header #sandwich_menu { display: none; }
	.yn-lang-sf { display: none; }

	/* 【2026-08-28 門田さん要望】ナビを右側に寄せ、文字を折り返さない形にする。
	   現行の nav.globalMenuPc li は width:calc(100%/12) の固定幅で、
	   「団体様プラン」「こだわりの米」が枠に入らず2行に折れていた。
	   枠を等分にするのをやめ、**文字数に応じた幅**にして nowrap で折り返しを止める。
	   等分をやめたので、項目を足しても割り算を直す必要がなくなる。 */
	#menu-pc nav.globalMenuPc { text-align: right; }
	#menu-pc nav.globalMenuPc li {
		width: auto;
		padding: 0 0.5vw;
		vertical-align: middle;
	}
	#menu-pc nav.globalMenuPc li p {
		font-size: 0.92vw;
		white-space: nowrap;
	}

	/* 言語の切り替え。現行でクレジットカードが並んでいた枠を使う。
	   旗のアイコンは使わない（言語と国は一致せず、繁體中文にどの旗を当てても角が立つ）。 */
	#menu-pc .yn-lang-pc {
		width: auto;
		padding: 0 0 0 1vw;
		vertical-align: middle;
	}
	#menu-pc .yn-lang-pc .yn-switcher { justify-content: flex-end; gap: 5px; }
	#menu-pc .yn-lang-pc .yn-switcher__item { width: auto; display: block; }
	#menu-pc .yn-lang-pc .yn-switcher__full { display: none; }
	#menu-pc .yn-lang-pc .yn-switcher__short {
		display: block;
		min-width: 2.4em;
		padding: 2px 0;
		border: 1px solid #1e2537;
		border-radius: 3px;
		font-size: 0.85vw;
		line-height: 1.5;
		text-align: center;
		color: #1e2537;
	}
	#menu-pc .yn-lang-pc a:hover .yn-switcher__short,
	#menu-pc .yn-lang-pc .is-current .yn-switcher__short { background: #1e2537; color: #fff; }
}

/* --- スマホ・タブレット幅（1199px以下） ----------------------------- */
@media screen and (min-width: 0px) and (max-width: 1199px) {

	.yn-lang-pc { display: none; }

	/* 【2026-08-28 作り直し】
	   現行のヘッダーは float（ロゴ）・relative のずらし（サンドイッチメニュー）・
	   absolute（メニュー文字と☰）が混ざっていて、**中身の位置と高さが一致しない**。
	   そのため「メニューの位置が高い／アイキャッチの上が隠れる／ヘッダーの上に隙間」が
	   代わるがわる出ていた（vw を px にしても、ずれの原因は残るので直らない）。
	   タブレット・スマホ幅だけ flex に置き換え、**高さを中身から決める**形にする。
	   px も vw も決め打ちしないので、画面幅が変わってもずれない。
	   現行CSSのファイルは触らず、ここで上書きする（戻すときはこのブロックを消すだけ）。 */
	#header {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: flex-start;
		background: #fff;
	}
	#header::before,
	#header::after { content: none; }

	/* 1段目・左: ロゴ2枚（縦は中央で揃える）

	   【2026-08-28 修正】ここを flex:1 1 auto にしていたら、
	   幅の元がロゴ画像の「本来の大きさ」になり、ロゴだけで1行を埋めてしまって
	   サンドイッチメニューが2段目へ、言語の切り替えが3段目へ押し出されていた。
	   1段目の取り分を割合で決め打ちして、折り返す場所を固定する（現行と同じ考え方）。 */
	ul.top {
		float: none;
		width: auto;
		flex: 0 0 68%;
		min-width: 0;
		display: flex;
		align-items: center;
		padding: 2vw 0 2vw 3%;
	}
	ul.top li.kuraka-logo { float: none; width: 30%; margin: 0; }
	ul.top li.yuunagi-logo { float: none; width: 50%; margin: 0 0 0 8%; }

	/* 1段目・右: 「メニュー」＋ハンバーガー。ロゴと同じ行の縦中央に置く */
	#sandwich_menu {
		position: relative;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
		flex: 0 0 32%;		/* ul.top の 68% と合わせて 100%。1段目はこの2つで確定 */
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 4% 0 0;
	}
	#nav_toggle-title { position: static; width: auto; height: auto; }
	#nav_toggle-title p { margin: 0 2.5vw 0 0; padding: 0; font-size: 3.4vw; }
	#nav_toggle {
		position: relative;
		top: 0;
		left: 0;
		width: 8vw;
		height: 7vw;
	}
	#nav_toggle div { position: relative; height: 100%; }
	#nav_toggle span { right: 0; }

	/* 2段目: 言語の切り替え（門田さん要望 2026-08-28。中央揃え） */
	.yn-lang-sf {
		flex: 0 0 100%;		/* 必ず2段目に落ちる */
		padding: 0 4% 2vw;
		background: #fff;	/* ヘッダーの背景が何かの拍子に効かなくても読めるようにしておく */
	}
	.yn-lang-sf .yn-switcher { justify-content: center; gap: 6vw; font-size: 3.2vw; }
	.yn-lang-sf .yn-switcher__item.is-current { text-decoration: underline; }

	/* ヘッダーが実際の高さを持つので、その代わりだった余白（14vw）は要らない。
	   5px だけ残すのは暖簾のため: .eye-catch-img は position:absolute で
	   style-top-tb.css が top:0、さらに本文先頭のインライン<style>が top:-3px を当てており、
	   #eye-catch の上へ数pxはみ出す。0 だとその分がヘッダーに隠れて上が切れる
	   （2026-08-28 門田さん指摘・指定値）。 */
	#main-content { margin-top: 5px; }

	/* メニューはヘッダーの下端から開く（現行の top:14vw は段数が変わると合わなくなる） */
	#menu-sf { top: 100%; }
}

/* フッターに移した「使えるカード」（2026-08-28。PCヘッダーの枠を言語切り替えに使ったため） */
.yn-footer-credit { padding: 1.5vw 0 0; }
.yn-footer-credit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.yn-footer-credit li { line-height: 0; }
.yn-footer-credit img { max-width: 46px; height: auto; }

/* 料理の一覧 [yn_menu] */
.yn-menu-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
/* grid にする親は疑似要素を必ず打ち消す（共通の教訓29・33。Bootstrap3 の .row も同じ） */
.yn-menu-list::before,
.yn-menu-list::after { display: none; content: none; }
.yn-menu-item { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff; }
.yn-menu-item__photo img { display: block; width: 100%; height: auto; }
.yn-menu-item__body { padding: 12px 16px; }
.yn-menu-item__name { font-size: 1.05rem; margin: 0 0 2px; }
.yn-menu-item__ja { margin: 0 0 2px; font-size: .95rem; }
.yn-menu-item__romaji { margin: 0 0 6px; font-size: .9rem; color: #666; }
.yn-menu-item__romaji-label { font-size: .75rem; color: #999; }
.yn-menu-item__desc { margin: 0 0 6px; font-size: .9rem; }
.yn-menu-item__price { margin: 0; font-weight: bold; }

/* 確認用ページのような「素のHTMLを置くページ」だけ、読みやすい幅に収める。
   現行サイトのCSSで組まれたページ（トップ・ランチ等）には当てない。
   ここを全ページに当てて #eye-catch{width:100%} を960pxに狭めた事故あり（2026-08-27）。 */
.yn-page__body--plain { max-width: 960px; margin: 0 auto; padding: 16px; }

@media (max-width: 640px) {
	.yn-menu-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * 新着情報（トップ）の回り込みの後始末
 *
 * 現行サイトは Bootstrap3 の col-* を float で並べているが、
 * 親の .news-contents に clearfix が無い。**記事が6件あって1行がぴったり埋まる**あいだは
 * 目立たないが、件数が足りないと親の高さが0になり、次の節（#center-nav）と重なる。
 * 記事の移行前・移行後で件数は変わるので、件数に依存しない形に直す。
 * （現行CSSのファイルは触らず、テーマ側で後から足す。現行CSSは「現行の正」のまま残す）
 * ------------------------------------------------------------------ */
.news-contents::after {
	content: "";
	display: table;
	clear: both;
}
.news-contents .news-btn {
	clear: both;
}

/* ------------------------------------------------------------------
 * バナーの題名（2026-08-28）
 *
 * 画像に焼き込まれた文字は**将来削る方針**（門田さん 2026-08-28）なので、
 * 題名は画像の下に文字として出す。小さく控えめに置き、画像の邪魔をしない。
 * 文字にしておくと、読み上げソフトと検索エンジンが読めて、多言語も管理画面から直せる。
 * ------------------------------------------------------------------ */
.bento2 .yn-banner-title {
	margin: 0.4em 0 0;
	padding: 0 0.5em;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	color: #e8e2d6;
}
@media screen and (min-width: 0px) and (max-width: 1199px) {
	.bento2 .yn-banner-title { font-size: 3vw; }
}

/* ------------------------------------------------------------------
 * 「おすすめ」の岡山名物の枠を、他の枠と同じ横並びにする（2026-08-28）
 *
 * 現行CSSは `.osusume-tako ul li, .osusume-yasai ul li` にだけ
 * `display:inline-block; width:31%` を当てていた。岡山名物は
 * **食材名＋料理の表組み（1列）**だったので横並びが要らなかったため。
 * 商品名だけを並べる形に変えた（門田さん決定）ので、同じ指定をこちらにも当てる。
 * 幅の値は現行CSSに合わせる（PC=31% / タブレット以下=48%）。
 * ------------------------------------------------------------------ */
.osusume-okayama ul li {
	display: inline-block;
	width: 31%;
	margin-left: 1%;
}
@media screen and (min-width: 0px) and (max-width: 1199px) {
	.osusume-okayama ul li { width: 48%; }
}

/* ------------------------------------------------------------------
 * 料理ページ（昼・夜・会席・飲み物）の多言語での見え方
 * 2026-08-29 追加。現行CSSは日本語しか想定していないので、その差だけを足す。
 * ------------------------------------------------------------------ */

/* 「お品書」は縦書き（writing-mode: vertical-rl）。
   英語・繁體中文で縦書きにすると読めないので、横書きに戻す。 */
html[lang="en"] .center-menu,
html[lang="zh-Hant"] .center-menu {
	writing-mode: horizontal-tb;
	height: auto;
}
html[lang="en"] .center-menu ul li,
html[lang="zh-Hant"] .center-menu ul li {
	border-left: 0;
	border-bottom: 1px solid #fff;
	padding: 0.3vw 1vw;
}

/* 日本語以外のページでは、品名の下に「日本語名 → ローマ字」の2行が入る。
   指差し注文のための行なので、詰めて出す（h4 は現行CSSで 1vw）。 */
.syousai-title h4[lang="ja"] {
	margin-top: 0.3vw;
}

/* ------------------------------------------------------------------
 * フッターの上に黒い帯が出るのを止める（2026-08-29）
 *
 * 現行サイトは <footer> が <main> の中にあったが、新サイトは main の外に置いている
 * （main/article/section の子孫にある footer は contentinfo ランドマークにならないため）。
 * そのため、本文の最後の要素（例: .chuui の margin: 2vw）の下マージンが
 * #main-content の外へ**相殺で漏れて**、body の黒（reset.css の body{background:#000}）が
 * 帯になって見えていた。→ [[legacy-css-geometry]]
 *
 * padding を1pxだけ持たせると親子のマージン相殺が起きなくなり、余白が中に収まる。
 * ------------------------------------------------------------------ */
#main-content {
	padding-bottom: 1px;
}

/* ------------------------------------------------------------------
 * 「お品書」の縦組みが、スマホで箱からはみ出すのを防ぐ（2026-08-29）
 *
 * 現行CSS（style-lunch-tb.css）は height:45vw / font-size:3vw の決め打ち。
 * 品名が15文字を超えると縦に入りきらず**次の列へ折り返し**、列が増えて横にあふれる。
 * 現行サイトは目次の品名が短かった（例「石垣牛和風ハンバーグ定食」）ので起きていなかった。
 * 品名は管理画面で変わるものなので、**文字数に依存しない寸法**に直す。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
	.center-menu {
		width: 88vw;
		height: auto;          /* 縦組みでは「高さ＝行の長さ」。自動にして折り返しを止める */
		min-height: 45vw;
		padding: 2vw;
	}
	.center-menu ul { padding: 0.5vw; }
	.center-menu ul li { padding: 0 0.6vw 0.8vw; }
}

/* ------------------------------------------------------------------
 * 料理ページの行間（2026-08-29 門田さん指摘）
 *
 * 現行CSSは行間を `line-height: 2vw` のような**固定値**で持っている。
 * スマホでは文字が 3.5vw まで大きくなるのに行間が 2vw のままなので、
 * 「ランチセットメニュー」と「Lunch Set Menu」が重なっていた。
 * → **単位なしの倍率**（文字サイズに追従する）に直す。数値は現行のPC表示に近い比率にした。
 *
 * ここで上書きしているのは行間と、行同士のわずかな間だけ。
 * 文字サイズ・色・書体は現行CSSのまま。
 * ------------------------------------------------------------------ */

/* 分類の見出し（ランチセットメニュー / Lunch Set Menu） */
.menu-title h2,
.menu-title2 h2,
.lunch-menu-syousai2 h2.title,
.dinner-menu-syousai2 h2.title,
.drink-menu-syousai h2.title {
	line-height: 1.45;
}
.menu-title h2 span,
.menu-title2 h2 span,
.lunch-menu-syousai2 h2.title span,
.dinner-menu-syousai2 h2.title span,
.drink-menu-syousai h2.title span {
	line-height: 1.4;
	display: inline-block;
}

/* 品名・ローマ字・価格が詰まって見えるので、行の間を空ける */
.syousai-title h3,
.syousai-title2 h3 {
	line-height: 1.4;
}
.syousai-title h4,
.syousai-title2 h4 {
	line-height: 1.5;
	margin-top: 0.35em;
}
.syousai-title h2,
.syousai-title2 h2 {
	line-height: 1.5;
	margin-top: 0.3em;
}

/* 料理の説明 */
.syousai-coment p,
.syousai-coment2 p,
.syousai-kids-coment p {
	line-height: 1.9;
}

/* ページ上部の案内と、飲み物の箱、注意書き */
.lunch-menu-kaisetsu h3,
.lunch-menu-kaisetsu h4 {
	line-height: 1.6;
}
.shingle-price h1,
.shingle-price h5,
.shingle-price p,
.shingle-price h3.nomi {
	line-height: 1.7;
}
.chuui h2 {
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * 画像の縦伸び対策
 * reset.css の img{width:100%} だけが効いていて height の指定が無いため、
 * WordPress が出力する <img width="980" height="1400"> の height 属性が
 * そのまま使われ、幅の狭い画面で縦に引き伸ばされていた。
 * （現行サイトの手書き <img> には width/height 属性が無いので起きなかった）
 * 2026-08-29 門田さん指摘（お飲み物ページ・スマホ）
 * ------------------------------------------------------------------ */
img {
	height: auto;
}
.drink-img img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* ------------------------------------------------------------------
 * こだわりの米ページの行間
 * style-rice.css は line-height を vw の固定値で持っており（1.5vw の文字に
 * 1.8vw ＝ 1.2倍）、英語・繁體中文だと行が詰まって読みにくい。
 * 倍率で指定し直す（昼の料理ページと同じ直し方）。2026-08-29
 * ------------------------------------------------------------------ */
.rice-coment h3 {
	line-height: 1.4;
	margin-bottom: 0.4em;
}
.rice-coment p {
	line-height: 1.9;
	margin-bottom: 0.6em;
}
.rice-coment p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * 団体様プランの「お品書」がスマホで左に大きく空く（2026-08-29 門田さん指摘）
 *
 * 原因は2つ。どちらも現行CSSをそのまま移したことによる。
 * ① style-groupplan-tb.css の `.center-menu ul { margin: 0 0 0 80px }`。
 *    縦組み（writing-mode: vertical-rl）では **margin-left が「次の列との間」**になる。
 *    リストが2つあるので **80px × 2 ＝ 160px** が箱の中で空く。
 *    スマホの箱幅は 88vw（約380px）しかないので、その4割が空白になっていた。
 * ② 箱の幅が 88vw の決め打ち。昼のお品書は12品あって埋まるが、
 *    団体様は**列が6本しかない**ので埋まらない。
 *
 * → 幅は中身に合わせ（fit-content）、リストの間隔は px ではなく vw にする。
 *    このページだけに効かせるため body の `yn-page-groupplan` で絞る。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1199px) {
	.yn-page-groupplan .center-menu {
		width: fit-content;
		max-width: 92vw;
		padding: 3vw 4vw;
	}
	.yn-page-groupplan .center-menu ul {
		margin: 0 0 0 3vw;
		padding: 0;
	}
	.yn-page-groupplan .center-menu ul:last-of-type {
		margin-left: 0;
	}
	.yn-page-groupplan .center-menu ul li {
		padding: 0 1.6vw 1vw;
	}
	.yn-page-groupplan .center-menu a p {
		font-size: 3.6vw;
	}
	.yn-page-groupplan .center-menu h2 {
		font-size: 4vw;
	}
}

/* ------------------------------------------------------------------
 * ヘッダーのメニューの文字を黒にする（2026-08-31 門田さん指示）
 *
 * 現行サイトは menu-pc.css の `nav.globalMenuPc li { color:#1e2537 }`（濃紺）。
 * 門田さんの画面では**緑がかって見える**とのこと。スクリーンショットの画素を測ったところ
 * 確かに #1E2537（R30 G37 B55）で、青が強いが緑成分も持つ色だった。
 * **現行サイトから意図して変える箇所**なので、戻すときはこのブロックごと消せばよい。
 *
 * PCのナビとスマホのドロワーの両方を黒にする（片方だけ直すと、画面幅で色が変わってしまう）。
 * hover（menu-pc.css の #d40000）と、言語バッジの現在地（白抜き）はそのまま。
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1200px) {
	#menu-pc nav.globalMenuPc li,
	#menu-pc nav.globalMenuPc li p { color: #000; }
}
@media screen and (max-width: 1199px) {
	#menu-sf li a p { color: #000; }
}

/* 読み上げと検索にだけ効かせる文字（画面には出さない）。
   トップページの h1 で使う。**display:none や visibility:hidden は使えない**
   （読み上げソフトからも消えてしまうため）。1px に潰して画面外に置くのが定石。 */
.yn-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * こだわりの米ページ ── 最初の写真を右に回り込ませる（2026-08-31 門田さん要望）
 *
 * 【要望】「絹（きぬ）…」の段落から横いっぱいにしたい。
 *         右に写真が無いぶんの余白がもったいないので、写真の下も文字で埋めたい。
 *
 * 【なぜ float か】現行の `#rice-contents` は flex で、子を左右50%ずつ並べている。
 * 文章の塊を2つに割って片方だけ100%にする手もあるが、**上の塊が写真より短くなり
 * 左側に大きな空白ができる**。写真を float にすれば、1段落目は写真の横に、
 * 続きは写真の下へ**自然に回り込む**ので空白が出ない。
 * flex の子は float を無視するので、写真と文章を1つの子（.rice-intro）にまとめ、
 * その中で float させている。
 *
 * 【スマホ】現行は「文章 → 写真」の順で出ている。float をやめるだけだと
 * HTMLの並び（写真が先）どおり写真が上に来てしまうので、
 * flex の order で**元の見え方（文章が先）に戻している**。
 * ------------------------------------------------------------------ */
.yn-page-rice .rice-intro { width: 100%; }

@media screen and (min-width: 1200px) {
	.yn-page-rice .rice-intro::after { content: ""; display: block; clear: both; }
	.yn-page-rice .rice-intro .rice-intro__img { float: right; width: 50%; padding: 5px; }
	.yn-page-rice .rice-intro .rice-intro__text { width: 100%; padding: 5px; }
}

@media screen and (max-width: 1199px) {
	.yn-page-rice .rice-intro { display: flex; flex-direction: column; }
	.yn-page-rice .rice-intro .rice-intro__text { order: 1; }
	.yn-page-rice .rice-intro .rice-intro__img { order: 2; }
}