/* ========================================================================== multilingual-safe.css -------------------------------------------------------------------------- 目的: このサイトは最終的に日本語 / English / नेपाली (ネパール語) の3言語で運用される。同じ意味の文章でも言語によって文字数・単語の長さがまったく変わるため、「日本語の文字数にぴったり合わせた固定幅」でコンポーネントを作ると、英語・ネパール語を流し込んだ瞬間にボタンの文字がはみ出す/ナビゲーションが崩れる、といった不具合が高確率で発生する。このファイルは、そうした崩れを避けるための「土台のルール」と、参考サイト(NRNA Japan)のレイアウトを再現するための「再利用可能なコンポーネントクラス」をセットで提供する。コーディング規約(このサイトで新しいパーツを作る全員が守ること): 1. テキストを含む要素に width: 固定px を指定しない。 → min-width / max-width / padding + flex|grid で伸縮させる。 2. white-space: nowrap をテキストに使わない(折り返しを妨げない)。 3. テキストを含む要素に height: 固定px を指定しない。 → min-height にする(縦方向にも伸びられるようにする)。 4. ボタン・ナビゲーション等のUI部品を新しく作ったら、実際にわざと長い文字列(例: "आप्रवासी नेपाली संघको आधिकारिक वेबसाइटमा स्वागत छ") を仮に入れて崩れないか確認してから完成とする。 5. ネパール語(デーヴァナーガリー文字)を含む要素には lang="ne" 属性を付け、本ファイル内の [lang="ne"] のフォント指定が効くようにする。 ========================================================================== */ /* -------------------------------------------------------------------------- 0. 基礎リセット -------------------------------------------------------------------------- */ *, *::before, *::after { /* padding/borderをサイズ計算に含める。幅指定と中身のテキスト量を分離して考えられるようにするための必須設定。 */ box-sizing: border-box; } img, svg { max-width: 100%; height: auto; } /* ヒーローを画面幅いっぱい(下記7.参照)に広げると、環境によってはスクロールバー幅の分だけ数px横にはみ出すことがある(100vwはスクロールバーの幅を含むため)。ページ全体に横スクロールバーが出てしまうのを防ぐための安全策。 */ body { overflow-x: hidden; } /* -------------------------------------------------------------------------- 1. 可変タイポグラフィ見出し・ボタン文字などは clamp() で「画面幅に応じて滑らかに変化する」サイズにしておく。固定px指定より、多言語での文字量の違いに強い。 -------------------------------------------------------------------------- */ .terai-h1 { /* 通常の倍サイズ(元: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem)) */ font-size: clamp(3.5rem, 2.4rem + 4.4vw, 5.5rem); line-height: 1.25; } /* スマホ調整 */ @media (max-width: 600px) { /* スマホのベースフォントサイズを 15px に(Kadence の body 17px を上書き)。 Kadence はインライン