/* ================================================================= * translated.css — 自動翻訳（GTranslate）時のレイアウト救済 * * 翻訳されると Google 翻訳が を対象言語に書き換える * （無料版ブラウザ内翻訳・有料TDN共通）。そこで対象言語への完全一致 * html:is([lang="en"], [lang^="zh"], [lang="ko"]) * をフックに、日本語の文字数を前提とした固定幅・white-space:nowrap を * 「翻訳時のみ」折り返し可・自動幅へ緩和する。日本語表示には影響しない。 * ※ :not([lang="ja"]) は不可 — 翻訳から日本語へ戻すと Google が lang を * "ja" でなく "auto" にするため、日本語文に翻訳時スタイルが残留する。 * 対象言語のホワイトリスト式なら "auto"（=原文復帰）で自然に外れる。 * GTranslate の対象言語を増やす際はこのリストにも追加すること。 * * 対象は訳文が長くなり溢れ・重なりが実測で出た箇所のみ: * 1. PCヘッダー メインナビ（ナビ溢れ→CTAが画面外へ押し出し） * 2. フッター 5列ナビ（リンクが隣列に重なる） * 3. TOP KVタイトル（固定幅+絶対配置で大幅に右へ溢れる） * 4. TOP 製品検索の見出し行（リード文 nowrap で右へ溢れる） * =================================================================*/ /* ---------- 1. PCヘッダー（layout/header.css） ---------- */ @media (min-width: 1025px) { /* 訳文の長さに応じてリンク内で折り返し、行間・字間・余白を詰めて ナビ全体を右カラム幅（primary max-width 1200）内に収める */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__nav { gap: 16rem; padding-left: 24rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__nav-link { white-space: normal; letter-spacing: 0.02em; line-height: 1.35; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__util-link { letter-spacing: 0.02em; } } @media (min-width: 768px) { /* CTA: 固定 164rem を最小幅扱いにし、長い訳文は折り返して収める */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__cta { width: auto; min-width: 164rem; max-width: 240rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__cta-text { white-space: normal; line-height: 1.2; } /* ドロップダウン: nowrap のままだと長い訳文でパネルが画面右端を超えるため リンクは折り返し可にするが、絶対配置のパネルはトリガー幅まで収縮する (shrink-to-fit)。中韓は任意の文字間で改行できるため、そのままだと 2〜3文字ごとに折れた細長いパネルになる。width:max-content で 「折り返し無しの内容幅」を基準にし、360rem を超える英語の長文だけ折る */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__dropdown { width: max-content; max-width: 360rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__dropdown-link { white-space: normal; } /* Language メニュー（.notranslate）は言語名を原語表記のまま維持していて 訳文で長くなることがないため、折り返し緩和の対象から外す （「中文（簡体）」等が2行に折れるのを防ぐ） */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__dropdown.notranslate { max-width: none; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-header__dropdown.notranslate .c-site-header__dropdown-link { white-space: nowrap; } } /* ---------- 2. フッター 5列ナビ（layout/footer.css） ---------- */ /* 列は min-width:0 の flex 子。nowrap のままだと訳文が列幅を超えて 隣の列に重なって描画される */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-footer__link { white-space: normal; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-footer__legal-link { white-space: normal; } /* 認証マークのキャプション（nowrap）も英語で長くなるため折り返し可に */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-site-footer__cert-caption { white-space: normal; } /* ---------- 2b. CONTACT帯（components/contact-cta.css） ---------- */ /* メルマガ登録ボタンは固定幅 233rem + nowrap。訳文が幅を超えて 左右にはみ出すため、固定幅を最小幅扱いにして内容に応じて広げる */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-contact-cta__magazine-btn { width: auto; min-width: 233rem; max-width: 100%; } /* CTA 2種ボタン（622rem固定）も長い訳文は折り返し可に */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-contact-cta__btn { white-space: normal; } /* ---------- 2c. ニュース一覧 カテゴリタブ（works/renewal-subpage.css） ---------- */ /* PC は 5列等幅グリッド + nowrap。長い訳語（廃番製品情報 → Discontinued Product Information 等）が列幅を超えてピルから溢れるため、 タブ内で折り返し可にし、行高は内容に応じて伸ばす */ @media (min-width: 768px) { html:is([lang="en"], [lang^="zh"], [lang="ko"]) body.page-news-index .news-category { grid-auto-rows: auto; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) body.page-news-index .news-category-link { white-space: normal; height: auto; min-height: 36rem; line-height: 1.25; letter-spacing: 0.02em; } } /* ---------- 3. TOP KVタイトル（components/kv.css） ---------- */ /* 日本語8文字前提の固定幅465×87 + 絶対配置 + 文字上ドット装飾の アートワーク。訳文では成立しないため、通常フローの折り返しに変えて サイズを落とし、日本語の字組み前提のドット装飾は非表示にする */ @media (min-width: 768px) { html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-inner { max-width: 640rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-group { width: auto; height: auto; margin-right: 0; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-heading1 { position: static; white-space: normal; text-align: center; font-size: 40rem; letter-spacing: 0.04em; line-height: 1.35; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-dots { display: none; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-badge-txt { white-space: normal; font-size: 40rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-suru { white-space: normal; font-size: 42rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-heading3 { white-space: normal; text-align: center; font-size: 46rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-p, html:is([lang="en"], [lang^="zh"], [lang="ko"]) .c-kv__t-subline { white-space: normal; text-align: center; } } /* ---------- 3b. TOP KVタイトル SP（components/kv.css .SP ツリー） ---------- */ /* SPモックアップ（390px中央カラム）でも nowrap の訳文が画面幅を超える。 PC 同様、折り返し可＋縮小フォントにし、日本語字組み前提のドット装飾は 非表示。.SP ツリーは SP 幅でしか表示されないため media 指定は不要 */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-reveal { /* shrink-to-fit だとサブ文が細幅で行数が嵩み写真列に被るため幅を確定させる。 訳文でブロックが縦に伸びる分、少し上へ寄せて写真との重なりを減らす */ width: min(92vw, 360px); max-width: min(92vw, 360px); top: calc(50% - 300px); } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-inner { width: 100%; max-width: 100%; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-heading1 { white-space: normal; text-align: center; font-size: 22rem; letter-spacing: 0.04em; line-height: 1.35; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-dots { display: none; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-badge-txt { white-space: normal; font-size: 22rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-suru { white-space: normal; font-size: 24rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-heading3 { white-space: normal; text-align: center; font-size: 26rem; letter-spacing: 0.04em; line-height: 1.3; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-p, html:is([lang="en"], [lang^="zh"], [lang="ko"]) .SP .c-kv__t-subline { white-space: normal; /* 伸びた訳文が下の写真コラージュに掛かっても読めるよう輪郭を締める */ text-shadow: 0 1px 8px rgba(51, 51, 51, 0.45); } /* ---------- 4. TOP 製品検索の見出し行（top-pc/top-css/top-main.css） ---------- */ /* 見出し「製品検索」とリード文が横並び（gap 56）でリード文 nowrap。 訳文はリード文を折り返し、入り切らなければ見出しの下の行へ落とす */ @media (min-width: 768px) { html:is([lang="en"], [lang^="zh"], [lang="ko"]) .element-top .h-top { flex-wrap: wrap; row-gap: 8rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .element-top .text-wrapper-21 { white-space: normal; } /* 検索条件ラベル（区分/カテゴリー/キーワード）: 固定幅 110rem の ラベル列を最小幅扱いにして長い訳語（classification 等）を収める */ html:is([lang="en"], [lang^="zh"], [lang="ko"]) .element-top .frame-57 { width: auto; min-width: 110rem; } html:is([lang="en"], [lang^="zh"], [lang="ko"]) .element-top .text-wrapper-22 { white-space: normal; } }