@charset "UTF-8"; /* * 多言語化（i18n）レイアウト緩和CSS * -------------------------------------------------------------- * 日本語前提で固定幅・nowrap に作られた要素は、英語/中国語で * 文字数が増えるとはみ出し・重なり・改行崩れを起こす。 * ここでは / のときだけ、 * 崩れやすい典型要素を「折り返し許可・サイズ自動・縮小」で緩和する。 * * 方針: * - 日本語(lang="ja")には一切影響を与えない（en/zh限定セレクタ） * - 個別ページのピンポイント崩れは追記で対応していく * - 文字を消さない（overflow:hidden等で隠さない）。折り返し優先。 */ /* ============================================================ * 1) 共通: en/zh では長い語の折り返しを許可（はみ出し防止の土台） * ============================================================ */ html[lang="en"] body, html[lang="zh"] body { word-break: break-word; overflow-wrap: break-word; } /* ============================================================ * 2) ボタン類: 固定高さ＋nowrap で切れやすい。折り返し許可＋高さ自動。 * 既存の主要ボタンクラスを広めに対象化（無ければ無害）。 * ============================================================ */ html[lang="en"] .btn, html[lang="zh"] .btn, html[lang="en"] .button, html[lang="zh"] .button, html[lang="en"] button, html[lang="zh"] button, html[lang="en"] .btn-base button, html[lang="zh"] .btn-base button, html[lang="en"] a.btn, html[lang="zh"] a.btn { white-space: normal !important; /* nowrap解除＝折り返し許可 */ line-height: 1.3 !important; word-break: break-word; } /* ============================================================ * 3) グローバルナビ／ヘッダーメニュー: 横並びで文字が長いと折れる。 * フォントをわずかに縮小し、はみ出しを抑える。 * ============================================================ */ html[lang="en"] header nav h3, html[lang="zh"] header nav h3, html[lang="en"] header nav a, html[lang="zh"] header nav a, html[lang="en"] .head-nav a, html[lang="zh"] .head-nav a { white-space: normal !important; word-break: break-word; line-height: 1.25; } /* admin のヘッダーナビ(section内h3)はアイコン下のラベル。少し縮小。 */ html[lang="en"] header nav section h3, html[lang="zh"] header nav section h3 { font-size: 92%; } /* ============================================================ * 4) テーブル見出し(th): 固定%幅に英語見出しが入ると折れて高さが増える。 * 折り返し許可＋見出しのみ僅かに縮小。データセルは触らない。 * ============================================================ */ html[lang="en"] table th, html[lang="zh"] table th { white-space: normal !important; word-break: break-word; font-size: 94%; line-height: 1.25; } /* ============================================================ * 5) タブ／ピル状UI: 等幅前提のタブラベルがはみ出すケース。 * ============================================================ */ html[lang="en"] .tab a, html[lang="zh"] .tab a, html[lang="en"] .tabs a, html[lang="zh"] .tabs a, html[lang="en"] li.tab, html[lang="zh"] li.tab { white-space: normal !important; word-break: break-word; } /* ============================================================ * 6) 言語スイッチ自体: en/zh でも1行に収める（折り返し抑止）。 * ============================================================ */ html[lang="en"] .langSwitch, html[lang="zh"] .langSwitch { white-space: nowrap; } /* ============================================================ * 個別ページのピンポイント緩和 * ============================================================ */ /* about-analysis: 280px固定の円の中に4行テキスト。日本語22pxは収まるが * 英語は長くてはみ出すので、enのみフォント・行間を縮小して円内に収める。 * （中国語は収まっているため対象外） */ html[lang="en"] .a_analyFrame .c_3 ul li { font-size: 16px; line-height: 1.4; } /* ブランドデータ一覧(SRBaside)の項目ラベル幅を英語用に拡げる */ html[lang="en"] .SRB .SRBaside .BrandData ul li span:first-of-type { width: 70px; } /* SRBaside の dt 文字を英語のとき縮小 */ html[lang="en"] .SRB .SRBaside > div .base dl dt { font-size: 16px; } /* 3カラムのブランドカード末尾の補足テキストを英語のとき縮小 */ html[lang="en"] .column-3.franchise a div.base:last-of-type p span { font-size: 9px; } /* SRBaside の dd 内テキストを英語のとき縮小 */ html[lang="en"] .SRB .SRBaside > div .base dl dd span { font-size: 16px; } /* HeadDeta のパネル見出し(dt)を英語のとき縮小 */ html[lang="en"] .HeadDeta .panel-base dl dt { font-size: 14px; } /* 検索条件(conditions)の絞り込みラベルを英語のとき縮小 */ html[lang="en"] .column-3.conditions.s-brand .column-3_child:nth-of-type(2) dl dd .base li label, html[lang="en"] .column-3.conditions.s-brand .column-3_child:last-of-type dl dd .base li label { font-size: 12px; } /* マイページ右カラムのリンクを英語のとき縮小 */ html[lang="en"] .mypage-base .content-right ul li a { font-size: 9px; } /* 相談リストの「未回答」ラベルを英語のとき縮小 */ html[lang="en"] .list-consult > .base a .list__content-u .Unanswered { font-size: 8px; } /* 検索条件の最終カラムの注記を英語のとき縮小 */ html[lang="en"] .column-3.conditions.s-brand > div:last-of-type p { font-size: 16px; } /* 相談検索条件の最終カラムの注記を英語のとき縮小 */ html[lang="en"] .column-3.conditions.s-consult > div:last-of-type p { font-size: 16px; } /* 検索フォームの絞り込みボタンラベルを英語のとき縮小（en限定なのでjaは不変） */ html[lang="en"] .p__btn { font-size: 11px; } /* ステップ表示のリストを英語のとき縮小 */ html[lang="en"] .step ul li { font-size: 16px; } /* 検索結果フッターのリンクボタンを英語のとき縮小 */ html[lang="en"] .SRB .SRBfooter div p .btn-link { font-size: 0.8rem; } /* 検索結果サイドのブランドデータ(値)を英語のとき縮小 */ html[lang="en"] .SRB .SRBaside .BrandData > div .base dl dd span { font-size: 1.0rem; } /* 検索結果サイドのブランドデータ(項目名)を英語のとき縮小 */ html[lang="en"] .SRB .SRBaside .BrandData > div .base dl dt { font-size: 0.9rem; } /* 説明会一覧(event-base)のdt幅を英語のとき広げる */ html[lang="en"] .content-left.event-base .searchEvent .board-base > div:last-of-type dl dt { width: 15%; } /* 説明会一覧(event-base)のブランド情報ラベルを英語のとき縮小 */ html[lang="en"] .content-left.event-base .searchEvent .board-base > div:first-of-type .brand_info li span { font-size: 9px; } /* 相談検索カテゴリのラベルを英語のとき縮小(翻訳で長くなる崩れ対策) */ html[lang="en"] .column-3.conditions.s-consult > div:first-of-type dl dd ul li label { font-size: 12px; } html[lang="en"] .content-left.search-base .form-base .btn-base .btn { font-size: 18px; } /* 会員登録/プロフィール設定: 国別切替の住所ラベル()を通常のラベル文字と 同じ見た目に(dt span の必須バッジ装飾を受けないよう を使用。太字化を打ち消す)。 会員登録は .form-request、設定画面は .form-border のみのため両方に効くようにする。 */ .form-border div dl dt label b.jp-addr-label, .form-border div dl dt label b.ov-addr-label { font-weight: normal; background: none; color: inherit; margin: 0; padding: 0; } /* プロフィール設定: 国切替で項目数が増減すると、絶対配置のフッター (footer{position:absolute;bottom:0}) に送信ボタンが隠れることがある。 送信ボタンの下に余白を確保して重なりを防ぐ。 */ .mypage-base .content-left .container .myp_base .form-border .Send { margin-bottom: 80px; } html[lang="en"] .contactForm form .btn { font-size: 14px; } /* 診断ツール(analysis)の資金スライダー入力欄。英語は「0,000 yen」等で長くなり 桁が切れるため、en のときだけフォントを縮小する。 */ html[lang="en"] .analy__case [class*="case__"] dl .analy_slider .ui-spinner.ui-corner-all.ui-widget.ui-widget-content.max input, html[lang="en"] .analy__case [class*="case__"] dl .analy_slider .ui-spinner.ui-corner-all.ui-widget.ui-widget-content.min input { font-size: 15px; } /* 資金/時間スライダーの単位「万円」「時間」は CSS の ::after content で固定挿入 されており翻訳(|t)が効かない。en/zh のときだけ content を上書きして単位を訳す。 時間側(.ui_slider.time + .ui-spinner)は詳細度が高いので個別に上書きが必要。 */ html[lang="en"] .analy__case .ui-spinner:after { content: " 0,000 yen" !important; } html[lang="zh"] .analy__case .ui-spinner:after { content: "万日元" !important; } /* 時間スライダーは
配下。資金(上)の上書きより詳細度を高くして 時間側だけ「時間」の訳に上書きする(隣接セレクタはDOM順と合わないため子孫で指定) */ html[lang="en"] .analy__case .time .ui-spinner:after { content: " hours" !important; } html[lang="zh"] .analy__case .time .ui-spinner:after { content: "小时" !important; } /* 説明会一覧のブランド情報ラベル(dt)を英語のとき縮小(翻訳で長くなる崩れ対策) */ html[lang="en"] .event .event-body div:first-of-type dl dt { font-size: 15px; }