@charset "UTF-8";
/* =========================================================
   1ヶ月完結会話文法講座 LP  (static, build-free)
   - Figma: LP / 会話文法 (node 807:2089, 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-grammar-primary: #33509e;
  --shin-grammar-container: #ebedf5;
  --shin-grammar-surface: #ffffff;
  --shin-grammar-on-surface: #424242;
  --shin-grammar-on-primary: #ffffff;
  --shin-grammar-outline: #bdbdbd;
  --shin-grammar-accent: #e8688a;
  --shin-grammar-accent-dark: #ae1b42;
  --shin-grammar-yellow: #ffe45c;

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

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

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

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

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

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

.shin-grammar img { max-width: 100%; }
.shin-grammar a { color: inherit; text-decoration: none; }
.shin-grammar p { margin: 0; }
.shin-grammar h1, .shin-grammar h2, .shin-grammar h3 { margin: 0; }
.shin-grammar 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;
}

/* =========================================================
   共通パーツ
   ========================================================= */

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

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

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

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

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

/* CTA ボタン（下端に濃い縁の立体表現） */
.shin-grammar .shin-grammar-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-grammar-btn-edge: clamp(6px, 0.83vw, 11px);
  margin-bottom: var(--shin-grammar-btn-edge);
  box-shadow: 0 var(--shin-grammar-btn-edge) 0 var(--shin-grammar-accent-dark);
  background: var(--shin-grammar-accent);
  color: var(--shin-grammar-on-primary);
  font-weight: 600;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* 押し込み: ボタンを 3px 下げ、縁を同じだけ薄くして下端の位置は固定 */
.shin-grammar .shin-grammar-btn:hover {
  transform: translateY(3px);
  box-shadow: 0 calc(var(--shin-grammar-btn-edge) - 3px) 0 var(--shin-grammar-accent-dark);
}

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

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

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

.shin-grammar-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-grammar-header__logo img { display: block; width: 149.6px; height: auto; }

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

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

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

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

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

/* hero-bg.webp は元写真を水平反転したもの（Figma がその向きで使っている）。
   人物は画像の左から約 45% の位置にいるため、幅 170vw に拡大して左端合わせにすると
   画面の縦横比に関係なく人物が常に画面の約 76% の位置（＝テキストパネルの右）に来る。
   max(…, 150vh) は極端に縦長な画面でも上下に隙間を出さないための保険 */
.shin-grammar-hero__photo {
  position: absolute;
  inset: 0;
  background: url(../images/lp_shin_grammar/hero-bg.webp) no-repeat;
  background-size: max(170vw, 150vh) auto;
  background-position: 0 10%;
  opacity: .75;
}

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

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

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

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

/* 白い丸ピル（Shin先生の顔写真 + テキスト）＋ 吹き出しの尻尾 */
.shin-grammar-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-grammar-surface);
  border-radius: 95.2px;
  padding: 6.8px clamp(20px, 2.56vw, 34px) 6.8px 6.8px;
}
.shin-grammar-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-grammar-surface);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.shin-grammar-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-grammar-hero__avatar img {
  position: absolute;
  left: -20.74%;
  top: -7.5%;
  width: 160%;
  max-width: none;
  height: auto;
}
.shin-grammar-hero__badge-text {
  font-weight: 700;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-primary);
  white-space: nowrap;
}

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

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

.shin-grammar-hero__panel {
  background: rgba(255, 255, 255, .85);
  border-radius: 13.6px;
  padding: var(--shin-grammar-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.56vw, 34px);
}

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

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

/* =========================================================
   概要
   ========================================================= */
.shin-grammar-bubble {
  position: relative;
  width: 100%;
  background: var(--shin-grammar-primary);
  border-radius: 88.4px;
  padding: clamp(20px, 2.05vw, 27.2px);
  text-align: center;
}
.shin-grammar-bubble p {
  font-weight: 600;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-on-primary);
}
.shin-grammar-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-grammar-primary);
}

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

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

.shin-grammar-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-grammar-stat--a { background: var(--shin-grammar-stat-a-bg); }
.shin-grammar-stat--b { background: var(--shin-grammar-stat-b-bg); }
.shin-grammar-stat--c { background: var(--shin-grammar-stat-c-bg); }

.shin-grammar-stat__label {
  font-weight: 600;
  font-size: clamp(11px, 1.54vw, 20.4px);
  line-height: 1.5;
}
.shin-grammar-stat__num {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.shin-grammar-stat__num b { font-weight: 600; font-size: var(--shin-grammar-fs-stat); }
.shin-grammar-stat__num i { font-style: normal; font-size: var(--shin-grammar-fs-stat-unit); }
.shin-grammar-stat--a .shin-grammar-stat__num { color: var(--shin-grammar-stat-a-fg); }
.shin-grammar-stat--b .shin-grammar-stat__num { color: var(--shin-grammar-stat-b-fg); }
.shin-grammar-stat--c .shin-grammar-stat__num { color: var(--shin-grammar-stat-c-fg); }

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

/* 2カラムの説明カード */
.shin-grammar-about__cols {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2.05vw, 27.2px);
}
.shin-grammar-about__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.54vw, 20.4px);
  background: var(--shin-grammar-container);
  border-radius: 13.6px;
  padding: clamp(16px, 1.54vw, 20.4px);
}
.shin-grammar-about__col h3 {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: var(--shin-grammar-fs-h4);
  line-height: 1.5;
}
.shin-grammar-about__col-sub {
  width: 100%;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.5;
}
.shin-grammar-about__col-box {
  flex: 1 1 auto;
  width: 100%;
  background: var(--shin-grammar-surface);
  border-radius: 13.6px;
  padding: clamp(16px, 1.54vw, 20.4px);
  display: flex;
  flex-direction: column;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.75;
}

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

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

.shin-grammar-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-grammar-fs-lead);
  line-height: 1.75;
  color: #3c3c3c;
}

/* =========================================================
   受講者の声
   ========================================================= */
.shin-grammar-voices {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.05vw, 27.2px);
}

.shin-grammar-voice {
  background: var(--shin-grammar-surface);
  border-radius: 13.6px;
  padding: var(--shin-grammar-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.56vw, 34px);
}
.shin-grammar-voice__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.54vw, 20.4px);
}
.shin-grammar-voice__avatar {
  display: block;
  width: auto;
  height: clamp(96px, 10.24vw, 136px);
}
.shin-grammar-voice__who {
  font-size: clamp(13px, 1.02vw, 13.6px);
  line-height: 1.5;
  color: #777;
}
.shin-grammar-voice__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.54vw, 20.4px);
}
.shin-grammar-voice__body h3 {
  font-weight: 700;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-primary);
}
.shin-grammar-voice__body p {
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.75;
}

/* =========================================================
   成果につながる３つの理由
   ========================================================= */
.shin-grammar-reasons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.54vw, 20.4px);
}

.shin-grammar-reason {
  background: var(--shin-grammar-container);
  border-radius: 13.6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.54vw, 20.4px);
}
.shin-grammar-reason__band {
  background: var(--shin-grammar-primary);
  color: var(--shin-grammar-on-primary);
  text-align: center;
  padding: 13.6px;
  font-weight: 600;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.25;
}
.shin-grammar-reason__body {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.05vw, 27.2px);
  padding: 0 clamp(16px, 2.05vw, 27.2px) clamp(20px, 2.56vw, 34px);
}
.shin-grammar-reason__icon {
  flex: 0 0 auto;
  font-size: var(--shin-grammar-fs-icon);
  color: var(--shin-grammar-primary);
}
.shin-grammar-reason__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.54vw, 20.4px);
}
.shin-grammar-reason__text h3 {
  font-weight: 600;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-primary);
}
.shin-grammar-reason__text p {
  font-size: var(--shin-grammar-fs-desc);
  line-height: 1.75;
}

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

.shin-grammar-price__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.54vw, 20.4px);
  padding: clamp(24px, 4.61vw, 61.2px) 0 13.6px;
  text-align: center;
}
.shin-grammar-price__term {
  font-weight: 900;
  font-size: var(--shin-grammar-fs-term);
  line-height: 1.5;
}
.shin-grammar-price__amount {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6.8px;
}
.shin-grammar-price__amount b {
  font-weight: 900;
  font-size: var(--shin-grammar-fs-price);
  line-height: 1;
  color: var(--shin-grammar-primary);
}
.shin-grammar-price__amount span {
  font-weight: 700;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.8;
}

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

/* =========================================================
   この講座に含まれるもの
   ========================================================= */
.shin-grammar-incls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.54vw, 20.4px);
}

.shin-grammar-incl {
  background: var(--shin-grammar-surface);
  border: clamp(2px, 0.26vw, 3.4px) solid var(--shin-grammar-primary);
  border-radius: 13.6px;
  padding: clamp(28px, 4.61vw, 61.2px) clamp(20px, 2.56vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.54vw, 20.4px);
  text-align: center;
}
.shin-grammar-incl h3 {
  width: 100%;
  font-weight: 700;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-primary);
}
.shin-grammar-incl p {
  width: 100%;
  font-size: var(--shin-grammar-fs-body);
  line-height: 1.75;
}
.shin-grammar-incl__strong { font-weight: 700; }

.shin-grammar-incl__pair {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.54vw, 20.4px);
}
.shin-grammar-incl__pair span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--shin-grammar-container);
  border-radius: 20.4px;
  padding: clamp(16px, 2.05vw, 27.2px) 13.6px;
  font-weight: 700;
  font-size: var(--shin-grammar-fs-body);
  line-height: 1.75;
  color: var(--shin-grammar-primary);
}

/* =========================================================
   １ヶ月の学習イメージ
   ========================================================= */
.shin-grammar-schedule { width: 100%; }
.shin-grammar-schedule img { display: block; width: 100%; height: auto; }

/* =========================================================
   この講座のポイント
   ========================================================= */
.shin-grammar-points {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.05vw, 27.2px);
}

.shin-grammar-point {
  background: var(--shin-grammar-surface);
  border-radius: 20.4px;
  padding: var(--shin-grammar-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.05vw, 27.2px);
}
.shin-grammar-point h3 {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: var(--shin-grammar-fs-point);
  line-height: 1.25;
  color: var(--shin-grammar-primary);
}
.shin-grammar-point__sub {
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.25;
}
.shin-grammar-point__box {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--shin-grammar-container);
  border-radius: 13.6px;
  padding: 13.6px;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.75;
}

/* =========================================================
   よくある質問
   ========================================================= */
.shin-grammar-faq {
  width: 100%;
  background: var(--shin-grammar-container);
  border-radius: 20.4px;
  padding: var(--shin-grammar-pad);
}
.shin-grammar-faq__card {
  background: var(--shin-grammar-surface);
  border-radius: 20.4px;
  padding: clamp(20px, 2.05vw, 27.2px);
}
.shin-grammar-faq__item {
  padding: clamp(16px, 1.54vw, 20.4px) 0 clamp(20px, 2.05vw, 27.2px);
  border-bottom: 1px solid var(--shin-grammar-outline);
}
.shin-grammar-faq__item:first-child { padding-top: 0; }
.shin-grammar-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }

.shin-grammar-faq__q {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.77vw, 10.2px);
}
.shin-grammar-faq__q span {
  flex: 0 0 auto;
  width: clamp(28px, 3.07vw, 40.8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--shin-grammar-fs-h3);
  line-height: 1.5;
  color: var(--shin-grammar-primary);
}
.shin-grammar-faq__q h3 {
  font-weight: 600;
  font-size: var(--shin-grammar-fs-lead);
  line-height: 1.5;
}
.shin-grammar-faq__a {
  padding: 13.6px clamp(12px, 3.07vw, 40.8px);
  display: flex;
  flex-direction: column;
  font-size: var(--shin-grammar-fs-body);
  line-height: 1.8;
}

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

/* =========================================================
   footer
   ========================================================= */
.shin-grammar-footer {
  background: var(--shin-grammar-primary);
  color: var(--shin-grammar-on-primary);
  text-align: center;
  padding: 40.8px 20.4px 27.2px;
}
.shin-grammar-footer__logo { width: 149.6px; height: auto; }
.shin-grammar-footer__links {
  margin-top: 20.4px;
  display: flex;
  justify-content: center;
  gap: 27.2px;
  font-size: 14px;
  line-height: 25.2px;
}
.shin-grammar-footer__links a:hover { opacity: .75; }
.shin-grammar-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-grammar-stats { width: 100%; gap: clamp(6px, 2.05vw, 27.2px); }
  .shin-grammar-stat { flex: 1 1 0; width: auto; min-width: 0; max-width: 187px; }

  /* 2カラム系は 1 カラムに */
  .shin-grammar-about__cols { flex-direction: column; }
  .shin-grammar-voices,
  .shin-grammar-points { grid-template-columns: minmax(0, 1fr); }
}

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

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

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

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

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

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

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

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

  /* hero */
  .shin-grammar-hero { min-height: 0; }
  .shin-grammar-hero__inner { padding: 40px 16px; }
  /* 背景の寄せ方を変えるのはスマホだけ。タブレットは PC と同じ見え方を保つ */
  .shin-grammar-hero__photo { background-size: cover; background-position: 12% 20%; }
  .shin-grammar-hero__stage { max-width: none; }
  /* ヒーローのバッジ・サブコピー・タイトルは左寄せ（中央寄せだと写真の人物に重なりやすい） */
  .shin-grammar-hero__titles { align-items: flex-start; }
  .shin-grammar-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .shin-grammar-hero__title {
    text-align: left;
    /* 固定 84px。360px 級の狭い端末でだけ収まる幅まで下げる */
    font-size: min(84px, 21.5vw);
  }
  .shin-grammar-hero__sub { font-size: min(30px, 7.6vw); }
  /* バッジは控えめに、サブコピーは大きく（スマホでの主従を明確にする） */
  .shin-grammar-hero__badge { padding: 6px 16px 6px 6px; gap: 8px; }
  .shin-grammar-hero__badge-text { font-size: 15px; }
  .shin-grammar-hero__avatar { width: 32px; height: 32px; }
  /* バッジとサブコピーが縦に並ぶので、尻尾はバッジ中央で真下を向く二等辺三角形にする */
  .shin-grammar-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%);
  }

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

  /* 概要 2 カラムカード: 二重余白を詰めて本文幅を確保 */
  .shin-grammar-about__col { padding: 16px 12px; gap: 12px; }
  .shin-grammar-about__col-box { padding: 12px; }

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

  /* 受講者の声: アバターと余白を詰めてカードを短く */
  .shin-grammar-voice { padding: 20px 16px; gap: 16px; }
  .shin-grammar-voice__head { gap: 8px; }
  .shin-grammar-voice__avatar { height: 80px; }
  .shin-grammar-voice__body { gap: 10px; }

  /* 成果につながる３つの理由: アイコンと見出しは中央、本文は左寄せ */
  .shin-grammar-reason__body {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .shin-grammar-reason__text { width: 100%; }
  .shin-grammar-reason__text h3 { text-align: center; }

  /* 利用料金: 含まれる項目は 2 列（行内が奇数なら最後を全幅） */
  .shin-grammar-price { border-radius: 24px; }
  .shin-grammar-price__head { flex-direction: column; gap: 4px; }
  /* 行の区切りを解き、5 項目をひとつの 2 列グリッドに（最後の 1 つは全幅） */
  .shin-grammar-price__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .shin-grammar-price__row { display: contents; }
  .shin-grammar-price__row span { padding: 14px 8px; }
  .shin-grammar-price__row:last-child span:last-child { grid-column: 1 / -1; }

  /* 含まれるもの */
  .shin-grammar-incl__pair { flex-direction: column; }

  /* FAQ */
  .shin-grammar-faq { padding: 16px; }
  .shin-grammar-faq__card { padding: 20px 16px; }
  .shin-grammar-faq__q { align-items: flex-start; }
  .shin-grammar-faq__q span { justify-content: flex-start; width: 20px; }
  .shin-grammar-faq__a { padding: 12px 0 0 20px; }

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