@charset "utf-8";
/* ==================================================================
   留学ドットコム 2026 デザイン  [2026-09-14]

   このファイルは、新デザインのテンプレートだけが読む。
   旧 style.css（264KB・11,000行）は読み込まれないので、
   ここに書いたものが素直にそのまま効く。上書き合戦は起きない。

   ボタン・アイコン・罫線・番号はすべて CSS と SVG で描いている。
   画像はロゴと写真だけ。文言を変えるのに画像を作り直す作業は発生しない。

   クラス名は rd- で始めている（他のプラグインの CSS とぶつからないように）。

   色の基準
     #1583b8 ブランドの青   #0b5f8a 濃い青   #e4f2f9 薄い青の面
     #06c755 LINE の緑（相談ボタンだけに使う）
     #0e2e44 文字の色（黒ではなく濃紺。写真の青となじむ）
   ================================================================== */

:root{
  --paper:#fff; --sky:#eef7fc; --ground:#f7fbfd;
  --ink:#0e2e44; --ink-soft:#4d6d82; --ink-faint:#86a0b0;
  --brand:#1583b8; --brand-deep:#0b5f8a; --brand-tint:#e4f2f9;
  --line:#06c755; --line-deep:#05ac49;
  /* [2026-09-15] スマホのヒーローから LINE を外したので、
     「◯◯留学を見る」が唯一の行き先になった。目立たせるためのアクセント色。 */
  --accent:#ee8722; --accent-deep:#d1701a;
  --rule:#dbeaf2;
  --shadow:0 1px 2px rgba(14,46,68,.05), 0 8px 24px rgba(14,46,68,.06);
  --shadow-lift:0 2px 4px rgba(14,46,68,.05), 0 14px 38px rgba(14,46,68,.09);
  --head-h:118px; --head-top:70px; --wrap:1120px;
  --jp:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Outfit","Zen Kaku Gothic New",sans-serif;
  --hand:"Yomogi","Zen Kaku Gothic New",cursive;
}

/* ---- 最小限のリセット（旧 style.css を読まないので自前で持つ） ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; height:auto; border:0; vertical-align:middle; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.rd-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.rd-eyebrow{
  font-family:var(--en); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin:0 0 12px;
}
.rd-eyebrow-jp{
  font-family:var(--jp); font-weight:700; font-size:14.5px;
  letter-spacing:.04em; color:var(--brand); margin:0 0 12px;
}
.rd-hand{ font-family:var(--hand); font-weight:400; line-height:1.9; color:var(--brand-deep); }
.rd-h2{
  font-family:var(--jp); font-weight:900; margin:0 0 16px;
  font-size:clamp(26px,3.2vw,36px); line-height:1.5;
}
.rd-lead{ margin:0; font-size:16px; line-height:2.05; color:var(--ink-soft); }

/* ---- ボタン ---- */
.rd-btn{
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 20px;
  border-radius:999px; border:1.5px solid transparent;
  font-family:var(--jp); font-weight:700; font-size:15px; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .15s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rd-btn:active{ transform:translateY(1px); }
.rd-btn svg{ flex:none; }
.rd-btn .rd-arw{ transition:transform .2s ease; }
.rd-btn:hover .rd-arw{ transform:translateX(3px); }
.rd-btn-line{ background:var(--line); color:#fff; }
.rd-btn-line:hover{ background:var(--line-deep); color:#fff; }
.rd-btn-mail{ background:var(--paper); color:var(--ink); border-color:var(--rule); }
.rd-btn-mail:hover{ border-color:var(--brand); color:var(--brand); }
/* [2026-09-15] ヒーローの2つ目のボタン。相談ではなく、そのスライドの
   テーマページへ送る。LINEの緑と competing しないよう白のまま置く。 */
.rd-btn-topic{
  background:rgba(255,255,255,.96); color:var(--brand-deep);
  border-color:var(--brand-tint); box-shadow:0 4px 14px rgba(14,46,68,.10);
}
.rd-btn-topic:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.rd-btn-lg{ height:58px; padding:0 32px; font-size:17.5px; }
.rd-btn-line.rd-btn-lg{ box-shadow:0 8px 22px rgba(6,199,85,.28); }
.rd-btn-line.rd-btn-lg:hover{ box-shadow:0 10px 26px rgba(6,199,85,.36); }

/* ==================================================================
   ヘッダー
   ================================================================== */
.rd-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule); transition:box-shadow .25s ease;
}
.rd-head[data-stuck="true"]{ box-shadow:var(--shadow); }

/* 上段：ロゴ・実績・相談ボタン */
.rd-head-in{ height:var(--head-top); display:flex; align-items:center; gap:22px; }
.rd-head-catch{
  margin:0; font-family:var(--jp); font-weight:500; font-size:13px; line-height:1.6;
  color:var(--ink-soft); white-space:nowrap;
}
.rd-head-catch strong{ color:var(--brand-deep); font-weight:700; }

/* 虫めがね（押したときだけ検索バーが開く）  [2026-09-17] */
.rd-searchbtn{
  flex:none; width:40px; height:40px; margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--rule); border-radius:999px;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background-color .16s ease;
  /* [2026-09-18] iPhone の Safari で虫めがねが点のように小さくなっていた。
     Safari は <button> の中身を匿名の箱で包むので（.rd-card の注記と同じ）、
     大きさの決まっていない SVG が縮んでしまう。
     ボタンの既定の余白を消し、アイコンの大きさを CSS でも決めておく。 */
  padding:0; -webkit-appearance:none; appearance:none;
}
.rd-searchbtn svg{ display:block; flex:none; width:19px; height:19px; min-width:19px; }
.rd-searchbtn:hover{ border-color:var(--brand); color:var(--brand); }
.rd-searchbtn[aria-expanded="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
/* 相談ボタンが並んでいる幅では、そちらの右隣に置く（auto マージンは効かせない） */
.rd-head-cta + .rd-searchbtn{ margin-left:0; }

/* 下段：メニュー */
.rd-head-bottom{ border-top:1px solid var(--rule); background:rgba(255,255,255,.75); }

/* 開閉する検索バー */
.rd-searchbar{
  border-top:1px solid var(--rule); background:var(--paper);
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .22s ease;
}
.rd-searchbar[data-open="true"]{ grid-template-rows:1fr; }
.rd-searchbar-in{
  overflow:hidden; min-height:0;
  display:flex; align-items:center; gap:10px;
}
.rd-searchbar[data-open="true"] .rd-searchbar-in{ padding-top:12px; padding-bottom:12px; }
.rd-searchbar-icon{ flex:none; color:var(--ink-faint); }
.rd-searchbar-input{
  flex:1 1 auto; min-width:0; height:42px; border:0; background:none; padding:0;
  font-family:var(--body); font-size:15.5px; color:var(--ink); outline:none;
}
.rd-searchbar-input::placeholder{ color:var(--ink-faint); }
.rd-searchbar-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.rd-searchbar-go{
  flex:none; height:36px; padding:0 20px; border:0; border-radius:999px;
  background:var(--brand); color:#fff; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:14px;
}
.rd-searchbar-go:hover{ background:var(--brand-deep); }
.rd-searchbar-close{
  flex:none; width:32px; height:32px; border:0; border-radius:999px;
  background:none; color:var(--ink-faint); font-size:22px; line-height:1; cursor:pointer;
}
.rd-searchbar-close:hover{ color:var(--ink); background:var(--sky); }

/* スマホのメニューの中の検索 */
.rd-drawer-search{
  display:flex; align-items:center; gap:9px; margin:0 0 18px; padding:0 6px 0 14px;
  border:1.5px solid var(--rule); border-radius:999px; background:var(--paper);
  color:var(--ink-faint);
}
.rd-drawer-search:focus-within{ border-color:var(--brand); }
.rd-drawer-search svg{ flex:none; }
.rd-drawer-search input{
  flex:1 1 auto; min-width:0; height:46px; border:0; background:none; padding:0;
  font-family:var(--body); font-size:16px; color:var(--ink); outline:none;
}
.rd-drawer-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.rd-drawer-search button{
  flex:none; height:36px; padding:0 16px; border:0; border-radius:999px;
  background:var(--brand); color:#fff; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:13.5px;
}

/* 探した言葉に付ける印 */
mark.rd-hit{
  background:#fff2c9; color:inherit; border-radius:3px; padding:0 2px;
  font-weight:700;
}

.rd-logo{ display:block; flex:none; line-height:0; text-decoration:none; }
.rd-logo img{ height:40px; width:auto; }

.rd-nav{ display:flex; align-items:stretch; gap:0; height:48px; }
.rd-nav li{ display:flex; }
.rd-nav a{
  display:flex; align-items:center; padding:0 18px;
  font-family:var(--jp); font-weight:700; font-size:14px; text-decoration:none;
  color:var(--ink); position:relative; white-space:nowrap;
  transition:color .18s ease, background-color .18s ease;
}
.rd-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  background:var(--brand); border-radius:3px 3px 0 0; transform:scaleX(0);
  transform-origin:center; transition:transform .22s ease;
}
.rd-nav a:hover{ color:var(--brand); background:var(--sky); }
.rd-nav a:hover::after{ transform:scaleX(1); }
.rd-head-cta{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }

.rd-burger{
  display:none; margin-left:auto; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--rule); border-radius:12px;
  cursor:pointer; position:relative;
}
.rd-burger i{
  position:absolute; left:12px; right:12px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .28s ease, opacity .18s ease;
}
.rd-burger i:nth-child(1){ top:15px; }
.rd-burger i:nth-child(2){ top:21px; }
.rd-burger i:nth-child(3){ top:27px; }
.rd-burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.rd-burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.rd-burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.rd-drawer{
  position:fixed; left:0; right:0; top:var(--head-h); bottom:0; z-index:55;
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.rd-drawer[data-open="true"]{ opacity:1; transform:none; pointer-events:auto; }
.rd-drawer-nav{ padding:8px 24px; flex:1; overflow-y:auto; }
.rd-drawer-nav li + li{ border-top:1px solid var(--rule); }
/* [2026-09-15] 項目名が長く、日本語が2行に折り返して英字が右端でずれていた。
   日本語と英字を縦に積み、右端には矢印だけを置く形に変えた。 */
.rd-drawer-nav a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:16px 4px; text-decoration:none; color:var(--ink);
}
.rd-drawer-label{ display:block; min-width:0; }
.rd-drawer-label b{
  display:block; font-family:var(--jp); font-weight:700; font-size:16.5px;
  line-height:1.5; letter-spacing:.01em;
}
.rd-drawer-label small{
  display:block; margin-top:3px;
  font-family:var(--en); font-weight:500; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); line-height:1.4;
}
.rd-drawer-arrow{ flex:none; color:var(--ink-faint); transition:color .16s ease; }
.rd-drawer-nav a:hover .rd-drawer-arrow{ color:var(--brand); }
.rd-drawer-nav a:hover .rd-drawer-label b{ color:var(--brand); }
.rd-drawer-foot{
  padding:20px 24px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule); background:var(--sky); display:grid; gap:10px;
}
.rd-drawer-foot .rd-btn{ height:52px; justify-content:center; font-size:16px; }
.rd-drawer-note{ margin:2px 0 0; text-align:center; font-size:13px; line-height:1.7; color:var(--ink-soft); }
body[data-locked="true"]{ overflow:hidden; }

/* ==================================================================
   ヒーロー（スライド）
   目的別のご案内を切り替える。1枚目はカウンセリング力の訴求。
   写真があるスライドは写真、無いスライドはブランドカラーの面＋線画。
   ================================================================== */
.rd-hero{ position:relative; background:var(--paper); overflow:hidden; }
.rd-hero-track{ position:relative; min-height:600px; }

.rd-hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility .55s;
  /* [2026-09-15] 左を白へ溶かすのをやめ、写真を1枚ものとして全面に敷く。
     コピーは不透明な白い箱に入るので、写真を消す必要がない。
     --pos はスライドごとの見せ場（顔）の位置。テンプレート側から渡す。 */
  background:#cfe8f5 var(--photo, none) var(--pos, 50% 32%) / cover no-repeat;
}
.rd-hero-slide.is-on{ opacity:1; visibility:visible; }
/* 写真はゆっくり重ねて切り替えるが、コピーは先に消して後から出す。
   そうしないと、切り替わりの瞬間に前後の白帯と見出しが二重に見える。 */
.rd-hero-slide .rd-hero-in{ opacity:0; transition:opacity .22s ease; }
.rd-hero-slide.is-on .rd-hero-in{ opacity:1; transition:opacity .4s ease .22s; }
/* 写真のないスライド（線画で持たせる） */
.rd-hero-slide:not([style]){
  background:
    radial-gradient(85% 120% at 88% 18%, #4ba6d4 0%, transparent 62%),
    linear-gradient(150deg, #1583b8 0%, #0b5f8a 58%, #08405f 100%);
}
.rd-hero-art{
  position:absolute; top:0; right:0; bottom:0; width:52%;
  display:grid; place-items:center; opacity:.28; pointer-events:none;
}
.rd-hero-art svg{ width:min(58%, 340px); height:auto; }

.rd-hero-in{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto; padding:52px 24px 92px;
  min-height:600px; display:flex; align-items:center;
}
/* [2026-09-15] 白帯が大きすぎて写真がほとんど見えないという指摘を受けて縮めた。
   幅・余白・角丸を詰め、背景も少し透かして写真が抜けるようにしている。 */
.rd-hero-panel{
  /* [2026-09-15] 498px → 620px。
     ジュニアの見出しを2行にしたことで、1行が14文字になった。
     span は white-space:nowrap なので、収まらないと横に溢れる。
     14文字 × 36px = 504px。内側に 556px あれば足りる。 */
  max-width:620px; padding:26px 34px 30px;
  /* [2026-09-15] 写真の上に乗るので、読めなくならない範囲で少しだけ透かす。
     背後のぼかしを強めにしておくと、透けても文字はにじまない。 */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
  border-radius:18px;
  box-shadow:0 10px 40px rgba(14,46,68,.18);
}
.rd-hero-eyebrow{
  display:inline-block; margin:0 0 12px; padding:5px 14px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:13px; letter-spacing:.04em;
}
.rd-hero-h1{
  font-family:var(--jp); font-weight:900; margin:0 0 18px;
  /* いちばん長い行が、どの画面幅でも1行に収まるように連続的に縮める */
  font-size:clamp(22px,3.1vw,36px); line-height:1.42; letter-spacing:.005em;
}
.rd-hero-h1 span{ display:block; white-space:nowrap; }
.rd-hero-h1 .accent{ color:var(--brand-deep); }
.rd-hero-sub{ margin:0 0 22px; font-size:15px; line-height:1.95; color:var(--ink-soft); }
.rd-hero-btns{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
/* [2026-09-15] LINEの導線は、白帯の中ではなく外に出す。
   白帯の中はそのスライドのテーマページへのリンクだけにして、すっきりさせる。
     1000px 以上 … 写真の右下にカードとして置く
     901〜999px  … カードだと白帯とコピー（ジュニア留学）がぶつかるので、
                   ここだけはこれまで通り白帯の中に置く
     900px 以下 … [2026-09-15] ヒーローには置かない。
                  下の固定バーとヘッダーに同じ導線があり、
                  ファーストビューを写真とコピーに使いたいため。 */
@media only screen and (min-width:1000px){
  .rd-hero-btns .rd-btn-line{ display:none; }
}
@media only screen and (max-width:900px){
  /* スマホは上段しか出ていないので、虫めがねはハンバーガーの左に置く */
  .rd-searchbtn{ margin-left:auto; width:38px; height:38px; }
  .rd-searchbar-in{ padding-left:16px; padding-right:16px; }
  .rd-searchbar-close{ display:none; }

  .rd-hero-btns .rd-btn-line{ display:none; }
}
@media only screen and (max-width:999px){
  .rd-hero-line{ display:none; }
}

/* [2026-09-15] 手書きが細くて読みにくいという指摘。
   Yomogi は太さが1種類しかないので、大きくして色を濃くし、
   白い縁を回して写真の上でも輪郭が立つようにしている。 */
/* ------------------------------------------------------------------
   LINE相談の常設カード（PC）                        [2026-09-15]
   ボタンだけだと「何が聞けるのか」が伝わらないので、
   カウンセラーの顔と、その場で答えが返ることを一緒に見せる。
   スライドの外に置いてあるので、どの目的を見ていても消えない。
   ------------------------------------------------------------------ */
.rd-hero-line{
  position:absolute; z-index:4; left:0; right:0; bottom:120px;
  pointer-events:none;              /* 写真側のクリックを邪魔しない */
}
.rd-hero-line-in{ display:flex; justify-content:flex-end; }
/* [2026-09-15] 白い箱をやめた。左の白帯と並ぶと「箱が2つ」に見えたため。
   写真の上に、文とボタンだけを置く。文は白い光で縁取って写真から浮かせる。 */
.rd-hero-line-card{ pointer-events:auto; text-align:center; }
.rd-hero-line-txt{
  margin:0 0 10px; font-family:var(--jp); font-weight:700;
  font-size:13.5px; line-height:1.8; color:var(--ink);
  /* トム君と同じく、白フチで輪郭を作る。
     明るい空の上でも、人物の濃い服の上でも、同じように読める。 */
  text-shadow:
     1px  1px 0 #fff, -1px  1px 0 #fff,  1px -1px 0 #fff, -1px -1px 0 #fff,
     1px  0   0 #fff, -1px  0   0 #fff,  0    1px 0 #fff,  0   -1px 0 #fff,
     0 2px 12px rgba(255,255,255,.85);
}
.rd-hero-line-card .rd-btn{ height:46px; font-size:15px; }

.rd-hero-vert{
  position:absolute; z-index:3; top:40px; right:24px;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--hand); font-size:22px; line-height:2; letter-spacing:.1em;
  color:#06304a;
  -webkit-text-stroke:.4px #06304a;
  text-shadow:
     0 0 3px #fff,  0 0 3px #fff,  0 0 6px #fff,
     1px 1px 2px rgba(255,255,255,.95), -1px -1px 2px rgba(255,255,255,.95),
     0 2px 18px rgba(255,255,255,.85);
}

/* 送り（目的名をそのまま並べる） */
.rd-hero-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.92) 42%);
  padding:22px 0 14px;
}
.rd-hero-nav-in{ display:flex; align-items:center; gap:10px; }
.rd-hero-tabs{ display:flex; gap:8px; overflow-x:auto; flex:1; padding:2px; scrollbar-width:thin; }
.rd-hero-tab{
  appearance:none; -webkit-appearance:none; cursor:pointer; white-space:nowrap;
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--rule); background:var(--paper);
  font-family:var(--jp); font-weight:700; font-size:13px; color:var(--ink-soft);
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.rd-hero-tab:hover{ border-color:var(--brand); color:var(--brand); }
.rd-hero-tab.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rd-hero-arrow{
  appearance:none; -webkit-appearance:none; cursor:pointer; flex:none;
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink); display:grid; place-items:center;
}
.rd-hero-arrow:hover{ border-color:var(--brand); color:var(--brand); }

/* ==================================================================
   実績の帯
   ================================================================== */
.rd-facts{ background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.rd-facts-in{ display:flex; align-items:center; padding:22px 24px; flex-wrap:wrap; }
.rd-fact{ display:flex; align-items:center; gap:12px; padding:6px 30px; flex:1 1 auto; }
.rd-fact + .rd-fact{ border-left:1px solid var(--rule); }
.rd-fact svg{ flex:none; color:var(--brand); }
.rd-fact dl{ margin:0; }
.rd-fact dt{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.rd-fact dd{
  margin:0; font-family:var(--en); font-weight:700; font-size:24.5px; line-height:30px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink);
}
.rd-fact dd em{ font-style:normal; font-family:var(--jp); font-size:15px; font-weight:700; margin-left:2px; }
.rd-facts-note{ padding:6px 26px; font-size:16px; border-left:1px solid var(--rule); flex:none; }

/* [2026-09-15] 4つ目の実績。数字ではないので値の書体だけ和文にする。
   欧文の数字用書体（--en）で和文を出すと、太さも字面も揃わないため。 */
.rd-fact dd.rd-fact-word{
  font-family:var(--jp); font-weight:900; font-size:21px; letter-spacing:.01em;
  color:var(--brand-deep);
}
.rd-fact dd.rd-fact-word em{ font-size:15px; color:var(--brand-deep); }

/* ==================================================================
   悩み
   ================================================================== */
/* ==================================================================
   ① 迷い  ② 私たちの立ち方  ③ カウンセリング        [2026-09-15]
   ひとつの流れだが、長いので地の色で3つに分ける。
   ③ がいちばん押したい場所なので、地を濃くして箱を白く浮かせる。
   ================================================================== */
.rd-worry{ background:var(--ground); padding:68px 0 72px; }
.rd-worry-in{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:52px; align-items:start; }

/* ---- ② 私たちの立ち方。短く言い切る ---- */
.rd-turn{
  position:relative; overflow:hidden;
  background:var(--paper); padding:48px 0 52px;
}
/* [2026-09-15] 「聞いてから組み立てる」と言葉で書くより、
   カウンセラーが相談者と一緒に見ている場面を薄く敷いたほうが早い。
   読ませたいのは文なので、写真は 12% まで沈めて左右も溶かす。 */
.rd-turn::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--photo, none) center 34% / cover no-repeat;
  opacity:.12;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.rd-turn-in{ position:relative; z-index:1; text-align:center; }
.rd-turn-arw{ display:block; margin:0 auto 18px; color:var(--brand); opacity:.45; }
.rd-turn-h{
  margin:0 0 10px; font-family:var(--jp); font-weight:900;
  font-size:clamp(25px,3.4vw,38px); line-height:1.45; letter-spacing:-.01em;
  color:var(--brand-deep); text-wrap:balance;
}
.rd-turn-p{ margin:0 auto 22px; max-width:40em; font-size:15.5px; line-height:1.9; color:var(--ink-soft); }
.rd-turn-say{
  margin:0 auto; display:inline-block;
  padding:13px 26px; border-radius:999px; background:var(--sky);
  font-family:var(--jp); font-weight:900; font-size:clamp(16px,2vw,21px);
  line-height:1.6; color:var(--ink);
}
.rd-turn-say b{ color:var(--brand-deep); }

/* 裏づけ。見出しと説明を1行にして、区切り線だけで並べる */
.rd-turn-proof{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.rd-turn-proof li{
  display:flex; align-items:flex-start; gap:9px;
  padding:4px 22px; text-align:left;
}
.rd-turn-proof li + li{ border-left:1px solid var(--rule); }
.rd-turn-proof svg{ flex:none; color:var(--brand); margin-top:1px; }
.rd-turn-proof span{
  min-width:0; font-size:12.5px; line-height:1.7; color:var(--ink-soft);
}
.rd-turn-proof b{
  display:block; margin-bottom:1px;
  font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.5; color:var(--ink);
}

/* ---- ③ カウンセリング。ここで目が止まるように地を変えて箱を浮かせる ---- */
.rd-counsel{ scroll-margin-top:76px; }

.rd-worry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rd-worry-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:24px 16px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.rd-worry-card svg{ color:var(--brand); }
.rd-worry-card p{ margin:0; font-size:14.5px; line-height:1.75; font-weight:500; }

/* ==================================================================
   考え方の帯（写真の上に手書き）
   ================================================================== */
.rd-creed{
  position:relative; min-height:clamp(220px,26vw,300px);
  display:flex; align-items:center;
  background:
    linear-gradient(90deg, rgba(238,247,252,1) 0%, rgba(238,247,252,.94) 30%, rgba(238,247,252,.45) 58%, rgba(238,247,252,0) 76%),
    var(--photo) right center / cover no-repeat;
}
.rd-creed-copy{ max-width:var(--wrap); margin:0 auto; padding:32px 24px; width:100%; }
.rd-creed-copy p{
  /* [2026-09-15] 手書き（Yomogi）は線が細く、写真の上で読みにくかったので
     本文と同じゴシックにした。階段組みもやめて左揃えにしている。 */
  margin:0; max-width:720px; font-family:var(--jp); font-weight:700;
  font-size:clamp(17px,1.85vw,23.5px); line-height:1.9; letter-spacing:.02em;
  color:#082e46; text-shadow:0 2px 14px rgba(255,255,255,.8), 0 0 4px rgba(255,255,255,.9);
}
/* [2026-09-15] 階段組みをやめて左揃えに。行頭が揃うぶん読みやすい */
.rd-creed-copy .i1,
.rd-creed-copy .i2{ display:inline-block; padding-left:0; }
.rd-creed-copy .big{ font-family:var(--jp); font-weight:900; font-size:1.06em; }

/* ==================================================================
   7つの理由
   ================================================================== */
.rd-strengths{ background:var(--ground); padding:76px 0 80px; }
.rd-sec-head{ margin-bottom:34px; }
.rd-sec-head .rd-lead{ margin-top:8px; }
.rd-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.rd-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rd-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.rd-card-photo{ position:relative; aspect-ratio:16/10; background:var(--brand-tint); }
.rd-card-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
.rd-card-no{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--en); font-weight:700; font-size:13.5px; letter-spacing:.04em;
  color:var(--brand-deep); background:rgba(255,255,255,.94);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
}
.rd-card-body{ padding:18px 18px 20px; }
.rd-card-body b{ font-family:var(--jp); font-weight:700; font-size:17px; display:block; margin-bottom:7px; }
.rd-card-body p, .rd-card-text{ margin:0; font-size:14.5px; line-height:1.85; color:var(--ink-soft); }

/* ==================================================================
   カードはリンクではなくボタン（その場で開く）  [2026-09-15]

   ボタン自身は箱のまま（display:block）にしてある。
   Safari は <button> を flex/grid のコンテナにすると中身を匿名ボックスで包み、
   display を無視する。その結果カードが縮まず、画面の右にはみ出す。
   並べるのは中の .rd-card-in に任せている。
   ================================================================== */
.rd-card{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:block; padding:0; margin:0; text-align:left; font:inherit; color:inherit;
  width:100%; min-width:0; max-width:100%;
}
.rd-card-in{ display:flex; flex-direction:column; height:100%; min-width:0; }
.rd-card-photo{ display:block; }
.rd-card-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.rd-card-text{ display:block; flex:1; }

/* ---- 開いているカードは、ひと目で分かるようにする ---- */
.rd-card.is-open{
  border-color:var(--brand); border-width:2px;
  box-shadow:0 0 0 4px var(--brand-tint);
  transform:none;
}
.rd-card.is-open .rd-card-body{ background:var(--brand-tint); }
.rd-card.is-open .rd-card-photo::after{
  content:""; position:absolute; inset:0; background:rgba(21,131,184,.22);
}
.rd-card.is-open .rd-card-no{ background:var(--brand); color:#fff; }

/* 「くわしく見る」を、丸い ＋ / − のついた行にする */
.rd-card-go{ display:flex; align-items:center; gap:9px; }
.rd-card-chev{
  position:relative; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand-deep);
  transition:background-color .18s ease, color .18s ease, transform .2s ease;
}
.rd-card-chev::before, .rd-card-chev::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); border-radius:1px;
}
.rd-card-chev::before{ width:11px; height:2px; }
.rd-card-chev::after{ width:2px; height:11px; transition:transform .2s ease, opacity .2s ease; }
.rd-card:hover .rd-card-chev{ background:var(--brand); color:#fff; }
.rd-card.is-open .rd-card-chev{ background:var(--brand); color:#fff; }
.rd-card.is-open .rd-card-chev::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
/* 開いている間は「くわしく見る」を「閉じる」に差し替える（CSSだけで入れ替える） */
.rd-card.is-open .rd-card-go{ color:var(--brand-deep); font-weight:700; }
.rd-card.is-open .rd-card-go-t{ visibility:hidden; position:relative; }
.rd-card.is-open .rd-card-go-t::after{
  content:"閉じる"; visibility:visible; position:absolute; left:0; top:0; white-space:nowrap;
}

/* ---- 開いた中身。カードの列をまたいで、横いっぱいに出す ---- */
.rd-reason{
  position:relative;
  grid-column:1 / -1; min-width:0; max-width:100%;   /* 中の表に押し広げられないように */
  background:var(--paper); border:2px solid var(--brand); border-radius:16px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease;
}
.rd-reason.is-open{ opacity:1; transform:none; }
/* どのカードを開いたのかが分かるように、そのカードの真下を指す三角を出す。
   位置（--notch）は JS が開いたカードの中心から入れる。 */
.rd-reason::before, .rd-reason::after{
  content:""; position:absolute; bottom:100%; left:var(--notch,50%);
  width:0; height:0; border-style:solid; transform:translateX(-50%);
}
.rd-reason::before{ border-width:0 13px 13px; border-color:transparent transparent var(--brand); }
.rd-reason::after{ border-width:0 10px 10px; border-color:transparent transparent var(--paper); margin-bottom:-2px; }
.rd-reason-in{ padding:30px 34px 28px; max-width:820px; }
.rd-reason-no{
  margin:0 0 6px; font-family:var(--en); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.rd-reason-title{
  margin:0 0 14px; font-family:var(--jp); font-weight:900;
  font-size:22px; line-height:1.5;
}
.rd-reason-body p{ margin:0 0 14px; font-size:15.5px; line-height:2; color:var(--ink); }
.rd-reason-body p:last-child{ margin-bottom:0; }
.rd-reason-body strong{ font-weight:700; color:var(--brand-deep); }
.rd-reason-body ul{ margin:0 0 16px; padding:0; list-style:none; }
.rd-reason-body ul li{
  position:relative; padding-left:22px; margin-bottom:7px;
  font-size:15px; line-height:1.9;
}
.rd-reason-body ul li::before{
  content:""; position:absolute; left:4px; top:.82em;
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}
/* 特典のような「①②③」もの */
.rd-reason-body ul.rd-detail-num{ counter-reset:rd-n; }
.rd-reason-body ul.rd-detail-num li{
  counter-increment:rd-n; padding:14px 16px 14px 52px; margin-bottom:10px;
  background:var(--ground); border-radius:12px;
}
.rd-reason-body ul.rd-detail-num li::before{
  content:counter(rd-n); left:14px; top:14px;
  width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff;
  font-family:var(--en); font-weight:700; font-size:13.5px;
  display:grid; place-items:center;
}
.rd-reason-body ul.rd-detail-num b{
  display:block; margin-bottom:4px; font-family:var(--jp); font-weight:900; font-size:15.5px;
}

/* 費用の比較表 */
.rd-detail-table{ overflow-x:auto; margin:0 0 16px; border:1px solid var(--rule); border-radius:12px; }
.rd-detail-table table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
.rd-detail-table th, .rd-detail-table td{
  padding:11px 14px; border-bottom:1px solid var(--rule); line-height:1.7; text-align:left;
  vertical-align:top;
}
.rd-detail-table thead th{
  background:var(--brand-tint); color:var(--brand-deep);
  font-family:var(--jp); font-weight:700; font-size:13px; white-space:nowrap;
}
.rd-detail-table tbody th{ font-family:var(--jp); font-weight:700; white-space:nowrap; background:var(--ground); }
.rd-detail-table td.is-good{ background:#fffaf0; font-weight:700; color:#9a6a12; }
.rd-detail-table small{ display:block; font-weight:400; font-size:12px; color:var(--ink-soft); }
.rd-detail-table tbody tr:last-child th, .rd-detail-table tbody tr:last-child td{ border-bottom:0; }

.rd-reason-foot{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--rule);
}
.rd-reason-more{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--rule);
  font-family:var(--jp); font-weight:700; font-size:14.5px;
  text-decoration:none; color:var(--ink);
  transition:border-color .16s ease, color .16s ease;
}
.rd-reason-more:hover{ border-color:var(--brand); color:var(--brand); }
.rd-reason-close{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.rd-reason-close:hover{ color:var(--brand); }

/* ==================================================================
   他社との違い
   ================================================================== */
.rd-diff{ background:var(--paper); overflow:hidden; }
.rd-diff-in{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px; align-items:center; min-height:520px;
}
.rd-diff-photo{
  position:relative; align-self:stretch;
  margin-left:calc(-24px - max(0px, (100vw - 1120px) / 2));   /* 画面の左端でぴったり止める */
  background:var(--photo) center / cover no-repeat;
}
.rd-diff-vert{
  position:absolute; z-index:3; top:32px; right:26px;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--hand); font-size:17px; line-height:2.1; letter-spacing:.08em;
  color:#062c44; text-shadow:0 1px 12px rgba(255,255,255,.85), 0 0 30px rgba(255,255,255,.55);
}
.rd-diff-text{ padding:60px 0; }
.rd-diff-text .rd-lead{ margin-bottom:26px; }
.rd-checks{ display:grid; gap:14px; }
.rd-checks li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; font-size:16px; line-height:1.85; }
.rd-checks svg{ margin-top:6px; flex:none; }

/* ==================================================================
   相談した方の声
   ================================================================== */
.rd-voice{ background:var(--sky); padding:72px 0 78px; }
.rd-voice-head{ display:flex; align-items:flex-end; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.rd-more{
  margin-left:auto; font-family:var(--jp); font-weight:700; font-size:14.5px;
  text-decoration:none; color:var(--brand-deep);
  display:inline-flex; align-items:center; gap:7px;
}
.rd-more .rd-arw{ transition:transform .2s ease; }
.rd-more:hover .rd-arw{ transform:translateX(3px); }
.rd-voices{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rd-voice-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:22px 22px 20px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
}
.rd-voice-body{ min-width:0; }
/* 国旗バッジ＋満足度の星を 1 行に */
.rd-voice-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.rd-nation{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px 3px 4px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-family:var(--jp); font-weight:700; font-size:12.5px; letter-spacing:.02em;
  line-height:1.6; white-space:nowrap;
}
.rd-flag{
  display:block; border-radius:50%; flex:none;
  box-shadow:0 0 0 1.5px #fff, 0 1px 3px rgba(14,46,68,.28);
}
.rd-stars{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.rd-stars b{
  font-family:var(--en); font-weight:700; font-size:13px; color:var(--ink-soft);
  margin-left:6px; font-variant-numeric:tabular-nums;
}
.rd-voice-card p{
  margin:0 0 10px; font-size:14px; line-height:1.85; color:var(--ink-soft);
}
.rd-voice-card q a{ text-decoration:none; }
.rd-voice-card q a:hover{ color:var(--brand); text-decoration:underline; }
/* 顔イラスト（投稿時に選ばれた user-illust-1〜10.png） */
.rd-avatar{
  width:54px; height:54px; flex:none; display:block;
  border-radius:50%; object-fit:cover; background:var(--brand-tint);
  box-shadow:0 0 0 1px var(--rule);
}
.rd-voice-card q{
  display:block; font-family:var(--jp); font-weight:700; font-size:15.5px; line-height:1.85;
  quotes:"「" "」"; margin-bottom:9px;
}
.rd-voice-card cite{ font-style:normal; font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em; }

/* ==================================================================
   最後の相談ブロック
   ================================================================== */
.rd-closing{
  position:relative; padding:66px 0 70px; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
    var(--photo) center / cover no-repeat;
}
.rd-closing-in{ text-align:center; }
.rd-closing-tag{
  display:inline-block; font-family:var(--hand); font-size:15px; line-height:1.6;
  color:var(--brand-deep); background:var(--paper); border:1px solid var(--rule);
  border-radius:14px; padding:7px 16px; margin-bottom:16px;
}
.rd-closing h2{
  font-family:var(--jp); font-weight:900; margin:0 0 12px;
  font-size:clamp(23.5px,3.6vw,36px); line-height:1.55; color:#0b2c42;
}
.rd-closing p{ margin:0 0 30px; font-size:16.5px; color:#1d4f6c; }
.rd-closing-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ==================================================================
   フッター
   ================================================================== */
.rd-foot{ background:var(--paper); border-top:1px solid var(--rule); padding:34px 0 30px; }
/* [2026-09-15] 横1行（ロゴ｜メニュー｜著作権）のつもりで組んでいたが、
   メニューの数が増えると幅に収まらず、勝手に3段へ折り返して
   各段が左に寄ったまま崩れていた（会社概要のページで顕著）。
   はじめから中央ぞろえの3段として組む。項目が増えても崩れない。 */
.rd-foot-in{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
}
.rd-foot-nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px 26px; margin:0; padding:0; list-style:none;
}
.rd-foot-nav a{
  font-family:var(--jp); font-weight:700; font-size:14.5px;
  text-decoration:none; color:var(--ink-soft); transition:color .18s ease;
}
.rd-foot-nav a:hover{ color:var(--brand); }
.rd-copy{
  /* 横1行だったころの名残で右へ寄せていた。中央ぞろえの3段にしたので外す */
  margin:0; font-family:var(--en); font-weight:500; font-size:12.5px;
  letter-spacing:.03em; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

/* ==================================================================
   タブレット・スマホ
   ================================================================== */
@media only screen and (max-width:1000px){
  .rd-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rd-worry-in{ grid-template-columns:1fr; gap:30px; }
  .rd-diff-in{ grid-template-columns:1fr; gap:0; min-height:0; }
  .rd-voices{ grid-template-columns:1fr; }
}

@media only screen and (max-width:900px){
  :root{ --head-h:60px; --head-top:60px; }
  .rd-head-bottom, .rd-head-cta, .rd-head-catch{ display:none; }
  .rd-burger{ display:block; }
  .rd-logo img{ height:34px; }

  body{ font-size:16.5px; }
  .rd-wrap{ padding:0 20px; }

  /* [2026-09-15] スマホで写真がほとんど見えないという指摘。
     原因は2つあった。
       1. 白帯を写真の上に重ねていたので、見えるのは上の150pxだけだった
       2. 縦長の枠に 16:9 の写真を cover で敷いていたので、極端に拡大されていた
     そこで、重ねるのをやめた。写真を上、コピーを下に積む。
     写真もスマホ用に切り直したもの（-sp.jpg）を使う。
     PC用は左半分を白くなじませてあるが、こちらはその加工がない 4:3 の素の写真。
     枠の高さは 75vw（＝4:3 の高さ）。拡大も切り落としも起きない。 */
  /* 写真の見せる高さ。ここを変えれば、下の白い箱の位置も一緒に動く。
     素材は 4:3（=75vw）なので、60vw なら写真の8割が見えて、
     残り2割の上に白い箱が乗る。 [2026-09-15 54vw→60vw] */
  /* --kv-h（箱の開始位置）と --kv-photo-h（写真の高さ）は、
     端末で実際に見えている高さから JS が決める。ここの値は読み込み直後の保険。 */
  .rd-hero{ background:var(--paper); --kv-h:52vw; --kv-photo-h:64vw; }
  .rd-hero-track{ min-height:660px; }        /* 実際の高さは JS が中身に合わせて入れる */
  /* [2026-09-15] PCと同じ1枚の写真を使う。
     16:9 を縦長の枠に cover で敷くので、横が切れる。
     どこを残すかはスライドごとに --pos-sp で指定する（既定は少し右寄り）。 */
  .rd-hero-slide{ background-image:none; background-color:var(--paper); }
  .rd-hero-slide::before{
    content:""; position:absolute; z-index:0; top:0; left:0; right:0;
    height:var(--kv-photo-h, 72vw);
    /* --zoom-sp … 左に余白の多い写真を、スマホで寄って使うための倍率。
       既定は cover（枠いっぱい）。「180% auto」などを渡すと寄る。 */
    /* [2026-09-18] スマホは軽い写真（--photo-sp）を使う。無いときは PC 用。 */
    background:var(--photo-sp, var(--photo)) var(--pos-sp, 58%) center / var(--zoom-sp, cover) no-repeat;
  }
  /* 写真の下端を地の色へ溶かす。白い箱の位置がスライドごとに変わっても、
     写真の切れ目が横線として残らない。素材は 4:3 なので下端は 75vw。 */
  .rd-hero-slide::after{
    content:""; position:absolute; z-index:1; left:0; right:0;
    top:calc(var(--kv-photo-h, 72vw) - 14vw); height:14vw;
    background:linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events:none;
  }
  .rd-hero-in{
    /* [2026-09-15] 白い箱は「下そろえ」。
       高さはいちばん背の高いスライドで決まるので、コピーが短いスライドでは
       上に空きが出る。そのぶん箱を下へ落とすと、写真がより広く見えるうえ、
       スライドを切り替えても箱の下端とタブの位置が動かない。
       padding-top は縮まないので、どのスライドでも写真は最低8割見える。 */
    display:flex; flex-direction:column; justify-content:flex-end;
    align-items:stretch;
    height:100%; min-height:0;
    /* 枠の高さには下の目的タブのぶんも入っているので、
       そのぶんを下の余白として空けておく（--nav-h は JS が入れる）。
       ここを空けないと、下そろえにした箱がタブの下に潜り込む。 */
    padding:var(--kv-h) 22px calc(var(--nav-h, 59px) + var(--line-h, 0px) + 22px);
  }
  .rd-hero-panel{
    /* [2026-09-15] 白い箱をやめた。写真の下は地が白なので、
       箱で囲わなくても読める。囲いを外したほうがすっきりして、
       写真とコピーが1枚の紙の上にあるように見える。 */
    max-width:none; width:100%; padding:22px 2px 0; border-radius:0;
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:none;
  }
  .rd-hero-eyebrow{ font-size:11px; margin-bottom:9px; padding:3px 10px; }
  /* メインコピーはスマホでも大きく出す。
     span は white-space:nowrap なので、折り返せず横に溢れる。
     いちばん長い行は11文字（「ぜんぶ自分が話す時間。」）。
     箱の中で使える幅は 100vw から左右の余白 64px を引いたぶんなので、
     上限 29px・下限 22.5px なら 320px の端末でも収まる。 */
  /* スマホでは折り返しを許す。PCは指定した位置で改行させたいので nowrap だが、
     幅が足りないスマホでそれをやると横に溢れる（ジュニアの14文字の行など）。 */
  .rd-hero-h1{ font-size:clamp(19px,5.95vw,24.5px); line-height:1.42; margin-bottom:10px; }
  .rd-hero-h1 span{ white-space:normal; }
  .rd-hero-sub{ margin-bottom:17px; font-size:12.5px; line-height:1.82; }
  /* [2026-09-15] ファーストビューに目的タブまで入れるため、
     ヒーローの中のボタンだけ少し低くしている。相談バーや他の場所は変えていない。 */
  /* 画面の高さが足りない端末では、箱の中身を一段小さくして
     写真と目的タブのぶんを空ける（JS が is-tight を付ける）。 */
  .rd-hero.is-tight .rd-hero-panel{ padding:17px 2px 0; }
  .rd-hero.is-tight .rd-hero-eyebrow{ font-size:10.5px; margin-bottom:6px; padding:2px 9px; }
  .rd-hero.is-tight .rd-hero-h1{ font-size:clamp(17px,5.1vw,21px); line-height:1.38; margin-bottom:7px; }
  .rd-hero.is-tight .rd-hero-sub{ font-size:11.5px; line-height:1.72; margin-bottom:12px; }
  .rd-hero.is-tight .rd-hero-btns .rd-btn{ height:38px; }
  .rd-hero.is-tight .rd-hero-btns .rd-btn-topic{ font-size:12.5px; padding:0 14px; }

  .rd-hero-btns{ align-self:stretch; gap:8px; }
  .rd-hero-btns .rd-btn{ justify-content:center; height:42px; }
  /* スマホではこのボタンだけが行き先なので、塗りのボタンにして前に出す */
  .rd-hero-btns .rd-btn-topic{
    font-size:14px; padding:0 20px;
    background:var(--accent); color:#fff; border-color:var(--accent);
    box-shadow:none;
  }
  .rd-hero-btns .rd-btn-topic:hover,
  .rd-hero-btns .rd-btn-topic:active{
    background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);
  }
  .rd-hero-art{ width:100%; opacity:.22; }
  .rd-hero-art svg{ width:52%; }
  /* 手書きは写真の上。写真が広くなったぶん、下のほうに置いても読める */
  .rd-hero-vert{
    bottom:auto; right:auto; left:16px; top:14px;
    writing-mode:horizontal-tb;
    font-size:14.5px; line-height:1.8;
    text-shadow:0 1px 10px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.85);
  }
  .rd-hero-nav{ padding:6px 0 5px; }        /* 目的のタブが、下の固定バーに隠れないように詰める */
  .rd-hero-nav-in{ gap:4px; padding:0 8px; }

  /* [2026-09-15] 丸いボタンをやめて、選んでいるものに下線を引くだけにした。
     すぐ上にオレンジの塗りボタンがあるので、同じ形が並ぶと
     どれが行き先のボタンなのか分からなくなる。
     ここは「いま何を見ているか」を示す見出しの並びとして扱う。 */
  .rd-hero-tabs{ gap:16px; padding:0 4px; scrollbar-width:none; }
  .rd-hero-tabs::-webkit-scrollbar{ display:none; }
  .rd-hero-tab{
    background:none; border:none; border-radius:0; box-shadow:none;
    padding:9px 1px 7px; font-size:13px; color:var(--ink-faint);
    border-bottom:2px solid transparent;
  }
  .rd-hero-tab:hover{ border-color:transparent; border-bottom-color:transparent; color:var(--ink-soft); }
  .rd-hero-tab.is-on{
    background:none; color:var(--brand-deep); font-weight:900;
    border-color:transparent; border-bottom-color:var(--brand);
  }
  /* 左右の送りも、囲いを外して記号だけにする */
  .rd-hero-arrow{
    width:28px; height:28px; border:none; background:none; box-shadow:none;
    color:var(--ink-faint);
  }
  .rd-hero-arrow:hover{ border-color:transparent; color:var(--brand); }

  /* [2026-09-15] スマホは2列。ラベルと値をどちらも1行に収めて、4つの位置を揃える。 */
  .rd-facts-in{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; padding:14px 14px; }
  .rd-fact{ padding:11px 6px; gap:8px; min-width:0; }
  .rd-fact svg{ width:20px; height:20px; }
  .rd-fact dl{ min-width:0; }
  .rd-fact:nth-child(odd){ border-left:none; }
  .rd-fact:nth-child(even){ border-left:1px solid var(--rule); }
  .rd-fact:nth-child(n+3){ border-top:1px solid var(--rule); }
  .rd-fact dt{ font-size:11.5px; white-space:nowrap; }
  /* 値の書体が違っても箱の高さを揃える。ここが揃わないと4つの位置がずれる。 */
  .rd-fact dd{ font-size:19px; line-height:23px; height:25px; display:flex; align-items:baseline; white-space:nowrap; }
  .rd-fact dd em{ font-size:12.5px; }
  .rd-fact dd.rd-fact-word{ font-size:18px; line-height:23px; white-space:nowrap; }
  .rd-fact dd.rd-fact-word em{ font-size:12.5px; }
  .rd-facts-note{ grid-column:1 / -1; border-left:none; border-top:1px solid var(--rule); padding:12px 14px; text-align:center; }

  .rd-worry{ padding:48px 0 52px; }
  .rd-turn{ padding:44px 0 48px; }
  .rd-turn-arw{ margin-bottom:12px; }
  .rd-turn-p{ font-size:14px; line-height:1.85; margin-bottom:18px; }
  .rd-turn-say{ padding:12px 20px; border-radius:16px; }
  .rd-turn-proof{ grid-template-columns:1fr; margin-top:24px; }
  .rd-turn-proof li{ padding:13px 4px; }
  .rd-turn-proof li + li{ border-left:none; border-top:1px solid var(--rule); }
  .rd-counsel{ padding:48px 0 54px; scroll-margin-top:64px; }
  .rd-counsel-box{ box-shadow:0 12px 34px rgba(14,46,68,.12); }
  .rd-br-pc{ display:none; }
  .rd-worry-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .rd-worry-card{ padding:18px 12px 16px; }
  .rd-worry-card p{ font-size:13.5px; }

  .rd-creed{
    min-height:0; display:block;
    background:
      linear-gradient(rgba(238,247,252,.72), rgba(238,247,252,.5)),
      var(--photo) center / cover no-repeat;
  }
  .rd-creed-copy{ padding:38px 20px; }
  .rd-creed-copy p{ font-size:18px; line-height:1.95; }

  .rd-strengths{ padding:52px 0 58px; }
  .rd-cards{ gap:12px; }
  .rd-reason-in{ padding:22px 18px 20px; }
  .rd-reason-title{ font-size:19px; margin-bottom:12px; }
  .rd-reason-body p{ font-size:15px; line-height:1.95; }
  .rd-reason-body ul.rd-detail-num li{ padding:12px 14px 12px 48px; }
  .rd-reason-foot{ gap:14px; }
  .rd-card-body{ padding:14px 14px 18px; }
  .rd-card-body b{ font-size:15.5px; }
  .rd-card-body p{ font-size:13.5px; }

  .rd-diff-photo{ margin:0 -20px; aspect-ratio:4/3; }
  .rd-diff-vert{ writing-mode:horizontal-tb; top:auto; bottom:16px; right:16px; left:16px; font-size:15.5px; }
  .rd-diff-text{ padding:36px 0 52px; }

  .rd-voice{ padding:52px 0 58px; }
  .rd-voice-head{ margin-bottom:22px; }
  .rd-more{ margin-left:0; }

  .rd-closing{ padding:48px 0 54px; }
  .rd-closing-btns{ flex-direction:column; }
  .rd-closing-btns .rd-btn{ justify-content:center; }

  .rd-foot-in{ gap:18px; }
  .rd-foot-nav{ gap:11px 20px; }

}

@media only screen and (max-width:420px){
  .rd-cards{ grid-template-columns:minmax(0,1fr); }
}

/* ==================================================================
   オンライン留学カウンセリング  [2026-09-14]
   カウンセラーが吹き出しで話しかけてくる形。画像は使っていない。
   ================================================================== */
.rd-counsel{ background:var(--sky); padding:64px 0 72px; }
.rd-counsel-box{
  position:relative;
  background:var(--paper); border:1px solid #d8eaf5; border-radius:22px;
  padding:36px 36px 30px; box-shadow:0 18px 50px rgba(14,46,68,.13);
}
/* [2026-09-15] 箱の肩に掛けるリボン。
   下に小さな折り返しを作ると、貼ったラベルではなく掛けた帯に見える。 */
.rd-counsel-ribbon{
  position:absolute; z-index:2; top:-13px; left:32px;
  display:inline-block; padding:8px 20px 8px 18px;
  background:var(--accent); color:#fff;
  font-family:var(--jp); font-weight:900; font-size:13.5px; letter-spacing:.03em;
  line-height:1; white-space:nowrap; border-radius:5px 5px 5px 0;
  box-shadow:0 7px 18px rgba(238,135,34,.34);
}
.rd-counsel-ribbon::after{
  content:""; position:absolute; left:0; bottom:-7px;
  border-style:solid; border-width:7px 8px 0 0;
  border-color:var(--accent-deep) transparent transparent transparent;
}
.rd-counsel-head{ margin-bottom:26px; }
.rd-counsel-head .rd-h2{ font-size:clamp(21.5px,2.6vw,29px); margin-bottom:10px; }
.rd-counsel-head .rd-lead{ font-size:15px; }

.rd-counsel-talk{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; }
.rd-counselor{ text-align:center; width:82px; flex:none; }
.rd-counselor svg{ display:block; margin:0 auto; }
.rd-counselor-name{
  display:block; margin-top:7px; font-size:11.5px; line-height:1.5;
  color:var(--ink-faint); font-weight:500;
}

/* 吹き出し */
.rd-bubble{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  border-radius:4px 16px 16px 16px; padding:16px 20px; margin:0 0 16px;
  font-size:16px; line-height:1.85; font-weight:500;
}
.rd-bubble small{ display:block; margin-top:6px; font-size:13.5px; font-weight:400; color:var(--ink-soft); line-height:1.7; }
.rd-qno{
  display:inline-block; margin-right:8px; padding:1px 9px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-family:var(--en); font-weight:700; font-size:12.5px; letter-spacing:.06em; vertical-align:2px;
}

/* 選択肢 */
.rd-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.rd-choice{
  appearance:none; -webkit-appearance:none; cursor:pointer; text-align:left;
  background:var(--paper); border:1.5px solid var(--rule); border-radius:12px;
  padding:14px 16px; font-family:var(--jp); font-weight:700; font-size:15px; color:var(--ink);
  transition:border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.rd-choice:hover{ border-color:var(--brand); background:var(--brand-tint); }
.rd-choice:active{ transform:translateY(1px); }
.rd-choice.on{ border-color:var(--brand); background:var(--brand); color:#fff; }

/* 名前の入力 */
.rd-name-row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.rd-name-input{
  flex:1 1 220px; min-width:0; height:52px; padding:0 16px;
  border:1.5px solid var(--rule); border-radius:12px; background:var(--paper);
  font-family:var(--jp); font-size:17px; font-weight:700; color:var(--ink);
}
.rd-name-input::placeholder{ color:var(--ink-faint); font-weight:400; }
.rd-name-input:focus{ outline:none; border-color:var(--brand); }
.rd-name-row .rd-btn{ height:52px; }

.rd-back, .rd-skip, .rd-restart{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  padding:4px 2px; font-family:var(--jp); font-size:13.5px; font-weight:700;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}
.rd-back:hover, .rd-skip:hover, .rd-restart:hover{ color:var(--brand); }

/* 考えている間 */
.rd-typing{ display:inline-flex; gap:5px; padding:18px 20px; }
.rd-typing i{
  width:7px; height:7px; border-radius:50%; background:var(--ink-faint);
  animation:rd-dot 1.1s infinite ease-in-out;
}
.rd-typing i:nth-child(2){ animation-delay:.18s; }
.rd-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes rd-dot{ 0%,60%,100%{ opacity:.28; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* 提案 */
.rd-timing{ display:block; margin-top:8px; color:var(--brand-deep); font-size:15px; }
.rd-plan{
  background:var(--paper); border:2px solid var(--brand); border-radius:16px;
  padding:22px 24px 20px; margin:0 0 16px;
}
.rd-plan-label{
  margin:0 0 8px; font-family:var(--en); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.rd-plan-title{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px;
  font-family:var(--jp); font-weight:900; font-size:20.5px; line-height:1.5;
}
.rd-plan-flags{ display:inline-flex; gap:4px; }
.rd-plan-lead{ margin:0 0 10px; font-size:15px; line-height:1.9; color:var(--ink-soft); }
.rd-plan-span{
  margin:0 0 16px; display:inline-block; padding:5px 12px; border-radius:8px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-family:var(--jp); font-weight:700; font-size:14px;
}
.rd-plan-links{ display:flex; gap:10px; flex-wrap:wrap; }
.rd-plan-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--rule);
  font-family:var(--jp); font-weight:700; font-size:14.5px; text-decoration:none; color:var(--ink);
  transition:border-color .16s ease, color .16s ease;
}
.rd-plan-link::after{ content:"→"; font-family:var(--en); }
.rd-plan-link:hover{ border-color:var(--brand); color:var(--brand); }

.rd-handoff{ background:var(--brand-tint); border-color:transparent; }
.rd-result-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rd-answers-note{ margin:0; font-size:13px; line-height:1.8; color:var(--ink-faint); }

.rd-progress{ display:flex; gap:7px; justify-content:center; margin:22px 0 10px; }
.rd-progress span{ width:9px; height:9px; border-radius:50%; background:var(--rule); transition:background-color .2s ease; }
.rd-progress span.on{ background:var(--brand); }
.rd-privacy{ margin:0; text-align:center; font-size:12.5px; color:var(--ink-faint); }

/* 「7つの理由」の おすすめ表示 */
.rd-card.is-pick{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.rd-pick{
  position:absolute; top:12px; right:12px; z-index:2;
  padding:4px 10px; border-radius:999px; background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:12px; letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(11,95,138,.35);
}
.rd-voice-filter{
  margin:0 0 14px; display:inline-block; padding:5px 13px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:13px;
}

@media only screen and (max-width:900px){
  .rd-counsel{ padding:40px 0 44px; }
  .rd-counsel-box{ padding:28px 18px 22px; border-radius:18px; }
  .rd-counsel-ribbon{ top:-11px; left:18px; padding:7px 15px 7px 14px; font-size:12px; }
  .rd-counsel-ribbon::after{ bottom:-6px; border-width:6px 7px 0 0; }
  .rd-counsel-head{ margin-bottom:20px; }
  .rd-counsel-talk{ grid-template-columns:1fr; gap:12px; }
  .rd-counselor{ display:flex; align-items:center; gap:10px; width:auto; text-align:left; }
  .rd-counselor svg{ width:40px; height:40px; margin:0; }
  .rd-counselor-name{ margin-top:0; }
  .rd-counselor-name br{ display:none; }
  .rd-bubble{ font-size:15.5px; padding:14px 16px; }
  .rd-choices{ grid-template-columns:1fr; }
  .rd-choice{ padding:13px 14px; }
  .rd-name-row .rd-btn{ flex:1 1 100%; justify-content:center; }
  .rd-plan{ padding:18px 16px 16px; }
  .rd-plan-title{ font-size:18px; }
  .rd-result-cta{ flex-direction:column; align-items:stretch; }
  .rd-result-cta .rd-btn{ justify-content:center; }
}

/* 提案カードの「語学学校に通う期間」（無料エージェントの前提なので必ず出す） */
.rd-plan-school{
  margin:0 0 10px; padding:10px 14px; border-radius:10px;
  background:var(--sky); color:var(--ink);
  font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.75;
}

/* ---- コピーしたあとの案内（モーダル） ---- */
.rd-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.rd-modal[hidden]{ display:none; }
.rd-modal-bg{ position:absolute; inset:0; background:rgba(8,34,52,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.rd-modal-box{
  position:relative; z-index:1; width:100%; max-width:440px;
  background:var(--paper); border-radius:20px; padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(8,34,52,.35); text-align:center;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.rd-modal-icon{ margin-bottom:12px; }
.rd-modal-icon svg{ display:inline-block; }
.rd-modal-title{ margin:0 0 8px; font-family:var(--jp); font-weight:900; font-size:21.5px; line-height:1.5; }
.rd-modal-lead{ margin:0 0 18px; font-size:15px; line-height:1.85; color:var(--ink-soft); }
.rd-modal-lead strong{ color:var(--ink); font-weight:700; }

.rd-modal-steps{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:0 0 18px; font-family:var(--jp); font-size:12.5px; font-weight:700; color:var(--brand-deep);
}
.rd-modal-steps span{ display:inline-flex; align-items:center; gap:6px; }
.rd-modal-steps b{
  width:21px; height:21px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-family:var(--en); font-size:12px;
}
.rd-modal-steps i{ color:var(--ink-faint); font-style:normal; }

.rd-modal-text{ text-align:left; margin-bottom:18px; }
.rd-modal-text-label{
  display:block; margin-bottom:6px; font-family:var(--en); font-weight:600;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.rd-modal-textarea{
  width:100%; resize:vertical; padding:12px 14px;
  border:1px solid var(--rule); border-radius:10px; background:var(--ground);
  font-family:var(--body); font-size:13.5px; line-height:1.8; color:var(--ink);
}
.rd-modal-textarea:focus{ outline:none; border-color:var(--brand); }

.rd-modal-cta{ display:grid; gap:10px; justify-items:stretch; }
.rd-modal-cta .rd-btn{ justify-content:center; }
.rd-modal-recopy{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  padding:4px; font-family:var(--jp); font-size:13.5px; font-weight:700; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.rd-modal-recopy:hover{ color:var(--brand); }
.rd-modal-close{
  position:absolute; top:10px; right:12px; width:34px; height:34px;
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--ink-faint); border-radius:50%;
}
.rd-modal-close:hover{ color:var(--ink); background:var(--sky); }

@media only screen and (max-width:900px){
  .rd-modal-box{ padding:26px 20px 22px; border-radius:18px; }
  .rd-modal-title{ font-size:19.5px; }
  .rd-modal-steps{ font-size:12px; gap:6px; }
}

/* コピーが自動でできなかったとき（http や古いブラウザ）は、本文欄を主役にする */
.rd-modal.is-manual .rd-modal-textarea{
  border-color:var(--brand); background:var(--paper); font-size:14px;
  box-shadow:0 0 0 3px var(--brand-tint);
}
.rd-modal.is-manual .rd-modal-text-label::after{ content:"（ここを選択してコピー）"; margin-left:6px; color:var(--brand); }

/* 前回の回答が残っているときの帯 */
.rd-again{
  background:var(--paper); border:1px dashed var(--brand); border-radius:14px;
  padding:16px 18px; margin-bottom:16px;
}
.rd-again-lead{ margin:0 0 4px; font-family:var(--jp); font-weight:700; font-size:15px; }
.rd-again-sum{ margin:0 0 12px; font-size:13px; line-height:1.8; color:var(--ink-soft); }
.rd-again-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.rd-again-show{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--brand);
  background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:14.5px;
}
.rd-again-show:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.rd-again-new{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  padding:4px 2px; font-family:var(--jp); font-size:13.5px; font-weight:700;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}
.rd-again-new:hover{ color:var(--brand); }

/* ---- クチコミの入れ替え ---- */
.rd-voices{ transition:opacity .22s ease; }
.rd-voices.is-swapping{ opacity:0; }
.rd-voice-note{ font-size:14px; color:var(--ink-faint); }
.rd-voice-note strong{ color:var(--brand-deep); font-weight:700; font-variant-numeric:tabular-nums; }
.rd-voice-actions{ margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.rd-voice-next{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--rule); background:var(--paper);
  font-family:var(--jp); font-weight:700; font-size:14.5px; color:var(--ink);
  transition:border-color .16s ease, color .16s ease;
}
.rd-voice-next:hover{ border-color:var(--brand); color:var(--brand); }
.rd-voice-next .rd-arw{ transition:transform .2s ease; }
.rd-voice-next:hover .rd-arw{ transform:translateX(3px); }
.rd-more{ margin-left:0; }

@media only screen and (max-width:900px){
  .rd-voice-actions{ margin-left:0; gap:14px; }
}

/* ---- クチコミの絞り込みフォーム ---- */
.rd-vf{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:18px 20px; margin-bottom:20px;
}
.rd-vf-fields{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.rd-vf-field{ display:flex; flex-direction:column; gap:6px; flex:1 1 190px; min-width:0; }
.rd-vf-field > span{
  font-family:var(--jp); font-weight:700; font-size:13px; color:var(--ink-soft);
}
.rd-vf-field select{
  appearance:none; -webkit-appearance:none;
  height:48px; padding:0 38px 0 14px; width:100%;
  border:1.5px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-weight:700; font-size:15px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#4d6d82 50%),linear-gradient(135deg,#4d6d82 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.rd-vf-field select:focus{ outline:none; border-color:var(--brand); }
.rd-vf-go{ height:48px; flex:none; }
.rd-vf-clear{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  padding:4px 2px; font-family:var(--jp); font-size:13px; font-weight:700;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}
.rd-vf-clear:hover{ color:var(--brand); }
.rd-vf-result{ margin:12px 0 0; font-family:var(--jp); font-weight:700; font-size:13.5px; }
.rd-vf-result:empty{ display:none; }
.rd-vf-result.is-hit{ color:var(--brand-deep); }
.rd-vf-result.is-none{ color:#b4531f; }

@media only screen and (max-width:900px){
  .rd-vf{ padding:16px 14px; border-radius:14px; }
  .rd-vf-fields{ gap:12px; }
  .rd-vf-field{ flex:1 1 100%; }
  .rd-vf-go{ flex:1 1 100%; justify-content:center; }
}

.rd-vf-note{ margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--ink-faint); }

/* ==================================================================
   下層ページ  [2026-09-14]
   コラム記事・固定ページを、トップと同じ見た目のワンカラムで出す。
   本文は既存の記事がそのまま入ってくるので、
   どんなタグが来ても崩れないように受け皿を広めに用意している。
   ================================================================== */
.rd-page-head{ background:var(--sky); border-bottom:1px solid var(--rule); padding:22px 0 34px; }
.rd-crumb{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12.5px; line-height:1.8; color:var(--ink-faint); margin-bottom:18px;
}
.rd-crumb a{ color:var(--ink-soft); text-decoration:none; }
.rd-crumb a:hover{ color:var(--brand); text-decoration:underline; }
.rd-crumb em{ font-style:normal; color:var(--ink-faint); }
.rd-page-head-in{ max-width:820px; }
.rd-page-eyebrow{
  display:inline-block; margin:0 0 12px; padding:5px 14px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:13px; letter-spacing:.04em;
}
.rd-page-title{
  margin:0; font-family:var(--jp); font-weight:900;
  font-size:clamp(23px,3.2vw,36px); line-height:1.5; letter-spacing:.005em;
}
.rd-page-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.rd-page-meta time{
  font-family:var(--en); font-weight:600; font-size:13px; letter-spacing:.04em;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.rd-page-tag{
  padding:4px 11px; border-radius:999px; background:var(--paper); border:1px solid var(--rule);
  font-family:var(--jp); font-weight:700; font-size:12px; color:var(--brand-deep);
}

.rd-page{ background:var(--paper); padding:44px 0 64px; }
.rd-read{ max-width:760px; margin:0 auto; }
.rd-hero-figure{ margin:0 0 32px; }
.rd-hero-figure img{ width:100%; height:auto; border-radius:16px; display:block; }

/* ---- 本文（既存の記事がそのまま入る） ---- */
.rd-article{ font-size:17px; line-height:2.05; }
.rd-article > *:first-child{ margin-top:0; }
.rd-article p{ margin:0 0 1.6em; }
/* ---- 記事の見出し  [2026-09-15 作り直し] --------------------------
   このサイトのコラムは h3 を章見出し、h4 を小見出しに使っている。
   h2 は実際にはほとんど出てこない（ある記事で h3×10・h4×12・h2×0）。
   前の版はいちばん強い装飾を h2 に当てていたので、
   実際の章の切れ目に何の印も付いていなかった。

   いまは h2 と h3 を「章の頭」として同じ扱いにして、
   帯・上の区切り線・大きめの余白で、塊の始まりを見えるようにしている。
   h4 は章の中の小見出しなので、線1本ぶん弱くしてある。
   ------------------------------------------------------------------ */
.rd-article h2,
.rd-article h3{
  position:relative;
  font-family:var(--jp); font-weight:900; line-height:1.6;
  margin:3em 0 1em; padding:14px 18px 13px 20px;
  background:var(--sky); border-radius:0 12px 12px 0;
  border-left:6px solid var(--brand);
  color:var(--ink);
}
.rd-article h2{ font-size:23px; }
.rd-article h3{ font-size:20px; }

/* 章と章のあいだに、細い区切りを1本。塊が変わったことを先に知らせる */
.rd-article h2::before,
.rd-article h3::before{
  content:""; position:absolute; left:-6px; right:0; top:-1.5em;
  height:1px; background:var(--rule);
}
/* 本文のいちばん最初の見出しには、区切りは要らない */
.rd-article > h2:first-child::before,
.rd-article > h3:first-child::before{ display:none; }

/* 小見出し。章の中にあることが分かるよう、少し内側に置く */
.rd-article h4{
  font-family:var(--jp); font-weight:700; font-size:17.5px; line-height:1.7;
  margin:2.2em 0 .7em; padding-left:15px; position:relative; color:var(--brand-deep);
}
.rd-article h4::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:2px; background:var(--brand); opacity:.85;
}
.rd-article h5{
  font-family:var(--jp); font-weight:700; font-size:16px; margin:1.8em 0 .5em; color:var(--ink-soft);
}

/* 見出しの直後の段落は、くっつけて見せる */
.rd-article h2 + p,
.rd-article h3 + p,
.rd-article h4 + p{ margin-top:0; }
.rd-article a{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }
.rd-article a:hover{ color:var(--brand); }
.rd-article strong{ font-weight:700; }
.rd-article ul, .rd-article ol{ margin:0 0 1.6em; padding-left:1.4em; }
.rd-article ul{ list-style:disc; }
.rd-article ol{ list-style:decimal; }
.rd-article li{ margin-bottom:.5em; }
.rd-article img{ max-width:100%; height:auto; border-radius:12px; }
.rd-article figure{ margin:0 0 1.6em; }
.rd-article figcaption{ margin-top:8px; font-size:13px; color:var(--ink-faint); text-align:center; }
.rd-article blockquote{
  margin:0 0 1.6em; padding:16px 20px; border-left:4px solid var(--rule);
  background:var(--ground); border-radius:0 10px 10px 0; color:var(--ink-soft);
}
.rd-article table{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:15px; }
.rd-article th, .rd-article td{ border:1px solid var(--rule); padding:10px 12px; text-align:left; vertical-align:top; }
.rd-article th{ background:var(--sky); font-weight:700; white-space:nowrap; }
.rd-table-scroll{ overflow-x:auto; margin:0 0 1.6em; -webkit-overflow-scrolling:touch; }
.rd-table-scroll table{ margin:0; min-width:520px; }
.rd-article iframe, .rd-article video{ max-width:100%; }
.rd-article hr{ border:0; border-top:1px solid var(--rule); margin:2.4em 0; }

/* ---- 同じ分類の記事 ---- */
.rd-related{ margin-top:56px; padding-top:32px; border-top:1px solid var(--rule); }
.rd-related-title{ font-family:var(--jp); font-weight:900; font-size:19px; margin:0 0 18px; }
.rd-related-list{ display:grid; gap:12px; }
.rd-related-list a{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:12px; border:1px solid var(--rule); border-radius:14px; text-decoration:none;
  transition:border-color .16s ease, background-color .16s ease;
}
.rd-related-list a:hover{ border-color:var(--brand); background:var(--sky); }
.rd-related-thumb img{ width:88px; height:66px; object-fit:cover; object-position:50% 28%; border-radius:9px; display:block; }
.rd-related-text b{ display:block; font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.6; }
.rd-related-text time{
  display:block; margin-top:5px; font-family:var(--en); font-weight:500; font-size:12px;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

@media only screen and (max-width:900px){
  .rd-page-head{ padding:16px 0 26px; }
  .rd-crumb{ margin-bottom:14px; font-size:11.5px; }
  .rd-page-meta{ margin-top:12px; }
  .rd-page{ padding:32px 0 48px; }
  .rd-hero-figure{ margin-bottom:24px; }
  .rd-hero-figure img{ border-radius:12px; }
  .rd-article{ font-size:16px; line-height:2; }
  .rd-article h2,
  .rd-article h3{ margin:2.4em 0 .9em; padding:11px 13px 10px 15px; border-left-width:5px; }
  .rd-article h2{ font-size:18.5px; }
  .rd-article h3{ font-size:17px; }
  .rd-article h2::before,
  .rd-article h3::before{ top:-1.2em; }
  .rd-article h4{ font-size:16px; padding-left:13px; }
  .rd-article h5{ font-size:15px; }
  .rd-related{ margin-top:40px; }
  .rd-related-thumb img{ width:72px; height:54px; }
  .rd-related-text b{ font-size:14px; }
}

/* ---- 「こんなことで悩んでいませんか？」の6つを、順にぽわんと跳ねさせる ----
   1周 7 秒。6枚が 0.5 秒ずつずれて跳ねるので、目線が順に流れる。
   動きが苦手な方の設定（prefers-reduced-motion）では止める。 */
@keyframes rd-pop{
  0%, 62%, 100%{ transform:scale(1);    box-shadow:0 0 0 rgba(14,46,68,0); }
  8%           { transform:scale(1.055); box-shadow:0 10px 26px rgba(14,46,68,.14); }
  18%          { transform:scale(.995);  box-shadow:0 4px 12px rgba(14,46,68,.07); }
  26%          { transform:scale(1);     box-shadow:0 0 0 rgba(14,46,68,0); }
}
@keyframes rd-pop-icon{
  0%, 62%, 100%{ transform:scale(1) rotate(0); }
  8%           { transform:scale(1.18) rotate(-5deg); }
  20%          { transform:scale(1) rotate(0); }
}
.rd-worry-card{
  will-change:transform;
  animation:rd-pop 7s ease-in-out infinite;
  animation-delay:calc( var(--i, 0) * .5s );
}
.rd-worry-card svg{
  animation:rd-pop-icon 7s ease-in-out infinite;
  animation-delay:calc( var(--i, 0) * .5s );
}

@media (prefers-reduced-motion: reduce){
  .rd-worry-card, .rd-worry-card svg{ animation:none; }
}

/* ---- 「7つの理由」はカードごとリンクにする ---- */
.rd-card{ text-decoration:none; color:inherit; }
.rd-card-body{ display:flex; flex-direction:column; flex:1; }
.rd-card-body p{ flex:1; }
.rd-card-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--jp); font-weight:700; font-size:13px; color:var(--brand-deep);
}
.rd-card-go .rd-arw{ display:inline-flex; transition:transform .2s ease; }
.rd-card:hover .rd-card-go{ color:var(--brand); }
.rd-card:hover .rd-card-go .rd-arw{ transform:translateX(3px); }
.rd-card:hover .rd-card-photo img{ transform:scale(1.04); }
.rd-card-photo img{ transition:transform .3s ease; }


/* ==================================================================
   選ばれる理由ページ  [2026-09-15]
   本文は元記事をそのまま読み込んでいる。ここは見せ方だけを作る。
   ================================================================== */
.rd-rs-intro{ padding:40px 0 30px; }
.rd-rs-intro .rd-article{ font-size:17px; }
.rd-rs-intro .rd-article p:first-child{ font-family:var(--jp); font-weight:700; font-size:19px; line-height:1.95; }

/* ---- 目次 ---- */
.rd-rs-toc-wrap{ background:var(--paper); padding:0 0 44px; }
.rd-rs-toc{
  max-width:var(--read); margin:0 auto; padding:24px 26px;
  background:var(--sky); border:1px solid var(--rule); border-radius:16px;
}
.rd-rs-toc-title{
  margin:0 0 14px; font-family:var(--jp); font-weight:900; font-size:16px;
  display:flex; align-items:center; gap:9px;
}
.rd-rs-toc-title::before{
  content:""; width:5px; height:19px; border-radius:3px; background:var(--brand);
}
.rd-rs-toc ol{ counter-reset:toc; display:grid; gap:2px; }
.rd-rs-toc li{ counter-increment:toc; }
.rd-rs-toc a{
  display:flex; align-items:flex-start; gap:11px; padding:9px 6px;
  font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.7;
  color:var(--ink); text-decoration:none; border-radius:8px;
}
.rd-rs-toc a::before{
  content:counter(toc,decimal-leading-zero);
  flex:none; font-family:var(--en); font-weight:700; font-size:12px;
  color:var(--brand); background:var(--paper); border:1px solid var(--rule);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
}
.rd-rs-toc a:hover{ background:var(--paper); color:var(--brand); }

/* ---- 理由1〜7 ---- */
.rd-rs-reason{ background:var(--paper); padding:52px 0 56px; scroll-margin-top:90px; }
.rd-rs-reason.is-alt{ background:var(--ground); }
.rd-rs-reason-head{
  max-width:var(--read); margin:0 auto 26px;
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
}
.rd-rs-badge{ position:relative; width:86px; height:86px; flex:none; display:block; }
.rd-rs-badge-icon{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--brand-tint); border-radius:24px; color:var(--brand-deep);
}
.rd-rs-badge-no{
  position:absolute; top:-8px; left:-8px; z-index:2;
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center;
  font-family:var(--en); font-weight:700; font-size:13.5px;
  box-shadow:0 3px 10px rgba(11,95,138,.3);
}
.rd-rs-badge-label{
  margin:0 0 6px; font-family:var(--en); font-weight:600; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
}
.rd-rs-reason-head h2{
  margin:0; font-family:var(--jp); font-weight:900;
  font-size:clamp(20px,2.8vw,28px); line-height:1.55;
}

/* ---- 費用の比較表（原文の table を整える） ---- */
.rd-rs-body table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  margin:0 0 1.6em; font-size:15px; background:var(--paper);
}
.rd-rs-body table th, .rd-rs-body table td{
  border:0; border-bottom:1px solid var(--rule); padding:14px 16px;
  text-align:left; vertical-align:top; line-height:1.8;
}
.rd-rs-body table tr:last-child th, .rd-rs-body table tr:last-child td{ border-bottom:0; }
.rd-rs-body table th{ background:var(--ground); font-family:var(--jp); font-weight:700; white-space:normal; }
/* 2列目＝留学ドットコム。ここを目立たせる */
.rd-rs-body table td:nth-child(2), .rd-rs-body table th:nth-child(2){
  background:var(--brand-tint); font-weight:700; color:var(--brand-deep);
}
.rd-rs-body table tr:first-child th:nth-child(2){ background:var(--brand); color:#fff; }

/* ---- 現地スタッフの写真 ---- */
.rd-rs-body img{ border-radius:14px; }
.rd-rs-body h4{
  margin:2em 0 .6em; padding:9px 14px; border-radius:10px;
  background:var(--sky); font-family:var(--jp); font-weight:700; font-size:16px; color:var(--brand-deep);
}

/* ---- よくあるご質問 ---- */
.rd-rs-qa{ background:var(--sky); padding:56px 0 60px; scroll-margin-top:90px; }
.rd-rs-qa-list{ margin-top:24px; display:grid; gap:10px; }
.rd-rs-qa-list details{
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
}
.rd-rs-qa-list summary{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer; list-style:none;
  padding:18px 20px; font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.7;
}
.rd-rs-qa-list summary::-webkit-details-marker{ display:none; }
.rd-rs-qa-list summary::after{ content:"＋"; margin-left:auto; color:var(--brand); font-weight:700; flex:none; }
.rd-rs-qa-list details[open] summary::after{ content:"−"; }
.rd-rs-q, .rd-rs-amark{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--en); font-weight:700; font-size:13px; margin-top:1px;
}
.rd-rs-q{ background:var(--brand); color:#fff; }
.rd-rs-amark{ background:var(--brand-tint); color:var(--brand-deep); }
.rd-rs-a{ display:flex; gap:13px; padding:18px 20px 20px; border-top:1px solid var(--rule); }
.rd-rs-a .rd-article{ font-size:15px; line-height:2; }
.rd-rs-a .rd-article p:last-child{ margin-bottom:0; }

/* ---- 締め ---- */
.rd-rs-last{ background:var(--paper); padding:52px 0 56px; scroll-margin-top:90px; }
.rd-rs-last .rd-article{ font-size:16.5px; }

@media only screen and (max-width:900px){
  .rd-rs-intro{ padding:28px 0 22px; }
  .rd-rs-intro .rd-article{ font-size:16px; }
  .rd-rs-intro .rd-article p:first-child{ font-size:17px; }
  .rd-rs-toc-wrap{ padding-bottom:32px; }
  .rd-rs-toc{ padding:18px 16px; border-radius:14px; }
  .rd-rs-toc a{ font-size:13.5px; gap:9px; }
  .rd-rs-reason{ padding:38px 0 42px; }
  .rd-rs-reason-head{ gap:14px; margin-bottom:20px; }
  .rd-rs-badge{ width:64px; height:64px; }
  .rd-rs-badge-icon{ border-radius:18px; }
  .rd-rs-badge-icon svg{ width:24px; height:24px; }
  .rd-rs-badge-no{ width:30px; height:30px; font-size:12px; top:-6px; left:-6px; }
  .rd-rs-reason-head h2{ font-size:19px; }
  .rd-rs-body table{ font-size:13.5px; }
  .rd-rs-body table th, .rd-rs-body table td{ padding:11px 12px; }
  .rd-rs-qa{ padding:42px 0 46px; }
  .rd-rs-qa-list summary{ font-size:15px; padding:15px 16px; }
  .rd-rs-a{ padding:16px 16px 18px; }
  .rd-rs-last{ padding:38px 0 42px; }
}

/* 記事フッター（関連記事・問い合わせ方法） */
.rd-rs-entryfooter{ background:var(--ground); padding:44px 0 48px; border-top:1px solid var(--rule); }
.rd-rs-entryfooter .rd-article{ font-size:15.5px; }
.rd-rs-entryfooter .rd-article img{ border-radius:12px; }

/* ---- スライドから、その目的の記事へ ----
   白帯の中ではなく、写真側（画面の右）にボタンとして置く。
   白帯の中だと、相談ボタンと役割が競合して迷わせるため。 */


/* ==================================================================
   スマホの固定相談バー  [2026-09-15]
   スクロールのどこにいても LINE / メールに入れるよう、画面の下に置く。
   PC では出さない（ヘッダーに常時ボタンがあるため）。
   ================================================================== */
.rd-fixbar{ display:none; }

@media only screen and (max-width:900px){
  .rd-fixbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--rule);
    box-shadow:0 -4px 20px rgba(14,46,68,.1);
  }
  .rd-fixbar .rd-btn{
    height:48px; padding:0 10px; justify-content:center;
    font-size:14px; gap:6px;
  }
  .rd-fixbar .rd-arw{ display:none; }
  /* ヒーローの上にいる間は、下へ逃がしておく（トップページのみ・JSが切り替える） */
  .rd-fixbar{ transition:transform .28s ease, opacity .28s ease; }
  .rd-fixbar[data-hidden="true"]{ transform:translateY(110%); opacity:0; pointer-events:none; }
  @media (prefers-reduced-motion: reduce){ .rd-fixbar{ transition:none; } }   /* 幅が狭いので矢印は省く */

  /* 固定バーのぶん、ページの下に余白を足す（フッターが隠れないように） */
  body{ padding-bottom:70px; }

  /* メニューを開いている間は、固定バーを隠す（ドロワーの中にも同じボタンがある） */
  body[data-locked="true"] .rd-fixbar{ display:none; }
}

/* ==================================================================
   オンラインカウンセリング 3問版の追加分  [2026-09-15]

   考え方 ──
     結果の画面で、いちばん強いのは「正直にお伝えします」の箱。
     ここだけ色を変えて、他社が言わないことが1つ載っていることを見せる。
     その下の「分かれ道」は、あえて答えを出していない箱。
     ここがLINEに進む理由になるので、CTAのすぐ上に置いている。
   ================================================================== */

/* Q1 は選択肢の文が長いので1列にする */
.rd-choices[data-cols="1"]{ grid-template-columns:1fr; }

/* 正直にお伝えします（＝相手にとっての持ち帰り） */
.rd-honest{
  position:relative; margin:0 0 14px; padding:18px 20px 16px 22px;
  background:#fffaf0; border:1.5px solid #f0dcb4; border-radius:14px;
}
.rd-honest::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  border-radius:0 3px 3px 0; background:#d99b2b;
}
.rd-honest-label{
  margin:0 0 7px; font-family:var(--jp); font-weight:900; font-size:13.5px;
  letter-spacing:.02em; color:#9a6a12;
}
.rd-honest-body{ margin:0; font-size:15px; line-height:1.95; color:var(--ink); }

/* あなたの場合、ここが分かれ道です（＝あえて残す問い） */
.rd-open{
  margin:0 0 16px; padding:18px 20px 16px;
  background:var(--brand-tint); border:1.5px dashed var(--brand);
  border-radius:14px;
}
.rd-open-label{
  margin:0 0 7px; font-family:var(--jp); font-weight:900; font-size:13.5px;
  color:var(--brand-deep);
}
.rd-open-body{ margin:0; font-size:15px; line-height:1.95; color:var(--ink); }

/* 名前は結果の直前で任意入力 */
.rd-late-name{
  margin:0 0 16px; padding:16px 18px 14px;
  background:var(--ground); border:1px solid var(--rule); border-radius:14px;
}
.rd-late-name-label{
  display:block; margin-bottom:8px;
  font-family:var(--jp); font-weight:700; font-size:14.5px; color:var(--ink);
}
.rd-late-name-label span{ font-weight:400; font-size:13px; color:var(--ink-faint); }
.rd-late-name .rd-name-input{ width:100%; height:48px; font-size:16px; }
.rd-late-name-note{ margin:8px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink-faint); }

/* スマホでは表を横スクロールさせない。1行ずつ縦に積む。
   3列の表を 390px の画面で横に振るのは、スクロールできても読みづらい。 */
@media only screen and (max-width:700px){
  .rd-detail-table{ overflow:visible; border:0; border-radius:0; }
  .rd-detail-table table{ min-width:0; width:100%; display:block; }
  .rd-detail-table thead{ display:none; }
  .rd-detail-table tbody, .rd-detail-table tr, .rd-detail-table th, .rd-detail-table td{ display:block; width:auto; }
  .rd-detail-table tr{
    border:1px solid var(--rule); border-radius:12px; overflow:hidden; margin-bottom:10px;
  }
  .rd-detail-table tbody th{
    background:var(--brand-tint); color:var(--brand-deep);
    font-size:13.5px; padding:9px 14px; border-bottom:0; white-space:normal;
  }
  .rd-detail-table td{ border-bottom:0; padding:11px 14px; }
  .rd-detail-table td + td{ border-top:1px solid var(--rule); }
  .rd-detail-table td::before{
    content:attr(data-l); display:block; margin-bottom:2px;
    font-family:var(--jp); font-weight:700; font-size:11.5px; letter-spacing:.04em;
    color:var(--ink-faint);
  }
  .rd-detail-table td.is-good::before{ color:#9a6a12; }
}

@media only screen and (max-width:900px){
  .rd-honest, .rd-open{ padding:15px 16px 13px; }
  .rd-honest{ padding-left:19px; }
  .rd-honest-body, .rd-open-body{ font-size:14.5px; }
  .rd-late-name{ padding:14px 14px 12px; }
}

/* ==================================================================
   PC幅の詰め  [2026-09-15]

   カウンセリングとアコーディオンは、スマホで文言と間隔を詰めた。
   その設定のまま PC で見ると、横に間延びする。

     ・Q1 の選択肢が 898px 幅のボタンに13文字だけ、という状態だった
     ・吹き出しも「正直にお伝えします」も 1行 56〜57文字。
       日本語で読みやすいのは 35〜45文字。長すぎて目が戻れない
     ・ニックネームの入力欄が 860px
     ・アコーディオンは右に 252px の空白が残っていた

   ここは「PCのときだけ」効かせる。スマホ側の設定には触れない。
   ================================================================== */
@media only screen and (min-width:901px){

  /* ---- カウンセリング ---- */
  /* 箱ごと狭める。会話は横に広げるほど読みにくくなる。 */
  .rd-counsel-box{ max-width:840px; margin-left:auto; margin-right:auto; }
  .rd-counsel-head .rd-lead{ max-width:44em; }

  /* 選択肢は2列。Q1 はスマホで1列にしてあるが、PCでは文が短すぎて間が抜ける */
  .rd-choices[data-cols="1"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* 入力欄は、入れる文字数に合わせる */
  .rd-late-name .rd-name-input{ max-width:320px; }

  /* ---- 7つの理由（開いた中身） ---- */
  /* 文章は読める幅で止めて、表だけ横いっぱいに使う。
     こうすると右の空白が「余り」ではなく「余白」になる。 */
  .rd-reason-in{ max-width:none; padding:32px 36px 30px; }
  .rd-reason-body > p,
  .rd-reason-body > ul{ max-width:680px; }
  .rd-reason-body > ul.rd-detail-num{ max-width:760px; }
  .rd-detail-table{ max-width:820px; }
  .rd-reason-title{ max-width:680px; }
}

/* 旧 iPhone SE などの 320px 級。
   メインコピーの行は折り返せない（nowrap）ので、いちばん長い11文字の行が
   ぎりぎりになる（22.5px だと余裕が7px しかなかった）。ここだけ一段下げる。 */
@media only screen and (max-width:360px){
  .rd-hero-h1{ font-size:21px; }
  .rd-hero-panel{ padding:18px 15px 20px; }
}

/* ==================================================================
   インタビュー  [2026-09-15]

   すぐ上のクチコミ（.rd-voice）と、わざと逆の見せ方にしている。

     クチコミ   … 6件・小さいカード・イラストの顔・星・1分で入れ替え → 「量」
     インタビュー … 3件・写真を大きく・本人の言葉・動かさない      → 「深さ」

   同じ見せ方にすると「同じものが2回出てくる」と読まれる。
   背景もクチコミが水色なので、こちらは白にして切り替わりを作る。

   引用の「」を黄土色にしているのは、結果画面の「正直にお伝えします」と
   同じ色。都合の悪いことも書いてある、という合図として揃えてある。
   ================================================================== */
.rd-iv{ background:var(--paper); padding:76px 0 80px; }
.rd-iv .rd-sec-head{ margin-bottom:34px; }
.rd-iv .rd-lead{ max-width:46em; }

.rd-iv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }

.rd-iv-card{ display:flex; flex-direction:column; min-width:0; }

/* ---- 写真。カードの枠ではなく、写真そのものを主役にする ---- */
.rd-iv-photo{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/11; border-radius:16px; background:var(--sky);
  box-shadow:var(--shadow);
}
.rd-iv-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;
  transition:transform .4s ease;
}
.rd-iv-photo:hover img{ transform:scale(1.04); }
.rd-iv-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(rgba(8,34,52,0), rgba(8,34,52,.72));
  pointer-events:none;
}
.rd-iv-label{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--brand-deep);
  font-family:var(--jp); font-weight:700; font-size:12.5px; letter-spacing:.02em;
}
.rd-iv-who{
  position:absolute; left:16px; right:16px; bottom:13px; z-index:2; color:#fff;
}
.rd-iv-who b{
  display:block; font-family:var(--jp); font-weight:900; font-size:17px; line-height:1.4;
  text-shadow:0 1px 8px rgba(8,34,52,.5);
}
.rd-iv-who small{
  display:block; margin-top:2px; font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(8,34,52,.5);
}

/* ---- 本文側 ---- */
.rd-iv-body{ padding:18px 2px 0; display:flex; flex-direction:column; flex:1; }
.rd-iv-quote{
  position:relative; margin:0 0 14px; padding-left:24px;
  font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.85;
  color:var(--ink);
}
.rd-iv-quote::before{
  content:"\201C"; position:absolute; left:0; top:-4px;
  font-family:var(--en); font-size:34px; line-height:1; color:#d99b2b;
}
.rd-iv-title{ margin:0 0 12px; font-size:14.5px; line-height:1.8; }
.rd-iv-title a{
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:1px;
}
.rd-iv-title a:hover{ color:var(--brand); border-color:var(--brand); }

.rd-iv-meta{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 14px;
  font-size:12.5px; color:var(--ink-faint);
}
.rd-iv-meta span{ display:inline-flex; align-items:center; gap:5px; }
.rd-iv-meta svg{ color:var(--brand); opacity:.75; }
.rd-iv-meta b{ font-family:var(--en); font-weight:700; font-size:14px; color:var(--ink-soft); }

.rd-iv-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--jp); font-weight:700; font-size:14.5px;
  color:var(--brand-deep); text-decoration:none;
}
.rd-iv-go:hover{ color:var(--brand); }
.rd-iv-go .rd-arw{ display:inline-flex; transition:transform .2s ease; }
.rd-iv-go:hover .rd-arw{ transform:translateX(3px); }

/* ---- すべて読む ---- */
.rd-iv-foot{ margin-top:36px; text-align:center; }
.rd-iv-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-weight:700; font-size:15px; text-decoration:none;
  transition:border-color .16s ease, color .16s ease;
}
.rd-iv-all b{ font-family:var(--en); font-weight:700; font-size:18px; color:var(--brand); }
.rd-iv-all:hover{ border-color:var(--brand); color:var(--brand); }

@media only screen and (max-width:900px){
  .rd-iv{ padding:52px 0 56px; }
  .rd-iv-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .rd-iv-photo{ aspect-ratio:16/10; }
  .rd-iv-quote{ font-size:15.5px; }
  .rd-iv-who b{ font-size:16px; }
  .rd-iv-foot{ margin-top:28px; }
  .rd-iv-all{ width:100%; justify-content:center; }
}

/* ==================================================================
   インタビュー 一覧ページ  [2026-09-15]
   ================================================================== */
.rd-ivx{ background:var(--ground); padding:48px 0 72px; }
.rd-ivx-intro{
  display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
  margin-bottom:26px;
}
.rd-ivx-intro p{ margin:0; max-width:44em; font-size:15.5px; line-height:1.95; color:var(--ink-soft); }
.rd-ivx-intro strong{ color:var(--ink); font-weight:700; }
.rd-ivx-count{ margin-left:auto !important; flex:none; font-family:var(--jp); color:var(--ink-faint) !important; }
.rd-ivx-count b{ font-family:var(--en); font-size:30px; font-weight:700; color:var(--brand); margin-right:2px; }

/* ---- 絞り込み ---- */
.rd-ivx-filter{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:18px 22px 16px; margin-bottom:28px;
}
.rd-ivx-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rd-ivx-row + .rd-ivx-row{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--rule); }
.rd-ivx-key{
  flex:none; width:82px; font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--ink-soft);
}
.rd-ivx-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rd-ivx-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink-soft);
  font-family:var(--jp); font-weight:700; font-size:13.5px;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.rd-ivx-chip i{ font-family:var(--en); font-style:normal; font-size:11.5px; color:var(--ink-faint); }
.rd-ivx-chip:hover{ border-color:var(--brand); color:var(--brand); }
.rd-ivx-chip.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rd-ivx-chip.is-on i{ color:rgba(255,255,255,.75); }
.rd-ivx-hit{ margin:12px 0 0; font-size:13px; color:var(--brand-deep); font-family:var(--jp); font-weight:700; }
.rd-ivx-hit:empty{ display:none; }

/* ---- カード ---- */
.rd-ivx-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.rd-ivx-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rd-ivx-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.rd-ivx-photo{ display:block; aspect-ratio:3/2; background:var(--sky); overflow:hidden; }
.rd-ivx-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; transition:transform .4s ease; }
.rd-ivx-card:hover .rd-ivx-photo img{ transform:scale(1.04); }
.rd-ivx-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }

.rd-ivx-tags{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 9px; }
.rd-ivx-tag{
  font-family:var(--jp); font-weight:700; font-size:11.5px; letter-spacing:.02em;
  padding:3px 9px; border-radius:6px; background:var(--sky); color:var(--ink-soft);
}
.rd-ivx-tag.is-age{ background:var(--brand-tint); color:var(--brand-deep); }

.rd-ivx-title{ margin:0 0 9px; font-family:var(--jp); font-weight:900; font-size:16.5px; line-height:1.6; }
.rd-ivx-title a{ color:var(--ink); text-decoration:none; }
.rd-ivx-title a:hover{ color:var(--brand); }

.rd-ivx-quote{
  margin:0 0 13px; flex:1;
  font-size:13.5px; line-height:1.9; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* 写真が無い記事は、引用を主役にして長めに見せる */
.rd-ivx-card.is-text .rd-ivx-quote{
  -webkit-line-clamp:6; font-size:14.5px; color:var(--ink);
  padding-left:20px; position:relative;
}
.rd-ivx-card.is-text .rd-ivx-quote::before{
  content:"\201C"; position:absolute; left:0; top:-2px;
  font-family:var(--en); font-size:28px; line-height:1; color:#d99b2b;
}

.rd-ivx-meta{
  margin:0; padding-top:11px; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-faint);
}
.rd-ivx-meta b{ font-family:var(--jp); font-weight:700; color:var(--ink-soft); }
.rd-ivx-meta span{ display:inline-flex; align-items:center; gap:4px; }
.rd-ivx-meta svg{ color:var(--brand); opacity:.7; }

.rd-ivx-empty{
  margin:30px 0 0; padding:26px; text-align:center; border-radius:14px;
  background:var(--paper); border:1px dashed var(--rule);
  font-family:var(--jp); font-weight:700; color:var(--ink-soft);
}
.rd-ivx-more-wrap{ margin-top:32px; text-align:center; }
.rd-ivx-more{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:14px 34px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-weight:700; font-size:15px;
  transition:border-color .16s ease, color .16s ease;
}
.rd-ivx-more:hover{ border-color:var(--brand); color:var(--brand); }
.rd-ivx-rest{ color:var(--ink-faint); font-size:13px; margin-left:4px; }

/* ==================================================================
   インタビュー 記事ページ
   ================================================================== */
.rd-ivs{ background:var(--paper); padding:44px 0 20px; }
.rd-ivs-who{
  background:var(--ground); border:1px solid var(--rule); border-radius:16px;
  padding:20px 24px 18px; margin-bottom:34px;
}
.rd-ivs-name{ margin:0 0 12px; font-family:var(--jp); font-size:15px; color:var(--ink-soft); }
.rd-ivs-name b{ font-weight:900; font-size:19px; color:var(--ink); }
.rd-ivs-facts{ display:flex; flex-wrap:wrap; gap:10px 30px; margin:0; }
.rd-ivs-facts div{ display:flex; flex-direction:column; gap:1px; }
.rd-ivs-facts dt{ font-size:11.5px; color:var(--ink-faint); font-family:var(--jp); font-weight:700; letter-spacing:.03em; }
.rd-ivs-facts dd{ margin:0; font-family:var(--jp); font-weight:700; font-size:15px; color:var(--ink); }
.rd-ivs-note{ margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--rule);
  font-size:12.5px; color:var(--ink-faint); }

/* 本文。現地の写真が主役なので大きく出す */
.rd-ivs-body img{ border-radius:12px; margin:8px 0; }
.rd-ivs-body p[style*="center"]{ font-size:13px; color:var(--ink-faint); margin-top:-4px; }
.rd-ivs-body strong{ font-family:var(--jp); font-weight:900; }

.rd-ivs-school{
  margin-top:30px; padding:16px 20px; border-radius:12px;
  background:var(--brand-tint); border:1px solid var(--rule);
}
.rd-ivs-school-key{ margin:0 0 4px; font-family:var(--jp); font-weight:700; font-size:12.5px; color:var(--brand-deep); }
.rd-ivs-school-val{ font-family:var(--jp); font-weight:700; font-size:15.5px; }

/* つづけて読む */
.rd-ivs-next{ background:var(--ground); padding:56px 0 60px; }
.rd-ivs-next .rd-h2{ font-size:22px; margin-bottom:22px; }
.rd-ivs-next-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.rd-ivs-next-card{
  display:flex; flex-direction:column; min-width:0; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rd-ivs-next-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.rd-ivs-next-photo{ display:block; aspect-ratio:3/2; background:var(--sky); overflow:hidden; }
.rd-ivs-next-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.rd-ivs-next-body{ display:block; padding:13px 16px 16px; }
.rd-ivs-next-tags{ display:block; font-family:var(--jp); font-weight:700; font-size:11.5px;
  color:var(--ink-faint); margin-bottom:5px; }
.rd-ivs-next-card b{ font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.7; }
.rd-ivs-next-all{ margin:24px 0 0; text-align:center; }
.rd-ivs-next-all a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--jp); font-weight:700; font-size:14.5px;
  color:var(--brand-deep); text-decoration:none;
}
.rd-ivs-next-all a:hover{ color:var(--brand); }

@media only screen and (max-width:900px){
  .rd-ivx{ padding:36px 0 52px; }
  .rd-ivx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .rd-ivx-filter{ padding:15px 16px 14px; }
  .rd-ivx-row{ gap:10px; }
  .rd-ivx-key{ width:100%; }
  .rd-ivx-chip{ padding:7px 13px; font-size:13px; }
  .rd-ivx-count{ margin-left:0 !important; }
  .rd-ivx-more{ width:100%; }
  .rd-ivs-facts{ gap:10px 22px; }
  .rd-ivs-next-grid{ grid-template-columns:minmax(0,1fr); }
}
@media only screen and (max-width:560px){
  .rd-ivx-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ==================================================================
   コラム記事の 署名・著者プロフィール・目次  [2026-09-15]
   旧テンプレートが出していたものを、新デザインで出し直している。
   ================================================================== */
.rd-byline{
  display:flex; align-items:center; gap:11px; margin:0 0 22px;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
}
.rd-byline-face img{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.rd-byline-text small{ display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.5; }
.rd-byline-text a{
  font-family:var(--jp); font-weight:700; font-size:15px; color:var(--ink); text-decoration:none;
}
.rd-byline-text a:hover{ color:var(--brand); }

/* 目次 */
.rd-toc{
  background:var(--ground); border:1px solid var(--rule); border-radius:14px;
  padding:20px 24px 18px; margin:0 0 30px;
}
.rd-toc-title{
  margin:0 0 10px; font-family:var(--jp); font-weight:900; font-size:14.5px; color:var(--brand-deep);
}
.rd-toc ol{ counter-reset:toc; display:grid; gap:7px; }
.rd-toc li{ counter-increment:toc; position:relative; padding-left:26px; }
.rd-toc li::before{
  content:counter(toc); position:absolute; left:0; top:.28em;
  width:18px; height:18px; border-radius:50%; background:var(--brand-tint); color:var(--brand-deep);
  font-family:var(--en); font-weight:700; font-size:10.5px; display:grid; place-items:center;
}
.rd-toc a{ font-size:14.5px; line-height:1.8; color:var(--ink); text-decoration:none; }
.rd-toc a:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

/* 記事フッター（関連リンクなど） */
.rd-entryfoot{ margin-top:34px; padding-top:26px; border-top:1px solid var(--rule); }

/* 著者プロフィール */
.rd-writer{
  margin-top:36px; background:var(--ground);
  border:1px solid var(--rule); border-radius:16px; padding:22px 26px 24px;
}
.rd-writer-key{
  margin:0 0 14px; font-family:var(--jp); font-weight:900; font-size:13px; color:var(--brand-deep);
}
.rd-writer-in{ display:flex; gap:20px; align-items:flex-start; }
.rd-writer-face{ flex:none; }
.rd-writer-face img{ width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; }
.rd-writer-body{ min-width:0; }
.rd-writer-name{ margin:0 0 3px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rd-writer-name b{ font-family:var(--jp); font-weight:900; font-size:18px; }
.rd-writer-name span{ font-family:var(--en); font-size:12.5px; color:var(--ink-faint); letter-spacing:.04em; }
.rd-writer-company{ margin:0 0 10px; font-size:12.5px; color:var(--ink-faint); }
.rd-writer-bio{ margin:0 0 14px; font-size:14.5px; line-height:1.95; color:var(--ink-soft); }
.rd-writer-more{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--jp); font-weight:700; font-size:14px;
  color:var(--brand-deep); text-decoration:none;
}
.rd-writer-more:hover{ color:var(--brand); }

@media only screen and (max-width:900px){
  .rd-toc{ padding:16px 16px 14px; }
  .rd-writer{ padding:18px 16px 20px; }
  .rd-writer-in{ flex-direction:column; gap:14px; }
  .rd-writer-face img{ width:72px; height:72px; }
}

/* ==================================================================
   コラム一覧  [2026-09-15]
   ================================================================== */
.rd-cl{ background:var(--ground); padding:30px 0 70px; }

/* 言葉で探す  [2026-09-17]
   記事が1,989本あるので、分類を選ぶより打つほうが早い人が多い。
   一覧のいちばん上に置いている。 */
.rd-cl-searchwrap{ background:var(--ground); padding:30px 0 0; }
.rd-cl-search{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:20px 22px 18px; margin:0; box-shadow:var(--shadow);
}
.rd-cl-search-label{
  display:block; margin:0 0 10px;
  font-family:var(--jp); font-weight:900; font-size:15px; color:var(--ink);
}
.rd-cl-search-box{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--rule); border-radius:999px;
  background:var(--paper); padding:0 6px 0 16px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.rd-cl-search-box:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(21,131,184,.12);
}
.rd-cl-search-icon{ flex:none; color:var(--ink-faint); }
.rd-cl-search-input{
  flex:1 1 auto; min-width:0; height:50px; border:0; background:none; padding:0;
  font-family:var(--body); font-size:16px; color:var(--ink); outline:none;
}
.rd-cl-search-input::placeholder{ color:var(--ink-faint); }
/* ブラウザが付ける「×」は、枠の形とぶつかるので消す */
.rd-cl-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.rd-cl-search-btn{
  flex:none; height:40px; padding:0 22px; border:0; border-radius:999px;
  background:var(--brand); color:#fff; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:14.5px; letter-spacing:.02em;
  transition:background-color .16s ease;
}
.rd-cl-search-btn:hover{ background:var(--brand-deep); }
.rd-cl-search-note{
  margin:10px 0 0; font-size:12.5px; line-height:1.75; color:var(--ink-faint);
}
@media only screen and (max-width:600px){
  .rd-cl-search{ padding:16px 15px 14px; border-radius:14px; }
  .rd-cl-search-box{ padding:0 5px 0 13px; }
  .rd-cl-search-input{ height:46px; font-size:16px; }
  .rd-cl-search-btn{ height:36px; padding:0 16px; font-size:13.5px; }
}

/* 分類のチップ */
.rd-cl-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.rd-cl-cat{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink-soft); text-decoration:none;
  font-family:var(--jp); font-weight:700; font-size:13.5px;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.rd-cl-cat i{ font-family:var(--en); font-style:normal; font-size:11.5px; color:var(--ink-faint); }
.rd-cl-cat:hover{ border-color:var(--brand); color:var(--brand); }
.rd-cl-cat.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rd-cl-cat.is-on i{ color:rgba(255,255,255,.75); }

/* 件数と並び替えの帯 */
.rd-cl-bar{
  display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-bottom:18px;
}
.rd-cl-sort{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.rd-cl-sort-key{ font-family:var(--jp); font-weight:700; font-size:12.5px; color:var(--ink-faint); }
.rd-cl-sortlink{
  padding:7px 14px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink-soft); text-decoration:none;
  font-family:var(--jp); font-weight:700; font-size:13px;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.rd-cl-sortlink:hover{ border-color:var(--brand); color:var(--brand); }
.rd-cl-sortlink.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.rd-cl-found{ margin:0; font-size:13.5px; color:var(--ink-faint); font-family:var(--jp); }
.rd-cl-found b{ font-family:var(--en); font-size:17px; font-weight:700; color:var(--brand); }
.rd-cl-found span{ margin-left:2px; }

/* カード */
.rd-cl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.rd-cl-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rd-cl-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.rd-cl-photo{ display:block; aspect-ratio:3/2; background:var(--sky); overflow:hidden; }
.rd-cl-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; transition:transform .4s ease; }
.rd-cl-card:hover .rd-cl-photo img{ transform:scale(1.04); }
.rd-cl-noimg{ width:100%; height:100%; display:grid; place-items:center; color:var(--brand); opacity:.35; }
.rd-cl-body{ padding:15px 18px 17px; display:flex; flex-direction:column; flex:1; }
.rd-cl-tag{
  margin:0 0 7px; display:inline-block; align-self:flex-start;
  font-family:var(--jp); font-weight:700; font-size:11.5px;
  padding:3px 9px; border-radius:6px; background:var(--brand-tint); color:var(--brand-deep);
}
.rd-cl-title{ margin:0 0 8px; font-family:var(--jp); font-weight:900; font-size:16px; line-height:1.6; }
.rd-cl-title a{ color:var(--ink); text-decoration:none; }
.rd-cl-title a:hover{ color:var(--brand); }
.rd-cl-ex{
  margin:0 0 12px; flex:1; font-size:13.5px; line-height:1.9; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.rd-cl-meta{ margin:0; padding-top:10px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-faint); font-family:var(--en); }

/* ページ送り */
.rd-cl-pager{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.rd-cl-pager .page-numbers{
  display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 13px;
  border-radius:10px; border:1.5px solid var(--rule); background:var(--paper);
  font-family:var(--en); font-weight:700; font-size:14.5px; color:var(--ink-soft); text-decoration:none;
  transition:border-color .16s ease, color .16s ease;
}
.rd-cl-pager .page-numbers:hover{ border-color:var(--brand); color:var(--brand); }
.rd-cl-pager .page-numbers.current{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rd-cl-pager .page-numbers.dots{ border-color:transparent; }
.rd-cl-pager .prev, .rd-cl-pager .next{ font-family:var(--jp); font-weight:700; font-size:13.5px; }

.rd-cl-empty{
  margin:30px 0 0; padding:30px; text-align:center; border-radius:14px;
  background:var(--paper); border:1px dashed var(--rule);
  font-family:var(--jp); font-weight:700; color:var(--ink-soft);
}
.rd-cl-empty a{ color:var(--brand-deep); }

@media only screen and (max-width:900px){
  .rd-cl{ padding:34px 0 52px; }
  .rd-cl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .rd-cl-cat{ padding:7px 13px; font-size:13px; }
  .rd-cl-bar{ gap:10px; }
  .rd-cl-sort{ margin-left:0; width:100%; }
  .rd-cl-sortlink{ padding:6px 12px; font-size:12.5px; }
}
@media only screen and (max-width:560px){
  .rd-cl-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ==================================================================
   留学コンシェルジュ（コラム一覧の先頭）  [2026-09-15 / 目的起点・省スペース版]

   何も押していない状態を、できるだけ低くしている。
   見えるのは「問いかけ1行」と「目的の1行」だけ。
   絞り込みと結果は、目的を選んでから出す。
   コンシェルジュは入口であって、主役は記事一覧のため。
   ================================================================== */
.rd-cg{ background:var(--ground); padding:22px 0 0; }
.rd-cg-box{
  max-width:var(--wrap); margin:0 auto; padding:18px 22px 18px;
  background:var(--paper); border:1.5px solid var(--brand); border-radius:16px;
}

/* 問いかけ */
.rd-cg-ask{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rd-cg-face{
  flex:none; width:56px; height:56px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--brand-tint);
}
.rd-cg-q{ margin:0; min-width:0; }
.rd-cg-q b{
  display:block; font-family:var(--jp); font-weight:900;
  font-size:clamp(16px,1.8vw,19px); line-height:1.5; color:var(--ink);
}
.rd-cg-q small{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-faint); line-height:1.6; }

/* 選択肢 */
.rd-cg-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.rd-cg-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-weight:700; font-size:13.5px; white-space:nowrap;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.rd-cg-chip:hover{ border-color:var(--brand); color:var(--brand); }
.rd-cg-chip.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rd-cg-chips-sm .rd-cg-chip{ padding:6px 12px; font-size:12.5px; }

/* 目的を選んでから出る絞り込み */
.rd-cg-more-cond{
  display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--rule);
}
.rd-cg-key{ font-family:var(--jp); font-weight:700; font-size:12px; color:var(--ink-faint); }

/* 結果。写真は小さく、横並びで高さを取らない */
.rd-cg-result{ margin-top:14px; padding-top:14px; border-top:2px solid var(--brand-tint); }
.rd-cg-result-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px;
  font-family:var(--jp); font-weight:900; font-size:13.5px; color:var(--brand-deep);
}
.rd-cg-reset{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  margin-left:auto; font-family:var(--jp); font-weight:700; font-size:12.5px; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.rd-cg-reset:hover{ color:var(--brand); }

.rd-cg-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rd-cg-item{
  display:flex; align-items:center; gap:11px; min-width:0;
  padding:9px 12px 9px 9px; border-radius:11px; border:1px solid var(--rule);
  background:var(--paper); text-decoration:none; color:inherit;
  transition:border-color .16s ease, background-color .16s ease;
}
.rd-cg-item:hover{ border-color:var(--brand); background:var(--sky); }
.rd-cg-item-photo{ flex:none; width:52px; height:52px; border-radius:8px; overflow:hidden; background:var(--brand-tint); }
.rd-cg-item-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
.rd-cg-item-body{ min-width:0; }
.rd-cg-item b{
  display:block; font-family:var(--jp); font-weight:700; font-size:13px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rd-cg-item time{ display:block; margin-top:3px; font-family:var(--en); font-size:11px; color:var(--ink-faint); }

.rd-cg-more{ margin:12px 0 0; text-align:center; }
.rd-cg-morelink{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--brand-deep); text-decoration:none;
}
.rd-cg-morelink:hover{ color:var(--brand); }

@media only screen and (max-width:900px){
  .rd-cg{ padding:16px 0 0; }
  .rd-cg-box{ margin:0 16px; padding:14px 14px 14px; border-radius:14px; }
  .rd-cg-face{ width:44px; height:44px; border-width:2px; }
  .rd-cg-q b{ font-size:15.5px; }
  .rd-cg-q small{ font-size:11.5px; }
  .rd-cg-chip{ padding:7px 12px; font-size:12.5px; }
  .rd-cg-list{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .rd-cg-more-cond{ gap:7px 10px; }
}

/* ==================================================================
   留学ドットコムについて（ハブ）  [2026-09-15]
   ================================================================== */
.rd-about{ background:var(--ground); padding:44px 0 72px; }
.rd-about-lead{
  margin:0 0 30px; font-size:16px; line-height:2.05; color:var(--ink-soft);
}
.rd-about-lead strong{ color:var(--ink); font-weight:700; }

.rd-about-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rd-about-card{
  display:flex; gap:18px; align-items:flex-start; min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:24px 26px 22px; text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rd-about-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--brand); }
.rd-about-icon{
  flex:none; width:52px; height:52px; border-radius:14px;
  background:var(--brand-tint); color:var(--brand-deep);
  display:grid; place-items:center;
}
.rd-about-body{ min-width:0; display:block; }
.rd-about-body b{ display:block; font-family:var(--jp); font-weight:900; font-size:18px; line-height:1.5; margin-bottom:7px; }
.rd-about-note{ display:block; font-size:14px; line-height:1.9; color:var(--ink-soft); margin-bottom:11px; }
.rd-about-go{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--brand-deep);
}
.rd-about-card:hover .rd-about-go{ color:var(--brand); }
.rd-about-go .rd-arw{ display:inline-flex; transition:transform .2s ease; }
.rd-about-card:hover .rd-about-go .rd-arw{ transform:translateX(3px); }

@media only screen and (max-width:900px){
  .rd-about{ padding:32px 0 52px; }
  .rd-about-lead{ font-size:15px; margin-bottom:22px; }
  .rd-about-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .rd-about-card{ padding:18px 18px 16px; gap:14px; }
  .rd-about-icon{ width:44px; height:44px; border-radius:12px; }
  .rd-about-body b{ font-size:16.5px; }
}

/* ==================================================================
   記事本文のはみ出し対策  [2026-09-15]

   移行前のエディタが、画像のキャプションに
     <div class="wp-caption" style="width: 650px">
   という幅を直接書き込んでいる。
   img{max-width:100%} は「親の幅まで」なので、
   親が650pxだと390pxの画面でも650pxのまま出てしまう。
   1,989記事ぶんの本文を書き換えるのは現実的でないので、表示側で抑える。

   インラインの style を上書きするため !important を使っている。
   ここは他に手がない。
   ================================================================== */
.rd-article .wp-caption,
.rd-article figure,
.rd-article [style*="width"]{
  max-width:100% !important;
}
.rd-article .wp-caption{ width:auto !important; }
.rd-article img,
.rd-article video,
.rd-article iframe{
  max-width:100% !important;
  height:auto;
}
.rd-article iframe{ width:100%; }
/* 幅・高さの属性が直接書かれている画像も、比率を保って縮める */
.rd-article img[width],
.rd-article img[height]{ width:auto; height:auto; max-width:100% !important; }

/* 横に長い塊は、記事の外へ出さずに中でスクロールさせる */
.rd-article pre,
.rd-article .rd-table-scroll{ max-width:100%; overflow-x:auto; }

/* 昔の記事にある固定幅のブロック */
.rd-article .alignleft,
.rd-article .alignright,
.rd-article .aligncenter{ max-width:100% !important; }

@media only screen and (max-width:700px){
  /* スマホでは回り込みをやめる。狭い画面だと文字が数文字ずつになる */
  .rd-article .alignleft,
  .rd-article .alignright{ float:none !important; margin-left:0 !important; margin-right:0 !important; }
}

/* ==================================================================
   留学コラム（トップページ）  [2026-09-15]

   左は編集部の選（写真つきカード）、右はアクセス上位（番号つきリスト）。
   すぐ上のインタビュー欄が「写真を大きく3枚」なので、見せ方を変えている。
   同じ形で並べると、同じものが2回出てくるように読まれるため。
   ================================================================== */
.rd-tc{ background:var(--ground); padding:72px 0 78px; }
.rd-tc-cols{ display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:start; }
.rd-tc-block{ min-width:0; }
.rd-tc-key{ margin:0 0 16px; }
.rd-tc-badge{
  display:inline-block; padding:6px 15px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-family:var(--jp); font-weight:700; font-size:13px; letter-spacing:.02em;
}
.rd-tc-badge.is-alt{ background:var(--ink); }

/* 編集部の選 */
.rd-tc-picks{ display:grid; gap:12px; }
.rd-tc-pick{
  display:flex; gap:14px; align-items:flex-start; min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:12px; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rd-tc-pick:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--brand); }
.rd-tc-pick-photo{
  flex:none; width:104px; aspect-ratio:3/2; border-radius:9px; overflow:hidden; background:var(--brand-tint);
}
.rd-tc-pick-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
.rd-tc-pick-body{ min-width:0; display:block; padding-top:2px; }
.rd-tc-cat{
  display:inline-block; margin-bottom:5px;
  font-family:var(--jp); font-weight:700; font-size:11px;
  padding:2px 8px; border-radius:5px; background:var(--sky); color:var(--brand-deep);
}
.rd-tc-pick b{
  display:block; font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rd-tc-pick time{ display:block; margin-top:5px; font-family:var(--en); font-size:11.5px; color:var(--ink-faint); }

/* アクセス上位 */
.rd-tc-rank{ display:grid; gap:10px; counter-reset:tc; }
.rd-tc-rank li{ min-width:0; }
.rd-tc-rank a{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:14px 16px; text-decoration:none; color:inherit;
  transition:border-color .18s ease, background-color .18s ease;
}
.rd-tc-rank a:hover{ border-color:var(--brand); background:var(--sky); }
.rd-tc-no{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-family:var(--en); font-weight:700; font-size:13.5px;
  display:grid; place-items:center;
}
.rd-tc-rank li:first-child .rd-tc-no{ background:#c8961e; }
.rd-tc-rank-body{ min-width:0; display:block; }
.rd-tc-rank b{
  display:block; font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rd-tc-views{
  display:block; margin-top:5px;
  font-family:var(--en); font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

.rd-tc-foot{ margin-top:34px; text-align:center; }
.rd-tc-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:999px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink); text-decoration:none;
  font-family:var(--jp); font-weight:700; font-size:15px;
  transition:border-color .16s ease, color .16s ease;
}
.rd-tc-all:hover{ border-color:var(--brand); color:var(--brand); }
.rd-tc-note{ margin:12px 0 0; font-size:12.5px; color:var(--ink-faint); }
.rd-tc-note strong{ color:var(--brand-deep); font-weight:700; }

@media only screen and (max-width:900px){
  .rd-tc{ padding:50px 0 54px; }
  .rd-tc-cols{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .rd-tc-pick-photo{ width:86px; }
  .rd-tc-all{ width:100%; justify-content:center; }
}

/* =========================================================================
   サムネイルの見え方をそろえる                             [2026-09-15]
   記事ごとに元画像の縦横比がばらばら（1.34〜1.50）で、枠に合わせて切り抜くと
   上や下が欠ける。写真は切らずに全体を出し、余った分は同じ写真をぼかして
   埋める。枠の高さは揃うので、一覧は整ったまま、写真は欠けない。
   背景に使う画像のURLは、テンプレート側から --thumb で渡している。
   ========================================================================= */
.rd-thumbfit{ position:relative; overflow:hidden; background:var(--sky); }
.rd-thumbfit::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--thumb);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.3);
  filter:blur(18px) saturate(1.2);
  opacity:.5;
}
/* ぼかしの上に薄く白を重ねて、前の写真の輪郭を立たせる */
.rd-thumbfit::before{ box-shadow:inset 0 0 0 999px rgba(255,255,255,.2); }
.rd-thumbfit > img{
  position:relative; z-index:1;
  width:100%; height:100%; display:block;
  object-fit:contain; object-position:50% 50%;
}
/* 枠いっぱいに写真が収まっているときだけ、角の丸みが効くように */
.rd-thumbfit > img{ border-radius:inherit; }
/* ぼかしの上に写真が浮いて見えるよう、境目にごく薄い影を落とす */
.rd-thumbfit > img{ filter:drop-shadow(0 0 1px rgba(8,34,52,.28)); }

/* メニューが7本になったので、狭い画面では詰める  [2026-09-15]
   「資料を読む」を足したことで、901〜1000px のあたりで
   メニューがはみ出し、ページごと横スクロールしていた。
   折り返すと2段になって高さが変わるので、文字と余白を詰めて1行に収める。 */
@media only screen and (min-width:901px) and (max-width:1120px){
  .rd-nav a{ padding:0 12px; font-size:13.5px; }
  .rd-nav a::after{ left:9px; right:9px; }
}
@media only screen and (min-width:901px) and (max-width:980px){
  .rd-nav a{ padding:0 9px; font-size:13px; }
  .rd-nav a::after{ left:6px; right:6px; }
}

/* 幅の狭いデスクトップ（900〜1000px あたり）でヘッダーの上段がはみ出し、
   ページごと横スクロールしていた。キャッチコピーを引っ込め、ボタンを詰める。
   [2026-09-15] 相談ボタンの文言が1文字伸びたことで表面化した。 */
@media only screen and (min-width:901px) and (max-width:1060px){
  .rd-head-in{ gap:14px; }
  .rd-head-catch{ display:none; }
}
@media only screen and (min-width:901px) and (max-width:1000px){
  .rd-head-cta .rd-btn{ padding:0 16px; font-size:13.5px; gap:7px; }
}

/* ==================================================================
   相談モーダルの作り直し  [2026-09-15]

   前は「コピー → LINEへ移動 → 友だちページ → トーク → 貼り付け」。
   スマホで途中が切れて最後まで行けないという報告があったので、
   トーク画面を本文つきで直接ひらく形にした。
   コピーの手順は、開かなかった端末のために畳んで残してある。
   ================================================================== */
.rd-modal-fallback{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule,#dce7ee);
  text-align:left;
}
.rd-modal-fallback > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--ink-faint,#86a0b0);
}
.rd-modal-fallback > summary::-webkit-details-marker{ display:none; }
.rd-modal-fallback > summary::before{
  content:"＋"; font-weight:900; color:var(--brand,#1583b8);
}
.rd-modal-fallback[open] > summary::before{ content:"−"; }
.rd-modal-fallback > summary:hover{ color:var(--brand-deep,#0b5f8a); }
.rd-modal-fallback .rd-modal-text{ margin-top:12px; }
.rd-modal-fallback-cta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.rd-modal-recopy{
  padding:9px 20px; border-radius:999px; cursor:pointer;
  background:#fff; border:1.5px solid var(--rule,#dce7ee); color:var(--ink-soft,#4d6d82);
  font-family:var(--jp); font-weight:700; font-size:13.5px;
}
.rd-modal-recopy:hover{ border-color:var(--brand,#1583b8); color:var(--brand-deep,#0b5f8a); }
.rd-modal-addline{ font-size:13px; font-weight:700; color:#05ac49; }
.rd-modal-idnote{
  margin:9px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink-faint,#86a0b0);
}
.rd-modal-idnote b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700; color:var(--ink-soft,#4d6d82);
}
@media only screen and (max-width:900px){
  .rd-modal-fallback > summary{ font-size:13px; }
  .rd-modal-recopy{ width:100%; }
  .rd-modal-addline{ width:100%; text-align:center; }
}

/* ==================================================================
   相談モーダル：パソコンとスマホで中身を入れ替える  [2026-09-15]

   スマホ … ボタンひとつで LINE のトークが本文つきで開く。ここは完結する。
   パソコン … LINE のトークは手元のスマホでしか開けない。
              しかも「コピーしました」と言われても、貼り付ける先は別の端末。
              コピーは役に立たない。だからフォームを主役にして、回答を引き継ぐ。
              LINE で続けたい人には QR を出す。
   ================================================================== */

/* ---- 既定（スマホ）：LINEが主役。フォームとQRは出さない ---- */
.rd-modal-pcnote{ display:none; }
.rd-modal-qr{ display:none; }
.rd-modal-form{ display:none; }

/* ---- パソコン ---- */
@media only screen and (min-width:901px){
  .rd-modal-pcnote{
    display:block; margin:0 0 16px; padding:14px 18px; border-radius:13px;
    background:var(--sky,#eef7fc); border:1px solid #cfe6f3;
    font-family:var(--jp); font-size:13.5px; line-height:1.9; color:var(--ink-soft,#4d6d82);
    text-align:left;
  }
  .rd-modal-pcnote b{
    display:block; font-weight:900; font-size:15px; color:var(--ink,#0e2e44); margin-bottom:4px;
  }
  .rd-modal-pcnote strong{ color:var(--brand-deep,#0b5f8a); font-weight:900; }

  /* フォームを先に、大きく。LINEボタンはここでは出さない */
  .rd-modal-cta{ display:flex; flex-direction:column; gap:10px; }
  .rd-modal-form{ display:inline-flex; order:0; width:100%; }
  .rd-modal-go{ display:none; }

  .rd-modal-qr{
    display:flex; align-items:flex-start; gap:16px;
    margin:16px 0 0; padding:14px 16px; border-radius:13px;
    background:#f3fbf6; border:1px solid #bde9cf; text-align:left;
  }
  .rd-modal-qr img{ flex:none; width:104px; height:104px; display:block; border-radius:7px; }
  .rd-modal-qr-txt{ min-width:0; }
  .rd-modal-qr-txt b{
    display:block; margin-bottom:5px;
    font-family:var(--jp); font-weight:900; font-size:14px; color:var(--ink,#0e2e44);
  }
  .rd-modal-qr-txt p{ margin:0 0 6px; font-size:12.5px; line-height:1.85; color:#3c6a53; }
  .rd-modal-qr-txt p:last-child{ margin-bottom:0; }
  .rd-modal-qr-txt p b{
    display:inline; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:inherit; color:#2c6b4a;
  }
  .rd-modal-qr-alt{ color:#86a0b0 !important; }

  /* パソコンでは「2手で終わる」案内が当てはまらないので出さない */
  .rd-modal-steps{ display:none; }
}

/* パソコンとスマホで文言を入れ替えるための札  [2026-09-15] */
.rd-only-pc{ display:none; }
.rd-only-sp{ display:inline; }
@media only screen and (min-width:901px){
  .rd-only-pc{ display:inline; }
  .rd-only-sp{ display:none; }
}