@charset "UTF-8";
/* =========================================================
   ランランド リニューアル 共通デザインシステム (renewal-ds.css)
   - 全リニューアルページ共通のトークン / 共通コンポーネント
   - スコープ(.kosotsu-lp / .rl-school / .rl-price 等)の内側でも外側でも動作するよう
     :root にトークンを定義（各スコープの同名変数は同値のため衝突しない）
   - 追加クラスは rl- プレフィックスで common.css と非衝突
   ========================================================= */

:root{
  --rl-navy:#123a6b; --rl-navy2:#0d2c52; --rl-blue:#2f6db0; --rl-sky:#6aa9e0; --rl-sky-soft:#e0eefb;
  --rl-accent:#e05271; --rl-accent-ink:#b23354; --rl-green:#2f9e6f; --rl-mark:#ffe58a;
  --rl-ink:#1b2733; --rl-ink2:#4b5c6e; --rl-ink3:#7f8ea0; --rl-line:#dbe5ef;
  --rl-bg:#f4f8fc; --rl-surface:#fff;
  --rl-radius:16px; --rl-radius-sm:12px; --rl-radius-lg:22px;
  --rl-shadow:0 12px 30px -24px rgba(20,50,90,.4);
  --rl-shadow-lg:0 20px 44px -22px rgba(20,50,90,.32);
  --rl-container:1080px;
  --rl-font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}

/* ---------- スクロール演出（フェードイン・最小限） ----------
   JS(html.js)がある時だけ隠す＝JS無効/失敗時は必ず表示（コンテンツ消失防止） */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.06s}html.js .reveal.d2{transition-delay:.12s}html.js .reveal.d3{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- 共通アイコン画像（絵文字→素材アイコン置換） ---------- */
.rl-ico{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-0.16em}

/* ---------- PCのみ改行するユーティリティ ----------
   日本語の長いリード文は、PCだと1行が長くなり読みづらいため文の切れ目（。）で折り返す。
   スマホ・タブレット縦は幅が狭く自然改行で十分なので、無効化して不自然な短い行を防ぐ */
.rl-brpc{display:none}
@media(min-width:900px){.rl-brpc{display:inline}}

/* ---------- ヘッダー上部の3ボタン（資料請求/お問い合わせ/電話）を .btn デザインに統一 ----------
   色（赤/緑/青）と高さ(38px)は維持し、角丸・太字・影・ホバーをサイトの .btn に揃える */
.header-right-upper .btn_wrap1 a{
  border-radius:11px;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.02em;
  box-shadow:0 8px 16px -8px rgba(20,50,90,.45);
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.header-right-upper .btn_wrap1 a:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 22px -10px rgba(20,50,90,.55);
}

/* ---------- 共通パンくず（視覚）: schemaはAIOSEOが別途出力 ---------- */
.rl-bc{font-size:12px;color:var(--rl-ink3);line-height:1.6;letter-spacing:.01em}
.rl-bc a{color:var(--rl-ink3);text-decoration:none}
.rl-bc a:hover{color:var(--rl-blue);text-decoration:underline}
.rl-bc span[aria-current]{color:var(--rl-ink2);font-weight:700}
.rl-bc .sep{margin:0 7px;color:#c3d0de}

/* ---------- 下層ページ 共通ヒーロー（コンパクト・高さ統一） ---------- */
/* padding はクラスを2回重ねて詳細度(0,2,0)を確保する。各ページの `.{スコープ} section{padding:60px 0}`
   (0,1,1) が後から効いてしまい、ヒーローのpaddingを乗っ取っていたため（2026-07-16） */
.rl-subhero.rl-subhero{
  background:linear-gradient(180deg,#ffffff,#eaf2fb);
  border-bottom:1px solid var(--rl-line);
  padding:26px 0 30px;
  min-height:300px;               /* 下層ページのヒーロー高さを統一 */
  display:flex;align-items:center;
}
.rl-subhero .rl-subhero-in{max-width:var(--rl-container);margin:0 auto;padding:0 20px;width:100%;text-align:center}
.rl-subhero .rl-eyebrow{color:var(--rl-accent);font-weight:800;font-size:12.5px;letter-spacing:.14em;margin:12px 0 0}
.rl-subhero h1{font-size:clamp(24px,3.6vw,37px);font-weight:900;line-height:1.3;letter-spacing:.01em;margin:.14em 0 0;color:var(--rl-ink);text-wrap:balance}
.rl-subhero .rl-subhero-lead{color:var(--rl-ink2);font-size:clamp(14px,1.7vw,15.5px);margin:12px auto 0;max-width:46em;line-height:1.8}
@media(max-width:600px){
  /* モバイルも下層ヒーロー高さを統一（eyebrowは1行、leadは3行までに収める）。
     モバイルは固定ヘッダー(15vw≒57px)がヒーローに重なるので、その分を上paddingと
     min-heightの両方に足す。→ ヘッダーより下に見える高さが全ページ300pxで揃う。
     （TOPの .rl-top .hero と同じ考え方。中身はflexで上下中央寄せ） */
  .rl-subhero.rl-subhero{padding:calc(15vw + 18px) 0 22px;min-height:calc(300px + 15vw)}
  .rl-subhero .rl-eyebrow{font-size:11px;letter-spacing:.06em;margin-top:8px}
  .rl-subhero h1{font-size:clamp(22px,6.4vw,27px);line-height:1.34}
  .rl-subhero .rl-subhero-lead{font-size:13.5px;line-height:1.75;margin-top:10px}
}

/* ---------- 信頼バー（E-E-A-T クレデンシャル帯） ---------- */
.rl-trust{background:var(--rl-surface);border-bottom:1px solid var(--rl-line)}
.rl-trust .rl-trust-in{max-width:var(--rl-container);margin:0 auto;padding:16px 20px;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center}
.rl-trust .rl-tr{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--rl-ink2);white-space:nowrap}
.rl-trust .rl-tr .rl-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--rl-sky-soft);color:var(--rl-navy);font-size:14px;flex:none}
.rl-trust .rl-tr b{color:var(--rl-navy);font-family:Arial,sans-serif}
.rl-trust .rl-tr .rl-sub{color:var(--rl-ink3);font-weight:600}
@media(max-width:760px){
  .rl-trust .rl-trust-in{gap:10px 16px;justify-content:flex-start}
  .rl-trust .rl-tr{font-size:12px}
}
@media(max-width:480px){
  .rl-trust .rl-trust-in{padding:14px 16px;gap:9px 14px}
  .rl-trust .rl-tr .rl-ic{width:23px;height:23px;font-size:13px}
}

/* ---------- 次アクション導線（関連ページカード） ---------- */
.rl-next{background:var(--rl-bg)}
.rl-next .rl-next-in{max-width:var(--rl-container);margin:0 auto;padding:44px 20px}
.rl-next h2{text-align:center;font-size:clamp(18px,2.4vw,23px);font-weight:900;margin:0 0 6px;color:var(--rl-ink)}
.rl-next .rl-next-note{text-align:center;color:var(--rl-ink2);font-size:14px;margin:0 auto 26px;max-width:40em}
.rl-next .rl-next-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.rl-next .rl-next-grid{grid-template-columns:repeat(3,1fr)}}
.rl-next .rl-nx{display:flex;flex-direction:column;background:var(--rl-surface);border:1px solid var(--rl-line);
  border-radius:var(--rl-radius);padding:22px 22px 20px;text-decoration:none;color:inherit;
  box-shadow:var(--rl-shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rl-next .rl-nx:hover{transform:translateY(-3px);box-shadow:var(--rl-shadow-lg);border-color:var(--rl-sky)}
.rl-next .rl-nx .rl-nx-ic{font-size:26px}
.rl-next .rl-nx b{display:block;font-size:16px;font-weight:900;margin:10px 0 4px;color:var(--rl-ink)}
.rl-next .rl-nx span{font-size:13px;color:var(--rl-ink2);line-height:1.7}
.rl-next .rl-nx .rl-nx-go{margin-top:14px;font-size:13.5px;font-weight:800;color:var(--rl-accent-ink)}

/* ---------- スマホメニュー（2026-07-16 作り直し） ----------
   旧実装の問題:
   - .navbtn が 0x0（実体は高さ2pxの線3本のみ）＝タップ判定がほぼ無く、開閉に失敗しやすかった
   - パネルCSSが要素セレクタ `nav` だったため、パンくず(.rl-bc)や記事ページャ(.art-pager)まで
     画面外の固定パネル化 → メニューを開くと白いパネルが重なり中身が読めなかった（common.cssで .gnav に限定済）
   - 開閉状態をJSのグローバル変数 hantei と inline style で持っていた → is-open クラスで管理に変更 */
@media screen and (max-width:769px){
  .navbtn{
    /* 44x44 のタップ領域を確保（バーの見た目位置は従来どおり right:0 基準で不変） */
    width:44px;height:44px;
    display:block;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .navbtn:focus-visible{outline:2px solid var(--rl-accent);outline-offset:2px;border-radius:8px}

  /* 開閉は「横スライド」ではなく、その場でのフェードにする。
     common.css の left:-100% を使ったスライドは、開いた瞬間にメニューが左からずれ込んで見えるため
     （左右の動きを見せない＝サイト方針のフェード演出に統一）。left は 0 に固定し opacity で出し分ける。 */
  .gnav{
    left:0;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease, visibility 0s linear .18s;
  }
  .gnav.is-open{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .18s ease;
  }
  /* メニュー展開中は背面のページがスクロールしないようにする */
  html.menu-open,body.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){ .gnav,.gnav.is-open{transition:none} }