@charset "UTF-8";
/* ============================================================================
   TURTLE リニューアル
   ----------------------------------------------------------------------------
   設計基準：Illustratorアートボード 1500 × 13689px
   数値ルール：1rem = 10px（1500px表示時）
              → Illustratorの実測値をそのまま 1/10 して rem で記述する
                例）見出し40px → 4rem ／ 余白28px → 2.8rem
   命名規則：FLOCSS簡易版
              l-  レイアウト（header / drawer など骨格）
              p-  プロジェクト（セクション固有）
              c-  コンポーネント（ボタン等の再利用部品）
              u-  ユーティリティ
              is- 状態
   ----------------------------------------------------------------------------
   ■ プロジェクト共通のデザインルール（全セクション必須）

   1. 角丸
      カード・ボックス・囲み・画像など、Illustratorで角丸になっている要素は
      すべて 8px（--radius）で統一する。
      実測値：お悩みカード 7.3〜7.9 ／ サービスカード 8.1〜9.0 ／ 注釈ボックス 8.3
      → 直角にしたり、勝手に値を変えたりしない。必ず var(--radius) を使う。

      【例外＝Illustratorに別指定がある要素】
        ・CTAボタン、Heroのバッジ  … 完全なピル形状（9999px）
        ・カードの番号バッジ        … 真円（50%）

   2. 線幅
      Illustratorの罫線・枠線は 1px。色は書き出し画像のインク量から逆算する
      （例：サービスカードの枠線 #D4D4D4）。

   3. 単位
      Illustratorの実測値をそのまま 1/10 して rem で記述する。
      目測は使わない。フォントサイズは字面幅 ÷ フォントのink比から逆算する。

   4. コーディング前の確認事項
      着手前に必ずIllustratorを確認し、角丸・余白・サイズ・線幅・
      palt（プロポーショナルメトリクス）の有無を把握してから実装する。
   ============================================================================ */


/* ============================================================================
   1. FOUNDATION — リセット
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* [hidden] を確実に効かせる（display:flex 等に負けないように） */
[hidden] { display: none !important; }


/* ============================================================================
   2. FOUNDATION — 変数
   ========================================================================== */
:root {
  /* ---- カラー（Illustratorから実測） ---- */
  --c-orange:     #EA552A;
  --c-orange-dk:  #D2461D;   /* ホバー用の暗色（デザイン外・当方作成） */
  --c-navy:       #18262F;
  --c-text:       #2C3438;
  --c-beige:      #F8F4F1;
  --c-beige-lt:   #FEF2E4;
  --c-white:      #FFFFFF;

  /* ---- フォント ---- */
  /* "LINE Seed JP"     … 第1水準までのサブセット（通常はこれだけ読まれる）
     "LINE Seed JP Ext" … サブセットに無い稀用字用。ブラウザは1文字ずつ
                          フォールバックするため、必要な文字が出た時だけ取得される */
  --f-jp: "LINE Seed JP", "LINE Seed JP Ext", "Zen Kaku Gothic New",
          "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "游ゴシック体", meiryo, sans-serif;
  --f-en: "Barlow", var(--f-jp);

  /* ---- レイアウト ---- */
  --header-h:  13rem;   /* 130px：Illustrator実測 */
  --container: 130rem;  /* 1300px：コンテンツ幅 */

  /* ---- 角丸（プロジェクト共通ルール）----
     カード・ボックス・囲み・画像はすべてこの値を使う。
     ピル形状（ボタン・バッジ）と真円（番号バッジ）のみ例外。 */
  --c-rule:   #DDDDDD;  /* 罫線（FAQの区切り線など） */
  --c-green:  #08835C;  /* コンディショニングツールの緑（実測） */
  --c-cardline: #E5E5E5;/* カード枠線（マシンセクション） */

  --radius:    .8rem;   /* 8px：Illustrator実測 */
  --radius-pill: 9999px;

  /* ---- モーション ---- */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --dur:  .3s;
}


/* ============================================================================
   3. FOUNDATION — ルート／比例スケーリング
   ----------------------------------------------------------------------------
   デザイン幅1500pxを基準に、ビューポート幅へ比例させて rem を伸縮させる。
   これにより 1200px でも 1400px でも Illustratorと完全に同じ比率で表示される。
   （= レスポンシブでもデザインが崩れない）
   ========================================================================== */
html {
  font-size: 0.66667vw;          /* 1500px時に 1rem = 10px */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

/* ★1500px以上でも比例スケーリングを継続する（上限キャップなし）
   キャップを掛けると、1500px超のモニタでHero写真だけが相対的に縮み、
   ・下に白い余白が出る
   ・object-fit:cover で人物が上下に切れる
   という現象が起きるため。常に比例させることでIllustratorの見え方を
   どの画面幅でも維持する。 */

body {
  font-family: var(--f-jp);
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* 日本語フォントのハーフレディングによる上下の余白差を打ち消すユーティリティ。
   Illustratorとブラウザで見出し位置が数pxズレる主因がこれ。 */
.u-trim {
  display: block;
}
.u-trim::before,
.u-trim::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}

/* スキップリンク（アクセシビリティ） */
.c-skip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  padding: 1rem 2rem;
  color: var(--c-white);
  background: var(--c-navy);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.c-skip:focus { transform: translateY(0); }

/* SVGスプライトの定義本体は非表示 */
.c-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* フォーカスリング（キーボード操作時のみ） */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}


/* ============================================================================
   4. COMPONENT — ボタン
   ----------------------------------------------------------------------------
   Header／Hero／今後の各セクションで共通利用する。
   Illustrator実測
     Header内 CTA … 260 × 51px ／ 文字19px
     Hero内   CTA … 285 × 56px ／ 文字22px（--lg で上書き）
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);   /* 例外：完全なピル形状（Illustrator指定） */
  transition: background-color var(--dur) var(--ease),
              transform       var(--dur) var(--ease),
              box-shadow      var(--dur) var(--ease);
}

.c-btn--cta {
  width: 26rem;
  height: 5.1rem;
  padding-left: .82rem;
  gap: 1.77rem;
  color: var(--c-white);
  background: var(--c-orange);
}

.c-btn__icon {
  flex-shrink: 0;
  width: 3.9rem;
  height: 3.9rem;
}

.c-btn__label {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Hero用の大サイズ */
.c-btn--lg {
  width: 28.5rem;
  height: 5.6rem;
  padding-left: .75rem;
  gap: 2.15rem;
}
.c-btn--lg .c-btn__icon  { width: 3.85rem; height: 3.85rem; }
.c-btn--lg .c-btn__label { font-size: 2.2rem; }

/* ホバー ※Illustratorに指定がないため当方で設定 */
@media (hover: hover) {
  .c-btn--cta:hover {
    background: var(--c-orange-dk);
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.6rem rgba(234, 85, 42, .35);
  }
}


/* ============================================================================
   5. COMPONENT — 写真カード（.c-photocard）
   ----------------------------------------------------------------------------
   「TURTLEのピラティス」（05）と「TURTLEでできること」（06）で共通の部品。
   構造は同じでサイズだけが違うため、寸法はモディファイアで指定する。

     項目          05 --service     06 --can
     カード幅       416.67          417.12
     カード高さ     460.32          436.80
     写真高さ       257.28          257.04
     横間隔         25              21.6

   ★カードは高さ固定・本文は上揃え
     本文の行数がカードごとに違っても、テキストの開始位置は共通。
     align-items:center にすると行数の多いカードだけズレるため絶対配置で固定する。
   ★枠線は border ではなく内側シャドウ
     border だと絶対配置の基準がボーダー分だけ内側にずれ、
     写真やテキストの座標が1pxずつ狂うため。
   ========================================================================== */
.c-photocard {
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius);          /* 共通ルール：8px */
  box-shadow: inset 0 0 0 1px #D4D4D4;   /* 逆算：1px線のインク量から算出 */
  /* overflow:hidden により、全幅の写真の上2角もカードの角丸で切り取られる */
  overflow: hidden;
}

/* 写真：書き出し時点でカードと同じ比率に切り出してあるためトリミングは発生しない */
.c-photocard__figure {
  overflow: hidden;
}
.c-photocard__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* タイトル（番号バッジ＋文字）
   バッジ(36px)が行ボックスより高いため、flexの高さはバッジ基準になる。
   その差の半分だけ文字行が下がることを見込んで top を決めている。 */
.c-photocard__title {
  position: absolute;
  display: flex;
  align-items: center;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange);
  font-feature-settings: "palt";
  white-space: nowrap;
}
.c-photocard__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;                  /* 実測：φ36（05・06とも同じ） */
  height: 3.6rem;
  border-radius: 50%;             /* 例外：真円（Illustrator指定） */
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 1.65rem;             /* 逆算：0/1 の字面から 15.9〜17.1px */
  line-height: 1;
  letter-spacing: .02em;
}

/* 本文：行数に関わらず開始位置を固定（上揃え） */
.c-photocard__text {
  position: absolute;
  font-weight: 400;
  color: var(--c-text);
}
.c-photocard__text span { display: block; white-space: nowrap; }


/* ---- 05「TURTLEのピラティス」用のサイズ ---- */
.c-photocard--service { height: 46.032rem; }
.c-photocard--service .c-photocard__figure { height: 25.728rem; }
.c-photocard--service .c-photocard__title {
  top: 28.2935rem;
  left: 2.208rem;
  gap: 1.14rem;
  font-size: 2.094rem;            /* 逆算：常の字面18.24 ÷ ink比0.8710 */
  letter-spacing: .039em;
}
.c-photocard--service .c-photocard__num {
  margin-top: -.11rem;            /* 実測：バッジ中心が文字行の中心より1.1px上 */
}
.c-photocard--service .c-photocard__text {
  top: 32.843rem;
  left: 2.361rem;
  right: 2rem;
  font-size: 1.609rem;            /* 逆算：姿の字面14.40 ÷ ink比0.8948（Regular） */
  line-height: 1.8496;            /* 実測：行送り29.76px ÷ 16.09px */
  letter-spacing: .0236em;
}

/* ---- 10「使用するマシン」用のサイズ（番号バッジ無し） ---- */
.c-photocard--machine { height: 43.68rem; }
.c-photocard--machine .c-photocard__figure { height: 25.728rem; }
.c-photocard--machine .c-photocard__title {
  top: 28.6465rem;
  left: 2.282rem;
  font-size: 2.06rem;           /* 逆算：リ/フ/マ の字面から 20.6px */
  letter-spacing: .015em;
}
.c-photocard--machine .c-photocard__text {
  top: 32.8037rem;
  left: 2.3855rem;
  right: 2rem;
  font-size: 1.58rem;           /* 逆算：全/身の字面14.40 ÷ ink比0.91 */
  line-height: 1.8835;          /* 実測：行送り29.76px ÷ 15.8px */
  letter-spacing: .063em;
}


/* ---- 06「TURTLEでできること」用のサイズ ---- */
.c-photocard--can { height: 43.68rem; }
.c-photocard--can .c-photocard__figure { height: 25.704rem; }
.c-photocard--can .c-photocard__title {
  top: 28.3155rem;
  left: 2.244rem;
  gap: 1.056rem;
  font-size: 2.116rem;            /* 逆算：姿の字面から 21.16px */
  letter-spacing: .0435em;
}
.c-photocard--can .c-photocard__num {
  margin-top: -.14rem;            /* 実測：バッジ中心が文字行の中心より1.4px上 */
}
.c-photocard--can .c-photocard__text {
  top: 32.816rem;
  left: 2.386rem;
  right: 2rem;
  font-size: 1.6rem;              /* 逆算：肩/慢の字面から 15.8〜16.0px */
  line-height: 1.86;              /* 実測：行送り29.76px ÷ 16.0px */
  letter-spacing: .0343em;
}


/* ============================================================================
   6. LAYOUT — ヘッダー
   ----------------------------------------------------------------------------
   Illustrator実測
     高さ            130px（全要素の垂直中心が y=64.5 に一致）
     ロゴ            x 25.4 – 247.4 ／ 222 × 72px
     メニュー        x 330.3 – 889.6 ／ 項目間 28px ／ 16px Barlow Bold
     SNSアイコン     φ50 ／ 間隔 10.2px
     CTAボタン       x 1201.8 – 1461.5 ／ 260 × 51px
   ※ Hero写真の上に重なる「透過ヘッダー」。白帯ではない。
   ========================================================================== */
.l-header {
  position: absolute;           /* デザイン仕様：固定表示しない。スクロールで一緒に上へ移動 */
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              box-shadow      var(--dur) var(--ease);
}

.l-header__inner {
  display: flex;
  align-items: center;          /* 全要素を垂直中央に揃える */
  height: 100%;
  padding-left: 2.54rem;        /* 実測：ロゴ左端 25.4px */
  padding-right: 3.85rem;       /* 実測：CTA右端から 38.5px */
}

/* ---- ロゴ ---- */
.l-header__logo {
  flex-shrink: 0;
  line-height: 1;
}
.l-header__logo img {
  width: 22.2rem;
  height: 7.2rem;
  transition: opacity var(--dur) var(--ease);
}
@media (hover: hover) {
  .l-header__logo a:hover img { opacity: .7; }
}

/* ---- グローバルメニュー ---- */
.l-header__nav {
  margin-left: 8.29rem;         /* 実測：ロゴ右端 247.4 → メニュー左端 330.3 */
}

/* WordPressの wp_nav_menu() 出力へ差し替えても効くよう子孫セレクタで指定 */
.l-header__nav ul {
  display: flex;
  align-items: center;
  gap: 2.8rem;                  /* 実測：項目間 27〜28px */
}
.l-header__nav li a {
  position: relative;
  display: block;
  font-family: var(--f-en);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-text);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* ホバー：下線が左から伸びる ※Illustratorに指定がないため当方で設定 */
.l-header__nav li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.8rem;
  width: 100%;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .l-header__nav li a:hover { color: var(--c-orange); }
  .l-header__nav li a:hover::after { transform: scaleX(1); }
}

/* ---- 右側ユーティリティ ---- */
.l-header__util {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.l-header__sns {
  display: flex;
  align-items: center;
  gap: 1.02rem;                 /* 実測：アイコン間 10.2px */
}
.l-header__sns .c-icon {
  width: 5rem;                  /* 実測：φ50px */
  height: 5rem;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (hover: hover) {
  .l-header__sns a:hover .c-icon {
    transform: translateY(-2px);
    opacity: .82;
  }
}

.l-header__cta {
  margin-left: 1.11rem;         /* 実測：LINEアイコン右端 → ボタン左端 11.1px */
}

/* ---- スクロール時の状態 ----
   Illustratorにスクロール後の指定がないため、
   「デザインを変えない」方針に沿って高さ・サイズは一切変えず、
   写真から離れても文字が読めるよう背景だけを白へ切り替える。 */
.l-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 .2rem 1.2rem rgba(24, 38, 47, .07);
  backdrop-filter: blur(6px);
}

/* ---- ハンバーガー（1199px以下で表示） ---- */
.l-header__toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  margin-left: 1.6rem;
}
.l-header__bar {
  position: absolute;
  left: 50%;
  width: 2.8rem;
  height: 2px;
  margin-left: -1.4rem;
  background: var(--c-text);
  border-radius: 2px;           /* 対象外：Illustratorに無い要素（当方作成のハンバーガー線） */
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.l-header__bar:nth-child(1) { top: 1.3rem; }
.l-header__bar:nth-child(2) { top: 2.1rem; }
.l-header__bar:nth-child(3) { top: 2.9rem; }

/* 開いている状態＝×印 */
.l-header__toggle[aria-expanded="true"] .l-header__bar:nth-child(1) {
  transform: translateY(.8rem) rotate(45deg);
}
.l-header__toggle[aria-expanded="true"] .l-header__bar:nth-child(2) {
  opacity: 0;
}
.l-header__toggle[aria-expanded="true"] .l-header__bar:nth-child(3) {
  transform: translateY(-.8rem) rotate(-45deg);
}


/* ============================================================================
   7. LAYOUT — ドロワーメニュー
   ----------------------------------------------------------------------------
   ※ IllustratorにSP版デザインが存在しないため当方で設計した提案です。
   ========================================================================== */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(42rem, 82vw);
  height: calc(var(--vh, 1vh) * 100);   /* iOS Safari フォールバック */
  height: 100dvh;
  padding: 1.4rem 3rem 4rem;
  overflow-y: auto;
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
}
.l-drawer.is-open { transform: translateX(0); }

/* 上部：ロゴ（左）＋ 閉じる×（右）*/
.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  margin-bottom: 1rem;
}
.l-drawer__logo img { width: 15rem; height: auto; display: block; }
.l-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  color: var(--c-text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.l-drawer__close svg { width: 2.8rem; height: 2.8rem; }
@media (hover: hover) {
  .l-drawer__close:hover { color: var(--c-orange); }
}

.l-drawer__list li + li {
  border-top: 1px solid rgba(44, 52, 56, .12);
}
.l-drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.8rem .4rem;
  font-family: var(--f-en);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color var(--dur) var(--ease);
}
.l-drawer__list a span {
  font-family: var(--f-jp);
  font-size: 1.2rem;
  font-weight: 400;
  opacity: .6;
}
@media (hover: hover) {
  .l-drawer__list a:hover { color: var(--c-orange); }
}

.l-drawer__foot {
  margin-top: auto;
  padding-top: 3rem;
}
.l-drawer__foot .c-btn { width: 100%; justify-content: center; }

.l-drawer__sns {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.l-drawer__sns .c-icon { width: 4.4rem; height: 4.4rem; }

.l-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(24, 38, 47, .5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.l-drawer__overlay.is-open { opacity: 1; }


/* ============================================================================
   8. PROJECT — Hero（ファーストビュー）
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション   1500 × 894.4px（写真フルブリード）
     テキスト左端 105px
     見出し1・2   40px / 行送り64.3px（line-height 1.6）
     見出し3      68px / #EA552A
     罫線         y480.7 / 幅484.8px / 1px
     サブコピー   22px / ink top 503.8
     バッジ       高さ39px / y571 – 610
     CTA          285 × 56px / y653.4 – 709.5
   ========================================================================== */
.p-hero {
  position: relative;
  width: 100%;
  /* デザインと同じ縦横比に固定（1500 : 894.4）。
     書き出したHero画像もこの比率で切り出してあるため、
     object-fit:cover でもトリミングが一切発生せず、
     どのブラウザ幅でも人物が切れない。 */
  aspect-ratio: 1500 / 894.4;
  overflow: hidden;
}
/* aspect-ratio 非対応ブラウザ用フォールバック（894.4 ÷ 1500 = 59.627%） */
@supports not (aspect-ratio: 1 / 1) {
  .p-hero { height: 59.627vw; }
}

/* ---- 背景写真（フルブリード） ---- */
.p-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;               /* インライン由来の隙間を殺す */
}
.p-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  vertical-align: bottom;       /* 画像下の余白を殺す */
}

/* ---- 上部の白グラデーション ----
   検証結果：Illustratorのヘッダー背後に白オーバーレイは入っていない
   （デザインと元写真の差分αを実測 → 0.00〜0.01＝実質ゼロ）。
   写真の天井が白飛びしているだけなので、PCではベールを掛けない。
   SP（767px以下）でのみ、文字の可読性確保のため有効化する。 */
.p-hero__veil {
  display: none;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- テキストブロック ---- */
/* ----------------------------------------------------------------------------
   縦位置について
   LINE Seed JP の実フォントメトリクス（upm 1000 / ascent 1152 / descent 458
   ＝コンテンツ領域 1.610em、USE_TYPO_METRICS 無効のため全ブラウザ共通）と、
   各グリフの字面（ink）実寸から、Illustratorの字面位置に一致する
   ボックス位置を逆算した値。目測ではなく計算値。
   -------------------------------------------------------------------------- */
.p-hero__inner {
  position: absolute;
  z-index: 2;
  top: 23.15rem;                /* 見出し1行目の字面上端が y243.6 に一致する位置 */
  left: 10.636rem;              /* 逆算：見出し1・2行目のボックス左端 106.36px */
}

/* 見出し */
.p-hero__catch {
  font-weight: 700;
  color: var(--c-text);
}
.p-hero__catch-sub {
  display: block;
  font-size: 4.08rem;           /* 逆算：字面幅37.9 ÷ ink比0.925 = 40.8px */
  line-height: 1.576;           /* 実測：行送り 64.3px ÷ 40.8px */
  letter-spacing: .029em;       /* 逆算：字送り42.0px − 40.8px */
}
.p-hero__catch-main {
  display: block;
  margin-top: 1.054rem;
  margin-left: -.268rem;        /* 実測：この行だけ左に2.7pxはみ出している */
  font-size: 6.91rem;           /* 逆算：字面幅65.3 ÷ ink比0.950 = 69.1px */
  line-height: 1.3;
  letter-spacing: .0984em;      /* 逆算：字送り75.9px − 69.1px */
  color: var(--c-orange);
}

/* サブコピー ＋ 上の罫線
   ・罫線は幅484.8px固定だが、本文は1行に収まる必要があるため
     幅指定は使わず、罫線を ::before で別に描画している
   ・white-space:nowrap でIllustratorと同じ「1行」を保証 */
.p-hero__lead {
  position: relative;
  margin-top: 2.023rem;
  margin-left: .288rem;         /* 実測：この行のボックス左端 109.24px */
  padding-top: 1.65rem;
  font-size: 2.15rem;           /* 逆算：字送り21.53px（22文字分の平均） */
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 700;
  white-space: nowrap;
}
.p-hero__lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -.314rem;               /* 実測：罫線左端 106.1px */
  width: 48.48rem;              /* 実測：罫線幅 484.8px */
  height: 1px;
  background: rgba(234, 85, 42, .5);
}

/* バッジ（白いピル × 3） */
.p-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;                   /* 実測：ピル間 5〜7px */
  margin-top: 3.94rem;
  margin-left: -.136rem;        /* 実測：ピル左端 105px */
}
.p-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .73rem;                  /* 実測：アイコン → 文字 7.3px */
  height: 3.9rem;               /* 実測：39px */
  padding: 0 1.3rem;            /* 実測：左右 12.7px */
  border-radius: var(--radius-pill);   /* 例外：完全なピル形状（Illustrator指定） */
  background: var(--c-white);
  font-size: 1.6rem;            /* 実測：16px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-text);
  box-shadow: 0 .2rem .8rem rgba(24, 38, 47, .06);
}
.p-hero__badge-icon {
  flex-shrink: 0;
  width: 1.7rem;                /* 実測：φ16.8px */
  height: 1.7rem;
}

/* CTAボタン */
.p-hero__cta {
  margin-top: 4.34rem;          /* 実測：バッジ下端610 → ボタン上端653.4 */
  margin-left: -.216rem;        /* 実測：ボタン左端 104.2px */
}


/* ============================================================================
   9. LAYOUT — 共通コンテナ
   ----------------------------------------------------------------------------
   Illustrator実測：コンテンツ幅1300px（1500pxアートボードの左右余白100px）
   お悩みセクションのカード（243.8 × 5 ＋ 20 × 4 = 1299）と完全に一致する。
   以降の全セクションで使い回す。
   ========================================================================== */
.l-container {
  width: var(--container);      /* 130rem = 1300px */
  margin-inline: auto;
}


/* ============================================================================
   10. PROJECT — 特徴バー（ダークバー）
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション   y894.6 – 1032.4（高さ137.8px）／ 背景 #18262F ／ フルブリード
     全要素の垂直中心が y963.5 に一致（＝上下中央揃え）

     項目  アイコン左   アイコン寸法        アイコン→文字
      1     137.68     62.88 × 62.40        25.84
      2     456.72     52.80 × 62.88        21.18
      3     797.68     54.24 × 59.04        28.58
      4    1135.16     78.72 × 45.60        30.42

   ★4項目は等間隔ではなくIllustrator上で手置きされている
     （項目間 91.1 / 82.3 / 69.8px、アイコン幅も61.9〜78.7pxと不揃い）。
     flexのspace-betweenでは再現できないため、実測座標で絶対配置している。
     文字の描画幅に左右されないので、Webフォント読込前後でも位置が動かない。
   ========================================================================== */
.p-features {
  height: 13.78rem;
  background: var(--c-navy);
}

.p-features__inner,
.p-features__list {
  position: relative;
  width: 100%;                  /* = 150rem（1500px基準）*/
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 0 80px;
}

.p-features__item {
  display: flex;
  align-items: center;
}

.p-features__icon {
  flex-shrink: 0;
}

.p-features__text {
  font-size: 2.24rem;           /* 逆算：字面20.64 ÷ ink比0.9222 */
  font-weight: 700;
  line-height: 1.6473;          /* 実測：行送り36.9px ÷ 22.4px */
  letter-spacing: .05em;        /* 逆算：字送り23.52px − 22.4px */
  color: var(--c-white);
  white-space: nowrap;
}
.p-features__text span { display: block; }

/* 実測座標（項目ごとにアイコン寸法も余白も異なる） */
.p-features__item--1 { gap: 2.584rem; }
.p-features__item--2 { gap: 2.118rem; }
.p-features__item--3 { gap: 2.858rem; }
/* 項目4のみ、アイコン・文字とも中心から1.3px下に置かれている（実測） */
.p-features__item--4 { gap: 3.042rem; top: calc(50% + .129rem); }

.p-features__item--1 .p-features__icon { width: 6.288rem; height: 6.24rem;  }
.p-features__item--2 .p-features__icon { width: 5.28rem;  height: 6.288rem; }
.p-features__item--3 .p-features__icon { width: 5.424rem; height: 5.904rem; }
.p-features__item--4 .p-features__icon { width: 7.872rem; height: 6.468rem; }


/* ============================================================================
   11. PROJECT — このようなお悩みはありませんか？
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション   y1032.4 – 1715.4（高さ683px）／ 背景 #F8F4F1
     見出し       字面上端 y1129.4 ／ 41.8px ／ 中央揃え
     リード       字面上端 y1226.4・1266.7（行送り40.3）／ 17.7px
     カード       y1362.5 – 1624.6（高さ262.1）／ 幅243.8 ／ 間隔20 ／ 角丸6
     カード文字   字面上端 y1522.48 ／ 行送り31.2 ／ 21px
     ノッチ       幅80 × 高さ32 ／ 中央

   ★カードは高さ固定・テキストは「上揃え」
     文字が2行のカードと3行のカード（5枚目）が混在するが、
     テキストの開始位置は全カード y1522.48 で共通。
     align-items:center にすると5枚目だけズレるため、絶対配置で上端を固定する。
   ★カードに影は入っていない（カード下辺の直下が即 #F8F4F1 であることを画素で確認済み）
   ========================================================================== */
.p-worry {
  position: relative;
  padding-top: 8.613rem;
  padding-bottom: 9.08rem;
  background: var(--c-beige);
}

/* ---- 見出し ---- */
.p-worry__title {
  font-size: 4.18rem;           /* 逆算：字面38.40 ÷ ink比0.9187 */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;            /* 逆算：字送り41.82px ≒ フォントサイズ */
  text-align: center;
  color: var(--c-text);
  font-feature-settings: "palt";  /* 「？」など約物のアキをIllustratorに合わせる */
}
.p-worry__title-accent {
  color: var(--c-orange);
}

/* ---- リード文 ---- */
.p-worry__lead {
  margin-top: 3.38rem;
  font-size: 1.77rem;           /* 逆算：字面15.84 ÷ ink比0.8948（Regular） */
  font-weight: 400;
  line-height: 2.2768;          /* 実測：行送り40.3px ÷ 17.7px */
  letter-spacing: .068em;
  text-align: center;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-worry__lead span { display: block; }

/* ---- カード ---- */
.p-worry__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;                    /* 実測：カード間 20px */
  margin-top: 6.687rem;
}

.p-worry__card {
  position: relative;
  height: 26.21rem;             /* 実測：262.1px（全カード共通） */
  background: var(--c-white);
  border-radius: var(--radius);   /* 共通ルール：8px */
}

/* イラストは1点ずつ寸法も位置も異なるため、カードごとに実測値で配置 */
.p-worry__figure {
  position: absolute;
  display: block;
}
.p-worry__figure img {
  width: 100%;
  height: 100%;
}

.p-worry__card--1 .p-worry__figure { left: 8.904rem; top: 1.998rem; width: 6.528rem;  height: 11.424rem; }
.p-worry__card--2 .p-worry__figure { left: 7.224rem; top: 2.046rem; width: 10.464rem; height: 11.088rem; }
.p-worry__card--3 .p-worry__figure { left: 7.56rem;  top: 2.478rem; width: 10.08rem;  height: 10.704rem; }
.p-worry__card--4 .p-worry__figure { left: 5.64rem;  top: 2.526rem; width: 10.224rem; height: 10.8rem;   }
.p-worry__card--5 .p-worry__figure { left: 5.352rem; top: 2.142rem; width: 11.52rem;  height: 10.8rem;   }

/* テキストは行数に関わらず開始位置を固定（上揃え） */
.p-worry__text {
  position: absolute;
  top: 15.484rem;
  left: 0;
  width: 100%;
  font-size: 2.1rem;            /* 逆算：字面19.20 ÷ ink比0.9170 */
  font-weight: 700;
  line-height: 1.4857;          /* 実測：行送り31.2px ÷ 21px */
  letter-spacing: .051em;
  text-align: center;
  color: var(--c-text);
}
.p-worry__text span { display: block; }

/* ---- 下端の▼ノッチ ----
   画像を使わずCSSのborderで三角形を描く。背景色を変えても追従する。 */
.p-worry__notch {
  position: absolute;
  left: 50%;
  bottom: -3.2rem;
  width: 0;
  height: 0;
  margin-left: -4rem;
  border-left:  4rem solid transparent;
  border-right: 4rem solid transparent;
  border-top:   3.2rem solid var(--c-beige);   /* 実測：幅80 × 高さ32 */
}


/* ============================================================================
   12. PROJECT — TURTLEのピラティス
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション   y1715.8 – 2803.5（高さ1087.7px）／ 背景 #FFFFFF
     見出し1      字面上端 y1832.48（カナ）／ 37.8px
     見出し2      字面上端 y1897.48 ／ 37.53px
     カード       y2000.64 – 2460.96（高さ460.32）／ 幅416.67 ／ 間隔25 ／ 枠線1px #D4D4D4
       写真       高さ257.28（カード幅いっぱい・比 1.619）
       番号バッジ φ36 ／ カード左から22.08
       タイトル   字面上端 y2291.32 ／ 20.94px
       本文       字面上端 y2336.04 ／ 16.09px ／ 行送り29.76
     注釈ボックス y2500.72 – 2678.80（高さ178.08）／ 幅1298.4 ＝ コンテナ
       電球       49.44 × 108.0 ／ ボックス左から74.56
       本文       字面上端 y2555.44・2601.44（行送り46.0）

   ★見出し・タイトルは palt（プロポーショナルメトリクス）が有効
     カナの字送りが一定でないことから判定。palt有効時の位置誤差0.48pxに対し、
     無効時は2.74pxとなり有意差があった。本文はベタ組み（palt無効）。
   ★「TURTLE」はBarlowではなくLINE Seed JPの欧文
     T/U/R/L/E 5文字の字幅比が LINE Seed と一致（Barlowとは不一致）。
   ★カードは高さ固定・本文は上揃え
     カード2だけ本文が3行だが、開始位置は3枚とも y2336.04 で共通。
   ========================================================================== */
.p-service {
  padding-top: 10.776rem;
  padding-bottom: 12.47rem;
  background: var(--c-white);
}

/* ---- 見出し ---- */
.p-service__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-service__title-sub {
  display: block;
  font-size: 3.78rem;           /* 逆算：ピ/ラ/テ の字面から 37.8px */
  line-height: 1.5;
  letter-spacing: .0717em;
}
.p-service__title-accent {
  color: var(--c-orange);
}
.p-service__title-main {
  display: block;
  margin-top: .776rem;
  font-size: 3.753rem;          /* 逆算：鍛の字面35.52 ÷ ink比0.9466 */
  line-height: 1.5;
  letter-spacing: .0701em;
}

/* ---- カード（共通部品 .c-photocard を使用。サイズのみ --service で指定）---- */
.p-service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;                  /* 実測：カード間 25px */
  margin-top: 5.632rem;
}

/* ---- 注釈ボックス ----
   ★2行は文字サイズが異なる（1行目 19.7px / 2行目 23.5px）
     漢字の字面幅から逆算して判明。同サイズで組むと2行目が140px短くなる。 */
.p-service__note {
  display: flex;
  align-items: flex-start;      /* 縦位置は実測値で個別に指定するため上揃え */
  height: 17.808rem;            /* 実測：178.08px */
  margin-top: 3.976rem;
  padding-left: 7.456rem;       /* 実測：ボックス左から電球まで74.56px */
  background: var(--c-beige-lt);
  border-radius: var(--radius);   /* 共通ルール：8px */
}
.p-service__note-icon {
  flex-shrink: 0;
  width: 4.944rem;              /* 実測：49.44 × 108.0 */
  height: 10.8rem;
  margin-top: 2.848rem;         /* 実測：ボックス上端 → 電球上端 28.48px */
}
.p-service__note-text {
  margin-left: 7.776rem;        /* 実測：電球右端223.84 → 文字左端301.6 */
  margin-top: 4.936rem;
  font-weight: 700;
  color: var(--c-text);
}
.p-service__note-text span { display: block; white-space: nowrap; }
.p-service__note-text > span:first-child {
  font-size: 1.97rem;           /* 逆算：Tの字面12.96 ÷ ink比0.6640 */
  line-height: 1.6;
  letter-spacing: .0378em;
}
.p-service__note-accent {
  margin-top: 1.286rem;         /* 実測：行送り46.0px になるよう算出 */
  font-size: 2.35rem;           /* 逆算：身/体の字面22.08 から */
  line-height: 1.6;
  letter-spacing: .0205em;
  color: var(--c-orange);
}
/* 注釈内の改行：PCでは無効（1行のまま）、SPでのみ有効にする */
.p-service__note-br { display: none; }


/* ============================================================================
   13. PROJECT — TURTLEでできること
   ----------------------------------------------------------------------------
   Illustrator実測
     背景         #F8F4F1（y2803.5 から。セクション04と同じベージュ帯の続き）
     見出し       字面上端 y2893.64 ／ 欧文37.59px ＋ 和文38.24px ／ 全て黒
     サブ英字     字面上端 y2949.68 ／ 13.18px ／ オレンジ
     カード       幅417.12 ／ 横間隔21.6 ／ 縦間隔30.72 ／ 高さ436.8
                  上段 y3025.44 ／ 下段 y3492.96
     角丸         8.15 / 8.20 / 8.30 / 8.75 → 共通ルールの8pxに合致
     影           無し（カード下辺の直下が即ベージュであることを画素で確認）

   ★カード列の合計幅がコンテナと一致しない
     417.12×3 + 21.6×2 = 1294.56 で、コンテナ1300pxより5.4px狭い。
     セクション04（1299）・05（1300）はぴったりだったが、ここだけ異なる。
     コンテナに合わせて広げるとデザイン改変になるため、
     1294.56px幅のブロックとして中央配置する。
   ★見出しは欧文と和文でサイズが異なる
     「TURTLE」37.59px／「でできること」38.24px。
     1つの文字サイズで組むと位置誤差が3.6pxまで開くため、spanを分けている。
   ========================================================================== */
.p-can {
  padding-top: 7.951rem;
  padding-bottom: 5.524rem;     /* ※セクション07制作時に再配分する暫定値 */
  background: var(--c-beige);
}

/* ---- 見出し ---- */
/* 欧文spanと和文spanは同じ行ボックスを共有する。
   親のストラット（行の基準）が和文spanと一致するよう、同じ値を明示しておく。
   これを省くと親が継承した文字サイズがベースライン位置に影響し得る。 */
.p-can__title {
  text-align: center;
  font-size: 3.824rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-can__title-en-word {        /* 「TURTLE」＝欧文 */
  font-size: 3.759rem;
  line-height: 1.5;
  letter-spacing: .0521em;
}
.p-can__title-jp {             /* 「でできること」＝和文 */
  margin-left: .957rem;        /* 実測：欧文字面右端715.68 → 和文字面左端731.04 */
  font-size: 3.824rem;
  line-height: 1.5;
  letter-spacing: .0418em;
}

/* ---- サブ英字（OUR SERVICES） ---- */
.p-can__title-sub {
  display: block;
  margin-top: .504rem;
  font-family: var(--f-en);
  font-size: 1.533rem;          /* 逆算：字面高11.04 ÷ Barlowのcap 0.72 */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .080em;       /* ※Barlowのメトリクスが手元に無く推定値 */
  color: var(--c-orange);
}

/* ---- カード ---- */
.p-can__list {
  width: 129.456rem;            /* 実測：417.12×3 + 21.6×2 */
  margin: 6.026rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.072rem 2.16rem;        /* 実測：縦30.72 ／ 横21.6 */
  /* 下段の2枚は自動的に左寄せになる（グリッドの自然な流し込み） */
}


/* ============================================================================
   14. PROJECT — TURTLEが選ばれる理由
   ----------------------------------------------------------------------------
   Illustrator実測
     背景         #F8F4F1（セクション06から続くベージュ帯）
     見出し       字面上端 y4038.16 ／ 欧文37.59px ＋ 和文37.94px ／ 全て黒
     サブ英字     字面上端 y4096.24 ／ REASONS ／ オレンジ
     カード       幅318.24 ／ 高さ214.08 ／ y4194.64 – 4408.72
                  x 98.88 / 424.80 / 750.72 / 1080.00
                  間隔 7.68 / 7.68 / 11.04（4枚目だけ約3.4px右へずれている）
     角丸         8.10 / 8.20 / 8.30 / 8.35 → 共通ルールの8px
     バッジ       φ35 ／ カード左から26.12 ／ 中心がカード上辺にちょうど乗る
     矢印線       y4193.44 の1px線 ／ バッジ右+4.28 から次カード左まで
     アイコン     上端 y4234.40（4枚共通）／ 幅はアイコンごとに異なる

   ★カードに overflow:hidden を使わない
     バッジは中心がカード上辺に乗り、上半分がカードの外へはみ出す。
     矢印線も同じ高さでカードを横断するため、overflow:hidden を掛けると
     バッジの上半分と矢印が消える。角丸は border-radius だけで表現する。
   ★カード3だけテキストブロックが上にずれている
     本文が4行あるため、タイトル・本文とも他の3枚より約9〜12px上に置かれている。
     :nth-child(3) で個別に指定する。
   ========================================================================== */
.p-reasons {
  padding-top: 4.447rem;
  padding-bottom: 5rem;         /* ※セクション08制作時に再配分する暫定値 */
  background: var(--c-beige);
}

/* ---- 見出し ---- */
.p-reasons__title {
  text-align: center;
  font-size: 3.794rem;          /* 親のストラットを和文spanに合わせる */
  line-height: 1.5;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-reasons__title-en-word {     /* 「TURTLE」＝欧文 */
  font-size: 3.759rem;
  letter-spacing: .0495em;
}
.p-reasons__title-jp {          /* 「が選ばれる理由」＝和文 */
  margin-left: .983rem;
  font-size: 3.794rem;
  letter-spacing: .0441em;
}
.p-reasons__title-sub {         /* REASONS */
  display: block;
  margin-top: .383rem;
  font-family: var(--f-en);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .044em;
  color: var(--c-orange);
}

/* ---- カード列 ----
   間隔が 7.68 / 7.68 / 11.04 と不均一なため、
   gap ではなく「余白そのものを列」として grid-template-columns に組み込む。 */
.p-reasons__list {
  width: 129.936rem;            /* 実測：318.24×4 + 7.68 + 7.68 + 11.04 */
  margin-top: 8.043rem;
  margin: 8.043rem auto 0;
  display: grid;
  grid-template-columns:
    31.824rem .768rem
    31.824rem .768rem
    31.824rem 1.104rem
    31.824rem;
}
.p-reasons__step:nth-child(1) { grid-column: 1; }
.p-reasons__step:nth-child(2) { grid-column: 3; }
.p-reasons__step:nth-child(3) { grid-column: 5; }
.p-reasons__step:nth-child(4) { grid-column: 7; }

.p-reasons__step {
  position: relative;           /* バッジ・矢印の配置基準 */
}

/* ---- カード本体 ----
   中のアイコン・タイトル・本文は絶対配置。SPでは通常フローへ戻すため、
   カードの内側に入れてある（外に出すとSPで順序が崩れる）。 */
.p-reasons__card {
  position: relative;
  height: 21.408rem;            /* 実測：214.08px */
  background: var(--c-white);
  border-radius: var(--radius); /* 共通ルール：8px */
}

/* ---- 番号バッジ（カード上辺にまたがる） ---- */
.p-reasons__num {
  position: absolute;
  z-index: 2;
  top: -1.756rem;               /* 実測：バッジ上端 y4177.08（カード上端の17.56px上） */
  left: 2.612rem;               /* 実測：カード左から26.12px */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;                /* 実測：φ35 */
  height: 3.5rem;
  border-radius: 50%;           /* 例外：真円（Illustrator指定） */
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

/* ---- 矢印（1px線＋シェブロン） ---- */
.p-reasons__arrow {
  position: absolute;
  z-index: 1;
  top: -.12rem;                 /* 実測：線 y4193.44 */
  left: 6.496rem;               /* 実測：バッジ右端＋4.28px */
  width: 26.016rem;             /* 実測：次カードの左端まで */
  height: 1px;
  background: var(--c-orange);
}
.p-reasons__arrow svg {         /* シェブロン（先端） */
  position: absolute;
  right: 0;
  top: -1.16rem;                /* 実測：シェブロン上端 y4181.84 */
  width: 2.16rem;               /* 実測：21.6 × 23.52 ／ 腕は45度・水平厚10.08 */
  height: 2.352rem;
}
/* 4枚目は次のカードが無いため線が短く、シェブロンも付かない */
.p-reasons__step:nth-child(4) .p-reasons__arrow { width: 24.768rem; }

/* ---- アイコン（1点ずつ寸法も位置も異なるため個別指定） ---- */
.p-reasons__icon {
  position: absolute;
  top: 3.976rem;                /* 実測：上端 y4234.40（4枚共通） */
}
.p-reasons__step:nth-child(1) .p-reasons__icon { left: 1.84rem;  width: 8.256rem;  height: 8.592rem; }
.p-reasons__step:nth-child(2) .p-reasons__icon { left: 2.992rem; width: 5.424rem;  height: 8.976rem; }
.p-reasons__step:nth-child(3) .p-reasons__icon { left: .832rem;  width: 10.08rem;  height: 8.976rem; }
.p-reasons__step:nth-child(4) .p-reasons__icon { left: 2.224rem; width: 6.528rem;  height: 8.736rem; }

/* ---- タイトル・本文（行数に関わらず開始位置を固定） ---- */
.p-reasons__step-title {
  position: absolute;
  top: 3.44rem;
  left: 12.42rem;
  font-size: 2.042rem;          /* 逆算：原の字面から 20.42px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .0708em;
  color: var(--c-orange);
  font-feature-settings: "palt";
  white-space: nowrap;
}
.p-reasons__text {
  position: absolute;
  top: 7.197rem;
  left: 12.4rem;
  right: 1.2rem;
  font-size: 1.49rem;           /* 逆算：漢字7文字の字面平均から 14.9px */
  font-weight: 400;
  line-height: 1.8846;          /* 実測：行送り28.08px ÷ 14.9px */
  letter-spacing: .035em;
  color: var(--c-text);
}
.p-reasons__text span { display: block; white-space: nowrap; }

/* カード3だけ本文が4行あり、テキストブロックが上にずれている（実測） */
.p-reasons__step:nth-child(3) .p-reasons__step-title { top: 2.581rem; }
.p-reasons__step:nth-child(3) .p-reasons__text       { top: 6.001rem; }


/* ============================================================================
   15. PROJECT — お客様の声（VOICE）
   ----------------------------------------------------------------------------
   Illustrator実測
     背景       #F8F4F1（セクション07から続くベージュ帯）
     見出し     字面上端 y4508.64 ／ 37.81px ／ 黒
     サブ       字面上端 y4557.20 ／ 18.44px ／「－ Google クチコミより－」
     VOICE      字面上端 y4595.76 ／ オレンジ
     カード     幅415.68 ／ 高さ323.52 ／ 間隔25.92 ／ y4646.08 – 4969.60
     角丸       12隅の平均8.84px（左上ほど大きく出る測定バイアスあり）
                → 共通ルールどおり8px
     アバター   共通ボックス 73.92 × 83.52（3点とも同じ位置に置けるよう余白を揃えて書き出し）
     ★         幅32.16 × 高27.84 ／ 間隔37.92 ／ 5つ
     本文       5行 ／ 行送り30.0 ／ 15.18px
     矢印       左 x50.88 ／ 右 x1430.88 ／ 幅14.4 × 高24.0（コンテナ外）

   ★影は入っていない（カード上下左右の直後がいずれも即ベージュであることを確認）
   ★カードの中身は js/voice-data.js から生成する
   ========================================================================== */
.p-voice {
  padding-top: 4.028rem;
  padding-bottom: 5rem;         /* ※セクション09制作時に再配分する暫定値 */
  background: var(--c-beige);
  overflow: hidden;             /* カルーセルのはみ出しを隠す */
}

/* ---- 見出し ---- */
.p-voice__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-voice__title-main {
  display: block;
  font-size: 3.781rem;
  line-height: 1.5;
  letter-spacing: .0459em;
}
.p-voice__title-note {
  display: block;
  margin-top: -.399rem;         /* 見出しの行ボックス下端から逆算した実測値 */
  font-size: 1.844rem;
  line-height: 1.5;
  letter-spacing: .0322em;
}
.p-voice__title-sub {           /* VOICE */
  display: block;
  margin-top: 1.06rem;
  font-family: var(--f-en);
  font-size: 1.533rem;          /* 逆算：字面高11.04 ÷ Barlowのcap 0.72 */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .080em;       /* ※Barlowのメトリクスが手元に無く推定値 */
  color: var(--c-orange);
}

/* ---- カルーセル ---- */
.p-voice__carousel {
  position: relative;
  margin-top: 3.31rem;
}
.p-voice__viewport {
  width: var(--container);      /* 130rem＝カード3枚ぶんの表示幅 */
  margin-inline: auto;
  overflow: hidden;
}
.p-voice__list {
  display: flex;
  align-items: stretch;         /* 3枚のカード高さを一番高いものに揃える */
  gap: 2.592rem;                /* 実測：カード間25.92px */
  will-change: transform;
  transition: transform .45s var(--ease);
}
/* カードは高さを固定せず、口コミ本文の量に応じて伸びる（フレックス縦積み）。
   上段(head)：アバター（左）＋属性・星（右）／ 下段：本文（全幅）。 */
.p-voice__card {
  flex: 0 0 41.568rem;          /* 実測：幅415.68px */
  display: flex;
  flex-direction: column;
  padding: 2.66rem 2rem 2.9rem 3.4rem;   /* 実測：カード内の余白 */
  background: var(--c-white);
  border-radius: var(--radius); /* 共通ルール：8px */
}
.p-voice__head {
  display: flex;
  align-items: center;
  gap: 1.65rem;
}
.p-voice__avatar {
  flex: 0 0 auto;
  width: 7.392rem;
  height: auto;
}
.p-voice__who { min-width: 0; }
.p-voice__meta {
  margin: 0;
  font-size: 2.06rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .09em;
  color: var(--c-text);
}
.p-voice__rating {
  display: flex;
  gap: .576rem;                 /* 実測：星間隔37.92 − 星幅32.16 */
  margin-top: .9rem;
}
.p-voice__rating svg {
  width: 3.216rem;              /* 実測：32.16 × 27.84 */
  height: 2.784rem;
  color: var(--c-orange);
}
.p-voice__text {
  margin: 2rem 0 0;
  font-size: 1.518rem;          /* 逆算：字面12.48 ÷ ink比0.822 */
  font-weight: 400;
  line-height: 1.9763;          /* 実測：行送り30.0px ÷ 15.18px */
  letter-spacing: .0435em;
  color: var(--c-text);
  overflow-wrap: anywhere;      /* 長文でもカード幅で必ず折り返す */
}

/* ---- 左右の矢印（コンテナの外側） ---- */
.p-voice__nav {
  position: absolute;
  top: 50%;                     /* カード高さが可変になったので上下中央に */
  transform: translateY(-50%);
  width: 1.44rem;               /* 実測：14.4 × 24.0 */
  height: 2.4rem;
  padding: 0;
  color: var(--c-orange);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.p-voice__nav svg { width: 100%; height: 100%; }
.p-voice__nav--prev { left: calc(50% - 700px); }
.p-voice__nav--next { right: calc(50% - 700px); }
.p-voice__nav[disabled] {
  opacity: .25;
  cursor: default;
}
@media (hover: hover) {
  .p-voice__nav:not([disabled]):hover { transform: translateY(-50%) scale(1.15); }
}

.p-voice__noscript {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
}


/* ============================================================================
   16. PROJECT — 初回限定CTAバナー
   ----------------------------------------------------------------------------
   Illustrator実測
     バナー     x450.24 – 1055.52（幅605.28）／ y5058.88 – 5204.80（高さ145.92）
                中心 x752.88（デザイン中心750より2.9px右）
     角丸       左上15.40 / 右上13.70 / 左下15.40 / 右下13.70 → 平均14.55
     白ボタン   x476.64 – 899.04（幅422.40）／ 高さ87.36 ／ 角丸約28
     文字       「初めての方限定」16.0px（白）
                「初回」「分」23.5px ／「80」34.4px ／「¥5,000」31.0px（黄）
     バッジ     円 直径約108.5 ／「24」約42.5px ／「時間受付中」約17.5px

   ★角丸が8pxルールの例外
     このバナーだけ実測14.55pxで、カード類（8px）と明確に異なる。
     「デザインデータに別指定がある場合を除く」に該当するため16pxを採用。
   ★数字は DIN 2014 ではなく LINE Seed
     当初 DIN 2014 ExtraBold（商用フォント）を疑ったが、
     「80」「5,000」の字幅・字高とも LINE Seed と一致した。有料フォントは不要。
   ★バナーはコンテナ(1300px)ではなく605.28pxの独立ブロック
     中央配置では2.9pxずれるため、実測位置で置いている。
   ========================================================================== */
.p-cta {
  padding-top: 5rem;            /* 実測：セクション08下端 → バナー上端 5058.88 */
  padding-bottom: 5rem;         /* ※セクション10制作時に再配分する暫定値 */
  background: var(--c-beige);
}

.p-cta__banner {
  position: relative;
  display: block;
  width: 60.528rem;             /* 実測：605.28px */
  margin: 0 auto;
  border-radius: 1.6rem;        /* 例外：実測14.55px → 16px */
  overflow: hidden;             /* 角丸で画像の四隅をクリップ */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.p-cta__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (hover: hover) {
  .p-cta__banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 .8rem 2rem rgba(234, 85, 42, .35);
  }
}

/* ============================================================================
   16.5 COMPONENT — WEB予約 固定ボタン（全ページ共通・左下）
   ----------------------------------------------------------------------------
   ・position: fixed で常時表示。スクロールしても左下に固定。
   ・円形。中身は px 指定（vw連動remだと画面幅で極端に縮むため、UIとして固定サイズ）。
   ・リンク先は後日確定（現在は #reservation へ仮リンク）。
   ========================================================================== */
.c-webfix {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24),
              inset 0 0 0 2px rgba(255, 255, 255, .55);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.c-webfix__icon { width: 30px; height: 20px; margin-bottom: 3px; }
.c-webfix__main { font-size: 19px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.c-webfix__sub  { margin-top: 4px; font-size: 10.5px; letter-spacing: .06em; line-height: 1; }
@media (hover: hover) {
  .c-webfix:hover {
    transform: translateY(-3px) scale(1.03);
    background: var(--c-orange-dk);
    box-shadow: 0 10px 24px rgba(234, 85, 42, .4),
                inset 0 0 0 2px rgba(255, 255, 255, .6);
  }
}
.c-webfix:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* スマホでは小さめ＋位置を少し内側へ */
@media (max-width: 767px) {
  .c-webfix {
    left: 14px;
    bottom: 14px;
    width: 82px;
    height: 82px;
  }
  .c-webfix__icon { width: 22px; height: 15px; margin-bottom: 2px; }
  .c-webfix__main { font-size: 14px; }
  .c-webfix__sub  { font-size: 8px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-webfix { transition: none; }
}


/* ============================================================================
   17. PROJECT — TURTLEで使用するマシン（2026-07 全面リニューアル）
   ----------------------------------------------------------------------------
   新デザインデータ（TURTLEデザイン_リニューアルマシン部分20260715.ai）を正として実装。
   構成：見出し → ピラティスマシン(4カード) → コンディショニングツール(大カード)
   実測（1500pxアートボード基準）
     見出し      字面 y128.7〜163.3 ／ 37.6px ／ ネイビー
     OUR MACHINES y190〜198 ／ オレンジ
     説明文      y235〜275（2行）／ 約16px
     小見出し     アイコン＋見出し(28px)＋罫線＋補足(16px)
                 ピラティス＝オレンジ／コンディショニング＝グリーン
     カード      99.6〜1400（4枚）／ 幅312.4 ／ 間17.3 ／ 高さ約436 ／ 角丸8px
       写真      カード幅いっぱい・比 312.4/214・角丸8px上部
       マシン名   オレンジ 19px ／ 説明 16px
     大カード     100.8〜1399.2 × 1022〜1642 ／ 角丸8px ／ 左写真＋右6ツール
   ========================================================================== */
.p-machine {
  padding-top: 12rem;          /* デザイン：見出しまで約128px */
  padding-bottom: 10rem;
  background: var(--c-white);
}
.p-machine__inner {
  width: 130.04rem;             /* 実測：カード左右端 99.6〜1400 */
  margin-inline: auto;
}

/* ---- 見出し ---- */
.p-machine__head { text-align: center; }
.p-machine__title {
  font-size: 3.76rem;           /* 実測：37.6px */
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-machine__title-en {
  margin-top: .8rem;
  font-family: var(--f-en);
  font-size: 1.533rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-orange);
}
.p-machine__desc {
  margin-top: 3.6rem;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--c-text);
}

/* ---- 小見出し（ピラティス／コンディショニング共通）---- */
.p-machine__subhead {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 7rem;
}
.p-machine__subicon { flex: 0 0 auto; height: 3.4rem; width: auto; }
.p-machine__subtitle {
  flex: 0 0 auto;
  font-size: 2.8rem;            /* 実測：約28px */
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-orange);
}
.p-machine__subhead--cond .p-machine__subtitle { color: var(--c-green); }
.p-machine__rule {
  flex: 0 0 4.4rem;            /* 見出しと補足の間の短い罫線 */
  height: 2px;
  background: var(--c-orange);
}
.p-machine__subhead--cond .p-machine__rule { background: var(--c-green); }
.p-machine__subnote {
  flex: 1 1 auto;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-text);
}

/* ---- ピラティス 4カード ---- */
.p-machine__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.73rem;                 /* 実測：カード間17.3 */
  margin-top: 3.4rem;
}
.p-mcard {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-cardline);
  border-radius: var(--radius);/* 共通ルール：8px */
  overflow: hidden;
}
.p-mcard__photo { aspect-ratio: 312.4 / 214; }
.p-mcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mcard__name {
  margin: 2.1rem 1.6rem 0;
  font-size: 1.9rem;           /* 実測：19px */
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-orange);
}
.p-mcard__text {
  margin: 1.5rem 1.6rem 2.8rem;
  font-size: 1.55rem;          /* 実測：約16px */
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--c-text);
}

/* ---- コンディショニング 大カード ---- */
.p-machine__panel {
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  margin-top: 3rem;
  padding: 2.4rem;             /* 写真の外の余白（上・下・左）を均等にする */
  background: var(--c-white);
  border: 1px solid var(--c-cardline);
  border-radius: var(--radius);
}
.p-machine__panel-photo {
  flex: 0 0 57rem;             /* 実測：左写真 約590px（幅）*/
  height: 57rem;               /* 正方形。写真がパネル高さを決めるので上下左の余白が均等になる */
  border-radius: var(--radius);
  overflow: hidden;
}
.p-machine__panel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-machine__panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 写真の高さに対して中央に配置 */
  padding: 1rem 1.4rem;
}
.p-machine__panel-lead {
  text-align: center;          /* ② 中央揃え */
  font-size: 2.1rem;           /* ② デザインに合わせ小さめ（2行に収める）*/
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--c-green);
}

/* ④ 6ツール：円の大きさ・間隔をデザイン実測に合わせる（中央にまとめる）*/
.p-machine__tools {
  display: grid;
  grid-template-columns: repeat(3, 16.5rem);  /* 実測：円の中心間隔 約165px */
  justify-content: center;
  row-gap: 3.4rem;
  margin-top: 3.4rem;
}
.p-machine__tool { text-align: center; }
.p-machine__tool-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem;                /* 実測：円 約110px */
  height: 11rem;
  margin: 0 auto;
  border: 1px solid #DDE2E1;
  border-radius: 50%;
}
.p-machine__tool-ic img { width: 6rem; height: 6rem; object-fit: contain; }
.p-machine__tool-name {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
}
.p-machine__tool-attr {
  margin-top: .4rem;
  font-size: 1.4rem;
  color: var(--c-text);
}
.p-machine__panel-foot {
  margin-top: 3.4rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-text);
}


/* ============================================================================
   18. PROJECT — スタッフ紹介
   ----------------------------------------------------------------------------
   Illustrator実測
     背景       #F8F4F1
     白パネル   x99.84 – 1400.16（幅1300.32＝コンテナ）／ y6685.04 – 8396.64
     見出し     字面上端 y6756.8 ／ 37.8px ／ 黒
     STAFF      字面上端 y6814.4 ／ オレンジ
     メンバー   上端 y6888.88 ／ 2人目は +753.60
       写真     546.24 × 554.40 ／ パネル左から48.96 ／ 角丸8px
       肩書き   13.3px ／ 名前 39.0px ／ ローマ字 Barlow
       想い箱   593.76 × 419.04 ／ #FEF2E4 ／ 角丸8px
       資格     ラベル19.8px ／ リスト3列（x222.24 / 456.48 / 700.80）

   ★このセクションだけ「白い大きなパネル」が外枠
     ベージュ地の上に白パネルが1枚あり、その中にスタッフ2名分が入る。
   ★角丸は白パネル8.9 ／ 想い箱7.70 ／ 写真8.0 → すべて共通ルールの8px
   ★スタッフ2はIllustrator上でダミー（「お名前」「ONAMAE」、想い・資格は1人目と同一）
   ========================================================================== */
.p-staff {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  background: var(--c-beige);
}
.p-staff__panel {
  width: 130rem;
  margin-inline: auto;
  padding: 6.2rem 4.9rem 6.4rem;
  background: var(--c-white);
  border-radius: var(--radius);
}

/* ---- 見出し ---- */
.p-staff__title { text-align: center; font-weight: 700; color: var(--c-text); font-feature-settings: "palt"; }
.p-staff__title-main { display: block; font-size: 3.76rem; line-height: 1.4; letter-spacing: .04em; }
.p-staff__title-sub {
  display: block; margin-top: .6rem;
  font-family: var(--f-en); font-size: 1.533rem; font-weight: 700;
  letter-spacing: .12em; color: var(--c-orange);
}

/* ---- メンバー：左（写真＋資格）／ 右（役職・名前・想い）の2カラム ---- */
.p-staff__member {
  display: grid;
  grid-template-columns: 49.1rem 1fr;   /* 実測：写真幅 約491px */
  column-gap: 6rem;                      /* 実測：写真と右コンテンツの間 約60px */
  margin-top: 6rem;
}
.p-staff__member + .p-staff__member { margin-top: 7.2rem; }

.p-staff__photo { grid-column: 1; grid-row: 1; border-radius: var(--radius); overflow: hidden; }
.p-staff__photo img { width: 100%; height: auto; display: block; }

/* 資格・受講歴（写真の下・左カラム） */
.p-staff__license { grid-column: 1; grid-row: 2; margin-top: 3.4rem; }
.p-staff__license-head { font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; color: var(--c-orange); }
/* 各項目はPCでは1行（nowrap）。横に並べ、入りきらなければ次の行へ回り込む。
   スマホでは nowrap を解除して画面幅で折り返す（はみ出さない）。 */
.p-staff__license-list {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;                    /* 行間 / 項目間 */
  font-size: 1.4rem; line-height: 1.5; color: var(--c-text);
}
.p-staff__license-list li {
  display: flex; align-items: flex-start; gap: .7rem;
  white-space: nowrap;                   /* PC：各項目を1行に収める */
}
.p-staff__license-list svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; color: var(--c-orange); margin-top: .25rem; }

/* 右カラム：役職・名前・想い */
.p-staff__info { grid-column: 2; grid-row: 1 / span 2; margin-top: 1.4rem; }
.p-staff__role { font-size: 1.4rem; font-weight: 400; letter-spacing: .04em; color: var(--c-text); }
.p-staff__nameblock {
  display: flex; align-items: baseline; gap: 1.4rem;
  margin: .6rem 0 0; white-space: nowrap;
}
/* 名前の右に添えるInstagramアイコン（シンプルな線画・主張しすぎない）
   位置は英字表記（.p-staff__name-en）の高さに合わせて下げる */
.p-staff__sns {
  align-self: baseline;
  transform: translateY(.5rem);   /* 英字表記（name-en）の高さに合わせて下げる */
  display: inline-flex;
  margin-left: .5rem;
  color: #8b9096;               /* ミュートグレー */
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.p-staff__sns svg { width: 2.2rem; height: 2.2rem; display: block; }
@media (hover: hover) {
  .p-staff__sns:hover { color: var(--c-orange); transform: translateY(calc(.5rem - 1px)); }
}
.p-staff__name { font-size: 3.9rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: var(--c-text); font-feature-settings: "palt"; }
.p-staff__name-en { font-family: var(--f-en); font-size: 1.533rem; font-weight: 700; letter-spacing: .08em; color: var(--c-orange); }

.p-staff__thought {
  margin-top: 2.4rem;
  background: var(--c-beige-lt);          /* クリーム #FEF2E4 */
  border-radius: var(--radius);
  padding: 2.8rem 3.2rem 3.2rem;
}
.p-staff__thought-head { font-size: 1.6rem; font-weight: 700; color: var(--c-orange); }
.p-staff__thought-text {
  margin-top: 1.4rem;
  font-size: 1.5rem; line-height: 1.95; letter-spacing: .02em; color: var(--c-text);
}

/* ============================================================================
   19. PROJECT — メニュー・料金 ／ 支払い方法
   ----------------------------------------------------------------------------
   Illustrator実測
     白パネル   x99.84 – 1400.16 ／ y8436.00 – 9868.32（高さ1432.32）
     見出し     字面上端 y8505.08 ／ 37.9px ／ 黒
     PRICE      字面上端 y8562.20 ／ オレンジ
     料金表画像 x146.96 – 1351.76（幅1204.80）／ y8632.64 – 9393.44（高さ760.80）
     支払い画像 同じ幅 ／ y9459.68 – 9804.32（高さ344.64）

   ★料金表と支払い方法は画像で実装（ご要望による）
     入れ子が3層あり要素数も多いため、画像のほうが再現性・保守性ともに有利。
     PC用とSP用を <picture> で自動切替する。
     現在SP用はPC用と同じ内容の暫定ファイル。SP版デザインができたら
     images/price-sp.png / payment-sp.png を上書きするだけで切り替わる。
   ★見出しはテキストのまま（SEO・可読性・他セクションとの統一のため）
   ========================================================================== */
.p-price {
  padding-top: 1.968rem;
  padding-bottom: 1.456rem;     /* パネル下端 → 次セクションのパネル上端 29.12px の半分 */
  background: var(--c-beige);
}

.p-price__panel {
  width: 130.032rem;            /* 実測：1300.32px（スタッフ紹介と同じ） */
  margin-inline: auto;
  padding-top: 5.917rem;
  padding-bottom: 6.4rem;
  background: var(--c-white);
  border-radius: var(--radius); /* 共通ルール：8px */
}

/* ---- 見出し ---- */
.p-price__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-price__title-main {
  display: block;
  font-size: 3.789rem;          /* 逆算：メ/ニ/料の字面から 37.9px */
  line-height: 1.5;
  letter-spacing: .035em;
}
.p-price__title-sub {           /* PRICE */
  display: block;
  margin-top: .443rem;
  font-family: var(--f-en);
  font-size: 1.533rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .080em;       /* ※Barlowのメトリクスが手元に無く推定値 */
  color: var(--c-orange);
}

/* ---- 画像（料金表・支払い方法）---- */
.p-price__figure {
  width: 120.48rem;             /* 実測：1204.80px */
  margin: 5.334rem auto 0;      /* 実測：PRICE下端 → 料金表上端 */
}
.p-price__figure--payment {
  margin-top: 6.624rem;         /* 実測：料金表下端 → 支払い方法上端 */
}
.p-price__figure img {
  width: 100%;
  height: auto;
}


/* ============================================================================
   20. PROJECT — よくある質問（FAQアコーディオン）
   ----------------------------------------------------------------------------
   Illustrator実測
     白パネル   x99.84 – 1400.16 ／ y9897.44 – 10605.30（高さ707.86）
     見出し     字面上端 y9979.12 ／ 37.89px ／ palt ON ／ 字間+0.0415em
     FAQ        字面上端 y10036.24 ／ 15.33px ／ オレンジ
     リスト     x186.40 – 1306.60（幅1120.20）／ 上端罫線 y10120.40
     1行        66.52px（内容65.52 ＋ 罫線1px）× 5行
     罫線       1px #DDDDDD（リスト上端にも1本入るので計6本）
     Qバッジ    36px 円 ／ リスト左から16.16px
     質問文     16.20px ／ palt OFF ／ 字間+0.037em ／ #343434
     ＋アイコン 20.16角 ／ 線幅4.32px ／ #73777A ／ リスト右から20.04px

   ★リストはパネル中央より約4px左にある（左余白86.56 / 右余白93.56）。
     Illustratorのままの値で実装している（デザイン変更禁止のルールに従う）。
   ★Qバッジは書体を特定できなかったため書き出し画像を使用
     （LINE Seedとは字面比が一致しない：実測0.857 / LINE Seed 1.000）。
   ★答え（A）は js/faq-data.js から流し込む。閉じている間は高さ0。
   ========================================================================== */
.p-faq {
  padding-top: 1.456rem;
  padding-bottom: 9.740rem;     /* ベージュ背景をブログ（白）の開始位置 y10702.70 まで伸ばす */
  background: var(--c-beige);
}

.p-faq__panel {
  width: 130.032rem;            /* 実測：1300.32px（他セクションと共通） */
  margin-inline: auto;
  padding-top: 7.175rem;        /* パネル上端 → 見出しのボックス上端 */
  padding-bottom: 15.13rem;     /* リスト下端 → パネル下端 */
  background: var(--c-white);
  border-radius: var(--radius); /* 共通ルール：8px */
}

/* ---- 見出し ---- */
.p-faq__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-faq__title-main {
  display: block;
  font-size: 3.789rem;          /* 逆算：6文字の字面幅・字面高から 37.89px */
  line-height: 1.5;
  letter-spacing: .0415em;
}
.p-faq__title-sub {             /* FAQ */
  display: block;
  margin-top: .443rem;
  font-family: var(--f-en);
  font-size: 1.533rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .080em;       /* ※Barlowのメトリクスが手元に無く推定値 */
  color: var(--c-orange);
}

/* ---- リスト ---- */
.p-faq__list {
  width: 112.02rem;             /* 実測：1120.20px */
  margin-top: 6.694rem;         /* FAQ下端 → リスト上端罫線 */
  margin-left: 8.656rem;        /* パネル左から86.56px（Illustratorどおり非対称） */
  border-top: 1px solid var(--c-rule);
}
.p-faq__item {
  border-bottom: 1px solid var(--c-rule);
}

/* ---- 質問行（クリックできる部分）---- */
.p-faq__term { margin: 0; }

.p-faq__q {
  display: flex;
  align-items: center;          /* バッジ・＋は行の縦中央 */
  gap: 0;
  width: 100%;
  min-height: 6.552rem;         /* 実測：1行66.52px − 罫線1px */
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.p-faq__badge {
  flex: 0 0 auto;
  width: 3.6rem;                /* 実測：36px */
  height: 3.6rem;
  margin-left: 1.616rem;        /* リスト左から16.16px */
}

.p-faq__q-text {
  flex: 1 1 auto;
  margin-left: 2.832rem;        /* バッジ右端から28.32px */
  padding-right: 2rem;          /* ＋アイコンに重ならないための余白 */
  font-size: 1.62rem;           /* 逆算：漢字の字面幅・字面高から 16.2px */
  line-height: 1.5;
  letter-spacing: .037em;
  color: #343434;               /* 実測 */
  /* Illustratorでは縦中央より3.67px下に置かれているため合わせる */
  transform: translateY(.367rem);
}

.p-faq__icon {
  flex: 0 0 auto;
  width: 2.016rem;              /* 実測：20.16px角 */
  height: 2.016rem;
  margin-right: 2.004rem;       /* リスト右端から20.04px */
  color: #73777A;               /* 実測 */
  transition: transform .3s ease;
}
/* 開いているときは45°回転して「×」にする */
.p-faq__q[aria-expanded="true"] .p-faq__icon {
  transform: rotate(45deg);
}

/* ---- ホバー（Illustratorに指定がないため当方で設定）---- */
@media (hover: hover) {
  .p-faq__q:hover .p-faq__q-text { color: var(--c-orange); }
  .p-faq__q:hover .p-faq__icon   { color: var(--c-orange); }
}
.p-faq__q:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: -2px;
}

/* ---- 答え ----
   grid-template-rows の 0fr → 1fr で開閉する。
   max-height と違い、答えの文量が変わっても数値の調整が不要。 */
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  transition: grid-template-rows .3s ease;
}
.p-faq__a[hidden] {
  display: none;                /* 閉じきったあとは読み上げ対象から外す */
}
.p-faq__a.is-open {
  grid-template-rows: 1fr;
}
.p-faq__a-inner {
  overflow: hidden;
}
.p-faq__a-body {
  margin: 0;
  padding: 0 2.004rem 2.8rem 7.848rem;  /* 左は質問文の位置に揃える */
  font-size: 1.62rem;
  line-height: 1.9;
  letter-spacing: .037em;
  color: var(--c-text);
}


/* ============================================================================
   21. PROJECT — ブログ（BLOG）
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション白 上端 y10702.70
     見出し     字面上端 y10796.60 ／ 37.98px ／ palt ON ／ 字間+0.044em
     BLOG       字面上端 y10855.10 ／ 15.33px ／ オレンジ
     カード     305.46px 角丸8px × 4枚 ／ gap19.6 ／ 全幅1280.64
       └写真    正方形（305.46 × 305.76・角丸8px）
       └日付    オレンジ・y11262.32 ／ 例 2026/06/08
       └タイトル 黒(--c-text)・y11286.88 ／ 例 【イタリア研修】
     ボタン     オレンジのピル 286.56×57.6 ／ 白文字17.76px ／ 中央

   ★カードグリッドは中央より約7px左（左余白2.24 / 右余白17.12）。
     見出し・ボタンは中央だがグリッドのみ非対称。Illustratorのまま実装。
   ★日付フォントはDIN 2014と思われるが未所持のため Barlow で代替（字間は推定）。
   ★WordPress化：カード1枚 .p-blog__card を記事ループの単位にしている。
     <!-- ▼ 記事ループ START/END --> で囲み、while(have_posts()) に置換しやすい。
     今回は記事4件をHTMLに直書き（デザイン確定後、WordPressから登録・編集予定）。
   ========================================================================== */
.p-blog {
  padding-top: 8.547rem;
  padding-bottom: 12rem;        /* ※店舗案内セクション制作時に再配分する暫定値 */
  background: var(--c-white);
}

/* ---- 見出し ---- */
.p-blog__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-blog__title-main {
  display: block;
  font-size: 3.798rem;          /* 逆算：3文字の字面から 37.98px */
  line-height: 1.5;
  letter-spacing: .044em;
}
.p-blog__title-sub {            /* BLOG */
  display: block;
  margin-top: .418rem;
  font-family: var(--f-en);
  font-size: 1.533rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;        /* ※Barlowのメトリクスが手元に無く推定値 */
  color: var(--c-orange);
}

/* ---- カード一覧（4カラムGrid）---- */
.p-blog__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.96rem;                 /* カード間19.6px */
  width: 128.064rem;            /* 実測：1280.64px */
  margin: 6.544rem auto 0;
}

.p-blog__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.p-blog__thumb {
  display: block;               /* ★spanのままだとaspect-ratioが効かないためblock化（サムネイルを必ず正方形に） */
  aspect-ratio: 1 / 1;          /* 実測：ほぼ正方形（305.46 × 305.76） */
  border-radius: var(--radius); /* 共通ルール：8px */
  overflow: hidden;
}
.p-blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;      /* 中央基準でトリミング */
  display: block;
  transition: transform .4s var(--ease);
}

.p-blog__date {
  margin-top: 1.401rem;         /* 写真下端 → 日付 */
  font-family: var(--f-en);
  font-size: 1.54rem;           /* 逆算：数字の字面高から 15.4px */
  line-height: 1;
  letter-spacing: .01em;        /* ※DIN 2014想定・フォント未所持のため推定 */
  color: var(--c-orange);
}
.p-blog__post-title {
  margin-top: .225rem;          /* 日付 → タイトル */
  font-size: 1.55rem;           /* 逆算：漢字の字面から 15.5px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--c-text);
  font-feature-settings: "palt";
}

/* ホバー ※Illustratorに指定がないため当方で設定 */
@media (hover: hover) {
  .p-blog__link:hover .p-blog__thumb img   { transform: scale(1.04); }
  .p-blog__link:hover .p-blog__post-title  { color: var(--c-orange); }
}

/* ---- 「ブログ一覧を見る」ボタン ---- */
.p-blog__more {
  margin-top: 5.415rem;         /* タイトルのボックス下端 → ボタン上端 */
  text-align: center;
}
.p-blog__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28.656rem;             /* 実測：286.56px */
  height: 5.76rem;              /* 実測：57.6px */
  color: var(--c-white);
  background: var(--c-orange);
  border-radius: var(--radius-pill);   /* 例外：完全なピル形状 */
  font-size: 1.776rem;          /* 逆算：白文字から 17.76px */
  font-weight: 700;
  letter-spacing: .114em;
  transition: background-color var(--dur) var(--ease),
              transform       var(--dur) var(--ease),
              box-shadow      var(--dur) var(--ease);
}
@media (hover: hover) {
  .p-blog__more-btn:hover {
    background: var(--c-orange-dk);
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.6rem rgba(234, 85, 42, .35);
  }
}


/* ============================================================================
   22. PROJECT — 店舗案内（SHOP INFO）
   ----------------------------------------------------------------------------
   Illustrator実測
     セクション白 上端 y11457.88（ブログと地続きの白）／ 下端 y12239（navy）
     見出し     字面上端 y11541.64 ／ 37.60px ／ palt ON ／ 字間+0.065em
     SHOP INFO  字面上端 y11598.88 ／ 15.33px ／ オレンジ
     写真2枚     各308.16 × 227.04（角丸8px）／ 間16.80 ／ 左98.88〜732.00
     地図        628.32 × 357.12 ／ x752.16〜1380.48 ／ 上端y11700（写真より46下）
     住所テキスト 〒861-2233（写真下端から66.88下）ほか ／ 本文 約15.8px
   ★地図はGoogleマップの埋め込み（iframe）。住所で検索するピン付き。
   ========================================================================== */
.p-shop {
  padding-top: 7.413rem;
  padding-bottom: 14.4rem;      /* 白背景をnavyバー開始 y12239 まで伸ばす（暫定） */
  background: var(--c-white);
}

.p-shop__title {
  text-align: center;
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: "palt";
}
.p-shop__title-main {
  display: block;
  font-size: 3.76rem;           /* 逆算：4文字の字面から 37.6px */
  line-height: 1.5;
  letter-spacing: .065em;
}
.p-shop__title-sub {            /* SHOP INFO */
  display: block;
  margin-top: .469rem;
  font-family: var(--f-en);
  font-size: 1.533rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;        /* ※Barlow推定 */
  color: var(--c-orange);
}

/* ---- 本体：左（店舗情報）／ 右（地図）。左右を同じ高さで揃える ---- */
.p-shop__body {
  display: flex;
  align-items: stretch;         /* ← 左右カラムの高さを揃える（下端が揃う） */
  gap: 2.016rem;
  width: 130rem;                /* コンテナ幅（中央寄せ） */
  margin: 3.814rem auto 0;
}

/* 左カラム：写真2枚＋住所テキスト */
.p-shop__left { flex: 1 1 0; }
.p-shop__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.68rem;                 /* 写真間16.8px */
}
.p-shop__photo {
  aspect-ratio: 616 / 454;      /* 写真の実比率（引き伸ばさない） */
  border-radius: var(--radius); /* 共通ルール：8px */
  overflow: hidden;
}
.p-shop__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p-shop__info {
  margin-top: 3.2rem;           /* 写真下端 → 住所テキスト */
  font-size: 1.58rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text);
}
.p-shop__info p { margin: 0; }
.p-shop__info p + p { margin-top: 2rem; }

/* 右カラム：地図。左カラムの高さいっぱいに伸びる（下端が揃い、余白が出ない）*/
.p-shop__map {
  flex: 1 1 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.p-shop__map iframe {
  display: block;
  width: 100%;
  height: 100%;                 /* ← 左カラムの高さに追従（stretch）*/
  border: 0;
}


/* ============================================================================
   23. PROJECT — 特徴バー再掲（ダークバー＋リード文）
   ----------------------------------------------------------------------------
   Illustrator実測
     セクションnavy y12239 – 12592（背景 #18262F）
     リード文   字面上端 y12303 ／ 23.63px ／ 白＋「理想の身体づくり」オレンジ
     区切り線   上 y12386／下 y12539（x98.88〜1396.32・半透明白）
     アイコン   トップの特徴バー（セクション10）と同一の4点・同じ左位置を再利用
     ラベル     22.4px（セクション10と同一スタイル）
   ========================================================================== */
.p-band {
  padding-top: 5.811rem;        /* navy上端 → リードのボックス上端 */
  padding-bottom: 5.3rem;       /* 下rule → navy下端（暫定） */
  background: var(--c-navy);
}
.p-band__lead {
  margin: 0;
  text-align: center;
  color: var(--c-white);
  font-weight: 700;
  font-size: 2.363rem;          /* 逆算：漢字の字面から 23.63px */
  line-height: 1.5;
  letter-spacing: .103em;
}
.p-band__accent { color: var(--c-orange); }

.p-band__inner {
  position: relative;
  width: 100%;
  height: 15.3rem;              /* 上rule〜下rule 153px */
  margin-top: 5.345rem;         /* リード下端 → 上rule */
}
/* 上下の区切り線（中央寄せ・半透明白） */
.p-band__inner::before,
.p-band__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 129.744rem;            /* 実測：1297.44px */
  height: 1px;
  background: rgba(255, 255, 255, .22);
}
.p-band__inner::before { top: 0; }
.p-band__inner::after  { bottom: 0; }

/* アイコン行はセクション10 .p-features__list をそのまま再利用（同一の絶対座標）。
   縦位置だけ、2本の罫線の中央に来るよう +0.74rem 下げる（実測に合わせる） */
.p-band__inner .p-features__list { position: relative; width: 100%; height: 100%; }


/* ============================================================================
   24. PROJECT — ご予約・お問い合わせ（RESERVATION）
   ----------------------------------------------------------------------------
   Illustrator実測：セクション y12592.3 – 13225.9（背景写真フルブリード）
   ★見出し・パネル・ボタン・電話番号は背景写真に含まれています（デザイン完全再現）。
     クリック可能にするため、WEB予約／LINE予約／電話の上に透明リンクを重ねています。
     WordPress化の際は、この画像を「背景写真＋実テキスト」に組み替え可能です。
   ========================================================================== */
.p-reserve {
  position: relative;
  line-height: 0;               /* img下の余白除去 */
}
.p-reserve__bg { width: 100%; height: auto; display: block; }

/* 透明クリック領域（％指定＝背景画像に追従してレスポンシブでもズレない） */
.p-reserve__hit {
  position: absolute;
  display: block;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .p-reserve__hit:hover { background: rgba(255, 255, 255, .12); }
}
.p-reserve__hit:focus-visible { outline: 3px solid var(--c-white); outline-offset: 2px; }

/* ↓ 背景画像(reservation-bg.jpg)内のボタン位置を直接実測した％。
      画像に追従するのでレスポンシブでもズレない。 */
.p-reserve__hit--web   { left: 27.27%; top: 51.6%;  width: 22.00%; height: 9.71%; }
.p-reserve__hit--line  { left: 50.60%; top: 51.6%;  width: 22.00%; height: 9.71%; }
.p-reserve__hit--tel   { left: 39.5%;  top: 64.5%;  width: 21.5%;  height: 6.5%;  border-radius: .6rem; }


/* ============================================================================
   25. PROJECT — フッター
   ----------------------------------------------------------------------------
   Illustrator実測
     白背景 y13225.9 – 13652.8 ／ オレンジバー y13652.8 – 13685.4（高32.6）
     ロゴ    x628〜872（幅244）／ y13298〜13512
     SNS円   Instagram（マゼンタ）・LINE（緑）／ y13560〜13589
     ©TURTLE 白文字・オレンジバー中央
   ========================================================================== */
.l-footer { background: var(--c-white); }

.l-footer__inner {
  padding: 7.21rem 2rem 0;       /* フッター上端 → ロゴ上端72.1px */
  text-align: center;
}
.l-footer__logo {
  width: 24.4rem;               /* 実測：244px */
  height: auto;
  margin: 0 auto;
}
.l-footer__sns {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 4.8rem;           /* ロゴ下端 → SNS */
  padding-bottom: 6.4rem;       /* SNS → オレンジバー */
}
/* アイコンSVGに色付き円が含まれているため、リンクは枠だけ（背景なし） */
.l-footer__sns a {
  display: inline-flex;
  width: 4.8rem;                /* 実測：SNS円 約48px */
  height: 4.8rem;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.l-footer__sns a svg { width: 100%; height: 100%; }
@media (hover: hover) {
  .l-footer__sns a:hover { transform: translateY(-2px); opacity: .85; }
}

.l-footer__copy {
  padding: 1.1rem 0;
  background: var(--c-orange);
  color: var(--c-white);
  text-align: center;
  font-family: var(--f-en);
  font-size: 1.2rem;
  letter-spacing: .1em;
}


/* ============================================================================
   26. RESPONSIVE — Tablet（768〜1199px）
   ----------------------------------------------------------------------------
   ・レイアウトはPCと同一。rem比例スケーリングでそのまま縮小されるため
     Illustratorのデザイン比率は完全に維持される。
   ・グローバルメニューのみ、7項目が判読できないサイズになるため
     ハンバーガーへ切り替える（SNS・CTAはヘッダーに残す）。
   ========================================================================== */
@media screen and (max-width: 1199px) {

  .l-header__nav    { display: none; }
  .l-header__toggle { display: block; }

  .l-header__inner  { padding-right: 2.4rem; }

  /* 特徴バー・お悩みセクションはrem比例縮小のみでデザインを維持する。
     絶対配置の座標もremのため自動的に比例する（上書き不要）。 */
}


/* ============================================================================
   27. RESPONSIVE — SP（767px以下）
   ----------------------------------------------------------------------------
   ※ IllustratorにSP版デザインが存在しないため、当方で設計した提案です。
     基準幅を375pxに切り替え（1rem = 10px @375px）、縦積みに再構成しています。
   ========================================================================== */
@media screen and (max-width: 767px) {

  html {
    font-size: 2.66667vw;       /* 375px時に 1rem = 10px */
    overflow-x: hidden;         /* スマホは横スクロール厳禁（bodyと二重で確実に防ぐ）*/
  }
  body { overflow-x: hidden; max-width: 100%; }

  :root {
    --header-h: 6.4rem;         /* 64px */
  }

  /* ---- ヘッダー ---- */
  .l-header__inner {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .l-header__logo img {
    width: 13.6rem;
    height: auto;
  }
  .l-header__util   { display: none; }   /* SNS・CTAはドロワー内へ集約 */
  .l-header__toggle { margin-left: auto; width: 4rem; height: 4rem; }
  .l-header__bar    { width: 2.4rem; margin-left: -1.2rem; }
  .l-header__bar:nth-child(1) { top: 1.2rem; }
  .l-header__bar:nth-child(2) { top: 1.9rem; }
  .l-header__bar:nth-child(3) { top: 2.6rem; }
  .l-header__toggle[aria-expanded="true"] .l-header__bar:nth-child(1) { transform: translateY(.7rem) rotate(45deg); }
  .l-header__toggle[aria-expanded="true"] .l-header__bar:nth-child(3) { transform: translateY(-.7rem) rotate(-45deg); }

  /* ---- ドロワー（全画面・ロゴ＋×付き） ---- */
  .l-drawer {
    width: 100%;
    padding: .8rem 2.4rem 3.2rem;
  }
  /* ロゴ／×をヘッダーのロゴ・ハンバーガー位置（左右1.6rem）に揃える */
  .l-drawer__head { margin: 0 -.8rem .4rem; }
  .l-drawer__logo img { width: 13.6rem; }
  .l-drawer__list a  { padding: 1.6rem .2rem; font-size: 1.8rem; }
  .l-drawer__foot .c-btn { height: 5.6rem; }

  /* ---- Hero（SPデザイン：写真が下へ向かって白くフェードし、その上にキャッチコピー） ---- */
  .p-hero {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    padding: 0 0 2.6rem;
    background: var(--c-white);
    position: relative;
  }
  .p-hero__veil { display: none; }

  /* 背景写真ブロック */
  .p-hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 375 / 372;
    height: auto;
  }
  .p-hero__bg img { object-position: 50% 20%; }
  /* 写真の下端を白へグラデーション（デザイン準拠：下に向けて白くなる）*/
  .p-hero__bg::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 46%;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0)   0%,
      rgba(255, 255, 255, .55) 38%,
      rgba(255, 255, 255, .95) 74%,
      #fff                     100%);
    pointer-events: none;
    z-index: 1;
  }

  /* テキストは写真フェード部へ重ねる（負のマージンで持ち上げ）*/
  .p-hero__inner {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    margin-top: -5.5rem;
    padding: 0 3rem 0;
  }
  .p-hero__catch-sub  { font-size: 1.85rem; line-height: 1.5; letter-spacing: .01em; }
  .p-hero__catch-main { font-size: 3.9rem; margin-top: .6rem; margin-left: -.2rem; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }

  .p-hero__lead {
    margin-top: 1.6rem;
    margin-left: 0;
    padding-top: 1.3rem;
    font-size: 1.3rem;
    line-height: 1.7;
    white-space: normal;
    max-width: none;
  }
  .p-hero__lead::before { left: 0; width: 100%; }

  .p-hero__badges { margin-top: 1.7rem; gap: .4rem; margin-left: 0; flex-wrap: nowrap; }
  .p-hero__badge {
    height: 3rem;
    padding: 0 .5rem;
    gap: .3rem;
    font-size: 1.05rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .p-hero__badge-icon { width: 1.3rem; height: 1.3rem; }

  .p-hero__cta { display: none; }         /* SPヒーローにCTAボタンは無し（デザイン準拠） */

  /* ---- 共通コンテナ ---- */
  .l-container { width: 100%; }

  /* ---- 特徴バー ----
     4項目を横1列のまま縮小すると文字が読めなくなるため2列×2段へ。
     絶対配置を解除して通常フローに戻す。 */
  .p-features {
    height: auto;
    padding: 1.6rem 2.4rem;
  }
  .p-features__inner,
  .p-features__list {
    height: auto;
  }
  .p-features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;                         /* 仕切り線で区切るため間隔は0 */
  }
  .p-features__item,
  .p-features__item--1,
  .p-features__item--2,
  .p-features__item--3,
  .p-features__item--4 {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    gap: 1.3rem;
    padding: 1.4rem 0.4rem 1.4rem 1.4rem;
  }
  /* 縦の仕切り（右列）・横の仕切り（下段）※トップの特徴バーのみ（再掲バーには適用しない）*/
  .p-features .p-features__item--2,
  .p-features .p-features__item--4 { border-left: 1px solid rgba(255, 255, 255, .17); padding-left: 1.3rem; }
  .p-features .p-features__item--3,
  .p-features .p-features__item--4 { border-top: 1px solid rgba(255, 255, 255, .17); }

  .p-features__item .p-features__icon {
    width: auto;
    height: 3.8rem;
  }
  /* 駐車場：カーポートアイコンは横幅が広く文字が右へずれるため、アイコンを小さく・間隔を詰めて
     上段「完全マンツーマン」の文字開始位置に揃える（＝全体を左へ寄せる）*/
  .p-features .p-features__item--4 { gap: .75rem; }
  .p-features .p-features__item--4 .p-features__icon { height: 3.1rem; }
  .p-features__text {
    font-size: 1.15rem;
    line-height: 1.5;
    letter-spacing: .01em;
  }

  /* ---- お悩みセクション ----
     カードは5枚のため2列で折返し（5枚目は左下）。
     カード内は高さ固定を解除し、イラストも通常フローへ戻す。 */
  .p-worry {
    padding: 5rem 1.8rem 6.4rem;
  }
  /* 見出しは画面内に1行で収める（少し小さく・字間を詰める）*/
  .p-worry__title { font-size: 1.85rem; line-height: 1.5; letter-spacing: 0; }
  .p-worry__lead  { margin-top: 1.8rem; font-size: 1.3rem; line-height: 1.9; }
  .p-worry__lead span { display: inline; }   /* SPは自然折返しに任せる */

  .p-worry__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 3.2rem;
  }
  .p-worry__card {
    height: auto;
    min-height: 17rem;
    padding: 1.6rem 1rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p-worry__figure,
  .p-worry__card--1 .p-worry__figure,
  .p-worry__card--2 .p-worry__figure,
  .p-worry__card--3 .p-worry__figure,
  .p-worry__card--4 .p-worry__figure,
  .p-worry__card--5 .p-worry__figure {
    position: static;
    width: auto;
    height: 7.6rem;
    display: flex;
    justify-content: center;
  }
  .p-worry__figure img { width: auto; height: 100%; }

  .p-worry__text {
    position: static;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .p-worry__text span { display: inline; }

  .p-worry__notch {
    bottom: -1.6rem;
    margin-left: -2rem;
    border-left-width: 2rem;
    border-right-width: 2rem;
    border-top-width: 1.6rem;
  }

  /* ---- TURTLEのピラティス ----
     カードは縦1列。カード内の絶対配置を解除して通常フローへ戻し、
     本文の改行固定（nowrap）も解除して自然折返しにする。 */
  .p-service {
    padding: 5rem 2.4rem 6rem;
  }
  /* 見出しは「サブ1行＋メイン1行」の計2行で収める（メインを少し小さく）*/
  .p-service__title-sub  { font-size: 1.7rem; line-height: 1.5; }
  .p-service__title-main { font-size: 1.85rem; line-height: 1.5; margin-top: .6rem; letter-spacing: 0; font-feature-settings: "palt"; }

  .p-service__list {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    margin-top: 2.8rem;
  }

  /* ---- 写真カード（共通部品）----
     カード内の絶対配置を解除して通常フローへ戻し、
     本文の改行固定（nowrap）も解除して自然折返しにする。 */
  .c-photocard,
  .c-photocard--service,
  .c-photocard--can {
    height: auto;
    padding-bottom: 2rem;
  }
  .c-photocard__figure,
  .c-photocard--service .c-photocard__figure,
  .c-photocard--can .c-photocard__figure {
    height: auto;
    aspect-ratio: 416.67 / 257.28;   /* PCと同じ比率を維持 */
  }
  .c-photocard__title,
  .c-photocard--service .c-photocard__title,
  .c-photocard--can .c-photocard__title {
    position: static;
    margin: 1.4rem 1.6rem 0;
    font-size: 1.55rem;
    gap: .8rem;
    white-space: normal;
  }
  .c-photocard__num,
  .c-photocard--service .c-photocard__num,
  .c-photocard--can .c-photocard__num {
    width: 2.6rem;
    height: 2.6rem;
    margin-top: 0;
    font-size: 1.15rem;
  }
  .c-photocard__text,
  .c-photocard--service .c-photocard__text,
  .c-photocard--can .c-photocard__text {
    position: static;
    margin: .9rem 1.6rem 0;
    font-size: 1.28rem;
    line-height: 1.78;
  }
  .c-photocard__text span { display: inline; white-space: normal; }

  /* 注釈ボックス（大切にしていること）：アイコン上・テキスト中央（SPデザイン準拠・コンパクト）*/
  .p-service__note {
    flex-direction: column;
    align-items: center;
    height: auto;
    /* 左右を少し広げて（画面端から約14px）本文が2行で収まる幅を確保 */
    margin: 3rem -1rem 0;
    padding: 2.4rem 1.6rem 2.6rem;
    text-align: center;
  }
  .p-service__note-icon { width: auto; height: 5.4rem; margin-top: 0; }
  .p-service__note-text {
    margin-left: 0;
    margin-top: 2rem;
    font-size: 1.1rem;
    line-height: 1.85;
    letter-spacing: 0;
    text-align: center;
  }
  /* 本文（黒）と注釈（オレンジ）をそれぞれ独立した行ブロックにして自然折返し */
  .p-service__note-text span { display: block; white-space: normal; }
  .p-service__note-br { display: block; }   /* SPのみ注釈内で改行（のではなく、で改行）*/
  /* ↓ ベース(.p-service__note-text > span:first-child)が1.97remで効いているため、
        同じ詳細度のこの指定で確実に上書きする（これが無いと本文が大きいまま4行になる）*/
  .p-service__note-text > span:first-child {
    font-size: 1.1rem;
    line-height: 1.85;
    letter-spacing: 0;
  }
  .p-service__note-accent {
    display: block;
    margin-top: 1.1rem;
    font-size: 1.1rem;
    line-height: 1.8;
  }

  /* ---- TURTLEでできること ----
     カードは縦1列。見出しの欧文／和文の分割も解除して自然に流す。 */
  .p-can {
    padding: 5rem 2.4rem 5.6rem;
  }
  .p-can__title-en-word { font-size: 2.2rem; line-height: 1.5; }
  .p-can__title-jp      { font-size: 2.2rem; line-height: 1.5; margin-left: .4rem; }
  .p-can__title-sub     { margin-top: .8rem; font-size: 1.1rem; }

  .p-can__list {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
  }

  /* ---- TURTLEが選ばれる理由 ----
     縦1列に変更。矢印は横向き（→）から下向き（↓）へ回転させ、
     カードとカードの間に置く。※SP版デザインが無いため当方の提案 */
  .p-reasons {
    padding: 5rem 2.4rem 5.6rem;
  }
  .p-reasons__title            { font-size: 2.2rem; }
  .p-reasons__title-en-word    { font-size: 2.2rem; }
  .p-reasons__title-jp         { font-size: 2.2rem; margin-left: .4rem; }
  .p-reasons__title-sub        { margin-top: .8rem; font-size: 1.1rem; }

  .p-reasons__list {
    width: 100%;
    margin-left: 0;
    margin-top: 3.2rem;
    grid-template-columns: 1fr;
    row-gap: 3.6rem;
  }
  .p-reasons__step:nth-child(1),
  .p-reasons__step:nth-child(2),
  .p-reasons__step:nth-child(3),
  .p-reasons__step:nth-child(4) { grid-column: 1; }

  .p-reasons__card {
    height: auto;
    min-height: 12rem;
    padding: 2.4rem 1.6rem 1.8rem 1.6rem;
  }
  .p-reasons__num { top: -1.6rem; left: 1.6rem; width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }

  /* 矢印はカード下の中央へ。90度回転させて下向きにする */
  .p-reasons__arrow,
  .p-reasons__step:nth-child(4) .p-reasons__arrow {
    top: auto;
    bottom: -2.6rem;
    left: 50%;
    width: 1px;
    height: 1.6rem;
    margin-left: -.5px;
  }
  .p-reasons__arrow svg {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.4rem;
    width: 1.4rem;
    height: 1.5rem;
    margin-left: -.7rem;
    transform: rotate(90deg);
  }
  .p-reasons__step:nth-child(4) .p-reasons__arrow { display: none; }

  /* アイコン・テキストは通常フローへ */
  .p-reasons__icon,
  .p-reasons__step:nth-child(1) .p-reasons__icon,
  .p-reasons__step:nth-child(2) .p-reasons__icon,
  .p-reasons__step:nth-child(3) .p-reasons__icon,
  .p-reasons__step:nth-child(4) .p-reasons__icon {
    position: static;
    width: auto;
    height: 5.6rem;
    margin: 0 auto .8rem;
  }
  .p-reasons__step-title,
  .p-reasons__step:nth-child(3) .p-reasons__step-title {
    position: static;
    top: auto;
    left: auto;
    font-size: 1.6rem;
    text-align: center;
    white-space: normal;
  }
  .p-reasons__text,
  .p-reasons__step:nth-child(3) .p-reasons__text {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin-top: .8rem;
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: center;
  }
  .p-reasons__text span { display: inline; white-space: normal; }

  /* ---- お客様の声 ----
     カードは1枚表示。矢印はカード下の左右へ移動する。 */
  .p-voice {
    padding: 5rem 0 5.6rem;
  }
  .p-voice__title-main { font-size: 2.2rem; }
  .p-voice__title-note { font-size: 1.3rem; margin-top: .2rem; }
  .p-voice__title-sub  { font-size: 1.1rem; margin-top: .8rem; }

  .p-voice__carousel { margin-top: 2.8rem; padding-bottom: 4.4rem; }
  .p-voice__viewport { width: calc(100% - 4.8rem); }
  .p-voice__list     { gap: 1.6rem; }
  .p-voice__card {
    flex: 0 0 100%;
    padding: 1.8rem 1.6rem 2rem;   /* 高さは本文に応じて可変（固定しない）*/
  }
  .p-voice__avatar { width: 5.6rem; }
  .p-voice__meta   { font-size: 1.5rem; }
  .p-voice__rating { margin-top: .5rem; gap: .3rem; }
  .p-voice__rating svg { width: 2.2rem; height: 1.9rem; }
  .p-voice__text   { margin-top: 1.4rem; font-size: 1.3rem; line-height: 1.9; }

  /* 矢印はカードの下・左右へ */
  .p-voice__nav {
    top: auto;
    bottom: 0;
    width: 1.8rem;
    height: 3rem;
  }
  .p-voice__nav--prev { left: 32%; }
  .p-voice__nav--next { left: auto; right: 32%; }

  /* ---- 初回限定CTAバナー ----
     バナー画像を画面幅に合わせる（中身は画像なので比率維持で縮小）。 */
  .p-cta {
    padding: 4rem 2.4rem 5rem;
  }
  .p-cta__banner {
    width: 100%;
    max-width: 60.528rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- TURTLEで使用するマシン（新デザイン）---- */
  .p-machine {
    padding: 5rem 1.6rem 5.6rem;
  }
  .p-machine__inner { width: 100%; }
  .p-machine__title { font-size: 2.2rem; }
  .p-machine__title-en { margin-top: .8rem; font-size: 1.1rem; }
  .p-machine__desc { margin-top: 2.4rem; font-size: 1.4rem; }
  .p-machine__desc br { display: none; }

  /* 小見出しは icon+タイトルを1行、補足は下へ折り返す */
  .p-machine__subhead {
    flex-wrap: wrap;
    gap: .8rem 1rem;
    margin-top: 4.8rem;
  }
  .p-machine__subicon { height: 2.8rem; }
  .p-machine__subtitle { font-size: 2rem; }
  .p-machine__rule { display: none; }
  .p-machine__subnote { flex-basis: 100%; font-size: 1.35rem; }

  /* カードは2列 */
  .p-machine__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .p-mcard__name { margin: 1.6rem 1.2rem 0; font-size: 1.6rem; }
  .p-mcard__text { margin: 1rem 1.2rem 2rem; font-size: 1.35rem; }

  /* 大カード（コンディショニング）は縦積み：写真→見出し→6アイコン(2列×3段)→補足 */
  .p-machine__panel {
    flex-direction: column;
    gap: 0;
    margin-top: 2.4rem;
    padding: 1.6rem 1.6rem 2.8rem;
  }
  .p-machine__panel-photo { flex: none; width: 100%; aspect-ratio: 4 / 3; }
  .p-machine__panel-body { padding: 0 .2rem; }
  .p-machine__panel-lead { margin-top: 2.4rem; font-size: 1.55rem; line-height: 1.7; }
  .p-machine__panel-lead br { display: none; }
  .p-machine__tools {
    grid-template-columns: repeat(2, 1fr);   /* 2列×3段 */
    column-gap: 1.2rem;
    row-gap: 2.8rem;
    margin-top: 3rem;
  }
  .p-machine__tool-ic { width: 8.8rem; height: 8.8rem; }
  .p-machine__tool-ic img { width: 4.8rem; height: 4.8rem; }
  .p-machine__tool-name { font-size: 1.4rem; }
  .p-machine__tool-attr { font-size: 1.2rem; }
  .p-machine__panel-foot { margin-top: 3rem; font-size: 1.45rem; }

  /* ---- スタッフ紹介 ----
     スマホは縦積み：写真 → 役職・名前・想い → 資格 の順。 */
  .p-staff {
    padding: 4rem 1.6rem 4.8rem;
  }
  .p-staff__panel {
    width: 100%;
    padding: 3.2rem 1.6rem 3.6rem;
  }
  .p-staff__title-main { font-size: 2.2rem; }
  .p-staff__title-sub  { margin-top: .8rem; font-size: 1.1rem; }

  .p-staff__member {
    grid-template-columns: 1fr;   /* 1カラム縦積み */
    column-gap: 0;
    margin-top: 3.2rem;
  }
  .p-staff__member + .p-staff__member {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(44, 52, 56, .12);
  }
  .p-staff__photo   { grid-column: 1; grid-row: 1; }
  .p-staff__info    { grid-column: 1; grid-row: 2; margin-top: 2rem; }
  .p-staff__license { grid-column: 1; grid-row: 3; margin-top: 2.4rem; }

  .p-staff__role { font-size: 1.3rem; }
  .p-staff__nameblock { margin-top: .4rem; gap: 1rem; }
  .p-staff__name { font-size: 2.6rem; }
  .p-staff__name-en { font-size: 1.2rem; }

  .p-staff__thought { margin-top: 1.6rem; padding: 1.8rem 1.6rem 2rem; }
  .p-staff__thought-head { font-size: 1.5rem; }
  .p-staff__thought-text { margin-top: 1rem; font-size: 1.35rem; line-height: 1.9; }

  .p-staff__license-head { font-size: 1.5rem; }
  .p-staff__license-list { gap: 1.1rem 1.8rem; font-size: 1.3rem; }
  /* スマホは幅が狭いので1行固定を解除（画面からはみ出さないように折り返す）*/
  .p-staff__license-list li { white-space: normal; }
  .p-staff__sns { transform: translateY(.35rem); }
  .p-staff__sns svg { width: 2.1rem; height: 2.1rem; }

  /* ---- メニュー・料金 ／ 支払い方法 ----
     画像は <picture> により SP用（images/*-sp.png）へ自動で切り替わる。
     現在SP用はPC用と同じ内容の暫定ファイル。 */
  .p-price {
    padding: 4rem 1.6rem 4.8rem;
  }
  .p-price__panel {
    width: 100%;
    padding: 3.2rem 1.6rem 3.6rem;
  }
  .p-price__title-main { font-size: 2.2rem; }
  .p-price__title-sub  { margin-top: .8rem; font-size: 1.1rem; }

  .p-price__figure {
    width: 100%;
    margin-top: 2.8rem;
  }
  .p-price__figure--payment { margin-top: 3.2rem; }

  /* ---- よくある質問 ----
     質問文が2〜3行になるため行の高さは固定せず、
     上下パディングで最低の高さだけ確保する。 */
  .p-faq {
    padding: 4rem 1.6rem 4.8rem;
  }
  .p-faq__panel {
    width: 100%;
    padding: 3.2rem 1.6rem 3.6rem;
  }
  .p-faq__title-main { font-size: 2.2rem; }
  .p-faq__title-sub  { margin-top: .8rem; font-size: 1.1rem; }

  .p-faq__list {
    width: 100%;
    margin-top: 2.8rem;
    margin-left: 0;
  }
  .p-faq__q {
    align-items: flex-start;      /* 折り返すのでバッジは上揃え */
    min-height: 0;
    padding: 1.8rem 0;
  }
  .p-faq__badge {
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 0;
  }
  .p-faq__q-text {
    margin-left: 1.2rem;
    padding-right: 1.2rem;
    font-size: 1.5rem;
    line-height: 1.6;
    transform: none;              /* SPは折り返すため中央合わせのズラしを解除 */
  }
  .p-faq__icon {
    margin-top: .5rem;
    margin-right: 0;
    width: 1.6rem;
    height: 1.6rem;
  }
  .p-faq__a-body {
    padding: 0 0 2rem 4rem;
    font-size: 1.4rem;
  }

  /* ---- ブログ ----
     4枚を2×2に。カード幅が広がっても写真は正方形のまま。 */
  .p-blog {
    padding: 4.8rem 1.6rem 5.6rem;
  }
  .p-blog__title-main { font-size: 2.2rem; }
  .p-blog__title-sub  { margin-top: .8rem; font-size: 1.1rem; }

  .p-blog__list {
    width: 100%;
    margin-top: 3.2rem;
    margin-left: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.2rem;
  }
  .p-blog__date       { margin-top: 1rem; font-size: 1.2rem; }
  .p-blog__post-title { font-size: 1.3rem; }

  .p-blog__more { margin-top: 3.6rem; }
  .p-blog__more-btn {
    width: 100%;
    max-width: 28rem;
    height: 5rem;
    font-size: 1.5rem;
  }

  /* ---- 店舗案内 ----
     スマホでは写真ブロックと地図を自然に縦並びにする。 */
  .p-shop { padding: 4.8rem 1.6rem 5.6rem; }
  .p-shop__title-main { font-size: 2.2rem; }
  .p-shop__title-sub  { margin-top: .8rem; font-size: 1.1rem; }
  .p-shop__body {
    flex-direction: column;      /* スマホは縦並び */
    align-items: stretch;
    width: 100%;
    margin-top: 3.2rem;
    gap: 2.4rem;
  }
  .p-shop__left { flex: none; }
  .p-shop__map { flex: none; }
  .p-shop__map iframe { height: 26rem; }   /* 縦並び時は地図に固定高さ */
  .p-shop__info { margin-top: 2.4rem; font-size: 1.4rem; }

  /* ---- 特徴バー再掲：SPは縦2×2で組み直す ---- */
  .p-band { padding: 4rem 1.6rem; }
  .p-band__lead { font-size: 1.7rem; line-height: 1.7; }
  .p-band__inner {
    height: auto;
    margin-top: 2.8rem;
    padding: 2.8rem 0;
  }
  .p-band__inner .p-features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
    height: auto;
  }
  /* SPでは絶対配置を解除して通常フローに戻す */
  .p-band__inner .p-features__item,
  .p-band__inner .p-features__item--4 {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    justify-content: center;
    gap: 1.2rem;
    padding: 0;                 /* トップ特徴バー用のpadding/仕切りは再掲バーに持ち込まない */
    border: 0;
  }
  .p-band__inner .p-features__text { font-size: 1.4rem; line-height: 1.5; }
  /* PC実測の固定幅(1297px)のままだと画面外へはみ出し横スクロールの原因になるため、幅を100%に戻す */
  .p-band__inner::before,
  .p-band__inner::after { width: 100%; left: 0; transform: none; }

  /* ---- ご予約・お問い合わせ ----
     SPは縦構成の専用デザイン画像（reservation-sp.jpg）に切り替わるため、
     透明リンクの位置もSP画像の実測％に合わせて上書きする。 */
  .p-reserve__hit--web  { left: 17.3%; top: 45.9%; width: 65.5%; height: 10.4%; }
  .p-reserve__hit--line { left: 17.3%; top: 58.4%; width: 65.5%; height: 10.4%; }
  .p-reserve__hit--tel  { left: 24%;   top: 71.5%; width: 54%;   height: 6.4%; border-radius: .6rem; }

  /* ---- フッター ---- */
  .l-footer__inner { padding-top: 4.8rem; }
  .l-footer__logo { width: 20rem; }
  .l-footer__sns { margin-top: 3.2rem; padding-bottom: 4rem; }
}


/* ============================================================================
   28. UTILITY — 表示制御
   ========================================================================== */
.u-pc-only  { display: block; }
.u-sp-only  { display: none;  }

/* 視覚的には隠すがスクリーンリーダーには読ませる（★評価の補足など） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 767px) {
  .u-pc-only { display: none;  }
  .u-sp-only { display: block; }
}

/* ドロワー展開中に背面をスクロールさせない */
body.is-drawer-open {
  overflow: hidden;
}


/* ============================================================================
   29. アクセシビリティ — モーション低減
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================================
   30. @font-face — LINE Seed JP
   ----------------------------------------------------------------------------
   Illustratorで使用されている本来のフォント（LINE社が無償配布・OFL）。
   日本語フォントは1ウェイト2MB超あるため、2段構えで軽量化している。

     .common … JIS第1水準漢字＋かな＋英数記号にサブセット（Rg 1005KB / Bd 825KB）
               通常の日本語テキストはこれで100%表示できる
     .full   … 元ファイルそのまま。別ファミリー名で登録しているため、
               .common に無い稀用字が現れた時だけブラウザが取得する
               （＝ほとんどの訪問者はダウンロードしない）

   font-display: swap により、フォント取得中も代替フォントで即座に文字が出る。
   ※ 全ページのテキストが確定した最終段階で、使用文字だけに再サブセットすれば
     100KB台まで削減できます。
   ========================================================================== */
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_Rg.common.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_Bd.common.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 稀用字フォールバック（必要時のみ取得される） */
@font-face {
  font-family: "LINE Seed JP Ext";
  src: url("../fonts/LINESeedJP_Rg.full.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINE Seed JP Ext";
  src: url("../fonts/LINESeedJP_Bd.full.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}