@charset "UTF-8";
/* =========================================================
   Shin先生のつまずかない英会話 LP  (static, build-free)
   - Figma: LP / 英会話 (node 807:1842, desktop 1920w)
   - サイズは 1128.8px 幅（container 1280 + section padding 24×2）で
     Figma 実寸の 85% になるよう clamp() で流動化している
     （Figma 指定は Web 基準では大きすぎるため 2026-09-18 に文字・余白・幅・角丸など
       px 指定を一律 85% に調整。clamp() のモバイル下限と @media 内の値は据え置き）
   ========================================================= */

/* ---- design tokens ---- */
:root {
  --shin-speaking-primary: #2e7d5f;
  --shin-speaking-container: #eaf2ef;
  --shin-speaking-surface: #ffffff;
  --shin-speaking-on-surface: #424242;
  --shin-speaking-on-primary: #ffffff;
  --shin-speaking-accent: #e8688a;
  --shin-speaking-accent-dark: #ae1b42;
  --shin-speaking-yellow: #ffe45c;
  --shin-speaking-yellow-pale: #fff9dc;   /* カプセル（こんな声・二人三脚）の下地。白だとボタンに見えるため */

  /* stat cards */
  --shin-speaking-stat-a-bg: #edd5de;
  --shin-speaking-stat-a-fg: #b3426c;
  --shin-speaking-stat-b-bg: #e1f2d7;
  --shin-speaking-stat-b-fg: #48732f;
  --shin-speaking-stat-c-bg: #dee8ff;
  --shin-speaking-stat-c-fg: #325ec2;

  /* fluid type — max = Figma実寸 × 0.85 */
  --shin-speaking-fs-hero:      139.4px;  /* ヒーローのキャッチはブレイクポイントごとの固定値 */
  --shin-speaking-fs-hero-sub:  47.6px;
  --shin-speaking-fs-title:     clamp(24px, 3.07vw, 40.8px);
  --shin-speaking-fs-catch:     clamp(20px, 2.56vw, 34px);
  --shin-speaking-fs-h3:        clamp(18px, 2.05vw, 27.2px);
  --shin-speaking-fs-lead:      clamp(15px, 1.54vw, 20.4px);
  --shin-speaking-fs-desc:      clamp(14px, 1.47vw, 19.6px);
  --shin-speaking-fs-body:      clamp(14px, 1.28vw, 17px);
  --shin-speaking-fs-stat:      clamp(26px, 2.81vw, 37.4px);
  --shin-speaking-fs-stat-unit: clamp(17px, 1.79vw, 23.8px);
  --shin-speaking-fs-price:     clamp(44px, 5.12vw, 68px);
  --shin-speaking-fs-plan:      clamp(22px, 2.56vw, 34px);
  --shin-speaking-fs-name:      clamp(36px, 4.1vw, 54.4px);

  /* fluid spacing */
  --shin-speaking-sec-y:  clamp(56px, 6.15vw, 81.6px);
  --shin-speaking-gap:    clamp(28px, 4.1vw, 54.4px);
  --shin-speaking-pad:    clamp(20px, 2.56vw, 34px);

  --shin-speaking-header: 54.4px;
}

/* ---- reset / base ---- */
.shin-speaking *,
.shin-speaking *::before,
.shin-speaking *::after { box-sizing: border-box; }

.shin-speaking {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--shin-speaking-on-surface);
  line-height: 1.75;
  background: var(--shin-speaking-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.shin-speaking img { max-width: 100%; }
.shin-speaking a { color: inherit; text-decoration: none; }
.shin-speaking p { margin: 0; }
.shin-speaking h1, .shin-speaking h2, .shin-speaking h3 { margin: 0; }
.shin-speaking em { font-style: normal; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 24;
}

/* =========================================================
   共通パーツ
   ========================================================= */
/* カプセルは短い固定文言なので HTML の <br> で 2 行に固定（自動折返しに任せない） */

.shin-speaking-section {
  padding: var(--shin-speaking-sec-y) 20.4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shin-speaking-section--surface   { background: var(--shin-speaking-surface); }
.shin-speaking-section--primary   { background: var(--shin-speaking-primary); }
.shin-speaking-section--container { background: var(--shin-speaking-container); }
.shin-speaking-section--apply     { padding-bottom: clamp(64px, 7.17vw, 95.2px); }

.shin-speaking-container {
  width: 100%;
  max-width: 1088px;
  padding: 0 13.6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--shin-speaking-gap);
}

.shin-speaking-title {
  width: 100%;
  font-weight: 700;
  font-size: var(--shin-speaking-fs-title);
  line-height: 1.25;
  text-align: center;
  color: var(--shin-speaking-on-surface);
}
.shin-speaking-title--light { color: var(--shin-speaking-on-primary); }

.shin-speaking-lead {
  width: 100%;
  font-weight: 700;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.75;
  text-align: center;
}

.shin-speaking-body {
  width: 100%;
  font-size: var(--shin-speaking-fs-body);
  line-height: 1.75;
  text-align: center;
}

.shin-speaking-emph {
  width: 100%;
  font-weight: 600;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  text-align: center;
  color: var(--shin-speaking-primary);
}

/* 補足ボックス（container 背景） */
.shin-speaking-note {
  width: 100%;
  background: var(--shin-speaking-container);
  border-radius: 13.6px;
  padding: var(--shin-speaking-pad) clamp(16px, 2.05vw, 27.2px);
  font-weight: 600;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
}

/* 白地に primary 枠の角丸ピル（吹き出し風） */
.shin-speaking-pills {
  width: 100%;
  display: flex;
  gap: clamp(12px, 1.54vw, 20.4px);
  align-items: stretch;
}
.shin-speaking-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--shin-speaking-yellow-pale);
  border: clamp(2px, 0.26vw, 3.4px) solid var(--shin-speaking-primary);
  border-radius: 190.4px;
  padding: clamp(14px, 1.54vw, 20.4px) clamp(12px, 2.56vw, 34px);
  font-weight: 700;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
}

/* CTA ボタン（下端に濃い縁の立体表現） */
.shin-speaking .shin-speaking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.1px;
  padding: 13.6px clamp(32px, 5.12vw, 68px);
  border-radius: 74.8px;
  /* 下端の濃い縁は border ではなく box-shadow で描く。
     border だと hover で幅を変えた際にボタンの高さが変わり、縦中央揃えの
     ヒーロー全体が動いてしまう。box-shadow はレイアウトに影響しない */
  --shin-speaking-btn-edge: clamp(6px, 0.83vw, 11px);
  margin-bottom: var(--shin-speaking-btn-edge);
  box-shadow: 0 var(--shin-speaking-btn-edge) 0 var(--shin-speaking-accent-dark);
  background: var(--shin-speaking-accent);
  color: var(--shin-speaking-on-primary);
  font-weight: 600;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* 押し込み: ボタンを 3px 下げ、縁を同じだけ薄くして下端の位置は固定 */
.shin-speaking .shin-speaking-btn:hover {
  transform: translateY(3px);
  box-shadow: 0 calc(var(--shin-speaking-btn-edge) - 3px) 0 var(--shin-speaking-accent-dark);
}

/* 斜線の飾り（＼ 見出し ／） */
.shin-speaking-deco {
  position: relative;
  flex: 0 0 auto;
  width: clamp(11px, 1.35vw, 17.8px);
  height: clamp(20px, 2.49vw, 33.1px);
}
.shin-speaking-deco::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(23px, 2.83vw, 37.4px);
  height: 3px;
  border-radius: 2px;
  background: var(--shin-speaking-primary);
  transform: translate(-50%, -50%) rotate(61.56deg);
}
.shin-speaking-deco--r::before { transform: translate(-50%, -50%) rotate(-61.56deg); }

/* × 区切り */
.shin-speaking-times {
  position: relative;
  flex: 0 0 auto;
  width: clamp(12px, 1.47vw, 19.6px);
  height: clamp(12px, 1.47vw, 19.6px);
}
.shin-speaking-times::before,
.shin-speaking-times::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #9e9e9e;
}
.shin-speaking-times::before { transform: translateX(-50%) rotate(45deg); }
.shin-speaking-times::after  { transform: translateX(-50%) rotate(-45deg); }

/* =========================================================
   header
   ========================================================= */
.shin-speaking-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--shin-speaking-header);
  background: var(--shin-speaking-primary);
  filter: drop-shadow(0 1px 3.4px rgba(0, 0, 0, .12));
}

.shin-speaking-header__inner {
  max-width: 1088px;
  height: 100%;
  margin: 0 auto;
  padding: 0 13.6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13.6px;
}

.shin-speaking-header__logo img { display: block; width: 149.6px; height: auto; }

.shin-speaking-header__burger { display: none; }

.shin-speaking-header__nav {
  display: flex;
  align-items: center;
  gap: 6.8px;
}

.shin-speaking-header__nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11.9px;
  height: var(--shin-speaking-header);
  color: var(--shin-speaking-on-primary);
  font-weight: 600;
  font-size: 15px;
  line-height: 27px;
  white-space: nowrap;
  transition: opacity .2s;
  cursor: pointer;
}
.shin-speaking-header__nav > a:hover { opacity: .75; }

.shin-speaking-header__cta {
  gap: 5.1px;
  height: 34px !important;
  margin-left: 6.8px;
  padding: 0 11.9px !important;
  border-radius: 74.8px;
  background: var(--shin-speaking-accent);
}
.shin-speaking-header__cta .material-symbols-outlined { font-size: 17px; }

/* =========================================================
   hero
   ========================================================= */
.shin-speaking-hero {
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: calc(100vh - var(--shin-speaking-header));
  display: flex;
  align-items: center;
}

.shin-speaking-hero__photo {
  position: absolute;
  inset: 0;
  background: url(../images/lp_shin_speaking/hero-photo.webp) 52% 28% / cover no-repeat;
  opacity: .75;
}

.shin-speaking-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1088px;
  margin: 0 auto;
  padding: 40.8px 13.6px;
}

.shin-speaking-hero__stage {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 13.6px;
}

.shin-speaking-hero__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shin-speaking-hero__row {
  width: 100%;
  display: flex;
  align-items: center;
  /* バッジとサブコピーの間隔は画面幅によらず一定にする
     （サブコピーを残り幅いっぱいの箱で中央揃えにすると、文字だけ縮んで隙間が広がるため） */
  gap: 8px;
}

/* 白い丸ピル（Shin先生の顔写真 + テキスト）＋ 吹き出しの尻尾 */
.shin-speaking-hero__badge {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.02vw, 13.6px);
  background: var(--shin-speaking-surface);
  border-radius: 95.2px;
  padding: 6.8px clamp(20px, 2.56vw, 34px) 6.8px 6.8px;
}
.shin-speaking-hero__badge::after {
  /* Figma: ピル右端の下に、右下へ向く直角三角形の尻尾（上側はピル内に重なって見えない） */
  content: "";
  position: absolute;
  right: clamp(8px, 1.2vw, 16px);
  bottom: clamp(-18px, -1.53vw, -11px);
  width: clamp(20px, 2.3vw, 30.6px);
  height: clamp(20px, 2.3vw, 30.6px);
  background: var(--shin-speaking-surface);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.shin-speaking-hero__avatar {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: clamp(40px, 4.73vw, 62.9px);
  height: clamp(40px, 4.73vw, 62.9px);
}
.shin-speaking-hero__avatar img {
  position: absolute;
  left: -20.74%;
  top: -7.5%;
  width: 160%;
  max-width: none;
  height: auto;
}
.shin-speaking-hero__badge-text {
  font-weight: 700;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
  white-space: nowrap;
}

.shin-speaking-hero__sub {
  flex: 0 0 auto;
  text-align: left;
  font-weight: 800;
  font-size: min(var(--shin-speaking-fs-hero-sub), 9.2vw);
  line-height: 1.5;
  color: var(--shin-speaking-yellow);
  text-shadow: 0 3.4px 5.1px rgba(0, 0, 0, .45);
  white-space: nowrap;
}

.shin-speaking-hero__title {
  width: 100%;
  text-align: center;
  font-weight: 800;
  /* 固定 139.4px。ブレイクポイントでは変えず、狭い画面でだけ収まる幅まで縮める */
  font-size: min(var(--shin-speaking-fs-hero), 22.5vw);
  line-height: 1.5;
  color: var(--shin-speaking-on-primary);
  text-shadow: 0 6.8px 8.5px rgba(0, 0, 0, .45);
}

/* 半透明白パネル */
.shin-speaking-hero__panel {
  background: rgba(255, 255, 255, .85);
  border-radius: 13.6px;
  padding: var(--shin-speaking-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.56vw, 34px);
}

.shin-speaking-hero__catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.02vw, 13.6px);
  font-weight: 800;
  font-size: var(--shin-speaking-fs-catch);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
  text-align: center;
}

.shin-speaking-hero__lead {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.5;
}
.shin-speaking-hero__lead em { color: var(--shin-speaking-primary); }

/* =========================================================
   概要
   ========================================================= */
.shin-speaking-about__bubble {
  position: relative;
  width: 100%;
  background: var(--shin-speaking-primary);
  border-radius: 88.4px;
  padding: clamp(20px, 2.05vw, 27.2px);
  text-align: center;
}
.shin-speaking-about__bubble p {
  font-weight: 600;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  color: var(--shin-speaking-on-primary);
}
.shin-speaking-about__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  /* bottom で三角の高さと同じ距離だけ下げる方式は、ボーダー幅がブラウザで整数に
     丸められると隙間になる。吹き出し下端に直接つなぎ、1px 重ねてヘアラインも防ぐ */
  top: calc(100% - 1px);
  transform: translateX(-50%);
  border-left: clamp(10px, 1.1vw, 14.4px) solid transparent;
  border-right: clamp(10px, 1.1vw, 14.4px) solid transparent;
  border-top: clamp(14px, 1.53vw, 20.4px) solid var(--shin-speaking-primary);
}

.shin-speaking-about__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}

.shin-speaking-about__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.05vw, 27.2px);
}

.shin-speaking-stat {
  flex: 0 0 auto;
  width: clamp(84px, 14.08vw, 187px);
  /* 正方形固定はやめ、内容 + 余白で高さを決める（PC では Figma と同じ約 187px 高になる余白値） */
  padding: clamp(14px, 2.44vw, 32.3px) 8px;
  border-radius: 13.6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.56vw, 20.8px);
  text-align: center;
}
.shin-speaking-stat--a { background: var(--shin-speaking-stat-a-bg); }
.shin-speaking-stat--b { background: var(--shin-speaking-stat-b-bg); }
.shin-speaking-stat--c { background: var(--shin-speaking-stat-c-bg); }

.shin-speaking-stat__num {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.shin-speaking-stat__num b { font-weight: 600; font-size: var(--shin-speaking-fs-stat); }
.shin-speaking-stat__num i { font-style: normal; font-size: var(--shin-speaking-fs-stat-unit); }
.shin-speaking-stat--a .shin-speaking-stat__num { color: var(--shin-speaking-stat-a-fg); }
.shin-speaking-stat--b .shin-speaking-stat__num { color: var(--shin-speaking-stat-b-fg); }
.shin-speaking-stat--c .shin-speaking-stat__num { color: var(--shin-speaking-stat-c-fg); }

.shin-speaking-stat__label {
  font-weight: 600;
  font-size: clamp(11px, 1.54vw, 20.4px);
  line-height: 1.5;
  white-space: nowrap;
}

.shin-speaking-about__caption {
  font-size: var(--shin-speaking-fs-body);
  line-height: 1.5;
  text-align: center;
}

/* =========================================================
   先生プロフィール
   ========================================================= */
.shin-speaking-teacher {
  width: 100%;
  background: var(--shin-speaking-surface);
  border-radius: 20.4px;
  padding: var(--shin-speaking-pad);
  display: flex;
  align-items: flex-start;
  gap: var(--shin-speaking-pad);
}

.shin-speaking-teacher__profile {
  flex: 0 0 auto;
  width: clamp(160px, 19.2vw, 255px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.8px;
}
.shin-speaking-teacher__photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
}
.shin-speaking-teacher__photo img {
  position: absolute;
  left: -20.74%;
  top: -7.5%;
  width: 160%;
  max-width: none;
  height: auto;
}
.shin-speaking-teacher__name {
  font-weight: 600;
  font-size: var(--shin-speaking-fs-name);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
  margin-bottom: -6.8px;
}
.shin-speaking-teacher__exp {
  font-size: clamp(13px, 1.16vw, 15.3px);
  line-height: 1.5;
}

.shin-speaking-teacher__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.54vw, 20.4px);
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.75;
  color: #3c3c3c;
}

/* =========================================================
   プログラム内容
   ========================================================= */
.shin-speaking-program {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.54vw, 20.4px);
}

.shin-speaking-prog {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.05vw, 27.2px);
  background: var(--shin-speaking-container);
  border-radius: 13.6px;
  padding: 13.6px clamp(16px, 2.05vw, 27.2px);
}

.shin-speaking-prog__icon {
  flex: 0 0 auto;
  font-size: clamp(32px, 4.1vw, 54.4px);
  color: var(--shin-speaking-primary);
}

.shin-speaking-prog__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6.8px;
}
.shin-speaking-prog__text h3 {
  font-weight: 600;
  font-size: var(--shin-speaking-fs-h3);
  line-height: 1.5;
  color: var(--shin-speaking-primary);
}
.shin-speaking-prog__text p {
  font-size: var(--shin-speaking-fs-desc);
  line-height: 1.75;
}

.shin-speaking-prog__shot {
  flex: 0 0 auto;
  width: clamp(240px, 30.72vw, 408px);
  padding: 6.8px;
  border-radius: 13.6px;
  background: var(--shin-speaking-surface);
  box-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 2px 3.4px 2px rgba(0, 0, 0, .3);
}
.shin-speaking-prog__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6.8px;
}

/* =========================================================
   利用料金
   ========================================================= */
.shin-speaking-price {
  width: 100%;
  background: var(--shin-speaking-surface);
  border-radius: 27.2px;
  padding: var(--shin-speaking-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.05vw, 27.2px);
}

.shin-speaking-price__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.54vw, 20.4px);
  padding: 20.4px 0 13.6px;
  text-align: center;
}
.shin-speaking-price__plan {
  font-weight: 900;
  font-size: var(--shin-speaking-fs-plan);
  line-height: 1.5;
}
.shin-speaking-price__amount {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6.8px;
}
.shin-speaking-price__amount b {
  font-weight: 900;
  font-size: var(--shin-speaking-fs-price);
  line-height: 1;
  color: var(--shin-speaking-primary);
}
.shin-speaking-price__amount span {
  font-weight: 700;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.8;
}

.shin-speaking-price__incl {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.07vw, 40.8px);
}
.shin-speaking-price__note {
  font-weight: 700;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.5;
  text-align: center;
}
.shin-speaking-price__items {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.02vw, 13.6px);
}
.shin-speaking-price__items span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--shin-speaking-container);
  border-radius: 13.6px;
  padding: clamp(16px, 2.56vw, 34px) clamp(8px, 1.02vw, 13.6px);
  font-weight: 700;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.5;
}

/* =========================================================
   お申し込み
   ========================================================= */
.shin-speaking-apply { gap: clamp(24px, 3.07vw, 40.8px); }
.shin-speaking-apply__lead {
  width: 100%;
  text-align: center;
  font-size: var(--shin-speaking-fs-lead);
  line-height: 1.8;
}

/* =========================================================
   footer
   ========================================================= */
.shin-speaking-footer {
  background: var(--shin-speaking-primary);
  color: var(--shin-speaking-on-primary);
  text-align: center;
  padding: 40.8px 20.4px 27.2px;
}
.shin-speaking-footer__logo { width: 149.6px; height: auto; }
.shin-speaking-footer__links {
  margin-top: 20.4px;
  display: flex;
  justify-content: center;
  gap: 27.2px;
  font-size: 14px;
  line-height: 25.2px;
}
.shin-speaking-footer__links a:hover { opacity: .75; }
.shin-speaking-footer__copy {
  margin-top: 20.4px;
  font-size: 12px;
  line-height: 21.6px;
  opacity: .7;
}

/* =========================================================
   responsive : tablet 以下（ハンバーガー）
   ========================================================= */
@media (max-width: 1080px) {
  /* 統計カード: 固定幅だと 641〜1080px で数字が詰まるので 3 等分して余白を使い切る（上限は Figma の 187px） */
  .shin-speaking-about__stats { width: 100%; gap: clamp(6px, 2.05vw, 27.2px); }
  .shin-speaking-stat { flex: 1 1 0; width: auto; min-width: 0; max-width: 187px; }

  /* hero: 写真の上に載せず全幅で読ませる */
}

/* =========================================================
   responsive : mobile
   ========================================================= */
/* =========================================================
   responsive : 641px 以上（ヒーローのみ PC と同一レイアウト）
   ヒーローは画面幅で見え方が変わらないよう、可変指定を PC の値で固定する。
   トークンは .shin-speaking-hero に上書きするので、他のセクションには影響しない。
   ========================================================= */
@media (min-width: 641px) {
  .shin-speaking-hero {
    --shin-speaking-fs-catch: 34px;
    --shin-speaking-fs-h3:    27.2px;
    --shin-speaking-fs-lead:  20.4px;
    --shin-speaking-pad:      34px;
  }
  .shin-speaking-hero__badge { gap: 13.6px; padding: 6.8px 34px 6.8px 6.8px; }
  .shin-speaking-hero__badge::after { right: 16px; bottom: -18px; width: 30.6px; height: 30.6px; }
  .shin-speaking-hero__avatar { width: 62.9px; height: 62.9px; }
  .shin-speaking-hero__panel { gap: 34px; }
  .shin-speaking-hero__catch { gap: 13.6px; }
  .shin-speaking-hero .shin-speaking-deco { width: 17.8px; height: 33.1px; }
  .shin-speaking-hero .shin-speaking-deco::before { width: 37.4px; }
  .shin-speaking-hero .shin-speaking-btn { padding: 13.6px 68px; --shin-speaking-btn-edge: 11px; }
}

/* タブレットはレイアウトを PC のまま、縮尺だけ縮める（背景画像は据え置き）。
   --shin-speaking-hero-s は「PC を 1 とした倍率」を長さで表したもので、641px で 0.8、
   1080px で 1.0 になる。各値は PC の実寸 × この倍率で書く。 */
@media (min-width: 641px) and (max-width: 1080px) {
  .shin-speaking-hero {
    --shin-speaking-hero-s: clamp(0.8px, calc(0.508px + 0.0456vw), 1px);
    --shin-speaking-fs-catch: calc(34   * var(--shin-speaking-hero-s));
    --shin-speaking-fs-h3:    calc(27.2 * var(--shin-speaking-hero-s));
    --shin-speaking-fs-lead:  calc(20.4 * var(--shin-speaking-hero-s));
    --shin-speaking-pad:      calc(34   * var(--shin-speaking-hero-s));
  }
  .shin-speaking-hero__title { font-size: calc(139.4 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__sub   { font-size: calc(47.6  * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__stage { max-width: calc(680 * var(--shin-speaking-hero-s)); gap: calc(13.6 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__badge {
    gap: calc(13.6 * var(--shin-speaking-hero-s));
    padding: calc(6.8 * var(--shin-speaking-hero-s)) calc(34 * var(--shin-speaking-hero-s)) calc(6.8 * var(--shin-speaking-hero-s)) calc(6.8 * var(--shin-speaking-hero-s));
  }
  .shin-speaking-hero__avatar { width: calc(62.9 * var(--shin-speaking-hero-s)); height: calc(62.9 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__panel { gap: calc(34 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__catch { gap: calc(13.6 * var(--shin-speaking-hero-s)); }
  /* バッジとサブコピーはスマホと同じく縦並び。ただし下のお申し込みパネルに対して中央揃え */
  .shin-speaking-hero__titles { align-items: center; }
  .shin-speaking-hero__row { flex-direction: column; align-items: center; gap: calc(14 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero__sub { text-align: center; }
  .shin-speaking-hero__title { text-align: center; }
  .shin-speaking-hero__badge::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-11 * var(--shin-speaking-hero-s));
    width: calc(18 * var(--shin-speaking-hero-s));
    height: calc(12 * var(--shin-speaking-hero-s));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .shin-speaking-hero .shin-speaking-deco { width: calc(17.8 * var(--shin-speaking-hero-s)); height: calc(33.1 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero .shin-speaking-deco::before { width: calc(37.4 * var(--shin-speaking-hero-s)); }
  .shin-speaking-hero .shin-speaking-btn {
    padding: calc(13.6 * var(--shin-speaking-hero-s)) calc(68 * var(--shin-speaking-hero-s));
    --shin-speaking-btn-edge: calc(11 * var(--shin-speaking-hero-s));
  }
}

@media (max-width: 640px) {
  .shin-speaking-section { padding-left: 16px; padding-right: 16px; }
  .shin-speaking-container { padding: 0; }

  /* ハンバーガーはスマホのみ。タブレットはヘッダーにナビをそのまま表示する */
  .shin-speaking-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--shin-speaking-on-primary);
    cursor: pointer;
  }
  .shin-speaking-header__burger .material-symbols-outlined { font-size: 28px; }

  .shin-speaking-header__nav {
    position: absolute;
    top: var(--shin-speaking-header);
    right: 8px;
    width: 240px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border-radius: 12px;
    background: var(--shin-speaking-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    display: none;
  }
  .shin-speaking-header__toggle:checked ~ .shin-speaking-header__nav { display: flex; }

  .shin-speaking-header__nav > a {
    height: 48px;
    justify-content: flex-start;
    color: var(--shin-speaking-on-surface);
    font-size: 15px;
  }
  .shin-speaking-header__cta {
    margin: 8px 0 0;
    justify-content: center !important;
    color: var(--shin-speaking-on-primary) !important;
  }

  /* 複数行になる本文は左寄せ（中央揃えだと末尾の 1〜2 文字が孤立して見える） */
  .shin-speaking-lead, .shin-speaking-body, .shin-speaking-about__caption { text-align: left; }
  /* お申し込みのリードは 2 文 2 行の短文。1 文目が 390px で 2px だけ溢れるので 13〜14px に流動させ、中央揃えを維持（360px でも 1 行に収まる） */
  .shin-speaking-apply__lead { font-size: clamp(13px, 3.6vw, 14px); }

  .shin-speaking-header__logo img { width: 140px; }

  /* hero */
  .shin-speaking-hero { min-height: 0; }
  .shin-speaking-hero__inner { padding: 40px 16px; }
  .shin-speaking-hero__stage { max-width: none; }
  .shin-speaking-hero__photo { background-position: 62% 26%; }
  /* ヒーローのバッジ・サブコピー・タイトルは左寄せ（中央寄せだと写真の人物に重なりやすい） */
  .shin-speaking-hero__titles { align-items: flex-start; }
  .shin-speaking-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .shin-speaking-hero__title {
    text-align: left;
    /* 固定 84px。360px 級の狭い端末でだけ収まる幅まで下げる */
    font-size: min(84px, 21.5vw);
  }
  .shin-speaking-hero__sub { font-size: min(30px, 7.6vw); }
  /* バッジは控えめに、サブコピーは大きく（スマホでの主従を明確にする） */
  .shin-speaking-hero__badge { padding: 6px 16px 6px 6px; gap: 8px; }
  .shin-speaking-hero__badge-text { font-size: 15px; }
  .shin-speaking-hero__avatar { width: 32px; height: 32px; }
  /* バッジとサブコピーが縦に並ぶので、尻尾はバッジ中央で真下を向く二等辺三角形にする */
  .shin-speaking-hero__badge::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -11px;
    width: 18px;
    height: 12px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .shin-speaking-hero__catch { flex-wrap: nowrap; }

  /* 概要: 統計カードは固定幅をやめて 3 等分（余白を使い切る） */
  .shin-speaking-about__bubble { border-radius: 24px; padding: 20px 14px; }
  .shin-speaking-about__stats { gap: 6px; }
  .shin-speaking-stat {
    max-width: none;
    border-radius: 12px;
    padding: 14px 6px;
    gap: 9px;
  }
  /* 数字がカード幅いっぱいに詰まらないよう一段小さく */
  .shin-speaking-stat__num b { font-size: 21px; }
  .shin-speaking-stat__num i { font-size: 13px; }
  .shin-speaking-stat__label { font-size: 11px; line-height: 1.4; }
  .shin-speaking-stat__label { white-space: normal; }

  /* 先生プロフィール */
  .shin-speaking-teacher {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .shin-speaking-teacher__profile { width: min(180px, 60%); }
  .shin-speaking-teacher__text { width: 100%; }

  /* こんな声 / 二人三脚のピル */
  .shin-speaking-pills { flex-direction: column; }
  .shin-speaking-pill { border-radius: 999px; padding: 14px 16px; }

  /* プログラム内容: アイコンと見出しを横並びに、説明はその下 */
  .shin-speaking-prog {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
  }
  .shin-speaking-prog__icon { font-size: 36px; margin-top: 2px; }
  .shin-speaking-prog__text { gap: 6px; }
  .shin-speaking-prog--material { flex-direction: column; align-items: stretch; }
  .shin-speaking-prog__shot { width: 100%; }

  /* 利用料金: 含まれる項目は 2 列（奇数なら最後を全幅） */
  .shin-speaking-price { border-radius: 24px; }
  .shin-speaking-price__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .shin-speaking-price__items span { padding: 14px 8px; }
  .shin-speaking-price__items span:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* footer */
  .shin-speaking-footer__links { gap: 24px; }
}