@charset "utf-8";

/*=============================================================
  SPACECOOL LP — lp.css
  対象: #sc-hero 〜 #sc-faq（ヘッダー・フッター・padding0 は navi.css / style.css が担当）
=============================================================*/

/* ─── Design Tokens ────────────────────────────────────────── */
:root {
  --sc-blue-dark:    #0d2b5e;   /* CTAセクション背景 */
  --sc-blue-primary: #1B4F8A;   /* Aboutセクション背景・数字バッジ */
  --sc-blue-mid:     #1E6DB5;   /* ミディアムブルー */
  --sc-blue-light:   #00A9E0;   /* ライトブルー */
  --sc-orange:       #F47920;   /* CTAボタン・アクセント */
  --sc-text-dark:    #1a1a1a;
  --sc-text-body:    #333333;
  --sc-text-mid:     #555555;
  --sc-text-light:   #888888;
  --sc-bg-section:   #EBF4FA;   /* Reason・薄いブルー */
  --sc-bg-white:     #ffffff;
  --sc-border:       #D0E4F0;
  --sc-max-width:    1200px;
  --sc-inner-width:  1120px;
  --sc-section-py:   80px;
}

/* ─── navi.css 競合解消（spacecool LP 専用） ────────────────── */

/* .bg_bl: navi.css が ≤960px で常時 display:block にするメニューオーバーレイ。
   spacecool.html では JS によるトグルが不完全なため LP 側でデフォルト非表示にし、
   JS が inline style で show/hide できるよう !important は使わない。
   → JS が display:block を直接設定する場合は inline style が CSS に勝つ。 */
.bg_bl {
  display: none;
}

/* navi.css の max-width:960px と min-width:960px が 960px で重複競合する。
   min-width:960px 側の max-width:960px による上書きを全て強制解除する。
   → PC 幅では常に PC ナビスタイルを維持 */
@media screen and (min-width: 960px) {
  /* ハンバーガーボタンを隠す */
  .menu_btn {
    display: none !important;
  }


  /* #g_navi を PC 横並びナビとして正しく表示 */
  #g_navi {
    position: absolute !important;  /* fixed → absolute（ヘッダー内に収める）*/
    top: 20px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    padding-left: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }

  /* ul を横並びに */
  #g_navi ul {
    display: flex !important;
    flex-flow: row !important;
    min-height: auto !important;
    justify-content: flex-end !important;
  }

  #g_navi ul li {
    display: inline !important;
  }

  /* オーバーレイは常時非表示 */
  .bg_bl {
    display: none !important;
  }
}

/* ─── 共通リセット（lp.css スコープ内のみ） ────────────────── */
[id^="sc-"] *,
[id^="sc-"] *::before,
[id^="sc-"] *::after {
  box-sizing: border-box;
}

/* style.css の section { padding: var(--space-large) } を全セクションで打ち消す */
section[id^="sc-"] {
  padding: 0;
}

[id^="sc-"] img {
  max-width: 100%;
  height: auto;
  display: block;
}

[id^="sc-"] h1,
[id^="sc-"] h2,
[id^="sc-"] h3,
[id^="sc-"] h4,
[id^="sc-"] p {
  margin: 0;
  padding: 0;
}

[id^="sc-"] ul,
[id^="sc-"] li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ─── 共通ラッパー ─────────────────────────────────────────── */
.sc-section-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: var(--sc-section-py) 40px;
}

/* ─── 共通見出しブロック ───────────────────────────────────── */
.sc-heading-block {
  margin-bottom: 60px;
}

.sc-heading-block h2 {
  /* css/spacecool/style.css の `main h2 { display: flex; flex-direction: column-reverse }`
     を無効化。display: block に戻して通常のインライン描画に戻す。 */
  display: block;
  flex-direction: unset;
  font-family: "Noto Sans JP", "游ゴシック", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #002878;
  line-height: 1.3;
  margin-bottom: 12px;
}

.sc-heading-block__sub {
  font-size: clamp(15px, 1.67vw, 20px);
  color: #344054;
}

/* [id^="sc-"] p { margin:0 } より特異性を高めて margin-bottom を確保 */
.sc-heading-block .sc-heading-block__sub {
  margin-bottom: 12px;
}

.sc-heading-block__accent {
  width: 60px;
  height: 4px;
  background: #73dae6;
  border-radius: 2px;
  margin-top: 0;
  margin-bottom: 0;
}

/* 白地見出し（Aboutセクション用） */
.sc-heading-block--white h2,
.sc-heading-block--white .sc-heading-block__sub {
  color: #fff;
}

.sc-heading-block--white .sc-heading-block__accent {
  background: #fff;
}

/* ─── 共通ボタン ───────────────────────────────────────────── */
.sc-btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
  cursor: pointer;
}

.sc-btn--orange {
  background: var(--sc-orange);
  color: #fff;
}

.sc-btn--orange:hover {
  opacity: 0.85;
  color: #fff;
}

.sc-btn--lg {
  display: block;
  max-width: 848px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 56px;
  font-size: clamp(20px, 2.2vw, 32px);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(250, 100, 50, 0.4);
}

#sc-cta .sc-btn--orange { background: #fa6432; }

/* ─── 共通注記テキスト ─────────────────────────────────────── */
.sc-disclaimer {
  font-size: 12px;
  color: var(--sc-text-light);
  margin-top: 24px;
  line-height: 1.8;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC01: Hero / FV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━ Hero セクション（PC: 1440×801px 基準） ━━━ */
/*
  hero_bg.jpg: 2880×1568px（Retina 2x）= 実質 1440×784px、アスペクト比 1568/2880

  【min-height の考え方】
  min-height を実際の画像比率 (1568/2880) で計算すると
  「コンテナ比率 = 画像比率 = 1.836」が常に成立する。
  このとき background-size: cover は画像をぴったり収めるため
  上下・左右ともにクリップなし → バッジも帯も出ない。
  コンテンツがそれより高ければセクションが自然に伸び、
  cover が全面を埋めるため引き続き帯なし。
  上限 1000px（約 1837px 幅まで比例を維持）。

  【background-position: right top の意味】
  コンテナが超広幅（>1837px）で上限に達したとき
  cover は幅基準スケールになり右側から優先的に表示。
  → 紙ロール・SPACECOOLロゴ（右側）常時全表示
  → 左の青グラデーション端がはみ出ても background-color（同系ブルー）が補完
*/
#sc-hero {
  position: relative;
  padding: 0;
  /* 実画像比率で min-height → cover がぴったり → クリップなし・バッジ全表示 */
  min-height: clamp(400px, calc(100vw * 1568 / 2880), 1000px);
  background-color: var(--sc-blue-primary);
  background-image: url("../../img/spacecool-lp/hero_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  overflow: hidden;
}

.sc-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  /* Figma PC: pt-[70px] pb-[88px] に合わせた clamp
     top: 40px@825px ↔ 70px@1440px  /  bottom: 50px@825px ↔ 88px@1440px
     horizontal: PC は padding-left/right:0（min-width:960px で上書き）*/
  padding: clamp(40px, 4.86vw, 70px) clamp(20px, 2.8vw, 40px) clamp(50px, 6.11vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 30px);
  min-height: clamp(400px, calc(100vw * 1568 / 2880), 1000px);
  box-sizing: border-box;
}

/* テキストエリア（上部グループ） */
.sc-hero__text-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #fff;
  /* max-width は設定しない：
     見出しに明示的 <br> があるため自然に3行に収まる。
     Noto Sans JP Weight 900 の実際の字幅（≈58px@55px）が 560px 制約を超えて
     折り返す問題を防ぐため制限なし。 */
}

/* リードテキスト（正規販売店テキスト） */
.sc-hero__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: #fff;
}

/* 見出し */
.sc-hero__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(30px, 3.8vw, 55px);   /* 30px@789px ↔ 55px@1440px */
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  text-shadow: 3px 5px 10px rgba(0, 0, 0, 0.4);
}

/* 強調テキスト（オレンジ） */
.sc-hero__highlight {
  color: #fa6432;
}

/* ラベルグループ（アクセントライン + ラベルテキスト） */
.sc-hero__label-group {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.sc-hero__accent-line {
  width: 80px;
  height: 3px;
  background: #73dae6;
}

.sc-hero__label {
  font-size: 20px;
  letter-spacing: 0.8px;   /* Figma PC: tracking-[0.8px] */
  color: #73dae6;
  line-height: 1.4;
}

.sc-hero__label sup {
  font-size: 9px;
  line-height: 0;
  vertical-align: super;
}

/* 本文（廃止 — MVリニューアルで削除。クラス定義は互換のため残す） */
.sc-hero__body {
  display: none;
}

/* CTAエリア（下部グループ） */
.sc-hero__cta-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* 免責 */
.sc-hero__disclaimer {
  font-size: 13px;
  color: #c8d8e8;
  line-height: 1.5;
  max-width: 294px;
}

/* PC（1025px以上）: Hero テキストを左寄せ & ヘッダー被り防止
   ・background-position: left top → 画像左端（青グラデ〜バッジ）を基準に表示
   ・padding-top: 106px → ヘッダー高さ 90px + 余白 16px
   ・テキストエリア幅制限なし（Figma設計: h1=1022px, text-shadow で可読性確保）
   ※ このブロックをベーススタイルの後に置くことでカスケード上書き確実。 */
@media screen and (min-width: 1025px) {
  #sc-hero {
    background-size: cover;
    background-position: left top;
  }
  .sc-hero__inner {
    padding-left: 0;
    padding-right: 0;
    padding-top: 106px;
  }
  /* font-size・text-area 幅はベーススタイルのまま維持
     base: clamp(30px, 3.8vw, 55px) → Figma PC 55px に対応
     Figma h1 = 1022px 幅, text-shadow で背景バッジ上でも可読性を確保 */
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC02: Issue（課題）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-issue {
  background: var(--sc-bg-white);
  position: relative;
  padding-bottom: 0;
}

/* 3カードレイアウト */
.sc-issue__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 79px;
}

.sc-issue__card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.22);
}

.sc-issue__card-img {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.sc-issue__card-img img {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sc-issue__card-title {
  font-size: 20px;
  font-weight: 500;
  color: #101828;
  margin-bottom: 8px;
}

.sc-issue__card-accent {
  width: 40px;
  height: 3px;
  background: var(--sc-orange);
  border-radius: 2px;
  margin: 8px 0 12px;
}

.sc-issue__card p {
  font-size: 16px;
  color: #344054;
  line-height: 1.8;
}

/* ブリッジテキスト — Figma: 背景色なし・白地にテキストのみ */
.sc-issue__bridge {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #0076c6;
  padding: 0;
}

.sc-issue__bridge strong {
  display: block;
}

.sc-issue__wave {
  height: 100px;
  background: #0058A3;
  clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
  /* margin は about 側の margin-top でのみ管理（collapsing 対策） */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC03: About（SPACECOOLとは）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-about {
  background: #0058A3;
  color: #fff;
  margin-top: -4px;  /* issue/about 境界の白線を完全に塞ぐ（subpixel対策、wave側margin除去と対でCollapsing回避） */
}

#sc-about .sc-section-inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* About: subテキストはFigmaで18px（issue: 20pxと異なる） */
#sc-about .sc-heading-block__sub {
  font-size: 18px;
}

.sc-about__layout {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 40px;
  align-items: center;
}

/* 左カラム：ダイアグラム */
.sc-about__left figure {
  margin: 0;
}

.sc-about__left img {
  width: 100%;
  border-radius: 4px;
}

.sc-about__left figcaption {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-top: 12px;
  line-height: 1.7;
}

/* 右カラム：説明 */
.sc-about__housesha {
  margin-bottom: 46px;
}

.sc-about__housesha h3 {
  font-size: 32px;
  font-weight: 700;
  color: #ebf5ff;
  margin-bottom: 15px;
}

.sc-about__housesha p {
  font-size: 16px;
  color: rgba(255,255,255,0.88);
  line-height: 1.8;
  padding-left: 10px;
}

.sc-about__features {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sc-about__features hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,1);
  margin: 0;
}

.sc-about__feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
}

.sc-about__feature-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-about__feature-num span {
  font-family: "Roboto", "Jost", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #e46515;
}

.sc-about__feature-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ebf5ff;
  margin-bottom: 12px;
}

.sc-about__feature-text p {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  line-height: 1.54;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC04: Reason（選ばれる5つの理由）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* reason + movie 共通ラッパー: 波紋+グラデーションを両セクションにまたがる1背景として配置 */
.sc-reason-movie-wrapper {
  /* 背景はなし。各セクションに直接指定 */
  overflow: hidden;
}

#sc-reason {
  /* Figma: グラデーション fill + reason_bg wave オーバーレイ
     wave offset: Figma座標 reason_bg(y=2846) - section_reason(y=2785) = 61px
     background-color: #fff を明示することでグラデーション末尾 rgba(255,255,255,0.3) が
     body の灰色背景に溶けず、Figma 通り右下が純白になり波紋が正しく見える */
  background-color: #ffffff;
  background-image:
    linear-gradient(147.02deg, rgb(216, 241, 255) 8.531%, rgba(236, 248, 255, 0.65) 71.565%, rgba(255, 255, 255, 0.3) 94.26%),
    url('../../img/spacecool-lp/reason_bg.png');
  background-position: 0 0, -259px 61px;
  background-size: 100% 100%, 2060px 2060px;
  background-repeat: no-repeat, no-repeat;
}

/* Reason: subテキストはFigmaで18px */
#sc-reason .sc-heading-block__sub {
  font-size: 18px;
}

.sc-reason__cards {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.sc-reason__card {
  display: grid;
  grid-template-columns: 480px 1fr;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.07);
}

/* 偶数カード（画像右） */
.sc-reason__card--reverse {
  grid-template-columns: 1fr 480px;
}

.sc-reason__card-img {
  overflow: hidden;
  height: 260px;
}

.sc-reason__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc-reason__card-body {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.sc-reason__card-catch {
  margin-bottom: 11px;
}

.sc-reason__card-catch-text {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #0076c6;
  line-height: 1.2;
}

.sc-reason__card-catch-accent {
  width: 40px;
  height: 3px;
  background: #0076c6;
  border-radius: 2px;
  margin-top: 5px;
}

.sc-reason__card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 5px;
  line-height: 1.5;
}

.sc-reason__card-body > p {
  font-size: 16px;
  color: #1a202c;
  line-height: 1.8;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC05: Movie（製品紹介動画）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-movie {
  /* Figma: section_movie は fill なし（transparent）。波紋は白地の上にうっすら乗る。
     background-color: #fff を明示することで body の灰色が透けて黄みがかるのを防ぐ */
  background-color: #ffffff;
  background-image: url('../../img/spacecool-lp/reason_bg.png');
  background-position: -259px 0;
  background-size: 2060px 2060px;
  background-repeat: no-repeat;
}

/* Movie: subテキストはFigmaで18px */
#sc-movie .sc-heading-block__sub {
  font-size: 18px;
}

/* Movie: heading → video 間のgapはFigmaで64px */
#sc-movie .sc-heading-block {
  margin-bottom: 64px;
}

.sc-movie__wrapper {
  display: flex;
  justify-content: center;
}

.sc-movie__embed {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.18);
  aspect-ratio: 16 / 9;
  background: #101828;
}

.sc-movie__embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC06: Case（導入事例）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-case .sc-heading-block { margin-bottom: 64px; }
#sc-case .sc-heading-block h2 { font-size: 32px; }
#sc-case .sc-heading-block__sub { font-size: 16px; }
#sc-case .sc-heading-block .sc-heading-block__sub { margin-top: 12px; margin-bottom: 0; }

#sc-case {
  background: #f5f7fc;
  position: relative;
  overflow: hidden;
}

/* case_bg（Figma 1440px: left:308.5px top:-4px w:1203px h:2414px。SVGにブリード含むため左170px・上166px補正）
   left: calc(50% - 582px) → 1440px幅で 720-582=138px, ビューポートに追従 */
#sc-case::before {
  content: "";
  position: absolute;
  left: calc(50% - 582px);
  top: -170px;
  width: 1543px;
  height: 2754px;
  background: url('../../img/spacecool-lp/case_bg.svg') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* case_bg 右側延長: ビューポートが1582px超で生じるポリゴン右端の空白を補填
   ポリゴン右端 = calc(50% + 791px)（= SVG left + 1373px）
   1440px時: 720+791=1511px > section width ≈ 1425px → clipped ✅（デザイン通り）
   1920px時: 960+791=1751px → 1905px右端まで同グラデで補填 */
#sc-case::after {
  content: "";
  position: absolute;
  left: calc(50% + 791px);
  right: 0;
  top: -170px;
  height: 2754px;
  /* SVGグラデと同一の縦グラデ（y166〜y2580 ÷ 2754px → 6%〜94%） */
  background: linear-gradient(180deg, #FFF8E1 6%, #51ABDF 94%);
  pointer-events: none;
  z-index: 0;
}

#sc-case .sc-section-inner {
  position: relative;
  z-index: 1;
}

.sc-case__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  background: #f2f4f7;
}

.sc-case__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.sc-case__photo {
  height: 343px;
  overflow: hidden;
  flex-shrink: 0;
}

.sc-case__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 実績ハイライト帯 */
.sc-case__hero-strip {
  background: #002878;
  color: #fff;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: normal;
  flex-shrink: 0;
}

.sc-case__hero-strip span {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}

.sc-case__num {
  font-family: "Roboto", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: #73dae6;
}

.sc-case__body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-case__company {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  line-height: 1.5;
}

.sc-case__comment-row {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: flex-start;
}

.sc-case__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sc-bg-section);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B4F8A'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.sc-case__comment-block {
  flex: 1;
}

.sc-case__person {
  font-size: 16px;
  font-weight: 500;
  color: #99a3b3;
  margin-bottom: 4px;
}

.sc-case__comment-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
}

.sc-case__comment-block p {
  font-size: 16px;
  color: #344054;
  line-height: 1.75;
}

.sc-case__divider {
  border: none;
  border-top: 1px solid #e4e7ec;
  margin: 0;
}

/* データテーブル */
.sc-case__table {
  width: 100%;
  border-collapse: collapse;
  background: #f8f9fa;
  border-radius: 6px;
  overflow: hidden;
}

.sc-case__table tr {
  border-bottom: 1px solid #e4e7ec;
}

.sc-case__table tr:last-child {
  border-bottom: none;
}

.sc-case__table th,
.sc-case__table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  font-size: 16px;
}

.sc-case__table th {
  width: 72px;
  color: #99a3b3;
  font-weight: 400;
  white-space: nowrap;
  border-right: 1px solid #e0e4e9;
}

.sc-case__table td {
  color: #344054;
  font-weight: 500;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC07: Flow（導入までの流れ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-flow .sc-heading-block h2 { font-size: 32px; }
#sc-flow .sc-heading-block__sub { font-size: 16px; }
#sc-flow .sc-heading-block .sc-heading-block__sub { margin-top: 12px; margin-bottom: 0; }

#sc-flow {
  background: var(--sc-bg-white);
}

.sc-flow__steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.sc-flow__step {
  flex: 1;
  text-align: center;
  padding: 32px 20px;
  position: relative;
  background: #ebf5ff;
  border: 1px solid #d1e8ff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 290px;
}

.sc-flow__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #002878;
  color: #fff;
  font-family: "Roboto", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  top: -14px;
  left: -7px;
}

.sc-flow__step-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-flow__step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sc-flow__step-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.sc-flow__step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  line-height: 1.5;
}

.sc-flow__step p {
  font-size: 16px;
  color: #344054;
  line-height: 1.75;
}

.sc-flow__arrow {
  flex-shrink: 0;
  font-size: 28px;
  color: #4a5568;
  padding-top: 0;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  align-self: center;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC08: CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-cta {
  background: #002878;
  position: relative;
  overflow: hidden;
}

/* 装飾サークル（Figma: deco-1/2/3 — 左上コーナーを起点に3つの同心円）
   deco-1: 560px rgba(0,145,227,0.18)
   deco-2: 360px rgba(115,218,230,0.13)
   deco-3: 180px rgba(115,218,230,0.09)
   全て top-left = (23px, 0) で揃える */
.sc-cta__deco {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.sc-cta__deco-1,
.sc-cta__deco-2,
.sc-cta__deco-3 {
  position: absolute;
  left: 23px;
  top: 0;
  border-radius: 50%;
}

.sc-cta__deco-1 {
  width: 560px;
  height: 560px;
  background: rgba(0, 145, 227, 0.18);
}

.sc-cta__deco-2 {
  width: 360px;
  height: 360px;
  background: rgba(115, 218, 230, 0.13);
}

.sc-cta__deco-3 {
  width: 180px;
  height: 180px;
  background: rgba(115, 218, 230, 0.09);
}

#sc-cta .sc-section-inner {
  padding-top: 60px;
  padding-bottom: 60px;
}

.sc-cta__content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.sc-cta__content h2 {
  display: block;
  flex-direction: unset;
  font-size: clamp(24px, 3.05vw, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
  margin-bottom: 20px;
}

.sc-cta__sub {
  font-size: clamp(13px, 1.1vw, 16px);
  color: #c7d1e3;
  margin-bottom: 40px;
}

/* SP のみ表示する改行（PC では非表示） */
.sc-sp-br {
  display: none;
}

.sc-cta__phone {
  margin-bottom: 40px;
}

.sc-cta__phone-label {
  font-size: 14px;
  color: #c7d1e3;
  margin-bottom: 8px;
}

.sc-cta__phone-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  text-decoration: none;
  cursor: pointer;
  /* タップ領域を広げる */
  padding: 8px 16px;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}

.sc-cta__phone-row:hover,
.sc-cta__phone-row:active {
  opacity: 0.8;
}

.sc-cta__phone-icon {
  width: 50px;
  height: 50px;
  background: #0091e3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sc-cta__phone-number {
  font-family: "Jost", "Oswald", sans-serif;
  font-size: clamp(28px, 2.78vw, 40px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1;
}

.sc-cta__phone-number:hover {
  color: rgba(255,255,255,0.8);
}

.sc-cta__phone-note {
  font-size: 13px;
  color: #c7d1e3;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEC09: FAQ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sc-faq { background: var(--sc-bg-white); }
#sc-faq .sc-heading-block { margin-bottom: 45px; }
#sc-faq .sc-heading-block h2 { font-size: 32px; }
#sc-faq .sc-heading-block__sub { font-size: 16px; }
#sc-faq .sc-heading-block .sc-heading-block__sub { margin-top: 7px; margin-bottom: 0; }

.sc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-faq__item {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
  overflow: hidden;
}

.sc-faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.sc-faq__question:hover {
  background: var(--sc-bg-section);
}

.sc-faq__q-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0091e3;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Jost", sans-serif;
}

.sc-faq__question-text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  line-height: 1.6;
}

.sc-faq__toggle {
  flex-shrink: 0;
  font-size: 14px;
  color: #0091e3;
  transition: transform 0.2s;
  line-height: 1;
}

.sc-faq__question.open .sc-faq__toggle {
  transform: rotate(180deg);
}

.sc-faq__answer {
  display: none;
  border-top: 1px solid #e4e7ec;
  padding: 20px 32px 28px 84px;
}

.sc-faq__answer p {
  font-size: 16px;
  color: #344054;
  line-height: 1.85;
}

#sc-faq .sc-disclaimer {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 24px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — SP（767px 以下）: 各セクション縦積みレイアウト
   タブレット（768〜1024px）はPCレイアウト維持のためここには含めない
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 767px) {

  .sc-section-inner {
    padding: 60px 24px;
  }

  .sc-heading-block {
    margin-bottom: 40px;
  }

  /* h2: Figma SP 24px
     セクション固有の #id 指定（case/flow/faq）は特異性が高いため個別に上書きする */
  .sc-heading-block h2,
  #sc-case .sc-heading-block h2,
  #sc-flow .sc-heading-block h2,
  #sc-faq .sc-heading-block h2 {
    font-size: 24px;
  }

  /* Hero — 基底の 100% auto / no-repeat / left bottom で全幅対応済み。個別上書き不要 */

  /* Issue */
  .sc-issue__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;   /* PCの79px → SP用に縮小 */
  }

  p.sc-issue__bridge {
    margin: 0 -24px;
    padding: 8px 24px;
    line-height: 1.2;
    font-size: 18px;
  }

  /* Issue — SP フォントサイズ（Figma SP: card-title 18px / card p 15px） */
  .sc-issue__card-title {
    font-size: 18px;
  }

  .sc-issue__card p {
    font-size: 15px;
  }

  /* About */
  .sc-about__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* About — SP フォントサイズ（Figma SP: h3 20px / num-badge 14px / feature h4 17px） */
  .sc-about__housesha h3 {
    font-size: 20px;
  }

  .sc-about__feature-num span {
    font-size: 14px;
  }

  .sc-about__feature-text h4 {
    font-size: 17px;
  }

  /* Reason — 縦積み、--reverseは画像を上へ */
  .sc-reason__card,
  .sc-reason__card--reverse {
    display: flex;
    flex-direction: column;
  }

  .sc-reason__card--reverse .sc-reason__card-img {
    order: -1;
  }

  .sc-reason__card-img {
    /* 実画像が全て4:3（1477×1108等）なので aspect-ratio で合わせ、object-fit:cover による
       上下トリミングを最小化する。height固定（180px）より大きくなるため画像が切れない */
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .sc-reason__card-body {
    padding: 16px 20px 20px;
    gap: 8px;
  }

  .sc-reason__card-catch-text {
    font-size: 24px;
  }

  .sc-reason__card-body h3 {
    font-size: 17px;
  }

  .sc-reason__card-body > p {
    font-size: 15px;
  }

  /* Reason+Movie wrapper — SP: 最密wave領域(original x=384-448)をビューポート内に移動
     PC: element x=513-641に表示 → SP 375pxでは画面外のため offset調整
     -723px → dense area(CSS x=773-901) が element x=50-178 に表示される */
  .sc-reason-movie-wrapper {
    background-position: -723px 0px, 0% 0%;
  }

  /* Case */
  .sc-case__grid {
    grid-template-columns: 1fr;
  }

  /* Case photo — SP: 写真本来の比率(8:5)を維持し全体表示 */
  .sc-case__photo {
    height: auto;
    aspect-ratio: 8 / 5;
  }

  /* Case bg — SP: 左端から開始（Figma SP: left:0）、SVGブリード分オフセット */
  #sc-case::before {
    left: -170px;
    top: -166px;
    width: 777px;
    height: 3281px;
  }

  /* CTA deco — SP: Figma SP sizes（220/142/71px、top-left に-10px overflow） */
  .sc-cta__deco-1 {
    left: -10px;
    top: -10px;
    width: 220px;
    height: 220px;
  }
  .sc-cta__deco-2 {
    left: -10px;
    top: -10px;
    width: 142px;
    height: 142px;
  }
  .sc-cta__deco-3 {
    left: -10px;
    top: -10px;
    width: 71px;
    height: 71px;
  }

  /* Flow — SP: 横行レイアウト（num左・テキスト右）、アイコンなし、縦矢印 */
  .sc-flow__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sc-flow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 28px;
    transform: rotate(90deg);
    font-size: 28px;   /* Figma SP: 28px */
    align-self: center;
  }

  .sc-flow__step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    min-height: auto;
    text-align: left;
  }

  /* num-circle — SP: flow内へ戻す（absolute解除）、40×40px */
  .sc-flow__step-num {
    position: static;
    top: auto;
    left: auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* SP: アイコン非表示 */
  .sc-flow__step-icon {
    display: none;
  }

  .sc-flow__step-text {
    gap: 6px;
  }

  .sc-flow__step h3 {
    font-size: 17px;
    color: #002878;
    text-align: left;
  }

  .sc-flow__step p {
    font-size: 15px;
    color: #333;
    text-align: left;
  }

  /* CTA */
  .sc-cta__content h2 {
    font-size: 24px;   /* Figma SP: 24px */
  }

  /* SP のみ改行を表示 */
  .sc-sp-br {
    display: block;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — Tablet（768px〜1024px）
   ・PCレイアウト完全維持（コンテンツ縦積みなし）
   ・Hero: PC用背景画像(hero_bg.jpg)を left top で表示、テキスト左寄せ
   ・ヘッダー高さ: 768-959px = 52px / 960-1024px = 90px（style.css起因）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* Hero — 背景画像を全幅表示（100% auto）して右側の製品画像・バッジを切らない
     ・background-size: 100% auto → 幅=viewport幅ぴったり、高さは比例スケール
     ・min-height = 幅 × (784/1440) → 画像の実際のアスペクト比に合わせた高さ
       768px → 418px / 790px → 430px / 1024px → 557px
     ・PC媒体(1025px+) の padding-left:0 上書きは別ブロックなので干渉なし */
  #sc-hero {
    background-image: url("../../img/spacecool-lp/hero_bg.jpg");
    background-size: 100% auto;
    background-position: left top;
    min-height: clamp(380px, calc(100vw * 784 / 1440), 560px);
  }

  .sc-hero__inner {
    min-height: clamp(380px, calc(100vw * 784 / 1440), 560px);
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
    /* ヘッダー52px(768-959px) + 8px余白 = 60px */
    padding-top: 60px;
    padding-bottom: 20px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }

  /* テキストエリアを背景青エリア内に収める */
  .sc-hero__text-area {
    max-width: 360px;
    gap: 10px;
  }

  /* h1フォント: タブレット幅に合わせて調整
     768px→18px / 790px→19px / 1024px→25px */
  .sc-hero__heading {
    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.25;
    text-shadow: 3px 5px 10px rgba(0, 0, 0, 0.4);
  }

  .sc-hero__lead {
    font-size: 13px;
    line-height: 1.6;
  }

  .sc-hero__label {
    font-size: 13px;
  }

  .sc-hero__cta-area {
    gap: 8px;
  }

  /* Case photo — タブレットでも写真の8:5比率を維持し全体表示 */
  .sc-case__photo {
    height: auto;
    aspect-ratio: 8 / 5;
  }

  /* Reason — タブレット幅に比例してカード画像列を縮小
     PC: 480px/1120px=43% → タブレット: 40%固定で文字列が潰れないように */
  .sc-reason__card {
    grid-template-columns: 40% 1fr;
  }

  .sc-reason__card--reverse {
    grid-template-columns: 1fr 40%;
  }

  .sc-reason__card-body {
    padding: 24px 28px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — Tablet narrow（768px〜940px）
   About セクションのみ縦積みレイアウト（SP相当）
   他のセクションは 768〜1024px ブロックを継承
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (min-width: 768px) and (max-width: 940px) {

  /* About — 580px固定列がタブレット幅に対して広すぎるため縦積みに */
  .sc-about__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — Tablet narrow Issue（768px〜860px）
   Issue カードのみ SP 相当の縦積みレイアウト
   他のセクション・他デバイスに影響なし
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (min-width: 768px) and (max-width: 860px) {

  /* Issue cards — 3カラム → 1カラム縦積み（SP相当） */
  .sc-issue__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  /* bridge テキストに縦方向余白を追加（SP相当） */
  p.sc-issue__bridge {
    padding: 32px 0;
  }

}

/* タブレット大（960〜1024px）: ヘッダーが90px（style.css: min-width:960px）
   → padding-top を106px（90+16）に上書き */
@media screen and (min-width: 960px) and (max-width: 1024px) {
  .sc-hero__inner {
    padding-top: 106px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — SP（767px 以下）
   タブレット（768px〜1024px）は上のブロックで上書きされるため
   481〜767px もここでSPスタイルが適用される
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 767px) {

  .sc-section-inner {
    padding: 48px 16px;
  }

  /* Hero — SP (Figma: 375×721px)
     hero_sp_bg.jpg: 750×1442px（Retina 2x）= 実質 375×721px
     background-size: 100% auto：横幅100%固定、縦は比率スケール。
     min-height 下限を 400px に下げることで 375px 未満の端末でも
     「コンテナ高さ = 画像比例高さ」が一致し下部の青帯が出ない。 */
  #sc-hero {
    background-image: url("../../img/spacecool-lp/hero_sp_bg.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: clamp(400px, calc(100vw * 721 / 375), 900px);
  }

  /* オーバーレイなし（Figmaデザイン通り） */
  #sc-hero::before {
    display: none;
  }

  /* 上部テキスト・下部CTAを space-between で配置 */
  .sc-hero__inner {
    padding: 0 20px;
    min-height: clamp(400px, calc(100vw * 721 / 375), 900px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    box-sizing: border-box;
  }

  .sc-hero__text-area {
    /* Figma SP: hero-text pt-[16px] だが、fixed ヘッダー(52px) + 余白16px = 68px を確保 */
    padding-top: 68px;
    gap: 17px;           /* Figma SP: gap-[17px] */
  }

  .sc-hero__heading {
    font-size: 32px;     /* Figma SP: text-[32px] */
    font-weight: 700;
    line-height: 1.2;    /* Figma SP: leading-[1.2] */
    text-shadow: none;
  }

  /* SP: h1-accent 表示（Figma SP: 621:6 に存在） */
  .sc-hero__accent-line {
    display: block;      /* PCと同じく表示する */
  }

  /* SP: サブタイトルグループ — 上に少し詰める */
  .sc-hero__label-group {
    margin-top: -8px;
  }

  /* SP: サブタイトル — Figma SP: text-[14px] text-[#73dae6] */
  .sc-hero__label {
    font-size: 14px;     /* Figma SP: 14px */
    color: #73dae6;      /* ベースと同色、白overrideを撤廃 */
  }

  /* リードテキスト SP — Figma SP: text-[13px] leading-[1.5] */
  .sc-hero__lead {
    font-size: 13px;
    line-height: 1.5;
  }

  /* CTAエリアを画面下部へ */
  .sc-hero__cta-area {
    padding-bottom: 24px;
    gap: 8px;
    align-items: stretch;
  }

  .sc-hero__cta-area .sc-btn--orange {
    width: 100%;
    text-align: center;
    padding: 20px 24px;
    font-size: 18px;
    line-height: normal;
  }

  /* 免責：CTA下・右寄せ・水色 — Figma SP: text-[9px] */
  .sc-hero__disclaimer {
    font-size: 9px;
    color: #4dabee;
    line-height: 1.6;
    text-align: right;
    max-width: 100%;
  }

  .sc-btn--lg {
    font-size: 16px;
    padding: 18px 24px;
  }

  /* Case — aspect-ratio: 8/5 がSPでも自動適用されるため高さ上書き不要 */

  .sc-case__num {
    font-size: 26px;   /* Figma SP: 26px */
  }

  /* Case — SP フォントサイズ（Figma SP: hero-strip 13px / table th,td 12px） */
  .sc-case__hero-strip span {
    font-size: 13px;
  }

  .sc-case__table th,
  .sc-case__table td {
    font-size: 15px;
  }

  /* CTA */
  .sc-cta__phone-number {
    font-size: clamp(28px, 8vw, 40px);
  }

  /* FAQ */
  .sc-faq__question {
    padding: 16px 20px;
    gap: 12px;
  }

  .sc-faq__q-icon {
    width: 34px;
    height: 34px;
    font-size: 14px;   /* Figma SP: 14px */
  }

  .sc-faq__question-text {
    font-size: 16px;   /* Figma SP: 16px */
  }

  .sc-faq__answer {
    padding: 14px 20px 20px 64px;
  }

  .sc-faq__answer p {
    font-size: 15px;   /* Figma SP: 15px */
  }
}

/* ─── Hero SP: 省エネ大賞バッジ × CTAボタン 重なり解消（375〜440px） ───────
   hero_sp_bg.jpg のバッジは画像の約55〜88%（375px時: 397〜634px）を占める大型オブジェクト。
   「CTAを上に上げる」策はバッジ上端にも被り画面中央に見えNGだった。
   「CTAを下に下げる」のみでは disclaimer が画像外にはみ出す制約がある。

   解法: .sc-hero__disclaimer を order:-1 でボタン上に移動
   → cta-area レイアウト: [disclaimer][gap][button][padding-bottom]
   → ボタンが最下部に来るのでより深い位置に配置でき、
      かつ disclaimer はボタン上（画像内）に収まる。

   公式（P = cta-area padding-bottom: 24px）:
     button_bottom = inner_height - P
     button_top    = inner_height - P - 62px
     badge_bottom ≈ 88% × (100vw × 721/375) = 169vw

     inner = badge_bottom + 20px(余裕) + 62px(button) + P = 169vw + 106px

   検証:
     375px → inner=740px  button_top=654px  badge_bottom=634px  gap=20px ✓
              button_bottom=716px < 721px(画像高) ✓
              disclaimer=617〜646px < 721px ✓
              section拡張=19px → 白背景（画像底部の白紙製品とシームレス）
     440px → inner=850px  button_top=764px  badge_bottom=744px  gap=20px ✓
              button_bottom=826px < 845px(画像高) ✓
              disclaimer=727〜756px < 845px ✓
              section拡張=5px → ほぼゼロ
   ─────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 375px) and (max-width: 440px) {
  #sc-hero {
    background-color: #fff;  /* 19px拡張部を白で補完 → 画像底部(白い紙製品)にシームレス */
    min-height: calc(169vw + 106px);
  }
  .sc-hero__inner {
    min-height: calc(169vw + 106px);
  }
  /* disclaimerをボタンの上に移動：ボタンを最下部に寄せてバッジ下端より下へ */
  .sc-hero__disclaimer {
    order: -1;
  }
}