@charset "UTF-8";
/* =========================================================
   PilaRizm - ピラリズム -  /  style.css
   Base : Mobile first → @media (min-width:768px) / (min-width:1024px)
   ========================================================= */

/* ---------- Design Token ---------- */
:root{
  --pink:        #e4007f;
  --pink-dark:   #b8006a;
  --pink-light:  #fce9f2;
  --pink-pale:   #fdf4f8;
  --ink:         #2b2b2b;
  --ink-light:   #5c5c5c;
  --gray:        #8d8d8d;
  --line-c:      #e6e0da;
  --ivory:       #fbf7f2;
  --ivory-deep:  #f5efe8;
  --white:       #ffffff;
  --line-green:  #06c755;

  /* Changeセクションの色分け（カラダ＝ピンク／ココロ＝モーヴ） */
  --mind:        #8a76a5;
  --mind-dark:   #6b5788;
  --mind-light:  #ece5f3;
  --mind-pale:   #f8f5fb;

  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ff-en: "Cormorant Garamond", serif;
  --ff-hand: "Yomogi", "Klee One", "Zen Old Mincho", sans-serif; /* カジュアルな手書き風 */

  --header-h: 60px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(90,60,70,.08);
  --shadow-lg: 0 18px 50px rgba(90,60,70,.13);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-base);
  font-weight:400;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.03em;
  color:var(--ink);
  background:var(--white);
  overflow-wrap:break-word;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:opacity .3s var(--ease), color .3s var(--ease); }
a:hover{ opacity:.7; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

/* ---------- Layout ---------- */
.container{ width:min(100% - 40px, 1120px); margin-inline:auto; }
.container--narrow{ width:min(100% - 40px, 800px); }
.sec{ padding:64px 0; }
.sec--ivory{ background:var(--ivory); }
.sec--pale{ background:var(--pink-pale); }
.sec--dark{ background:var(--ink); color:var(--white); }
.sp-only{ display:inline; }
@media (min-width:768px){
  body{ font-size:16px; }
  :root{ --header-h:76px; }
  .sec{ padding:100px 0; }
  .sp-only{ display:none; }
}

/* ---------- Section Head ---------- */
.sec__head{ text-align:center; margin-bottom:40px; }
.sec__en{
  font-family:var(--ff-en); font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--pink); margin-bottom:6px;
}
.sec__label{
  display:inline-block; font-size:12px; letter-spacing:.12em;
  background:var(--pink-light); color:var(--pink-dark);
  padding:4px 18px; border-radius:99px; margin-bottom:14px;
}
.sec__title{
  font-family:var(--ff-mincho); font-weight:500;
  font-size:clamp(22px, 6vw, 34px); line-height:1.5; letter-spacing:.04em;
}
.sec__title--xl{ font-size:clamp(26px, 7.6vw, 46px); }
.sec__lead{ margin-top:16px; font-size:14px; color:var(--ink-light); line-height:1.9; }
.sec__head--light .sec__title,
.sec__head--light .sec__lead{ color:var(--white); }
.sec__btns{ margin-top:40px; text-align:center; }
.mark{
  color:var(--pink);
  background:linear-gradient(transparent 68%, rgba(228,0,127,.14) 68%);
}
.cross{ font-family:var(--ff-en); color:var(--pink); font-style:italic; padding:0 .1em; }
@media (min-width:768px){
  .sec__head{ margin-bottom:56px; }
  .sec__lead{ font-size:16px; }
}

/* ---------- 画像プレースホルダー（実画像に差し替え可） ---------- */
.ph{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    linear-gradient(135deg, #f7ece4 0%, #fce9f1 55%, #f3e8ee 100%);
  border-radius:var(--radius);
  color:#c9aeba;
  font-family:var(--ff-en); font-size:11px; letter-spacing:.18em; text-align:center;
}
.ph::after{ content:attr(data-label); padding:0 12px; }
.ph--hero{ aspect-ratio:4/5; border-radius:200px 200px var(--radius) var(--radius); }
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--1x1{ aspect-ratio:1/1; }
.ph--map{ aspect-ratio:16/10; }
.ph--icon{
  width:52px; aspect-ratio:1/1; border-radius:50%; margin-inline:auto; font-size:9px;
  background:linear-gradient(140deg,#fce9f1,#f6ece5);
}

/* 実アイコン（Worry / Support） */
.icon{
  width:60px; height:60px; margin-inline:auto; object-fit:contain;
}
@media (min-width:768px){
  .icon{ width:72px; height:72px; }
}

/* =========================================================
   Button
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:99px;
  font-size:14px; font-weight:700; letter-spacing:.05em; line-height:1.4;
  text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ opacity:1; transform:translateY(-2px); }
.btn--line{
  background:linear-gradient(135deg, var(--pink) 0%, #ff4fa3 100%);
  color:var(--white); box-shadow:0 8px 22px rgba(228,0,127,.28);
}
.btn--line:hover{ box-shadow:0 12px 28px rgba(228,0,127,.36); }
.btn--ghost{
  background:var(--white); color:var(--pink);
  border:1.5px solid var(--pink);
}
.btn--ghost:hover{ background:var(--pink-pale); }
.btn--lg{ width:100%; max-width:420px; padding:18px 24px; font-size:16px; }
.btn__icon{
  flex-shrink:0; display:grid; place-items:center;
  width:34px; height:22px; border-radius:6px;
  background:var(--line-green); color:#fff;
  font-family:var(--ff-en); font-size:11px; font-weight:700; letter-spacing:.06em;
}
.btn--ghost .btn__icon{ display:none; }
.btn__body{ display:flex; flex-direction:column; align-items:flex-start; }
.btn__main{ font-size:15px; }
.btn__sub{ font-size:11px; font-weight:400; opacity:.9; letter-spacing:.02em; }
@media (min-width:768px){
  .btn--lg{ width:auto; min-width:360px; }
  .btn__main{ font-size:17px; }
  .btn__sub{ font-size:12px; }
}

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  transition:box-shadow .3s var(--ease);
}
.header.is-scrolled{ box-shadow:0 2px 18px rgba(0,0,0,.06); }
.header__inner{
  width:min(100% - 32px, 1240px); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:flex; align-items:center; gap:9px; line-height:1.2; }
.logo__mark{ width:34px; height:34px; flex-shrink:0; }
.logo__text{ display:block; }
.logo__main{
  display:block; font-family:var(--ff-en); font-size:24px; font-weight:600;
  letter-spacing:.04em; color:var(--ink);
}
.logo__sub{
  display:block; font-size:9px; letter-spacing:.18em; color:var(--gray);
}
.header__cta{ display:none; }
.gnav__cta{ justify-self:center; }

/* --- SP nav：画面全体を覆う全画面メニュー --- */
/* ロゴと閉じるボタンはメニューの上に残す */
.logo, .hamburger{ position:relative; z-index:2; }
.gnav{
  /* ヘッダーが backdrop-filter を持つため、fixed の基準がヘッダーになる。
     inset:0 では全画面にならないので、幅と高さを明示する */
  position:fixed; top:0; left:0; z-index:1;
  width:100vw; height:100vh; height:100dvh;
  background:var(--white);
  /* ヘッダーぶんを上に空けて、残りの領域に内容を中央配置する */
  padding:calc(var(--header-h) + 12px) 24px 28px;
  display:grid; place-content:center; gap:20px;
  overflow-y:auto;                      /* 端末が極端に低いときの保険 */
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.gnav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.gnav__list{ width:min(100vw - 48px, 420px); }
.gnav__list li + li{ border-top:1px solid var(--line-c); }
.gnav__list a{
  display:block; padding:15px 4px; font-size:16px; letter-spacing:.08em;
  text-align:center;
}
.hamburger{
  width:40px; height:40px; position:relative; flex-shrink:0;
}
.hamburger span{
  position:absolute; left:9px; width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger.is-active span:nth-child(1){ transform:translateY(6px) rotate(38deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-38deg); }

@media (min-width:1024px){
  .hamburger{ display:none; }
  .header__cta{ display:inline-flex; padding:12px 22px; font-size:13px; }
  .gnav{
    position:static; inset:auto; z-index:auto; width:auto; height:auto;
    padding:0; background:none; overflow:visible;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    display:flex; flex-direction:row; place-content:normal; gap:0;
    margin-left:auto; transition:none;
  }
  .gnav__list{ display:flex; gap:16px; width:auto; max-width:none; }
  .gnav__list li + li{ border:0; }
  .gnav__list a{ padding:0; font-size:13px; letter-spacing:.04em; text-align:left; }
  .gnav__list a:hover{ color:var(--pink); opacity:1; }
  .gnav__cta{ display:none; }
}
@media (min-width:1280px){
  .gnav__list{ gap:26px; }
  .gnav__list a{ font-size:14px; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; padding:calc(var(--header-h) + 28px) 0 40px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(120% 70% at 100% 0%, var(--pink-pale) 0%, transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
}
/* 背景写真：動画が用意できるまでの表示。動画が再生されると自動的に消えます */
.hero__photo{
  position:absolute; inset:0;
  /* WebP版。JPEGより 67%（149KB）軽い。hero-bg.jpg は差し替え元として残してあります */
  background:url("../images/hero-bg.webp") center/cover no-repeat;
  transition:opacity 1s var(--ease);
}
.hero__bg.has-video .hero__photo{ opacity:0; }
/* 背景動画：ファイルが無ければ何も表示されず、背景写真がそのまま見えます */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease); /* 再生できたときだけ表示（JSで is-ready 付与） */
}
/* 濃さの調整は .hero__veil のグラデーションで行う（動画自体は不透明のまま） */
.hero__video.is-ready{ opacity:1; }
/* 白ベール：コピーが乗る左側は濃く、右へ行くほど薄くして動画をクリアに見せる */
.hero__veil{
  position:absolute; inset:0;
  /* スマホは全面にコピーが乗るため、ほぼ均一に濃くかける */
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.86) 60%, rgba(255,255,255,.92) 100%);
}
@media (min-width:768px){
  .hero__veil{
    background:linear-gradient(95deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 32%,
      rgba(255,255,255,.62) 55%,
      rgba(255,255,255,.22) 78%,
      rgba(255,255,255,0) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero__video{ display:none; }
}
.hero__inner{ width:min(100% - 40px, 1120px); margin-inline:auto; }
.hero__eyebrow{
  font-size:11px; letter-spacing:.18em; color:var(--pink); margin-bottom:14px;
}
.hero__title{
  font-family:var(--ff-mincho); font-weight:500;
  /* 1024〜1279pxはヒーローが2カラムになり文字が入る幅が狭いため上限を50pxに抑える */
  font-size:clamp(29px, 8vw, 50px); line-height:1.45; letter-spacing:.03em;
}
.hero__lead{ margin-top:20px; font-size:14px; line-height:2; color:var(--ink-light); }
.hero__btns{ margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero__note{ margin-top:14px; font-size:11px; color:var(--gray); text-align:center; line-height:1.7; }
/* 右側は背景動画を見せる領域。スマホでは高さを持たせない */
.hero__visual{ display:none; position:relative; }
/* 手書き風のひとこと（縦書き・ペン書き風フォント）
   ※ writing-mode:vertical-rl の中では flex の row/column 方向が入れ替わるため、
     flexは使わず、ブロック要素の自然な流れ（右→左）で2行を並べる */
.hero__handwrite{
  position:absolute; right:6px; bottom:14px;
  writing-mode:vertical-rl;
  font-family:var(--ff-hand); font-weight:400;
  font-size:17px; line-height:1.5; letter-spacing:.12em;
  color:var(--pink-dark);
  /* 動画の上でも読めるよう、白いにじみを重ねる（枠は使わない） */
  text-shadow:
    0 0 10px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.85),
    0 1px 2px rgba(255,255,255,1);
}
/* 装飾は付けず、書体と2色の濃淡だけで手書きらしさを出す */
.hero__handwrite-line{
  display:block;
  margin-left:4px; /* 縦書きでは margin-left が行間になる */
}
.hero__handwrite-line--accent{
  color:var(--pink);
}
/* コピー側（左カラム）に収める小さめのバッジ。文字数に応じて幅が伸縮する */
.hero__badges{
  margin-top:22px; max-width:520px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.hero__badges li{
  background:rgba(255,255,255,.85); border:1px solid var(--line-c); border-radius:8px;
  padding:7px 11px; font-size:11.5px; letter-spacing:.02em;
  color:var(--ink-light); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.hero__badges img{ width:18px; height:18px; object-fit:contain; flex-shrink:0; }

@media (min-width:768px){
  .hero__lead{ font-size:16px; }
  .hero__btns{ flex-direction:row; align-items:stretch; justify-content:flex-start; }
  .hero__btns .btn--lg{ min-width:340px; max-width:none; width:fit-content; }
  .hero__note{ text-align:left; }
  .hero__badges{ max-width:none; gap:7px; }
}
@media (min-width:1024px){
  .hero{ padding:calc(var(--header-h) + 60px) 0 60px; }
  .hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .hero__visual{ display:block; min-height:440px; }
  .hero__handwrite{ font-size:21px; right:14px; bottom:auto; top:50%; transform:translateY(-50%); }
}
@media (min-width:1280px){
  .hero__title{ font-size:56px; }
}

/* =========================================================
   悩み
   ========================================================= */
.worry-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.worry-card{
  background:var(--white); border-radius:var(--radius); padding:22px 14px;
  text-align:center; box-shadow:var(--shadow);
}
.worry-card h3{
  margin-top:12px; font-size:14px; font-weight:700; letter-spacing:.04em;
}
.worry-card p{ margin-top:8px; font-size:12px; line-height:1.8; color:var(--ink-light); }
.worry-msg{
  margin-top:36px; text-align:center; font-family:var(--ff-mincho);
  font-size:clamp(16px,4.6vw,22px); line-height:1.9; color:var(--pink-dark);
}
.worry-msg b{ color:var(--ink); }
@media (min-width:768px){
  .worry-list{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .worry-card{ padding:32px 20px; }
  .worry-card h3{ font-size:17px; }
  .worry-card p{ font-size:13px; }
}

/* =========================================================
   Reason（ダークセクション）
   ========================================================= */
.reason{ text-align:center; font-size:14px; line-height:2.1; color:rgba(255,255,255,.86); }
.reason p + p{ margin-top:22px; }
.reason__strong{
  padding:22px 18px; border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.reason b{ color:#ff8ec6; }
@media (min-width:768px){ .reason{ font-size:16px; } }

/* =========================================================
   Method
   ========================================================= */
.method-list{ display:grid; gap:20px; }
.method-card{
  position:relative; background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.method-card__num{
  position:absolute; top:12px; left:12px; z-index:2;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--pink); color:var(--white);
  font-family:var(--ff-en); font-size:16px; font-weight:600;
}
.method-card__num--plus{
  background:var(--ink); font-size:14px; letter-spacing:-.02em;
}
/* ＋α（オプション）のカードは通常ステップと区別する */
.method-card--option{
  border:2px dashed var(--pink-light); box-shadow:none; background:var(--pink-pale);
}
.method-card--option .method-card__body h3 span{ color:var(--ink-light); }
.method-card .ph{ border-radius:0; }
.method-card__img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.method-card__body{ padding:22px 20px 26px; }
.method-card__body h3{
  font-family:var(--ff-mincho); font-size:22px; font-weight:500; letter-spacing:.06em;
}
.method-card__body h3 span{
  display:block; font-family:var(--ff-base); font-size:12px; font-weight:400;
  letter-spacing:.06em; color:var(--pink); margin-top:4px;
}
.method-card__body p{ margin-top:12px; font-size:13.5px; line-height:1.95; color:var(--ink-light); }
.method-card__body b{ color:var(--ink); }
.method-flow{
  margin-top:36px; display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap;
}
.method-flow span{
  font-family:var(--ff-mincho); font-size:clamp(15px,4.4vw,20px);
  padding:8px 18px; border-radius:99px; background:var(--pink-light); color:var(--pink-dark);
}
.method-flow i{ width:22px; height:1px; background:var(--pink); position:relative; }
.method-flow i::after{
  content:""; position:absolute; right:0; top:-3px;
  border-left:6px solid var(--pink);
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.method-note{ margin-top:16px; text-align:center; font-size:13px; color:var(--ink-light); }
@media (min-width:768px){
  .method-list{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .method-card__body p{ font-size:14px; }
}
@media (min-width:1024px){
  .method-list{ grid-template-columns:repeat(4,1fr); gap:20px; }
  .method-card__body{ padding:20px 18px 24px; }
  .method-card__body h3{ font-size:20px; }
  .method-card__body p{ font-size:13px; }
}

/* =========================================================
   オープン告知バンド（固定表示）
   ========================================================= */
.notice-band{
  background:var(--pink);
  color:var(--white);
  padding:12px 16px;
}
.notice-band__inner{
  display:flex; flex-wrap:wrap;          /* 狭い画面ではピルの下に文が回り込む */
  align-items:center; justify-content:center;
  gap:7px 14px; text-align:center;
}
.notice-band__pill{
  flex:none;
  background:var(--white); color:var(--pink);
  font-size:12px; font-weight:700; letter-spacing:.06em; line-height:1.7;
  border-radius:999px; padding:2px 15px; white-space:nowrap;
}
.notice-band__text{
  font-size:12px; font-weight:500; letter-spacing:.06em; line-height:1.7;
}

@media (min-width:768px){
  .notice-band{ padding:14px 24px; }
  .notice-band__pill,
  .notice-band__text{ font-size:13px; letter-spacing:.08em; }
  .notice-band__inner{ gap:8px 18px; }
}

/* =========================================================
   中間CTAバンド
   ========================================================= */
.cta-band{
  background:linear-gradient(135deg, #fff5fa 0%, var(--ivory-deep) 100%);
  padding:48px 0; text-align:center;
}
.cta-band__lead{
  font-family:var(--ff-mincho); font-size:clamp(20px,5.6vw,28px); color:var(--pink-dark);
}
.cta-band__text{ margin:12px 0 24px; font-size:14px; line-height:1.9; }
.cta-band__text b{ color:var(--pink); font-size:1.15em; }

/* =========================================================
   Change
   ========================================================= */
.change-grid{ display:grid; gap:20px; }

/* カラダ／ココロで配色を切り替える。--accent 系を差し替えるだけで色が変わる */
.change-block{
  --accent:var(--pink);
  --accent-dark:var(--pink-dark);
  --accent-light:var(--pink-light);
  --accent-pale:var(--pink-pale);
  background:var(--accent-pale);
  border:1px solid var(--accent-light);
  border-radius:var(--radius);
  padding:24px 16px 26px;
}
.change-block--mind{
  --accent:var(--mind);
  --accent-dark:var(--mind-dark);
  --accent-light:var(--mind-light);
  --accent-pale:var(--mind-pale);
}
.change-block__title{
  position:relative; text-align:center; font-family:var(--ff-mincho);
  font-size:20px; font-weight:500; letter-spacing:.08em;
  padding-bottom:14px; margin-bottom:20px; color:var(--accent-dark);
}
.change-block__title span{
  font-family:var(--ff-en); font-style:italic; font-size:15px; color:var(--accent); margin-left:8px;
}
/* 見出し下の色線 */
.change-block__title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:44px; height:2px; border-radius:2px; background:var(--accent);
}
.change-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.change-items li{
  background:var(--white); border:1px solid var(--accent-light);
  border-radius:var(--radius); padding:18px 12px; text-align:center;
}
.change-items h4{ margin-top:10px; font-size:13.5px; font-weight:700; color:var(--accent-dark); }
.change-items p{ margin-top:6px; font-size:11.5px; line-height:1.75; color:var(--ink-light); }
/* 変化セクションのアイコンは少し小さめ（1枠に4つ並ぶため） */
.change-items .icon{ width:52px; height:52px; }
@media (min-width:768px){
  .change-items .icon{ width:60px; height:60px; }
}
@media (min-width:768px){
  .change-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .change-block{ padding:32px 26px 34px; }
  .change-items{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .change-items li{ padding:24px 16px; }
  .change-items h4{ font-size:15px; }
  .change-items p{ font-size:12.5px; }
}

/* Before After */
.future{
  margin-top:44px; background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.future__img{
  border-radius:0; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 30%;
}
.future__body{ padding:26px 20px 30px; }
.future__label{
  font-family:var(--ff-en); letter-spacing:.16em; color:var(--pink); font-size:13px; margin-bottom:14px;
}
.future__list li{ padding:14px 0; border-bottom:1px dashed var(--line-c); }
.future__list li:last-child{ border-bottom:0; }
.future__list span{ display:block; font-size:13.5px; line-height:1.7; }
.future__list .before{ color:var(--gray); position:relative; padding-left:1.4em; }
.future__list .before::before{ content:"×"; position:absolute; left:0; }
.future__list .after{
  margin-top:6px; color:var(--ink); font-weight:700; position:relative; padding-left:1.4em;
}
.future__list .after::before{ content:"○"; position:absolute; left:0; color:var(--pink); }
@media (min-width:768px){
  .future{ display:grid; grid-template-columns:1fr 1.4fr; align-items:stretch; }
  .future__img{ height:100%; aspect-ratio:auto; }
  .future__body{ padding:36px 40px; }
  .future__list span{ font-size:15px; }
}

/* =========================================================
   Compare
   ========================================================= */
.compare{ display:grid; gap:16px; }
.compare__col{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--white); }
.compare__col h3{
  padding:14px; text-align:center; font-size:16px; letter-spacing:.08em; font-weight:700;
}
.compare__col--other h3{ background:#eceae7; color:var(--ink-light); }
.compare__col--ours h3{ background:var(--pink); color:var(--white); }
.compare__col ul{ padding:18px 20px 22px; }
.compare__col li{
  position:relative; padding:10px 0 10px 26px; font-size:13.5px; line-height:1.8;
  border-bottom:1px dashed var(--line-c);
}
.compare__col li:last-child{ border-bottom:0; }
.compare__col li::before{ position:absolute; left:0; top:10px; font-weight:700; }
.compare__col--other li{ color:var(--gray); }
.compare__col--other li::before{ content:"×"; color:#b9b3ad; }
.compare__col--ours li::before{ content:"✓"; color:var(--pink); }
.compare__col--ours b{ color:var(--pink); }
.compare__msg{
  margin-top:32px; text-align:center; font-family:var(--ff-mincho);
  font-size:clamp(16px,4.6vw,24px); line-height:1.9;
}
@media (min-width:768px){
  .compare{ grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  .compare__col--ours{ box-shadow:var(--shadow-lg); }
  .compare__col li{ font-size:14.5px; }
}

/* =========================================================
   Coach
   ========================================================= */
.coach{ display:grid; gap:26px; }
.coach__visual{ position:relative; }
.coach__photo{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  /* 縦長の写真でも顔が中心に入るよう、上寄りでトリミングする */
  object-position:center 26%;
  border-radius:var(--radius) var(--radius) 120px 120px;
  /* 画像が未配置のときも枠が崩れないよう下地を敷く */
  background:linear-gradient(135deg,#f7ece4,#fce9f1);
}
.coach__role{
  font-family:var(--ff-en); font-size:12px; letter-spacing:.16em; color:var(--pink);
}
.coach__name{
  margin-top:2px; font-family:var(--ff-en); font-size:44px; font-weight:600;
  letter-spacing:.06em; line-height:1.1;
}
.coach__name span{
  display:inline-block; margin-left:12px; font-family:var(--ff-base);
  font-size:12px; letter-spacing:.2em; color:var(--gray); vertical-align:middle;
}
.coach__message{ margin-top:20px; }
.coach__message p{ font-size:13.5px; line-height:2.05; color:var(--ink-light); }
.coach__message p + p{ margin-top:14px; }
.coach__message b{ color:var(--ink); }
.coach__lead{
  font-family:var(--ff-mincho); font-size:clamp(18px,4.8vw,24px) !important;
  line-height:1.7 !important; color:var(--ink) !important; margin-bottom:16px;
}
.cert{
  margin-top:26px; background:var(--white); border:1px solid var(--line-c);
  border-radius:var(--radius); padding:22px 20px;
}
.sec--ivory .cert{ background:var(--white); }
.cert__title{
  font-family:var(--ff-mincho); font-size:16px; font-weight:500; letter-spacing:.1em;
  text-align:center; padding-bottom:12px; border-bottom:1px solid var(--line-c);
}
.cert__group{ margin-top:16px; }
.cert__label{
  font-size:11px; letter-spacing:.08em; color:var(--pink-dark); font-weight:700; margin-bottom:8px;
}
.cert__group ul{ display:flex; flex-wrap:wrap; gap:6px; }
.cert__group li{
  font-size:12px; line-height:1.5; letter-spacing:.02em;
  background:var(--pink-pale); border:1px solid var(--pink-light);
  border-radius:99px; padding:5px 14px;
}
.coach__btn{ margin-top:24px; width:100%; }
@media (min-width:768px){
  .coach{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:48px; align-items:start; }
  .coach__message p{ font-size:14.5px; }
  .cert{ padding:26px 30px; }
  .cert__group{ display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:start; }
  .cert__label{ margin-bottom:0; padding-top:6px; }
  .coach__btn{ width:auto; }
}

/* =========================================================
   「いつか」はこない
   ========================================================= */
.someday{
  position:relative; overflow:hidden; padding:64px 0;
  background:var(--ink); color:var(--white); text-align:center;
}
.someday__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(228,0,127,.32) 0%, transparent 70%),
    radial-gradient(60% 50% at 90% 100%, rgba(228,0,127,.18) 0%, transparent 70%);
}
.someday > .container{ position:relative; z-index:1; }
.someday__en{
  font-family:var(--ff-en); font-style:italic; font-size:13px;
  letter-spacing:.2em; color:#ff8ec6;
}
.someday__title{
  margin-top:10px; font-family:var(--ff-mincho); font-weight:500;
  font-size:clamp(26px,7.6vw,46px); line-height:1.5; letter-spacing:.03em;
}
.mark-w{ position:relative; display:inline-block; color:#ff8ec6; }
.mark-w::after{
  content:""; position:absolute; left:0; right:0; bottom:.12em; height:2px;
  background:var(--pink);
}
.someday__lead{
  margin-top:22px; font-size:14px; line-height:2.1; color:rgba(255,255,255,.82);
}
.someday__cards{ margin-top:34px; display:grid; gap:14px; text-align:left; }
.someday-card{
  border-radius:var(--radius); padding:22px 20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}
.someday-card__label{
  font-size:13px; font-weight:700; letter-spacing:.04em; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.16); margin-bottom:12px;
}
.someday-card li{
  position:relative; padding:7px 0 7px 24px; font-size:13px; line-height:1.8;
}
.someday-card li::before{ position:absolute; left:0; top:7px; font-weight:700; }
.someday-card--no{ color:rgba(255,255,255,.55); }
.someday-card--no .someday-card__label{ color:rgba(255,255,255,.7); }
.someday-card--no li::before{ content:"×"; }
.someday-card--yes{
  background:rgba(228,0,127,.16); border-color:rgba(255,142,198,.5);
  box-shadow:0 10px 30px rgba(228,0,127,.18);
}
.someday-card--yes .someday-card__label{ color:#ff8ec6; }
.someday-card--yes li::before{ content:"○"; color:#ff8ec6; }
.someday__msg{
  margin-top:32px; font-family:var(--ff-mincho);
  font-size:clamp(16px,4.6vw,22px); line-height:1.9;
}
.someday__msg b{ color:#ff8ec6; }
.someday__btns{ margin-top:26px; }
.someday__note{ margin-top:14px; font-size:11.5px; color:rgba(255,255,255,.55); }
@media (min-width:768px){
  .someday{ padding:100px 0; }
  .someday__lead{ font-size:16px; }
  .someday__cards{ grid-template-columns:1fr 1fr; gap:20px; }
  .someday-card{ padding:28px 26px; }
  .someday-card li{ font-size:14px; }
}

/* =========================================================
   Price
   ========================================================= */
/* 体験 */
.trial{
  background:var(--white); border:2px solid var(--pink); border-radius:var(--radius);
  padding:26px 20px; text-align:center; box-shadow:var(--shadow-lg);
}
.trial__label{
  display:inline-block; background:var(--pink); color:#fff;
  font-size:11px; letter-spacing:.1em; padding:4px 16px; border-radius:99px;
}
.trial__title{ margin-top:14px; font-family:var(--ff-mincho); font-size:24px; font-weight:500; }
.trial__text{ margin-top:10px; font-size:13px; line-height:1.9; color:var(--ink-light); }
.trial__text small{ display:inline-block; margin-top:6px; font-size:11.5px; color:var(--gray); }
.trial__price{ margin-top:20px; }
.trial__through{ font-size:12px; color:var(--gray); text-decoration:line-through; }
.trial__num{
  font-family:var(--ff-en); font-size:56px; font-weight:600; line-height:1.1; color:var(--pink);
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.trial__num span{ font-size:28px; }
.trial__num small{ font-family:var(--ff-base); font-size:12px; color:var(--ink-light); margin-left:4px; }
.trial__price .btn{ margin-top:14px; }
@media (min-width:768px){
  .trial{ display:flex; align-items:center; justify-content:space-between; gap:40px; text-align:left; padding:36px 44px; }
  .trial__price{ margin-top:0; text-align:center; flex-shrink:0; }
  .trial__num{ justify-content:center; }
}

.price-heading{
  margin:56px 0 6px; text-align:center; font-family:var(--ff-mincho);
  font-size:clamp(19px,5vw,26px); font-weight:500; letter-spacing:.06em;
}
.price-sub{ text-align:center; font-size:13px; color:var(--ink-light); margin-bottom:24px; }

.plan-grid{ display:grid; gap:16px; }
.plan-card{
  position:relative; background:var(--white); border:1px solid var(--line-c);
  border-radius:var(--radius); padding:26px 22px; text-align:center;
}
.plan-card--rec{
  border:2px solid var(--pink); box-shadow:var(--shadow-lg); background:var(--pink-pale);
}
.plan-card__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--pink); color:#fff; font-size:11px; letter-spacing:.08em;
  padding:4px 18px; border-radius:99px; white-space:nowrap;
}
.plan-card__name{ font-family:var(--ff-mincho); font-size:26px; font-weight:500; letter-spacing:.06em; }
.plan-card__freq{
  display:inline-block; margin-top:8px; font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--pink-dark); background:var(--pink-light); border-radius:99px; padding:3px 16px;
}
.plan-card__for{ margin-top:10px; font-size:12px; color:var(--ink-light); }
.plan-card__price{
  margin-top:14px; font-family:var(--ff-en); font-size:40px; font-weight:600; color:var(--pink); line-height:1.2;
}
.plan-card__price small{ font-family:var(--ff-base); font-size:12px; color:var(--ink-light); font-weight:400; margin-left:2px; }
.plan-card__unit{
  margin-top:4px; font-size:12px; color:var(--ink-light);
  padding-bottom:14px; border-bottom:1px dashed var(--line-c);
}
.plan-card__list{ margin-top:14px; text-align:left; display:grid; gap:6px; }
.plan-card__list li{ position:relative; padding-left:20px; font-size:12.5px; line-height:1.7; }
.plan-card__list li::before{ content:"✓"; position:absolute; left:0; color:var(--pink); font-weight:700; }
.price-single{
  margin-top:22px; font-size:13px; color:var(--ink-light);
  background:var(--white); border-radius:var(--radius); padding:20px 18px;
}
.price-single__title{
  text-align:center; font-family:var(--ff-mincho); font-size:16px;
  letter-spacing:.06em; color:var(--ink); margin-bottom:12px;
}
.price-single__list{ display:grid; gap:2px; max-width:420px; margin-inline:auto; }
.price-single__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px dashed var(--line-c);
}
.price-single__list li:last-child{ border-bottom:0; }
.price-single__list em{
  font-style:normal; font-size:10.5px; letter-spacing:.04em;
  background:var(--pink-light); color:var(--pink-dark);
  border-radius:99px; padding:2px 8px; margin-left:8px; white-space:nowrap;
}
.price-single b{ color:var(--pink); font-size:1.15em; white-space:nowrap; }
/* 注記は価格リストと同じ幅の列に収めて、左端を揃える */
.price-single small{
  display:block; max-width:420px; margin:12px auto 0;
  font-size:11.5px; line-height:1.7; color:var(--gray);
}
@media (min-width:768px){
  /* align-items は既定の stretch のままにして3枚の高さを揃える */
  .plan-grid{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .plan-card--rec{ transform:translateY(-8px); }
}

/* ダイエットプラン */
.diet{
  margin-top:56px; background:var(--ink); color:var(--white);
  border-radius:var(--radius); padding:32px 20px; overflow:hidden;
}
.diet__label{
  display:inline-block; background:var(--pink); font-size:11px; letter-spacing:.1em;
  padding:4px 16px; border-radius:99px;
}
.diet__title{ margin-top:14px; font-family:var(--ff-mincho); font-size:clamp(21px,5.6vw,30px); font-weight:500; }
.diet__text{ margin-top:12px; font-size:13.5px; line-height:1.95; color:rgba(255,255,255,.82); }
.diet__text b{ color:#ff8ec6; }
.diet-table{ margin-top:24px; font-size:12.5px; background:rgba(255,255,255,.05); border-radius:10px; overflow:hidden; }
.diet-table th,.diet-table td{
  padding:12px 8px; text-align:center; border-bottom:1px solid rgba(255,255,255,.12);
}
.diet-table th{ background:rgba(255,255,255,.08); font-weight:500; letter-spacing:.04em; font-size:11.5px; }
.diet-table tbody tr:last-child td{ border-bottom:0; }
.diet-table .num{ font-family:var(--ff-en); font-size:19px; font-weight:600; color:#ff8ec6; white-space:nowrap; }
.diet-table .course{
  display:block; font-family:var(--ff-mincho); font-size:16px; letter-spacing:.06em; color:#fff;
}
.diet-table td small{
  display:block; margin-top:4px; font-size:10.5px; line-height:1.5;
  color:rgba(255,255,255,.6); letter-spacing:0;
}
.diet-table .is-rec{ background:rgba(228,0,127,.16); }
.diet-table .tag{
  display:block; font-family:var(--ff-base); font-size:10px; color:#fff;
  background:var(--pink); border-radius:99px; padding:1px 8px; margin-top:4px;
  width:fit-content; margin-inline:auto; letter-spacing:.06em;
}
.diet__note{ margin-top:16px; font-size:11.5px; line-height:1.8; color:rgba(255,255,255,.6); }
@media (min-width:768px){
  .diet{ padding:48px 56px; }
  .diet-table{ font-size:14px; }
  .diet-table th,.diet-table td{ padding:16px 12px; }
  .diet-table .num{ font-size:24px; }
}

/* 初期費用0円（料金セクション冒頭の主役ブロック） */
.zero-fee{
  position:relative; margin-bottom:40px; text-align:center;
  background:var(--white); border:2px solid var(--pink); border-radius:var(--radius);
  padding:30px 20px 26px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.zero-fee__label{
  display:inline-block; font-size:11px; letter-spacing:.1em;
  background:var(--pink-light); color:var(--pink-dark);
  padding:5px 18px; border-radius:99px;
}
.zero-fee__title{
  margin-top:16px; font-family:var(--ff-mincho); font-weight:500;
  font-size:clamp(20px,5.6vw,32px); line-height:1.6; letter-spacing:.03em;
}
.zero-fee__zero{
  font-family:var(--ff-en); font-size:1.7em; font-weight:600; color:var(--pink);
  letter-spacing:.02em; padding:0 .06em;
}
.zero-fee__list{
  margin:22px 0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.zero-fee__list li{
  background:var(--pink-pale); border:2px solid var(--pink-light); border-radius:12px;
  padding:14px 4px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.zero-fee__name{ font-size:11.5px; letter-spacing:.02em; color:var(--ink-light); }
.zero-fee__num{
  font-family:var(--ff-en); font-size:34px; font-weight:600; line-height:1.1; color:var(--pink);
}
.zero-fee__num small{ font-family:var(--ff-base); font-size:13px; margin-left:1px; }
.zero-fee__text{ font-size:13px; line-height:1.95; color:var(--ink-light); }
.zero-fee__text b{ color:var(--pink); }
/* 「一般的なスタジオの話」と「PilaRizmの答え」を線で区切る */
.zero-fee__text--strong{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--pink-light);
  color:var(--ink); font-weight:500;
}
.zero-fee__note{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-c);
  font-size:12px; line-height:1.8; color:var(--gray);
}
@media (min-width:768px){
  .zero-fee{ padding:40px 44px 34px; margin-bottom:56px; }
  .zero-fee__list{ max-width:640px; margin-inline:auto; gap:16px; }
  .zero-fee__list li{ padding:18px 8px; }
  .zero-fee__name{ font-size:13px; }
  .zero-fee__num{ font-size:44px; }
  .zero-fee__text{ font-size:14.5px; }
}


/* =========================================================
   Voice
   ========================================================= */
/* 自動スライド（1枚→2枚→3枚表示） */
.voice-slider{
  --per-view:1; --gap:16px; position:relative;
  /* 縦スクロールはページに渡し、横方向はスワイプ操作として受け取る */
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
}
.voice-slider__viewport{ overflow:hidden; }
.voice-slider__track{
  display:flex; gap:var(--gap);
  transition:transform .7s var(--ease);
  will-change:transform;
}
.voice-slide{
  flex:0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
}
.voice-slide img{
  width:100%; height:auto; display:block;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  pointer-events:none; /* スワイプ中に画像がドラッグされないように */
}
.voice-slider__dots{
  margin-top:20px; display:flex; justify-content:center; gap:9px;
}
.voice-slider__dots button{
  width:8px; height:8px; padding:0; border-radius:50%;
  background:var(--line-c); transition:background .3s var(--ease), transform .3s var(--ease);
}
.voice-slider__dots button:hover{ background:var(--pink-light); }
.voice-slider__dots button[aria-selected="true"]{ background:var(--pink); transform:scale(1.35); }
.voice-note{ margin-top:20px; text-align:center; font-size:11px; color:var(--gray); }
@media (min-width:768px){
  .voice-slider{ --per-view:2; --gap:20px; }
}
@media (min-width:1024px){
  .voice-slider{ --per-view:3; --gap:24px; }
}
@media (prefers-reduced-motion:reduce){
  .voice-slider__track{ transition:none; }
}

/* =========================================================
   Support
   ========================================================= */
.support-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.support-list li{
  background:var(--white); border-radius:var(--radius); padding:22px 14px; text-align:center;
  box-shadow:0 6px 18px rgba(90,60,70,.05);
}
.support-list h3{ margin-top:12px; font-size:13.5px; font-weight:700; color:var(--pink-dark); letter-spacing:.03em; }
.support-list p{ margin-top:8px; font-size:11.5px; line-height:1.8; color:var(--ink-light); }
@media (min-width:768px){
  .support-list{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .support-list li{ padding:30px 22px; }
  .support-list h3{ font-size:16px; }
  .support-list p{ font-size:13px; }
}

/* =========================================================
   Flow
   ========================================================= */
.flow-list{ display:grid; gap:14px; }
.flow-list li{
  position:relative; background:var(--ivory); border-radius:var(--radius); padding:22px 20px 24px;
}
.flow-list li:not(:last-child)::after{
  content:""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  border-top:9px solid var(--pink-light);
  border-left:9px solid transparent; border-right:9px solid transparent; z-index:1;
}
.flow-list__num{
  font-family:var(--ff-en); font-size:13px; letter-spacing:.16em; color:var(--pink); font-weight:600;
}
.flow-list h3{ margin-top:6px; font-family:var(--ff-mincho); font-size:19px; font-weight:500; }
.flow-list p{ margin-top:8px; font-size:13px; line-height:1.9; color:var(--ink-light); }
.flow-note{
  margin-top:22px; text-align:center; font-size:13px; color:var(--pink-dark);
}
@media (min-width:768px){
  .flow-list li{ padding:28px 34px; }
  .flow-list h3{ font-size:21px; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq details{
  background:var(--white); border-radius:12px; margin-bottom:10px; overflow:hidden;
  box-shadow:0 4px 14px rgba(90,60,70,.05);
}
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  padding:18px 52px 18px 46px; font-size:14px; font-weight:500; line-height:1.7;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"Q"; position:absolute; left:18px; top:16px;
  font-family:var(--ff-en); font-size:18px; font-weight:600; color:var(--pink);
}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:12px; height:12px;
  border-right:1.5px solid var(--pink); border-bottom:1.5px solid var(--pink);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__a{
  padding:0 22px 20px 46px; font-size:13px; line-height:1.95; color:var(--ink-light);
  border-top:1px dashed var(--line-c); padding-top:16px; margin:0 18px;
}
/* 条件を段落で分けて書く回答用 */
.faq__a p + p{ margin-top:.85em; }
.faq__a b{ color:var(--ink); }
@media (min-width:768px){
  .faq summary{ font-size:16px; padding:22px 60px 22px 54px; }
  .faq__a{ font-size:14px; }
}

/* =========================================================
   Access
   ========================================================= */
.access{ display:grid; gap:24px; }
.access__info div{
  display:grid; grid-template-columns:110px 1fr; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line-c);
}
.access__info dt{ font-size:12px; color:var(--pink-dark); font-weight:700; letter-spacing:.04em; }
.access__info dd{ font-size:13.5px; line-height:1.8; }
.access__sub{ font-size:11px; color:var(--gray); letter-spacing:.1em; }
.access__map{ text-align:center; }
.access__map iframe{ width:100%; aspect-ratio:16/10; border:0; border-radius:var(--radius); display:block; }
.access__map .btn{ margin-top:14px; }
@media (min-width:768px){
  .access{ grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
  .access__info dt{ font-size:13px; }
  .access__info dd{ font-size:15px; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--ivory); padding:48px 0 0; }
.footer__inner{ display:grid; gap:28px; }
/* フッターはロゴが大きい分、カタカナとの間隔を詰めて見え方を揃える */
.logo--footer{ gap:11px; }
.logo--footer .logo__mark{ width:42px; height:42px; }
.logo--footer .logo__main{ font-size:28px; }
.footer__addr{ margin-top:12px; font-size:12px; line-height:1.9; color:var(--ink-light); }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.footer__nav a{ font-size:12.5px; line-height:2.3; color:var(--ink-light); }
.footer__nav a:hover{ color:var(--pink); opacity:1; }
/* フッター最下部：規約類のリンク＋著作権表示 */
.footer__bottom{
  margin-top:36px; padding:18px 0 calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-c);
}
.footer__legal{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  width:min(100% - 40px, 1120px); margin-inline:auto;
}
.footer__legal a{ font-size:12px; color:var(--ink-light); letter-spacing:.02em; }
.footer__legal a:hover{ color:var(--pink); opacity:1; }
.copyright{
  margin-top:16px;
  text-align:center; font-size:10.5px; letter-spacing:.06em; color:var(--gray);
}

/* =========================================================
   規約ページ（利用規約 / プライバシーポリシー / 特商法）
   ========================================================= */
.doc-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:min(100% - 40px, 1120px); margin-inline:auto; padding:18px 0;
  border-bottom:1px solid var(--line-c);
}
.doc-back{ font-size:13px; color:var(--ink-light); white-space:nowrap; }
.doc-back:hover{ color:var(--pink); opacity:1; }
.doc{ padding:48px 0 72px; }
.doc__title{
  font-family:var(--ff-mincho); font-weight:500; text-align:center;
  font-size:clamp(24px,6vw,34px); letter-spacing:.06em;
  padding-bottom:20px; margin-bottom:36px; border-bottom:2px solid var(--pink);
}
.doc__body{ font-size:14px; line-height:2; color:var(--ink); }
.doc__body h2{
  margin:36px 0 12px; padding-left:12px; font-size:17px; font-weight:700;
  letter-spacing:.04em; border-left:3px solid var(--pink);
}
.doc__body h2:first-child{ margin-top:0; }
.doc__body h3{ margin:24px 0 8px; font-size:15px; font-weight:700; }
.doc__body p{ margin-bottom:16px; }
.doc__body ul,.doc__body ol{ margin:0 0 16px; padding-left:1.6em; }
.doc__body ul li{ list-style:disc; margin-bottom:6px; }
.doc__body ol li{ list-style:decimal; margin-bottom:6px; }
.doc__body table{ margin-bottom:20px; font-size:13.5px; }
.doc__body th,.doc__body td{
  padding:12px 14px; border:1px solid var(--line-c); text-align:left; vertical-align:top;
}
.doc__body th{ background:var(--ivory); width:32%; font-weight:700; white-space:nowrap; }
.doc__body a{ color:var(--pink); text-decoration:underline; }
.doc__placeholder{
  padding:48px 20px; text-align:center; color:var(--gray);
  background:var(--ivory); border-radius:var(--radius);
}
.doc__updated{ margin-top:40px; text-align:right; font-size:12.5px; color:var(--ink-light); }
.doc__foot{ margin-top:48px; text-align:center; }
@media (min-width:768px){
  .doc{ padding:64px 0 96px; }
  .doc__body{ font-size:15px; }
}
@media (min-width:768px){
  .footer__inner{ grid-template-columns:1fr auto; gap:60px; align-items:start; }
  .footer__nav{ gap:10px 56px; }
}
@media (max-width:1023px){
  .footer{ padding-bottom:72px; } /* 固定CTA分の余白 */
}

/* =========================================================
   固定CTA（SP）
   ========================================================= */
.fixed-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  transform:translateY(120%); transition:transform .4s var(--ease);
}
.fixed-cta.is-visible{ transform:translateY(0); }
.fixed-cta .btn{ width:100%; padding:14px; font-size:14px; }
@media (min-width:1024px){ .fixed-cta{ display:none; } }

/* =========================================================
   Scroll Reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-shown{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}