@charset "UTF-8";
/* =========================================================================
   04_jyuku-chigai — 全国家庭教師協会「家庭教師と塾はどっちがいい？」
   デザイン幅 1080px / 座標は cqw（px ÷ 1080 × 100）
   構造規約（.claude/rules/web-coding.md §4）:
     section = 背景100%全幅 / div.inner_wrap = コンテンツ max-width:1080px
     ページ全体ラッパーに max-width は付けない
   ========================================================================= */

html,body{ margin:0; padding:0; }
body{ background:#fdfdfc; overflow-x:hidden; }
.frame{ width:100%; }

div.inner_wrap{ position:relative; max-width:1080px; margin:0 auto;
                container-type:inline-size; line-height:normal; }
.sec{ position:relative; width:100%; overflow:hidden; font-family:var(--font-psd); }
.sec .inner_wrap>*{ position:absolute; margin:0; }
.sec .inner_wrap p{ margin:0; }
.sec .flow-copy{ position:absolute; left:0; top:0; width:0; height:0; margin:0; }
.sec .flow-copy__line{ position:absolute; display:block; margin:0; }
.sec :is(.cta-link,.course-link,.voice-link):focus-visible{
  outline:0.2778cqw solid #0647c8;
  outline-offset:0.3704cqw;
}
/* 見出しタグ（h1〜h3）は位置・書式に影響しない入れ物。各行は中の span に従来どおり絶対配置する（2026-09-10）。
   reset.css の h3{font-weight:bold!important} と見出しの既定の太字を打ち消す（太さは各行のクラスで指定）。 */
.sec .hg{ position:absolute; left:0; top:0; width:100%; height:0; margin:0; padding:0;
          font-size:inherit; font-weight:normal !important; line-height:normal; }
.sec .hg>*{ position:absolute; display:block; margin:0; }
.sec img{ max-width:none; display:block; }   /* common.css の img{max-width:100%} を無効化 */

/* ===== デザイントークン（spec/tokens.md ＋ comp.png 実測） ===== */
:root{
  --c-white:#ffffff; --c-black:#000000;
  --c-blue:#0647c8; --c-navy:#04205f; --c-blue-main:#224eb1; --c-offwhite:#fcfcfd;
  --c-blue-alt:#0a45b4; --c-orange:#ff7e00; --c-orange-2:#ff8a00; --c-ink:#202020;
  --c-navy-2:#002e97; --c-blue-3:#003fb2; --c-amber:#ffa200; --c-green:#00a818;
  /* 和文は現行サイト（common.css）と同じ游ゴシックを継承。
     PSDの YuGothic-Bold 実フェイスを使うため Medium 始まりではなく "Yu Gothic" 始まり */
  --font-psd:"Yu Gothic", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* =========================================================================
   sec01〜sec06 通常フロー化（sec05の比較表は従来レイアウトを維持）
   ========================================================================= */
:is(.sec01,.sec02,.sec03,.sec04,.sec06) .inner_wrap {
  aspect-ratio: auto;
  height: auto;
  box-sizing: border-box;
}

:is(.sec01,.sec02,.sec03,.sec04,.sec06) .inner_wrap > * {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0;
}

:is(.sec01,.sec02,.sec03,.sec04,.sec06) img {
  max-width: 100%;
  height: auto;
}

/* sec01：FV */
.sec01 {
  background: #fdfdfc;
}

.sec01 .s01__grid {
  position: absolute;
  z-index: 0;
  inset: 43.1736% 0 0;
  background-color: #fdfdfc;
  background-image:
    repeating-linear-gradient(
      to right,
      #d9ecf6 0 1px,
      transparent 1px calc(min(100vw, 1080px) / 41.6975)
    ),
    repeating-linear-gradient(
      to bottom,
      #d9ecf6 0 1px,
      transparent 1px calc(min(100vw, 1080px) / 41.5624)
    );
  background-size:
    calc(min(100vw, 1080px) / 41.6975) 100%,
    100% calc(min(100vw, 1080px) / 41.5624);
  background-position:
    calc(min(100vw, 1080px) * 0.0073583) 0,
    0 0;
  pointer-events: none;
}

.sec01 .inner_wrap {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3.7037cqw;
  padding-bottom: 6.6667cqw;
}
.sec01 .fv-hero { display: grid; overflow: hidden; min-height: 66.3cqw; }
.sec01 .fv-hero > img { grid-area: 1 / 1; width: 100%; min-height: 66.3cqw; object-fit: cover; }
.sec01 .fv-copy {
  position: static;
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: 54%;
  box-sizing: border-box;
  margin: 6% 0 0 3.5%;
  padding: 4.2cqw 3cqw;
  border-radius: 1.8519cqw;
  background: rgba(255,255,255,.96);
  text-align: center;
  color: #003b9a;
}
.sec01 .fv-copy p { font-size: 3.7cqw; font-weight: 700; line-height: 1.5; }
.sec01 .fv-copy h1 {
  width: fit-content;
  margin: .8cqw auto;
  padding: 0 .15em;
  background: linear-gradient(transparent 68%, #ffe400 68% 91%, transparent 91%);
  color: #000;
  font-size: 5.2cqw;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
}
.sec01 .fv-copy > strong { display: block; margin: 1cqw 0; font-size: 8.8cqw; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.sec01 .fv-copy__badge { display: inline-block; padding: .8cqw 2.8cqw; border-radius: .8cqw; background: #003b9a; color: #fff; font-size: 3.4cqw; font-weight: 700; }
.sec01 .c-fee { color: #307df8; }
.sec01 .c-score { color: #0a974d; }
.sec01 .c-keep { color: #fc7802; }
.sec01 .fv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5cqw; padding: 0 4.2cqw; }
.sec01 .fv-summary article { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.5cqw 1.2cqw 2cqw; border: .0926cqw solid #94b2c6; border-radius: 1.4815cqw; background: #fff; text-align: center; }
.sec01 .fv-summary img { width: 9cqw; aspect-ratio: 1; object-fit: contain; }
.sec01 .fv-summary h2 { margin: .8cqw 0; color: #023387; font-size: 3.4cqw; font-weight: 700; line-height: 1.3; }
.sec01 .fv-summary p { font-size: 2.5cqw; font-weight: 700; }
.sec01 .lead-panel { margin: 0 4.6cqw !important; padding: 3.5cqw 3cqw; border: .0926cqw solid #94b2c6; border-radius: 1.4815cqw; background: #fff; }
.sec01 .lead-panel p { font-size: 3.25cqw; }
.sec01 .lead-panel p + p { margin-top: 2cqw; }
.sec01 .lead-panel strong { color: #f25b0e; background: linear-gradient(transparent 62%, #fffc1f 62%); font-weight: 700; }

/* 共通見出し */
.sec04 .section-heading,
.sec06 .section-heading,
.sec02 .conclusion-heading {
  color: #04205f;
  text-align: center;
}

.sec04 .section-heading {
  position: relative;
  padding-bottom: 5cqw;
}

.sec04 .section-heading::after {
  content: "";
  position: absolute;
  right: 1.5cqw;
  bottom: 0;
  left: 1.5cqw;
  height: .3704cqw;
  background:
    repeating-linear-gradient(
      to right,
      #0647c8 0 1.0185cqw,
      transparent 1.0185cqw 1.8148cqw
    ) left / calc(50% - 4cqw) 100% no-repeat,
    repeating-linear-gradient(
      to right,
      #0647c8 0 1.0185cqw,
      transparent 1.0185cqw 1.8148cqw
    ) right / calc(50% - 4cqw) 100% no-repeat;
}

.sec04 .section-heading::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -1.35cqw;
  left: 50%;
  width: 3.15cqw;
  height: 3.15cqw;
  border-right: .3704cqw solid #0647c8;
  border-bottom: .3704cqw solid #0647c8;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
}
.sec04 .section-heading h2,
.sec06 .section-heading h2,
.sec02 .conclusion-heading h2 { margin: 0; font-size: 5.2cqw; font-weight: 700; line-height: 1.45; letter-spacing: .03em; }

.sec06 .section-heading h2 {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  padding: 0 .12em;
  background: linear-gradient(transparent 68%, #ffe400 68% 91%, transparent 91%);
  color: #000;
}
.sec04 .section-heading > p,
.sec06 .section-heading > p,
.sec02 .conclusion-heading > p { margin-top: 1cqw !important; color: #0647c8; font-size: 4cqw; font-weight: 700; line-height: 1.4; }
.sec04 .section-lead,
.sec02 .conclusion-lead { font-size: 3.3cqw; font-weight: 500; }

/* sec02・03：結論カード */
.sec02 .inner_wrap { display: flex; flex-direction: column; gap: 4cqw; padding: 8.7cqw 3.6cqw 6cqw; }
:is(.sec02,.sec03) .conclusion-lead { padding: 0 8cqw; text-align: center; }
:is(.sec02,.sec03) .conclusion-lead strong { color: #f59000; font-weight: 700; }
:is(.sec02,.sec03) .point-card { overflow: hidden; box-sizing: border-box; border: .1852cqw solid #4f5cbe; border-radius: .9259cqw; background: #fff; }
:is(.sec02,.sec03) .point-card > header { display: grid; grid-template-columns: 29.5cqw 1fr; align-items: center; min-height: 6.9cqw; }
:is(.sec02,.sec03) .point-card > header > span { align-self: stretch; display: grid; place-items: center; border-radius: .75cqw 0 .75cqw 0; background: #1c2da8; color: #fff; font-family: "Bebas Neue",sans-serif; font-size: 4.8cqw; font-weight: 700; letter-spacing: .04em; }
:is(.sec02,.sec03) .point-card > header h3 { margin: 0; padding: 1cqw 3cqw; color: #1c2da8; font-size: 4.15cqw; font-weight: 700; line-height: 1.35; }
:is(.sec02,.sec03) .point-card--fee > p { padding: 2.3cqw 3cqw 0; font-size: 3.2cqw; font-weight: 500; }
:is(.sec02,.sec03) .point-card__visual { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3cqw; padding: 2cqw 3cqw; }
:is(.sec02,.sec03) .point-card__visual p { color: #111; font-size: 3.5cqw; font-weight: 700; text-align: center; }
:is(.sec02,.sec03) .point-card__visual strong { color: #f25b0e; font-size: 7cqw; }
:is(.sec02,.sec03) .point-card .point-card__note { padding: 0 3cqw 2.5cqw; font-size: 2.3cqw; }

.sec03 { background: #fff; }
.sec03 .inner_wrap { display: flex; flex-direction: column; gap: 4cqw; padding: 2cqw 3.6cqw 7cqw; }
.sec03 .point-card--score { border-color: #4d9020; }
.sec03 .point-card--score > header > span { background: #348100; }
.sec03 .point-card--score > header h3 { color: #348100; }
.sec03 .point-card--ease { border-color: #f36f2c; }
.sec03 .point-card--ease > header > span { background: #f25b0e; }
.sec03 .point-card--ease > header h3 { color: #f25b0e; }
:is(.sec02,.sec03) .suitability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; padding: 2.5cqw; }
:is(.sec02,.sec03) .suitability-card { overflow: hidden; border: .15cqw solid #9aa7c5; border-radius: 1cqw; background: #fff; }
:is(.sec02,.sec03) .suitability-card h4 { margin: 0; padding: 1.3cqw; color: #fff; font-size: 3.25cqw; font-weight: 700; line-height: 1.4; text-align: center; }
:is(.sec02,.sec03) .suitability-card--group h4 { background: #23a148; }
:is(.sec02,.sec03) .suitability-card--tutor h4 { background: #f08300; }
:is(.sec02,.sec03) .suitability-card img {
  width: 100%;
  aspect-ratio: 1.85;
  padding: 1cqw;
  background: #fff;
  object-fit: contain;
  object-position: center;
}
.sec03 .suitability-card ul { margin: 0; padding: 2cqw 2.5cqw 2.5cqw; list-style: none; }
.sec03 .suitability-card li { position: relative; padding-left: 3.2cqw; color: #111; font-size: 2.9cqw; font-weight: 700; }
.sec03 .suitability-card li + li { margin-top: 1.2cqw; }
.sec03 .suitability-card li::before { content: "✓"; position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; color: #fff; font-size: 1.7cqw; }
.sec03 .suitability-card--group li::before { background: #23a148; }
.sec03 .suitability-card--tutor li::before { background: #f08300; }
:is(.sec02,.sec03) .point-card__conclusion {
  width: fit-content;
  max-width: calc(100% - 5cqw);
  margin: 0 auto 2.5cqw !important;
  padding: 1.8cqw .35em;
  background: linear-gradient(transparent 62%, #fff21a 62% 88%, transparent 88%);
  font-size: 3.3cqw;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}
:is(.sec02,.sec03) .ease-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 3cqw 2.5cqw; }
:is(.sec02,.sec03) .ease-grid > div { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 0 1.5cqw; text-align: center; }
:is(.sec02,.sec03) .ease-grid > div + div { border-left: .1cqw solid #b9c2d4; }
:is(.sec02,.sec03) .ease-grid img { width: 10cqw; aspect-ratio: 1; object-fit: contain; }
:is(.sec02,.sec03) .ease-grid p { font-size: 2.9cqw; font-weight: 700; }
:is(.sec02,.sec03) .ease-grid strong,
:is(.sec02,.sec03) .point-card--ease .point-card__conclusion strong { display: inline; color: #f36c00; }
:is(.sec02,.sec03) .section-cta { display: flex; align-items: center; justify-content: center; gap: 2cqw; margin: 0 8cqw !important; padding: 2.7cqw 4cqw; border-radius: 6cqw; background: linear-gradient(#ff9600,#ff8300); color: #fff !important; font-size: 3.6cqw; font-weight: 700; line-height: 1.3; text-decoration: none !important; }
:is(.sec02,.sec03) .section-cta img { width: 6cqw; }

/* sec04：定義 */
.sec04 { background: #fff; }
.sec04 .inner_wrap { display: flex; flex-direction: column; gap: 4cqw; padding: 7cqw 4cqw; }
.sec04 .section-lead { padding: 0 2.5cqw; }
.sec04 .section-lead strong { color: #f36c00; font-weight: 700; }
.sec04 .definition-card { overflow: hidden; border: .15cqw solid #3158bb; border-radius: 1.2cqw; background: #fff; }
.sec04 .definition-card > h3 { margin: 0; padding: 1.6cqw 3cqw; background: #1744aa; color: #fff; font-size: 4cqw; font-weight: 700; line-height: 1.3; text-align: center; }
.sec04 .definition-card--tutor { border-color: #f8871c; }
.sec04 .definition-card--tutor > h3 { background: #f8871c; }
.sec04 .definition-card--juku { border-color: #20824f; }
.sec04 .definition-card--juku > h3 { background: #007036; }
.sec04 .definition-card__body { display: grid; grid-template-columns: 38% 1fr; gap: 3cqw; align-items: start; padding: 3cqw; }
.sec04 .definition-card__body img { width: 100%; border-radius: .7cqw; }
.sec04 .definition-card p { font-size: 3cqw; font-weight: 500; }
.sec04 .definition-card p strong { color: #f36c00; font-weight: 700; }
.sec04 .definition-card ul { margin: 2cqw 0 0; padding: 0; list-style: none; }
.sec04 .definition-card li { position: relative; padding-left: 1.6em; color: #111; font-size: 2.8cqw; font-weight: 500; }
.sec04 .definition-card li + li { margin-top: .8cqw; }
.sec04 .definition-card li::before,
.sec04 .juku-type-grid li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .4em;
  display: grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: #f8871c;
  color: #fff;
  font-size: .7em;
  font-weight: 700;
  line-height: 1;
}
.sec04 .definition-card--juku > p { padding: 2.5cqw 3cqw 0; }
.sec04 .juku-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqw; padding: 2.5cqw 3cqw 3cqw; }
.sec04 .juku-type-grid article { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 2cqw; border: .12cqw solid #a7b4d3; border-radius: 1cqw; }
.sec04 .juku-type-grid h4 { margin: 0; padding: 1.2cqw; background: #dfe8ff; color: #103d9c; font-size: 3.5cqw; font-weight: 700; text-align: center; }
.sec04 .juku-type-grid article:first-child { border-color: #2ba968; }
.sec04 .juku-type-grid article:first-child h4 { background: #0d9d53; color: #fff; }
.sec04 .juku-type-grid article:last-child { border-color: #205195; }
.sec04 .juku-type-grid article:last-child h4 { background: #003986; color: #fff; }
.sec04 .juku-type-grid img {
  width: 100%;
  aspect-ratio: 1.8;
  padding: 1cqw;
  background: #fff;
  object-fit: contain;
  object-position: center;
}
.sec04 .juku-type-grid p,
.sec04 .juku-type-grid ul { margin: 0; padding: 1.5cqw 2cqw 0; }
.sec04 .juku-type-grid ul { list-style: none; }
.sec04 .juku-type-grid li { position: relative; padding-left: 1.6em; color: #111; font-size: 2.65cqw; font-weight: 500; }
.sec04 .juku-type-grid li + li { margin-top: .6cqw; }
.sec04 .price-pill { align-self: center; margin-top: auto; padding: .8cqw 2cqw; border-radius: 3cqw; background: #fff0d6; color: #c55600; font-size: 2.8cqw; font-weight: 700; }
.sec04 .juku-type-grid article:first-child li::before { background: #0d9d53; }
.sec04 .juku-type-grid article:first-child .price-pill { background: #e5f8ec; color: #0d9d53; }
.sec04 .juku-type-grid article:last-child li::before { background: #2a537f; }
.sec04 .juku-type-grid article:last-child .price-pill { background: #e3f1ff; color: #003986; }
.sec04 .section-closing { padding: 0 3cqw; font-size: 3.2cqw; font-weight: 500; }


/* sec06：授業の進め方（通常フロー／画像切れ防止／カード高さauto） */
.sec06 {
  background: #fbfcfa;
}

.sec06 .s06__grid {
  position: absolute !important;
  z-index: 0;
  inset: 0;
  width: auto !important;
  height: auto !important;
  background-color: #fbfcfa;
  background-image:
    repeating-linear-gradient(
      to right,
      #d7ebf4 0 1px,
      transparent 1px calc(min(100vw, 1080px) / 41.6975)
    ),
    repeating-linear-gradient(
      to bottom,
      #d7ebf4 0 1px,
      transparent 1px calc(min(100vw, 1080px) / 41.5097)
    );
  background-size:
    calc(min(100vw, 1080px) / 41.6975) 100%,
    100% calc(min(100vw, 1080px) / 41.5097);
  background-position:
    calc(min(100vw, 1080px) * 0.0036563) 0,
    0 0;
  pointer-events: none;
}

.sec06 .inner_wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  height: auto;
  padding: 7cqw 4cqw;
  box-sizing: border-box;
}

.sec06 .section-intro {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  padding: 0 2cqw;
}

.sec06 .section-intro p {
  margin: 0;
  font-size: 3.2cqw;
  font-weight: 500;
  line-height: 1.65;
}

.sec06 .section-intro strong {
  color: #168b35;
  font-weight: 700;
}

.sec06 .method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 2.5cqw;
}

.sec06 .method-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: .16cqw solid #7890bf;
  border-radius: 1.2cqw;
  background: #fff;
}

/* 左右ボックスの見出しサイズを完全に統一 */
.sec06 .method-card h3,
.sec06 .method-card h3 small {
  font-size: 3.3cqw;
  font-weight: 700;
  line-height: 1.35;
}

.sec06 .method-card h3 {
  margin: 0;
  padding: 1.5cqw 1cqw;
  color: #fff;
  text-align: center;
}

.sec06 .method-card h3 small {
  display: inline;
}

.sec06 .method-card--juku h3 { background: #238f48; }
.sec06 .method-card--tutor h3 { background: #174eae; }

/* 画像は固定高・aspect-ratioを使わず、元画像を切らずに全体表示 */
.sec06 .method-card__photo,
.sec06 .method-card__diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
}

.sec06 .method-card__photo {
  padding: 1cqw;
  background: #fff;
}

.sec06 .method-card__diagram {
  width: calc(100% - 5cqw);
  margin: 2cqw auto 1cqw;
}

.sec06 .method-card h4 {
  margin: 0;
  padding: 1cqw 2cqw;
  color: #173e8f;
  font-size: 3.2cqw;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.sec06 .method-card ul {
  margin: 0;
  padding: 2cqw 2.5cqw 2.5cqw;
  list-style: none;
}

.sec06 .method-card li {
  position: relative;
  padding-left: 3.2cqw;
  color: #111;
  font-size: 2.9cqw;
  font-weight: 500;
  line-height: 1.55;
}

.sec06 .method-card li + li { margin-top: 1.2cqw; }

.sec06 .method-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .08em;
  display: grid;
  place-items: center;
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: 50%;
  color: #fff;
  font-size: 1.7cqw;
  font-weight: 700;
  line-height: 1;
}

.sec06 .method-card--juku li::before { background: #23a148; }
.sec06 .method-card--tutor li::before { background: #f08300; }

.sec06 .method-card > p {
  margin: 0 !important;
  padding: 1.8cqw 2cqw;
  background: #edf3ff;
  font-size: 2.9cqw;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

.sec06 .method-card--juku > p strong { color: #21853d; }
.sec06 .method-card--tutor > p strong { color: #174eae; }

.sec06 .method-summary {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  align-items: center;
  gap: 3cqw;
  height: auto;
  padding: 3cqw;
  box-sizing: border-box;
  border: .15cqw solid #6e88bd;
  border-radius: 1.2cqw;
  background: #fff;
}

.sec06 .method-summary img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: .8cqw;
  object-fit: contain;
}

.sec06 .method-summary p {
  margin: 0;
  font-size: 3cqw;
  font-weight: 500;
  line-height: 1.65;
}

.sec06 .method-summary p:first-child { font-weight: 700; }
.sec06 .method-summary p + p { margin-top: 1.5cqw; }

.sec06 .method-summary strong {
  color: #f06a00;
  background: linear-gradient(transparent 62%, #fff02b 62% 88%, transparent 88%);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* Shared flow tables introduced in the 2026-09-20 refactor */
.comparison-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.comparison-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:2.8cqw; font-weight:700; line-height:1.35; text-align:center; color:#000; }
.comparison-table th,.comparison-table td{ padding:1.55cqw .8cqw; border-right:.12cqw solid #8c8c8c; border-bottom:.18cqw solid #d2d2d2; vertical-align:middle; }
.comparison-table thead th{ padding:1.65cqw .7cqw; color:#fff; font-size:3.15cqw; }
.comparison-table thead th:nth-child(1){ background:#00275c; border-radius:2.4cqw 0 0 0; }
.comparison-table thead th:nth-child(2){ background:#008100; }
.comparison-table thead th:nth-child(3){ background:#003986; }
.comparison-table thead th:nth-child(4){ background:#ff7e00; border-radius:0 2.4cqw 0 0; border-right:0; }
.comparison-table tbody th{ background:#efefef; }
.comparison-table tbody td:last-child{ background:#fff5e0; border-right:0; }
.comparison-table tbody tr:last-child th{ border-radius:0 0 0 2.4cqw; }
.comparison-table tbody tr:last-child td:last-child{ border-radius:0 0 2.4cqw 0; }
.comparison-table small{ font-size:.72em; font-weight:inherit; }
.comparison-table .is-tutor{ color:#ff7e00; }
.comparison-table .is-amber{ color:#ffad00; }
.comparison-table .is-blue{ color:#0054d0; }
.comparison-table .is-blue-strong{ color:#004fff; }
.comparison-heading{ text-align:center; color:#04205f; }
.comparison-heading h2{ margin:0; font-size:5.5cqw; font-weight:700; line-height:1.2; letter-spacing:.05em; }
.comparison-heading p{ position:relative; margin:2cqw 0 0; padding-bottom:4cqw; color:#0647c8; font-size:4.2cqw; font-weight:700; }
.comparison-heading p::after{ content:""; position:absolute; left:5%; right:5%; bottom:0; height:.35cqw; background:repeating-linear-gradient(to right,#0647c8 0 1cqw,transparent 1cqw 1.8cqw); }

/* ===== sec05：3形態比較表（通常フロー版） ===== */
.sec05{ background:#fff; }
.sec05 .inner_wrap{ aspect-ratio:auto; height:auto; padding:6cqw 4.6cqw 7cqw; box-sizing:border-box; }
.sec05 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec05__heading h3{ margin:0 0 3cqw; color:#04205f; font-size:4cqw; line-height:1.35; text-align:center; }
.sec05__heading h3 span{ font-size:.88em; }
.sec05 .comparison-table{ min-width:84cqw; }
.sec05__callout{ margin-top:4cqw !important; padding:2.6cqw 4cqw; border-radius:1.4cqw; background:#f2f7ff; text-align:center; }
.sec05__callout p{ font-size:2.9cqw; font-weight:700; line-height:1.6; }
.sec05__callout p+p{ margin-top:.6cqw; }


/* ===== sec07：料金比較（通常フロー版） ===== */
.sec07{ background:#fff; }
.sec07 .inner_wrap{ aspect-ratio:auto; height:auto; padding:5cqw 4.6cqw 6cqw; box-sizing:border-box; }
.sec07 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec07__lead{ margin:4.5cqw 0 5.5cqw !important; }
.sec07__lead p{ font-size:3.25cqw; font-weight:500; line-height:1.65; }
.sec07__lead p+p{ margin-top:1.5cqw; }
.sec07__lead strong{ background:linear-gradient(transparent 62%,#ffe400 62% 90%,transparent 90%); }
.sec07__lead span{ color:#ff8a00; font-weight:700; }
.sec07__table-block h3{ width:fit-content; margin:0 auto 2.6cqw; padding:0 .15em; color:#042f68; background:linear-gradient(transparent 64%,#ffe400 64% 90%,transparent 90%); font-size:3.7cqw; }
.sec07 .comparison-table--price{ min-width:84cqw; }
.sec07__price-note{ position:relative !important; display:grid; grid-template-columns:9cqw 1fr 16cqw; align-items:center; gap:2.2cqw; width:74cqw !important; min-height:17cqw; margin:3.8cqw auto 0 !important; padding:2.2cqw 2.4cqw; box-sizing:border-box; border:.28cqw solid #8fc3ff; border-radius:1.5cqw; background:#fff; }
.sec07__price-note>img:first-child{ width:9cqw; }
.sec07__price-note p{ font-size:2.75cqw; font-weight:700; }
.sec07__price-em{ color:#0066ef; }
.sec07__price-em strong{ font-family:"Bebas Neue",sans-serif; font-size:7cqw; line-height:.9; }
.sec07__teacher{ align-self:end; width:16cqw; margin-bottom:-2.2cqw; }


/* ===== sec08：費用5項目（通常フロー版） ===== */
.sec08{ background:#fff; }
.sec08 .inner_wrap{ aspect-ratio:auto; height:auto; padding:6cqw 3.4cqw 7cqw; box-sizing:border-box; }
.sec08 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec08__heading h3{ margin:0; color:#04205f; font-size:5.5cqw; line-height:1.3; }
.sec08__heading h3 span{ background:linear-gradient(transparent 62%,#ffe400 62% 88%,transparent 88%); }
.sec08__lead{ margin:2.8cqw 1.4cqw 3.5cqw !important; font-size:3.25cqw; line-height:1.6; }
.sec08__cost-list{ display:flex; flex-direction:column; gap:1.65cqw; }
.cost-row{ display:grid; grid-template-columns:32% minmax(0,1fr); min-height:15.8cqw; overflow:hidden; border:.35cqw solid #b1c7eb; border-radius:1.3cqw; background:#fff; }
.cost-row__label{ display:grid; grid-template-columns:6.2cqw 1fr; align-items:center; gap:1.1cqw; padding:1.3cqw; background:#eaf4ff; }
.cost-row__label>span{ display:grid; place-items:center; width:6.2cqw; aspect-ratio:1; border-radius:50%; background:#04205f; color:#fff; font-family:"Bebas Neue",sans-serif; font-size:4.4cqw; }
.cost-row__label strong{ font-size:3.55cqw; line-height:1.3; text-align:center; }
.cost-row__label small{ font-size:.72em; }
.cost-row__body{ display:flex; flex-direction:column; justify-content:center; padding:1.7cqw 2.7cqw; }
.cost-row__body h4{ margin:0; font-size:3.25cqw; line-height:1.45; }
.cost-row__body p{ margin:.5cqw 0 0; font-size:2.75cqw; line-height:1.45; }
.cost-row__body small{ font-size:.88em; }
.sec08__summary{ display:grid; grid-template-columns:11cqw 1fr; align-items:center; gap:2.7cqw; margin-top:3.8cqw !important; padding:2cqw 2.2cqw; }
.sec08__summary img{ width:11cqw; }
.sec08__summary p{ font-size:2.95cqw; line-height:1.55; }
.sec08__summary strong{ color:#0066ef; }


/* ===== sec09：3年総コスト（通常フロー版） ===== */
.sec09{ background:#fff; }
.sec09 .inner_wrap{ aspect-ratio:auto; height:auto; padding:4.5cqw 4.4cqw 6.5cqw; box-sizing:border-box; }
.sec09 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec09__heading h3{ margin:0; color:#04205f; font-size:5.4cqw; line-height:1.25; }
.sec09__heading h3 span{ background:linear-gradient(transparent 62%,#ffe400 62% 88%,transparent 88%); }
.sec09__heading>p{ margin:1.5cqw 0 0; font-size:3.55cqw; font-weight:700; }
.sec09__lead{ margin:2.5cqw 0 3.5cqw !important; font-size:3.1cqw; line-height:1.6; }
.sec09 .comparison-table--cost{ min-width:84cqw; }
.sec09 .comparison-table__total th,.sec09 .comparison-table__total td{ font-size:1.08em; font-weight:700; }
.sec09 .comparison-table__total td:not(:last-child){ color:#009314; }
.sec09__note{ margin-top:1.2cqw !important; font-size:2.15cqw; }
.sec09__summary{ margin-top:3.4cqw !important; padding:2.7cqw 3cqw; border-radius:1.4cqw; background:#edf4ff; text-align:center; }
.sec09__summary p{ font-size:2.9cqw; line-height:1.55; }
.sec09__summary p+p{ margin-top:.7cqw; }
.sec09__summary strong{ color:#e84b22; font-size:1.08em; }


/* ===== sec10：科目数と費用（通常フロー版） ===== */
.sec10{ background:#fff; }
.sec10 .inner_wrap{ aspect-ratio:auto; height:auto; padding:4.5cqw 3.5cqw 7cqw; box-sizing:border-box; }
.sec10 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec10__intro{ display:grid; grid-template-columns:minmax(0,1fr) 28cqw; gap:3cqw; align-items:start; }
.sec10__intro h3{ margin:0 0 1.5cqw; color:#042f68; font-size:3.75cqw; }
.sec10__intro p{ font-size:3.1cqw; line-height:1.5; }
.sec10__intro p+p{ margin-top:1cqw; }
.sec10__intro img{ width:100%; border-radius:.8cqw; }
.sec10 .comparison-table-wrap{ margin-top:4cqw; }
.sec10 .comparison-table--subjects{ min-width:84cqw; }
.sec10__best{ position:relative; font-weight:700; }
.sec10__best::after{ content:""; position:absolute; left:18%; right:18%; bottom:1.15cqw; height:1cqw; background:#fddd00; z-index:-1; }
.sec10__explanation{ margin-top:3.5cqw !important; padding:2.8cqw 3.2cqw; border:.18cqw solid #0f42b5; border-radius:3.8cqw; }
.sec10__explanation h3{ margin:0 0 2cqw; color:#0f42b5; font-size:3.25cqw; text-align:center; }
.sec10__explanation-body{ display:grid; grid-template-columns:22cqw 1fr; gap:2.5cqw; align-items:center; }
.sec10__explanation-body img{ width:100%; }
.sec10__explanation-body p{ font-size:2.85cqw; line-height:1.55; }
.sec10__explanation-body strong{ color:#0040d0; background:linear-gradient(transparent 62%,#fddd00 62% 88%,transparent 88%); }
.sec10__link{ margin-top:1.2cqw !important; text-align:right; }
.sec10__link a{ color:#0041d5; font-size:2.8cqw; text-decoration:underline; }


/* ===== sec11：成績の伸びやすさ（通常フロー版） ===== */
.sec11{ background:#fff; }
.sec11 .inner_wrap{ aspect-ratio:auto; height:auto; padding:4cqw 4.6cqw 6cqw; box-sizing:border-box; }
.sec11 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec11__lead{ margin:4cqw 0 3.5cqw !important; }
.sec11__lead p{ font-size:3.2cqw; line-height:1.6; }
.sec11__lead p+p{ margin-top:1cqw; }
.sec11__card{ overflow:hidden; border:.18cqw solid #2158bc; border-radius:1.8cqw; background:#fff; }
.sec11__card>h3{ margin:0; padding:2.4cqw 3cqw; background:#f2f7ff; color:#003fb2; font-size:3.7cqw; text-align:center; }
.sec11__photo{ display:block; width:calc(100% - 4cqw); max-height:35cqw; margin:2cqw auto; border-radius:.8cqw; object-fit:cover; }
.sec11__card ul{ margin:0 2.2cqw; padding:0; list-style:none; }
.sec11__card li{ position:relative; padding:1.25cqw 1cqw 1.25cqw 5cqw; border-top:.45cqw solid #e4ecf7; font-size:3.05cqw; }
.sec11__card li::before{ content:"✓"; position:absolute; left:.3cqw; top:.8cqw; display:grid; place-items:center; width:3.4cqw; aspect-ratio:1; border-radius:50%; background:#003fb2; color:#fff; font-size:2.2cqw; font-weight:700; }
.sec11__summary{ display:grid; grid-template-columns:8cqw 1fr; gap:2cqw; align-items:center; margin-top:1.5cqw; padding:2.5cqw; background:#f2f7ff; }
.sec11__summary img{ width:6cqw; margin:auto; }
.sec11__summary p{ font-size:3.05cqw; line-height:1.55; }
.sec11__summary strong{ color:#2048b0; }


/* ===== sec12（高さ 2753px） ===== */
.sec12{ background:#fff; }
.sec12 .inner_wrap{ aspect-ratio:1080/2753; }
.sec12 /* s12 個別指導塾・家庭教師の特徴  実座標 y=18255..21008 / canvas内 top = 実座標 - 18255 */






.box{ position:absolute; left:5.0926cqw; width:90.8333cqw; box-sizing:border-box; background:#fff; border-radius:1.8519cqw; }
.sec12 .bA{ top:0;    height:110.2778cqw; border:0.1852cqw solid #219121; }
.sec12 .bB{ top:115.2778cqw; height:123.2407cqw; border:0.1852cqw solid #ff7d01; }
/* 見出し帯・補足欄は枠の内側に収める（sec11 と同じ修正／comp実測） */
.sec12 .bhd{ position:absolute; left:5.2778cqw; width:90.4630cqw; height:11.4815cqw; border-radius:1.6667cqw 1.6667cqw 0 0; }
.sec12 .hA{ top:0.1852cqw;   background:#f8fff8; }
.sec12 .hB{ top:115.4630cqw;  background:#ffebd2; }
.sec12 .bt{ position:absolute; white-space:nowrap; font-size:3.7037cqw; font-weight:700; line-height:1;
     letter-spacing:0.01em; }
.sec12 .btA{ left:17.1296cqw; top:4.5370cqw;   color:#008100; }
.sec12 .btB{ left:21.6667cqw; top:119.8148cqw; color:#ff7e01; }
.sec12 .ph{ position:absolute; left:7.5000cqw; width:85.7407cqw; height:34.6296cqw; overflow:hidden; border-radius:0.7407cqw; }
.sec12 .phA{ top:14.8148cqw; }
.sec12 .phB{ top:130.0926cqw; }
.sec12 .phiA{ position:absolute; left:-3.2407cqw; top:-9.0741cqw; width:103.8889cqw; height:58.4259cqw; }
.sec12 .phiB{ position:absolute; left:-1.5741cqw; top:-12.9630cqw; width:88.5185cqw; height:73.7963cqw; }
.sec12 .sep{ position:absolute; left:7.0370cqw; width:86.7593cqw; height:0.5556cqw; background:#eef2f6; }
.sec12 .sep7{ height:0.6481cqw; }
.sec12 .dot{ position:absolute; left:7.4074cqw; width:3.4259cqw; height:3.6111cqw; border-radius:50%; }
.sec12 .gA{ background:#008100; }
.sec12 .gB{ background:#ff7e01; }
.sec12 .bare{ position:absolute; left:7.4074cqw; top:67.9630cqw; width:3.4259cqw; height:3.6111cqw;
       background:none; }
.sec12 .bare::before{ content:""; position:absolute; left:0.7407cqw; top:1.2963cqw; width:1.4815cqw; height:0.7407cqw;
       border-left:0.2778cqw solid #9aa5ad; border-bottom:0.2778cqw solid #9aa5ad; transform:rotate(-45deg); }
.sec12 .it{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:0.01em; color:#000; }
.sec12 .s32{ font-size:2.9630cqw; }
.sec12 .sum{ position:absolute; left:5.2778cqw; width:90.4630cqw; border-radius:0 0 1.6667cqw 1.6667cqw; }
.sec12 .sA{ top:86.3889cqw; height:23.7963cqw; background:#f8fff8; }
.sec12 .sB{ top:211.8519cqw; height:26.5741cqw; background:#ffebd2; }
.sec12 .bulbc{ position:absolute; width:9.3519cqw; height:9.3519cqw; border-radius:50%; }
.sec12 .cA{ left:7.5000cqw; top:94.4444cqw; background:#fff; }
.sec12 .cB{ left:6.6667cqw; top:221.0185cqw; background:#fff; } /* comp：白丸に色付きの電球 */
.sec12 .bulb{ position:absolute; width:5.7407cqw; height:6.4815cqw; }
.sec12 .sl{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:-0.025em; color:#000; }
.sec12 .sl .o{ color:#ff7e01; font-weight:700; }
.sec12 .sl .g{ color:#008000; font-weight:700; }
.sec12 /* メガホンブロック（検収R3で欠落を検出・実座標 20878..21008） */
.mega{ position:absolute; left:3.3333cqw; top:244.5370cqw; width:11.9444cqw; height:8.4259cqw; }
.sec12 .megt{ position:absolute; left:17.8704cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:500;
       line-height:1; letter-spacing:0.01em; color:#000; }
.sec12 /* 丸の中のチェックマーク（検収R3で全ページ欠落を検出）。システムフォントのU+2714は字形が違うのでSVGで描く */
.dot svg,.sec12 .chk svg,.sec12 .d1 svg,.sec12 .d2 svg,.sec12 .d3 svg{ position:absolute; left:16%; top:16%; width:68%; height:68%; }

/* ===== sec13（高さ 2175px） ===== */
.sec13{ background:#fff; }
.sec13 .inner_wrap{ aspect-ratio:1080/2175; }
.sec13 /* s13 家庭学習の時間  実座標 y=21008..23183 / canvas内 top = 実座標 - 21008 */






.h1{ position:absolute; left:7.1296cqw; top:19.5370cqw; white-space:nowrap; font-size:3.7019cqw; font-weight:700;
     line-height:1; letter-spacing:0.01em; color:#04205f; }
.sec13 .h2{ position:absolute; left:7.1296cqw; top:25.2778cqw; white-space:nowrap; font-size:5.1852cqw; font-weight:700;
     line-height:1; letter-spacing:0.01em; color:#04205f; }
.sec13 .h2 .o{ color:#ff8a00; }
.sec13 .ph{ position:absolute; left:59.7222cqw; top:56.5741cqw; width:36.5741cqw; height:36.6667cqw;
      clip-path:inset(4.6296cqw 1.0185cqw 1.4815cqw 0.5556cqw); } /* comp：見えるのは x651〜1029・y661〜991 の範囲 */
.sec13 .b{ position:absolute; white-space:nowrap; font-size:3.3361cqw; font-weight:500; line-height:1;
    letter-spacing:0.025em; color:#000; }
.sec13 .b.bl{ color:#0066ef; font-weight:700; }
.sec13 .b.og{ color:#ff8a00; font-weight:700; }
.sec13 .card{ position:absolute; left:5.1852cqw; width:90.2778cqw; box-sizing:border-box; background:#fff;
       border:0.1852cqw solid #ccdeff; border-radius:2.9630cqw; }
/* 写真パネルはカードの内側に収め、右側の角をカードに合わせて丸める（旧版は上下にはみ出していた） */
.sec13 .pan{ position:absolute; overflow:hidden; border-radius:0 2.7778cqw 2.7778cqw 0; background:#f7f7f6; }
.sec13 .pan img{ position:absolute; }
.sec13 .nc{ position:absolute; left:6.7593cqw; width:5.8333cqw; height:5.9259cqw; border-radius:50%; background:#04205f; }
.sec13 .nt{ position:absolute; left:6.7593cqw; width:5.8333cqw; text-align:center; font-family:"Bebas Neue",sans-serif;
     font-size:4.3176cqw; font-weight:700; line-height:1; letter-spacing:0.025em; color:#fff; }
.sec13 .mk{ position:absolute; left:14.1667cqw; height:1.5741cqw; background:#ffd800; }
.sec13 .ct{ position:absolute; white-space:nowrap; font-size:3.7037cqw; font-weight:700; line-height:1;
     letter-spacing:0.01em; color:#04205f; }
.sec13 .cb{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:4.4444cqw;
     letter-spacing:-0.025em; color:#000; }
.sec13 .ic{ position:absolute; left:6.3889cqw; top:175.0926cqw; width:14.4444cqw; height:15.2778cqw; }
.sec13 .cl{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:-0.025em; color:#000; }
.sec13 .btn{ position:absolute; left:18.6111cqw; top:194.4444cqw; width:63.2407cqw; height:6.9444cqw; box-sizing:border-box;
      background:#d7e3ff; border:0.1852cqw solid #6b97d1; border-radius:3.5185cqw; }
.sec13 .btt{ position:absolute; left:24.6296cqw; top:196.3889cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:500;
      line-height:1; letter-spacing:-0.025em; color:#004da4; }
.sec13 .voice-link{ display:block; text-decoration:none; }
.sec13 .voice-link .btt{ left:6.0185cqw; top:1.9445cqw; }

/* ===== sec14（高さ 2340px） ===== */
.sec14{ background:#fff; }
.sec14 .inner_wrap{ aspect-ratio:1080/2340; }
.sec14 /* s14 チェックリスト15項目  実座標 y=23183..25523 / canvas内 top = 実座標 - 23183 */






.bg{ position:absolute; left:-1.0185cqw; top:9.6296cqw; width:101.4815cqw; height:215.9259cqw; background:#f4f7fe; }
.sec14 .cir{ position:absolute; left:5.0926cqw; top:13.4259cqw; width:20.8333cqw; height:20.7407cqw; border-radius:50%; background:#fff; }
.sec14 .cico{ position:absolute; left:9.3519cqw; top:16.9444cqw; width:12.2222cqw; height:13.9815cqw; }
.sec14 .hmk{ position:absolute; left:31.2037cqw; top:30.8333cqw; width:62.0370cqw; height:2.0370cqw; background:#ffea00; }
.sec14 .h1{ position:absolute; left:31.2963cqw; top:13.5185cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:700;
     line-height:1; letter-spacing:0.01em; color:#04205f; }
.sec14 .h2{ position:absolute; left:31.4815cqw; top:19.1667cqw; white-space:nowrap; font-size:5.1852cqw; font-weight:700;
     line-height:1; letter-spacing:0.08em; color:#04205f; }
.sec14 .h3{ position:absolute; left:31.2963cqw; top:25.7407cqw; white-space:nowrap; font-size:5.4630cqw; font-weight:700;
     line-height:1; letter-spacing:0.08em; color:#04205f; }
.sec14 .ld{ position:absolute; left:3.6111cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:0.01em; color:#000; }
.sec14 .d1{ top:36.5741cqw; }
.sec14 .d2{ top:41.0185cqw; }
.sec14 .d3{ top:45.4630cqw; }
.sec14 .d4{ top:49.9074cqw; }
.sec14 .bx{ position:absolute; left:5.0926cqw; width:90.8333cqw; height:50.8333cqw; box-sizing:border-box;
     background:#fff; border:0.1852cqw solid #1f57bb; border-radius:1.1111cqw; }
.sec14 .ic{ position:absolute; left:7.9630cqw; width:8.6111cqw; height:8.6111cqw; border-radius:50%; }
.sec14 .ic1{ top:60.3704cqw;  background:#003fb2; }
.sec14 .ic2{ top:113.8889cqw; background:#00a818; }
.sec14 .bx2{ border-color:#1fb235; }
.sec14 .bx3{ border-color:#fd9050; }
.sec14 .ic3{ top:167.8704cqw; background:#f57300; height:8.5185cqw; }
.sec14 .ii{ position:absolute; }
.sec14 .bt{ position:absolute; left:18.7963cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
     line-height:1; letter-spacing:0.01em; }
.sec14 .cb{ position:absolute; left:7.0370cqw; width:3.4259cqw; height:3.3333cqw; box-sizing:border-box;
     border:0.1852cqw solid #b1b1b1; border-radius:0.3704cqw; background:#fff; }
.sec14 .sp{ position:absolute; left:7.0370cqw; width:86.7593cqw; height:0.6481cqw; background:#eef2f8; }
.sec14 .li{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:0.01em; color:#000 !important; }
.sec14 .li .nm{ font-weight:500; } /* 番号だけ各ボックスの色（comp） */
.sec14 .checklist-list{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; list-style:none; }
.sec14 .checklist-list > li{ display:contents; }
.sec14 .h3 .n15{ font-size:7.0370cqw; color:#0048d8; margin:0 0.04em; letter-spacing:0; }

/* ===== sec15（高さ 2273px） ===== */
.sec15{ background:#fff; }
.sec15 .inner_wrap{ aspect-ratio:1080/2273; }
.sec15 /* s15 判定基準・対処法  実座標 y=25523..27796 / canvas内 top = 実座標 - 25523 */






.hd{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:700; line-height:1;
     letter-spacing:0.025em; color:#04205f; }
.sec15 .in{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:500; line-height:1;
     letter-spacing:0.01em; color:#000; }
.sec15 .pan{ position:absolute; border-radius:1.1111cqw; }
.sec15 .pan img{ position:absolute; }
.sec15 .card{ position:absolute; box-sizing:border-box; background:transparent; border:0.1852cqw solid #c7dcff; border-radius:1.1111cqw; }
/* ↑旧版は background:#fff で、DOM上で先にある .pan（判定カードの色パネル・3ステップの写真）を覆い隠していた（再検収で修正） */
.sec15 .jt.bd{ color:#000 !important; font-weight:500; } /* 見出し行以外の本文は黒・細字（comp） */
.sec15 .num .ko{ font-size:2.9630cqw; }
.sec15 .cc{ position:absolute; border-radius:50%; background:#fcfcfc; }
.sec15 .ci{ position:absolute; }
.sec15 .num{ position:absolute; white-space:nowrap; font-size:5.9259cqw; font-weight:700; line-height:1;
      letter-spacing:0.025em; }
.sec15 .jt{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:700; line-height:1;
     letter-spacing:0.025em; }
.sec15 .bdg{ position:absolute; border-radius:0.9259cqw 0 0.7407cqw 0; } /* comp：カード左上に収まる65×61px */
.sec15 .bn{ position:absolute; text-align:center; font-family:"Bebas Neue",sans-serif; font-size:3.3333cqw;
     font-weight:700; line-height:1; letter-spacing:0.025em; color:#fff; }
.sec15 .st{ position:absolute; white-space:nowrap; font-size:3.3333cqw; font-weight:700; line-height:4.4444cqw;
     letter-spacing:0.025em; }
.sec15 .st.ctr{ text-align:center; }
.sec15 .s32{ font-size:2.9630cqw; }
.sec15 .st .s32{ color:#000; font-weight:500; font-size:3.3333cqw; } /* comp：補足文も36px */ /* comp：補足文は黒・細字 */
.sec15 /* 「8個以上」は他の判定ラベルより字面が小さい（comp実測 139px幅） */
.num.n8{ }

/* ===== sec16（高さ 2304px） ===== */
.sec16{ background:#fff; }
.sec16 .inner_wrap{ aspect-ratio:1080/2304; }
.sec16 /* s16 続けやすさ・生活面  実座標 y=27796..30100 / canvas内 top = 実座標 - 27796 */






.ctaband{ position:absolute; left:-2.7778cqw; top:5.8333cqw; width:105.6481cqw; height:23.7037cqw; background:#fff4e5; }
.sec16 .ctat{ position:absolute; left:20.3704cqw; top:9.9074cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:700;
       line-height:1; letter-spacing:0.025em; color:#655529; }
.sec16 .cta{ position:absolute; left:10.6481cqw; top:15.0000cqw; width:78.9815cqw; height:11.0185cqw; border-radius:5.5556cqw;
      background:linear-gradient(#ff9500,#ff8900); }
.sec16 .ctaic{ position:absolute; left:14.1667cqw; top:18.9815cqw; width:4.8148cqw; height:3.7037cqw; }
.sec16 .ctab{ position:absolute; left:20.6481cqw; top:18.5185cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
       line-height:1; letter-spacing:-0.01em; color:#fff; }
.sec16 .chev{ position:absolute; left:84.1667cqw; top:18.9815cqw; width:2.2222cqw; height:2.2222cqw;
       border-top:0.6481cqw solid #fff; border-right:0.6481cqw solid #fff; transform:rotate(45deg); }
.sec16 .cta-link{ display:block; text-decoration:none; }
.sec16 .cta-link .ctaic{ left:3.5186cqw; top:3.9815cqw; }
.sec16 .cta-link .ctab{ left:10cqw; top:3.5185cqw; }
.sec16 .cta-link .chev{ left:73.5186cqw; top:3.9815cqw; }
.sec16 .linkbar{ position:absolute; left:3.3333cqw; top:31.2963cqw; width:92.1296cqw; height:7.9630cqw; background:#dfefff; border-radius:0.9259cqw; }
.sec16 .linkt{ position:absolute; left:6.2037cqw; top:34.2593cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:700;
        line-height:1; letter-spacing:-0.025em; color:#044696; }
.sec16 .h1{ position:absolute; left:0.2778cqw; top:60.0000cqw; width:100.0000cqw; text-align:center; white-space:nowrap;
     font-size:5.5417cqw; font-weight:700; line-height:1; letter-spacing:0.062em; color:#04205f; }
.sec16 .h2{ position:absolute; left:0.0926cqw; top:68.5185cqw; width:100.0000cqw; text-align:center; white-space:nowrap;
     font-size:4.4444cqw; font-weight:700; line-height:1; letter-spacing:0.057em; color:#0647c8; }
.sec16 .dash{ position:absolute; top:75.0926cqw; height:0.3704cqw;
       background-image:repeating-linear-gradient(to right,#0647c8 0 1.0185cqw,transparent 1.0185cqw 1.8148cqw); }
.sec16 .dashL{ left:5.5556cqw;  width:41.0185cqw; }
.sec16 .dashR{ left:52.5926cqw; width:42.6852cqw; }
.sec16 .notch{ position:absolute; width:3.4259cqw; height:0.3704cqw; background:#0647c8; }
.sec16 .nL{ left:47.1296cqw; top:74.9074cqw; transform:rotate(37deg);  transform-origin:left top; }
.sec16 .nR{ left:50.0000cqw; top:76.9444cqw; transform:rotate(-37deg); transform-origin:left top; }
.sec16 .ld{ position:absolute; left:3.8889cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:500; line-height:1;
     letter-spacing:-0.05em; color:#000; }
.sec16 .ld .bl{ color:#0d3fa8; font-weight:700; }
.sec16 .badge{ position:absolute; left:3.0556cqw; top:105.7407cqw; width:5.8333cqw; height:5.4630cqw; background:#04205f; border-radius:0.3704cqw; }
.sec16 .bnum{ position:absolute; left:3.0556cqw; top:106.9444cqw; width:5.8333cqw; text-align:center;
       font-family:"Bebas Neue",sans-serif; font-size:4.0611cqw; font-weight:700; line-height:1;
       letter-spacing:0.06em; color:#fff; }
.sec16 .btl{ position:absolute; left:9.7222cqw; top:106.8519cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
      line-height:1; letter-spacing:0.06em; color:#04205f; }
.sec16 .bd{ position:absolute; left:3.4259cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:500; line-height:1;
     letter-spacing:-0.025em; color:#000; }
.sec16 .bd .st{ font-weight:700; }
.sec16 .bd.blb{ color:#0f42b5; font-weight:700; }
.sec16 .cbox{ position:absolute; left:3.3333cqw; top:178.2407cqw; width:92.1296cqw; height:33.3333cqw; box-sizing:border-box;
       background:#fff; border:0.1852cqw solid #b9cdff; border-radius:1.8519cqw; }
.sec16 .ctitle{ position:absolute; left:28.2407cqw; top:180.0926cqw; white-space:nowrap; font-size:2.5926cqw; font-weight:700;
         line-height:1; letter-spacing:0.06em; color:#002ba7; -webkit-text-stroke:0.0324cqw currentColor; }
/* 見出し帯はパネル(.cc)の枠内・上端に置き、パネルより前面へ（旧版は白いパネルが見出しラベルを覆っていた／再検収で修正） */
.sec16 .ch{ position:absolute; top:184.8148cqw; width:43.7037cqw; height:4.9074cqw; border-radius:0.6481cqw 0.6481cqw 0 0; z-index:1; }
.sec16 .chL{ left:5.1852cqw;  background:#dbe6ff; }
.sec16 .chR{ left:50.2778cqw; background:#ffeecb; }
.sec16 .cl{ z-index:2; }
.sec16 .cl{ position:absolute; top:185.8333cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:700; line-height:1;
     letter-spacing:-0.05em; }
.sec16 .clL{ left:20.2778cqw; color:#224eb1; }
.sec16 .clR{ left:57.5926cqw; color:#ff9c00; }
.sec16 .cc{ position:absolute; top:184.7222cqw; width:43.8889cqw; height:18.3333cqw; box-sizing:border-box;
     background:#fff; border:0.0926cqw solid #e3e9f5; border-radius:0.7407cqw; }
.sec16 .ccL{ left:5.0926cqw; border-color:#aac4ff; }
.sec16 .ccR{ left:50.1852cqw; border-color:#ffd165; }
.sec16 .cim{ position:absolute; }
.sec16 .btmbar{ position:absolute; left:4.6296cqw; top:203.9815cqw; width:89.6296cqw; height:6.1111cqw; background:#dbe6ff; border-radius:0.7407cqw; }
.sec16 /* 下部帯の中身（検収R3で欠落を検出・実座標 30008/30019） */
.btmic{ position:absolute; left:6.3889cqw; top:204.8148cqw; width:4.5370cqw; height:4.4444cqw; }
.sec16 .btmt{ position:absolute; left:12.0370cqw; top:205.8333cqw; white-space:nowrap; font-size:2.8167cqw;
       font-weight:700; line-height:1; letter-spacing:-0.012em; color:#224eb1; }

/* ===== sec17（高さ 1443px） ===== */
.sec17{ background:#fff; }
.sec17 .inner_wrap{ aspect-ratio:1080/1443; }
.sec17 /* s17 振替・両立  実座標 y=30100..31543 / canvas内 top = 実座標 - 30100 */





.badge{ position:absolute; left:3.0556cqw; width:5.8333cqw; height:5.4630cqw; background:#04205f; border-radius:0.3704cqw; }
.sec17 .bnum{ position:absolute; left:3.0556cqw; width:5.8333cqw; text-align:center; font-family:"Bebas Neue",sans-serif;
       font-size:4.0741cqw; font-weight:700; line-height:1; letter-spacing:0.06em; color:#fff; }
.sec17 .btl{ position:absolute; left:9.8148cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
      line-height:1; letter-spacing:0.06em; color:#04205f; -webkit-text-stroke:0.0278cqw currentColor; }
.sec17 .col{ position:absolute; }
.sec17 .hr{ position:absolute; left:3.1481cqw; width:91.8519cqw; height:0.2778cqw; background:#d2d2d2; }
.sec17 .hc{ position:absolute; top:13.9815cqw; height:7.0370cqw; border-radius:0.7407cqw 0.7407cqw 0 0; }
.sec17 .ht{ position:absolute; top:16.1111cqw; white-space:nowrap; font-size:3.3324cqw; font-weight:700;
     line-height:1; letter-spacing:0.01em; }
.sec17 .cl{ position:absolute; white-space:nowrap; font-size:2.9630cqw; font-weight:700; line-height:1;
     letter-spacing:0.01em; color:#000; }
.sec17 .bd,.sec17 .bd2{ position:absolute; white-space:nowrap; font-size:3.7037cqw; line-height:1; color:#000; }
.sec17 .bd{ left:3.2407cqw; font-weight:500; letter-spacing:-0.075em; }
.sec17 .bd2{ left:4.4444cqw; font-weight:500; letter-spacing:-0.025em; }
.sec17 .bd2.blb{ color:#0f42b5; }
.sec17 .bd2 .nv{ color:#001890; font-weight:700; } /* comp：前半だけ紺の太字 */
.sec17 /* 「全国家庭教師協会」はPSDで横70%程度に圧縮されている（検収R3の右端切れ対策） */
.htsq{ letter-spacing:0.01em; display:inline-block; transform:scaleX(0.775); transform-origin:left top; }
.sec17 /* 表の縦罫線（検収R2で欠落を検出・comp実測 #6c6c6c） */
.vr{ position:absolute; background:#6c6c6c; }
.sec17 .vr.vro{ background:#9c9c9c; }

.sec17 .tframe{ position:absolute; left:3.5185cqw; top:20.9259cqw; width:91.2963cqw; height:27.2222cqw; box-sizing:border-box;
         border:solid; border-color:#bfbfbf #bfbfbf #6c6c6c; border-width:0 0.0926cqw 0.1852cqw; border-radius:0 0 2.7778cqw 2.7778cqw; pointer-events:none; } /* comp実測 x38〜1023・下端30619 */

/* ===== sec18（高さ 1560px） ===== */
.sec18{ background:#fff; }
.sec18 .inner_wrap{ aspect-ratio:1080/1560; }
.sec18 /* s18 切替え手順5ステップ（見出し〜STEP1）  実座標 y=31543..33103 / top = 実座標 - 31543 */






.sched{ position:absolute; left:2.0370cqw; top:0; width:92.4074cqw; height:33.1481cqw; }
.sec18 .h1{ position:absolute; left:4.7222cqw; top:39.8148cqw; white-space:nowrap; font-size:5.3537cqw; font-weight:700;
     line-height:1; letter-spacing:-0.033em; color:#04205f; }
.sec18 .dash{ position:absolute; top:48.0556cqw; height:0.3704cqw;
       background-image:repeating-linear-gradient(to right,#0647c8 0 1.0185cqw,transparent 1.0185cqw 1.8148cqw); }
.sec18 .dashL{ left:5.4630cqw;  width:41.1111cqw; }
.sec18 .dashR{ left:52.5926cqw; width:42.6852cqw; }
.sec18 .notch{ position:absolute; width:3.4259cqw; height:0.3704cqw; background:#0647c8; }
.sec18 .nL{ left:47.0370cqw; top:47.8704cqw; transform:rotate(37deg);  transform-origin:left top; }
.sec18 .nR{ left:50.0000cqw; top:49.9074cqw; transform:rotate(-37deg); transform-origin:left top; }
.sec18 .ld{ position:absolute; white-space:nowrap; font-size:3.7037cqw; font-weight:500; line-height:1;
     letter-spacing:-0.05em; color:#000; }
.sec18 .scard{ position:absolute; left:2.9630cqw; top:75.0000cqw; width:92.2222cqw; height:64.1667cqw; box-sizing:border-box;
        background:#fff; border:0.1852cqw solid #c4f0ff; border-radius:1.2963cqw;
        box-shadow:0 0.2778cqw 0.9259cqw rgba(10,69,180,.08); }
.sec18 .sbadge{ position:absolute; left:5.5556cqw; top:73.3333cqw; width:8.1481cqw; height:11.2963cqw; }
.sec18 .sbt{ position:absolute; left:5.5556cqw; top:74.6296cqw; width:8.1481cqw; text-align:center; color:#fff;
      font-family:"Bebas Neue",sans-serif; line-height:1; font-size:1.6667cqw; /* strut を縮小に追従（1080で継承値18pxと同値） */ }
.sec18 .sbt .sb1{ font-size:2.0370cqw; letter-spacing:0.05em; }
.sec18 .sbt .sb2{ font-size:4.8148cqw; }
.sec18 .stl{ position:absolute; left:16.2037cqw; top:78.1481cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
      line-height:1; letter-spacing:-0.025em; color:#0a45b4; }
.sec18 .pill{ position:absolute; left:65.4630cqw; top:77.5000cqw; width:26.7593cqw; height:4.6296cqw; background:#ffa200; border-radius:2.3148cqw; }
.sec18 .pillt{ position:absolute; left:69.3519cqw; top:78.5185cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:700;
        line-height:1; letter-spacing:-0.05em; color:#fff; }
.sec18 .sph{ position:absolute; left:65.6481cqw; top:85.2778cqw; width:26.4815cqw; height:23.7037cqw; overflow:hidden; border-radius:0.7407cqw; }
.sec18 .sph img{ position:absolute; left:-5.0000cqw; top:0.1852cqw; width:37.5000cqw; height:25.7407cqw; }
.sec18 .sbd{ position:absolute; left:6.2037cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:500; line-height:1;
      letter-spacing:-0.05em; color:#000; }
.sec18 .vbox{ position:absolute; left:5.9259cqw; top:110.1852cqw; width:87.5926cqw; height:26.4815cqw; box-sizing:border-box;
       background:#fff; border:0.1852cqw solid #dbe8fb; border-radius:0.9259cqw; }
.sec18 .vhd{ position:absolute; left:4.1667cqw; top:110.1852cqw; width:89.4444cqw; height:7.9630cqw; background:#e3f0ff; border-radius:0.9259cqw; }
.sec18 .vic{ position:absolute; left:36.1111cqw; top:111.9444cqw; width:4.4444cqw; height:4.6296cqw; }
.sec18 .vht{ position:absolute; left:43.6111cqw; top:113.3333cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:700;
      line-height:1; letter-spacing:-0.05em; color:#0a45b4; }
.sec18 .vsep{ position:absolute; top:120.3704cqw; width:0.1852cqw; height:13.8889cqw; background:#e6eef9; }
.sec18 .v1{ left:34.5370cqw; }
.sec18 .v2{ left:64.8148cqw; }
.sec18 .vt{ position:absolute; top:121.0185cqw; text-align:center; white-space:nowrap; font-size:3.3333cqw;
     font-weight:700; line-height:4.0741cqw; letter-spacing:-0.05em; color:#0a45b4; }
.sec18 .vt3{ top:120.0000cqw; }
.sec18 .vs{ position:absolute; top:125.9259cqw; text-align:center; white-space:nowrap; font-size:2.9630cqw;
     font-weight:500; line-height:3.3333cqw; letter-spacing:-0.05em; color:#000; }

/* ===== sec19（高さ 3050px） ===== */
.sec19{ background:#fff; overflow:visible; overflow-x:clip; } /* STEPバッジが上端から18pxはみ出す設計。縦だけはみ出しを許可（横は切る＝横スクロールを出さない） */
.sec19 .inner_wrap{ aspect-ratio:1080/3050; }
.sec19 /* s19 STEP2〜5  実座標 y=33103..36153 / canvas内 top = 実座標 - 33103 */






.scard{ position:absolute; left:2.9630cqw; width:92.2222cqw; box-sizing:border-box; background:#fff;
        border:0.1852cqw solid #c4f0ff; border-radius:1.2963cqw; box-shadow:0 0.2778cqw 0.9259cqw rgba(10,69,180,.08); }
.sec19 .sbadge{ position:absolute; left:5.5556cqw; width:8.1481cqw; height:11.2963cqw; }
.sec19 .sbt{ position:absolute; left:5.5556cqw; width:8.1481cqw; text-align:center; color:#fff;
      font-family:"Bebas Neue",sans-serif; line-height:1; font-size:1.6667cqw; /* strut を縮小に追従（1080で継承値18pxと同値） */ }
.sec19 .sbt .sb1{ font-size:2.0370cqw; letter-spacing:0.05em; font-family:var(--font-psd); font-weight:700; }
.sec19 .sbt .sb2{ font-size:4.8148cqw; }
.sec19 .stl{ position:absolute; left:16.2037cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
      line-height:1; letter-spacing:-0.025em; color:#0a45b4; }
.sec19 .stl2{ left:16.2963cqw; line-height:4.4444cqw; }
.sec19 .pill{ position:absolute; height:4.6296cqw; background:#ffa200; border-radius:2.3148cqw; }
.sec19 .pillt{ position:absolute; white-space:nowrap; font-size:2.7778cqw; font-weight:700; line-height:1;
        letter-spacing:-0.05em; color:#fff; }
.sec19 .pillt.s24{ font-size:2.2222cqw; }
.sec19 .sph{ position:absolute; overflow:hidden; border-radius:0.7407cqw; }
.sec19 .sph img{ position:absolute; }
.sec19 .sbd{ position:absolute; white-space:nowrap; font-size:2.7778cqw; font-weight:500; line-height:1;
      letter-spacing:-0.05em; color:#000; }
.sec19 .sbd--trial-copy{
  left:6.2037cqw;
  top:18.3333cqw;
  width:87.3148cqw;
  height:10.5556cqw;
  white-space:normal;
}
.sec19 .sbd--trial-copy .sbd__line{
  position:absolute;
  left:0;
  display:block;
  white-space:nowrap;
  line-height:1;
}
.sec19 .sbd--trial-copy .sbd__line--trial-1{
  top:0;
  letter-spacing:-0.09em;
}
.sec19 .sbd--trial-copy .sbd__line--trial-2{ top:3.8889cqw; }
.sec19 .sbd--trial-copy .sbd__line--trial-3{ top:7.7778cqw; }
.sec19 .sbd.bl{ color:#0a45b4; font-weight:700; }
.sec19 .sbd.bh{ color:#000; font-weight:700; } .sec19 .sbd.bh .dt{ color:#0a45b4; } /* comp：STEP5の箇条見出しは黒の太字・補足行は黒の細字 */
.sec19 .vbox{ position:absolute; left:5.9259cqw; width:87.5926cqw; box-sizing:border-box; background:#fff;
       border:0.1852cqw solid #c4f0ff; border-radius:2.7778cqw; }
.sec19 .vbox.vbo{ border-color:#ffeac6; } .sec19 .vbox.vby{ border-color:#ffd89b; }
/* 見出し帯は箱(.vbox)の枠の内側に収める（旧版は箱より左右に広かった） */
.sec19 .vhd{ position:absolute; left:6.1111cqw; width:87.2222cqw; background:#e3f0ff; border-radius:2.5926cqw 2.5926cqw 0 0; }
.sec19 .vhd.vo{ background:#ffe7be; }
.sec19 .vhd.vy{ background:#ffe7be; }
.sec19 .vic{ position:absolute; width:4.4444cqw; height:4.6296cqw; }
.sec19 .vht{ position:absolute; white-space:nowrap; font-size:2.7778cqw; font-weight:700; line-height:1;
      letter-spacing:-0.05em; color:#0a45b4; }
.sec19 .vht.vho{ color:#ff8400; }
.sec19 .vht.vhy{ color:#ffa200; }
.sec19 .vli{ position:absolute; white-space:nowrap; font-size:2.9630cqw; font-weight:500; line-height:1;
      letter-spacing:0.02em; color:#000; }
.sec19 .vli.vo4{ color:#000; }
.sec19 .vli.vy4{ color:#ffa200; }
.sec19 .vt4{ position:absolute; text-align:center; white-space:nowrap; font-size:2.9630cqw; font-weight:700;
      line-height:3.7037cqw; letter-spacing:-0.05em; color:#0a45b4; }
.sec19 .vt4.vy4{ color:#ffa200; }
.sec19 .vt4:not(.vy4){ text-align:left; } /* comp：青い「確認しておきたいこと」の項目は左揃え */
.sec19 .vli .dt{ color:#ff9020; }
.sec19 .warn{ position:absolute; left:5.8333cqw; width:87.4074cqw; height:14.0741cqw; box-sizing:border-box;
       background:#fff; border:0.3704cqw solid #ff7894; border-radius:1.8519cqw; } /* comp：白地にピンクの枠 */
.sec19 .wic{ position:absolute; left:8.0556cqw; width:8.7963cqw; height:10.2778cqw; }
.sec19 .wt{ position:absolute; white-space:nowrap; font-size:2.6852cqw; font-weight:500; line-height:1;
     letter-spacing:-0.05em; color:#ff6586; font-weight:700; }
.sec19 .vbox.vlast{ background:#ffe7bd; border-color:#ffaa17; border-radius:1.8519cqw; }
.sec19 .vli.vy4{ color:#f8a000; font-weight:700; letter-spacing:-0.02em; } /* comp：注記は濃い橙の太字 */

/* ===== sec20（高さ 2471px） ===== */
.sec20{ background:#f4f8fd; }
.sec20 .inner_wrap{ aspect-ratio:1080/2471; }
.sec20 /* s20 ケース別1〜3  実座標 y=36153..38624 / canvas内 top = 実座標 - 36153 */






.bg{ position:absolute; left:-0.2778cqw; top:0; width:100.7407cqw; height:228.7963cqw; background:#f4f8fd; }
.sec20 .h1{ position:absolute; left:0.3704cqw; top:7.0370cqw; width:100.0000cqw; text-align:center; white-space:nowrap;
     font-size:5.5407cqw; font-weight:700; line-height:1; letter-spacing:0.062em; color:#04205f; }
.sec20 .h2{ position:absolute; left:-0.4630cqw; top:15.2778cqw; width:100.0000cqw; text-align:center; white-space:nowrap;
     font-size:4.4444cqw; font-weight:700; line-height:1; letter-spacing:0.057em; color:#0647c8; }
.sec20 .dash{ position:absolute; top:22.0370cqw; height:0.3704cqw;
       background-image:repeating-linear-gradient(to right,#0647c8 0 1.0185cqw,transparent 1.0185cqw 1.8148cqw); }
.sec20 .dashL{ left:5.5556cqw;  width:41.0185cqw; }
.sec20 .dashR{ left:52.5926cqw; width:42.6852cqw; }
.sec20 .notch{ position:absolute; width:3.4259cqw; height:0.3704cqw; background:#0647c8; }
.sec20 .nL{ left:47.1296cqw; top:21.8519cqw; transform:rotate(37deg);  transform-origin:left top; }
.sec20 .nR{ left:50.0000cqw; top:23.8889cqw; transform:rotate(-37deg); transform-origin:left top; }
.sec20 .ld{ position:absolute; left:4.6296cqw; white-space:nowrap; font-size:3.3324cqw; font-weight:500;
     line-height:1; letter-spacing:0.025em; color:#333; }

/* sec20導入文：1行固定による右端のはみ出しを、この段落だけ解除する。 */
.sec20 .copy-block:first-of-type > .ld.copy-line {
  width: 90.7407cqw;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.55;
}
.sec20 .ccard{ position:absolute; left:4.6296cqw; width:90.8333cqw; background:#fff; border-radius:1.1111cqw;
        box-shadow:0 0.3704cqw 1.2963cqw rgba(36,90,189,.12); }
.sec20 .cpan{ position:absolute; left:4.6296cqw; width:28.7963cqw; height:55.3704cqw; overflow:hidden; border-radius:1.1111cqw; }
.sec20 .cpan img{ position:absolute; }
.sec20 .cno{ position:absolute; left:4.5370cqw; width:10.0926cqw; height:10.2778cqw; border-radius:1.1111cqw 0 1.1111cqw 0; }
.sec20 .cnt{ position:absolute; left:4.5370cqw; width:10.0926cqw; text-align:center; font-size:2.0611cqw; font-weight:700;
      line-height:2.4731cqw; letter-spacing:0.01em; color:#fff; }
.sec20 .cnt .cn2{ display:inline-block; font-family:"Bebas Neue",sans-serif; font-size:5.7407cqw; line-height:1; font-weight:400; margin-top:0.3cqw; } /* comp：番号は細長い大きな数字（字高43px） */
.sec20 .cbar{ position:absolute; left:35.2778cqw; width:0.7407cqw; height:8.8889cqw; border-radius:0.3704cqw; }
.sec20 .ctl{ position:absolute; left:36.6667cqw; white-space:nowrap; font-size:3.7037cqw; font-weight:700;
      line-height:1; letter-spacing:-0.01em; }
.sec20 .csb{ position:absolute; left:36.7593cqw; white-space:nowrap; font-size:3.3333cqw; font-weight:700;
      line-height:1; letter-spacing:-0.01em; color:#ff8a00; }
.sec20 .cbd{ position:absolute; left:35.6481cqw; white-space:nowrap; font-size:2.9630cqw; font-weight:500;
      line-height:1; letter-spacing:-0.01em; color:#000; }
.sec20 .cbd30{ left:35.1852cqw; font-size:2.7778cqw; }
.sec20 .cpp{ position:absolute; left:35.8333cqw; white-space:nowrap; font-size:2.7778cqw; font-weight:700;
      line-height:1; letter-spacing:-0.01em; color:#000; }
.sec20 .cpp .dt{ color:#5802af; } .sec20 .cpp.sub{ font-weight:500; } .sec20 .cpp .sm{ font-size:2.2222cqw; } /* comp：●だけ紫・見出し黒太字・補足黒細字 */
.sec20 .cbtn{ position:absolute; left:36.0185cqw; width:56.7593cqw; height:7.0370cqw; background:#ff8a00; border-radius:3.5185cqw; }
.sec20 .cbtt{ position:absolute; left:36.0185cqw; width:56.7593cqw; text-align:center; white-space:nowrap;
       font-size:2.9630cqw; font-weight:700; line-height:1; letter-spacing:0.01em; color:#fff; }
.sec20 .ctri{ position:absolute; left:89.8148cqw; width:0; height:0;
       border-left:0.9259cqw solid #fff; border-top:0.7407cqw solid transparent; border-bottom:0.7407cqw solid transparent; }
.sec20 .course-link,
.sec21 .course-link{ display:block; text-decoration:none; }
.sec20 .course-link .cbtt,
.sec21 .course-link .cbtt{ left:0; top:2.2222cqw; }
.sec20 .course-link .ctri,
.sec21 .course-link .ctri{ left:53.7963cqw; top:2.9630cqw; }

/* ===== sec21（ケース4・5） ===== */
.sec21 {
  background: #f4f8fd;
}

.sec21 .inner_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1296cqw;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  container-type: inline-size;
}

.sec21 .inner_wrap > * {
  position: static;
  left: auto;
  top: auto;
  margin-block: 0;
}

.sec21 .case-card {
  display: grid;
  grid-template-columns: 28.7963cqw minmax(0, 1fr);
  width: 90.8333cqw;
  min-height: 54.2593cqw;
  overflow: hidden;
  background: #fff;
  border-radius: 1.1111cqw;
  box-shadow: 0 0.3704cqw 1.2963cqw rgba(36, 90, 189, .12);
}

.sec21 .case-card--5 {
  min-height: 64.3519cqw;
}

.sec21 .case-card__visual {
  display: grid;
  grid-template: 1fr / 1fr;
  min-width: 0;
  overflow: hidden;
}

.sec21 .case-card__visual > * {
  grid-area: 1 / 1;
}

.sec21 .case-card__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec21 .case-card--4 .case-card__visual > img {
  object-position: 37% center;
}

.sec21 .case-card--5 .case-card__visual > img {
  object-position: 34% center;
}

.sec21 .case-card__number {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10.0926cqw;
  height: 10.2778cqw;
  padding: .7cqw 0 .4cqw;
  box-sizing: border-box;
  border-radius: 1.1111cqw 0 1.1111cqw 0;
  background: #00a6b5;
  color: #fff;
  font-size: 2.0611cqw;
  font-weight: 700;
  line-height: 1;
}

.sec21 .case-card--5 .case-card__number {
  background: #ff541f;
}

.sec21 .case-card__number strong {
  margin-top: .25cqw;
  font-family: "Bebas Neue", sans-serif;
  font-size: 5.7407cqw;
  font-weight: 400;
  line-height: .82;
}

.sec21 .case-card__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 3.7963cqw 2.6852cqw 3.3333cqw 2.2222cqw;
  box-sizing: border-box;
}

.sec21 .case-card__content h3 {
  margin: 0;
  padding-left: .6481cqw;
  border-left: .7407cqw solid #00a6b5;
  color: #00a6b5;
  font-size: 3.7037cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.sec21 .case-card--5 .case-card__content h3 {
  border-color: #ff541f;
  color: #ff541f;
  letter-spacing: -.08em;
}

.sec21 .case-card__recommend {
  margin: .9cqw 0 0 1.4815cqw;
  color: #ff8a00;
  font-size: 3.3333cqw;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.03em;
}

.sec21 .case-card__copy {
  margin: 2.35cqw 0 0 0;
  color: #000;
  font-size: 2.9630cqw;
  font-weight: 500;
  letter-spacing: -.025em;
}

.sec21 .case-card--5 .case-card__copy {
  margin-top: 1.5cqw;
}

.sec21 .case-card__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56.7593cqw;
  min-height: 7.0370cqw;
  margin-top: auto;
  border-radius: 3.5185cqw;
  background: #ff8a00;
  color: #fff;
  text-decoration: none;
  font-size: 2.9630cqw;
  font-weight: 700;
  line-height: 1.25;
}

.sec21 .case-card__button::after {
  content: "";
  position: absolute;
  right: 2.037cqw;
  width: 0;
  height: 0;
  border-left: .9259cqw solid #fff;
  border-top: .7407cqw solid transparent;
  border-bottom: .7407cqw solid transparent;
}

.sec21 .tail {
  display: block;
  width: 92.2222cqw;
  height: auto;
  margin-top: 12.7778cqw;
}

/* ===== sec22（選ばれる5つの理由） ===== */
.sec22 {
  background: #fff;
}

.sec22 .inner_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3333cqw;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.2407cqw 0 4.6296cqw;
  aspect-ratio: auto;
  box-sizing: border-box;
  container-type: inline-size;
}

.sec22 .inner_wrap > * {
  position: static;
  left: auto;
  top: auto;
  margin-block: 0;
}

.sec22 .reason-intro {
  width: 86.4815cqw;
  margin: 0;
  color: #000;
  font-size: 3.7037cqw;
  font-weight: 500;
  line-height: 5.5556cqw;
  letter-spacing: -.06em;
}

.sec22 .reason-intro strong {
  color: #0848b0;
  font-weight: 700;
}

.sec22 .reason-card {
  display: grid;
  grid-template-columns: 8.1481cqw minmax(0, 1fr);
  column-gap: 1.3889cqw;
  width: 92.2222cqw;
  min-height: 36.1111cqw;
  padding: 3.1481cqw 2.2222cqw 2.4074cqw 3.4259cqw;
  box-sizing: border-box;
  border: .1852cqw solid #c4f0ff;
  border-radius: 1.2963cqw;
  background: #fff;
  box-shadow: 0 .3704cqw 1.1111cqw rgba(10, 69, 180, .08);
}

.sec22 .reason-card--2 {
  min-height: 47.5926cqw;
  border-color: #c3effe;
  background: #f4f9fe;
}

.sec22 .reason-card--3 {
  min-height: 51.6667cqw;
  border-color: #c9f9b7;
  background: #f5fef4;
}

.sec22 .reason-card--4 {
  min-height: 46.2037cqw;
  border-color: #ff921e;
  background: #fff4ef;
}

.sec22 .reason-card--5 {
  min-height: 36.1111cqw;
  border-color: #ffa7bd;
  background: #ffe7e7;
}

.sec22 .reason-card__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 8.1481cqw;
  height: 11.2963cqw;
  margin: -4.8148cqw 0 0;
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: #0a45b4;
  color: #fff;
  font-size: 2.9981cqw;
  font-weight: 700;
  line-height: 1;
}

.sec22 .reason-card--2 .reason-card__number { background: #2175d4; }
.sec22 .reason-card--3 .reason-card__number { background: #569e3a; }
.sec22 .reason-card--4 .reason-card__number { background: #ff8400; }
.sec22 .reason-card--5 .reason-card__number { background: #ef2c6c; }

.sec22 .reason-card__number strong {
  margin-top: .45cqw;
  font-family: "Bebas Neue", sans-serif;
  font-size: 5.9259cqw;
  font-weight: 400;
  line-height: .8;
}

.sec22 .reason-card__content {
  min-width: 0;
}

.sec22 .reason-card__content h3 {
  margin: 0;
  color: #0a45b4;
  font-size: 3.7037cqw;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.sec22 .reason-card--2 h3 { color: #2175d4; }
.sec22 .reason-card--3 h3 { color: #569e3a; }
.sec22 .reason-card--4 h3 { color: #ff8400; }
.sec22 .reason-card--5 h3 { color: #ef2c6c; }

.sec22 .reason-card__content h3 span {
  color: #f88800;
}

.sec22 .reason-card__content h3 small {
  display: block;
  margin-top: .5556cqw;
  font-size: 3.7037cqw;
  font-weight: 700;
}

.sec22 .reason-card__lead {
  margin: .9259cqw 0 0;
  color: #0050a8;
  font-size: 2.5926cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
}

.sec22 .reason-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26.4815cqw;
  align-items: center;
  gap: 2.037cqw;
  margin-top: 1.3889cqw;
}

.sec22 .reason-card--3 .reason-card__body {
  grid-template-columns: minmax(0, 1fr) 22.5926cqw;
}

.sec22 .reason-card__body p,
.sec22 .reason-card__summary {
  margin: 0 0 1.1cqw;
  color: #000;
  font-size: 2.7778cqw;
  font-weight: 500;
  letter-spacing: -.06em;
}

.sec22 .reason-card__body p:last-child {
  margin-bottom: 0;
}

.sec22 .reason-card__body img {
  display: block;
  width: 100%;
  max-height: 23.9815cqw;
  object-fit: contain;
}

.sec22 .reason-card__link {
  display: inline-block;
  margin-top: .6cqw;
  color: #0a45b4;
  font-size: 2.7778cqw;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
}

.sec22 .double-support {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  padding: 1.3cqw 1.2cqw;
  border: .1852cqw solid #2058a8;
  border-radius: .9259cqw;
  background: #fff;
}

.sec22 .double-support__item {
  display: grid;
  grid-template-columns: 4.537cqw minmax(0, 1fr);
  align-items: center;
  gap: .8cqw;
}

.sec22 .double-support__item > img {
  width: 100%;
  height: auto;
}

.sec22 .double-support__item h4 {
  margin: 0;
  color: #00469c;
  font-size: 3.3333cqw;
  font-weight: 700;
  line-height: 1.2;
}

.sec22 .double-support__item + .double-support__item h4 {
  color: #00a2ff;
}

.sec22 .double-support__item p {
  margin: .35cqw 0 0;
  font-size: 2.4cqw;
}

.sec22 .reason-card__summary {
  margin-top: 1.2cqw;
  margin-bottom: 0;
}

.sec22 .reason-cta {
  align-self: stretch;
  padding: 3.2407cqw 0 3.8889cqw;
  background: #fff4e5;
  text-align: center;
}

.sec22 .reason-cta > p {
  margin: 0 0 1.8519cqw;
  color: #655529;
  font-size: 3.3333cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .025em;
}

.sec22 .reason-cta > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6667cqw;
  width: 79.0741cqw;
  min-height: 11.0185cqw;
  margin: 0 auto;
  border-radius: 5.5556cqw;
  background: linear-gradient(#ff9500, #ff8900);
  color: #fff;
  font-size: 3.7037cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
}

.sec22 .reason-cta > a img {
  width: 4.8148cqw;
  height: auto;
}

.sec22 .reason-cta > a::after {
  content: "";
  position: absolute;
  right: 3.3333cqw;
  width: 2.2222cqw;
  height: 2.2222cqw;
  border-top: .6481cqw solid #fff;
  border-right: .6481cqw solid #fff;
  transform: rotate(45deg);
}

/* ===== sec23（高さ 5921px） ===== */
/* =========================================================================
   sec23 よくある質問（FAQ）
   通常フロー版
   ========================================================================= */

.sec23 {
  background: #fff;
}


/* =========================================================
   sec23全体
   ========================================================= */

/*
 * 元の
 * aspect-ratio:1080/5921;
 * はabsolute配置用だったため撤去。
 *
 * 内容量に応じて高さを自動決定する。
 */
.sec23 .inner_wrap {
  position: relative;

  max-width: 1080px;
  width: 100%;

  margin: 0 auto;

  height: auto;
  min-height: 0;
  aspect-ratio: auto;

  box-sizing: border-box;

  padding-top: 10.8333cqw;
  padding-bottom: 8cqw;

  container-type: inline-size;
}


/*
 * 共通指定
 *
 * .sec .inner_wrap > * {
 *   position:absolute;
 * }
 *
 * をsec23だけ解除。
 */
.sec23 .inner_wrap > * {
  position: relative;
  left: auto;
  top: auto;
}


/* =========================================================
   見出し
   ========================================================= */

.sec23 > .inner_wrap > .hg {
  position: relative;

  left: auto;
  top: auto;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  font-size: inherit;
  font-weight: normal !important;
  line-height: normal;
}


/*
 * 共通
 * .sec .hg > * { position:absolute; }
 * を解除。
 */
.sec23 > .inner_wrap > .hg > .fh {
  position: static;

  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  text-align: center;
  white-space: nowrap;

  font-size: 5.7407cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  color: #224eb1;
}


/* =========================================================
   FAQ一覧
   ========================================================= */

.sec23 .faq_list {
  position: relative;

  width: 100%;

  margin-top: 10.5556cqw;
}


/* =========================================================
   FAQ 1件
   ========================================================= */

.sec23 .faq_item {
  position: relative;

  width: 90.6481cqw;

  margin: 0 auto;

  padding:
    4.2cqw
    0
    6.5cqw;

  box-sizing: border-box;

  border-top: 0.2778cqw solid #224eb1;

  /*
   * 元座標由来の固定高さは持たせない。
   */
  height: auto;
  min-height: 0;
}


/*
 * 最後のFAQのみ下側に少し余白。
 */
.sec23 .faq_item:last-child {
  padding-bottom: 3cqw;
}


/* =========================================================
   質問
   ========================================================= */

.sec23 .faq_question {
  position: relative;

  /*
   * Q番号＋質問文を常に横並び。
   */
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  width: 100%;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  font-size: inherit;
  font-weight: normal;
  line-height: normal;
}


/* =========================================================
   Q番号
   ========================================================= */

.sec23 .ql {
  position: relative;

  /*
   * 縮ませない。
   * スマホでも必ず質問文の左に残す。
   */
  flex: 0 0 8.7037cqw;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 8.7037cqw;
  height: 8.6111cqw;

  margin: 0;

  box-sizing: border-box;

  border-radius: 50%;

  background: #224eb1;

  text-align: center;
  white-space: nowrap;

  font-family: "Bebas Neue", sans-serif;
  font-size: 5.5556cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;

  color: #fff;

  z-index: 1;
}


/*
 * 元の青い三角。
 *
 * 装飾なのでabsolute使用。
 */
.sec23 .ql::after {
  content: "";

  position: absolute;

 right: -0.2cqw;
    bottom: 0.4cqw;

  width: 0;
  height: 0;

  border-top: 2.6852cqw solid #224eb1;
  border-left: 1.4815cqw solid transparent;
  border-right: 1.3889cqw solid transparent;

  transform: rotate(-20deg);

  z-index: -1;
}


/*
 * Q10のみ元デザインと同じく縮小。
 */
.sec23 .ql.q10 {
  font-size: 4.0741cqw;
}


/* =========================================================
   質問本文
   ========================================================= */

.sec23 .qt {
  position: static;

  /*
   * Q番号以外の残り幅をすべて使用。
   */
  flex: 1 1 auto;

  min-width: 0;

  margin-left: 2.2cqw;

  padding-top: 1.25cqw;

  /*
   * ここがスマホ対応で重要。
   * nowrapは禁止。
   */
  white-space: normal;

  font-size: 3.7037cqw;
  font-weight: 700;

  line-height: 1.45;

  letter-spacing: -0.025em;

  color: #224eb1;

  overflow-wrap: anywhere;
  word-break: normal;
}


/* =========================================================
   回答本文
   ========================================================= */

.sec23 .qa {
  position: static;

  width: 100%;

  /*
   * 元は回答文が左約50px。
   * faq_item自体を90.6481cqwにしているため、
   * その中ではほぼ左端でよい。
   */
  margin:
    3.2cqw
    0
    0;

  padding: 0;

  box-sizing: border-box;

  white-space: normal;

  font-size: 3.3333cqw;
  font-weight: 500;

  letter-spacing: 0.01em;

  color: #202020;

  overflow-wrap: break-word;
  word-break: normal;
}


/* =========================================================
   リンク
   ========================================================= */

.sec23 .qa a {
  position: static;

  display: inline;
}


/* =========================================================
   旧装飾要素
   ========================================================= */

/*
 * HTMLにまだ残っていても非表示にする。
 *
 * Q丸は .ql 自身、
 * 三角は .ql::after
 * で描くため不要。
 */
.sec23 .qc,
.sec23 .qtri {
  display: none;
}


/*
 * 旧区切り線もfaq_itemのborder-topに移行したため不要。
 */
.sec23 .sep {
  display: none;
}


/* =========================================================
   旧補助クラス
   ========================================================= */

.sec23 .qa.yk,
.sec23 .qa.ykp,
.sec23 .qt.ykp {
  position: static;

  left: auto;
  top: auto;
}


/* =========================================================
   スマホ
   ========================================================= */

@media screen and (max-width: 600px) {

  /*
   * Q番号と質問文はこの幅でもflex-rowを維持。
   */
  .sec23 .faq_question {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .sec23 .ql {
    flex-shrink: 0;
  }

  .sec23 .qt {
    flex: 1 1 auto;
    min-width: 0;

    white-space: normal;
  }

}
/* ===== sec24：体験フロー・最終CTA（通常フロー版） ===== */
.sec24{ background:#fff; }
.sec24 .inner_wrap{ aspect-ratio:auto; height:auto; padding-bottom:7cqw; box-sizing:border-box; }
.sec24 .inner_wrap>*{ position:static; left:auto; top:auto; width:auto; height:auto; margin:0; }
.sec24 .inner_wrap > .sec24__hero{ display:block; width:100%; max-width:100%; height:auto; }
.sec24__flow{ margin:6cqw 3.3cqw 0 !important; padding:4cqw 3.2cqw 3.2cqw; border-radius:1.3cqw; background:#e2ecff; }
.sec24__flow h2{ margin:0 0 2.7cqw; color:#002765; font-size:3.7cqw; text-align:center; }
.sec24__steps{ display:flex; flex-direction:column; gap:2.2cqw; }
.sec24__steps article{ display:grid; grid-template-columns:13cqw 1fr; align-items:center; gap:3cqw; min-height:13.5cqw; padding:1cqw 2cqw; border-radius:.95cqw; background:#fff; }
.sec24__steps img{ width:12cqw; max-height:12cqw; object-fit:contain; }
.sec24__steps p{ color:#002f7a; font-size:3.15cqw; font-weight:700; line-height:1.45; }
.sec24__steps small{ font-size:.9em; }
.sec24__flow-note{ margin-top:2.8cqw !important; color:#002f7a; font-size:3cqw; font-weight:700; line-height:1.55; text-align:center; }
.sec24 .inner_wrap > .sec24__promo{ display:block; width:100%; max-width:100%; height:auto; margin-top:4cqw !important; }
.sec24__buttons{ display:flex; flex-direction:column; gap:2.2cqw; margin:4cqw auto 0 !important; width:79cqw !important; }
.sec24__button{ position:relative; display:flex; align-items:center; justify-content:center; min-height:10.9cqw; padding:1cqw 6cqw 1cqw 4cqw; box-sizing:border-box; border-radius:5.5cqw; color:#fff !important; font-size:3.6cqw; font-weight:700; text-decoration:none !important; text-align:center; }
.sec24__button::after{ content:""; position:absolute; right:3.5cqw; width:2cqw; height:2cqw; border-top:.6cqw solid #fff; border-right:.6cqw solid #fff; transform:rotate(45deg); }
.sec24__button--trial{ background:linear-gradient(#ff9600,#ff8c00); }
.sec24__button--contact{ background:linear-gradient(#4079e9,#2f66d8); }
.sec24__tel{ display:block; width:70cqw !important; margin:5cqw auto 0 !important; }
.sec24__tel img{ width:100%; height:auto; }


/* ===== 文字詰め（Photoshop の文字組み設定の再現）=====
   PSD はテキストレイヤーごとに「詰めなし／約物半角／プロポーショナルメトリクス」が混在している。
   comp と行幅を実測し、最も一致する設定をブロック単位で付与（2026-09-10 再検収で追加）。
     .yk  … 約物（・（）「」、。）だけ半角（halt）。かな・漢字の字幅は変えない
     .ykp … かな・約物をプロポーショナル（palt）＝Photoshop の「プロポーショナルメトリクス」 */
.sec .yk { font-feature-settings:"halt"; }
.sec .ykp{ font-feature-settings:"palt"; }


/* =========================================================================
   Semantic paragraph normalization
   PSD由来の「1行=1p」を「1段落=1p + 行span」へ統合。
   copy-block 自体はボックスを生成せず、旧各行の座標・装飾をそのまま維持する。
   ========================================================================= */
.sec .copy-block {
  display: contents;
}

.sec .copy-block > .copy-line {
  position: absolute;
  display: block;
  margin: 0;
}

/* =========================================================
   Component nesting compatibility patch
   DOM上の親子構造を正規化しつつ、既存の座標系を維持する。
   ========================================================= */

/*
 * ラッパー自体は描画ボックスを作らない。
 * これにより、既存の absolute 座標は従来どおり inner_wrap を基準にできる。
 */
.sec .cmp-group {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/*
 * 元CSSの
 *   .sec .inner_wrap > * { position:absolute; margin:0; }
 * が、入れ子化した子要素には直接当たらなくなるため同じ指定を継承。
 */
.sec .cmp-group > * {
  position: absolute;
  margin: 0;
}

/* anchor化したコンポーネント配下でリンク装飾を発生させない */
.sec a.cmp-group,
.sec a.cmp-group:hover,
.sec a.cmp-group:focus,
.sec a.cmp-group:visited {
  color: inherit;
  text-decoration: none;
}

/* =========================================================================
   sec26：家庭教師と塾の併用パターン
   通常フロー（Grid / block / table）で構成し、装飾以外のabsoluteは使用しない。
   ========================================================================= */
.sec26 {
  background: #fff;
  color: #202020;
}

.sec26 .inner_wrap {
  display: flex;
  flex-direction: column;
  gap: 4.8cqw;
  height: auto;
  padding: 4.2cqw 4.15cqw 7cqw;
  box-sizing: border-box;
  aspect-ratio: auto;
}

.sec26 .inner_wrap > * {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.sec26 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sec26__heading {
  position: relative !important;
  padding-bottom: 4.6cqw;
  text-align: center;
}

.sec26__heading h2 {
  margin: 0;
  color: #00285f;
  font-size: 5.15cqw;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .055em;
}

.sec26__heading p {
  margin-top: 1.3cqw !important;
  color: #0647c8;
  font-size: 3.7cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}

.sec26__heading::after {
  content: "";
  position: absolute;
  right: 1cqw;
  bottom: 0;
  left: 1cqw;
  height: .37cqw;
  background:
    repeating-linear-gradient(
      to right,
      #165ab6 0 1.15cqw,
      transparent 1.15cqw 1.9cqw
    ) left / calc(50% - 4cqw) 100% no-repeat,
    repeating-linear-gradient(
      to right,
      #165ab6 0 1.15cqw,
      transparent 1.15cqw 1.9cqw
    ) right / calc(50% - 4cqw) 100% no-repeat;
}

.sec26__heading::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -1.25cqw;
  left: 50%;
  width: 3cqw;
  height: 3cqw;
  border-right: .37cqw solid #165ab6;
  border-bottom: .37cqw solid #165ab6;
  transform: translateX(-50%) rotate(45deg);
}

.sec26__lead {
  padding: 0 1.2cqw;
  font-size: 3.05cqw;
  font-weight: 500;
  letter-spacing: .025em;
}

.sec26__patterns {
  display: flex;
  flex-direction: column;
  gap: 5cqw;
}

.sec26-card {
  --sec26-accent: #2764c6;
  --sec26-pale: #d9efff;
  --sec26-muted: #3c78bd;
  display: grid;
  grid-template-columns: 13cqw minmax(0, 1fr);
  grid-template-areas:
    "badge title"
    "badge target"
    "media copy";
  gap: 1.4cqw 4.2cqw;
  overflow: hidden;
  padding: 0 2cqw 2.2cqw 0;
  border: .15cqw solid #b9c8dd;
  border-radius: 2.2cqw;
  background: #fff;
  box-shadow: 0 .65cqw .65cqw rgba(21, 75, 145, .32);
}

.sec26-card--blue {
  --sec26-accent: #2764c6;
  --sec26-pale: #d9efff;
  --sec26-muted: #3c78bd;
}

.sec26-card--orange {
  --sec26-accent: #ff920d;
  --sec26-pale: #fff8cf;
  --sec26-muted: #e29a34;
}

.sec26-card--purple {
  --sec26-accent: #7200d4;
  --sec26-pale: #f2d9ff;
  --sec26-muted: #9a67c2;
}

.sec26-card__badge {
  grid-area: badge;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12.7cqw;
  padding: 1cqw .8cqw;
  border-radius: 2cqw;
  background: var(--sec26-accent);
  color: #fff;
  text-align: center;
}

.sec26-card__badge span {
  font-size: 2.45cqw;
  font-weight: 700;
  line-height: 1.2;
}

.sec26-card__badge strong {
  display: block;
  margin-top: .35cqw;
  font-family: "Roboto", "Yu Gothic", sans-serif;
  font-size: 6cqw;
  font-weight: 700;
  line-height: 1;
}

.sec26-card h3 {
  grid-area: title;
  align-self: end;
  margin: 0;
  padding-top: 1.5cqw;
  color: var(--sec26-accent);
  font-size: 3.6cqw;
  font-weight: 700 !important;
  line-height: 1.35;
}

.sec26-card__target {
  grid-area: target;
  align-self: start;
  margin: 0;
  padding: 1.2cqw 2.3cqw;
  border-radius: 1.3cqw;
  background: var(--sec26-pale);
  color: var(--sec26-muted);
  font-size: 2.75cqw;
  font-weight: 500;
  line-height: 1.35;
}

.sec26-card__media {
  grid-area: media;
  align-self: stretch;
  min-height: 25cqw;
  margin: 1.6cqw 0 0 2cqw;
  overflow: hidden;
  border-radius: .8cqw;
  background: #eef3f7;
}

.sec26-card__copy {
  grid-area: copy;
  align-self: center;
  margin: 1.6cqw 0 0;
  font-size: 2.85cqw;
  font-weight: 500;
  letter-spacing: .012em;
}

.sec26-comparison {
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
}

.sec26-comparison h3 {
  margin: 0;
  color: #00285f;
  font-size: 3.85cqw;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: .14em;
  text-align: center;
}

.sec26-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: .18cqw solid #bfc4ca;
  border-radius: 1.8cqw;
  background: #fff;
  box-sizing: border-box;
}

.sec26 table {
  display: table;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.sec26-table__label {
  width: 19.5%;
}

.sec26 col:nth-child(2) {
  width: 40.25%;
}

.sec26 col:nth-child(3) {
  width: 40.25%;
}

.sec26 th,
.sec26 td {
  min-width: 0;
  padding: 1.6cqw 1.5cqw;
  border-right: .15cqw solid #c5c5c5;
  border-bottom: .15cqw solid #c5c5c5;
  color: #080808;
  font-size: 2.55cqw;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.sec26 tr > :last-child {
  border-right: 0;
}

.sec26 tbody tr:last-child > * {
  border-bottom: 0;
}

.sec26 thead th {
  padding: 1.4cqw;
  background: #0660d0;
  color: #fff;
  font-size: 3cqw;
  text-align: center;
}

.sec26 thead th:first-child {
  background: #f2f2f2;
}

.sec26 thead th:last-child {
  background: #003d80;
}

.sec26 tbody th {
  background: #d8f3ff;
  font-size: 2.85cqw;
  text-align: center;
}

.sec26__note {
  padding: 0 1.2cqw;
  font-size: 2.75cqw;
  font-weight: 500;
  letter-spacing: .015em;
}

/* =========================================================================
   通常フロー化済みセクション：本文行間の共通化

   common.css の body { line-height: 2; } を継承する。
   見出し・ボタン・表・バッジなど、部品固有の行間は変更しない。
   common.css のモバイル指定は font-size のみで line-height の変更が
   ないため、ここでもメディアクエリによる上書きは設けない。
   ========================================================================= */
:is(
  .sec01,
  .sec02,
  .sec03,
  .sec04,
  .sec06,
  .sec21,
  .sec22,
  .sec23,
  .sec26
) .inner_wrap {
  line-height: inherit;
}

/* =========================================================================
   原本照合補正（2026-09-20）
   対象: 画像切れ / 画像差し替え防止 / 背景色・見出し装飾の復元
   ========================================================================= */

/* sec07・sec11：原本の左右破線＋中央V字ノッチを復元 */
.comparison-heading p::after{
  left:5.5556cqw;
  right:4.7222cqw;
  bottom:0;
  height:.3704cqw;
  background:
    repeating-linear-gradient(to right,#0647c8 0 1.0185cqw,transparent 1.0185cqw 1.8148cqw) left / calc(50% - 3cqw) 100% no-repeat,
    repeating-linear-gradient(to right,#0647c8 0 1.0185cqw,transparent 1.0185cqw 1.8148cqw) right / calc(50% - 3cqw) 100% no-repeat;
}
.comparison-heading p::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  bottom:-1.15cqw;
  width:2.8cqw;
  height:2.8cqw;
  border-right:.3704cqw solid #0647c8;
  border-bottom:.3704cqw solid #0647c8;
  transform:translateX(-50%) rotate(45deg);
  transform-origin:center;
  box-sizing:border-box;
}

/* sec05：原本のコールアウト背景色へ戻す */
.sec05__callout{
  background:#f1f6ff;
}

/* sec09：原本の表配色を復元（共通テーブル色の上書き） */
.sec09 .comparison-table thead th:nth-child(3){ background:#00275d; }
.sec09 .comparison-table thead th:nth-child(4){ background:#224eb1; }
.sec09 .comparison-table tbody td:last-child{ background:#eef9ff; }
.sec09__summary{
  background:#fff8db;
  border:.1852cqw solid #ffc478;
  border-radius:2.7778cqw;
}
.sec09__summary strong{ color:#f80018; }

/* sec10：原本の表配色・説明ボックス背景を復元 */
.sec10 .comparison-table thead th:nth-child(3){ background:#00275d; }
.sec10 .comparison-table thead th:nth-child(4){ background:#224eb1; }
.sec10 .comparison-table tbody td:last-child{ background:#fbfdff; }
.sec10__explanation{ background:#fdfefd; }

/* sec11：新規refactorで入ったcover/max-heightを撤去。画像全体を表示する */
.sec11__photo{
  width:calc(100% - 4cqw);
  max-width:calc(100% - 4cqw);
  max-height:none;
  height:auto;
  object-fit:contain;
  object-position:center;
}