@charset "utf-8";
/* 髪えらび研究室 / 女性版 ------------------------------------------------ */

:root{
  --pink:#d94a76;
  --pink-d:#a82f56;
  --pink-l:#fff4f7;
  --pink-ll:#fffafc;
  --gold:#c09338;
  --ink:#33292d;
  --sub:#7d7176;
  --line:#f0dfe6;
  --bg:#faf6f7;
  --ok:#2e9e7a;
  --ng:#c85a5a;
  --w:600px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  /* 参考サイトの実測＝本文16px／行間1.4。行間だけは詰めすぎると読みにくいので1.65にしている */
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--pink-d)}
ul,ol{list-style:none}

.wrap{
  max-width:var(--w);
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 60px rgba(160,90,120,.10);
  overflow:hidden;
}
.inner{padding:0 18px}
.mincho{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Times New Roman",serif}

/* 強調 -------------------------------------------------------------- */
.mk{background:linear-gradient(transparent 58%,#ffe28f 58%);font-weight:700;padding:0 1px}
.rd{color:var(--pink);font-weight:700}
.bg{font-size:1.18em;font-weight:700}
.sm{font-size:11px;line-height:1.7;color:var(--sub)}

/* PR表記バー -------------------------------------------------------- */
.pr-bar{
  background:#4a4045;color:#fff;font-size:11px;line-height:1.6;
  padding:8px 16px;text-align:center;letter-spacing:.02em;
}
.pr-bar b{color:#ffd9e4}
.pr-bar a{color:#ffd9e4;text-decoration:underline}

/* サイトヘッダー ---------------------------------------------------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--line);background:#fff;
}
.site-head .logo{font-size:16px;font-weight:700;letter-spacing:.06em}
.site-head .logo span{color:var(--pink)}
.site-head .logo em{display:block;font-style:normal;font-size:9.5px;color:var(--sub);letter-spacing:.04em;font-weight:400;margin-top:2px}
.site-head .upd{font-size:10.5px;color:var(--sub);text-align:right;line-height:1.5}

/* 先頭のメインビジュアルと導入 -------------------------------------- */
.ph.mv{margin:0;border-radius:0}
.intro{
  padding:20px 18px 22px;
  background:linear-gradient(175deg,#fffafc 0%,#fdeef3 100%);
  border-bottom:1px solid var(--line);
}
.intro h1{font-size:22px;line-height:1.55;font-weight:700;letter-spacing:.01em}
.intro h1 .em{background:linear-gradient(transparent 60%,#ffd9e4 60%)}
.intro .hero-lead{font-size:15px;line-height:1.75;margin-top:12px;color:#4a4045}

/* ヒーロー（画像が無いときの代替） ---------------------------------- */
.hero{
  background:
    radial-gradient(120% 90% at 80% 0%, #ffe9f0 0%, rgba(255,233,240,0) 60%),
    linear-gradient(170deg,#fff8fa 0%,#fdeef3 55%,#f9e2ea 100%);
  padding:26px 18px 22px;position:relative;overflow:hidden;
}
.hero:after{
  content:"";position:absolute;right:-60px;bottom:-70px;width:200px;height:200px;
  border-radius:50%;background:rgba(255,255,255,.55);
}
.hero-sub{
  display:inline-block;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.16em;padding:4px 12px;border-radius:2px;position:relative;z-index:1;
}
.hero h1{
  font-size:26px;line-height:1.5;font-weight:700;margin:14px 0 0;position:relative;z-index:1;
  letter-spacing:.01em;
}
.hero h1 .em{
  background:linear-gradient(transparent 60%,#ffd9e4 60%);
}
.hero-lead{font-size:13.5px;line-height:1.9;margin-top:14px;position:relative;z-index:1;color:#4a4045}
.hero-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.hero-badges li{
  background:#fff;border:1px solid var(--pink);color:var(--pink-d);
  font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;letter-spacing:.02em;
}

/* 画像スロット ------------------------------------------------------ */
.slot{
  border:2px dashed #f0aac4;background:
    repeating-linear-gradient(-45deg,#fff8fb 0 10px,#ffeef4 10px 20px);
  border-radius:6px;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px 14px;margin:16px 0;gap:5px;
}
.slot .ico{font-size:22px;line-height:1}
.slot .no{
  background:var(--pink);color:#fff;font-size:10px;font-weight:700;
  border-radius:99px;padding:2px 9px;letter-spacing:.04em;
}
.slot .lb{font-size:12px;font-weight:700;color:var(--pink-d);line-height:1.6}
.slot.wide{min-height:210px}
.ph{margin:16px 0;border-radius:8px;overflow:hidden;background:#f7f4f5}
.ph img{width:100%}
.cause .ph{margin:0;border-radius:0;border-top:1px solid var(--line)}
.rank .ph{margin:0;border-radius:0}
.step + .ph{margin:0 0 6px;border-radius:8px}
/* 見出しの帯を画像で置いたもの。左右いっぱいに出す */
.bandimg{margin:26px 0}
.bandimg img{width:100%;display:block}

/* 絞り込み ---------------------------------------------------------- */
.finder{
  margin:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 2px 10px rgba(180,120,145,.07);
}
.finder-h{
  background:linear-gradient(100deg,var(--pink) 0%,#e0729a 100%);
  color:#fff;font-size:13.5px;font-weight:700;padding:11px 15px;letter-spacing:.04em;
}
.finder-h small{display:block;font-size:10.5px;font-weight:400;opacity:.9;letter-spacing:0}
.finder-b{padding:14px 15px 16px}
.fgroup{margin-bottom:13px}
.fgroup > .lb{font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin-bottom:6px}
.fopts{display:flex;flex-wrap:wrap;gap:6px}
.fopts label{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:6px 12px;font-size:12px;cursor:pointer;transition:.15s;user-select:none;
}
.fopts label:hover{border-color:#f0aac4}
.fopts input{accent-color:var(--pink);margin:0;width:13px;height:13px}
.fopts input:checked + span{color:var(--pink-d);font-weight:700}
.fopts label:has(input:checked){background:var(--pink-l);border-color:var(--pink)}
.fbtn{
  display:block;width:100%;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(100deg,var(--pink) 0%,#e0729a 100%);
  color:#fff;font-size:15px;font-weight:700;padding:13px;letter-spacing:.06em;
  box-shadow:0 4px 12px rgba(217,74,118,.32);font-family:inherit;
}
.fbtn:active{transform:translateY(1px)}
.fnote{font-size:10.5px;color:var(--sub);text-align:center;margin-top:8px}

/* 目次 -------------------------------------------------------------- */
.toc{margin:18px;border:1px solid var(--line);border-radius:10px;background:var(--pink-ll);padding:15px 17px}
.toc h2{font-size:13px;letter-spacing:.1em;color:var(--pink-d);margin-bottom:9px;font-weight:700}
.toc ol{counter-reset:t}
.toc li{counter-increment:t;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.toc li:last-child{border-bottom:0}
.toc li:before{
  content:counter(t,decimal-leading-zero);color:var(--pink);font-weight:700;
  font-size:11px;margin-right:9px;letter-spacing:.04em;
}
.toc a{color:var(--ink);text-decoration:none}

/* セクション見出し帯 ------------------------------------------------ */
.band{margin:34px 0 18px;text-align:center;position:relative}
.band .kicker{
  display:inline-block;background:var(--pink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.14em;padding:4px 14px;border-radius:99px;
}
.band h2{
  font-size:21px;line-height:1.5;font-weight:700;margin-top:11px;letter-spacing:.01em;padding:0 10px;
}
.band .rule{
  width:44px;height:2px;background:var(--pink);margin:12px auto 0;border-radius:2px;
}
.band.dark{background:linear-gradient(160deg,#3d3237,#544349);padding:22px 10px;margin:34px 0 0;border-radius:0}
.band.dark h2,.band.dark .kicker{color:#fff}
.band.dark .kicker{background:rgba(255,255,255,.16)}
.band.dark .rule{background:var(--gold)}

.lead{font-size:16px;line-height:1.75;margin:0 0 6px}

/* 原因カード -------------------------------------------------------- */
.cause{
  border:1px solid var(--line);border-radius:10px;margin:16px 0;overflow:hidden;background:#fff;
}
.cause-h{display:flex;align-items:center;gap:11px;padding:13px 15px;background:var(--pink-l)}
.cause-h .no{
  font-family:"Hiragino Mincho ProN",serif;font-size:24px;font-weight:700;color:var(--pink);
  line-height:1;letter-spacing:-.02em;
}
.cause-h h3{font-size:17px;line-height:1.5;font-weight:700}
.cause-b{padding:13px 15px 15px;font-size:16px;line-height:1.7}
.cause .slot{margin:0 15px 15px;min-height:130px}

/* 注意リスト -------------------------------------------------------- */
/* 医療と育毛剤の整理（旧「要注意」欄）。
   ⚠️2026-09-03 赤い「！」の警告デザインをやめた。
   文言は「薬は危ない」から「対象が違う」へ書き換えたのに、
   見た目が赤い警告のままでは、医薬品を否定している印象が残る。
   マイナチュレの提携レギュレーション（医薬品との比較・否定がNG）は
   文字だけでなく見せ方にも及ぶ。番号を振った中立の一覧にしてある。 */
.warn{border:1px solid var(--line);border-radius:10px;background:#fff;padding:6px 15px;margin:16px 0;counter-reset:wn}
.warn li{padding:13px 0;border-bottom:1px dashed var(--line);counter-increment:wn}
.warn li:last-child{border-bottom:0}
.warn h3{font-size:17px;font-weight:700;color:var(--pink-d);margin-bottom:5px;display:flex;gap:8px;align-items:flex-start}
.warn h3:before{content:counter(wn);flex:0 0 18px;height:18px;line-height:18px;text-align:center;background:var(--pink);color:#fff;border-radius:50%;font-size:11px;margin-top:3px;font-weight:700}
.warn p{font-size:16px;line-height:1.7;color:var(--ink)}

.disc{
  font-size:11px;line-height:1.8;color:var(--sub);background:#f7f4f5;
  border-radius:6px;padding:10px 12px;margin:14px 0;
}

/* 評価基準 ---------------------------------------------------------- */
.method{border:1px solid var(--line);border-radius:10px;padding:16px 15px;margin:16px 0;background:#fff}
.crit{margin-top:12px}
.crit li{padding:11px 0;border-bottom:1px dashed var(--line)}
.crit li:last-child{border-bottom:0}
.crit-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.crit-t b{font-size:13.5px}
.crit-t .pt{font-size:11px;color:var(--pink-d);font-weight:700;white-space:nowrap}
.crit-t .pt em{font-style:normal;font-size:19px;font-family:"Hiragino Mincho ProN",serif}
.crit-bar{height:5px;border-radius:99px;background:#f2e7eb;margin:6px 0 5px;overflow:hidden}
.crit-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),#eb8fae)}
.crit .nt{font-size:11.5px;color:var(--sub);line-height:1.7}

.notes{margin:14px 0 0;padding:12px 14px;background:#f7f4f5;border-radius:8px}
.notes li{font-size:11.5px;line-height:1.8;color:#5f5459;padding-left:14px;position:relative;margin-bottom:4px}
.notes li:last-child{margin-bottom:0}
.notes li:before{content:"※";position:absolute;left:0;color:var(--pink)}

/* 比較表 ------------------------------------------------------------ */
/* 参考サイトと同じ「項目が行・商品が列」。左の項目名は固定して、横に流しても見失わない */
.tbl-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 6px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
}
/* 参考サイトは 見出し61px＋商品81px×5＝466px で少し横スクロールする。
   こちらは**横スクロールなしで全部見える**のが狙い。
   ⚠️2026-09-03 列幅をピクセル固定（見出し53＋商品61×5＝358px）から割合に変えた。
   固定だと画面が狭い端末で必ずはみ出す（393pxの端末でも入れ物は340pxしかなく18px溢れていた）。
   割合なら幅がいくつでも必ず収まる。合計は 18 + 16.4×5 = 100%。左の項目名が折り返さない幅を確保している。 */
table.cmp{border-collapse:separate;border-spacing:0;font-size:10px;table-layout:fixed;width:100%}
table.cmp th,table.cmp td{
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;vertical-align:middle;padding:6px 2px;line-height:1.45;
}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp td:last-child{border-right:0}

/* 左の項目名（赤ベタ・固定） */
table.cmp th{
  width:18%;
  background:linear-gradient(100deg,var(--pink),#c93f69);
  color:#fff;font-size:10px;font-weight:700;line-height:1.35;letter-spacing:0;
  padding:6px 1px;
}
table.cmp td{width:16.4%;background:#fff}
table.cmp td.own{background:#fff4f8}

/* 中身 */
table.cmp .rk{
  display:inline-block;font-size:9px;font-weight:700;color:#fff;background:var(--sub);
  border-radius:3px;padding:0 5px;margin-bottom:3px;letter-spacing:.02em;
}
table.cmp td.own .rk{background:var(--gold)}
table.cmp .nm{
  display:block;font-size:10.5px;font-weight:700;line-height:1.35;
  color:var(--ink);text-decoration:none;
}
table.cmp td.own .nm{color:var(--pink-d)}
table.cmp .titem{width:100%;max-width:54px;height:auto;margin:0 auto;display:block;mix-blend-mode:multiply}
table.cmp .price{font-size:12.5px;font-weight:700;color:var(--pink);white-space:nowrap;display:block}
table.cmp .cn{display:block;font-size:9px;line-height:1.4;color:var(--sub);margin-top:1px}
table.cmp .score-n{font-size:16px;display:block}

/* ◎○△× */
.mk-a,.mk-b,.mk-c,.mk-d{display:block;font-size:22px;line-height:1.05;font-weight:700}
.mk-a{color:#d81b3f}
.mk-b{color:#e8912b}
.mk-c{color:#7fb2d9}
.mk-d{color:#b9adb2}

/* 表の中のボタン */
.tbtn{
  display:block;text-decoration:none;border-radius:4px;padding:7px 1px;
  background:#e8912b;color:#fff;font-size:10px;font-weight:700;letter-spacing:0;
}
/* 1位だけ「公式を見る」で文字数が多く、列幅の中で折り返していた。
   列を割合にして少し狭くなったぶん、ここだけ字間と文字を詰めて1行に収める。 */
.tbtn.top{background:linear-gradient(100deg,#2fa36f,#1d8455);box-shadow:0 2px 0 #146643;
  font-size:9px;letter-spacing:-.4px;white-space:nowrap}

.tbl-hint{font-size:10.5px;color:var(--sub);text-align:right;margin-bottom:12px}

/* 星 ---------------------------------------------------------------- */
.stars{position:relative;display:inline-block;color:#e4dade;letter-spacing:.06em;white-space:nowrap;font-size:13px}
.stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#eda428;font-style:normal}
.score-n{font-family:"Hiragino Mincho ProN",serif;font-weight:700;color:var(--pink-d)}

/* ランキングカード -------------------------------------------------- */
.rank{
  border:1px solid var(--line);border-radius:12px;margin:22px 0;background:#fff;overflow:hidden;
  box-shadow:0 2px 12px rgba(180,120,145,.07);
}
.rank.top{border:2px solid var(--gold);box-shadow:0 4px 20px rgba(192,147,56,.18)}
.rank-h{padding:15px 16px 13px;background:var(--pink-l);position:relative}
.rank.top .rank-h{background:linear-gradient(150deg,#fdf6e6,#faeed6)}
.crown{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.crown .medal{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;background:#b6a9ae;flex:0 0 30px;
  font-family:"Hiragino Mincho ProN",serif;
}
.rank.top .crown .medal{background:linear-gradient(150deg,#e3bc63,#bf8f2c);box-shadow:0 2px 6px rgba(191,143,44,.4)}
.rank[data-rank="2"] .crown .medal{background:linear-gradient(150deg,#c9ccd1,#9aa0a8)}
.rank[data-rank="3"] .crown .medal{background:linear-gradient(150deg,#d8ac8a,#b3835c)}
.crown .lab{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.rank.top .crown .lab{color:#9a7420}
.rank-h h3{font-size:17px;line-height:1.45;font-weight:700}
.rank-h .maker{font-size:10.5px;color:var(--sub);margin-top:2px}
.rank-h .catch{font-size:14.5px;line-height:1.65;margin-top:7px;color:#4a4045}
.rank-h .catch b{background:linear-gradient(transparent 60%,#ffe28f 60%)}

.rank-score{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:#fff;
}
.rank-score .tot{text-align:center;flex:0 0 auto;line-height:1.1}
.rank-score .tot .n{font-size:30px;font-family:"Hiragino Mincho ProN",serif;font-weight:700;color:var(--pink-d)}
.rank-score .tot .n small{font-size:12px;color:var(--sub);font-weight:400}
.rank-score .tot .l{font-size:9.5px;color:var(--sub);letter-spacing:.1em}
.rank-score .bars{flex:1 1 auto;min-width:0}
.rank-score .bars li{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--sub);margin-bottom:3px}
.rank-score .bars li:last-child{margin-bottom:0}
.rank-score .bars .nm2{flex:0 0 106px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-score .bars .br{flex:1 1 auto;height:4px;background:#f2e7eb;border-radius:99px;overflow:hidden}
.rank-score .bars .br i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),#eb8fae);border-radius:99px}
.rank-score .bars .vl{flex:0 0 30px;text-align:right;font-variant-numeric:tabular-nums}

.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:104px;color:var(--sub);font-weight:700;font-size:11.5px;background:#fbf8f9;white-space:nowrap}
.spec td b{color:var(--pink);font-size:16px}
.spec td .u{font-size:11px;color:var(--sub);display:block;line-height:1.7}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

.rank-body{padding:14px 16px 4px}
.plist{margin-bottom:12px}
.plist > .lb{font-size:11.5px;font-weight:700;letter-spacing:.08em;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.plist.good > .lb{color:var(--ok)}
.plist.bad > .lb{color:var(--ng)}
.plist > .lb:after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.plist li{font-size:15.5px;line-height:1.7;padding-left:19px;position:relative;margin-bottom:6px}
.plist li:last-child{margin-bottom:0}
.plist.good li:before{content:"◎";position:absolute;left:0;color:var(--ok);font-size:11px}
.plist.bad li:before{content:"△";position:absolute;left:0;color:var(--ng);font-size:11px}

/* 2〜3位：主要スペックだけの帯 ------------------------------------- */
.minispec{display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.minispec li{
  flex:1 1 50%;padding:9px 14px;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--line);
}
.minispec li:nth-child(odd){border-right:1px solid var(--line)}
.minispec li span{display:block;font-size:10.5px;color:var(--sub);font-weight:400;letter-spacing:.04em}
.minispec li b{color:var(--pink);font-size:16px}

/* 4〜5位：1行カード ------------------------------------------------ */
.rank.mini{margin:12px 0}
.mini-in{display:flex;align-items:center;gap:11px;padding:13px 14px}
.mini-in .medal{flex:0 0 26px;width:26px;height:26px;font-size:12px}
.mini-tx{flex:1 1 auto;min-width:0}
.mini-tx h3{font-size:14.5px;font-weight:700;line-height:1.4}
.mini-tx .catch{font-size:11.5px;color:var(--sub);line-height:1.6;margin-top:2px}
.mini-sc{flex:0 0 auto;text-align:center;line-height:1.15}
.mini-sc .score-n{display:block;font-size:21px}
.mini-ft{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;background:var(--pink-ll);border-top:1px solid var(--line);
}
.mini-price{font-size:12px;color:var(--sub)}
.mini-price b{font-size:16px;color:var(--pink)}
.mini-ft a{font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}

/* たたむ（評価基準） ------------------------------------------------ */
.acc{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:14px}
.acc-q{
  width:100%;text-align:left;background:var(--pink-l);border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--pink-d);padding:12px 38px 12px 15px;position:relative;
}
.acc-q:after{
  content:"";position:absolute;right:16px;top:17px;width:8px;height:8px;
  border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(45deg);transition:.22s;
}
.acc.open .acc-q:after{transform:rotate(-135deg);top:20px}
.acc-a{display:none;padding:14px 15px 16px}
.acc.open .acc-a{display:block}

/* 運営者情報（本文末の短い版） -------------------------------------- */
.policy.short p{font-size:11.5px}
.policy.short a{color:var(--pink-d)}

.topic{
  margin:12px 0 14px;padding:11px 13px;border-left:3px solid var(--gold);background:#fdf9f0;
  font-size:12px;line-height:1.85;color:#5d5348;
}
.topic b{color:#8a6a1c}

/* CTA --------------------------------------------------------------- */
.cta{padding:4px 16px 18px}
/* いちばん下のCTAだけ、下の余白を詰める。
   注記のあとに白い帯が空いてから濃いフッターが来るのが、切れ残りに見えていた。
   （フッター自身も padding:18px を持っているので、こちらは0でよい） */
.inner:has(+ footer) .cta:last-child{padding-bottom:0}
.cta .pre{font-size:12px;text-align:center;color:var(--sub);margin-bottom:8px}
.btn{
  display:block;text-decoration:none;text-align:center;border-radius:99px;
  background:linear-gradient(100deg,var(--pink) 0%,#eb7ba0 100%);
  color:#fff;font-size:16.5px;font-weight:700;padding:16px 14px;letter-spacing:.04em;
  box-shadow:0 5px 16px rgba(217,74,118,.34);position:relative;overflow:hidden;
}
.btn small{display:block;font-size:10.5px;font-weight:400;opacity:.92;letter-spacing:.02em;margin-top:2px}
.btn:after{
  content:"";position:absolute;top:-60%;left:-60%;width:40%;height:220%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:rotate(18deg);animation:sh 3.4s ease-in-out infinite;
}
@keyframes sh{0%{left:-60%}55%{left:130%}100%{left:130%}}
.btn.plain{background:#fff;color:var(--pink-d);border:1.5px solid var(--pink);box-shadow:none;font-size:14.5px;padding:13px}
.btn.plain:after{display:none}
.cta .post{font-size:10.5px;color:var(--sub);text-align:center;margin-top:8px;line-height:1.7}

/* オファー箱 -------------------------------------------------------- */
.offer{
  margin:20px 18px;border:2px solid var(--pink);border-radius:12px;overflow:hidden;background:#fff;
}
.offer-h{background:var(--pink);color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:700;letter-spacing:.06em}
.offer-b{padding:16px 16px 6px;text-align:center}
.offerimg{width:100%;border-radius:6px;margin-bottom:4px}
.offer .was{font-size:12px;color:var(--sub);text-decoration:line-through}
.offer .now{font-family:"Hiragino Mincho ProN",serif;line-height:1;margin:6px 0 4px}
.offer .now .n{font-size:52px;font-weight:700;color:var(--pink);letter-spacing:-.02em}
.offer .now .y{font-size:20px;font-weight:700;color:var(--pink)}
.offer .cond{font-size:11.5px;color:var(--sub);line-height:1.8}
.offer ul{margin:12px 0 4px;text-align:left}
.offer ul li{font-size:12.5px;padding:6px 0 6px 21px;position:relative;border-bottom:1px dashed var(--line)}
.offer ul li:last-child{border-bottom:0}
.offer ul li:before{content:"✓";position:absolute;left:2px;color:var(--pink);font-weight:700}

/* ケアステップ ------------------------------------------------------ */
.step{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:0}
.step .n{
  flex:0 0 34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  font-family:"Hiragino Mincho ProN",serif;
}
.step h3{font-size:14.5px;font-weight:700;margin-bottom:4px}
.step p{font-size:16px;line-height:1.7}

/* Q&A --------------------------------------------------------------- */
.qa{margin:16px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qa-i{border-bottom:1px solid var(--line)}
.qa-i:last-child{border-bottom:0}
.qa-q{
  width:100%;text-align:left;background:#fff;border:0;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:700;line-height:1.55;color:var(--ink);
  padding:13px 40px 13px 44px;position:relative;
}
.qa-q:before{
  content:"Q";position:absolute;left:15px;top:13px;width:20px;height:20px;line-height:20px;
  text-align:center;background:var(--pink);color:#fff;border-radius:50%;font-size:11px;
}
.qa-q:after{
  content:"";position:absolute;right:17px;top:20px;width:8px;height:8px;
  border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(45deg);transition:.22s;
}
.qa-i.open .qa-q:after{transform:rotate(-135deg);top:23px}
.qa-i.open .qa-q{background:var(--pink-l)}
.qa-a{display:none;padding:13px 16px 15px 44px;font-size:16px;line-height:1.8;background:var(--pink-ll);position:relative;color:#4d4247}
.qa-a:before{
  content:"A";position:absolute;left:15px;top:13px;width:20px;height:20px;line-height:20px;
  text-align:center;background:#8d8085;color:#fff;border-radius:50%;font-size:11px;font-weight:700;
}
.qa-i.open .qa-a{display:block}
.more{
  display:block;width:100%;margin:12px 0 0;border:1.5px solid var(--pink);background:#fff;
  color:var(--pink-d);border-radius:99px;padding:11px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;
}

/* 運営者情報 -------------------------------------------------------- */
.policy{background:#f7f4f5;padding:20px 18px;margin-top:34px}
.policy h2{font-size:14px;font-weight:700;letter-spacing:.06em;margin-bottom:10px;color:#4a4045}
.policy h3{font-size:12px;font-weight:700;margin:14px 0 4px;color:var(--pink-d)}
.policy p{font-size:11.5px;line-height:1.9;color:#5f5459}
.policy dl{margin-top:10px;font-size:11.5px;line-height:1.9}
.policy dt{float:left;clear:left;width:78px;color:var(--sub);font-weight:700}
.policy dd{margin-left:78px;color:#5f5459}

footer{background:#3d3237;color:#c9bcc1;text-align:center;padding:18px;font-size:10.5px;line-height:1.9}
footer a{color:#e9c9d5;text-decoration:none;margin:0 7px;white-space:nowrap}
footer .cr{margin-top:9px;opacity:.6}

/* 利用者の声 -------------------------------------------------------- */
.voice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;margin:10px 0;background:#fff}
.voice .av{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover}
.voice .who{font-size:12px;font-weight:700;color:var(--pink-d)}
.voice .vx{font-size:15.5px;line-height:1.75;margin-top:4px}
.voice.todo{background:repeating-linear-gradient(-45deg,#fff8fb 0 10px,#ffeef4 10px 20px);
  border:2px dashed #f0aac4}
.voice.todo .vx{color:#8a5c69;font-size:12px}

/* ポップアップ ------------------------------------------------------ */
.popup{position:fixed;inset:0;z-index:80;background:rgba(45,35,40,.62);
  display:flex;align-items:center;justify-content:center;padding:22px}
.popup[hidden]{display:none}
.pbox{position:relative;width:100%;max-width:340px;background:#fff;border-radius:14px;
  padding:26px 20px 20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.pcl{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;background:none;
  font-size:20px;color:var(--sub);cursor:pointer;line-height:1}
.pk{display:inline-block;background:var(--pink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.1em;padding:4px 13px;border-radius:99px}
.pt{font-size:14px;font-weight:700;margin-top:12px}
.pn{font-family:"Hiragino Mincho ProN",serif;color:var(--pink);line-height:1;margin:6px 0 4px}
.pn span{font-size:52px;font-weight:700;letter-spacing:-.02em}
.pc{font-size:11px;color:var(--sub);line-height:1.7;margin-bottom:14px}
.pskip{display:block;width:100%;margin-top:10px;border:0;background:none;
  font-size:12px;color:var(--sub);text-decoration:underline;cursor:pointer;font-family:inherit}

/* 追従バー ---------------------------------------------------------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .28s ease;
  box-shadow:0 -4px 18px rgba(160,90,120,.14);
}
.sticky.on{transform:translateY(0)}
.sticky .in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:10px}
.sticky .tx{flex:1 1 auto;font-size:11px;line-height:1.5;color:var(--sub);min-width:0}
.sticky .tx b{display:block;font-size:13px;color:var(--ink)}
.sticky .btn{flex:0 0 auto;width:auto;padding:11px 20px;font-size:14px}
.sticky .cl{
  position:absolute;right:8px;top:-26px;width:26px;height:26px;border-radius:50%;
  background:rgba(61,50,55,.75);color:#fff;border:0;cursor:pointer;font-size:13px;line-height:26px;
}

/* 検索結果ページ ---------------------------------------------------- */
.res-head{padding:16px 18px 4px}
.res-head h1{font-size:19px;font-weight:700;line-height:1.5}
.res-cnt{font-size:12.5px;color:var(--sub);margin-top:5px}
.res-cnt b{color:var(--pink);font-size:20px;font-family:"Hiragino Mincho ProN",serif}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 18px 0}
.chips span{background:var(--pink-l);border:1px solid var(--line);color:var(--pink-d);font-size:11px;border-radius:99px;padding:3px 10px}
.sorter{display:flex;gap:6px;margin:14px 18px 0}
.sorter button{
  flex:1 1 auto;border:1px solid var(--line);background:#fff;border-radius:6px;padding:8px 4px;
  font-size:11.5px;cursor:pointer;font-family:inherit;color:var(--sub);
}
.sorter button.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}
.empty{text-align:center;padding:40px 20px;color:var(--sub);font-size:13px}

/* PC ---------------------------------------------------------------- */
@media (min-width:680px){
  body{background:
    radial-gradient(90% 60% at 50% 0%, #fdeef3 0%, rgba(253,238,243,0) 70%),
    var(--bg);}
  .wrap{margin:0 auto;min-height:100vh}
}