@charset "UTF-8";
/* ================================================================
   MOAI PROJECT 下層ページ 共通シェル
   TOP（index.html）の作りをそのまま下層へ持ってくるためのもの。
   色・書体・見出しの作り・カードの縁は TOP から実測して写した。
   TOP 側のファイルには一切手を入れていない。
   ================================================================ */

:root{
  /* TOP の #s01〜#s13 が共通で使っている値をそのまま持ってきた */
  --blue:#1d69ac;        /* 面・ヘッダー・ナビ帯 */
  --sky:#32a6e1;         /* 明るい青。差し色 */
  --sky-l:#9fd6f0;       /* カードの縁 */
  --yellow:#fff200;      /* 強調。1ページに数回だけ */
  --ink:#10264a;         /* 見出し・フッターの地 */
  --tx:#16222e;          /* 本文 */
  --tx-2:#5b6b7a;        /* 補足 */
  --line:#cfe3f1;        /* 罫 */
  --paper:#fff;
  --wash:#f2f8fc;        /* ごく薄い水色の面 */
  color-scheme: light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:'M PLUS 1p',"Helvetica Neue",Arial,"Hiragino Sans","BIZ UDPGothic","Yu Gothic Medium",Meiryo,sans-serif;
  font-size:16px;line-height:1.75;              /* 和文の本文行間 */
  line-break:strict;overflow-wrap:anywhere;     /* 禁則を厳格に／長いURLの保険 */
  overflow-x:hidden;
}
img{max-width:100%}

/* ---------- ヘッダー（TOPと同じ・全幅の青／ロゴ左／NEXT STOP右） ---------- */
.sitehead{background:var(--blue);color:#fff}
.sitehead .in{width:1280px;max-width:100%;height:56px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between}
.sitehead .lg img{height:40px;display:block}
.sitehead .ns{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700}
.sitehead .ns b{background:var(--yellow);color:var(--ink);padding:3px 10px;border-radius:3px;
  letter-spacing:.08em;font-size:12px;white-space:nowrap}

/* ---------- 右端の縦タブ（TOPと同じ） ---------- */
.vtab{position:fixed;right:0;z-index:50;width:52px;height:200px;background:var(--yellow);color:var(--ink);
  border-radius:10px 0 0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-decoration:none;box-shadow:-3px 3px 10px rgba(16,38,74,.25);font-weight:700;
  transition:width .18s,background .18s}
.vtab.t1{top:calc(50% - 200px)}
.vtab.t2{top:calc(50% + 6px)}
.vtab img{width:40px;height:40px;object-fit:contain}
.vtab span{writing-mode:vertical-rl;font-size:13px;letter-spacing:.06em}
.vtab i{font-style:normal;font-size:16px;line-height:1}
.vtab:hover{background:#ffe600;width:60px}

/* ---------- ナビ帯（TOPと同じ） ---------- */
.navband{display:flex;background:var(--blue);color:#fff}
.navband a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;
  color:#fff;text-decoration:none;font-size:13px;font-weight:700;
  border-left:1px solid rgba(255,255,255,.28);transition:background .18s}
.navband a:first-child{border-left:0}
.navband a:hover{background:#2b8ad6}
/* 現在地は濃紺で示す。#2b8ad6 に白13pxではコントラストが3.68しか取れない（必要4.5） */
.navband a[aria-current="page"]{background:var(--ink);box-shadow:inset 0 -4px 0 var(--yellow)}
.navband img{width:42px;height:42px;object-fit:contain;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}

/* ---------- パンくず ---------- */
.crumb{background:var(--wash);border-bottom:1px solid var(--line)}
.crumb ol{width:1316px;max-width:100%;margin:0 auto;padding:10px 20px;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--tx-2)}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb li+li::before{content:"›";margin-right:8px;color:#9bb0c2}

/* ---------- ページ見出し（下層の顔） ----------
   TOPの見出しの作り（900・縁取り・黄色の下線・斜めの帯）を下層用に組み直した。
   TOPのFVはスライダーなので、下層は「帯」で受ける。 */
.phead{position:relative;background:var(--blue);color:#fff;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(50,166,225,.0) 42%,rgba(50,166,225,.55) 42%,rgba(50,166,225,.55) 52%,rgba(50,166,225,0) 52%),
    linear-gradient(115deg,rgba(255,242,0,0) 58%,rgba(255,242,0,.9) 58%,rgba(255,242,0,.9) 61%,rgba(255,242,0,0) 61%);
  pointer-events:none}
.phead .in{position:relative;z-index:2;width:1316px;max-width:100%;margin:0 auto;padding:52px 20px 46px}
.phead .lab{font-size:19px;font-weight:900;letter-spacing:.32em;color:#9fd6f0}
.phead h1{margin:6px 0 0;font-size:clamp(34px,4.6vw,57px);font-weight:900;line-height:1.25;
  letter-spacing:-.01em;text-wrap:balance;
  text-shadow:0 2px 10px rgba(16,38,74,.28);
  font-feature-settings:"palt" 1}
.phead .ul{width:110px;height:9px;background:var(--yellow);border-radius:4px;margin-top:18px}
.phead .lead{margin:16px 0 0;font-size:17px;font-weight:700;max-width:34ic}

/* ---------- セクション ---------- */
.sec{padding:84px 0}
.sec--wash{background:var(--wash)}
.wrap{width:1316px;max-width:100%;margin:0 auto;padding:0 20px}
.lab{font-size:19px;font-weight:900;letter-spacing:.32em;color:#2a95d8}
.h2{margin:6px 0 0;font-size:clamp(28px,3.6vw,46px);font-weight:900;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);-webkit-text-stroke:1.2px var(--ink);
  text-wrap:balance;font-feature-settings:"palt" 1}
.h2 .sk{display:inline-block;transform:skewX(-12deg)}   /* TOPの斜め見出しと同じ */
.ul{width:110px;height:9px;background:var(--yellow);border-radius:4px;margin-top:16px}
.head--c{text-align:center}
.head--c .ul{margin-left:auto;margin-right:auto}
.lead{margin:18px 0 0;font-size:17px;line-height:1.9;max-width:34ic}
.head--c .lead{margin-left:auto;margin-right:auto}

/* 注記は本文より長くなりがち。和文の上限（約40字）で折る */
.note,.nt,.hits,.cap,figcaption,.notes li,.say,dd{max-width:40ic}
.say{margin-left:auto;margin-right:auto}

/* ---------- カード（TOPの講師カードと同じ縁・角・影） ---------- */
.card{background:#fff;border:2px solid var(--sky-l);border-radius:8px;
  box-shadow:0 5px 20px rgba(16,38,74,.10)}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;border-radius:999px;font-weight:900;font-size:17px;text-decoration:none;
  border:0;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
.btn--main{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #d8ce00}
.btn--main:hover{transform:translateY(2px);box-shadow:0 4px 0 #d8ce00}
.btn--sub{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn--sub:hover{background:var(--blue);color:#fff}

/* ---------- 絞り込みのタブ ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.filter button{appearance:none;border:2px solid var(--sky-l);background:#fff;color:var(--tx);
  border-radius:999px;padding:9px 20px;font-weight:700;font-size:15px;cursor:pointer;
  font-family:inherit;transition:background .16s,color .16s,border-color .16s}
.filter button:hover{border-color:var(--sky)}
.filter button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.filter .n{font-size:13px;opacity:.75;margin-left:6px}
.hits{margin-top:14px;font-size:14px;color:var(--tx-2);font-variant-numeric:tabular-nums}

/* ---------- 下部CTA（全ページ共通） ---------- */
.cta{position:relative;background:var(--ink);color:#fff;padding:76px 0;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(50,166,225,0) 46%,rgba(50,166,225,.35) 46%,rgba(50,166,225,.35) 54%,rgba(50,166,225,0) 54%)}
.cta .in{position:relative;z-index:2;width:1316px;max-width:100%;margin:0 auto;padding:0 20px;text-align:center}
.cta h2{margin:0;font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.3;
  text-shadow:0 2px 12px rgba(0,0,0,.3);font-feature-settings:"palt" 1}
.cta p{margin:14px auto 0;font-size:17px;max-width:34ic}
.cta .ribbon{display:inline-block;margin-top:26px;color:var(--yellow);font-weight:900;font-size:19px;
  letter-spacing:.06em}
.cta .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* ---------- フッター（TOPと同じ） ---------- */
.sitefoot{background:var(--ink);color:#fff;padding:56px 0 40px}
.sitefoot .in{width:1200px;max-width:100%;margin:0 auto;padding:0 20px}
.sitefoot .tg{font-weight:700;font-size:22px;letter-spacing:-.01em}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:36px;margin-top:28px;font-weight:700;font-size:14px}
.sitefoot a{color:#fff;text-decoration:none}
.sitefoot a:hover{text-decoration:underline}
.sitefoot .c{margin-top:36px;font-size:13px;opacity:.7}
.sitefoot .c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}.sitefoot .lg{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px}
@media (max-width:767px){.sitefoot .c{flex-direction:column;align-items:flex-start}}

/* ---------- 動き（TOPと同じ控えめさ。1ページに1種類だけ） ---------- */
/* 🔴 opacity:0 から始めない。観測やタイマーが遅れただけで中身が消えたままになり、
   実測で実際にそうなった。文字は最初から見えていて、位置だけが動く形にする。 */
.fade{transform:translateY(22px);transition:transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s)}
.in-view .fade,.fade.in-view{transform:none}
@media (prefers-reduced-motion:reduce){
  .fade{transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 狭い画面 ---------- */
@media (max-width:1100px){
  .vtab{display:none}
  .navband{flex-wrap:wrap}
  /* 7項目なので4列にすると 4+3 で埋まる。3列だと最後の1つが行に取り残される */
  .navband a{flex:0 0 25%;border-left:1px solid rgba(255,255,255,.28);
    border-top:1px solid rgba(255,255,255,.28)}
  /* 列数が変わっても最後の1つが余らないよう、申込は行を使い切る */
  .navband a:last-child{flex:1 1 100%;flex-direction:row;gap:10px;background:#17568c}
  .navband a:last-child img{width:30px;height:30px}
}
@media (max-width:720px){
  body{font-size:15px}
  .sitehead .in{height:auto;padding:10px 16px;flex-direction:column;gap:8px}
  .sitehead .ns{font-size:12px;text-align:center;flex-wrap:wrap;justify-content:center;gap:8px}
  .sitehead .ns span{flex:1 1 100%}
  .navband a{flex:0 0 50%;font-size:12px}
  .navband a:last-child{flex:1 1 100%}
  .navband img{width:34px;height:34px}
  .sec{padding:56px 0}
  .phead .in{padding:38px 16px 34px}
  .wrap,.crumb ol,.cta .in,.sitefoot .in{padding-left:16px;padding-right:16px}
}

/* ナビ帯の追従：通り過ぎたら固定。下スクロール中は隠れ、上に戻すと出る（shared/nav.js） */
.navband.nav-fixed{position:fixed;left:0;right:0;top:0;z-index:55;transform:translateY(-100%);transition:transform .28s ease;box-shadow:0 3px 14px rgba(16,38,74,.28)}
.navband.nav-fixed.nav-show{transform:none}
@media (prefers-reduced-motion:reduce){.navband.nav-fixed{transition:none}}
@media (max-width:1100px){
  /* 狭い画面で固定中は、画面を塞がないよう1段の横スクロール帯にする */
  .navband.nav-fixed{display:flex!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;grid-template-columns:none!important}
  .navband.nav-fixed::-webkit-scrollbar{display:none}
  .navband.nav-fixed a,.navband.nav-fixed a:last-child{flex:0 0 auto;flex-direction:row;gap:6px;padding:10px 14px;font-size:13px;white-space:nowrap;border-top:0;border-left:1px solid rgba(255,255,255,.28);background:transparent;grid-column:auto;justify-content:flex-start;min-height:0}
  .navband.nav-fixed a:first-child{border-left:0}
  .navband.nav-fixed img,.navband.nav-fixed a:last-child img{width:22px;height:22px}
}