@charset "UTF-8";
/* =========================================================================
 * UPPER 9 ブランド適用レイヤー
 *
 * base.css（＝ five-element-fit.jp の common_260610.css）と
 * top.css（＝ 同 top_260610.css）を**無改変で**読み込んだうえで、
 * このファイルだけで UPPER 9 用に上書きする。
 *
 * ベース側を直接編集しないのは、本家が更新されたときに
 * diff で追随できるようにするため。読み込み順は base → top → upper9。
 *
 * 内容:
 *   1. デザイントークンの差し替え（ローズ／ベージュ → 黒×白＋ティール）
 *   2. FIVE 固有のハードコード値・素材参照の打ち消し
 *   3. ベースに無いセクション（お知らせ / プログラム / FAQ / レッスン）の追加
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. デザイントークン
 *
 * UPPER 9 のスタジオは「黒×白のモノトーンと暗めのライティング」（要件書 A8）。
 * アクセントは既存の店舗LP・採用ページで使われているティール系に合わせる。
 * ベース側の変数名はそのまま流用し、値だけ差し替える。
 * ---------------------------------------------------------------------- */
:root {
  /* UPPER 9 の素の色 */
  --u9-teal: #00A99D;
  --u9-teal-deep: #00857C;
  --u9-teal-bright: #1FC7B8;
  --u9-mint: #EAF7F5;
  --u9-mint2: #DDF2EF;
  --u9-ink: #181818;
  --u9-ink2: #322B29;
  --u9-text: #1E2523;
  --u9-sub: #5C6664;
  --u9-line: #DFE6E4;
  --u9-beige: #BDAC79;

  /* ベースの FIVE トークンを UPPER 9 の値に差し替える */
  --color-five-primary-pink1: var(--u9-teal);          /* 主アクセント・CTA */
  /* pink2 は白背景の見出しにも使われる。明るいティール(#1FC7B8)だと
     コントラスト比が 2:1 程度しか出ないため、濃いほうを充てる。 */
  --color-five-primary-pink2: var(--u9-teal-deep);     /* 副アクセント */
  --color-five-primary-pink-light: var(--u9-mint);     /* 淡い背景 */
  --color-five-primary-green: var(--u9-teal-deep);
  --color-five-primary-purple: var(--u9-sub);
  --color-five-primary-purple-light: var(--u9-mint2);
  --color-five-beige-100: var(--u9-beige);
  --color-five-beige-200: var(--u9-sub);
  --color-five-beige-300: var(--u9-line);
  --color-five-gray-100: #F4F6F6;
  --color-five-gray-150: #8F9997;
  --color-five-gray-200: var(--u9-text);

  /* ベースが引きずっている Rintosull 由来のピンクも打ち消す */
  --color-rintosull-cta-pink-500: var(--u9-teal);
  --color-rintosull-cta-pink2-500: var(--u9-teal-deep);
  --color-rintosull-cta-pink3-500: var(--u9-teal-deep);
  --color-rintosull-text-gray: var(--u9-text);

  /* rig-shaded は FIVE の Adobe Fonts キット（arr1udq）に紐づく書体で、
     他ブランドのキットを流用できないため Noto Sans JP に寄せる。 */
  --font-rig-300: var(--font-noto-sans-jp);
  --font-rig-500: var(--font-noto-sans-jp);
}

/* -------------------------------------------------------------------------
 * 2. FIVE 固有の値・素材参照の打ち消し
 * ---------------------------------------------------------------------- */

/* --- ブランドロゴ ---
   レギュレーション（docs/images/2601_UPPER 9_logo_regulation_ol_0119.ai）の
   【基本型（業態名あり）】を、単色背景なので「背景なし」で使用する。
   SVG は fill="currentColor" なので、置いた場所の color で白抜き/黒を切り替える。 */
.u9_logo_svg {
  display: block;
  width: auto;
  height: 100%;
}
.site_header_logo {
  width: auto;
  height: calc((100vw / var(--vw-sp)) * 40);
  line-height: 1;
  color: #fff;
}
.site_header_logo a {
  display: block;
  height: 100%;
  color: inherit;
}
/* メインビジュアルを通過するとヘッダーが白背景になるため、ロゴを反転させる */
body[data-past-mv] .site_header_logo { color: var(--u9-ink); }

.footer_logo {
  height: calc((100vw / var(--vw-sp)) * 46);
  color: #fff;
}

/* --- CTA ボタン ---
   ベースの構造は「外側の帯（5px border）→ ゴールドの細罫（::before の
   グラデーションを mask で罫線化）→ 塗り」で、狙っているテイストと同じ。
   ただし外帯が不透明で硬く、外側に滲みが無いぶん平板に見える。
   帯を半透明にして拡散するグローを足し、柔らかいハローに寄せる。
   ゴールドの細罫はベースのものをそのまま活かす（UPPER 9 のサブカラー
   #BDAC79 とも同系）。

   併せて、PC の border:5px solid #E7BBB6（FIVE のピンク）と
   width:350px 固定でカード内からはみ出す問題も打ち消す。 */
.cta_common {
  /* ベースの 5px の帯は外す。ゴールドの細罫がボタンの輪郭になり、
     その外側に色が乗らない状態にする（border-box なので外寸は変わらない）。
     ::before のゴールド罫は padding box 基準なので、帯を消すと縁に揃う。 */
  border-width: 0 !important;
  max-width: 100%;
  /* 塗りにごく浅い陰影を足して、ベタ塗りの硬さを抜く */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .07) 100%);
  /* 影は色を持たせず、浮きの表現だけにする */
  box-shadow: 0 calc((100vw / var(--vw-sp)) * 5) calc((100vw / var(--vw-sp)) * 14) rgba(24, 24, 24, .18);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.cta_common:hover {
  background-color: var(--u9-teal-deep);
  box-shadow: 0 calc((100vw / var(--vw-sp)) * 7) calc((100vw / var(--vw-sp)) * 18) rgba(24, 24, 24, .26);
}

/* アウトラインのボタンも同じ考え方（塗りが無いぶん控えめに） */
.cta_outline {
  box-shadow: 0 calc((100vw / var(--vw-sp)) * 3) calc((100vw / var(--vw-sp)) * 10) rgba(24, 24, 24, .12);
  transition: box-shadow .3s ease, background-color .3s ease;
}

/* 矢印の線。ベースは .cta_common .arrow にしか当てていないので、
   .cta_outline の中で <span class="arrow"> を使うと
   ・横線の本体（幅・高さ・背景）が描かれない
   ・position:static のまま ::before / ::after だけが絶対配置になり、
   　直近の位置指定した祖先＝画面の右端まで飛ぶ
   という壊れ方をする（FV のボタンで実際に発生した）。
   色は塗り／白抜きの両方で使えるよう currentColor にする。 */
.cta_outline .arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 1px;
  margin: 5px 0 5px .9em;
  border-radius: 9999px;
  background-color: currentColor;
}
.cta_outline .arrow::before,
.cta_outline .arrow::after { background-color: currentColor; }
.plan_card_body .cta_common,
.shop_cta_wrap .cta_common { width: 100%; }

/* 3枚のカードで CTA の高さを揃える。
   「こんな方へ」等の折り返し行数がプランごとに違うため、そのままだと
   ボタンの位置がばらつく。カード本体を余白ぶん伸ばし、ボタンを下端に寄せる。
   （ベースは PC で .plan_card_body に flex:none を当てているので上書きする） */
.plan_card_body { flex: 1; }
.plan_card_body .cta_common { margin-top: auto; }

/* --- ナビ最後の項目の塗りを打ち消す ---
   ベースは「ナビの最後の項目 ＝ CTA」という作りで、最後の li に塗りが入る。
   UPPER 9 はすぐ右に「店舗一覧」ボタンを別に置いているため、
   そのままだと同じ遷移先の緑のボタンが2つ並ぶ。塗りは持たせず、
   他の項目と同じテキストリンクとして扱う（2026-08-09 指示）。 */
.header_navi_secondary_global > li:last-of-type,
.header_navi_secondary_global > li:last-of-type:hover {
  background: none;
}
/* ベースは塗りが前提で hover を白にしているので、他の項目と同じ色に戻す */
.header_navi_secondary_global > li:last-of-type > a:hover {
  color: var(--u9-teal-deep);
}

/* --- 上下非対称パディングの是正 ---
   ベースは欧文の表示書体（rig-shaded）に合わせて、パディングを上厚め・下薄めに
   する光学調整を各所で入れている。UPPER 9 は和文ゴシックに置き換えたため、
   塗りのある要素ではそのまま文字が下にずれて見える。
   高さを変えずに上下を揃える。 */

/* 1) 店舗の業態タグ（ベース: SP 4px上/1px下、PC 5px上/2px下） */
.shop_tags li {
  display: inline-flex;
  align-items: center;
  padding-top: calc((100vw / var(--vw-sp)) * 2.5);
  padding-bottom: calc((100vw / var(--vw-sp)) * 2.5);
}

/* 2) 料金プランの「オススメ！」バッジ（ベース: SP 0px上/2px下） */
.plan_card_title span.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: calc((100vw / var(--vw-sp)) * 1);
  padding-bottom: calc((100vw / var(--vw-sp)) * 1);
}

/* --- セクション見出し ---
   ベースはベージュの細い欧文。UPPER 9 はモノトーンなので濃色で締める。 */
.section_title { color: var(--u9-ink); font-weight: 700; }
.section_title_sub { color: var(--u9-sub); }
/* ベースの ABOUT / PLAN は背景写真の上に載るため見出しが白（`color:#fff`）。
   UPPER 9 は写真を敷いていないので、そのままだと文字が消える。
   詳細度 (0,2,0) の指定があるため、同じ強さで打ち消す。 */
.about_title, .plan_title { color: var(--u9-ink); }
/* .why_title には詳細度 (0,2,0) で独自の margin-top / color が入っていて、
   このままだと FEATURE だけ英字と和文の間隔が広く、色も濃くなる。
   他のセクションと揃うよう同じ強さで打ち消す。 */
.about_title .section_title_sub,
.plan_title .section_title_sub,
.why_title .section_title_sub {
  margin-top: calc((100vw / var(--vw-sp)) * 8);
  color: #7A8280;
}

/* --- アンカー遷移のオフセット ---
   ヘッダーが position:fixed なので、そのままアンカーへ飛ぶと
   セクションの見出しがヘッダーの下に潜り込む（ABOUT / PROGRAM で実測）。
   ベースの JS は scrollIntoView を使っているので scroll-margin-top が効く。

   ただし飛び先の section は内側に余白を持っていて、
     見出しまでのオフセット = section の padding-top（SP 60 / PC 100px）
                            ＋ 見出し自身の上マージン
   ぶん下がった位置に見出しが来る。着地位置を「見出しがヘッダーのすぐ下」で
   揃えたいので、そのオフセットを先読みして相殺する（負値も可）。
   PLAN / STUDIO はベースの .plan_title / .studio_title に上マージンがあり、
   他セクションよりオフセットが大きい（PC 実測 172 / 177px、他は 100px）ので
   個別に指定する。 */
main section[id] { scroll-margin-top: calc((100vw / var(--vw-sp)) * 48); }
main section#plan { scroll-margin-top: 0; }
main section#studio { scroll-margin-top: calc((100vw / var(--vw-sp)) * -29); }

/* --- ヒーロー ---
   ベースは「短い2行見出しを絶対配置」する前提なので、通常フローの縦積みに置き換える。

   2026-08-24「FV を添付の A の形に作り直して」への対応で、
   下寄せ・左揃え・要素4つ（ラベル／キャッチ／タグ／塗りボタン）の構成から、
   中央寄せ・要素3つ（明朝のキャッチ／リード／白抜きボタン）へ変更した。

   背景は実写（SP=縦位置のハイキック、PC=ミット打ち）。
   白基調のスタジオ写真なので、そのままだと白文字が読めない＆ブランドの
   「黒×白のモノトーン」から外れる。暗いグラデーションを重ねて締める。
   モックは以前より写真が見えている状態なので、上側の黒みを浅くした。 */
.hero_inner {
  display: flex;
  flex-direction: column;
  /* モックは文字の塊が画面の下半分（高さの 50%〜89%）に置かれていて、
     上半分は写真だけ。中央寄せだと塊が上がりすぎ、下に写真の余りが
     大きく残る（実機で 25% ほど空いた）。下寄せ＋下余白で合わせる。 */
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: auto;
  /* モックでは写真が画面いっぱいまで来ている。ベースの --mv-h（600px 相当）だと
     iPhone で下に次のセクションが覗くため、SP だけ画面の高さに合わせる。 */
  min-height: 100svh;
  /* 下余白は画面の高さに対する比で持つ。px で持つと、
     縦の長い端末では塊が下に張りつき、短い端末では浮いてしまう。 */
  padding: calc((100vw / var(--vw-sp)) * 110) calc((100vw / var(--vw-sp)) * 24) 9svh;
  background:
    linear-gradient(180deg,
        rgba(24, 24, 24, .70) 0%,
        rgba(24, 24, 24, .50) 30%,
        rgba(24, 24, 24, .68) 50%,
        rgba(24, 24, 24, .88) 72%,
        rgba(24, 24, 24, .97) 100%),
    url(../img/hero-sp.webp) center / cover no-repeat var(--u9-ink);
}
/* キャッチは明朝。ベースの --font-shippori（Shippori Mincho）を使うが、
   読み込んでいるのは Noto Sans JP だけだったので html_header.php に足してある。
   足さないと端末のシステム明朝（ヒラギノ明朝／游明朝）に落ちて字面が揃わない。 */
.hero_title {
  position: static;
  font-family: var(--font-shippori);
  font-weight: 400;
  font-size: calc((100vw / var(--vw-sp)) * 37);
  line-height: 1.52;
  letter-spacing: .12em;
  /* ベースの .hero_title は下に 22.78px のマージンを持っている。
     下寄せなので、この余白ぶんキャッチだけが上に押し上げられていた
     （モックより 30px 高い位置に出ていた）。間隔は .hero_lead 側で持つ。 */
  margin-bottom: 0;
  /* letter-spacing は最後の1文字の後ろにも入る。中央揃えだと、その1文字ぶん
     行が左にずれて見えるので、同じ幅を先頭に足して見た目の中心を戻す。 */
  text-indent: .12em;
}
/* キャッチとリードの間に入るティールの短い罫線（モックにある）。
   text-indent を打ち消さないと、親の .12em ぶん右にずれる。 */
.hero_title::after {
  content: "";
  display: block;
  width: calc((100vw / var(--vw-sp)) * 32);
  height: 2px;
  margin: calc((100vw / var(--vw-sp)) * 10) auto 0;
  text-indent: 0;
  background: var(--u9-teal-bright);
}

/* リード。キャッチの補足なので、大きさ・太さ・字間で明確に一段落とす。 */
.hero_lead {
  /* h1 の外に出したため、ベースが .hero_title に当てている白が継承されない。
     明示しないと濃色文字が暗い背景に乗って読めなくなる。 */
  color: #fff;
  margin-top: calc((100vw / var(--vw-sp)) * 24);
  font-size: calc((100vw / var(--vw-sp)) * 13);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .08em;
  text-indent: .08em;
}

/* ヒーロー内 CTA。モックに合わせて白抜き1本。 */
.hero_cta {
  display: flex;
  justify-content: center;
  margin-top: calc((100vw / var(--vw-sp)) * 18);
}
.hero_cta .cta_outline {
  width: calc((100vw / var(--vw-sp)) * 262);
  /* ベースは 999px のピル。モックは角のほぼ立った長方形なので上書きする。 */
  border-radius: 2px;
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
  letter-spacing: .06em;
  background: none;
  /* 写真の上なので、白い影が出ると輪郭がぼやける */
  box-shadow: none;
}

/* ベースの .cta_common は単独で中央に置く前提で `margin: 0 auto` を持つ。
   横並びの flex に入れると auto マージンが余白を全部吸って左右に離れてしまう
   （1200px 幅で実測 margin 313px）。横並びで使うラッパーの中では無効化する。 */
.hero_cta > *,
.page_foot_actions > *,
.floating_cta_sp_inner > * { margin-inline: 0; }

/* -------------------------------------------------------------------------
 * 3. ベースに無いセクションの追加
 *    ベースの余白・見出し・カードのトーンに合わせる。
 * ---------------------------------------------------------------------- */

/* 共通の内側幅（ベースの *_inner と同じ考え方） */
.u9_inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: calc((100vw / var(--vw-sp)) * 20);
}
.u9_section { padding-block: calc((100vw / var(--vw-sp)) * 60); }
/* 淡色面はほぼ白（#F4F6F6）だと隣の白セクションと区別がつかず、面の変化が
   まったく効かない。ブランドのティールを薄く敷いて、色として見えるようにする。 */
.u9_section_tint { background: var(--u9-mint); }

/* --- セクションの色面リズム ---
   ベース(FIVE)はローズのベタ塗りを大きく敷いて、白 → 色 → 白 → 色 の
   強いリズムを作っている。UPPER 9 は「黒×白のモノトーン」なので、
   同じ役割を黒のベタ面に担わせる。無彩色の濃淡だけだと平板に見えるため。 */
.u9_section_dark {
  /* 生成したテクスチャを敷く（2026-08-08）。ベタ塗りだけだと面が硬く、
     セクションが縦に長いぶん単調に見えるため、ごく淡い光と粒状感を足す。
     画像が落ちても真っ黒の面として成立するよう、背景色は必ず残す。 */
  background-color: var(--u9-ink);
  background-image: url(../img/bg-dark.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* 同じ絵が1ページに2回出ると「同じ画像」と気づかれるので、
   PLAN 側は寄せる位置を変えてティールの出る場所をずらす。 */
.plan.u9_section_dark { background-position: right center; }
.about.u9_section_dark { background-position: left center; }
.u9_section_dark .section_title { color: #fff; }
.u9_section_dark .section_title_sub { color: rgba(255, 255, 255, .6); }
.u9_section_dark .u9_lead { color: #fff; }
.u9_section_dark .u9_note { color: rgba(255, 255, 255, .6); }
.u9_section_dark .u9_todo { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .7); }
/* 黒面の上下を薄く締めて、面の切り替わりを明確にする */
.u9_section_dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .08); }
/* 黒面の上に乗る白いカードは、セクションの白文字を継承すると
   白地に白文字で消えてしまうので、カード側で文字色を戻す。 */
.u9_section_dark .plan_card,
.u9_section_dark .shop_card,
.u9_section_dark .program_card,
.u9_section_dark .faq_item { color: var(--u9-text); }

/* --- セクション見出しの強調 ---
   ベースは装飾書体（Adobe Fonts の rig-shaded）で見出しに表情を出しているが、
   他ブランドのキットは使えない。字を大きく・字間を広げ、
   下にアクセントの短い罫を敷いて代替する。 */
.section_title {
  font-size: calc((100vw / var(--vw-sp)) * 34);
  letter-spacing: .18em;
}
.section_title::after {
  content: "";
  display: block;
  width: calc((100vw / var(--vw-sp)) * 40);
  height: 2px;
  margin: calc((100vw / var(--vw-sp)) * 14) auto calc((100vw / var(--vw-sp)) * 2);
  background: var(--u9-teal);
}
/* 和文サブタイトル。
   ベースは 22px(SP) / 26px(PC)・上余白 13/28px と大きく、英字見出しの65%あるため
   第2の見出しに見えてしまう。英字を主・和文を添えの関係にする。 */
.section_title_sub {
  margin-top: calc((100vw / var(--vw-sp)) * 8);
  font-size: calc((100vw / var(--vw-sp)) * 13);
  letter-spacing: .1em;
  color: #7A8280;
}
.u9_lead {
  margin-top: 1.6em;
  text-align: center;
  font-weight: 700;
  line-height: 2;
}
.u9_note { margin-top: 1.6em; font-size: .8em; color: var(--u9-sub); line-height: 1.9; }
.u9_actions { margin-top: 2em; text-align: center; }
.u9_todo {
  margin-top: 1.6em;
  padding: 1em 1.2em;
  border: 1px dashed var(--u9-line);
  border-radius: 8px;
  color: var(--u9-sub);
  font-size: .85em;
  text-align: center;
  line-height: 1.9;
}

/* ベースのリストは箇条書きマーカーが出る箇所があるため、追加分だけ明示的に消す */
.news_list, .program_list, .faq_list, .lesson_list { list-style: none; padding-left: 0; }

/* --- フッター ---
   ベースは footer_main の背景にブランドの副アクセント色（ピンク）を敷いている。
   UPPER 9 はモノトーンなので、ベタ塗りではなく黒に寄せる。
   ロゴはベースが <img>（.footer_main_inner img で幅指定）前提。
   UPPER 9 は暫定のテキストロゴなので専用クラスを当てる。 */
.footer_main { background: var(--u9-ink); }


/* --- お知らせ --- */
.news_list { margin-top: 2em; border-top: 1px solid var(--u9-line); }
.news_item {
  display: grid;
  gap: .2em 1.4em;
  padding: 1em .2em;
  border-bottom: 1px solid var(--u9-line);
}
.news_date {
  color: var(--u9-teal);
  font-weight: 700;
  font-size: .9em;
  letter-spacing: .06em;
}
.news_text { font-size: .95em; line-height: 1.9; }
/* お知らせのタイトルから各店舗LPへ遷移する。
   リンクだと分かるよう矢印を添え、hover でアクセント色にする。 */
.news_link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.news_link::after {
  content: "";
  width: .5em;
  height: .5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.news_link:hover { color: var(--u9-teal-deep); }
.news_link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --- UPPER 9とは（ベースの about は画像1枚。こちらはテキスト原稿＋写真） ---
   原稿の「ブランドロゴを併記」への対応。見出しと本文の間にロゴを置く。
   2026-08-07 の指示で「背景白ver」に変更。レギュレーションの
   【プレートあり】の使い方に合わせ、白い角丸の下敷きにロゴを濃色で載せる。 */
.about_logo {
  display: flex;
  justify-content: center;
  margin-top: calc((100vw / var(--vw-sp)) * 30);
}
.about_logo_plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc((100vw / var(--vw-sp)) * 92);
  padding-inline: calc((100vw / var(--vw-sp)) * 30);
  border-radius: calc((100vw / var(--vw-sp)) * 14);
  background: #fff;
  color: var(--u9-ink);
}
/* プレートの中でロゴが上下いっぱいにならないよう、実寸はロゴ側で決める */
.about_logo_plate .u9_logo_svg { height: calc((100vw / var(--vw-sp)) * 52); }

.about_text { margin-top: 2em; }
.about_text p + p { margin-top: 1.6em; }
.about_text p { line-height: 2.1; }
/* ベースは about_features の上余白が 23px しかなく、本文の直後に写真が
   詰まって見える。本文と写真を別の塊として読ませたいので広げる。 */
.about_features { margin-top: calc((100vw / var(--vw-sp)) * 46); }

/* --- 2業態を斜めに分けた写真（ABOUT と FEATURE 01 で共用） ---
   初出は ABOUT（2026-08-07: 1枚 → 左キック／右ピラティスの2分割）。
   2026-08-21 に FEATURE 01 も「キックとピラティスで分けて、①同様のレイアウトで」
   との指示を受けたため、共通の .split_photos として切り出した。

   2枚で1枚ぶんの塊に見せたいので、角丸は外枠側でまとめて丸める。
   角丸の当て方は置き場所で変わるので --split-corners で外から差し替える
   （ABOUT は左上・右下だけの対角、FEATURE は他の POINT の写真に合わせて四隅）。

   合わせ目は 2026-08-09 の指示で垂直から斜めに変更。
   --split-x が斜線の横方向の振れ幅（上端と下端の差）。

   やり方: 2枚を「振れ幅の半分」だけ横に広げて中央で重ね、
   同じ斜線を境に clip-path で互いに切り抜く。
   右側の切り口だけ --split-gap ぶん右へずらすと、
   その幅の斜めの隙間ができて背景が細く覗く。
   これが従来の縦4pxの隙間の代わりになる。 */
.split_photos {
  --split-x: calc((100vw / var(--vw-sp)) * 34);
  --split-gap: calc((100vw / var(--vw-sp)) * 4);
  --split-corners: calc((100vw / var(--vw-sp)) * 24) 0 calc((100vw / var(--vw-sp)) * 24) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  border-radius: var(--split-corners);
}
.split_photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  line-height: 0;
  /* 振れ幅の半分だけ内側にはみ出させ、中央で重ねる */
  width: calc(100% + var(--split-x) / 2);
}
/* 左：右端が上ほど右、下ほど左に寄る */
.split_photo:first-child {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--split-x)) 100%, 0 100%);
}
/* 右：左と同じ傾きの線を、隙間ぶん右にずらして共有する */
.split_photo:last-child {
  margin-left: calc(var(--split-x) / -2);
  clip-path: polygon(calc(var(--split-x) + var(--split-gap)) 0, 100% 0, 100% 100%, var(--split-gap) 100%);
}
.split_photo_image {
  display: block;
  width: 100%;
  height: 100%;
  /* 縦横比の違う2枚が混ざりうるので、比率を揃えてから cover で切る */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}
/* ★ABOUT・FEATURE 01 の4枚は、いずれも枠と同じ 3:4 で書き出してある。
   つまり cover でも切られないので、object-position の調整は要らない。
   写真を差し替えるときも 3:4 で用意すること。横位置のまま入れると、
   枠に合わせて左右が大きく削られ、顔や手が枠の外に出る。 */
/* どちらの業態の写真かひと目で分かるようにラベルを載せる（新店 LP と同じ考え方） */
.split_photo_label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc((100vw / var(--vw-sp)) * 22) calc((100vw / var(--vw-sp)) * 10) calc((100vw / var(--vw-sp)) * 9);
  background: linear-gradient(180deg, rgba(24, 24, 24, 0) 0%, rgba(24, 24, 24, .8) 100%);
  color: #fff;
  font-size: calc((100vw / var(--vw-sp)) * 12);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: center;
}
/* 斜めにしたぶん、下端は左が狭く右が広い。
   中央揃えのままだと文字が切り口からはみ出すので、
   見えている範囲の中で中央に来るよう内側に余白を足す。 */
.split_photo:first-child .split_photo_label { padding-right: var(--split-x); }
.split_photo:last-child .split_photo_label { padding-left: var(--split-x); }

/* --- プログラム紹介（TOP） ---
   参考: https://urbanclassic.jp/ のプログラム一覧
   写真の上に英字名を大きく白抜きし、和名を小さく添え、READ MORE を置く。
   スライダー本体はベースの Swiper 初期化（.topics_slider）に乗せている。 */
/* urbanclassic に合わせ、スライダーはウィンドウ全幅。
   スライド幅は CSS 側で決める（JS は slidesPerView:'auto'）。 */
.program_slider { margin-top: 2em; overflow: hidden; }
.program_slider .swiper-slide { width: 84vw; height: auto; }
.program_card {
  position: relative;
  display: block;
  overflow: hidden;
  /* 左上と右下だけ角丸にして対角の表情を出す（右上・左下は直角のまま） */
  border-radius: calc((100vw / var(--vw-sp)) * 24) 0 calc((100vw / var(--vw-sp)) * 24) 0;
  background: var(--u9-ink);
  color: #fff;
}
.program_card_image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s var(--ease-rintosull-out, ease);
}
.program_card:hover .program_card_image { transform: scale(1.04); }
/* 文字を写真の上に乗せるので、下側を暗く落として可読性を確保する */
.program_card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 24, 24, 0) 35%, rgba(24, 24, 24, .72) 100%);
  pointer-events: none;
}
.program_card_label {
  position: absolute;
  z-index: 1;
  left: calc((100vw / var(--vw-sp)) * 16);
  right: calc((100vw / var(--vw-sp)) * 16);
  bottom: calc((100vw / var(--vw-sp)) * 52);
  display: block;
}
.program_card_en {
  display: block;
  font-size: calc((100vw / var(--vw-sp)) * 24);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .04em;
}
.program_card_ja {
  display: block;
  margin-top: .4em;
  font-size: calc((100vw / var(--vw-sp)) * 11);
  letter-spacing: .1em;
  opacity: .9;
}
.program_card_more {
  position: absolute;
  z-index: 1;
  left: calc((100vw / var(--vw-sp)) * 16);
  bottom: calc((100vw / var(--vw-sp)) * 14);
  padding: calc((100vw / var(--vw-sp)) * 6) calc((100vw / var(--vw-sp)) * 12);
  border: 1px solid rgba(255, 255, 255, .85);
  font-size: calc((100vw / var(--vw-sp)) * 10);
  letter-spacing: .08em;
  transition: background-color .3s ease, color .3s ease;
}
.program_card:hover .program_card_more { background: #fff; color: var(--u9-ink); }
/* ページネーションのドット（ベースの Swiper CSS に乗せる）
   Swiper の pagination モジュールは使わず upper9.js が button で描画するので、
   ボタンの既定スタイル（枠線・余白・背景）はここで打ち消す。 */
.program_pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: calc((100vw / var(--vw-sp)) * 8);
  margin-top: 1.6em;
}
.program_pagination .swiper-pagination-bullet {
  width: calc((100vw / var(--vw-sp)) * 8);
  height: calc((100vw / var(--vw-sp)) * 8);
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  background: var(--u9-sub);
  opacity: .3;
}
.program_pagination .swiper-pagination-bullet-active { background: var(--u9-teal); opacity: 1; }

/* --- レッスン紹介ページの各カテゴリ（参考: urbanclassic.jp/program/） --- */
.program_title {
  font-family: var(--font-noto-sans-jp);
  font-size: calc((100vw / var(--vw-sp)) * 26);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .06em;
  text-align: center;
  color: var(--u9-ink);
}
.program_title span {
  display: block;
  margin-top: .7em;
  font-size: .5em;
  letter-spacing: .1em;
  color: #7A8280;
}
.program_desc {
  margin-top: 1.6em;
  text-align: center;
  line-height: 2;
}
.program_visual { margin-top: 1.8em; }
.program_visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc((100vw / var(--vw-sp)) * 8);
}

/* --- FAQ --- */
.faq_list { margin-top: 2em; }
.faq_item + .faq_item { margin-top: .7em; }
.faq_item details {
  border: 1px solid var(--u9-line);
  border-radius: 10px;
  background: #fff;
}
.faq_q {
  position: relative;
  padding: 1.1em 3em 1.1em 1.2em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
.faq_q::-webkit-details-marker { display: none; }
.faq_q::after {
  content: "";
  position: absolute;
  top: 50%; right: 1.2em;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--u9-teal);
  border-bottom: 2px solid var(--u9-teal);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq_item details[open] .faq_q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq_a { padding: 0 1.2em 1.2em; font-size: .95em; line-height: 1.9; }

/* --- ここがスゴイ（ベースの why_point） ---
   ベースは各ブロックに写真が入る前提で、SPでは .why_point_body に
   画像用の上余白を 210px 確保している。UPPER 9 のスタジオ写真は未支給のため、
   画像が無いブロックだけ余白を詰める。
   ★写真を .why_point_image として追加すれば、この指定は自動的に外れる。 */
.why_point_layout:not(:has(.why_point_image)) .why_point_body { padding-top: 0; }
/* PC でも同様に、画像用に空けている 385px の細い列ではなく
   レイアウト全幅（790px）を本文に使わせる。 */
.why_point_layout:not(:has(.why_point_image)) .why_point_body_inner { max-width: 790px; }

/* SP のみ: ベースは画像を position:absolute で置き、本文側に 210px の余白を確保して
   重ねる作りだが、.why_point / .why_point_layout に位置指定が無いため、
   ブロックを複数並べると画像が全部同じ位置に重なってしまう。
   通常フローの縦積みにして各ブロック内で完結させる。（PC はベースのままでよい）

   さらに 2026-08-07 の指摘への対応として、SP は
     見出し（POINT 01 ＋ タイトル）→ 写真 → 本文
   の順に組み替える。ベースの並び（写真 → 見出し → 本文）だと
   ・FEATURE 見出しの直後にいきなり大きな写真が来て、文字の無い扉絵に見える
   ・写真が「1つ前の POINT のもの」に見えるので、最後の 05 だけ写真が無いように見える
   という2点が同時に起きていた（実際にその2点を指摘された）。
   DOM はベースのままにしたいので、grid のエリア指定で順番だけ入れ替える。 */
@media (max-width: 800px) {
  .why_point_layout {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      "title"
      "photo"
      "text";
    gap: calc((100vw / var(--vw-sp)) * 14);
  }
  /* 中間の入れ物を透過させて、見出し・本文・写真を同じ grid の要素にする */
  .why_point_body,
  .why_point_body_inner { display: contents; }
  /* display:contents で消える padding を、中身側に付け直す */
  .why_point_title,
  .why_point_text {
    padding-inline: calc((100vw / var(--vw-sp)) * 20);
    margin-bottom: 0;
  }
  .why_point_title { grid-area: title; }
  .why_point_text  { grid-area: text; }
  .why_point_image {
    grid-area: photo;
    position: static;
    padding: 0 calc((100vw / var(--vw-sp)) * 20);
  }
}
/* 直下の img だけを対象にする（> が要る）。
   FEATURE 01 は 2026-08-21 の指示で2分割になり、枠の中に .split_photos が入る。
   子孫セレクタのままだと、3:4 で並べたい2枚にもこの 3:2 が効いてしまう。 */
.why_point_image_box > img {
  display: block;
  /* 正方形（人物）と横長（内観）が混ざっていて大きさが揃わないので、比率を固定する。
     SP では正方形のままだと画面幅いっぱいの高さになり「大きすぎる」ため、
     横長に寄せて高さを抑える。 */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 35%;
  border-radius: calc((100vw / var(--vw-sp)) * 14);
}

/* FEATURE 01「キックもピラティスも、1つの料金で」だけ、写真が
   キック／ピラティスの2分割になる（2026-08-21 指示「①同様のレイアウトで」）。
   3:2 の枠に 3:4 を2枚並べるとちょうど 3:2 に収まるので、
   枠のサイズは他の POINT と同じまま。
   角丸だけは ABOUT の対角ではなく、並びの他の写真に合わせて四隅にする。 */
.why_point_image_box .split_photos {
  --split-x: calc((100vw / var(--vw-sp)) * 26);
  --split-gap: calc((100vw / var(--vw-sp)) * 4);
  --split-corners: calc((100vw / var(--vw-sp)) * 14);
  /* 高さは枠側で 3:2 に決め打つ。2枚は「振れ幅の半分」ぶん横に広げてあるので、
     写真側の aspect-ratio に任せると 1枚あたりが半分より広くなり、
     枠が 3:2 より縦に伸びて 02〜05 の写真と大きさが揃わない。 */
  aspect-ratio: 3 / 2;
}
.why_point_image_box .split_photo_image {
  aspect-ratio: auto;
  height: 100%;
}
.why_point_image_box .split_photo_label {
  padding: calc((100vw / var(--vw-sp)) * 18) calc((100vw / var(--vw-sp)) * 8) calc((100vw / var(--vw-sp)) * 7);
  font-size: calc((100vw / var(--vw-sp)) * 11);
}

/* ベースの .why は上に 77px の余白があるのに下は 0 で、最後の POINT の写真が
   次のセクション（黒面）に直接くっついてしまう。他セクションと同じ下余白を足す。 */
.why {
  padding-top: calc((100vw / var(--vw-sp)) * 60);
  padding-bottom: calc((100vw / var(--vw-sp)) * 60);
}

/* モノトーンのブランドに合わせ、見出しは濃色・数字だけアクセント色にする。
   2026-08-07「FEATURE の見出しを目立たせて」への対応:
   ベースは見出し 18px(SP)/26px(PC)・太さ 500 で、隣の POINT 番号（53px）に負けていた。
   本文（15px前後）との差もつくよう、大きく・太くして、下に短いアクセント罫を敷く。 */
.why_point_title {
  color: var(--u9-ink);
  font-size: calc((100vw / var(--vw-sp)) * 22);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
}
.why_point_title strong { color: var(--u9-teal); }
.why_point_title::after {
  content: "";
  display: block;
  width: calc((100vw / var(--vw-sp)) * 34);
  height: 2px;
  margin-top: calc((100vw / var(--vw-sp)) * 12);
  background: var(--u9-teal);
}

/* --- 料金プラン ---
   ベースは SP でプラン名(.plan_card_head)を左50%、金額(.plan_card_body)を右50%に
   並べる。UPPER 9 は5項目の比較行を足すため、その幅では文字が1文字ずつ折れて崩れる。
   SP でも縦積みにする（PC はベース側で既に width:100%）。 */
.plan_card_head { width: 100%; border-bottom-left-radius: 0; }
.plan_card_body { width: 100%; }

/* ベースの金額は「8,800」のような1つの数字前提で 32px。UPPER 9 は
   「10,800円〜13,800円」の幅表記なのでカード幅に収まらず折り返す。
   桁数に合わせて縮める。 */
.plan_card_price_value_num {
  font-size: calc((100vw / var(--vw-sp)) * 24);
  letter-spacing: -.02em;
}

/* グリッドアイテムの min-width は既定が auto のため、中身の最小幅（長い金額文字列や
   項目行のラベル）がトラック幅を押し広げ、PC で3枚目のカードが画面外へはみ出していた。
   縮小を許可する。 */
.plan_card, .plan_card_body, .plan_card_rows, .plan_card_row, .plan_card_row > * { min-width: 0; }

/* 「オススメ！」バッジ。ベースは2枚目・3枚目のカードにしか背景色を定義しておらず、
   UPPER 9 は1枚目に付けるため背景が無く、白文字が背景に溶けて見切れて見えていた。
   カードの位置に依らず出るよう、詳細度を合わせて指定する。

   PLAN セクションを黒面にしたので、黒バッジだと背景に沈む。
   ブランドのサブカラー（ゴールド系）を敷いて、黒地でも浮くようにする。
   文字は白だとコントラストが 2.4:1 しか出ないため濃色にする。 */
.plan_card .plan_card_title span.icon,
.plan_card:nth-child(2) .plan_card_title span.icon,
.plan_card:last-child .plan_card_title span.icon {
  background: var(--u9-beige);
  color: var(--u9-ink);
  font-weight: 700;
}

/* ベースの plan_card に項目行を足す */
.plan_card_rows { margin-top: 1em; text-align: left; }
.plan_card_row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: .8em;
  padding: .7em 0;
  border-top: 1px solid var(--u9-line);
  font-size: .88em;
  line-height: 1.8;
}
.plan_card_row_label { color: var(--u9-sub); font-weight: 700; }
.plan_card_price_note {
  display: block;
  margin-top: .4em;
  color: var(--u9-sub);
  font-size: .75em;
  font-weight: 400;
  line-height: 1.7;
}

/* --- 店舗カード ---
   住所・アクセス・営業時間のアイコンはベースから流用した汎用ピクトグラム
   （ピン／電車／時計）だが、色がローズ系のまま。色相を回してティールに寄せる。
   ★UPPER 9 用のアイコンが用意できたら img を差し替えてこの filter を外す。 */
.detail_item_address::before,
.detail_item_access::before,
.detail_item_hours::before {
  filter: hue-rotate(158deg) saturate(1.15);
}
.detail_item_contact dd a { color: var(--u9-teal-deep); text-decoration: underline; }

/* --- 下層ページ（レッスン紹介） --- */
.page_head {
  padding: calc((100vw / var(--vw-sp)) * 110) calc((100vw / var(--vw-sp)) * 20) calc((100vw / var(--vw-sp)) * 50);
  background: linear-gradient(155deg, var(--u9-ink2) 0%, var(--u9-ink) 100%);
  color: #fff;
  text-align: center;
}
.page_head .section_title { color: #fff; }
.page_head .section_title_sub { color: rgba(255, 255, 255, .8); }
.page_head_lead { margin-top: 1.6em; font-size: .95em; line-height: 2; text-align: left; }

.lesson_list { display: grid; gap: 1em; margin-top: 2em; }
.lesson_card {
  padding: 1.4em 1.2em;
  border: 1px solid var(--u9-line);
  border-radius: 10px;
  background: #fff;
}
.lesson_card_name { font-size: 1.1em; font-weight: 700; line-height: 1.6; }
.lesson_card_meta { display: flex; flex-wrap: wrap; gap: .6em 1.4em; margin-top: .8em; }
.lesson_card_meta_item { display: flex; align-items: center; gap: .6em; }
.lesson_card_meta dt { color: var(--u9-sub); font-size: .78em; font-weight: 700; }
.lesson_card_meta dd {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  font-size: .88em;
  font-weight: 700;
}
.lesson_gauge {
  display: block;
  width: 5.4em; height: .36em;
  border-radius: 999px;
  background: var(--u9-mint2);
  overflow: hidden;
}
.lesson_gauge_fill { display: block; height: 100%; border-radius: 999px; background: var(--u9-teal); }
.lesson_intensity { color: var(--u9-teal-deep); }
.lesson_intensity small { color: var(--u9-sub); font-weight: 400; }
.lesson_card_text { margin-top: .8em; font-size: .92em; line-height: 1.9; }

.page_foot_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8em;
}
.page_foot_actions .cta_common,
.page_foot_actions .cta_outline { min-width: 17em; }
.cta_outline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6em;
  padding: 0 1.4em;
  border: 1px solid var(--u9-teal);
  border-radius: 999px;
  color: var(--u9-teal);
  font-size: .95em;
  font-weight: 700;
  background: #fff;
}

/* -------------------------------------------------------------------------
 * 4. 追従CTA（要件書 A13 の最重要項目）
 *    ベースは画像1枚のボタン。UPPER 9 は「店舗一覧」＋「体験予約」の2本立て。
 * ---------------------------------------------------------------------- */
/* ベースはメインビジュアル右下に小さく貼り付く 127px のバッジ型ボタン。
   UPPER 9 は「どこからでもワンタップで店舗一覧へ飛べる」ことが要件のため、
   画面下端に固定するバーに置き換える（URBAN CLASSIC 参考）。 */
.floating_cta_sp {
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.floating_cta_sp_inner {
  display: flex;
  gap: .5em;
  width: 100%;
  margin: 0;
  padding: .6em calc((100vw / var(--vw-sp)) * 20) calc(.6em + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  border-top: 1px solid var(--u9-line);
  backdrop-filter: blur(6px);
}
/* ベースの .floating_cta_link は画像ボタン前提で display:block / 背景 transparent。
   同じ要素に .cta_common を併用すると後勝ちで背景が消え、白地に白文字で読めなくなる。
   クラス2つ分の詳細度で打ち消す。 */
.floating_cta_link.cta_common,
.floating_cta_link.cta_outline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating_cta_link.cta_common { background-color: var(--u9-teal); color: #fff; }
.floating_cta_link.cta_outline { background-color: #fff; }

.floating_cta_item { flex: 1; width: auto; min-height: 3.3em; height: auto; font-size: .9em; }
.floating_cta_item.cta_outline { flex: 0 1 36%; min-height: 3.3em; }

/* 原稿 D4「スマホでは店舗一覧固定ボタンをここ（FV）から常時表示」への対応。
   ベースの JS は 200px スクロールするまで .is-hidden で隠す作りで、
   初期表示では出るのに一度下へ送って先頭に戻すと消える、という不整合があった。
   SP では常時表示に固定する（ベースの JS は変更しない）。 */
@media (max-width: 800px) {
  .floating_cta_link.is-hidden {
    opacity: 1;
    pointer-events: auto;
  }
}

/* -------------------------------------------------------------------------
 * 5. PC
 * ---------------------------------------------------------------------- */
@media (min-width: 801px) {
  .u9_inner { padding-inline: 40px; }
  .u9_section { padding-block: 100px; }
  .news_item { grid-template-columns: 7em 1fr; align-items: baseline; }
  /* urbanclassic はカード幅が約740px。中央を大きく見せ左右を見切れさせる */
  .program_slider .swiper-slide { width: min(740px, 56vw); }
  /* ドットも vw 比例のままだと 1440px 幅で 29px になる。PC は固定サイズへ */
  .program_pagination { gap: 10px; margin-top: 2em; }
  .program_pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
  /* 角丸も vw 比例のままだと 1440px 幅で 118px になる。PC は固定サイズへ */
  .program_card { border-radius: 48px 0 48px 0; }
  .program_card_en { font-size: 40px; }
  .program_card_ja { font-size: 14px; }
  .program_card_more { font-size: 12px; padding: 9px 18px; }
  /* カードが広いので urbanclassic と同じく READ MORE を右下に置ける */
  .program_card_label { left: 40px; right: 200px; bottom: 34px; }
  .program_card_more { left: auto; right: 40px; bottom: 40px; }
  .program_title { font-size: 34px; }
  .program_visual { max-width: 900px; margin-inline: auto; }
  .lesson_list { grid-template-columns: repeat(2, 1fr); gap: 1.4em; }
  .page_head { padding: 180px 40px 80px; }
  .page_head_lead { text-align: center; font-size: 1.1em; }

  .hero_inner {
    /* PC はベース（top.css）が aspect-ratio で高さを決めるので 100svh は外す。
       下寄せもモック（SP）向けの指定なので、PC は中央に戻す。 */
    min-height: 0;
    justify-content: center;
    padding: 120px 40px;
    /* SP と同じく中央に置くため、左から効かせていた斜めのグラデーションをやめて
       上下方向に変える。左寄せだった頃の名残。 */
    background-image:
      linear-gradient(180deg, rgba(24, 24, 24, .5) 0%, rgba(24, 24, 24, .62) 45%, rgba(24, 24, 24, .78) 100%),
      url(../img/hero-pc.webp);
  }
  /* SP は vw 比例だが、そのまま PC へ持ち込むと 1280px 幅で 98px になり
     画面外へはみ出す。ベースと同じく PC では固定サイズへ切り替える。 */
  .hero_title { max-width: 900px; font-size: 46px; }
  .hero_title::after { width: 40px; margin-top: 14px; }
  .hero_lead { margin-top: 24px; font-size: 15px; }
  .hero_cta { margin-top: 38px; }
  .hero_cta .cta_outline { width: 300px; }
  .plan_card_price_value_num { font-size: 26px; }
  /* 見出しも vw 比例のままだと 1280px 幅で 111px になる。PC は固定サイズへ。 */
  /* 上下非対称パディングの是正（PC 値） */
  .shop_tags li { padding-top: 3.5px; padding-bottom: 3.5px; }
  .plan_card_title span.icon { padding-top: 3px; padding-bottom: 3px; }
  main section[id] { scroll-margin-top: -8px; }
  main section#plan { scroll-margin-top: -80px; }
  main section#studio { scroll-margin-top: -85px; }
  .why { padding-top: 100px; padding-bottom: 100px; }
  /* vw 比例のままだと 1440px 幅で見出しが 84px・角丸が 54px になる。PC は固定値へ。 */
  .why_point_title { font-size: 30px; }
  .why_point_title::after { width: 40px; margin-top: 14px; }
  .why_point_image_box > img { border-radius: 20px; }
  .about_logo { margin-top: 36px; }
  .about_logo_plate { height: 116px; padding-inline: 40px; border-radius: 18px; }
  .about_logo_plate .u9_logo_svg { height: 66px; }
  /* 縦積みのままのタブレット幅（〜1023px）で行長が 820px まで伸びて読みにくい。
     2カラムになる 1024px 以上ではカラム幅（約508px）のほうが狭いので効かない。 */
  .about_text { max-width: 40em; margin-inline: auto; }
  .about_features {
    margin-top: 56px;
    /* vw 比例のままだと 1440px 幅で振れ幅が 130px になり傾きすぎる。PC は固定値へ */
    --split-x: 76px;
    --split-gap: 6px;
    --split-corners: 48px 0 48px 0;
  }
  .split_photo_label { font-size: 13px; padding: 32px 12px 12px; }
  .split_photo:first-child .split_photo_label { padding-right: var(--split-x); }
  .split_photo:last-child .split_photo_label { padding-left: var(--split-x); }
  /* FEATURE 01 の枠は PC で 327px（ベースの .why_point_image_box）しかない。
     ABOUT と同じ値だと振れ幅も文字も枠に対して大きすぎるので、別に詰める。 */
  .why_point_image_box .split_photos {
    --split-x: 26px;
    --split-gap: 5px;
    --split-corners: 20px;
  }
  .why_point_image_box .split_photo_label { font-size: 11px; padding: 24px 8px 8px; }
  .site_header_logo { height: 42px; }
  .footer_logo { height: 52px; }
  .section_title { font-size: 40px; }
  .section_title_sub,
  .about_title .section_title_sub,
  .plan_title .section_title_sub,
  .why_title .section_title_sub { margin-top: 10px; font-size: 15px; }
  .section_title::after { width: 48px; margin: 18px auto 2px; }
  /* 影は vw 比例だと PC で過大になるため固定値へ */
  .cta_common { box-shadow: 0 6px 16px rgba(24, 24, 24, .18); }
  .cta_common:hover { box-shadow: 0 8px 22px rgba(24, 24, 24, .26); }
  .cta_outline { box-shadow: 0 4px 12px rgba(24, 24, 24, .12); }
  .hero_cta { gap: 14px; }

  /* PC は右下に縦積みで追従 */
  .floating_cta_sp { left: auto; right: 24px; bottom: 24px; width: auto; }
  .floating_cta_sp_inner {
    flex-direction: column;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
  }
  .floating_cta_item, .floating_cta_item.cta_outline { flex: none; width: 220px; }
  .floating_cta_item.cta_outline { background: #fff; }
}

/* --- ABOUT を PC で 2 カラムに ---
   PC は横幅に余裕があるのに本文と写真が縦に分断され、本文の行長も
   1040px と長すぎて読みにくかった。1024px 以上で本文と写真を左右に並べる。
   1023px 以下は 2 カラムにすると本文の行長が詰まりすぎるので縦積みのまま。
   写真は grid の stretch で本文と同じ高さまで伸ばし object-fit: cover で
   トリミングする。こうすると本文量が変わっても右側に余白が空かない。 */
@media (min-width: 1024px) {
  .about_body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 72px;
    /* 写真は 3:4 のまま。本文の高さいっぱいまで引き伸ばすと枠が 1:2 近くまで
       細長くなり、cover で左右が34%も削られる。実際、支給写真に差し替えた
       2026-08-24 に、キックは顔が・ピラティスは頭ごと枠の外に出た。
       伸ばさずに本文の中央へ揃える。 */
    align-items: center;
    margin-top: 56px;
  }
  .about_text { margin-top: 0; }
  .about_features { max-width: none; margin-top: 0; }
}

/* --- ヘッダーの「店舗一覧」ボタン ---
   顧客動線が「店舗を選んでから無料体験」なので、常時出す導線はこれ1本。
   ヘッダーが position:fixed なので、そのまま追従ボタンとして機能する。
   ベースの .header_navi は flex-direction:column なので横並びに直す。 */
.header_navi {
  flex-direction: row;
  align-items: center;
  gap: calc((100vw / var(--vw-sp)) * 14);
  width: auto;
}
.header_studio_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc((100vw / var(--vw-sp)) * 9) calc((100vw / var(--vw-sp)) * 18);
  border-radius: 999px;
  background: var(--u9-teal);
  color: #fff;
  font-size: calc((100vw / var(--vw-sp)) * 13);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 calc((100vw / var(--vw-sp)) * 3) calc((100vw / var(--vw-sp)) * 10) rgba(24, 24, 24, .18);
  transition: background-color .3s ease;
}
.header_studio_btn:hover { background: var(--u9-teal-deep); color: #fff; }

/* --- ハンバーガーは3本線のみ ---
   ベースは「丸＋MENU の文字」。DOM は script.js が参照しているので触らず、
   ラベルを隠して丸を線に作り替える（上下の線は疑似要素で足す）。 */
.header_navi_burger_label { display: none; }
.header_navi_burger {
  width: calc((100vw / var(--vw-sp)) * 30);
  height: calc((100vw / var(--vw-sp)) * 22);
  justify-content: center;
}
.header_navi_burger span.header_navi_burger_circle {
  width: 100%;
  height: calc((100vw / var(--vw-sp)) * 2);
  margin-right: 0;
  border-radius: 0;
  background: #fff;
}
.header_navi_burger span.header_navi_burger_circle::before,
.header_navi_burger span.header_navi_burger_circle::after {
  content: "";
  position: absolute;
  inset: auto 0 auto 0;
  margin: 0;
  width: 100%;
  height: calc((100vw / var(--vw-sp)) * 2);
  border-radius: 0;
  background: #fff;
}
.header_navi_burger span.header_navi_burger_circle::before { top: calc((100vw / var(--vw-sp)) * -8); }
.header_navi_burger span.header_navi_burger_circle::after  { top: calc((100vw / var(--vw-sp)) * 8); }
/* 丸を前提にした拡大パルスは、線になると不自然なので止める */
.header_navi_burger_circle.is-pulsing { animation: none; }
/* メインビジュアルを抜けた白ヘッダーでは黒に */
body[data-past-mv] .header_navi_burger_circle,
body[data-past-mv] .header_navi_burger_circle::before,
body[data-past-mv] .header_navi_burger_circle::after { background: var(--u9-ink); }
/* メニューを開いている間は白に戻す（背景が黒くなるため） */
body[data-spmenu-open] .header_navi_burger_circle,
body[data-spmenu-open] .header_navi_burger_circle::before,
body[data-spmenu-open] .header_navi_burger_circle::after { background: #fff; }

@media (min-width: 801px) {
  /* ヘッダーまわりも vw 比例のままだと 1440px 幅で倍近くに膨らむ。PC は固定値へ。 */
  .header_navi { gap: 20px; }
  .header_studio_btn { padding: 11px 24px; font-size: 14px; box-shadow: 0 3px 10px rgba(24, 24, 24, .18); }
}

/* --- 店舗カードの「この店舗を見る」 ---
   折りたたみを開かないと見えなかったので、ヘッダー側に出して常時表示にする。
   顧客動線が「店舗を選んでから無料体験」なので、ここが主要導線になる。
   STUDIO は淡いミント地なので、彩度の高いティールで塗って前に出す。 */
.shop_header_cta {
  margin: calc((100vw / var(--vw-sp)) * 14) 0 0;
}
.shop_header_cta .cta_common {
  width: 100%;
  min-height: calc((100vw / var(--vw-sp)) * 46);
  background-color: var(--u9-teal);
  font-size: calc((100vw / var(--vw-sp)) * 15);
}

/* --- FLOW の補足（LP の体裁に合わせる） --- */
.trial_step_text .trial_step_note { display: block; }

/* ステップの写真（2026-08-07「LP 同様に小さく写真を入れて」）。
   十条店 LP と同じ絵柄を丸く小さく置く。カードの主役は文言なので、
   写真は見出しの上に添える大きさに留める。 */
/* ステップの写真。
   2026-08-24「〇切り抜きが小さすぎて見えないので、角丸長方形でもう少し大きめに」
   への対応で、76px の円から角丸の長方形に変えた。

   ★素材の実寸が 240×240 しかない（岐阜LP の小さな丸をもとにしているため）。
   カード幅いっぱい（SP で約272px）まで伸ばすと拡大率が3倍近くなり、
   はっきり眠くなる。円のときの倍以上の面積を確保しつつ、
   拡大が2倍を超えない 168px を上限にしている。
   高解像度の元データをもらえたら、この上限は外してよい。 */
.trial_step_thumb {
  width: min(calc((100vw / var(--vw-sp)) * 168), 100%);
  margin: 0 auto calc((100vw / var(--vw-sp)) * 14);
}
.trial_step_thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* 素材は 3 ステップとも 3:2 で書き出しているので、通常は切られない。
     万一比率の違う素材が入ったときに人物の頭が切れないよう上寄りにしておく。 */
  object-position: center 38%;
  border-radius: calc((100vw / var(--vw-sp)) * 10);
}

.flow_box {
  margin: calc((100vw / var(--vw-sp)) * 12) 0 0;
  padding: calc((100vw / var(--vw-sp)) * 10) calc((100vw / var(--vw-sp)) * 12);
  border: 1px solid var(--u9-line);
  border-radius: calc((100vw / var(--vw-sp)) * 8);
  font-size: calc((100vw / var(--vw-sp)) * 13);
  line-height: 1.5;
  font-weight: 500;
}

/* --- お客様の声 ---
   2026-08-07 の指示で、カードを並べる形からカルーセルに変更。
   あわせて「スライドしても動かない固定パネル」を左に置き、
   面が寂しくならないようにしている（PC は左右2カラム、SP は上下）。 */
.voice_layout {
  display: grid;
  gap: calc((100vw / var(--vw-sp)) * 22);
  margin-top: calc((100vw / var(--vw-sp)) * 28);
}

/* 固定側 */
.voice_intro {
  position: relative;
  overflow: hidden;
  padding: calc((100vw / var(--vw-sp)) * 24) calc((100vw / var(--vw-sp)) * 22) calc((100vw / var(--vw-sp)) * 20);
  border-radius: calc((100vw / var(--vw-sp)) * 20) 0 calc((100vw / var(--vw-sp)) * 20) 0;
  background: linear-gradient(150deg, var(--u9-ink2) 0%, var(--u9-ink) 70%);
  color: #fff;
}
/* 大きな引用符。読み上げには不要なので装飾として敷く */
.voice_intro_mark {
  position: absolute;
  top: calc((100vw / var(--vw-sp)) * -26);
  right: calc((100vw / var(--vw-sp)) * 10);
  color: var(--u9-teal);
  font-size: calc((100vw / var(--vw-sp)) * 150);
  font-weight: 700;
  line-height: 1;
  opacity: .5;
  pointer-events: none;
}
.voice_intro_title {
  position: relative;
  margin: 0;
  font-size: calc((100vw / var(--vw-sp)) * 19);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
}
.voice_intro_text {
  position: relative;
  margin: calc((100vw / var(--vw-sp)) * 12) 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: calc((100vw / var(--vw-sp)) * 13);
  line-height: 1.9;
}
/* 送り操作も固定側に置く。スライダー本体はカードだけにして視線を散らさない。 */
.voice_nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc((100vw / var(--vw-sp)) * 12);
  margin-top: calc((100vw / var(--vw-sp)) * 20);
}
.voice_arrow {
  flex: none;
  width: calc((100vw / var(--vw-sp)) * 38);
  height: calc((100vw / var(--vw-sp)) * 38);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.voice_arrow::before {
  content: "";
  display: block;
  width: calc((100vw / var(--vw-sp)) * 8);
  height: calc((100vw / var(--vw-sp)) * 8);
  margin-inline: auto;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
}
.voice_arrow_prev::before { transform: translateX(15%) rotate(-135deg); }
.voice_arrow_next::before { transform: translateX(-15%) rotate(45deg); }
.voice_arrow:hover { background: var(--u9-teal); border-color: var(--u9-teal); }
.voice_pagination {
  display: flex;
  flex-wrap: wrap;
  gap: calc((100vw / var(--vw-sp)) * 7);
}
.voice_pagination .swiper-pagination-bullet {
  width: calc((100vw / var(--vw-sp)) * 7);
  height: calc((100vw / var(--vw-sp)) * 7);
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  opacity: .35;
}
.voice_pagination .swiper-pagination-bullet-active { background: var(--u9-teal-bright); opacity: 1; }

/* スライダー本体。カードの影が切れないよう上下に少し余白を持たせる。
   width を明示しないと、スライド総幅（6枚ぶん）のまま grid のカラムを
   はみ出して画面外まで伸びるので 100% で抑える。 */
.voice_slider {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-block: calc((100vw / var(--vw-sp)) * 6);
}
.voice_slider .swiper-slide {
  width: min(300px, 78vw);
  height: auto;   /* カードの高さを揃える */
}
.voice_item {
  height: 100%;
  padding: calc((100vw / var(--vw-sp)) * 20);
  border-radius: calc((100vw / var(--vw-sp)) * 20) 0 calc((100vw / var(--vw-sp)) * 20) 0;
  background: #fff;
  box-shadow: 0 calc((100vw / var(--vw-sp)) * 2) calc((100vw / var(--vw-sp)) * 10) rgba(24, 24, 24, .06);
}
.voice_item_title {
  margin: 0 0 calc((100vw / var(--vw-sp)) * 10);
  padding-bottom: calc((100vw / var(--vw-sp)) * 8);
  border-bottom: 1px solid var(--u9-line);
  color: var(--u9-teal-deep);
  font-size: calc((100vw / var(--vw-sp)) * 17);
  font-weight: 700;
  line-height: 1.4;
}
.voice_item_text {
  margin: 0;
  font-size: calc((100vw / var(--vw-sp)) * 14);
  line-height: 1.8;
}
.voice_item_name {
  margin: calc((100vw / var(--vw-sp)) * 10) 0 0;
  color: var(--u9-sub);
  font-size: calc((100vw / var(--vw-sp)) * 13);
  font-weight: 700;
}

/* --- 未オープン店舗の「○月○日 OPEN予定」（2026-08-07 回答D） ---
   店舗名の上に小さく置く。業態タグと同じ角丸の塗りにすると
   「3つ目のタグ」に見えて、カテゴリと状態の区別がつかなくなるので塗らない。
   店舗名より先に目に入る位置に置くことで、未オープンであることが先に伝わる。 */
.shop_open_note {
  display: flex;
  align-items: center;
  gap: calc((100vw / var(--vw-sp)) * 8);
  margin: 0 0 calc((100vw / var(--vw-sp)) * 6);
  color: var(--u9-teal-deep);
  font-size: calc((100vw / var(--vw-sp)) * 12);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
}
/* 文字の右に細い罫を伸ばして、見出しラベルであることを示す */
.shop_open_note::after {
  content: "";
  flex: 1;
  max-width: calc((100vw / var(--vw-sp)) * 120);
  height: 1px;
  background: #C9D8D5;
}

/* --- 運営会社表記（「小さく記入」との指示） --- */
.footer_company {
  margin: calc((100vw / var(--vw-sp)) * 20) 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: calc((100vw / var(--vw-sp)) * 10);
  text-align: center;
}

/* --- 注釈は小さく（2026-08-06 修正依頼 → 2026-08-07 にもう一段小さく） ---
   カード内の※は、ベースの `.plan_card_price_value small`（14px / 太字）が
   詳細度で勝っていて前回の指定が効いていなかった。要素セレクタを足して同じ強さにする。
   （PLAN の※が「もう少し小さく」と再度ご指摘だったのはこのため） */
.plan_note,
small.plan_card_price_note {
  font-size: calc((100vw / var(--vw-sp)) * 9);
  font-weight: 400;
  line-height: 1.6;
}

@media (min-width: 801px) {
  /* PC は縦に余白が空きすぎるので、店舗名と同じ行の右側に寄せる。
     右端の開閉ボタン（30px）とぶつからないよう、そのぶん内側に置く。 */
  .shop_header { position: relative; }
  /* 店舗名の幅がまちまち（実測 131〜206px）で、すぐ後ろに続く業態タグの
     開始位置がカードごとにずれていた。名前の欄に最小幅を持たせて左端を揃える。
     min-width なので、これより長い店舗名が登録された場合はその行だけ
     タグが右にずれるだけで、崩れはしない（2026-08-09 指示）。 */
  .shop_name { min-width: 250px; }

  /* 「この店舗を見る」は絶対配置でこの行に重ねているため、業態タグは
     何もしないとボタンの下に潜り込む（店舗名が長い岐阜・三田で実際に発生）。
     ボタンの左端は右から 274px（幅 220 ＋ 右余白 54）の位置なので、
     そこに 26px の余裕を足した 250px を空ける。
     万一それでも入らない場合はタグを折り返させる。 */
  .shop_tags_wrap { margin-right: 250px; }
  .shop_tags { flex-wrap: wrap; row-gap: 6px; }
  .shop_header_cta {
    position: absolute;
    right: 54px;
    margin: 0;
    /* ヘッダーの上下中央ではなく「店舗名の行」に合わせる。
       上から 50% にすると、OPEN予定の行があるカードだけヘッダーが高くなり、
       ボタンが右隣の開閉ボタンより 20px 上にずれる。
       店舗名の行より下は都道府県の1行だけで高さが決まっているので、
       下端から 37px（＝ヘッダー下端〜店舗名の行の中心。全カード共通）を
       起点にすれば、OPEN予定の行の有無に関わらず揃う。 */
    bottom: 37px;
    transform: translateY(50%);
  }
  .shop_header_cta .cta_common {
    width: auto;
    min-width: 220px;
    min-height: 46px;
    margin-inline: 0;
    font-size: 14px;
    display: inline-flex;
  }
  .flow_box { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }

  /* --- FLOW: 3ステップのカードの高さを揃える（2026-08-07 指示） ---
     ベースは .trial_step が display:block なので、持ち物の枠がある STEP02 だけ
     カードが伸びて下端が不揃いになっていた（実測 170 / 199 / 170px）。
     ステップ全体を縦フレックスにして、カード本体を余りの高さまで伸ばす。 */
  .trial_steps { align-items: stretch; }
  .trial_step { display: flex; flex-direction: column; }
  .trial_step_body { display: flex; }
  .trial_step_body,
  .trial_step_body_inner,
  .trial_step_detail { flex: 1; }
  .trial_step_body_inner { display: flex; flex-direction: column; width: 100%; }
  /* 高さが揃うぶん min-height は不要（写真も入って背が高くなるため） */
  .trial_step_detail { min-height: 0; padding-top: 20px; }
  .trial_step_thumb { width: 176px; margin-bottom: 16px; }
  /* PC は「固定パネル｜カルーセル」の2カラム。
     右側はウィンドウ端まで流したいので、u9_inner の右パディングぶんだけはみ出させる。 */
  /* カラム幅は「カード2枚＋3枚目の頭が少し見える」ように決めている。
     見切れがあると、まだ続きがあることがドット無しでも伝わる。 */
  .voice_layout {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    margin-top: 48px;
  }
  .voice_intro { padding: 34px 32px 30px; border-radius: 28px 0 28px 0; }
  .voice_intro_mark { top: -46px; right: 16px; font-size: 200px; }
  .voice_intro_title { font-size: 19px; }
  .voice_intro_text { font-size: 13px; margin-top: 16px; }
  .voice_nav { gap: 14px; margin-top: 26px; }
  .voice_arrow { width: 42px; height: 42px; }
  .voice_arrow::before { width: 9px; height: 9px; }
  .voice_pagination { gap: 8px; }
  .voice_pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
  .voice_slider { padding-block: 10px; }
  .voice_slider .swiper-slide { width: 300px; }
  .voice_item { padding: 24px; border-radius: 24px 0 24px 0; }
  .voice_item_title { font-size: 18px; margin-bottom: 12px; padding-bottom: 10px; }
  .voice_item_text { font-size: 14px; }
  .voice_item_name { font-size: 13px; margin-top: 12px; }
  .plan_note, small.plan_card_price_note { font-size: 10px; }
  .shop_open_note { gap: 10px; margin-bottom: 6px; font-size: 12px; }
  .shop_open_note::after { max-width: 120px; }
  .footer_company { font-size: 11px; margin-top: 24px; }
}