/* ==========================================================================
   BANNAI美容クリニック LP（モバイル版）
   ファーストビュー ＋ 第一セクション（Case01導入）
   ========================================================================== */

:root {
  /* 配色（3色原則：アイボリー60% / エスプレッソブラウン30% / ゴールド10%） */
  --ivory: #F6F1E7;
  --ivory-soft: #FBF7EE;
  --espresso: #2A231D;
  --gold: #A8895D;
  --white: #FFFFFF;

  /* タイプスケール（6段階のみ使用。px値のベタ書き禁止） */
  --fs-1: 15px; /* バッジ・注記 */
  --fs-2: 17px; /* 本文小 */
  --fs-3: 19px; /* 本文・ボタン */
  --fs-4: 21px; /* サブコピー */
  --fs-5: 33px; /* 人名・中見出し */
  --fs-6: 46px; /* メインコピー */

  /* フォント */
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 英字タイトル用（Case 01 など）。ご提案フォント：Cormorant Garamond */
  --font-en-serif: "Cormorant Garamond", "EB Garamond", serif;

  /* 背景装飾差し込み用（デザイナー側の素材が来たらここに差し込む） */
  --bg-hero-texture: none;
  --bg-section-texture: none;
  /* アイボリードレープ背景（実写が届くまではCSSグラデーションで代用） */
  --bg-drape-texture: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--white);
  color: var(--espresso);
  line-height: 1.8;
  overflow-x: hidden;
}

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

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

/* ==========================================================================
   ファーストビュー（FV）
   ========================================================================== */

.fv {
  position: relative;
  background-color: var(--espresso);
  background-image: var(--bg-hero-texture);
  background-size: cover;
  background-position: center;
  color: var(--ivory);
  padding: 32px 20px 40px;
  overflow: hidden;
}

/* TODO: 背景画像差し込み予定（お花の模様・シルクのテクスチャ） */

/* ---- FV：先方支給のSP_FV.jpgをそのまま使う版 ----
   headline/バッジ/CTAまですべて画像内に含まれているため、
   .fv__inner以下のコーディング版パーツは使わず、画像1枚を敷く。
   最下部の「治療内容・費用・主なリスクはこちら」だけは画像から除外し、
   .fv-disclosure（実テキスト・アコーディオン）で below に続ける。 */
.fv--image {
  padding: 0;
  overflow: visible;
}

.fv--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画像内のカレンダー／電話アイコンの位置に重ねる実アイコン（ピクセル解析による位置合わせ）。
   calendar_icon.png / tel_icon.png（透過PNG）を実表示し、そのままタップ領域にする。 */
/* 先方書き出しのロゴ画像。ヘッダー帯（上部クリーム色の帯）の左側に配置。
   帯の縦中央に来るよう、アイコンと同じ考え方で位置合わせしている。 */
.fv--image .fv__logo {
  position: absolute;
  left: 2.1%;
  top: 1.7%;
  width: 47%;
  height: auto;
}

.fv__hotspot {
  position: absolute;
  width: 13%;
  height: 7%;
  top: 0.85%;
}

.fv__hotspot--calendar {
  left: 72.9%;
}

.fv__hotspot--tel {
  left: 86.2%;
}

.fv__hotspot-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 先方書き出しのボタン画像（モニター応募／LINE）を、画像内の空きスペースに重ねる。
   位置はSP_FV_base.jpg（750×1427）のピクセル解析に基づく。 */
.fv__cta-overlay {
  position: absolute;
  left: 0;
  top: 74.5%;
  width: 100%;
}

.fv__cta-btn {
  display: block;
  margin-bottom: 2.5vw;
}

.fv-disclosure {
  background: var(--white);
  padding: 16px 12px;
  text-align: center;
}

.fv-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-1);
  color: var(--espresso);
  cursor: pointer;
  list-style: none;
}

.fv-disclosure summary::-webkit-details-marker {
  display: none;
}

/* アンダーラインはテキスト部分だけにかける（矢印には掛けない） */
.fv-disclosure summary .fv-disclosure-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 下向きの平たいシェブロン（線のV字）。フォント文字ではなく自作SVGなので、
   開き角度（平べったさ）は path の座標で自由に調整できる。
   開いたら180度回転して上向きにする。 */
.fv-disclosure summary::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6' width='14' height='6'%3E%3Cpath d='M1 1L8 5L15 1' stroke='%2342210B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: inline-block;
  transition: transform 0.2s ease;
}

.fv-disclosure[open] summary::after {
  transform: rotate(180deg);
}

.fv-disclosure-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 35, 29, 0.12);
  text-align: left;
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

.fv-disclosure-body span {
  display: block;
  margin: 4px 0;
}

.fv-disclosure-body strong {
  color: var(--espresso);
}

.fv-disclosure-body a {
  color: var(--gold);
  text-decoration: underline;
}

.fv__photo-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(66,33,11,0.35) 0%, rgba(66,33,11,0.85) 75%);
  z-index: 0;
}

.fv__photo-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1c1712;
  opacity: 0.6;
}

.fv__inner {
  position: relative;
  z-index: 1;
}

.fv__copy {
  text-align: center;
  margin-bottom: 28px;
}

.fv__copy-sub {
  font-family: var(--font-mincho);
  font-size: var(--fs-4);
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 8px;
}

.fv__copy-main {
  font-family: var(--font-mincho);
  font-size: var(--fs-6);
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* 院長プロフィール */

.fv__doctor {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(246, 241, 231, 0.06);
  border: 1px solid rgba(184, 150, 90, 0.4);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.fv__doctor-photo {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--espresso);
  border: 3px solid var(--gold);
}

/* <!-- 実写差し替え時: assets/doctor-photo.jpg を .fv__doctor-photo に img として使用 --> */

.fv__doctor-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fv__doctor-role {
  font-size: var(--fs-1);
  color: var(--gold);
  letter-spacing: 0.04em;
}

.fv__doctor-name {
  font-family: var(--font-mincho);
  font-size: var(--fs-5);
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
}

.fv__doctor-name small {
  display: block;
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--ivory);
  opacity: 0.8;
}

.fv__doctor-quote {
  font-size: var(--fs-2);
  color: var(--ivory);
  margin-top: 4px;
}

/* 信頼バッジ */

.fv__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.fv__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  background: rgba(184, 150, 90, 0.12);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 6px;
}

.fv__badge-main {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--gold);
}

.fv__badge-sub {
  font-size: var(--fs-1);
  color: var(--ivory);
}

/* CTAボタン */

.fv__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px 20px;
  border-radius: 999px;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.btn--primary {
  background: var(--gold);
  color: var(--espresso);
  box-shadow: 0 6px 16px rgba(184, 150, 90, 0.35);
}

.btn--primary .btn__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 400;
}

.btn--line {
  background: transparent;
  color: var(--ivory);
  border: 1.5px solid var(--ivory);
}

.btn--line .btn__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 400;
  opacity: 0.85;
}

.fv__foot-note {
  text-align: center;
  font-size: var(--fs-1);
  color: var(--ivory);
  opacity: 0.8;
}

.fv__foot-note a {
  color: var(--gold);
  text-decoration: underline;
}

/* ==========================================================================
   PC版ファーストビュー（.fv-pc）
   ------------------------------------------------------------------------
   スマホ版（.fv.fv--image）とは別に用意したPC専用のFV。1024px以上でのみ表示し
   （表示切り替えは上のPC・タブレット対応ブロックで行っている）、スマホ幅では
   .fv-pc { display:none; } で常に非表示にする。
   構成：背景（PC_FV_base.png）はセクション全体に全幅で敷き、モデル写真・
   コピー等の中身は.fv-pc__inner（最大1450px・中央寄せ）の中に収める。
   ワイド画面でも、この1450pxを超えて左右の要素が離れていかないようにする
   （超えた分は背景だけが左右に広がる）。
   コピー・院長・バッジの画像はいずれも幅1120pxの共通キャンバスで書き出されて
   いるため、表示幅はすべて同じ値（--fv-pc-content-w）に揃えている。 */
.fv-pc {
  display: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--espresso);
}

/* PC版ヘッダー。PC_FV_header.pngは装飾の帯だけ（ロゴ・電話番号は含まれて
   いない）なので、既存のロゴ画像・アイコンを実要素として重ねている */
.fv-pc__header {
  display: none;
  position: relative;
  width: 100%;
}

.fv-pc__header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.fv-pc__header-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
}

.fv-pc__header-logo {
  height: 46%;
  width: auto;
}

.fv-pc__header-right {
  display: block;
  flex: 0 0 auto;
}

.fv-pc__header-right-img {
  display: block;
  height: 80px;
  width: auto;
}

/* object-position: bottomにして、背景側の下端が常にセクションの下端と一致する
   ようにする（centerだと上下を均等にトリミングしてしまい、背景の下端がモデル
   画像の下端よりも上に来てズレて見える）。 */
.fv-pc__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* コピー・院長・バッジ・モデル写真を1枚に合成したPC_FV_img.pngと、
   その下のCTAボタンをまとめて中央寄せする。ヘッダー直下にぴったり
   付けたいので、上側の余白は0にしている。下側の余白も0にして、comboの
   下端＝.fv-pc__innerの下端＝.fv-pc（＝背景）の下端が揃うようにしている。 */
.fv-pc__inner {
  position: relative;
  z-index: 1;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

/* PC_FV_base.pngとPC_FV_img.pngが同じ縦横比で作り直されたため、下端の
   フェードはごく薄く（最後の2%のみ）に留め、せっかく増えた見える範囲を
   隠しすぎないようにする。 */
.fv-pc__combo {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 98%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 98%, transparent 100%);
}

/* CTAボタンは下に並べるのではなく、モデル画像のお腹〜腰の位置に重ねる。
   .fv-pc__innerの高さはcomboの実高さだけで決まる（ctasはabsoluteで
   フローから外れるため）ので、bottomのパーセート指定はcomboの高さ基準で
   安定して効く。 */
.fv-pc__ctas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
}

/* FV以外でこのボタン列を再利用する箇所は、通常フローに戻し上下にゆとりを持たせる */
.fv-pc__ctas--roomy {
  position: static;
  margin-top: 40px;
  margin-bottom: 40px;
}

.fv-pc__cta-btn {
  flex: 0 0 auto;
  width: min(84vw, 527px);
  display: block;
  transition: transform 0.2s ease;
}

.fv-pc__cta-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.fv-pc__cta-btn:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   第一セクション（Case01導入）
   ========================================================================== */

.case01 {
  position: relative;
  text-align: center;
  padding: 0 12px 48px;
  /* 実写のアイボリードレープ背景（sp_base_drape_BE.png）を使用。
     Case01セクション全体でドレープが見えるようにし、次のセクションへ
     切り替わる境目のごく一部だけ単色アイボリーへフェードさせる。 */
  background-color: var(--ivory);
  background-image:
    linear-gradient(to bottom, rgba(246, 241, 231, 0) 0%, rgba(246, 241, 231, 0) 90%, var(--ivory) 100%),
    url("assets/sp_base_drape_BE.png");
  background-size: 100% 100%, cover;
  background-position: center, top center;
  background-repeat: no-repeat, no-repeat;
}

/* ---- 疑問形の見出しバナー（焦茶・下端が旗のようにとがった形）----
   ユーザー側の疑問（「〜なんじゃないの？」等）を投げかける箇所を、
   このバナーで統一する。Case01タイトルも同じ形を使う。
   下端の形は clip-path で作っているので、画像を作らず何度でも複製できる。
   本文テキストは実テキストのまま（画像に焼き込まない）。
   style.cssに置いているのは、index.html（FV+Case01のみの版）でも
   lp-sections.cssを読み込まずに使えるようにするため。 */
.lp-question-banner {
  position: relative;
  margin: 32px -12px 24px;
  padding: 16px 12px 28px;
  /* べた塗りだと単調に見えるため、ごく控えめな斜めグラデーションで
     奥行きを出す（形はそのまま・装飾は増やさない） */
  background: linear-gradient(135deg, #5A3520 0%, var(--espresso) 45%, #2E1608 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--white);
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

/* セクション冒頭がこのバナーの場合、.lp-sectionの上パディング分だけ
   前セクションとの間に不自然な余白ができるため、その分を打ち消して詰める */
.lp-section > .lp-question-banner:first-child {
  margin-top: 0;
}

/* .case01セクションはpaddingが12pxなので、はみ出し幅もそれに合わせる */
.lp-question-banner--bleed24 {
  margin: 0 -12px 12px;
}

.lp-question-banner__heading {
  font-family: var(--font-mincho);
  /* 全バナー共通。どのテキストでもスマホ幅で必ず2行に収まる範囲でギリギリまで拡大 */
  font-size: clamp(var(--fs-3), 5.3vw, var(--fs-4));
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Case01オープニング用：見出しの下にCase 01の英字ロゴを置くスペース。
   先方から透過PNGが届いたら、.lp-question-banner__logo(テキスト版)を
   削除し、.lp-question-banner__logo-img の img タグに差し替える。 */
.lp-question-banner__logo {
  margin-top: 14px;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 34px;
  font-weight: 600;
  color: var(--gold);
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.lp-question-banner__logo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
}

.lp-question-banner__logo-img {
  display: block;
  margin: 6px auto 6px;
  max-width: 200px;
  height: auto;
}

/* 症例写真＋データ＋CTAをまとめて囲む白背景。外枠線・角丸なしのシンプルな四角。 */
.case01__card {
  padding: 22px 12px 26px;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  border-radius: 0;
}

.case01__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.case01__photos figure {
  margin: 0;
  position: relative;
}

.case01__photo-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: table;
  background: var(--espresso);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}

.case01__photo-overlay-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 6px;
  background: var(--espresso);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  z-index: 1;
}

.case01__photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(184, 150, 90, 0.5);
}

.case01__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 491 / 559;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(184, 150, 90, 0.5);
}

.case01__caption {
  margin-top: 14px;
  font-size: var(--fs-1);
  color: var(--espresso);
  line-height: 1.6;
}

/* 脂肪注入量／脂肪吸引量：スマホは上下2段＋間に横線、PCは横並び＋間に縦線 */
.case01__stats {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.case01__stat {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--fs-1);
  color: var(--espresso);
}

/* 2行の間の区切り線。横幅いっぱいではなく、中央に短く（全体の約1/8幅） */
.case01__stat + .case01__stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12.5%;
  height: 1px;
  background: rgba(184, 150, 90, 0.5);
}

.case01__stat-label {
  opacity: 0.7;
  white-space: nowrap;
}

.case01__stat-value {
  font-weight: 500;
}

@media (min-width: 600px) {
  .case01__stats {
    flex-direction: row;
    justify-content: center;
  }

  .case01__stat {
    padding: 4px 20px;
  }

  .case01__stat + .case01__stat::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
  }
}

.case01__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 20px;
  padding: 9px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--espresso);
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.case01__link-arrow {
  flex: none;
}

.case01__lead {
  margin-top: 32px;
}

.case01__lead-heading {
  font-family: var(--font-mincho);
  /* fs-3(18px)〜fs-4(24px)の間で画面幅に応じて可変。折り返させたくない行なので、
     どの画面幅でも1行に収まるよう既存トークンの範囲内でサイズを絞っている */
  font-size: clamp(var(--fs-3), 5.6vw, var(--fs-4));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--espresso);
  margin-bottom: 20px;
  white-space: nowrap;
}

.case01__lead-heading strong {
  color: var(--gold);
  font-weight: 700;
}

.case01__lead-text {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.85;
  line-height: 1.9;
}

/* ==========================================================================
   追従（スティッキー）フッターボタン
   ========================================================================== */

.sticky-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--espresso);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sticky-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* SP_CV_button.jpg（先方支給の2ボタン画像）をそのまま使用。
   1枚の画像を半分ずつ背景表示し、左右をそれぞれリンクにしている。
   画像を差し替える場合は background-image の参照先だけ変更すればよい。 */
.sticky-footer .cv-btn {
  flex: 1 1 50%;
  aspect-ratio: 887 / 348;
  background-image: url("assets/SP_CV_button.jpg");
  background-size: 200% 100%;
  background-repeat: no-repeat;
  display: block;
}

.sticky-footer .cv-btn--monitor {
  background-position: left top;
}

.sticky-footer .cv-btn--line {
  background-position: right top;
}

.sticky-footer .btn--primary {
  box-shadow: none;
}

/* ==========================================================================
   PC・タブレット対応
   ------------------------------------------------------------------------
   幅の基準は2種類だけに統一する：
   　・帯幅  1160px …… セクション全体／カード・グリッド・横並び写真など
   　・文章幅 680px  …… 見出し・リード文・本文・単独カードなど「読ませる」要素
   これ以外の幅（720/760/800/900/1280pxなど）は使わない。
   背景色・背景画像はセクション自体の100%（＝画面いっぱい）のまま、
   内側だけをpaddingで帯に収める。HTML構造・モバイル用スタイルは変更しない。

   注意：.lp-section／.lp-footer／.lp-h2 等は lp-sections.css で定義されており、
   lp-sections.css は本ファイルより後に読み込まれる。同じ詳細度（クラス1つ）の
   場合は「後に読み込まれた方」が勝つため、この手の上書きをstyle.css側に
   書いても無効化される。そのためlp-sections.css側で定義されているクラスの
   PC上書きは、すべてlp-sections.css側の末尾にまとめてある。
   ========================================================================== */
@media (min-width: 1024px) {
  /* ---- 文字サイズだけ少し大きく（フォント・太さは変更しない） ----
     6段階トークンの値をデスクトップ用に一律スケールアップするだけなので、
     var(--fs-*)を使っている箇所すべてに自動で反映される */
  :root {
    --fs-1: 18px;
    --fs-2: 20px;
    --fs-3: 24px;
    --fs-4: 28px;
    --fs-5: 38px;
    --fs-6: 52px;
  }

  /* CTAボタン2つ並び：スマホは縦並び（上のベース定義）、PCは横並びに戻す */
  .fv-pc__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fv-pc__cta-btn {
    width: min(36vw, 527px);
  }

  .case01 {
    padding-left: max(24px, calc((100% - 1160px) / 2));
    padding-right: max(24px, calc((100% - 1160px) / 2));
  }

  /* PC幅ではスマホ版FV（.fv.fv--image）を隠し、専用のPC版FV（.fv-pc）を表示する */
  .fv.fv--image {
    display: none;
  }

  .fv-pc,
  .fv-pc__header {
    display: block;
  }

  /* 「治療内容・費用・主なリスクはこちら」アコーディオンは幅指定がなく
     開くと文字が画面いっぱいに広がっていたため、他の本文と同じ文章幅に
     統一する。ただし白背景（.fv-disclosure）自体は画面幅いっぱいのまま
     残し、中の文字（summary・本文）だけを幅680pxに絞って中央寄せする */
  .fv-disclosure-body {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 疑問形バナーは背景色の帯（画像ではない）なので、他の章の背景と同じく
     画面幅いっぱいに広げる。親（.lp-section／.case01）の左右paddingを
     打ち消す負のmarginで、元のスマホ版と同じ「食み出しbleed」の考え方を
     PCの帯幅（可変）に合わせて再現している。
     注意：ここは100%ではなく100vwを使うこと。marginのパーセント値は
     「親の中身の幅」が基準になるため、100%だと親（.lp-section等）の
     paddingで既に1160pxに狭められた内側を基準にしてしまい、
     打ち消す量がほぼ0になってしまう（実際にこのバグでワイド画面のとき
     全幅にならなかった）。100vwならビューポート基準で常に正しく計算される。 */
  .lp-question-banner,
  .lp-question-banner--bleed24 {
    margin-left: calc(-1 * max(24px, calc((100vw - 1160px) / 2)));
    margin-right: calc(-1 * max(24px, calc((100vw - 1160px) / 2)));
  }

  /* Case01：写真＋データのカードは「文章幅」に統一 */
  .case01__card,
  .case01__lead {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 白いカード（写真〜CTAボタンまで）の余白はスマホ用のまま詰まって
     見えるため、PCでは広めに取り直す */
  .case01__card {
    padding: 40px 40px 44px;
  }

  /* 「だから、同じ「大きくなった」でも、形が違えば、意味が違うんです。」は
     スマホ用の改行のままだとPCで不自然な2行になるため、1行表示にする */
  .case01__lead-text br {
    display: none;
  }

  /* 追従（スティッキー）フッターボタンはスマホ特有のUIパターンのため、
     PCでは表示しない（常時非表示。IntersectionObserverでis-visibleが
     付いても、非表示のままになる） */
  .sticky-footer {
    display: none !important;
  }

  /* 見出しの太さを一段階落とす（600→500、700→600） */
  .lp-question-banner__heading {
    font-weight: 500;
  }
  .case01__lead-heading {
    font-weight: 600;
  }

  /* lp-sections.css側で定義されているクラスのPC上書きは、
     lp-sections.css末尾にまとめてある（本ブロック冒頭の注意書き参照） */
}