/* ==========================================================================
   ロボミチ rm2 型（2026-10-02）— 参考＝LITALICOワンダーの作法、形は変える
   採寸メモ＝収益化記事/公開基盤/site_design_ref_litalico_20261002.md
   色は紺・黄・白の3つ。⛔グラデーションと有機的な形は使わない（参考の指紋）
   ========================================================================== */
:root{
  --ink:#1c2432;      /* 白地 15.58:1 */
  --muted:#4f5765;    /* 白地 7.46:1・淡青 6.64:1 */
  --navy:#21418f;     /* 白抜き 9.47:1 */
  --navy-d:#182f66;   /* 黄の上の文字 8.19:1 */
  --yellow:#f7c948;
  --pale:#eef2f9;
  --line:#d5dce8;
  --ph:#dfe5ee;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-size:16px;line-height:1.8;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;word-break:auto-phrase}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.rm-wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.rm-arrow{width:16px;height:16px;flex:none}

/* 明示バー ⛔他デモと同じ仕様 */
.rm-flag{background:#12171c;color:#f2f5f7;font-size:12px;line-height:1.7;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 24px}
.rm-flag b{padding:4px 12px;border-radius:999px;background:#f6c945;color:#221a00;font-weight:700;white-space:nowrap}
.rm-flag span{flex:1 1 16rem}
.rm-flag a{color:#f2f5f7;font-weight:700;text-decoration:underline;white-space:nowrap}

/* ボタン：主＝黄の塗り（紺の文字）・副＝白の線 ⛔黒にしない */
.rm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;
  border-radius:999px;font-size:16px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.rm-btn--main{background:var(--yellow);color:var(--navy-d);box-shadow:0 4px 0 #d9a91f}
.rm-btn--main:hover,.rm-btn--main:focus-visible{transform:translateY(-2px);box-shadow:0 6px 0 #d9a91f}
.rm-btn--line{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.rm-btn--line:hover,.rm-btn--line:focus-visible{transform:translateY(-2px);background:var(--pale)}
.rm-btn--ghost{background:transparent;color:#fff;border:2px solid #fff}
.rm-btn--ghost:hover,.rm-btn--ghost:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){.rm-btn,.rm-grade,.rm-course__more,.rm-links a{transition:none}.rm-btn:hover{transform:none}}

/* ヘッダー */
.rm-hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.rm-hd__in{display:flex;align-items:center;gap:32px;height:72px}
.rm-logo{display:flex;align-items:center;gap:12px}
.rm-logo__mark{width:36px;height:36px;border-radius:8px;background:var(--navy);position:relative}
.rm-logo__mark::after{content:"";position:absolute;left:8px;top:12px;width:20px;height:14px;border-radius:4px;background:var(--yellow)}
.rm-logo__txt{font-size:20px;font-weight:900;color:var(--navy);line-height:1.2;display:flex;flex-direction:column}
.rm-logo__txt small{font-size:12px;font-weight:700;color:var(--muted)}
.rm-nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:700}
.rm-nav a:hover{color:var(--navy)}
.rm-hd__cta{height:44px;padding:0 20px;font-size:14px}

/* KV：右に写真・左に紺の斜めの面 */
.rm-kv{position:relative;background:var(--navy);display:flow-root}
/* ★10-02 Junya「中途半端に下にかかっている→半分くらいでバランスの良いところに」: 約束の帯（高さ約60px）の真ん中で KV が終わる形にする。
   ⛔ flow-root が無いと帯の margin-bottom:-32px が KV の外へ抜け（margin の相殺）、写真が帯の下端まで伸びて『影だけ下に出る』中途半端な形になった */
/* ⛔ 切り落としは飾りの層だけ（.rm-kv__deco）。KV 全体を clip すると約束の帯の下側まで切れた（10-02 Junya 実機スマホ） */
.rm-kv__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.rm-kv__photo{position:absolute;inset:0 0 0 40%}
/* ⛔ 旧 bottom:64px＝写真の下に紺の帯がむき出しになった（10-02 Junya 実機 1263px） */
.rm-kv__img{width:100%;height:100%;object-fit:cover}
.rm-kv__in{position:relative;min-height:456px;display:flex;align-items:center}
.rm-kv__panel{position:relative;z-index:1;width:560px;padding:48px 0 56px;color:#fff}
.rm-kv::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:calc(40% + 120px);background:var(--navy);
  clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%)}
.rm-kv__kick{display:inline-block;background:var(--yellow);color:var(--navy-d);font-size:14px;font-weight:700;padding:4px 12px;border-radius:4px}
.rm-kv__ttl{margin-top:20px;font-size:56px;line-height:1.35;font-weight:900;letter-spacing:.01em}
/* ★10-02 Junya「見出しは大きく」: 48→56px（参考の KV 見出しは 59.6px） */
.rm-kv__lead{margin-top:16px;font-size:18px;line-height:1.8;max-width:30em}
.rm-kv__btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.rm-kv__promise{position:relative;z-index:2;display:flex;list-style:none;background:#fff;border-radius:12px;
  box-shadow:0 8px 24px rgba(24,47,102,.12);margin-bottom:-30px}
/* ⛔ 位置は margin でずらす（transform は入場の動きの transform に上書きされる）。帯は KV の下端をまたいで半分だけ下の節に出す */
.rm-kv__promise li{flex:1;padding:16px 20px;font-size:16px;font-weight:700;color:var(--navy);text-align:center}
.rm-kv__promise li + li{border-left:1px solid var(--line)}

/* ★10-02 Junya「KVもう少し動きをつけられる？」
   ⛔ 動かすのは transform と opacity だけ。⛔ LCP になる KV の写真は動かさない（文字・紺の面・飾りだけ）。
   ⛔ prefers-reduced-motion では全部止める（下の @media）。 */
@keyframes rm-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rm-in{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes rm-spin{to{transform:rotate(360deg)}}
.rm-kv::before{animation:rm-in .8s cubic-bezier(.2,.7,.2,1) both}
.rm-kv__kick{animation:rm-up .6s .15s cubic-bezier(.2,.7,.2,1) both}
.rm-kv__ttl{animation:rm-up .7s .3s cubic-bezier(.2,.7,.2,1) both}
.rm-kv__lead{animation:rm-up .7s .45s cubic-bezier(.2,.7,.2,1) both}
.rm-kv__btns{animation:rm-up .7s .6s cubic-bezier(.2,.7,.2,1) both}
.rm-kv__promise{animation:rm-up .7s .8s cubic-bezier(.2,.7,.2,1) both}
.rm-defs{position:absolute}
.rm-gear{position:absolute;z-index:1;color:var(--yellow);pointer-events:none}
.rm-gear--l{width:200px;height:200px;left:-56px;bottom:12px;opacity:.16;animation:rm-spin 36s linear infinite}
.rm-gear--s{width:72px;height:72px;left:calc(40% + 8px);top:28px;opacity:.9;animation:rm-spin 14s linear infinite reverse}
@media (prefers-reduced-motion:reduce){
  .rm-kv::before,.rm-kv__kick,.rm-kv__ttl,.rm-kv__lead,.rm-kv__btns,.rm-kv__promise,.rm-gear{animation:none}
}

/* ★10-02 Junya「薄い背景は透かし画像を敷いて」: 淡い面＝ぼかした写真を淡い膜（.88）越しに敷く。
   ⛔ その節で見えている写真と同じ写真は敷かない。膜の上の文字は膜込みで測る（muted 6.0:1 以上を確認） */
.rm-about{background:linear-gradient(rgba(238,242,249,.88),rgba(238,242,249,.88)),url(img/rm2-bg-shelf.webp) center/cover}
.rm-point--alt{background:linear-gradient(rgba(238,242,249,.88),rgba(238,242,249,.88)),url(img/rm2-bg-seats.webp) center/cover}
.rm-price{background:linear-gradient(rgba(238,242,249,.88),rgba(238,242,249,.88)),url(img/rm2-bg-course.webp) center/cover}
.rm-faq{background:linear-gradient(rgba(238,242,249,.88),rgba(238,242,249,.88)),url(img/rm2-bg-shelf.webp) center/cover}

/* 共通の節 */
.rm-sec{padding:96px 0}
.rm-h2{font-size:40px;line-height:1.45;font-weight:900}
.rm-h2--center{text-align:center}
.rm-body{margin-top:16px;font-size:16px;color:var(--muted);max-width:36em}
.rm-body--center{margin-inline:auto;text-align:center}
/* ★節の頭の英字を大きく（参考の「ABOUT WONDER」は特大の2色。こちらは1色＋黄の下線で形を変える） */
.rm-en{font-size:40px;line-height:1.2;font-weight:900;letter-spacing:.04em;color:var(--navy);display:inline-block;
  border-bottom:8px solid var(--yellow);padding-bottom:4px;margin-bottom:20px}
.rm-en--center{display:block;width:max-content;margin-inline:auto;margin-bottom:16px}
.rm-note{margin-top:12px;font-size:12px;color:var(--muted)}

/* 写真の枠（プレビュー1） */
.rm-ph{background:var(--ph);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:#4f5765;font-size:14px;font-weight:700}

/* 学年の入口 */
.rm-grades{padding-top:104px}
.rm-grades__list{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rm-grade{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.rm-grade:hover,.rm-grade:focus-visible{transform:translateY(-4px);box-shadow:0 12px 24px rgba(24,47,102,.12)}
.rm-grade__img{aspect-ratio:4/3;width:100%;object-fit:cover}
.rm-grade__body{display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 20px;gap:0 8px}
.rm-grade__body b{font-size:18px;font-weight:900;color:var(--navy)}
.rm-grade__body span{grid-column:1;font-size:14px;color:var(--muted)}
.rm-grade__body .rm-arrow{grid-column:2;grid-row:1 / span 2;width:32px;height:32px;padding:8px;border-radius:50%;background:var(--yellow);color:var(--navy-d)}

/* 考え方 */
.rm-about__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rm-about__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0 64px 0 0}
.rm-steps{margin-top:56px;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:st}
.rm-step{position:relative;background:#fff;border-radius:12px;padding:24px;counter-increment:st}
.rm-step::before{content:counter(st);position:absolute;top:-16px;left:24px;width:32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center}
.rm-step + .rm-step::after{content:"";position:absolute;left:-36px;top:50%;width:16px;height:16px;
  border-top:4px solid var(--navy);border-right:4px solid var(--navy);transform:translateY(-50%) rotate(45deg)}
/* ⛔ 回した「く」の字は見た目の重心が右に寄る＝画素で左右の余白をそろえた値 -36px（10-02 Junya「矢印を真ん中に」） */
.rm-step__ttl{display:block;font-size:20px;font-weight:900;color:var(--navy);margin-top:4px}
.rm-step span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* POINT */
.rm-point__in{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.rm-point__in--rev .rm-point__head{order:2}
.rm-point__no{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rm-point__no span{font-size:14px;font-weight:900;letter-spacing:.16em;color:var(--navy)}
.rm-point__no b{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--navy-d);
  font-size:24px;font-weight:900;display:flex;align-items:center;justify-content:center}
.rm-point__cards{display:grid;gap:16px}
.rm-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px;padding:20px 24px}
.rm-card b{font-size:18px;font-weight:900}
.rm-card p{margin-top:4px;font-size:14px;color:var(--muted)}
.rm-point__img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0 0 0 64px}
.rm-point__img--sub{margin-top:28px;border-radius:0 0 64px 0}
.rm-lv{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rm-lv li{background:#fff;border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.rm-lv__no{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--navy)}
.rm-lv b{font-size:20px;font-weight:900}
.rm-lv li span:last-child{font-size:14px;color:var(--muted)}

/* CTA：紺の帯の上に白い箱 */
.rm-cta{background:var(--navy);padding:56px 0}
.rm-cta__box{width:min(960px,100% - 48px);margin-inline:auto;background:#fff;border-radius:24px;padding:40px 48px;text-align:center}
.rm-cta__kick{font-size:28px;font-weight:900;color:var(--navy)}
.rm-cta__lead{margin-top:8px;font-size:16px;color:var(--muted)}
.rm-cta__btns{margin-top:24px;display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

/* コース */
.rm-courses__grid{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rm-course{display:grid;grid-template-columns:1fr 200px;grid-template-rows:auto auto auto;gap:16px 24px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;scroll-margin-top:96px}
.rm-course__img{grid-column:2;grid-row:1;width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.rm-course__tags{display:flex;gap:8px}
.rm-tag{font-size:12px;font-weight:700;color:#fff;background:var(--navy);padding:2px 12px;border-radius:999px}
.rm-course h3{margin-top:12px;font-size:20px;font-weight:900}
.rm-course p{margin-top:8px;font-size:14px;color:var(--muted)}
.rm-course__meta{grid-column:1 / -1;display:flex;gap:24px;font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.rm-course__meta div{display:flex;gap:8px}
.rm-course__meta dt{font-weight:700;color:var(--navy)}
.rm-course__more{grid-column:1 / -1;justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);transition:transform .2s ease}
.rm-course__more:hover,.rm-course__more:focus-visible{transform:translateX(4px)}

/* 料金 */
.rm-price__wrap{margin-top:40px;overflow-x:auto}
.rm-price__tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;font-size:16px}
.rm-price__tbl th,.rm-price__tbl td{padding:20px 24px;text-align:right;border-bottom:1px solid var(--line)}
.rm-price__tbl th:first-child{text-align:left}
.rm-price__tbl thead th{background:var(--navy);color:#fff;font-size:14px;font-weight:700}
.rm-price__tbl tbody th{font-weight:700}
.rm-price__total{font-size:24px;font-weight:900;color:var(--navy);white-space:nowrap}
.rm-price__total small{font-size:14px;margin-left:2px}

/* 体験の日 */
.rm-day__in{display:grid;grid-template-columns:4fr 7fr;gap:64px;align-items:start}
.rm-day__in .rm-btn{margin-top:28px}
.rm-day__list{list-style:none;border-left:4px solid var(--yellow);padding-left:28px;display:grid;gap:24px}
.rm-day__list li{display:grid;grid-template-columns:56px 1fr;gap:16px}
.rm-day__time{font-size:16px;font-weight:900;color:var(--navy)}
.rm-day__list b{font-size:18px;font-weight:900}
.rm-day__list p{font-size:14px;color:var(--muted);margin-top:4px}

/* FAQ */
.rm-faq__in{max-width:880px}
.rm-faq__list{margin-top:40px;display:grid;gap:12px}
.rm-faq__item{background:#fff;border-radius:12px}
.rm-faq__item summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-size:16px;font-weight:700;position:relative}
.rm-faq__item summary::-webkit-details-marker{display:none}
.rm-faq__item summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:900;color:var(--navy);transition:transform .3s ease}
.rm-faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
/* ★10-02 Junya「transition」: よくある質問の開け閉めに動きを付ける。
   ::details-content と interpolate-size（対応ブラウザ）で高さを動かし、記号は＋→×へ回す。
   ⛔ 未対応のブラウザでは今までどおり動きなしで開く（壊れない）。⛔ 動きを減らす設定では止める */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}

.rm-faq__item p{padding:0 24px 20px;font-size:14px;color:var(--muted)}

/* リンクのピル・フッター */
.rm-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:56px 0}
.rm-links a{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;border:1px solid var(--line);border-radius:999px;font-size:16px;font-weight:700;color:var(--navy);transition:transform .2s ease}
.rm-links a:hover,.rm-links a:focus-visible{transform:translateY(-2px);border-color:var(--navy)}
.rm-ft{background:var(--navy-d);color:#e6ebf5;padding:48px 0;font-size:12px}
.rm-ft__brand{font-size:20px;font-weight:900;color:#fff;display:flex;flex-direction:column;margin-bottom:12px}
.rm-ft__brand small{font-size:12px;font-weight:400;color:#c9d3e6}
.rm-ft a{display:inline-block;margin-top:12px;color:#fff;text-decoration:underline}

/* タブレット */
@media (max-width:899px){
  .rm-nav{display:none}
  .rm-grades__list{grid-template-columns:repeat(2,1fr)}
  .rm-about__in,.rm-point__in,.rm-day__in{grid-template-columns:1fr;gap:32px}
  .rm-point__in--rev .rm-point__head{order:0}
  .rm-courses__grid{grid-template-columns:1fr}
}
/* スマホ */
@media (max-width:767px){
  .rm-wrap{width:calc(100% - 32px)}
  .rm-hd__in{height:60px;gap:12px}
  .rm-logo__txt small{display:none}
  .rm-hd__cta{margin-left:auto;height:40px;padding:0 16px;font-size:12px}
  .rm-hd__cta .rm-arrow{display:none}
  /* ⛔ スマホは写真を文字とボタンの下へ（上に置くと主ボタンが 728px＝基準616px を外れた・10-02 実測） */
  .rm-kv{display:flex;flex-direction:column;background:#fff}
  /* ⛔ スマホは紺を見出しの塊だけに敷く（KV 全体が紺だと写真の下・約束の帯の横に紺がむき出し＝10-02 Junya 実機） */
  .rm-kv__in{background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax)}
  .rm-kv__in{order:1}
  .rm-kv__photo{order:2;position:relative;inset:auto;height:200px}
  .rm-kv__promise{order:3}
  .rm-kv::before{display:none}
  .rm-gear--l{width:120px;height:120px;left:auto;right:-32px;bottom:auto;top:16px}
  .rm-gear--s{display:none}
  .rm-kv__in{min-height:0}
  .rm-kv__panel{width:100%;padding:28px 0 48px}
  .rm-kv__ttl{font-size:32px}
  .rm-en{font-size:28px;border-bottom-width:6px}
  .rm-kv__lead{font-size:16px}
  .rm-kv__btns .rm-btn{flex:1 1 100%}
  .rm-kv__promise{flex-direction:column;margin-top:-24px;margin-bottom:-24px}
  .rm-grades{padding-top:88px}
  .rm-kv__promise li{padding:12px 16px;font-size:14px}
  .rm-kv__promise li + li{border-left:0;border-top:1px solid var(--line)}
  .rm-sec{padding:64px 0}
  .rm-h2{font-size:28px}
  .rm-grades__list{gap:12px}
  .rm-grade__body{padding:12px}
  .rm-grade__body b{font-size:16px}
  .rm-grade__body span{font-size:12px}
  .rm-grade__body .rm-arrow{display:none}
  .rm-steps{grid-template-columns:1fr;gap:28px}
  .rm-step + .rm-step::after{display:none}
  .rm-lv{grid-template-columns:1fr}
  .rm-cta__box{padding:28px 20px}
  .rm-cta__kick{font-size:24px}
  .rm-sp-hide{display:none}
  .rm-cta__btns .rm-btn{flex:1 1 100%}
  .rm-course{grid-template-columns:1fr;padding:20px}
  .rm-course__img{grid-column:1;grid-row:auto;width:100%;aspect-ratio:16/9}
  /* ⛔ 4列の表は390pxで右端の総額が切れた（10-02 実測）→ 1コース1段に組み替える */
  .rm-price__tbl thead{display:none}
  .rm-price__tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:16px;border-bottom:1px solid var(--line)}
  .rm-price__tbl th,.rm-price__tbl td{padding:0;border:0;text-align:left;font-size:14px}
  .rm-price__tbl tbody th{grid-column:1 / -1;font-size:16px}
  .rm-price__tbl td::before{content:attr(data-l) "　";color:var(--muted);font-size:12px}
  .rm-price__total{grid-column:1 / -1;font-size:20px;text-align:right}
  .rm-links{grid-template-columns:1fr;gap:12px}
}