/* =============================================================================
i18n.css — 日本語以外の言語向けの上書き（utilities.css の後・最後尾）
日本語ページでも読み込む。ブラウザの翻訳機能で訳されたとき、
assets/js/browser-translate.js が body に jisaku-lang-nonjp 等を付けてここを効かせる。
デザインは日本語の縦組み前提のため、縦書き（writing-mode:vertical-rl）の
見出し・キャプションを横組みに戻し、和文用の広い字送りを欧文向けに詰める。
クラス構造・配色・余白の設計そのものは触らない。
掛かり先は body.jisaku-lang-nonjp（inc/assets.php で付与）。
※ 縦書き指定の棚卸しは assets/css/**.css の writing-mode:vertical-rl を検索。
単独の漢字を意匠として立てているもの（.o-card__kanji / .op-hero__kanji）は
縦のまま残す。
========================================================================== */
/* ---- 縦書き → 横書き（共通 chrome / トップ） -------------------------- */
.jisaku-lang-nonjp .menu-modal__photo-caption,
.jisaku-lang-nonjp .vert,
.jisaku-lang-nonjp .hero__sub,
.jisaku-lang-nonjp .hero__title,
.jisaku-lang-nonjp .hero__lead,
.jisaku-lang-nonjp .loop__kicker,
.jisaku-lang-nonjp .loop__message-heading,
.jisaku-lang-nonjp .loop__sign,
.jisaku-lang-nonjp .loop__card-jp,
.jisaku-lang-nonjp .o-card__head,
.jisaku-lang-nonjp .o-card__mini,
.jisaku-lang-nonjp .dish .sig-intro__copy,
.jisaku-lang-nonjp .home-garden__top-heading-main,
.jisaku-lang-nonjp .hospi-caption,
.jisaku-lang-nonjp .hospitality .hospi-item-2 .hospi-caption {
writing-mode: horizontal-tb;
}
/* ---- 縦書き → 横書き（下層ページ） ------------------------------------ */
.jisaku-lang-nonjp .pla-hero__title,
.jisaku-lang-nonjp .pla-hero__lead,
.jisaku-lang-nonjp .pla-hero__crumb .cur,
.jisaku-lang-nonjp .pla-intro,
.jisaku-lang-nonjp .pla-intro .pla-intro__label,
.jisaku-lang-nonjp .fm-trees-label,
.jisaku-lang-nonjp .fm-corridor-label,
.jisaku-lang-nonjp .dish-vline,
.jisaku-lang-nonjp .op-hero__lead,
.jisaku-lang-nonjp .lp-pattern-b .lp-prologue .sig-intro__title,
.jisaku-lang-nonjp .lp-pattern-b .lp-prologue .sig-intro__copy {
writing-mode: horizontal-tb;
}
/* ---- 和文の字送り（.2〜.4em）を欧文向けに詰める ----------------------- */
.jisaku-lang-nonjp .hero__title { letter-spacing: .06em; }
.jisaku-lang-nonjp .hero__sub { letter-spacing: .2em; }
.jisaku-lang-nonjp .hero__lead { letter-spacing: .04em; line-height: 1.9; }
.jisaku-lang-nonjp .loop__message-heading { letter-spacing: .03em; line-height: 1.5; }
.jisaku-lang-nonjp .loop__card-jp { letter-spacing: .03em; line-height: 1.35; }
.jisaku-lang-nonjp .home-garden__top-heading-main { letter-spacing: .03em; }
.jisaku-lang-nonjp .hospi-caption .jp { letter-spacing: .06em; }
.jisaku-lang-nonjp .o-card__lead,
.jisaku-lang-nonjp .o-card__jp,
.jisaku-lang-nonjp .o-card__mini { letter-spacing: .06em; }
.jisaku-lang-nonjp .menu-modal__jp,
.jisaku-lang-nonjp .menu-modal__photo-caption { letter-spacing: .1em; }
.jisaku-lang-nonjp .wedding__title { letter-spacing: .06em; }
.jisaku-lang-nonjp .dish__title,
.jisaku-lang-nonjp .sig-intro__title,
.jisaku-lang-nonjp .sec-title h2,
.jisaku-lang-nonjp .occasions__title h2 { letter-spacing: .03em; }
/* ---- 縦組み前提だったレイアウトの組み直し ----------------------------- */
/* hero: 縦書きの3カラム（sub / lead / title）を横組みでは縦積みにする。
訳文（とくにブラウザの翻訳機能の訳）は自前の英文より長いので、
- 幅は 560px まで広げて折り返しを減らす（以前の min(46ch,52vw) はスマホで 195px しかなく、
見出しが1語ずつ折れて HERO の下端を突き抜けていた）
- 見出しの級数は画面幅で縮める（home.css が 32px を !important で固定しているので同じ強さで上書き）
- 上はヘッダー、下は hero__foot（95周年リンク・お知らせ）の分だけ空けて、その間で上下中央 */
.jisaku-lang-nonjp .hero__content {
padding-top: 96px;
padding-bottom: 190px;
}
.jisaku-lang-nonjp .hero__copy {
flex-direction: column;
align-items: flex-start !important;
text-align: left;
gap: 14px;
max-width: min(560px, 48vw);
}
.jisaku-lang-nonjp .hero__title { font-size: clamp(24px, 2.3vw, 32px) !important; }
.jisaku-lang-nonjp .hero__lead { max-height: none; }
/* スマホ: 画面幅いっぱいに組む（ヘッダーと hero__foot の間で上下中央のまま） */
@media (max-width: 767px) {
.jisaku-lang-nonjp .hero__content {
align-items: flex-start;
padding-top: 88px;
padding-bottom: 200px;
}
.jisaku-lang-nonjp .hero__copy { max-width: none; width: 100%; gap: 12px; }
.jisaku-lang-nonjp .hero__title { font-size: 24px !important; line-height: 1.35; letter-spacing: .04em; }
.jisaku-lang-nonjp .hero__lead { font-size: 12px; line-height: 1.8; letter-spacing: .02em; }
}
/* prologue のメッセージ: 縦書き時は row-reverse で右から流していた */
.jisaku-lang-nonjp .loop__message {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
/* ループカードの見出し: 縦帯だったものが横組みになるので幅を抑える */
.jisaku-lang-nonjp .loop__card-jp { max-width: calc(100% - 32px); }
/* occasions カード頭: 漢字（意匠として縦のまま）＋リード文を横一列に */
.jisaku-lang-nonjp .o-card__head {
display: flex;
align-items: baseline;
gap: 12px;
}
.jisaku-lang-nonjp .o-card__lead { max-width: 9em; line-height: 1.35; }
/* dish の署名セクション: 縦書き前提の字下げを解除し、横組み幅を決める */
.jisaku-lang-nonjp .dish .sig-intro__copy { padding: 60px 0 0 0; }
.jisaku-lang-nonjp .dish .sig-intro__title { margin-left: 0; line-height: 1.25; }
.jisaku-lang-nonjp .dish .sig-intro { max-width: clamp(400px, 62vw, 760px); }
/* hospitality item-2: 画像左の縦帯だったキャプションを item-1 と同じ下配置に */
.jisaku-lang-nonjp .hospitality .hospi-item-2 .hospi-caption {
top: 84%;
bottom: auto;
left: 0;
right: auto;
}
.jisaku-lang-nonjp .hospi-caption { max-width: 100%; }
/* おもてなし系ページの HERO: 縦書き2カラム（リード｜大見出し）を縦積みに。
モバイル用ブレークポイントが既に同じ形（column-reverse＋横組み）なので、それに揃える。 */
.jisaku-lang-nonjp .pla-hero__type {
left: auto;
flex-direction: column;
align-items: flex-start;
width: min(52ch, 46vw);
gap: clamp(16px, 2vh, 28px);
}
.jisaku-lang-nonjp .pla-hero__title { order: 1; line-height: 1.35; letter-spacing: .06em; }
.jisaku-lang-nonjp .pla-hero__lead { order: 2; max-height: none; line-height: 1.9; letter-spacing: .03em; }
/* 縦帯だったラベル類は横組みで幅を持たせる */
.jisaku-lang-nonjp .pla-intro .pla-intro__label,
.jisaku-lang-nonjp .pla-faq__head { line-height: 1.5; }
/* culture の feature 行: 画像は aspect-ratio だけで幅が決まるため、英文で本文が
高くなると行高×1.45 が grid トラックを超えて横スクロールが出る。幅を明示して
高さ側を伸ばす（object-fit:cover なのでトリミングされるだけ）。 */
.jisaku-lang-nonjp .feature__media { width: 100%; min-width: 0; }
/* 和文前提の nowrap を欧文では折り返させる */
.jisaku-lang-nonjp .menu-modal__en { white-space: normal; }
/* 訳文で横に伸びる所（ブラウザの翻訳機能の訳は自前の英文より長い） ---------
和文では短いので nowrap や幅の上限なしで収まっていたもの。 */
/* 予約・電話の固定バー（PC）: 各セルに上限が無く、訳すと 790px → 990px まで伸びて
画面の3分の2を覆っていた。1セル 270px までにして2行に折る（/en/ の自前ラベルは 1行で収まる幅）。
900px 以下は画面下いっぱいの帯で、sub を隠して各セルを等分しているので触らない。 */
@media (min-width: 901px) {
.jisaku-lang-nonjp .follow-nav__cell { max-width: 270px; }
.jisaku-lang-nonjp .follow-nav__main,
.jisaku-lang-nonjp .follow-nav__sub { white-space: normal; letter-spacing: .03em; }
}
/* プロローグの小見出し・署名: 縦書き用の nowrap のまま横組みになると1行に伸びる */
.jisaku-lang-nonjp .loop__kicker,
.jisaku-lang-nonjp .loop__sign { white-space: normal; max-width: 100%; letter-spacing: .2em; }
/* お料理の大写真に重なるクリーム色の枠（トップ）: 幅が中身なり（shrink-to-fit）で上限が無い。
和文・自前の英文は
で短く切ってあるので収まるが、ブラウザの翻訳は
をまたいで
文をつなげるため1行が長くなり、枠が画面の端近くまで伸びていた（385px → 1000px 超）。
和文用の広い字送り（.18em）も詰める。900px 以下は元から幅いっぱいなので効かない。 */
@media (min-width: 901px) {
.jisaku-lang-nonjp .dish .dish-hero__cap { max-width: min(600px, 46vw) !important; }
.jisaku-lang-nonjp .dish .dish-hero__cap-text { letter-spacing: .05em; line-height: 1.9; }
}
/* お料理の柱（3本）の見出し: 和文は1行に収まる前提の nowrap */
.jisaku-lang-nonjp .dish .pillars__head h3,
.jisaku-lang-nonjp .dish .pillar__title { white-space: normal; }
/* ---- 品書き帯（dish ハブ HERO 下のセクションアンカー） -------------------
.dish-shinagaki__ja は縦組み（writing-mode:vertical-rl / text-orientation:upright）。
組み方は書記体系で分かれるので、nonjp 一括ではなく言語ごとに扱う。
zh … 縦組みのまま（漢字は縦に積んで自然に読める）。フォントだけ差し替える
en / ko … 横組みへ倒す（ラテン文字とハングルを upright で縦に積むと読めない）
------------------------------------------------------------------------ */
/* 中文: Shippori Mincho / Noto Serif JP は簡体字（妇・罗・烧・涮・锅・庆・贺 等）を
持たないため、日本語フォントを先頭にすると欠けた字だけ別書体に落ちて太さが揃わない。
中国語セリフを先頭に置いて 1 書体で通す（いずれも OS 同梱・追加ダウンロードなし）。 */
.jisaku-lang-zh .dish-shinagaki__ja {
font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", "Shippori Mincho", serif;
}
/* en / ko: 横組みの短冊にする。帯・金罫・漢数字・写真ホバーはそのまま。 */
.jisaku-lang-en .dish-shinagaki__ja,
.jisaku-lang-ko .dish-shinagaki__ja {
writing-mode: horizontal-tb;
text-orientation: mixed;
display: flex;
align-items: center;
justify-content: center;
height: auto;
min-height: clamp(52px, 4.6vw, 66px); /* 1行でも2行でも英字ラベルの位置を揃える */
font-size: clamp(13px, 1.15vw, 15px);
letter-spacing: .08em;
line-height: 1.7;
}
/* 縦に長い短冊である必要が無くなるので、上下の余白を詰めて横長の札にする */
.jisaku-lang-en .dish-shinagaki__link,
.jisaku-lang-ko .dish-shinagaki__link {
padding: clamp(26px, 3vw, 36px) clamp(10px, 1.4vw, 18px) clamp(22px, 2.6vw, 30px);
}
@media (max-width: 900px) {
.jisaku-lang-en .dish-shinagaki__ja,
.jisaku-lang-ko .dish-shinagaki__ja {
font-size: clamp(12px, 1.5vw, 14px);
min-height: clamp(46px, 6vw, 60px);
letter-spacing: .04em;
}
}
@media (max-width: 767px) {
/* 横組みは1枚あたりの必要幅が広いので短冊を広げる（次の1枚が覗く比率は保つ） */
.jisaku-lang-en .dish-shinagaki__item,
.jisaku-lang-ko .dish-shinagaki__item { flex: 0 0 clamp(116px, 34vw, 158px); }
.jisaku-lang-en .dish-shinagaki__link,
.jisaku-lang-ko .dish-shinagaki__link { padding: 24px 8px 20px; }
.jisaku-lang-en .dish-shinagaki__ja,
.jisaku-lang-ko .dish-shinagaki__ja {
font-size: 12px;
min-height: 44px;
letter-spacing: .02em;
line-height: 1.55;
}
}
/* ---- dish ハブ HERO の見出し（901px 以上） ------------------------------
`.dishlist-hero__title` は縦書きの列を右→左に並べるため `flex-direction:row-reverse`。
上の一括指定で `.dish-vline` を横組みに倒すと **flex は行のまま**なので、2つの句が
1行に横並び＋逆順になり（例: "the four seasons The scent of"）、欧文・ハングルでは
行が伸びて HERO 右の料理写真の上まで達してしまう。
① 段組みにして読み順を DOM 順（＝正しい順）に戻す
② 和文より字幅が広いぶん級数を下げ、左のクリーム覆いが効いている範囲に収める
（覆い `.dishlist-hero::after` は 28% で .2、42% で 0 まで薄れる。
鍋の左端はおよそ 34% なので、見出しは 30% 前後で終わるよう寄せる）
※900px 以下は pages/dish.css が既に column + 字送り詰めに切り替えているので触らない。
※`.dish-vline` は page-dish.php の HERO 専用（他ページでは未使用）。
------------------------------------------------------------------------ */
@media (min-width: 901px) {
.jisaku-lang-nonjp .dishlist-hero__title {
flex-direction: column; /* row-reverse → 上下2段（DOM順＝読み順） */
justify-content: flex-start;
align-items: flex-start;
gap: clamp(4px, .5vw, 10px);
max-width: min(38vw, 520px);
}
.jisaku-lang-nonjp .dish-vline {
font-size: clamp(24px, 2.4vw, 32px); /* 和文 42px 相当の見え方。欧文は字幅が広い */
letter-spacing: .08em; /* 和文用の .32em は欧文・ハングルには広すぎる */
line-height: 1.28;
max-width: 32vw; /* 訳文が伸びても写真に届く前に折り返す保険 */
}
}
/* ---- ブラウザ翻訳の案内帯（assets/js/browser-translate.js が差し込む） ----------
日本語ページが Chrome 等の翻訳機能で訳されたときだけ出る。自前の外国語ページへ案内する。
右下は follow-nav（予約・電話の固定バー）が使うので左下に置く。
900px 以下は follow-nav が画面下いっぱいの帯になるので、その上に浮かせる。
------------------------------------------------------------------------ */
.xlate-banner {
position: fixed;
left: clamp(16px, 2vw, 28px);
bottom: clamp(16px, 2.4vw, 28px);
z-index: 950; /* follow-nav(900) より上・header(1000) より下 */
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
max-width: min(420px, calc(100vw - 32px));
padding: 14px 44px 14px 18px;
background: rgba(14, 17, 22, .94); /* --ink */
border: 1px solid rgba(223, 192, 122, .45);
color: #e8e2d4;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 13px;
line-height: 1.5;
letter-spacing: .01em;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
animation: xlate-banner-in .5s var(--ease, ease) both;
}
.xlate-banner__msg { margin: 0; flex: 1 1 220px; }
.xlate-banner__link {
color: var(--gold, #dfc07a);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
white-space: nowrap;
}
.xlate-banner__link:hover,
.xlate-banner__link:focus-visible { color: #fff; }
.xlate-banner__close {
position: absolute;
top: 6px;
right: 6px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
opacity: .7;
}
.xlate-banner__close:hover,
.xlate-banner__close:focus-visible { opacity: 1; }
@keyframes xlate-banner-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
.xlate-banner {
left: 12px;
right: 12px;
/* 下端の follow-nav の上。iPhone のホームバー分（safe-area）も足す */
bottom: calc(64px + env(safe-area-inset-bottom, 0px));
max-width: none;
padding-right: 52px;
}
/* 指で押しやすい大きさ（44px 四方） */
.xlate-banner__close { top: 2px; right: 2px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.xlate-banner { animation: none; }
}