:root { --bg: #0b0d13; --ink: #e8eaf0; --muted: #878da0; --hairline: rgba(255, 255, 255, 0.08); --amber: #f0b35e; } * { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg); color: var(--ink); /* デフォルト(ja/en): 日本語フォントを優先。中国語フォントは下の :lang() で差し替え。 Han Unification で日本語と中国語の漢字字形が異なるため、グローバルに混ぜると簡体/繁体ロケールでも 日本字形が選ばれてしまう。:lang() で 文脈下だけ別スタックにする。 末尾の各スクリプト用フォントは、フレーズ表示時にブラウザの暗黙フォールバックではなく OS 標準フォントが選ばれるよう明示しておく(暗黙フォールバックはフォントの ascent/descent が 大きく行ボックスが膨らみ、フレーズカード内の要素位置がスクリプトごとにガタつく原因になる) */ font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; display: flex; flex-direction: column; align-items: center; } body:lang(zh-CN) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } body:lang(zh-TW) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } body:lang(ko) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* ロシア語 UI: キリル文字を含む -apple-system / Helvetica Neue / Arial を先頭に置く。 デフォルトの Hiragino Sans / Noto Sans JP はキリル無しのため、その前に Cyrillic 対応フォントを並べておかないと、非Apple環境で暗黙フォールバックの sans-serif に 流れて見た目が揺れる */ body:lang(ru) { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* ヒンディー語 UI: デーヴァナーガリーを先頭に。Hiragino Sans / Noto Sans JP は デーヴァナーガリー無しなので、それより前に Devanagari 対応フォントを並べる */ body:lang(hi) { font-family: -apple-system, BlinkMacSystemFont, "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* bn: ベンガル文字用フォントを先頭に。Kohinoor Bangla(macOS/iOS)/ Bangla Sangam MN(従来) / Noto Sans Bengali(クロスプラットフォーム)で安定。本文中のラテン文字や他言語都市名 フォールバック描画用に Hiragino/Noto JP と各スクリプトを末尾に並べる */ body:lang(bn) { font-family: -apple-system, BlinkMacSystemFont, "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* アラビア語 UI: アラビア文字対応フォントを先頭に。SF Arabic は新しい macOS/iOS、 Geeza Pro は従来の macOS。RTL の方向切替は を JS で立てて行う */ body:lang(ar) { font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* ペルシア語 UI: アラビア Unicode 範囲を共有するため ar と同じスタックを流用。 پ/چ/ژ/گ などの Persian variants も SF Arabic / Geeza Pro / Noto Sans Arabic で対応。 RTL の方向切替は を JS で立てて行う */ body:lang(fa) { font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* ウルドゥー語 UI: アラビア Unicode 範囲を共有しつつ、ナスタリーク体で書かれるのが 伝統。Noto Nastaliq Urdu を先頭に置き、未対応環境用に SF Arabic / Geeza Pro / Noto Sans Arabic を後続させる。RTL の方向切替は を JS で立てて行う */ body:lang(ur) { font-family: -apple-system, BlinkMacSystemFont, "Noto Nastaliq Urdu", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Hiragino Sans", "Noto Sans JP", "Thonburi", "Noto Sans Thai", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } /* th: タイ文字用フォントを先頭に置く。Sukhumvit Set/Thonburi(macOS/iOS)→ Noto Sans Thai(クロスプラットフォーム)で安定。本文中のラテン文字や他言語 都市名フォールバック描画用に Hiragino/Noto JP と各スクリプトを末尾に並べる */ body:lang(th) { font-family: -apple-system, BlinkMacSystemFont, "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Hiragino Sans", "Noto Sans JP", "Lao Sangam MN", "Noto Sans Lao", "Khmer Sangam MN", "Noto Sans Khmer", "Myanmar Sangam MN", "Noto Sans Myanmar", "Sinhala Sangam MN", "Noto Sans Sinhala", "Kailasa", "Noto Sans Tibetan", "Noto Sans Thaana", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans Bengali", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Geeza Pro", "Noto Sans Arabic", "Arial Hebrew", "Noto Sans Hebrew", "Kefa", "Noto Sans Ethiopic", sans-serif; } header { grid-area: title; text-align: center; } /* デスクトップ(2カラム)では @media ブロック側で header { text-align: start } に 切り替わり、RTL UI(ar 等)では自動的に右カラムの右側へ寄る。 モバイル(1カラム縦並び)はこの center のまま、RTL UI でも中央配置にする */ h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 650; letter-spacing: -0.01em; } h1 .accent { color: var(--ink); } h1 .dot { color: var(--amber); } /* モバイル(既定): 1カラムの縦並び。grid-template-areas で順序を定義 */ main { width: min(1040px, 94vw); display: grid; grid-template-columns: minmax(0, 1fr); /* 1fr(=minmax(auto,1fr))だと幅広の子要素で横に膨らむため最小0 */ grid-template-areas: "title" "map" "send" "phrase"; gap: 18px; padding: 40px 0; } .map-wrap { grid-area: map; position: relative; width: min(640px, 100%); margin: 0 auto; } #map { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; /* canvas 上のタッチは縦横とも回転に使う(ページスクロールはタイトル/フレーズ枠側で受ける) */ } .tooltip { position: absolute; pointer-events: none; background: #14171f; border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.6; white-space: nowrap; transform: translate(-50%, -115%); z-index: 5; } .tooltip .tt-phrase { color: var(--amber); font-size: 13px; } .tooltip .tt-muted { color: var(--muted); } .tooltip .tt-city { font-weight: 600; } .send-btn { grid-area: send; justify-self: center; margin-top: 8px; font-family: inherit; font-size: 14px; font-weight: 500; color: #c2c7d4; /* モバイルで固定表示時、後ろの文字が透けないようベタ塗り。 見た目は rgba(255,255,255,0.04) を背景 #0b0d13 に重ねた合成値に合わせている */ background: #15171c; border: 1px solid var(--hairline); border-radius: 999px; padding: 12px 26px; cursor: pointer; touch-action: manipulation; /* 連打時のダブルタップズームを抑止(ピンチズームは生きる) */ transition: background 0.15s, border-color 0.15s, transform 0.1s; } /* ホバー対応デバイス(マウス等)に限定。 タッチ端末では :hover が sticky になり「押しっぱなしの見た目」が残るため */ @media (hover: hover) { .send-btn:hover { background: #1f2026; border-color: rgba(255, 255, 255, 0.18); } } /* タップ中だけホバーと同じ見た目に。指を離すと元のデザインに戻る */ .send-btn:active { background: #1f2026; border-color: rgba(255, 255, 255, 0.18); transform: translateY(1px); } /* フレーズ表示枠: 送信前はイントロ文、送信後はフレーズカードに置き換わる。 min-height をカードと揃えて、入れ替え時のレイアウトシフトを防ぐ */ .phrase-slot { grid-area: phrase; min-height: 122px; text-align: center; } .phrase-intro { color: var(--muted); font-size: 13px; line-height: 2.1; letter-spacing: 0.04em; padding-top: 14px; } .phrase-card { padding-top: 4px; animation: rise 0.5s ease-out; } .phrase-main { font-size: clamp(22px, 3.5vw, 30px); font-weight: 600; letter-spacing: 0.01em; /* タイ語/ベンガル語/デーヴァナーガリーなどは上下のスタッキングマークで フォントの ascent/descent が広く、line-height: normal だと言語ごとに 行ボックスが 35〜46px の範囲で揺れて、下に続く phrase-lang/city/time の位置がガタつく。明示値で固定する(コンテンツがはみ出ても直下の要素は動かさない) */ line-height: 1.4; } .phrase-lang { color: var(--muted); font-size: 13px; margin-top: 10px; } .phrase-city { font-size: 15px; font-weight: 600; margin-top: 6px; } .phrase-time { color: var(--muted); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* PC(2カラム): 左に地球儀、右にタイトル→フレーズ→送信ボタン。 上下の空白行(1fr/1.3fr)で右カラムを地球儀の中心よりやや上に置く */ @media (min-width: 900px) { /* ビューポートに余裕があるときは縦中央に。`safe` で、コンテンツが画面より 高くなる縦長狭幅の場合は通常の上揃えに戻し、上端が見切れないようにする */ body { justify-content: safe center; } main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: 1fr auto auto auto 1.3fr; grid-template-areas: "map gap-top" "map title" "map phrase" "map send" "map gap-bottom"; column-gap: 48px; row-gap: 16px; align-items: start; padding: 52px 0 56px; } .map-wrap { align-self: center; width: 100%; } /* text-align: start / justify-self: start は dir 属性を見て自動で LTR=left, RTL=right に切り替わる(ar ロケールでテキストとボタンが 右カラムの右側に寄る) */ header { text-align: start; } /* h1 自身は dir="ltr" 固定(ブランド表記の向きを保つため)。継承された text-align: start は h1 の direction=ltr 側で再解決されて left になるので、 RTL UI ではここで明示的に right を上書きする(デスクトップのみ。モバイルは 上の text-align: center のままで中央寄せを保つ) */ html[dir="rtl"] header { text-align: right; } header h1 { font-size: clamp(26px, 2.4vw, 34px); } .phrase-slot { text-align: start; } .phrase-intro { padding-top: 6px; } .phrase-card { padding-top: 0; } .send-btn { justify-self: start; } /* 右カラム内では左寄せ(RTL では右寄せ) */ } /* 言語トグル(右上固定)。direction: ltr で固定して、 の アラビア語 UI でも並び順が反転しないようにする(en→…→ar の物理順を維持) */ .lang-switch { position: fixed; top: 14px; right: 14px; display: flex; align-items: center; direction: ltr; z-index: 20; } /* 言語切替は select に統一(対応言語が増え、ボタン群の横並びでは幅が足りないため)。 option ごとの lang 属性は HTML 側で付与済み(選択値ラベルのフォント固定用) */ .lang-switch-select { font-family: inherit; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); background: transparent; border: none; padding: 6px 18px 6px 0; /* 右パディングはネイティブの三角矢印ぶんの余白 */ cursor: pointer; touch-action: manipulation; appearance: none; -webkit-appearance: none; text-align: right; text-align-last: right; /* select の選択値表示にも右寄せを効かせる(Chromium/WebKit) */ /* シンプルな下向き三角を SVG で描く(stroke は --ink #e8eaf0 と同じ色) */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 2px center; } .lang-switch-select:focus { outline: none; } /* option 自体の背景はネイティブピッカーが描く(モバイル OS では無視される) */ .lang-switch-select option { background: #1a1d24; color: var(--ink); } /* モバイル: 送信ボタンを画面下部に固定 */ @media (max-width: 899px) { main { /* 送信ボタンは fixed でフローから外れるため、grid からも "send" 行を落として 地球儀とフレーズ枠の間のデッドスペース(gap × 2 ≒ 36px)を削る。 これで X など縦が短い in-app browser でも phrase-time が固定ボタンに被らない */ grid-template-areas: "title" "map" "phrase"; padding-bottom: 88px; /* 固定ボタンと内容が重ならないよう下に余白を確保 */ } /* 縦が短い画面では地球儀を縮めて、イントロ文が固定ボタンに重ならないようにする。 340px = タイトル・行間・フレーズ枠・ボタン余白ぶんの固定オーバーヘッド。 svh(URLバー表示時の最小高さ)基準なのでスクロール中にサイズが揺れない。 240px は下限(極端に低い画面では重なりよりサイズを優先) */ .map-wrap { width: min(640px, 100%, max(calc(100svh - 340px), 240px)); } .send-btn { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); margin-top: 0; white-space: nowrap; /* fixed+left:50% だと利用幅が右半分に制限され折り返すため */ z-index: 10; } .send-btn:active { transform: translateX(-50%) translateY(1px); } /* 固定時は中央寄せを保ったまま沈める */ }