@charset "UTF-8";
/* 西船橋スポーツ接骨院／体外衝撃波治療ページ（/shockwave/）
   静的実装。既存SWELLのヘッダー・サイドメニュー・フッターと同居する。

   単位：既存サイトに合わせた上限なしvw（PC 1920設計 / SP 375設計）。
        1単位 = 1px @設計幅。 width: calc(600 * var(--u)) のように書く。
        ※ rules.md の「SWELL案件は min(vw,px)」からの意図的な逸脱。理由は specs/IMPL-NOTES.md
   ブレークポイント：959 / 960px（既存に合わせる）

   トークン：Figma Variables は PC/SP で2モードを持ち、値は比例縮小ではない
        （例 padding/section-LR-big 160→24）。そこで**単位なしの数値**として持ち、
        使うときに var(--u) を掛ける。Figma変数に無い一回きりの寸法はリテラルで書く。 */

/* ===== SWELLレイアウト器の補正 =========================================
   #content には全ページ既定で margin-top:6em が入り、ページID別（.id_10 等）にだけ
   0 で上書きされている。/shockwave/ は wp-load.php 直読みで #body_wrap に id_XXX が
   付かないため 6em が残る。当ページCSSは /shockwave/ でしか読まれないので他ページ非影響。

   ⚠ セレクタは `html body div#content`（要素を1つ足して詳細度を上げる）。
   SWELLの追加CSSは全く同じ `html body #content { margin-top:6em !important }` を
   出しており、しかもWPコアが追加CSSを wp_head の優先度101で出す＝当CSS（102）より前。
   同詳細度・同 !important では後勝ちなので、素の `html body #content` では負ける
   （2026-08-20 /echo-test/ で実測。FV上部に96pxの空きが出た）。 */
html body div#content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== スコープ・トークン ============================================== */
.page-shockwave {
  --u: calc(100vw / 1920);       /* 1単位 = 1px @1920px */

  --blue: #004A96;
  --black: #333333;
  --lightgray: #F4F6FA;
  --white: #FFFFFF;

  /* 明朝＝既存サイトが TypeSquare で読んでいる hiragino-mincho-pron（W6=600 / W3=300）に相乗り。
     ゴシック＝Figma指定の Source Han Sans JP と同一書体である Noto Sans JP を Google Fonts から
     読む（W3/Normal=350・Bold=700）。既存サイトのゴシックはシステムフォントで webfont は無い。 */
  --font-mincho: "hiragino-mincho-pron", "Hiragino Mincho ProN", "游明朝", YuMincho, "Yu Mincho", serif;
  --font-gothic: "Noto Sans JP", "Source Han Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  /* --- Figma Variables（PCモード）。単位なしの数値で持つ --- */
  --padding-section-lr-small: 80;
  --padding-section-lr-big: 160;
  --padding-section-ud: 160;
  --border-radius-section: 90;
  --border-radius-image: 30;
  --border-radius-card: 15;
  --border-radius-table: 10;

  --h1-jp-font-size: 60;      --h1-jp-line-height: 90;      --h1-jp-letter-spacing: 6;
  --h1-eng-font-size: 20;     --h1-eng-line-height: 30;     --h1-eng-letter-spacing: 4;
  --h2-font-size: 40;         --h2-line-height: 60;         --h2-letter-spacing: 3.2;
  --h2-copy-font-size: 50;    --h2-copy-line-height: 100;   --h2-copy-letter-spacing: 6;
  --h3-font-size: 32;         --h3-line-height: 48;         --h3-letter-spacing: 2.24;
  --bold-font-size: 24;       --bold-line-height: 36;       --bold-letter-spacing: 1.68;
  --number-font-size: 56;     --number-line-height: 84;     --number-letter-spacing: 3.92;
  --body-font-size: 18;       --body-line-height: 36;       --body-letter-spacing: 0.9;
  --body-copy-font-size: 18;  --body-copy-line-height: 50;  --body-copy-letter-spacing: 0.9;
  --font-size-28: 28;         --line-height-28: 36;         --letter-spacing-28: 0.7;
  --font-size-22: 22;         --line-height-22: 32;         --letter-spacing-22: 0.5;
  --font-size-body: 18;       --line-height-body: 36;       --letter-spacing-body: 0.5;

  --padding-h2-border: 15;
  --padding-h3-border: 8;
  --padding-card1-lr: 70;     --padding-card1-ud: 48;
  --padding-card2-lr: 28;     --padding-card2-ud: 32;
  --padding-40: 40;

  --gap-80-32: 80;
  --gap-70-32: 70;
  --gap-60-40: 60;
  --gap-40-40: 40;
  --gap-32: 32;
  --gap-24-16: 24;
  --gap-20-8: 20;
  --gap-15-20: 15;
  --gap-8: 8;

  color: var(--black);
  font-family: var(--font-mincho);
  font-weight: 600;              /* 本文＝明朝W6（Figma 本文-明朝） */
  font-size: calc(var(--font-size-body) * var(--u));
  line-height: calc(var(--line-height-body) / var(--font-size-body));
  letter-spacing: calc(var(--letter-spacing-body) * var(--u));
  background: var(--white);
  overflow-x: clip;              /* vw設計のわずかな横はみ出しを抑止 */
}

@media screen and (max-width: 959px) {
  .page-shockwave {
    --u: calc(100vw / 375);

    /* --- Figma Variables（SPモード） --- */
    --padding-section-lr-small: 24;
    --padding-section-lr-big: 24;
    --padding-section-ud: 80;
    --border-radius-section: 30;
    --border-radius-image: 15;
    --border-radius-card: 5;
    --border-radius-table: 5;

    --h1-jp-font-size: 25;      --h1-jp-line-height: 37.5;    --h1-jp-letter-spacing: 1.5;
    --h1-eng-font-size: 14;     --h1-eng-line-height: 28;     --h1-eng-letter-spacing: 2.24;
    --h2-font-size: 25;         --h2-line-height: 48;         --h2-letter-spacing: 2;
    --h2-copy-font-size: 25;    --h2-copy-line-height: 42;    --h2-copy-letter-spacing: 1.5;
    --h3-font-size: 22;         --h3-line-height: 33;         --h3-letter-spacing: 1.54;
    --bold-font-size: 18;       --bold-line-height: 27;       --bold-letter-spacing: 1.26;
    --number-font-size: 35;     --number-line-height: 52.5;   --number-letter-spacing: 2.45;
    --body-font-size: 15;       --body-line-height: 28;       --body-letter-spacing: 0.75;
    --body-copy-font-size: 15;  --body-copy-line-height: 36;  --body-copy-letter-spacing: 0.75;
    --font-size-28: 18;         --line-height-28: 24;         --letter-spacing-28: 0.7;
    --font-size-22: 15;         --line-height-22: 28;         --letter-spacing-22: 0.5;
    --font-size-body: 18;       --line-height-body: 28;       --letter-spacing-body: 0.4;

    --padding-h2-border: 15;
    --padding-h3-border: 20;
    --padding-card1-lr: 20;     --padding-card1-ud: 32;
    --padding-card2-lr: 16;     --padding-card2-ud: 24;
    --padding-40: 20;

    --gap-80-32: 32;
    --gap-70-32: 32;
    --gap-60-40: 40;
    --gap-40-40: 40;
    --gap-32: 32;
    --gap-24-16: 16;
    --gap-20-8: 8;
    --gap-15-20: 20;
    --gap-8: 8;
  }
}

/* ===== リセット（SWELLからの染み出し対策） =============================
   .page-shockwave *(0,1,0) で SWELL の素要素規則(0,0,1)を打ち消す。
   色・装飾は :where()(0,0,0) にして、自前のクラス指定(0,1,0)を殺さないようにする。 */
.page-shockwave * { box-sizing: border-box; margin: 0; padding: 0; }

:where(.page-shockwave) img { max-width: 100%; display: block; }
:where(.page-shockwave) a { color: inherit; text-decoration: none; }
:where(.page-shockwave) :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-size: inherit; font-weight: inherit; }
:where(.page-shockwave) ul, :where(.page-shockwave) ol { list-style: none; }
:where(.page-shockwave) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ===== 出し分けユーティリティ ========================================== */
.page-shockwave .sp-only { display: none; }
@media screen and (max-width: 959px) {
  .page-shockwave .pc-only { display: none; }
  .page-shockwave .sp-only { display: revert; }
}

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

/* セクション見出しは Figma に2種類ある。
   ・h2-2（大半のセクション）＝全幅のグレー罫線の上に、見出しの幅ぶんだけ青い罫線が重なる
   ・h2-1（sec-about だけ）  ＝見出しの下に gap を空けて全幅のグレー罫線が1本 */

/* --- h2-2（Figma 70:1927 ほか）。高さ = 行高 + padding/h2-border + 罫線2本 --- */
.c-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border-bottom: 1px solid #CDD6DD;
}
.c-title__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--padding-h2-border) * var(--u));
  border-bottom: 1px solid var(--blue);
}
.c-title__text {
  font-size: calc(var(--h2-font-size) * var(--u));
  line-height: calc(var(--h2-line-height) / var(--h2-font-size));
  letter-spacing: calc(var(--h2-letter-spacing) * var(--u));
  white-space: nowrap;
}

/* --- h2-1（Figma 69:1854）。見出し＋gap＋全幅の細い罫線 ---
   ★罫線は Figma では「高さ0の線ノードにストロークが乗る」形なので、
     レイアウト高は0にして ::before で描く（1pxぶんセクション高がずれるのを防ぐ）。 */
.c-title-rule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-15-20) * var(--u));
  width: 100%;
}
.c-title-rule__text {
  font-size: calc(var(--h2-font-size) * var(--u));
  line-height: calc(var(--h2-line-height) / var(--h2-font-size));
  letter-spacing: calc(var(--h2-letter-spacing) * var(--u));
}
.c-title-rule__line {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
}
.c-title-rule__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5px;
  border-top: 1px solid #CDD6DD;
}

/* ============ sec-fv（Figma PC 67:1783 / SP 71:3608） ============
   PCは content 幅（1520）いっぱい。SPは左24・右フラッシュ（351）。
   どちらも左下だけ大きく角丸（border-radius/section）。 */
.sec-fv {
  padding-left: 0;
}
.sec-fv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  height: calc(560 * var(--u));
  padding: calc(212 * var(--u)) 0 0 calc(var(--padding-section-lr-small) * var(--u));
  border-bottom-left-radius: calc(var(--border-radius-section) * var(--u));
  overflow: hidden;
}
.sec-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sec-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma：背景写真の上に黒25%のオーバーレイ */
.sec-fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.sec-fv__title,
.sec-fv__en {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-mincho);
  font-weight: 600;
}
.sec-fv__title {
  font-size: calc(var(--h1-jp-font-size) * var(--u));
  line-height: calc(var(--h1-jp-line-height) / var(--h1-jp-font-size));
  letter-spacing: calc(var(--h1-jp-letter-spacing) * var(--u));
}
.sec-fv__en {
  font-size: calc(var(--h1-eng-font-size) * var(--u));
  line-height: calc(var(--h1-eng-line-height) / var(--h1-eng-font-size));
  letter-spacing: calc(var(--h1-eng-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-fv {
    padding-left: calc(var(--padding-section-lr-small) * var(--u));
  }
  .sec-fv__inner {
    gap: calc(20 * var(--u));
    height: calc(260 * var(--u));
    padding-top: calc(73 * var(--u));
  }
}

/* ============ sec-intro（Figma PC 68:1808 / SP 71:3269） ============
   PC：240 / 580 / 480 の3カラムグリッド（列間 70）。右の機器写真が2行ぶんを占め、
       左の見出し＋本文ブロック（680）は 800 の高さに対して上下中央に置かれる
       （Figma: align-items:center。align-content:center で再現）。
   SP：1カラムに縦積みし、順番が 見出し → 機器写真 → 本文 → 受付写真 に変わる。
       DOM はSPの順で書き、PCだけグリッド配置で組み替える。 */
.sec-intro {
  display: grid;
  grid-template-columns: calc(240 * var(--u)) calc(580 * var(--u)) calc(480 * var(--u));
  /* ★行は実寸で固定する。auto のままだと2行にまたがる機器写真（800）の高さが
     行へ配分されて行が伸び、左ブロックの上下中央（Figma の 60px オフセット）が消える。 */
  grid-template-rows: calc(200 * var(--u)) calc(400 * var(--u));
  column-gap: calc(var(--gap-70-32) * var(--u));
  row-gap: calc(var(--gap-80-32) * var(--u));
  align-items: start;
  align-content: center;
  /* 機器写真(800)＋上下padding。box-sizing:border-box なので padding を含めた値で指定する。
     この中で行(200+80+400=680)が align-content:center により60px下がる＝Figma と一致 */
  min-height: calc((800 + var(--padding-section-ud) * 2) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u)) 0
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}
.sec-intro__title  { grid-column: 1 / 3; grid-row: 1; }
.sec-intro__post   { grid-column: 1;     grid-row: 2; }
.sec-intro__lead   { grid-column: 2;     grid-row: 2; }
.sec-intro__machine{ grid-column: 3;     grid-row: 1 / 3; align-self: center; }

.sec-intro__title {
  font-size: calc(var(--h2-copy-font-size) * var(--u));
  line-height: calc(var(--h2-copy-line-height) / var(--h2-copy-font-size));
  letter-spacing: calc(var(--h2-copy-letter-spacing) * var(--u));
}
.sec-intro__title-em { color: var(--blue); }

.sec-intro__lead {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-copy-font-size) * var(--u));
  line-height: calc(var(--body-copy-line-height) / var(--body-copy-font-size));
  letter-spacing: calc(var(--body-copy-letter-spacing) * var(--u));
}

/* 写真：<picture> 自体を寸法の器にする（display:contents にすると
   中の <source> までグリッド項目として数えられる＝IMPL-NOTES のハマりどころ） */
.sec-intro__post,
.sec-intro__machine { display: block; overflow: hidden; }
.sec-intro__post img,
.sec-intro__machine img { width: 100%; height: 100%; object-fit: cover; }

.sec-intro__post {
  width: calc(240 * var(--u));
  height: calc(320 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u));
}
.sec-intro__machine {
  width: calc(480 * var(--u));
  height: calc(800 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u)) 0 0
                 calc(var(--border-radius-image) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    gap: calc(var(--gap-70-32) * var(--u));
    padding: calc(60 * var(--u)) 0
             calc(var(--padding-section-ud) * var(--u))
             calc(var(--padding-section-lr-small) * var(--u));
  }
  /* SPは 351（左24・右フラッシュ）が基準。本文と受付写真だけ右にも24を空ける＝327 */
  .sec-intro__title   { width: calc(351 * var(--u)); }
  .sec-intro__machine { width: calc(351 * var(--u)); height: calc(320 * var(--u)); }
  .sec-intro__lead    { width: calc(327 * var(--u)); }
  .sec-intro__post    { width: calc(327 * var(--u)); height: calc(280 * var(--u)); }
}

/* ============ sec-about（Figma PC 68:1832 / SP 71:3276） ============
   PC：写真480×640 ＋ gap80 ＋ 本文カラム720。上paddingは無し・下だけ160。
       写真(640)と本文(547)は align-items:center で上下中央。
   SP：本文 → 写真 の縦積み（DOMはSPの順。PCでは order で写真を先頭へ）。 */
.sec-about {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-80-32) * var(--u));
  padding: 0 calc(var(--padding-section-lr-big) * var(--u))
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}
.sec-about__photo {
  order: -1;                       /* PCは写真が左（DOMはSP順） */
  display: block;
  overflow: hidden;
  flex: none;
  width: calc(480 * var(--u));
  height: calc(640 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u));
}
.sec-about__photo img { width: 100%; height: 100%; object-fit: cover; }

.sec-about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  flex: none;
  width: calc(720 * var(--u));
}

.sec-about__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-about {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-80-32) * var(--u));
    padding: 0 calc(var(--padding-section-lr-big) * var(--u))
             calc(var(--padding-section-ud) * var(--u))
             calc(var(--padding-section-lr-small) * var(--u));
  }
  .sec-about__photo {
    order: 0;
    width: 100%;
    height: calc(328 * var(--u));
  }
  .sec-about__body { width: 100%; gap: calc(var(--gap-40-40) * var(--u)); }
}

/* ============ sec-effect（Figma PC 70:1878 / SP 71:3281） ============
   薄いグレー(#F4F6FA)の面。左上・左下だけ border-radius/section の角丸で、右は
   本文域の端までフラッシュ。中身は 見出しブロック → カード3枚。 */
.sec-effect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u));
  background: var(--lightgray);
  border-radius: calc(var(--border-radius-section) * var(--u)) 0 0
                 calc(var(--border-radius-section) * var(--u));
}
.sec-effect__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: 100%;
}
.sec-effect__lead {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}
.sec-effect__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: 100%;
}

/* --- card-1（Figma 70:1985）：白カード。PCは写真左＋本文右で高さ336固定 --- */
.c-card1 {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-80-32) * var(--u));
  width: 100%;
  height: calc(336 * var(--u));
  padding: calc(var(--padding-card1-ud) * var(--u))
           calc(var(--padding-card1-lr) * var(--u));
  background: var(--white);
  border-radius: calc(var(--border-radius-card) * var(--u));
}
.c-card1__pic {
  display: block;
  overflow: hidden;
  flex: none;
  width: calc(320 * var(--u));
  height: calc(240 * var(--u));
  border-radius: calc(var(--border-radius-card) * var(--u));
}
.c-card1__pic img { width: 100%; height: 100%; object-fit: cover; }
.c-card1__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-24-16) * var(--u));
  flex: none;
  width: calc(657 * var(--u));
}
/* 小見出しの下は破線（Figma: border-dashed #cdd6dd） */
.c-card1__head {
  width: 100%;
  padding-bottom: calc(var(--padding-h3-border) * var(--u));
  border-bottom: 1px dashed #CDD6DD;
}
.c-card1__title {
  font-size: calc(var(--h3-font-size) * var(--u));
  line-height: calc(var(--h3-line-height) / var(--h3-font-size));
  letter-spacing: calc(var(--h3-letter-spacing) * var(--u));
  white-space: nowrap;
}
.c-card1__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-effect__list { gap: calc(32 * var(--u)); }

  /* SPは縦積み。高さは中身なり（写真240固定＋本文） */
  .c-card1 {
    flex-direction: column;
    justify-content: center;
    height: auto;
  }
  .c-card1__pic { width: 100%; }
  .c-card1__body { width: 100%; }
}

/* ============ sec-symptom（Figma PC 70:2017 / SP 71:3289） ============
   PC：左カラム740（見出し＋カード6枚）＋gap80＋右に縦長写真620×1600（右端フラッシュ）。
       左カラム(1728)より写真(1600)が低いので、写真は align-self:center で上下中央。
   SP：見出し → 写真 → カード群 の縦積み。DOMはSP順・PCだけグリッドで組み替える。 */
.u-sprite { display: none; }

.sec-symptom {
  display: grid;
  grid-template-columns: calc(740 * var(--u)) calc(620 * var(--u));
  column-gap: calc(var(--gap-80-32) * var(--u));
  row-gap: calc(var(--gap-60-40) * var(--u));
  align-items: start;
  padding: calc(var(--padding-section-ud) * var(--u)) 0
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}
.sec-symptom__head  { grid-column: 1; grid-row: 1; }
.sec-symptom__list  { grid-column: 1; grid-row: 2; }
.sec-symptom__photo { grid-column: 2; grid-row: 1 / 3; align-self: center; }

.sec-symptom__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-32) * var(--u));
  width: 100%;
}
/* ★このセクションの見出しだけ罫線コンポーネント（h2-1/h2-2）ではなく生テキスト。
   行高も h2 トークン(60)ではなく 76px の個別指定＝Figmaどおり（申し送り済み） */
.sec-symptom__title {
  font-size: calc(var(--h2-font-size) * var(--u));
  line-height: calc(76 / 40);
  letter-spacing: calc(var(--h2-letter-spacing) * var(--u));
}
.sec-symptom__lead,
.sec-symptom__note {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

.sec-symptom__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: 100%;
}
/* 1枚目のカードだけ補足文がぶら下がる（カードとの間隔は他カード間より狭い） */
.sec-symptom__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-24-16) * var(--u));
  width: 100%;
}

.sec-symptom__photo {
  display: block;
  overflow: hidden;
  width: calc(620 * var(--u));
  height: calc(1600 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u)) 0 0
                 calc(var(--border-radius-image) * var(--u));
}
.sec-symptom__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- card-2（Figma 70:2095）：青ベタのカード。PCは高さ180固定＋上下中央 --- */
.c-card2 {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-20-8) * var(--u));
  width: 100%;
  height: calc(180 * var(--u));
  padding: calc(var(--padding-card2-ud) * var(--u))
           calc(var(--padding-card2-lr) * var(--u));
  background: var(--blue);
  border-radius: calc(var(--border-radius-card) * var(--u));
  color: var(--white);
}
.c-card2__icon {
  display: block;
  flex: none;
  width: calc(32.412 * var(--u));      /* Figma「グループ 3344」の実寸 */
  height: calc(32.412 * var(--u));
}
.c-card2__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-8) * var(--u));
  flex: 1 1 0;
  min-width: 0;
}
.c-card2__title {
  font-size: calc(var(--bold-font-size) * var(--u));
  line-height: calc(var(--bold-line-height) / var(--bold-font-size));
  letter-spacing: calc(var(--bold-letter-spacing) * var(--u));
}
.c-card2__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
  /* ★行末の字送り1文字ぶんを戻す。CSSは最終文字のうしろにも letter-spacing を足すため、
     Figmaでちょうど収まる行（SPの「足部・足関節周辺の慢性的な腱の痛み」＝17字×15.75＝267.75 vs 幅267）が
     0.75pxだけあふれて折り返す。Figmaの計測モデルに合わせて負のマージンで相殺する。 */
  margin-right: calc(var(--body-letter-spacing) * var(--u) * -1);
}

@media screen and (max-width: 959px) {
  .sec-symptom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-80-32) * var(--u));
    padding: calc(var(--padding-section-ud) * var(--u)) 0
             calc(var(--padding-section-ud) * var(--u))
             calc(var(--padding-section-lr-small) * var(--u));
  }
  /* SPは351（左24・右フラッシュ）が基準。写真だけ右端まで、文字ものは右にも24を空ける＝327 */
  .sec-symptom__head,
  .sec-symptom__list  { width: calc(327 * var(--u)); }
  .sec-symptom__photo {
    width: calc(351 * var(--u));
    height: calc(375 * var(--u));
  }
  .sec-symptom__head  { gap: calc(20 * var(--u)); }   /* SPだけ20（トークン外） */
  .sec-symptom__list  { gap: calc(24 * var(--u)); }   /* 〃 24（トークン外） */
  .sec-symptom__title {
    line-height: calc(var(--h2-line-height) / var(--h2-font-size));
  }
  /* SPはカード高さが中身なり。アイコンは1行目に合わせて上寄せ（Figmaは py3px の器） */
  .c-card2 {
    align-items: flex-start;
    height: auto;
  }
  .c-card2__icon {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    margin-top: calc(3 * var(--u));
  }
}

/* ============ sec-feature（Figma PC 70:2203 / SP 71:3304） ============
   sec-effect と同じ薄いグレーの器（左だけ角丸・右はフラッシュ）。中身は h2-2 ＋ card-3 ×3。 */
.sec-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u));
  background: var(--lightgray);
  border-radius: calc(var(--border-radius-section) * var(--u)) 0 0
                 calc(var(--border-radius-section) * var(--u));
}
/* ★Figmaのカード列は1242px＝見出しの本文カラム(1200)より42px広い。
   右padding(160)に食い込む形だがFigmaどおりに実装している（意図確認の申し送り済み）。 */
.sec-feature__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: calc(1242 * var(--u));
}

/* --- card-3（Figma 71:2258）：PCは写真左440×320＋本文右、高さ320固定で上下中央 --- */
.c-card3 {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-80-32) * var(--u));
  width: 100%;
  height: calc(320 * var(--u));
}
.c-card3__pic {
  display: block;
  overflow: hidden;
  flex: none;
  width: calc(440 * var(--u));
  height: calc(320 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u));
}
.c-card3__pic img { width: 100%; height: 100%; object-fit: cover; }
.c-card3__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  flex: 1 1 0;
  min-width: 0;
}
/* 番号と見出しの間は gap 0（Figma）。PCは折り返さない */
.c-card3__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  white-space: nowrap;
}
.c-card3__num {
  color: var(--blue);
  font-size: calc(var(--number-font-size) * var(--u));
  line-height: calc(var(--number-line-height) / var(--number-font-size));
  letter-spacing: calc(var(--number-letter-spacing) * var(--u));
}
.c-card3__title {
  font-size: calc(var(--h3-font-size) * var(--u));
  line-height: calc(var(--h3-line-height) / var(--h3-font-size));
  letter-spacing: calc(var(--h3-letter-spacing) * var(--u));
}
.c-card3__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-feature__list { width: 100%; }

  /* SPは縦積み。写真は幅いっぱい×240、高さは中身なり */
  .c-card3 {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: calc(16 * var(--u));
  }
  .c-card3__pic { width: 100%; height: calc(240 * var(--u)); }
  .c-card3__body { width: 100%; gap: calc(20 * var(--u)); }
  .c-card3__head {
    gap: calc(var(--gap-8) * var(--u));
    white-space: normal;              /* SPは見出しが折り返す */
  }
}

/* ============ sec-result（Figma PC 71:2292 / SP 71:3310） ============
   白地。左padding だけ small(80)・右は big(160)。中身は h2-2 ＋ グラフカード2枚。
   ★このセクションだけ左右のpaddingが非対称（Figmaのまま）。 */
.sec-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u))
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}
.sec-result__list {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 1280 に 620 が2枚＝間隔40 */
  width: 100%;
}

/* --- グラフカード（Figma 71:2468 / 71:2469）--- */
.c-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));          /* ★SPも24（gap/24-16 トークンの16ではない＝Figmaのまま） */
  flex: none;
  width: calc(620 * var(--u));
  height: calc(560 * var(--u));
  border: 1px solid #CDD6DD;
  /* ★角丸はSPでも15（Figmaがカード側をリテラル15で持っている＝border-radius/card の5ではない） */
  border-radius: calc(15 * var(--u));
}
.c-graph__head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(var(--padding-h2-border) * var(--u)) 0;
  background: var(--blue);
  border-radius: calc(15 * var(--u)) calc(15 * var(--u)) 0 0;
}
.c-graph__title {
  color: var(--white);
  font-size: calc(var(--h3-font-size) * var(--u));
  line-height: calc(var(--h3-line-height) / var(--h3-font-size));
  letter-spacing: calc(var(--h3-letter-spacing) * var(--u));
  white-space: nowrap;
}
.c-graph__title-sub { font-size: calc(22 * var(--u)); }

/* グラフ画像の器。寸法はFigmaの図版フレームそのまま（PCは2枚で幅が違う） */
.c-graph__body { flex: none; height: calc(429 * var(--u)); }
.c-graph__body--score { width: calc(477 * var(--u)); }
.c-graph__body--feel  { width: calc(517 * var(--u)); }
.c-graph__body img { width: 100%; height: 100%; }

@media screen and (max-width: 959px) {
  .sec-result {
    gap: calc(var(--gap-60-40) * var(--u));
    padding: calc(var(--padding-section-ud) * var(--u))
             calc(var(--padding-section-lr-small) * var(--u));
  }
  .sec-result__list {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(40 * var(--u));
  }
  .c-graph {
    width: 100%;
    height: calc(350 * var(--u));
  }
  .c-graph__head { padding: calc(8 * var(--u)) 0; }
  .c-graph__title-sub { font-size: calc(14 * var(--u)); }
  .c-graph__body { height: calc(252 * var(--u)); }
  .c-graph__body--score { width: calc(280 * var(--u)); }
  .c-graph__body--feel  { width: calc(280 * var(--u)); height: calc(233 * var(--u)); }
}

/* ============ sec-flow（Figma PC 71:2576 / SP 71:3377） ============
   sec-effect / sec-feature と同じ薄いグレーの器。step ×4。 */
.sec-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u));
  background: var(--lightgray);
  border-radius: calc(var(--border-radius-section) * var(--u)) 0 0
                 calc(var(--border-radius-section) * var(--u));
}
.sec-flow__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: 100%;
}

/* --- step（Figma 71:2635）：PCは写真左400×320＋本文右720、高さ320固定で上下中央 --- */
.c-step {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-80-32) * var(--u));
  width: 100%;
  height: calc(320 * var(--u));
}
.c-step__pic {
  display: block;
  overflow: hidden;
  flex: none;
  width: calc(400 * var(--u));
  height: calc(320 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u));
}
.c-step__pic img { width: 100%; height: 100%; object-fit: cover; }
.c-step__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  flex: 1 1 0;
  min-width: 0;
}
.c-step__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-32) * var(--u));
}
/* STEPバッジ。Figmaは line-height:normal だが実測30/20＝1.5（SPも21/14＝1.5）なので数値で持つ */
.c-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--u)) calc(35 * var(--u));
  background: var(--blue);
  border-radius: calc(var(--border-radius-image) * var(--u));
  color: var(--white);
  font-size: calc(20 * var(--u));
  line-height: 1.5;
  letter-spacing: calc(1 * var(--u));
  white-space: nowrap;
}
.c-step__title {
  font-size: calc(var(--h3-font-size) * var(--u));
  line-height: calc(var(--h3-line-height) / var(--h3-font-size));
  letter-spacing: calc(var(--h3-letter-spacing) * var(--u));
  white-space: nowrap;
}
.c-step__text {
  width: 100%;
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  /* SPは バッジ → 見出し → 写真 → 本文 の縦積み（写真の位置が変わる）。
     __body を display:contents にして中身を step の直下項目にし、order で並べ替える。 */
  .c-step {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    gap: calc(20 * var(--u));
  }
  .c-step__body { display: contents; }
  .c-step__head { order: 1; gap: calc(20 * var(--u)); }
  .c-step__pic  { order: 2; width: 100%; height: calc(240 * var(--u)); }
  .c-step__text { order: 3; }
  .c-step__badge {
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    border-radius: calc(50 * var(--u));
    font-size: calc(14 * var(--u));
    letter-spacing: calc(0.98 * var(--u));
  }
  .c-step__title { white-space: normal; }
}

/* ============ sec-note（Figma PC 71:2681 / SP 71:3384） ============
   白地。左paddingだけ small(80)・右は big(160)（sec-result と同じ非対称）。
   PC：写真480×640（左）＋本文720（右）。SP：本文 → 写真 の縦積み。 */
.sec-note {
  display: flex;
  align-items: center;
  gap: calc(var(--gap-80-32) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u))
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}
.sec-note__photo {
  order: -1;                       /* PCは写真が左（DOMはSP順） */
  display: block;
  overflow: hidden;
  flex: none;
  width: calc(480 * var(--u));
  height: calc(640 * var(--u));
  border-radius: calc(var(--border-radius-image) * var(--u));
}
.sec-note__photo img { width: 100%; height: 100%; object-fit: cover; }

.sec-note__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-80-32) * var(--u));
  flex: 1 1 0;
  min-width: 0;
}
.sec-note__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-40-40) * var(--u));
  width: 100%;
}
.sec-note__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-note {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(60 * var(--u));      /* SPはリテラル60（gap/80-32 の32ではない） */
  }
  .sec-note__photo {
    order: 0;
    width: 100%;
    height: calc(327 * var(--u));
  }
  .sec-note__body { width: 100%; gap: calc(60 * var(--u)); }
}

/* ============ sec-price（Figma PC 71:2707 / SP 71:3393） ============
   ★上下paddingが0＝前後のセクションの余白で吸収する設計（Figmaのまま。申し送り済み）。
   左paddingだけ small(80)・右は big(160)。 */
.sec-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: 0 calc(var(--padding-section-lr-big) * var(--u))
           0 calc(var(--padding-section-lr-small) * var(--u));
}
/* ★Figmaでは表＋注記のブロックだけ 1278px（見出しは1280）。注記テキストの幅に引きずられた
   形だが、Figmaどおりにしている（右に2pxだけ余る） */
.sec-price__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap-32) * var(--u));
  width: calc(1278 * var(--u));
}
.sec-price__note {
  width: 100%;
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--body-font-size) * var(--u));
  line-height: calc(var(--body-line-height) / var(--body-font-size));
  letter-spacing: calc(var(--body-letter-spacing) * var(--u));
}

/* --- price-table（Figma 71:2763）--- */
.c-price {
  width: 100%;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #CDD6DD;
  border-radius: calc(var(--border-radius-table) * var(--u));
}
.c-price__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.c-price__cell {
  height: calc(100 * var(--u));
  text-align: center;
  vertical-align: middle;
  color: #000;
  font-size: calc(var(--bold-font-size) * var(--u));
  line-height: calc(var(--bold-line-height) / var(--bold-font-size));
  letter-spacing: calc(var(--bold-letter-spacing) * var(--u));
  white-space: nowrap;
}
/* 行の区切り線は行の高さ(100)に「足される」（Figmaの表全体 405 = 2 + 100×4 + 1×3）ので、
   box-sizing:border-box のぶんを見越して罫線のある行だけ 101 にする。
   ⚠ 最終行の判定は `:last-child` では効かない（thead の1行は first かつ last のため）。
      既定で罫線ありにして、tbody の最終行だけ外す。 */
.c-price__cell {
  height: calc(101 * var(--u));
  border-bottom: 1px solid #CDD6DD;
}
.c-price__table tbody tr:last-child .c-price__cell {
  height: calc(100 * var(--u));
  border-bottom: 0;
}
.c-price__cell--head {
  width: calc(430 * var(--u));
  border-right: 1px solid #CDD6DD;
  font-weight: 600;                /* 明朝W6 */
}
.c-price__cell--value { font-weight: 300; }   /* 明朝W3＝右列だけ細い */
/* 見出し行だけ淡いグレー。`:first-child` だと tbody の1行目にも当たるので thead で絞る */
.c-price__table thead .c-price__cell { background: var(--lightgray); }

@media screen and (max-width: 959px) {
  .sec-price {
    padding: 0 calc(var(--padding-section-lr-big) * var(--u))
             0 calc(var(--padding-section-lr-small) * var(--u));
  }
  .sec-price__group { width: 100%; }
  .c-price__cell {
    height: calc(49 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(28 / 14);
    letter-spacing: calc(0.7 * var(--u));
  }
  .c-price__table tbody tr:last-child .c-price__cell { height: calc(48 * var(--u)); }
  .c-price__cell--head { width: 50%; }        /* SPは左右50/50 */
}

/* ============ sec-faq（Figma PC 71:2808 / SP 71:3398） ============
   白地。左paddingだけ small(80)・右は big(160)。h2-2 ＋ FAQ 5問。
   gap 60（SP 40）は見出し↔リストの間だけ。カード同士は 16（下の .sec-faq__list を参照）。
   ★Figmaは全問オープンで描かれている。実装は初期クローズなので、Figmaとの座標突合は
     「全問オープンにした状態」で行う（page-echo と同じ）。 */
.sec-faq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap-60-40) * var(--u));
  padding: calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-big) * var(--u))
           calc(var(--padding-section-ud) * var(--u))
           calc(var(--padding-section-lr-small) * var(--u));
}

/* --- faq-list（Figma 7:605 系。page-echo と共通のコンポーネント） ---
   ★カード同士の間隔は list 側で持つ。sec-faq の gap(60/40) は見出し↔リストの間だけに効かせる。
     値16は本サイト /#faq のFAQ（SWELLアコーディオン＝item の margin-top 16px）に実測で合わせたもの
     （2026-08-26 鈴木指示。PC/SPとも16。SP設計幅375なのでSPは実寸でもほぼ16px一致）。 */
.sec-faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.c-faq { width: 100%; }

.sec-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(30 * var(--u)) calc(var(--padding-40) * var(--u));
  background: var(--lightgray);
  border-radius: calc(15 * var(--u));
  text-align: left;
}
.c-faq__head {
  display: flex;
  align-items: flex-start;
  gap: calc(60 * var(--u));
  flex: 1 1 0;
  min-width: 0;
}
.c-faq__mark {
  flex: none;
  color: var(--blue);
  font-size: calc(var(--font-size-28) * var(--u));
  line-height: calc(var(--line-height-28) / var(--font-size-28));
  letter-spacing: calc(var(--letter-spacing-28) * var(--u));
}
.c-faq__text {
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(var(--font-size-22) * var(--u));
  line-height: calc(var(--line-height-22) / var(--font-size-22));
  letter-spacing: calc(var(--letter-spacing-22) * var(--u));
  white-space: nowrap;
}
/* トグル。閉＝＋／開＝− をCSSで出し分ける（Figmaは開いた状態＝− で描かれている） */
.c-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  background: var(--blue);
  border-radius: 999px;
  color: var(--white);
  font-size: calc(var(--font-size-28) * var(--u));
  line-height: calc(var(--line-height-28) / var(--font-size-28));
  letter-spacing: calc(var(--letter-spacing-28) * var(--u));
}
.c-faq__toggle::before { content: "＋"; }
.sec-faq__q[aria-expanded="true"] .c-faq__toggle::before { content: "−"; }

.c-faq__a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(28 * var(--u)) calc(120 * var(--u));
}
/* ★必須：`hidden` 属性はUAスタイルの `[hidden]{display:none}`（詳細度0,0,0）で効くため、
   上の `.c-faq__a{display:flex}`（0,1,0）に負けて閉じなくなる。打ち消しを明示する。
   （page-echo には入っていたが、移植時に漏れて /shockwave-test/ で開きっぱなしになった） */
.c-faq__a[hidden] { display: none; }
.c-faq__a-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-gothic);
  font-weight: 350;
  font-size: calc(18 * var(--u));
  line-height: calc(36 / 18);
  letter-spacing: calc(0.5 * var(--u));
}

@media screen and (max-width: 959px) {
  .sec-faq__q {
    padding: calc(20 * var(--u));
    border-radius: calc(4 * var(--u));
  }
  .c-faq__head { align-items: center; gap: calc(18 * var(--u)); }
  .c-faq__text { flex: 1 1 0; min-width: 0; white-space: normal; }
  /* ★トグルは40px。Figmaは54だが、社内レビューの戻りで他ページと揃えて40にした
     （page-echo と同じ扱い。ここは元から40で描かれている） */
  .c-faq__toggle { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .c-faq__a { padding: calc(20 * var(--u)) calc(50 * var(--u)); }
  .c-faq__a-text {
    font-size: calc(15 * var(--u));
    line-height: calc(28 / 15);
    letter-spacing: calc(0.4 * var(--u));
  }
}