/* 留学デスク デザイントークン トンマナ＝「頼れる相棒のあたたかさ」：ネイビー(信頼)＋コーラル(後押し・差し色限定) 禁止：塗りCTAの多用／割引煽り／先着／過剰装飾（not-a-game）／広告っぽさ */ /* ============================================================ 🔴 box-sizing を最初に宣言する 親テーマ（SWELL）は要素によって content-box を使っている。 指定を省くと、.rgd-wrap の左右パディング22pxが幅に加算され、 モバイルで44pxはみ出して文字が右端で切れる（実機で確認した不具合）。 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root{ /* ロゴ準拠エイリアス（2026-07-28 ブリーフ§3） */ --psd-navy:#14264E; --psd-coral:#F0604C; --psd-bg-blue:#F0F4FA; --psd-bg-coral:#FDF1EE; --psd-border:#DCE3EE; --maru:"Hiragino Maru Gothic ProN","Zen Maru Gothic","M PLUS Rounded 1c",sans-serif; --navy:#14264E; /* ロゴ実測 #002050系を画面用に微調整 */ --navy-soft:#2A4E85; --coral:#F0604C; /* ロゴ「留学」実測 */ --coral-ink:#A63F22; /* 白文字を載せる面の専用トークン。 2026-07-28 オーナー指示の変遷: ロゴピンク統一→眩しい→2段鎮静で確定。 ロゴ実測#F0604Cと同色相の深色 #D2402D（白文字と4.65:1=WCAG AA達成）。 これ以上明るくするならAAを割る。#E05743(3.7:1)・#F0604C(3.2:1)は却下済み */ --coral-btn:#D2402D; --on-coral:#FFFFFF; --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#FAFAF7; --ink:#1B2735; --ink-soft:#3E4C5C; --muted:#63707F; --faint:#65707B; --line:#E5E4DD; --line-2:#EFEEE8; --good:#2E7D57; --warn:#8A5A16; --crit:#B23A48; --shadow:0 1px 2px rgba(22,52,99,.04), 0 8px 22px -10px rgba(22,52,99,.14); --shadow-lg:0 2px 6px rgba(22,52,99,.06), 0 24px 50px -20px rgba(22,52,99,.22); /* 丸ゴシック優先＝ふところ広め・読みやすさ最優先 */ /* 🔴 ヒラギノ丸ゴは指定しない。 macOS では標準で入っておらず（追加ダウンロード扱い）、実機で確認したところ 2番目以降の角ゴで描画されていた。指定を残すと、丸ゴを入れている人にだけ 違う見た目が出て、デザインの一貫性が崩れる。 「やわらかさ」は角丸（14px）と珊瑚色、行間で担保する。 並びは欧文を先、和文を後。和文フォントのラテン字形より、 システムの欧文のほうが数字と英字がきれいに出る。 */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue", "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo, "Noto Sans JP",sans-serif; --font-mono:"SFMono-Regular",Menlo,Consolas,monospace; --r:14px; --r-sm:10px; /* 角丸の段階。--r を基準に、大きい面は --r-lg、内側の小さな面は --r-md */ --r-md:12px; --r-lg:16px; --wrap:1080px; } /* 🔴 ダークモードは「いまは出さない、あとで出せる」状態にしてある。 ・OSの設定に自動追従させない（@media prefers-color-scheme は使わない） ＝ 誰も見ていない配色が、そのままお客さまに出るのを防ぐため ・配色そのものは下の :root[data-theme="dark"] に残してある 将来ダークを出すときは、 に data-theme="dark" を付けるだけで生きる。 そのときは必ず全ページを実際に描画して確かめること（白カード基調のため崩れやすい）。 */ :root[data-theme="dark"]{ --navy:#8FA8CE; --navy-soft:#7A96C2; --coral:#F58A70; --coral-ink:#F7A48F; --coral-btn:#F58A70; --on-coral:#241410; --bg:#11151C; --surface:#191F27; --surface-2:#151A21; --ink:#ECEEF2; --ink-soft:#C3CBD6; --muted:#98A2AF; --faint:#6F7885; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055); --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.5); --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 22px 50px -18px rgba(0,0,0,.6); } :root[data-theme="light"]{ --navy:#14264E; /* ロゴ実測 #002050系を画面用に微調整 */ --navy-soft:#2A4E85; --coral:#F0604C; /* ロゴ「留学」実測 */ --coral-ink:#A63F22; --coral-btn:#D2402D; --on-coral:#FFFFFF; --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#FAFAF7; --ink:#1B2735; --ink-soft:#3E4C5C; --muted:#63707F; --faint:#65707B; --line:#E5E4DD; --line-2:#EFEEE8; } /* ---- 基本 ---- */ .rgd-wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px} .rgd-narrow{max-width:760px} .rgd-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px} /* ---- 和文の基本 ---- 日本語は分かち書きしないので、折返しと行間の設定が読みやすさを大きく左右する。 ・line-break:strict … 句読点や小書き仮名が行頭に来ないようにする（禁則） ・overflow-wrap:anywhere … 長い英数字（学校名やURL）でカードが横に潰れるのを防ぐ。 break-word では直らない。anywhere だけが折返し位置の計算に入る ・word-break は normal のまま。break-all は禁則を壊す ・text-autospace … 和文と数字の間に自動でアキを入れる（「10週間で248,000円」が読みやすくなる） 対応していないブラウザでは何も起きない */ body{ font-size:16px; line-height:1.75; letter-spacing:.02em; line-break:strict; overflow-wrap:anywhere; word-break:normal; text-autospace:normal; } /* 金額は1かたまりで扱う。数字と単位を行またぎで分断しない */ .rgd-ct-amount,.rgd-price,.tabnum{ white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:normal; /* 見出しの palt を数字に継承させない */ } .rgd-h1{font-size:clamp(25px,4.6vw,40px); line-height:1.35; color:var(--ink); margin:0; text-wrap:balance} .rgd-h2{font-size:clamp(20px,3.2vw,28px); line-height:1.4; margin:0; text-wrap:balance} .rgd-lead{color:var(--ink-soft); margin-top:14px; max-width:64ch} /* 🔴 等幅（--font-mono）を使わない。 ここには「フィリピン留学」「よくある質問」など日本語が入るが、 等幅の指定だと日本語部分が Osaka（古い等幅フォント）で描画されていた。 実機で確認済み。等幅は数字が縦に並ぶ箇所だけに使う。 uppercase も日本語には効かないので外す。字間で区別する。 */ .rgd-eyebrow{font-size:11.5px; letter-spacing:.14em; color:var(--coral-ink); font-weight:700} .rgd-muted{color:var(--muted); font-size:13.5px} .tabnum{font-variant-numeric:tabular-nums} /* CTA：塗りは"申し込む"だけ。他は線＝広告っぽさ回避 */ .rgd-btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:13px 24px; border-radius:11px; text-decoration:none; border:1px solid transparent; cursor:pointer} .rgd-btn-primary{background:var(--coral-btn); color:var(--on-coral)} .rgd-btn-primary:hover{filter:brightness(.94)} /* 明るく光らせない。押せる手応えは沈む方向で */ .rgd-btn-ghost{color:var(--navy); border-color:color-mix(in srgb,var(--navy) 30%,var(--line)); background:var(--surface)} .rgd-btn-ghost:hover{background:color-mix(in srgb,var(--navy) 6%,var(--surface))} :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:6px} /* 動きを減らす設定のとき 🔴 none にしない。0.01ms にする。 none だと transitionend / animationend が発火せず、 その完了を待って次を実行するJSが永久に止まる。 見た目は一瞬で終わるので、動かないことに変わりはない。 個々の部品の「動きの代わりに何を見せるか」は main.css 側に書く。 ここは取りこぼし用の網。 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }