@charset "UTF-8";

/* ============================================
   Reset / Base
============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #333;
  line-height: 1.7;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   スマホ用 fluid 単位（基準幅 390px）
   ・390px幅で 1px ＝ デザインpx（例: font-size: calc(16 * var(--sp)) → 390で16px）
   ・約1.15倍（≒448px）で頭打ち（大きめ端末＆PCでの肥大を防止）
   ・全幅で定義（PCでも上限値になるだけで壊れない）。SPのみ効かせたい値は @media 内で使う
   ・文字は可読性のため clamp() 併用推奨: font-size: clamp(13px, calc(15 * var(--sp)), 17px)
============================================ */
:root {
  --sp: min(calc(100vw / 390), 1.15px);
}

/* ============================================
   超ワイド（2500px超）：2500px表示時の比率のまま全体を等比拡大
   ・zoom で全体をズーム（transformと違い sticky/固定・スクロール量も正しく保持）
   ・2500px以下は従来どおり（この指定は効かない）
   ・zoom未対応の旧ブラウザでは無視され、従来どおり中央固定表示にフォールバック
============================================ */
@media (min-width: 2500px) {
  :root {
    zoom: calc(100vw / 2500px);
  }
}

/* ============================================
   Utilities（改行の出し分け・ブレイクポイント768px）
   ・PCのみ改行:   <br class="br-pc">
   ・スマホのみ改行: <br class="br-sp">
============================================ */
.br-sp {
  display: none;
}
@media (max-width: 768px) {
  .br-pc {
    display: none;
  }
  .br-sp {
    display: inline;
  }
}

/* ============================================
   Layout
============================================ */
.section {
  padding: 80px 20px;
}

.section--gray {
  background: #f5f5f5;
}

.section--cta {
  background: #0b5394;
  color: #fff;
  text-align: center;
}

.section__inner,
.header__inner,
.hero__inner,
.footer__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.section__title {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 40px;
}

/* ============================================
   Header
============================================ */
.header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 176px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 20px;
}

.header__logo {
  flex-shrink: 0;
  line-height: 0;
}

.header__logo img {
  width: 139px;
  height: auto;
}

/* PCナビ + CTA をまとめて右側に */
.header__nav {
  flex-shrink: 0;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 35px;
  list-style: none;
}

.header__nav-link {
  font-size: 16px;
  color: #000;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.header__nav-link:hover {
  opacity: 0.6;
}

/* 申し込みボタン（黄色） */
.header__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 284px;
  height: 49px;
  padding: 15px 50px;
  background: #f9d02f;
  color: #000;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  border-radius: 30px;
  box-shadow: 0 4px 7.5px rgba(251, 173, 37, 0.45);
  transition: opacity 0.2s;
}

.header__cta:hover {
  opacity: 0.85;
}

/* ドロワー内CTA（PCでは非表示、SPドロワー最下部に表示）*/
.header__nav-cta {
  display: none;
}

/* PC時はナビとCTAの間隔を調整 */
@media (min-width: 769px) {
  .header__inner {
    gap: 38px;
  }
  .header__nav {
    margin-left: auto;
  }
}

/* ハンバーガーボタン（SPのみ表示） */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.header__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ドロワー背景オーバーレイ */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-overlay.is-active {
  display: block;
  opacity: 1;
}

/* ============================================
   Keyvisual（メインビジュアル）
   背景＝幅100% / コンテンツ＝1560pxコンテナ
============================================ */
.keyvisual {
  position: relative;
  overflow: hidden;
  background: #eaf7f6;
}
/* 画像要素の共通指定 */
.keyvisual__copy,
.keyvisual__cta-badge,
.keyvisual__benefits picture {
  display: block;
}
.keyvisual__copy img,
.keyvisual__cta-badge img,
.keyvisual__benefits img {
  display: block;
  width: 100%;
  height: auto;
}
.keyvisual__price,
.keyvisual__btitle {
  display: block;
  height: auto;
}
.keyvisual__benefits {
  list-style: none;
  display: flex;
}
.keyvisual__benefits li {
  flex: 1;
}
.keyvisual__btn {
  display: block;
  margin-left:  -6%;
  margin-top: -8%;
}
.keyvisual__btn img {
  display: block;
  width: 100%;
  height: auto;
}
.keyvisual__desc {
  color: #173b3b;
  font-weight: 500;
}
.keyvisual__note {
  color: #173b3b;
}
.kv-br-sp {
  display: none;
}

/* --- SP（≤768px）：縦構図・比率固定オーバーレイ（幅が変わっても同比率）--- */
@media (max-width: 768px) {
  .keyvisual {
    aspect-ratio: 800 / 1768;
    background: url(../img/hero_bg_sp.jpg) top center / cover no-repeat, #eaf7f6;
  }
  .keyvisual__inner,
  .keyvisual__content {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .keyvisual__lead {
    position: static;
    margin: 0;
  }
  .keyvisual__copy {
    position: absolute;
    top: 0%;
    left: 3%;
    width: 94%;
  }
  .keyvisual__price {
    position: absolute;
    top: 31%;
    right: -6%;
    width: 49%;
  }
  .keyvisual__desc {
    position: absolute;
    top: 50.5%;
    left: 5%;
    width: 90%;
    text-align: center;
    font-size: 3.5vw;
    line-height: 1.75;
    margin: 0;
  }
  .keyvisual__btitle {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translateX(-50%);
    width: 54%;
    margin: 0;
  }
  .keyvisual__benefits {
    position: absolute;
    top: 62.5%;
    left: 7%;
    width: 86%;
    gap: 0;
    margin: 0;
  }
  /* PNGのシャドウ余白を相殺して、カードを大きく・詰めて見せる（max-width解除が必須）*/
  .keyvisual__benefits img {
    max-width: none;
    width: calc(100% + 12vw);
    margin: 0 -6.5vw;
  }
  .keyvisual__cta {
    position: absolute;
    top: 81%;
    left: 52%;
    transform: translateX(-50%);
    width: 92%;
    text-align: center;
    margin: 0;
  }
  .keyvisual__cta-badge {
    position: relative;
    z-index: 2;
    width: 70%;
    margin: 0 auto -3%;
  }
  .keyvisual__btn img {
    width: 102%;
    margin: 0 auto;
    max-width: none;
  }
  .keyvisual__note {
    font-size: 2.9vw;
    text-align: center;
    margin-top: -2.5%;
  }
  .kv-br-sp {
    display: inline;
  }
}

/* --- 769px以上：コア1440を基準に、≤1440は等比縮小 / >1440は背景が左右へ伸び中央固定 --- */
@media (min-width: 769px) {
  .keyvisual {
    /* --u = 1px（=1440基準）。1440以下は等比縮小、1440超は固定 */
    --u: min(calc(100vw / 1440), 1px);
    height: calc(785 * var(--u));
    /* 背景ワイド画像：高さフィット＋中央寄せ → 幅が広がると左右へ伸びる */
    background: url(../img/hero_bg.jpg) center center / auto 100% no-repeat, #cfeae6;
  }
  /* コア（1440幅、≤1440は等比）を中央に固定 */
  .keyvisual__inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1440 * var(--u));
    height: 100%;
    padding: 0;
  }
  .keyvisual__content {
    position: absolute;
    left: calc(66 * var(--u));
    top: calc(8 * var(--u));
    width: calc(620 * var(--u));
    max-width: none;
    margin: 0;
  }
  .keyvisual__lead {
    position: relative;
    margin-bottom: calc(6 * var(--u));
  }
  .keyvisual__copy {
    width: calc(620 * var(--u));
  }
  .keyvisual__price {
    position: absolute;
    top: calc(-12 * var(--u));
    right: calc(-134 * var(--u));
    width: calc(219 * var(--u));
  }
  .keyvisual__desc {
    width: calc(720 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: 1.7;
    margin-bottom: calc(6 * var(--u));
  }
  .keyvisual__btitle {
    width: calc(336 * var(--u));
    max-width: none;
    margin: calc(14 * var(--u)) auto calc(6 * var(--u));
  }
  .keyvisual__benefits {
    width: calc(620 * var(--u));
    gap: 0;
    margin-bottom: calc(6 * var(--u));
  }
  /* PNGのシャドウ余白を相殺（画像を拡大＋マイナスマージン）してカードを大きく・詰めて見せる
     ※ width の数字で横幅、左右マージンは -（その数字÷2）にすると中央を保てます */
  .keyvisual__benefits img {
    width: calc(100% + 64 * var(--u));
    max-width: none; /* リセットの img{max-width:100%} を解除（これが無いと幅が効かない）*/
    margin: calc(-17 * var(--u)) calc(-32 * var(--u));
  }
  .keyvisual__cta {
    position: relative;
    text-align: left;
    display: inline-block;
    margin-top: calc(17 * var(--u));
    margin-left: calc(-30 * var(--u));
  }
  .keyvisual__cta-badge {
    position: absolute;
    top: calc(-44 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    width: calc(384 * var(--u));
    max-width: none;
    margin: 0;
  }
  .keyvisual__btn {
    margin-top: 0;
    margin-left: calc(12 * var(--u));
  }
  .keyvisual__btn img {
    width: calc(653 * var(--u));
    max-width: none;
    margin: 0;
    /* left:  calc(653 * var(--u)); */
  }
  .keyvisual__note {
    font-size: calc(13 * var(--u));
    margin-top: calc(-23 * var(--u));
    text-align: center;
  }
}

/* ============================================
   Keyvisual ファーストビュー演出（fv-）
   泡 / 登場アニメ（1回）/ CTAシャイン（ループ）
============================================ */
/* コンテンツを泡より前面に */
.keyvisual__inner {
  z-index: 2;
}

/* --- 泡（CSSの柔らかい円・装飾）--- */
.fv-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.fv-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 255, 255, 0.72),
    rgba(150, 220, 205, 0.5) 50%,
    rgba(150, 220, 205, 0) 72%);
  filter: blur(1px);
}
.fv-bubble--1 { width: 7vw;   aspect-ratio: 1; top: 11%; left: 12%; opacity: 0.65; }
.fv-bubble--2 { width: 10vw;  aspect-ratio: 1; top: 4%;  left: 33%; opacity: 0.6; }
.fv-bubble--3 { width: 5vw;   aspect-ratio: 1; top: 21%; left: 47%; opacity: 0.65; }
.fv-bubble--4 { width: 8vw;   aspect-ratio: 1; top: 40%; left: 62%; opacity: 0.55; }
.fv-bubble--5 { width: 5.5vw; aspect-ratio: 1; top: 62%; left: 41%; opacity: 0.55; }
.fv-bubble--6 { width: 9vw;   aspect-ratio: 1; top: 28%; left: 85%; opacity: 0.5; }
.fv-bubble--7 { width: 4vw;   aspect-ratio: 1; top: 66%; left: 74%; opacity: 0.6; }

/* ループA：4個だけふわふわ（周期を少しずつずらす）*/
.fv-bubble--2 { animation: fv-float 8s ease-in-out infinite; }
.fv-bubble--4 { animation: fv-float 10s ease-in-out -3s infinite; }
.fv-bubble--5 { animation: fv-float 9s ease-in-out -5s infinite; }
.fv-bubble--6 { animation: fv-float 7.5s ease-in-out -1.5s infinite; }
@keyframes fv-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8px, -38px) scale(1.08); opacity: 0.3; }
  100% { transform: translate(0, 0) scale(1); }
}

/* --- 登場アニメ（読込時に1回）--- */
.fv-catch,
.fv-badge-tr,
.fv-desc,
.fv-btitle,
.fv-benefit,
.fv-ctabadge,
.fv-ctabtn,
.fv-note {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}
/* 1. キャッチコピー：下辺からリベール＋フェード */
.fv-catch {
  animation-name: fv-catch-in;
  animation-duration: 0.7s;
  animation-delay: 0.1s;
}
@keyframes fv-catch-in {
  from { opacity: 0; clip-path: inset(100% 0 0 0); translate: 0 12px; }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   translate: 0 0; }
}
/* 2. 右上バッジ / 6. 黄色バッジ：ポップイン */
.fv-badge-tr {
  animation-name: fv-pop-in;
  animation-duration: 0.4s;
  animation-delay: 0.35s;
}
.fv-ctabadge {
  animation-name: fv-pop-in;
  animation-duration: 0.4s;
  animation-delay: 1.15s;
}
@keyframes fv-pop-in {
  from { opacity: 0; scale: 0.9; }
  60%  { scale: 1.02; }
  to   { opacity: 1; scale: 1; }
}
/* 3-5,7. フェード＋上へ（translate個別プロパティでtransformと併用）*/
.fv-desc,
.fv-btitle,
.fv-benefit,
.fv-ctabtn,
.fv-note {
  animation-name: fv-up-in;
}
@keyframes fv-up-in {
  from { opacity: 0; translate: 0 var(--fv-y, 10px); }
  to   { opacity: 1; translate: 0 0; }
}
.fv-desc   { --fv-y: 8px;  animation-duration: 0.5s; animation-delay: 0.5s; }
.fv-btitle { --fv-y: 8px;  animation-duration: 0.5s; animation-delay: 0.65s; }
.fv-benefit { --fv-y: 12px; animation-duration: 0.4s; }
.fv-benefit--1 { animation-delay: 0.78s; }
.fv-benefit--2 { animation-delay: 0.88s; }
.fv-benefit--3 { animation-delay: 0.98s; }
.fv-ctabtn { --fv-y: 14px; animation-duration: 0.5s; animation-delay: 1.25s; }
.fv-note { --fv-y: 6px; animation-duration: 0.5s; animation-delay: 1.4s; }

/* --- ループB：CTAボタンのシャイン（画像は変形させない）--- */
.keyvisual__btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}
.keyvisual__btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: fv-shine 4s ease-in-out infinite;
}
@keyframes fv-shine {
  0% { left: -40%; }
  22%, 100% { left: 130%; }
}

/* --- prefers-reduced-motion：全アニメ無効・最終状態で静止 --- */
@media (prefers-reduced-motion: reduce) {
  .fv-bubble,
  .fv-catch,
  .fv-badge-tr,
  .fv-desc,
  .fv-btitle,
  .fv-benefit,
  .fv-ctabadge,
  .fv-ctabtn,
  .fv-note {
    animation: none !important;
  }
  .fv-catch,
  .fv-badge-tr,
  .fv-desc,
  .fv-btitle,
  .fv-benefit,
  .fv-ctabadge,
  .fv-ctabtn,
  .fv-note {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
  }
  .keyvisual__btn::after {
    animation: none !important;
    display: none;
  }
}

/* ============================================
   MERIT 01
   デザイン基準幅 1440px / ブラウザ幅で可変 / 上限 1560px
   モバイルファースト → 769px以上でfluid化
============================================ */
/* MERIT 01〜03 の共通ラッパー：背景画像を1枚だけスティッキー固定
   - グループ全体（3セクション）をスクロールしている間は背景を固定
   - グループ下端を抜けると解除してスクロールで上へ抜ける */
.merit-group {
  position: relative;
  background: #fff;
}
.merit-group__bg {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.merit-group__bg-img {
  display: block;
  position: sticky;
  /* 固定時は画像がビューポートの縦中央に来るよう、上下に均等な余白 (100vh-70vh)/2 = 15vh */
  top: 15vh;
  height: 70vh;
  background: url(../img/merit-bg.svg) center bottom / cover no-repeat;
}

/* 各セクションは背景透過（共通背景を透けさせる）＋コンテンツを前面へ */
.merit {
  position: relative;
  z-index: 1;
  background: transparent;
}

.merit__container {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  container-type: inline-size;
}

.merit__inner {
  position: relative;
  z-index: 1;
  padding: calc(48 * var(--sp)) calc(20 * var(--sp)) calc(64 * var(--sp));
}

/* --- セクションラベル --- */
.merit__label {
  position: relative;
  text-align: center;
  margin-bottom: calc(20 * var(--sp));
}

.merit__label-num {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: calc(96 * var(--sp));
  line-height: 1;
  color: rgba(67, 189, 190, 0.2);
}

.merit__label-en {
  position: absolute;
  top: calc(-9 * var(--sp));
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: calc(13 * var(--sp));
  letter-spacing: 0.3em;
  color: #aedede;
  white-space: nowrap;
}

/* --- 見出し + スコアカード --- */
.merit__main {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--sp));
}

.merit__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--sp));
  margin-bottom: calc(20 * var(--sp));
}

.merit__headline-line {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #fff;
  font-weight: 900;
  font-size: calc(24 * var(--sp));
  line-height: 1.9;
  padding: 0 calc(16 * var(--sp)) 0 calc(12 * var(--sp));
}

/* 緑グラデーションの帯（スクロールインで左→右にワイプ） */
.merit__headline-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0fa4a4, #24a64f);
  box-shadow: 0 4px 15px rgba(71, 182, 183, 0.2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 白いテキスト（帯のあとにフェード＋スライドで表示） */
.merit__headline-text {
  display: inline-block;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* スクロールインで発火 */
.merit__headline.is-inview .merit__headline-line::before {
  transform: scaleX(1);
}
.merit__headline.is-inview .merit__headline-text {
  opacity: 1;
  transform: none;
}

/* 帯 → テキストの順で、1行目・2行目をずらして再生 */
.merit__headline.is-inview .merit__headline-line:nth-child(1)::before {
  transition-delay: 0.1s;
}
.merit__headline.is-inview .merit__headline-line:nth-child(2)::before {
  transition-delay: 0.45s;
}
.merit__headline.is-inview .merit__headline-line:nth-child(1) .merit__headline-text {
  transition-delay: 0.65s;
}
.merit__headline.is-inview .merit__headline-line:nth-child(2) .merit__headline-text {
  transition-delay: 1s;
}

/* アニメーションを抑制する設定では即表示 */
@media (prefers-reduced-motion: reduce) {
  .merit__headline-line::before {
    transform: none;
    transition: none;
  }
  .merit__headline-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.merit__desc {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

/* --- スコアカード --- */
.score {
  position: relative;
  background: #fcfdfd;
  border-radius: 10px;
  box-shadow: 0 4px 25px rgba(71, 182, 183, 0.2);
  padding: 24px 16px 36px;
  text-align: center;
}

.score__note-top {
  font-size: 11px;
  font-weight: 700;
  color: #6b6b6b;
  margin-bottom: 6px;
}

.score__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.score__laurel {
  width: auto;
}

.score__laurel--l {
  height: 34px;
}

.score__laurel--r {
  height: 35px;
}

.score__big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

.score__big-num {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: #00adaf;
}

.score__big-deno {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #9c9c9c;
}

.score__divider {
  width: 92%;
  max-width: 489px;
  height: 1px;
  background: #d8e6e6;
  margin: 0 auto 20px;
}

.score__metrics {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.score__metric {
  flex: 1;
}

.score__metric-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
}

.score__sparkle {
  width: auto;
}

.score__sparkle--l {
  height: 24px;
}

.score__sparkle--r {
  height: 19px;
}

.score__metric-value {
  font-weight: 700;
  font-size: 30px;
  color: #24a64f;
  margin-bottom: 6px;
}

.score__metric-value span {
  font-size: 13px;
  color: #a2a2a2;
  margin-left: 2px;
}

.score__stars {
  width: 100%;
  max-width: 119px;
  height: auto;
}

.score__note-bottom {
  font-size: 10px;
  color: #6b6b6b;
  text-align: right;
  margin-top: 16px;
}

/* --- サブ説明 --- */
.merit__sub {
  margin: 40px 0 24px;
}

.merit__sub-bar {
  display: block;
  width: 89px;
  height: 4px;
  background: #0fa4a4;
  margin-bottom: 20px;
}

.merit__sub-text {
  font-size: 15px;
  line-height: 1.9;
}

/* --- セミナーカード --- */
.merit__cards {
  list-style: none;
  display: grid;
  /* スマホは2カラム */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.merit-card {
  background: #fcfdfd;
  border-radius: 10px;
  box-shadow: 0 4px 12.5px rgba(71, 182, 183, 0.2);
  padding: 14px;
}

.merit-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 344 / 180;
  object-fit: cover;
  border-radius: 6px;
  background: #d9d9d9;
  margin-bottom: 12px;
}

.merit-card__thumb--empty {
  background: #d9d9d9;
}

.merit-card__title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.merit-card__past {
  font-size: 11px;
  font-weight: normal;
  color: #666;
}

.merit-card__speaker {
  color: #555;
  font-size: 12px;
}

.merit-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: #0087c0;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.merit-card__link:hover {
  opacity: 0.7;
}

.merit-card__link img {
  width: 27px;
  height: 17px;
  flex-shrink: 0;
}

/* --- リンク付き静的カード（イベントカードと同じ余白・ホバー） --- */
.merit-card--link {
  padding: 0 !important;
  transition: box-shadow 0.2s ease;
}
.merit-card--link:hover {
  box-shadow: 0 8px 22px rgba(71, 182, 183, 0.3);
}
.merit-card--link:hover .merit-card__eventlink {
  transform: translateY(-3px);
}

/* --- 動的イベントカード（最新5件） --- */
.merit-card[hidden] {
  display: none;
}
.merit-card--event {
  padding: 0;
}
.merit-card__eventlink {
  display: block;
  height: 100%;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.merit-card--event {
  transition: box-shadow 0.2s ease;
}
.merit-card--event:hover {
  box-shadow: 0 8px 22px rgba(71, 182, 183, 0.3);
}
.merit-card--event:hover .merit-card__eventlink {
  transform: translateY(-3px);
}
.merit-card--event .merit-card__thumb {
  background-size: cover;
  background-position: center;
  background-color: #d9d9d9;
}
.merit-card__date {
  color: #555;
  font-size: 14px;
  margin-top: 4px;
}
/* 読み込み中スケルトン */
.merit-card--event.is-loading .merit-card__thumb {
  animation: card-skel 1.2s ease-in-out infinite;
}
.merit-card--event.is-loading .merit-card__title {
  min-height: 2.6em;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  animation: card-skel 1.2s ease-in-out infinite;
}
@keyframes card-skel {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .merit-card--event.is-loading .merit-card__thumb,
  .merit-card--event.is-loading .merit-card__title {
    animation: none;
  }
}

.merit__cards-note {
  font-size: 12px;
  color: #666;
  text-align: right;
  margin-top: 20px;
  line-height: 1.7;
}

/* --- CTA --- */
.merit__cta-wrap {
  text-align: center;
  margin-top: 40px;
}

.merit__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 36px;
  background: linear-gradient(90deg, #00a7bc, #43bdbe);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  border-radius: 40px;
  box-shadow: 0 15px 12.5px rgba(71, 182, 183, 0.4);
  transition: opacity 0.2s;
}

.merit__cta:hover {
  opacity: 0.9;
}

/* --- 769px以上：デザイン(1440px)を fluid で忠実再現 --- */
@media (min-width: 769px) {
  .merit__inner {
    --u: calc(100cqw / 1440);
    padding: calc(110 * var(--u)) calc(90 * var(--u)) calc(150 * var(--u));
  }

  /* ラベル：見出しバーの右横に「WACA MERIT（上）＋01（下）」を配置 */
  .merit__label {
    position: absolute;
    top: calc(91 * var(--u));
    left: calc(510 * var(--u));
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .merit__label-num {
    font-size: calc(200 * var(--u));
    line-height: 1;
  }
  .merit__label-en {
    position: static;
    transform: none;
    margin-left: calc(31 * var(--u));
    font-size: calc(18 * var(--u));
    letter-spacing: calc(5.4 * var(--u));
  }

  .merit__main {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: calc(22 * var(--u));
  }
  .merit__lead {
    position: relative;
    width: calc(698 * var(--u));
    flex-shrink: 0;
  }
  .merit__headline,
  .merit__desc {
    position: relative;
    z-index: 1;
  }
  .merit__headline {
    gap: calc(6 * var(--u));
    margin-bottom: calc(29 * var(--u));
  }
  .merit__headline-line {
    font-size: calc(40 * var(--u));
    line-height: calc(87 * var(--u));
    padding: 0 calc(28 * var(--u)) 0 calc(14 * var(--u));
  }
  .merit__headline-line::before {
    box-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .merit__desc {
    font-size: calc(18 * var(--u));
  }

  .score {
    width: calc(527 * var(--u));
    flex-shrink: 0;
    padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u));
    border-radius: calc(10 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(25 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .score__note-top {
    font-size: calc(11 * var(--u));
    margin-bottom: calc(4 * var(--u));
  }
  .score__title {
    gap: calc(14 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .score__laurel--l {
    height: calc(53 * var(--u));
  }
  .score__laurel--r {
    height: calc(54 * var(--u));
  }
  .score__big {
    gap: calc(6 * var(--u));
    margin-bottom: calc(4 * var(--u));
  }
  .score__big-num {
    font-size: calc(100 * var(--u));
  }
  .score__big-deno {
    font-size: calc(30 * var(--u));
  }
  .score__divider {
    max-width: calc(489 * var(--u));
    margin-bottom: calc(18 * var(--u));
  }
  .score__metrics {
    gap: calc(16 * var(--u));
  }
  .score__metric-label {
    font-size: calc(15 * var(--u));
    gap: calc(6 * var(--u));
    margin-bottom: calc(8 * var(--u));
  }
  .score__sparkle--l {
    height: calc(38 * var(--u));
  }
  .score__sparkle--r {
    height: calc(30 * var(--u));
  }
  .score__metric-value {
    font-size: calc(40 * var(--u));
    margin-bottom: calc(8 * var(--u));
  }
  .score__metric-value span {
    font-size: calc(15 * var(--u));
  }
  .score__stars {
    max-width: calc(119 * var(--u));
  }
  .score__note-bottom {
    font-size: calc(11 * var(--u));
    margin-top: calc(14 * var(--u));
  }

  .merit__sub {
    margin: calc(80 * var(--u)) 0 calc(40 * var(--u));
  }
  .merit__sub-bar {
    width: calc(89 * var(--u));
    height: calc(4 * var(--u));
    margin-bottom: calc(22 * var(--u));
  }
  .merit__sub-text {
    font-size: calc(18 * var(--u));
  }

  .merit__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(31 * var(--u)) calc(43 * var(--u));
  }
  .merit-card {
    padding: calc(20 * var(--u)) calc(25 * var(--u)) calc(20 * var(--u)) calc(23 * var(--u));
    border-radius: calc(10 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(12.5 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .merit-card__thumb {
    margin-bottom: calc(16 * var(--u));
    border-radius: calc(6 * var(--u));
  }
  .merit-card__title {
    font-size: calc(16 * var(--u));
    margin-bottom: calc(15 * var(--u));
  }
  .merit-card__speaker {
    font-size: calc(14 * var(--u));
  }
  .merit-card--event {
    padding: 0;
  }
  .merit-card__eventlink {
    padding: calc(20 * var(--u)) calc(25 * var(--u)) calc(20 * var(--u)) calc(23 * var(--u));
  }
  .merit-card__date {
    font-size: calc(14 * var(--u));
    margin-top: calc(4 * var(--u));
  }
  .merit-card__link {
    font-size: calc(14 * var(--u));
    margin-top: calc(15 * var(--u));
    gap: calc(8 * var(--u));
  }
  .merit-card__link img {
    width: calc(27 * var(--u));
    height: calc(17 * var(--u));
  }

  .merit__cards-note {
    font-size: calc(13 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .merit__cta-wrap {
    margin-top: calc(56 * var(--u));
  }
  .merit__cta {
    min-height: 0;
    height: calc(60 * var(--u));
    padding: 0 calc(50 * var(--u));
    font-size: calc(20 * var(--u));
    border-radius: calc(40 * var(--u));
    box-shadow: 0 calc(15 * var(--u)) calc(12.5 * var(--u)) rgba(71, 182, 183, 0.4);
  }
}

/* ============================================
   MERIT 02（教科書）
   MERIT 01 と同じ fluid 方式・背景固定
============================================ */
/* 背景は .merit-group の共通スティッキー背景を使用（透過して見せる） */
.merit02 {
  position: relative;
  z-index: 1;
  background: transparent;
}

.merit02__container {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  container-type: inline-size;
}

.merit02__inner {
  position: relative;
  z-index: 1;
  padding: 48px 20px 64px;
}

/* --- ラベル（WACA MERIT + 02、見出しの上に配置）--- */
.merit02__label {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.merit02__label-num {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  color: rgba(67, 189, 190, 0.2);
}

.merit02__label-en {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #aedede;
  white-space: nowrap;
}

/* --- 見出し + 画像 --- */
.merit02__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.merit02__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 20px;
}

.merit02__headline-line {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #fff;
  font-weight: 900;
  /* スマホは幅に応じて縮小し1行に収める（〜320pxでも折り返さない／タブレット以上は22pxで頭打ち）*/
  font-size: min(5vw, 22px);
  line-height: 1.9;
  padding: 0 16px 0 12px;
  white-space: nowrap;
}

/* 緑グラデ帯（スクロールインで左→右にワイプ） */
.merit02__headline-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0fa4a4, #24a64f);
  box-shadow: 0 4px 15px rgba(71, 182, 183, 0.2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.merit02__headline-text {
  display: inline-block;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.merit02__headline.is-inview .merit02__headline-line::before {
  transform: scaleX(1);
}
.merit02__headline.is-inview .merit02__headline-text {
  opacity: 1;
  transform: none;
}
.merit02__headline.is-inview .merit02__headline-line:nth-child(1)::before {
  transition-delay: 0.1s;
}
.merit02__headline.is-inview .merit02__headline-line:nth-child(2)::before {
  transition-delay: 0.45s;
}
.merit02__headline.is-inview .merit02__headline-line:nth-child(1) .merit02__headline-text {
  transition-delay: 0.65s;
}
.merit02__headline.is-inview .merit02__headline-line:nth-child(2) .merit02__headline-text {
  transition-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .merit02__headline-line::before {
    transform: none;
    transition: none;
  }
  .merit02__headline-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.merit02__desc {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.merit02__visual {
  width: 100%;
}

.merit02__visual img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

/* --- 769px以上：デザイン(1440px)を fluid で再現 --- */
@media (min-width: 769px) {
  .merit02__inner {
    --u: calc(100cqw / 1440);
    padding: calc(120 * var(--u)) calc(90 * var(--u)) calc(150 * var(--u));
  }

  .merit02__label {
    text-align: left;
    /* 「02」の下部に見出しを重ねる */
    margin-bottom: calc(-92 * var(--u));
    padding-left: 0;
  }
  .merit02__label-num {
    font-size: calc(200 * var(--u));
  }
  .merit02__label-en {
    top: calc(-12 * var(--u));
    left: calc(29 * var(--u));
    transform: none;
    font-size: calc(18 * var(--u));
    letter-spacing: calc(5.4 * var(--u));
  }

  .merit02__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--u));
  }
  .merit02__lead {
    flex-shrink: 0;
  }
  .merit02__headline {
    gap: calc(4 * var(--u));
    margin-bottom: calc(30 * var(--u));
  }
  .merit02__headline-line {
    font-size: calc(40 * var(--u));
    line-height: calc(87 * var(--u));
    padding: 0 calc(20 * var(--u)) 0 calc(10 * var(--u));
  }
  .merit02__headline-line::before {
    box-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .merit02__desc {
    font-size: calc(18 * var(--u));
  }

  .merit02__visual {
    width: calc(625 * var(--u));
    flex-shrink: 0;
  }
  .merit02__visual img {
    max-width: none;
    margin: 0;
  }
}

/* ============================================
   MERIT 03（コミュニティ）
============================================ */
/* 背景は .merit-group の共通スティッキー背景を使用（透過して見せる） */
.merit03 {
  position: relative;
  z-index: 1;
  background: transparent;
}

.merit03__container {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  container-type: inline-size;
}

.merit03__inner {
  position: relative;
  z-index: 1;
  padding: 48px 20px 64px;
}

/* --- 導入コピー（上下に横線）--- */
.merit03__intro {
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 22px 0;
  border-top: 1px solid #59bcbc;
  border-bottom: 1px solid #59bcbc;
  text-align: center;
}

.merit03__intro p {
  color: #0fa4a4;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
}

/* --- ラベル --- */
.merit03__label {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.merit03__label-num {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  color: rgba(67, 189, 190, 0.2);
}

.merit03__label-en {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #aedede;
  white-space: nowrap;
}

/* --- 見出し + 説明 + メイン写真 --- */
.merit03__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.merit03__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 20px;
}

.merit03__headline-line {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.9;
  padding: 0 16px 0 12px;
}

.merit03__headline-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0fa4a4, #24a64f);
  box-shadow: 0 4px 15px rgba(71, 182, 183, 0.2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.merit03__headline-text {
  display: inline-block;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.merit03__headline.is-inview .merit03__headline-line::before {
  transform: scaleX(1);
}
.merit03__headline.is-inview .merit03__headline-text {
  opacity: 1;
  transform: none;
}
.merit03__headline.is-inview .merit03__headline-line:nth-child(1)::before {
  transition-delay: 0.1s;
}
.merit03__headline.is-inview .merit03__headline-line:nth-child(2)::before {
  transition-delay: 0.45s;
}
.merit03__headline.is-inview .merit03__headline-line:nth-child(1) .merit03__headline-text {
  transition-delay: 0.65s;
}
.merit03__headline.is-inview .merit03__headline-line:nth-child(2) .merit03__headline-text {
  transition-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .merit03__headline-line::before {
    transform: none;
    transition: none;
  }
  .merit03__headline-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.merit03__desc {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.merit03__photo-main img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 交流手段アイコン --- */
.merit03__ways {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
  margin: 48px 0 40px;
}

.way {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.way__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(53, 176, 175, 0.2);
}

.way__icon img {
  width: 54px;
  height: auto;
}

.way__title {
  font-weight: 700;
  font-size: 16px;
  margin-top: 14px;
}

.way__sub {
  font-size: 13px;
  margin-top: 5px;
  color: #333;
}

/* --- 写真コラージュ --- */
.merit03__photo-collage {
  margin-top: 40px;
  text-align: center;
}

.merit03__photo-collage img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}

/* --- 769px以上：デザイン(1440px)を fluid で再現 --- */
@media (min-width: 769px) {
  .merit03__inner {
    --u: calc(100cqw / 1440);
    padding: calc(70 * var(--u)) calc(90 * var(--u)) calc(140 * var(--u));
  }

  .merit03__intro {
    max-width: calc(680 * var(--u));
    margin: 0 auto calc(30 * var(--u));
    padding: calc(24 * var(--u)) 0;
  }
  .merit03__intro p {
    font-size: calc(20 * var(--u));
  }

  .merit03__label {
    text-align: left;
    margin-bottom: calc(-42 * var(--u));
    padding-left: 0;
  }
  .merit03__label-num {
    font-size: calc(200 * var(--u));
  }
  .merit03__label-en {
    top: calc(-12 * var(--u));
    left: calc(33 * var(--u));
    transform: none;
    font-size: calc(18 * var(--u));
    letter-spacing: calc(5.4 * var(--u));
  }

  .merit03__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(30 * var(--u));
  }
  .merit03__lead {
    width: calc(660 * var(--u));
    flex-shrink: 0;
  }
  .merit03__headline {
    gap: calc(7 * var(--u));
    margin-bottom: calc(28 * var(--u));
  }
  .merit03__headline-line {
    font-size: calc(40 * var(--u));
    line-height: calc(87 * var(--u));
    padding: 0 calc(20 * var(--u)) 0 calc(8 * var(--u));
  }
  .merit03__headline-line::before {
    box-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .merit03__desc {
    font-size: calc(18 * var(--u));
  }

  .merit03__photo-main {
    width: calc(583 * var(--u));
    flex-shrink: 0;
  }

  .merit03__ways {
    grid-template-columns: none;
    display: flex;
    justify-content: center;
    gap: calc(90 * var(--u));
    margin: calc(70 * var(--u)) 0 calc(20 * var(--u));
  }
  .way__icon {
    width: calc(117 * var(--u));
    height: calc(117 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(53, 176, 175, 0.2);
  }
  .way__icon img {
    width: calc(67 * var(--u));
  }
  .way__title {
    font-size: calc(20 * var(--u));
    margin-top: calc(15 * var(--u));
    white-space: nowrap;
  }
  .way__sub {
    font-size: calc(16 * var(--u));
    margin-top: calc(6 * var(--u));
    white-space: nowrap;
  }

  .merit03__photo-collage {
    margin-top: calc(20 * var(--u));
  }
  .merit03__photo-collage img {
    max-width: calc(1200 * var(--u));
  }
}

/* ============================================
   Features（WACAでできること一覧 ＋ 入会CTA）
============================================ */
.features {
  position: relative;
  background: #fff;
}

.features__top {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  padding: 40px 16px 0;
}

.features__card {
  background: #fdfdfd;
  border-radius: 10px;
  box-shadow: 0 4px 40px rgba(71, 182, 183, 0.4);
  padding: 28px 18px;
}

.features__title {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.features__title span {
  color: #35b0af;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.feat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eaeaea;
}
.feat-item:last-child {
  border-bottom: none;
}

.feat-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 7.5px rgba(71, 182, 183, 0.2);
}
.feat-item__icon img {
  width: 48px;
  height: auto;
}

.feat-item__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 5px;
}
.feat-item__desc {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* --- 緑の入会CTAバンド --- */
.features__cta {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  padding: 56px 20px 32px;
  background: linear-gradient(90deg, #0fa4a4, #24a64f);
}

.features__cta-inner {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.features__cta-lead {
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 0 26px;
}
.features__cta-lead::before,
.features__cta-lead::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 1.3em;
  background: rgba(255, 255, 255, 0.9);
}
.features__cta-lead::before {
  left: 8px;
  transform: translateY(-50%) rotate(-22deg);
}
.features__cta-lead::after {
  right: 8px;
  transform: translateY(-50%) rotate(22deg);
}

.features__cta-btnwrap {
  position: relative;
  display: inline-block;
  margin: 44px 0 16px;
}

.features__cta-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: -6px;
  transform: translateX(-50%);
  background: #fbf24c;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.features__cta-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fbf24c;
}
.features__cta-badge strong {
  color: #f06432;
  font-weight: 700;
  font-size: 1.5em;
}
.features__cta-badge .yen {
  font-size: 0.65em;
}

.features__cta-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 44px;
  background: linear-gradient(90deg, #f7942a, #f9d02f);
  color: #000;
  font-weight: 700;
  font-size: 18px;
  border-radius: 40px;
  white-space: nowrap;
  box-shadow: 0 12px 18px rgba(21, 142, 106, 0.55);
  transition: opacity 0.2s;
}
/* SP：ボタン幅をブラウザ幅の約90%に拡大 */
@media (max-width: 768px) {
  .features__cta-btn {
    width: 90vw;
    max-width: 460px;
  }
}
/* 光沢が横切るシャイン */
.features__cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: cta-shine 3s ease-in-out infinite;
}
.features__cta-btn:hover {
  opacity: 0.95;
}

@keyframes cta-shine {
  0% { left: -60%; }
  35%, 100% { left: 160%; }
}

/* スクロールインで「ふわっと」表示（各要素を少しずつ遅らせる） */
.features__cta-inner > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.features__cta-inner.is-inview > * {
  opacity: 1;
  transform: none;
}
.features__cta-inner.is-inview .features__cta-lead {
  transition-delay: 0.05s;
}
.features__cta-inner.is-inview .features__cta-btnwrap {
  transition-delay: 0.2s;
}
.features__cta-inner.is-inview .features__cta-note {
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .features__cta-btn::after {
    animation: none;
    display: none;
  }
  .features__cta-inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.features__cta-note {
  color: #fff;
  font-size: 12px;
  margin-top: 14px;
}

/* --- 769px以上：デザイン(1440px)を fluid で再現 --- */
@media (min-width: 769px) {
  .features {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
  }

  .features__top {
    padding: calc(60 * var(--u)) 0 0;
  }
  .features__card {
    width: calc(1260 * var(--u));
    margin: 0 auto;
    border-radius: calc(10 * var(--u));
    padding: calc(38 * var(--u)) calc(120 * var(--u)) calc(48 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(40 * var(--u)) rgba(71, 182, 183, 0.4);
  }
  .features__title {
    font-size: calc(30 * var(--u));
    margin-bottom: calc(42 * var(--u));
  }

  .features__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(30 * var(--u));
  }
  .feat-item--c1r1 { grid-column: 1; grid-row: 1; }
  .feat-item--c1r2 { grid-column: 1; grid-row: 2; }
  .feat-item--c1r3 { grid-column: 1; grid-row: 3; }
  .feat-item--c2r1 { grid-column: 2; grid-row: 1; }
  .feat-item--c2r2 { grid-column: 2; grid-row: 2; }

  .feat-item {
    gap: calc(25 * var(--u));
    padding: calc(19 * var(--u)) 0;
    border-bottom: 1px solid #e5e5e5;
  }
  .feat-item--c2r1,
  .feat-item--c2r2 {
    /* border-left: 1px solid #e5e5e5; */
    padding-left: calc(36 * var(--u));
  }
  .feat-item--c1r3 {
    border-bottom: none;
  }

  .feat-item__icon {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
    border-radius: calc(15 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(7.5 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .feat-item__icon img {
    width: calc(65 * var(--u));
  }
  .feat-item__title {
    font-size: calc(22 * var(--u));
    margin-bottom: calc(9 * var(--u));
  }
  .feat-item__desc {
    font-size: calc(16 * var(--u));
  }

  .features__cta {
    margin-top: calc(-40 * var(--u));
    padding: calc(84 * var(--u)) 20px calc(44 * var(--u));
  }
  .features__cta-lead {
    font-size: calc(20 * var(--u));
    margin-bottom: calc(6 * var(--u));
    padding: 0 calc(30 * var(--u));
  }
  .features__cta-btnwrap {
    margin: calc(56 * var(--u)) 0 calc(20 * var(--u));
  }
  .features__cta-badge {
    margin-bottom: calc(-6 * var(--u));
    font-size: calc(14 * var(--u));
    padding: calc(7 * var(--u)) calc(22 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  .features__cta-btn {
    width: calc(514 * var(--u));
    height: calc(75 * var(--u));
    padding: 0;
    font-size: calc(26 * var(--u));
    border-radius: calc(40 * var(--u));
    box-shadow: 0 calc(15 * var(--u)) calc(12.5 * var(--u)) #158e6a;
  }
  .features__cta-note {
    font-size: calc(12 * var(--u));
    margin-top: calc(16 * var(--u));
  }
}

/* ============================================
   資格がなくても今日から会員に（Before / After）
============================================ */
.noqual {
  background: #fff;
  padding: 64px 20px;
}

.noqual__inner {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.noqual__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}
.noqual__title span {
  color: #00adaf;
}

.noqual__desc {
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
  max-width: 640px;
  margin-bottom: 32px;
}

.noqual__figure {
  display: block;
  width: 100%;
}
.noqual__figure img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .noqual {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
    padding: 100px 20px;
  }
  .noqual__title {
    font-size: calc(36 * var(--u));
    margin-bottom: calc(30 * var(--u));
  }
  .noqual__desc {
    font-size: calc(18 * var(--u));
    max-width: calc(936 * var(--u));
    margin-bottom: calc(30 * var(--u));
  }
  .noqual__figure img {
    max-width: calc(972 * var(--u));
  }
}

/* ============================================
   どんな人がいる？（立場・職種 / 業種）
============================================ */
.who {
  background: linear-gradient(90deg, #fcfdfd, #edf8f9);
  padding: 56px 20px;
}

.who__inner {
  max-width: 1560px;
  margin: 0 auto;
}

.who__title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 14px;
}
.who__title span {
  color: #2ba8a6;
}

.who__lead {
  font-size: 14px;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 36px;
}

.who__subhead {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.who__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(71, 182, 183, 0.14);
  padding: 22px 18px;
}

.who__caption {
  text-align: center;
  font-size: 14px;
  margin: 24px 0;
}

.who__note {
  text-align: right;
  font-size: 11px;
  color: #888;
  margin-top: 16px;
}

/* --- 立場・職種：スマホは項目ごとの横棒 --- */
.stat {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stat__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat__name {
  flex: 0 0 42%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.stat__track {
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: #eef5f5;
  overflow: hidden;
}
.stat__fill {
  display: block;
  height: 100%;
  width: calc(var(--w) * 1%);
  background: var(--c);
  border-radius: 5px;
}
.stat__pct {
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.stat-legend {
  display: none;
}

/* --- 業種：スマホは2カラム --- */
.jobs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.jobs li {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  font-weight: 700;
}
.jobs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3bb6b4;
}

/* --- 769px以上：積み上げ棒グラフ（デザイン再現） --- */
@media (min-width: 769px) {
  .who {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
    padding: calc(90 * var(--u)) 20px;
  }
  .who__inner {
    padding: 0 calc(90 * var(--u));
  }
  .who__title {
    font-size: calc(36 * var(--u));
    margin-bottom: calc(14 * var(--u));
  }
  .who__lead {
    font-size: calc(18 * var(--u));
    margin-bottom: calc(48 * var(--u));
  }
  .who__subhead {
    font-size: calc(22 * var(--u));
    margin-bottom: calc(22 * var(--u));
  }
  .who__card {
    border-radius: calc(20 * var(--u));
    padding: calc(38 * var(--u)) calc(46 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(30 * var(--u)) rgba(71, 182, 183, 0.15);
  }
  .who__caption {
    font-size: calc(18 * var(--u));
    margin: calc(40 * var(--u)) 0;
  }
  .who__note {
    font-size: calc(13 * var(--u));
    margin-top: calc(24 * var(--u));
  }

  /* 積み上げ棒グラフ */
  .stat {
    flex-direction: row;
    gap: 0;
    border-radius: calc(10 * var(--u));
    overflow: hidden;
    margin-bottom: calc(28 * var(--u));
  }
  .stat__item {
    box-sizing: border-box;
    display: block;
    flex: none;
    width: calc(var(--w) * 1%);
    height: calc(84 * var(--u));
    background: var(--c);
    border-right: 2px solid #fff;
    position: relative;
  }
  .stat__item:last-child {
    border-right: none;
  }
  .stat__name,
  .stat__track {
    display: none;
  }
  .stat__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #fff;
    font-size: calc(22 * var(--u));
  }
  .stat__item--light .stat__pct {
    color: #5c807e;
  }

  /* 凡例 */
  .stat-legend {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: calc(16 * var(--u)) calc(40 * var(--u));
    list-style: none;
  }
  .stat-legend li {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .stat-legend__sw {
    flex-shrink: 0;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    border-radius: calc(3 * var(--u));
  }

  /* 業種：4カラム */
  .jobs {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(22 * var(--u)) calc(24 * var(--u));
  }
  .jobs li {
    padding-left: calc(30 * var(--u));
    font-size: calc(18 * var(--u));
  }
  .jobs li::before {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
  }
}

/* ============================================
   WACA会員の声
============================================ */
.voice {
  background: linear-gradient(90deg, #fcfdfd, #edf8f9);
  padding: 40px 0;
}

/* パネルはブラウザ幅100%（フルブリード） */
.voice__panel {
  width: 100%;
  background: #d6eeee;
  border-radius: 30px;
  padding: 40px 16px;
}

.voice__title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 28px;
}
.voice__title span {
  color: #35b0af;
}

.voices {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vcard {
  width: 100%;
  max-width: 424px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vcard__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vcard__avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vcard__name {
  font-size: 16px;
  font-weight: 700;
}
.vcard__role {
  font-size: 14px;
  color: #9f9f9f;
}
.vcard__headline {
  color: #0fa4a4;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
}
.vcard__body {
  font-size: 14px;
  line-height: 1.75;
}

@media (min-width: 769px) {
  .voice {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
    padding: calc(80 * var(--u)) 0;
  }
  /* パネルはブラウザ幅100% */
  .voice__panel {
    border-radius: calc(80 * var(--u));
    padding: calc(70 * var(--u)) calc(20 * var(--u)) calc(90 * var(--u));
  }
  .voice__title {
    font-size: calc(36 * var(--u));
    margin-bottom: calc(50 * var(--u));
  }

  .voices {
    max-width: calc(1400 * var(--u));
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: calc(34 * var(--u));
  }
  .vcard {
    width: calc(424 * var(--u));
    max-width: none;
    min-height: calc(299 * var(--u));
    border-radius: calc(10 * var(--u));
    padding: calc(20 * var(--u));
    gap: calc(9 * var(--u));
  }
  .vcard__head {
    gap: calc(23 * var(--u));
    margin-bottom: calc(4 * var(--u));
  }
  .vcard__avatar {
    width: calc(93 * var(--u));
    height: calc(93 * var(--u));
  }
  .vcard__name {
    font-size: calc(18 * var(--u));
  }
  .vcard__role {
    font-size: calc(16 * var(--u));
  }
  .vcard__headline {
    font-size: calc(18 * var(--u));
  }
  .vcard__body {
    font-size: calc(15 * var(--u));
  }
}

/* ============================================
   数字で見るWACA
============================================ */
.numbers {
  background: linear-gradient(90deg, #fcfdfd, #edf8f9);
  padding: 56px 20px;
}

.numbers__inner {
  max-width: 1260px;
  margin: 0 auto;
}

.numbers__title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 28px;
}
.numbers__title span {
  color: #35b0af;
}

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 7.5px rgba(71, 182, 183, 0.3);
  padding: 22px 14px;
  text-align: center;
}
.stat-card__label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.stat-card__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.stat-card__num {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: #00adaf;
}
.stat-card__unit {
  font-size: 14px;
}
/* SP：単位を数字の下（別行）に。文字単位の折り返しも防止 */
@media (max-width: 768px) {
  .stat-card__value {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .stat-card__unit {
    white-space: nowrap;
  }
}

.numbers__caption {
  font-size: 14px;
  text-align: center;
  line-height: 1.7;
  margin: 28px 0;
}

.numbers__logos {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(71, 182, 183, 0.3);
  padding: 24px 18px;
  text-align: center;
}
.numbers__logos-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
}
.numbers__logos picture {
  display: block;
}
.numbers__logos img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .numbers {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
    padding: calc(80 * var(--u)) 20px;
  }
  .numbers__inner {
    max-width: calc(1260 * var(--u));
  }
  .numbers__title {
    font-size: calc(36 * var(--u));
    margin-bottom: calc(46 * var(--u));
  }

  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(27 * var(--u));
  }
  .stat-card {
    border-radius: calc(20 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(7.5 * var(--u)) rgba(71, 182, 183, 0.3);
    padding: calc(37 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
    min-height: calc(185 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .stat-card__label {
    font-size: calc(18 * var(--u));
    margin-bottom: calc(23 * var(--u));
  }
  .stat-card__num {
    font-size: calc(50 * var(--u));
  }
  .stat-card__unit {
    font-size: calc(18 * var(--u));
  }

  .numbers__caption {
    font-size: calc(18 * var(--u));
    margin: calc(40 * var(--u)) 0;
  }

  .numbers__logos {
    border-radius: calc(20 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(71, 182, 183, 0.3);
    padding: calc(35 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
  }
  .numbers__logos-title {
    font-size: calc(20 * var(--u));
    margin-bottom: calc(30 * var(--u));
  }
  .numbers__logos img {
    max-width: calc(1215 * var(--u));
    margin: 0 auto;
  }
}

/* ============================================
   入会特典 ＋ 最終CTA
============================================ */
.closing {
  position: relative;
  background: linear-gradient(90deg, #0fa4a4, #24a64f);
}

/* 入会特典（ティール背景・下端はシェブロン形状で緑へ接続） */
.closing__benefits {
  background: #d6eeee;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 45px), 50% 100%, 0 calc(100% - 45px));
  /* clip-path の形状（シェブロン）に沿った影 */
  filter: drop-shadow(0 8px 16px rgba(45, 130, 128, 0.28));
  padding: 48px 16px 85px;
}
.closing__benefits-inner {
  max-width: 1260px;
  margin: 0 auto;
}

.closing__title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 26px;
}
.closing__title span {
  color: #00adaf;
}

.benefit-cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.bcard {
  background: #fcfdfd;
  border: 1px solid #00adaf;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(71, 182, 183, 0.2);
  padding: 18px;
}
.bcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bcard__badge {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}
.bcard__badge-label {
  font-size: 9px;
  font-weight: 700;
}
.bcard__badge-num {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-top: 3px;
}
.bcard__badge--1 { background: #35b0af; }
.bcard__badge--2 { background: #43bdbe; }
.bcard__badge--3 { background: #0a7d40; }

.bcard__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.bcard__title .accent {
  color: #0fa4a4;
}
.bcard__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.closing__benefits-note {
  text-align: right;
  font-size: 11px;
  color: #333;
  margin-top: 14px;
}

/* 最終CTA（緑） */
.closing__cta {
  padding: 20px 20px 48px;
}
.closing__headline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}
.closing__headline-text {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  text-align: left;
}
.closing__price {
  flex-shrink: 0;
  width: 106px;
  height: auto;
  margin-right: -20px;
}

@media (min-width: 769px) {
  .closing {
    --u: min(calc(100vw / 1440), calc(1560px / 1440));
  }
  .closing__benefits {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100 * var(--u)), 50% 100%, 0 calc(100% - 100 * var(--u)));
    padding: calc(65 * var(--u)) 20px calc(195 * var(--u));
  }
  .closing__benefits-inner {
    max-width: calc(1260 * var(--u));
  }
  .closing__title {
    font-size: calc(36 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }
  .benefit-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(45 * var(--u));
  }
  .bcard {
    border-radius: calc(15 * var(--u));
    padding: calc(25 * var(--u)) calc(24 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(71, 182, 183, 0.2);
  }
  .bcard__head {
    gap: calc(14 * var(--u));
    margin-bottom: calc(20 * var(--u));
  }
  .bcard__badge {
    width: calc(62 * var(--u));
    height: calc(62 * var(--u));
    border-radius: 50%;
  }
  .bcard__badge-label {
    font-size: calc(11 * var(--u));
  }
  .bcard__badge-num {
    font-size: calc(30 * var(--u));
    margin-top: calc(4 * var(--u));
  }
  .bcard__title {
    font-size: calc(20 * var(--u));
  }
  .bcard__img {
    border-radius: calc(8 * var(--u));
  }
  .closing__benefits-note {
    font-size: calc(12 * var(--u));
    margin-top: calc(16 * var(--u));
  }

  .closing__cta {
    padding: calc(20 * var(--u)) 20px calc(70 * var(--u));
  }
  .closing__headline {
    gap: calc(20 * var(--u));
    margin-bottom: calc(7 * var(--u));
  }
  .closing__headline-text {
    font-size: calc(40 * var(--u));
  }
  .closing__price {
    width: calc(172 * var(--u));
    margin-left: calc(-38 * var(--u));
    margin-top: calc(-28 * var(--u));
  }
}

/* ============================================
   よくある質問（FAQ アコーディオン）
============================================ */
.faq {
  background: #fff;
  padding: 100px 20px;
}

.faq__inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq__title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.faq__list {
  border-top: 1px solid #e2e2e2;
}

.faq-item {
  border-bottom: 1px solid #e2e2e2;
}

/* 質問行 */
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 8px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__qmark {
  color: #0fa4a4;
  flex-shrink: 0;
}
.faq-item__text {
  flex: 1;
}

/* ＋ / − アイコン */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: #0fa4a4;
  border-radius: 1px;
}
.faq-item__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  transition: opacity 0.2s, transform 0.2s;
}
.faq-item[open] .faq-item__icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

/* 回答 */
.faq-item__a {
  padding: 0 8px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}
.faq-item[open] .faq-item__a {
  animation: faq-open 0.28s ease;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-item__a {
    animation: none;
  }
  .faq-item__icon::after {
    transition: none;
  }
}

@media (min-width: 769px) {
  .faq__title {
    font-size: 30px;
    margin-bottom: 48px;
  }
  .faq-item__q {
    padding: 30px 16px;
    font-size: 20px;
  }
  .faq-item__a {
    padding: 0 16px 30px;
  }
}

/* ============================================
   Hero (旧・入会CTAボタンで流用)
============================================ */
.hero__cta {
  display: inline-block;
  background: #ffab40;
  color: #fff;
  font-weight: bold;
  padding: 16px 48px;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.hero__cta:hover {
  opacity: 0.85;
}

/* ============================================
   Footer
============================================ */
.footer {
  background: #fff;
  color: #8a8a8a;
  padding: 60px 20px;
  text-align: center;
}

.footer__org {
  font-size: 16px;
  color: #7d7d7d;
  margin-bottom: 26px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 44px;
  margin-bottom: 30px;
}
.footer__links a {
  color: #8a8a8a;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.footer__links a:hover {
  color: #555;
}

.footer__copy {
  font-size: 13px;
  color: #a8a8a8;
  letter-spacing: 0.02em;
}

/* ============================================
   Responsive
============================================ */
@media (max-width: 768px) {
  /* ヘッダー：ロゴ + CTA + ハンバーガー のみ残す */
  .header__inner {
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
  }

  .header__logo img {
    width: 96px;
  }

  /* SP用の申し込みボタン（コンパクト化） */
  .header__cta {
    width: auto;
    height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    margin-left: auto;
  }

  /* ハンバーガー表示 */
  .header__toggle {
    display: flex;
    width: 40px;
    height: 40px;
  }

  /* ナビをドロワー化 */
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    padding: 80px 24px 40px;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 95;
  }

  .header__nav.is-open {
    transform: translateX(0);
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .header__nav-list li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .header__nav-link {
    display: block;
    width: 100%;
    padding: 16px 4px;
    font-size: 15px;
  }

  /* ドロワー最下部のCTA（header__ctaデザイン踏襲）*/
  .header__nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 28px;
    padding: 14px 20px;
    background: #f9d02f;
    color: #000;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 30px;
    box-shadow: 0 4px 7.5px rgba(251, 173, 37, 0.45);
    transition: opacity 0.2s;
  }
  .header__nav-cta:hover {
    opacity: 0.85;
  }

  /* ハンバーガー → ×印 */
  .header__toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .header__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .header__toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* スコアカード：3指標をコンパクトに */
  .score {
    padding: 24px 12px 32px;
  }
  .score__metrics {
    gap: 4px;
  }
  .score__metric-label {
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.4;
    min-height: 2.8em;
    justify-content: flex-end;
  }
  /* 指標横の装飾スパークルはSPでは非表示 */
  .score__metric .score__sparkle {
    display: none;
  }
  .score__metric-value {
    font-size: 26px;
  }
  .score__metric-value span {
    font-size: 12px;
  }

  .hero__title {
    font-size: 1.8rem;
  }

  .section {
    padding: 56px 20px;
  }
}