@charset "utf-8";

/* ==========================================================================
   Mepath 総合型選抜塾 LP（mepath.jp）専用の追加スタイル

   ・配色・タイポ・ボタン・カード・アニメーションは css/home.css をそのまま使う
   ・構成とレイアウトの型は Crimson Education のサービスページを参考にしている
       - ヘッダー直下に領域名を並べた追従サブナビ（現在地に下線）
       - 領域ごとに「課題の大見出し → 宣言 → 4項目 → 実例」を反復
       - 4項目は中央の写真の四隅に配置
       - 独立した1画面の引用
       - 画面下に常時出ている相談バー
   ・新しいクラスはすべて lp_ プレフィックス（home.css との衝突を避けるため）
   ========================================================================== */

/* --------------------------------------------------
   追従サブナビ（領域名の横並び）
-------------------------------------------------- */
.lp_subnav {
  position: sticky;
  top: 64px;
  z-index: 45;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(214, 238, 240, 0.9);
}

.lp_subnav__list {
  display: flex;
  gap: 4px;
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lp_subnav__list::-webkit-scrollbar {
  display: none;
}

.lp_subnav__list a {
  position: relative;
  display: block;
  padding: 14px 12px 13px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #8a9aa3;
}

.lp_subnav__list a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--grad-bold);
  transform: scaleX(0);
  transform-origin: center;
}

.lp_subnav__list a.is_here {
  color: #323b4b;
}

.lp_subnav__list a.is_here::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .lp_subnav__list a::after {
    transition: transform 0.25s ease;
  }
}

/* 表紙で使う色は2つだけ。ブランドの軸（ライム→グリーン→ブルー）を
   枠線として成立する濃さまで落としたもの */
:root {
  /* 新ロゴ（濃紺の「Me」＋ ティール → グリーン → ライムの「path」、
     マークの深い青）から取った色。文字・枠線用は白地で読める濃さまで落としている */
  --mp-1: #1c94a4;      /* ティール（ロゴの #30b0b8 系）。主色：枠線・ボタン・強調 */
  --mp-1-light: #3bbcc4; /* 明るいティール。グラデーションや薄い装飾用 */
  --mp-2: #46b389;      /* グリーン（ロゴの #5fc497 系）。枠線用 */
  --mp-ac: #c4d93f;     /* ライム（ロゴの h の色）。線・点だけに使う */
  --mp-dark: #142f55;   /* 深い青（ロゴマーク左の #113d70 系）。濃い色面用 */
  --mp-ink: #323b4b;    /* 濃紺グレー（ロゴの「Me」）。見出し */
}

/* --------------------------------------------------
   表紙（マイプロジェクトの見せ方を参考に、色はMepathの系統で）
   ・すべての箱は「色の枠 + ずらした同色の影」で作る
   ・メインの写真は3枚が入れ替わる
   ・見出しは写真の左下に重ねた色面の中に置く
-------------------------------------------------- */

/* 上を流れる帯 */
.mp_ticker {
  overflow: hidden;
  background: var(--mp-1);
  color: #fff;
}

.mp_ticker__row {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
}

.mp_ticker__row span {
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mp_ticker__row b {
  margin-right: 10px;
  font-weight: 700;
}

.mp_ticker__row i {
  margin-left: 22px;
  font-size: 8px;
  font-style: normal;
  color: var(--mp-ac);
  vertical-align: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .mp_ticker__row {
    animation: mp_ticker 38s linear infinite;
  }

  @keyframes mp_ticker {
    to {
      transform: translateX(-50%);
    }
  }
}

/* 土台 */
.mp_hero {
  position: relative;
}

.mp_hero__side {
  display: none;
}

/* 色の枠 + ずらした影。マイプロの箱の作り方（他のセクションで使う） */
.mp_frame {
  position: relative;
  display: block;
  padding: 11px;
  border: 2px solid var(--c, var(--mp-1));
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--c, var(--mp-1));
}

/* ---- 全幅の写真 ---- */
.mp_stage {
  position: relative;
}

.mp_slides {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 560px;
}

.mp_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.mp_slide.is_on {
  opacity: 1;
}

.mp_slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mp_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 表紙の4枚は 12:5 にトリミング済み（PC用）。スマホは <picture> で元の縦長めの写真に差し替える */
  object-position: var(--sp, 50% 30%);
}

/* 写真を少し明るく、白いカードが馴染むように */
.mp_slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .mp_slide {
    transition: opacity 0.8s ease;
  }
}

/* ---- 写真の左に重ねる濃い色面 ---- */
.mp_shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 47, 85, 0.92) 0%,
    rgba(20, 47, 85, 0.86) 46%,
    rgba(20, 47, 85, 0.35) 78%,
    rgba(20, 47, 85, 0.15) 100%);
  pointer-events: none;
}

/* ---- 白い文字 ---- */
.mp_copy {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding-top: 34px;
  color: #fff;
}

.mp_copy__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

.mp_copy__label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--mp-ac);
  vertical-align: 3px;
}

.mp_copy__ttl {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: #fff;
}

.mp_copy__ttl em {
  font-style: normal;
}

.mp_copy__ttl em span {
  position: relative;
  display: inline-block;
}

.mp_copy__ttl em span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.06em;
  left: 0;
  height: 0.14em;
  border-radius: 2px;
  background: var(--mp-ac);
  transform-origin: left center;
}

.mp_copy__text {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);
}

.mp_copy__k {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.mp_copy__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mp_copy__btns a {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(10, 36, 50, 0.72);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: no-preference) {
  .mp_copy__ttl em span::after {
    animation: mp_underline 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms both;
  }

  @keyframes mp_underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .mp_copy > * {
    animation: mp_copy_in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .mp_copy__label { animation-delay: 0.05s; }
  .mp_copy__ttl   { animation-delay: 0.15s; }
  .mp_copy__text  { animation-delay: 0.28s; }
  .mp_copy__k     { animation-delay: 0.38s; }
  .mp_copy__btns  { animation-delay: 0.46s; }

  @keyframes mp_copy_in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .mp_copy__btns a {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
}

@media (hover: hover) {
  .mp_copy__btns a:hover {
    border-color: var(--mp-ac);
    background: rgba(10, 36, 50, 0.9);
  }
}

/* スライドの点 */
.mp_dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  transform: translateX(-50%);
}

.mp_dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9d2cd;
  cursor: pointer;
}

.mp_dots button.is_on {
  width: 22px;
  border-radius: 999px;
  background: var(--mp-1);
}

.mp_dots button:focus-visible {
  outline: 2px solid var(--mp-2);
  outline-offset: 3px;
}

/* ---- 4つの入口 ---- */
.mp_links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mp_link {
  padding: 9px;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mp_link img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  object-fit: cover;
  object-position: 50% 28%;
}

.mp_chip {
  position: absolute;
  bottom: 4px;
  left: 0;
  padding: 8px 12px;
  border: 1.5px solid var(--c);
  border-radius: 9px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--c);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #323b4b;
}

@media (any-hover: hover) {
  .mp_link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--c);
  }
}

/* --------------------------------------------------
   導入の1画面（マイプロの大見出しの型を、Mepathの色で）
-------------------------------------------------- */
.mp_quote {
  padding-block: 72px 80px;
  background: #fff;
}

.mp_quote__inner {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: 20px;
  text-align: center;
}

/* 大きな英字＋その下の日本語。マイプロの見出しの組み方 */
.mp_disp {
  line-height: 1;
}

.mp_disp__en {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: clamp(38px, 12.5vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.06em;
  color: var(--mp-1);
}

.mp_disp__ja {
  display: block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #323b4b;
}

/* 高校生本人の声 */
.mp_quote__voice {
  margin-top: 42px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: #323b4b;
}

/* 答えの説明 */
.mp_quote__lead {
  margin-top: 22px;
  font-size: 15px;
  line-height: 2.1;
  color: #5f6b72;
}

.mp_quote__lead + .mp_quote__lead {
  margin-top: 16px;
}

.mp_quote__body {
  position: relative;
  margin-top: 40px;
  padding-top: 38px;
}

/* 語りと主張のあいだに、細い区切り線をひとつ */
.mp_quote__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 2px;
  background: var(--mp-ac);
  transform: translateX(-50%);
}

.mp_quote__text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: #323b4b;
}

.mp_quote__text mark {
  padding: 0 6px;
  background: linear-gradient(transparent 58%, rgba(196, 217, 63, 0.9) 58%);
  color: inherit;
}

.mp_quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 12px;
  line-height: 1.75;
  text-align: left;
  color: #8a9aa3;
}

.mp_quote__face {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 2px solid var(--mp-1);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.mp_quote__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.mp_quote__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #323b4b;
}

/* 行動 → 経験 → 関心 の循環 */
.mp_cycle {
  display: grid;
  gap: 14px;
  margin-top: 48px;
}

.mp_cycle__item {
  position: relative;
  padding: 22px 20px 24px;
  border: 2px solid var(--mp-1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
  text-align: left;
}

.mp_cycle__item + .mp_cycle__item::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 30px;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--mp-1);
  border-bottom: 2.5px solid var(--mp-1);
  transform: rotate(45deg);
}

.mp_cycle__num {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--mp-1);
}

.mp_cycle__ttl {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #323b4b;
}

.mp_cycle__text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

.mp_cycle__loop {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #7a8c96;
}

/* --------------------------------------------------
   目指せる大学（横に流す）
-------------------------------------------------- */
.lp_marquee {
  position: relative;
  margin-top: 0;
  border-top: 0;
  padding-block: 26px 30px;
  border-top: 1px solid rgba(50, 59, 75, 0.07);
  /* 会社HPのリボン（ライム→グリーン→ブルー）を、ごく薄く帯に敷く */
  background:
    linear-gradient(90deg,
      rgba(196, 217, 63, 0.16),
      rgba(143, 208, 142, 0.16) 48%,
      rgba(59, 188, 196, 0.16)),
    #fff;
}

.lp_marquee__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-inline: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: #5f6b72;
}

.lp_marquee__label::before,
.lp_marquee__label::after {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--mp-ac);
}

.lp_marquee__win {
  display: grid;
  gap: 8px;
  /* ピルの右下に落とす影のぶん、下に余白を確保する */
  padding-bottom: 3px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lp_marquee__row {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  gap: 10px;
}

/* 2列目は半ピル分ずらして、上下で目地が揃わないようにする */
.lp_marquee__row--back {
  margin-left: -58px;
}

.lp_marquee__row li {
  border-radius: 999px;
}

.lp_marquee__row li:nth-child(3n + 2) {
  --c: var(--mp-2);
}

.lp_marquee__row li span {
  display: block;
  padding: 8px 18px;
  border: 2px solid var(--c, var(--mp-1));
  border-radius: 999px;
  /* 枠と、少しだけずらした同色の影。マイプロの作法をピルにも */
  box-shadow: 2px 2px 0 var(--c, var(--mp-1));
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #323b4b;
}

@media (prefers-reduced-motion: no-preference) {
  .mp_dots button {
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .lp_marquee__row {
    animation: lp_marquee 42s linear infinite;
  }

  .lp_marquee__row--back {
    animation-duration: 52s;
    animation-direction: reverse;
  }

  .lp_marquee__win:hover .lp_marquee__row {
    animation-play-state: paused;
  }

  @keyframes lp_marquee {
    to {
      transform: translateX(calc(-50% - var(--mq-half, 5px)));
    }
  }
}

/* ヘッダーも同じ「ずらした影」で揃える */
.header__cta {
  box-shadow: 2px 2px 0 var(--mp-1);
}

/* --------------------------------------------------
   最初のひと月
   ・「あなたがやること」と「Mepathがやること」を必ず対にして見せる
     （負担の小ささが、文章ではなく形で伝わるように）
   ・4つのカードは、うしろを走るブランドの線でつなぐ
-------------------------------------------------- */
.lp_first {
  background: linear-gradient(180deg, rgba(240, 249, 250, 0) 0%, rgba(240, 249, 250, 0.9) 16%, rgba(240, 249, 250, 0.9) 84%, rgba(240, 249, 250, 0) 100%);
}

.lp_track {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 40px;
}

/* カードをつなぐ線（スマホは縦） */
.lp_track::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 27px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c4d93f, #61c497, #3bbcc4);
  opacity: 0.35;
}

.lp_step {
  position: relative;
  padding: 22px 22px 24px 60px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_step__day {
  position: absolute;
  top: 22px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 28px;
  padding-block: 7px;
  border-radius: 999px;
  background: var(--grad-bold);
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  word-break: keep-all;
}

.lp_step__ttl {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #323b4b;
}

.lp_step__pair {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lp_step__you,
.lp_step__us {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.8;
}

.lp_step__you span,
.lp_step__us span {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lp_step__you {
  color: #323b4b;
  font-weight: 500;
}

.lp_step__you span {
  background: #eef3f6;
  color: #5f6b72;
}

.lp_step__us {
  color: #5f6b72;
}

.lp_step__us span {
  background: rgba(212, 228, 120, 0.4);
  color: #5a7a2f;
}

/* しめくくり */
.lp_first__close {
  display: grid;
  gap: 0;
  max-width: 860px;
  margin: 34px auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
  overflow: hidden;
}

.lp_first__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 32%;
}

.lp_first__words {
  padding: 26px 24px 28px;
}

.lp_first__lead {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  color: #323b4b;
}

.lp_first__lead strong {
  background: linear-gradient(transparent 62%, rgba(212, 228, 120, 0.9) 62%);
}

.lp_first__note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #9fb0b9;
}

@media (min-width: 768px) {
  .lp_track {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 52px;
  }

  /* 線は横に走らせる */
  .lp_track::before {
    top: 34px;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, #c4d93f, #61c497, #3bbcc4);
  }

  .lp_step {
    padding: 26px 22px 28px;
  }

  .lp_step__day {
    position: static;
    width: -webkit-fit-content;
    width: fit-content;
    padding: 5px 13px;
    font-size: 11.5px;
  }

  .lp_step__ttl {
    margin-top: 12px;
  }

  .lp_first__close {
    grid-template-columns: 300px 1fr;
    align-items: stretch;
  }

  .lp_first__photo {
    height: 100%;
  }

  .lp_first__photo img {
    height: 100%;
    aspect-ratio: auto;
  }

  .lp_first__words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 36px;
  }

  .lp_first__lead {
    font-size: 20px;
  }
}

/* --------------------------------------------------
   引用の1画面（Crimsonの見せ方をブランド色で）
-------------------------------------------------- */
.lp_quote {
  padding-block: 72px;
  background: #fff;
}

.lp_quote__inner {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 20px;
  text-align: center;
}

.lp_quote__text {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: #323b4b;
}

.lp_quote__text mark {
  background: linear-gradient(transparent 60%, rgba(212, 228, 120, 0.9) 60%);
  color: inherit;
}

.lp_quote__by {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #8a9aa3;
}

.lp_quote__by strong {
  display: block;
  font-size: 14px;
  color: #323b4b;
}

/* --------------------------------------------------
   領域ブロック（6回くり返す）
-------------------------------------------------- */
.lp_dom {
  position: relative;
  padding-block: 84px;
}

/* 薄い方眼。会社HPの下地を、セクションごとに敷き分ける */
.lp_dom--tint {
  background:
    repeating-linear-gradient(0deg, rgba(28, 148, 164, 0.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(28, 148, 164, 0.045) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(240, 249, 250, 0) 0%, rgba(240, 249, 250, 0.9) 14%, rgba(240, 249, 250, 0.9) 86%, rgba(240, 249, 250, 0) 100%);
}

.lp_dom__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* 見出しの上のラベル。ページ中のチップと同じ作法で */
.lp_dom__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 2px solid var(--mp-1);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--mp-1);
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mp-1);
}

.lp_dom__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-ac);
}

.lp_dom__ttl {
  margin-top: 24px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.005em;
  color: #323b4b;
}

/* 強調はライムの下線で。淡いグラデ文字は読みにくいのでやめる */
.lp_dom__ttl em {
  font-style: normal;
  color: var(--mp-1);
  background: linear-gradient(transparent 72%, rgba(196, 217, 63, 0.45) 72%);
}

.lp_dom__text {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.95;
  color: #5f6b72;
}

.lp_dom__we {
  margin-top: 34px;
  text-align: center;
}

.lp_dom__we_label {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2.5px solid;
  border-image: var(--grad-bold) 1;
  font-size: 15px;
  font-weight: 700;
  color: #323b4b;
}

.lp_dom__we_text {
  max-width: 680px;
  margin: 14px auto 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: #5f6b72;
}

/* ---- 4項目（中央に写真、四隅にカード） ---- */
.lp_quad {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.lp_quad__photo {
  order: -1;
  overflow: hidden;
  border-radius: 16px;
  filter: var(--paper-shadow);
}

.lp_quad__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp_quad__item {
  padding: 20px 20px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_quad__num {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-bold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp_quad__ttl {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #323b4b;
}

.lp_quad__text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

/* ---- 写真のない領域は4枚を素直に並べる ---- */
.lp_quad--flat .lp_quad__photo {
  display: none;
}

/* ---- 領域の補足（タグ・注記） ---- */
.lp_dom__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.lp_dom__tags span {
  padding: 5px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(50, 59, 75, 0.07);
  font-size: 12.5px;
  font-weight: 500;
  color: #5b8296;
}

.lp_dom__note {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
  font-size: 13.5px;
  line-height: 1.9;
  color: #5f6b72;
}

.lp_dom__note strong {
  color: #323b4b;
}

/* --------------------------------------------------
   チームの考え方（6つの役割）
-------------------------------------------------- */
.lp_roles {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.lp_roles__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 16px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_roles__name {
  font-size: 14px;
  font-weight: 700;
  color: #323b4b;
  white-space: nowrap;
}

.lp_roles__what {
  font-size: 13.5px;
  line-height: 1.8;
  color: #5f6b72;
}

/* --------------------------------------------------
   8ステップの循環（home.css の .flow を横並びに）
-------------------------------------------------- */
@media (min-width: 768px) {
  .flow.lp_flow8 {
    grid-template-columns: repeat(4, 1fr);
  }

  .flow.lp_flow8 .flow__item {
    padding: 20px 18px 22px;
  }
}

/* --------------------------------------------------
   成果の見方（数えない／見る）
-------------------------------------------------- */
.lp_crit {
  max-width: 860px;
  margin: 32px auto 0;
  padding: 28px 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_crit__ttl {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  color: #323b4b;
  text-align: center;
}

.lp_crit__cols {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.lp_crit__head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9fb0b9;
}

.lp_crit__list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.lp_crit__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.75;
}

.lp_crit__list--no li {
  color: #a9b8c0;
  text-decoration: line-through;
  text-decoration-color: #d7e1e6;
}

.lp_crit__list--no li::before {
  content: "—";
  position: absolute;
  left: 2px;
  color: #cfdae0;
  text-decoration: none;
}

.lp_crit__list--yes li {
  color: #5f6b72;
}

.lp_crit__list--yes li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
}

/* --------------------------------------------------
   悩み（高校生 / 保護者）
-------------------------------------------------- */
.lp_worry {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.lp_worry__col {
  padding: 26px 24px 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_worry__label {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: #e6f6f7;
  font-size: 11.5px;
  font-weight: 700;
  color: #1c94a4;
}

.lp_worry__list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lp_worry__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.8;
  color: #5f6b72;
}

.lp_worry__list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
}

.lp_soft {
  max-width: 760px;
  margin: 26px auto 0;
  padding: 26px 22px;
  border-radius: 16px;
  background: linear-gradient(140deg, #f6fbef, #e6f6f7);
  text-align: center;
}

.lp_soft__sub {
  font-size: 14px;
  color: #5f6b72;
}

.lp_soft__main {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  color: #323b4b;
}

/* --------------------------------------------------
   逆順（志望理由書 ← 志望理由 ← 経験）
-------------------------------------------------- */
.lp_rev {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.lp_rev__item {
  padding: 22px 22px 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
}

.lp_rev__when {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #a9b8c0;
}

.lp_rev__ttl {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #323b4b;
}

.lp_rev__text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

.lp_rev__item--here {
  background: linear-gradient(140deg, #f6fbef, #e6f6f7);
}

.lp_rev__item--here .lp_rev__when {
  color: #4f9a4f;
}

.lp_rev__arrow {
  display: grid;
  place-items: center;
  color: #a6cfe2;
}

.lp_rev__arrow svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------
   事例
-------------------------------------------------- */
.lp_case {
  margin-top: 34px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
  overflow: hidden;
}

.lp_case__head {
  padding: 28px 24px;
  background: linear-gradient(140deg, #f6fbef, #e6f6f7);
}

.lp_case__badge {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1c94a4;
}

.lp_case__who {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  color: #323b4b;
}

.lp_case__meta {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

.lp_case__status {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.lp_case__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 11px;
  background: #fff;
}

.lp_case__k {
  font-size: 12.5px;
  color: #8a9aa3;
  white-space: nowrap;
}

.lp_case__v {
  font-size: 14px;
  font-weight: 700;
  color: #323b4b;
  text-align: right;
}

.lp_case__v--wait {
  color: #a9b8c0;
}

.lp_case__body {
  padding: 28px 24px;
}

.lp_tl__item {
  position: relative;
  padding-bottom: 26px;
  padding-left: 28px;
}

.lp_tl__item:last-child {
  padding-bottom: 0;
}

.lp_tl__item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grad-bold);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d3edef;
}

.lp_tl__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  bottom: 2px;
  left: 9px;
  width: 1px;
  background: #d3edef;
}

.lp_tl__grade {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9fb0b9;
}

.lp_tl__ttl {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  color: #323b4b;
}

.lp_tl__text {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

.lp_honest {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid #e4ecf1;
  border-radius: 14px;
  background: #f7fbfd;
}

.lp_honest__ttl {
  font-size: 15px;
  font-weight: 700;
  color: #323b4b;
}

.lp_honest__text {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #5f6b72;
}

/* --------------------------------------------------
   料金
-------------------------------------------------- */
.lp_plan {
  margin-top: 34px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(20, 47, 85, 0.08);
  overflow: hidden;
}

.lp_plan__head {
  padding: 28px 24px;
  background: linear-gradient(140deg, #f6fbef, #e6f6f7);
}

.lp_plan__name {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: #323b4b;
}

.lp_plan__for {
  margin-top: 4px;
  font-size: 13.5px;
  color: #5f6b72;
}

.lp_plan__body {
  padding: 28px 24px;
}

.lp_plan__sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9fb0b9;
}

.lp_price {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed #e2e8ec;
}

.lp_price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 7px;
}

.lp_price__k {
  font-size: 14px;
  color: #5f6b72;
}

.lp_price__v {
  font-size: 15px;
  font-weight: 700;
  color: #323b4b;
}

.lp_price__row--main .lp_price__v {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 30px;
  line-height: 1.2;
}

.lp_price__v small {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13.5px;
}

.lp_price__tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #e6f6f7;
  font-size: 11.5px;
  font-weight: 700;
  color: #1c94a4;
}

.lp_notes {
  display: grid;
  gap: 7px;
  margin-top: 20px;
}

.lp_notes li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #8a9aa3;
}

.lp_notes li::before {
  content: "※";
  position: absolute;
  left: 0;
}

/* --------------------------------------------------
   FAQ
-------------------------------------------------- */
.lp_faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 34px auto 0;
}

.lp_faq__item {
  background: #fff;
  border: 2px solid #dfe4e1;
  border-radius: 14px;
  overflow: hidden;
}

.lp_faq__item[open] {
  border-color: var(--mp-1);
  box-shadow: 3px 3px 0 var(--mp-1);
}

.lp_faq__q {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  gap: 12px;
  align-items: start;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #323b4b;
  list-style: none;
  cursor: pointer;
}

.lp_faq__q::-webkit-details-marker {
  display: none;
}

.lp_faq__q::before {
  content: "Q";
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #7fd0d6;
}

.lp_faq__q::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 7px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239fb0b9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp_faq__item[open] .lp_faq__q::after {
  transform: rotate(180deg);
}

.lp_faq__a {
  padding: 0 20px 20px 56px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5f6b72;
}

@media (prefers-reduced-motion: no-preference) {
  .lp_faq__q::after {
    transition: transform 0.2s ease;
  }
}

/* --------------------------------------------------
   公開前に埋める箇所（本番では削除する）
-------------------------------------------------- */
.lp_todo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px dashed #d9a400;
  background: #fff3bf;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a6a00;
}

.lp_todo_block {
  max-width: 860px;
  margin: 20px auto 0;
  padding: 16px 18px;
  border: 1px dashed #d9a400;
  border-radius: 12px;
  background: #fffbe8;
  font-size: 13px;
  line-height: 1.9;
  color: #8a6a00;
}

/* --------------------------------------------------
   常時表示の相談バー（Crimson と同じ位置づけ）
-------------------------------------------------- */
body {
  padding-bottom: 72px;
}

.lp_bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(214, 238, 240, 0.9);
}

.lp_bar__text {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: #323b4b;
}

.lp_bar .btn {
  flex: 1;
  min-height: 48px;
}

/* 相談バーのボタンもヘッダーと同じブルー塗りに（home.css のグラデを上書き） */
.lp_bar .btn--primary {
  color: #fff;
  background: var(--mp-1);
  box-shadow: 0 4px 14px rgba(28, 148, 164, 0.28);
}

.lp_bar .btn--primary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .lp_bar .btn--primary:hover {
    background: #167f8d;
  }
}

/* --------------------------------------------------
   tablet / desktop
-------------------------------------------------- */
@media (min-width: 768px) {
  .lp_subnav__list {
    gap: 10px;
    justify-content: center;
    padding-inline: 20px;
  }

  .lp_subnav__list a {
    padding: 16px 14px 15px;
    font-size: 13.5px;
  }

  .mp_hero {
    padding-block: 28px 0;
  }

  /* 枠と写真の比率はマイプロに合わせる（メイン4:3、入口は正方形） */
  .mp_slides {
    aspect-ratio: 5 / 2;
    min-height: 0;
  }

  /* PCは 5:2 なので、トリミング済みの写真をほぼそのまま見せる */
  .mp_slide img {
    object-position: 50% 50%;
  }

  .mp_shade {
    background: linear-gradient(90deg,
      rgba(20, 47, 85, 0.96) 0%,
      rgba(20, 47, 85, 0.9) 30%,
      rgba(20, 47, 85, 0.55) 52%,
      rgba(20, 47, 85, 0.08) 72%,
      rgba(20, 47, 85, 0) 100%);
  }

  .mp_copy {
    top: 50%;
    max-width: none;
    padding-top: 0;
    padding-left: clamp(40px, 5.5vw, 88px);
    padding-right: 0;
    transform: translateY(-50%);
  }

  .mp_copy__label {
    font-size: 15px;
  }

  .mp_copy__ttl {
    max-width: 640px;
    margin-top: 18px;
    font-size: 50px;
    line-height: 1.32;
  }

  .mp_copy__text {
    max-width: 560px;
    margin-top: 22px;
    font-size: 16px;
  }

  .mp_copy__k {
    margin-top: 34px;
    font-size: 14.5px;
  }

  .mp_copy__btns {
    gap: 12px;
    margin-top: 12px;
  }

  .mp_copy__btns a {
    padding: 14px 28px;
    font-size: 14.5px;
  }

  .mp_dots {
    bottom: 22px;
  }

  .mp_links {
    gap: 18px;
  }

  .mp_chip {
    font-size: 12.5px;
    padding: 9px 14px;
  }

  .mp_cta {
    margin-top: 54px;
  }

  .lp_marquee {
    margin-top: 0;
    padding-block: 34px 40px;
  }

  .lp_marquee__label {
    gap: 16px;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .lp_marquee__label::before,
  .lp_marquee__label::after {
    width: 40px;
  }

  .lp_marquee__win {
    gap: 10px;
  }

  .lp_marquee__row {
    gap: 12px;
    --mq-half: 6px;
  }

  .lp_marquee__row--back {
    margin-left: -74px;
  }

  .lp_marquee__row li span {
    padding: 9px 24px;
    font-size: 14.5px;
  }

  .lp_quote {
    padding-block: 108px;
  }

  .lp_quote__text {
    font-size: 34px;
    line-height: 1.7;
  }

  .lp_dom {
    padding-block: 128px;
  }

  .lp_dom__label {
    padding: 7px 20px;
    font-size: 12.5px;
  }

  .lp_dom__ttl {
    margin-top: 30px;
    font-size: 44px;
  }

  .lp_dom__text {
    font-size: 15.5px;
  }

  /* 中央に写真、四隅に4項目 */
  .lp_quad {
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: center;
    margin-top: 48px;
  }

  .lp_quad__photo {
    order: 0;
    grid-row: 1 / 3;
    grid-column: 2;
    height: 100%;
    min-height: 420px;
  }

  .lp_quad__item:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .lp_quad__item:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .lp_quad__item:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .lp_quad__item:nth-of-type(4) { grid-column: 3; grid-row: 2; }

  .lp_quad--flat {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  .lp_quad--flat .lp_quad__item {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch;
  }

  .lp_roles {
    grid-template-columns: 1fr 1fr;
  }

  .lp_crit {
    padding: 36px 34px;
  }

  .lp_crit__cols {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }

  .lp_worry {
    grid-template-columns: 1fr 1fr;
  }

  .lp_soft__main {
    font-size: 22px;
  }

  .lp_rev {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
  }

  .lp_rev__arrow svg {
    transform: rotate(-90deg);
  }

  .lp_case {
    display: grid;
    grid-template-columns: 370px 1fr;
  }

  .lp_case__head,
  .lp_case__body {
    padding: 36px 32px;
  }

  .lp_plan {
    display: grid;
    grid-template-columns: 330px 1fr;
  }

  .lp_plan__head,
  .lp_plan__body {
    padding: 36px 32px;
  }

  .lp_bar {
    padding: 13px max(32px, calc((100vw - 1400px) / 2));
  }

  .lp_bar__text {
    display: block;
    font-size: 15.5px;
  }

  .lp_bar .btn {
    flex: 0 0 auto;
    min-width: 260px;
  }
}

/* --------------------------------------------------
   写真の帯（部活・日々の経験）
-------------------------------------------------- */
.lp_strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 860px;
  margin: 26px auto 0;
}

.lp_strip figure {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
}

.lp_strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp_strip__cap {
  max-width: 860px;
  margin: 14px auto 0;
  font-size: 13px;
  line-height: 1.85;
  color: #8a9aa3;
  text-align: center;
}

@media (min-width: 768px) {
  .lp_strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------
   ヘッダー(64px) + 追従サブナビ の分だけアンカー位置を下げる
   （home.css の scroll-padding-top: 80px を上書き）
-------------------------------------------------- */
html {
  scroll-padding-top: 124px;
}

.lp_dom__we_text strong {
  color: #323b4b;
}

/* ==========================================================================
   マイプロジェクトの構成に寄せたセクション部品
   ========================================================================== */

/* 共通のセクション殻 */
.mp_sec {
  padding-block: 72px;
}

.mp_sec--tint {
  background: #f4f8f4;
}

.mp_head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.mp_head__label {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-1);
}

.mp_head__ttl {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  color: #323b4b;
}

.mp_head__text {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.95;
  color: #5f6b72;
}

/* --------------------------------------------------
   とは?
-------------------------------------------------- */
.mp_about {
  padding-block: 76px;
  text-align: center;
}

.mp_about__label {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mp-1);
}

.mp_about__ttl {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #323b4b;
}

.mp_about__catch {
  margin-top: 22px;
}

.mp_about__catch span {
  display: inline-block;
  margin-bottom: 6px;
  padding: 0 8px;
  background: linear-gradient(transparent 60%, rgba(196, 217, 63, 0.85) 60%);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #323b4b;
}

.mp_about__text {
  max-width: 34em;
  margin: 20px auto 0;
  font-size: 14.5px;
  line-height: 2;
  text-align: left;
  color: #5f6b72;
}

.mp_about__more {
  margin-top: 34px;
}

/* --------------------------------------------------
   6つの役割（横スクロール）
-------------------------------------------------- */
.mp_rail {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  padding-inline: 20px;
  padding-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.mp_rail::-webkit-scrollbar {
  height: 6px;
}

.mp_rail::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #d3d9d2;
}

.mp_rail__card {
  position: relative;
  flex: 0 0 268px;
  scroll-snap-align: center;
  padding: 22px 20px 24px;
  border: 2px solid var(--c);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--c);
}

.mp_rail__num {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--c);
}

.mp_rail__ttl {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #323b4b;
}

.mp_rail__text {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

.mp_rail__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #f1f5f0;
  font-size: 11.5px;
  font-weight: 700;
  color: #5b7a89;
}

.mp_rail__note {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 13.5px;
  line-height: 1.95;
  text-align: center;
  color: #7a8c96;
}

/* --------------------------------------------------
   その他（3枚）
-------------------------------------------------- */
.mp_other {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.mp_other__card {
  padding: 24px 22px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mp_other__ttl {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #323b4b;
}

.mp_other__ttl::after {
  content: "→";
  margin-left: 8px;
  color: var(--c);
}

.mp_other__text {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5f6b72;
}

/* --------------------------------------------------
   最後のCTA
-------------------------------------------------- */
.mp_end {
  position: relative;
  overflow: hidden;
  padding-block: 84px 92px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #0f3e57 0%, #17618a 55%, #1c94a4 100%);
  text-align: center;
  color: #fff;
}

.mp_end__ttl {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

.mp_end__text {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
}

.mp_end__cards {
  display: grid;
  gap: 14px;
  margin-top: 40px;
}

.mp_end__card {
  display: block;
  padding: 22px 20px 24px;
  border: 2px solid var(--c);
  border-radius: 14px;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mp_end__who {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c);
}

.mp_end__do {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #323b4b;
}

.mp_end__do::after {
  content: "→";
  margin-left: 8px;
  color: var(--c);
}

@media (any-hover: hover) {
  .mp_other__card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--c);
  }

  .mp_end__card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.28);
  }
}

/* --------------------------------------------------
   フッターの事務局情報
-------------------------------------------------- */
.mp_office {
  margin-top: 30px;
  padding: 20px 22px;
  border-radius: 12px;
  background: #f4f8f4;
}

.mp_office__name {
  font-size: 13.5px;
  font-weight: 700;
  color: #323b4b;
}

.mp_office__row {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #7a8c96;
}

.mp_office__row a {
  color: #4a90ab;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .mp_sec {
    padding-block: 104px;
  }

  .mp_head__ttl {
    font-size: 36px;
  }

  .mp_head__text {
    font-size: 15.5px;
  }


  .mp_about {
    padding-block: 110px;
  }

  .mp_about__ttl {
    font-size: 42px;
  }

  .mp_about__catch span {
    font-size: 24px;
  }

  .mp_about__text {
    font-size: 15.5px;
  }

  .mp_rail {
    justify-content: center;
    margin-top: 48px;
    padding-inline: max(20px, calc((100vw - 1060px) / 2));
  }

  .mp_rail__card {
    flex: 0 0 300px;
  }

  .mp_other {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .mp_end {
    padding-block: 120px 128px;
  }

  .mp_end__ttl {
    font-size: 42px;
  }

  .mp_end__text {
    font-size: 15.5px;
  }

  .mp_end__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .mp_office {
    margin-top: 40px;
    padding: 26px 30px;
  }
}

@media (min-width: 768px) {
  .mp_quote {
    padding-block: 104px 112px;
  }

  .mp_disp__en {
    font-size: 92px;
    letter-spacing: 0.07em;
  }

  .mp_disp__ja {
    margin-top: 24px;
    font-size: 19px;
  }

  .mp_quote__face {
    width: 76px;
    height: 76px;
  }

  .mp_quote__by {
    gap: 18px;
    font-size: 12.5px;
  }

  .mp_quote__voice {
    margin-top: 52px;
    font-size: 31px;
    line-height: 1.7;
  }

  .mp_quote__lead {
    margin-top: 28px;
    font-size: 17px;
    line-height: 2.2;
  }

  .mp_quote__body {
    margin-top: 52px;
    padding-top: 48px;
  }

  .mp_quote__body::before {
    width: 44px;
  }

  .mp_quote__text {
    font-size: 31px;
    line-height: 1.75;
  }

  .mp_cycle__loop {
    margin-top: 28px;
    font-size: 14.5px;
  }

  .mp_cycle {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
  }

  .mp_cycle__item + .mp_cycle__item::before {
    top: 50%;
    left: -17px;
    margin-top: -5px;
    transform: rotate(-45deg);
  }
}

/* ==========================================================================
   2つのコース
   ========================================================================== */
.cr_tabs {
  margin-top: 36px;
}

.cr_tabs__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cr_tab {
  padding: 13px 10px;
  border: 2px solid #dfe4e1;
  border-radius: 14px;
  background: #fff;
  font-family: inherit;
  line-height: 1.4;
  color: #8a9aa3;
  cursor: pointer;
  text-align: center;
}

.cr_tab__grade {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cr_tab__name {
  display: block;
  margin-top: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cr_tab.is_on {
  border-color: var(--mp-1);
  background: var(--mp-1);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(28, 148, 164, 0.35);
}

.cr_panel {
  margin-top: 16px;
  padding: 26px 20px 24px;
  border: 2px solid var(--mp-1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.cr_panel--adm {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
}

.cr_badge {
  display: inline-block;
  padding: 5px 13px;
  border: 2px solid var(--mp-1);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mp-1);
}

.cr_panel--adm .cr_badge {
  border-color: var(--mp-2);
  color: var(--mp-2);
}

.cr_panel__name {
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--mp-1);
}

.cr_panel--adm .cr_panel__name {
  color: var(--mp-2);
}

.cr_panel__ttl {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  color: #323b4b;
}

.cr_panel__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5f6b72;
}

.cr_panel__body {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 2px solid #eef1ee;
}

.cr_sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a9aa3;
}

.cr_list {
  margin-top: 14px;
}

.cr_list li {
  font-size: 13.5px;
  line-height: 1.8;
  color: #323b4b;
}

.cr_goal {
  margin-top: 24px;
  padding: 18px 18px 17px;
  border-radius: 12px;
  background: #f5f9f3;
}

.cr_goal__k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mp-1);
}

.cr_panel--adm .cr_goal__k {
  color: var(--mp-2);
}

.cr_goal__v {
  margin-top: 9px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.85;
  color: #323b4b;
}

.cr_goal__v em {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.cr_goal__v em span {
  position: relative;
  z-index: 1;
}

.cr_goal__v em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.08em;
  left: 0;
  height: 0.4em;
  background: rgba(196, 217, 63, 0.85);
}

/* 2つをつなぐ一文 */
.cr_bridge {
  margin-top: 22px;
  padding: 18px 18px 17px;
  border: 2px dashed #cfd8d3;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
  color: #5f6b72;
  background: #fff;
}

.cr_bridge__flow {
  display: block;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mp-1);
}

.cr_bridge__flow i {
  margin: 0 8px;
  font-style: normal;
  color: var(--mp-2);
}

@media (prefers-reduced-motion: no-preference) {
  .cr_tab {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .cr_panel.is_on {
    animation: cr_fade 0.34s ease both;
  }

  @keyframes cr_fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (min-width: 768px) {
  .cr_tabs {
    margin-top: 46px;
  }

  .cr_tabs__nav {
    max-width: 620px;
    margin: 0 auto;
    gap: 12px;
  }

  .cr_tab {
    padding: 16px 12px;
  }

  .cr_tab__grade {
    font-size: 12.5px;
  }

  .cr_tab__name {
    font-size: 17px;
  }

  .cr_panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    margin-top: 22px;
    padding: 44px 46px 42px;
  }

  .cr_panel__name {
    font-size: 34px;
  }

  .cr_panel__ttl {
    font-size: 26px;
  }

  .cr_panel__text {
    font-size: 14.5px;
  }

  .cr_panel__body {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: 46px;
    border-left: 2px solid #eef1ee;
  }

  .cr_list li {
    font-size: 14.5px;
  }

  .cr_goal__v {
    font-size: 15.5px;
  }

  .cr_bridge {
    margin-top: 28px;
    padding: 22px;
    font-size: 14px;
  }

  .cr_bridge__flow {
    display: inline-block;
    margin: 0 14px 0 0;
    font-size: 13px;
  }
}

/* ==========================================================================
   対策の特徴
   ========================================================================== */
.ft_list {
  display: grid;
  gap: 26px;
  margin-top: 46px;
}

.ft_item {
  position: relative;
  padding: 32px 20px 24px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.ft_item:nth-child(even) {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
}

/* 番号は枠の左上にはみ出させる（表紙のチップと同じ作法） */
.ft_no {
  position: absolute;
  top: -18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--mp-1);
  border-radius: 50%;
  background: #fff;
  box-shadow: 2px 2px 0 var(--mp-1);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--mp-1);
}

.ft_item:nth-child(even) .ft_no {
  border-color: var(--mp-2);
  box-shadow: 2px 2px 0 var(--mp-2);
  color: var(--mp-2);
}

.ft_ttl {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  color: #323b4b;
}

.ft_text {
  margin-top: 13px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5f6b72;
}

.ft_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.ft_tags li {
  padding: 5px 11px;
  border: 1.5px solid #dfe4e1;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5f6b72;
}

.ft_note {
  margin-top: 30px;
  padding: 18px 18px 17px;
  border-left: 3px solid var(--mp-ac);
  border-radius: 0 12px 12px 0;
  background: #f7faf5;
  font-size: 12.5px;
  line-height: 1.95;
  color: #5f6b72;
}

@media (min-width: 768px) {
  .ft_list {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
    margin-top: 60px;
  }

  .ft_item {
    padding: 38px 32px 30px;
  }

  .ft_no {
    top: -22px;
    left: 26px;
    width: 52px;
    height: 52px;
    font-size: 19px;
  }

  .ft_ttl {
    font-size: 25px;
  }

  .ft_text {
    font-size: 14.5px;
  }

  .ft_note {
    margin-top: 44px;
    padding: 22px 24px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   専門家チーム
   ========================================================================== */
.tm_chart {
  --tm-line: #8fbfd9;
  margin-top: 40px;
  padding: 30px 16px 28px;
  border-radius: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(28, 148, 164, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(28, 148, 164, 0.05) 0 1px, transparent 1px 30px),
    #f2f9fa;
  text-align: center;
}

/* 共通のノード */
.tm_node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 2px solid var(--mp-1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #323b4b;
}

.tm_ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eaf3f8;
  color: var(--mp-1);
}

.tm_ico svg {
  width: 16px;
  height: 16px;
}

.tm_node--you {
  border-color: #c3ccd2;
  box-shadow: 3px 3px 0 #c3ccd2;
  color: #3f4c53;
}

.tm_node--you .tm_ico {
  background: #eef1ee;
  color: #6b7a82;
}

/* 相談 ⇅ 共有 */
.tm_link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 64px;
}

.tm_link__line {
  position: relative;
  width: 2.5px;
  height: 100%;
  background: var(--tm-line);
}

.tm_link__line::before,
.tm_link__line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  border-left: 2.5px solid var(--tm-line);
  border-top: 2.5px solid var(--tm-line);
}

.tm_link__line::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.tm_link__line::after {
  bottom: 0;
  transform: translateX(-50%) rotate(225deg);
}

.tm_link__tag {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tm_link__tag--l {
  background: var(--mp-1);
  color: #fff;
}

.tm_link__tag--r {
  border: 1.5px solid var(--mp-1);
  background: #fff;
  color: var(--mp-1);
}

/* ハブ */
.tm_node--hub {
  gap: 16px;
  max-width: 560px;
  padding: 20px 22px;
  border-color: var(--mp-1);
  background: var(--mp-1);
  box-shadow: 4px 4px 0 rgba(28, 148, 164, 0.32);
  text-align: left;
  color: #fff;
}

.tm_hub__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--mp-ac);
}

.tm_hub__icon svg {
  width: 24px;
  height: 24px;
}

.tm_hub__body b {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.tm_hub__body i {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.tm_hub__body small {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}

/* ハブから下へ */
.tm_drop {
  position: relative;
  width: 2.5px;
  height: 30px;
  margin: 0 auto;
  background: var(--tm-line);
}

.tm_drop::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--tm-line);
  border-bottom: 2.5px solid var(--tm-line);
  transform: translateX(-50%) rotate(45deg);
}

/* 5つの役割：スマホは2列 */
.tm_kids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 2.5px solid var(--tm-line);
  text-align: left;
}

.tm_kids > li:last-child {
  grid-column: 1 / -1;
}

.tm_kids .tm_node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 14px 14px 15px;
}

.tm_kids .tm_node b {
  font-size: 14px;
}

.tm_kids .tm_node small {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #7a8c96;
}

.tm_node em {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1e3;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #6d7a3f;
  vertical-align: 1px;
}

/* 担当者どうしの共有 */
.tm_share {
  position: relative;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-1);
}

.tm_share::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  border-top: 2px dashed var(--tm-line);
}

.tm_share span {
  position: relative;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f2f9fa;
}

.tm_caption {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.9;
  text-align: center;
  color: #7a8c96;
}

.tm_note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
  color: #9aa7ae;
}

@media (min-width: 768px) {
  .tm_chart {
    max-width: 1040px;
    margin: 56px auto 0;
    padding: 52px 44px 44px;
    border-radius: 28px;
  }

  .tm_node {
    padding: 16px 24px;
    font-size: 16px;
  }

  .tm_link {
    height: 76px;
    gap: 18px;
  }

  .tm_link__tag {
    font-size: 12px;
  }

  .tm_node--hub {
    gap: 20px;
    padding: 24px 30px;
  }

  .tm_hub__icon {
    width: 58px;
    height: 58px;
  }

  .tm_hub__icon svg {
    width: 28px;
    height: 28px;
  }

  .tm_hub__body b {
    font-size: 22px;
  }

  .tm_hub__body small {
    font-size: 13px;
  }

  .tm_drop {
    height: 34px;
  }

  /* 5つを横に並べ、上に1本の線を渡す */
  .tm_kids {
    position: relative;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 36px;
    padding-top: 0;
    border-top: 0;
  }

  .tm_kids::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 10%;
    right: 10%;
    height: 2.5px;
    background: var(--tm-line);
  }

  .tm_kids > li {
    position: relative;
  }

  .tm_kids > li::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 50%;
    width: 2.5px;
    height: 36px;
    background: var(--tm-line);
    transform: translateX(-1.25px);
  }

  .tm_kids > li:last-child {
    grid-column: auto;
  }

  .tm_kids .tm_node {
    padding: 18px 16px 18px;
  }

  .tm_kids .tm_node b {
    font-size: 15px;
  }

  .tm_kids .tm_node small {
    font-size: 12px;
  }

  .tm_share {
    margin-top: 22px;
    font-size: 12px;
  }

  .tm_caption {
    margin-top: 32px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   課外活動支援
   ========================================================================== */
.ac_open {
  display: grid;
  gap: 30px;
}

.ac_ttl {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--mp-1);
}

.ac_lead__k {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #323b4b;
}

.ac_lead__t {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5f6b72;
}

.ac_quote {
  position: relative;
  padding-left: 22px;
}

.ac_quote::before {
  content: "“";
  position: absolute;
  top: -0.18em;
  left: 0;
  font-family: "Poppins", serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--mp-ac);
}

.ac_quote__t {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.95;
  color: #323b4b;
}

.ac_quote__t em {
  font-style: normal;
  color: var(--mp-1);
}

.ac_quote__by {
  margin-top: 16px;
  font-size: 12px;
  color: #8a9aa3;
}

/* 4つの支援 */
.ac_rows {
  display: grid;
  gap: 44px;
  margin-top: 56px;
}

.ac_row {
  display: grid;
  gap: 22px;
}

.ac_row__no {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--mp-1);
}

.ac_row--flip .ac_row__no {
  color: var(--mp-2);
}

.ac_row__ttl {
  margin-top: 10px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  color: #323b4b;
}

.ac_row__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5f6b72;
}

/* 写真と、その上に重ねる小さなカード */
.ac_row__pic {
  position: relative;
  padding-bottom: 26px;
}

.ac_row__pic .mp_frame {
  display: block;
  padding: 9px;
  margin-left: 26px;
}

.ac_row__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.ac_card {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(210px, 60%);
  padding: 14px 15px 15px;
  border: 2px solid var(--mp-1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.ac_row--flip .ac_card {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
}

.ac_card__ttl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mp-1);
}

.ac_row--flip .ac_card__ttl {
  color: var(--mp-2);
}

/* チェックリスト風 */
.ac_check {
  display: grid;
  gap: 9px;
  margin-top: 11px;
}

.ac_check li {
  position: relative;
  height: 9px;
  margin-left: 22px;
  border-radius: 999px;
  background: #eef1ee;
}

.ac_check li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -22px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--mp-ac);
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l5 5L20 6' fill='none' stroke='%235cb072' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* マイルストーン風 */
.ac_mile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 18px;
}

.ac_mile::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 6px;
  left: 6px;
  border-top: 2px dashed #cfd8d3;
}

.ac_mile span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--mp-2);
  font-family: "Poppins", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

.ac_mile span:last-child {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* 3つのチップ */
.ac_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.ac_chips li {
  padding: 4px 10px;
  border: 1.5px solid #dfe4e1;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5f6b72;
}

/* 記録カード */
.ac_rec {
  margin-top: 11px;
}

.ac_rec > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed #e6ebe7;
}

.ac_rec > div:last-child {
  border-bottom: 0;
}

.ac_rec dt {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #8a9aa3;
}

.ac_rec dd {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: #eef1ee;
}

.ac_note {
  margin-top: 34px;
  font-size: 11.5px;
  color: #9aa7ae;
}

@media (min-width: 768px) {
  .ac_open {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .ac_ttl {
    margin-top: 18px;
    font-size: 52px;
  }

  .ac_lead__k {
    margin-top: 40px;
    font-size: 19px;
  }

  .ac_lead__t {
    font-size: 14px;
  }

  .ac_quote {
    padding-left: 34px;
  }

  .ac_quote::before {
    font-size: 58px;
  }

  .ac_quote__t {
    font-size: 25px;
    line-height: 2;
  }

  .ac_rows {
    gap: 88px;
    margin-top: 92px;
  }

  .ac_row {
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
  }

  .ac_row--flip .ac_row__body {
    order: 2;
  }

  .ac_row__ttl {
    font-size: 30px;
  }

  .ac_row__text {
    font-size: 14.5px;
  }

  .ac_row__pic {
    padding-bottom: 34px;
  }

  .ac_row__pic .mp_frame {
    padding: 11px;
    margin-left: 40px;
  }

  .ac_card {
    width: 240px;
    padding: 18px 18px 19px;
  }

  .ac_card__ttl {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   途中のCTA（濃い帯。ページの中盤に1本、強い拍を置く）
   ========================================================================== */
.mid_cta {
  position: relative;
  overflow: hidden;
  padding-block: 56px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px),
    linear-gradient(112deg, #114560 0%, #167f8d 58%, #1c94a4 100%);
  color: #fff;
}

.mid_cta__inner {
  display: grid;
  gap: 24px;
}

.mid_cta__ttl {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
}

.mid_cta__ttl em {
  font-style: normal;
  color: var(--mp-ac);
}

.mid_cta__text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
}

.mid_cta__btn {
  justify-self: start;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
}

@media (min-width: 768px) {
  .mid_cta {
    padding-block: 84px;
  }

  .mid_cta__inner {
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
  }

  .mid_cta__ttl {
    font-size: 34px;
  }

  .mid_cta__text {
    font-size: 15px;
  }

  .mid_cta__btn {
    justify-self: end;
    white-space: nowrap;
  }
}

/* ==========================================================================
   仕上げ：手ざわりを揃える
   ========================================================================== */

/* 押せるカードは、わずかに持ち上がる */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp_link,
  .ft_item,
  .cr_tab,
  .mid_cta__btn,
  .header__cta {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .mp_link:hover,
  .mid_cta__btn:hover,
  .header__cta:hover {
    transform: translate(-1px, -1px);
  }

  .mp_link:hover {
    box-shadow: 5px 5px 0 var(--c, var(--mp-1));
  }

  .mid_cta__btn:hover,
  .header__cta:hover {
    box-shadow: 4px 4px 0 var(--mp-1);
  }

  .ft_item:hover {
    transform: translate(-1px, -1px);
  }

  .cr_tab:not(.is_on):hover {
    border-color: var(--mp-1);
    color: var(--mp-1);
  }
}

/* キーボード操作のときだけ、はっきり分かる枠を出す */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--mp-1);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 見出しまわりの行間を、日本語に合わせて少し詰める */
.lp_dom__ttl,
.ac_row__ttl,
.cr_panel__ttl,
.ft_ttl,
.mid_cta__ttl {
  text-wrap: balance;
}

/* セクション同士の境目に、細い区切りを1本 */
.lp_dom + .lp_dom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--mp-ac);
  transform: translateX(-50%);
}

/* ==========================================================================
   見出しの英字キッカー（マイプロの型。線だけの大きな文字を、見出しの上に）
   ========================================================================== */
.lp_dom__en {
  display: block;
  margin-top: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(28, 148, 164, 0.55);
  text-stroke: 1.4px rgba(28, 148, 164, 0.55);
  user-select: none;
}

.lp_dom__en + .lp_dom__ttl {
  margin-top: 10px;
}

.lp_dom__en--left {
  margin-top: 14px;
  text-align: left;
}

.lp_dom__en--left + .ac_ttl {
  margin-top: 6px;
}

.lp_dom__en--light {
  margin-top: 0;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.6);
  text-stroke: 1.4px rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
  .lp_dom__en {
    margin-top: 22px;
    font-size: 72px;
    letter-spacing: 0.06em;
    -webkit-text-stroke-width: 1.8px;
  }

  .lp_dom__en + .lp_dom__ttl {
    margin-top: 8px;
  }

  .lp_dom__en--left {
    font-size: 60px;
  }
}

/* ==========================================================================
   角丸と影を、ページ全体でそろえる
   ========================================================================== */
.cr_panel,
.ft_item,
.mp_end__card {
  border-radius: 18px;
}

.cr_badge,
.tm_ex__tag {
  letter-spacing: 0.04em;
}

/* ==========================================================================
   ヘッダー（atama+の型：ロゴ＋2つのボタン、その下にナビ）
   ========================================================================== */
.lp_header__btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.lp_hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: #323b4b;
}

.lp_hbtn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* 配色はページ共通のブルー1色に統一（ライムは下線・点のみ）
   ・LINE：白地＋ブルーの枠（本文のピルと同じ型）
   ・無料個別相談：ブルー塗り＋白文字 */
.lp_hbtn--line {
  background: #fff;
  color: var(--mp-1);
  box-shadow: inset 0 0 0 1.5px var(--mp-1);
}

.lp_hbtn--main {
  background: var(--mp-1);
  color: #fff;
}

/* スマホ：LINEは隠して1つに絞る */
@media (max-width: 767px) {
  .lp_header .header__inner {
    gap: 8px;
  }

  .lp_hbtn--line {
    display: none;
  }

  .lp_hbtn--main {
    min-height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* PC：2段組み */
@media (min-width: 768px) {
  .lp_header .header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    padding-top: 14px;
  }

  .lp_header .header__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .lp_header .header__logo img {
    width: 140px;
  }

  .lp_header__btns {
    grid-column: 3;
    grid-row: 1;
    gap: 12px;
  }

  .lp_hbtn {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 14px;
  }

  .lp_hbtn svg {
    width: 20px;
    height: 20px;
  }

  .lp_header .header__nav {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lp_header .header__nav_list {
    justify-content: center;
    gap: 36px;
    padding: 14px 0 16px;
  }

  .lp_header .header__nav_list a {
    font-size: 14.5px;
    color: #323b4b;
  }

  .lp_header .header__nav_list a::after {
    background: var(--mp-1);
  }

  html {
    scroll-padding-top: 132px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp_hbtn {
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .lp_hbtn:hover {
    transform: translateY(-1px);
  }

  .lp_hbtn--line:hover {
    background: #e6f6f7;
  }

  .lp_hbtn--main:hover {
    background: #167f8d;
  }
}

/* 表紙：タブレット幅は写真を少し縦にして、文字が入る高さを確保 */
@media (min-width: 768px) and (max-width: 1023px) {
  .mp_slides {
    aspect-ratio: 16 / 10;
  }

  .mp_copy__ttl {
    font-size: 38px;
  }

  .mp_copy__text {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   表紙の直下：ページ内の目次（白い板を、表紙の下端に少し重ねる）
   ========================================================================== */
.mp_hero {
  background: #f4f7f5;
}

.mp_jump {
  position: relative;
  z-index: 2;
  padding: 36px 0 44px;
}

.mp_jump__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 0;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 47, 85, 0.12);
}

.mp_jump__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #323b4b;
  text-decoration: none;
}

/* 下向きのV */
.mp_jump__list a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2.5px solid var(--mp-1);
  border-bottom: 2.5px solid var(--mp-1);
  transform: rotate(45deg);
  margin-top: -2px;
}

@media (min-width: 768px) {
  .mp_jump {
    padding: 72px 0 84px;
  }

  .mp_jump__list {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 0;
    padding: 8px;
    border-radius: 20px;
  }

  .mp_jump__list a {
    gap: 8px;
    padding: 22px 8px 18px;
    font-size: 15px;
  }

  .mp_jump__list a::after {
    width: 10px;
    height: 10px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp_jump__list a {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .mp_jump__list a::after {
    transition: transform 0.2s ease;
  }

  .mp_jump__list a:hover {
    background: #eef5f9;
    color: var(--mp-1);
  }

  .mp_jump__list a:hover::after {
    transform: rotate(45deg) translate(2px, 2px);
  }
}

/* ==========================================================================
   塾長の言葉（明朝の大きな引用。1画面に、この言葉だけ）
   ========================================================================== */
.mp_say {
  padding-block: 96px;
  background: #faf9f5;
}

.mp_say__q {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.mp_say__text {
  position: relative;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: 0.03em;
  text-align: left;
  color: #323b4b;
}

/* 開き・閉じの引用符 */
.mp_say__text::before,
.mp_say__text::after {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1em;
  color: #323b4b;
}

.mp_say__text::before {
  content: "“ ";
}

.mp_say__text::after {
  content: " ”";
}

.mp_say__text em {
  font-style: italic;
  color: var(--mp-1);
}

.mp_say__by {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5f6b72;
}

@media (min-width: 768px) {
  .mp_say {
    padding-block: 150px;
  }

  .mp_say__text {
    font-size: 32px;
    line-height: 1.85;
    text-align: center;
  }

  .mp_say__by {
    margin-top: 40px;
    font-size: 14px;
  }
}

/* ==========================================================================
   戦略（中央の写真のまわりに、4つのカードを散らす）
   ========================================================================== */
.st_stage {
  position: relative;
  margin-top: 40px;
}

.st_main {
  margin: 0;
  padding: 9px;
}

.st_main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.st_sub {
  display: none;
}

.st_cards {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.st_card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 2px solid var(--mp-1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
  color: #323b4b;
}

.st_card span {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--mp-1);
}

@media (min-width: 1024px) {
  .st_stage {
    min-height: 600px;
    margin-top: 64px;
  }

  .st_main {
    width: 46%;
    margin: 0 auto;
    padding: 12px;
  }

  .st_sub {
    position: absolute;
    display: block;
    width: 150px;
    margin: 0;
    padding: 7px;
    border: 2px solid var(--mp-2);
    border-radius: 10px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--mp-2);
  }

  .st_sub img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 5px;
    object-fit: cover;
  }

  .st_sub--l {
    top: 50%;
    left: 0;
  }

  .st_sub--r {
    top: 30%;
    right: 0;
  }

  .st_cards {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  .st_card {
    position: absolute;
    width: 312px;
    padding: 22px 24px;
    font-size: 15.5px;
  }

  .st_card--1 {
    top: 6%;
    left: 3%;
  }

  .st_card--2 {
    top: 14%;
    right: 3%;
  }

  .st_card--3 {
    bottom: 10%;
    left: 12%;
  }

  .st_card--4 {
    bottom: 22%;
    right: 3%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .st_cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
  }
}

/* 戦略：ラベル無しなので見出しの上余白をリセット */
.st .lp_dom__ttl {
  margin-top: 0;
}


/* ==========================================================================
   事例（1画面の声。表紙と同じ濃紺の色面＋白い明朝）
   ========================================================================== */
.vc {
  position: relative;
  overflow: hidden;
  background: #142f55;
  color: #fff;
}

.vc__pic {
  position: absolute;
  inset: 0;
}

.vc__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.vc__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 47, 85, 0.94) 0%,
    rgba(20, 47, 85, 0.9) 42%,
    rgba(20, 47, 85, 0.2) 66%,
    rgba(20, 47, 85, 0) 100%);
}

.vc__body {
  position: relative;
  padding-top: 56px;
  padding-bottom: 360px;
}

.vc__text {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #fff;
}

.vc__text::before { content: "“ "; }
.vc__text::after  { content: " ”"; }

.vc__by {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85);
}

.vc__by b {
  font-size: 14px;
  color: #fff;
}

.vc__note {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
  .vc__pic img {
    object-position: 50% 18%;
  }

  .vc__shade {
    background: linear-gradient(90deg,
      rgba(20, 47, 85, 0.97) 0%,
      rgba(20, 47, 85, 0.93) 36%,
      rgba(20, 47, 85, 0.5) 58%,
      rgba(20, 47, 85, 0.05) 78%,
      rgba(20, 47, 85, 0) 100%);
  }

  .vc__body {
    max-width: none;
    padding: 96px 0 96px clamp(40px, 5.5vw, 88px);
  }

  .vc__q {
    max-width: 600px;
  }

  .vc__text {
    font-size: 30px;
    line-height: 1.85;
  }

  .vc__by {
    margin-top: 30px;
    font-size: 14px;
  }

  .vc__by b {
    font-size: 16px;
  }

  .vc__note {
    margin-top: 26px;
    font-size: 11.5px;
  }
}

@media (min-width: 1024px) {
  /* 縦位置の写真なので、右の細い列に収めてズームを抑える */
  .vc__pic {
    left: auto;
    right: 0;
    width: 40vw;
  }

  .vc__pic img {
    object-position: 50% 0%;
  }

  .vc__shade {
    background:
      linear-gradient(90deg,
        rgba(20, 47, 85, 1) 0%,
        rgba(20, 47, 85, 1) 56%,
        rgba(20, 47, 85, 0.45) 66%,
        rgba(20, 47, 85, 0.06) 76%,
        rgba(20, 47, 85, 0.04) 100%);
  }
}

/* 専門家チーム：ラベル無しなので見出しの上余白をリセット */
.tm .lp_dom__ttl {
  margin-top: 0;
}

/* ==========================================================================
   全体の雰囲気を揃える（ラベル・英字キッカーを廃止したあとの調整）
   ========================================================================== */
.lp_dom__head > .lp_dom__ttl:first-child {
  margin-top: 0;
}

/* 引用の地は、ページ全体の寒色に合わせる */
.mp_say {
  background: #f3f9fa;
}

/* 課外活動：4つの支援は見出しのすぐ下から */
.ac_rows {
  margin-top: 44px;
}

@media (min-width: 768px) {
  .ac_rows {
    margin-top: 72px;
  }
}

/* CONTACT の見出し上余白 */
.mp_end__ttl {
  margin-top: 0;
}

/* FAQ：見出しと一覧の間隔 */
.lp_faq {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .lp_faq {
    margin-top: 56px;
  }
}

/* ==========================================================================
   ヘッダーのナビ：いま読んでいる領域に、ブランドブルーの下線（Crimsonの型）
   ========================================================================== */
@media (min-width: 768px) {
  .lp_header .header__nav_list a {
    padding-bottom: 6px;
    color: #5f6b72;
  }

  .lp_header .header__nav_list a::after {
    bottom: 0;
    height: 2.5px;
    border-radius: 0;
    background: var(--mp-1);
  }

  .lp_header .header__nav_list a.is_here {
    color: var(--mp-1);
  }

  .lp_header .header__nav_list a.is_here::after {
    transform: scaleX(1);
  }
}

/* スマホのドロワーでは、現在地を色だけで示す */
@media (max-width: 767px) {
  .lp_header .header__nav_list a.is_here {
    color: var(--mp-1);
  }
}

/* ==========================================================================
   サービス各論（資格試験・志望理由書・研究活動）：課外活動の1行版
   ========================================================================== */
.sv .ac_rows {
  margin-top: 36px;
}

.sv .ac_row__no {
  display: inline-block;
  padding: 5px 12px;
  border: 1.5px solid var(--mp-1);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.ac_row--flip .ac_row__no {
  border-color: var(--mp-2);
}

/* 目次は7項目 */
@media (min-width: 768px) {
  .sv .ac_rows {
    margin-top: 56px;
  }

  .mp_jump__list {
    grid-template-columns: repeat(7, 1fr);
  }

  .mp_jump__list a {
    padding-inline: 4px;
    font-size: 14px;
  }

  .lp_header .header__nav_list {
    gap: 28px;
  }
}

/* ==========================================================================
   声（慶應の校舎を背景に。弟の声と同じ型、写真は横位置なので全幅）
   ========================================================================== */
.vc--keio .vc__pic img {
  object-position: 62% 40%;
}

.vc--keio .vc__body {
  padding-bottom: 260px;
}

@media (min-width: 768px) {
  .vc--keio .vc__body {
    padding: 110px 0 110px clamp(40px, 5.5vw, 88px);
  }

  .vc--keio .vc__q {
    max-width: 640px;
  }
}

@media (min-width: 1024px) {
  .vc--keio .vc__pic {
    left: 0;
    right: 0;
    width: auto;
  }

  .vc--keio .vc__pic img {
    object-position: 70% 45%;
  }

  .vc--keio .vc__shade {
    background: linear-gradient(90deg,
      rgba(20, 47, 85, 0.97) 0%,
      rgba(20, 47, 85, 0.92) 34%,
      rgba(20, 47, 85, 0.55) 52%,
      rgba(20, 47, 85, 0.12) 70%,
      rgba(20, 47, 85, 0) 100%);
  }
}

/* ==========================================================================
   スマホ：ヘッダーを画面上部に固定（sticky が効かない閲覧環境への備え）
   ・home.css の .header{position:sticky} を fixed に上書きし、本文を同じ高さだけ下げる
   ・ドロワー（.header__nav）は home.css のまま、ヘッダー基準で開く
   ========================================================================== */
@media (max-width: 767px) {
  .lp_header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
  }

  body {
    padding-top: 65px;
  }

  html {
    scroll-padding-top: 80px;
  }
}

/* ==========================================================================
   課外活動：写真の代わりにイラスト（3:2、白地）。浮きカードは無いので余白も外す
   ========================================================================== */
.ac_row__pic--illo {
  padding-bottom: 0;
}

.ac_row__pic--illo .mp_frame {
  margin-left: 0;
}

.ac_row__pic--illo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ==========================================================================
   表紙（Schoo コーポレートサイトの型）
   ・写真の上に白い色面、濃紺の大きな見出し、強調語は色の箱がワイプで現れる
   ・右端に縦書きの Scroll Down、左下にお知らせカード（無料個別相談）
   ・以前の濃紺の色面（.mp_shade）・ラベル・学年ボタンは使わない
   ========================================================================== */
.mp_shade,
.mp_copy__label,
.mp_copy__k,
.mp_copy__btns {
  display: none;
}

.mp_view {
  position: relative;
}

/* 白い色面：スマホは下から、PCは左から */
.mp_wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 148, 164, 0) 28%,
    rgba(28, 148, 164, 0.62) 50%,
    rgba(28, 148, 164, 0.94) 68%,
    #1c94a4 100%);
  pointer-events: none;
}

.mp_slides::after {
  display: none;
}

/* 見出しまわり */
.mp_copy {
  top: auto;
  bottom: 64px;
  padding-top: 0;
  color: #fff;
  transform: none;
}

.mp_copy__ttl {
  margin-top: 0;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #fff;
}

.mp_copy__en {
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.mp_copy__text {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
}

/* 強調語：白い箱（Schooの「卒業」と同じ作り）。
   箱は見出しと一緒に現れ、1文字ずつ 30px 下から浮き上がる */
.mp_hl {
  display: inline-block;
  margin-right: 0.1em;
  padding: 0 0.3em;
  border-radius: 8px;
  background: #fff;
  color: var(--mp-1);
  vertical-align: top;
}

.mp_hl__ch {
  display: inline-block;
}

/* 見出しの上の一言（白いタグ） */
.mp_copy__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--mp-1);
}

/* Scroll Down（縦書き＋線） */
.mp_scroll {
  position: absolute;
  right: 14px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 30px;
  padding: 10px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.mp_scroll span {
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #6b7a83;
  writing-mode: vertical-rl;
}

.mp_scroll i {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(50, 59, 75, 0.18);
}

.mp_scroll i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--mp-1);
}

/* 点はカードと重ならない位置に（スマホは写真の右上） */
.mp_dots {
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  transform: none;
}

/* お知らせカード */
.mp_notice {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 16px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 47, 85, 0.14);
  color: var(--mp-ink);
  text-decoration: none;
}

.mp_notice__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mp-1) 0%, var(--mp-2) 100%);
  color: #fff;
}

.mp_notice__tile svg {
  width: 26px;
  height: 26px;
}

.mp_notice__tile b {
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.mp_notice__body {
  flex: 1;
  min-width: 0;
}

.mp_notice__body b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.mp_notice__body small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #5f6b72;
}

.mp_notice__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--mp-ink);
  color: #fff;
}

.mp_notice__arrow svg {
  width: 18px;
  height: 18px;
}

/* 目次の板との距離 */
.mp_stage + .mp_jump {
  padding-top: 28px;
}

/* 動き（reduce では止める） */
@media (prefers-reduced-motion: no-preference) {
  /* Schoo と同じタイミング：
     見出しブロック全体 … 0.5s 後から 1s かけてフェードイン
     1文字目 … 0.8s 後から 1s（30px 下から＋フェード）
     2文字目 … 1.6s 後から 1s */
  .mp_copy > * {
    animation: none;
  }

  .mp_copy {
    animation: mp_fade 1s ease 0.5s both;
  }

  .mp_hl__ch {
    animation: mp_hl_ch 1s ease both;
  }

  .mp_hl__ch:nth-child(1) { animation-delay: 0.8s; }
  .mp_hl__ch:nth-child(2) { animation-delay: 1.15s; }
  .mp_hl__ch:nth-child(3) { animation-delay: 1.5s; }
  .mp_hl__ch:nth-child(4) { animation-delay: 1.85s; }

  @keyframes mp_fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes mp_hl_ch {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }

  .mp_scroll i::after {
    animation: mp_scroll_line 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  @keyframes mp_scroll_line {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(250%); }
    100% { transform: translateY(250%); }
  }

  .mp_notice {
    animation: mp_copy_in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}

@media (hover: hover) {
  .mp_notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(20, 47, 85, 0.18);
  }
}

/* スマホ：カードは写真の下端に少し重ねる */
@media (max-width: 767px) {
  .mp_slides {
    aspect-ratio: 4 / 5;
    min-height: 520px;
  }

  .mp_notice {
    margin-top: -22px;
  }

  .mp_copy {
    bottom: 64px;
    padding-inline: 20px;
  }

  /* Scroll Down は写真の右・中ほどに */
  .mp_scroll {
    top: 34%;
    bottom: auto;
    right: 10px;
  }
}

/* PC：写真の左に色面、見出しは左に縦中央、カードは左下 */
@media (min-width: 768px) {
  .mp_hero {
    padding-block: 0;
  }

  .mp_slides {
    aspect-ratio: 5 / 2;
    min-height: 600px;
  }

  .mp_wash {
    background: linear-gradient(90deg,
      rgba(28, 148, 164, 0.97) 0%,
      rgba(28, 148, 164, 0.93) 30%,
      rgba(28, 148, 164, 0.72) 48%,
      rgba(28, 148, 164, 0.25) 63%,
      rgba(28, 148, 164, 0) 78%);
  }

  .mp_copy {
    top: 44%;
    bottom: auto;
    padding-left: clamp(40px, 5.5vw, 88px);
    transform: translateY(-50%);
  }

  .mp_copy__ttl {
    max-width: none;
    font-size: clamp(38px, 3.75vw, 50px);
    line-height: 1.34;
  }

  .mp_copy__tag {
    margin-bottom: 20px;
    padding: 9px 18px;
    font-size: 14.5px;
  }

  .mp_copy__en {
    margin-top: 20px;
    font-size: 14px;
  }

  .mp_copy__text {
    margin-top: 12px;
    font-size: 15.5px;
  }

  .mp_scroll {
    right: 30px;
    bottom: 40px;
    gap: 14px;
  }

  .mp_scroll span {
    font-size: 11.5px;
  }

  .mp_scroll i {
    height: 80px;
  }

  .mp_dots {
    top: auto;
    bottom: 34px;
    left: auto;
    right: 76px;
    transform: none;
  }

  .mp_notice {
    position: absolute;
    bottom: 32px;
    left: clamp(40px, 5.5vw, 88px);
    width: min(560px, 46vw);
    margin: 0;
    padding: 14px 16px 14px 14px;
    gap: 18px;
  }

  .mp_notice__tile {
    width: 84px;
    height: 84px;
    border-radius: 14px;
  }

  .mp_notice__tile svg {
    width: 32px;
    height: 32px;
  }

  .mp_notice__body b {
    font-size: 17px;
  }

  .mp_notice__body small {
    font-size: 12.5px;
  }

  .mp_notice__arrow {
    width: 46px;
    height: 46px;
  }

  .mp_stage + .mp_jump {
    padding-top: 40px;
  }
}

/* ==========================================================================
   表紙の下：主張を1画面で（引用・発言者なし）
   ・見出し → 3つの要素を枠＋ずらした影のチップで「＋」でつなぐ → 結論
   ========================================================================== */
.mp_say .inner {
  max-width: 960px;
  text-align: center;
}

.mp_say__ttl {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--mp-ink);
  text-wrap: balance;
}

.mp_say__eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.mp_say__chip {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid var(--mp-1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mp-1);
}

.mp_say__eq i {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  color: #8a9aa3;
}

.mp_say__res {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--mp-ink);
}

/* 結論の行：明朝の引用ではなく、本文として */
.mp_say__text {
  margin-top: 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: #5f6b72;
}

.mp_say__text::before,
.mp_say__text::after {
  content: none;
}

@media (min-width: 768px) {
  .mp_say {
    padding-block: 120px;
  }

  .mp_say__ttl {
    font-size: 34px;
  }

  .mp_say__eq {
    gap: 14px;
    margin-top: 40px;
  }

  .mp_say__chip {
    padding: 14px 26px;
    font-size: 22px;
  }

  .mp_say__eq i {
    font-size: 24px;
  }

  .mp_say__res {
    margin-top: 28px;
    font-size: 24px;
  }

  .mp_say__text {
    margin-top: 22px;
    font-size: 16px;
  }
}

/* ==========================================================================
   表紙直下の目次：番号つきの板（枠＋ずらした影）。お知らせカードは廃止
   ========================================================================== */
.mp_notice {
  display: none;
}

.mp_jump {
  padding: 28px 0 40px;
}

.mp_jump__list {
  gap: 6px;
  padding: 8px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.mp_jump__list a {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 10px 30px 10px 12px;
  border-radius: 10px;
  background: #f2f9fa;
  font-size: 13px;
  text-align: left;
}

/* 7つ目は横いっぱい */
.mp_jump__list li:last-child a {
  grid-column: 1 / -1;
}

.mp_jump__list li:last-child {
  grid-column: 1 / -1;
}

.mp_jump__no {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--mp-1);
}

.mp_jump__label {
  flex: 1;
  min-width: 0;
}

/* 右端の小さな矢印（下向き） */
.mp_jump__list a::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: translateY(-65%) rotate(45deg);
}

@media (min-width: 768px) {
  .mp_jump {
    padding: 56px 0 72px;
  }

  .mp_jump__list {
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 10px;
    border-radius: 18px;
  }

  .mp_jump__list a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 16px 28px 16px 14px;
    background: transparent;
    font-size: 14px;
    letter-spacing: 0;
  }

  .mp_jump__list li:last-child,
  .mp_jump__list li:last-child a {
    grid-column: auto;
  }

  /* 項目のあいだの細い線 */
  .mp_jump__list li + li a::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 1px;
    background: #d3edef;
  }

  .mp_jump__no {
    font-size: 12px;
  }

  .mp_jump__list a::after {
    top: auto;
    right: 16px;
    bottom: 20px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp_jump__list a:hover {
    background: #f2f9fa;
    color: var(--mp-1);
  }

  .mp_jump__list a:hover::after {
    transform: translateY(-65%) rotate(45deg) translate(2px, 2px);
  }

  @media (min-width: 768px) {
    .mp_jump__list a:hover::after {
      transform: rotate(45deg) translate(2px, 2px);
    }
  }
}

/* ==========================================================================
   専門家チーム：5つの役割カード（名前を目立たせ、「役割を見る」で説明が開く）
   ========================================================================== */
.tm_kids .tm_role {
  gap: 10px;
  padding: 14px 14px 12px;
}

.tm_role__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* 名前はティールの帯に白文字で */
.tm_role__name > span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--mp-1);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.tm_role__name em {
  margin-left: 0;
}

.tm_kids .tm_role small {
  margin-top: -2px;
}

/* 役割を見る */
.tm_role__more {
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #d3edef;
}

.tm_role__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-1);
  -webkit-user-select: none;
  user-select: none;
}

.tm_role__more summary::-webkit-details-marker {
  display: none;
}

.tm_role__more summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid var(--mp-1);
  border-bottom: 2px solid var(--mp-1);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.tm_role__more[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.tm_role__more ul {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f2f9fa;
}

.tm_role__more li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #323b4b;
  text-align: left;
}

.tm_role__more li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-1);
}

.tm_role__more summary:focus-visible {
  outline: 2px solid var(--mp-2);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .tm_role__more[open] ul {
    animation: tm_pop 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  @keyframes tm_pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

@media (min-width: 768px) {
  .tm_kids .tm_role {
    padding: 18px 16px 14px;
  }

  .tm_role__name > span {
    font-size: 15px;
  }

  .tm_role__more li {
    font-size: 13px;
  }
}

/* ==========================================================================
   2つのコース：学年のロードマップ（タブ版を置き換え）
   ・上に 高1｜高2｜高3 のレール（高1・2＝ティール、高3＝グリーン）
   ・下に2枚のカード。文章は目標1行＋短いチップだけ
   ========================================================================== */
.rd_rail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  max-width: 760px;
  margin: 36px auto 0;
}

.rd_rail__seg {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--mp-1);
}

.rd_rail__seg--b {
  background: var(--mp-2);
}

.rd_rail__seg b {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5f6b72;
  white-space: nowrap;
}

.rd_cards {
  display: grid;
  gap: 14px;
  margin-top: 54px;
}

.rd_card {
  position: relative;
  padding: 22px 20px 22px;
  border: 2px solid var(--c);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--c);
}

.rd_card--a { --c: var(--mp-1); }
.rd_card--b { --c: var(--mp-2); }

.rd_card__grade {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--c);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
}

.rd_card__name {
  margin-top: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--c);
}

.rd_card__goal {
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--mp-ink);
}

.rd_card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.rd_card__chips li {
  padding: 6px 11px;
  border: 1.5px solid #d3edef;
  border-radius: 999px;
  background: #f2f9fa;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #3f5560;
}

.rd_card--b .rd_card__chips li {
  border-color: #d5efe3;
  background: #f1faf5;
}

/* 2枚のあいだの矢印（スマホは下向き） */
.rd_arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #5f6b72;
}

.rd_arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--mp-2);
  border-bottom: 2.5px solid var(--mp-2);
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .rd_rail {
    max-width: none;
    margin-top: 56px;
  }

  .rd_rail__seg {
    height: 12px;
  }

  .rd_rail__seg b {
    top: 20px;
    font-size: 13px;
  }

  .rd_rail {
    grid-template-columns: 0.75fr 0.75fr 1fr;
  }

  .rd_cards {
    position: relative;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    gap: 44px;
    margin-top: 70px;
    padding-bottom: 44px;
  }

  .rd_card {
    padding: 30px 30px 30px;
    border-radius: 18px;
  }

  .rd_card__grade {
    font-size: 12.5px;
  }

  .rd_card__name {
    margin-top: 14px;
    font-size: 26px;
  }

  .rd_card__goal {
    margin-top: 12px;
    font-size: 19px;
  }

  .rd_card__chips {
    gap: 8px;
    margin-top: 20px;
  }

  .rd_card__chips li {
    padding: 7px 13px;
    font-size: 13px;
  }

  /* 矢印：2枚の境目に丸いバッジ、説明はカードの下に */
  .rd_arrow {
    position: absolute;
    top: 0;
    bottom: 44px;
    left: calc((100% - 44px) * 0.6 + 22px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0;
    padding: 0;
  }

  .rd_arrow::after {
    order: -1;
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -3px;
    transform: translateY(-50%) rotate(-45deg);
  }

  .rd_arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 2px solid var(--mp-2);
    border-radius: 50%;
    background: #fff;
    box-shadow: 3px 3px 0 var(--mp-2);
    transform: translateY(-50%);
  }

  .rd_arrow span {
    position: absolute;
    bottom: -44px;
    left: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 13px;
  }
}

/* 開いたカードだけ伸びる（隣は引き伸ばさない） */
.tm_kids {
  align-items: start;
}

.tm_kids .tm_role {
  height: auto;
}

/* 閉じているときは高さをそろえる（説明1行目は2行ぶんの高さを確保） */
.tm_kids .tm_role small {
  min-height: 3.2em;
}

.tm_kids > li:last-child .tm_role small {
  min-height: 0;
}

@media (min-width: 768px) {
  .tm_kids > li:last-child .tm_role small {
    min-height: 3.2em;
  }
}

/* ==========================================================================
   2つのコース：学年タブ → 左に「やること」、右に「ある1ヶ月」のカレンダー
   色：m=担任/出願（ティール） e=英検・小論文（グリーン） g=評定・進捗（深い青） p=保護者（ライム）
   ========================================================================== */
.cl_tabs {
  margin-top: 36px;
}

.cl_tabs__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cl_tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 2px solid #d3edef;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: #5f6b72;
}

.cl_tab small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cl_tab b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #323b4b;
}

.cl_tab.is_on {
  border-color: var(--mp-1);
  box-shadow: 3px 3px 0 var(--mp-1);
  color: var(--mp-1);
}

.cl_tab--b.is_on {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
  color: var(--mp-2);
}

.cl_tab:focus-visible {
  outline: 2px solid var(--mp-2);
  outline-offset: 3px;
}

.cl_panel {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.cl_panel[hidden] {
  display: none;
}

/* 左：やること */
.cl_side {
  padding: 20px 18px 18px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.cl_panel--b .cl_side {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
}

.cl_side__k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mp-1);
}

.cl_panel--b .cl_side__k {
  color: var(--mp-2);
}

.cl_side__ttl {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #323b4b;
}

.cl_side__list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #d3edef;
}

.cl_side__list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 10px;
  align-items: start;
}

.cl_side__list b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #323b4b;
}

.cl_side__list span {
  grid-column: 2;
  font-size: 12px;
  font-weight: 500;
  color: #6b7a83;
}

.cl_dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--mp-1);
}

.cl_dot--e { background: var(--mp-2); }
.cl_dot--g { background: var(--mp-dark); }
.cl_dot--p { background: #b7cc2e; }

.cl_side__always {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f2f9fa;
  font-size: 12px;
  line-height: 1.7;
  color: #4b5860;
}

.cl_side__always b {
  color: var(--mp-1);
}

.cl_panel--b .cl_side__always {
  background: #f1faf5;
}

.cl_panel--b .cl_side__always b {
  color: var(--mp-2);
}

/* 右：カレンダー */
.cl_cal {
  padding: 16px 12px 14px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.cl_panel--b .cl_cal {
  border-color: var(--mp-2);
  box-shadow: 3px 3px 0 var(--mp-2);
}

.cl_cal__ttl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 4px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #323b4b;
}

.cl_cal__ttl small {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f9fa;
  font-size: 10.5px;
  color: var(--mp-1);
}

.cl_panel--b .cl_cal__ttl small {
  background: #f1faf5;
  color: var(--mp-2);
}

.cl_head {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  gap: 3px;
  padding-bottom: 6px;
}

.cl_head span {
  grid-column: span 1;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #8a9aa3;
}

.cl_head span:first-child {
  grid-column: 2;
}

.cl_week {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  gap: 3px;
  margin-top: 3px;
}

.cl_week__no {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #8a9aa3;
  white-space: nowrap;
}

.cl_day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 50px;
  padding: 6px 2px 5px;
  border-radius: 7px;
  background: #f5fafb;
}

.cl_day--off {
  background: #eef5f7;
}

/* スマホ：点だけ。文字は下のリストで読む */
.cl_ev {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mp-1);
  font-style: normal;
}

.cl_ev em {
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.cl_ev--p em {
  color: #3a4514;
}

/* スマホはカレンダーを先に見せる */
.cl_cal {
  order: -1;
}

.cl_ev b {
  display: none;
}

.cl_ev--e { background: var(--mp-2); }
.cl_ev--g { background: var(--mp-dark); }
.cl_ev--p { background: #b7cc2e; }

.cl_cal__band {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(28, 148, 164, 0.14), rgba(28, 148, 164, 0.04));
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #3f5560;
}

.cl_cal__band .cl_dot {
  flex-shrink: 0;
  margin-top: 0;
}

.cl_panel--b .cl_cal__band {
  background: linear-gradient(90deg, rgba(70, 179, 137, 0.16), rgba(70, 179, 137, 0.04));
}

.cl_note {
  margin-top: 18px;
  font-size: 11.5px;
  text-align: center;
  color: #8a9aa3;
}

@media (prefers-reduced-motion: no-preference) {
  .cl_panel.is_on {
    animation: mp_copy_in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .cl_tab {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
}

@media (hover: hover) {
  .cl_tab:not(.is_on):hover {
    border-color: #a9d9e0;
    transform: translateY(-1px);
  }
}

@media (min-width: 768px) {
  .cl_tabs {
    margin-top: 56px;
  }

  .cl_tabs__nav {
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
  }

  .cl_tab {
    gap: 4px;
    padding: 16px 22px;
    border-radius: 16px;
  }

  .cl_tab small {
    font-size: 12.5px;
  }

  .cl_tab b {
    font-size: 17px;
  }

  .cl_panel {
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin-top: 28px;
    align-items: start;
  }

  .cl_side {
    padding: 26px 24px 22px;
  }

  .cl_side__ttl {
    font-size: 19px;
  }

  .cl_cal {
    padding: 22px 20px 18px;
  }

  .cl_cal__ttl {
    font-size: 16px;
  }

  .cl_head,
  .cl_week {
    grid-template-columns: 40px repeat(7, minmax(0, 1fr));
    gap: 5px;
  }

  .cl_day {
    min-width: 0;
    overflow: hidden;
  }

  .cl_week {
    margin-top: 5px;
  }

  .cl_head span {
    font-size: 12px;
  }

  .cl_week__no {
    font-size: 11px;
    letter-spacing: 0;
  }

  .cl_cal {
    order: 0;
  }

  .cl_day {
    min-height: 74px;
    padding: 6px 5px 5px;
    border-radius: 9px;
    align-items: stretch;
  }

  /* PCは日付の隅に曜日、予定は小さなラベルで */
  .cl_ev {
    display: block;
    width: auto;
    height: auto;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--mp-1);
  }

  .cl_ev em {
    display: none;
  }

  .cl_ev b {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
  }

  .cl_ev--p b {
    color: #3a4514;
  }

  .cl_cal__band {
    margin-top: 14px;
    font-size: 12.5px;
  }

  .cl_note {
    margin-top: 24px;
  }
}

/* ==========================================================================
   専門家ごとの色（専門家チームのカードと、1ヶ月カレンダーで共通）
   担任＝深い青／活動＝ティール／英検＝グリーン／小論文＝ライム／出願＝ブルー
   ========================================================================== */
:root {
  --x-tan: #142f55;
  --x-act: #1c94a4;
  --x-eiken: #46b389;
  --x-essay: #b7cc2e;
  --x-app: #2c6fb0;
}

/* 専門家のカードは色を増やさず、ページ共通のティール1色のまま（ハブも元の色） */
.tm_kids {
  grid-template-columns: 1fr 1fr;
}

.tm_kids > li:last-child {
  grid-column: auto;
}

.tm_kids > li:last-child .tm_role small {
  min-height: 3.2em;
}

/* カレンダー側 */
.cl_dot--m, .cl_ev--m { background: var(--x-act); }
.cl_dot--e, .cl_ev--e { background: var(--x-eiken); }
.cl_dot--s, .cl_ev--s { background: var(--x-essay); }
.cl_dot--t, .cl_ev--t { background: var(--x-tan); }
.cl_dot--a, .cl_ev--a { background: var(--x-app); }

.cl_ev--s em,
.cl_ev--s b {
  color: #3a4514;
}

@media (min-width: 768px) {
  .tm_kids {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 専門家は5人：スマホは2列＋最後は横いっぱい、PCは5列 */
.tm_kids > li:last-child {
  grid-column: 1 / -1;
}

.tm_kids > li:last-child .tm_role small {
  min-height: 0;
}

@media (min-width: 768px) {
  .tm_kids {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }

  .tm_kids > li:last-child {
    grid-column: auto;
  }

  .tm_kids > li:last-child .tm_role small {
    min-height: 3.2em;
  }

  .tm_kids .tm_role {
    padding: 16px 14px 12px;
  }

  .tm_role__name > span {
    font-size: 14px;
    padding: 6px 10px;
  }
}

/* カレンダーは専門家ごとに色分け（担任＝深い青／活動＝ティール／英検＝グリーン／小論文＝ライム／出願＝ブルー／面接＝明るいティール） */
.cl_dot--m, .cl_ev--m { background: var(--x-act); }
.cl_dot--e, .cl_ev--e { background: var(--x-eiken); }
.cl_dot--s, .cl_ev--s { background: var(--x-essay); }
.cl_dot--a, .cl_ev--a { background: var(--x-app); }
.cl_dot--i, .cl_ev--i { background: #3bbcc4; }
.cl_dot--t, .cl_ev--t { background: var(--x-tan); }

.cl_ev--s em,
.cl_ev--s b { color: #3a4514; }

/* 「主に高3」はカードの右上に置き、カードの高さをそろえる */
.tm_kids .tm_role {
  position: relative;
}

.tm_role__name em {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}

@media (min-width: 768px) {
  .tm_role__name em {
    top: 16px;
    right: 14px;
  }
}

/* 専門家カードの名前の帯は共通のティール（色分けなし） */

/* ==========================================================================
   事例（弟）：写真に色面を重ねず、額縁に入れて横に並べる。顔を隠さない
   ========================================================================== */
.vc--split {
  padding-block: 56px;
}

.vc2 {
  display: grid;
  gap: 24px;
}

.vc2__pic {
  width: min(260px, 70%);
  margin: 0 auto;
  padding: 8px;
  border-color: #fff;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.vc2__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 12%;
}

.vc2__k {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.vc--split .vc__q {
  margin-top: 14px;
}

.vc--split .vc__text {
  font-size: 18px;
}

.vc--split .vc__by small {
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.7);
}

.vc2__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}

.vc2__facts li {
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.vc2__facts small {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mp-ac);
}

.vc2__facts b {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.vc--split .vc__note {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .vc--split {
    padding-block: 96px;
  }

  .vc2 {
    grid-template-columns: 300px 1fr;
    gap: 56px;
    align-items: center;
  }

  .vc2__pic {
    width: 100%;
    margin: 0;
    padding: 10px;
  }

  .vc--split .vc__q {
    max-width: 640px;
    margin-top: 18px;
  }

  .vc--split .vc__text {
    font-size: 26px;
  }

  .vc2__facts {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 10px;
    margin-top: 26px;
  }

  .vc2__facts li {
    padding: 10px 16px;
  }

  .vc2__facts b {
    font-size: 14.5px;
  }
}

/* 事例：政策提言の集合写真（横長）を下に */
.vc2__wide {
  margin: 8px 0 0;
  padding: 8px;
  border-color: #fff;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.vc2__wide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.vc2__wide figcaption {
  padding: 12px 6px 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #4b5860;
}

.vc2__wide figcaption b {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--mp-ink);
}

.vc--split .vc__note {
  grid-column: 1 / -1;
}

.vc--split .vc__text .lp_todo {
  margin-right: 8px;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .vc2 {
    align-items: start;
  }

  .vc2__wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 0 22px;
    align-items: center;
    margin-top: 16px;
    padding: 10px;
  }

  .vc2__wide img {
    aspect-ratio: 16 / 9;
  }

  .vc2__wide figcaption {
    padding: 8px 10px 8px 0;
    font-size: 13.5px;
  }

  .vc2__wide figcaption b {
    font-size: 17px;
    margin-bottom: 6px;
  }
}

/* ==========================================================================
   事例：合格の結果を目立たせる帯 ＋ 入塾時→出願時の変化（before / after）
   ========================================================================== */
.vc2__result {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.vc2__result_k {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mp-ac);
}

.vc2__result > b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.vc2__result_v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.vc2__result_v em {
  font-style: normal;
  font-size: 22px;
  color: var(--mp-ac);
}

.vc2__result_v small {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

/* before → after */
.vc2__delta {
  margin-top: 16px;
  padding: 12px 14px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.vc2__delta_head {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.vc2__delta_head span {
  grid-column: span 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.vc2__delta_head span:first-child { grid-column: 2; }

.vc2__delta_head small {
  display: block;
  font-size: 10px;
  font-weight: 500;
}

.vc2__delta dl > div {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.vc2__delta dl > div:last-child {
  border-bottom: 0;
}

.vc2__delta dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-ac);
}

.vc2__before {
  position: relative;
  padding-right: 18px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

/* 矢印 */
.vc2__before::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--mp-ac);
  border-right: 2px solid var(--mp-ac);
  transform: translateY(-50%) rotate(45deg);
}

.vc2__after {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.vc2__after small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
  .vc2__result {
    grid-template-columns: auto 1fr;
    grid-template-areas: "k k" "b v";
    align-items: baseline;
    column-gap: 16px;
    margin-top: 22px;
    padding: 16px 20px;
  }

  .vc2__result_k { grid-area: k; }
  .vc2__result > b { grid-area: b; font-size: 21px; }
  .vc2__result_v { grid-area: v; font-size: 14px; }
  .vc2__result_v em { font-size: 26px; }

  .vc2__delta {
    margin-top: 18px;
    padding: 14px 18px 8px;
  }

  .vc2__delta_head,
  .vc2__delta dl > div {
    grid-template-columns: 56px 120px 1fr;
    gap: 12px;
  }

  .vc2__before { font-size: 15px; }
  .vc2__after { font-size: 18px; }
  .vc2__after small { font-size: 11.5px; }
}

/* ==========================================================================
   私たちの支援の内容：4つのタブ（番号＋領域名＋担当の専門家）→ 各領域の中身
   ========================================================================== */
.sp_tabs {
  margin-top: 32px;
}

.sp_tabs__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sp_tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 84px;
  padding: 12px 12px 11px;
  border: 2px solid #d3edef;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: #5f6b72;
}

.sp_tab__no {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mp-1);
}

.sp_tab b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #323b4b;
}

.sp_tab small {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a9aa3;
}

.sp_tab.is_on {
  border-color: var(--mp-1);
  background: var(--mp-1);
  box-shadow: 3px 3px 0 rgba(28, 148, 164, 0.32);
}

.sp_tab.is_on .sp_tab__no,
.sp_tab.is_on b,
.sp_tab.is_on small {
  color: #fff;
}

.sp_tab.is_on small {
  color: rgba(255, 255, 255, 0.8);
}

.sp_tab:focus-visible {
  outline: 2px solid var(--mp-2);
  outline-offset: 3px;
}

.sp_panel[hidden] {
  display: none;
}

.sp_panel__head {
  margin-top: 28px;
  text-align: center;
}

.sp_panel__ttl {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--mp-ink);
  text-wrap: balance;
}

.sp_panel__ttl em {
  font-style: normal;
  color: var(--mp-1);
  background: linear-gradient(transparent 72%, rgba(196, 217, 63, 0.45) 72%);
}

.sp_panel__text {
  max-width: 720px;
  margin: 12px auto 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: #5f6b72;
}

.sp .sp_rows {
  margin-top: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .sp_panel.is_on {
    animation: mp_copy_in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .sp_tab {
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  }
}

@media (hover: hover) {
  .sp_tab:not(.is_on):hover {
    border-color: #a9d9e0;
    transform: translateY(-1px);
  }
}

@media (min-width: 768px) {
  .sp_tabs {
    margin-top: 48px;
  }

  .sp_tabs__nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .sp_tab {
    min-height: 0;
    gap: 6px;
    padding: 16px 18px 15px;
    border-radius: 16px;
  }

  .sp_tab__no { font-size: 12px; }
  .sp_tab b { font-size: 15.5px; }
  .sp_tab small { font-size: 11.5px; }

  .sp_panel__head {
    margin-top: 44px;
  }

  .sp_panel__ttl {
    font-size: 30px;
  }

  .sp_panel__text {
    margin-top: 16px;
    font-size: 15px;
  }

  .sp .sp_rows {
    margin-top: 40px;
  }

  /* 目次は5項目 */
  .mp_jump__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 目次：スマホは2列＋最後が横いっぱい（5項目） */

/* ==========================================================================
   体験授業・無料相談（ティールの色面。左に見出しとボタン、右に額縁の写真）
   ========================================================================== */
.tr {
  position: relative;
  background: linear-gradient(135deg, #1c94a4 0%, #178b9b 100%);
  color: #fff;
}

.tr__grid {
  display: grid;
  gap: 28px;
  padding-block: 56px;
}

.tr__body {
  text-align: center;
}

.tr__ttl {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
}

.tr__ttl em {
  font-style: normal;
  color: #fff;
  background: linear-gradient(transparent 74%, rgba(196, 217, 63, 0.45) 74%);
}

.tr__text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
}

.tr__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.tr__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--mp-ink);
  text-decoration: none;
  text-align: left;
  box-shadow: 0 8px 24px rgba(12, 60, 70, 0.18);
}

.tr__btn i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e6f6f7;
  color: var(--mp-1);
}

.tr__btn i svg {
  width: 22px;
  height: 22px;
}

.tr__btn b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.tr__btn small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #5f6b72;
}

.tr__btn--main {
  grid-column: 1 / -1;
  padding: 18px 18px;
  background: var(--mp-ac);
  color: #2f3a1f;
}

.tr__btn--main i {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.55);
  color: #2f3a1f;
}

.tr__btn--main i svg {
  width: 28px;
  height: 28px;
}

.tr__btn--main b {
  font-size: 20px;
}

.tr__btn--main small {
  color: #4a5530;
}

.tr__pic {
  margin: 0;
  padding: 8px;
  border-color: #fff;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-dark);
}

.tr__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  object-fit: cover;
  object-position: 40% 40%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tr__btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .tr__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(12, 60, 70, 0.24);
  }
}

@media (min-width: 768px) {
  .tr__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 56px;
    padding-block: 88px;
  }

  .tr__body {
    text-align: left;
  }

  .tr__ttl {
    font-size: 36px;
  }

  .tr__text {
    margin-top: 16px;
    font-size: 15.5px;
  }

  .tr__btns {
    gap: 12px;
    margin-top: 30px;
  }

  .tr__btn--main {
    padding: 20px 22px;
  }

  .tr__btn--main b {
    font-size: 22px;
  }

  .tr__pic {
    padding: 10px;
  }
}

/* 体験授業：コンパクト版（写真は小さく左、右に見出し＋ボタン1つ） */
.tr__grid {
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: 36px;
}

.tr__pic {
  width: min(220px, 60%);
  margin: 0 auto;
  padding: 6px;
}

.tr__pic img {
  aspect-ratio: 3 / 2;
}

.tr__ttl {
  font-size: 22px;
}

.tr__text {
  margin-top: 8px;
  font-size: 13px;
}

.tr__btn--main {
  position: relative;
  display: flex;
  margin-top: 16px;
  padding: 14px 44px 14px 14px;
}

.tr__btn--main i {
  width: 44px;
  height: 44px;
}

.tr__btn--main i svg {
  width: 24px;
  height: 24px;
}

.tr__btn--main b {
  font-size: 18px;
}

.tr__btn--main > em {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid #2f3a1f;
  border-right: 2.5px solid #2f3a1f;
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 768px) {
  .tr__grid {
    grid-template-columns: 240px 1fr;
    align-items: center;
    gap: 36px;
    padding-block: 44px;
  }

  .tr__pic {
    width: 100%;
    margin: 0;
    padding: 8px;
  }

  .tr__body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "t b" "x b";
    align-items: center;
    column-gap: 32px;
  }

  .tr__ttl {
    grid-area: t;
    font-size: 26px;
    white-space: nowrap;
  }

  .tr__text {
    grid-area: x;
    margin-top: 6px;
    font-size: 14px;
  }

  .tr__btn--main {
    grid-area: b;
    width: 320px;
    margin-top: 0;
    padding: 16px 48px 16px 16px;
  }

  .tr__btn--main b {
    font-size: 19px;
  }
}

/* 支援の内容：見出し無し。タブの直下に中身 */
.sp .sp_rows {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .sp .sp_rows {
    margin-top: 36px;
  }
}

/* 支援の内容：本文は短い箇条書き（3つ）に */
.sp .ac_row__no {
  display: inline-block;
  padding: 5px 12px;
  border: 1.5px solid var(--mp-1);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mp-1);
}

.sp .ac_row--flip .ac_row__no {
  border-color: var(--mp-2);
  color: var(--mp-2);
}

.sp .ac_row__ttl {
  margin-top: 12px;
}

.ac_row__list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.ac_row__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #3f5560;
}

.ac_row__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--mp-1);
  border-bottom: 2.5px solid var(--mp-1);
  transform: rotate(-45deg);
}

.sp .ac_row--flip .ac_row__list li::before {
  border-color: var(--mp-2);
}

@media (min-width: 768px) {
  .ac_row__list {
    gap: 10px;
    margin-top: 20px;
  }

  .ac_row__list li {
    font-size: 15px;
  }
}

/* ==========================================================================
   セクションの継ぎ目を整える
   ・区切りのライム線を廃止
   ・薄い方眼（--tint）は上下をぼかさず、端まで同じ濃さで敷く
   ・表紙下（目次の板）と主張セクションは同じ薄い水色で地続きに
   ========================================================================== */
.lp_dom + .lp_dom::before {
  content: none;
}

.lp_dom--tint {
  background:
    repeating-linear-gradient(0deg, rgba(28, 148, 164, 0.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(28, 148, 164, 0.045) 0 1px, transparent 1px 34px),
    #f3f9fa;
}

.mp_hero,
.mp_say {
  background: #f3f9fa;
}

.mp_say {
  padding-block: 72px;
}

@media (min-width: 768px) {
  .mp_say {
    padding-block: 96px;
  }
}

/* ==========================================================================
   最上部の流れる帯（マイプロの型）
   ========================================================================== */
.mp_ticker--top {
  background: var(--mp-dark);
}

.mp_ticker--top .mp_ticker__row span {
  padding: 8px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mp_ticker--top .mp_ticker__row b {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mp-ac);
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #2f3a1f;
  vertical-align: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .mp_ticker--top .mp_ticker__row {
    animation-duration: 30s;
  }
}

@media (max-width: 767px) {
  .lp_header {
    top: 0;
  }

  body {
    padding-top: 65px;
  }

  /* 帯はスクロールで流れる（固定ヘッダーの上には置かない） */
  .mp_ticker--top {
    position: relative;
    z-index: 51;
    margin-top: -65px;
  }

  .mp_ticker--top + .lp_header {
    position: sticky;
  }
}

/* ==========================================================================
   表紙のタグ：2段（分野 ＋ 一言）
   ========================================================================== */
.mp_copy__tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.mp_copy__tag_a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mp-1);
}

.mp_copy__tag_b {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

@media (min-width: 768px) {
  .mp_copy__tag {
    gap: 10px;
    padding: 0;
  }

  .mp_copy__tag_a,
  .mp_copy__tag_b {
    padding: 9px 18px;
    font-size: 14.5px;
  }
}

/* ==========================================================================
   専門家カード：アイコン無しのスマートな版
   ========================================================================== */
.tm_kids .tm_role {
  gap: 8px;
  padding: 16px 14px 12px;
}

.tm_role__name em {
  top: 16px;
}

@media (min-width: 768px) {
  .tm_kids .tm_role {
    padding: 18px 16px 14px;
  }
}

/* ==========================================================================
   コースの見出し：高1・高2と高3を対等に並べる
   ========================================================================== */
.cl_ttl {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-wrap: initial;
}

.cl_ttl > span {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.cl_ttl small {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mp-1);
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #fff;
}

.cl_ttl__b small {
  background: var(--mp-2);
}

.cl_ttl em {
  font-style: normal;
  color: var(--mp-ink);
  background: linear-gradient(transparent 72%, rgba(196, 217, 63, 0.45) 72%);
}

.cl_ttl__a em {
  color: var(--mp-1);
}

.cl_ttl__b em {
  color: var(--mp-2);
  background: linear-gradient(transparent 72%, rgba(196, 217, 63, 0.45) 72%);
}

@media (min-width: 768px) {
  .cl_ttl {
    grid-template-columns: auto auto;
    gap: 16px 48px;
    align-items: start;
    font-size: clamp(26px, 2.9vw, 36px);
  }

  .cl_ttl em {
    white-space: nowrap;
  }

  .cl_ttl small {
    padding: 5px 14px;
    font-size: 13px;
  }
}

/* 「主に高3」：スマホは名前の帯の右横に流し、PCだけ右上に固定 */
@media (max-width: 767px) {
  .tm_role__name em {
    position: static;
    margin-left: 0;
  }

  .tm_kids .tm_role small {
    min-height: 0;
  }

  .tm_kids .tm_role .tm_role__name {
    min-height: 62px;
    align-content: start;
  }
}

/* ==========================================================================
   専門家カード：学年タグを名前の上に
   ========================================================================== */
.tm_role__grade {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.tm_role__grade--a {
  background: #e6f6f7;
  color: var(--mp-1);
}

.tm_role__grade--b {
  background: #eaf5ef;
  color: #2f8f66;
}

.tm_kids .tm_role .tm_role__name {
  min-height: 0;
  margin-top: 2px;
}

.tm_kids .tm_role small {
  min-height: 3.2em;
}

@media (max-width: 767px) {
  .tm_kids .tm_role small {
    min-height: 3.2em;
  }

  .tm_kids > li:last-child .tm_role small {
    min-height: 0;
  }
}

/* ==========================================================================
   コースの見出し：黒文字＋キーワードだけ色
   ========================================================================== */
.cl_ttl2 {
  color: var(--mp-ink);
  text-wrap: initial;
}

.cl_ttl2 i {
  font-style: normal;
  color: var(--mp-1);
}

.cl_ttl2 i.k2 {
  color: var(--mp-2);
}

/* ==========================================================================
   表紙：見出しの下の一言
   ========================================================================== */
.mp_copy__sub {
  margin-top: 14px;
}

.mp_copy__sub span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #fff;
}

.mp_copy__sub span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--mp-ac);
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .mp_copy__sub {
    margin-top: 20px;
  }

  .mp_copy__sub span {
    padding-left: 38px;
    font-size: 20px;
  }

  .mp_copy__sub span::before {
    width: 26px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mp_copy__sub {
    animation: mp_copy_in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 2.4s both;
  }
}

/* ==========================================================================
   支援の内容：いま → 目指す状態
   ========================================================================== */
.gl {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.gl__col {
  padding: 18px 18px 16px;
  border-radius: 16px;
}

.gl__col--b {
  border: 1.5px dashed #c3ccd2;
  background: #fff;
}

.gl__col--a {
  border: 2px solid var(--mp-1);
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.gl__k {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.gl__col--b .gl__k {
  background: #eef1ee;
  color: #7a8c96;
}

.gl__col--a .gl__k {
  background: var(--mp-1);
  color: #fff;
}

.gl__ttl {
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mp-ink);
}

.gl__col--b .gl__ttl {
  color: #5f6b72;
}

.gl__list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.gl__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #5f6b72;
}

.gl__col--b .gl__list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 2px;
  width: 8px;
  height: 2px;
  background: #b7c1c7;
}

.gl__col--a .gl__list li {
  color: #323b4b;
}

.gl__col--a .gl__list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 1px;
  width: 10px;
  height: 5px;
  border-left: 2.5px solid var(--mp-1);
  border-bottom: 2.5px solid var(--mp-1);
  transform: rotate(-45deg);
}

.gl__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--mp-1);
}

.gl__arrow br {
  display: none;
}

.gl__arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--mp-1);
  border-bottom: 2.5px solid var(--mp-1);
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .gl {
    grid-template-columns: 1fr 96px 1.1fr;
    align-items: stretch;
    gap: 0 14px;
    margin-top: 36px;
  }

  .gl__col {
    padding: 24px 26px 22px;
  }

  .gl__ttl {
    font-size: 19px;
  }

  .gl__list li {
    font-size: 14px;
  }

  .gl__arrow {
    flex-direction: column;
    gap: 6px;
  }

  .gl__arrow br {
    display: inline;
  }

  .gl__arrow::after {
    width: 12px;
    height: 12px;
    transform: rotate(-45deg);
  }
}

/* ==========================================================================
   料金
   ========================================================================== */
.pr {
  background: #fff;
}

.pr_cards {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.pr_card {
  position: relative;
  padding: 24px 22px 22px;
  border: 2px solid var(--c);
  border-radius: 18px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--c);
}

.pr_card--a { --c: var(--mp-1); }
.pr_card--b { --c: var(--mp-2); }

.pr_card__grade {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--c);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.pr_card__name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #5f6b72;
}

.pr_card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #d3edef;
  color: var(--mp-ink);
}

.pr_card__price b {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c);
}

.pr_card__price small {
  font-size: 13px;
  font-weight: 700;
  color: #5f6b72;
}

.pr_card__list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.pr_card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #3f5560;
}

.pr_card__list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--c);
  border-bottom: 2.5px solid var(--c);
  transform: rotate(-45deg);
}

.pr_note {
  margin-top: 14px;
  font-size: 11.5px;
  text-align: center;
  color: #8a9aa3;
}

.pr_cta {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 36px;
  padding: 28px 18px;
  border-radius: 18px;
  background: #f3f9fa;
}

.pr_cta__ttl {
  font-size: 20px;
  font-weight: 700;
  color: var(--mp-ink);
}

.pr_cta .tr__btn--main {
  width: 100%;
  max-width: 360px;
  margin-top: 0;
}

@media (min-width: 768px) {
  .pr_cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .pr_card {
    padding: 30px 30px 28px;
  }

  .pr_card__price b {
    font-size: 48px;
  }

  .pr_card__list li {
    font-size: 14.5px;
  }

  .pr_cta {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 48px;
    padding: 32px 40px;
  }

  .pr_cta__ttl {
    font-size: 24px;
  }

  .pr_cta .tr__btn--main {
    width: 320px;
  }

  /* 目次は6項目 */
  .mp_jump__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ==========================================================================
   お問い合わせ：LINEの1ボタンに統一
   ========================================================================== */
.mp_end__cards,
.mp_end .lp_todo_block {
  display: none;
}

.mp_end__box {
  max-width: 640px;
  margin: 28px auto 0;
}

.mp_end__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 48px 16px 16px;
  border-radius: 16px;
  background: var(--mp-ac);
  color: #2f3a1f;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.mp_end__line i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.mp_end__line i svg {
  width: 26px;
  height: 26px;
}

.mp_end__line b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.mp_end__line small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #4a5530;
}

.mp_end__line em {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid #2f3a1f;
  border-right: 2.5px solid #2f3a1f;
  transform: translateY(-50%) rotate(45deg);
}

.mp_end__alt {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.mp_end__alt a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp_end__line {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .mp_end__line:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  }
}

@media (min-width: 768px) {
  .mp_end__box {
    margin-top: 36px;
  }

  .mp_end__line {
    padding: 20px 56px 20px 20px;
  }

  .mp_end__line b {
    font-size: 20px;
  }

  .mp_end__line small {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   運営会社
   ========================================================================== */
.co {
  padding-block: 56px;
  background: #f3f9fa;
}

.co .lp_dom__ttl {
  margin-top: 0;
}

.co_card {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 22px 20px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.co_card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #d3edef;
}

.co_card__head img {
  width: 120px;
  height: auto;
}

.co_card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-ink);
}

.co_card__name small {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #8a9aa3;
}

.co_card__dl {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.co_card__dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
}

.co_card__dl dt {
  font-weight: 700;
  color: var(--mp-1);
}

.co_card__dl dd {
  color: #3f5560;
}

.co_card__dl a {
  color: var(--mp-1);
}

.co_card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 34px 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--mp-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-1);
  text-decoration: none;
}

.co_card__link em {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--mp-1);
  border-right: 2px solid var(--mp-1);
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 768px) {
  .co {
    padding-block: 72px;
  }

  .co_card {
    margin-top: 32px;
    padding: 30px 34px;
  }

  .co_card__head img {
    width: 150px;
  }

  .co_card__dl > div {
    grid-template-columns: 96px 1fr;
    font-size: 14.5px;
  }
}

/* ==========================================================================
   表紙（PC）：高さの上限を決め、文字は縦中央に。ワイド画面で下が空かないように
   ========================================================================== */
@media (min-width: 768px) {
  .mp_slides {
    aspect-ratio: auto;
    height: clamp(520px, 44vw, 640px);
    min-height: 0;
  }

  .mp_copy {
    top: 50%;
  }
}

@media (min-width: 1400px) {
  .mp_slides {
    height: 640px;
  }
}

/* ==========================================================================
   表紙の見出し v2：「実績ゼロ」の箱を大きく、2行目に「戦える自分」を強調
   ========================================================================== */
.mp_copy__ttl--v2 {
  line-height: 1.3;
}

.mp_copy__ttl--v2 .mp_hl {
  font-size: 1.12em;
  letter-spacing: 0.02em;
}

.mp_copy__ttl_l2 {
  display: inline-block;
  margin-top: 0.18em;
}

.mp_copy__ttl_l2 strong {
  position: relative;
  font-weight: 700;
  color: #fff;
}

/* 「戦える自分」の下にライムの太い下線を引く（左からワイプ） */
.mp_copy__ttl_l2 strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.02em;
  left: 0;
  height: 0.22em;
  border-radius: 3px;
  background: var(--mp-ac);
  opacity: 0.95;
  z-index: -1;
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .mp_copy__ttl_l2 strong::after {
    animation: mp_underline 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 2.2s both;
  }

  .mp_copy__sub {
    animation-delay: 2.8s;
  }
}

@media (min-width: 768px) {
  .mp_copy__ttl--v2 {
    font-size: clamp(40px, 3.9vw, 52px);
    line-height: 1.28;
  }

  .mp_copy__ttl--v2 .mp_hl {
    font-size: 1.15em;
  }
}

/* 「戦える自分」の線：細く、少し下に離して、両端を丸く。マーカーではなくペンの一筆に */
.mp_copy__ttl_l2 strong::after {
  right: -0.06em;
  bottom: -0.18em;
  left: -0.02em;
  height: 0.09em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mp-ac) 0%, var(--mp-ac) 82%, rgba(196, 217, 63, 0) 100%);
  opacity: 1;
  z-index: 0;
  transform: none;
  clip-path: inset(0 100% 0 0 round 999px);
}

@media (prefers-reduced-motion: no-preference) {
  .mp_copy__ttl_l2 strong::after {
    animation: mp_stroke 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 2.2s both;
  }

  @keyframes mp_stroke {
    from { clip-path: inset(0 100% 0 0 round 999px); }
    to   { clip-path: inset(0 0 0 0 round 999px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp_copy__ttl_l2 strong::after {
    clip-path: none;
  }
}

/* ==========================================================================
   専門家カード：枠の色に少しだけ変化（ティール系のグラデーション）
   ========================================================================== */
.tm_kids > li:nth-child(1) .tm_role { --x: #1c94a4; }
.tm_kids > li:nth-child(2) .tm_role { --x: #2a9c9c; }
.tm_kids > li:nth-child(3) .tm_role { --x: #38a493; }
.tm_kids > li:nth-child(4) .tm_role { --x: #2f8fa8; }
.tm_kids > li:nth-child(5) .tm_role { --x: #3aa0b0; }

.tm_kids .tm_role {
  border-color: var(--x);
  box-shadow: 3px 3px 0 var(--x);
}

.tm_kids .tm_role .tm_role__name > span {
  background: var(--x);
}

.tm_kids .tm_role .tm_role__more summary,
.tm_kids .tm_role .tm_role__more summary::after {
  color: var(--x);
  border-color: var(--x);
}

.tm_kids .tm_role .tm_role__more li::before {
  background: var(--x);
}

/* ==========================================================================
   表紙：文字の間隔
   ========================================================================== */
.mp_copy__tag {
  margin-bottom: 18px;
}

.mp_copy__ttl--v2 {
  line-height: 1.34;
  letter-spacing: 0.04em;
}

.mp_copy__ttl--v2 .mp_hl {
  margin-right: 0.14em;
  padding: 0 0.32em;
  letter-spacing: 0.06em;
}

.mp_copy__ttl_l2 {
  margin-top: 0.3em;
  letter-spacing: 0.05em;
}

.mp_copy__ttl_l2 strong::after {
  bottom: -0.22em;
}

.mp_copy__sub {
  margin-top: 22px;
}

.mp_copy__sub span {
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .mp_copy__tag {
    margin-bottom: 24px;
  }

  .mp_copy__ttl--v2 {
    line-height: 1.32;
  }

  .mp_copy__ttl_l2 {
    margin-top: 0.34em;
  }

  .mp_copy__sub {
    margin-top: 30px;
  }
}

/* ==========================================================================
   料金：一般的な塾との比較（費用対効果）
   ========================================================================== */
.pr_cmp {
  margin-top: 40px;
  padding: 24px 18px 20px;
  border-radius: 18px;
  background: #f3f9fa;
}

.pr_cmp__ttl {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--mp-1);
}

.pr_cmp__lead {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--mp-ink);
}

.pr_cmp__lead b {
  color: var(--mp-1);
}

.pr_cmp__table {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #d3edef;
}

.pr_cmp__row {
  display: grid;
  grid-template-columns: 1fr 76px 76px;
  align-items: center;
  border-top: 1px solid #e6f0f2;
}

.pr_cmp__row:first-child {
  border-top: 0;
}

.pr_cmp__row > span {
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #323b4b;
}

.pr_cmp__row--head {
  background: #f7fbfc;
}

.pr_cmp__row--head > span {
  padding: 9px 6px;
  font-size: 11.5px;
  text-align: center;
  color: #7a8c96;
}

.pr_cmp__row--head > span.is_me {
  color: #fff;
  background: var(--mp-1);
}

.pr_cmp__row > i {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 44px;
  font-style: normal;
}

.pr_cmp__row > i.no {
  font-size: 14px;
  color: #b7c1c7;
}

.pr_cmp__row > i.ok::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--mp-1);
  border-bottom: 3px solid var(--mp-1);
  transform: translateY(-2px) rotate(-45deg);
}

.pr_cmp__row > i:last-child {
  background: rgba(28, 148, 164, 0.06);
}

.pr_cmp__foot {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.8;
  text-align: center;
  color: #4b5860;
}

.pr_cmp__foot b {
  color: var(--mp-ink);
}

@media (min-width: 768px) {
  .pr_cmp {
    margin-top: 56px;
    padding: 36px 40px 32px;
  }

  .pr_cmp__lead {
    font-size: 20px;
  }

  .pr_cmp__table {
    max-width: 760px;
    margin: 24px auto 0;
  }

  .pr_cmp__row {
    grid-template-columns: 1fr 140px 140px;
  }

  .pr_cmp__row > span {
    padding: 13px 20px;
    font-size: 14.5px;
  }

  .pr_cmp__row--head > span {
    font-size: 13px;
  }

  .pr_cmp__foot {
    margin-top: 22px;
    font-size: 15px;
  }
}

/* ==========================================================================
   見出しの上の英字（小さく、字間広く）
   ========================================================================== */
.lp_dom__en {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--mp-1);
}

.lp_dom__en + .lp_dom__ttl {
  margin-top: 0;
}

@media (min-width: 768px) {
  .lp_dom__en {
    margin-bottom: 14px;
    font-size: 12px;
  }
}

/* 料金：税込表記 */
.pr_card__price small i {
  margin-left: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: #8a9aa3;
}

/* ==========================================================================
   料金：一般的な塾との違い（2列のコンパクト版）
   ========================================================================== */
.pr_cmp__table { display: none; }

.pr_cmp__lead b {
  color: var(--mp-ink);
}

.pr_cmp__cols {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin: 20px auto 0;
}

.pr_cmp__col {
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: #fff;
}

.pr_cmp__col--x {
  border: 1.5px dashed #c3ccd2;
}

.pr_cmp__col--me {
  border: 2px solid var(--mp-1);
  box-shadow: 3px 3px 0 var(--mp-1);
}

.pr_cmp__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a9aa3;
}

.pr_cmp__col--me .pr_cmp__h {
  color: var(--mp-1);
}

.pr_cmp__col ul {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.pr_cmp__col li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #5f6b72;
}

.pr_cmp__col li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 2px;
  width: 10px;
  height: 5px;
  border-left: 2.5px solid #b7c1c7;
  border-bottom: 2.5px solid #b7c1c7;
  transform: rotate(-45deg);
}

.pr_cmp__col--me li {
  color: #323b4b;
}

.pr_cmp__col--me li::before {
  border-color: var(--mp-1);
}

.pr_cmp__col--me li.is_plus {
  color: var(--mp-1);
}

.pr_cmp__col--me li.is_plus::after {
  content: "＋";
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(196, 217, 63, 0.5);
  font-size: 10px;
  color: #3a4514;
  vertical-align: 1px;
}

@media (min-width: 768px) {
  .pr_cmp__cols {
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
    margin-top: 26px;
    align-items: start;
  }

  .pr_cmp__col {
    padding: 22px 24px 20px;
  }

  .pr_cmp__col li {
    font-size: 15px;
  }
}

/* ==========================================================================
   お問い合わせ：LINE（緑）
   ========================================================================== */
.mp_end__line {
  background: #06c755;
  color: #fff;
}

.mp_end__line i {
  background: #fff;
  overflow: hidden;
}

.mp_end__line i img {
  display: block;
  width: 30px;
  height: auto;
}

.mp_end__line small {
  color: rgba(255, 255, 255, 0.85);
}

.mp_end__line em {
  border-color: #fff;
}

/* ==========================================================================
   代表メッセージ
   ========================================================================== */
.ms {
  background: #fff;
}

.ms_card {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin: 28px auto 0;
}

.ms_card__pic {
  width: min(220px, 62%);
  margin: 0 auto;
  padding: 8px;
}

.ms_card__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.ms_card__lead {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--mp-ink);
}

.ms_card__body > p:not(.ms_card__lead):not(.ms_card__by) {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.95;
  color: #3f5560;
}

.ms_card__by {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #d3edef;
}

.ms_card__by b {
  display: block;
  font-size: 16px;
  color: var(--mp-ink);
}

.ms_card__by small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #8a9aa3;
}

@media (min-width: 768px) {
  .ms_card {
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 44px;
  }

  .ms_card__pic {
    width: 100%;
    margin: 0;
    padding: 10px;
  }

  .ms_card__lead {
    font-size: 26px;
  }

  .ms_card__body > p:not(.ms_card__lead):not(.ms_card__by) {
    font-size: 15px;
  }
}

/* ==========================================================================
   料金：3つの安心バッジ
   ========================================================================== */
.pr_badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.pr_badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--mp-1);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mp-1);
}

.pr_badges li i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mp-1);
  color: #fff;
}

.pr_badges li i svg {
  width: 11px;
  height: 11px;
}

@media (min-width: 768px) {
  .pr_badges {
    gap: 12px;
    margin-top: 30px;
  }

  .pr_badges li {
    padding: 9px 18px;
    font-size: 14px;
  }

  .pr_cards {
    margin-top: 32px;
  }
}

/* ==========================================================================
   受講生の声：明るい背景に、左「本人と声」・右「結果と変化」
   ========================================================================== */
.cs {
  background: linear-gradient(180deg, #f3f9fa 0%, #eaf5f3 100%);
}

.cs_grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

/* 本人と声 */
.cs_voice {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 47, 85, 0.08);
}

.cs_voice__pic {
  margin: 0;
  padding: 5px;
  border-radius: 10px;
}

.cs_voice__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 14%;
}

.cs_voice__name b {
  display: block;
  font-size: 16px;
  color: var(--mp-ink);
}

.cs_voice__name small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mp-1);
}

.cs_voice__text {
  position: relative;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 3px solid rgba(196, 217, 63, 0.9);
  font-size: 14px;
  line-height: 1.9;
  color: #3f5560;
}

/* 結果 */
.cs_side {
  display: grid;
  gap: 14px;
}

.cs_result {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--mp-dark);
  color: #fff;
}

.cs_result__k {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mp-ac);
}

.cs_result > b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.cs_result__v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.cs_result__v em {
  font-style: normal;
  font-size: 24px;
  color: var(--mp-ac);
}

.cs_result__v small {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

/* 変化 */
.cs_delta {
  padding: 14px 16px 8px;
  border: 2px solid var(--mp-1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--mp-1);
}

.cs_delta__head {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6f0f2;
}

.cs_delta__head span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a9aa3;
}

.cs_delta__head span:first-child { grid-column: 2; }
.cs_delta__head span:last-child { color: var(--mp-1); }

.cs_delta__head small {
  display: block;
  font-size: 10px;
  font-weight: 500;
}

.cs_delta dl > div {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #e6f0f2;
}

.cs_delta dl > div:last-child { border-bottom: 0; }

.cs_delta dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-1);
}

.cs_delta dd.b {
  position: relative;
  padding-right: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #9aa7ae;
}

.cs_delta dd.b::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--mp-1);
  border-right: 2px solid var(--mp-1);
  transform: translateY(-50%) rotate(45deg);
}

.cs_delta dd.a {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mp-ink);
}

.cs_delta dd.a small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #6b7a83;
}

/* 集合写真 */
.cs_wide {
  margin: 18px 0 0;
  padding: 8px;
  border-radius: 16px;
}

.cs_wide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
}

.cs_wide figcaption {
  padding: 12px 6px 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #4b5860;
}

.cs_wide figcaption b {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--mp-ink);
}

.cs_note {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.8;
  color: #8a9aa3;
}

@media (min-width: 768px) {
  .cs_grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    margin-top: 44px;
    align-items: start;
  }

  .cs_voice {
    grid-template-columns: 150px 1fr;
    gap: 22px;
    padding: 26px 26px;
  }

  .cs_voice__pic img {
    aspect-ratio: 4 / 5;
  }

  .cs_voice__name b { font-size: 18px; }
  .cs_voice__text { font-size: 15px; margin-top: 14px; }

  .cs_result { padding: 20px 24px; }
  .cs_result > b { font-size: 20px; }
  .cs_result__v em { font-size: 28px; }

  .cs_delta { padding: 18px 20px 10px; }
  .cs_delta__head,
  .cs_delta dl > div { grid-template-columns: 56px 100px 1fr; gap: 12px; }
  .cs_delta dd.a { font-size: 17px; }

  .cs_wide {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0 24px;
    align-items: center;
    margin-top: 24px;
    padding: 10px;
  }

  .cs_wide figcaption {
    padding: 8px 12px 8px 0;
    font-size: 13.5px;
  }

  .cs_wide figcaption b {
    font-size: 17px;
    margin-bottom: 6px;
  }
}

.cs_ttl {
  text-wrap: initial;
}

.cs_ttl em {
  white-space: nowrap;
}

/* ==========================================================================
   見出しの英字：少し大きく、下に短い線
   ========================================================================== */
.lp_dom__en {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--mp-1);
}

.lp_dom__en::after {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--mp-ac);
}

.lp_dom__en--w {
  color: rgba(255, 255, 255, 0.9);
}

.lp_dom__en--w::after {
  background: var(--mp-ac);
}

.vc2__body .lp_dom__en,
.tr__body .lp_dom__en {
  align-items: flex-start;
}

.vc2__body .lp_dom__en + .vc2__k {
  margin-top: 0;
}

.mp_say .lp_dom__en {
  margin-bottom: 16px;
}

.mp_end .lp_dom__en {
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .tr__body .lp_dom__en {
    align-items: center;
  }
}

@media (min-width: 768px) {
  .lp_dom__en {
    gap: 10px;
    margin-bottom: 18px;
    font-size: 15px;
  }
}

/* ヘッダーロゴ（新ロゴは少し縦長） */
.lp_header .header__logo img {
  width: 128px;
  height: auto;
}

@media (min-width: 768px) {
  .lp_header .header__logo img {
    width: 150px;
  }
}

/* 上の帯を削除したので、スマホの固定ヘッダーのずらしを元に戻す */
@media (max-width: 767px) {
  .mp_ticker--top { display: none; }
  .lp_header { position: fixed; }
}

/* 専門家カードの学年タグ：目立たせる */
.tm_role__grade--a {
  background: var(--mp-1);
  color: #fff;
}

.tm_role__grade--b {
  background: var(--mp-2);
  color: #fff;
}

/* 担任メンターの説明：短い2行 */
.tm_hub__body small {
  font-size: 12.5px;
  line-height: 1.75;
}

/* 代表の読み仮名 */
.ms_card__by b span {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #8a9aa3;
}

/* 受講生の声（元のデザイン）：本文と結果の帯の色を整える */
.vc--split .vc__text {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}

.vc--split .vc__text::before,
.vc--split .vc__text::after {
  content: none;
}

.vc2__k {
  margin-top: 0;
}

/* ヘッダーロゴ：タグライン付きなので少し大きく */
.lp_header .header__logo img {
  width: 150px;
}

@media (min-width: 768px) {
  .lp_header .header__logo img {
    width: 176px;
  }
}

/* 出現アニメーション後は合成レイヤーを解放（文字がぼやけないように） */
.reveal.is_in {
  will-change: auto;
  transform: none;
}

/* ==========================================================================
   ヘッダーロゴ：縦をコンパクトに（ヘッダーの高さは変えない）
   ========================================================================== */
.lp_header .header__logo {
  display: flex;
  align-items: center;
}

.lp_header .header__logo img {
  width: 118px;
  height: auto;
}

@media (min-width: 768px) {
  .lp_header .header__logo img {
    width: 136px;
  }
}

/* 学年タグは元に戻す（「主に高3」だけ右上の小さなタグ） */
.tm_role__grade { display: none; }

/* 英字見出し：アニメーションなし。合成レイヤーに乗せず、文字を素のまま描く */
.lp_dom__en {
  opacity: 1;
  transform: none;
  will-change: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   お問い合わせ：やわらかいトーンに（白ベース＋淡いティール）
   ========================================================================== */
.mp_end {
  padding-block: 72px 80px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(28, 148, 164, 0.10) 0%, rgba(28, 148, 164, 0) 70%),
    linear-gradient(180deg, #fff 0%, #eef8f9 100%);
  color: var(--mp-ink);
}

.mp_end .lp_dom__en {
  margin-bottom: 18px;
}

.mp_end__ttl {
  font-size: 26px;
  color: var(--mp-ink);
}

.mp_end__text {
  margin-top: 16px;
  font-size: 14px;
  color: #5a6472;
}

.mp_end__box {
  max-width: 560px;
  margin-top: 26px;
}

.mp_end__line {
  gap: 12px;
  padding: 14px 40px 14px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(6, 199, 85, 0.28);
}

.mp_end__line i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.mp_end__line span {
  min-width: 0;
  text-align: left;
}

.mp_end__line b {
  font-size: clamp(13.5px, 4.1vw, 16px);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.mp_end__line small {
  margin-top: 2px;
  font-size: clamp(10px, 3vw, 11.5px);
  white-space: nowrap;
  letter-spacing: 0;
}

.mp_end__line em {
  right: 18px;
}

.mp_end__alt {
  margin-top: 18px;
  font-size: 12px;
  color: #6b7480;
}

.mp_end__alt a {
  color: var(--mp-1);
  text-decoration-color: rgba(28, 148, 164, 0.5);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mp_end__line:hover {
    box-shadow: 0 14px 32px rgba(6, 199, 85, 0.34);
  }
}

@media (min-width: 768px) {
  .mp_end {
    padding-block: 104px 112px;
  }

  .mp_end__ttl {
    font-size: 38px;
  }

  .mp_end__text {
    font-size: 15.5px;
  }

  .mp_end__box {
    margin-top: 34px;
  }

  .mp_end__line {
    gap: 16px;
    padding: 18px 56px 18px 18px;
  }

  .mp_end__line i {
    width: 52px;
    height: 52px;
  }

  .mp_end__line b {
    font-size: 20px;
  }

  .mp_end__line small {
    font-size: 12.5px;
  }
}