/* ============================================================
   SG塾 総合型選抜 合格診断 LP

   デザイン: Figma「SG塾診断LP_Phase1」
     PC = フレーム 1440幅（背景全幅／コンテンツ1120中央）
     SP = フレーム 375幅

   寸法はすべて Figma の実数をそのまま calc(N * var(--u)) で書く。
   --u は「デザイン上の1px」で、ビューポート幅に応じて線形に縮尺する。
   こうするとデザインと数値が1:1で対応し、どの幅でも比率が崩れない。

   ヘッダーナビを持たない単独ページ。テーマの既存CSSは読み込まない
   （inc/shindan.php で dequeue）ため、ここが唯一のスタイル定義になる。
   クラスは .sglp- プレフィックス。診断ツール側（.sg-）とは分離している。
   ============================================================ */

.sglp {
  --u: 1px;                 /* 1440px 以上はデザイン等倍 */

  --navy:   #2E3C75;
  --yellow: #F1E53F;
  --orange: #E8531F;
  --ink:    #1A1A1A;
  --desc:   #333333;
  --bracket:#2F3A24;
  --fig-bg:      #ECECEC;
  --fig-bg-sp:   #EDEDED;
  --fig-line:    #B9B9B9;
  --fig-label:   #8A8A8A;
  --cta-from: #F1815F;
  --cta-to:   #E5501F;
}
/* 1024〜1440px: PCデザインをそのまま線形に縮小する。
   ただし --u を 100vw に直結させると、ウィンドウをドラッグしている間ずっと
   全要素の font-size が変わり続け、テキストの再整形とグリフ生成が毎フレーム走る
   （実測で1フレーム約50ms＝20fps相当）。16px刻みに丸めて、段をまたいだ瞬間だけ
   再計算が起きるようにしている。ぴったり追従しない分は最大16px（左右8px）の余白になる。 */
@media (max-width: 1439.98px) { .sglp { --u: 0.98889px; } }
@media (max-width: 1423.98px) { .sglp { --u: 0.97778px; } }
@media (max-width: 1407.98px) { .sglp { --u: 0.96667px; } }
@media (max-width: 1391.98px) { .sglp { --u: 0.95556px; } }
@media (max-width: 1375.98px) { .sglp { --u: 0.94444px; } }
@media (max-width: 1359.98px) { .sglp { --u: 0.93333px; } }
@media (max-width: 1343.98px) { .sglp { --u: 0.92222px; } }
@media (max-width: 1327.98px) { .sglp { --u: 0.91111px; } }
@media (max-width: 1311.98px) { .sglp { --u: 0.90000px; } }
@media (max-width: 1295.98px) { .sglp { --u: 0.88889px; } }
@media (max-width: 1279.98px) { .sglp { --u: 0.87778px; } }
@media (max-width: 1263.98px) { .sglp { --u: 0.86667px; } }
@media (max-width: 1247.98px) { .sglp { --u: 0.85556px; } }
@media (max-width: 1231.98px) { .sglp { --u: 0.84444px; } }
@media (max-width: 1215.98px) { .sglp { --u: 0.83333px; } }
@media (max-width: 1199.98px) { .sglp { --u: 0.82222px; } }
@media (max-width: 1183.98px) { .sglp { --u: 0.81111px; } }
@media (max-width: 1167.98px) { .sglp { --u: 0.80000px; } }
@media (max-width: 1151.98px) { .sglp { --u: 0.78889px; } }
@media (max-width: 1135.98px) { .sglp { --u: 0.77778px; } }
@media (max-width: 1119.98px) { .sglp { --u: 0.76667px; } }
@media (max-width: 1103.98px) { .sglp { --u: 0.75556px; } }
@media (max-width: 1087.98px) { .sglp { --u: 0.74444px; } }
@media (max-width: 1071.98px) { .sglp { --u: 0.73333px; } }
@media (max-width: 1055.98px) { .sglp { --u: 0.72222px; } }
@media (max-width: 1039.98px) { .sglp { --u: 0.71111px; } }
/* 〜1023px: SPデザインに切り替える。
   375を超える幅では 1.25px で頭打ちにし（= 実効469px幅）、
   タブレットでSPデザインが間延びしないよう中央に寄せる。 */
@media (max-width: 1023.98px) {
  .sglp { --u: min(100vw / 375, 1.25px); }
  .sglp main,
  .sglp .sglp-footer {
    max-width: calc(375 * var(--u));
    margin-inline: auto;
  }
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;                 /* --u が 100vw 基準なのでスクロールバー分のはみ出しを止める */
}
body.sglp {
  margin: 0;
  overflow-x: hidden;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  line-height: 1.7;
}
.sglp img { display: block; max-width: 100%; height: auto; }
.sglp h1, .sglp h2, .sglp p, .sglp ul, .sglp li, .sglp figure { margin: 0; padding: 0; }
.sglp ul { list-style: none; }
.sglp a { color: inherit; }

/* PC/SP で行数が変わる箇所は span を inline↔block で切り替える */
.sglp .ln { display: inline; }
.sglp .sp-space { display: none; }   /* SPで行が割れるときだけ入る空き */
.sglp .mk { color: var(--orange); }

/* ============================================================
   ファーストビュー
   ============================================================ */
.sglp-fv {
  position: relative;
  overflow: hidden;
  height: calc(979.4286 * var(--u));
  background: var(--navy);
}

/* デザイン幅のキャンバス。1440を超える画面でも中身が中央から動かないようにする。
   transform を使うとスタッキングコンテキストができて中の z-index が
   帯やシェードと比較できなくなるので、負のマージンで寄せている。 */
.sglp-fv-frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(1440 * var(--u));
  margin-left: calc(-720 * var(--u));
  height: 100%;
}

/* 重なり順（デザインのレイヤー順）: 黒板 → 人物 → シェード → 黄色帯 → 見出し・バッジ → 吹き出し・結果画面 */
.sglp-fv-bg     { z-index: 0; }
.sglp-fv-person { z-index: 1; }
.sglp-fv-shade  { z-index: 2; }
.sglp-fv-band   { z-index: 3; }
.sglp-fv-copy,
.sglp-fv-badge  { z-index: 4; }
.sglp-bubble,
.sglp-fv-result { z-index: 5; }

.sglp-fv-bg { position: absolute; inset: 0; overflow: hidden; }
.sglp-fv-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; object-fit: cover;
}

.sglp-fv-person {
  position: absolute;
  left: calc(462 * var(--u));
  top:  calc(300 * var(--u));
  width:  calc(517 * var(--u));
  height: calc(679 * var(--u));
  overflow: hidden;
}
.sglp-fv-person img {
  width: 100%; height: 100%;
  max-width: none; object-fit: cover;
}

.sglp-fv-shade {
  position: absolute; left: 0; right: 0;
  top: calc(871 * var(--u));
  height: calc(108 * var(--u));
  background: linear-gradient(180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.48) 55%,
    rgba(0,0,0,.78) 100%);
}

/* ---- 見出し ---- */
.sglp-fv-copy {
  position: absolute; left: 0;
  top: calc(38.8571 * var(--u));
  width: 100%;
  text-align: center;
}
.sglp-fv-eyebrow {
  font-weight: 700;
  font-size:   calc(29.7143 * var(--u));
  line-height: calc(36 * var(--u));
  color: var(--yellow);
}
.sglp-fv-eyebrow em { font-style: normal; color: #FFFFFF; }
.sglp-fv-eyebrow .sp-brand { display: none; }   /* SPのみ「SG塾の」がこの行に入る */

.sglp-fv-brand {
  margin-top: calc(12 * var(--u));
  font-weight: 900;
  font-size:   calc(45.7143 * var(--u));
  line-height: calc(55 * var(--u));
  color: #FFFFFF;
  text-shadow: 0 calc(3.4286 * var(--u)) calc(3.4286 * var(--u)) rgba(20,36,15,.7);
}
.sglp-fv-title {
  margin-top: calc(6.1429 * var(--u));
  font-weight: 900;
  font-size:   calc(88 * var(--u));
  line-height: calc(100 * var(--u));
  letter-spacing: calc(-2.64 * var(--u));
  color: var(--yellow);
}

/* ---- 選択式バッジ ---- */
.sglp-fv-badge {
  position: absolute;
  left: calc(1039 * var(--u));
  top:  calc(300 * var(--u));
  width: calc(230 * var(--u));
  text-align: center;
  font-weight: 900;
  white-space: nowrap;
}
.sglp-fv-badge .t1 {
  font-size:   calc(42 * var(--u));
  line-height: calc(50 * var(--u));
  color: var(--yellow);
}
.sglp-fv-badge .t2 {
  margin-top: calc(2 * var(--u));
  font-size:   calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  color: #FFFFFF;
}

/* ---- 診断結果画面のキャプチャ ---- */
/* 「＼選択式／かんたん診断」バッジの真下。角丸・影なしの素の矩形（デザインどおり） */
.sglp-fv-result {
  position: absolute;
  left: calc(1071 * var(--u));
  top:  calc(411 * var(--u));
  width:  calc(165 * var(--u));
  height: calc(303 * var(--u));
  overflow: hidden;
}
.sglp-fv-result img {
  width: 100%; height: 100%;
  max-width: none; object-fit: cover;
}

/* ---- 吹き出し ---- */
.sglp-bubble {
  position: absolute;
  width:  calc(193 * var(--u));
  height: calc(193 * var(--u));
}
.sglp-bubble .shape { position: absolute; }
.sglp-bubble .shape img { position: absolute; max-width: none; }
.sglp-bubble p {
  position: absolute; left: 0;
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(26 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--ink);
}

/* 約10年分の合格データ */
.sglp-bubble--data { left: calc(244 * var(--u)); top: calc(299 * var(--u)); }
.sglp-bubble--data .shape {
  inset: 0;
  transform: rotate(-19.24deg);
}
.sglp-bubble--data .shape img { left: -2.59%; top: -2.59%; width: 105.18%; height: 105.18%; }
.sglp-bubble--data p { top: calc(46 * var(--u)); }
.sglp-bubble--data .mk { color: #C74F2A; }

/* 狙える大学＆併願校 */
.sglp-bubble--school { left: calc(194 * var(--u)); top: calc(524 * var(--u)); }
.sglp-bubble--school .shape {
  left: 0; top: 0;
  width:  calc(217 * var(--u));
  height: calc(193 * var(--u));
  transform: rotate(-5.14deg);
}
.sglp-bubble--school .shape img { left: -2.30%; top: -2.59%; width: 107.45%; height: 105.18%; }
.sglp-bubble--school p { top: calc(46 * var(--u)); }
.sglp-bubble--school .mk { color: #2477C4; }

/* ---- 黄色帯（監修コピー） ---- */
.sglp-fv-band {
  position: absolute; left: 0; right: 0;
  top: calc(748.5714 * var(--u));
  height: calc(122.2857 * var(--u));
  background: var(--yellow);
}
.sglp-fv-band::before,
.sglp-fv-band::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: calc(3 * var(--u));
  /* Figma: stroke #F1E53F / width 3 / dasharray 3 3 */
  background: repeating-linear-gradient(90deg,
    var(--yellow) 0, var(--yellow) calc(3 * var(--u)),
    transparent   calc(3 * var(--u)), transparent calc(6 * var(--u)));
}
.sglp-fv-band::before { top: calc(-5 * var(--u)); }
.sglp-fv-band::after  { top: calc(124.2857 * var(--u)); }

.sglp-fv-band p {
  position: absolute; left: 0;
  top: calc(21.4286 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  color: var(--navy);
}
.sglp-fv-band .l1 {
  display: block;
  font-size:   calc(30 * var(--u));
  line-height: calc(38.8571 * var(--u));
}
.sglp-fv-band .l2 {
  display: block;
  font-size:   calc(25 * var(--u));
  line-height: calc(38.8571 * var(--u));
}

/* ============================================================
   CTA（3か所で共通）
   ============================================================ */
.sglp-cta {
  position: relative;
  z-index: 2;
  width: calc(1110.8571 * var(--u));
  height: calc(220.1429 * var(--u));
  margin: 0 auto;
}
.sglp-cta-btn {
  position: absolute; left: 0; top: 0;
  display: block;
  width: 100%;
  height: calc(147 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, var(--cta-from) 0%, var(--cta-to) 100%);
  overflow: hidden;
  text-decoration: none;
}
.sglp-cta-btn .t1 {
  position: absolute; left: 0;
  top: calc(18 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size:   calc(29.7143 * var(--u));
  line-height: calc(36 * var(--u));
  color: var(--yellow);
}
.sglp-cta-btn .t2 {
  position: absolute; left: 0;
  top: calc(69 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(48 * var(--u));
  line-height: calc(58 * var(--u));
  letter-spacing: calc(-1.92 * var(--u));
  color: #FFFFFF;
}
.sglp-cta-btn .ar {
  position: absolute;
  top: calc(71 * var(--u));
  width:  calc(27 * var(--u));
  height: calc(54 * var(--u));
}
.sglp-cta-btn .ar-l { left:  calc(42 * var(--u)); }
.sglp-cta-btn .ar-r { right: calc(42 * var(--u)); }
.sglp-cta-btn:hover { filter: brightness(1.05); }
.sglp-cta-btn:active { transform: translateY(calc(2 * var(--u))); }

.sglp-cta-note {
  position: absolute; left: 0;
  top: calc(157 * var(--u));
  width: 100%;
  text-align: center;
}
.sglp-cta-note .n1 {
  display: block;
  font-weight: 700;
  font-size:   calc(17.1429 * var(--u));
  line-height: calc(21 * var(--u));
  color: var(--ink);
}
.sglp-cta-note .n2 {
  display: block;
  margin-top: calc(1.1429 * var(--u));
  font-weight: 900;
  font-size:   calc(34.2857 * var(--u));
  line-height: calc(41 * var(--u));
  color: var(--navy);
}

/* FVの下端に食い込ませる（デザイン: FV 979.43 に対し CTA top 928） */
.sglp-cta--1 { margin-top: calc(-51.4286 * var(--u)); }
.sglp-cta--2 { margin-top: calc(12.5714 * var(--u)); }
.sglp-cta--3 { margin-top: calc(38.2857 * var(--u)); }

/* ============================================================
   お悩みセクション
   ============================================================ */
.sglp-worry {
  position: relative;
  width: calc(1120 * var(--u));
  height: calc(493.7143 * var(--u));
  margin: calc(103.2857 * var(--u)) auto 0;
}
.sglp-worry-card {
  position: absolute;
  top: calc(25.1429 * var(--u));
  width:  calc(348.5714 * var(--u));
  height: calc(192 * var(--u));
}
.sglp-worry-card--1 { left: calc(9.1429 * var(--u)); }
.sglp-worry-card--2 { left: calc(388.5714 * var(--u)); }
.sglp-worry-card--3 { left: calc(768 * var(--u)); }

.sglp-worry-card .q {
  position: absolute; left: 0;
  top: calc(-75 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(285 * var(--u));
  line-height: calc(342 * var(--u));
}
.sglp-worry-card--1 .q { color: #F6D9D1; }
.sglp-worry-card--2 .q { color: #D3E2F0; }
.sglp-worry-card--3 .q { color: #DCE9D3; }

.sglp-worry-card .br {
  position: absolute;
  top: calc(20.5714 * var(--u));
  width:  calc(22.8571 * var(--u));
  height: calc(150.8571 * var(--u));
  border: 0 solid var(--bracket);
  border-top-width:    calc(6.8571 * var(--u));
  border-bottom-width: calc(6.8571 * var(--u));
}
.sglp-worry-card .br-l {
  left: calc(6.8571 * var(--u));
  border-left-width: calc(6.8571 * var(--u));
}
.sglp-worry-card .br-r {
  left: calc(318.8571 * var(--u));
  border-right-width: calc(6.8571 * var(--u));
}

.sglp-worry-card .tx {
  position: absolute; left: 0;
  top: calc(29.7143 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(26 * var(--u));
  line-height: calc(42.2857 * var(--u));
  color: var(--ink);
}

.sglp-worry-lead1 {
  position: absolute; left: 0;
  top: calc(269.7143 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(43.4286 * var(--u));
  line-height: calc(74 * var(--u));
  color: var(--ink);
}
.sglp-worry-lead1 .mk { font-size: calc(61.7143 * var(--u)); }

.sglp-worry-lead2 {
  position: absolute; left: 0;
  top: calc(345.1429 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(46 * var(--u));
  line-height: calc(70 * var(--u));
  letter-spacing: calc(-1.84 * var(--u));
  color: var(--ink);
}
.sglp-worry-lead2 .brand { color: var(--navy); font-size: calc(58 * var(--u)); }

.sglp-worry-v {
  position: absolute; left: 0;
  top: calc(432 * var(--u));
  width: 100%;
  height: calc(48 * var(--u));
}
.sglp-worry-v img {
  position: absolute; left: 0;
  top: calc(-3 * var(--u));
  width: 100%;
  height: calc(55.92 * var(--u));
  max-width: none;
}

/* ============================================================
   なにが分かる？
   ============================================================ */
.sglp-what {
  position: relative;
  width: calc(1120 * var(--u));
  height: calc(212.5714 * var(--u));
  margin: calc(106.7143 * var(--u)) auto 0;
}
.sglp-what .t1 {
  position: absolute; left: 0;
  top: calc(47 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(36 * var(--u));
  line-height: calc(43 * var(--u));
  letter-spacing: calc(-1.08 * var(--u));
  color: var(--ink);
}
.sglp-what .t2 {
  position: absolute; left: 0;
  top: calc(101.8571 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size:   calc(70.8571 * var(--u));
  line-height: calc(85 * var(--u));
  letter-spacing: calc(-2.1257 * var(--u));
  color: var(--orange);
}
.sglp-what-illust {
  position: absolute;
  overflow: hidden;
}
.sglp-what-illust img { position: absolute; max-width: none; }
/* 幅は素材の比率から算出（高さ213u固定）。左=スーツ 1:2.18 / 右=学ラン 1:3.12 */
.sglp-what-illust img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sglp-what-illust--l {
  left: calc(198 * var(--u));
  top: 0;
  width:  calc(97.5 * var(--u));
  height: calc(213 * var(--u));
}
.sglp-what-illust--r {
  left: calc(830 * var(--u));
  top: calc(0.4285 * var(--u));
  width:  calc(68.5 * var(--u));
  height: calc(213 * var(--u));
}

.sglp-rule {
  width: 100%;
  height: calc(5 * var(--u));
  margin-top: calc(0.8571 * var(--u));
  background: var(--navy);
}

/* ============================================================
   POINT 01〜03
   ============================================================ */
.sglp-point {
  width: calc(1120 * var(--u));
  margin: calc(54.7143 * var(--u)) auto 0;
}

/* PC: テキスト左・図版右。図版は縦長のものと横長のものが混ざるので
   高さは成り行きにして、テキストを縦中央に置く */
.sglp-point-item {
  display: grid;
  grid-template-columns: calc(470 * var(--u)) minmax(0, 1fr);
  gap: 0 calc(90 * var(--u));
  align-items: start;
  padding-left: calc(13.7143 * var(--u));
}
.sglp-point-item + .sglp-point-item { margin-top: calc(70 * var(--u)); }

.sglp-point-num {
  font-weight: 900;
  font-size:   calc(19.4286 * var(--u));
  line-height: calc(55 * var(--u));
  color: var(--navy);
  white-space: nowrap;
}
.sglp-point-num b { font-weight: 900; font-size: calc(45.7143 * var(--u)); }

.sglp-point-title {
  margin-top: calc(9 * var(--u));
  font-weight: 900;
  font-size:   calc(36 * var(--u));
  line-height: calc(46 * var(--u));
  letter-spacing: calc(-1.08 * var(--u));
  color: var(--orange);
}
.sglp-point-item--2 .sglp-point-title,
.sglp-point-item--3 .sglp-point-title {
  font-size:   calc(33 * var(--u));
  line-height: calc(43 * var(--u));
  letter-spacing: calc(-0.99 * var(--u));
}
.sglp-point-title span { display: block; }

.sglp-point-desc {
  margin-top: calc(14 * var(--u));
  font-weight: 700;
  font-size:   calc(16.5714 * var(--u));
  line-height: calc(26.2857 * var(--u));
  color: var(--desc);
}
.sglp-point-desc span { display: block; }

/* 図版は右カラムの中央に置く。テキストの1行目と上端を揃える */
.sglp-point-fig {
  justify-self: center;
  max-width: calc(400 * var(--u));
}
.sglp-point-fig img { width: 100%; height: auto; }

/* ============================================================
   監修帯
   ============================================================ */
.sglp-supervise {
  position: relative;
  width: 100%;
  height: calc(113.1429 * var(--u));
  margin-top: calc(57.7143 * var(--u));
  background: var(--navy);
}
.sglp-supervise::before,
.sglp-supervise::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: calc(3 * var(--u));
  /* Figma: stroke #2E3C75 / width 3 / dasharray 3 3 */
  background: repeating-linear-gradient(90deg,
    var(--navy) 0, var(--navy) calc(3 * var(--u)),
    transparent calc(3 * var(--u)), transparent calc(6 * var(--u)));
}
.sglp-supervise::before { top: calc(-5 * var(--u)); }
.sglp-supervise::after  { top: calc(114.1429 * var(--u)); }

.sglp-supervise p {
  position: absolute; left: 0;
  top: calc(19 * var(--u));
  width: 100%;
  text-align: center;
  font-weight: 900;
  letter-spacing: calc(-0.84 * var(--u));
  color: var(--yellow);
}
.sglp-supervise .l1 {
  display: block;
  font-size:   calc(28 * var(--u));
  line-height: calc(36.5714 * var(--u));
}
.sglp-supervise .l2 {
  display: block;
  font-size:   calc(23 * var(--u));
  line-height: calc(36.5714 * var(--u));
}

/* ============================================================
   診断ツール（Figma対象外。LP下部に1ページ完結で埋め込む）
   ============================================================ */
.sglp-tool {
  padding: calc(136.4286 * var(--u)) 0 0;
  background: #FFFFFF;
}
.sglp-tool-head { text-align: center; padding: 0 calc(20 * var(--u)) calc(24 * var(--u)); }
.sglp-tool-head .t1 {
  font-weight: 900;
  font-size:   calc(36 * var(--u));
  line-height: calc(43 * var(--u));
  color: var(--ink);
}
.sglp-tool-head .t2 {
  font-weight: 900;
  font-size:   calc(70.8571 * var(--u));
  line-height: calc(85 * var(--u));
  letter-spacing: calc(-2.1257 * var(--u));
  color: var(--orange);
}
/* アンカーで飛んだときに上を少し空ける */
#shindan { scroll-margin-top: calc(16 * var(--u)); }

/* ============================================================
   フッター（Figma対象外）
   ============================================================ */
.sglp-footer {
  margin-top: calc(48 * var(--u));
  padding: calc(26 * var(--u)) calc(20 * var(--u));
  background: var(--navy);
  color: #D8DCEC;
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: 1.9;
}
.sglp-footer a { color: var(--yellow); text-decoration: underline; }
.sglp-footer-name { font-size: calc(14 * var(--u)); font-weight: 900; color: #FFFFFF; }

/* ============================================================
   SP（375基準）
   ============================================================ */
@media (max-width: 1023.98px) {

  .sglp .ln { display: block; }

  /* ---- FV ---- */
  .sglp-fv { height: calc(597 * var(--u)); }
  .sglp-fv-frame {
    width: calc(375 * var(--u));
    margin-left: calc(-187.5 * var(--u));
  }
  .sglp-fv-bg img { left: -87.28%; top: 0; width: 274.57%; height: 100%; inset: auto; }
  .sglp-fv-person {
    left: calc(67 * var(--u));
    top:  calc(170 * var(--u));
    width:  calc(242 * var(--u));
    height: calc(319 * var(--u));
  }
  .sglp-fv-shade { top: calc(358 * var(--u)); height: calc(90 * var(--u)); }

  .sglp-fv-copy { top: calc(22 * var(--u)); }
  .sglp-fv-eyebrow {
    font-size:   calc(15 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .sglp-fv-eyebrow .sp-brand { display: inline; color: #FFFFFF; }
  .sglp-fv-brand { display: none; }
  .sglp-fv-title {
    margin-top: 0;
    font-size:   calc(37 * var(--u));
    line-height: calc(45 * var(--u));
    letter-spacing: calc(-1.11 * var(--u));
  }

  .sglp-fv-badge {
    left: calc(239 * var(--u));
    top:  calc(150 * var(--u));
    width: calc(140 * var(--u));
  }
  .sglp-fv-badge .t1 { font-size: calc(21 * var(--u)); line-height: calc(25 * var(--u)); }
  .sglp-fv-badge .t2 { margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }

  .sglp-bubble { width: calc(115.8 * var(--u)); height: calc(115.8 * var(--u)); }
  .sglp-bubble p {
    font-size:   calc(15.6 * var(--u));
    line-height: calc(20.4 * var(--u));
  }
  .sglp-bubble--data { left: calc(4 * var(--u)); top: calc(143 * var(--u)); }
  .sglp-bubble--data .shape { transform: rotate(-7.59deg); }
  .sglp-bubble--data p { top: calc(27.6 * var(--u)); }

  .sglp-bubble--school { left: calc(6 * var(--u)); top: calc(336 * var(--u)); }
  .sglp-bubble--school .shape {
    left: 0; top: 0;
    width:  calc(130.2 * var(--u));
    height: calc(115.8 * var(--u));
    transform: rotate(-28.12deg);
  }
  .sglp-bubble--school p { top: calc(27.6 * var(--u)); }

  .sglp-fv-result {
    left: calc(263 * var(--u));
    top:  calc(208 * var(--u));
    width: calc(92 * var(--u));
    height: calc(169 * var(--u));
  }

  .sglp-fv-band {
    top: calc(448 * var(--u));
    height: calc(81 * var(--u));
  }
  .sglp-fv-band::before,
  .sglp-fv-band::after {
    height: calc(2 * var(--u));
    background: repeating-linear-gradient(90deg,
      var(--yellow) 0, var(--yellow) calc(2 * var(--u)),
      transparent   calc(2 * var(--u)), transparent calc(4 * var(--u)));
  }
  .sglp-fv-band::before { top: calc(-4 * var(--u)); }
  .sglp-fv-band::after  { top: calc(83 * var(--u)); }
  .sglp-fv-band p {
    top: calc(9 * var(--u));
    left: calc(16 * var(--u));
    width: calc(343 * var(--u));
  }
  .sglp-fv-band .l1 { font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); }
  .sglp-fv-band .l1 .ln { display: block; }
  .sglp-fv-band .l2 { font-size: calc(13 * var(--u)); line-height: calc(21 * var(--u)); }

  /* ---- CTA ---- */
  .sglp-cta { width: calc(343 * var(--u)); height: calc(132 * var(--u)); }
  .sglp-cta-btn { height: calc(82 * var(--u)); border-radius: calc(8 * var(--u)); }
  .sglp-cta-btn .t1 {
    top: calc(6 * var(--u));
    font-size:   calc(16 * var(--u));
    line-height: calc(19 * var(--u));
  }
  .sglp-cta-btn .t2 {
    top: calc(28 * var(--u));
    font-size:   calc(19 * var(--u));
    line-height: calc(25 * var(--u));
    letter-spacing: calc(-0.76 * var(--u));
  }
  .sglp-cta-btn .ar {
    top: calc(27 * var(--u));
    width:  calc(14.04 * var(--u));
    height: calc(28.08 * var(--u));
  }
  .sglp-cta-btn .ar-l { left:  calc(14 * var(--u)); }
  .sglp-cta-btn .ar-r { right: calc(14 * var(--u)); }
  .sglp-cta-note { top: calc(88 * var(--u)); }
  .sglp-cta-note .n1 { font-size: calc(11 * var(--u)); line-height: calc(13 * var(--u)); }
  .sglp-cta-note .n2 { margin-top: calc(3 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }

  .sglp-cta--1 { margin-top: calc(-48 * var(--u)); }
  .sglp-cta--2 { margin-top: calc(14 * var(--u)); }
  .sglp-cta--3 { margin-top: calc(43 * var(--u)); }

  /* ---- お悩み ---- */
  .sglp-worry {
    width: calc(343 * var(--u));
    height: calc(448 * var(--u));
    margin-top: calc(36 * var(--u));
  }
  .sglp-worry-card { width: calc(166 * var(--u)); height: calc(104 * var(--u)); }
  .sglp-worry-card--1 { left: calc(88.5 * var(--u)); top: 0; }
  .sglp-worry-card--2 { left: 0; top: calc(118 * var(--u)); }
  .sglp-worry-card--3 { left: calc(177 * var(--u)); top: calc(118 * var(--u)); }

  .sglp-worry-card .q { font-size: calc(110 * var(--u)); line-height: calc(132 * var(--u)); top: calc(-19 * var(--u)); }
  .sglp-worry-card--1 .q { font-size: calc(130 * var(--u)); line-height: calc(156 * var(--u)); top: calc(-32 * var(--u)); }

  .sglp-worry-card .br {
    top: calc(15 * var(--u));
    width:  calc(11.2 * var(--u));
    height: calc(73.92 * var(--u));
    border-top-width:    calc(3.36 * var(--u));
    border-bottom-width: calc(3.36 * var(--u));
  }
  .sglp-worry-card .br-l { left: calc(4 * var(--u)); border-left-width:  calc(3.36 * var(--u)); }
  .sglp-worry-card .br-r { left: calc(151 * var(--u)); border-right-width: calc(3.36 * var(--u)); }

  .sglp-worry-card .tx {
    top: calc(18 * var(--u));
    font-size:   calc(13 * var(--u));
    line-height: calc(23 * var(--u));
  }

  .sglp-worry-lead1 {
    top: calc(294 * var(--u));
    font-size:   calc(22 * var(--u));
    line-height: calc(36 * var(--u));
  }
  .sglp-worry-lead1 .mk { font-size: calc(30 * var(--u)); }

  .sglp-worry-lead2 {
    top: calc(342 * var(--u));
    font-size:   calc(21 * var(--u));
    line-height: calc(33 * var(--u));
    letter-spacing: calc(-0.84 * var(--u));
  }
  .sglp-worry-lead2 .brand { font-size: calc(24 * var(--u)); }

  .sglp-worry-v {
    left: calc(21 * var(--u));
    top:  calc(422 * var(--u));
    width:  calc(300 * var(--u));
    height: calc(26 * var(--u));
  }
  .sglp-worry-v img { top: calc(-0.9 * var(--u)); height: calc(29.44 * var(--u)); }

  /* ---- なにが分かる ---- */
  .sglp-what {
    width: 100%;
    height: calc(112 * var(--u));
    margin-top: calc(54 * var(--u));
  }
  .sglp-what .t1 {
    top: calc(31 * var(--u));
    font-size:   calc(18 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: calc(-0.54 * var(--u));
  }
  .sglp-what .t2 {
    top: calc(55 * var(--u));
    font-size:   calc(34 * var(--u));
    line-height: calc(41 * var(--u));
    letter-spacing: calc(-1.02 * var(--u));
  }
  .sglp-what-illust--l {
    left: calc(16 * var(--u));
    top:  calc(14 * var(--u));
    width:  calc(40.9 * var(--u));
    height: calc(89.46 * var(--u));
  }
  .sglp-what-illust--r {
    left: calc(318 * var(--u));
    top:  calc(14 * var(--u));
    width:  calc(28.8 * var(--u));
    height: calc(89.46 * var(--u));
  }
  .sglp-rule { height: calc(4 * var(--u)); margin-top: calc(-8 * var(--u)); }

  /* ---- POINT（テキスト→図版の縦積み） ---- */
  .sglp-point {
    width: calc(343 * var(--u));
    margin-top: calc(32 * var(--u));
  }
  .sglp-point-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0;
  }
  .sglp-point-item + .sglp-point-item { margin-top: calc(40 * var(--u)); }
  .sglp-point-fig { max-width: none; margin-top: calc(16 * var(--u)); }

  .sglp-point-num {
    font-size:   calc(13 * var(--u));
    line-height: calc(36 * var(--u));
  }
  .sglp-point-num b { font-size: calc(30 * var(--u)); }

  .sglp-point-title,
  .sglp-point-item--2 .sglp-point-title,
  .sglp-point-item--3 .sglp-point-title {
    margin-top: calc(6 * var(--u));
    font-size:   calc(20 * var(--u));
    line-height: calc(28 * var(--u));
    letter-spacing: calc(-0.6 * var(--u));
  }
  .sglp-point-desc {
    margin-top: calc(4 * var(--u));
    font-size:   calc(13 * var(--u));
    line-height: calc(21 * var(--u));
  }

  /* ---- 監修帯 ---- */
  .sglp-supervise {
    height: calc(110 * var(--u));
    margin-top: calc(57 * var(--u));
  }
  .sglp-supervise::before,
  .sglp-supervise::after {
    height: calc(2 * var(--u));
    background: repeating-linear-gradient(90deg,
      var(--navy) 0, var(--navy) calc(2 * var(--u)),
      transparent calc(2 * var(--u)), transparent calc(4 * var(--u)));
  }
  .sglp-supervise::before { top: calc(-4 * var(--u)); }
  .sglp-supervise::after  { top: calc(112 * var(--u)); }
  .sglp-supervise p {
    top: calc(23 * var(--u));
    left: calc(16 * var(--u));
    width: calc(343 * var(--u));
    letter-spacing: calc(-0.36 * var(--u));
  }
  .sglp-supervise .l1 { font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); }
  .sglp-supervise .l1 .ln { display: block; }
  .sglp-supervise .l2 { font-size: calc(13 * var(--u)); line-height: calc(21 * var(--u)); }

  /* ---- 診断ツール ---- */
  .sglp-tool { padding-top: calc(42 * var(--u)); }
  .sglp-tool-head .t1 { font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
  .sglp-tool-head .t2 { font-size: calc(34 * var(--u)); line-height: calc(41 * var(--u)); }
  .sglp-footer { font-size: calc(12 * var(--u)); }
}