@charset "utf-8";
/* 合格院試塾 — 結合スタイルシート（自動生成。編集は site/css/ 側で） */

/* ---------- base.css ---------- */


/* =========================================================
   合格院試塾 — Figma 完全再現 (1920px アートボード基準)
   node: 909-2044 / Frame 40
   ========================================================= */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li,
figure, figcaption, section, header, footer, nav, main, table, tbody,
thead, tr, th, td, dl, dt, dd, button, input, textarea, select {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ul, ol { list-style: none; }
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { background: none; cursor: pointer; font-family: inherit; }

/* ---- design tokens (Figma) ---- */
:root {
  --blue:        #4593ff;
  --blue-deep:   #003b98;
  --blue-grad-b: #0063ff;
  --blue-border: #6184ae;
  --ink:         #353535;
  --ink-strong:  #232323;
  --gray:        #6d6d6d;
  --red:         #ff4545;
  --marker:      #fff6b5;
  --white:       #fff;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  --art-w: 1920;
}

/* ---- アートボードを viewport 幅へ等比スケール ----
   PC: 1920px アートボード / SP: 540px アートボード
   ブレイクポイント 768px で切り替え                       */
html { background: #fff; }
body {
  font-family: var(--sans);
  color: var(--ink);
  overflow-x: hidden;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
#stage,
#stage-sp {
  transform-origin: 0 0;
  will-change: transform;
}
#stage    { width: 1920px; }
#stage-sp { width: 540px; }

@media (max-width: 767px) { #stage    { display: none; } }
@media (min-width: 768px) { #stage-sp { display: none; } }

/* ---- 共通ユーティリティ ---- */
.sec { position: relative; width: 1920px; overflow: hidden; }
.sec-sp { position: relative; width: 540px; overflow: hidden; }
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.c-blue { color: var(--blue); }
.c-red  { color: var(--red); }

/* Figma 実寸のフォールバック画像（コードで再現不能な装飾ブロック） */
.fig-img { width: 1920px; height: auto; display: block; }


/* ---------- common-footer.css ---------- */
/* ============ 共通 / SP フッター  node:909-4201 ============ */
.sp-ftr {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  min-height: 900px; padding: 64px 24px; background: var(--ink-strong);
}
.sp-ftr__top {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  width: 100%; padding-bottom: 64px; border-bottom: 1px solid #666;
}
.sp-ftr__logo img { width: 377.358px; height: 100px; object-fit: cover; }
/* SNS 5個 × 80px。540 のアートボードに収めるため gap を 16 にする（80*5+16*4=464 < 492） */
.sp-ftr__sns { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sp-ftr__sns a { display: block; width: 80px; height: 80px; }
.sp-ftr__sns img { width: 80px; height: 80px; }
.sp-ftr__nav {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  width: 100%; padding: 0 40px;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal;
  color: #666; white-space: nowrap;
}
.sp-ftr__copy {
  font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: normal;
  color: #666; white-space: nowrap;
}

/* 下層ページのフッターは罫線・文字が #aaa（node 909-1675 / 909-1876） */
.ftr--sub { overflow: hidden; }
.ftr--sub .ftr__top { border-bottom-color: #aaa; }
.ftr--sub .ftr__nav,
.ftr--sub .ftr__copy { color: #aaa; }
.sp-ftr--sub .sp-ftr__top { border-bottom-color: #aaa; }
.sp-ftr--sub .sp-ftr__nav,
.sp-ftr--sub .sp-ftr__copy { color: #aaa; }


/* ---------- common-page-sp.css ---------- */
/* ============ 下層ページ共通 / SP  node:909-1809 / 909-1888 ============ */

/* ---- ページタイトル帯 ---- */
.sp-pg-hero { display: flex; align-items: center; justify-content: flex-start; padding: 64px 24px; overflow: hidden; }
.sp-pg-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.sp-pg-hero__bg .w { position: absolute; inset: 0; background: var(--white); }
.sp-pg-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotate(180deg) scaleY(-1); }
.sp-pg-hero__bg .tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-9.8925deg, rgba(0, 59, 152, .4) 30.574%, rgba(23, 93, 203, .4) 60.046%);
}
.sp-pg-hero__ttl {
  position: relative;
  font-family: var(--serif); font-weight: 900; font-size: 40px; line-height: normal;
  color: var(--white); white-space: nowrap;
}

/* ---- 一覧本体 ---- */
.sp-arc { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 64px 24px; }
.sp-arc__bg { position: absolute; inset: 0; pointer-events: none; }
.sp-arc__bg .flat { position: absolute; inset: 0; background: #f6fbfc; }
.sp-arc__bg .noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp-arc__tabs { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; width: 100%; }
.sp-arc__tab {
  display: flex; align-items: center; justify-content: center; padding: 16px 24px;
  background: var(--white); border: 1px solid #aaa;
  font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 19.5px;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}
.sp-arc__tab.is-current { background: var(--blue); border-color: var(--ink-strong); color: var(--white); font-weight: 700; }

.sp-arc__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; }
.sp-arc__main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sp-arc__hd { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.sp-arc__hd-ttl { display: flex; align-items: center; gap: 16px; width: 100%; }
.sp-arc__hd-ttl img { width: 16px; height: 16px; flex: none; }
.sp-arc__hd-ttl span {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal;
  color: var(--ink-strong); white-space: nowrap;
}
.sp-arc__hd-rule { width: 100%; height: 1px; }

.sp-arc__grid { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 24px 12px; width: 100%; }
.sp-card { display: flex; flex-direction: column; align-items: flex-start; width: 240px; background: var(--white); }
.sp-card__thumb { display: block; width: 100%; aspect-ratio: 368 / 227.4413; background: #d8d8d8; }
.sp-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 18px; }
.sp-card__ttl {
  width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: normal; color: var(--ink-strong);
}
.sp-card__cats { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 7.5px; width: 100%; }
.sp-card__cats li {
  display: flex; width: 60px; align-items: center; justify-content: center; padding: 4.5px 0; overflow: hidden;
  background: var(--white); border: .375px solid var(--blue);
  font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: normal;
  color: var(--blue); text-align: center; white-space: nowrap;
}
.sp-card__meta {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 14.25px;
  font-family: var(--serif); font-weight: 400; font-size: 12px; line-height: normal;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}

.sp-pager { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.sp-pager__no, .sp-pager__arw {
  display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--sans); font-size: 18px; line-height: 14.625px; color: var(--ink-strong); text-align: center;
}
.sp-pager__no { font-weight: 500; background: var(--white); }
.sp-pager__no.is-current { background: var(--blue); color: var(--white); }
.sp-pager__arw { font-weight: 100; }

.sp-arc__side { display: flex; flex-direction: column; align-items: flex-start; width: 100%; overflow: hidden; }
.sp-arc__side-ttl {
  display: flex; width: 100%; align-items: center; padding: 12px 15px; background: var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: normal; color: var(--white);
}
.sp-arc__side-item {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 12px 15px;
  border-top: .75px dashed #aaa; border-bottom: .75px dashed #aaa;
}
.sp-arc__side-item .n { width: 100%; font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: normal; color: var(--ink-strong); }
.sp-arc__side-item .d { width: 100%; font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: normal; color: #aaa; }


/* ---------- common-page.css ---------- */
/* ============ 下層ページ共通 / PC  node:909-1621 / 909-1676 ============ */

/* ---- ページタイトル帯 ---- */
.pg-hero {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 160px; overflow: hidden;
}
.pg-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.pg-hero__bg .w { position: absolute; inset: 0; background: var(--white); }
.pg-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotate(180deg) scaleY(-1); }
.pg-hero__bg .tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-6.0536deg, rgba(0, 59, 152, .4) 30.574%, rgba(23, 93, 203, .4) 60.046%);
}
.pg-hero__ttl {
  position: relative;
  font-family: var(--serif); font-weight: 900; font-size: 56px; line-height: normal;
  color: var(--white); white-space: nowrap;
}

/* ---- 一覧本体 ---- */
.arc {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  padding: 100px 160px 160px;
}
.arc__bg { position: absolute; inset: 0; pointer-events: none; }
.arc__bg .flat { position: absolute; inset: 0; background: #f6fbfc; }
.arc__bg .noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.arc__tabs { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; }
.arc__tab {
  display: flex; align-items: center; justify-content: center; padding: 16px 24px;
  background: var(--white); border: 1px solid #aaa;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 19.5px;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}
.arc__tab.is-current { background: var(--blue); border-color: var(--ink-strong); color: var(--white); font-weight: 700; }

.arc__cols { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 100px; width: 100%; }
.arc__main { display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 48px; }

.arc__hd { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; }
.arc__hd-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.arc__hd-ttl { display: flex; align-items: center; gap: 16px; width: 696.5px; }
.arc__hd-ttl img { width: 16px; height: 16px; flex: none; }
.arc__hd-ttl span {
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal;
  color: var(--ink-strong); white-space: nowrap;
}
.arc__back {
  font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: normal;
  color: #aaa; text-align: center; white-space: nowrap;
}
.arc__hd-rule { width: 100%; height: 1px; }

/* ---- 記事カード ---- */
.arc__grid { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 40px 20px; width: 100%; }
.card { display: flex; flex-direction: column; align-items: flex-start; width: 348.58px; background: var(--white); }
.card__thumb { display: block; width: 100%; aspect-ratio: 368 / 227.4413; background: #d8d8d8; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding: 24px; }
.card__ttl {
  width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: normal;
  color: var(--ink-strong);
}
.card__cats { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 10px; width: 100%; }
.card__cats li {
  display: flex; width: 80px; align-items: center; justify-content: center; padding: 6px 0; overflow: hidden;
  background: var(--white); border: .5px solid var(--blue);
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: normal;
  color: var(--blue); text-align: center; white-space: nowrap;
}
.card__meta {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 19px;
  font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: normal;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}

/* ---- ページャー ---- */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; }
.pager__no, .pager__arw {
  display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--sans); font-size: 24px; line-height: 19.5px; color: var(--ink-strong); text-align: center;
}
.pager__no { font-weight: 500; background: var(--white); }
.pager__no.is-current { background: var(--blue); color: var(--white); }
.pager__arw { font-weight: 100; }

/* ---- サイドバー ---- */
.arc__side { display: flex; flex-direction: column; align-items: flex-start; width: 414.259px; overflow: hidden; flex: none; }
.arc__side-ttl {
  display: flex; width: 100%; align-items: center; padding: 16px 20px; background: var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: normal; color: var(--white);
}
.arc__side-item {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 16px 20px;
  border-top: 1px dashed #aaa; border-bottom: 1px dashed #aaa;
}
.arc__side-item .n { width: 100%; font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: normal; color: var(--ink-strong); }
.arc__side-item .d { width: 100%; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: normal; color: #aaa; }

/* 下層ページのヘッダー CTA の枠線（node 909-1622） */
.hdr--sub .hdr__cta { border-color: #49607b; }


/* ---------- common-single-sp.css ---------- */
/* ============ 記事詳細 / SP  node:909-1888 ============ */
.sp-sg { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 40px 12px; }
.sp-sg__bg { position: absolute; inset: 0; pointer-events: none; }
.sp-sg__bg .flat { position: absolute; inset: 0; background: #f6fbfc; }
.sp-sg__bg .noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.sp-sg__main {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px;
  width: 100%; padding: 24px; background: var(--white); overflow: hidden;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, .08);
}
.sp-sg__hd { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
.sp-sg__crumbs {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  font-family: var(--sans); font-weight: 350; font-size: 15px; line-height: normal;
  color: #aaa; white-space: nowrap;
}
.sp-sg__crumbs .cur { overflow: hidden; text-overflow: ellipsis; }
.sp-sg__ttl { width: 100%; font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: normal; color: var(--ink-strong); }
.sp-sg__eyecatch { width: 100%; aspect-ratio: 1020 / 630.4079; background: #d8d8d8; }
.sp-sg__eyecatch img { width: 100%; height: 100%; object-fit: cover; }

.sp-sg__tocwrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sp-toc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  width: 100%; padding-bottom: 22.5px; background: #f7f7f7; border: .75px solid #aaa;
}
.sp-toc__hd {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 11.25px 0; background: var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 19.5px; line-height: normal; color: var(--white); white-space: nowrap;
}
.sp-toc__grp { display: flex; flex-direction: column; align-items: flex-start; gap: 7.5px; width: 100%; }
.sp-toc__h2 {
  padding: 0 30px;
  font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: normal;
  color: var(--ink-strong); white-space: nowrap;
}
.sp-toc__list { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sp-toc__list li { display: flex; align-items: center; gap: 3.75px; width: 100%; padding: 0 48px; white-space: nowrap; color: var(--ink-strong); }
.sp-toc__list .d { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: normal; }
.sp-toc__list .n { margin-left: 20.25px; font-family: var(--serif); font-weight: 400; font-size: 16px; }
.sp-toc__list .t { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: normal; }

.sp-sg__body { display: flex; flex-direction: column; align-items: flex-start; gap: 75px; width: 100%; }
.sp-sg__sec { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
.sp-sg__h2 {
  width: 100%; padding-left: 12px; border-left: 3px solid var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal; color: var(--ink-strong);
}
.sp-sg__p { width: 100%; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: normal; color: var(--ink-strong); }

.sp-sg__back {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18.75px 30.75px;
  background: var(--blue-deep); border: .75px solid #49607b;
}
.sp-sg__back > span:last-child {
  font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: 1.44px;
  color: var(--white); text-align: center; white-space: nowrap;
}
.arw--back-sp { width: 3.15px; height: 9px; }
.arw--back-sp img { width: 9.86px; height: 4.38px; transform: rotate(90deg) scaleY(-1); flex: none; }

/* ---- カード ---- */
.sp-sgcard {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%;
  background: var(--white); overflow: hidden; box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, .08);
}
.sp-sgcard__hd {
  display: flex; width: 100%; align-items: center; padding: 12px; background: var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: normal; color: var(--white); white-space: nowrap;
}
.sp-sgcard__avatar { display: flex; width: 100%; flex-direction: column; align-items: center; padding: 11.25px 12px 7.5px; }
.sp-sgcard__avatar img { width: 120px; height: 120px; }
.sp-sgcard__name { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 3px; padding: 0 12px; white-space: nowrap; }
.sp-sgcard__name .n { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: normal; color: #1a1a1a; }
.sp-sgcard__name .s { font-family: var(--serif); font-weight: 400; font-size: 12px; line-height: normal; color: var(--ink-strong); }
.sp-sgcard__btnwrap { display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding: 15px 30px; }
.sp-sgcard__btn {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 7.5px 30px;
  background: var(--white); border: .75px solid #aaa;
  font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: normal;
  color: #aaa; text-align: center; white-space: nowrap;
}

.sp-sg__promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sp-sg__banner { position: relative; width: 100%; aspect-ratio: 800 / 450.9091; overflow: hidden; box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, .08); }
.sp-sg__banner img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.sp-sgcta {
  position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 21px; padding: 24px 0 15px; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, .08));
}
.sp-sgcta__bg { position: absolute; inset: 0; pointer-events: none; }
.sp-sgcta__bg .w { position: absolute; inset: 0; background: var(--white); }
.sp-sgcta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp-sgcta__bg .tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-5.6465deg, rgb(0, 59, 152) 27.968%, rgb(23, 93, 203) 61.394%);
}
.sp-sgcta__frame { position: absolute; inset: 4.52px 4.48px 4.27px 4.47px; border: .75px solid var(--white); }
.sp-sgcta__txt {
  position: relative;
  font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center;
  white-space: nowrap; text-shadow: 0 3px 3px rgba(0, 0, 0, .25);
}
.sp-sgcta__txt p { line-height: 1.4; }
.sp-sgcta__txt .x18 { font-size: 18px; }
.sp-sgcta__txt .x195 { font-size: 19.5px; }
.sp-sgcta__txt .x24 { font-size: 24px; }
.sp-sgcta__btn {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 13.5px;
  background: linear-gradient(0deg, #ffbd0e 0%, #ffe400 100%); border: 1.5px solid var(--ink-strong);
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 1.2px;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}

.sp-sgcard--latest { gap: 11.25px; align-items: flex-start; padding-bottom: 15px; }
.sp-sgitem { display: flex; width: 100%; height: 72px; align-items: flex-start; padding: 0 12px; }
.sp-sgitem__th { width: 116.496px; height: 100%; background: #d8d8d8; flex: none; }
.sp-sgitem__ttl {
  display: flex; flex: 1 0 0; min-width: 1px; height: 100%; align-items: center; padding: 7.5px;
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: normal;
  color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis;
}

/* 最新記事サムネイル */
.sp-sgitem__th img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- common-single.css ---------- */
/* ============ 記事詳細 / PC  node:909-1676 ============ */
.sg { display: flex; flex-direction: column; align-items: center; padding: 100px 160px 160px; }
.sg__bg { position: absolute; inset: 0; pointer-events: none; }
.sg__bg .flat { position: absolute; inset: 0; background: #f6fbfc; }
.sg__bg .noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sg__cols { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; }

.sg__main {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; gap: 100px;
  padding: 80px; background: var(--white); overflow: hidden;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .08);
}
.sg__hd { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sg__crumbs {
  display: flex; align-items: flex-start; gap: 16px; width: 100%;
  font-family: var(--sans); font-weight: 350; font-size: 20px; line-height: normal;
  color: #aaa; white-space: nowrap;
}
.sg__crumbs .cur { overflow: hidden; text-overflow: ellipsis; }
.sg__ttl {
  width: 100%;
  font-family: var(--serif); font-weight: 700; font-size: 50px; line-height: normal; color: var(--ink-strong);
}
.sg__eyecatch { width: 100%; aspect-ratio: 1020 / 630.4079; background: #d8d8d8; }
.sg__eyecatch img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 目次 ---- */
.sg__tocwrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0 160px; }
.toc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  width: 100%; padding-bottom: 30px; background: #f7f7f7; border: 1px solid #aaa;
}
.toc__hd {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 15px 0; background: var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: normal; color: var(--white); white-space: nowrap;
}
.toc__grp { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.toc__h2 {
  padding: 0 40px;
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: normal;
  color: var(--ink-strong); white-space: nowrap;
}
.toc__list { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.toc__list li { display: flex; align-items: center; gap: 5px; width: 100%; padding: 0 64px; white-space: nowrap; color: var(--ink-strong); }
.toc__list .d { font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal; }
.toc__list .n { margin-left: 26.5px; font-family: var(--serif); font-weight: 400; font-size: 21px; }
.toc__list .t { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: normal; }

/* ---- 本文 ---- */
.sg__body { display: flex; flex-direction: column; align-items: flex-start; gap: 100px; width: 100%; }
.sg__sec { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sg__h2 {
  width: 100%; padding-left: 16px; border-left: 4px solid var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal; color: var(--ink-strong);
}
.sg__p { width: 100%; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: normal; color: var(--ink-strong); }

.sg__back {
  display: flex; align-items: center; justify-content: center; gap: 16px; padding: 25px 41px;
  background: var(--blue-deep); border: 1px solid #49607b;
}
.sg__back > span:last-child {
  font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: 1.92px;
  color: var(--white); text-align: center; white-space: nowrap;
}
.arw--back { width: 4.2px; height: 12px; }
.arw--back img { width: 13.147px; height: 5.838px; transform: rotate(90deg) scaleY(-1); flex: none; }

/* ---- サイドバー ---- */
.sg__side { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 400px; align-self: stretch; flex: none; overflow: hidden; }
.sgcard { display: flex; flex-direction: column; align-items: center; width: 100%; background: var(--white); overflow: hidden; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, .08); }
.sgcard__hd {
  display: flex; width: 100%; align-items: center; padding: 16px; background: var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: normal; color: var(--white); white-space: nowrap;
}
.sgcard__avatar { display: flex; width: 100%; flex-direction: column; align-items: center; padding: 15px 16px 10px; }
.sgcard__avatar img { width: 160px; height: 160px; }
.sgcard__name { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px; white-space: nowrap; }
.sgcard__name .n { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: normal; color: #1a1a1a; }
.sgcard__name .s { font-family: var(--serif); font-weight: 400; font-size: 12px; line-height: normal; color: var(--ink-strong); }
.sgcard__btnwrap { display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding: 20px 40px; }
.sgcard__btn {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 10px 40px;
  background: var(--white); border: 1px solid #aaa;
  font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: normal;
  color: #aaa; text-align: center; white-space: nowrap;
}

.sg__banner { position: relative; width: 100%; aspect-ratio: 800 / 450.9091; overflow: hidden; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, .08); }
.sg__banner img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.sgcta {
  position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 28px; padding: 32px 0 20px; filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .08));
}
.sgcta__bg { position: absolute; inset: 0; pointer-events: none; }
.sgcta__bg .w { position: absolute; inset: 0; background: var(--white); }
.sgcta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sgcta__bg .tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-9.7144deg, rgb(0, 59, 152) 27.968%, rgb(23, 93, 203) 61.394%);
}
.sgcta__frame { position: absolute; inset: 6.03px 5.97px; border: 1px solid var(--white); }
.sgcta__txt {
  position: relative;
  font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center;
  white-space: nowrap; text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.sgcta__txt p { line-height: 1.4; }
.sgcta__txt .x24 { font-size: 24px; }
.sgcta__txt .x26 { font-size: 26px; }
.sgcta__txt .x32 { font-size: 32px; }
.sgcta__btn {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: linear-gradient(0deg, #ffbd0e 0%, #ffe400 100%); border: 2px solid var(--ink-strong);
  font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: 1.6px;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}

.sgcard--latest { gap: 15px; align-items: flex-start; padding-bottom: 20px; }
.sgitem { display: flex; width: 100%; height: 96px; align-items: flex-start; padding: 0 16px; }
.sgitem__th { flex: 1 0 0; min-width: 1px; height: 100%; background: #d8d8d8; }
.sgitem__ttl {
  display: flex; width: 228.492px; height: 100%; align-items: center; padding: 10px; flex: none;
  font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: normal;
  color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis;
}

/* 最新記事サムネイル */
.sgitem__th img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- s01-hero.css ---------- */
/* ============ 01 / ヘッダー + ファーストビュー ============ */

/* ---- header : node 616:685 ---- */
.hdr {
  position: relative;
  z-index: 20;
  display: flex;
  width: 1920px;
  height: 120px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--white);
  filter: drop-shadow(0 4px 8px rgba(0, 32, 92, .1));
}
.hdr__logo { height: 80px; flex: none; }
.hdr__logo img { height: 80px; width: 301.887px; object-fit: cover; }

.hdr__nav {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  flex: none;
}
.hdr__nav > a {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink-strong);
  white-space: nowrap;
  word-break: break-word;
}
.hdr__cta {
  display: flex;
  width: 260px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 25px 16px;
  background: var(--blue-deep);
  border: 1px solid var(--blue-border);
  flex: none;
}
.hdr__cta > span:first-child {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 3.84px;
  color: var(--white);
  white-space: nowrap;
}

/* 矢印（Figma: 線を 90deg 回転） */
.arw { display: flex; align-items: center; justify-content: center; flex: none; }
.arw--nav { width: 4.2px; height: 12px; }
.arw--nav img { width: 13.147px; height: 5.838px; transform: rotate(90deg); flex: none; }
.arw--cta { width: 7.776px; height: 22.216px; }
.arw--cta img { width: 23.012px; height: 9.192px; transform: rotate(90deg); flex: none; }

/* ---- hero : node 909:2047 ---- */
.hero { height: 1080px; background: var(--white); }
.hero__bgwrap { position: absolute; inset: 0; pointer-events: none; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .56; }
.hero__hue { position: absolute; inset: 0; background: var(--blue); mix-blend-mode: hue; }

.hero__visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1354px;
  height: 973px;
  pointer-events: none;
}

.hero__inner {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  padding: 0 0 140px 100px;
}
.hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }

.hero__lead {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  word-break: break-word;
}

.hero__stack { position: relative; width: 1261.555px; height: 136px; }
.hero__marker { position: absolute; left: 0; top: 113.87px; width: 1261.555px; height: 21.274px; }
.hero__sub {
  position: absolute; left: 0; top: 0; width: 1261.555px;
  font-family: var(--sans); font-weight: 700; font-size: 25.529px;
  letter-spacing: 5.1058px; color: var(--blue); line-height: normal;
}
.hero__big {
  position: absolute; left: 0; top: 30.85px; width: 1261.555px;
  font-family: var(--serif); font-weight: 900; font-size: 80.842px;
  line-height: 1.3; color: var(--blue); white-space: nowrap;
}
.hero__big .tight { letter-spacing: -3.2px; }

/* 3つの強み白ボックス : node 909:2060 */
.hero__feats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 1261.555px;
  padding: 24px;
  background: var(--white);
}
.hero__feat { display: flex; align-items: center; gap: 4px; }
.hero__check { width: 22.289px; height: 17.686px; flex: none; }
.hero__feat p {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.hero__feat em { font-style: normal; font-size: 28px; color: var(--blue); }
.hero__rule img { width: 608.458px; height: 1px; }

/* ---- 共通 CTA ボタン : node 909:2072 ---- */
.ctabtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16.662px;
  padding: 34.713px;
  border: 1.389px solid var(--blue-deep);
  border-radius: 8px;
  background: linear-gradient(180deg, #4593ff 0%, #0063ff 100%);
}
.ctabtn__line { width: 49.986px; height: 49.986px; flex: none; }
.ctabtn__txt {
  font-family: var(--sans);
  font-weight: 900;
  color: var(--white);
  text-align: center;
  letter-spacing: 1.1108px;
  white-space: nowrap;
  text-shadow: .833px 1.666px 0 rgba(0, 0, 0, .25);
}
.ctabtn__txt i { font-style: normal; font-size: 27.77px; }
.ctabtn__txt b { font-weight: 900; font-size: 33.324px; letter-spacing: 1.333px; }

.ctabtn__badge {
  position: absolute;
  left: 50%;
  top: -21.52px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.777px;
  padding: 6.943px 44.432px;
  background: var(--white);
  border: 1.389px solid var(--blue);
  border-radius: 290.435px;
}
.ctabtn__badge-txt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16.662px;
  letter-spacing: .3332px;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.ctabtn__badge-txt em { font-style: normal; color: var(--red); }
.ctabtn__badge-txt b { font-weight: 700; font-size: 20px; letter-spacing: .4px; }
.ctabtn__slash { display: flex; width: 9.72px; height: 16.835px; align-items: center; justify-content: center; flex: none; }
.ctabtn__slash img { width: 19.439px; height: 1.389px; flex: none; }
.ctabtn__slash--l img { transform: rotate(60deg) scaleY(-1); }
.ctabtn__slash--r img { transform: rotate(120deg); }
.ctabtn__dot { position: absolute; width: 2.323px; height: 2.323px; top: 4.08px; }
.ctabtn__dot--1 { left: 217.13px; }
.ctabtn__dot--2 { left: 233.4px; }


/* ---------- s02-problems.css ---------- */
/* ============ 02 / 4つの試練  node:909-2082 ============ */
.s02 { display: flex; flex-direction: column; align-items: flex-start; background: #f5f5f5; }

.s02__bg { position: absolute; inset: 0; pointer-events: none; }
.s02__noise {
  position: absolute; inset: 0;
  background-image: url(../img/pg-noise.png);
  background-size: 12px 12px;
  background-position: top left;
  opacity: .03;
}
.s02__flat { position: absolute; inset: 0; background: #f5f5f5; }

.s02__wall {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1920px;
  pointer-events: none;
  -webkit-mask-image: url(../img/s02-wall-mask.svg);
  mask-image: url(../img/s02-wall-mask.svg);
  -webkit-mask-size: 1920px 1920px; mask-size: 1920px 1920px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: exclusion;
}
.s02__wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.s02__main {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  width: 1920px; height: 1190px; padding: 160px;
}

.s02__head {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--sans); font-weight: 700; color: var(--ink);
  text-align: center; line-height: 1.2; white-space: nowrap;
}
.s02__head-s { font-size: 40px; }
.s02__head-l { font-size: 56px; }
.s02__head-l b { font-weight: 700; color: var(--blue); }
.s02__head-l b.n { font-size: 64px; }
.s02__head-l b.t { font-size: 58px; }

.s02__body { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }

.s02__cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; }
.s02c {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  width: 788px; height: 160px; padding: 40px;
  background: var(--white); border: 6px solid var(--blue-deep);
  overflow: hidden;
}
.s02c__corner { position: absolute; right: -6px; top: -6px; width: 36px; height: 36px; transform: rotate(90deg); }
.s02c__ico { flex: none; }
.s02c__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.s02c__t {
  font-family: var(--sans); font-weight: 700; font-size: 32px; color: var(--blue-deep);
  white-space: nowrap; transform: skewX(-4deg); line-height: 1.18;
}
.s02c__s {
  font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: 1px;
  color: var(--blue-deep); white-space: nowrap; transform: skewX(-4deg); line-height: 1.45;
}

.s02__vline { display: block; width: 1px; height: 120px; }
.s02__vline img { width: 1px; height: 120px; }

.s02__concl { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.s02__concl-s {
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 32px;
  color: var(--ink); text-align: center; transform: skewX(-4deg); white-space: pre-wrap;
}
.s02__concl-l {
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 48px;
  color: #f20000; text-align: center; transform: skewX(-4deg);
}

/* ---- そんな課題をすべて解決する環境 ---- */
.s02__solve { position: relative; width: 1920px; height: 440px; background: var(--white); }
.s02__chevrons { position: absolute; left: 50%; transform: translateX(-50%); top: -70.58px; width: 104.582px; height: 89.862px; }
.s02__deco { position: absolute; inset: 0; pointer-events: none; }
.s02__deco .d, .s02__deco .sq { position: absolute; }
.s02__deco .d.flip { transform: rotate(180deg); }

.s02__solve-hl { position: absolute; left: 522.18px; top: 212.25px; width: 446.935px; height: 100px; background: var(--blue); }

.s02__solve-1 {
  position: absolute; left: 960px; top: 127.75px; transform: translateX(-50%);
  width: 1304.16px; text-align: center;
  font-family: var(--sans); font-weight: 700; color: var(--ink); line-height: normal;
}
.s02__solve-1 .x53 { font-size: 52.8px; }
.s02__solve-1 .x42 { font-size: 42.24px; }

.s02__solve-2 {
  position: absolute; left: 959.5px; top: 224.75px; transform: translateX(-50%);
  white-space: nowrap; text-align: center;
  font-family: var(--sans); font-weight: 700; color: var(--ink); line-height: 1;
}
.s02__solve-2 .x66 { font-size: 66px; }
.s02__solve-2 .x74 { font-size: 73.92px; }
.s02__solve-2 .w { color: var(--white); }


/* ---------- s03-freeconsult.css ---------- */
/* ============ 03 / 無料受験相談 + 7大特典  node:909-2158 ============ */
.s03 {
  display: flex; align-items: flex-start; justify-content: center; gap: 40px;
  height: 808px; padding: 160px;
}
.s03__bg { position: absolute; inset: 0; pointer-events: none; }
.s03__white { position: absolute; inset: 0; background: var(--white); }
.s03__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.s03__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-6.5495deg, rgb(0, 59, 152) 27.968%, rgb(23, 93, 203) 61.394%);
}

.s03__card {
  position: relative; flex: none; width: 800px;
  display: flex; flex-direction: column; align-items: center;
  border: 1.455px solid var(--ink);
}
.s03__card-bar { display: flex; width: 100%; align-items: center; justify-content: center; padding: 16px 0; background: #22bc21; }
.s03__card-bar p {
  font-family: var(--sans); font-weight: 900; font-size: 24px; line-height: 1.2;
  color: var(--white); text-align: center; white-space: nowrap;
  transform: skewX(-10deg) scaleY(.98);
}
.s03__card-img { position: relative; width: 800px; height: 360.087px; overflow: hidden; }
.s03__card-img img { position: absolute; left: 0; top: 0; width: 100%; height: 125.22%; }

.s03__right { position: relative; display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 80px; }
.s03__copy { display: flex; flex-direction: column; align-items: flex-start; width: 748px; }

.s03__w48 {
  font-family: var(--sans); font-weight: 700; font-size: 48px; line-height: 1.4;
  color: var(--white); white-space: nowrap; text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.s03__row1 { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
/* 上下の余白と行送りを詰めて高さを抑えている（Figma は padding:16px / line-height:1.4） */
.s03__chip { display: flex; align-items: center; justify-content: center; padding: 10px 16px; background: var(--white); }
.s03__chip p { font-family: var(--sans); font-weight: 700; color: var(--blue); white-space: nowrap; line-height: 1.25; }
.s03__chip .x64 { font-size: 64px; }
.s03__chip .x48 { font-size: 48px; }
.s03__chip .x56 { font-size: 56px; }

.s03__row2 { display: flex; align-items: flex-end; padding: 28px 0 16px; }
.s03__skew56 {
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1.4;
  color: var(--white); white-space: nowrap; text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  transform: skewX(-10deg) scaleY(.98); margin-right: -4px;
}

.s03__row3 { position: relative; width: 700px; height: 89px; }
.s03__marker { position: absolute; left: 332.38px; top: 72px; width: 123.148px; height: 17px; background: #ffe400; }
.s03__emph { position: absolute; left: 360.32px; top: 0; width: 67.266px; height: 12px; }
.s03__row3-txt {
  position: absolute; left: 0; top: 11px; width: 700px;
  font-family: var(--sans); font-weight: 700; color: var(--white); line-height: 1.4;
  text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.s03__row3-txt .x48 { font-size: 48px; }
.s03__row3-txt .x56 { font-size: 56px; }

/* ---- オレンジ CTA : node 909:2179 ---- */
.ctabtn--orange {
  gap: 17.534px;
  padding: 39.452px 30.685px 33.607px;
  border: 1.461px solid #ffb700;
  background: #ff5907;
}
.ctabtn--orange .ctabtn__line { width: 46.758px; height: 46.758px; }
.ctabtn--orange .ctabtn__txt { text-shadow: 1.052px 2.104px 0 rgba(0, 0, 0, .25); letter-spacing: 0; font-weight: 700; }
.ctabtn--orange .ctabtn__txt i { font-size: 28.055px; }
.ctabtn--orange .ctabtn__txt b { font-size: 42.082px; font-weight: 700; letter-spacing: 0; }
.ctabtn--orange .ctabtn__txt u { font-size: 35.068px; text-decoration: none; }
.ctabtn--orange .ctabtn__txt .y { color: #ffe934; }
.ctabtn--orange .ctabtn__badge {
  top: -15.01px; left: calc(50% - .48px);
  align-items: flex-end; gap: 2.922px; padding: 5px 32px;
  border: 1.223px solid #ffb601; border-radius: 305.637px;
}
.ctabtn--orange .ctabtn__badge-txt { font-size: 14.612px; letter-spacing: 0; line-height: 1; }
.ctabtn--orange .ctabtn__badge-txt b { font-size: 18.995px; letter-spacing: 0; }
.ctabtn--orange .ctabtn__slash { width: 10.228px; height: 17.716px; }
.ctabtn--orange .ctabtn__slash img { width: 20.457px; height: 1.461px; }
.ctabtn--orange .ctabtn__dot { width: 2.445px; height: 2.445px; top: 13.94px; }
.ctabtn--orange .ctabtn__dot--1 { left: 174.28px; }
.ctabtn--orange .ctabtn__dot--2 { left: 188.48px; }
.ctabtn--orange .arw--cta { width: 8.183px; height: 23.379px; }
.ctabtn--orange .arw--cta img { width: 24.213px; height: 9.673px; }


/* ---------- s04-butstill.css ---------- */
/* ============ 04 / でも…  node:909-2189 ============ */
.s04 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 778px; padding: 160px;
}
.s04__bg { position: absolute; inset: 0; pointer-events: none; }
.s04__grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(113.968deg, rgba(173, 190, 192, .35) .263%, rgba(184, 188, 209, .35) 50%, rgba(132, 166, 182, .35) 99.737%),
    #f5faff;
}
.s04__noise {
  position: absolute; inset: 0; opacity: .02;
  background-image: url(../img/pg-noise.png);
  background-size: 12px 12px; background-position: top left;
}
.s04__photo {
  position: absolute; left: 0; top: 266.13px; width: 992px; height: 512.07px;
  pointer-events: none;
  -webkit-mask-image: url(../img/s04-photo-mask.svg); mask-image: url(../img/s04-photo-mask.svg);
  -webkit-mask-size: 992px 510.867px; mask-size: 992px 510.867px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.s04__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.s04__head {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.s04__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.s04__but { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1.4; color: #a40000; text-align: center; }
.s04__pills { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px; width: 100%; }
.s04__pills li {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 40px; background: #5a7f82; box-shadow: inset 0 0 0 6px #5a7f82;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--white); white-space: nowrap;
}


/* ---------- s05-planning.css ---------- */
/* ============ 05 / 情報収集･計画作成  node:909-2207 ============ */
.s05 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1372px; padding: 160px 160px 100px;
}
.s05__bg { position: absolute; inset: 0; pointer-events: none; }
.s05__white { position: absolute; inset: 0; background: var(--white); }
.s05__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.s05__daruma {
  position: absolute; right: -170.7px; top: 880.57px; width: 582.164px; height: 576.983px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.s05__daruma img { width: 513.028px; height: 506.871px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }

.s05__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.s05__head-mk { position: absolute; left: 538.84px; top: 60px; width: 294.614px; height: 65.242px; background: var(--blue); }
.s05__head-1 {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 48px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.s05__head-2 {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  text-align: center; white-space: nowrap;
}
.s05__head-2 .b { color: var(--blue); }
.s05__head-2 .d { color: var(--ink); }
.s05__head-2 .w { color: var(--white); }

.s05__cols { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; }
.s05__shot { position: relative; flex: 1 0 0; min-width: 1px; aspect-ratio: 777.0293 / 470.5138; overflow: hidden; }
.s05__shot img { position: absolute; left: -.09%; top: 0; width: 100.09%; height: 100%; }

.s05__txt {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 40px;
  font-family: var(--sans); font-weight: 700; color: var(--ink); white-space: nowrap;
}
.s05__txt-1 { font-size: 32px; line-height: 1; }
.s05__txt-2 { font-size: 40px; }
.s05__txt-2 p { line-height: 1.4; }

.s05__note {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 1254px; padding: 80px 0;
  background: rgba(255, 255, 255, .64); border: 2px solid var(--blue);
}
.s05__note-mk { position: absolute; left: 464.07px; top: 154.54px; width: 326.623px; height: 13.456px; background: #fff283; }
.s05__note-txt {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 32px; color: #092180;
  text-align: center; white-space: nowrap;
}
.s05__note-txt p { line-height: 1.4; }

.s05__tri { position: relative; display: block; width: 160.498px; height: 41.466px; transform: scaleY(-1); }
.s05__tri img { position: absolute; left: 6.7%; right: 6.7%; top: 0; bottom: 25%; width: 86.6%; height: 75%; }


/* ---------- s06-goals.css ---------- */
/* ============ 06 / 5段階の目標設定  node:909-2222 ============ */
.s06 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 2042px; padding: 160px;
}
.s06__bg { position: absolute; inset: 0; pointer-events: none; }
.s06__white { position: absolute; inset: 0; background: var(--white); }
.s06__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.s06__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-28.4303deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.s06__ribbon { position: relative; width: 400px; height: 80px; flex: none; }
.s06__ribbon img { position: absolute; inset: 0; width: 400px; height: 80px; }
.s06__ribbon p {
  position: absolute; left: 99.5px; top: 24px;
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}

.s06__panel {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 64px 64px 24px; background: var(--white); flex: none;
}
.s06__stack { position: relative; width: 1513.465px; height: 585.8px; }
.s06__steps { position: absolute; left: 0; top: 256.74px; width: 1513.465px; height: 160.688px; }

.s06card {
  position: absolute; width: 243.524px; height: 274.48px;
  background: var(--white); border: 4px solid;
}
.s06card__no {
  position: absolute; left: -10.6px; top: -14.73px;
  display: flex; align-items: center; justify-content: center;
  width: 46.228px; height: 46.228px; border-radius: 50%;
  border: 2.889px solid var(--white);
  font-family: var(--sans); font-weight: 500; font-size: 28.893px; line-height: 1;
  color: var(--white); text-align: center;
}
.s06card__ico { position: absolute; object-fit: cover; }
.s06card__ico--tinted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Figma は「カラー」ブレンドでアイコンを着色しているが、この箱は transform を持つため
   独立した合成グループになり、背景が透明＝ベタ塗りでアイコンが潰れてしまう。
   アイコン画像でマスクして、着色をアイコンの形の内側だけに限定する。 */
.s06card__ico--tinted .tint {
  position: absolute; inset: 0; mix-blend-mode: color;
  -webkit-mask-image: url(../img/s06-ic1.png); mask-image: url(../img/s06-ic1.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.s06card__ttl {
  position: absolute; transform: translate(-50%, 50%);
  font-family: var(--sans); font-weight: 500; font-size: 35.084px; line-height: 1.1;
  text-align: center; white-space: nowrap;
}

.s06card--1 { left: 38.64px; top: 0; border-color: #042b6a; filter: drop-shadow(8px 8px 0 rgba(4, 43, 106, .2)); }
.s06card--1 .s06card__no { background: #042b6a; }
.s06card--1 .s06card__ttl { color: #042b6a; }
.s06card--1 .tint { background: #042b6a; }
.s06card--2 { left: 353.54px; top: 28.02px; border-color: #0e5fc0; filter: drop-shadow(8px 8px 0 rgba(14, 95, 192, .2)); }
.s06card--2 .s06card__no { background: #0e5fc0; }
.s06card--2 .s06card__ttl { color: #0e5fc0; }
.s06card--3 { left: 645.93px; top: 56.03px; border-color: #209b9e; filter: drop-shadow(8px 8px 0 rgba(32, 155, 158, .2)); }
.s06card--3 .s06card__no { background: #209b9e; }
.s06card--3 .s06card__ttl { color: #209b9e; }
.s06card--4 { left: 942.53px; top: 84.06px; border-color: #5fa842; filter: drop-shadow(8px 8px 0 rgba(95, 168, 66, .2)); }
.s06card--4 .s06card__no { background: #5fa842; }
.s06card--4 .s06card__ttl { color: #5fa842; }
.s06card--5 { left: 1239.12px; top: 112.09px; border-color: #dd7c08; filter: drop-shadow(8px 8px 0 rgba(221, 124, 8, .2)); }
.s06card--5 .s06card__no { background: #dd7c08; }
.s06card--5 .s06card__ttl { color: #dd7c08; }

.s06__band { position: absolute; left: 42.04px; top: 330.84px; width: 1424.5px; height: 254.96px; }
.s06__band-line { position: absolute; left: 116.37px; top: 116.37px; width: 1202.474px; height: 45.621px; display: flex; align-items: center; justify-content: center; }
.s06__band-line img { width: 1203.339px; height: 100px; transform: rotate(2.17deg); }
.s06__band-e1 { position: absolute; left: 0; top: 0; width: 232.733px; height: 232.733px; }
.s06__band-e2 { position: absolute; left: 1225.97px; top: 69.22px; width: 185.738px; height: 185.738px; }
.s06__band-t1 {
  position: absolute; left: 23.09px; top: 83.53px; width: 186.551px; height: 65.674px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: 1.1;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(-5.7deg);
}
.s06__band-t2 {
  position: absolute; left: 1238.76px; top: 131.24px; width: 160.154px; height: 61.694px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 28px; line-height: 1.1;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(-5.7deg);
}

/* ---- つまり… ---- */
.s06__sum { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; flex: none; }
.s06__sum-lead { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1; color: var(--white); }
.s06__sum-row { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.s06sum {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; height: 400px; padding: 24px; background: var(--white); border: 8px solid;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .04));
}
.s06sum > img { width: 150px; height: 150px; }
.s06sum--green { border-color: #64c42b; }
.s06sum--red { border-color: #f65542; }
.s06sum__txt { font-family: var(--sans); font-weight: 700; color: var(--ink-strong); text-align: center; white-space: nowrap; }
.s06sum__txt .s { font-size: 30px; line-height: 1.4; }
.s06sum__txt .l { font-size: 48px; line-height: 1.4; font-weight: 900; }
.s06sum--green .l { color: #64c42b; }
.s06sum--red .l { color: #f65542; }
.s06__plus { font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1; color: var(--white); }
.s06__sum-foot { font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center; line-height: 1; }
.s06__sum-foot .x32 { font-size: 32px; }
.s06__sum-foot .x40 { font-size: 40px; }

.s06__concl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.s06__concl-1 {
  width: 1120px; text-align: center;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1.4; color: var(--white);
}
.s06__concl-2 { position: relative; }
.s06__concl-mk { position: absolute; left: 44.52px; top: 0; width: 639.812px; height: 56px; background: var(--white); }
.s06__concl-2 p {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1.4;
  text-align: center; white-space: nowrap;
}
.s06__concl-2 .w { color: var(--white); }
.s06__concl-2 .b { color: var(--blue); }


/* ---------- s07-management.css ---------- */
/* ============ 07 / 365日1時間単位の管理  node:909-2287 ============ */
.s07 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 3361.278px; padding: 160px;
}
.s07__bg { position: absolute; inset: 0; pointer-events: none; }
.s07__flat { position: absolute; inset: 0; background: #f5faff; }
.s07__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.s07__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.s07__but {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: #a40000; text-align: center; white-space: nowrap;
}

/* ---- 枠パネル共通 ---- */
.s07p { position: relative; flex: none; width: 1600px; }
.s07p--a { height: 1212.839px; }
.s07p--b { height: 1226.563px; }
.s07p__bg { position: absolute; left: 0; width: 1600px; background: var(--white); }
.s07p__frame { position: absolute; left: 0; width: 1600px; }
.s07p__chip { position: absolute; top: 0; background: var(--white); border: 2px solid var(--blue); }
.s07p__ttl {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--blue); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.s07p__lead {
  position: absolute;
  font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--ink); text-align: center;
}
.s07p__lead p { line-height: 1.6; }

.s07p__cards { position: absolute; display: flex; align-items: flex-start; }
.s07card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px; background: var(--white); }
.s07card__ttl {
  font-family: var(--sans); font-weight: 900; font-size: 28px;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.s07card__ttl p { line-height: 1.2; }
.s07card__shot { position: relative; width: 400px; height: 610px; overflow: hidden; }
.s07card__shot img { position: absolute; left: 0; top: 0; width: 100%; }
.s07card__cap {
  width: 400px;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1.6;
  color: var(--ink); text-align: center;
}
/* Figma の矢印枠は 20×60。画像は 60px 幅のまま -90deg 回転して収めるため、
   枠を 20px に固定して中央にはみ出させる（枠を 60px にすると右端が溢れる） */
.s07card__sep {
  width: 20px; flex: none; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.s07card__sep img { width: 60px; height: 15px; flex: none; transform: rotate(-90deg) scaleY(-1); }

/* ---- パネル B 中身 ---- */
.s07b {
  position: absolute; left: 100px; top: 75.68px; width: 1400px;
  display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 80px 0;
}
.s07b__lead { width: 1232px; text-align: center; font-family: var(--sans); color: var(--ink); }
.s07b__lead .x24 { font-size: 24px; font-weight: 400; line-height: 1.6; }
.s07b__lead .x32 { font-size: 32px; font-weight: 500; line-height: 1.4; }
.s07b__lead .r { color: var(--red); }

.s07b__cmp { display: flex; align-items: center; gap: 40px; width: 100%; }
.s07cmp { display: flex; flex: 1 0 0; min-width: 1px; align-items: center; gap: 40px; padding: 40px 64px; overflow: hidden; }
.s07cmp--other { background: #f6f6f6; }
.s07cmp--ours { background: #edf4fe; }
.s07cmp__ico { display: flex; flex-direction: column; align-items: center; gap: 24px; flex: none; }
.s07cmp__ico img { width: 64px; height: 64px; }
.s07cmp__ico p { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1; text-align: center; white-space: nowrap; }
.s07cmp--other .s07cmp__ico p { color: #5a5a5a; }
.s07cmp--ours .s07cmp__ico p { color: var(--blue); }
.s07cmp__txt {
  font-family: var(--sans); font-weight: 700; font-size: 29px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s07b__tri { position: relative; display: block; width: 160.498px; height: 41.466px; transform: scaleY(-1); }
.s07b__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }

.s07b__study { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.s07b__study-ttl {
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center;
  white-space: nowrap; line-height: 1; transform: skewX(-10deg) scaleY(.98);
}
.s07b__study-ttl .x32 { font-size: 32px; }
.s07b__study-ttl .x28 { font-size: 28px; }
.s07b__study-img { width: 720px; height: 387.9px; object-fit: cover; }

/* ---- だから！ やらざるを得ない環境へ ---- */
.s07__cta { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 638.09px; height: 121.879px; }
.s07__cta-in {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px 64px; background: var(--blue); transform: skewX(-10deg) scaleY(.98);
}
.s07__cta-txt {
  font-family: var(--sans); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(6deg) scaleY(.99);
}
/* 袋文字は CSS で再現できないため Figma 書き出しの SVG を使用 */
.s07__cta-sub {
  position: absolute; left: calc(50% - 10.45px); top: -13.2px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
}
.s07__cta-sub img { width: 120px; height: 38px; }


/* ---------- s08-anxiety.css ---------- */
/* ============ 08 / 最終合格への不安を解消  node:909-2345 ============ */
.s08 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1972px; padding: 160px;
}
.s08__bg { position: absolute; inset: 0; pointer-events: none; }
.s08__white { position: absolute; inset: 0; background: var(--white); }
.s08__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.s08__head {
  position: relative; flex: none; display: flex; flex-direction: column;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s08__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; flex: none; }
.s08__box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; padding: 64px; }
.s08__box--gray { background: rgba(240, 240, 240, .8); }
.s08__box--blue { background: rgba(226, 238, 255, .8); overflow: hidden; }

.s08__label {
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.s08__label--red { font-family: "ZeroGothic", var(--sans); font-size: 40px; color: #a40000; }
.s08__label2 {
  position: relative;
  font-family: var(--sans); font-weight: 700; color: var(--blue); line-height: 1;
  text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.s08__label2 .x40 { font-size: 40px; }
.s08__label2 .x48 { font-size: 48px; }

.s08__grid { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.s08__row { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; }
.s08__row--single { gap: 0; }

.s08chip {
  display: flex; flex: 1 0 0; min-width: 1px; align-items: center; justify-content: center; gap: 24px;
  padding: 10px 24px; background: var(--white);
}
.s08chip--full { width: 100%; flex: none; }
.s08chip img { width: 32.11px; height: 30.288px; flex: none; }
.s08chip p { font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1.6; color: var(--blue-deep); white-space: nowrap; }

.s08__tri { position: relative; display: block; width: 160.498px; height: 41.466px; transform: scaleY(-1); flex: none; }
.s08__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }

.s08__daruma {
  position: absolute; left: 1311.6px; top: 466.38px; width: 392.093px; height: 388.603px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.s08__daruma img { width: 345.533px; height: 341.386px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }

.s08__sol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.s08sol { display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; }
.s08sol__chip {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 24px;
  padding: 10px 24px; background: var(--white);
}
.s08sol__chip img { width: 24.105px; height: 22.735px; flex: none; }
.s08sol__chip p { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.6; color: var(--blue-deep); white-space: nowrap; }
.s08sol__ar { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1; color: #c8c8c8; }
.s08sol__ans {
  display: flex; align-items: center; justify-content: center; height: 55px;
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--ink); text-align: center;
}
.s08sol__note {
  width: 100%;
  font-family: var(--sans); font-weight: 400; font-size: 19px; line-height: 1;
  color: var(--ink); text-align: center;
}


/* ---------- s09-support.css ---------- */
/* ============ 09 / 定期面談・質問し放題  node:909-2482 ============ */
.s09 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1052px; padding: 160px;
}
.s09__bg { position: absolute; inset: 0; pointer-events: none; }
.s09__white { position: absolute; inset: 0; background: var(--white); }
.s09__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.s09__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-15.5843deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}
.s09__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}
.s09__cols { position: relative; display: flex; align-items: flex-start; gap: 20px; width: 100%; flex: none; }
.s09box {
  display: flex; flex: 1 0 0; min-width: 1px; align-items: flex-start; justify-content: center;
  padding: 80px; background: rgba(255, 255, 255, .96);
}
.s09box__in { display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; gap: 40px; }
.s09box__ttl {
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--blue); text-align: center; white-space: nowrap;
}
.s09box__shots { display: flex; width: 100%; height: 280px; align-items: center; justify-content: center; background: var(--white); }
.s09shot { position: relative; flex: none; overflow: hidden; }
.s09shot img { position: absolute; top: 0; max-width: none; }
.s09box__divider { width: 7.424px; height: 195.977px; background: #eaeaea; flex: none; }
.s09box__cap { display: flex; align-items: center; justify-content: center; gap: 12px; }
.s09box__cap img { width: 26.589px; height: 7.514px; flex: none; }
.s09box__cap p {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}


/* ---------- s10-allinone.css ---------- */
/* ============ 10 / すべて揃っています  node:909-2504 ============ */
.s10 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1238px; padding: 160px;
}
.s10__bg { position: absolute; inset: 0; pointer-events: none; }
.s10__white { position: absolute; inset: 0; background: var(--white); }
.s10__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }

.s10__head {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 1171.906px; height: 55.864px;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

.s10__stack { position: relative; width: 1280px; height: 760.858px; flex: none; }
.s10__core { position: absolute; left: 353.09px; top: 308.54px; display: flex; align-items: center; gap: 14.3px; }
.s10__core-daruma { width: 145.524px; height: 143.778px; object-fit: cover; flex: none; }
.s10__core-ttl { width: 453px; height: 111px; flex: none; }
.s10__ring { position: absolute; left: 76.26px; top: 72.22px; width: 1150.827px; height: 611.708px; }

.s10b { position: absolute; width: 198.528px; height: 198.528px; }
.s10b > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s10b > p {
  position: absolute;
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1.2;
  color: var(--ink); text-align: center; white-space: nowrap;
}


/* ---------- s11-cases.css ---------- */
/* ============ 11 / 様々な院試受験生に対応  node:909-2544 ============ */
.s11 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 100px;
  height: 1054px; padding: 160px;
}
.s11__photo { position: absolute; right: 0; top: 0; width: 1171.335px; height: 1054px; pointer-events: none; }
.s11__shapes { position: absolute; left: 0; top: 0; width: 1070.372px; height: 1169px; pointer-events: none; }

.s11__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: none; }
.s11__head-in { font-family: var(--sans); font-weight: 700; color: var(--ink); white-space: nowrap; }
.s11__head-in .x32 { font-size: 32px; line-height: normal; }
.s11__head-in .x56 { font-size: 56px; line-height: 1.6; }
.s11__head-in .b { font-family: var(--serif); font-weight: 900; color: var(--blue); }
.s11__head-in .d { color: var(--ink); }

.s11__cols { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 160px; width: 100%; flex: none; }

.s11__list {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 16px 0; background: var(--white); border: 1px solid var(--blue-border);
}
.s11__list > li { display: flex; width: 100%; align-items: center; gap: 24px; padding: 0 24px; background: var(--white); }
.s11__list > li img { width: 32.11px; height: 30.288px; flex: none; }
.s11__list > li p {
  font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.6;
  color: var(--ink); white-space: nowrap;
}
.s11__hr { padding: 0 !important; }
.s11__hr img { width: 100% !important; height: 1px !important; }

.s11__panel {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; gap: 50px;
  padding: 64px; background: rgba(255, 255, 255, .95);
}
.s11__panel-txt { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.s11__p1 { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 32px; color: var(--blue-deep); line-height: normal; }
.s11__p2 { display: flex; width: 100%; align-items: flex-end; justify-content: center; gap: 2px; line-height: 1; white-space: nowrap; }
.s11__p2 .mk { font-family: var(--serif); font-weight: 900; font-size: 56px; color: var(--blue); }
.s11__p2 .sm { font-family: var(--sans); font-weight: 700; font-size: 48px; color: var(--blue-deep); }
.s11__p3 { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 48px; color: var(--blue-deep); line-height: normal; }

.s11__cta {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 16px;
  padding: 33px 41px; background: var(--blue); border: 1px solid var(--blue-deep); border-radius: 8px;
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, .1));
}
.s11__cta > span:first-child {
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap; text-shadow: 1px 2px 4px rgba(0, 0, 0, .08);
}
.arw--s11 { width: 6.3px; height: 18px; }
.arw--s11 img { width: 18px; height: 6.3px; transform: rotate(90deg); flex: none; }


/* ---------- s12-compare.css ---------- */
/* ============ 12 / 他予備校との違い  node:909-2614 ============ */
.s12 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 912px; padding: 160px;
}
.s12__bg { position: absolute; inset: 0; pointer-events: none; }
.s12__white { position: absolute; inset: 0; background: var(--white); }
.s12__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.s12__head {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 1600px; height: 71.001px;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s12__table {
  position: relative; width: 100%; flex: none;
  border-collapse: collapse; table-layout: fixed; overflow: hidden;
}
.s12__table th, .s12__table td {
  border: .5px solid #092180; padding: 24px 40px;
  font-family: var(--sans); font-size: 24px; line-height: normal; color: var(--ink);
  text-align: center; white-space: nowrap; vertical-align: middle;
}
/* 基本セル（.s12__table th）は詳細度 (0,1,1) のため、
   各セルの指定にも .s12__table を付けて確実に上書きする */
.s12__table .s12__th--label {
  width: 260px; opacity: 0; background: #f5f5f4; font-weight: 700; color: #092180; text-align: left;
  border-width: 0;                      /* 枠線なし */
}
.s12__table .s12__th--ours { position: relative; background: var(--blue); font-weight: 700; color: var(--white); overflow: hidden; }
.s12__table .s12__th--other { background: #f5f5f4; font-weight: 700; }
.s12__table .s12__rh { width: 260px; background: var(--white); font-weight: 400; text-align: left; }
.s12__rh span { display: block; transform: skewX(-4deg); line-height: 1.6; }
.s12__table .s12__ours { background: #f5faff; font-weight: 700; }
.s12__table .s12__other { background: var(--white); font-weight: 400; }

.s12__daruma {
  position: absolute; left: calc(50% - 170px); top: -143.25px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 392.093px; height: 388.603px; pointer-events: none;
}
.s12__daruma img { width: 345.533px; height: 341.386px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }


/* ---------- s13-price.css ---------- */
/* ============ 13 / 受講期間プラン・受講料  node:909-2650 ============ */
.s13 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  min-height: 2752px; padding: 160px 320px;
}
.s13__bg { position: absolute; inset: 0; pointer-events: none; }
.s13__flat { position: absolute; inset: 0; background: #d8ebff; }
.s13__pattern {
  position: absolute; inset: 0; opacity: .5;
  background-image: url(../img/s13-bg.png);
  background-size: 960px 540.109px; background-position: top left;
}

.s13__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 17px; flex: none; }
.s13__head-top { display: flex; align-items: flex-end; gap: 8px; }
.s13__logo { width: 211.321px; height: 56px; object-fit: cover; flex: none; }
.s13__head-top p { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal; color: var(--ink); }
.s13__head-main { display: flex; align-items: center; justify-content: center; padding: 4px 24px; background: var(--white); }
.s13__head-main p {
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s13__plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; width: 1600px; padding: 0 160px; flex: none; }
.s13__note { display: flex; align-items: center; justify-content: center; gap: 10px; }
.s13__note p {
  font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.s13__q { width: 30.632px; height: 31.486px; flex: none; }
.s13__q--l { transform: rotate(180deg) scaleY(-1); }

.s13__tablewrap { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; width: 1280px; }
.s13__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.s13__table th, .s13__table td { border: .5px solid #092180; vertical-align: middle; }
/* 基本セル（.s13__table th）の詳細度 (0,1,1) を上回るよう .s13__table を付ける */
.s13__table .s13__blank { width: 25%; background: #f5f5f4; opacity: 0; border-width: 0; }
.s13__th {
  background: var(--blue); padding: 24px 40px; text-align: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; color: var(--white); line-height: normal;
}
.s13__th .x28 { font-size: 28px; }
.s13__th .x32 { font-size: 32px; }
.s13__th--pick { padding: 24px 40px; }
.s13__th--pick .s13__th-txt { display: block; }
.s13__badge { display: block; transform: skewX(-10deg) scaleY(.98); margin-bottom: 2px; }
.s13__badge i {
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 16px;
  background: var(--white); border: 1px solid var(--blue);
  font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 16px;
  color: var(--red); white-space: nowrap;
}
.s13__rh {
  background: var(--blue); padding: 32px 40px; text-align: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; color: var(--white); line-height: normal;
}
.s13__rh b { font-weight: 700; font-size: 32px; }
.s13__rh i { font-style: normal; font-size: 24px; }
.s13__price {
  background: var(--white); padding: 24px 40px; text-align: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; color: var(--ink); line-height: normal;
}
.s13__price b { font-weight: 700; font-size: 32px; }
.s13__price i { font-style: normal; font-size: 24px; margin-left: 4px; }
.s13__caution {
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

.s13__ribbon { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; padding: 8px 24px; flex: none; }
.s13__ribbon-line { display: block; flex: 1 0 0; min-width: 1px; height: 3px; }
.s13__ribbon-line img { width: 100%; height: 3px; }
.s13__ribbon-ico { width: 26.247px; height: 26.247px; flex: none; transform: skewX(-4deg); }
.s13__ribbon-txt {
  font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1;
  color: var(--blue-deep); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

/* ---- お支払い方法 ---- */
.s13__pay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 1280px; padding: 64px; background: var(--white); flex: none; }
.s13__pay-head { display: flex; align-items: center; justify-content: center; padding: 4px 24px; background: var(--white); }
.s13__pay-head p { font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal; color: var(--ink); white-space: nowrap; }
.s13__pay-list { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; }

.s13pay { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid #cfcece; }
.s13pay__hd { display: flex; width: 100%; align-items: center; gap: 24px; padding: 20px; background: var(--white); overflow: hidden; }
.s13pay__hd--tall { padding: 27px 20px; }
.s13pay__no {
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  background: var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 28px; color: var(--white); line-height: normal;
}
.s13pay__hd p { font-family: var(--sans); font-weight: 700; font-size: 28px; line-height: normal; color: var(--ink); white-space: nowrap; }
.s13pay__bd { display: flex; width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 40px 40px; background: var(--white); }
.s13pay__bd--gap { gap: 40px; }
.s13pay__red { width: 100%; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: normal; color: var(--red); }
.s13pay__txt { width: 100%; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: normal; color: var(--ink); }
.s13pay__hr { display: block; width: 100%; height: 1px; }
.s13pay__hr img { width: 100%; height: 1px; }

.s13ex { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.s13ex__ttl { display: flex; align-items: center; gap: 16px; width: 100%; }
.s13ex__ttl--tight { gap: 12px; }
.s13ex__ttl .dot { width: 16px; height: 16px; background: var(--ink); flex: none; }
.s13ex__ttl p { flex: 1 0 0; min-width: 1px; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: normal; color: var(--ink); }
.s13ex__row { display: flex; align-items: center; gap: 24px; width: 100%; }
.s13ex__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.s13ex__cell .box {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 10px 16px;
  background: var(--white); border: 1px solid var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 26px; line-height: normal; color: var(--ink); white-space: nowrap;
}
.s13ex__cell .box--sum { background: #d4e5fc; border: 0; font-weight: 700; color: var(--blue-deep); }
.s13ex__cell p { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: normal; color: var(--ink); text-align: center; }
.s13ex__cell p.b { font-weight: 700; }
.s13ex__op {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 54px;
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: normal; color: var(--ink); text-align: center;
}

/* Figma の [text-box-trim:trim-both][text-box-edge:cap_alphabetic] 再現
   （非対応ブラウザは line-height:1 にフォールバック） */
.s13__rh b, .s13__rh i, .s13__price b, .s13__price i {
  line-height: 1;
  text-box: trim-both cap alphabetic;
}


/* ---------- s14-lowprice.css ---------- */
/* ============ 14 / 高品質･低価格の理由  node:909-2794 ============ */
.s14 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1630px; padding: 160px;
}
.s14__bg { position: absolute; inset: 0; pointer-events: none; }
.s14__white { position: absolute; inset: 0; background: var(--white); }
.s14__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.s14__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center;
  white-space: nowrap; line-height: normal;
}
.s14__head .x56 { font-size: 56px; }
.s14__head .x66 { font-size: 66px; color: var(--blue); }
.s14__lead {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s14__panel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 80px;
  width: 1600px; padding: 80px; flex: none;
  background: rgba(255, 255, 255, .5); border: 2px solid var(--blue); overflow: hidden;
}
.s14__daruma {
  position: absolute; right: -87.09px; bottom: -61.53px; width: 392.093px; height: 388.603px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.s14__daruma img { width: 345.533px; height: 341.386px; object-fit: cover; opacity: .05; transform: rotate(-8.48deg); }

.s14__pitch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.s14__pitch-band {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 40px; background: var(--blue); transform: skewX(-4deg);
}
.s14__pitch-band .w { font-family: var(--sans); font-weight: 500; font-size: 32px; line-height: normal; color: var(--white); white-space: nowrap; }
.s14__pitch-hl { display: flex; align-items: center; justify-content: center; background: var(--white); }
.s14__pitch-hl p { font-family: var(--sans); font-weight: 500; font-size: 40px; line-height: normal; color: var(--blue); white-space: nowrap; }
.s14__pitch-sub { font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal; color: var(--ink); text-align: center; transform: skewX(-4deg); }

.s14__body { position: relative; display: flex; align-items: center; justify-content: center; gap: 48px; width: 100%; }

/* ---- コスト構成チャート ---- */
.s14chart { position: relative; flex: 1 0 0; min-width: 1px; height: 544.28px; }
.s14chart__old { position: absolute; left: 0; top: 27px; width: 36.92%; display: flex; flex-direction: column; align-items: center; gap: 29px; }
.s14chart__old-ttl { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink); text-align: center; }
.s14chart__bars { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.s14bar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 256.991px;
  font-family: var(--sans); font-weight: 400; font-size: 19px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}
.s14bar--main { font-size: 24px; }
.s14bar--thin { display: block; width: 100%; height: 13.859px; }

.s14chart__logo { position: absolute; left: 43.47%; top: 0; width: 31.95%; display: flex; align-items: center; justify-content: center; gap: 9.579px; }
.s14chart__logo-img { width: 202.417px; height: 53.641px; object-fit: cover; flex: none; }
.s14chart__sl { display: flex; align-items: center; justify-content: center; width: 30.6px; height: 52.8px; flex: none; }
.s14chart__sl img { width: 61px; height: 2px; flex: none; }
.s14chart__sl--l img { transform: rotate(59.92deg); }
.s14chart__sl--r img { transform: rotate(120.08deg); }

.s14chart__cut { position: absolute; left: 44.12%; top: 80px; width: 30.65%; height: 156.609px; }
.s14chart__cut img { position: absolute; inset: 0; width: 100%; height: 156.609px; }
.s14chart__cut p {
  position: absolute; left: 25.63%; top: 46.92px; width: 49.26%;
  font-family: var(--sans); font-weight: 500; font-size: 19px; line-height: 1;
  color: var(--blue-deep); text-align: center;
}

.s14chart__new { position: absolute; left: 40.98%; top: 252.1px; width: 36.93%; display: flex; flex-direction: column; align-items: flex-start; }
.s14chart__conn { position: absolute; left: 77.93%; top: 249.88px; width: 154px; height: 139px; }

/* ---- 3つの理由 ---- */
.s14__reasons { display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 48px; }
.s14r { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; width: 100%; }
.s14r__hd {
  display: flex; width: 100%; align-items: center; padding: 10px 20px;
  background: var(--white); border-left: 6px solid var(--blue); border-bottom: 1.5px solid var(--blue);
}
.s14r__hd p { font-family: var(--sans); font-weight: 500; font-size: 32px; line-height: normal; color: var(--ink); white-space: nowrap; }
.s14r__hd b { font-weight: 700; color: var(--blue); }
.s14r__tx { width: 100%; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.6; color: var(--ink); }
.s14r__tx em { font-style: normal; color: var(--red); }


/* ---------- s15-doubts.css ---------- */
/* ============ 15 / でも、本当に大丈夫?  node:909-2854 ============ */
.s15 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 716px; padding: 160px 160px 100px;
}
.s15__bg { position: absolute; inset: 0; pointer-events: none; }
.s15__grad {
  position: absolute; inset: 0;
  background: linear-gradient(115.783deg, rgb(173, 190, 192) .263%, rgb(184, 188, 209) 50%, rgb(132, 166, 182) 99.737%);
}
.s15__tex1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.s15__tex2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .08; }
.s15__photo {
  position: absolute; left: 1212.48px; top: 286px; width: 833.03px; height: 429px;
  transform: scaleX(-1); pointer-events: none;
  -webkit-mask-image: url(../img/s15-photo-mask.svg); mask-image: url(../img/s15-photo-mask.svg);
  -webkit-mask-size: 833.03px 429px; mask-size: 833.03px 429px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.s15__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.s15__head {
  position: relative; flex: none;
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 56px; line-height: 1.4;
  color: #a40000; text-align: center; white-space: nowrap;
}
.s15__pills {
  position: relative; flex: none;
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center;
  gap: 24px; width: 1600px; height: 136px;
}
.s15__pills li {
  display: flex; align-items: center; justify-content: center; padding: 16px 40px;
  background: var(--white); box-shadow: inset 0 0 0 6px #5a7f82;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: #5a7f82; white-space: nowrap;
}
.s15__tri { position: relative; display: block; width: 160.498px; height: 41.466px; transform: scaleY(-1); flex: none; }
.s15__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }


/* ---------- s16-assurance.css ---------- */
/* ============ 16 / 3つの安心  node:909-2873 ============ */
.s16 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1066px; padding: 160px;
}
.s16__bg { position: absolute; inset: 0; pointer-events: none; }
.s16__white { position: absolute; inset: 0; background: var(--white); }
.s16__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.s16__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-15.7814deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.s16__head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.s16__logo { width: 160px; height: 42.4px; object-fit: cover; }
.s16__head-txt {
  font-family: var(--sans); font-weight: 700; color: var(--white);
  text-align: center; white-space: nowrap; line-height: 1;
}
.s16__head-txt .x80 { font-size: 80px; letter-spacing: 4.8px; }
.s16__head-txt .x54 { font-size: 54px; letter-spacing: 3.24px; }
.s16__head-txt .x64 { font-size: 64px; letter-spacing: 3.84px; }

.s16__cards { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 40px; width: 100%; flex: none; }
.s16c {
  position: relative; display: flex; flex: 1 0 0; min-width: 1px;
  flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px;
  background: var(--white);
  /* Figma の枠線は内側ストローク。border だと高さが 2px 増えるため inset で描く */
  box-shadow: inset 0 0 0 1px var(--blue-border);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
}
/* 袋文字は CSS で再現できないため Figma 書き出しの SVG を使用。
   位置は Figma の right:64.11px + translateX(100%)（＝枠の左端がカード内側 64.11px、
   右端がカードから 15px はみ出す）をそのまま再現する。 */
.s16c__no {
  position: absolute; top: -12px; right: 64.11px; transform: translateX(100%);
  display: flex; align-items: center; justify-content: center;
  width: 79.113px; height: 63.028px;
}
.s16c__no img { width: 73px; height: 61px; }
.s16c__no--w { width: 87.113px; right: 72.11px; }
.s16c__no--w img { width: 84px; height: 61px; }
.s16c__ttl { display: flex; flex-direction: column; align-items: flex-start; width: 100%; font-family: var(--serif); font-weight: 900; color: var(--blue); line-height: normal; }
.s16c__ttl .s { width: 100%; font-size: 20px; letter-spacing: 1.2px; }
.s16c__ttl .l { width: 100%; font-size: 40px; letter-spacing: 2.4px; }
.s16c__tx { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--ink); }
.s16c__tx p { line-height: 1.6; }


/* ---------- s17-results.css ---------- */
/* ============ 17 / 講師の指導合格実績  node:909-2896 ============ */
.s17 { display: flex; flex-direction: column; align-items: center; height: 1035.746px; padding: 160px; }
.s17__bg { position: absolute; inset: 0; pointer-events: none; }
.s17__white { position: absolute; inset: 0; background: var(--white); }
.s17__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.s17__hue { position: absolute; inset: 0; background: var(--blue); mix-blend-mode: color; }

.s17__panel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 100px;
  width: 100%; padding: 80px 300px;
  border: 6px solid var(--blue); filter: drop-shadow(20px 20px 0 #4593ff);
}
.s17__panel-bg { position: absolute; inset: 0; pointer-events: none; }
.s17__panel-white { position: absolute; inset: 0; background: var(--white); }
.s17__panel-veil { position: absolute; inset: 0; background: rgba(255, 255, 255, .8); }
.s17__panel-noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.s17__ul { position: absolute; left: calc(50% - 5px); top: 151.45px; transform: translateX(-50%); width: 610.429px; height: 20px; }

.s17__head { position: relative; display: flex; align-items: center; justify-content: center; width: 722.16px; height: 103.746px; flex: none; }
.s17__head-in { display: flex; align-items: center; justify-content: center; gap: 16px; transform: skewX(-4deg); }
.s17__br { display: flex; align-items: center; justify-content: center; width: 49.453px; height: 104px; flex: none; }
.s17__br img { width: 40.821px; height: 100.822px; flex: none; }
.s17__br--l img { transform: rotate(-5deg); }
.s17__br--r img { transform: rotate(-175deg) scaleY(-1); }
.s17__head-txt {
  font-family: var(--sans); font-weight: 700; line-height: normal; white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, #3683ff 0%, #3eb8ff 50%, #315aff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 2px;
}
.s17__head-txt .x66 { font-size: 66px; }
.s17__head-txt .x56 { font-size: 56px; }

.s17__list {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px; width: 100%; padding-bottom: 40px; flex: none;
}
.s17__list li { display: flex; align-items: center; gap: 8px; }
.s17__list li img { width: 32.11px; height: 30.288px; flex: none; }
.s17__list li img.wide { width: 33.097px; height: 31.224px; }
.s17__list li p { font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: 1.6; color: var(--ink); white-space: nowrap; }


/* ---------- s18-flow.css ---------- */
/* ============ 18 / 受講までの流れ  node:909-3001 ============ */
.s18 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 848px; padding: 160px;
}
.s18__bg { position: absolute; inset: 0; pointer-events: none; }
.s18__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s18__tint { position: absolute; inset: 0; background: #9cf; mix-blend-mode: color; }

.s18__head { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex: none; }
.s18__head p {
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.s18__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 100%; flex: none; }
.s18__row { display: flex; align-items: center; justify-content: center; width: 100%; }

.s18f {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; gap: 24px;
  padding: 25px 21px; background: var(--white); border: 1px solid var(--blue-border);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
}
.s18f__tag {
  display: flex; align-items: center; justify-content: center; padding: 8px 16px;
  background: var(--blue-deep); color: var(--white); white-space: nowrap;
  transform: skewX(-10deg) scaleY(.98);
}
.s18f__tag i { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 20.8px; line-height: normal; }
.s18f__tag b { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: normal; }
.s18f__txt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 72px;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal;
  color: var(--ink); text-align: center;
}
.s18__conn { display: block; width: 16px; height: 8px; flex: none; }
.s18__conn--w { width: 17px; }
.s18__conn img { width: 100%; height: 8px; }

.s18__down { width: 64px; height: 37.2px; }
.s18__start { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.s18__start img { width: 48.583px; height: 48px; object-fit: cover; flex: none; }
.s18__start p {
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  letter-spacing: 8px; color: var(--blue); white-space: nowrap;
}


/* ---------- s19-faq.css ---------- */
/* ============ 19 / よくある質問  node:909-3038 ============ */
.s19 { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 0; padding: 160px; }
.s19__bg { position: absolute; inset: 0; pointer-events: none; }
.s19__flat { position: absolute; inset: 0; background: #b1d7ff; }
.s19__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-42.7938deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}
.s19__tex {
  position: absolute; inset: 0; opacity: .16;
  background-image: url(../img/s13-bg.png); background-size: 1920.5px 1080.5px; background-position: top left;
}

.s19__panel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 100px;
  width: 100%; padding: 160px; background: rgba(255, 255, 255, .96); flex: none;
}
.s19__head { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal; color: var(--ink); text-align: center; }
.s19__list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }

.s19q { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.s19q__hd {
  display: flex; width: 100%; align-items: center; gap: 24px; padding: 24px;
  background: var(--blue-deep); border: 1px solid var(--ink); text-align: left;
}
.s19q__label { display: flex; flex: 1 0 0; min-width: 1px; align-items: center; gap: 24px; font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal; color: var(--white); }
.s19q__label .q { flex: none; white-space: nowrap; width: 29px; }
.s19q__label .t { flex: 1 0 0; min-width: 1px; }
.s19q__arw { display: flex; align-items: center; justify-content: center; flex: none; }
/* 閉：∨（下向き＝開く） / 開：∧（上向き＝閉じる） */
.s19q__arw img { width: 18px; height: 6.3px; transform: rotate(0deg); transition: transform .3s; }
.s19q:not(.is-open) .s19q__arw img { transform: rotate(180deg); }

/* 開閉は grid-template-rows 0fr → 1fr で高さをなめらかに変化させる
   （高さを JS で計算しなくても中身の実寸に追随する） */
.s19q__bd {
  display: grid; grid-template-rows: 0fr; width: 100%;
  background: var(--white); border: 0 solid var(--ink); opacity: 0;
  transition: grid-template-rows .38s var(--ease, ease), opacity .3s ease, border-width .38s var(--ease, ease);
}
.s19q.is-open .s19q__bd { grid-template-rows: 1fr; opacity: 1; border-width: 0 1px 1px; }
.s19q__bd > * { min-height: 0; overflow: hidden; }
.s19q__tx {
  padding: 0 40px; transition: padding .38s var(--ease, ease);
  font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--ink);
}
.s19q.is-open .s19q__tx { padding: 40px; }
.s19q__tx p { line-height: 1.6; white-space: pre-wrap; }
.s19q__tx p.b { font-weight: 700; }
.s19q__tx em { font-style: normal; color: var(--red); }
.s19q__tx em.b { font-weight: 700; }
.s19q__tx strong { font-weight: 700; }
.s19q__tx a { color: var(--blue); text-decoration: underline; text-underline-position: from-font; }


/* ---------- s20-youtube.css ---------- */
/* ============ 20 / 公式Youtubeチャンネル  node:909-3067 ============ */
.s20 {
  display: flex; align-items: center; justify-content: space-between;
  height: 830px; padding: 160px;
}
.s20__bg { position: absolute; inset: 0; pointer-events: none; }
.s20__white { position: absolute; inset: 0; background: var(--white); }
.s20__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.s20__left { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 50px; flex: none; }
.s20__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; }
.s20__tag {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 24px; background: var(--blue-deep);
  font-family: var(--sans); font-weight: 400; font-size: 30px; letter-spacing: -.6px;
  color: var(--white); white-space: nowrap;
}
.s20__head {
  display: flex; flex-direction: column; width: 789px;
  font-family: var(--sans); font-weight: 700; font-size: 56px; line-height: normal; color: var(--ink);
}
.s20__sub {
  width: 789px;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal; color: var(--ink);
}
.s20__cta {
  display: flex; width: 400px; align-items: center; justify-content: center;
  padding: 33px 41px; background: var(--blue); border: 1px solid var(--blue-border);
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: normal;
  color: var(--white); text-align: center; white-space: nowrap;
}

.s20__card {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 720px; height: 450px;
  background: linear-gradient(99.8846deg, rgb(1, 11, 109) 3.5415%, rgb(13, 103, 252) 40.708%, rgb(13, 103, 252) 59.292%, rgb(7, 47, 225) 96.459%);
}
.s20__card-in { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 60px 24px; }
.s20__card-in img { width: 100%; aspect-ratio: 800 / 212; object-fit: cover; }


/* ---------- s21-benefits.css ---------- */
/* ============ 21 / 特典を受け取る  node:909-3080 ============ */
.s21 {
  display: flex; align-items: center; justify-content: center; gap: 100px;
  height: 742px; padding: 160px;
}
.s21__bg { position: absolute; inset: 0; pointer-events: none; }
.s21__flat { position: absolute; inset: 0; background: #f5faff; }
.s21__noise {
  position: absolute; inset: 0; mix-blend-mode: color-burn;
  background-image: url(../img/s21-noise.png); background-size: 12px 12px; background-position: top left;
}

.s21__card {
  position: relative; flex: none; width: 800px;
  display: flex; flex-direction: column; align-items: center;
  border: 1.455px solid var(--ink);
}
.s21__card-bar { display: flex; width: 100%; align-items: center; justify-content: center; padding: 16px 0; background: #22bc21; }
.s21__card-bar p {
  font-family: var(--sans); font-weight: 900; font-size: 24px; line-height: 1.2;
  color: var(--white); text-align: center; white-space: nowrap;
}
.s21__card-img { position: relative; width: 800px; height: 360.087px; overflow: hidden; }
.s21__card-img img { position: absolute; left: 0; top: 0; width: 100%; height: 125.22%; }

.s21__right { position: relative; display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: flex-start; gap: 64px; }
.s21__head {
  display: flex; flex-direction: column; width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 48px; line-height: 1.4; color: var(--ink);
}
.s21__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 34px 82px; border: 2px solid var(--blue-deep); border-radius: 8px;
  background: linear-gradient(180deg, rgb(69, 147, 255) 0%, rgb(0, 59, 152) 100%);
  font-family: var(--sans); font-weight: 700; font-size: 26px; letter-spacing: 4.16px;
  color: var(--white); text-align: center; white-space: nowrap;
}


/* ---------- s22-consult.css ---------- */
/* ============ 22 / 相談でわかる3つのこと  node:909-3089 ============ */
.s22 {
  display: flex; flex-direction: column; align-items: center; gap: 100px;
  height: 1094.508px; padding: 160px;
}
.s22__bg { position: absolute; inset: 0; pointer-events: none; }
.s22__white { position: absolute; inset: 0; background: var(--white); }
.s22__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.s22__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-16.1817deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.s22__head {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center; white-space: nowrap;
}
.s22__head-s { font-size: 32px; line-height: normal; }
.s22__head-l { line-height: normal; }
.s22__head-l .x56 { font-size: 56px; }
.s22__head-l .x64 { font-size: 64px; }

.s22__cards {
  position: relative; flex: none;
  display: flex; align-items: flex-start; justify-content: center; gap: 24px;
  width: 1600px; height: 161.508px;
}
.s22c { display: flex; flex: 1 0 0; min-width: 1px; height: 161.508px; align-items: center; justify-content: center; }
.s22c__in {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; background: var(--white); border: 1px solid var(--blue-border);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
  transform: skewX(-10deg) scaleY(.98);
}
.s22c__t {
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1.6;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}
/* 袋文字は CSS で再現できないため Figma 書き出しの SVG を使用 */
.s22c__no {
  position: absolute; left: -11.69px; top: -19.45px;
  display: flex; align-items: center; justify-content: center; height: 63.028px;
}
.s22c__no img { height: 61px; width: auto; }

.s22__lead {
  position: relative; flex: none; width: 896px;
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal;
  color: var(--white); text-align: center;
}

/* 22 の CTA は 03 のオレンジ CTA の 1.232 倍サイズ */
.ctabtn--lg { gap: 21.6px; padding: 48.6px 37.8px 41.4px; border-width: 1.8px; }
.ctabtn--lg .ctabtn__line { width: 57.6px; height: 57.6px; }
.ctabtn--lg .ctabtn__txt { text-shadow: 1.296px 2.592px 0 rgba(0, 0, 0, .25); }
.ctabtn--lg .ctabtn__txt i { font-size: 34.56px; }
.ctabtn--lg .ctabtn__txt b { font-size: 51.84px; }
.ctabtn--lg .ctabtn__txt u { font-size: 43.2px; }
.ctabtn--lg .ctabtn__badge { top: -19.73px; left: calc(50% - .06px); gap: 3.6px; padding: 6px 48px; border: 1.506px solid #ffb601; border-radius: 376.508px; }
.ctabtn--lg .ctabtn__badge-txt { font-size: 18px; }
.ctabtn--lg .ctabtn__badge-txt b { font-size: 23.4px; }
.ctabtn--lg .ctabtn__slash { width: 12.6px; height: 21.824px; }
.ctabtn--lg .ctabtn__slash img { width: 25.2px; height: 1.8px; }
.ctabtn--lg .ctabtn__dot { width: 3.012px; height: 3.012px; top: 6.84px; }
.ctabtn--lg .ctabtn__dot--1 { left: 214.7px; }
.ctabtn--lg .ctabtn__dot--2 { left: 232.18px; }
.ctabtn--lg .arw--cta { width: 10.08px; height: 28.8px; }
.ctabtn--lg .arw--cta img { width: 29.83px; height: 11.92px; }


/* ---------- s23-footer.css ---------- */
/* ============ 23 / フッター  node:909-3117 ============ */
.ftr {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  min-height: 672px; padding: 160px 160px 64px; background: var(--ink-strong);
}
.ftr__top {
  display: flex; flex-direction: column; align-items: flex-start; gap: 64px;
  width: 100%; padding-bottom: 160px; border-bottom: 1px solid #666;
}
.ftr__row { display: flex; align-items: center; justify-content: space-between; width: 1600px; }
.ftr__logo img { width: 377.358px; height: 100px; object-fit: cover; }

.ftr__sns { display: flex; align-items: center; justify-content: center; gap: 24px; }
.ftr__sns a { display: block; width: 80px; height: 80px; }
.ftr__sns img { width: 80px; height: 80px; }
.ftr__sns-yt {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  background: var(--white); border-radius: 46.202px;
}
.ftr__sns-yt span { position: relative; display: block; width: 48px; height: 34.739px; overflow: hidden; }
.ftr__sns-yt img { position: absolute; left: -24.19%; top: -37.81%; width: 148.39%; height: 175.63%; }

.ftr__nav {
  display: flex; align-items: flex-start; gap: 40px; width: auto;
  font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: normal;
  color: #666; white-space: nowrap;
}
.ftr__copy {
  font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: normal;
  color: #666; white-space: nowrap;
}


/* ---------- sp01-hero.css ---------- */
/* ============ SP 01 / ヘッダー + ハンバーガー + ファーストビュー  node:909-3119 / 909-4218 ============ */

/* ---- SP ヘッダー ---- */
.sp-hdr {
  position: relative; z-index: 30;
  display: flex; width: 540px; align-items: center; justify-content: space-between;
  padding: 10px 24px 10px 12px; background: var(--white);
  filter: drop-shadow(0 4px 8px rgba(0, 32, 92, .1));
}
.sp-hdr__logo img { width: 200px; height: 53px; object-fit: cover; }
.sp-hdr__hbg { display: block; width: 40px; height: 26px; padding: 0; }
.sp-hdr__hbg img { width: 40px; height: 26px; }

/* ---- ハンバーガーメニュー ---- */
.sp-menu {
  position: absolute; left: 0; top: 0; width: 540px; height: 2000px;
  z-index: 40; pointer-events: none; visibility: hidden;
  /* 閉じている間パネルは translateX(100%) で右外に退避しているため、
     ここで切らないと画面外にはみ出して横スクロールが発生する */
  overflow: hidden;
}
.sp-menu.is-open { pointer-events: auto; visibility: visible; }
.sp-menu__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .2);
  opacity: 0; transition: opacity .25s;
}
.sp-menu.is-open .sp-menu__overlay { opacity: 1; }

.sp-menu__panel {
  position: absolute; right: 0; top: 73px; width: 334px;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 64px 24px; overflow: hidden;
  background: var(--white);
  transform: translateX(100%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.sp-menu.is-open .sp-menu__panel { transform: translateX(0); opacity: 1; }
.sp-menu__daruma {
  position: absolute; right: -157.62px; bottom: -108.54px;
  width: 365.517px; height: 361.131px; object-fit: cover;
  opacity: .04; transform: rotate(-10.96deg); pointer-events: none;
}
.sp-menu__list { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sp-menu__rule { width: 100%; height: 1px; }
.sp-menu__rule img { width: 100%; height: 1px; }
.sp-menu__item { width: 100%; }
.sp-menu__item a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 16px; }
.sp-menu__item img { width: 4px; height: 4px; flex: none; }
.sp-menu__item span {
  font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: normal;
  color: var(--ink-strong); white-space: nowrap;
}
.sp-menu__cta {
  position: relative; display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px;
  padding: 25px 16px; background: var(--blue-deep); border: 1px solid var(--blue-border);
}
.sp-menu__cta > span:first-child {
  font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: 3.2px;
  color: var(--white); text-align: center; white-space: nowrap;
}
html.is-menu-open, html.is-menu-open body { overflow: hidden; }

/* ---- SP ファーストビュー ---- */
/* Figma ではヘッダー(73px)がヒーロー枠 810px の内側にあるため、
   ヘッダーを共通部品へ切り出した分を差し引いて 737px とする */
.sp01 {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  height: 737px; padding: 64px 24px 40px;
}
.sp01__bg { position: absolute; inset: 0; pointer-events: none; }
.sp01__white { position: absolute; inset: 0; background: var(--white); }
.sp01__hue { position: absolute; inset: 0; background: var(--blue); mix-blend-mode: hue; }

/* 以下の座標は Figma の 810px 枠基準の値からヘッダー分 73px を引いたもの */
.sp01__stripes { position: absolute; left: 0; top: -73px; right: 0; bottom: 72.09px; pointer-events: none; }
.sp01__stripe { position: absolute; top: 0; bottom: 0; width: 270px; overflow: hidden; opacity: .56; }
.sp01__stripe--l { left: 0; }
.sp01__stripe--r { right: 0; }
.sp01__stripe img { position: absolute; top: 0; height: 100%; width: 512.73%; max-width: none; }
.sp01__stripe--l img { left: -31.71%; }
.sp01__stripe--r img { left: -251.65%; }

.sp01__visual {
  position: absolute; left: 0; top: -56.51px; width: 540px; height: 651px;
  pointer-events: none;
}

.sp01__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 27px; width: 100%; }
.sp01__lead {
  display: flex; flex-direction: column;
  font-family: var(--serif); font-weight: 900; font-size: 24px; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
}
.sp01__stack { position: relative; width: 492px; height: 152px; }
.sp01__marker { position: absolute; left: 0; top: 135.39px; width: 492px; height: 15.96px; }
.sp01__sub {
  position: absolute; left: 0; top: 0;
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 3.2px;
  color: var(--blue); line-height: normal; white-space: nowrap;
}
.sp01__big {
  position: absolute; left: 0; top: 21.59px;
  font-family: var(--serif); font-weight: 900; font-size: 49.2px; line-height: 1.3;
  color: var(--blue); white-space: nowrap;
}
.sp01__big .tight { letter-spacing: -9.84px; }

.sp01__feats {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px;
  width: 100%; padding: 16px; background: var(--white);
}
.sp01__feat { display: flex; align-items: center; gap: 3px; }
.sp01__feat > img { width: 12.537px; height: 9.948px; flex: none; }
.sp01__feat p {
  font-family: var(--serif); font-weight: 900; font-size: 16px; line-height: 1.6;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp01__feat em { font-style: normal; color: var(--blue); }
.sp01__rule img { width: 456.343px; height: 1px; }

/* ---- SP CTA（PC の 0.8195 倍） ---- */
.ctabtn--sp {
  gap: 13.649px; padding: 28.436px; border: 1.137px solid var(--blue-deep); border-radius: 6.554px;
  background: linear-gradient(180deg, #4593ff 0%, #0063ff 100%);
}
.ctabtn--sp .ctabtn__line { width: 40.948px; height: 40.948px; }
.ctabtn--sp .ctabtn__txt { letter-spacing: .91px; text-shadow: .682px 1.365px 0 rgba(0, 0, 0, .25); }
.ctabtn--sp .ctabtn__txt i { font-size: 22.749px; font-weight: 900; }
.ctabtn--sp .ctabtn__txt b { font-size: 27.299px; letter-spacing: 1.0919px; }
.ctabtn--sp .ctabtn__badge {
  top: -17.63px; left: calc(50% - .14px); gap: 2.275px; padding: 5.687px 36.398px;
  border: 1.137px solid var(--blue); border-radius: 237.921px;
}
.ctabtn--sp .ctabtn__badge-txt { font-size: 13.649px; letter-spacing: .273px; }
.ctabtn--sp .ctabtn__badge-txt b { font-size: 16.384px; letter-spacing: .3277px; }
.ctabtn--sp .ctabtn__slash { width: 7.962px; height: 13.791px; }
.ctabtn--sp .ctabtn__slash img { width: 15.924px; height: 1.137px; }
.ctabtn--sp .ctabtn__dot { width: 1.903px; height: 1.903px; top: 3.34px; }
.ctabtn--sp .ctabtn__dot--1 { left: 177.87px; }
.ctabtn--sp .ctabtn__dot--2 { left: 191.2px; }
.ctabtn--sp .arw--cta { width: 6.37px; height: 18.199px; }
.ctabtn--sp .arw--cta img { width: 18.85px; height: 7.53px; }


/* ---------- sp02-problems.css ---------- */
/* ============ SP 02 / 4つの試練  node:909-3167 ============ */
.sp02 { display: flex; flex-direction: column; align-items: flex-start; height: 1158px; background: #f5f5f5; }

.sp02__bg { position: absolute; inset: 0; pointer-events: none; }
.sp02__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp02__flat { position: absolute; inset: 0; background: #f5f5f5; }
.sp02__wall {
  position: absolute; left: 0; top: 1380px; width: 540px; height: 540px;
  pointer-events: none; mix-blend-mode: exclusion;
  -webkit-mask-image: url(../img/sp02-wall-mask.svg); mask-image: url(../img/sp02-wall-mask.svg);
  -webkit-mask-size: 540px 540px; mask-size: 540px 540px;
  -webkit-mask-position: 0 -1380px; mask-position: 0 -1380px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sp02__wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sp02__main {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  width: 540px; height: 1190px; padding: 64px 24px;
}

.sp02__head {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--sans); font-weight: 700; color: var(--ink);
  text-align: center; line-height: 1.2; white-space: nowrap;
}
.sp02__head .x32 { font-size: 32px; }
.sp02__head .x40 { font-size: 40px; }
.sp02__head b { font-weight: 700; color: var(--blue); }
.sp02__head b.n { font-size: 48px; }

.sp02__body { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.sp02__cards { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.sp02c {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  width: 492px; height: 120px; padding: 30px;
  background: var(--white); border: 4.5px solid var(--blue-deep);
  overflow: hidden;
}
.sp02c__corner { position: absolute; right: -4.5px; top: -4.5px; width: 27px; height: 27px; transform: rotate(90deg); }
.sp02c__ico { flex: none; }
.sp02c__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sp02c__t {
  font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--blue-deep);
  white-space: nowrap; transform: skewX(-4deg); line-height: 1.22;
}
.sp02c__s {
  font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .7px;
  color: var(--blue-deep); white-space: nowrap; transform: skewX(-4deg); line-height: 1.42;
}

.sp02__vline { display: block; width: 1px; height: 64px; }
.sp02__vline img { width: 1px; height: 64px; }

.sp02__concl { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.sp02__concl-s {
  width: 100%;
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 18px;
  color: var(--ink); text-align: center; transform: skewX(-4deg);
}
.sp02__concl-s p { line-height: 1.4; }
.sp02__concl-l {
  width: 100%;
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 32px; line-height: normal;
  color: #f20000; text-align: center; transform: skewX(-4deg);
}


/* ---------- sp03-solve.css ---------- */
/* ============ SP 03 / そんな課題をすべて解決する環境  node:909-3209 ============ */
.sp03 { height: 290px; background: var(--white); }
.sp03__chevrons { position: absolute; left: 50%; transform: translateX(-50%); top: -44.35px; width: 78.438px; height: 67.397px; }

.sp03__deco { position: absolute; inset: 0; pointer-events: none; }
.sp03__deco .d, .sp03__deco .sq { position: absolute; opacity: .3; }
.sp03__deco .d.flip { transform: rotate(180deg); }

.sp03__hl { position: absolute; left: 200.82px; top: 138.5px; width: 194.306px; height: 43.883px; background: var(--blue); }

.sp03__t1 {
  position: absolute; left: 270px; top: 85.72px; transform: translateX(-50%);
  width: 733.59px; text-align: center;
  font-family: var(--sans); font-weight: 700; color: var(--ink); line-height: normal;
}
.sp03__t1 .x29 { font-size: 29.7px; }
.sp03__t1 .x23 { font-size: 23.76px; }

.sp03__t2 {
  position: absolute; left: 269.59px; top: 140.28px; transform: translateX(-50%);
  white-space: nowrap; text-align: center;
  font-family: var(--sans); font-weight: 700; font-size: 30px; color: var(--ink);
}
.sp03__t2 p { line-height: 1.4; }
.sp03__t2 .w { color: var(--white); }


/* ---------- sp04-freeconsult.css ---------- */
/* ============ SP 04 / 無料受験相談 + 7大特典  node:909-3241 ============ */
.sp04 { display: flex; flex-direction: column; align-items: center; gap: 40px; height: 768px; padding: 64px 24px; }
.sp04__bg { position: absolute; inset: 0; pointer-events: none; }
.sp04__white { position: absolute; inset: 0; background: var(--white); }
.sp04__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp04__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-21.2066deg, rgb(0, 59, 152) 27.968%, rgb(23, 93, 203) 61.394%);
}

.sp04__card { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 492px; border: .895px solid var(--ink); }
.sp04__card-bar { display: flex; width: 100%; align-items: center; justify-content: center; padding: 9.84px 0; background: #22bc21; }
.sp04__card-bar p {
  font-family: var(--sans); font-weight: 900; font-size: 14.76px; line-height: 1.2;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(-10deg) scaleY(.98);
}
.sp04__card-img { position: relative; width: 492px; height: 221.453px; overflow: hidden; }
.sp04__card-img img { position: absolute; left: 0; top: 0; width: 100%; height: 125.22%; }

.sp04__right { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; width: 100%; }
.sp04__copy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sp04__w {
  font-family: var(--sans); font-weight: 700; font-size: 31.572px; line-height: 1.4;
  color: var(--white); white-space: nowrap; text-shadow: 0 2.631px 2.631px rgba(0, 0, 0, .25);
}
.sp04__row1 { display: flex; align-items: flex-end; gap: 5.262px; width: 100%; }
/* PC の .s03__chip と同じ比率で高さを詰めている（Figma は padding:10.524px / line-height:1.4） */
.sp04__chip { display: flex; align-items: center; justify-content: center; padding: 6.6px 10.524px; background: var(--white); }
.sp04__chip p { font-family: var(--sans); font-weight: 700; color: var(--blue); white-space: nowrap; line-height: 1.25; }
.sp04__chip .x42 { font-size: 42.096px; }
.sp04__chip .x31 { font-size: 31.572px; }
.sp04__chip .x36 { font-size: 36.834px; }

.sp04__row2 { display: flex; align-items: flex-end; padding: 18.417px 0 10.524px; }
.sp04__skew {
  font-family: var(--sans); font-weight: 700; font-size: 36.834px; line-height: 1.4;
  color: var(--white); white-space: nowrap; text-shadow: 0 2.631px 2.631px rgba(0, 0, 0, .25);
  transform: skewX(-10deg) scaleY(.98); margin-right: -2.631px;
}

.sp04__row3 { position: relative; width: 460.428px; height: 58.5px; }
.sp04__marker { position: absolute; left: 218.63px; top: 47.36px; width: 81.001px; height: 11.182px; background: #ffe400; }
.sp04__emph { position: absolute; left: 237px; top: 0; width: 44.244px; height: 7.893px; }
.sp04__row3-txt {
  position: absolute; left: 0; top: 7.24px; width: 460.428px;
  font-family: var(--sans); font-weight: 700; color: var(--white); line-height: 1.4;
  text-shadow: 0 2.631px 2.631px rgba(0, 0, 0, .25);
}
.sp04__row3-txt .x31 { font-size: 31.572px; }
.sp04__row3-txt .x36 { font-size: 36.834px; }

/* SP 用オレンジ CTA（PC の 0.702 倍） */
.ctabtn--sp4 { gap: 12.309px; padding: 27.695px 21.541px 23.592px; border: 1.026px solid #ffb700; border-radius: 5.616px; }
.ctabtn--sp4 .ctabtn__line { width: 32.823px; height: 32.823px; }
.ctabtn--sp4 .ctabtn__txt { text-shadow: .739px 1.477px 0 rgba(0, 0, 0, .25); }
.ctabtn--sp4 .ctabtn__txt i { font-size: 19.694px; }
.ctabtn--sp4 .ctabtn__txt b { font-size: 29.541px; }
.ctabtn--sp4 .ctabtn__txt u { font-size: 24.617px; }
.ctabtn--sp4 .ctabtn__badge {
  top: -11.54px; left: calc(50% - .49px); gap: 2.257px; padding: 3.861px 24.71px;
  border: .944px solid #ffb601; border-radius: 236.008px;
}
.ctabtn--sp4 .ctabtn__badge-txt { font-size: 11.283px; }
.ctabtn--sp4 .ctabtn__badge-txt b { font-size: 14.668px; }
.ctabtn--sp4 .ctabtn__slash { width: 7.898px; height: 13.68px; }
.ctabtn--sp4 .ctabtn__slash img { width: 15.796px; height: 1.026px; }
.ctabtn--sp4 .ctabtn__dot { width: 1.888px; height: 1.888px; top: 10.76px; }
.ctabtn--sp4 .ctabtn__dot--1 { left: 134.58px; }
.ctabtn--sp4 .ctabtn__dot--2 { left: 145.54px; }
.ctabtn--sp4 .arw--cta { width: 5.744px; height: 16.412px; }
.ctabtn--sp4 .arw--cta img { width: 17px; height: 6.79px; }


/* ---------- sp05-butstill.css ---------- */
/* ============ SP 05 / でも…  node:909-3272 ============ */
.sp05 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 650px; padding: 64px 24px; }
.sp05__bg { position: absolute; inset: 0; pointer-events: none; }
.sp05__grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(98.5114deg, rgba(173, 190, 192, .35) .263%, rgba(184, 188, 209, .35) 50%, rgba(132, 166, 182, .35) 99.737%),
    #f5faff;
}
.sp05__noise {
  position: absolute; inset: 0; opacity: .02;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp05__photo {
  position: absolute; left: -140px; top: 153.91px; bottom: -1.16px; width: 963.298px;
  pointer-events: none; opacity: .4;
  -webkit-mask-image: url(../img/sp05-photo-mask.svg); mask-image: url(../img/sp05-photo-mask.svg);
  -webkit-mask-size: 963.298px 496.086px; mask-size: 963.298px 496.086px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sp05__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.sp05__head {
  position: relative; flex: none; display: flex; flex-direction: column;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1.4;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp05__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; width: 369px; flex: none; }
.sp05__but { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1.4; color: #a40000; text-align: center; }
.sp05__pills { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; }
.sp05__pills li {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 30px; background: #5a7f82; box-shadow: inset 0 0 0 4.5px #5a7f82;
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--white); white-space: nowrap;
}


/* ---------- sp06-planning.css ---------- */
/* ============ SP 06 / 情報収集･計画作成  node:909-3290 ============ */
.sp06 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1274px; padding: 64px 24px; }
.sp06__bg { position: absolute; inset: 0; pointer-events: none; }
.sp06__white { position: absolute; inset: 0; background: var(--white); }
.sp06__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp06__daruma {
  position: absolute; right: -137.93px; top: 1002.69px; width: 436.623px; height: 432.737px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sp06__daruma img { width: 384.771px; height: 380.154px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }

.sp06__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14.797px; flex: none; }
.sp06__head-mk {
  position: absolute; left: calc(50% - 19.05px); top: 109.95px; transform: translateX(-50%);
  width: 213.294px; height: 60.336px; background: var(--blue);
}
.sp06__head-1 {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp06__head-2 {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 40px; text-align: center;
}
.sp06__head-2 p { line-height: 1.4; white-space: pre; }
.sp06__head-2 .b { color: var(--blue); }
.sp06__head-2 .d, .sp06__head-2 p.d { color: var(--ink); }
.sp06__head-2 .w { color: var(--white); }

.sp06__cols { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 100%; flex: none; }
.sp06__shot { position: relative; width: 100%; aspect-ratio: 777.0293 / 470.5138; overflow: hidden; }
.sp06__shot img { position: absolute; left: -.09%; top: 0; width: 100.09%; height: 100%; }
.sp06__txt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%;
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center;
}
.sp06__txt-1 { width: 100%; font-size: 18px; line-height: 1; }
.sp06__txt-2 { width: 100%; font-size: 24px; }
.sp06__txt-2 p { line-height: 1.4; }

.sp06__note {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 24px; flex: none;
  background: rgba(255, 255, 255, .64); border: 2px solid var(--blue);
}
.sp06__note-mk { position: absolute; height: 13.456px; background: #fff283; }
.sp06__note-mk--1 { left: 230.59px; top: 144.54px; width: 193.408px; }
.sp06__note-mk--2 { left: 133.82px; top: 179px; width: 55.408px; }
.sp06__note-txt {
  position: relative; flex: 1 0 0; min-width: 1px;
  font-family: var(--sans); font-weight: 700; font-size: 24px; color: #092180;
  text-align: center;
}
.sp06__note-txt p { line-height: 1.4; white-space: pre-wrap; }

.sp06__tri { position: relative; display: block; width: 120.374px; height: 31.099px; transform: scaleY(-1); flex: none; }
.sp06__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }


/* ---------- sp07-goals.css ---------- */
/* ============ SP 07 / 5段階の目標設定  node:909-3306 ============ */
.sp07 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 958px; padding: 64px 24px; }
.sp07__bg { position: absolute; inset: 0; pointer-events: none; }
.sp07__white { position: absolute; inset: 0; background: var(--white); }
.sp07__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp07__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-42.0842deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.sp07__ribbon { position: relative; width: 300px; height: 60px; flex: none; }
.sp07__ribbon img { position: absolute; inset: 0; width: 300px; height: 60px; }
.sp07__ribbon p {
  position: absolute; left: 74.63px; top: 18px;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}

.sp07__panel {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 492px; padding: 19.68px 19.68px 7.38px; background: var(--white); flex: none;
}
.sp07__stack { position: relative; width: 465.39px; height: 226.15px; }
.sp07__steps { position: absolute; left: 0; top: 100.84px; width: 465.39px; height: 49.412px; }

.sp07card { position: absolute; width: 86.923px; height: 97.973px; background: var(--white); border: 1.428px solid; }
.sp07card__no {
  position: absolute; left: -3.79px; top: -5.26px;
  display: flex; align-items: center; justify-content: center;
  width: 16.501px; height: 16.501px; border-radius: 50%; border: 1.031px solid var(--white);
  font-family: var(--sans); font-weight: 500; font-size: 10.313px; line-height: 1;
  color: var(--white); text-align: center;
}
.sp07card__ico { position: absolute; object-fit: cover; }
.sp07card__ico--tinted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* PC の .s06card__ico--tinted と同じ理由でアイコン画像をマスクに使う */
.sp07card__ico--tinted .tint {
  position: absolute; inset: 0; mix-blend-mode: color;
  -webkit-mask-image: url(../img/s06-ic1.png); mask-image: url(../img/s06-ic1.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sp07card__ttl {
  position: absolute; transform: translate(-50%, 50%);
  font-family: var(--sans); font-weight: 500; font-size: 12.523px; line-height: 1.1;
  text-align: center; white-space: nowrap;
}
.sp07card--1 { left: .48px; top: 0; border-color: #042b6a; filter: drop-shadow(2.856px 2.856px 0 rgba(4, 43, 106, .2)); }
.sp07card--1 .sp07card__no { background: #042b6a; }
.sp07card--1 .sp07card__ttl { color: #042b6a; }
.sp07card--1 .tint { background: #042b6a; }
.sp07card--2 { left: 95.47px; top: 10px; border-color: #0e5fc0; filter: drop-shadow(2.856px 2.856px 0 rgba(14, 95, 192, .2)); }
.sp07card--2 .sp07card__no { background: #0e5fc0; }
.sp07card--2 .sp07card__ttl { color: #0e5fc0; }
.sp07card--3 { left: 190.16px; top: 20px; border-color: #209b9e; filter: drop-shadow(2.856px 2.856px 0 rgba(32, 155, 158, .2)); }
.sp07card--3 .sp07card__no { background: #209b9e; }
.sp07card--3 .sp07card__ttl { color: #209b9e; }
.sp07card--4 { left: 286.36px; top: 30px; border-color: #5fa842; filter: drop-shadow(2.856px 2.856px 0 rgba(95, 168, 66, .2)); }
.sp07card--4 .sp07card__no { background: #5fa842; }
.sp07card--4 .sp07card__ttl { color: #5fa842; }
.sp07card--5 { left: 382.55px; top: 40.01px; border-color: #dd7c08; filter: drop-shadow(2.856px 2.856px 0 rgba(221, 124, 8, .2)); }
.sp07card--5 .sp07card__no { background: #dd7c08; }
.sp07card--5 .sp07card__ttl { color: #dd7c08; }

.sp07__band { position: absolute; left: 7.71px; top: 125.41px; width: 455.683px; height: 107.373px; }
.sp07__band-line { position: absolute; left: 42.6px; top: 50px; width: 369.761px; height: 14.028px; display: flex; align-items: center; justify-content: center; }
.sp07__band-line img { width: 370.027px; height: 30.76px; transform: rotate(2.17deg); }
.sp07__band-e1 { position: absolute; left: 0; top: 0; width: 99.995px; height: 99.995px; }
.sp07__band-e2 { position: absolute; left: 369.05px; top: 20.74px; width: 86.633px; height: 86.633px; }
.sp07__band-t1, .sp07__band-t2 {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 29.852px;
  font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.1;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(-5.7deg);
}
.sp07__band-t1 { left: 6.96px; top: 36.9px; width: 86.978px; }
.sp07__band-t2 { left: 372.65px; top: 50.78px; width: 79.978px; }

/* ---- つまり… ---- */
.sp07__sum { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12.3px; width: 492px; flex: none; }
.sp07__sum-lead { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1; color: var(--white); }
.sp07__sum-row { display: flex; align-items: center; justify-content: center; gap: 7.38px; width: 100%; }
.sp07sum {
  display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; justify-content: center;
  gap: 7.38px; height: 140px; padding: 7.38px; background: var(--white); border: 2.46px solid;
  filter: drop-shadow(1.23px 1.23px 1.23px rgba(0, 0, 0, .04));
}
.sp07sum > img { width: 46.125px; height: 46.125px; }
.sp07sum--green { border-color: #64c42b; }
.sp07sum--red { border-color: #f65542; }
.sp07sum__txt { font-family: var(--sans); font-weight: 700; color: var(--ink-strong); text-align: center; white-space: nowrap; }
.sp07sum__txt .s { font-size: 12px; line-height: 1.4; }
.sp07sum__txt .l { font-size: 18px; line-height: 1.4; font-weight: 900; }
.sp07sum--green .l { color: #64c42b; }
.sp07sum--red .l { color: #f65542; }
.sp07__plus { font-family: var(--sans); font-weight: 700; font-size: 17.22px; line-height: 1; color: var(--white); }
.sp07__sum-foot { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1; color: var(--white); text-align: center; white-space: nowrap; }

.sp07__concl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.sp07__concl-1 {
  width: 840px; text-align: center;
  font-family: var(--sans); font-weight: 700; font-size: 24px; color: var(--white);
}
.sp07__concl-1 p { line-height: 1.4; }
.sp07__concl-2 { position: relative; }
.sp07__concl-mk { position: absolute; left: 26.2px; top: 0; width: 385.796px; height: 39.969px; background: var(--white); }
.sp07__concl-2 p {
  position: relative; margin-top: 2px;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1.4;
  text-align: center; white-space: nowrap;
}
.sp07__concl-2 .w { color: var(--white); }
.sp07__concl-2 .b { color: var(--blue); }


/* ---------- sp08-management.css ---------- */
/* ============ SP 08 / 365日1時間単位の管理  node:909-3371 ============ */
.sp08 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 4646px; padding: 64px 24px; }
.sp08__bg { position: absolute; inset: 0; pointer-events: none; }
.sp08__flat { position: absolute; inset: 0; background: #f5faff; }
.sp08__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp08__head {
  position: relative; flex: none; display: flex; flex-direction: column;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp08__but {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 18px;
  color: #a40000; text-align: center; white-space: nowrap;
}
.sp08__but p { line-height: 1.4; }

.sp08p { position: relative; flex: none; width: 492px; }
.sp08p--a { height: 2864.81px; }
.sp08p--b { height: 1174.73px; }
.sp08p__bg { position: absolute; left: 0; width: 492px; background: var(--white); }
.sp08p__frame { position: absolute; left: 0; width: 492px; }
.sp08p__chip { position: absolute; top: 0; background: var(--white); border: 2px solid var(--blue); }
.sp08p__ttl {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--blue); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.sp08p__ttl2 {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--blue); text-align: center; white-space: nowrap; transform: skewX(-4.23deg);
}
.sp08p__lead {
  position: absolute;
  font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--ink);
  text-align: center; white-space: nowrap;
}
.sp08p__lead p { line-height: 1.6; }

.sp08p__cards { position: absolute; display: flex; flex-direction: column; align-items: center; }
.sp08card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px; background: var(--white); }
.sp08card__ttl {
  font-family: var(--sans); font-weight: 900; font-size: 24px;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp08card__ttl p { line-height: 1.2; }
.sp08card__shot { position: relative; width: 400px; height: 610px; overflow: hidden; }
.sp08card__shot img { position: absolute; left: 0; top: 0; width: 100%; }
.sp08card__cap {
  width: 400px;
  font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.6;
  color: var(--ink); text-align: center;
}
.sp08card__sep { width: 60px; height: 20px; }

/* ---- パネル B 中身 ---- */
.sp08b {
  position: absolute; left: 19px; top: 99.46px;
  display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 64px 0;
}
.sp08b__lead { font-family: var(--sans); color: var(--ink); text-align: center; white-space: nowrap; }
.sp08b__lead .x18 { font-size: 18px; font-weight: 400; line-height: 1.6; }
.sp08b__lead .x24 { font-size: 24px; font-weight: 500; line-height: 1.4; }
.sp08b__lead .r { color: var(--red); }

.sp08b__cmp { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; width: 444px; }
.sp08cmp { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0; overflow: hidden; }
.sp08cmp--other { background: #f6f6f6; }
.sp08cmp--ours { background: #edf4fe; }
.sp08cmp__ico { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sp08cmp__ico img { width: 64px; height: 64px; }
.sp08cmp__ico p { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1; text-align: center; white-space: nowrap; }
.sp08cmp--other .sp08cmp__ico p { color: #5a5a5a; }
.sp08cmp--ours .sp08cmp__ico p { color: var(--blue); }
.sp08cmp__txt {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.sp08b__tri { position: relative; display: block; width: 75.233px; height: 19.437px; transform: scaleY(-1); }
.sp08b__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }

.sp08b__study { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sp08b__study-ttl {
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center;
  white-space: nowrap; line-height: 1; transform: skewX(-10deg) scaleY(.98);
}
.sp08b__study-ttl .x24 { font-size: 24px; }
.sp08b__study-ttl .x21 { font-size: 21px; }
.sp08b__study-img { width: 444px; height: 239.205px; object-fit: cover; }

.sp08__cta { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 478.567px; height: 91.409px; }
.sp08__cta-in {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 7.5px;
  padding: 30px 48px; background: var(--blue); transform: skewX(-10deg) scaleY(.98);
}
.sp08__cta-txt {
  font-family: var(--sans); font-weight: 700; font-size: 33px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap; transform: skewX(6deg) scaleY(.99);
}
.sp08__cta-sub {
  position: absolute; left: calc(50% - 7.81px); top: -9.9px; transform: translateX(-50%) skewX(6deg) scaleY(.99);
  font-family: var(--sans); font-weight: 700; font-size: 22.5px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}


/* ---------- sp09-anxiety.css ---------- */
/* ============ SP 09 / 最終合格への不安を解消  node:909-3429 ============ */
.sp09 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1900px; padding: 64px 24px; }
.sp09__bg { position: absolute; inset: 0; pointer-events: none; }
.sp09__white { position: absolute; inset: 0; background: var(--white); }
.sp09__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp09__head {
  position: relative; flex: none; display: flex; flex-direction: column;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1.2;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.sp09__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; flex: none; }
.sp09__box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 24px; }
.sp09__box--gray { background: rgba(240, 240, 240, .8); }
.sp09__box--blue { background: rgba(226, 238, 255, .8); overflow: hidden; }

.sp09__label {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.sp09__label--red { font-family: "ZeroGothic", var(--sans); color: #a40000; line-height: normal; }
.sp09__label2 {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--blue); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

.sp09__grid { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: center; gap: 8px; width: 100%; }
.sp09chip {
  display: flex; width: 218px; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--white); flex: none;
}
.sp09chip--auto { width: auto; }
.sp09chip img { width: 19.266px; height: 18.173px; flex: none; }
.sp09chip p { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--blue-deep); white-space: nowrap; }

.sp09__tri { position: relative; display: block; width: 80.249px; height: 20.733px; transform: scaleY(-1); flex: none; }
.sp09__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }

.sp09__daruma {
  position: absolute; left: 1311.6px; top: 466.38px; width: 392.093px; height: 388.603px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sp09__daruma img { width: 345.533px; height: 341.386px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }

.sp09__sol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.sp09sol { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sp09sol__chip {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; background: var(--white);
}
.sp09sol__chip img { width: 24.105px; height: 22.735px; flex: none; }
.sp09sol__chip p { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--blue-deep); white-space: nowrap; }
.sp09sol__ar { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1; color: #c8c8c8; }
.sp09sol__ans {
  display: flex; align-items: center; justify-content: center; height: 48px;
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--ink); text-align: center;
}
.sp09sol__note {
  width: 100%;
  font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1;
  color: var(--ink); text-align: center;
}


/* ---------- sp10-support.css ---------- */
/* ============ SP 10 / 定期面談・質問し放題  node:909-3562 ============ */
.sp10 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1430px; padding: 64px 24px; }
.sp10__bg { position: absolute; inset: 0; pointer-events: none; }
.sp10__white { position: absolute; inset: 0; background: var(--white); }
.sp10__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp10__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-53.4306deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}
.sp10__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
}
.sp10__cols { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; flex: none; }
.sp10box { display: flex; width: 100%; align-items: flex-start; justify-content: center; padding: 24px; background: rgba(255, 255, 255, .96); }
.sp10box__in { display: flex; flex: 1 0 0; min-width: 1px; flex-direction: column; align-items: center; gap: 24px; }
.sp10box__ttl {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--blue); text-align: center;
}
.sp10box__shots { display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; background: var(--white); }
.sp10shot { position: relative; flex: none; overflow: hidden; }
.sp10shot--wide { width: 100%; aspect-ratio: 1130 / 527.9746; }
.sp10shot img { position: absolute; top: 0; max-width: none; }
.sp10box__cap { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sp10box__cap img { width: 26.589px; height: 7.514px; flex: none; }
.sp10box__cap p {
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap;
}


/* ---------- sp11-allinone.css ---------- */
/* ============ SP 11 / 院試合格に必要な部分はすべて揃えています  node:909-3583 ============ */
.sp11 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1012px; padding: 64px 24px; }
.sp11__bg { position: absolute; inset: 0; pointer-events: none; }
.sp11__white { position: absolute; inset: 0; background: var(--white); }
.sp11__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }

.sp11__head {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 445.581px; height: 79.805px;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

/* 図全体を 90deg 回転（Figma と同じ構造）*/
.sp11__wrap {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 505.128px; height: 739.189px;
}
.sp11__stack { position: relative; width: 739.189px; height: 505.128px; flex: none; transform: rotate(90deg); }

.sp11__ring { position: absolute; left: 41.76px; top: 54.79px; width: 668.298px; height: 395.555px; }

.sp11__core {
  position: absolute; left: 152.97px; top: 197.35px; width: 465.258px; height: 110.418px;
  display: flex; align-items: center; gap: 10.982px;
}
.sp11__core-daruma { display: flex; width: 110.418px; height: 111.759px; align-items: center; justify-content: center; flex: none; }
.sp11__core-daruma img { width: 111.759px; height: 110.418px; object-fit: cover; transform: rotate(-90deg); flex: none; }
.sp11__core-ttl { display: flex; width: 328px; height: 83px; align-items: center; justify-content: center; flex: none; }
.sp11__core-ttl img { width: 89px; height: 329px; transform: rotate(-90deg); flex: none; }

.sp11b { position: absolute; width: 128.376px; height: 128.376px; }
.sp11b > img { width: 128.376px; height: 128.376px; }
.sp11b__t { position: absolute; display: flex; align-items: center; justify-content: center; }
.sp11b__t p {
  font-family: var(--sans); font-weight: 700; font-size: 16.813px; line-height: 1.2;
  color: var(--ink); text-align: center; white-space: nowrap; transform: rotate(-90deg);
}


/* ---------- sp12-cases.css ---------- */
/* ============ SP 12 / 様々な院試受験生に対応  node:909-3623 ============ */
.sp12 { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; height: 1174px; padding: 64px 24px; }
.sp12__bg { position: absolute; left: -210px; top: 0; bottom: 0; width: 1070.373px; height: 100%; pointer-events: none; }

.sp12__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 492px; height: 178px; flex: none; }
.sp12__head-in { width: 492px; font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center; }
.sp12__head-in .x24 { font-size: 24px; line-height: normal; }
.sp12__head-in .x40 { font-size: 40px; line-height: 1.4; }
.sp12__head-in .hl { font-family: var(--serif); font-weight: 900; color: var(--blue); }
.sp12__head-in .d { color: var(--ink); }

.sp12__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; flex: none; }

.sp12__list {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  width: 100%; padding: 16px 0; background: var(--white); border: 1px solid var(--blue-border);
}
.sp12__item { display: flex; width: 100%; align-items: center; gap: 24px; padding: 0 24px; background: var(--white); }
.sp12__item img { width: 24.083px; height: 22.716px; flex: none; }
.sp12__item p { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--ink); white-space: nowrap; }
.sp12__rule { width: 100%; height: 1px; }
.sp12__rule img { width: 100%; height: 1px; }

.sp12__cta-box {
  display: flex; flex-direction: column; align-items: center; gap: 50px;
  width: 100%; padding: 40px 24px; background: rgba(255, 255, 255, .95);
}
.sp12__cta-txt { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sp12__cta-txt .a { width: 370.5px; font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal; color: var(--blue-deep); }
.sp12__cta-txt .b { display: flex; width: 370.5px; align-items: flex-end; justify-content: center; gap: 1.5px; line-height: 1; white-space: nowrap; }
.sp12__cta-txt .s { font-family: var(--serif); font-weight: 900; font-size: 42px; color: var(--blue); }
.sp12__cta-txt .m { font-family: var(--sans); font-weight: 700; font-size: 36px; color: var(--blue-deep); }
.sp12__cta-txt .c { width: 370.5px; font-family: var(--sans); font-weight: 700; font-size: 36px; line-height: normal; color: var(--blue-deep); }

.sp12__cta {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 16px;
  padding: 33px 41px; border-radius: 8px;
  background: var(--blue); border: 1px solid var(--blue-deep);
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, .1));
}
.sp12__cta > span:first-child {
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--white); text-align: center; white-space: nowrap;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, .08);
}
.arw--sp12 { width: 4.725px; height: 13.5px; }
.arw--sp12 img { width: 14.79px; height: 6.57px; transform: rotate(90deg); flex: none; }


/* ---------- sp13-compare.css ---------- */
/* ============ SP 13 / 他予備校との違い  node:909-3691 ============ */
.sp13 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 708px; padding: 64px 24px; }
.sp13__bg { position: absolute; inset: 0; pointer-events: none; }
.sp13__white { position: absolute; inset: 0; background: var(--white); }
.sp13__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp13__head {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center; height: 71.001px;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.sp13__table {
  position: relative; flex: none; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
}
.sp13__cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--white); border: .5px solid #092180;
}
.sp13__cell p { flex: 1 0 0; min-width: 1px; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: normal; color: var(--ink); text-align: center; }

.sp13__cell--label { justify-content: flex-start; }
.sp13__cell--label p {
  flex: none; font-size: 14px; line-height: 1.6; white-space: nowrap; transform: skewX(-4deg);
}
.sp13__cell--hd.sp13__cell--label { padding: 24px 40px; background: #f5f5f4; opacity: 0; }
.sp13__cell--hd.sp13__cell--label p { font-weight: 700; font-size: 24px; color: #092180; transform: none; }

.sp13__cell--ours { background: var(--blue); overflow: hidden; }
.sp13__cell--ours p { font-weight: 700; font-size: 18px; color: var(--white); }
.sp13__cell--other { background: #f5f5f4; }
.sp13__cell--other p { font-weight: 700; font-size: 16px; }

.sp13__cell--ours-body { background: #f5faff; }
.sp13__cell--ours-body p { font-weight: 700; font-size: 18px; }

.sp13__daruma {
  position: absolute; left: calc(50% - 60.65px); top: -23.08px; transform: translateX(-50%);
  display: flex; width: 143.4px; height: 142.123px; align-items: center; justify-content: center; pointer-events: none;
}
.sp13__daruma img { width: 126.371px; height: 124.855px; object-fit: cover; opacity: .1; transform: rotate(-8.48deg); }


/* ---------- sp14-price.css ---------- */
/* ============ SP 14 / 受講期間プラン・受講料  node:909-3727 ============ */
.sp14 { display: flex; flex-direction: column; align-items: center; gap: 64px; min-height: 2210px; padding: 64px 24px; }
.sp14__bg { position: absolute; inset: 0; pointer-events: none; }
.sp14__flat { position: absolute; inset: 0; background: #d8ebff; }
.sp14__tex {
  position: absolute; inset: 0; opacity: .5;
  background-image: url(../img/s13-bg.png); background-size: 960px 540.109px; background-position: top left;
}

.sp14__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 17px; flex: none; }
.sp14__head-row { display: flex; align-items: flex-end; gap: 8px; }
.sp14__logo { width: 211.321px; height: 56px; object-fit: cover; }
.sp14__no { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal; color: var(--ink); white-space: nowrap; }
.sp14__ttl {
  display: flex; align-items: center; justify-content: center; padding: 4px 24px; background: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}

.sp14__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; flex: none; }
.sp14__lead { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sp14__deco { display: flex; align-items: center; justify-content: center; flex: none; }
.sp14__deco img { width: 33.19px; height: 33.52px; }
.sp14__deco--l img { transform: rotate(180deg) scaleY(-1); }
.sp14__lead-txt {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

.sp14__tablewrap { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; width: 100%; }
.sp14__table { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.sp14c {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 24px 40px; background: var(--white); border: .5px solid #092180;
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center; white-space: nowrap;
}
.sp14c--empty { background: #f5f5f4; opacity: 0; padding: 16px 40px; }
.sp14c--hd { flex-direction: column; padding: 16px 40px; background: var(--blue); color: var(--white); overflow: hidden; }
.sp14c--hd .x20 { font-size: 20px; }
.sp14c--hd .x24 { font-size: 24px; }
.sp14c__badge {
  display: flex; align-items: center; justify-content: center; padding: 2px 16px;
  background: var(--white); border: 1px solid var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--red);
  transform: skewX(-10deg) scaleY(.98); margin-bottom: 2px;
}
.sp14c--plan { flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px 24px; background: var(--blue); color: var(--white); }
.sp14c--plan .n { display: flex; align-items: flex-end; justify-content: center; }
.sp14c--plan .n.w92 { width: 92px; align-items: center; }
.sp14c--plan .x24 { font-size: 24px; }
.sp14c--plan .x20 { font-size: 20px; }
.sp14c--plan .x16 { font-size: 16px; }
.sp14c--price { gap: 4px; align-items: flex-end; }
.sp14c--price .v { font-size: 24px; }
.sp14c--price .y { font-size: 18px; }

.sp14__note {
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}

.sp14__split { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 8px 24px; flex: none; width: 100%; }
.sp14__split-rule { width: 100%; height: 2.88px; }
.sp14__split-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sp14__coin { display: flex; width: 28.078px; height: 26.183px; align-items: center; justify-content: center; }
.sp14__coin img { width: 26.247px; height: 26.247px; transform: skewX(-4deg); }
.sp14__split-txt {
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  color: var(--blue-deep); text-align: center; white-space: nowrap; transform: skewX(-4deg);
}
.sp14__split-txt p { line-height: 1.4; }

.sp14__pay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 24px; background: var(--white); flex: none; }
.sp14__pay-ttl {
  display: flex; align-items: center; justify-content: center; padding: 4px 24px; background: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp14__pay-list { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; }
.sp14pay { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid #cfcece; }
.sp14pay__hd { display: flex; width: 100%; align-items: center; gap: 24px; padding: 16px; background: var(--white); overflow: hidden; }
.sp14pay__hd .n {
  display: flex; width: 37.5px; height: 37.5px; align-items: center; justify-content: center; background: var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--white); text-align: center; flex: none;
}
.sp14pay__hd p { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: normal; color: var(--ink); white-space: nowrap; }
.sp14pay__bd { display: flex; width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 16px; background: var(--white); }
.sp14pay__bd--wide { gap: 40px; }
.sp14pay__bd p { width: 100%; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: normal; color: var(--ink); }
.sp14pay__bd .r, .sp14pay__bd p.r { width: 100%; color: var(--red); font-family: var(--serif); font-weight: 500; font-size: 18px; }
.sp14pay__bd .r p { color: var(--red); }
.sp14pay__rule { width: 100%; height: 1px; }

.sp14sim { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.sp14sim__ttl { display: flex; align-items: center; gap: 16px; width: 100%; }
.sp14sim__ttl--g12 { gap: 12px; }
.sp14sim__ttl .sq { width: 16px; height: 16px; background: var(--ink); flex: none; }
.sp14sim__ttl p { flex: 1 0 0; min-width: 1px; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: normal; color: var(--ink); }
.sp14sim__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sp14sim__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sp14sim__cell .b {
  display: flex; width: 100%; align-items: center; justify-content: center; padding: 8px 10px;
  background: var(--white); border: 1px solid var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 18px; color: var(--ink); text-align: center; white-space: nowrap;
}
.sp14sim__cell .b--total { background: #d4e5fc; border: 0; font-weight: 700; color: var(--blue-deep); }
.sp14sim__cell .c { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: normal; color: var(--ink); text-align: center; }
.sp14sim__cell .c--total { font-weight: 700; }
.sp14sim__row .op {
  width: 18px; height: 40.5px;
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: normal;
  color: var(--ink); text-align: center; flex: none;
}

/* Figma の [text-box-trim:trim-both][text-box-edge:cap_alphabetic] 再現
   （非対応ブラウザは line-height:1 にフォールバック） */
.sp14c--plan .n span, .sp14c--plan p, .sp14c--price span {
  line-height: 1;
  text-box: trim-both cap alphabetic;
}


/* ---------- sp15-lowprice.css ---------- */
/* ============ SP 15 / 高品質･低価格の理由  node:909-3880 ============ */
.sp15 { display: flex; flex-direction: column; align-items: center; gap: 64px; min-height: 1496px; padding: 64px 24px; }
.sp15__bg { position: absolute; inset: 0; pointer-events: none; }
.sp15__white { position: absolute; inset: 0; background: var(--white); }
.sp15__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}
.sp15__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; color: var(--ink); text-align: center; white-space: nowrap;
}
.sp15__head p { line-height: normal; }
.sp15__head .x40 { font-size: 40px; }
.sp15__head .x48 { font-size: 48px; color: var(--blue); }
.sp15__lead {
  position: relative; flex: none; width: 100%;
  font-family: var(--sans); font-weight: 400; font-size: 18px; color: var(--ink); text-align: center;
}
.sp15__lead p { line-height: normal; }

.sp15__box {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 40px;
  width: 100%; padding: 24px; background: rgba(255, 255, 255, .5); border: 2px solid var(--blue);
}
.sp15__daruma {
  position: absolute; right: -136.09px; bottom: -201.57px; width: 392.093px; height: 388.603px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sp15__daruma img { width: 345.533px; height: 341.386px; object-fit: cover; opacity: .05; transform: rotate(-8.48deg); }

.sp15__banner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 21.068px; }
.sp15__banner-in {
  display: flex; align-items: center; justify-content: center; gap: 7.524px;
  padding: 7.524px 30.098px; background: var(--blue); transform: skewX(-4deg);
}
.sp15__banner-in p { font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: normal; color: var(--white); white-space: nowrap; }
.sp15__banner-in .hl {
  display: flex; align-items: center; justify-content: center; background: var(--white);
  font-family: var(--sans); font-weight: 500; font-size: 30px; line-height: normal; color: var(--blue); white-space: nowrap;
}
.sp15__banner-sub {
  width: 100%; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: normal;
  color: var(--ink); text-align: center; transform: skewX(-4deg);
}

.sp15__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; width: 100%; }

.sp15__chart { position: relative; width: 434.452px; height: 347.217px; }
.sp15__col { position: absolute; }
.sp15__col--old { left: 0; top: 17.23px; width: 163.943px; height: 329.987px; display: flex; flex-direction: column; align-items: center; gap: 18.5px; }
.sp15__col-ttl { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1; color: var(--ink); text-align: center; }
.sp15__bars { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sp15__bar { display: flex; width: 163.943px; align-items: center; justify-content: center; }
.sp15__bar p { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1; color: var(--white); text-align: center; white-space: nowrap; }

.sp15__logo-row { position: absolute; left: 193.01px; top: 0; width: 141.877px; height: 34.219px; display: flex; align-items: center; justify-content: center; gap: 6.111px; }
.sp15__slash { display: flex; align-items: center; justify-content: center; flex: none; }
.sp15__slash--l { width: 19.486px; height: 33.644px; }
.sp15__slash--l img { width: 38.88px; height: 1.22px; transform: rotate(59.92deg); flex: none; }
.sp15__slash--r { width: 19.56px; height: 33.77px; }
.sp15__slash--r img { width: 39.026px; height: 1.22px; transform: rotate(120.08deg); flex: none; }
.sp15__logo { width: 129.129px; height: 34.219px; object-fit: cover; }

.sp15__cut { position: absolute; left: 195.91px; top: 51.04px; width: 136.067px; height: 99.906px; }
.sp15__cut img { position: absolute; inset: 0; width: 136.067px; height: 99.906px; }
.sp15__cut p {
  position: absolute; left: 32.87px; top: 29.93px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1;
  color: var(--blue-deep); text-align: center; white-space: nowrap;
}

.sp15__col--new { left: 181.97px; top: 160.82px; width: 163.943px; height: 186.391px; display: flex; flex-direction: column; align-items: flex-start; }
.sp15__col--new .t1 { width: 100%; height: 8.841px; background: #9ccdff; }
.sp15__col--new .t2 { width: 100%; height: 8.841px; background: var(--blue); }
.sp15__bar--main { height: 168.709px; background: var(--blue-deep); }
.sp15__bar--main p { font-size: 18px; }

.sp15__anno { position: absolute; left: 345.99px; top: 159.41px; width: 98.012px; height: 130px; }
.sp15__anno-l1 { position: absolute; left: 0; top: 5.88px; display: flex; width: 20.05px; height: 0; align-items: center; justify-content: center; }
.sp15__anno-l1 img { width: 20.05px; height: 4.7px; transform: rotate(180deg); flex: none; }
.sp15__anno-l2 { position: absolute; left: 0; top: 14.67px; display: flex; width: 20.078px; height: 51.908px; align-items: center; justify-content: center; }
.sp15__anno-l2 img { width: 55.656px; height: 4.7px; transform: rotate(-111.15deg); flex: none; }
.sp15__anno-t1, .sp15__anno-t2 {
  position: absolute; display: flex; flex-direction: column; align-items: center; width: 81.292px;
  color: var(--ink); text-align: center; line-height: 1;
}
.sp15__anno-t1 { left: 16.72px; top: 0; gap: 2.552px; white-space: nowrap; }
.sp15__anno-t2 { left: 7.17px; top: 69.03px; gap: 3.062px; }
.sp15__anno .n { font-family: var(--sans); font-weight: 500; font-size: 12px; }
.sp15__anno .s { font-family: var(--sans); font-weight: 400; font-size: 8px; white-space: nowrap; }

.sp15__reasons { display: flex; flex-direction: column; align-items: flex-start; gap: 30.621px; width: 100%; }
.sp15r { display: flex; flex-direction: column; align-items: flex-start; gap: 7.017px; width: 100%; }
.sp15r__hd {
  display: flex; width: 100%; align-items: center; padding: 6.379px 12.759px; background: var(--white);
  border-left: 3.828px solid var(--blue); border-bottom: .957px solid var(--blue);
  font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp15r__hd b { font-weight: 700; color: var(--blue); }
.sp15r__tx { width: 100%; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.6; color: var(--ink); }
.sp15r__tx em { font-style: normal; color: var(--red); }


/* ---------- sp16-doubts.css ---------- */
/* ============ SP 16 / でも、本当に大丈夫?  node:909-3940 ============ */
.sp16 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 560px; padding: 64px 24px; }
.sp16__bg { position: absolute; inset: 0; pointer-events: none; }
.sp16__grad {
  position: absolute; inset: 0;
  background: linear-gradient(99.8543deg, rgb(173, 190, 192) .263%, rgb(184, 188, 209) 50%, rgb(132, 166, 182) 99.737%);
}
.sp16__tex1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.sp16__tex2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .08; }

.sp16__photo {
  position: absolute; left: 195.81px; top: 350.71px; bottom: .52px; width: 402.512px;
  pointer-events: none; transform: scaleX(-1);
  -webkit-mask-image: url(../img/sp16-photo-mask.svg); mask-image: url(../img/sp16-photo-mask.svg);
  -webkit-mask-size: 402.512px 207.289px; mask-size: 402.512px 207.289px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sp16__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.sp16__head {
  position: relative; flex: none;
  font-family: "ZeroGothic", var(--sans); font-weight: 700; font-size: 40px; line-height: 1.4;
  color: #a40000; text-align: center; white-space: nowrap;
}
.sp16__pills {
  position: relative; flex: none;
  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: center;
  gap: 16px; width: 100%;
}
.sp16__pills li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 24px; background: var(--white); box-shadow: inset 0 0 0 6px #5a7f82;
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1;
  color: #5a7f82; white-space: nowrap;
}
.sp16__tri { position: relative; display: block; width: 120.374px; height: 31.099px; transform: scaleY(-1); flex: none; }
.sp16__tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }


/* ---------- sp17-assurance.css ---------- */
/* ============ SP 17 / 3つの安心  node:909-3959 ============ */
.sp17 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1364px; padding: 64px 24px; }
.sp17__bg { position: absolute; inset: 0; pointer-events: none; }
.sp17__white { position: absolute; inset: 0; background: var(--white); }
.sp17__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp17__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-52.1266deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.sp17__head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.sp17__logo { width: 160px; height: 42.4px; object-fit: cover; }
.sp17__ttl { font-family: var(--sans); font-weight: 700; line-height: 1; color: var(--white); text-align: center; white-space: nowrap; letter-spacing: 2.52px; }
.sp17__ttl .x60 { font-size: 60px; letter-spacing: 3.6px; }
.sp17__ttl .x40 { font-size: 40.5px; letter-spacing: 2.43px; }
.sp17__ttl .x48 { font-size: 48px; letter-spacing: 2.88px; }

.sp17__list { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; flex: none; }
.sp17c {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  width: 100%; padding: 32px; background: var(--white); border: 1px solid var(--blue-border);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
}
.sp17c__no {
  position: absolute; top: -12px; transform: translateX(100%) skewX(-10deg) scaleY(.98);
  display: flex; height: 63.028px; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1;
  color: var(--blue); white-space: nowrap;
}
.sp17c__hd { display: flex; flex-direction: column; align-items: flex-start; width: 100%; font-family: var(--serif); font-weight: 900; color: var(--blue); }
.sp17c__hd .s { width: 100%; font-size: 20px; letter-spacing: 1.2px; line-height: normal; }
.sp17c__hd .l { width: 100%; font-size: 32px; letter-spacing: 1.92px; line-height: normal; }
.sp17c__tx { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 18px; color: var(--ink); }
.sp17c__tx p { line-height: 1.6; }


/* ---------- sp18-results.css ---------- */
/* ============ SP 18 / 講師の指導合格実績  node:909-3982 ============ */
.sp18 { display: flex; flex-direction: column; align-items: center; height: 786px; padding: 64px 24px; }
.sp18__bg { position: absolute; inset: 0; pointer-events: none; }
.sp18__white { position: absolute; inset: 0; background: var(--white); }
.sp18__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.sp18__hue { position: absolute; inset: 0; background: var(--blue); mix-blend-mode: color; }

.sp18__panel {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  width: 100%; padding: 40px 24px;
  border: 4px solid var(--blue);
  filter: drop-shadow(10px 10px 0 var(--blue));
}
.sp18__panel-bg { position: absolute; inset: 0; pointer-events: none; }
.sp18__panel-bg .w { position: absolute; inset: 0; background: var(--white); }
.sp18__panel-bg .hue { position: absolute; inset: 0; background: var(--blue); mix-blend-mode: hue; }
.sp18__panel-bg .veil { position: absolute; inset: 0; background: rgba(255, 255, 255, .8); }
.sp18__panel-bg .noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.sp18__underline {
  position: absolute; left: calc(50% - 3.17px); top: 86.58px; transform: translateX(-50%);
  width: 387.596px; height: 12.7px;
}

.sp18__head { position: relative; display: flex; width: 458.726px; height: 65.876px; align-items: center; justify-content: center; flex: none; }
.sp18__head-in { display: flex; align-items: center; justify-content: center; gap: 10.159px; transform: skewX(-4deg); }
.sp18__brace { flex: none; }
.sp18__brace--l { width: 25.92px; height: 64.018px; transform: rotate(-5deg); }
.sp18__brace--r { width: 25.919px; height: 64.022px; transform: rotate(-175deg) scaleY(-1); }
.sp18__head-txt {
  padding-top: 1.27px;
  font-family: var(--sans); font-weight: 700; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #3683ff 0%, #3eb8ff 50%, #315aff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sp18__head-txt b { font-weight: 700; font-size: 41.907px; }
.sp18__head-txt i { font-style: normal; font-size: 35.558px; }

.sp18__list { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 16px; }
.sp18__list li { display: flex; align-items: center; gap: 8px; }
.sp18__list img { width: 24.083px; height: 22.716px; flex: none; }
.sp18__list img.wide { width: 24.823px; height: 23.418px; }
.sp18__list p { font-family: var(--sans); font-weight: 700; font-size: 22.5px; line-height: 1.6; color: var(--ink); white-space: nowrap; }


/* ---------- sp19-flow.css ---------- */
/* ============ SP 19 / 受講までの流れ  node:909-4087 ============ */
.sp19 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 964px; padding: 64px 24px; }
.sp19__bg { position: absolute; inset: 0; pointer-events: none; }
.sp19__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp19__hue { position: absolute; inset: 0; background: #9cf; mix-blend-mode: color; }

.sp19__head {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  color: var(--ink); text-align: center; white-space: nowrap;
}
.sp19__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; width: 100%; flex: none; }
.sp19__steps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }

.sp19f {
  display: flex; width: 100%; align-items: center; gap: 24px; padding: 25px 17px;
  background: var(--white); border: 1px solid var(--blue-border);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .1));
}
.sp19f__no {
  display: flex; align-items: center; justify-content: center; padding: 6px 12px;
  background: var(--blue-deep); white-space: nowrap; flex: none;
  transform: skewX(-10deg) scaleY(.98);
}
.sp19f__no b { font-family: var(--serif); font-weight: 700; font-size: 15.6px; line-height: normal; color: var(--white); }
.sp19f__no b.n { font-size: 18px; }
.sp19f__txt { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: normal; color: var(--ink); text-align: center; white-space: nowrap; }

.sp19__conn { display: block; width: 1px; }
.sp19__conn img { width: 1px; height: 100%; }

.sp19__down { width: 48px; height: 27.9px; }
.sp19__start { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.sp19__start img { width: 48.583px; height: 48px; object-fit: cover; }
.sp19__start p { font-family: var(--sans); font-weight: 700; font-size: 40px; letter-spacing: 8px; line-height: normal; color: var(--blue); white-space: nowrap; }


/* ---------- sp20-faq.css ---------- */
/* ============ SP 20 / よくある質問  node:909-4124 ============ */
.sp20 { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 0; padding: 64px 24px; }
.sp20__bg { position: absolute; inset: 0; pointer-events: none; }
.sp20__flat { position: absolute; inset: 0; background: #b1d7ff; }
.sp20__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-69.6492deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}
.sp20__tex {
  position: absolute; inset: 0; opacity: .16;
  background-image: url(../img/s13-bg.png); background-size: 1920.5px 1080.5px; background-position: top left;
}

.sp20__panel {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  width: 100%; padding: 40px 16px; background: rgba(255, 255, 255, .96);
}
.sp20__head { width: 100%; font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal; color: var(--ink); text-align: center; }
.sp20__list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }

.sp20q { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sp20q__hd {
  display: flex; width: 100%; align-items: center; gap: 24px; padding: 24px;
  background: var(--blue-deep); border: 1px solid var(--ink); text-align: left;
}
.sp20q__label { display: flex; flex: 1 0 0; min-width: 1px; align-items: center; gap: 24px; font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: normal; color: var(--white); }
.sp20q__label .q { flex: none; white-space: nowrap; }
.sp20q__label .t { flex: 1 0 0; min-width: 1px; }
.sp20q__arw { display: flex; align-items: center; justify-content: center; flex: none; }
/* 閉：∨（下向き＝開く） / 開：∧（上向き＝閉じる） */
.sp20q__arw img { width: 13.5px; height: 4.725px; transform: rotate(0deg); transition: transform .3s; }
.sp20q:not(.is-open) .sp20q__arw img { transform: rotate(180deg); }

/* 開閉は grid-template-rows 0fr → 1fr で高さをなめらかに変化させる */
.sp20q__bd {
  display: grid; grid-template-rows: 0fr; width: 100%;
  background: var(--white); border: 0 solid var(--ink); opacity: 0;
  transition: grid-template-rows .38s var(--ease, ease), opacity .3s ease, border-width .38s var(--ease, ease);
}
.sp20q.is-open .sp20q__bd { grid-template-rows: 1fr; opacity: 1; border-width: 0 1px 1px; }
.sp20q__bd > * { min-height: 0; overflow: hidden; }
.sp20q__tx {
  padding: 0 24px; transition: padding .38s var(--ease, ease);
  font-family: var(--sans); font-weight: 400; font-size: 18px; color: var(--ink);
}
.sp20q.is-open .sp20q__tx { padding: 24px; }
.sp20q__tx p { line-height: 1.6; white-space: pre-wrap; }
.sp20q__tx p.b { font-weight: 700; }
.sp20q__tx em { font-style: normal; color: var(--red); }
.sp20q__tx em.b { font-weight: 700; }
.sp20q__tx strong { font-weight: 700; }
.sp20q__tx a { color: var(--blue); text-decoration: underline; text-underline-position: from-font; }


/* ---------- sp21-youtube.css ---------- */
/* ============ SP 21 / 公式Youtubeチャンネル  node:909-4153 ============ */
.sp21 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 1012px; padding: 64px 24px; }
.sp21__bg { position: absolute; inset: 0; pointer-events: none; }
.sp21__white { position: absolute; inset: 0; background: var(--white); }
.sp21__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url(../img/pg-noise.png); background-size: 12px 12px; background-position: top left;
}

.sp21__lead { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; flex: none; }
.sp21__tag {
  display: flex; align-items: center; justify-content: center; padding: 8px 24px; background: var(--blue-deep);
  font-family: var(--sans); font-weight: 400; font-size: 24px; letter-spacing: -.48px; line-height: normal;
  color: var(--white); white-space: nowrap;
}
.sp21__head {
  display: flex; flex-direction: column; width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: normal;
  color: var(--ink); text-align: center;
}
.sp21__sub { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--ink); text-align: center; }
.sp21__sub p { line-height: normal; }

.sp21__card {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 307.5px;
  background: linear-gradient(99.8846deg, rgb(1, 11, 109) 3.5415%, rgb(13, 103, 252) 40.708%, rgb(13, 103, 252) 59.292%, rgb(7, 47, 225) 96.459%);
}
.sp21__card-in { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 41px 16.4px; }
.sp21__card-in img { width: 100%; aspect-ratio: 800 / 212; object-fit: cover; }

.sp21__cta {
  position: relative; flex: none;
  display: flex; width: 492px; align-items: center; justify-content: center; padding: 25px 41px;
  background: var(--blue); border: 1px solid var(--blue-border);
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: normal;
  color: var(--white); text-align: center; white-space: nowrap;
}


/* ---------- sp22-benefits.css ---------- */
/* ============ SP 22 / 特典を受け取る  node:909-4165 ============ */
.sp22 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 64px; height: 774px; padding: 64px 24px; }
.sp22__bg { position: absolute; inset: 0; pointer-events: none; }
.sp22__flat { position: absolute; inset: 0; background: #f5faff; }
.sp22__noise {
  position: absolute; inset: 0; mix-blend-mode: color-burn;
  background-image: url(../img/s21-noise.png); background-size: 12px 12px; background-position: top left;
}

.sp22__card { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 492px; border: .895px solid var(--ink); }
.sp22__card-bar { display: flex; width: 100%; align-items: center; justify-content: center; padding: 9.84px 0; background: #22bc21; }
.sp22__card-bar p {
  font-family: var(--sans); font-weight: 900; font-size: 14.76px; line-height: 1.2;
  color: var(--white); text-align: center; white-space: nowrap;
}
.sp22__card-img { position: relative; width: 492px; height: 221.453px; overflow: hidden; }
.sp22__card-img img { position: absolute; left: 0; top: 0; width: 100%; height: 125.22%; }

.sp22__head {
  position: relative; flex: none; display: flex; flex-direction: column; width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1.4;
  color: var(--ink); text-align: center;
}
.sp22__cta {
  position: relative; flex: none;
  display: flex; width: 100%; align-items: center; justify-content: center;
  padding: 34px 82px; border: 2px solid var(--blue-deep); border-radius: 8px;
  background: linear-gradient(180deg, rgb(69, 147, 255) 0%, rgb(0, 59, 152) 100%);
  font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: 2.88px;
  color: var(--white); text-align: center; white-space: nowrap;
}


/* ---------- sp23-consult.css ---------- */
/* ============ SP 23 / 相談でわかる3つのこと  node:909-4173 ============ */
.sp23 { display: flex; flex-direction: column; align-items: center; gap: 64px; height: 932px; padding: 64px 24px; }
.sp23__bg { position: absolute; inset: 0; pointer-events: none; }
.sp23__white { position: absolute; inset: 0; background: var(--white); }
.sp23__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sp23__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(-41.3012deg, rgb(0, 59, 152) 30.574%, rgb(23, 93, 203) 60.046%);
}

.sp23__head {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center; white-space: nowrap;
}
.sp23__head-s { font-size: 18px; line-height: normal; }
.sp23__head-l { line-height: 1; }
.sp23__head-l .x40 { font-size: 40px; }
.sp23__head-l .x56 { font-size: 56px; letter-spacing: -8.96px; }

.sp23__cards { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; flex: none; }
.sp23c { display: flex; width: 486.612px; height: 122.116px; align-items: center; justify-content: center; }
.sp23c__in {
  position: relative; width: 465.08px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0;
  background: var(--white); border: .945px solid var(--blue-border);
  filter: drop-shadow(3.781px 3.781px 3.781px rgba(0, 0, 0, .1));
  transform: skewX(-10deg) scaleY(.98);
}
.sp23c__t {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1.6;
  color: var(--ink-strong); text-align: center; white-space: nowrap;
}
.sp23c__no {
  position: absolute; left: -11.17px; top: -14.33px;
  display: flex; height: 47.271px; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 900; font-size: 48px; line-height: 1;
  color: var(--blue); white-space: nowrap; transform: skewX(-10deg) scaleY(.98);
}

.sp23__lead {
  position: relative; flex: none;
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: normal;
  color: var(--white); text-align: center; white-space: nowrap;
}

/* SP 用オレンジ CTA（PC の 0.5704 倍） */
.ctabtn--sp23 { gap: 12.324px; padding: 27.729px 21.567px 23.621px; border: 1.027px solid #ffb700; border-radius: 4.564px; }
.ctabtn--sp23 .ctabtn__line { width: 32.864px; height: 32.864px; }
.ctabtn--sp23 .ctabtn__txt { text-shadow: .739px 1.479px 0 rgba(0, 0, 0, .25); }
.ctabtn--sp23 .ctabtn__txt i { font-size: 19.718px; }
.ctabtn--sp23 .ctabtn__txt b { font-size: 29.578px; }
.ctabtn--sp23 .ctabtn__txt u { font-size: 24.648px; }
.ctabtn--sp23 .ctabtn__badge {
  top: -11.25px; left: calc(50% - .26px); gap: 2.054px; padding: 3.423px 27.387px;
  border: .859px solid #ffb601; border-radius: 214.819px;
}
.ctabtn--sp23 .ctabtn__badge-txt { font-size: 11.297px; }
.ctabtn--sp23 .ctabtn__badge-txt b { font-size: 14.686px; }
.ctabtn--sp23 .ctabtn__slash { width: 7.189px; height: 12.452px; }
.ctabtn--sp23 .ctabtn__slash img { width: 14.378px; height: 1.027px; }
.ctabtn--sp23 .ctabtn__dot { width: 1.719px; height: 1.719px; top: 3.9px; }
.ctabtn--sp23 .ctabtn__dot--1 { left: 122.5px; }
.ctabtn--sp23 .ctabtn__dot--2 { left: 132.47px; }
.ctabtn--sp23 .arw--cta { width: 5.751px; height: 16.432px; }
.ctabtn--sp23 .arw--cta img { width: 17.02px; height: 6.8px; }


/* ---------- z-motion.css ---------- */

/* =========================================================
   インタラクション（ホバー / スクロール・ポップアップ）
   ・移動系は transform ではなく個別プロパティ translate / scale を使う。
     既存の transform: skewX() / rotate() を打ち消さないため。
   ・prefers-reduced-motion に対応。
   ========================================================= */

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;
}

/* ---------------------------------------------------------
   1. スクロール・ポップアップ（JSで .is-in を付与）
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.reveal.is-in { opacity: 1; translate: 0 0; }

/* カード・ピル類はわずかに縮小した状態から「ポップ」させる */
.reveal--pop { scale: .96; transition: opacity .5s var(--ease), translate .5s var(--ease), scale .5s var(--ease); }
.reveal--pop.is-in { scale: 1; }

/* ---------------------------------------------------------
   2. 共通ホバー
   --------------------------------------------------------- */
a, button { transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* ロゴ */
.hdr__logo, .ftr__logo, .sp-hdr__logo, .sp-ftr__logo { transition: opacity var(--dur) var(--ease); }
.hdr__logo:hover, .ftr__logo:hover, .sp-hdr__logo:hover, .sp-ftr__logo:hover { opacity: .7; }

/* ---- ヘッダーナビ：下線がスライドイン ---- */
.hdr__nav > a:not(.hdr__cta) { position: relative; }
.hdr__nav > a:not(.hdr__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: var(--blue); scale: 0 1; transform-origin: left;
  transition: scale var(--dur) var(--ease);
}
.hdr__nav > a:not(.hdr__cta):hover { color: var(--blue); }
.hdr__nav > a:not(.hdr__cta):hover::after { scale: 1 1; }

/* ---- ボタン共通：浮き上がり + 影 + わずかに明るく ---- */
.hdr__cta,
.ctabtn,
.s20__cta, .s21__cta, .sp12__cta, .sp21__cta, .sp22__cta,
.sg__back, .sp-sg__back,
.sgcta__btn, .sp-sgcta__btn,
.sp-menu__cta {
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.hdr__cta:hover,
.ctabtn:hover,
.s20__cta:hover, .s21__cta:hover, .sp12__cta:hover, .sp21__cta:hover, .sp22__cta:hover,
.sg__back:hover, .sp-sg__back:hover,
.sgcta__btn:hover, .sp-sgcta__btn:hover,
.sp-menu__cta:hover {
  translate: 0 -3px;
  filter: brightness(1.07);
  box-shadow: 0 10px 22px rgba(0, 32, 92, .22);
}
.hdr__cta:active,
.ctabtn:active,
.s20__cta:active, .s21__cta:active, .sp12__cta:active, .sp21__cta:active, .sp22__cta:active,
.sg__back:active, .sp-sg__back:active,
.sgcta__btn:active, .sp-sgcta__btn:active,
.sp-menu__cta:active { translate: 0 0; box-shadow: 0 3px 8px rgba(0, 32, 92, .18); }

/* CTA の矢印が少し前へ出る */
.hdr__cta .arw img, .ctabtn .arw img, .sp-menu__cta .arw img { transition: translate var(--dur) var(--ease); }
.hdr__cta:hover .arw img, .ctabtn:hover .arw img, .sp-menu__cta:hover .arw img { translate: 0 3px; }

/* LINE アイコンが跳ねる */
.ctabtn__line { transition: scale var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.ctabtn:hover .ctabtn__line { scale: 1.08; rotate: -4deg; }

/* ---- 白抜きボタン ---- */
.sgcard__btn, .sp-sgcard__btn { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sgcard__btn:hover, .sp-sgcard__btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---- フッターナビ / SNS ---- */
.ftr__nav a:hover, .sp-ftr__nav a:hover, .arc__back:hover { color: var(--white); }
.ftr__sns a, .sp-ftr__sns a { transition: scale var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.ftr__sns a:hover, .sp-ftr__sns a:hover { scale: 1.12; opacity: .85; }

/* ---------------------------------------------------------
   3. 記事カード
   --------------------------------------------------------- */
.card, .sp-card { transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover, .sp-card:hover { translate: 0 -6px; box-shadow: 0 14px 30px rgba(0, 32, 92, .16); }
.card__thumb, .sp-card__thumb { overflow: hidden; }
.card__thumb img, .sp-card__thumb img { transition: scale .5s var(--ease); }
.card:hover .card__thumb img, .sp-card:hover .sp-card__thumb img { scale: 1.06; }
.card__ttl a, .sp-card__ttl a { transition: color var(--dur) var(--ease); }
.card:hover .card__ttl a, .sp-card:hover .sp-card__ttl a { color: var(--blue); }
.card__cats li, .sp-card__cats li { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.card__cats li:hover, .sp-card__cats li:hover { background: var(--blue); color: var(--white); }

/* ---- カテゴリタブ ---- */
.arc__tab, .sp-arc__tab { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.arc__tab:not(.is-current):hover, .sp-arc__tab:not(.is-current):hover {
  background: var(--blue); border-color: var(--blue); color: var(--white); translate: 0 -2px;
}

/* ---- ページャー ---- */
.pager__no, .pager__arw, .sp-pager__no, .sp-pager__arw { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pager__no:not(.is-current):hover, .pager__arw:hover,
.sp-pager__no:not(.is-current):hover, .sp-pager__arw:hover { background: var(--blue); color: var(--white); }

/* ---- サイドバー / 最新記事 ---- */
.arc__side-item, .sp-arc__side-item, .sgitem, .sp-sgitem { transition: background-color var(--dur) var(--ease); }
.arc__side-item:hover, .sp-arc__side-item:hover, .sgitem:hover, .sp-sgitem:hover { background: #eef5ff; }
.arc__side-item .n, .sp-arc__side-item .n, .sgitem__ttl, .sp-sgitem__ttl { transition: color var(--dur) var(--ease); }
.arc__side-item:hover .n, .sp-arc__side-item:hover .n,
.sgitem:hover .sgitem__ttl, .sp-sgitem:hover .sp-sgitem__ttl { color: var(--blue); }

/* ---- パンくず ---- */
.sg__crumbs a:hover, .sp-sg__crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------
   4. FAQ アコーディオン
   --------------------------------------------------------- */
.s19q__hd, .sp20q__hd { cursor: pointer; transition: filter var(--dur) var(--ease); }
.s19q__hd:hover, .sp20q__hd:hover { filter: brightness(1.14); }
.s19q__arw img, .sp20q__arw img { transition: transform .38s var(--ease); }
/* 開いている項目の見出しを少し強調 */
.s19q.is-open .s19q__hd, .sp20q.is-open .sp20q__hd { filter: brightness(1.08); }
/* キーボード操作時のフォーカス表示 */
.s19q__hd:focus-visible, .sp20q__hd:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------------------------------------------------------
   5. ハンバーガーメニュー
   --------------------------------------------------------- */
.sp-hdr__hbg { transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease); }
.sp-hdr__hbg:hover { opacity: .65; }
.sp-hdr__hbg:active { scale: .92; }
.sp-menu__item a { transition: translate var(--dur) var(--ease); }
.sp-menu__item a:hover { translate: 6px 0; }
.sp-menu__item a:hover span { color: var(--blue); }
.sp-menu__item span { transition: color var(--dur) var(--ease); }

/* ハンバーガーメニュー内のリンクは、パネル表示時に順番に現れる */
.sp-menu.is-open .sp-menu__item { animation: hbgIn .38s var(--ease) both; }
.sp-menu.is-open .sp-menu__item:nth-child(2)  { animation-delay: .06s; }
.sp-menu.is-open .sp-menu__item:nth-child(4)  { animation-delay: .10s; }
.sp-menu.is-open .sp-menu__item:nth-child(6)  { animation-delay: .14s; }
.sp-menu.is-open .sp-menu__item:nth-child(8)  { animation-delay: .18s; }
.sp-menu.is-open .sp-menu__item:nth-child(10) { animation-delay: .22s; }
.sp-menu.is-open .sp-menu__item:nth-child(12) { animation-delay: .26s; }
@keyframes hbgIn { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------
   6. モーション設定の尊重
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .sp-menu.is-open .sp-menu__item { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* ---------- z-wp-content.css ---------- */
/* ============================================================
   WordPress 記事本文（the_content）用スタイル
   Figma の .sg__h2 / .sg__p の見た目をそのまま素の h2/p 等へ適用する。
   静的HTMLでは使われない（WordPress 化後のみ有効）。
   ============================================================ */

/* ---------------- PC ---------------- */
.sg__body--wp { display: block; }
.sg__body--wp > * + * { margin-top: 24px; }
.sg__body--wp > h2 { margin-top: 100px; }
.sg__body--wp > h2:first-child { margin-top: 0; }

.sg__body--wp h2 {
  width: 100%; padding-left: 16px; border-left: 4px solid var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: normal; color: var(--ink-strong);
}
.sg__body--wp h3 {
  width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1.5; color: var(--ink-strong);
}
.sg__body--wp h4 {
  width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.5; color: var(--ink-strong);
}
.sg__body--wp p,
.sg__body--wp li,
.sg__body--wp td,
.sg__body--wp th {
  font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.9; color: var(--ink-strong);
}
.sg__body--wp p { width: 100%; }
.sg__body--wp a { color: var(--blue); text-decoration: underline; }
.sg__body--wp strong { font-weight: 700; }
.sg__body--wp ul,
.sg__body--wp ol { width: 100%; padding-left: 1.6em; }
.sg__body--wp ul { list-style: disc; }
.sg__body--wp ol { list-style: decimal; }
.sg__body--wp li { display: list-item; }
.sg__body--wp img { max-width: 100%; height: auto; }
.sg__body--wp figure { width: 100%; }
.sg__body--wp figcaption {
  margin-top: 8px;
  font-family: var(--sans); font-weight: 400; font-size: 16px; color: #777; text-align: center;
}
.sg__body--wp blockquote {
  padding: 24px 32px; background: #f7f7f7; border-left: 4px solid #aaa;
}
.sg__body--wp table { width: 100%; border-collapse: collapse; }
.sg__body--wp th,
.sg__body--wp td { padding: 12px 16px; border: 1px solid #ddd; }
.sg__body--wp th { background: #f7f7f7; font-weight: 700; }
.sg__body--wp pre {
  padding: 20px; background: #f2f4f7; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; line-height: 1.7;
}
.sg__body--wp hr { border: 0; border-top: 1px solid #ddd; }
/* アンカーがヘッダー下に隠れないように */
.sg__body--wp :is(h2, h3, h4)[id] { scroll-margin-top: 120px; }
.toc__list a, .toc__h2 a { color: inherit; }

/* ---------------- SP ---------------- */
.sp-sg__body--wp { display: block; }
.sp-sg__body--wp > * + * { margin-top: 16px; }
.sp-sg__body--wp > h2 { margin-top: 60px; }
.sp-sg__body--wp > h2:first-child { margin-top: 0; }

.sp-sg__body--wp h2 {
  width: 100%; padding-left: 10px; border-left: 3px solid var(--blue);
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: normal; color: var(--ink-strong);
}
.sp-sg__body--wp h3 {
  width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--ink-strong);
}
.sp-sg__body--wp h4 {
  width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--ink-strong);
}
.sp-sg__body--wp p,
.sp-sg__body--wp li,
.sp-sg__body--wp td,
.sp-sg__body--wp th {
  font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.9; color: var(--ink-strong);
}
.sp-sg__body--wp p { width: 100%; }
.sp-sg__body--wp a { color: var(--blue); text-decoration: underline; }
.sp-sg__body--wp strong { font-weight: 700; }
.sp-sg__body--wp ul,
.sp-sg__body--wp ol { width: 100%; padding-left: 1.6em; }
.sp-sg__body--wp ul { list-style: disc; }
.sp-sg__body--wp ol { list-style: decimal; }
.sp-sg__body--wp li { display: list-item; }
.sp-sg__body--wp img { max-width: 100%; height: auto; }
.sp-sg__body--wp figure { width: 100%; }
.sp-sg__body--wp figcaption {
  margin-top: 6px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; color: #777; text-align: center;
}
.sp-sg__body--wp blockquote { padding: 16px 20px; background: #f7f7f7; border-left: 3px solid #aaa; }
.sp-sg__body--wp table { width: 100%; border-collapse: collapse; }
.sp-sg__body--wp th,
.sp-sg__body--wp td { padding: 8px 10px; border: 1px solid #ddd; }
.sp-sg__body--wp th { background: #f7f7f7; font-weight: 700; }
.sp-sg__body--wp pre {
  padding: 14px; background: #f2f4f7; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7;
}
.sp-sg__body--wp hr { border: 0; border-top: 1px solid #ddd; }
.sp-sg__body--wp :is(h2, h3, h4)[id] { scroll-margin-top: 90px; }
.sp-toc__list a, .sp-toc__h2 a { color: inherit; }

/* 記事が無いときのカード */
.card--empty .card__body,
.sp-card--empty .sp-card__body { padding: 24px; }