/* ============================================================
   ワンウィッグ 令和の虎LP — style.css
   値は DESIGN.md のトークンに対応。黒×ゴールド×赤×LINE緑。
   スマホ基準 → PCは中央寄せ幅で拡張。
   ============================================================ */
:root {
  --bg:#0B0B0B; --bg-card:#1A1A1A; --bg-line:#2A2620;
  --gold:#C8A24A; --gold-light:#E6C66D; --gold-dark:#A9822E;
  --red:#C41230;
  --cream:#F3F1EC; --cream-card:#FFFFFF; --cream-beige:#EFE7D6;
  --text:#FFFFFF; --text-dark:#1A1A1A; --text-sub:#B7B1A5; --text-sub-d:#6B675F;
  --line-g1:#2BC24E; --line-g2:#0E8A28; --line-brand:#06C755;

  --font-jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --font-mincho:'Noto Serif JP','Hiragino Mincho ProN',serif;
  --font-impact:'Anton','Noto Sans JP',sans-serif;

  --xs:4px; --sm:8px; --md:16px; --lg:24px; --xl:40px; --2xl:56px;
  --sec-y:40px;
  --cmax:500px; --pad-x:18px;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:9999px;
  --sh-card:0 8px 24px rgba(0,0,0,.35);
  --sh-green:0 8px 20px rgba(14,138,40,.35);
  --grad-gold:linear-gradient(180deg,var(--gold-light),var(--gold-dark));
}

*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-jp);font-weight:400;
  font-size:.95rem;line-height:1.8;letter-spacing:.02em;
  color:#22201B;
  background:#EFEBE2;/* 元は tex-paper.webp のテクスチャ重ねだが、本番では画像が存在せず 404 だったため
                        A/Bテスト時と同じ見た目（ベタ塗り）を維持する目的で参照を削除 */
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;color:inherit;}
h1,h2,h3{margin:0;line-height:1.3;}

/* ---- shell ---- */
.shell{width:100%;max-width:var(--cmax);margin:0 auto;padding:0 var(--pad-x);}
.section{padding:var(--sec-y) 0;}
.sp-only{display:inline;}

/* ---- 破れた白紙パネル（黒地に浮くインパクト系の共通部品） ----
   現在このクラスは未使用。参照先の paper-torn.webp も同梱していないため、
   使う場合は先に img/paper-torn.webp を配置すること。 */
.paper{
  border:36px solid transparent;
  border-image:url("../img/paper-torn.webp") 76 fill stretch;
  color:var(--text-dark);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.paper__in{padding:var(--sm) var(--sm) var(--md);}
/* 破れ紙パネル上の見出し（黒文字・下線なし） */
.sec-title--onpaper{color:var(--text-dark);text-shadow:none;background-image:none;padding-bottom:0;}

/* ---- gold helpers ---- */
.gold{color:var(--gold-light);font-weight:900;}
.gold-dark{color:var(--gold-dark);font-weight:900;}
.gold-grad{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- section title: 上下を斜めにカットしたクリーンな全幅ダーク帯 ---- */
.sec-title{
  --slant:clamp(26px,3vw,52px);
  position:relative;display:block;
  width:100vw;left:50%;margin-left:-50vw;margin-right:-50vw;
  margin-top:0;margin-bottom:var(--2xl);
  padding:78px 20px;
  text-align:center;font-family:var(--font-mincho);font-weight:900;font-size:1.7rem;line-height:1.5;
  letter-spacing:.04em;color:#fff;font-feature-settings:"palt";
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  background:
    radial-gradient(ellipse 58% 62% at 50% 50%,rgba(200,162,74,.16),transparent 72%),
    linear-gradient(180deg,#221f1b 0%,#0b0a08 100%);
  clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);
}
.sec-title .gold-grad{font-family:var(--font-impact);}
/* 暗いセクション（最終CTA等）用：帯なし・白文字＋金ライン装飾 */
.sec-title--ondark{width:auto;left:auto;margin:0 auto var(--lg);padding:14px 8px 22px;
  background:none;text-shadow:none;clip-path:none;}
.sec-title--ondark::before,.sec-title--ondark::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.sec-title--ondark::before{top:0;}
.sec-title--ondark::after{bottom:6px;}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sm);
  font-weight:900;letter-spacing:.03em;border-radius:var(--r-full);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,filter .2s ease;}
.btn--line{background:linear-gradient(180deg,var(--line-g1),var(--line-g2));color:#fff;
  box-shadow:var(--sh-green);}
.btn--line:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn--sm{min-height:40px;padding:0 var(--md);font-size:.7rem;line-height:1.1;text-align:left;}
.btn--sm .btn__label{display:flex;flex-direction:column;}
.btn--sm .btn__label small{font-weight:500;font-size:.58rem;opacity:.9;letter-spacing:0;}
.btn--lg{position:relative;width:100%;min-height:64px;padding:0 48px;font-size:1.15rem;}
.btn__arrow{font-size:1.4em;line-height:1;margin-left:auto;}
.btn--lg .btn__arrow{position:absolute;right:var(--lg);top:50%;transform:translateY(-50%);margin-left:0;color:#fff;}

/* 公式LINEアイコン（白角丸＋緑バブル＋LINE） */
.icon-line{flex:0 0 auto;width:24px;height:24px;background:var(--line-icon) center/contain no-repeat;}
.btn--sm .icon-line{width:26px;height:26px;}
.btn--lg .icon-line{width:30px;height:30px;}

/* ============================================================
   右下 常時表示 LINEフローティング（キラーン演出）
   ============================================================ */
.line-float{
  position:fixed;right:16px;bottom:16px;z-index:1000;
  display:flex;align-items:center;gap:8px;
  max-width:calc(100% - 32px);
  padding:11px 16px;border-radius:var(--r-full);
  background:linear-gradient(180deg,#22D366,#06C755);
  color:#fff;text-decoration:none;font-family:var(--font-jp);
  font-weight:900;font-size:.95rem;line-height:1;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.55);
  overflow:hidden;opacity:0;
  animation:lineFloatIn .5s ease-out .7s forwards,
            lineFloatPulse 2.6s ease-in-out 1.6s infinite;
}
.line-float:hover{filter:brightness(1.05);}
.line-float .icon-line{width:28px;height:28px;}
.line-float__txt{display:inline-flex;align-items:center;gap:5px;}
/* キラーンと横切る光 */
.line-float__shine{
  position:absolute;top:-20%;left:-70%;width:45%;height:140%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.15) 65%,transparent 100%);
  transform:skewX(-18deg);
  animation:lineShine 3.4s ease-in-out 2.4s infinite;
}
@keyframes lineFloatIn{from{opacity:0;}to{opacity:1;}}
@keyframes lineFloatPulse{
  0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 0 rgba(6,199,85,.5);}
  50%{box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 12px rgba(6,199,85,0);}
}
@keyframes lineShine{
  0%{left:-70%;}
  16%{left:130%;}
  100%{left:130%;}
}
@media (prefers-reduced-motion:reduce){
  .line-float{opacity:1;animation:none;}
  .line-float__shine{display:none;}
}
@media (min-width:768px){
  .line-float{right:28px;bottom:28px;padding:15px 24px;gap:11px;font-size:1.2rem;}
  .line-float .icon-line{width:36px;height:36px;}
}
:root{
  --line-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='11' fill='%23fff'/%3E%3Cpath fill='%2306C755' d='M24 9.5c-8 0-14.5 5.2-14.5 11.7 0 5.8 5.2 10.7 12.2 11.6.5.06 1.1.2 1.3.46.15.24.1.62.05.86 0 0-.17 1-.2 1.22-.07.36-.29 1.42 1.25.78 1.54-.65 8.27-4.87 11.28-8.34 2.08-2.28 3.07-4.6 3.07-7.16C38.5 14.7 32 9.5 24 9.5Z'/%3E%3Ctext x='24' y='21.6' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='7' fill='%23fff' text-anchor='middle' dominant-baseline='central'%3ELINE%3C/text%3E%3C/svg%3E");
  /* 公式LINEアプリアイコン風（緑地＋白バブル＋緑LINE） */
  --line-icon-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='11' fill='%2306C755'/%3E%3Cpath fill='%23fff' d='M24 9.5c-8 0-14.5 5.2-14.5 11.7 0 5.8 5.2 10.7 12.2 11.6.5.06 1.1.2 1.3.46.15.24.1.62.05.86 0 0-.17 1-.2 1.22-.07.36-.29 1.42 1.25.78 1.54-.65 8.27-4.87 11.28-8.34 2.08-2.28 3.07-4.6 3.07-7.16C38.5 14.7 32 9.5 24 9.5Z'/%3E%3Ctext x='24' y='21.6' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='7' fill='%2306C755' text-anchor='middle' dominant-baseline='central'%3ELINE%3C/text%3E%3C/svg%3E");
}

/* ============================================================
   Header
   ============================================================ */
.header{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--bg-line);}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:56px;}
.logo{display:flex;flex-direction:column;line-height:1;}
.logo__mark{display:block;height:26px;width:auto;}

/* ============================================================
   S1 Hero（コード化クローン）
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:8px 0 var(--xl);
  background:
    radial-gradient(80% 30% at 50% 6%,rgba(200,162,74,.18),transparent 60%),
    radial-gradient(70% 25% at 50% 34%,rgba(200,162,74,.12),transparent 60%),
    #050505;}
.hero__inner{display:flex;flex-direction:column;gap:10px;}

/* ①④⑤ 画像ブロック */
.hero-img{display:block;width:100%;height:auto;border-radius:var(--r-sm);}
.hero-img--main{border-radius:0;}

/* ④ 令和の虎に出演（サムネ画像のみ・枠なし） */
.yt-appear{text-align:center;}
.yt-appear__title{margin:0 0 var(--sm);font-family:var(--font-mincho);font-weight:900;
  font-size:1.5rem;line-height:1.3;color:#fff;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.yt-appear__link{display:block;text-decoration:none;}
.yt-appear__thumbwrap{display:block;position:relative;}
.yt-appear__thumb{display:block;width:100%;height:auto;border-radius:var(--r-md);
  box-shadow:0 10px 28px rgba(0,0,0,.55);transition:filter .2s ease;}
.yt-appear__vtitle{display:flex;align-items:center;gap:12px;justify-content:flex-start;
  margin:var(--md) 0 0;padding:14px 18px;
  background:linear-gradient(180deg,#232323,#141414);
  border:1.5px solid var(--gold);border-radius:var(--r-md);
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.yt-appear__play{flex:0 0 auto;width:42px;height:30px;border-radius:7px;background:#FF0000;position:relative;}
.yt-appear__play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;}
.yt-appear__vtext{font-size:1.02rem;font-weight:900;line-height:1.45;color:#fff;text-align:left;}
.yt-appear__link:hover .yt-appear__thumb{filter:brightness(1.05);}
.yt-appear__link:hover .yt-appear__vtitle{border-color:var(--gold-light);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.5);}
.yt-appear__note{margin:var(--sm) 0 0;font-size:.7rem;line-height:1.6;color:var(--text-sub);text-align:left;}
.gold-grad{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}

/* ② 4バッジ（アイコンのみ画像・テキストはコード） */
.hero-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sm);}
.hero-badges li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background:linear-gradient(180deg,#161616,#0D0D0D);border:1px solid rgba(200,162,74,.45);
  border-radius:var(--r-md);padding:9px var(--sm);font-size:.8rem;font-weight:700;line-height:1.3;color:#fff;}
.hero-badges b{color:var(--gold-light);font-weight:900;}
.hb-img{width:54px;height:54px;object-fit:contain;}
.hero-topimgs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sm);}
.hero-topimgs img{display:block;width:100%;height:auto;border-radius:var(--r-md);}

/* 料金バナー */
.hero-price{border:1.5px solid var(--gold);border-radius:var(--r-md);padding:var(--lg) var(--md);
  background:linear-gradient(180deg,#141414,#0A0A0A);text-align:center;
  box-shadow:0 0 22px rgba(200,162,74,.18);}
.hero-price__top{display:flex;align-items:center;justify-content:center;gap:var(--sm);flex-wrap:nowrap;}
.hero-price__label{flex:0 0 auto;font-size:.78rem;font-weight:900;line-height:1.1;color:#fff;
  border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:4px 7px;}
.hero-price__amount{display:inline-flex;align-items:flex-end;gap:2px;flex-wrap:nowrap;white-space:nowrap;}
.hero-price__amount .num{font-family:var(--font-mincho);font-weight:900;font-size:4rem;line-height:.95;
  background:linear-gradient(175deg,#FBE8B0 0%,#E9C25E 45%,#B98A2E 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
.hero-price__unit{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.hero-price__unit small{font-size:.62rem;color:var(--text-sub);font-family:var(--font-mincho);}
.hero-price__yen{font-size:1.8rem;font-weight:900;color:#fff;font-family:var(--font-mincho);}
.hero-price__from{font-size:1.8rem;font-weight:900;color:#fff;align-self:flex-end;line-height:1;font-family:var(--font-mincho);}
.hero-price__sub{margin:var(--xs) 0 0;font-weight:900;font-size:1.15rem;color:#fff;font-family:var(--font-mincho);}

/* ============================================================
   S2 悩み
   ============================================================ */
.problem__title{text-align:center;font-weight:900;font-size:1.75rem;line-height:1.35;
  color:var(--text-dark);margin:var(--sm) 0 var(--lg);letter-spacing:.02em;font-feature-settings:"palt";}
.problem__title .hi{display:inline-block;padding:0 .2em .1em;
  background:url("../img/brush-hi-yellow.webp") no-repeat center 78%;background-size:105% 62%;}
.checks{width:fit-content;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.checks li{display:flex;align-items:center;gap:14px;
  font-weight:800;font-size:1.02rem;color:var(--text-dark);line-height:1.4;}
.check{flex:0 0 26px;width:26px;height:26px;border:2.5px solid #1A1A1A;border-radius:5px;position:relative;}
.check::before{content:"";position:absolute;inset:-2px;background-color:#1A1A1A;
  -webkit-mask:var(--i-check) center/78% no-repeat;mask:var(--i-check) center/78% no-repeat;}
.problem__punch{text-align:center;font-weight:900;font-size:1.4rem;margin:var(--xl) 0 var(--sm);line-height:1.5;color:var(--red);}

/* ============================================================
   S3 5つの理由
   ============================================================ */
.reasons__num{font-family:var(--font-impact);font-size:3em;vertical-align:-.2em;padding:0 .04em;
  background:linear-gradient(180deg,#FFF07A 0%,#FFD62E 45%,#FFC400 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,210,60,.55));}
.reason-list{display:flex;flex-direction:column;gap:var(--lg);}
.reason{display:flex;align-items:center;gap:var(--md);
  background:#fff;border:1px solid #E4DFD4;border-radius:var(--r-lg);padding:var(--lg);
  color:var(--text-dark);box-shadow:0 6px 18px rgba(60,50,30,.1);}
.reason__body{flex:1;min-width:0;}
.reason__head{display:flex;align-items:center;gap:12px;padding-bottom:8px;margin-bottom:8px;
  border-bottom:2px solid rgba(0,0,0,.12);}
.reason__no{flex:0 0 auto;font-family:var(--font-impact);font-size:1.5rem;line-height:1;
  color:#1A1A1A;background:var(--grad-gold);padding:6px 10px 12px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);}
.reason__title{font-size:1.1rem;font-weight:900;color:var(--text-dark);letter-spacing:0;}
.reason__desc{margin:0;color:#3A362E;font-size:.9rem;line-height:1.65;}
.reason__thumb{flex:0 0 72px;align-self:center;border-radius:var(--r-full);overflow:hidden;
  border:2px solid rgba(0,0,0,.1);}
.reason__thumb img{width:72px;height:72px;object-fit:cover;display:block;}

/* ============================================================
   S4 比較表
   ============================================================ */
.ctable{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card);margin-top:var(--2xl);padding:4px;background:var(--cream-beige);}
.ctable table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.78rem;background:#fff;
  word-break:normal;overflow-wrap:anywhere;}
.ctable th,.ctable td{padding:10px var(--xs);text-align:center;vertical-align:middle;
  border-bottom:1px solid #E6E2D9;line-height:1.45;}
.ctable thead th{font-weight:900;font-size:.85rem;padding:12px var(--xs);}
.ctable thead th:first-child{width:24%;background:#2E2A24;}
.ctable thead th:nth-child(2){width:38%;background:#4A4A4A;color:#fff;}
.ctable thead .ctable__ours{width:38%;background:var(--grad-gold);color:#1A1A1A;}
.ctable thead .ctable__ours small{display:block;font-size:.6rem;font-weight:600;color:#3A2E12;}
.ctable tbody th{text-align:left;color:var(--text-dark);font-weight:800;font-size:.74rem;width:24%;background:#ECE8E0;padding-left:10px;}
.ctable td{color:var(--text-dark);width:38%;background:#fff;}
.ctable tbody tr:nth-child(even) td{background:#F7F5F0;}
.ctable tbody tr:nth-child(even) th{background:#E5E0D6;}
.ctable .ctable__ours{background:linear-gradient(180deg,#FBF1D8,#F1E4C4)!important;color:#1A1A1A;font-weight:800;font-size:1.02em;}
/* ワンウィッグ列を金枠で強調 */
.ctable__ours{border-left:3px solid var(--gold)!important;border-right:3px solid var(--gold)!important;}
.ctable thead .ctable__ours{border-top:3px solid var(--gold)!important;}
.ctable tbody tr:last-child .ctable__ours{border-bottom:3px solid var(--gold)!important;}
.ctable thead .ctable__ours{position:relative;}
.note{margin:var(--md) 0 0;font-size:.7rem;color:#6B675F;text-align:center;}
.note--dark{color:#6B675F;}

/* 比較表：PCはデザイン画像 / スマホはコード表 */
.compare-img{display:none;}
.compare-img img{width:100%;height:auto;border-radius:var(--r-md);}

/* コード比較表（スマホ用・PCデザイン画像と同じ並び：項目／ワンウィッグ／AGA治療） */
.cmp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  font-family:var(--font-mincho);
  background:linear-gradient(160deg,#181b23 0%,#0b0c11 100%);
  border:1px solid rgba(200,162,74,.3);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.38);}
.cmp th,.cmp td{padding:13px 5px;text-align:center;vertical-align:middle;line-height:1.45;}
.cmp col.cmp__c-label{width:25%;} .cmp col.cmp__c-one{width:41%;} .cmp col.cmp__c-aga{width:34%;}
/* 意味の区切りでのみ改行（1〜2文字の泣き別れ防止） */
.cmp .nb{display:inline-block;white-space:nowrap;}
/* ヘッダー行 */
.cmp thead th{font-weight:900;padding-top:15px;padding-bottom:15px;}
.cmp__h--label{color:#B9B2A2;font-size:.68rem;}
.cmp__h--aga{color:#fff;font-size:.95rem;letter-spacing:.02em;}
/* ワンウィッグ列のヘッダー：金地に筆文字ロゴ。
   白ロゴしか素材が無いので反転して黒字にする（新しい画像を配らずに済ませるため） */
.cmp__h--one{background:var(--grad-gold);color:#1A1A1A;font-size:1rem;letter-spacing:.02em;
  padding-top:11px;padding-bottom:11px;}
.cmp__logo{width:100%;max-width:116px;height:auto;margin:0 auto;filter:invert(1);}
/* 項目ラベル列 */
.cmp__label{color:#ECE6D9;font-weight:700;font-size:.72rem;text-align:center;letter-spacing:.01em;white-space:nowrap;}
/* AGA列（明るいセル） */
.cmp__aga{background:#F4F2EC;color:#3A362E;font-size:.73rem;}
/* ワンウィッグ列（濃色＋金） */
.cmp__one{background:#0d0f16;color:var(--gold-light);font-weight:800;font-size:.8rem;}
.cmp__one b{display:inline;font-weight:900;font-size:1.35em;color:#FFE9A8;padding:0 .03em;}
/* 行区切り */
.cmp tbody th,.cmp tbody td{border-top:1px solid rgba(255,255,255,.09);}
.cmp tbody .cmp__aga{border-top:1px solid #E4E0D6;}
/* 金枠（ワンウィッグ列を強調） */
.cmp .cmp__h--one,.cmp .cmp__one{border-left:2px solid var(--gold);border-right:2px solid var(--gold);}
.cmp thead .cmp__h--one{border-top:2px solid var(--gold);}
.cmp tbody tr:last-child .cmp__one{border-bottom:2px solid var(--gold);}

/* ============================================================
   ビフォーアフター
   ============================================================ */
.ba__lead{text-align:center;font-weight:900;font-size:1.15rem;line-height:1.6;
  color:var(--text-dark);margin:0 0 var(--lg);}
.ba-cases{display:flex;flex-direction:column;gap:var(--md);max-width:460px;margin:0 auto;}
.ba-case{margin:0;background:#fff;border:1px solid #E4DFD4;border-radius:var(--r-lg);
  padding:var(--md);box-shadow:0 6px 18px rgba(60,50,30,.12);}
.ba-case__pair{display:flex;align-items:center;justify-content:center;gap:var(--xs);}
.ba-case__img{flex:1 1 0;display:flex;flex-direction:column;align-items:flex-start;}
.ba-case__img img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-md);box-shadow:0 3px 10px rgba(60,50,30,.15);}
.ba-case__img--after img{outline:2px solid var(--gold);outline-offset:-2px;
  box-shadow:0 5px 16px rgba(180,140,50,.4);}
.ba-case__cap{margin:var(--sm) 0 0;text-align:center;font-weight:800;font-size:.9rem;color:var(--text-dark);}
.ba-tag{order:-1;align-self:flex-start;margin-bottom:5px;line-height:1;
  font-weight:900;font-size:.62rem;letter-spacing:.05em;padding:3px 7px;border-radius:4px;}
.ba-tag--before{background:rgba(40,38,34,.85);color:#fff;}
.ba-tag--after{background:var(--grad-gold);color:#1A1A1A;}
.ba-arrow{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-full);z-index:3;
  background:var(--grad-gold);display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(180,140,50,.5);}
.ba-arrow::before{content:"";width:8px;height:8px;
  transform:translateX(-2px) rotate(45deg);
  border-top:3px solid #2A2109;border-right:3px solid #2A2109;}

/* ============================================================
   S5 流れ
   ============================================================ */
.flow-list{display:flex;flex-direction:column;gap:22px;max-width:560px;margin:0 auto;list-style:none;padding:0;}
/* 導入カード（LINE相談＝入口） */
.flow-intro{position:relative;display:flex;align-items:center;gap:var(--md);
  max-width:560px;margin:0 auto 22px;
  background:var(--line-brand);border:2px solid var(--line-brand);border-radius:var(--r-lg);
  padding:var(--md) var(--md) var(--md) 14px;box-shadow:0 8px 20px rgba(6,199,85,.3);}
.flow-intro .flow-desc{color:#fff;}
.flow-step{display:flex;align-items:center;gap:var(--md);position:relative;
  background:#fff;border:1px solid #EAE3D4;border-radius:var(--r-lg);
  padding:var(--md) var(--md) var(--md) 14px;box-shadow:0 6px 18px rgba(60,50,30,.08);}
.flow-body{flex:1 1 auto;min-width:0;}
/* ステップ間の接続線（カード下→次のカード） */
.flow-intro::before,
.flow-step:not(:last-child)::before{content:"";position:absolute;top:100%;left:42px;
  width:2px;height:22px;z-index:0;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold),rgba(200,162,74,.35));}
/* 接続線の先の下向き矢印 */
.flow-intro::after,
.flow-step:not(:last-child)::after{content:"";position:absolute;left:42px;top:calc(100% + 17px);
  width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);
  border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);z-index:1;}
.flow-no{display:block;font-weight:900;font-size:.72rem;letter-spacing:.08em;
  color:var(--gold-dark);margin-bottom:2px;line-height:1.2;}
.flow-no--intro{font-size:1rem;letter-spacing:.02em;color:#fff;}
.flow-desc{margin:5px 0 0;color:#5A5343;font-size:.86rem;line-height:1.6;}
.flow-icon{flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-full);
  background:#fff;border:1.5px solid var(--gold);display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 3px 10px rgba(60,50,30,.1);}
.flow-icon.flow-icon--intro[data-icon="line-c"]{background:var(--line-icon) center/contain no-repeat;
  border:none;box-shadow:0 4px 12px rgba(0,0,0,.18);}
.flow-icon::before{content:"";width:28px;height:28px;background-color:var(--gold-dark);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;}
.flow-icon[data-icon="chat"]::before{-webkit-mask-image:var(--i-chat);mask-image:var(--i-chat);}
.flow-icon[data-icon="box"]::before{-webkit-mask-image:var(--i-box);mask-image:var(--i-box);}
.flow-icon[data-icon="calendar"]::before{-webkit-mask-image:var(--i-cal);mask-image:var(--i-cal);}
.flow-icon[data-icon="truck"]::before{-webkit-mask-image:var(--i-truck);mask-image:var(--i-truck);}
.flow-icon[data-icon="scissors"]::before{-webkit-mask-image:var(--i-sci);mask-image:var(--i-sci);}
.flow-icon[data-icon="headset"]::before{-webkit-mask-image:var(--i-head);mask-image:var(--i-head);}
.flow-icon[data-icon="line-c"]{background:#FEF4DE var(--line-icon) center/34px no-repeat;
  border:2px solid #CF9407;box-shadow:none;}
.flow-icon[data-icon="line-c"]::before{display:none;}
.flow-icon--img{background:none;border:none;box-shadow:none;overflow:hidden;}
.flow-icon--img::before{display:none;}
.flow-icon--img img{width:100%;height:100%;object-fit:contain;display:block;}
.flow-icon--ring{border:2px solid #CF9407;}
.flow-txt{margin:0;font-weight:800;font-size:1rem;line-height:1.35;color:var(--text-dark);}

/* ============================================================
   S6 声
   ============================================================ */
.review-list{display:flex;flex-direction:column;gap:var(--lg);max-width:760px;margin:0 auto;list-style:none;padding:0;}
.review{margin:0;background:#fff;border:1px solid #E4DFD4;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 8px 22px rgba(60,50,30,.12);padding:var(--lg);}
.review__photo{max-width:260px;margin:0 auto var(--md);}
.review__photo img{display:block;width:100%;height:auto;border-radius:var(--r-md);}
.review__headline{margin:0 0 var(--sm);font-family:var(--font-mincho);font-weight:700;
  font-size:1.18rem;line-height:1.55;color:#2B2620;letter-spacing:.01em;
  padding-bottom:var(--sm);border-bottom:2px solid var(--gold);}
.review__headline mark{background:none;color:var(--gold-dark);}
.review__text{margin:0;font-size:.92rem;line-height:1.9;color:#4A453D;}

/* CTA block */
.cta-block{margin:var(--xl) auto 0;max-width:460px;text-align:center;}
.cta-block__note{margin:var(--sm) 0 0;font-size:.75rem;color:#6B675F;}
.final .cta-block__note{color:var(--text-sub);}

/* ============================================================
   S7 サロン
   ============================================================ */
.salon__lead{text-align:center;color:#4A463E;font-size:.9rem;max-width:440px;margin:0 auto var(--lg);}
.salon__map{max-width:360px;margin:0 auto var(--md);}
.salon__wrap{display:grid;grid-template-columns:1fr;gap:var(--md);}
.salon__photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card);}
.salon__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;}

/* ============================================================
   S8 料金（クリーム）
   ============================================================ */
.price__lead{text-align:center;font-weight:900;font-size:1.3rem;margin:0 0 var(--lg);color:var(--text-dark);}
.price-banner{display:block;width:100%;max-width:640px;height:auto;margin:0 auto var(--lg);
  border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(60,50,30,.14);}
.price-cards{display:flex;flex-direction:column;gap:var(--md);max-width:400px;margin:0 auto;}
.price-card{position:relative;background:#FBFAF7;border:2px solid var(--cream-beige);border-radius:var(--r-lg);
  padding:var(--lg);text-align:center;box-shadow:inset 0 0 0 1px rgba(200,162,74,.15);}
.price-card__badge{position:absolute;top:-16px;right:-6px;width:70px;height:70px;
  display:grid;place-items:center;text-align:center;line-height:1.15;
  color:#5A3E00;font-size:.62rem;font-weight:900;
  background:var(--grad-gold);
  clip-path:polygon(50% 0,61% 12%,76% 6%,79% 23%,95% 27%,88% 42%,100% 50%,88% 58%,95% 73%,79% 77%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,21% 77%,5% 73%,12% 58%,0 50%,12% 42%,5% 27%,21% 23%,24% 6%,39% 12%);}
.price-card__label{margin:0 0 var(--xs);font-weight:900;font-size:.95rem;color:var(--text-dark);}
.price-card__amount{margin:0;font-weight:900;line-height:1;color:var(--gold-dark);}
.price-card__amount .num{font-family:var(--font-mincho);font-weight:900;font-size:3.2rem;letter-spacing:.01em;}
.price-card__yen{font-size:1.4rem;font-family:var(--font-mincho);}
.price-card__amount small{font-size:.7rem;color:var(--text-sub-d);font-weight:500;margin-left:2px;}
/* 強弱: 初月(=お得な入口)を主役に、2ヶ月目以降は控えめに */
.price-card--primary{border-color:var(--gold);
  background:linear-gradient(180deg,#FFFDF6,#FAF0D4);
  box-shadow:0 14px 32px rgba(180,140,50,.22),inset 0 0 0 1px rgba(200,162,74,.45);}
.price-card--primary .price-card__amount{
  background:linear-gradient(178deg,#F0CB63 0%,#D9A63E 55%,#B5822C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.price-card--primary .price-card__amount .num{font-size:3.7rem;}
.price-card--sub{background:#F4F1EA;border-color:var(--cream-beige);box-shadow:none;}
.price-card--sub .price-card__label{color:var(--text-sub-d);}
.price-card--sub .price-card__amount{color:#8A857A;}
/* 単一プラン */
.price-cards--single{max-width:420px;}
.price-card__tagline{margin:var(--sm) 0 0;font-weight:700;font-size:.9rem;line-height:1.6;color:var(--text-dark);}
.price-feats{list-style:none;width:fit-content;max-width:100%;margin:var(--lg) auto 0;
  display:flex;flex-direction:column;gap:12px;}
.price-feats li{position:relative;padding-left:34px;font-weight:800;font-size:1rem;line-height:1.5;color:var(--text-dark);}
.price-feats li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:var(--r-full);background:var(--grad-gold);box-shadow:0 2px 6px rgba(180,140,50,.35);}
.price-feats li::after{content:"";position:absolute;left:8px;top:50%;width:5px;height:9px;
  transform:translate(0,-60%) rotate(45deg);border-right:2px solid #2A2109;border-bottom:2px solid #2A2109;}
.price-badges{display:flex;justify-content:center;gap:var(--sm);flex-wrap:wrap;margin:var(--lg) auto 0;max-width:440px;}
.price-badges li{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:100px;
  background:#F5F2EA;border:1px solid var(--cream-beige);border-radius:var(--r-md);padding:var(--lg) var(--sm);
  font-size:.9rem;font-weight:800;color:var(--text-dark);text-align:center;line-height:1.4;}
.pb-icon{width:44px;height:44px;background-color:var(--gold-dark);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
.pb-icon[data-icon="no-fee"]{-webkit-mask-image:var(--i-nofee);mask-image:var(--i-nofee);}
.pb-icon[data-icon="pin"]{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin);}
.pb-icon[data-icon="calendar"]{-webkit-mask-image:var(--i-cal);mask-image:var(--i-cal);}

/* ============================================================
   S9 FAQ
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:#1A1A1A;border:1px solid var(--bg-line);border-radius:var(--r-md);overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;gap:10px;padding:14px var(--md);
  background:none;border:none;text-align:left;font-weight:800;font-size:.92rem;min-height:54px;color:#fff;}
.faq-q__mark{flex:0 0 auto;color:var(--gold);font-weight:900;font-size:1.15rem;font-family:var(--font-impact);}
.faq-tgl{margin-left:auto;position:relative;width:14px;height:14px;flex:0 0 14px;transition:transform .25s;}
.faq-tgl::before{content:"";position:absolute;top:2px;left:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateX(-50%) rotate(45deg);}
.faq-q[aria-expanded="true"] .faq-tgl{transform:rotate(180deg);}
.faq-a{padding:0 var(--md);background:#1A1A1A;}
.faq-a[hidden]{display:none;}
.faq-a p{margin:0;padding:0 0 var(--md);font-size:.85rem;color:var(--text-sub);line-height:1.7;}
.ph{display:block;margin-top:6px;font-size:.7rem;color:var(--gold-dark);}
.faq-more{display:block;margin:var(--lg) auto 0;background:var(--cream-beige);border:none;
  color:var(--text-dark);font-weight:800;border-radius:var(--r-full);padding:12px 40px;font-size:.9rem;
  box-shadow:var(--sh-card);}

/* ============================================================
   S10 最終CTA
   ============================================================ */
.final{background:radial-gradient(120% 60% at 50% 100%,rgba(200,162,74,.1),transparent 60%),var(--bg);}
.final__badges{display:flex;justify-content:center;gap:var(--md);flex-wrap:wrap;margin:0 auto var(--xl);max-width:460px;}
.final__badges li{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:96px;
  font-size:.78rem;font-weight:800;text-align:center;line-height:1.4;color:#fff;}
.fb-circle{width:64px;height:64px;border-radius:var(--r-full);border:1.5px solid rgba(200,162,74,.55);
  display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,rgba(200,162,74,.12),transparent 70%);}
.fb-circle .icon-line{width:34px;height:34px;}
.fb-icon{width:32px;height:32px;background-color:var(--gold);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
.fb-icon[data-icon="chat"]{-webkit-mask-image:var(--i-chat);mask-image:var(--i-chat);}
.fb-icon[data-icon="clock"]{-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock);}
.fb-icon[data-icon="no-ad"]{-webkit-mask-image:var(--i-noad);mask-image:var(--i-noad);}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:#070707;border-top:1px solid var(--bg-line);padding:var(--xl) 0 var(--lg);text-align:center;}
.logo--footer{align-items:center;margin-bottom:var(--md);}
.logo--footer .logo__mark{height:32px;}
.footer__copy{color:var(--text-sub);font-size:.85rem;margin:0 0 var(--md);}
.footer__links{font-size:.75rem;color:var(--text-sub);margin:0 0 var(--sm);}
.footer__links a:hover{color:var(--gold);}
.footer__links span{margin:0 var(--sm);opacity:.5;}
.footer__c{font-size:.7rem;color:var(--text-sub);opacity:.7;margin:0;}

/* ============================================================
   Icon mask defs (gold line, lucide相当)
   ============================================================ */
:root{
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.5A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E");
  --i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 7.8 12 3 3.5 7.8v8.4L12 21l8.5-4.8z'/%3E%3Cpath d='M3.5 7.8 12 12.6l8.5-4.8M12 12.6V21'/%3E%3C/svg%3E");
  --i-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3Ctext x='12' y='17' font-family='Arial' font-weight='700' font-size='9' fill='black' text-anchor='middle'%3E3%3C/text%3E%3C/svg%3E");
  --i-sci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cpath d='M8.2 7.8 20 18M8.2 16.2 20 6'/%3E%3C/svg%3E");
  --i-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='14' height='10.5' rx='1'/%3E%3Cpath d='M15 9h4.2L22 12.2v3.3h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E");
  --i-head:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='2.5' y='13' width='4' height='6' rx='1.2'/%3E%3Crect x='17.5' y='13' width='4' height='6' rx='1.2'/%3E%3Cpath d='M20 19a4 4 0 0 1-4 3h-2'/%3E%3C/svg%3E");
  --i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-5.2 7-12a7 7 0 1 0-14 0c0 6.8 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3.2 1.8'/%3E%3C/svg%3E");
  --i-nofee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6 18.4 18.4'/%3E%3Cpath d='M9 8l3 4 3-4M12 12v4M9.6 13.5h4.8'/%3E%3C/svg%3E");
  --i-noad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 10-4.5M18 8v6l2 2H8'/%3E%3Cpath d='M10.5 19a2 2 0 0 0 3.5 0'/%3E%3Cpath d='M4 4 20 20'/%3E%3C/svg%3E");
  --i-lineo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c-4.7 0-8.5 3-8.5 6.8 0 3.4 3 6.2 7.1 6.8.9.15.7.7.6 1.2l-.2 1.1c-.1.5.3.9.9.6 2.4-1.1 6-3.8 7.6-6.1.6-.9 1-1.8 1-2.9C20.5 6.5 16.7 3.5 12 3.5Z'/%3E%3Ctext x='12' y='11.6' font-family='Arial' font-weight='700' font-size='5.4' fill='black' text-anchor='middle'%3ELINE%3C/text%3E%3C/svg%3E");
  --i-laurel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 4C10 8 6 16 6 24s4 16 14 20'/%3E%3Cpath d='M15 10c-4 1-6 3-6 3M13 17c-4 1-6 3-6 3M12 24c-4 1-6 3-6 3M13 31c-4 1-6 3-6 3M15 38c-4 1-6 3-6 3'/%3E%3C/svg%3E");
}

/* ============================================================
   Animations（フェードアップ＋スタガー）
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-anim]{opacity:0;transform:translateY(22px);
    transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
  .js-anim [data-anim].is-in{opacity:1;transform:none;}
}

/* ============================================================
   大見出し（斜めカット帯）専用のリッチな登場演出
   ── 帯のせり上がり ＋ 金の光沢スイープ ＋ 文字の金グロー一閃
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .js-anim .sec-title[data-anim]{
    opacity:0;transform:translateY(34px) scale(.98);
    transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
  .js-anim .sec-title[data-anim].is-in{opacity:1;transform:none;}

  /* 帯を斜めに横切る金の一閃 */
  .sec-title:not(.sec-title--ondark)::after{
    content:"";position:absolute;top:-25%;left:-45%;width:38%;height:150%;
    pointer-events:none;z-index:2;transform:skewX(-16deg);opacity:0;
    background:linear-gradient(90deg,
      rgba(255,236,175,0) 0%,
      rgba(255,242,195,.18) 35%,
      rgba(255,248,215,.62) 50%,
      rgba(255,242,195,.18) 65%,
      rgba(255,236,175,0) 100%);}
  .js-anim .sec-title.is-in:not(.sec-title--ondark)::after{
    animation:secSheen 1.3s cubic-bezier(.45,0,.2,1) .4s both;}
  @keyframes secSheen{
    0%{left:-45%;opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{left:118%;opacity:0;}}

  /* 強調語（金グラデ）の金グロー一閃 */
  .js-anim .sec-title.is-in .gold-grad{animation:secGoldGlint 1.4s ease-out .55s both;}
  @keyframes secGoldGlint{
    0%{filter:drop-shadow(0 0 0 rgba(255,215,90,0));}
    40%{filter:drop-shadow(0 0 16px rgba(255,220,95,.9));}
    100%{filter:drop-shadow(0 0 6px rgba(255,205,60,.4));}}
}

/* ============================================================
   PC（768px〜）中央寄せ幅で拡張
   ============================================================ */
@media (min-width:768px){
  /* 全セクション共通の広いコンテンツ幅（バラつきを排除） */
  :root{--cmax:1120px;--sec-y:56px;--pad-x:48px;}
  .sp-only{display:none;}
  .compare-img{display:block;max-width:100%;margin:0 auto;}
  .cmp{display:none;}
  body{font-size:1rem;}
  .header__inner{height:68px;}
  .logo__mark{height:30px;}
  .btn--sm{font-size:.82rem;padding:0 var(--lg);min-height:46px;}
  /* PC: 斜めカットの全幅ダーク帯（傾き大きめ） */
  .sec-title{font-size:2.4rem;--slant:clamp(44px,4vw,80px);padding:104px 20px;margin-bottom:72px;}
  .sec-title--ondark{width:auto;max-width:none;left:auto;
    margin:0 auto var(--lg);margin-left:auto;margin-right:auto;
    padding:14px 8px 22px;background:none;clip-path:none;}
  .problem__title{font-size:2.6rem;}
  .problem__punch{font-size:1.9rem;}
  .note{font-size:.82rem;}
  .paper{border-width:48px;}
  .paper__in{padding:var(--md) var(--xl) var(--lg);}

  /* ---- Hero: 全体幅に統一 ---- */
  .hero{padding:var(--xl) 0 var(--2xl);}
  .hero__inner{max-width:var(--cmax);margin:0 auto;gap:var(--xl);}
  .hero-badges{grid-template-columns:repeat(4,1fr);gap:var(--md);}
  .hero-topimgs{grid-template-columns:repeat(4,1fr);gap:var(--md);}
  .hero-badges li{font-size:1rem;gap:18px;padding:var(--xl) var(--md);min-height:230px;justify-content:center;}
  .hb-img{width:104px;height:104px;}
  .hero-price{max-width:none;margin:0;padding:var(--xl) var(--2xl);}
  .hero-price__amount .num{font-size:8rem;}
  .hero-price__yen,.hero-price__from{font-size:2.7rem;}
  .hero-price__label{font-size:1.05rem;padding:8px 12px;}
  .hero-price__sub{font-size:1.7rem;}
  .cta-block{max-width:640px;}
  .btn--lg{min-height:72px;font-size:1.3rem;}

  /* ---- 悩み: 単一カラム・中央寄せ（5項目の宙ぶらりんを回避） ---- */
  .checks{max-width:100%;gap:20px;}
  .checks li{font-size:1.2rem;}
  .check{flex-basis:30px;width:30px;height:30px;}

  /* ---- 5理由: 01全幅→02-05を2カラム ---- */
  .reason-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg) var(--xl);}
  .reason:first-child{grid-column:1 / -1;}
  .reason__title{font-size:1.4rem;}
  .reason__desc{font-size:1rem;}
  .reason__thumb{flex-basis:120px;}
  .reason__thumb img{width:120px;height:120px;}

  /* ---- ビフォーアフター（PCは2×2グリッド） ---- */
  .ba__lead{font-size:1.7rem;margin-bottom:var(--xl);}
  .beforeafter .shell{max-width:1320px;}
  .ba-cases{display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:var(--lg);}
  .ba-case{padding:var(--lg) var(--md);}
  .ba-case__pair{gap:var(--sm);}
  .ba-case__pair{gap:var(--md);}
  .ba-case__cap{font-size:1.2rem;margin-top:var(--md);}
  .ba-arrow{width:52px;height:52px;}
  .ba-arrow::before{width:15px;height:15px;border-top-width:4px;border-right-width:4px;}
  .ba-tag{font-size:1rem;padding:6px 12px;top:12px;left:12px;}

  /* ---- 比較表: 他セクションと同じ幅（広く） ---- */
  .ctable{max-width:none;margin-top:84px;margin-bottom:24px;}
  .ctable table{font-size:1.15rem;}
  .ctable thead th{font-size:1.35rem;padding:var(--lg) var(--md);}
  .ctable thead .ctable__ours{font-size:1.5rem;}
  .ctable tbody th{font-size:1rem;}
  .ctable td{font-size:1.1rem;}
  .ctable th,.ctable td{padding:var(--lg) var(--md);}

  /* ---- 流れ: 縦タイムライン（中央寄せ・大きめ） ---- */
  .flow-list{max-width:720px;gap:28px;}
  .flow-intro{max-width:720px;gap:var(--lg);padding:var(--lg) var(--lg) var(--lg) 22px;margin-bottom:28px;}
  .flow-step{gap:var(--lg);padding:var(--lg) var(--lg) var(--lg) 22px;}
  .flow-icon{flex-basis:72px;width:72px;height:72px;border-width:2px;}
  .flow-icon::before{width:36px;height:36px;}
  .flow-icon[data-icon="line-c"]{background-size:42px;}
  .flow-intro::before,
  .flow-step:not(:last-child)::before{left:58px;height:28px;width:3px;}
  .flow-intro::after,
  .flow-step:not(:last-child)::after{left:58px;top:calc(100% + 22px);width:12px;height:12px;
    border-right-width:3px;border-bottom-width:3px;}
  .flow-no{font-size:.82rem;}
  .flow-no--intro{font-size:1.25rem;}
  .flow-txt{font-size:1.35rem;}
  .flow-desc{font-size:1rem;margin-top:6px;}

  /* ---- 声: 写真＋テキスト横並び ---- */
  .review-list{max-width:1000px;gap:var(--xl);}
  .review{display:flex;align-items:center;gap:var(--xl);padding:var(--xl);}
  .review__photo{flex:0 0 300px;max-width:300px;margin:0;}
  .review__body{flex:1;}
  .review__headline{font-size:1.5rem;}
  .review__text{font-size:1rem;}

  /* ---- サロン: 地図と写真を横並び ---- */
  .salon__lead{font-size:1.05rem;max-width:720px;}
  .salon__wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--xl);align-items:center;}
  .salon__map,.salon__photo{margin:0;max-width:none;}

  /* ---- 料金: 単一プラン（中央・主役を大きく） ---- */
  .price__lead{font-size:2rem;line-height:1.7;}
  .price-banner{max-width:860px;}
  .price-cards--single{max-width:600px;}
  .price-card--primary{padding:var(--2xl) var(--xl);}
  .price-card__amount .num{font-size:4.4rem;}
  .price-card--primary .price-card__amount .num{font-size:6rem;}
  .price-card__yen{font-size:2rem;}
  .price-card__amount small{font-size:.95rem;}
  .price-card__label{font-size:1.4rem;}
  .price-card__tagline{font-size:1.25rem;line-height:1.7;}
  .price-card__badge{width:88px;height:88px;font-size:.78rem;top:-20px;}
  .price-feats{gap:20px;}
  .price-feats li{font-size:1.45rem;padding-left:46px;}
  .price-feats li::before{width:30px;height:30px;}
  .price-feats li::after{left:10px;width:7px;height:13px;border-right-width:3px;border-bottom-width:3px;}
  .price .note--dark{font-size:1rem;}

  /* ---- FAQ ---- */
  .faq-list{max-width:860px;margin:0 auto;}
  .faq-q{font-size:1.02rem;}
  .final__badges{max-width:560px;}
}