@charset "UTF-8";

/* ==========================================================
   Variables
   ========================================================== */
:root {
  /* color（Figma値） */
  --color-white: #ffffff;
  --color-navy: #201c5a;
  --color-navy-light: #2e2a65;
  --color-sub: #615c94;
  --color-gold: #a57123;
  --color-orange-light: #f6a724;
  --color-orange: #ff7700;
  --color-shadow-navy: rgba(0, 19, 42, 0.41);
  --color-shadow-black: rgba(0, 0, 0, 0.3);
  --color-shadow-black-light: rgba(0, 0, 0, 0.25);
  --color-shadow-navy-dark: rgba(13, 11, 38, 0.8);
  --color-text: #333333;
  --color-bg-gray: #f5f5f5;
  --color-lavender: #d3cfff;
  --color-purple: #7773a9;
  --color-purple-light: #8a85c6;
  --color-marker: #ffe7c2;
  --color-gold-badge: #b98d26;
  --color-dark: #202020;
  --color-orange-accent: #f5a625;
  --color-gray: #dbdcde;
  --color-gray-text: #a9a9ab;
  --color-gray-dark: #8d8d8d;
  --color-lavender-pale: #efeeff;
  --color-lavender-bg: #f3effd;
  --color-indigo: #4f4a8c;
  --color-blue-gray: #7c92c9;
  --color-blue-light: #99b8f3;
  --color-sky: #a0cdf4;
  /* ↓ ASWブロック用。Figmaに該当ブロックがないため、既存4色の並びを1段のばした仮の値 */
  --color-aqua: #a8e2f5;
  --color-gray-cell: #e5e5e5;
  --color-beige: #efe8d7;
  /* ↓ contact フォーム内：Figmaはフォーム部分が画像のため、スクリーンショットから採色した推測値 */
  --color-form-label: #384f6b;
  --color-form-input: #ededed;
  --color-form-line: #f0f0f0;
  --color-form-optional: #a8a8a8;
  --color-form-placeholder: #999999;
  --color-error: #d93025;
  --color-gold-light: #dbb866;
  --color-shadow-card: rgba(0, 0, 0, 0.25);
  --color-shadow-brown: rgba(50, 30, 0, 0.6);

  /* color（仮：該当セクション実装時に確定） */
  --color-bg: #ffffff;

  /* gradient（Figma値） */
  --gradient-gold-text: linear-gradient(60.67deg, #d6b160 13.5%, #e9cb78 28.85%, #eed17e 32.06%, #cca453 38%, #dbb866 57.77%, #eed17e 66.96%, #eed17e 75.87%);
  --gradient-sub: linear-gradient(92.64deg, var(--color-sub) 0%, var(--color-navy-light) 78.69%);
  --gradient-about-bg: linear-gradient(180deg, var(--color-lavender) 0.16%, var(--color-purple) 95.19%);
  --gradient-worry-box: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, var(--color-white) 50%);
  --gradient-gold-ribbon: linear-gradient(72.73deg, #a57123 23.71%, #a87527 29.22%, #b28234 35.11%, #c39949 39.95%, #dbb866 44.83%, #dbb866 58.31%, #c39949 66.64%, #a87527 75.3%, #a57123 82.96%);
  --gradient-method-band: linear-gradient(90deg, var(--color-navy-light) 53.37%, var(--color-purple-light) 100%);
  --gradient-voice-ribbon: linear-gradient(90deg, var(--color-navy-light) 22.3%, var(--color-purple-light) 124.48%);
  --gradient-faq: linear-gradient(90deg, var(--color-navy-light) 0%, var(--color-purple-light) 100%);
  --gradient-cta: linear-gradient(180deg, var(--color-orange-light) 0%, var(--color-orange) 100%);

  /* font */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-script: "Tangerine", cursive;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* layout */
  --content-width: 1440px;
}

/* ==========================================================
   Reset
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* CTAボタン（href="#contact"）からフォームへ滑らかに移動する */
  scroll-behavior: smooth;
}

/* 飛んだ先が画面の上端にぴったり付かないよう、少し余白を残す */
.contact {
  scroll-margin-top: 16px;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
}

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

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* ==========================================================
   Base
   ========================================================== */
body {
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ==========================================================
   Utility
   ========================================================== */
/* 金色グラデーション文字（FV「最短」・キャッシュバック「受講費最大100,000円」） */
.gold-text {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* CTAボタン（FV・method 等で共通） */
.btn-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 555px;
  height: 91px;
  background: var(--gradient-cta);
  box-shadow: 1px 1px 4px var(--color-shadow-black);
  border-radius: 100px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-bold);
  font-size: 28px;
  line-height: 1;
  color: var(--color-white);
}

/* 表の横スクロール注記。スマホ（599px以下）でだけ出す */
.scroll-hint {
  display: none;
}

/* スマホ用の追従CTA。PC・タブレットでは出さない（599px以下で表示） */
/* 追従CTA。FVを過ぎたら現れ、問い合わせフォームに入ったら引っ込む（切り替えは js/main.js）。
   PCは右下に浮かせ、スマホ（599px以下）は画面下の帯に切り替える */
.sticky-cta {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.sticky-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ページ内のCTAより一回り小さく、浮いて見えるよう影を強める。
   .btn-cta と同じ詳細度だと記述順で負けるため、親を含めて指定する */
.sticky-cta .sticky-cta__button {
  width: 360px;
  height: 64px;
  font-size: 18px;
  box-shadow: 0 6px 20px var(--color-shadow-card);
}

/* 画面には出さず、読み上げには残す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================
   Sections
   ========================================================== */
/* FV */
/* 背景はFigmaの bg グループを層に分けて再現（数値はすべて figma/fv.css）。
   画面幅が1440pxより広くなっても、人物は右端に寄せたまま原寸で表示し、
   紺とラベンダーのグラデーションだけが左右に伸びる */
.fv {
  position: relative;
  height: 795px;
  overflow: hidden;
  /* Rectangle 2：一番下のラベンダー。
     ％はFigmaの書き出し値(14.19/60.38)ではなく、元の合成画像の色から逆算した値
     （Figmaの％はCSSの箱ではなくグラデーションの持ち手を基準にしているため） */
  background: linear-gradient(328.13deg, #6d66bc 11.3%, #f6f6fc 46%);
}

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

/* Rectangle 3：左側の紺。Figmaの指定どおり右端から408pxの位置で終わる。
   こうすると紺の切れ目が常に人物写真の不透明な部分の下に隠れる。
   画面が広がるぶんは左へ伸びる。
   校舎画像（Figma: 1440×989 / left -5 / 上下中央から-40px）を
   スクリーン・不透明度30%で重ねる
   （= 校舎に黒70%をかけて30%にしてから、紺をスクリーン合成する） */
.fv__bg-navy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 408px);
  /* 右端は垂直ではなく斜め。Figmaの選択枠から採寸：上端 x=1032px → 下端 x=853px
     （書き出しCSVには図形の形が出ないため実測値）。
     ％で持つと画面幅に応じて角度が変わるため、水平差179pxを固定値で指定する */
  --navy-slant: 179px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--navy-slant)) 100%, 0 100%);
  background-image:
    /* ％は元の合成画像の色から逆算した値（Figma書き出しは 20.23/42.78/67.99） */
    linear-gradient(149.3deg, #201c5a 16.2%, #2e2a65 36.2%, #4d497e 61.3%),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../public/images/fv-campus.jpg);
  /* 校舎画像は、画面が広くても途切れないよう cover で敷く */
  background-size: 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, left top calc(50% - 40px);
  background-repeat: no-repeat;
  background-blend-mode: screen, normal, normal;
}

/* FV-img / FV-img_shadow：同じ人物写真を、Figmaのマスク（Rectangle 93）と同じ
   グラデーションで左端をぼかして表示する。マスクの右端は1440pxの右端 → right: 0 */
.fv__bg-person,
.fv__bg-person-shadow {
  position: absolute;
  right: 0;
  background-image: url(../public/images/fv-person.webp);
  background-size: 1352px 901px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(236.54deg, #000 2.73%, #000 70.26%, rgba(0, 0, 0, 0.5) 78.65%, transparent 85.85%);
  mask-image: linear-gradient(236.54deg, #000 2.73%, #000 70.26%, rgba(0, 0, 0, 0.5) 78.65%, transparent 85.85%);
}

.fv__bg-person {
  top: 57px;
  width: 866px;
  height: 737px;
  background-position: -422px -164px;
}

/* 人物の後ろの影：同じ写真をぼかして乗算・不透明度40% */
.fv__bg-person-shadow {
  top: 77px;
  width: 836px;
  height: 737px;
  background-position: -422px -164px;
  opacity: 0.4;
  filter: blur(15px);
  mix-blend-mode: multiply;
}

.fv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--content-width);
  height: 100%;
  margin: 0 auto;
  padding: 28px 0 0 57px;
}

.fv__logo img {
  width: 215px;
  height: 63px;
}

/* ロゴ下端(28+63=91) → container top 124 / container left 94 */
.fv__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 747px;
  margin: 33px 0 0 37px;
}

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

.fv__deco {
  width: 418px;
  height: 27.35px;
}

.fv__title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 780px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  line-height: 95px;
  white-space: nowrap;
}

.fv__title-white {
  font-size: 60px;
  letter-spacing: 0.1em;
  color: var(--color-white);
  text-shadow: 0 0 10.4px var(--color-shadow-navy);
}

.fv__title-tail {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap; /* 「最短」と「で。」を分けて折り返さない */
}

.fv__title-white--end {
  margin-left: 12px;
}

.fv__title-gold {
  font-size: 72px;
  letter-spacing: 0.05em;
}

.fv__sub {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

/* li は Figma の 160.19px 幅。badge.svg は影の余白込みで 177×183 なので
   実寸で表示し、はみ出し分を gap / margin で相殺してレイアウト寸法を保つ */
.fv__badges {
  display: flex;
  align-items: center;
  gap: calc(16px - (177px - 160.19px));
  margin-block: calc((171.9px - 183px) / 2);
}

.fv__badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 177px;
  height: 183px;
  padding-bottom: 10px; /* 円の中心(y=86.56)に合わせて上寄せ */
  background: url(../public/images/badge.svg) center / contain no-repeat;
  font-family: var(--font-serif);
  text-align: center;
  color: var(--color-gold);
}

.fv__badge-label {
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  line-height: 11px;
  letter-spacing: 0.05em;
}

.fv__badge-value {
  margin-top: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.fv__badge-value--students {
  margin-top: 6px;
  font-size: 29.3517px;
  line-height: 1;
}

.fv__badge-value--hours {
  font-size: 34.2657px;
  line-height: 23px;
}

.fv__badge-value--period {
  font-size: 17.229px;
  line-height: 26px;
  letter-spacing: 0;
}

/* ↓ 混在サイズ部分。Figma CSSに値が出ていないため参考画像に合わせた値 */
.fv__badge-unit {
  font-size: 0.65em;
}

.fv__badge-unit--block {
  display: block;
  line-height: 1.1;
}

.fv__badge-unit--h {
  font-size: 0.78em;
}

.fv__badge-num {
  font-size: 2.2em;
}

.fv__badge-small {
  font-size: 0.7em;
}

.fv__badge-note {
  margin-top: 10px;
  font-weight: var(--font-weight-regular);
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 0.03em;
}

.fv__badge-note--students {
  margin-top: 6px;
  font-size: 9px;
}

.fv__lead {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
}


/* キャッシュバック */
/* 背景：グラデーションの上にテクスチャを 不透明度80%・乗算 で重ねる
   → 結果 = グラデーション × (0.2 + 0.8 × テクスチャ)
   テクスチャに白20%を重ねて(0.2 + 0.8 × テクスチャ)を作り、グラデーションを乗算する */
.cashback {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  background-image:
    var(--gradient-sub),
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    url(../public/images/texture-silk.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal, normal;
  box-shadow: 0 2px 4px var(--color-shadow-black-light);
}

.cashback__lead {
  display: flex;
  justify-content: center;
  width: 712px;
  padding: 16px 10px;
  border-bottom: 2px solid var(--color-white);
  font-family: var(--font-base);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.cashback__amount {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-extrabold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* background-clip:text に text-shadow を付けると文字の上に影が乗るため drop-shadow で代用 */
.cashback__amount-text {
  filter: drop-shadow(2px 2px 2px var(--color-shadow-navy-dark));
}

/* ↓ 混在サイズ部分。Figma CSSに値が出ていないためスクリーンショットに合わせた値 */
.cashback__amount-num {
  font-size: 1.45em;
}

/* Figma: ※ は Group上端から20px下（top 126 - 106） */
.cashback__mark {
  align-self: flex-start;
  margin-top: 20px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-white);
}

.cashback__title {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-black);
  font-size: 56px;
  line-height: 1;
  color: var(--color-white);
  text-shadow: 2px 2px 4px var(--color-shadow-navy-dark);
}

.cashback__note {
  display: flex;
  justify-content: flex-end;
  width: var(--content-width);
  padding: 0 40px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 1;
  color: var(--color-white);
}

/* about */
/* 背景：#F5F5F5 の上、上から649px〜下端まで（Figma: 高さ1274px）薄紫グラデーション。
   上端は右(649px)→左(649 + 352px)へ下がる斜めカット（左端は見本画像から計測）。
   斜めカットは 1440×352 の領域に「to bottom right」で50%の境目を作ると
   ちょうど右上角→左下角の対角線になるのを利用 */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 58px 0 103px; /* 下: 1923 - 58 - 中身(889.03 + 48 + 825) */
  background:
    linear-gradient(to bottom right, var(--color-bg-gray) 50%, transparent 50%) left 0 top 649px / 100% 352px no-repeat,
    var(--gradient-about-bg) left 0 top 649px / 100% calc(100% - 649px) no-repeat,
    var(--color-bg-gray);
}

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

/* 上12pxはサブカラーの帯（Figma: Rectangle 84） */
.about__title {
  align-self: stretch;
  height: 104px;
  padding-top: 25px;
  background: linear-gradient(var(--color-sub) 0 12px, var(--color-navy-light) 12px);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.about__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Figma: transform: matrix(1, 0, -0.19, 0.98) → 高さ70.68px・上下で13.74pxずれる平行四辺形 */
.about__ribbon {
  --ribbon-slant: 13.74px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70.68px;
  clip-path: polygon(var(--ribbon-slant) 0, 100% 0, calc(100% - var(--ribbon-slant)) 100%, 0 100%);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.about__ribbon--short {
  width: 551.74px;
  background: linear-gradient(90deg, var(--color-navy-light) 39.05%, var(--color-purple-light) 100%);
}

.about__ribbon--long {
  width: 1028.74px;
  background: linear-gradient(90deg, var(--color-navy-light) 17.91%, var(--color-purple-light) 100%);
}

.about__ribbon--middle {
  width: 979.74px;
  background: linear-gradient(90deg, var(--color-navy-light) 17.91%, var(--color-purple-light) 100%);
}

.about__body {
  width: 653px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
}

/* Figma: 幅522 × 高さ23、行ボックス(42px)の上から25px〜はみ出し6pxまで */
.about__marker {
  display: inline-block;
  width: 522px;
  height: 48px;
  vertical-align: top;
  background: linear-gradient(transparent 25px, var(--color-marker) 25px);
}

.about__badges {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 各行の top は Figma の座標をそのまま使うため、行ごとに margin-top で重ねる */
.about__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 258px;
  height: 289px;
  padding-top: 72px;
  background: url(../public/images/badge-about.svg) center / contain no-repeat;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  white-space: nowrap;
  color: var(--color-gold-badge);
}

.about__badge-line {
  display: block;
}

/* 2か月で / TOEIC / 240点 / UP */
.about__badge--toeic .about__badge-line--1 {
  font-size: 24.1026px;
  line-height: 45px;
  letter-spacing: 2.57094px;
}

.about__badge--toeic .about__badge-line--2 {
  margin-top: -15px;
  font-size: 25.8716px;
  line-height: 48px;
  letter-spacing: 2.75963px;
}

.about__badge--toeic .about__badge-line--3 {
  margin-top: -11px;
  font-size: 60.7143px;
  line-height: 68px;
  letter-spacing: 3.88571px;
}

.about__badge--toeic .about__badge-line--4 {
  margin-top: -13.9px;
  font-size: 34.4681px;
  line-height: 64px;
  letter-spacing: 3.6766px;
}

/* ↓「点」の縮小率は Figma CSS に値が出ていないためスクリーンショットに合わせた値 */
.about__badge-unit {
  font-size: 0.55em;
}

/* 海外 / MBA / 合格 */
.about__badge--mba .about__badge-line--1 {
  font-size: 25.8716px;
  line-height: 48px;
  letter-spacing: 2.75963px;
}

.about__badge--mba .about__badge-line--2 {
  margin-top: -8px;
  font-size: 36.5079px;
  line-height: 41px;
  letter-spacing: 2.33651px;
}

.about__badge--mba .about__badge-line--3 {
  margin-top: -29.9px;
  font-size: 69.8805px;
  line-height: 130px;
  letter-spacing: 7.45392px;
}

/* 安心の / 成果 / 保証 */
.about__badge--guarantee .about__badge-line--1 {
  font-size: 25.8716px;
  line-height: 48px;
  letter-spacing: 2.75963px;
}

.about__badge--guarantee .about__badge-line--2,
.about__badge--guarantee .about__badge-line--3 {
  font-size: 58px;
  line-height: 108px;
  letter-spacing: 6.19481px;
}

.about__badge--guarantee .about__badge-line--2 {
  margin-top: -33px;
}

.about__badge--guarantee .about__badge-line--3 {
  margin-top: -46.8px;
}

.about__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 1071px;
}

.about__subtitle {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 2.01379px;
  text-align: center;
  color: var(--color-white);
}

.about__voice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
}

.about__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 167px;
}

/* Figma: 120pxの円マスク。画像は顔中心で正方形に切り出し済みなので円いっぱいに表示 */
.about__avatar {
  width: 120px;
  height: 120px;
  border: 3px solid var(--color-navy);
  border-radius: 50%;
  overflow: hidden;
  background: #d9d9d9;
}

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

.about__profile-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.about__name {
  font-size: 24px;
}

.about__school {
  font-size: 16px;
}

.about__result {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

/* 動画ラッパー：中身を iframe に差し替えても同じ比率・サイズで表示される */
.about__video {
  width: 650px;
  aspect-ratio: 16 / 9;
}

.about__video img,
.about__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.about__story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

/* 下線（Figma: Vector 15 / 幅1071・2px 白） */
.about__story::after {
  content: "";
  align-self: stretch;
  border-top: 2px solid var(--color-white);
}

.about__story-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 126px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

/* ↓ 2行目の文字サイズは Figma CSS に値が出ていないためスクリーンショットに合わせた値 */
.about__story-main {
  font-size: 48px;
}

/* お悩み */
/* 背景はFigmaの bg グループを層に分けて再現（数値はすべて figma/worry.css）。
   机の写真は右端に寄せたまま原寸で表示し、左側は黒とグラデーションで伸ばす */
.worry {
  position: relative;
  height: 719px;
  overflow: hidden;
  background: var(--color-dark); /* Rectangle 9 */
}

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

/* 23529471_m：机の写真（892.76×595.17 / Figma left 606.69・top 122 → 右端から-59.45px）
   Rectangle 12 のグラデーションをマスクにして、左へいくほど消していく */
.worry__bg-desk {
  position: absolute;
  inset: 1px 0 0;
  background: url(../public/images/worry-desk.webp) no-repeat right -59.45px top 121px / 892.76px 595.17px;
  /* Figmaのマスクは色の明るさも効くため、#D9D9D9=85%・#A6A6A6=65%・灰色50%=28% と換算 */
  -webkit-mask-image: linear-gradient(269.54deg, rgba(0, 0, 0, 0.85) 0.4%, rgba(0, 0, 0, 0.65) 38.04%, rgba(0, 0, 0, 0.28) 48.36%, transparent 61.06%);
  mask-image: linear-gradient(269.54deg, rgba(0, 0, 0, 0.85) 0.4%, rgba(0, 0, 0, 0.65) 38.04%, rgba(0, 0, 0, 0.28) 48.36%, transparent 61.06%);
}

/* Rectangle 13：写真の左端に重ねる黒のグラデーション（写真と同じく右端基準） */
.worry__bg-desk-fade {
  position: absolute;
  top: 48px;
  right: 691px;
  width: 142px;
  height: 669px;
  background: linear-gradient(90deg, var(--color-dark) 0%, rgba(32, 32, 32, 0) 100%);
}

/* Rectangle 12：全体にかける灰色の膜 */
.worry__bg-veil {
  position: absolute;
  inset: 1px 0 0;
  background: rgba(102, 102, 102, 0.34);
}

/* AdobeStock_352436616：上部275pxの石材の壁。
   ::after は Rectangle 11（灰色74%の乗算＋影） */
/* 大理石の帯。マスク（Figma: Rectangle 10）は長方形ではなく、
   下辺が中央へ向かって下がるV字。Figmaの選択枠から座標を採寸した：
   左右の端 y=183px（275pxの66.5%）／中央 x=720px で y=275px。
   写真の切り出しはFigmaの配置（1798.39×1199.41 / left -235.59px・top -70.17px）。
   横位置の65.73%は -235.59px と同じ切り出しで、画面幅が変わってもずれない */
.worry__bg-wall {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 275px;
  clip-path: polygon(0 0, 100% 0, 100% 66.55%, 50% 100%, 0 66.55%);
  background-color: #616161;
  background-image: url(../public/images/worry-wall.webp);
  background-size: 124.89% auto;
  background-position: 65.73% -70.17px;
  background-repeat: no-repeat;
}

.worry__bg-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(97, 97, 97, 0.74);
  mix-blend-mode: multiply;
}

.worry__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--content-width);
  margin: 0 auto;
  padding-top: 64px;
}

.worry__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.worry__title-sub {
  font-size: 32px;
}

.worry__title-main {
  font-size: 40px;
}

/* 吹き出し：左の線(136px) → 8.5px空けて「／」で下から立ち上がり → 右の線
   Figma: Vector 1 = 幅136 / Vector 2 = 幅151.5 × 高さ10、線幅2px
   右側は「上辺＋左辺」のボーダー枠を skewX で傾け、斜線と横線を1本の角でつなげる */
.worry__bubble {
  --bubble-tail: 8px; /* 斜線の横幅（高さ10pxに対して） */
  display: flex;
  width: 296px;
  height: 10px;
}

.worry__bubble::before {
  content: "";
  width: 136px;
  border-top: 2px solid var(--color-white);
}

/* 左下を起点に傾けるので、上辺は右へ --bubble-tail ぶんずれる → 幅をその分短くして右端を296pxに揃える */
.worry__bubble::after {
  content: "";
  width: calc(151.5px - var(--bubble-tail));
  height: 10px;
  margin-left: calc(296px - 136px - 151.5px);
  border-top: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  transform: skewX(-38.66deg); /* atan(8 / 10) */
  transform-origin: left bottom;
}

/* ul: Figma left 190 / top 331（見出し下端 64 + 114 = 178 から 153px） */
.worry__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: flex-start;
  width: 550px;
  margin: 153px 0 0 190px;
  padding: 40px;
  background: var(--gradient-worry-box);
}

.worry__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 区切り線（Figma: line 幅470 / 1px dashed） */
.worry__item:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-navy-light);
}

.worry__check {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
}

.worry__text {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* method */
.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-gray);
}

/* ---------- 紺の帯見出し ---------- */
/* 下辺は左(319px)→右(319 - 61px)へ上がる斜めカット（右端の高さは見本画像から計測） */
.method__top {
  --cut: 61px;
  align-self: stretch;
  height: 319px;
  padding-top: 80px;
  background: var(--color-navy-light);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

.method__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.method__title-sub {
  font-size: 32px;
}

.method__title-main {
  display: flex;
  gap: 8px;
  font-size: 72px;
}

/* ---------- 下向き三角（Figma: Polygon 9 = 正三角形を上下反転） ---------- */
/* Figmaの三角形は枠の上25%が余白、横は6.7%〜93.3% */
.method__triangle {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  clip-path: polygon(6.7% 25%, 93.3% 25%, 50% 100%);
}

.method__triangle--orange {
  background: var(--color-orange-accent);
}

.method__triangle--navy {
  background: var(--color-navy-light);
}

.method__triangle--q {
  width: 40px;
  height: 40px;
  background: var(--color-text);
}

/* ---------- center ---------- */
.method__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 1064px;
  padding: 80px 0;
}

.method__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 720px;
}

.method__q {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
}

.method__q-text {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

/* 線は枠の上から10px（Figma: Line 41 top 66 - line枠 top 56）、三角は left 363.5px */
.method__q-line {
  display: flex;
  height: 40px;
  background: linear-gradient(var(--color-text), var(--color-text)) left 0 top 9px / 100% 2px no-repeat;
}

.method__triangle--q {
  margin-left: 363.5px;
}

.method__a {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 705px;
}

.method__a-text {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 40px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

.method__a-text + .method__a-text {
  align-items: flex-end;
  height: 56px;
}

/* 2行目の枠高さ56px（line-height 100%）から、強調部分を56pxと判断 */
.method__a-accent {
  font-size: 56px;
  color: var(--color-orange-accent);
}

.method__accent {
  color: var(--color-orange-accent);
}

/* 左右2カード（Figma: 幅1064 / space-between） */
.method__compare {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
}

.method__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 520px;
  padding: 24px;
  background: var(--color-white);
  box-shadow: 0 0 22.9px var(--color-shadow-card);
}

.method__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 24px 0;
  background: var(--color-navy-light);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.method__card-head-sub {
  font-size: 24px;
}

.method__card-head-main {
  font-size: 32px;
}

.method__card-img {
  width: 292px;
  height: 292px;
}

/* 言語の中での役割 30% （Figma: 文字→数字 10px / 数字→% 5px） */
.method__role {
  display: flex;
  align-items: baseline;
  height: 64px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.method__role-num {
  margin-left: 10px;
  font-size: 64px;
  letter-spacing: 0;
  color: var(--color-orange-accent);
}

.method__role-unit {
  margin-left: 5px;
  font-size: 32px;
  color: var(--color-orange-accent);
}

.method__card-text {
  align-self: stretch;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

/* Semantics / Syntax / Tense / Verval の表（Figma: 240×104 × 2列 / gap 8 / 幅488）
   カード内側(472px)より広いので、中央揃えで左右に8pxずつはみ出す */
.method__roles {
  display: grid;
  grid-template-columns: repeat(2, 240px);
  gap: 8px;
  flex-shrink: 0;
}

.method__roles-item {
  padding: 16px 0;
  background: var(--color-navy-light);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

/* 日本語の「動詞」が担えない役割（グレーアウト） */
.method__roles-item--inactive {
  background: var(--color-gray);
  color: var(--color-gray-text);
}

.method__summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.method__summary-main {
  font-size: 56px;
  color: var(--color-orange-accent);
}

.method__summary-sub {
  font-size: 32px;
  color: var(--color-text);
}

/* ---------- Method / グラマーテーブル の白ボックス ---------- */
.method__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  width: 1064px;
  padding-bottom: 40px;
  background: var(--color-white);
}

.method__box-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  padding: 40px 0;
  background: var(--color-navy-light);
  text-align: center;
  color: var(--color-white);
}

.method__box-en {
  font-family: var(--font-script);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 0.911;
}

.method__box-lead {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.method__box-name {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.method__reed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 699.74px;
}

.method__reed-text {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

/* 金のリボン（aboutの紫リボンと同じ斜め：matrix(1, 0, -0.19, 0.98)） */
.method__ribbon {
  --ribbon-slant: 13.74px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 70.68px;
  clip-path: polygon(var(--ribbon-slant) 0, 100% 0, calc(100% - var(--ribbon-slant)) 100%, 0 100%);
  background: var(--gradient-gold-ribbon);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 35px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-shadow: 0 0 4px var(--color-shadow-brown);
}

/* 受験英語 vs LIBERTYの英語（Figma: 幅974 / space-between） */
.method__versus {
  display: flex;
  justify-content: space-between;
  width: 974px;
}

.method__vs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 460px;
  padding-bottom: 30px;
  background: var(--color-white);
  box-shadow: 0 0 22.9px var(--color-shadow-card);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-align: center;
}

.method__vs-head {
  align-self: stretch;
  padding: 24px 0;
  font-size: 32px;
  line-height: 1;
  color: var(--color-white);
}

.method__vs-card--exam .method__vs-head {
  background: var(--color-gray-dark);
}

.method__vs-card--liberty .method__vs-head {
  background: var(--color-navy-light);
}

.method__vs-lead,
.method__vs-result {
  font-size: 24px;
  line-height: 1;
  color: var(--color-text);
}

.method__vs-card--liberty .method__vs-result {
  color: var(--color-orange-accent);
}

.method__vs-img {
  height: 259px;
}

.method__vs-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* PCはカード460pxに対して400px（左右30pxの余白）。
     カードが縮んでもその余白を保ち、はみ出さないようにする */
  width: min(400px, 100% - 60px);
  padding: 16px 0;
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.method__vs-card--exam .method__vs-note {
  background: var(--color-bg-gray);
}

.method__vs-card--liberty .method__vs-note {
  background: var(--color-lavender-pale);
}

.method__vs-note-title {
  font-size: 24px;
  line-height: 1;
}

.method__vs-card--liberty .method__vs-note-title {
  color: var(--color-navy-light);
}

.method__vs-note-text {
  font-size: 18px;
  line-height: 1.5;
}

/* LIBERTYで身につく、完璧な英語とは？ */
.method__levels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 976px;
  padding: 21px 0; /* Figma 23px − 枠線2px（Figmaの線は内側描画で高さに含まれないため） */
  border: 2px solid var(--color-navy-light);
  text-align: center;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* 見出し下の区切り線（Figma: Line 47 / 幅976・2px） */
.method__levels-title {
  align-self: stretch;
  padding-bottom: 13px; /* Figma gap 15px − 線2px */
  border-bottom: 2px solid var(--color-navy-light);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1.5;
}

.method__levels-text {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  line-height: 1.6;
}

/* レベル一覧（Figma: 287×50 × 3列 / 縦横 gap 12） */
.method__levels-list {
  display: grid;
  grid-template-columns: repeat(3, 287px);
  grid-auto-rows: 50px;
  gap: 12px;
}

.method__levels-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-navy-light);
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
}

/* arrow-down.svg（70×91）＝ Figma の arrow 90.7×69.35 を90°回転したもの */
.method__arrow {
  width: 69.35px;
  height: 90.7px;
}

.method__conclusion {
  width: 980px;
  padding: 33px 45px 32px 41px;
  background: var(--color-navy-light);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.method__conclusion-gold {
  color: var(--color-gold-light);
}

/* ---------- bottom ---------- */
.method__bottom {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding-top: 100px; /* Figma: Rectangle 102（#F5F5F5 / 高さ100） */
}

/* 背景：グラデーションの上に campus-bg.jpg を スクリーン・不透明度20% で重ねる（Figma）
   → 結果 = screen(グラデーション, 0.2 × 写真)
   写真に黒80%を重ねて(0.2 × 写真)を作り、その上にグラデーションを screen で合成する
   写真の位置: Figma 1440×993 / 帯の上端から -328px（bottom枠内 top -228 − 帯の top 100） */
.method__band {
  height: 482px;
  padding-top: 80px;
  background-color: var(--color-navy-light);
  background-image:
    var(--gradient-method-band),
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(../public/images/campus-bg.jpg);
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: 0 0, 0 0, left 0 top -328px;
  background-repeat: no-repeat;
  background-blend-mode: screen, normal, normal;
}

.method__band-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1064px;
  margin: 0 auto;
}

.method__band-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 567px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-white);
}

/* Figma: ロゴ 300×88 / 「で、」は left 317・top 27 */
.method__band-brand {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 32px;
  line-height: 1;
}

.method__band-logo {
  width: 300px;
  height: 88px;
}

.method__band-text {
  margin-top: 7px; /* ロゴ下端88 → 本文 top 95 */
  font-size: 40px;
  line-height: 1.5;
}

.method__band-text--last {
  margin-top: 3px; /* 本文下端 95 + 150 = 245 → top 248 */
}

.method__band-text {
  white-space: nowrap;
}

/* ↓ 強調部分のサイズは Figma CSS に値が出ていないため、見本と本文幅567pxに収まる値 */
.method__band-accent {
  font-size: 52px;
}

.method__band-photo {
  width: 451px;
  height: 322px;
  object-fit: cover;
}

.method__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 80px 0;
  background: var(--color-white);
}

.method__cta-text {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

/* reason */
.reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  padding-bottom: 80px;
  background: var(--color-white);
}

.reason__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.reason__title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  align-self: stretch;
  padding: 40px 0;
  background: var(--color-gold-light);
}

.reason__laurel {
  width: 53.82px;
  height: 133.37px;
}

/* 左右で同じ図形。laurel.svg は左側用の向きなので、右側を反転する */
.reason__laurel--right {
  transform: scaleX(-1);
}

.reason__title-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 372px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.reason__title-sub {
  font-size: 32px;
}

.reason__title-main {
  font-size: 80px;
}

/* 金帯下の下向き三角（Figma: Polygon 6 / 80×64・180°回転、帯の上端から top 197）
   Figmaの三角形は枠の上25%が余白なので、見えている三角の上辺がちょうど帯の下端に接する。
   上下のマイナスmarginでレイアウト上の高さを0にし、下の gap 120px に影響させない */
.reason__triangle {
  width: 80px;
  height: 64px;
  margin: -16px 0 -48px;
  background: var(--color-gold-light);
  clip-path: polygon(6.7% 25%, 93.3% 25%, 50% 100%);
}

.reason__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 1064px;
}

.reason__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 0;
  background: var(--color-bg-gray);
}

/* 「Reason 01」：item上端から -56px。
   上 margin で padding(40) + 56 = 96px 引き上げ（下端がちょうど padding の終わり）、
   下 margin で直後の gap(24) を打ち消して、見出しの位置を Figma どおり item上端+40px に保つ */
.reason__num {
  position: relative; /* 見出しより手前に重ねるため（Figma: z-index 2） */
  z-index: 1;
  margin: -96px 0 -24px;
  font-family: var(--font-script);
  font-weight: var(--font-weight-regular);
  font-size: 96px;
  line-height: 1;
  text-align: center;
  color: rgba(51, 51, 51, 0.2);
}

.reason__item-title {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-navy-light);
}

.reason__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 980px;
}

/* Reason 02 は space-between ではなく gap 35px の左詰め */
.reason__body--start {
  justify-content: flex-start;
  gap: 35px;
}

.reason__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 440px;
}

/* Reason 03：段落間は1行分（24px）空ける */
.reason__col--text {
  gap: 24px;
}

.reason__text {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.reason__text--tight {
  letter-spacing: 1.48645px;
}

.reason__profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  background: var(--color-white);
}

.reason__profile-photo {
  width: 162px;
  height: 112px;
  object-fit: cover;
}

.reason__profile-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 201px;
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.reason__profile-name {
  font-weight: var(--font-weight-bold);
  font-size: 24px;
  line-height: 1;
}

.reason__profile-career {
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.reason__img {
  flex-shrink: 0;
  object-fit: cover;
}

.reason__img--diagram {
  width: 500px;
  height: 305px;
}

.reason__img--lesson {
  width: 480px;
  height: 280px;
}

.reason__img--ny {
  width: 500px;
  height: 280px;
}

.reason__points {
  width: 448px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* 箇条書きの「・」（2行目以降は文字の位置にそろえる） */
.reason__point {
  display: flex;
}

.reason__point::before {
  content: "・";
  flex-shrink: 0;
}

/* voice */
.voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 80px 0;
  background: var(--color-lavender-bg);
}

.voice__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 左右の横線（Figma: Vector 13/14 幅91.03px・2px / 文字との間 40px） */
.voice__title-sub {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 32px;
  color: var(--color-navy-light);
}

.voice__title-sub::before,
.voice__title-sub::after {
  content: "";
  width: 91.03px;
  border-top: 2px solid var(--color-navy-light);
}

/* 紫グラデーション帯（Figma: 776×88 を matrix(1, 0, -0.19, 0.98) で変形
   → 幅792.79 × 高さ86.38、上下で16.79pxずれる平行四辺形） */
.voice__title-main {
  --ribbon-slant: 16.79px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 792.79px;
  height: 86.38px;
  clip-path: polygon(var(--ribbon-slant) 0, 100% 0, calc(100% - var(--ribbon-slant)) 100%, 0 100%);
  background: var(--gradient-voice-ribbon);
  font-size: 56px;
  color: var(--color-white);
}

.voice__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.voice__item {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 980px;
}

/* 2番目だけ写真を右側に */
.voice__item--reverse {
  flex-direction: row-reverse;
}

.voice__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 180px;
}

.voice__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.voice__name {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.voice__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
  width: 760px;
  padding: 0 40px;
  background: var(--color-white);
}

.voice__card-title {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-navy-light);
}

.voice__card-text {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* Curriculum */
.curriculum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 80px 0;
  background: var(--color-navy-light);
  color: var(--color-white);
}

/* 見出し＋リード（Figma: h2 内 gap 32px）。section の gap 56px と分けるため lead を負の margin で寄せる */
.curriculum__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  line-height: 1;
  text-align: center;
}

.curriculum__title-en {
  font-family: var(--font-script);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
}

.curriculum__title-main {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 56px;
  letter-spacing: 0.05em;
}

.curriculum__lead {
  margin-top: calc(32px - 56px);
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.curriculum__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---------- タブ ---------- */
.curriculum__tabs {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 1064px;
}

/* 非選択：紺背景＋白枠線（Figmaの内側線なので inset の box-shadow で描き、中身の位置をずらさない） */
.curriculum__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 260px;
  height: 96px;
  padding: 16px 0;
  background: var(--color-navy-light);
  box-shadow: inset 0 0 0 2px var(--color-white);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.curriculum__tab-plan {
  font-size: 24px;
}

.curriculum__tab-term {
  font-size: 32px;
}

/* 選択中：白背景＋下向き三角 */
.curriculum__tab.is-active {
  background: var(--color-white);
  box-shadow: none;
  color: var(--color-navy-light);
  cursor: default;
}

/* 三角（Figma: Polygon 10 / 24×20・上下反転、タブ上端から top 91px）
   見えている三角はタブの下端(96px)から15px下へはみ出す。
   マイナスmarginでタブの高さ(96px)は変えない：80(中身下端) + 8(gap) + 3 = 91 */
.curriculum__tab.is-active::after {
  content: "";
  width: 24px;
  height: 20px;
  margin: 3px 0 -31px;
  background: var(--color-white);
  clip-path: polygon(6.7% 25%, 93.3% 25%, 50% 100%);
}

/* ---------- パネル ---------- */
.curriculum__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 1064px;
  padding: 40px 0;
  background: var(--color-white);
  color: var(--color-navy-light);
}

.curriculum__panel[hidden] {
  display: none;
}

.curriculum__panel-title {
  width: 980px;
  padding: 16px 0;
  background: var(--color-navy-light);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.curriculum__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 309px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-align: center;
}

.curriculum__info--wide {
  width: 764px;
}

.curriculum__info-label {
  font-size: 24px;
  line-height: 1;
}

/* ラベル下の短い線（Figma: Line 45/46 幅40px・2px、ラベルの下 8px の位置）。
   Figmaでは高さ0の線なので、線の分の高さを margin で打ち消し、本文をラベル下 16px(8+8) に置く */
.curriculum__info-label::after {
  content: "";
  display: block;
  width: 40px;
  margin: 7px auto -9px;
  border-top: 2px solid var(--color-navy-light);
}

.curriculum__info-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1;
}

.curriculum__info-text--multi {
  line-height: 1.6;
}

/* ---------- 4分割ブロック（Figma: 幅 122.49 / 367.47 / 408.3 / 81.66 = 979.92px） ---------- */
.curriculum__table {
  display: grid;
  grid-template-columns: 122.49px 367.47px 408.3px 81.66px;
  grid-template-rows: 104px auto;
  row-gap: 12px; /* ブロック下端 460 → 線 top 473（線幅2pxの中心） */
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/* SAT（幅81.66px）は文字幅67pxが内側(61.66px)より広いが、Figma同様に1行で左右の余白へはみ出させる */
.curriculum__block {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 10px;
  white-space: nowrap;
  color: var(--color-white);
}

.curriculum__block--foundation {
  background: var(--color-indigo);
}

.curriculum__block--toeic {
  background: var(--color-blue-gray);
}

.curriculum__block--grammar {
  background: var(--color-blue-light);
}

.curriculum__block--sat {
  background: var(--color-sky);
}

.curriculum__block--asw {
  background: var(--color-aqua);
}

/* ベーシックプラン：ブロックが5つ。列幅はショートプランと同じ考え方で回数の比
   （3 : 15 : 17 : 5 : 8 ＝ 全48回）。ただし文字が入りきらない列は
   minmax の最小幅で確保する（Foundation・Grammar Table・通学/LIVE配信の実測値） */
.curriculum__table--basic {
  /* ショートプランの表（979.92px）と横幅をそろえる */
  width: 979.92px;
  grid-template-columns:
    minmax(118px, 3fr)
    minmax(90px, 15fr)
    minmax(146px, 17fr)
    minmax(88px, 5fr)
    minmax(134px, 8fr);
}

/* 各ブロック下の区切り線と説明。線同士の間は約8px（Figma: Line 42 / 43 / 44） */
.curriculum__note {
  padding-top: 8px; /* 線 → 文字 top 482 */
  border-top: 2px solid var(--color-navy-light);
  white-space: nowrap;
}

.curriculum__note--foundation {
  grid-column: 1;
  margin-right: 4.49px;
}

.curriculum__note--toeic {
  grid-column: 2;
  margin: 0 3.96px 0 3.51px;
}

/* Grammar Table + SAT の2列分。文字の top は Figma で他より5px下（487px） */
.curriculum__note--advanced {
  grid-column: 3 / 5;
  margin-left: 4.04px;
  padding-top: 13px;
}

/* ベーシックプランのみ。ASW（5列目） */
.curriculum__note--asw {
  grid-column: 5;
  margin-left: 4.04px;
  padding-top: 13px;
}

/* plan */
.plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
  background: var(--color-bg-gray);
}

.plan__title {
  display: flex;
  flex-direction: column;
  width: 1064px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
}

.plan__title-sub {
  padding: 8px 0;
  background: var(--color-sub);
  font-size: 24px;
}

.plan__title-main {
  padding: 16px 0;
  background: var(--color-navy-light);
  font-size: 56px;
}

/* ショート / ベーシック / アドバンス（Figma: 幅772・各行 gap 8 / ラベルと説明 gap 32） */
.plan__types {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 772px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.plan__type {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ラベルは3段階の紫（淡 → 濃）。Figmaの値は各ラベル単色 */
.plan__type-label {
  flex-shrink: 0;
  width: 214px;
  padding: 16px 0;
  text-align: center;
  color: var(--color-white);
}

.plan__type-label--short {
  background: var(--color-purple-light);
}

.plan__type-label--basic {
  background: var(--color-sub);
}

.plan__type-label--advance {
  background: var(--color-navy-light);
}

.plan__type-text {
  white-space: nowrap;
  color: var(--color-text);
}

.plan__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.plan__subtitle {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* ---------- 料金表 ---------- */
/* Figma: セル同士の間に 2px の隙間（背景の#F5F5F5が見える）。見出し行と1行目の間は隙間なし。
   → セルに背景色のボーダーを付けて隙間を再現する（列幅・行の高さはボーダー込み） */
.plan__table {
  width: 1064px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.plan__table th,
.plan__table td {
  height: 66px;
  padding: 0;
  vertical-align: middle;
}

/* 2行目以降：上に2pxの隙間（行の高さ 66 + 2） */
.plan__table tbody tr + tr > * {
  height: 68px;
  border-top: 2px solid var(--color-bg-gray);
}

/* 通常の表：項目名列と1列目の間は隙間なし、コース列の間は2px
   列幅：238.22 / 274.26 / 273.26 + 2 / 274.26 + 2 = 1064 */
.plan__col-head {
  width: 238.22px;
}

.plan__col-1 {
  width: 274.26px;
}

.plan__col-2 {
  width: 275.26px;
}

.plan__col-3 {
  width: 276.26px;
}

.plan__table > * > tr > :nth-child(n + 3) {
  border-left: 2px solid var(--color-bg-gray);
}

.plan__corner {
  background: transparent;
}

.plan__head {
  font-weight: var(--font-weight-medium); /* th の既定の太字を打ち消す */
  color: var(--color-white);
}

.plan__head--short {
  background: var(--color-purple-light);
}

.plan__head--basic {
  background: var(--color-sub);
}

.plan__head--advance {
  background: var(--color-navy-light);
}

.plan__row-head {
  background: var(--color-gray-cell);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.plan__cell {
  background: var(--color-white);
  color: var(--color-text);
}

/* ストライプにする場合はこの指定を有効にする（Figma・見本は全行白） */
/* .plan__table tbody tr:nth-child(even) .plan__cell { background: var(--color-bg-gray); } */

/* プライベートコース：見出し行 80px。
   項目名列と1列目の間 2px、コース列の間 3px
   列幅：254.24 / 403.38 + 2 / 401.38 + 3 = 1064 */
.plan__table--private thead th,
.plan__table--private thead td {
  height: 80px;
}

.plan__table--private .plan__col-head {
  width: 254.24px;
}

.plan__table--private .plan__col-1 {
  width: 405.38px;
}

.plan__table--private .plan__col-2 {
  width: 404.38px;
}

.plan__table--private > * > tr > :nth-child(2) {
  border-left: 2px solid var(--color-bg-gray);
}

.plan__table--private > * > tr > :nth-child(3) {
  border-left-width: 3px;
}

.plan__head-small {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.plan__notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-text);
}

.plan__note {
  font-size: 20px;
}

.plan__note--small {
  font-size: 16px;
}

/* 保証 */
/* 白ボックス（1064×640）を section の上下中央に配置：(811 - 640) / 2 = 85.5 */
.guarantee {
  display: flex;
  justify-content: center;
  padding: 85.5px 0;
  background: var(--color-beige);
}

/* 装飾枠（四隅の飾り＋金の二重線＋白地）を背景に敷き、中身を上下左右中央に重ねる */
.guarantee__frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 1064px;
  height: 640px;
  background: url(../public/images/guarantee-frame.svg) center / 100% 100% no-repeat;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-align: center;
}

.guarantee__title {
  font-size: 56px;
  line-height: 1;
  color: var(--color-gold-light);
}

.guarantee__text {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text);
}

.guarantee__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* 金の円（circle-gold.svg / 265×265）を背景にし、上段=小さい説明・下段=大きい見出し */
.guarantee__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 264.48px;
  height: 264.48px;
  background: url(../public/images/circle-gold.svg) center / contain no-repeat;
  color: var(--color-white);
}

/* 説明が2行の円は gap 8px（Figma: Frame 391） */
.guarantee__item--multi {
  gap: 8px;
}

.guarantee__item-lead {
  font-size: 20px;
  line-height: 1;
}

.guarantee__item--multi .guarantee__item-lead {
  line-height: 1.25;
}

.guarantee__item-name {
  font-size: 40px;
  line-height: 1;
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding-bottom: 80px;
  background: var(--color-white);
}

.faq__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  padding: 40px 0;
  background: var(--color-navy-light);
  text-align: center;
  color: var(--color-white);
}

.faq__title-en {
  font-family: var(--font-script);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 0.911;
}

.faq__title-main {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* Q&A（Figma: 幅980・各要素の間 gap 24px） */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 980px;
}

.faq__button {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 61px;
  padding: 16px 40px;
  background: var(--gradient-faq);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--color-white);
}

.faq__button:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 2px;
}

.faq__q {
  width: 20px;
  font-size: 25px;
  line-height: 1;
  text-align: center;
}

.faq__question-text {
  flex: 1;
  font-size: 16px;
  line-height: 1;
}

/* ▼：閉じているとき下向き、開いているとき上向き */
.faq__icon {
  width: 15px;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.64px;
  text-align: center;
  transition: transform 0.3s ease;
}

.faq__button[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}

/* 回答：高さは JS で 0 ⇔ 中身の高さ に切り替え、transition でアニメーション */
.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* 質問バーとの間 24px（Figma の gap）は、閉じたとき一緒に畳まれるよう内側の padding で持つ */
.faq__answer-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 900px;
  margin: 0 auto;
  padding-top: 24px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
}

.faq__a {
  flex-shrink: 0;
  width: 17.74px;
  font-size: 25px;
  line-height: 23px;
  letter-spacing: 0.64px;
  text-align: center;
  color: var(--color-orange-accent);
}

.faq__answer-text {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .faq__icon,
  .faq__answer {
    transition: none;
  }

  .sticky-cta {
    transition: none;
  }
}

/* お問い合わせ */
/* Figma で数値があるのは section・見出し・白ボックス（980×1172）のみ。
   フォーム内部は Figma 上ではスクリーンショット画像なので、
   以下の寸法・余白・文字サイズは添付スクリーンショットから計測した推測値 */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 80px 0;
  background: var(--color-lavender-bg);
}

.contact__title {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-navy-light);
}

.contact__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 980px;
  min-height: 1172px;
  padding: 58px 0 46px;
  background: var(--color-white);
  font-family: var(--font-serif);
  color: var(--color-text);
}

.contact__lead {
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.05em;
  text-align: center;
}

.contact__form {
  display: flex;
  flex-direction: column;
  width: 792px;
  margin-top: 42px;
}

/* ---------- 各行（左：項目名＋バッジ / 右：入力欄） ---------- */
.contact__row {
  display: flex;
  align-items: flex-start;
  padding: 14px 0 13px;
  border-top: 1px solid var(--color-form-line);
}

.contact__row--auth {
  padding: 15px 0 27px;
  border-bottom: 1px solid var(--color-form-line);
}

.contact__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 343px;
  min-height: 40px; /* 入力欄の高さに合わせ、1行目と上下中央をそろえる */
}

.contact__label {
  flex-shrink: 0;
  width: 199px;
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-form-label);
}

/* お名前の行だけ、バッジを左に寄せて右に注釈を置く */
.contact__head--name .contact__label {
  width: 160px;
}

.contact__head-note {
  margin-left: 12px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-text);
}

/* 必須（オレンジ）／任意（グレー）バッジ */
.contact__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 43px;
  height: 23px;
  background: var(--color-orange-accent);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-white);
}

.contact__badge--optional {
  background: var(--color-form-optional);
}

.contact__badge--vertical {
  width: 38px;
  height: 44px;
  writing-mode: vertical-rl;
}

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

.contact__name {
  display: flex;
  gap: 7px;
}

.contact__input,
.contact__textarea {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.contact__input {
  height: 40px;
  padding: 0 14px;
  background: var(--color-form-input);
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: var(--color-form-placeholder);
  opacity: 1;
}

.contact__input:focus-visible,
.contact__textarea:focus-visible {
  outline: 2px solid var(--color-orange-accent);
  outline-offset: 1px;
}

/* 入力エラー（JS で aria-invalid="true" を付与） */
.contact__input[aria-invalid="true"],
.contact__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background: #fdf0ef;
}

.contact__note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 18px;
  color: var(--color-text);
}

.contact__error {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-error);
}

/* ---------- メッセージ ---------- */
.contact__row--message {
  flex-direction: column;
  padding: 18px 0 17px;
}

.contact__row--message .contact__label {
  width: auto;
}

.contact__textarea {
  height: 83px;
  margin-top: 17px;
  padding: 8px 14px;
  border-color: var(--color-gray-cell);
  background: var(--color-white);
  line-height: 1.6;
  resize: vertical;
}

.contact__consent {
  margin-top: 14px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.03em;
}

.contact__consent-link {
  text-decoration: underline;
}

/* ---------- 認証（reCAPTCHA v2：標準サイズ 304×78） ---------- */
.contact__field--auth {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact__recaptcha {
  min-width: 304px;
  min-height: 78px;
}

/* サイトキー設定前（中身が空）のプレースホルダー表示 */
.contact__recaptcha:empty {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #c9c9c9;
  background: #f9f9f9;
}

.contact__recaptcha:empty::before {
  content: "reCAPTCHA（サイトキー設定後に表示）";
  font-family: var(--font-base);
  font-size: 12px;
  color: var(--color-form-placeholder);
}

.contact__caution {
  margin-top: 25px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.03em;
  text-align: center;
}

.contact__summary {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid var(--color-error);
  background: #fdf0ef;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-error);
}

/* ---------- 送信ボタン ---------- */
/* ボタンはフォーム(792px)より広い 820px。左右に14pxずつはみ出させる */
.contact__submit-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 126px -14px 0;
}

.contact__submit {
  width: 820px;
  height: 51px;
  background: var(--color-orange-accent);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  transition: opacity 0.2s;
}

.contact__submit:hover {
  opacity: 0.85;
}

.contact__submit:focus-visible {
  outline: 3px solid var(--color-navy-light);
  outline-offset: 2px;
}

.contact__submit-note {
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* footer */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  background: var(--color-navy-light);
}

.footer__copyright {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-white);
}

/* small の既定の縮小を打ち消し、12px のまま表示 */
.footer__copyright small {
  font-size: inherit;
}

/* ==========================================================
   Responsive（タブレット・スマホ）
   PCは1440px固定のデザイン。ここから下で画面幅に合わせて調整する
   - 〜1439px：横幅を画面に収める（レイアウトはPCと同じ）
   - 〜1023px：横並びを縦並びに変える
   - 〜599px ：スマホ向けに文字と余白を詰める
   ========================================================== */
:root {
  --gutter: 24px;
}

@media (max-width: 599px) {
  :root {
    --gutter: 16px;
  }
}

/* ---------- 〜1439px：固定幅を画面幅に収める ---------- */
@media (max-width: 1439px) {
  /* 全幅のセクション内側 */
  .fv__inner,
  .worry__inner {
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .fv__inner {
    padding-top: 28px;
  }

  /* 中央寄せのコンテナ：元の幅を上限に、画面幅へ収める */
  .method__center,
  .method__band-inner,
  .method__box,
  .reason__list,
  .curriculum__tabs,
  .curriculum__panel,
  .plan__title,
  .guarantee__frame,
  .about__bottom {
    width: min(1064px, 100% - var(--gutter) * 2);
  }

  .about__ribbon--long {
    width: min(1028.74px, 100%);
  }

  .about__ribbon--middle {
    width: min(979.74px, 100%);
  }

  .about__ribbon--short {
    width: min(551.74px, 100%);
  }

  .method__versus {
    width: min(974px, 100%);
  }

  .method__levels {
    width: min(976px, 100%);
  }

  .method__conclusion,
  .method__panel-title,
  .curriculum__panel-title,
  .reason__body,
  .voice__item,
  .faq__list,
  .contact__box {
    width: min(980px, 100% - var(--gutter) * 2);
  }

  .curriculum__panel-title {
    width: min(980px, 100% - 32px);
  }

  .faq__answer-inner {
    width: min(900px, 100% - 32px);
  }

  .contact__form {
    width: min(792px, 100% - 32px);
  }

  .contact__submit {
    width: min(820px, 100%);
  }

  .plan__types {
    width: min(772px, 100% - var(--gutter) * 2);
  }

  .plan__table {
    width: min(1064px, 100% - var(--gutter) * 2);
  }

  .voice__title-main {
    width: min(792.79px, 100%);
  }

  .cashback__lead {
    width: min(712px, 100% - var(--gutter) * 2);
  }

  .method__intro {
    width: min(720px, 100%);
  }

  .method__a,
  .method__reed {
    width: min(705px, 100%);
  }

  .fv__container {
    width: min(747px, 100%);
  }

  .fv__title {
    width: auto;
    max-width: 100%;
  }

  .about__body,
  .about__video {
    width: min(653px, 100%);
  }

  /* 高さ126px固定のままだと、文字が増えたとき枠からはみ出して
     上の動画や下の白線と重なるため可変にする */
  .about__story-text {
    height: auto;
    min-height: 126px;
    padding: 8px 0;
    font-size: 24px;
  }

  .about__story-main {
    font-size: 32px;
  }

  /* 白ボックスは、1440pxデザインでの位置（左から190px）を基準に置く。
     画面が狭いぶんだけ左へ寄るが、最低でも余白ぶんは空ける */
  /* 白枠の左位置。1440pxでは画面左から190px（= 13.194vw）。
     同じ比率で追従させる。以前の式は1150px以下でガター値に張り付き、
     左端に寄りすぎていた（.worry__inner の左パディングぶんを差し引く） */
  .worry__list {
    width: min(550px, 100% - var(--gutter) * 2);
    margin-left: max(0px, calc(min(190px, 13.194vw) - var(--gutter)));
  }

  .guarantee__frame {
    height: auto;
    padding: 56px var(--gutter);
    background-size: 100% 100%;
  }

  /* 幅の基準になる包み要素（中の min(...) が画面幅を基準に計算されるようにする） */
  .curriculum__wrapper,
  .voice__list,
  .about__lead,
  .plan__block,
  .method__bottom {
    width: 100%;
  }

  /* キャッシュバックの注釈（PCは1440px固定） */
  .cashback__note {
    width: 100%;
    padding: 0 var(--gutter);
    justify-content: flex-end;
  }

  /* 料金表：収まらない場合は横スクロール */
  .plan__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plan__table {
    width: 1064px;
  }

  .plan__block {
    width: min(1064px, 100% - var(--gutter) * 2);
  }

  /* 画像は枠に合わせて縮める */
  .about__video img,
  .method__vs-img,
  .method__band-photo,
  .reason__img,
  .method__card-img {
    max-width: 100%;
    height: auto;
  }
}
/* ---------- 〜1279px：FVの文字が人物に重ならないように ---------- */
@media (max-width: 1279px) {
  .fv {
    height: auto;
    min-height: 700px;
  }

  /* 人物は下端に寄せ、文字と重ならない幅にする。
     cover だとPCと違う切り抜きになるため、PCの表示範囲
     （1352×901の写真を -422 / -164 の位置で 866×737 の枠に出す）を
     枠幅に対する等倍で縮小して、構図をPCと揃える */
  .fv__bg-person,
  .fv__bg-person-shadow {
    /* 1280px以上は866px固定。1279pxでの比率 866/1279 = 67.7% をそのまま下まで伸ばし、
       画面幅に対する人物の大きさをPCと揃える（境目で段差が出ない） */
    --person-w: min(866px, 67.7vw);
    width: var(--person-w);
    height: auto;
    top: auto;
    bottom: 0;
    aspect-ratio: 866 / 737;
    background-size: calc(var(--person-w) * 1352 / 866) auto;
    background-position:
      calc(var(--person-w) * -422 / 866)
      calc(var(--person-w) * -164 / 866);
  }

  /* FVのレイアウトが組み替わる幅では、179px固定だと斜めが強く出るため元の比率に戻す */
  .fv__bg-navy {
    width: calc(100% - 96px);
    --navy-slant: 17.34%;
  }

  .fv__inner {
    padding-bottom: 40px;
  }

  .fv__container {
    width: min(600px, 100%);
    margin: 16px 0 0;
  }

  .fv__title-white {
    font-size: 40px;
  }

  .fv__title-gold {
    font-size: 46px;
  }

  .fv__sub {
    font-size: 17px;
  }

  .fv__lead {
    font-size: 21px;
  }

  .fv__lead,
  .fv__sub {
    white-space: normal;
  }
}

/* ---------- 〜1199px ---------- */
@media (max-width: 1199px) {
  /* 2カードは横並びのまま、入りきるように幅を詰める
     （縦並びに切り替えるのは1023px以下） */
  .method__card {
    width: min(520px, calc((100% - 24px) / 2));
  }

  .method__vs-card {
    width: min(460px, calc((100% - 24px) / 2));
  }

  .method__roles {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* レベル一覧：1列に固定すると幅が余るので、入る本数だけ横に並べる
     （1199px→3列 / 768px→2列 / スマホ→1列。1列指定は599px以下のブロック側） */
  .method__levels-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 287px));
    justify-content: center;
    width: min(885px, 100% - 32px);
  }
}

/* ---------- 〜1023px：タブレット縦。横並びを縦並びに ---------- */
@media (max-width: 1023px) {
  /* ---------- 全体：折り返し ---------- */
  /* 1行に入る文字数が少ないため、2〜3文字だけが次の行に残りやすい。
     見出しと短い装飾テキストは行を均等に割り、本文は最終行が極端に短くならないようにする */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  /* balance は行を均等幅に揃えるため、左揃えの本文に使うと右側が大きく空いて
     「左に寄っている」ように見える。中央揃えの見出し・短文にだけ使う */
  .about__ribbon,
  .about__body,
  .about__story-sub,
  .about__story-main,
  .worry__title-main,
  .method__summary-main,
  .method__summary-sub,
  .method__box-lead,
  .method__ribbon,
  .method__conclusion,
  .method__cta-text,
  .plan__note,
  .curriculum__lead,
  .curriculum__info-text,
  .contact__lead,
  .contact__caution {
    text-wrap: balance;
  }

  /* 日本語を文節単位で折り返す（「メゾット」「（パリ）」等が途中で割れるのを防ぐ） */
  h1,
  h2,
  h3,
  h4,
  .about__ribbon,
  .about__story-sub,
  .about__story-main,
  .worry__title-main,
  .method__summary-main,
  .method__summary-sub,
  .method__ribbon,
  .method__conclusion,
  .curriculum__info-text {
    word-break: auto-phrase;
  }

  .scroll-hint {
    display: block;
    align-self: flex-start;
    margin: 0 var(--gutter) -4px;
    font-family: var(--font-base);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--color-form-placeholder);
  }

  /* FV */
  .fv {
    min-height: 620px;
  }

  .fv__container {
    width: min(560px, 100%);
  }

  .fv__title-white {
    font-size: 38px;
  }

  .fv__title-gold {
    font-size: 44px;
  }

  .fv__badges {
    gap: 4px;
  }

  .fv__badge {
    width: 160px;
    height: auto;
    aspect-ratio: 177 / 183;
  }

  .fv__lead {
    font-size: 20px;
  }

  /* about：リボンは2行になるので高さを可変に */
  .about__ribbon {
    --ribbon-slant: 10px;
    width: min(100%, 720px) !important;
    height: auto;
    padding: 10px 24px;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }

  .about__body {
    white-space: normal;
  }

  .about__marker {
    display: inline;
    width: auto;
    height: auto;
    padding: 0 2px;
    background: linear-gradient(transparent 60%, var(--color-marker) 60%);
  }

  /* お悩み：見出しを画面幅に合わせる */
  .worry__title-main {
    padding: 0 var(--gutter);
    font-size: 30px;
    line-height: 1.4;
    text-align: center;
  }

  .worry__title-sub {
    font-size: 24px;
  }

  /* about：実績バッジ。PCと同じ3個横並びのまま画面幅に合わせて縮める
     （折り返すと1個だけ下に残って不揃いになるため） */
  .about__badges {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
  }

  /* 枠（badge-about.svg）の白い円は 258px の枠に対して直径約200px。
     行ごとにpxで縮めると letter-spacing がPC値のまま残って縮小率がずれるため、
     FVのバッジと同じく --u（PCの1pxにあたる長さ）で全体を等倍縮小する */
  .about__badge {
    --badge-size: min(30vw, 258px);
    --u: calc(var(--badge-size) / 258);
    width: var(--badge-size);
    height: auto;
    aspect-ratio: 258 / 289;
    padding-top: calc(var(--u) * 72);
  }

  .about__badge--toeic .about__badge-line--1 {
    font-size: calc(var(--u) * 24.1026);
    line-height: calc(var(--u) * 45);
    letter-spacing: calc(var(--u) * 2.57094);
  }

  .about__badge--toeic .about__badge-line--2 {
    margin-top: calc(var(--u) * -15);
    font-size: calc(var(--u) * 25.8716);
    line-height: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 2.75963);
  }

  .about__badge--toeic .about__badge-line--3 {
    margin-top: calc(var(--u) * -11);
    font-size: calc(var(--u) * 60.7143);
    line-height: calc(var(--u) * 68);
    letter-spacing: calc(var(--u) * 3.88571);
  }

  .about__badge--toeic .about__badge-line--4 {
    margin-top: calc(var(--u) * -13.9);
    font-size: calc(var(--u) * 34.4681);
    line-height: calc(var(--u) * 64);
    letter-spacing: calc(var(--u) * 3.6766);
  }

  .about__badge--mba .about__badge-line--1 {
    font-size: calc(var(--u) * 25.8716);
    line-height: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 2.75963);
  }

  .about__badge--mba .about__badge-line--2 {
    margin-top: calc(var(--u) * -8);
    font-size: calc(var(--u) * 36.5079);
    line-height: calc(var(--u) * 41);
    letter-spacing: calc(var(--u) * 2.33651);
  }

  .about__badge--mba .about__badge-line--3 {
    margin-top: calc(var(--u) * -29.9);
    font-size: calc(var(--u) * 69.8805);
    line-height: calc(var(--u) * 130);
    letter-spacing: calc(var(--u) * 7.45392);
  }

  .about__badge--guarantee .about__badge-line--1 {
    font-size: calc(var(--u) * 25.8716);
    line-height: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 2.75963);
  }

  .about__badge--guarantee .about__badge-line--2,
  .about__badge--guarantee .about__badge-line--3 {
    font-size: calc(var(--u) * 58);
    line-height: calc(var(--u) * 108);
    letter-spacing: calc(var(--u) * 6.19481);
  }

  .about__badge--guarantee .about__badge-line--2 {
    margin-top: calc(var(--u) * -33);
  }

  .about__badge--guarantee .about__badge-line--3 {
    margin-top: calc(var(--u) * -46.8);
  }


  .about__voice {
    flex-direction: column;
    gap: 24px;
  }

  /* about：縦に長くなるので斜めカットはやめ、下半分だけ紫の背景にする */
  /* 下端は .about__bottom（薄紫）で終わらせる。
     セクション側に padding-bottom を残すと、その分だけ灰色の帯が下にできてしまう */
  .about {
    padding-bottom: 0;
    background: var(--color-bg-gray);
  }

  /* PCはセクション背景側で斜めに切っているが、ここでは .about__bottom 自身が
     薄紫を持つため、上にはみ出す三角形を ::before で足して境界を斜めにする */
  .about__bottom {
    /* PCの斜めカットと同じ傾き（1440pxの幅に対して352px下がる） */
    --about-slant: min(calc(100vw * 352 / 1440), 352px);
    position: relative;
    width: 100%;
    /* PCでは斜めの帯がバッジの行を通り抜けており、余白を押し下げていない。
       margin-top で斜線ぶんを確保すると、その分だけ空きが増えてしまう */
    padding: 16px var(--gutter) 40px;
    background: var(--gradient-about-bg);
  }

  /* PCでは斜めカットがセクションの背景なのでバッジの後ろに来る。
     ここでは ::before が後ろのDOMにあり前面に出てしまうため、バッジ側を上に重ねる */
  .about__top {
    position: relative;
    z-index: 1;
  }

  /* to bottom right + 50%のハードストップで、右上角→左下角の対角線になる
     （PCの斜めカットと同じ作り方・同じ向き） */
  .about__bottom::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--about-slant);
    background: linear-gradient(to bottom right, transparent 50%, var(--color-lavender) 50%);
  }

  /* .about__story は align-self: stretch を持つため、幅を固定すると
     中央寄せが効かずに左端へ寄ってしまう。ここで中央寄せに戻す */
  .about__video,
  .about__story {
    width: min(650px, 100%);
    align-self: center;
  }

  /* お悩み：写真はPCと同じ原寸・同じ位置のまま（左へはみ出すぶんはマスクで消える）。
     幅62%に縮めると高さが595px→304pxになり、大理石の下に何もない灰色の帯ができてしまう */
  .worry__bg-desk {
    background-size: auto 82.9%;
    background-position: right -59.45px bottom 2px;
  }

  .worry__inner {
    align-items: center;
  }

  /* margin-top:80px だと白枠の上端が252pxになり、大理石のV（下端275px）に食い込む。
     PCと同じくVの下端より下から始める。
     1439px以下で付けている margin-left が残ると、中央寄せと足し合わさって
     右へずれるため、ここで打ち消す */
  .worry__list {
    align-self: center;
    margin-top: 127px;
    margin-left: 0;
  }

  /* method：2カードを縦並びに（1・2枚目の構成案） */
  /* 2カードは768pxまで横並びを保つ（左右の対比が一目で分かるため）。
     justify-content: space-between なので、カード幅を (100% - 16px)/2 にすると間隔が16pxになる */
  .method__card {
    width: min(520px, calc((100% - 16px) / 2));
  }

  .method__vs-card {
    width: min(460px, calc((100% - 16px) / 2));
  }


  .method__roles {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 72px固定だと「英語習得の最短ルート」が736px必要で、736px未満の画面からはみ出す */
  .method__title-main {
    flex-wrap: wrap;
    justify-content: center;
    font-size: min(72px, 8.5vw);
  }

  /* 764px固定のままだと、それ以下の画面幅ではみ出す */
  .curriculum__info--wide {
    width: min(764px, 100% - var(--gutter) * 2);
  }

  /* 高さ40px/56px固定＋PCの文字サイズのままだと、狭い画面で2行になって
     枠からあふれ、上下の行が重なる。高さを可変にし文字を画面幅に追従させる */
  .method__a-text,
  .method__a-text + .method__a-text {
    height: auto;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: min(40px, 5.2vw);
    line-height: 1.4;
  }

  .method__a-accent {
    font-size: min(56px, 7.3vw);
  }

  /* キャッシュバック：高さ96px固定＋56pxのままだと1行に収まらず「円」が落ちる */
  .cashback__amount {
    flex-wrap: wrap;
    height: auto;
    font-size: min(56px, 7.4vw);
    text-align: center;
  }

  /* レベル一覧：タブレットは2列（1列だと幅が余る）。1列にするのは599px以下 */
  .method__levels-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 287px));
    justify-content: center;
    width: min(586px, 100% - 32px);
  }

  .method__levels {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* method 下部の帯：ロゴ・文章と写真を縦に */
  .method__band {
    height: auto;
    padding: 56px 0;
  }

  .method__band-inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .method__band-body {
    width: min(567px, 100%);
  }

  .method__band-text {
    white-space: normal;
  }

  /* reason：本文と画像を縦に */
  .reason__body {
    flex-direction: column;
    gap: 32px;
  }

  /* 500px固定だと768px幅で左右に170px以上余るため、本文は画面幅に合わせて広げる。
     写真は元画像が480〜500pxしかなく、それ以上に拡大するとぼけるので広げない */
  .reason__col,
  .reason__points {
    width: min(640px, 100%);
  }

  /* 図版はSVG（ベクター）なので拡大しても劣化しない */
  .reason__img--diagram {
    width: min(640px, 100%);
    height: auto;
  }

  .reason__title {
    gap: 24px;
  }

  /* voice：写真を上、カードを下に（2番目の逆並びも解除） */
  .voice__item,
  .voice__item--reverse {
    flex-direction: column;
    gap: 16px;
  }

  .voice__card {
    width: 100%;
    align-self: auto;
    padding: 24px;
  }

  /* Curriculum：タブを2列に */
  .curriculum__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .curriculum__tab {
    width: 100%;
  }

  .curriculum__tab.is-active::after {
    margin-bottom: -20px;
  }

  .curriculum__wrapper {
    width: 100%;
    padding: 0 var(--gutter);
  }

  .curriculum__panel,
  .curriculum__tabs {
    width: min(1064px, 100%);
  }

  /* 4分割ブロック：狭い列の文字がはみ出すため、比率をならして高さも可変に */
  .curriculum__table {
    width: 100%;
    grid-template-columns: 0.9fr 1.35fr 1.5fr 0.75fr;
    grid-template-rows: auto auto;
    font-size: 13px;
  }

  .curriculum__block {
    height: auto;
    min-height: 96px;
    padding: 10px 4px;
  }

  .curriculum__block,
  .curriculum__note {
    white-space: normal;
  }

  /* 5列は比率のままだと1列が細くなりすぎるので等幅にする */
  .curriculum__table--basic {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* 見出しは画面幅に合わせて縮める */
  .curriculum__title-main {
    font-size: 40px;
  }

  .curriculum__title-en {
    font-size: 44px;
  }

  /* 料金表：はみ出す場合は横スクロール */
  .plan__scroll {
    width: 100%;
    overflow-x: auto;
  }

  .plan__table {
    width: 1064px;
  }

  /* 保証：円を折り返すと枠が極端に縦長になり、装飾枠の縦横比が崩れる。
     3つを1列に保ったまま、枠に収まるサイズへ縮める */
  .guarantee__list {
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
  }

  /* 円が縮むぶん、中の文字もPCの比率（264.48px基準）で縮める。
     --u = PCの1pxにあたる長さ */
  .guarantee__item {
    /* 枠の内側 = 画面幅 - セクション余白48 - 枠の内側余白48。そこから円の間隔32を引いて3等分。
       font-size の calc に % を入れると親のフォントサイズとして解釈されるため vw で書く */
    --circle: min(264.48px, calc((100vw - 128px) / 3));
    --u: calc(var(--circle) / 264.48);
    width: var(--circle);
    height: auto;
    aspect-ratio: 1;
    gap: calc(var(--u) * 16);
  }

  .guarantee__item--multi {
    gap: calc(var(--u) * 8);
  }

  .guarantee__item-lead {
    font-size: calc(var(--u) * 20);
  }

  .guarantee__item-name {
    font-size: calc(var(--u) * 40);
  }

  /* FVの見出しは画面に合わせて縮める */
  .fv__title-white {
    font-size: 44px;
  }

  .fv__title-gold {
    font-size: 52px;
  }

  .plan__type-text {
    white-space: normal;
  }

  /* お問い合わせ：項目名と入力欄を縦に */
  .contact__row {
    flex-direction: column;
    gap: 12px;
  }

  .contact__head {
    width: 100%;
    min-height: 0;
  }

  .contact__field {
    width: 100%;
  }

  .contact__submit-area {
    margin: 64px 0 0;
    width: 100%;
  }
}

/* ---------- 〜899px：FVの人物を出さない ---------- */
/* 人物は右端基準で画面幅の67.7%を占めるため、900px未満になると
   不透明部分がバッジ列（左から512pxまで）に重なり、文字も読みにくくなる */
@media (max-width: 899px) {
  .fv__bg-person,
  .fv__bg-person-shadow {
    display: none;
  }

  /* 人物がいないと、斜めカットで覗く薄紫が意味のない台形に見えるため全幅にする */
  .fv__bg-navy {
    width: 100%;
    clip-path: none;
  }

  .fv {
    min-height: 0;
  }

  .fv__inner {
    padding-bottom: 48px;
  }

  /* 人物がいないぶん右が空くので、文字ブロックを中央に置く */
  .fv__container {
    margin-inline: auto;
  }
}

/* ---------- 800〜1023px：2カード横並び時の文字調整 ---------- */
@media (min-width: 800px) and (max-width: 1023px) {
  /* 横並びのぶんカード幅が狭くなるので、見出しと役割ボックスの文字を詰める */
  .method__card-head-sub {
    font-size: 19px;
  }

  .method__card-head-main {
    font-size: 26px;
  }

  .method__vs-head {
    font-size: 24px;
  }

  .method__roles-item {
    font-size: 18px;
  }

  /* 「言語の中での役割 30%」は必要幅325pxに対し、800px幅ではカード内が320pxしかなく
     5px足りずに折り返し、高さ64px固定の枠から行があふれていた */
  .method__role {
    white-space: nowrap;
    font-size: 22px;
  }

  .method__role-num {
    font-size: 56px;
  }

  .method__role-unit {
    font-size: 28px;
  }
}

/* ---------- 〜799px：2カードを縦並びに（iPad mini 768px はここ） ---------- */
@media (max-width: 799px) {
  .method__compare,
  .method__versus {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .method__card,
  .method__vs-card {
    width: min(520px, 100%);
  }
}

/* ---------- 〜599px：スマホ ---------- */
@media (max-width: 599px) {
  /* ---------- 追従CTA ---------- */
  /* FVを過ぎたら現れ、問い合わせフォームに入ったら引っ込む（切り替えは js/main.js） */
  /* スマホは横幅いっぱいのボタンにする。背景の帯は敷かない
     （オレンジのボタンはこのLPのどの背景色に対してもコントラストが足りるため、
     帯を敷くと下の文字が透けて濁って見えるだけになる） */
  .sticky-cta {
    right: 8px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 8px;
  }

  .sticky-cta .sticky-cta__button {
    width: 100%;
    height: 56px;
    font-size: 17px;
  }

  /* PC幅を前提にした改行位置。スマホでは自然な折り返しとぶつかるため無効にする */
  .about__body br,
  .method__box-lead br,
  .curriculum__lead br,
  .guarantee__text br,
  .contact__lead br {
    display: none;
  }

  /* FV */
  .fv {
    min-height: 0;
  }

  /* 人物写真は横長の構図が前提で、スマホ幅だと頭部しか入らず意図が伝わらないため出さない */
  .fv__bg-person,
  .fv__bg-person-shadow {
    display: none;
  }

  /* 斜線カットもPCの横長構図で効く装飾。スマホでは右側に明るい部分ができて
     白文字が読めなくなるため、紺を全幅にして校舎背景だけにする */
  .fv__bg-navy {
    width: 100%;
    clip-path: none;
  }

  .fv__inner {
    padding-bottom: 48px;
  }

  .fv__logo img {
    width: 150px;
    height: 44px;
  }

  .fv__container {
    gap: 24px;
    margin-top: 16px;
  }

  .fv__text {
    gap: 16px;
  }

  .fv__deco {
    width: min(260px, 70%);
    height: auto;
  }

  .fv__title {
    line-height: 1.3;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
  }

  .fv__title-white {
    font-size: 30px;
  }

  .fv__title-gold {
    font-size: 36px;
  }

  .fv__title-white--end {
    margin-left: 4px;
  }

  /* 1行が画面幅ぎりぎりになるため少し縮め、折り返し位置は balance で均等に割る
     （2文字だけが次の行に残るのを防ぐ） */
  .fv__sub {
    font-size: 13px;
    line-height: 1.6;
    text-wrap: balance;
  }

  .fv__badges {
    gap: 0;
  }

  /* 月桂樹の枠（badge.svg）の白い円は 177px の枠に対して直径117px しかないため、
     文字だけを縮めると円からはみ出す。PCの比率をそのまま縮小する。
     --u = PCの1pxにあたる長さ。中の指定はすべて「PCの値 × --u」で書く */
  .fv__badge {
    --badge-size: min(30vw, 177px);
    --u: calc(var(--badge-size) / 177);
    width: var(--badge-size);
    height: auto;
    aspect-ratio: 177 / 183;
    padding-bottom: calc(var(--u) * 10);
  }

  .fv__badge-label {
    font-size: calc(var(--u) * 12);
    line-height: calc(var(--u) * 11);
  }

  .fv__badge-value {
    margin-top: calc(var(--u) * 10);
  }

  .fv__badge-value--students {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 29.3517);
  }

  .fv__badge-value--hours {
    font-size: calc(var(--u) * 34.2657);
    line-height: calc(var(--u) * 23);
  }

  .fv__badge-value--period {
    font-size: calc(var(--u) * 17.229);
    line-height: calc(var(--u) * 26);
  }

  .fv__badge-note {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 10);
    line-height: calc(var(--u) * 11);
  }

  .fv__badge-note--students {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 9);
  }

  .fv__lead {
    font-size: 15px;
    letter-spacing: 0.03em;
    text-wrap: balance;
  }

  .btn-cta {
    width: min(100%, 420px);
    height: 64px;
    font-size: 18px;
  }

  /* キャッシュバック */
  .cashback {
    gap: 12px;
    padding: 24px var(--gutter);
  }

  .cashback__lead {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    text-align: center;
  }

  /* 折り返してもフレックスアイテム内の行は左揃えのままなので、中央揃えを明示する。
     あわせて、狭い端末（Galaxy Z Fold 折りたたみ時 344px 等）でも
     1行に収まるよう画面幅に追従させる */
  .cashback__amount {
    flex-wrap: wrap;
    height: auto;
    font-size: min(26px, 7.2vw);
    text-align: center;
  }

  .cashback__amount-num {
    font-size: 1.35em;
  }

  .cashback__mark {
    margin-top: 6px;
    font-size: 10px;
  }

  .cashback__title {
    font-size: 26px;
  }

  .cashback__note {
    width: 100%;
    padding: 0;
    justify-content: center;
    font-size: 10px;
    text-align: center;
  }

  /* about */
  .about {
    gap: 32px;
    padding: 40px 0 0;
  }

  .about__top {
    gap: 24px;
  }

  .about__title {
    height: auto;
    padding: 20px 16px;
    font-size: 26px;
    line-height: 1.4;
  }

  .about__lead {
    gap: 8px;
    width: 100%;
    padding: 0 var(--gutter);
  }

  .about__ribbon {
    --ribbon-slant: 8px;
    width: 100% !important;
    height: auto;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
  }

  .about__body {
    padding: 0 var(--gutter);
    font-size: 15px;
    white-space: normal;
  }

  .about__marker {
    display: inline;
    width: auto;
    height: auto;
    padding: 0 2px;
    background: linear-gradient(transparent 60%, var(--color-marker) 60%);
  }

  .about__bottom {
    gap: 20px;
  }

  .about__subtitle {
    font-size: 20px;
  }

  .about__result {
    font-size: 30px;
  }

  .about__story-text {
    height: auto;
    font-size: 15px;
    line-height: 1.7;
  }

  /* 22pxだと「HEC経営大学院（パ／リ）への留学決定！」と括弧の途中で割れるため、
     1行に収まる20pxにする */
  .about__story-main {
    font-size: 20px;
    line-height: 1.6;
  }

  /* お悩み */
  .worry {
    height: auto;
    padding-bottom: 40px;
  }

  /* 幅62%だと写真の高さが足りず、大理石の帯の下に灰色の帯が残る。
     高さ基準にして、帯の下端（Vの両端は126px・中央は190px）より上まで届かせる */
  .worry__bg-desk {
    background-size: auto 78%;
    background-position: right -4.13% bottom 0;
  }

  .worry__bg-desk-fade {
    width: 9.86%;
    right: 48%;
  }

  .worry__inner {
    padding-top: 32px;
  }

  .worry__title-sub {
    font-size: 18px;
  }

  .worry__title-main {
    font-size: 21px;
    line-height: 1.4;
    text-align: center;
  }

  .worry__bubble {
    width: min(220px, 80%);
  }

  .worry__bubble::before {
    width: 45%;
  }

  .worry__bubble::after {
    width: calc(55% - var(--bubble-tail));
  }

  .worry__title-main {
    padding: 0 var(--gutter);
  }

  /* 大理石の帯。PCはセクション719pxに対し275px（38%）。
     スマホはセクションが444〜490pxしかなく、275pxのままだと62%を占めて
     白枠に重なるため、同じ比率になるよう縮める */
  .worry__bg-wall {
    height: 190px;
  }

  /* 帯（下端190px）より下から始める。見出しが2行になる幅では見出し下端151px、
     1行の幅では121pxになるため、狭いほうに合わせて余裕をとる */
  .worry__list {
    margin-top: 96px;
    padding: 20px 16px;
  }

  .worry__item {
    gap: 12px;
  }

  .worry__check {
    width: 26px;
    height: 26px;
  }

  .worry__text {
    font-size: 15px;
    line-height: 1.4;
  }

  /* method */
  .method__top {
    --cut: 24px;
    height: auto;
    padding: 32px var(--gutter) 56px;
  }

  .method__title {
    gap: 8px;
  }

  .method__title-sub {
    font-size: 15px;
    line-height: 1.5;
  }

  .method__title-main {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 30px;
  }

  .method__center {
    gap: 24px;
    padding: 40px 0;
  }

  .method__q-text {
    font-size: 18px;
    line-height: 1.5;
  }

  .method__q-line {
    height: 24px;
    background-position: left 0 top 5px;
  }

  .method__triangle--q {
    width: 24px;
    height: 24px;
    margin-left: calc(50% - 12px + 14px);
  }

  .method__intro {
    gap: 24px;
  }

  .method__a-text,
  .method__a-text + .method__a-text {
    height: auto;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 20px;
    line-height: 1.5;
  }

  .method__a-accent {
    font-size: 26px;
  }

  .method__card {
    gap: 16px;
    padding: 16px;
  }

  .method__card-head {
    padding: 16px 8px;
  }

  .method__card-head-sub {
    font-size: 16px;
  }

  .method__card-head-main {
    font-size: 20px;
    line-height: 1.4;
  }

  .method__card-img {
    width: min(230px, 70%);
    height: auto;
  }

  .method__role {
    height: auto;
    font-size: 16px;
  }

  .method__role-num {
    font-size: 44px;
  }

  .method__role-unit {
    font-size: 22px;
  }

  .method__card-text {
    font-size: 16px;
  }

  .method__roles {
    gap: 6px;
  }

  .method__roles-item {
    padding: 10px 4px;
    font-size: 14px;
    line-height: 1.5;
  }

  .method__summary-main {
    font-size: 22px;
    line-height: 1.4;
  }

  .method__summary-sub {
    font-size: 15px;
    line-height: 1.5;
  }

  .method__box {
    gap: 24px;
    padding-bottom: 24px;
  }

  .method__box-head {
    gap: 8px;
    padding: 24px 16px;
  }

  .method__box-en {
    font-size: 36px;
  }

  .method__box-lead {
    font-size: 16px;
  }

  .method__box-name {
    font-size: 26px;
  }

  .method__reed {
    gap: 8px;
    padding: 0 var(--gutter);
  }

  .method__reed-text {
    font-size: 15px;
  }

  .method__ribbon {
    --ribbon-slant: 8px;
    height: auto;
    padding: 10px 16px;
    font-size: 18px;
    text-align: center;
  }

  .method__versus {
    gap: 24px;
    padding: 0 var(--gutter);
  }

  .method__vs-card {
    gap: 16px;
    padding-bottom: 20px;
  }

  .method__vs-head {
    padding: 16px 8px;
    font-size: 22px;
  }

  .method__vs-lead,
  .method__vs-result {
    font-size: 17px;
    line-height: 1.4;
    padding: 0 12px;
  }

  .method__vs-img {
    width: min(300px, 86%);
    height: auto;
  }

  .method__vs-note {
    width: min(360px, calc(100% - 24px));
  }

  .method__vs-note-title {
    font-size: 18px;
  }

  .method__vs-note-text {
    font-size: 14px;
  }

  .method__levels {
    gap: 12px;
    padding: 16px 12px;
  }

  .method__levels-title {
    padding-bottom: 12px;
    font-size: 19px;
    line-height: 1.4;
  }

  .method__levels-text {
    font-size: 13px;
  }

  .method__levels-item {
    height: 44px;
    font-size: 15px;
  }

  .method__arrow {
    width: 44px;
    height: 58px;
  }

  .method__conclusion {
    padding: 20px 16px;
    font-size: 17px;
  }

  .method__bottom {
    padding-top: 40px;
  }

  .method__band {
    padding: 40px 0;
  }

  .method__band-logo {
    width: 190px;
    height: 56px;
  }

  .method__band-brand {
    gap: 8px;
    font-size: 20px;
  }

  .method__band-text {
    font-size: 22px;
  }

  .method__band-accent {
    font-size: 26px;
  }

  .method__band-photo {
    width: 100%;
    height: auto;
  }

  .method__cta {
    gap: 16px;
    padding: 40px var(--gutter);
  }

  .method__cta-text {
    font-size: 21px;
    line-height: 1.4;
  }

  /* reason */
  .reason {
    gap: 72px;
    padding-bottom: 36px;
  }

  .reason__title {
    gap: 12px;
    padding: 24px 0;
  }

  .reason__laurel {
    width: 34px;
    height: 84px;
  }

  .reason__title-text {
    width: auto;
    gap: 4px;
  }

  .reason__title-sub {
    font-size: 17px;
  }

  .reason__title-main {
    font-size: 44px;
  }

  .reason__list {
    gap: 64px;
  }

  .reason__item {
    gap: 16px;
    padding: 32px 16px;
  }

  .reason__num {
    margin: -76px 0 -16px;
    font-size: 64px;
  }

  .reason__item-title {
    font-size: 19px;
    line-height: 1.5;
  }

  .reason__text {
    font-size: 15px;
    line-height: 1.8;
  }

  .reason__points {
    font-size: 15px;
    line-height: 1.8;
  }

  /* .reason__item 側で既に左右パディングを取っているため、
     1439px以下の共通指定（100% - gutter*2）だと32px余計に狭くなる */
  .reason__body {
    width: 100%;
    gap: 20px;
  }

  /* 横並びのままだと文字側が92pxしか取れず、氏名まで折り返すため縦積みにする */
  .reason__profile {
    flex-direction: column;
    gap: 12px;
    padding: 16px 12px;
  }

  .reason__profile-photo {
    width: min(220px, 70%);
    height: auto;
    aspect-ratio: 162 / 112;
  }

  .reason__profile-text {
    gap: 6px;
    width: auto;
    text-align: center;
  }

  .reason__profile-career {
    white-space: normal;
    font-size: 14px;
  }

  /* voice */
  .voice {
    gap: 32px;
    padding: 36px var(--gutter);
  }

  .voice__title {
    gap: 16px;
  }

  .voice__title-sub {
    gap: 12px;
    font-size: 17px;
  }

  .voice__title-sub::before,
  .voice__title-sub::after {
    width: 32px;
  }

  .voice__title-main {
    --ribbon-slant: 10px;
    width: 100%;
    height: auto;
    padding: 12px 20px;
    font-size: 24px;
  }

  .voice__list {
    gap: 32px;
  }

  .voice__card {
    padding: 20px;
  }

  .voice__card-title {
    font-size: 20px;
    line-height: 1.4;
  }

  .voice__card-text {
    font-size: 14px;
  }

  /* Curriculum */
  .curriculum {
    gap: 32px;
    padding: 36px 0;
  }

  .curriculum__title-en {
    font-size: 36px;
  }

  .curriculum__title-main {
    font-size: 26px;
    line-height: 1.4;
  }

  .curriculum__lead {
    margin-top: -8px;
    padding: 0 var(--gutter);
    font-size: 15px;
  }

  .curriculum__tabs {
    gap: 6px;
  }

  .curriculum__tab {
    height: auto;
    padding: 10px 4px;
  }

  .curriculum__tab-plan {
    font-size: 14px;
  }

  .curriculum__tab-term {
    font-size: 20px;
  }

  .curriculum__panel {
    gap: 20px;
    padding: 24px 12px;
  }

  .curriculum__panel-title {
    width: 100%;
    padding: 12px 8px;
    font-size: 18px;
    line-height: 1.4;
  }

  .curriculum__info,
  .curriculum__info--wide {
    width: 100%;
  }

  .curriculum__info-label {
    font-size: 18px;
  }

  .curriculum__info-text {
    font-size: 13px;
    line-height: 1.6;
  }

  /* カリキュラム表も4列を画面幅に詰めると小さくなるため横スクロールにする */
  .curriculum__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .curriculum__table {
    width: 560px;
    font-size: 13px;
  }

  /* 5列ぶん必要なので少し広く取る（560pxだと「Grammar Table」が2行に折れる） */
  .curriculum__table--basic {
    width: 640px;
  }

  .curriculum__block {
    min-height: 84px;
    padding: 8px 2px;
  }

  .curriculum__note {
    padding-top: 6px;
  }

  .curriculum__note--advanced {
    padding-top: 6px;
  }

  /* 料金プラン */
  .plan {
    gap: 40px;
    padding: 36px 0;
  }

  .plan__title-sub {
    font-size: 15px;
  }

  .plan__title-main {
    font-size: 30px;
  }

  .plan__types {
    gap: 12px;
  }

  /* PCは「ラベル｜説明」の横並び。スマホで縦積みにすると
     140px幅のラベルだけが左に取り残されて見えるため、ラベルを全幅の帯にする */
  .plan__type {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .plan__type-label {
    width: 100%;
    padding: 8px 0;
    font-size: 15px;
  }

  .plan__type-text {
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
  }

  .plan__block {
    width: 100%;
    gap: 20px;
  }

  /* 料金表：画面幅に詰め込むと11pxまで小さくなるため、横スクロールで見せる */
  .plan__scroll {
    width: 100%;
    padding: 0 var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plan__table {
    width: 560px;
    font-size: 14px;
    line-height: 1.4;
  }

  .plan__table th,
  .plan__table td {
    height: 52px;
    padding: 6px 4px;
  }

  .plan__table tbody tr + tr > * {
    height: 48px;
  }

  .plan__col-head {
    width: 110px;
  }

  .plan__col-1,
  .plan__col-2,
  .plan__col-3,
  .plan__table--private .plan__col-head,
  .plan__table--private .plan__col-1,
  .plan__table--private .plan__col-2 {
    width: auto;
  }

  .plan__table--private thead th,
  .plan__table--private thead td {
    height: 56px;
  }

  .plan__head-small {
    margin-bottom: 2px;
    font-size: 9px;
  }

  .plan__subtitle {
    font-size: 22px;
  }

  .plan__notes {
    gap: 12px;
    padding: 0 var(--gutter);
  }

  .plan__note {
    font-size: 15px;
    line-height: 1.5;
  }

  .plan__note--small {
    font-size: 12px;
  }

  /* 保証 */
  .guarantee {
    padding: 40px var(--gutter);
  }

  /* 装飾枠のSVGは縦長に引き伸ばすと崩れるので、金の二重線に置き換える */
  .guarantee__frame {
    gap: 20px;
    padding: 32px 16px;
    background: var(--color-white);
    border: 2px solid var(--color-gold-light);
    outline: 1px solid var(--color-gold-light);
    outline-offset: 4px;
  }

  .guarantee__title {
    font-size: 26px;
  }

  .guarantee__text {
    font-size: 13px;
    line-height: 1.8;
  }

  .guarantee__list {
    flex-direction: column;
    gap: 8px;
  }

  .guarantee__item {
    width: min(154px, 52vw);
    height: auto;
    aspect-ratio: 1;
  }

  .guarantee__item-lead {
    font-size: 12px;
  }

  .guarantee__item-name {
    font-size: 23px;
  }

  /* FAQ */
  .faq {
    gap: 32px;
    padding-bottom: 36px;
  }

  .faq__title {
    gap: 8px;
    padding: 24px var(--gutter);
  }

  .faq__title-en {
    font-size: 36px;
  }

  .faq__title-main {
    font-size: 26px;
  }

  .faq__list {
    gap: 16px;
  }

  .faq__button {
    height: auto;
    gap: 12px;
    padding: 12px 16px;
  }

  .faq__q {
    width: 16px;
    font-size: 20px;
  }

  .faq__question-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .faq__answer-inner {
    width: 100%;
    gap: 12px;
    padding: 16px 16px 0;
  }

  .faq__a {
    font-size: 20px;
  }

  .faq__answer-text {
    font-size: 14px;
  }

  /* お問い合わせ */
  .contact {
    gap: 24px;
    padding: 36px var(--gutter);
  }

  /* 「無料カウンセリングはこちらから」が2行に割れて
     「カウンセリン／グ」と途中で切れるため、1行に収まるサイズにする */
  .contact__title {
    font-size: 22px;
    line-height: 1.4;
  }

  .contact__box {
    width: 100%;
    min-height: 0;
    padding: 24px 16px 32px;
  }

  .contact__lead {
    font-size: 13px;
    line-height: 1.8;
  }

  .contact__form {
    width: 100%;
    margin-top: 24px;
  }

  .contact__row {
    padding: 16px 0;
  }

  .contact__head {
    gap: 8px;
  }

  .contact__head--name .contact__label,
  .contact__label {
    width: auto;
    font-size: 15px;
  }

  .contact__head-note {
    margin-left: 0;
    font-size: 10px;
    line-height: 1.5;
  }

  .contact__badge--vertical {
    width: 43px;
    height: 23px;
    writing-mode: horizontal-tb;
  }

  .contact__name {
    flex-direction: column;
    gap: 8px;
  }

  .contact__recaptcha {
    transform: scale(0.85);
    transform-origin: center top;
  }

  .contact__row--message {
    padding: 16px 0;
  }

  .contact__textarea {
    margin-top: 12px;
    height: 120px;
  }

  .contact__consent {
    font-size: 12px;
  }

  .contact__caution {
    margin-top: 16px;
    font-size: 12px;
  }

  .contact__submit-area {
    margin-top: 32px;
  }

  .contact__submit {
    height: 56px;
    font-size: 15px;
  }

  .contact__submit-note {
    font-size: 11px;
  }

  /* footer */
  .footer__copyright {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-align: center;
  }
}