@charset "UTF-8";
/* ============================================================================
   繁體中文（/tw/・html[lang="zh-Hant"]）のページだけの細かい直し（サイト）
   - Layout/showa.ctp が style.css の後に読む（ファイルがあるときだけ）。tailwind のビルドは通さない＝手で書く
   - 決まり：docs/多言語の決まり.md 4.（言語ごとの CSS）・7.・12.（横書きの土台は共通の html:not([lang="ja"])）、
     docs/英語版の決まり.md 9.
   - 繁體中文のテンプレートは日本語と同じ形・クラス（英語だけの .en-a〜.en-d は無い）。
     英語のページだけの直し（input.css の「英語のページ」以下の html[lang="en"] …）を中国語に合うように写したもの。
     中国語は字の幅がそろう＝日本語の横書きに近い組み（英語向けの字間の詰め・文の長さに合わせた max-width は使わない）
   - ページを特定するときは、そのページにしか無い要素で main:has(...)（body にページのクラスが無いため）
   ============================================================================ */

/* ---- 共通：段落の間（縦書き用の margin-right を横の段落の間に） ---- */
html[lang="zh-Hant"] .vbox__text p + p { margin: 1.1em 0 0; }
html[lang="zh-Hant"] .cross__text p + p { margin: 1em 0 0; }

/* ---- トップ：ステートメント・交互の3章・相談の帯の見出しは、折れるときに釣り合いよく ---- */
html[lang="zh-Hant"] :is(.vbox__ttl, .cross__catch, .cta__catch) { text-wrap: balance; }
html[lang="zh-Hant"] .vbox__en { text-align: left; }
/* 1200px 以上：縦書きの 38px・字間 0.12em のままでは2行目（13字）が右の列に入らず「傳承給後／世。」と1字だけ折れた＝少し小さく・字間を詰めて1行に */
@media (min-width: 1200px) {
  html[lang="zh-Hant"] .vbox__head { flex: 0 0 auto; }
  html[lang="zh-Hant"] .vbox__ttl { font-size: 34px; letter-spacing: 0.04em; line-height: 1.6; white-space: nowrap; }
}

/* ---- トップ：交互の3章（1200px 以上）。縦書きの列の並び（右に題・左に本文）が横書きでは本文が細い列に押し込まれ「展板，」「光。」が1字の行に
   ＝英語と同じく、見出しの下に本文の縦の並び（写真との左右はそのまま） ---- */
@media (min-width: 1200px) {
  html[lang="zh-Hant"] .cross__body { flex-direction: column; align-items: flex-start; gap: 28px; width: 600px; }
  html[lang="zh-Hant"] .cross__sec:nth-child(even) .cross__body { justify-content: flex-start; }
  html[lang="zh-Hant"] .cross__head { align-items: flex-start; gap: 18px; }
  html[lang="zh-Hant"] .cross__label { flex-direction: row; align-items: baseline; gap: 14px; }
  html[lang="zh-Hant"] .cross__catch { font-size: 33px; line-height: 1.5; }
  html[lang="zh-Hant"] .cross__text { padding-top: 0; font-size: 19px; line-height: 2; }
}

/* ---- 共通の部品：お問い合わせの帯（.cta）。PC の右の題「聯絡我們」が2行に折れ、キャッチが細い列で1〜2字ずつ折れた ---- */
@media (min-width: 768px) {
  html[lang="zh-Hant"] .cta .vttl__jp { white-space: nowrap; }
  /* キャッチは1行にすると本文の列が細くなり「提出。」が1行に残る＝英語と同じく幅を決めて折る（「請讓我們聽聽／您的想法。」） */
  html[lang="zh-Hant"] .cta__catch { flex: 0 0 auto; width: 6.8em; font-size: 28px; letter-spacing: 0.08em; line-height: 1.6; }
}

/* ---- フッターのメニュー（PC）。縦書き用の「字と英字を上下の端へ離す」並び（space-between）が横書きの行の高さいっぱいに伸び、英字が字から大きく離れた ---- */
@media (min-width: 921px) {
  html[lang="zh-Hant"] .foot__nav ul { align-content: flex-start; align-items: flex-start; row-gap: 26px; }
  html[lang="zh-Hant"] .foot__nav ul a { justify-content: flex-start; align-items: flex-start; gap: 6px; }
}

/* ---- 特設ページの案内の帯（.link-banner）：名前が「《照片故事 　昭／和的孩子們》」「經銷／店」と言葉の途中で折れた
   ＝空き（全角・半角）と <wbr> の所でだけ折る（日本語の帯は固まりを .nw で包むが、日本語以外の帯は文をそのまま出すため） ---- */
html[lang="zh-Hant"] .link-banner__ttl { word-break: keep-all; }
/* フッターの上の特設ページの一覧（.lp-row）の説明も同じ（「寄／賣」「銷售／說明」と言葉の途中で折れた。折れるときは釣り合いよく＝「寄賣／·批發」と「·」が行の頭に来ないように） */
html[lang="zh-Hant"] .lp-row__note { word-break: keep-all; text-wrap: balance; }

/* ---- about：詩（連の間をあける＝縦書き用の margin-right を外す） ---- */
html[lang="zh-Hant"] .poem__ttl + .poem__body { margin: 22px 0 0; }
html[lang="zh-Hant"] .poem__body p + p { margin: 1.3em 0 0; }
html[lang="zh-Hant"] .poem__body p.is-wide { margin: 2.4em 0 0; }

/* ---- about：章（右に題・左に写真はそのまま。題を上・小見出しを下、左そろえ） ---- */
html[lang="zh-Hant"] .chap__ttl { order: -1; }
@media (min-width: 768px) {
  html[lang="zh-Hant"] .chap__head { flex: 0 0 210px; align-items: flex-start; gap: 12px; }
  html[lang="zh-Hant"] .chap__lead { margin-top: 8px; line-height: 1.9; }
}
/* 作品の題（《風之子》（風の子））：和文用の字間 0.08em で「（どろんこ）」が次の行へ回っていた */
html[lang="zh-Hant"] .gal figcaption b { letter-spacing: 0.02em; line-height: 1.5; }
/* 題に添えた日本語の題（「（日本語の題）」）：スマホで「（チ／ャンバラ）」「（じゃ／んけん）」と語の途中で折れ、かなの字間が広く見えた
   ＝テンプレートで括弧ごと .yomi に包み（about の作品の写真の説明と作品目録・lease と doll-display の作品の写真の説明）、折れるときは括弧ごと次の行へ（inline-block）・かなを詰める（palt）・少し小さく */
html[lang="zh-Hant"] .yomi { display: inline-block; font-size: 0.88em; letter-spacing: 0; }
html[lang="zh-Hant"] .yomi span[lang="ja"] { word-break: auto-phrase; font-feature-settings: "palt"; }

/* ---- about：作品目録（PC の縦書きの27列の並びが横書きの字で崩れた＝英語と同じ横書きの3列に。スマホは日本語と同じ2列のまま） ---- */
@media (min-width: 768px) {
  html[lang="zh-Hant"] .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; row-gap: 0; direction: ltr; }
  html[lang="zh-Hant"] .toc li { justify-self: stretch; padding: 10px 0; border-bottom: 1px dotted var(--color-line); font-size: 17px; letter-spacing: 0.02em; line-height: 1.6; }
  html[lang="zh-Hant"] .toc li small { display: block; margin: 2px 0 0; font-size: 14.5px; }
  html[lang="zh-Hant"] .toc__kan { display: none; }
  html[lang="zh-Hant"] .toc__num { display: inline; }
}

/* ---- lease/showa-expo：七つのテーマ（PC は縦書きの7列の箱＝横書きでは箱の中に収める。767px 以下は日本語と同じ2列） ---- */
@media (min-width: 768px) {
  html[lang="zh-Hant"] .parts li { padding: 26px 10px 22px; }
  html[lang="zh-Hant"] .parts .t { min-height: 3.2em; font-size: 20px; letter-spacing: 0.04em; line-height: 1.5; text-align: center; text-wrap: balance; }
}
/* 「技藝·巧思·智慧」が「技藝·巧／思·智慧」と言葉の途中で折れた＝テンプレートで「技藝·」「巧思·」「智慧」を span に分け、固まりの中では折らない。
   320px の2列では「生活與自／然」と1字だけ折れた＝どの幅でも釣り合いよく折る */
html[lang="zh-Hant"] .parts .t { text-wrap: balance; }
html[lang="zh-Hant"] .parts .t > span { display: inline-block; }

/* ---- スマホ ---- */
/* トップのヒーローの題（11字）：日本語の 26px のままでは 320px で「的每一／天」と1字だけ折れた＝359px 以下は1行に入る大きさに */
@media (max-width: 359px) {
  html[lang="zh-Hant"] .hero__catch { font-size: 24px; letter-spacing: 0; }
}
/* トップ「致企業與業者」の2列のカードのボタン「了解更多（日文）」：390px で「（日／文）」と括弧の中で折れた
   ＝ボタンの字間を詰め、折れるときは括弧の前で折る（keep-all） */
@media (max-width: 767px) {
  html[lang="zh-Hant"] .biz .card .more { gap: 8px; padding-left: 12px; padding-right: 10px; letter-spacing: 0.02em; word-break: keep-all; }
}