/* ============================================================
   pado media — スタイル（apex のメディアだけが読む。/shop は style.css）

   トンマナ: 淡い / まるい / 静か / 面で語る（ブランドガイドライン v1.1）
   面積の目安: Surface 62% / White 22% / Coral 11% / Ink 5%
   角丸: 11 / 14 / 22 / 30、ピルは 999（ロゴの 24% コーナーに合わせる）
   影: 黒禁止。rgb(74 44 44) を低い不透明度で2層
   書体: Quicksand（英字・数字） / Zen Maru Gothic（和文見出し） / Zen Kaku Gothic New（本文）
   極端にする1箇所: 現地ランキングの順位数字と、K / T の国別入口の面
   ★ 2026-09-06: PCでもモバイル版だけを出す。@media(min-width:*) はすべて 99999px に無効化し、
     本文は 500px の1カラムを中央に置く（ベンチマーク: powderroom.co.kr）。
   ============================================================ */

:root,:host{
  --b-0:#FEF7F4; --b-100:#FDECE6; --b-200:#FBDACF; --b-300:#F8C3B3; --b-400:#F4AE9A;
  --b-500:#F09A85; --b-600:#D9694E; --b-700:#B14A31; --b-800:#7E3320;
  --g-50:#FBF7F8; --g-100:#F5EFF0; --g-200:#EDE4E5; --g-300:#DCCFD1; --g-400:#AC9EA1; --g-450:#928387;
  --g-500:#77686C; --g-600:#5A4E51; --g-700:#43393B; --g-800:#302729;
  --pa:var(--b-400); --pa-soft:var(--b-100); /* 記事 v2 のパステルオレンジ。線・縦棒・点・「・」はここだけを参照する */
  --surface:#FBF6F3; --white:#fff; --ink:#2E2528; --ink-soft:#6A5A5E;
  --kr:#4A7264; --kr-bg:#E6EEE9; --kr-deep:#2F5044;
  --th:#C08A2C; --th-bg:#FBEEDA; --th-deep:#8A5F14;
  --sh-sm:0 1px 2px rgb(74 44 44/.06),0 1px 3px rgb(74 44 44/.10);
  --sh-md:0 2px 4px -2px rgb(74 44 44/.06),0 6px 14px -4px rgb(74 44 44/.10);
  --sh-lg:0 4px 6px -2px rgb(74 44 44/.04),0 16px 28px -8px rgb(74 44 44/.12);
  --r-s:11px; --r-m:14px; --r-l:22px; --r-xl:30px;
  --f-en:"Quicksand","Zen Maru Gothic",sans-serif;
  --f-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --max:500px;
  --hdr:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 8px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.78;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
/* ★ el.hidden で出し分ける要素が .row{display:grid} などに負けて消えない事故を防ぐ。
   author の display 指定より強くしておく（絞り込みが効かない不具合の再発防止） */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--b-100);color:var(--b-800)}
:focus-visible{outline:2px solid var(--b-600);outline-offset:3px;border-radius:6px}

/* ---------- type ---------- */
.en{font-family:var(--f-en);font-weight:600;letter-spacing:-.02em}
.lab{font-family:var(--f-en);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--g-500)}
.h-ja{font-family:var(--f-ja);font-weight:700;letter-spacing:.01em;line-height:1.35}
.h1{font-size:clamp(1.6rem,1.15rem + 2vw,2.5rem)}
.h2{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.8rem)}
.h3{font-size:clamp(1.05rem,.95rem + .5vw,1.25rem)}
.num{font-family:var(--f-en);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.soft{color:var(--ink-soft)}
.small{font-size:.86rem}
.cap{font-size:.78rem;color:var(--g-500);letter-spacing:.04em}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgb(251 246 243/.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--g-200)}
.hd__in{height:var(--hdr);display:flex;align-items:center;gap:1rem;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.hd__logo{display:flex;align-items:center;gap:.7rem;flex:none}
.hd__logo img{width:56px;height:56px;border-radius:14px}
@media(min-width:99999px){.hd__logo img{width:64px;height:64px;border-radius:16px}}
.hd__logo span{font-family:var(--f-en);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-500);display:none}
@media(min-width:99999px){.hd__logo span{display:block}}
.hd__clock{margin-left:auto;font-family:var(--f-en);font-weight:600;font-size:.7rem;letter-spacing:.06em;color:var(--g-500);white-space:nowrap;display:none}
@media(min-width:99999px){.hd__clock{display:block}}
.hd__shop{flex:none;margin-left:auto;padding:.55rem 1.05rem;border-radius:999px;background:var(--b-700);color:#fff;font-family:var(--f-en);font-weight:700;font-size:.8rem;letter-spacing:.1em;box-shadow:var(--sh-sm);transition:transform .15s,background .15s}
@media(min-width:99999px){.hd__shop{margin-left:1rem}}
.hd__shop:hover{background:var(--b-800);transform:translateY(-1px)}

/* tabs: モバイルはヘッダー下に固定の横並び、デスクトップはヘッダー内 */
.tabs{position:sticky;top:var(--hdr);z-index:49;background:var(--surface);border-bottom:1px solid var(--g-200)}
.tabs__in{display:flex;gap:0;justify-content:space-between;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);overflow-x:auto;scrollbar-width:none}
.tabs__in::-webkit-scrollbar{display:none}
.tab{flex:none;padding:.8rem .15rem .6rem;font-family:var(--f-en);font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--g-500);border-bottom:2.5px solid transparent;display:flex;flex-direction:column;align-items:center;gap:.05rem;transition:color .15s}
.tab small{font-family:var(--f-body);font-weight:500;font-size:.6rem;letter-spacing:0;color:var(--g-500);white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-current]{color:var(--ink);border-color:var(--b-500)}
.tab[aria-current] small{color:var(--b-600)}
@media(min-width:99999px){
  .tabs{position:static;background:transparent;border:0}
  .tabs__in{padding:0;justify-content:center;gap:.5rem}
  .tab{padding:.4rem .9rem;font-size:.78rem;letter-spacing:.18em}
  .tab small{font-size:.66rem;letter-spacing:.04em}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(2.4rem,6vw,4.5rem)}
.sec--tint{background:var(--white)}
.sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.1rem,3vw,1.8rem)}
.sec__hd .h-ja{margin-top:.25rem}
.more{font-family:var(--f-en);font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--b-700);white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
.more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
/* 見出し番号。見出しに対する相対（em）だと h2/h3 で 2.1〜2.2 倍まで膨らんで
   見出しより番号のほうが目立っていた。本文（16px）の 2 倍に固定して、
   ベースラインも見出しに揃える（2026-09-08 の指摘） */
.n{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:2rem;line-height:1;color:var(--b-600);margin-right:.28rem;letter-spacing:-.045em;vertical-align:-.02em}

/* ---------- rails ---------- */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 min(72vw,300px)}
/* 商品カードを流すレール。記事カードの幅だと1枚で画面が埋まる */
.rail--sm>*{flex:0 0 min(46vw,190px)}
.rail__dots{display:flex;justify-content:center;gap:6px;margin-top:.2rem}
.rail__dots i{width:6px;height:6px;border-radius:999px;background:var(--g-300)}
.rail__dots i.on{background:var(--b-500);width:18px}
@media(min-width:99999px){
  .rail{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:20px;overflow:visible;margin:0;padding:0}
  .rail>*{flex:auto}
  .rail__dots{display:none}
}

/* ---------- cards ---------- */
.card{background:var(--white);border-radius:var(--r-l);box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.card__img{aspect-ratio:4/3;background:var(--g-100);position:relative;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
/* 縦長スロットは廃止。元画像が横長のブランド写真なので、縦に敷くと引き伸ばしになる */
.card__img--tall{aspect-ratio:4/3}
.card__img--sq{aspect-ratio:1}
.card__body{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card__t{font-family:var(--f-ja);font-weight:700;font-size:1rem;line-height:1.45;letter-spacing:0}
.card__m{font-size:.8rem;color:var(--g-500)}
.card__foot{margin-top:auto;padding-top:.55rem;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}

/* status badge（.st）は 2026-09-11 に削除した。
   日本での取り扱い状況をサイトに出さない方針に変えたため、出力側から消えている。 */

/* country chip: 国旗。KR / TH の略記だと読み手が国を当てなければならない。
   絵文字の国旗は Windows が字形を持たず2文字のまま出るので、SVG を <img> で読む */
.cc{display:inline-block;width:20px;height:13px;border-radius:2px;overflow:hidden;vertical-align:-2px;box-shadow:0 0 0 .5px rgb(74 44 44/.28)}
.cc img{width:100%;height:100%;display:block;object-fit:cover}
/* 国の選択ボタン。国旗そのものが選択肢なので、文字は置かず面積で押しやすさを出す */
.cc--pick{width:36px;height:24px;border-radius:3px;vertical-align:middle;box-shadow:0 0 0 .5px rgb(74 44 44/.3)}
.fil .cpick{padding:0 .9rem}
.chtab__b.cpick{gap:0}
/* 選択中は面が色づくので、国旗の白地が地色に負けないよう縁を強める */
.fil .cpick[aria-pressed=true] .cc--pick,.chtab__b.cpick[aria-selected=true] .cc--pick{box-shadow:0 0 0 1.5px rgb(255 255 255/.9)}

/* ---------- hero (top) ---------- */
.hero{padding:clamp(1.6rem,5vw,3.4rem) 0 clamp(1.2rem,3vw,2rem)}
.hero__grid{display:grid;gap:1.4rem}
@media(min-width:99999px){.hero__grid{grid-template-columns:7fr 5fr;align-items:end}}
.hero h1{font-size:clamp(1.75rem,1.1rem + 3vw,3rem)}
.hero h1 em{font-style:normal;color:var(--b-600)}
.hero__lead{max-width:34em;margin-top:.9rem;color:var(--ink-soft)}
.hero__stat{display:grid;grid-template-columns:repeat(3,auto);gap:1.4rem;justify-content:start}
.hero__stat b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.hero__stat span{font-size:.74rem;color:var(--g-500);letter-spacing:.06em}

/* ---------- 1. trend / ranking ----------
   2026-09-20: カードを1件ずつ並べる形から、1つの白いカードの中で罫線に区切る形に変えた
   （GlowPick を参考に）。ブランド → 商品名 → 口コミの順で積む。 */
.rank{background:var(--white);border-radius:var(--r-l);box-shadow:var(--sh-sm);overflow:clip}  /* clip であって hidden ではない。hidden にすると .rank 自体がスクロールの器になり、     中の 1位（position:sticky）の top が画面ではなく .rank の上端から数えられて、     開いた瞬間に1位が3位の位置まで落ちる（2026-09-21 指摘）。clip は器を作らない */
/* 見出しが長いランキングは、見出し＋日付を左、シェブロンを右の中央に置く（GlowPick と同じ並び） */
.sec__hd.sec__hd--row{flex-direction:row;align-items:center}
.sec__hd.sec__hd--row .more{align-self:center;margin-top:0}
.sec__hd--row .cap{display:block;margin-top:.2rem}
.rank__item{position:relative;border-bottom:1px solid var(--g-200)}
.rank__item:last-child{border-bottom:0}
/* 4位以降を畳んでいる間は、見えている最後の行（3位）の罫線を消す */
.rank--collapsed .rank__item:nth-child(3){border-bottom:0}
/* 開いているあいだは1位だけ上に残す。4位以降を見ながら、何と比べているか見失わないように */
.rank:not(.rank--collapsed) .rank__item:first-child{position:sticky;top:calc(var(--stickh,0px) + var(--chtabh,62px));z-index:6;background:var(--white);box-shadow:0 10px 16px -14px rgb(74 44 44/.5)}
.rank__item[hidden]{display:none}
.rank__card{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.9rem 1rem .9rem .9rem}
.rank__n{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:clamp(3rem,2.2rem + 3vw,4.6rem);line-height:.9;letter-spacing:-.05em;color:var(--b-500);width:1.4em;text-align:right}
.rank__n small{font-size:max(11px,.32em);letter-spacing:.1em;font-style:normal;margin-left:.1em;color:var(--b-800)}
.rank__img{width:64px;height:64px;border-radius:var(--r-m);object-fit:cover;background:var(--g-100)}
.rank__body{display:flex;gap:.7rem;align-items:center;min-width:0}
.rank__info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.rank__b{font-size:.72rem;font-weight:700;color:var(--g-500)}
.rank__t{font-weight:700;font-size:.95rem;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rank__rv{display:block;margin-top:.15rem;font-size:.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__rv b{font-family:var(--f-en);color:var(--b-700);font-weight:700;letter-spacing:0}
/* 幅の狭い端末では件数を落とす。評点と出典名は必ず残す（出典の無い評点は出さない約束） */
@media(max-width:400px){.rank__cnt{display:none}}

/* ---------- 4. country entrance（極端にする面） ---------- */
.country{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
@media(min-width:99999px){.country{gap:20px;margin:0;padding:0}}
.pane{position:relative;border-radius:var(--r-xl);padding:clamp(1.2rem,4vw,2.4rem) clamp(1rem,3vw,2rem);min-height:clamp(180px,32vw,300px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.pane:hover{transform:translateY(-3px)}
.pane--kr{background:var(--kr) center/cover no-repeat}
.pane--kr{background-image:linear-gradient(170deg,rgb(47 80 68/.42),rgb(47 80 68/.88)),url(/assets/media/country-kr.webp)}
.pane--th{background:var(--th) center/cover no-repeat}
.pane--th{background-image:linear-gradient(170deg,rgb(138 95 20/.40),rgb(138 95 20/.86)),url(/assets/media/country-th.webp)}
.pane__k{font-family:var(--f-en);font-weight:700;font-size:clamp(4.2rem,3rem + 9vw,12rem);line-height:.8;letter-spacing:-.06em;position:absolute;top:-.02em;right:-.04em;opacity:.22;pointer-events:none}
.pane h3{font-family:var(--f-en);font-weight:700;font-size:clamp(1.05rem,.9rem + 1vw,1.6rem);letter-spacing:.02em}
.pane p{font-size:.82rem;opacity:.92;margin-top:.15rem;line-height:1.5}
.pane p b{display:block;margin:0;padding:0;background:none;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.pane b{display:inline-block;margin-top:.7rem;font-family:var(--f-en);font-weight:700;font-size:.72rem;letter-spacing:.16em;padding:.35rem .75rem;border-radius:999px;background:rgb(255 255 255/.18)}

/* ---------- 3 / 6 list rows ---------- */
.rows{display:grid;gap:10px}
@media(min-width:99999px){.rows{grid-template-columns:1fr 1fr;gap:14px 20px}}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;background:var(--white);border-radius:var(--r-m);padding:.7rem .9rem .7rem .7rem;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s}
.row:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.row__img{width:56px;height:56px;border-radius:var(--r-s);object-fit:cover;background:var(--g-100)}
.row__img--circ{border-radius:999px;object-fit:contain;background:var(--white);box-shadow:inset 0 0 0 1px var(--g-200);padding:6px}
.row__t{display:block;font-weight:700;font-size:.95rem;line-height:1.4}
.row__m{display:block;font-size:.78rem;color:var(--g-500)}
/* 商品行の右端。価格（現地＋参考円）とバッジを縦に積む。
   メタ行に価格を混ぜると 340px 幅で切り詰められて金額が消える（2026-09-08） */
.prow__r{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;text-align:right}
.row__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* バッジの文言が長くなった分、行のメタは 2 行まで折り返す。
   1 行固定だと「タイ・スキンケア・4品」が「タイ・スキン…」に削られて品数が消える（2026-09-08） */
.row__m{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row__body{min-width:0}
.mono{display:grid;place-items:center;font-family:var(--f-en);font-weight:700;font-size:1.3rem;color:var(--b-600);background:var(--b-100)}

/* ---------- 5. category grid（大カテゴリの入口。実写を使う） ---------- */
/* ---------- カテゴリのアイコン列（トップ・カテゴリ一覧の最上部） ----------
   利用頻度がいちばん高い入口なので、検索窓のすぐ下に置く。
   線画アイコンは既製品に見えるので、そのカテゴリに載っている実際の取扱商品の写真を丸く抜く。 */
.cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem .4rem;margin-top:1rem}
.cstrip__i{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.cstrip__ph{width:clamp(58px,17vw,76px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--white);box-shadow:var(--sh-sm),inset 0 0 0 1.5px var(--b-100);display:grid;place-items:center;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
/* mix-blend-mode:multiply は Chrome で2枚目以降が描画されない事故が出たので使わない（2026-09-08） */
.cstrip__ph img{width:100%;height:100%;object-fit:cover}
/* カテゴリごとに地の色を変える（同じ色で並べると見分けがつかない） */
.cstrip__i[data-c=skincare] .cstrip__ph{background:var(--kr-bg)}
.cstrip__i[data-c=basemake] .cstrip__ph{background:var(--b-100)}
.cstrip__i[data-c=pointmake] .cstrip__ph{background:var(--b-200)}
.cstrip__i[data-c=haircare] .cstrip__ph{background:var(--g-100)}
.cstrip__i[data-c=bodycare] .cstrip__ph{background:var(--th-bg)}
.cstrip__i[data-c=fragrance] .cstrip__ph{background:var(--g-200)}
.cstrip__mono{font-family:var(--f-en);font-style:normal;font-weight:700;font-size:1.6rem;color:var(--b-300)}
.cstrip__i:hover .cstrip__ph,.cstrip__i:focus-visible .cstrip__ph{transform:translateY(-3px);box-shadow:var(--sh-md),inset 0 0 0 1.5px var(--b-300)}
.cstrip__i:active .cstrip__ph{transform:scale(.94)}
.cstrip__i b{font-family:var(--f-ja);font-weight:700;font-size:.78rem;line-height:1.25;letter-spacing:-.01em}
.cstrip__n{font-family:var(--f-body);font-weight:700;font-size:.66rem;color:var(--g-500);letter-spacing:.02em}
.cstrip__n b{font-family:var(--f-en);font-size:1.12em;letter-spacing:-.02em}
.cstrip__i[aria-current] b{color:var(--b-700)}
.cstrip__i[aria-current] .cstrip__ph{box-shadow:var(--sh-md),inset 0 0 0 2px var(--b-500)}

/* ---------- アイコン 5×2（トップだけ。GlowPick 参考） ----------
   上段5つは固定の入口（絵は生成済みアイコン、無ければ頭文字）。下段は大カテゴリ5つ（実際の商品写真、白地＋墨線）。
   5列は幅が厳しいので、字間を詰めて1行に収める（「ポイントメイク」で実測。2026-09-20） */
.igrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem .9rem;margin-top:1.1rem;margin-inline:calc(var(--gutter)*-1 + .3rem);padding-inline:.3rem}  /* 隙間は glowpick に合わせる（あちらはタイル78pxに対し横15px・縦16px＝幅の約19%）。     .2rem だと実測3pxで、タイルが繋がって1枚の帯に見えていた */
.igrid__i{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;min-width:0}
.igrid__ph{width:100%;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:var(--g-100);display:grid;place-items:center;box-shadow:var(--sh-sm);transition:transform .18s var(--ease-spring),box-shadow .18s}
.igrid__i:hover .igrid__ph,.igrid__i:focus-visible .igrid__ph{transform:translateY(-2px);box-shadow:var(--sh-md)}
.igrid__i:active .igrid__ph{transform:scale(.94)}
.igrid__ph img{width:62%;height:62%;object-fit:contain;mix-blend-mode:multiply}
.igrid__mono{font-family:var(--f-en);font-style:normal;font-weight:700;font-size:1.4rem;color:var(--b-300)}
.igrid__i b{font-family:var(--f-ja);font-weight:700;font-size:11px;line-height:1.15;white-space:nowrap;letter-spacing:-.05em}
/* 上段は淡い地色を1つずつ変える（全部同じ色にしない）。プレゼントだけ coral 寄りにして目立たせる */
.igrid__i:nth-child(1) .igrid__ph{background:var(--kr-bg)}
.igrid__i:nth-child(2) .igrid__ph{background:var(--b-100)}
.igrid__i:nth-child(3) .igrid__ph{background:var(--th-bg)}
.igrid__i:nth-child(4) .igrid__ph{background:var(--g-100)}
.igrid__i--gift .igrid__ph{background:var(--b-200)}
/* 下段は大カテゴリの商品写真。白地＋墨線（色つきの枠＋同色の薄塗りにはしない） */
.igrid__i--cat .igrid__ph{background:var(--white);box-shadow:var(--sh-sm)}  /* inset の輪は使わない。overflow:hidden の器に cover の画像を敷くと、輪は画像の下に隠れ、     角の丸みで画像が削れた四隅だけが黒い線として残る（2026-09-21 指摘） */
.igrid__i--cat .igrid__ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.igrid__i--cat:hover .igrid__ph{box-shadow:var(--sh-md)}

/* ---------- 気になること（肌で選ぶ） ----------
   悩みの下に、その悩みで選ばれている成分名を必ず出す。ここが商品を並べる根拠になる。 */
.cns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 悩みが奇数件（7件）のとき、2列グリッドの最後の1枚だけ余って半端にならないよう全幅にする */
.cns:not(.cns--list)>.cn:last-child:nth-child(odd){grid-column:1/-1}
.cns--list{grid-template-columns:1fr}
.cns--list .cn__ph{width:64px;height:64px}
.cns--list .cn__b b{font-size:1rem}
.cns--list .cn__i{-webkit-line-clamp:2;font-size:.74rem}
.cn{display:flex;align-items:center;gap:.75rem;text-align:left;width:100%;padding:.6rem .75rem .6rem .6rem;background:var(--white);border-radius:var(--r-m);box-shadow:var(--sh-sm);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.cn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.cn:active{transform:scale(.985)}
.cn__ph{width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--b-100)}
.cn__ph img{width:100%;height:100%;object-fit:cover}
.cn[data-c=pores] .cn__ph{background:var(--kr-bg)}
.cn[data-c=dry] .cn__ph{background:var(--b-100)}
.cn[data-c=acne] .cn__ph{background:var(--b-300)}
.cn[data-c=tone] .cn__ph{background:var(--th-bg)}
.cn[data-c=firm] .cn__ph{background:var(--g-200)}
.cn[data-c=calm] .cn__ph{background:var(--b-200)}
.cn[data-c=uv] .cn__ph{background:var(--g-100)}
.cn[aria-pressed="true"] .cn__ph{box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.35)}
.cn__b{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cn__b b{font-family:var(--f-ja);font-weight:700;font-size:.9rem;line-height:1.3}
.cn__i{font-size:.66rem;color:var(--g-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cn__n{font-family:var(--f-body);font-weight:700;font-size:.68rem;color:var(--b-700)}
.cn__n b{font-family:var(--f-en);font-size:1.14em;letter-spacing:-.02em}
.cn[aria-pressed="true"]{background:var(--g-800);box-shadow:none}
.cn[aria-pressed="true"] b,.cn[aria-pressed="true"] .cn__n{color:#fff}
.cn[aria-pressed="true"] .cn__i{color:var(--g-300)}

.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:99999px){.cats{grid-template-columns:repeat(4,1fr);gap:16px}}
.cat{background:var(--white);border-radius:var(--r-l);box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.cat__img{display:block;aspect-ratio:4/3;background:var(--g-100);overflow:hidden}
.cat__img img{width:100%;height:100%;object-fit:cover}
.cat__b{display:flex;flex-direction:column;gap:.15rem;padding:.8rem .9rem 1rem}
.cat b{font-family:var(--f-ja);font-weight:700;font-size:1rem;line-height:1.4}
.cat span{font-size:.72rem;color:var(--g-500);line-height:1.55}
.cat i{font-family:var(--f-en);font-style:normal;font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--b-700)}


/* ---------- 9. newsletter ---------- */
.sub{background:var(--white);border-radius:var(--r-xl);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--sh-md);display:grid;gap:1rem}
@media(min-width:99999px){.sub{grid-template-columns:1fr 1fr;align-items:center;gap:2rem}}
.sub__form{display:flex;gap:.5rem;flex-wrap:wrap}
.sub__form input{flex:1;min-width:0;height:48px;padding:0 1rem;border:1.5px solid var(--g-300);border-radius:var(--r-m);background:var(--white);font-size:16px}
.sub__form input:focus{border-color:var(--b-500);outline:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:48px;padding:0 1.4rem;border-radius:var(--r-m);font-weight:700;font-size:.92rem;letter-spacing:.04em;white-space:nowrap;transition:background .15s,transform .15s,box-shadow .15s}
.btn--p{background:var(--b-700);color:#fff;box-shadow:0 3px 10px rgb(240 154 133/.28)}
.btn--p:hover{background:var(--b-800);transform:translateY(-1px)}
.btn--s{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--b-300)}
.btn--s:hover{box-shadow:inset 0 0 0 1.5px var(--b-500)}
.btn--ink{background:var(--g-800);color:#fff}
.btn--ink:hover{background:var(--g-700)}
/* 白地＋墨線。coral の縁取り（.btn--s）と違い、装飾を1つも足さず「もっと見る」系の導線に使う */
.btn--line{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--g-700)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--full{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.sub__msg{font-size:.84rem;color:var(--ink-soft);margin-top:.4rem;min-height:1.2em;width:100%}
.is-done .sub__msg{color:var(--kr-deep);font-weight:700}
.is-fallback .sub__form input,.is-fallback .sub__form .btn{display:none}
/* 配信停止の案内。特定電子メール法の表示要件なので、登録が終わっても消さない */
.sub__note{font-size:.78rem;color:var(--ink-soft);margin-top:.15rem;width:100%;line-height:1.6}
.sub__note a{color:inherit;text-decoration:underline;text-underline-offset:.2em;margin-left:.5em}
.is-fallback .sub__note{display:none}
.sub__sns{display:none;gap:.5rem;flex-wrap:wrap}
/* LINE 友だち追加。#06C755 のベタ塗り＋白文字。装飾なし */
.lineadd{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:48px;margin-top:.6rem;padding:0 1.2rem;border-radius:3px;background:#06C755;color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.04em}
.lineadd svg{width:22px;height:22px;fill:currentColor;flex:none}
.lineadd:hover{background:#05b34c}
.lineadd:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.is-fallback .lineadd{display:none}
.is-fallback .sub__sns{display:flex}

/* ---------- footer ---------- */
.ft{margin-top:clamp(2rem,6vw,4rem);border-top:1px solid var(--g-200);padding:2.2rem 0 2.6rem;color:var(--ink-soft);font-size:.86rem}
.ft__grid{display:grid;gap:1.6rem}
@media(min-width:99999px){.ft__grid{grid-template-columns:1fr auto auto;gap:3rem;align-items:start}}
.ft__logo{display:flex;align-items:center;gap:.7rem}
.ft__logo img{width:44px;height:44px;border-radius:11px}
.ft__sns{display:flex;gap:.6rem;margin-top:.9rem}
.ft__sns a{width:40px;height:40px;border-radius:999px;background:var(--white);display:grid;place-items:center;box-shadow:var(--sh-sm);transition:transform .15s}
.ft__sns a:hover{transform:translateY(-2px)}
.ft__sns svg{width:18px;height:18px;fill:var(--g-700)}
.ft__col{display:grid;gap:.4rem;align-content:start}
.ft__col b{font-family:var(--f-en);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500);margin-bottom:.2rem}
.ft__col a:hover{color:var(--b-600)}
.ft__cp{margin-top:1.8rem;font-size:.74rem;color:var(--g-500)}

/* ---------- brand page ---------- */
.bhero{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--g-100);aspect-ratio:16/9;max-height:420px}
.bhero img{width:100%;height:100%;object-fit:cover}
/* 元画像が枠より小さいとき用。引き伸ばさず原寸のまま中央に置く（build_media.js が付ける） */
.bhero.is-fit{display:flex;align-items:center;justify-content:center;background:var(--b-0)}
.bhero.is-fit img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
.bhero__logo{position:absolute;left:clamp(.8rem,3vw,1.6rem);bottom:clamp(.8rem,3vw,1.6rem);width:72px;height:72px;border-radius:18px;background:var(--white);box-shadow:var(--sh-md);display:grid;place-items:center;padding:10px}
.bhero__logo img{object-fit:contain;width:100%;height:100%}
.bhead{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:1.2rem}
.bhead h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem)}
.bmeta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.4rem;color:var(--g-500);font-size:.86rem}
.grid2{display:grid;gap:1.4rem}
@media(min-width:99999px){.grid2{grid-template-columns:7fr 5fr;gap:2.4rem;align-items:start}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;background:var(--white);border-radius:var(--r-l);padding:1.1rem 1.25rem;box-shadow:var(--sh-sm)}
.kv dt{font-size:.8rem;color:var(--g-500);white-space:nowrap;padding-top:.15em}
.kv dd{margin:0;font-weight:700;font-size:.95rem}
.kv dd.num{font-size:1.05rem}
.cta{background:var(--white);border-radius:var(--r-l);padding:1.25rem;box-shadow:var(--sh-md);display:grid;gap:.6rem}
.cta__t{font-family:var(--f-ja);font-weight:700;font-size:1.05rem}
.cta__m{font-size:.84rem;color:var(--ink-soft)}
.links{display:grid;gap:.5rem}
.link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;background:var(--white);border-radius:var(--r-m);padding:.75rem .9rem;box-shadow:var(--sh-sm);font-weight:700;font-size:.92rem;transition:transform .15s,box-shadow .15s}
.link:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.link i{font-style:normal;font-family:var(--f-en);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;height:22px;padding:0 .55rem;border-radius:999px;display:inline-flex;align-items:center;background:var(--g-100);color:var(--g-600)}
.link i.shop{background:var(--b-700);color:#fff}
.link small{color:var(--g-500);font-weight:400}
.link::after{content:"↗";color:var(--g-400);font-family:var(--f-en)}
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:99999px){.prods{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:99999px){.prods{grid-template-columns:repeat(var(--pc,4),1fr);gap:20px}}
/* 一覧の価格。現地通貨が主、参考円換算はその下に小さく（2026-09-08） */
.pcell{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pcell .num{font-size:.95rem;letter-spacing:-.01em}
.pcell__lc{font-size:.72rem;font-weight:600;color:var(--g-500);letter-spacing:0}
.pcell--i{display:inline-flex;flex-direction:row;align-items:baseline;gap:.3rem}
.pcell--i .num{font-size:inherit}
.pcell--i .pcell__lc{font-size:.92em}
.srcs{margin-top:1rem;font-size:.76rem;color:var(--g-500);line-height:1.7}
.srcs a{text-decoration:underline;text-underline-offset:3px}

/* ---------- filters (brands / category) ---------- */
.fil{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1.2rem;
  position:sticky;top:var(--stickh,0px);z-index:40;background:var(--surface);padding-block:.5rem}
.fil button{height:36px;padding:0 .95rem;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--g-300);font-weight:700;font-size:.8rem;letter-spacing:.04em;transition:all .15s}
.fil button:hover{box-shadow:inset 0 0 0 1.5px var(--g-800)}
.fil button[aria-pressed=true]{background:var(--g-800);color:#fff;box-shadow:none}
.fil button[data-filter="country:kr"][aria-pressed=true]{background:var(--kr)}
.fil button[data-filter="country:th"][aria-pressed=true]{background:var(--th)}
.fil__sep{width:1px;background:var(--g-300);margin:6px .2rem}
/* 成分は17種あって全部並べると5段になる。8つだけ出して、残りは押したら開く */
.fil__more{height:36px;padding:0 .95rem;border-radius:var(--r-s);background:none;box-shadow:inset 0 0 0 1.5px var(--b-300);color:var(--b-700);font-weight:700;font-size:.8rem}
.fil__more::after{content:" +"}
.empty{background:var(--white);border-radius:var(--r-l);padding:2rem;text-align:center;color:var(--ink-soft)}

/* ---------- 肌で選ぶ（悩み → 成分 → 商品 の3段） ---------- */
.wz__nav{display:flex;align-items:baseline;gap:.5rem;margin:.5rem 0 1.5rem;counter-reset:wz}
.wz__nav li{display:flex;align-items:baseline;gap:.32rem;font-family:var(--f-ja);font-weight:700;font-size:.84rem;color:var(--g-500)}
.wz__nav li::before{counter-increment:wz;content:counter(wz,decimal-leading-zero);font-family:var(--f-en);font-style:italic;font-weight:700;font-size:2.1em;line-height:1;letter-spacing:-.05em;color:var(--g-450)}
.wz__nav li+li{padding-left:.85rem;border-left:1.5px solid var(--g-200)}
.wz__nav li[aria-current=true]{color:var(--ink)}
.wz__nav li[aria-current=true]::before{color:var(--b-600)}
.wz__act{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin-top:1.3rem}
.wz__act .btn{width:100%}
.wz__back{font-size:.82rem;font-weight:700;color:var(--g-500);text-decoration:underline;text-underline-offset:3px;padding:0}
.wz__back:hover{color:var(--ink)}
.wz__sum{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.1rem 0 1rem}
.wz__sum b{font-family:var(--f-ja);font-size:1rem;font-weight:700}

/* ---------- category page chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{height:36px;display:inline-flex;align-items:center;padding:0 .95rem;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--g-300);font-weight:700;font-size:.82rem;transition:all .15s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--g-800)}
.chip[aria-current]{background:var(--b-700);color:#fff;box-shadow:none}
.bc{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.8rem;color:var(--g-500);margin-bottom:.6rem}
.bc a:hover{color:var(--ink)}
.bc span{color:var(--g-300)}

/* ---------- product page ---------- */
.pimg{border-radius:var(--r-xl);overflow:hidden;background:var(--white);aspect-ratio:1;box-shadow:var(--sh-sm)}
.pimg img{width:100%;height:100%;object-fit:contain;padding:8%}
.pname{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem)}
.plocal{font-size:.9rem;color:var(--g-500);margin-top:.2rem;word-break:break-word}
.price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.price b{font-family:var(--f-en);font-weight:700;font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);letter-spacing:-.03em}
.price span{font-size:.84rem;color:var(--g-500)}
.spark{display:flex;align-items:flex-end;gap:5px;height:56px;padding:.4rem 0}
.spark i{flex:1;background:var(--b-300);border-radius:4px 4px 0 0;min-height:6px}
.spark i:last-child{background:var(--b-500)}
.ingr{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
/* 成分名タグ。ボタン化して説明ポップアップ（3-2）を開けるようにした（以前は id をそのまま出す span だった）。
   見た目は変えず、44px のタップ領域だけ ::after で確保する（.bc a::after と同じ手法） */
.ingr button{position:relative;font:inherit;font-size:.78rem;padding:.25rem .6rem;border-radius:6px;border:0;background:var(--g-100);color:var(--g-700);cursor:pointer}
.ingr button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
.ingr button:hover,.ingr button:focus-visible{background:var(--g-200)}
.note{font-size:.8rem;color:var(--g-500);line-height:1.7}

/* ---------- article ---------- */
.art{max-width:720px;margin-inline:auto}
.art__hd{padding:clamp(1.4rem,4vw,2.6rem) 0 1.4rem}
.art__hd h1{font-size:clamp(1.55rem,1.15rem + 2vw,2.4rem)}
.art__meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-top:.9rem;font-size:.8rem;color:var(--g-500)}
.art__cover{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;background:var(--g-100);box-shadow:var(--sh-md)}
.art__cover img{width:100%;height:100%;object-fit:cover}
.art__cover.is-fit{display:flex;align-items:center;justify-content:center;background:var(--b-0)}
.art__cover.is-fit img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
.prose{margin-top:1.8rem;font-size:1.02rem;line-height:1.95}
.prose p{margin:0 0 1.35em}
.prose h2{font-family:var(--f-ja);font-weight:700;font-size:1.3rem;line-height:1.45;margin:2.2em 0 .7em;padding-left:.8rem;border-left:4px solid var(--b-500)}
.prose h3{font-family:var(--f-ja);font-weight:700;font-size:1.08rem;margin:1.8em 0 .5em}
.prose hr{border:0;height:1px;background:var(--g-200);margin:2.2em 0}
.prose a{color:var(--b-700);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose img{border-radius:var(--r-l);margin:1.4em 0}
.prose ul{padding-left:1.2em;list-style:disc;margin:0 0 1.35em}
/* 本文の顔文字系デコレーション。黒い塊に見えないようコーラルで出す */
/* 装飾は本文と同じ文字色。色を変えると装飾だけが目立って本文から浮く */
.rel{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--g-200)}

/* ---------- giveaway ---------- */
.gv{background:var(--b-500);color:#fff;border-radius:var(--r-xl);padding:clamp(1.6rem,5vw,3rem);position:relative;overflow:hidden}
.gv__k{position:absolute;right:-.06em;top:-.1em;font-family:var(--f-en);font-weight:700;font-size:clamp(6rem,4rem + 12vw,15rem);line-height:.8;letter-spacing:-.06em;opacity:.13;pointer-events:none}
.gv__grid{position:relative;display:grid;gap:1.6rem;align-items:center}
@media(min-width:99999px){.gv__grid{grid-template-columns:1fr auto}}
.gv__body{min-width:0}
.gv h1{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.8rem)}
.gv h2{font-size:clamp(1.35rem,1.05rem + 1.4vw,1.9rem)}
.gv p{opacity:.95;max-width:30em}
.gv__date{display:flex;gap:1.6rem;margin-top:1.4rem}
.gv__date b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);line-height:1;letter-spacing:-.03em}
.gv__date span{font-size:.72rem;letter-spacing:.12em;opacity:.85}
/* pado crew（Gemini生成の仮モデル。本物の当選者写真が撮れたら差し替える）の縦位置写真 */
.gv__photo{justify-self:center;width:100%;max-width:220px;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;box-shadow:0 14px 32px -10px rgb(0 0 0/.38);border:3px solid rgb(255 255 255/.5)}
.gv__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:99999px){.gv__photo{max-width:190px}}
@media(min-width:99999px){.gv__photo{max-width:230px}}
.steps{display:grid;gap:12px;margin-top:1.4rem}
@media(min-width:99999px){.steps{grid-template-columns:repeat(3,1fr);gap:20px}}
.step{background:var(--white);border-radius:var(--r-l);padding:1.2rem 1.2rem 1.3rem;box-shadow:var(--sh-sm);display:grid;gap:.4rem;position:relative}
.step .n{position:absolute;top:.5rem;right:.9rem;font-size:3rem;color:var(--b-200)}
.step b{font-family:var(--f-ja);font-weight:700;font-size:1.02rem;padding-right:2.6rem}
.step p{font-size:.86rem;color:var(--ink-soft)}
.step a{margin-top:.3rem;justify-self:start}
.notes{display:grid;gap:.4rem;font-size:.82rem;color:var(--ink-soft);margin-top:1.2rem}
.notes p{padding-left:1em;text-indent:-1em}
.notes p::before{content:"・"}

/* ---------- shop banner (メディア側には代行の説明を置かない。導線だけ) ---------- */
.shopline{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--white);border-radius:var(--r-l);padding:1rem 1.2rem;box-shadow:var(--sh-sm)}
.shopline b{font-family:var(--f-en);font-weight:700;letter-spacing:.14em;font-size:.8rem}
.shopline span{font-size:.84rem;color:var(--ink-soft)}

/* ---------- header icons / shop tab ---------- */
.hd__ic{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--white);box-shadow:var(--sh-sm);flex:none;transition:transform .15s}
.hd__ic:hover{transform:translateY(-1px)}
.hd__ic svg{width:19px;height:19px;stroke:var(--g-700);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 先頭の <a> はロゴなので :first-of-type は効かなかった。ロゴ側で余白を取って右に寄せる */
.hd__logo{margin-right:auto}
@media(min-width:99999px){.hd__in .hd__ic:first-of-type{margin-left:.6rem}}
.tab--shop{color:var(--b-700)}
.tab--shop small{color:var(--b-500)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- category blocks (Screen 03-1/2) ---------- */
.blk{margin-top:1.1rem}
.blk--tint{background:var(--white);border-radius:var(--r-l);padding:.9rem 1rem;box-shadow:var(--sh-sm)}
.rows--1{grid-template-columns:1fr}
.prow .row__m .stars{font-size:.6rem;vertical-align:1px}
.chip[data-sort][aria-pressed=true]{background:var(--g-800);color:#fff;box-shadow:none}


/* ============================================================
   mobile — メニューバーは上部ではなく画面下部に置く
   ============================================================ */
@media(max-width:99999px){
  /* タブを下部固定のメニューバーに。選択中の線は上側に出す */
  .tabs{
    position:fixed;top:auto;left:0;right:0;bottom:0;z-index:60;
    background:rgb(251 246 243/.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--g-200);border-bottom:0;
    box-shadow:0 -2px 14px rgb(74 44 44/.07);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabs__in{justify-content:space-around;padding-inline:.3rem;overflow:visible}
  .tab{
    padding:.5rem .2rem .45rem;gap:.12rem;
    border-bottom:0;border-top:2.5px solid transparent;
    font-size:.63rem;letter-spacing:.05em;
  }
  .tab small{font-size:.58rem}
  .tab[aria-current]{border-top-color:var(--b-500)}
  /* 下部メニューの分だけ本文の下に余白を作る（最後の要素が隠れないように） */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* 見出し・本文をモバイル幅に合わせる */
  .sec__hd{align-items:flex-start;flex-direction:column;gap:.35rem}
  .sec__hd .more{align-self:flex-end;margin-top:-1.6rem}
  /* 事実の表は「ラベルの上に値」に畳む。横2列だと値が途中で折れて読みにくい */
  .kv{grid-template-columns:1fr;gap:.1rem;padding:1rem 1.1rem}
  .kv dt{padding-top:.55rem}
  .kv dt:first-of-type{padding-top:0}
  .kv dd{font-size:.98rem;line-height:1.6}
  .bmeta{gap:.3rem .7rem;font-size:.82rem}
  .bhead{gap:.5rem .7rem}
  .prose{font-size:.98rem;line-height:1.9}
  .prose h2{font-size:1.18rem}
  .art__meta{gap:.4rem .7rem}
  .sub{padding:1.3rem 1.15rem}
  .sub__form{gap:.45rem}
  .sub__form input{flex:1 1 100%}
  .sub__form .btn{flex:1 1 100%}
  .fil button,.chip{height:34px;font-size:.78rem;padding:0 .8rem}
  .link{grid-template-columns:auto 1fr;gap:.6rem;font-size:.86rem}
  .link::after{display:none}
  .ft__grid{gap:1.4rem}
}
/* 極端に狭い端末（iPhone SE など） */
@media(max-width:360px){
  .tab{font-size:.58rem;letter-spacing:.02em}
  .tab small{font-size:.54rem}
}

/* ---------- campaign bar（画面いちばん上。取扱アイテムを散らした帯） ---------- */
/* 帯とヘッダーは .stick でひとまとめにして貼り付ける。
   （帯の高さを JS で CSS 変数に渡す方式は、幅0のプレビューで測った値が残って崩れた） */
.stick{position:sticky;top:0;z-index:60}
.hd{position:relative;top:auto}
/* 応募するボタンは <a> の外にあるので、.camp 自体を横並びにしないと下へ落ちて境界線と重なる */
.camp{display:flex;align-items:center;position:relative;z-index:1;background:var(--b-100);overflow:hidden}
/* 帯は高さを変えない。スクロールで縮めると下の内容が動いてガタつく（2026-09-07 指摘） */

/* 散らしたアイテムの上に地色のぼかしを重ね、左側の文字を必ず読めるようにする。
   .camp__in が stacking context を作るので、ぼかしはその中に置かないとアイテムの下に潜る */
.camp__in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgb(253 236 230/.96) 58%,rgb(253 236 230/.28) 76%,rgb(253 236 230/0) 100%)}
.camp__in{display:flex;align-items:center;gap:.8rem;min-height:96px;padding:.7rem 1rem .7rem 1.05rem;position:relative;z-index:1}
.camp__p{position:absolute;left:var(--l);top:var(--t);width:var(--w);transform:rotate(var(--r,0deg));mix-blend-mode:multiply;pointer-events:none;z-index:0}
.camp__body{flex:1;min-width:0;position:relative;z-index:2}
.camp__t{display:block;font-family:var(--f-ja);font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--ink)}
.camp__m{display:block;margin-top:.15rem;font-size:.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp__cta{flex:none;position:relative;z-index:2;margin-right:1rem;align-self:center;display:inline-flex;align-items:center;height:32px;padding:0 .9rem;border-radius:9px;background:var(--b-600);color:#fff;font-weight:700;font-size:.76rem;letter-spacing:.02em;box-shadow:0 4px 12px -4px rgb(177 74 49/.75)}
.camp__in:hover .camp__cta{background:var(--b-600)}
.camp__d{flex:none;font-family:var(--f-en);font-weight:700;font-size:.7rem;letter-spacing:.02em;color:var(--b-700)}

/* ============================================================
   2026-09-06 mobile-only + kawaii（powderroom.co.kr をベンチマーク）
   ============================================================ */
/* 端末幅に関係なく 500px の1カラム。外側は淡いドット地紋 */
html{background:var(--b-100);background-image:radial-gradient(rgb(240 154 133/.22) 1px,transparent 1.2px);background-size:18px 18px}
body{max-width:var(--max);margin-inline:auto;min-height:100vh;box-shadow:0 0 0 1px var(--g-200),0 30px 80px -30px rgb(74 44 44/.25)}
.hd__in,.tabs__in{padding-inline:var(--gutter)}
.hd__logo span,.hd__clock{display:none!important}
.hd__logo img{width:52px;height:52px;border-radius:13px}
:root,:host{--hdr:68px}

/* 下部メニュー: アイコン＋和文ラベル（本文の500pxカラムに合わせる）
   transform を使うと中の fixed 要素の基準が変わるので left で寄せる */
.tabs{left:max(0px,calc(50% - 250px));right:auto;width:100%;max-width:var(--max);border-top:1px solid var(--b-200)}
.tabs__in{justify-content:space-around;padding-inline:.2rem}
.tab{padding:.4rem .2rem .42rem;gap:.1rem;border:0!important;font-family:var(--f-body);font-weight:700;font-size:.61rem;letter-spacing:0;color:var(--g-500);position:relative}
/* アイコンは丸いタイルの上に置く。選択中だけタイルが色づいて少し浮く（ぷにっとした動き） */
.tab svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  padding:3px;border-radius:12px 12px 13px 13px/13px 13px 12px 12px;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s,box-shadow .18s}
.tab:hover svg{transform:translateY(-1px)}
.tab[aria-current]{color:var(--b-700)}
.tab[aria-current] svg{background:var(--b-100);box-shadow:0 3px 8px -3px rgb(240 154 133/.55);transform:translateY(-2.5px) scale(1.06)}
.tab--shop{color:var(--b-700)}
.tab--shop svg{color:var(--b-500)}
.tab--shop[aria-current] svg{background:var(--b-500);color:#fff}
.tab--shop[aria-current] svg .hw{fill:#fff;stroke:#fff}

/* ============================================================
   ストーリー（全幅の帯・注目アイテム 共通）— 2026-09-20
   旧ヒーローレール（.hr/.hs）はトップから外したので、ここで新しいエンジン用に作り直した。
   全幅（.story）と、次の1枚をのぞかせる列幅（.story--peek）の2つの見せ方を1つの構造で持つ。
   進行バー・自動送り・スワイプ・前後ボタンの中身は media.js の initStory が担当する。
   ============================================================ */
.story{position:relative;margin-inline:calc(var(--gutter)*-1)}
.story__rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter)}
.story__rail::-webkit-scrollbar{display:none}
.story__s{position:relative;flex:0 0 100%;scroll-snap-align:start;display:block;border-radius:var(--r-l);overflow:hidden}
.story__ph{position:relative;display:block;aspect-ratio:4/5;max-height:520px;background:var(--g-100)}
.story__ph img{width:100%;height:100%;object-fit:cover}
.story__ph.is-fit{display:flex;align-items:center;justify-content:center;background:var(--b-0)}
.story__ph.is-fit img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
/* タイトルを重ねるスライド（記事・注目アイテム）だけ、下から影を落として文字を読ませる。
   ①②（キャンペーン・今日のアイテム）は画像そのものに文字が入っているので、この影を出さない */
.story__s:has(.story__t) .story__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(46 37 40/0) 42%,rgb(46 37 40/.74) 100%)}
.story__t{position:absolute;left:1.05rem;right:1.05rem;bottom:1.05rem;z-index:1;color:#fff}
.story__t b{display:block;font-family:var(--f-ja);font-weight:700;font-size:1.28rem;line-height:1.35;text-shadow:0 1px 10px rgb(0 0 0/.25)}
.story__t span{display:block;margin-top:.35rem;font-size:.74rem;opacity:.92;font-weight:500}
.story__bars{position:absolute;left:.9rem;right:.9rem;top:.7rem;z-index:2;display:flex;gap:5px}
.story__bar{flex:1;height:3px;border-radius:3px;background:rgb(255 255 255/.4);overflow:hidden}
.story__bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.story__n{position:absolute;right:1.6rem;top:1.35rem;z-index:2;font-family:var(--f-en);font-weight:700;font-size:.66rem;letter-spacing:.06em;color:#fff;background:rgb(46 37 40/.42);padding:.22rem .5rem;border-radius:8px}
/* 注目記事: 列の約62%幅で次の1枚をのぞかせる。文字は画像の下、静かな地の文で */
.story--peek{margin-inline:calc(var(--gutter)*-1)}
.story--peek .story__s{flex:0 0 62%;border-radius:0}
.story--peek .story__ph{border-radius:var(--r-l);box-shadow:var(--sh-sm)}
.story--peek .story__ph::after{content:none}
.story--peek .story__t{position:static;color:var(--ink);margin-top:.5rem;padding:0 .1rem}
.story--peek .story__t b{color:var(--ink);font-size:.9rem;text-shadow:none;line-height:1.4}
.story--peek .story__t span{color:var(--g-500);font-size:.72rem;opacity:1}
.story--peek .story__n{background:none;color:var(--g-500);right:0;top:-1.7rem}

/* ギブアウェイ: 画像とブロックを一体化（取扱アイテムを散らし、白地は multiply で溶かす） */
.gvh{position:relative;background:var(--b-100);border-radius:var(--r-xl);overflow:hidden;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem 1.15rem 1.2rem;box-shadow:var(--sh-md)}
.gvh__p{position:absolute;left:var(--l);top:var(--t);width:var(--w);transform:rotate(var(--r,0deg));mix-blend-mode:multiply;pointer-events:none;filter:brightness(1.07)}
.gvh__face{position:absolute;right:.9rem;top:.9rem;width:82px;height:82px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:var(--sh-md)}
.gvh__face img{width:100%;height:100%;object-fit:cover}
.gvh__body{position:relative;z-index:1;background:linear-gradient(180deg,rgb(253 236 230/0),rgb(253 236 230/.96) 34%);margin:0 -1.15rem -1.2rem;padding:2.2rem 1.15rem 1.2rem}
.gvh h1,.gvh h2{font-size:1.55rem;line-height:1.3;color:var(--ink)}
.gvh h1 em,.gvh h2 em{font-style:normal;color:var(--b-600)}
.gvh p{margin-top:.35rem;font-size:.9rem;color:var(--ink-soft)}
.gvh__date{display:flex;gap:1.3rem;margin-top:.8rem}
.gvh__date b{display:block;font-family:var(--f-en);font-weight:700;font-size:1.6rem;line-height:1;letter-spacing:-.03em;color:var(--b-600)}
.gvh__date span span{font-size:.66rem;letter-spacing:.12em;color:var(--g-500)}
.steps{grid-template-columns:1fr}

/* ニュースレター: 人物写真の前面にコピー */
.nl{border-radius:var(--r-xl);overflow:hidden;background:var(--white);box-shadow:var(--sh-md)}
.nl__ph{position:relative;aspect-ratio:4/4.6;max-height:440px;background:var(--g-100)}
.nl__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.nl__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(46 37 40/0) 45%,rgb(46 37 40/.7) 100%)}
.nl__t{position:absolute;left:1.15rem;right:1.15rem;bottom:1.1rem;z-index:1;color:#fff}
.nl__t h2,.nl__t h1{font-size:1.45rem;line-height:1.35;text-shadow:0 1px 10px rgb(0 0 0/.25)}
.nl__t p{margin-top:.35rem;font-size:.8rem;opacity:.95}
.nl__f{padding:1rem 1.1rem 1.15rem}

/* 見出しまわりを少し丸く・やわらかく */
.sec{padding-block:1.7rem}
.sec__hd{margin-bottom:.9rem}
.h2{font-size:1.22rem}
.more{font-size:.72rem}
.rank__card,.row,.card,.cat{border-radius:var(--r-l)}


/* ============================================================
   2026-09-07 UI ブラッシュアップ（要件: docs/ui-brushup-requirements.md）
   ============================================================ */
:root,:host{--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.2,.7,.2,1)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
h1,h2,h3,.card__t,.row__t,.story__t b{text-wrap:balance}
.num,.price b,.rank__n,.gvh__date b,.story__n{font-variant-numeric:tabular-nums}

/* ---- 押した手応え: 縮む・波紋 ---- */
.btn,.camp__cta,.tab,.card,.row,.cat,.pane,.story__s,.chip,.fil button,.hd__ic,.more{-webkit-tap-highlight-color:transparent}
.btn,.camp__cta,.card,.row,.cat,.pane,.story__s,.chip,.fil button,.hd__ic,.tab,.step a{position:relative;overflow:hidden}
.btn:active,.camp__cta:active,.card:active,.row:active,.cat:active,.pane:active,.story__s:active,.chip:active,.fil button:active,.hd__ic:active{transform:scale(.975)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);animation:rip .55s ease-out forwards;pointer-events:none;z-index:2}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---- 主 CTA: 1画面に1つ。色付きの影・上辺の光沢・矢印・一度だけ走る光 ---- */
.btn--p{height:52px;font-size:1rem;border-radius:14px;box-shadow:0 10px 24px -10px rgb(217 105 78/.6),inset 0 1px 0 rgb(255 255 255/.38);transition:transform .18s var(--ease-spring),box-shadow .18s,background .15s}
.btn--p::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.34) 50%,transparent 70%);transform:translateX(-130%);animation:shine 2.6s var(--ease-out) 1.4s 2;pointer-events:none}
@keyframes shine{to{transform:translateX(130%)}}
.btn--p::after{content:"";width:8px;height:8px;border-right:2.2px solid #fff;border-top:2.2px solid #fff;transform:rotate(45deg);margin-left:.15rem;transition:transform .2s var(--ease-spring)}
.btn--p:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.btn--p:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgb(217 105 78/.7),inset 0 1px 0 rgb(255 255 255/.38)}
.btn[disabled]{opacity:.7}
.btn[disabled]::before{animation:none}
.camp__cta{box-shadow:0 6px 16px -6px rgb(177 74 49/.7),inset 0 1px 0 rgb(255 255 255/.3)}
.camp__m .left{color:var(--b-700);font-family:var(--f-en);font-weight:700;margin-right:.45rem}
.camp__m .left[hidden]{display:none}

/* ---- 検索オーバーレイ（検索バーは2026-09-20にトップから外した。/category からは開ける） ---- */
.srch{position:fixed;inset:0;z-index:120;background:rgb(46 37 40/.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:max(.6rem,env(safe-area-inset-top)) .6rem}
.srch__box{width:100%;max-width:calc(var(--max) - 1.2rem);background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-lg);padding:.7rem .7rem .9rem;animation:pop .22s var(--ease-spring)}
@keyframes pop{from{transform:translateY(-8px) scale(.98);opacity:0}}
.srch__row{display:flex;align-items:center;gap:.5rem;height:48px;padding:0 .4rem 0 .9rem;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--b-300)}
.srch__row svg{width:18px;height:18px;stroke:var(--b-600);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.srch__row input{flex:1;min-width:0;border:0;background:none;font-size:16px;height:100%;outline:0}
.srch__row button{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}
.srch__row button svg{stroke:var(--g-500)}
.srch__res{display:grid;gap:8px;margin-top:.7rem;max-height:min(62vh,540px);overflow:auto;scrollbar-width:none}
.srch__none{padding:1rem .4rem;color:var(--ink-soft);font-size:.9rem;line-height:1.7}
.srch__lab{margin:.75rem .5rem -.1rem;font-family:var(--f-en);font-size:.74rem;letter-spacing:.06em;color:var(--g-500)}
body.is-srch{overflow:hidden}

/* ---- 読み込み中のシマー（画像が来るまで骨組みを見せる） ---- */
.card__img,.story__ph,.rank__img,.cat__img,.row__img,.gvh__face{background-image:linear-gradient(100deg,var(--g-100) 30%,var(--white) 50%,var(--g-100) 70%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.row__img--circ,.is-loaded{animation:none}
.is-loaded{background-image:none}

/* ---- NEW / 順位メダル ---- */
.new{display:none;position:absolute;left:.6rem;top:.6rem;z-index:1;font-family:var(--f-en);font-weight:700;font-size:.6rem;letter-spacing:.16em;color:#fff;background:var(--b-700);padding:.22rem .5rem;border-radius:7px;box-shadow:0 3px 8px -3px rgb(177 74 49/.6)}
.is-new .new{display:inline-block;animation:pop .3s var(--ease-spring)}
.row.is-new .row__t::after{content:"NEW";margin-left:.4rem;font-family:var(--f-en);font-size:.58rem;letter-spacing:.14em;color:var(--b-700);vertical-align:.15em}
/* 1位だけベタ塗り＋白抜き数字（極端にする1箇所）。2位3位はこれまでどおり地色の丸を薄く敷く */
.rank__n--2,.rank__n--3{position:relative}
.rank__n--2::before,.rank__n--3::before{content:"";position:absolute;left:-.1em;top:-.05em;width:.9em;height:.9em;border-radius:50%;z-index:-1;opacity:.35}
.rank__n--2::before{background:var(--g-400)}.rank__n--3::before{background:var(--b-600)}
/* 1位の面。以前は width:1.4em・text-align:right の箱をそのまま塗っていたため、   左に50px・右に28pxの余りが出て、字は箱から上下13pxずつはみ出していた（実測）。   面は字に合わせて中央に置き、色はブランドの濃いコーラル（白文字と5.39:1）にする */
.rank__n--1{background:var(--b-700);color:#fff;border-radius:3px;display:grid;grid-auto-flow:column;place-content:center;align-items:baseline;line-height:1;padding:.14em .12em .1em}
.rank__n--1 small{color:#fff}

/* ---- カード: 触れると持ち上がり、写真が寄る ---- */
.card__img img,.cat__img img{transition:transform .5s var(--ease-out)}
.card:hover .card__img img,.cat:hover .cat__img img{transform:scale(1.05)}
.card,.row,.cat{transition:transform .2s var(--ease-spring),box-shadow .2s}

/* ---- 応募ステップ: 済のチェック ---- */
.step{transition:box-shadow .2s}
.step__ok{position:absolute;right:.9rem;bottom:.9rem;width:26px;height:26px;border-radius:50%;background:var(--kr);display:none;place-items:center}
.step__ok svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step.is-done{box-shadow:inset 0 0 0 2px var(--kr)}
.step.is-done .step__ok{display:grid;animation:pop .3s var(--ease-spring)}
.step.is-done .n{color:var(--kr-bg)}
.gvh__left{display:inline-block;margin-top:.5rem;font-family:var(--f-en);font-weight:700;font-size:.78rem;letter-spacing:.06em;color:#fff;background:var(--b-700);padding:.3rem .65rem;border-radius:8px}
.gvh__left[hidden]{display:none}

/* ---- トースト ---- */
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translate(-50%,120%);opacity:0;z-index:130;background:var(--g-800);color:#fff;font-weight:700;font-size:.86rem;padding:.7rem 1.1rem;border-radius:12px;box-shadow:var(--sh-lg);transition:transform .3s var(--ease-spring),opacity .2s;pointer-events:none;max-width:calc(100% - 2rem)}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ---- 下部メニュー: 選択中ラベルが小さく弾む ---- */
.tab[aria-current] span{animation:pop .3s var(--ease-spring)}

/* ---- reduced motion: 動きを全部止める ---- */
@media(prefers-reduced-motion:reduce){
  .btn--p::before,.tick__t,.card__img,.hs,.rank__img,.cat__img,.row__img,.gvh__face,[data-auto] .hs__bar i{animation:none}
  .ripple{display:none}
}
@media(max-width:420px){.camp__t{font-size:.9rem}}

/* ---- 応募先を選ぶシート（Instagram / X） ---- */
.ap{position:fixed;inset:0;z-index:125;background:rgb(46 37 40/.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:.7rem}
.ap__box{width:100%;max-width:calc(var(--max) - 1.4rem);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:1.1rem 1rem 1rem;display:grid;gap:.6rem;animation:apup .24s var(--ease-spring)}
@keyframes apup{from{transform:translateY(24px);opacity:0}}
.ap__t{font-family:var(--f-ja);font-weight:700;font-size:1.05rem;text-align:center;margin-bottom:.2rem}
.ap__b{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;min-height:56px;padding:0 1rem;border-radius:14px;background:var(--white);box-shadow:var(--sh-sm);font-family:var(--f-ja);font-weight:700;font-size:1rem;position:relative;overflow:hidden;transition:transform .18s var(--ease-spring),box-shadow .18s}
.ap__b:active{transform:scale(.975)}
.ap__b svg{width:22px;height:22px;fill:currentColor}
.ap__b i{font-style:normal;font-family:var(--f-en);font-weight:600;font-size:.74rem;color:var(--g-500)}
.ap__b--instagram{color:#C13584}
.ap__b--x{color:var(--ink)}
.ap__b::after{content:"";position:absolute;right:.85rem;width:8px;height:8px;border-right:2.2px solid var(--g-400);border-top:2.2px solid var(--g-400);transform:rotate(45deg);opacity:0}
.ap__x{height:44px;border-radius:12px;font-weight:700;font-size:.88rem;color:var(--g-500)}

/* ---- ギブアウェイ・ポップアップ ----
   主役は「5」の数字と応募ボタン。ボタンは画面幅いっぱい・高さ64pxで、閉じる操作より明確に大きくする
   写真は白地の商品写真なので白い帯に置く。backdrop-filter の上で mix-blend-mode:multiply を使うと
   isolation を付けても商品写真が描画されなかった（Chrome で実測）。ここでは multiply を使わない */
.gvp{position:fixed;inset:0;z-index:124;background:rgb(46 37 40/.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem}
.gvp__box{position:relative;width:100%;max-width:360px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;padding:0 1.1rem 1rem;display:grid;gap:.15rem;text-align:left;animation:apup .3s var(--ease-spring)}
.gvp__ph{position:relative;height:132px;margin:0 -1.1rem .8rem;background:#fff;overflow:hidden;border-bottom:3px solid var(--b-700)}
.gvp__ph img{position:absolute;left:var(--l);top:var(--t);width:var(--w);transform:rotate(var(--r,0deg))}
.gvp__t{font-family:var(--f-ja);font-weight:700;font-size:1.5rem;line-height:1.3;color:var(--ink)}
.gvp__m{display:flex;align-items:baseline;flex-wrap:wrap;font-family:var(--f-ja);font-weight:700;font-size:1.05rem;color:var(--ink)}
.gvp__m b{font-family:var(--f-en);font-weight:700;font-size:4.6rem;line-height:.9;letter-spacing:-.05em;color:var(--b-700);margin:0 .12em}
.gvp__left{justify-self:start;margin-top:.35rem;font-family:var(--f-en);font-weight:700;font-size:.8rem;letter-spacing:.06em;color:#fff;background:var(--g-800);padding:.3rem .65rem;border-radius:3px}
.gvp__left[hidden]{display:none}
.gvp__cta{margin-top:1rem;height:64px;border-radius:var(--r-m);background:var(--b-700);color:#fff;font-family:var(--f-ja);font-weight:700;font-size:1.3rem;letter-spacing:.08em;box-shadow:0 10px 22px -10px rgb(177 74 49/.8);transition:background .15s,transform .15s var(--ease-spring)}
.gvp__cta:hover{background:var(--b-800)}
.gvp__cta:active{transform:scale(.975)}
.gvp__x{height:44px;font-weight:700;font-size:.88rem;color:var(--g-600)}
@media(prefers-reduced-motion:reduce){.gvp__box{animation:none}}
.steps__from{margin:0;font-family:var(--f-ja);font-weight:700;font-size:.95rem;color:#fff;background:var(--b-700);padding:.55rem .9rem;border-radius:3px;justify-self:start}

/* ---- /giveaway の応募先タブ ---- */
/* 国の選び分けは節の中でずっと触れてほしいので、上の帯とヘッダーのすぐ下に貼り付ける。
   帯はキャンペーンが終わると消えて高さが変わるので、貼り付ける位置は media.js が測って --stickh で渡す */
.chtab{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 .9rem;
  position:sticky;top:var(--stickh,0px);z-index:40;background:var(--surface);padding-block:.5rem}
.sec--tint .chtab{background:var(--white)}
.chtab__b{display:flex;align-items:center;justify-content:center;gap:.45rem;height:46px;border-radius:13px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--g-300);font-family:var(--f-ja);font-weight:700;font-size:.95rem;color:var(--g-500);position:relative;overflow:hidden;transition:all .18s}
.chtab__b svg{width:18px;height:18px;fill:currentColor}
.chtab__b[aria-selected="true"]{background:var(--b-700);color:#fff;box-shadow:0 8px 18px -8px rgb(217 105 78/.6)}
.chtab__b:active{transform:scale(.975)}

/* ---- 商品一覧のブランド名を目立たせる ---- */
.card__m .brand,.row__m .brand{color:var(--b-700);font-weight:700;font-size:1.12em;letter-spacing:.01em}
.card__m .brand::after,.row__m .brand::after{content:"・";color:var(--g-400);font-weight:400;font-size:.9em}

/* ============================================================
   2026-09-11 タップ領域を 44×44 以上にする
   考え方は3つだけ。見た目の大きさはどれも変えない。
   1) overflow:hidden が掛かっていない要素 … 透明な擬似要素を重ねる
   2) overflow:hidden で擬似要素がはみ出せない要素 … 箱を 44px に広げ、
      負のマージンでまわりの間隔を元に戻し、見えている面は擬似要素で描き直す
   3) 透明な border … border は overflow の外側なので切られない。
      background-clip:padding-box で面だけ元の大きさに留める
   インライン文字リンクは上下 padding。行の高さを変えずに当たり判定だけ伸びる。
   ============================================================ */

/* 検索・ニュースレターのアイコン 40→44。白い丸は ::before が 40px のまま描く。
   当たり判定の箱は角丸 11px（ブランドの角丸スケール）の四角にする。
   真円のままだと 44px の箱の四隅が絵の外になり、指の当たりが逆に狭くなる */
.hd__ic{width:44px;height:44px;margin:-2px;border-radius:var(--r-s);background:none;box-shadow:none}
.hd__ic::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--white);box-shadow:var(--sh-sm)}
.hd__ic svg{position:relative}

/* 「ぜんぶ見る」「記事一覧」。::after は矢印に使っているので ::before を敷く */
.more{position:relative}
.more::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

/* 帯の「応募する」。overflow:hidden なので箱を 44px にして面を ::before で描き直す。
   白文字が乗るので面は b-700（5.39:1）。b-600 は 3.45:1 で足りない */
.camp__cta{height:44px;margin-block:-6px;background:none;box-shadow:none}
.camp__cta::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:9px;background:var(--b-700);
  box-shadow:0 6px 16px -6px rgb(177 74 49/.7),inset 0 1px 0 rgb(255 255 255/.3)}
.camp__in:hover .camp__cta{background:none}
.camp__in:hover .camp__cta::before{background:var(--b-800)}

/* 絞り込みのピルと並べ替えのチップ。透明な border で当たり判定だけ 44px にする。
   面は padding-box に留めるので 34px のまま。段が2つ以上になったときに
   上下の当たり判定が食い合わないよう、行の間だけ広げる */
.fil,.chips{row-gap:.75rem}
.fil button,.fil__more,.chip{height:44px;border:3px solid transparent;border-width:3px 0 7px;
  margin-block:-3px -7px;background-clip:padding-box}

/* パンくず・ブランドのメタ・肌で選ぶの「戻る」は透明な当たり判定を重ねる */
.bc a,.bmeta a,.wz__back{position:relative}
.bc a::after,.bmeta a::after,.wz__back::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

/* 見出しそのものがリンクの行（カテゴリ一覧の「スキンケア」など）と注記の中のリンク。
   inline 要素の上下 padding は行の高さを変えない */
.blk h2 a,.blk h3 a{padding-block:7px}
.cap a{padding-block:20px 8px}   /* 下は絞り込みの行が近いので、上に多めに逃がす */

/* 本文中のインラインリンク（出典・配信停止の案内）。
   ただの inline に上下 padding を足すと、隣の行の出典リンクと当たり判定が重なって
   違う出典を開いてしまう。inline-block にすると行の高さ自体が 44px になり、
   中の長い題名は今までどおり折り返す */
.srcs a,.sub__note a{display:inline-block;vertical-align:top;padding-block:14px}
/* フッターの社名。下に住所の行が続くので上下 padding だけでは 44px 取れない
   （住所の行が後から描かれて当たり判定を食う）。1行を丸ごと 44px の塊にして、
   上に喰い込んだぶんだけ負のマージンで戻す。住所は 13px 下がる */
.ft p a{display:block;width:max-content;max-width:100%;padding-block:13px;margin-top:-13px}

/* フッターのリンク一覧。行間に逃がす余地が無いので行そのものを 44px にする。
   gap を 0 にして相殺するが、それでも1行あたり +12px 伸びる。
   フッターより下には何も無いので、上の要素は動かない */
.ft__col{gap:0}
.ft__col b{margin-bottom:.5rem}
.ft__col a{display:flex;align-items:center;min-height:44px}
/* SNS アイコン 40→44。見た目の丸は 40px のまま */
.ft__sns a{position:relative}
.ft__sns a::after{content:"";position:absolute;inset:-2px}
/* 検索オーバーレイの閉じる 40→44（面を持たないので見た目は変わらない） */
.srch__row button{width:44px;height:44px}


/* ---------- 順位の根拠 / 関係性の開示 ----------
   順位を出す以上、母集団・方法・基準日を画面に出す（景表法・優良誤認）。
   商品1件ごとの「この順位の根拠」は2026-09-20にサイト全体から外した（rankBasis に一本化）。 */
.basis{margin:0 0 1rem;font-size:.78rem;line-height:1.85;color:var(--ink-soft)}

/* メディアと購入代行の関係（景表法5条3号・ステマ規制）。フッター最下部に常設 */
.ft__rel{margin-top:1.8rem;font-size:.74rem;line-height:1.9;color:var(--ink-soft)}
.ft__rel + .ft__cp{margin-top:.5rem}

/* ============================================================
   お気に入り（ハート）— assets/js/fav.js
   カードは <a> の中にボタンを入れられないので、.favw で包んで横に置く。
   絞り込みの data-* は .favw が持つ（隠すときにハートも一緒に消える）
   ============================================================ */
.favw{position:relative;display:flex;flex-direction:column;min-width:0}
.favw>.card,.favw>.row{flex:1}
.favw>.row{padding-right:3.1rem}
.fav{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:3px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.favw>.fav{top:.25rem;right:.25rem}
.favw>.row+.fav{top:50%;right:.2rem;transform:translateY(-50%)}
.fav__i{width:24px;height:24px;fill:rgb(255 255 255/.92);stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;transition:fill .15s,stroke .15s,transform .2s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
.fav:hover .fav__i{stroke:var(--b-700)}
.fav[aria-pressed="true"] .fav__i{fill:#E2475B;stroke:#E2475B}
.fav.is-pop .fav__i{animation:favPop .42s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes favPop{0%{transform:scale(1)}35%{transform:scale(1.32)}100%{transform:scale(1)}}
.fav:focus-visible{outline:2px solid var(--b-600);outline-offset:-2px}
.rank__item{position:relative}
.rank__item>.fav{top:.45rem;right:.3rem}
.rank__item .rank__card{padding-right:3rem}
/* 商品ページの大きいボタン */
.fav--lg{position:static;display:inline-flex;gap:.5rem;width:auto;height:48px;padding:0 1.1rem 0 .9rem;margin-top:1rem;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;font-size:.92rem}
.fav--lg[aria-pressed="true"]{background:#E2475B;color:#fff;box-shadow:none}
.fav--lg[aria-pressed="true"] .fav__i{fill:#fff;stroke:#fff}
/* ヘッダーの件数 */
.hd__ic{position:relative}
.hd__n{position:absolute;top:1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:3px;background:#E2475B;color:#fff;font-family:var(--f-en);font-weight:700;font-size:.66rem;line-height:18px;text-align:center}
.hd__n[hidden]{display:none}
/* 一覧ではカテゴリを持たないので、ブランド名の後ろの区切り点を消す */
[data-fav-list] .card__m .brand::after,[data-fav-list] .card__m .brand::before{content:none}
/* /favorites */
.favs__n{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:clamp(3.2rem,2.4rem + 4vw,5rem);line-height:.9;letter-spacing:-.05em;color:#E2475B}
.favs__empty{display:grid;gap:.8rem;justify-items:start;text-align:left;margin-top:1.4rem}
@media(prefers-reduced-motion:reduce){.fav.is-pop .fav__i{animation:none}}

/* ============================================================
   右下の「AIに相談」— 見た目の本体は ai-fab.js の CSS（build_media.js が assets/media/aifab.css に書き出す）
   メディア側は下部メニュー（60px）の上に置き、CSS だけで光らせる
   ============================================================ */
.aifab{right:14px;bottom:calc(60px + env(safe-area-inset-bottom) + 14px);z-index:58}
/* 動かさない。常時光る・回る・脈打つ演出は、画面の端でちらついて読む邪魔になる（2026-09-21 指摘） */
.aifab__btn{isolation:isolate;overflow:visible;
  background:linear-gradient(135deg,var(--b-500) 0%,var(--b-700) 100%);
  box-shadow:0 0 0 2px #fff,0 10px 24px -8px rgb(177 74 49/.55)}
/* 外側の光輪は色だけ置いて回さない */
.aifab__btn::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,#FFD4C4,#F09A85,#FFF1C9,#E2475B,#FFD4C4);filter:blur(9px);opacity:.55}
.aifab[open] .aifab__btn::before{opacity:0}
.aifab__pop{bottom:calc(58px + .8rem)}
@media(max-width:640px){.aifab__pop{bottom:calc(52px + .7rem)}}
body.is-srch .aifab{visibility:hidden}
@media(prefers-reduced-motion:reduce){.aifab__btn,.aifab__btn::before{animation:none}}

/* ============================================================
   今日のベストレコメンド（/best・トップ）
   主役は日付の数字。先頭のカテゴリだけ横長の大きいカードにして、同じ型が並び続けないようにする
   ============================================================ */
.best__hd{display:flex;align-items:flex-end;gap:.9rem;flex-wrap:wrap}
.best__date{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:clamp(4rem,3rem + 6vw,7rem);line-height:.85;letter-spacing:-.06em;color:#E2475B}
.best__date:empty{display:none}
.best{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;margin-top:1.4rem}
.best__slot{display:grid;gap:.45rem;align-content:start;min-width:0}
.best__slot--big{grid-column:1/-1}
.best__slot--big .card{flex-direction:row}
.best__slot--big .card__img{flex:0 0 46%;aspect-ratio:1}
.best__slot--big .card__t{font-size:1.1rem}
/* 横長カードは右側が文字なので、ハートは写真の左上に置く */
.best__slot--big .favw>.fav{right:auto;left:.25rem}
.best__cat{display:flex;align-items:center;gap:.5rem;font-family:var(--f-ja);font-weight:700;font-size:.95rem;min-width:0}
.best__cat a{border-bottom:2px solid var(--ink);line-height:1.3}
.best--top .best__slot--big{grid-column:auto}
.best--top .best__slot--big .card{flex-direction:column}
.best--top .best__slot--big .card__img{flex:none}

/* ---- 今日のベストレコメンドの口コミ（2026-09-20）----
   評価がいちばん高い1件（同点は新しい順）だけを最初から出し、残りは details で開く。
   評価の件数が少ないうちだけの機能なので、無ければ何も出さない */
.rvw{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--g-200);display:grid;gap:.3rem}
.rvw__l{display:grid;gap:.15rem;font-size:.8rem;line-height:1.6;color:var(--ink)}
.rvw__st{color:var(--b-700);letter-spacing:.06em;font-size:.76rem}
.rvw__src{font-size:.72rem;color:var(--g-500);text-decoration:underline;text-underline-offset:2px;justify-self:start;padding-block:8px;position:relative}
/* 出典リンクは行の中なので、面は増やさず ::before で 44px の触れる面だけ敷く */
.rvw__src::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:44px}
.rvw__more{font-size:.78rem}
.rvw__more summary{cursor:pointer;list-style:none;font-weight:700;color:var(--ink);min-height:44px;display:flex;align-items:center}
.rvw__more summary::-webkit-details-marker{display:none}
.rvw__more summary::before{content:"+";font-family:var(--f-en);font-size:1.1rem;margin-right:.35rem;color:var(--b-600)}
.rvw__more[open] summary::before{content:"−"}
.rvw__more[open] .rvw__l{margin-top:.5rem}
.best__slot--big .rvw{max-width:32em}

/* ============================================================
   新作カレンダー（/calendar・トップ）
   月は大きな数字の見出し。最近の2か月だけ開き、古い月は＋で開く
   ============================================================ */
.cal{display:grid;gap:1.4rem;margin-top:1.2rem}
.cal__m>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.8rem;padding:.2rem 0 .6rem;border-bottom:2px solid var(--ink)}
.cal__m>summary::-webkit-details-marker{display:none}
.cal__m>summary::after{content:"+";margin-left:auto;font-family:var(--f-en);font-weight:700;font-size:1.7rem;line-height:1;color:var(--ink)}
.cal__m[open]>summary::after{content:"−"}
.cal__ym{font-family:var(--f-en);font-weight:700;font-size:clamp(2.4rem,1.9rem + 2.4vw,3.4rem);line-height:1;letter-spacing:-.04em}
.cal__ym span{color:#E2475B}
.cal__n{font-weight:700;font-size:.86rem;color:var(--g-600)}
.cal__m .rows{margin-top:.8rem}
.cal__row{grid-template-columns:2.8rem auto 1fr}
.cal__d{display:flex;flex-direction:column;align-items:center;line-height:1}
.cal__d b{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:1.9rem;letter-spacing:-.04em;color:var(--b-700)}
.cal__d small{font-size:.62rem;color:var(--g-600);text-align:center;line-height:1.3}
.cal__soon{display:inline-block;margin-top:.25rem;font-style:normal;font-weight:700;font-size:.68rem;color:#fff;background:#2F6FD0;padding:.1rem .4rem;border-radius:3px}
.cal__soon[hidden]{display:none}
/* 全成分（商品ページ「3 成分」）。公式の並び順に番号を振って2段で流す。チップにしない */
.inci__n{margin:0 0 .5rem;font-size:.86rem;color:var(--ink-soft)}
.inci__n b{font-family:var(--f-en);font-size:2.6rem;font-weight:700;font-style:italic;line-height:1;letter-spacing:-.03em;color:var(--ink);margin-right:.2rem}
.inci__grp{border-top:1px solid var(--g-300)}
.inci__grp:last-of-type{border-bottom:1px solid var(--g-300)}
.inci__grp>summary{cursor:pointer;list-style:none;min-height:48px;display:flex;align-items:center;gap:.6rem}
.inci__grp>summary::-webkit-details-marker{display:none}
.inci__grp>summary::before{content:"+";font-family:var(--f-en);font-size:1.3rem;line-height:1;color:var(--b-600)}
.inci__grp[open]>summary::before{content:"−"}
.inci__grp[open]>summary{margin-bottom:.2rem}
.inci__grp[open]{padding-bottom:.8rem}
.inci__g{font-weight:700;font-size:.9rem;color:var(--ink)}
.inci__c{margin-left:auto;font-family:var(--f-en);font-size:.8rem;color:var(--ink-soft)}
.inci__list{columns:2 13em;column-gap:1.6rem;font-size:.84rem;line-height:1.5}
.inci__i{display:grid;grid-template-columns:2.1em 1fr;align-items:baseline;break-inside:avoid;padding:.3rem 0;border-bottom:1px solid var(--g-200);color:var(--ink);overflow-wrap:anywhere}
.inci__i i{font-family:var(--f-en);font-size:.74rem;color:var(--ink-soft)}
/* 日本語名（主）＋原文（従）。原文は小さく・控えめな色にして日本語を主役にする */
.inci__o{font-size:.82em;font-weight:400;color:var(--ink-soft)}
/* aliases に一致した項目（3-2）はボタンにして説明ポップアップを開ける。
   チップ化はせず、点線の下線だけで「押せる」ことを示す（枠や塗りを足さない） */
button.inci__i{width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--g-200);cursor:pointer}
.inci__i--ing .inci__t{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--g-400);text-underline-offset:3px}
.inci__i--ing:hover .inci__t,.inci__i--ing:focus-visible .inci__t{text-decoration-color:var(--ink)}
.inci__more summary{cursor:pointer;list-style:none;margin:.6rem 0 .1rem;font-size:.86rem;font-weight:700;color:var(--ink);min-height:44px;display:flex;align-items:center;gap:.4rem}
.inci__more summary::-webkit-details-marker{display:none}
.inci__more summary::before{content:"+";font-family:var(--f-en);font-size:1.3rem;line-height:1;color:var(--b-500)}
.inci__more[open] summary::before{content:"−"}
.inci__src{margin-top:.8rem}
.inci__src a{text-decoration:underline}

/* ---------- 成分の説明ポップアップ（3-2） ----------
   /skin ウィザードの成分ボタン・商品ページの成分タグ（.ingr）・全成分リストの一致項目、
   3か所すべてで使う共通の吹き出し。要素は media.js が1つだけ生成して使い回す（同時に1つだけ開く）。
   ベタ塗り＋白文字（--g-800）。枠線＋薄塗りにはしない */
/* width:auto だと position:fixed + left 指定のとき「left から画面右端まで」に幅がつぶれてしまうため、
   max-content で本来の内容幅を保ちつつ max-width で頭打ちにする（JS 側の位置計算とセットで画面端対応） */
.ingpop{position:fixed;z-index:70;width:max-content;max-width:280px;padding:.7rem .85rem;border-radius:var(--r-s);background:var(--g-800);color:#fff;font-size:.8rem;line-height:1.55;box-shadow:var(--sh-md)}
.ingpop[hidden]{display:none}
.ingpop::before{content:"";position:absolute;left:var(--ing-arrow-x,50%);width:10px;height:10px;background:var(--g-800);transform:translateX(-50%) rotate(45deg)}
.ingpop:not(.ingpop--below)::before{bottom:-4px}
.ingpop--below::before{top:-4px}
.ingpop__n{display:block;font-weight:700;margin-bottom:.2rem;color:#fff}
.ingpop__d{margin:0;color:rgb(255 255 255/.86)}

/* ============================================================
   会員（/login /mypage /admin/customers）。テスト環境専用。描画は assets/js/account.js
   新しく足す小さな面は角丸 3px まで。色枠＋同色の薄塗りにしない（白地＋墨線か、ベタ塗り＋白文字）
   ============================================================ */
.acct .h1{margin-bottom:1.1rem}
.acct__form{display:grid;gap:.55rem;margin-top:.6rem}
.acct__lab{font-weight:700;font-size:.9rem;color:var(--ink)}
.acct__in{width:100%;min-height:48px;padding:.6rem .85rem;border:1.5px solid var(--g-400);border-radius:3px;background:var(--white);color:var(--ink);font:inherit;font-size:16px;line-height:1.5}
.acct__in:focus{border-color:var(--ink);outline:2px solid var(--b-600);outline-offset:1px}
/* 肌タイプ・よく見る国は区切りボタン（segmented）。灰色の溝の中に白い区画を並べ、選んだ区画だけベタ塗り＋白文字。
   角は外3px・内1px（溝の2pxぶん内側で同心）。1区画48px以上。ラジオは見えないが残すので矢印キーと読み上げが効く */
.acct__pick{border:0;margin:.4rem 0 0;padding:0;min-width:0;display:grid;gap:.55rem}
.acct__pick legend{padding:0;margin-bottom:.55rem}
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;background:var(--g-300);border-radius:3px}
.pick--c{grid-template-columns:1fr 1fr .8fr}
.pick__o{position:relative;display:flex}
.pick__o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick__o span{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:.35rem .4rem;background:var(--white);border-radius:1px;
  font-weight:700;font-size:.95rem;line-height:1.3;text-align:center;color:var(--ink);transition:background .15s,color .15s}
.pick__o span img{width:24px;height:16px;flex:none;border-radius:1px;box-shadow:0 0 0 1px rgb(46 37 40/.12)}
.pick__o--none span{font-weight:500;color:var(--ink-soft)}
.pick__o:hover input:not(:checked)+span{background:var(--g-50)}
.pick__o input:checked+span{background:var(--ink);color:#fff}
.pick__o[data-c=kr] input:checked+span{background:var(--kr-deep)}
.pick__o[data-c=th] input:checked+span{background:var(--th-deep)}
.pick__o--none input:checked+span{background:var(--g-600)}
.pick__o input:focus-visible+span{outline:2px solid var(--b-600);outline-offset:1px;position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.pick__o span{transition:none}}

textarea.acct__in{resize:vertical;min-height:96px}
.acct__form .btn{margin-top:.5rem}
.acct .btn--ink{border-radius:3px}
.acct .btn--line{border-radius:3px}
/* 6桁コード: この画面で唯一大きくする所 */
.acct__code{height:72px;font-family:var(--f-en);font-weight:700;font-size:2.2rem;letter-spacing:.5em;text-align:center;padding-left:.5em;font-variant-numeric:tabular-nums}
.acct__sent{font-size:.95rem}
.acct__sent b{overflow-wrap:anywhere}
.acct__link{justify-self:start;min-height:44px;padding:0;font-size:.9rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.acct__or{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 1rem;font-size:.82rem;color:var(--ink-soft)}
.acct__or::before,.acct__or::after{content:"";flex:1;height:1px;background:var(--g-300)}
.acct__g svg{width:20px;height:20px}
.acct__err{margin:.4rem 0 .8rem;padding:.75rem .9rem;background:var(--white);border-left:4px solid var(--b-700);border-radius:0 3px 3px 0;color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.6}
.acct__load{color:var(--ink-soft);font-size:.92rem}
.acct__who{margin:-.6rem 0 1rem;font-family:var(--f-en);font-weight:600;color:var(--ink-soft);overflow-wrap:anywhere}
.acct__staff{display:flex;align-items:center;min-height:48px;padding:0 1rem;margin-bottom:1rem;background:var(--kr-deep);color:#fff;font-weight:700;border-radius:3px}
.acct__staff::after{content:"→";margin-left:auto}
.acct__card{padding:1.1rem 1rem 1.2rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.acct__card .h3{margin-bottom:.2rem}
.acct__chk{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:.95rem;cursor:pointer}
.acct__chk input{width:22px;height:22px;accent-color:var(--b-700);flex:none}
.acct__form .btn--ink[type=submit]{justify-self:start;min-width:9rem}
.acct__msg{font-size:.88rem;font-weight:700;min-height:1.4em}
.acct__favhd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:2.4rem 0 .9rem}
[data-acct-import]{margin-bottom:.9rem}
.acct__favs .card__m .brand::after,.acct__favs .card__m .brand::before{content:none}
.acct__foot{display:grid;gap:.4rem;justify-items:start;margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--g-300)}
.acct__del{width:100%}
.acct__del summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:44px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.acct__del summary::-webkit-details-marker{display:none}
.acct__del summary::before{content:"+";font-family:var(--f-en);font-size:1.3rem;line-height:1;color:var(--b-700)}
.acct__del[open] summary::before{content:"−"}
.acct__del form{display:grid;gap:.55rem;padding:.2rem 0 .6rem}
.acct__del p{font-size:.9rem}
.acct__danger{background:var(--b-800);color:#fff;border-radius:3px;justify-self:start}
.acct__danger:hover{background:#5f2517}
.acct__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 顧客管理もサイトと同じ 500px の1カラム。表だけ横に流し、詳細は表の下に開く */
.acct__search{display:flex;gap:.5rem;margin-bottom:1rem}
.acct__search .acct__in{flex:1;min-width:0}
.acct__search .btn{border-radius:3px;flex:none}
.adm{display:grid;gap:1.2rem;align-items:start}
.adm>*{min-width:0}
.adm__total{font-size:.9rem;margin-bottom:.4rem}
.adm__total .num{font-size:1.6rem;margin-right:.15rem}
.adm__scroll{overflow-x:auto;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.adm__t{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.adm__t th{text-align:left;font-weight:700;font-size:.78rem;color:var(--g-600);padding:.7rem .75rem;border-bottom:1.5px solid var(--g-700);white-space:nowrap}
.adm__t td{padding:0 .75rem;height:48px;border-bottom:1px solid var(--g-200);vertical-align:middle;white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis}
.adm__t tbody tr{cursor:pointer}
.adm__t tbody tr:hover{background:var(--g-50)}
.adm__t tbody tr.is-open{background:var(--g-100);box-shadow:inset 4px 0 0 var(--b-700)}
.adm__open{min-height:44px;text-align:left;font-weight:700;text-decoration:underline;text-decoration-color:var(--g-400);text-underline-offset:3px;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
.adm__none{color:var(--ink-soft);text-align:center;cursor:default}
.adm__st{display:inline-block;padding:.1rem .45rem;border-radius:2px;color:#fff;font-size:.76rem;font-weight:700;line-height:1.6}
.adm__st--on{background:var(--kr-deep)}
.adm__st--off{background:var(--b-800)}
.adm__pg{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.adm__pg .btn{height:44px;padding:0 1.1rem}
.adm__side{display:grid;gap:.8rem;padding:1.1rem 1rem 1.3rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-md);outline:0}
.adm__side{scroll-margin-top:calc(var(--hdr) + 5rem)}
.adm__hd{display:flex;align-items:flex-start;gap:.6rem}
.adm__em{flex:1;min-width:0;overflow-wrap:anywhere}
.adm__x{flex:none;min-height:44px;padding:0 .4rem;font-size:.86rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.adm__fs{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .9rem}
.adm__f{display:grid;padding:.45rem 0;border-bottom:1px solid var(--g-200)}
.adm__f span{font-size:.74rem;color:var(--g-600)}
.adm__f b{font-size:.9rem;overflow-wrap:anywhere}
.adm__side>.btn{justify-self:start;border-radius:3px;height:44px}
.adm__sub{font-size:1rem;margin-top:.8rem}
.adm__favs{display:grid;gap:.4rem}
.adm__fav{display:grid;grid-template-columns:44px 1fr;gap:.6rem;align-items:center;min-height:48px;font-size:.84rem;line-height:1.45}
.adm__fav .brand{display:block;color:var(--b-700);font-size:.78rem}
.adm__fimg{width:44px;height:44px;border-radius:3px;overflow:hidden;background:var(--g-100)}
.adm__fimg img{width:100%;height:100%;object-fit:cover}
.adm__note{padding:.6rem 0;border-bottom:1px solid var(--g-200)}
.adm__nb{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem}
.adm__nm{font-size:.74rem;color:var(--g-600)}
.adm__nf{display:grid;gap:.5rem;margin-top:.4rem}
.adm__nf .btn{justify-self:start;border-radius:3px;height:44px}

/* ===== 価格比較モック（/picks /ranking/compare /megawari。tools/media/compare_pages.js）=====
   ストアは色で分ける（Amazon 墨紺 / Qoo10 マゼンタ / 楽天 赤）。色だけに頼らず必ず店名を添える。
   最安だけを先に見せ、ほかのストアは開いて見る。角は3pxまで */
:root,:host{--st-amazon:#232F3E;--st-qoo10:#B8004F;--st-rakuten:#BF0000}
.pick--wrap{grid-template-columns:repeat(3,1fr)}
.rkc .pick,.picks .pick{margin-top:.8rem}
.cmpnote{margin:.9rem 0 1rem;font-size:.78rem;line-height:1.7;color:var(--ink-soft)}
.cpis{display:grid;gap:.8rem}
.cpi{position:relative;display:grid;grid-template-columns:auto 72px 1fr;gap:.2rem .8rem;align-items:center;padding:.9rem .9rem 1rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.cpi:not(:has(.cpi__n)){grid-template-columns:72px 1fr}
.cpi__n{font-family:var(--f-en);font-style:italic;font-weight:700;font-size:2.4rem;line-height:1;color:var(--b-400);min-width:1.6ch;text-align:center}
.cpi__n--top{color:var(--b-700)}
.cpi__img img{width:72px;height:72px;object-fit:contain;border-radius:2px;background:var(--g-50)}
.cpi__body{display:grid;gap:.1rem;padding-right:2.6rem;min-width:0}
.cpi__b{font-family:var(--f-en);font-size:.78rem;color:var(--ink-soft)}
.cpi__t{font-weight:700;font-size:.95rem;line-height:1.45}
.cpi>.fav{top:.5rem;right:.4rem}
.cmp{grid-column:1/-1;margin-top:.6rem;border-top:1px solid var(--g-200);padding-top:.7rem}
.cmp__best{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lab st p" "buy buy buy";gap:.35rem .6rem;align-items:center}
.cmp__lab{grid-area:lab;padding:.1rem .45rem;background:var(--b-700);color:#fff;font-weight:700;font-size:.75rem;border-radius:2px}
.cmp__best .cmp__st{grid-area:st}
.cmp__p{font-size:1rem}
.cmp__p--best{grid-area:p;font-size:1.6rem;color:var(--ink)}
.cmp__buy{grid-area:buy;width:100%;min-height:48px;border-radius:3px;margin-top:.2rem}
.cmp__st{display:flex;align-items:center;gap:.45rem;font-size:.92rem}
.cmp__st::before{content:"";width:6px;height:1.1em;border-radius:1px;background:var(--g-400)}
[data-store=amazon] .cmp__st::before{background:var(--st-amazon)}
[data-store=qoo10] .cmp__st::before{background:var(--st-qoo10)}
[data-store=rakuten] .cmp__st::before{background:var(--st-rakuten)}
.cmp__more{margin-top:.5rem}
.cmp__more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:44px;font-size:.88rem;font-weight:700;color:var(--ink-soft)}
.cmp__more summary::-webkit-details-marker{display:none}
.cmp__more summary::before{content:"+";font-family:var(--f-en);font-size:1.3rem;line-height:1;color:var(--b-700)}
.cmp__more[open] summary::before{content:"−"}
.cmp__row{display:grid;grid-template-columns:1fr auto auto 4.2rem;gap:.6rem;align-items:center;min-height:48px;border-top:1px solid var(--g-100)}
.cmp__diff{font-size:.78rem;color:var(--ink-soft)}
.cmp__na{grid-column:2/4;font-size:.85rem;color:var(--ink-soft)}
.cmp__go{display:grid;place-items:center;min-height:40px;border:1.5px solid var(--ink);border-radius:3px;font-weight:700;font-size:.85rem}
.cmpnav{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.4rem}
.cmpnav a{display:flex;align-items:center;min-height:56px;padding:.6rem .9rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px;font-size:.92rem;line-height:1.4}
.cmpnav a::after{content:"→";margin-left:auto;padding-left:.5rem}
.cmpnav__mega{grid-column:1/-1;background:var(--st-qoo10)!important;border-color:var(--st-qoo10)!important;color:#fff;font-size:1.05rem!important}
.picks__ig{margin:0 0 1.2rem}
.picks__ig img{width:100%;height:auto;border-radius:3px}
.picks__ig figcaption{margin-top:.4rem;font-size:.82rem}
.picks__ig figcaption a{text-decoration:underline;text-underline-offset:3px}
.picks__lead{margin-top:.6rem;font-size:1rem}
.pickcs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.pickc{display:grid;gap:.35rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm);padding-bottom:.8rem;overflow:hidden}
.pickc img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pickc b{padding:0 .7rem;font-size:.95rem;line-height:1.45}
.pickc span{padding:0 .7rem;font-size:.8rem;color:var(--ink-soft)}
/* メガ割：画面を1枚のマゼンタで塗り、カウントダウンを極端に大きく */
.mega{background:var(--st-qoo10);color:#fff;padding:2rem 0 1.6rem}
.mega__h{font-size:1.25rem;font-weight:700}
.mega__cd{display:grid;margin-top:1.2rem}
.mega__state{font-weight:700;font-size:.95rem}
.mega__big{font-size:clamp(3.2rem,15vw,4.6rem);line-height:1;letter-spacing:-.03em;font-style:italic;margin:.2rem 0 .5rem}
.mega__when{font-size:.85rem;opacity:.92}
.mega__pv{display:grid;gap:.4rem;margin-top:1.4rem;font-size:.8rem;font-weight:700}
.mega__pv .pick{background:rgb(255 255 255/.35)}
.mega__pv .pick__o input:checked+span{background:var(--ink)}
.megs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.meg{position:relative;display:grid;gap:.3rem;align-content:start;padding:.7rem .7rem .8rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.meg__img img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--g-50);border-radius:2px}
.meg__tag{justify-self:start;padding:.1rem .45rem;background:var(--st-qoo10);color:#fff;font-weight:700;font-size:.72rem;border-radius:2px}
.meg .cpi__t{font-size:.88rem}
.meg__price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.meg__price s{font-size:.8rem;color:var(--ink-soft)}
.meg__price b{font-size:1.25rem}
.meg__price span{font-size:.8rem;color:var(--st-qoo10);font-weight:700}
.meg__buy{min-height:44px;border-radius:3px;font-size:.82rem;margin-top:.3rem}
.meg__buy[aria-disabled=true]{background:var(--g-200);color:var(--ink-soft);box-shadow:none;cursor:not-allowed}
[data-phase=live] ~ * .meg__buy,.meg__buy[aria-disabled=false]{background:var(--st-qoo10);color:#fff}
/* --- 2026-09-30 作り直し分（記事の種類・ランキング・メガ割・Pado for Men） --- */
.pick--4{grid-template-columns:repeat(4,1fr)}
.pick--wrap .pick__o span{font-size:.86rem}
.picks__type{display:inline-block;margin-bottom:.6rem;padding:.1rem .5rem;background:var(--ink);color:#fff;font-weight:700;font-size:.72rem;border-radius:2px}
.picks__h{margin:1.6rem 0 .7rem}
.rkc__h{margin:1.8rem 0 .8rem;padding-top:1.2rem;border-top:2px solid var(--ink)}
.rkc__h:first-of-type{border-top:0;padding-top:0}
.swp{margin-top:.2rem}
.cmpempty{margin:.8rem 0;padding:1rem;background:var(--white);border-left:4px solid var(--g-400);border-radius:0 3px 3px 0;font-size:.9rem}
.bysk{margin-top:1rem}
.bysk>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:48px;font-weight:700}
.bysk>summary::-webkit-details-marker{display:none}
.bysk>summary::before{content:"+";font-family:var(--f-en);font-size:1.4rem;line-height:1;color:var(--b-700)}
.bysk[open]>summary::before{content:"−"}
.cmp--ul{display:grid;gap:.6rem}
.cmp__ulp{font-size:.88rem;color:var(--ink-soft)}
.cmp__ulb{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cmp__ulb .btn{min-height:48px;border-radius:3px;font-size:.86rem}
.cpi__mega,.mgb{justify-self:start;padding:.08rem .45rem;background:var(--st-qoo10);color:#fff;font-weight:700;font-size:.7rem;border-radius:2px}
.mgb{position:absolute;z-index:3;top:.4rem;left:.4rem}
.cpi__mono{display:grid;place-items:center;width:72px;height:72px;border-radius:2px;background:var(--ink);color:#fff;font-family:var(--f-en);font-style:normal;font-weight:700;font-size:1.3rem}
.cpi__mono--styling,.cpi__mono--scalp{background:#3B4A5A}
.cpi__mono--sunscreen,.cpi__mono--bb-cream,.cpi__mono--concealer,.cpi__mono--brow{background:#8A5F14}
.cpi__mono--toner,.cpi__mono--all-in-one,.cpi__mono--cream{background:var(--kr-deep)}
/* お知らせ（施術後の注意）：ベタ塗り＋白文字で必ず目に入る位置に */
.ntc{margin:.4rem 0 1rem;padding:.9rem 1rem;background:var(--ink);color:#fff;font-weight:700;border-radius:3px}
.avd{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.avd__c{display:grid;gap:.35rem;align-content:start;padding:.9rem;background:var(--white);border-top:4px solid var(--b-700);border-radius:0 0 3px 3px;box-shadow:var(--sh-sm);font-size:.86rem;line-height:1.5}
.avd__c--ing{border-top-color:var(--th-deep)}
.avd__c b{font-size:.92rem}
.rvw{margin:1rem 0;padding:1rem;background:var(--white);border-left:4px solid var(--kr-deep);border-radius:0 3px 3px 0;display:grid;gap:.6rem;font-size:.95rem}
.rvw__who{display:flex;gap:.6rem;align-items:baseline}
.rvw__who span{font-size:.8rem;color:var(--ink-soft)}
.awd{margin:1rem 0;padding:1rem;background:var(--ink);color:#fff;border-radius:3px;display:grid;gap:.4rem;font-size:.88rem}
.awd b{font-size:1rem}
.awd__slot,.awd__cmt{display:block;margin-top:.25rem;font-size:.78rem;color:var(--ink-soft);border:1px dashed var(--g-400);padding:.15rem .4rem;border-radius:2px}
.mgk{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mgk div{display:grid;gap:.1rem;padding:.9rem .6rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm);text-align:center}
.mgk b{font-size:1.6rem;font-style:italic;color:var(--st-qoo10)}
.mgk span{font-size:.75rem;color:var(--ink-soft);line-height:1.4}
.mgt{overflow-x:auto}
.mgt table{width:100%;border-collapse:collapse;background:var(--white);font-size:.86rem}
.mgt th,.mgt td{padding:.65rem .6rem;border-bottom:1px solid var(--g-200);text-align:left;vertical-align:top}
.mgt thead th{background:var(--ink);color:#fff;font-size:.8rem}
.mgt tbody th{white-space:nowrap}
.mgn{margin-top:1rem;background:var(--white);border-radius:3px;padding:0 1rem}
.mgn summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:52px;font-weight:700}
.mgn summary::-webkit-details-marker{display:none}
.mgn summary::before{content:"+";font-family:var(--f-en);font-size:1.4rem;line-height:1;color:var(--st-qoo10)}
.mgn[open] summary::before{content:"−"}
.mgn p{padding:.5rem 0;border-top:1px solid var(--g-100);font-size:.88rem}
.mega{margin:0 calc(-1 * var(--gutter)) 0;padding:1.6rem var(--gutter);border-radius:0}
.mega__big{font-size:clamp(2.6rem,12vw,3.6rem)}
.pickc__type{font-size:.72rem!important;font-weight:700;color:var(--b-700)!important}
.pickc__ph{display:block;aspect-ratio:4/5;background:var(--g-200)}
.pickc--mega{background:var(--st-qoo10);color:#fff}
.pickc--mega .pickc__type{color:#fff!important}
.igs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.igc{display:grid;gap:.3rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm);padding-bottom:.7rem;overflow:hidden;font-size:.86rem}
.igc img{width:100%;aspect-ratio:4/5;object-fit:cover}
.igc b,.igc span{padding:0 .6rem}
.igc span{font-size:.75rem;color:var(--ink-soft)}
.megabn{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.6rem var(--gutter);background:var(--st-qoo10);color:#fff;font-size:1rem}
.megabn::after{content:"→";margin-left:auto}
.megabn span{font-size:.8rem}
/* Pado for Men：墨一色の帯に、極太の見出し */
.menh{background:var(--ink);color:#fff;padding:2.2rem 0 2rem}
.menh__k{font-family:var(--f-en);font-weight:700;font-size:.9rem;letter-spacing:.2em;opacity:.8}
.menh__h{font-size:clamp(2.1rem,9vw,2.8rem);line-height:1.2;font-weight:900;margin-top:.3rem}
.menh__n{margin-top:.9rem;font-size:.9rem}
.menh__n b{font-size:1.4rem}
.mpd{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;margin-top:.8rem}
.mpd__mono{width:96px;height:96px;font-size:1.8rem}
.mpd__h{font-size:1.5rem;line-height:1.35;margin-top:.2rem}
.mpd__m{margin-top:.4rem;font-size:.85rem;color:var(--ink-soft)}

/* ---------- 2026-10-01 検索バー（ヘッダーの下。下へスクロールで隠れ、上へ戻すと出る） ---------- */
.hd{z-index:2}
.sbar{position:absolute;left:0;right:0;top:100%;z-index:1;padding:.5rem var(--gutter) .55rem;background:rgb(251 246 243/.94);transition:transform .25s ease,opacity .2s ease}
.sbar__in{display:flex;align-items:center;gap:.6rem;height:44px;padding:0 .9rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px;color:var(--g-500);font-size:.92rem}
.sbar__in svg{width:20px;height:20px;flex:none;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbar__sp{height:60px}
.sbar.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.sbar{transition:none}}

/* ---------- ランキングの価格と大きい画像 ---------- */
.rank__img{width:104px;height:104px}
.rank__n{font-size:clamp(2.3rem,1.6rem + 2.4vw,3.6rem)}
.rank__card{gap:.5rem;padding:.9rem .9rem .9rem .8rem}
.rank__item .rank__card{padding-right:.9rem}
.rank__b{padding-right:1.8rem}
.rank__pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .45rem;margin-top:.15rem}
.rank__pr b{font-family:var(--f-en);font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:0}
.rank__pr small{font-size:.7rem;color:var(--g-500)}
.rank__vol{font-size:.7rem;color:var(--g-500)}
.rank__smp{margin-top:.6rem}
/* ============================================================
   保存ボタン・商品ページ・Instagram 記事の「ランキング」・LINE の案内（2026-10-01）
   ============================================================ */
.fav--save{position:static;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:auto;height:48px;padding:0 1rem;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;font-size:.9rem;white-space:nowrap}
.fav--save .fav__i{width:20px;height:20px;fill:none;stroke:var(--ink)}
.fav--save:hover .fav__i{stroke:var(--b-700)}
.fav--save[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.fav--save[aria-pressed="true"] .fav__i{fill:#fff;stroke:#fff}
.fav--sm{display:flex;width:100%;height:44px;font-size:.8rem;padding:0 .4rem}

/* 商品ページ */
.pdp{display:grid;gap:1rem}
.pdp__hd{display:grid;gap:.6rem;min-width:0}
.pdp__rate{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;justify-self:start}
.pdp__rate b,.pdp__agg b{color:var(--b-700);font-size:1.15rem}
.pdp__rate span{font-size:.86rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.pdp__pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem}
.pdp__prn{font-size:2.4rem;line-height:1;font-weight:700}
.pdp__prm{font-size:.86rem;color:var(--ink-soft)}
.pdp__rank{display:grid;gap:.15rem;padding:.6rem .8rem;background:var(--ink);color:#fff;border-radius:2px}
.pdp__rank b{font-size:.95rem;line-height:1.5}
.pdp__rank span{font-size:.72rem;line-height:1.6;color:rgb(255 255 255/.86)}
.pdp__cta,.pdp__barin{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}
.pdp__buy{min-height:52px;height:auto;border-radius:3px;white-space:normal;line-height:1.3;text-align:center}
.pdp__cta .fav--save,.pdp__barin .fav--save{height:auto;min-height:52px}
.pdp__ing{display:flex;gap:.7rem;margin:0;font-size:.9rem}
.pdp__ing b{flex:none}
.pdp__bar{position:fixed;left:max(0px,calc(50% - 250px));width:100%;max-width:var(--max);bottom:var(--tabh,58px);z-index:55;padding:.5rem var(--gutter);background:var(--white);border-top:1px solid var(--g-300);box-shadow:0 -6px 18px rgb(74 44 44/.1)}
.pdp__bar[hidden]{display:none}
.pdp__agg{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .4rem}
.pdp__agg b{font-size:2.2rem;line-height:1}
.pdp__agg span{font-size:.84rem;color:var(--ink-soft)}
.pdp__accs{display:grid}
.acc{border-top:1px solid var(--g-300)}
.acc:last-child{border-bottom:1px solid var(--g-300)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:700;font-size:.98rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--f-en);font-size:1.5rem;line-height:1;color:var(--b-700)}
.acc[open] summary::after{content:"−"}
.acc__b{padding:.2rem 0 1.1rem}
.pcard{display:grid;grid-template-rows:1fr auto;gap:.5rem;padding:.6rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm);min-width:0}
.pcard__a{display:grid;gap:.25rem;align-content:start}
.pcard__img{display:grid;place-items:center;aspect-ratio:1;background:var(--g-50);border-radius:2px;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:contain;padding:6%}
.pcard__b{font-family:var(--f-en);font-size:.74rem;color:var(--ink-soft)}
.pcard__t{font-weight:700;font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Instagram 記事の「ランキング」 */
.igis{display:grid;gap:1rem;margin-top:1rem}
.igi{padding:.9rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.igi__hd{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.igi__n{font-family:var(--f-en);font-style:italic;font-weight:700;font-size:2.6rem;line-height:1;color:var(--b-700)}
.igi__n small{font-size:.9rem;font-style:normal;margin-left:.1em}
.igi__nm{display:grid;min-width:0}
.igi__cols{display:grid;grid-template-columns:2fr 3fr;gap:.8rem;align-items:start}
.igi__ph{position:relative;aspect-ratio:4/5;background:var(--g-100);border:1.5px dashed var(--g-400);border-radius:2px;overflow:hidden}
.igi__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10% 10% 34%;opacity:.55}
.igi__lab{position:absolute;left:0;right:0;bottom:0;padding:.35rem .4rem;background:var(--ink);color:#fff;font-size:.66rem;line-height:1.45;font-weight:700}
.igi__r{display:grid;gap:.55rem;min-width:0}
.igi__best{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem}
.igi__p{flex-basis:100%;font-size:1.6rem;line-height:1.1}
.igi__buy{min-height:48px;height:auto;padding:.45rem .6rem;border-radius:3px;white-space:normal;line-height:1.3;font-size:.84rem;text-align:center}
.igi__save{width:100%;height:44px}
.igi__more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;min-height:44px;font-size:.88rem;font-weight:700;color:var(--ink-soft)}
.igi__more summary::-webkit-details-marker{display:none}
.igi__more summary::before{content:"+";font-family:var(--f-en);font-size:1.3rem;line-height:1;color:var(--b-700)}
.igi__more[open] summary::before{content:"−"}
.igi__more .rvw{margin-top:0;border-top:0;padding-top:0}
.rsum{margin:0;font-size:.8rem;line-height:1.65}
.rsum__st{margin-right:.4rem;color:var(--b-700);font-size:1rem}
.rsum__n{color:var(--ink-soft)}
.rsum__q{display:block;color:var(--ink)}
.rsum--none{color:var(--ink-soft)}

/* 保存したときの LINE の案内（下のタブの上に出す。画面は塞がない） */
.linesheet{position:fixed;left:max(0px,calc(50% - 250px));width:100%;max-width:var(--max);bottom:var(--tabh,58px);z-index:70;display:grid;grid-template-columns:1fr auto;gap:.5rem .8rem;align-items:center;padding:.8rem var(--gutter) 1rem;background:var(--white);border-top:3px solid var(--ink);box-shadow:0 -8px 24px rgb(74 44 44/.16);animation:lsUp .28s cubic-bezier(.2,.7,.2,1)}
.linesheet:focus{outline:none}
.linesheet__t{grid-row:1;grid-column:1;font-family:var(--f-ja);font-size:1.02rem;line-height:1.4}
.linesheet__x{grid-row:1;grid-column:2;width:44px;height:44px;font-size:1.6rem;line-height:1;color:var(--ink)}
.linesheet__go{display:flex;align-items:center;justify-content:center;grid-row:2;grid-column:1/-1;height:48px;border-radius:3px;background:#06C755;color:#fff;font-weight:700;font-size:1rem;letter-spacing:.06em}
.linesheet button:focus-visible,.linesheet a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes lsUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.linesheet{animation:none}}
/* 検索バーの分（60px）だけ、ページ内リンクの着地点を下げる */
html{scroll-padding-top:calc(var(--hdr) + 68px)}

/* トップ「Instagramから」: 投稿を記事にしたものの横並び（4:5の画像・タイトル2行・日付） */
.igp{display:grid;gap:.4rem;align-content:start;color:var(--ink)}
.igp__ph{aspect-ratio:4/5;background:var(--g-100);border-radius:2px;overflow:hidden}
.igp__ph img{width:100%;height:100%;object-fit:cover;display:block}
.igp__t{font-size:.84rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.igp__d{font-size:.72rem;color:var(--g-500)}
/* 架空の口コミ（テスト環境）の「サンプル」表示。出典リンクの代わり */
.rvw__smp{font-size:.72rem;color:var(--g-500)}
/* 使った人の Instagram 埋め込み。埋め込みは幅 326px 以上が要るので、あるときは縦に積む（左右2列にしない） */
.igi--ugc .igi__cols{grid-template-columns:1fr}
.igi__ugc,.ugc{min-width:0}
.ugc{display:grid;gap:1rem}
.instagram-media{display:block;width:100%;max-width:540px;min-width:min(326px,100%);margin:0 auto;padding:.8rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px;font-size:.84rem}
/* 2026-10-02 注目記事のサムネに黒い影を落とさない。タイトルは画像の下に置く（画像に重ねない） */
.story__s:has(.story__t) .story__ph::after{content:none}
.story__s:has(.story__t){background:var(--white)}
.story__t{position:static;display:block;padding:.75rem .9rem .9rem;color:var(--ink)}
.story__t b{font-size:1.05rem;text-shadow:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story__t span{color:var(--ink-soft);opacity:1}

/* ===== 商品ページ 2026-10-02（ギャラリー・価格と購入・お客様の声・口コミの絞り込み・関連記事） =====
   買う色（--buy）はサイトの他のオレンジ（--b-700 #B14A31 の錆色）より濃く鮮やかにし、白文字で読める濃さに留める */
:root,:host{--buy:#CC4400;--buy-d:#A83800;--sparkle:#F27A1A}
/* ギャラリー: 列いっぱい（左右の余白まで）に広げ、画像は内側の枠に収めて見切れさせない。
   上下の帯（各13%）は札と飾りの置き場。商品の上には何も重ねない */
.gal{position:relative;margin:.6rem calc(var(--gutter)*-1) 1.6rem;background:var(--white);box-shadow:var(--sh-sm)}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal__track::-webkit-scrollbar{display:none}
.gal__s{position:relative;flex:0 0 100%;aspect-ratio:1;margin:0;scroll-snap-align:start;display:grid;place-items:center;background:var(--white)}
.gal__s img{position:absolute;top:13%;bottom:13%;left:7%;right:7%;width:86%;height:74%;object-fit:contain}
.gal__s figcaption{position:absolute;left:0;right:0;bottom:3.2%;text-align:center;font-weight:700;font-size:.82rem;color:var(--ink)}
.gal__s--ig{place-items:start center;overflow-y:auto;padding:13% 4% 4%}
.gal__s--ig .instagram-media{margin:0 auto!important;min-width:0!important;width:100%!important;max-width:400px!important}
.gal__deco{position:absolute;z-index:2;pointer-events:none;color:var(--sparkle);font-size:clamp(.9rem,3.6vw,1.15rem);font-weight:700;letter-spacing:.04em;white-space:nowrap;transform:rotate(-14deg)}
.gal__deco--tl{top:4.2%;left:3.5%;transform-origin:left top}
.gal__deco--br{right:3.5%;bottom:5.5%;transform-origin:right bottom}
/* ランキングの札（縦1cm×横2〜3cm ≒ 38×100px）。数字は大きく、文字は小さく。上の帯の中だけに置く */
.gal__rk{position:absolute;z-index:3;top:2.4%;left:3%;display:flex;align-items:center;gap:.15rem;height:38px;padding:0 .55rem;background:var(--buy);color:#fff;border-radius:3px;box-shadow:0 3px 8px rgb(204 68 0/.28);white-space:nowrap}
.gal__rk small{font-size:.58rem;font-weight:700;line-height:1.1}
.gal__rk b{font-family:var(--f-en);font-style:italic;font-weight:700;font-size:1.65rem;line-height:1;margin:0 .1rem}
.gal__dots{position:absolute;left:0;right:0;bottom:-1.1rem;display:flex;justify-content:center;gap:5px}
.gal__dots i{width:6px;height:6px;border-radius:1px;background:var(--g-300)}
.gal__dots i.on{background:var(--buy)}
/* 価格と購入ボタンを1つのかたまりに */
.buyb{display:grid;gap:.55rem;margin:1rem 0 .4rem;padding:.9rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px}
.buyb__pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem}
.buyb__n{font-size:2rem;line-height:1.1;color:var(--buy)}
.buyb__m{font-size:.84rem;color:var(--ink-soft)}
.buyb__act{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}
.btn.pdp__buy{background:var(--buy);color:#fff;border:0;min-height:54px;font-size:1.05rem;font-weight:700;border-radius:3px}
.btn.pdp__buy:hover{background:var(--buy-d)}
.buyb__act .fav--save{min-height:54px;height:auto}
.buyb__note{font-size:.75rem;color:var(--ink-soft)}
/* お客様の声（AI要約）: 白地＋墨線。3行で切ってボタンで全文 */
.voice{margin:.9rem 0 .4rem}
.voice__hd{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.voice__st{display:inline-flex;font-size:1.05rem;letter-spacing:-.02em}
.voice__st i{font-style:normal;color:var(--g-300)}
.voice__st i.on{color:var(--buy)}
.voice__st i.half{background:linear-gradient(90deg,var(--buy) 50%,var(--g-300) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.voice__hd>b{font-size:1.05rem}
.voice__of{font-size:.85rem;color:var(--ink-soft)}
.voice__n{font-size:.85rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.voice__more{margin-left:auto;font-size:.82rem;color:var(--ink-soft);display:inline-flex;align-items:center;min-height:44px}
.voice__more::after{content:"›";margin-left:.3rem;font-size:1.1rem}
.voice__box{position:relative;margin-top:.3rem;padding:.9rem 1rem 1rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px}
.voice__t{display:flex;align-items:center;gap:.4rem;font-size:.95rem}
.voice__spark{color:var(--sparkle)}
.voice__cap{margin-top:.4rem;font-size:.76rem;font-weight:700;color:#fff;background:var(--ink);display:inline-block;padding:.12rem .5rem;border-radius:2px}
.voice__sum{margin-top:.5rem;font-size:.9rem;line-height:1.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-right:1.8rem}
.voice.is-open .voice__sum{-webkit-line-clamp:unset;display:block}
.voice__open{position:absolute;right:.6rem;bottom:.6rem;width:28px;height:28px;border:1px solid var(--g-300);border-radius:3px;background:var(--white)}
.voice__open::before{content:"";position:absolute;left:50%;top:45%;width:7px;height:7px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.voice.is-open .voice__open::before{top:58%;transform:translate(-50%,-50%) rotate(-135deg)}
/* 一緒に使う・似た商品のカードに価格 */
.pcard__p{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;margin-top:.15rem}
.pcard__p b{font-size:.98rem;color:var(--buy)}
.pcard__p small{font-size:.68rem;color:var(--ink-soft)}
/* 口コミの絞り込み（2026-10-10）: ボタン1つ＋下から出るシート。ボタンの行は口コミを読んでいる間も見える（sticky） */
.rvbar{position:sticky;top:var(--hdr);z-index:30;display:flex;align-items:center;gap:.8rem;margin:0 calc(var(--gutter)*-1) .5rem;padding:.5rem var(--gutter);background:var(--surface)}
.sec--tint .rvbar{background:var(--g-100)}
/* 2026-10-11 絞り込みは口コミを読んでいる間も見つけられるよう、買う色と同じオレンジのベタ塗り＋白文字にする。
   上に貼り付いている間は下に影を落として本文と分ける（[data-rvbar].is-stuck は pdp.js） */
.rvbar__btn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1.05rem;background:var(--buy);color:#fff;border:0;border-radius:3px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 3px 10px rgb(204 68 0/.3);-webkit-tap-highlight-color:transparent}
.rvbar__btn:hover{background:var(--buy-d)}
.rvbar__btn:active{transform:translateY(1px);box-shadow:0 1px 4px rgb(204 68 0/.3)}
.rvbar__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rvbar__btn b{min-width:1.35em;height:1.35em;display:grid;place-items:center;background:#fff;color:var(--buy);border-radius:2px;font-size:.76rem;line-height:1}
.rvbar__btn.is-on{background:var(--buy-d)}
.rvbar{transition:box-shadow .2s ease}
.rvbar.is-stuck{box-shadow:0 6px 12px -6px rgb(74 44 44/.22)}
.rvbar__n{margin:0;font-size:.82rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvbar__n b{font-size:1.05rem;margin-right:.1rem}
.rvs{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:86dvh;padding:0;border:0;border-radius:3px 3px 0 0;background:var(--white);color:var(--ink);box-shadow:0 -10px 30px rgb(46 37 40/.25)}
.rvs::backdrop{background:rgb(46 37 40/.45)}
.rvs[open]{animation:rvs-up .26s var(--ease-spring,ease-out)}
@keyframes rvs-up{from{transform:translateY(40%);opacity:.4}}
.rvs__in{display:flex;flex-direction:column;max-height:86dvh}
.rvs__hd{display:flex;align-items:center;justify-content:space-between;margin:0;padding:.9rem var(--gutter) .6rem;font-size:1rem;border-bottom:1px solid var(--g-200)}
.rvs__x{position:relative;width:44px;height:44px;margin-right:-.6rem;background:none;border:0;cursor:pointer}
.rvs__x::before,.rvs__x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.rvs__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.rvs__body{overflow-y:auto;padding:.4rem var(--gutter) 1rem;display:grid;gap:1rem}
.rvs .rvf__g{border:0;margin:0;padding:0;min-width:0}
.rvs .rvf__l{display:block;font-size:.8rem;font-weight:700;margin-bottom:.4rem;padding:0}
.rvs .rvf__c{display:flex;flex-wrap:wrap;gap:.4rem}
.rvs__ft{display:flex;gap:.6rem;margin:0;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--g-200)}
.rvs__rst{min-height:48px;padding:0 1rem;background:none;border:0;font:inherit;font-weight:700;font-size:.88rem;text-decoration:underline;cursor:pointer;color:var(--ink)}
.rvs__go{flex:1;min-height:48px;background:var(--ink);color:#fff;border-radius:3px;font-weight:700}
.rvs__go b{font-size:1.1rem;margin-right:.15rem}
/* 黒いボタンの中の件数。pado Studio の上書き（html body .num に !important の色）より強くして白に戻す（2026-10-14） */
html body .rvs__go .num{color:inherit !important}
.rvi__top{display:flex;align-items:center;gap:.45rem;margin:0 0 .2rem;font-size:.84rem}
.rvi__nm{font-weight:700;color:var(--ink)}
.rvi__jp{display:inline-flex;align-items:center;height:1.45em;padding:0 .4rem;background:var(--ink);color:#fff;border-radius:2px;font-size:.7rem;font-weight:700}
.rvi__site{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
a.rvi__site{text-decoration:underline}
/* 高価な原料（2026-10-10）: 金の丸印＋金の字。印は全成分の番号の位置と、見出し・主な成分の行に出す */
:root{--gold:#B8892B;--gold-ink:#7A5A12}
.inci__au{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFF1BF 0,#E7C35A 34%,#B8892B 70%,#7A5A12 100%);box-shadow:inset 0 0 0 1px rgb(122 90 18/.55);color:#4A3505!important;font-style:normal;font-weight:700}
.inci__i i.inci__au{width:1.7em;height:1.7em;font-size:.68rem}
.inci__i--pre .inci__t{color:var(--gold-ink);font-weight:700;text-decoration-color:var(--gold)!important}
.inci__pre{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:0 0 .8rem;font-size:.84rem}
.inci__pre .inci__au{width:1.1em;height:1.1em}
.inci__pre b{color:var(--gold-ink)}
.inci__pre button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline dotted var(--gold);text-underline-offset:3px;cursor:pointer}
.acc__pre{display:inline-flex;align-items:center;gap:.3rem;margin-left:.6rem;margin-right:auto;font-size:.78rem;color:var(--gold-ink)}
.acc__pre .inci__au,.pdp__ing .inci__au{width:1em;height:1em;vertical-align:-.1em;margin-right:.25rem}
.pdp__ing--pre b{color:var(--gold-ink)}
/* 色を試す（ギャラリー2枚目。2026-10-10）: 壁紙＝上半分が唇・下半分が肌。指でなぞって塗る */
.gal__s--try{display:block;background:var(--white)}
.try__wall{position:absolute;inset:0 0 19%;background:linear-gradient(var(--lip,#A36C5F) 50%,var(--skin,#BC9880) 50%);overflow:hidden}
.try__cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.try__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:.55rem .9rem;background:rgb(255 255 255/.92);color:var(--ink);border-radius:3px;font-weight:700;font-size:.86rem;white-space:nowrap;pointer-events:none;animation:try-hint 2.4s ease-in-out 3}
@keyframes try-hint{50%{transform:translate(calc(-50% + 14px),-50%)}}
.try__w{position:absolute;right:3%;z-index:2;display:flex;align-items:center;gap:.35rem;min-height:40px;padding:0 .7rem;background:rgb(255 255 255/.94);color:var(--ink);border:0;border-radius:3px;font:inherit;font-weight:700;font-size:.78rem;cursor:pointer;box-shadow:0 2px 8px rgb(46 37 40/.18)}
.try__w i{width:16px;height:16px;border-radius:2px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.15)}
.try__w--lip{top:3%}.try__w--lip i{background:var(--lip)}
.try__w--skin{top:calc(40.5% + 3%)}.try__w--skin i{background:var(--skin)}
.try__w[aria-expanded="true"]{background:var(--ink);color:#fff}
.try__clr{position:absolute;right:3%;bottom:calc(19% + 3%);z-index:2;min-height:36px;padding:0 .7rem;background:rgb(255 255 255/.94);border:0;border-radius:3px;font:inherit;font-weight:700;font-size:.76rem;cursor:pointer}
.try__sw{position:absolute;left:0;right:0;bottom:0;height:19%;display:flex;align-items:center;gap:.5rem;padding:0 3%;overflow-x:auto;scrollbar-width:none}
.try__sw::-webkit-scrollbar{display:none}
.try__sw button{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:3px;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.try__sw button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.try__sw button[aria-checked="true"]{outline:2.5px solid var(--ink);outline-offset:2px}
.try__pk{position:absolute;left:3%;right:3%;bottom:calc(19% + 1.5%);z-index:6;padding:.55rem .6rem;background:var(--white);border-radius:3px;box-shadow:0 8px 24px rgb(46 37 40/.28)}
.try__pk[hidden]{display:none}
/* 肌の色を合わせている間は上（唇の側）に出して、下半分の肌が見えるようにする */
.try__pk[data-for="skin"]{top:1.5%;bottom:auto}
.gal:has(.try__pk:not([hidden])) .gal__nav{display:none}
.try__pad{position:relative;height:clamp(84px,24vw,120px);touch-action:none;cursor:crosshair;border-radius:2px;overflow:hidden}
.try__pad canvas{position:absolute;inset:0;width:100%;height:100%}
.try__dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--ink),0 3px 8px rgb(0 0 0/.3);pointer-events:none}
.try__ax{position:absolute;font-size:.66rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgb(0 0 0/.5);pointer-events:none}
.try__ax--l{left:.4rem;top:50%;transform:translateY(-50%)}.try__ax--r{right:.4rem;top:50%;transform:translateY(-50%)}
.try__ax--t{top:.3rem;left:50%;transform:translateX(-50%)}.try__ax--b{bottom:.3rem;left:50%;transform:translateX(-50%)}
.try__sat{display:flex;align-items:center;gap:.6rem;margin-top:.35rem;font-size:.76rem;font-weight:700}
.try__sat input{flex:1;accent-color:var(--ink)}
.try__pkf{display:flex;justify-content:space-between;align-items:center;margin-top:.1rem}
.try__rst{min-height:40px;background:none;border:0;padding:0;font:inherit;font-size:.78rem;font-weight:700;text-decoration:underline;cursor:pointer;color:var(--ink)}
.try__ok{min-height:40px;padding:0 1.2rem;background:var(--ink);color:#fff;border:0;border-radius:3px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.gal__nav{position:absolute;top:50%;z-index:5;width:36px;height:52px;margin-top:-26px;background:rgb(255 255 255/.9);border:0;border-radius:3px;cursor:pointer;box-shadow:0 2px 8px rgb(46 37 40/.16)}
.gal__nav::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.gal__nav--prev{left:1.5%}.gal__nav--prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.gal__nav--next{right:1.5%}.gal__nav--next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.gal__nav[hidden]{display:none}
.rvf__o{position:relative;flex:none}
.rvf__o input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rvf__o span{display:flex;align-items:center;min-height:44px;padding:0 .85rem;background:var(--white);border:1px solid var(--g-300);border-radius:3px;font-size:.84rem;font-weight:700;white-space:nowrap}
.rvf__o input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.rvf__o input:focus-visible+span{outline:2px solid var(--b-600);outline-offset:1px}
.rvl{display:grid;gap:.5rem}
.rvi{padding:.75rem .85rem;background:var(--white);border-radius:3px}
.rvi__hd{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft)}
.rvi__st{color:var(--buy);letter-spacing:-.05em}
.rvi__who b{color:var(--ink)}
.rvi__t{margin-top:.25rem;font-size:.9rem;line-height:1.75}
.rvi__src{display:inline-block;margin-top:.2rem;font-size:.7rem;color:var(--g-500)}
.rvl__empty{padding:1rem;background:var(--white);border-left:4px solid var(--g-400);font-size:.88rem}
.rvl__more{margin-top:.8rem;border-radius:3px}
/* 関連記事（縦に3件）と記事一覧 */
.arts{display:grid;gap:.6rem}
.art-r{display:grid;grid-template-columns:96px 1fr;gap:.8rem;align-items:center;padding:.5rem;background:var(--white);border-radius:3px;box-shadow:var(--sh-sm)}
.art-r img,.art-r__ph{width:96px;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--g-100)}
.art-r__b{display:grid;gap:.3rem;min-width:0}
.art-r__b b{font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-r__b span{font-size:.75rem;color:var(--ink-soft)}
.arts__more{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;margin-top:.8rem;border:1.5px solid var(--ink);border-radius:3px;font-weight:700;background:var(--white)}
.arts__more::after{content:"→";font-family:var(--f-en);font-size:1.15rem}
.asrch{display:flex;margin:1rem 0 .6rem;border:1.5px solid var(--ink);border-radius:3px;background:var(--white)}
.asrch input{flex:1;min-width:0;min-height:50px;padding:0 .9rem;border:0;background:none;font-size:16px}
.asrch input:focus{outline:none}
.asrch:focus-within{outline:2px solid var(--b-600);outline-offset:1px}
.asrch__go{width:52px;display:grid;place-items:center;background:var(--ink);color:#fff}
.asrch__go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* トップ: 注目記事をあと2回り大きく（列幅の62%→84%）。口コミは出さない */
.story--peek .story__s{flex-basis:84%}
.story--peek .story__ph{max-height:none}
.story--peek .story__t b{font-size:1.05rem}
#rank .rank__rv,.best--top .rvw,.best--top .rsum{display:none!important}

/* 記事カード（2026-10-02 再修正）: 横長の行をやめ、トップの注目記事と同じ縦長（4:5）。
   画像の下に影・黒いグラデーションを付けない（注目記事の画像からも影を外す） */
.arts{display:grid;grid-template-columns:1fr;gap:1.1rem}
.arts--grid{grid-template-columns:1fr 1fr;gap:1rem .7rem}
.art-c{display:grid;gap:.35rem;align-content:start;min-width:0}
.art-c__ph{display:block;aspect-ratio:4/5;background:var(--g-100);border-radius:3px;overflow:hidden}
.art-c__ph img{width:100%;height:100%;object-fit:cover;display:block}
.art-c__t{font-size:1rem;line-height:1.5;padding:0 .1rem}
.arts--grid .art-c__t{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-c__d{font-size:.72rem;color:var(--g-500);padding:0 .1rem}
.story--peek .story__ph{box-shadow:none}

/* ===== マイコスメ棚（2026-10-04）=====
   棚は SVG（account_pages の shelf_markup.js）。ここでは中に置く「おもち」とその動きを作る。
   ★ CLAUDE.md の「角丸3pxまで」の例外: 利用者が「もちもち・つるつる」の棚を明示的に指定したため、棚の中だけ丸く作る */
.shelf{position:relative;margin:.4rem 0 2rem}
.shelf__h{margin:0 0 .7rem}
.shelf__unit{position:relative;width:min(100%,358px);margin:0 auto;aspect-ratio:360/440;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.shelf__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 上部中央の白い pado。ロゴの白抜きに、棚より少し濃い影を1px落として浮かせる */
.shelf__logo{position:absolute;left:50%;top:3.6%;width:30%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 2px 0 rgb(201 96 72/.55)) drop-shadow(0 0 10px rgb(255 255 255/.35));pointer-events:none}
.shelf__slots{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.shelf__slot{position:absolute;display:flex;align-items:flex-end;justify-content:center}
/* 置いたものの土台: 白いおもち。上がふっくら、下は床に少しつぶれて座る */
.shelf__it{position:relative;width:100%;height:100%;padding:9% 8% 12%;border:0;cursor:grab;touch-action:none;
  border-radius:48% 48% 40% 40% / 46% 46% 32% 32%;
  background:radial-gradient(120% 95% at 34% 22%,#fff 0 46%,#FFF3EE 72%,#FCDCCF 100%);
  box-shadow:inset 0 -8px 12px rgb(232 128 104/.30),inset 0 3px 3px #fff,0 9px 10px -5px rgb(150 58 36/.42),0 2px 0 rgb(255 255 255/.6);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  animation:shBreath 4.2s ease-in-out infinite;animation-delay:calc(var(--d,0) * -0.9s)}
.shelf__slot:nth-child(2) .shelf__it{--d:1}.shelf__slot:nth-child(3) .shelf__it{--d:2}.shelf__slot:nth-child(4) .shelf__it{--d:3}.shelf__slot:nth-child(5) .shelf__it{--d:4}
/* 商品画像: 白い余白をおもちに溶かして、パッケージだけが立っているように見せる */
.shelf__it img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;filter:saturate(1.05);border-radius:22%}
/* つるつるの照り */
.shelf__it::after{content:"";position:absolute;top:7%;left:17%;width:36%;height:15%;border-radius:50%;background:radial-gradient(closest-side,#fff,rgb(255 255 255/0));transform:rotate(-16deg);opacity:.95;pointer-events:none;mix-blend-mode:screen}
.shelf__it:focus-visible{outline:3px solid #fff;outline-offset:3px}
.shelf__nm{display:grid;place-items:center;height:100%;font-size:.62rem;font-weight:700;line-height:1.3;color:var(--ink);text-align:center}
@keyframes shBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.985) translateY(.6px)}}
/* つまんでいる間: 大きく、影が遠く。動きは shelf.js が transform で付ける */
.shelf__it.is-drag{z-index:6;cursor:grabbing;transition:none;animation:none;
  box-shadow:inset 0 -8px 12px rgb(232 128 104/.30),inset 0 3px 3px #fff,0 22px 22px -8px rgb(150 58 36/.45)}
/* 置いた瞬間: ぷるんと揺れて落ち着く */
.shelf__it.is-land{animation:shLand .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes shLand{0%{transform:scale(1.2,.8) translateY(4%)}35%{transform:scale(.9,1.12) translateY(-6%)}65%{transform:scale(1.05,.96)}100%{transform:none}}
/* 落とす先: 枠の後ろが白くふわっと光る */
.shelf__slot.is-target::before{content:"";position:absolute;inset:-6% -8% -2%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255/.95),rgb(255 255 255/0));animation:shGlow .9s ease-in-out infinite alternate}
@keyframes shGlow{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.04)}}
/* 空いた枠: 半透明の白いおもちに、丸い＋ */
.shelf__add{position:relative;width:78%;height:70%;margin-bottom:3%;border:0;cursor:pointer;border-radius:50% 50% 44% 44% / 52% 52% 40% 40%;
  background:radial-gradient(110% 90% at 36% 26%,rgb(255 255 255/.75),rgb(255 255 255/.32) 60%,rgb(255 255 255/.18));
  box-shadow:inset 0 -5px 8px rgb(214 104 80/.25),0 6px 8px -5px rgb(150 58 36/.3);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.shelf__add::before,.shelf__add::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:7%;border-radius:99px;background:#fff;box-shadow:0 1px 0 rgb(214 104 80/.35);transform:translate(-50%,-50%)}
.shelf__add::after{transform:translate(-50%,-50%) rotate(90deg)}
.shelf__add:hover,.shelf__add:focus-visible{transform:scale(1.06,.96)}
.shelf__add:focus-visible{outline:3px solid #fff;outline-offset:3px}
.shelf.is-dragging .shelf__add{opacity:.25}
/* 吹き出し: 白いおもちの吹き出し。押した商品の真上に出る */
.shbub{position:absolute;z-index:8;min-width:220px;max-width:300px;padding:.7rem .75rem .65rem;background:#fff;border-radius:22px;box-shadow:0 10px 24px -6px rgb(150 58 36/.35),inset 0 -3px 0 #FCE3D9}
.shbub::after{content:"";position:absolute;left:var(--tip,50%);bottom:-9px;width:18px;height:18px;margin-left:-9px;background:#fff;border-radius:3px 0 6px 0;transform:rotate(45deg);box-shadow:3px 3px 6px -3px rgb(150 58 36/.3)}
.shbub__n{display:block;font-size:.84rem;line-height:1.45;margin:0 .2rem .55rem;color:var(--ink)}
.shbub__a{display:flex;align-items:center;gap:.4rem}
.shbub__a a,.shbub__a button{display:grid;place-items:center;min-height:44px;border:0;border-radius:22px;font-weight:700;font-size:.82rem}
.shbub__a a{flex:1;background:#F0987F;color:#fff;box-shadow:inset 0 -3px 0 rgb(201 96 72/.55)}
.shbub__a [data-shelf-rm]{flex:1;background:#FFF1EB;color:#B5482F}
.shbub__a [data-shelf-mv]{width:44px;background:#FFF1EB}
.shbub__a [data-shelf-mv]:disabled{opacity:.35}
.shbub__ar{width:10px;height:10px;border-right:2.4px solid #B5482F;border-bottom:2.4px solid #B5482F;border-radius:0 0 2px 0;transform:rotate(-45deg);margin-right:3px}
.shbub__ar--l{transform:rotate(135deg);margin:0 0 0 3px}
/* お気に入りから選ぶ: 下から出るクリーム色のシート。中も同じおもち */
.shpick{width:min(100%,440px);max-width:none;margin:auto auto 0;padding:0;border:0;border-radius:28px 28px 0 0;background:#FFF6F2;color:var(--ink);box-shadow:0 -10px 30px rgb(150 58 36/.25)}
.shpick::backdrop{background:rgb(46 37 40/.45)}
.shpick[open]{animation:shUp .45s cubic-bezier(.34,1.4,.64,1)}
@keyframes shUp{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.shpick__in{padding:1.1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.shpick__in::before{content:"";display:block;width:44px;height:5px;margin:0 auto .9rem;border-radius:99px;background:#F4C4B3}
.shpick__h{font-weight:700;font-size:.95rem;margin-bottom:.8rem}
.shpick__list{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-height:52vh;overflow-y:auto;padding:.2rem}
.shpick__it{display:grid;gap:.35rem;justify-items:center;border:0;background:none;padding:0;cursor:pointer}
.shpick__it img{width:100%;aspect-ratio:1;object-fit:contain;padding:12%;mix-blend-mode:multiply;border-radius:48% 48% 40% 40% / 46% 46% 32% 32%;background:radial-gradient(120% 95% at 34% 22%,#fff 0 50%,#FFE9E0 100%);box-shadow:inset 0 -6px 10px rgb(232 128 104/.25),0 6px 8px -5px rgb(150 58 36/.35)}
.shpick__it span{font-size:.7rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
.shpick__it:active img{transform:scale(1.05,.94)}
.shpick__empty{padding:1rem 0;font-size:.88rem;text-align:center}
.shpick__x{display:block;width:100%;min-height:48px;margin-top:.9rem;border:0;border-radius:24px;background:#fff;font-weight:700;box-shadow:inset 0 -3px 0 #F6D3C6}
@media(prefers-reduced-motion:reduce){.shelf__it,.shelf__slot.is-target::before{animation:none}.shelf__it.is-land{animation:none}.shpick[open]{animation:none}}

/* ===== 複数ストアの価格（2026-10-05）=====
   記事の商品欄: 全ストアを並べ、最安の行に印。商品ページ: 価格と購入のかたまりの中に、最安以外をたたんだトグル */
.plist{display:grid;gap:.35rem;margin:.2rem 0 .6rem}
.plist__r{position:relative;display:grid;grid-template-columns:1fr auto 4.4rem;align-items:center;gap:.6rem;min-height:48px;padding:.35rem .5rem .35rem .7rem;background:var(--white);border:1px solid var(--g-200);border-radius:3px}
.plist__r--best{border:1.5px solid var(--buy);padding-top:1.05rem}
.plist__best{position:absolute;top:-1px;left:-1px;padding:.05rem .45rem;background:var(--buy);color:#fff;font-weight:700;font-size:.68rem;border-radius:3px 0 3px 0}
.plist__st{font-size:.86rem;min-width:0}
.plist__p{font-size:1.02rem}
.plist__r--best .plist__p{font-size:1.25rem;color:var(--buy)}
.plist__na{font-size:.76rem;color:var(--ink-soft)}
.plist__go{display:grid;place-items:center;min-height:40px;border:1.5px solid var(--ink);border-radius:3px;font-weight:700;font-size:.84rem;background:var(--white);color:var(--ink)}
.plist__go--best{background:var(--buy);border-color:var(--buy);color:#fff}
.plist__go--best:hover{background:var(--buy-d)}
.buyb__more{margin-top:.1rem;border-top:1px solid var(--g-200)}
.buyb__more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;min-height:46px;font-size:.88rem;font-weight:700}
.buyb__more>summary::-webkit-details-marker{display:none}
.buyb__more>summary::before{content:"+";font-family:var(--f-en);font-size:1.35rem;line-height:1;color:var(--buy)}
.buyb__more[open]>summary::before{content:"−"}
.buyb__more .cmp{margin:0 0 .3rem}

/* ===== メンズOK の印（2026-10-05）。商品紹介の右下。ベタ塗り＋白文字、角は2px ===== */
.menok{position:absolute;right:.35rem;bottom:.35rem;z-index:3;display:inline-flex;align-items:center;gap:.2rem;padding:.12rem .4rem;background:var(--ink);color:#fff;font-family:var(--f-ja);font-weight:700;font-size:.62rem;line-height:1.3;letter-spacing:.04em;border-radius:2px;pointer-events:none;white-space:nowrap}
.menok::before{content:"";width:.5rem;height:.5rem;border:1.5px solid #fff;border-radius:50%;margin-right:.05rem}
.pcard__img{position:relative}
.igi{position:relative}
.igi>.menok{right:.6rem;bottom:.6rem}
.rank__item>.menok{right:.5rem;bottom:.5rem}
.menok--inline{position:static;background:var(--kr-deep)}
.pdp__menok{margin:.35rem 0 0}

/* ===== 商品を紹介している TikTok（2026-10-05）。成分の下・一緒に使う商品の上。横にスクロール ===== */
.tt{padding:.4rem 0 1.4rem}
.tt__h{display:flex;align-items:center;gap:.45rem;margin:0 0 .7rem}
.tt__mark{width:22px;height:22px;border-radius:3px;background:var(--ink);position:relative;flex:none}
.tt__mark::after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tt__rail{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) .3rem;scroll-padding-left:var(--gutter)}
.tt__rail::-webkit-scrollbar{display:none}
.tt__v{flex:0 0 62%;max-width:300px;margin:0;scroll-snap-align:start}
.tt__v iframe{display:block;width:100%;aspect-ratio:9/16;border:0;border-radius:3px;background:var(--ink)}
.tt__v figcaption{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.76rem;min-width:0}
.tt__v figcaption a{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* YouTube（TikTok と同じ位置）。トップ最上部の .story--full と同じ全幅スライダーで、枠は横長 16:9 ぴったり */
.yt{padding:.4rem 0 1.4rem}
.yt__story{position:relative}
.yt .story--full.yt__story .story__s{background:transparent}
.yt__bars{pointer-events:none}
.yt__bars .story__bar{box-shadow:0 0 3px rgb(0 0 0/.35)}
.yt__ph{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;background:var(--ink);overflow:hidden;cursor:pointer}
.yt__ph img{display:block;width:100%;height:100%;object-fit:cover}
.yt__frame{cursor:auto}
.yt__play{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:3px;background:var(--ink);box-shadow:0 2px 12px rgb(0 0 0/.28)}
.yt__play::after{content:"";position:absolute;left:26px;top:13px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.yt__ph:focus-visible{outline:2px solid var(--b-600);outline-offset:-2px}
.yt__story .igl__nav{top:calc((100vw * 9 / 16) / 2 - 22px)}
@supports (width:1cqw){.yt__story{container-type:inline-size}.yt__story .igl__nav{top:calc(100cqw * 9 / 32 - 22px)}}
.yt__cap{display:flex;align-items:baseline;gap:.6rem;margin:0;padding:.45rem var(--gutter) 0;font-size:.76rem;min-width:0}
.yt__cap a{flex:1;min-width:0;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt__cap span{flex:none;color:var(--g-500)}
.tt__off{flex:none;padding:.02rem .35rem;background:var(--ink);color:#fff;font-weight:700;font-size:.62rem;border-radius:2px}

/* マイコスメ（下部タブ）の未ログイン時。2026-10-06 */
.acct__gate{margin-top:1.2rem;padding:1.4rem 1.2rem;background:#fff;border:1.5px solid var(--ink);border-radius:3px}
.acct__gate p{margin:0 0 1rem;font-weight:700;font-size:1rem;color:var(--ink)}

/* ===== マイコスメ棚: 写真で登録（2026-10-06）。棚の中だけ角丸・コーラルの例外（利用者指定）を引き継ぐ ===== */
.shpick__h--sub{margin:1.1rem 0 .6rem;font-size:.84rem;color:var(--ink-soft)}
.shamt{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.shamt button{display:grid;justify-items:center;gap:.3rem;min-height:104px;padding:.7rem .3rem .6rem;border:0;border-radius:20px;background:#fff;color:var(--ink);cursor:pointer;box-shadow:inset 0 -4px 0 #F6D3C6}
.shamt button svg{width:42px;height:49px}
.shamt button b{font-size:.86rem}
.shamt button:hover{transform:translateY(-2px)}
.shamt button[aria-pressed=true]{background:#F0987F;color:#fff;box-shadow:inset 0 -4px 0 rgb(201 96 72/.55)}
.shamt--s{margin:0 0 .55rem;gap:.35rem}
.shamt--s button{min-height:64px;padding:.4rem .2rem;border-radius:16px;background:#FFF1EB;box-shadow:none}
.shamt--s button svg{width:26px;height:30px}
.shamt--s button b{font-size:.72rem}
/* 自分で撮った写真の棚の品: 絵ではなく写真なので、丸い札に収めて切り抜く */
.shelf__it--ph img{object-fit:cover;mix-blend-mode:normal;border-radius:26%;box-shadow:0 0 0 3px #fff,0 6px 10px -6px rgb(150 58 36/.6)}
/* 残りの量: 3本の目盛り（左から埋まる） */
.shelf__amt{position:absolute;left:50%;bottom:2%;display:flex;gap:2px;padding:3px 4px;border-radius:6px;background:#fff;transform:translateX(-50%);box-shadow:0 2px 4px rgb(150 58 36/.3)}
.shelf__amt i{width:7px;height:7px;border-radius:2px;background:#F6D3C6}
.shelf__amt[data-a=little] i:nth-child(1),.shelf__amt[data-a=half] i:nth-child(-n+2),.shelf__amt[data-a=lots] i{background:#E07A62}

/* ===== ポイント（マイコスメ）。棚の外なので白地＋墨線・角3px ===== */
.pts{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2rem 1rem;margin:1.4rem 0 1.6rem;padding:1rem 1.1rem;background:var(--white);border:1.5px solid var(--ink);border-radius:3px}
.pts__hd{display:flex;align-items:baseline;gap:.5rem;margin:0;grid-column:1/-1}
.pts__hd span{font-weight:700;font-size:.95rem;margin-right:auto}
.pts__n{font-family:var(--f-en);font-weight:800;font-size:clamp(3.2rem,15vw,4.6rem);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
.pts__hd small{font-family:var(--f-en);font-weight:800;font-size:1.1rem;color:#E07A62}
.pts__rule{margin:0;font-size:.82rem;color:var(--ink-soft)}
.pts__more{grid-column:1/-1;margin-top:.4rem}
.pts__more summary{cursor:pointer;font-weight:700;font-size:.86rem;min-height:44px;display:flex;align-items:center}
.pts__row{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--g-200);font-size:.84rem;margin:0}
.pts__row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pts__row b{color:#E07A62}

/* ===== 週替わりプレゼント（/giveaway/weekly） ===== */
.wkg__hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2rem 1rem;margin-top:1rem;padding:1.2rem 1.1rem 1rem;background:var(--ink);color:#fff;border-radius:3px}
.wkg__prize{grid-column:1/-1;margin:0;font-weight:700;font-size:1.1rem;line-height:1.5}
.wkg__win{display:flex;align-items:baseline;gap:.2rem;margin:0;grid-row:2;grid-column:2}
.wkg__win b{font-family:var(--f-en);font-weight:800;font-size:clamp(4.4rem,22vw,6.4rem);line-height:.85;color:#F8A88F}
.wkg__win span{font-weight:700;font-size:1.1rem}
.wkg__term{grid-row:2;grid-column:1;margin:0;font-family:var(--f-en);font-weight:700;font-size:1rem;opacity:.85}
.wkg .step--last{background:var(--white);border:1.5px dashed var(--g-400);box-shadow:none}
.wkg__form{display:grid;gap:.4rem;margin-top:.4rem}
.wkg__form .pick__o span svg{width:18px;height:18px;flex:none;fill:currentColor}
.pick__o.is-used span{opacity:.35;text-decoration:line-through}
.pick__o.is-used input{cursor:not-allowed}
.wkg__at{display:flex;align-items:center;gap:.4rem}
.wkg__at span{font-family:var(--f-en);font-weight:800;font-size:1.2rem}
.wkg__form .btn{margin-top:.8rem}
.wkg__closed{margin-top:.6rem;font-weight:700}
.wkg__done{display:grid;gap:.4rem;margin-top:.8rem}
.wkg__ok{display:flex;align-items:center;gap:.7rem;margin:0;padding:.75rem .9rem;background:var(--ink);color:#fff;border-radius:3px;font-size:.9rem}
.wkg__ok b{font-family:var(--f-en);min-width:5.2rem}
.wkg__notes{margin-top:1.4rem;border-top:1.5px solid var(--ink)}
.wkg__notes summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700}
.wkg__notes p{margin:.5rem 0;font-size:.86rem;line-height:1.7}
.wkg .chtab{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.wkg .chtab__b{min-width:0;justify-content:center;padding-inline:.4rem}
/* 開閉（応募の条件・ポイントの履歴）は「＋」で開くと分かるように */
.wkg__notes summary,.pts__more summary{list-style:none;justify-content:space-between}
.wkg__notes summary::-webkit-details-marker,.pts__more summary::-webkit-details-marker{display:none}
.wkg__notes summary::after,.pts__more summary::after{content:"+";font-family:var(--f-en);font-weight:800;font-size:1.5rem;line-height:1;color:#E07A62;transition:transform .2s}
.wkg__notes[open] summary::after,.pts__more[open] summary::after{transform:rotate(45deg)}

/* ===== 横スクロールは1回のスワイプで1枚だけ進む（2026-10-07 利用者指示: 勢いで何枚も流れて止まらなかった） =====
   scroll-snap-stop:always で途中の枚を飛ばさない。scroll-padding で左の余白（gutter）に揃えて止める */
.story__rail,.rail,.tt__rail,.igrail{overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter)}
.story__s,.rail>*,.tt__v,.gal__s{scroll-snap-stop:always}

/* ===== トップ最上部の Instagram（サムネだけ。2026-10-08） =====
   1画面に1枚（peek なし）。4:5 の画像は切らず、下端に墨のベタ帯でタイトル2行。矢印は白地＋墨線 */
.igl{padding:0}
.story--full{margin-inline:0}
.story--full .story__rail{gap:0;padding:0;scroll-padding-inline:0}
.story--full .story__s{flex:0 0 100%;border-radius:0;background:var(--ink)}
.story--full .story__bars{left:.8rem;right:.8rem;top:.65rem}
.story--full .story__bar{background:rgb(46 37 40/.5)}
.igl__ph{aspect-ratio:4/5;max-height:none}
.igl__ph img{width:100%;height:100%;object-fit:cover}
.igl__nav{position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);cursor:pointer}
.igl__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.igl__nav--prev{left:.6rem}
.igl__nav--next{right:.6rem}
.igl__nav:hover{background:var(--ink);color:#fff}
.igl__nav:focus-visible,.art2__btn:focus-visible{outline:2px solid var(--b-600);outline-offset:2px}

/* ===== IG 記事テンプレート /picks/<slug>（2026-10-08）。四角い方言: 角3px以内・白地＋墨線・ベタ＋白文字 =====
   極端にする1箇所は見出し画像に重なる墨のタイトル板 */
.art2{padding-bottom:2.4rem}
.art2__hero{position:relative;display:block;margin-bottom:0}
.art2__ph{display:block;aspect-ratio:4/5;background:var(--g-100)}
.art2__ph img{width:100%;height:100%;object-fit:cover}
.art2__plate{position:relative;margin:-5.2rem 1rem 0;padding:1rem 1.1rem 1.25rem;background:var(--ink);color:#fff;border-radius:3px}
.art2__meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.art2__cat{padding:.15rem .6rem;border-radius:2px;background:var(--b-600);color:#fff;font-weight:700;font-size:.78rem;line-height:1.6}
.art2__meta time{font-family:var(--f-en);font-weight:600;font-size:.85rem;letter-spacing:.08em;color:#fff}
.art2__h{word-break:auto-phrase;text-wrap:balance;margin:0;font-family:var(--f-ja);font-weight:700;font-size:1.65rem;line-height:1.4;letter-spacing:.02em}
.art2__w{padding-top:1.1rem}
.art2__act{display:flex;gap:.6rem;margin-bottom:1.1rem}
.art2__btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:0 1rem;border:0;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none}
.art2__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art2__btn:hover{background:var(--ink);color:#fff}
.art2__smp{margin:0 0 1rem;padding:.55rem .8rem;border-radius:2px;background:var(--b-600);color:#fff;font-weight:700;font-size:.82rem;line-height:1.6}
.art2__lead{margin:0 0 1.3rem;font-size:1.02rem;line-height:1.9}
.art2__toc{margin:0 0 2rem;padding:1.1rem 1rem .4rem;background:var(--g-100);border-radius:3px}
.art2__toc-h,.art2__tags-h,.art2__rel h2,.ab__label{display:flex;align-items:center;gap:.5rem;margin:0;font-family:var(--f-ja);font-weight:700}
.art2__toc-h::before,.art2__tags-h::before,.art2__rel h2::before,.ab__label::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--pa)}
.art2__toc-h{margin-bottom:.4rem;font-size:1rem}
.art2__toc-n{display:grid;position:relative}
.art2__toc-n a{position:relative;padding:.5rem 0 .5rem 1.15rem;color:var(--ink);font-weight:700;line-height:1.55;text-decoration:none;overflow-wrap:anywhere}
.art2__toc-n a::before{content:"\30FB";position:absolute;left:0;top:.42rem;color:var(--pa);font-weight:900;font-size:1.25em;line-height:1.3}
.art2__toc-n a.is-h3{padding-left:2.25rem;font-weight:400;font-size:.92rem}
.art2__toc-n a.is-h3::before{left:1.1rem;top:.5rem}
.art2__toc.is-fold .art2__toc-n{max-height:6.2rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.art2__toc-b{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:44px;margin-top:.2rem;padding:0;border:0;background:none;color:var(--ink);font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.art2__toc-b[hidden]{display:none}
.art2__toc-b::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.art2__toc-b[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
.art2__toc-b:focus-visible{outline:2px solid var(--b-600);outline-offset:-2px}
.ab.art2__body>*+*{margin-top:1.1rem}
.art2__tags{margin:2rem 0 0;padding:1.1rem 1rem;background:var(--g-100);border-radius:3px}
.art2__tags-h{margin-bottom:.6rem;font-size:1rem}
.art2__tags-l{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;font-family:var(--f-en);font-weight:600;font-size:.95rem;color:var(--ink)}
.art2__rel{margin-top:2.6rem;padding-top:1.4rem;border-top:1.5px solid var(--ink)}
.art2__rel h2{margin:0 0 1rem;font-size:1.2rem}
.art2__rel>div{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem .8rem}
.art2__rel a{display:grid;align-content:start;gap:.4rem;color:var(--ink);text-decoration:none}
.art2__rph{display:block;aspect-ratio:4/5;background:var(--g-100);border-radius:2px;overflow:hidden}
.art2__rph img{width:100%;height:100%;object-fit:cover}
.art2__rel b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.9rem;line-height:1.5}
.art2__rel time{font-size:.74rem;color:var(--g-500)}
.art2__orig{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:2rem;border-radius:3px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none}

/* 記事本文のブロック（assets/media/article-blocks.js の render()。Studio のプレビューも同じ CSS を読む） */
.ab p{margin:0;line-height:1.95}
.ab p a,.ab li a{color:var(--b-700);text-decoration:underline;text-underline-offset:3px}
.ab__h2{margin:2.6rem 0 0!important;padding-bottom:.6rem;border-bottom:4px solid var(--pa);font-family:var(--f-ja);font-weight:700;font-size:1.3rem;line-height:1.5}
.ab__h3{position:relative;margin:1.8rem 0 0!important;padding-left:.7rem;font-family:var(--f-ja);font-weight:700;font-size:1.08rem;line-height:1.55}
.ab__h3::before{content:"";position:absolute;left:0;top:.22em;width:4px;height:1.1em;background:var(--pa)}
.ab__ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.ab__ul li{position:relative;padding-left:1.1rem;line-height:1.8}
.ab__ul li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--pa)}
.ab__q{margin:0;padding:.2rem 0 .2rem 1rem;border-left:4px solid var(--pa)}
.ab__q p{font-family:var(--f-ja);font-weight:700;line-height:1.8}
.ab__hr{height:0;margin:2rem 0;border:0;border-top:1.5px solid var(--pa)}
.ab__fig{margin-inline:calc(var(--gutter)*-1);margin-block:1.4rem}
.ab__fig img{width:100%;height:auto}
.ab__fig figcaption{margin:.45rem var(--gutter) 0;font-size:.78rem;line-height:1.6;color:var(--g-500)}
.ab__emb{display:flex;justify-content:center;max-width:540px;margin-inline:auto}
.ab__emb .instagram-media,.ab__emb .twitter-tweet{max-width:100%!important;min-width:0!important;margin:0 auto!important}
.ab__emb--tiktok iframe{width:100%;max-width:325px;aspect-ratio:9/16;border:0;border-radius:3px}
.ab__emb--youtube iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:3px}
.ab__emb--ph{flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:140px;padding:1rem;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white);text-align:center}
.ab__emb--ph span{font-family:var(--f-en);font-weight:700}
.ab__emb--ph small{max-width:100%;overflow-wrap:anywhere;color:var(--g-500)}
/* 記事の商品カード（::product。2026-10-14）: 画像・ブランド・商品名・最安値＋〜・「購入する」。押すと下からストア一覧のシート（buy-sheet.js） */
.bz{position:relative;display:grid;gap:.15rem;margin-block:1.4rem;padding:.7rem .7rem .8rem;background:var(--white);border:1px solid var(--g-300);border-radius:3px}
.bz__ph{position:relative;aspect-ratio:1/1;margin-bottom:.55rem;background:var(--white);border-radius:3px;overflow:hidden}
.bz__ph a,.bz__ph img{display:block;width:100%;height:100%}
.bz__ph img{object-fit:contain}
.bz__save{position:absolute!important;right:.5rem;bottom:.5rem;min-width:44px;height:44px!important;padding:0 .7rem!important;font-size:.8rem!important;gap:.3rem!important}
.bz__b{font-family:var(--f-en);font-weight:700;font-size:.78rem;line-height:1.4;letter-spacing:.06em;color:var(--ink-soft)}
.bz__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--f-ja);font-weight:700;font-size:1rem;line-height:1.55;color:var(--ink)}
.bz__t:hover{text-decoration:underline;text-underline-offset:3px}
.bz__p{display:flex;align-items:baseline;gap:.1rem;margin:.35rem 0 .6rem;color:var(--ink)}
.bz__p b{font-size:1.5rem;line-height:1.2;letter-spacing:0}
.bz__p span{font-weight:700;font-size:.95rem}
/* 「購入する」は横長の角丸。地はパステルオレンジ、字は墨（白字はコントラスト不足のため） */
.bz__go{display:grid;place-items:center;width:100%;min-height:48px;padding:0 1rem;border:0;border-radius:12px;background:var(--pa);color:var(--ink);font-family:var(--f-ja);font-weight:700;font-size:1rem;letter-spacing:.08em;cursor:pointer;transition:background .15s}
.bz__go:hover{background:var(--b-500)}
.bz__go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bz__go--off{margin-top:.2rem}
.bz .cmp__ulp{margin:.3rem 0 .4rem}
.bzs{position:fixed;inset:0;z-index:2000}
.bzs__scrim{position:absolute;inset:0;background:rgb(46 37 40/.55);opacity:0;transition:opacity .22s}
.bzs__panel{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;max-width:480px;max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;padding:0 1rem calc(.9rem + env(safe-area-inset-bottom));background:var(--white);border-radius:3px 3px 0 0;transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.7,.2,1);outline:0}
.bzs.is-open .bzs__scrim{opacity:1}
.bzs.is-open .bzs__panel{transform:none}
.bzs__hd{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1.5px solid var(--ink)}
.bzs__h{font-family:var(--f-ja);font-weight:700;font-size:1.1rem}
.bzs__x{display:grid;place-items:center;width:44px;height:44px;margin-right:-.6rem;border:0;background:none;font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer}
.bzs__ls{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.bzs__r{display:grid;grid-template-columns:1fr auto 1.2rem;align-items:center;gap:.7rem;min-height:56px;border-bottom:1px solid var(--g-300);color:var(--ink)}
.bzs__r:hover .bzs__a{color:var(--b-700);transform:translateX(2px)}
.bzs__s{display:flex;align-items:center;gap:.5rem;min-width:0;font-weight:700;font-size:.95rem}
.bzs__min{flex:none;padding:.05rem .4rem;background:var(--b-700);color:#fff;border-radius:2px;font-style:normal;font-weight:700;font-size:.68rem;line-height:1.5}
.bzs__v{font-weight:700;font-size:1.05rem}
.bzs__v--na{font-size:.82rem;font-weight:500;color:var(--ink-soft)}
.bzs__a{font-size:1.1rem;transition:transform .15s,color .15s}
.bzs__n{margin:.7rem 0 0;font-size:.72rem;line-height:1.6;color:var(--ink-soft)}
.bz-lock,.bz-lock body{overflow:hidden}
@media (min-width:640px){.bzs__panel{bottom:50%;transform:translateY(calc(50% + 40px));opacity:0;border-radius:3px;transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .2s}.bzs.is-open .bzs__panel{transform:translateY(50%);opacity:1}.bz{max-width:360px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.bzs__scrim,.bzs__panel,.bzs__a,.bz__go{transition:none}}
.art2__body .igi{margin-block:1.4rem}
.art2__body .igi__cols{grid-template-columns:1fr}
.art2__body .igi:not(.igi--ugc) .igi__l{display:none}
.ab__prod--ph{padding:1rem;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white)}
.ab__spot{padding:1rem 1.05rem;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ab__spot-n{position:relative;margin:0 0 .7rem!important;padding-left:.7rem;font-family:var(--f-ja);font-weight:700;font-size:1.1rem;line-height:1.5}
.ab__spot-n::before{content:"";position:absolute;left:0;top:.2em;width:4px;height:1.1em;background:var(--pa)}
.ab__spot dl{display:grid;gap:.5rem;margin:0}
.ab__spot-r{display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem;line-height:1.7;font-size:.9rem}
.ab__spot dt{font-weight:700}
.ab__spot dd{margin:0;overflow-wrap:anywhere}
.ab__spot a.ab__spot-map{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:.9rem;border-radius:3px;background:var(--pa-soft);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font-weight:700;text-decoration:none}
.ab__spot a.ab__spot-map:hover{background:var(--ink);color:#fff}
.ab__spot-note{margin-top:.7rem!important;font-size:.74rem;line-height:1.6;color:var(--g-500)}

/* ============================================================
   肌診断・肌情報の選択・おすすめ（2026-10-08）。描画は account.js（マイページ）と persona.js
   角丸は 3px まで。例外は「今すぐ診断」ブロックだけ（利用者指定の 22px）
   ============================================================ */
.skin__copy{margin:.1rem 0 0;font-weight:700;font-size:.84rem;letter-spacing:0;line-height:1.6}
/* 今すぐ診断: 角丸 22px は利用者の指定（CLAUDE.md の「角丸は 3px まで」をこのブロックだけ外す）。
   b-500 では白文字のコントラストが足りないので b-600 の地にする */
.skin__go{position:relative;display:flex;align-items:center;justify-content:center;gap:1.1rem;width:100%;min-height:120px;margin:.2rem 0 0;padding:1rem 1.2rem;border:0;border-radius:22px;background:var(--b-600);color:#fff;font-family:var(--f-ja);font-weight:700;font-size:1.75rem;line-height:1.2;letter-spacing:.06em;cursor:pointer;transition:transform .15s}
.skin__go::before{content:"";flex:none;width:30px;height:40px;border:3px solid #fff;border-radius:50%}
.skin__go:active{transform:scale(.985)}
.skin__go:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skin__sel{justify-self:start;min-height:44px;padding:0;font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.skin__now{margin:0 0 .5rem;padding-bottom:1rem;border-bottom:1px solid var(--g-300);font-size:.9rem;font-weight:700;line-height:1.6}
@media(prefers-reduced-motion:reduce){.skin__go{transition:none}}

/* カメラシート（全画面。500px 列では列の幅）。暗い地に白と b-700 */
.cam{width:min(100%,500px);max-width:none;height:100dvh;max-height:none;margin:0 auto;padding:0;border:0;background:var(--ink);color:#fff;overflow:hidden}
.cam::backdrop{background:#000}
.cam[open]{display:block}
.cam__x{position:absolute;top:.5rem;right:.5rem;z-index:3;width:48px;height:48px;border-radius:3px;background:rgb(46 37 40/.7);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.cam__st{display:flex;flex-direction:column;align-items:center;gap:.65rem;height:100%;padding:3.6rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.cam__view{position:relative;width:min(100%,calc((100dvh - 17.5rem)*.75));aspect-ratio:3/4;flex:none;background:#000;overflow:hidden;border-radius:3px}
.cam__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam__guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam__guide path{fill:rgb(46 37 40/.68)}
.cam__guide ellipse{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.cam__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam__scan{position:absolute;left:0;right:0;top:0;height:4px;background:var(--b-500);box-shadow:0 0 0 1px #fff;animation:camScan 1.5s ease-in-out infinite alternate}
@keyframes camScan{to{top:calc(100% - 4px)}}
@media(prefers-reduced-motion:reduce){.cam__scan{animation:none;top:50%}}
.cam__tip{margin:0;font-weight:700;font-size:1rem;line-height:1.5;text-align:center}
.cam__consent{margin:0;font-size:.85rem;line-height:1.5;text-align:center;color:#fff}
/* シャッターは押す丸い物体なので円形（バッジやチップではない） */
.cam__shot{flex:none;width:72px;height:72px;margin-top:auto;border-radius:50%;background:#fff;border:6px solid var(--ink);box-shadow:0 0 0 3px #fff;cursor:pointer}
.cam__shot:active{transform:scale(.94)}
.cam__shot:focus-visible{outline:3px solid var(--b-500);outline-offset:6px}
.cam__fb{display:grid;gap:.8rem;width:100%;margin-top:18dvh}
.cam__fbm{margin:0;font-weight:700;font-size:1.05rem;line-height:1.7}
.cam__file{position:relative;display:flex;align-items:center;justify-content:center;min-height:72px;border-radius:3px;background:#fff;color:var(--ink);font-weight:700;font-size:1.1rem;cursor:pointer}
.cam__file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cam__file:focus-within{outline:3px solid var(--b-500);outline-offset:3px}
.cam__btns{display:grid;grid-template-columns:1fr 1.5fr;gap:.6rem;width:100%;margin-top:auto}
.cam__b{min-height:56px;padding:0 .8rem;border-radius:3px;font-weight:700;font-size:1rem;cursor:pointer}
.cam__b--line{border:1.5px solid #fff;color:#fff}
.cam__b--go{background:var(--b-700);color:#fff}
.cam__b:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cam__res{justify-content:center;padding-top:1rem}
.cam__rr{display:grid;grid-template-columns:1fr 1fr;width:100%;border:1.5px solid #fff;border-radius:3px;overflow:hidden}
.cam__rc{display:grid;gap:.5rem;justify-items:start;padding:1.3rem 1rem 1.5rem}
.cam__rc small{font-size:.82rem;font-weight:700}
.cam__rc b{font-family:var(--f-ja);font-weight:700;font-size:2rem;line-height:1.2}
.cam__rc:first-child{background:#fff;color:var(--ink)}
.cam__rc:last-child{background:var(--b-700);color:#fff}
.cam__rc .is-none{font-size:1.15rem;font-weight:500}
.cam__note{margin:1.1rem 0 0;width:100%;font-size:.95rem;line-height:1.7}
.cam__aim{margin:.3rem 0 0;width:100%;font-size:.85rem;color:#fff}
.cam__res .cam__btns{margin-top:1.6rem}
.cam__big{width:100%;margin:0 0 1rem;font-family:var(--f-ja);font-weight:700;font-size:1.3rem;line-height:1.7}
.cam__st[data-cam-st=msg] .cam__btns{grid-template-columns:1fr;margin-top:.4rem}

/* 肌情報を選択（下から出るシート）。白地＋墨線、選んだ行はベタ塗り＋白文字 */
.skd{width:min(100%,500px);max-width:none;max-height:92dvh;margin:auto auto 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));border:0;border-top:1.5px solid var(--ink);border-radius:3px 3px 0 0;background:var(--surface);color:var(--ink);overflow:auto}
.skd::backdrop{background:rgb(46 37 40/.55)}
.skd__top{display:flex;align-items:center;justify-content:space-between}
.skd__step{margin:0;font-style:italic;font-size:2.2rem;line-height:1}
.skd__x{width:48px;height:48px;font-size:2rem;line-height:1;color:var(--ink);cursor:pointer}
.skd__h{margin:.2rem 0 .9rem;font-size:1.3rem}
.skd__opts{display:grid;gap:8px}
.skd__o{display:flex;align-items:center;min-height:56px;padding:0 1rem;border:1.5px solid var(--ink);border-radius:3px;background:#fff;color:var(--ink);font-weight:700;font-size:1.05rem;text-align:left;cursor:pointer}
.skd__o--none{font-weight:500;color:var(--ink-soft);border-style:dashed}
.skd__o[aria-checked=true]{background:var(--ink);color:#fff;border-style:solid}
.skd__o:focus-visible{outline:3px solid var(--b-600);outline-offset:2px}
.skd__foot{display:flex;align-items:center;gap:1.2rem;margin-top:1rem}
.skd__t{min-height:44px;padding:0;font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.skd__save{min-height:52px;min-width:8.5rem;margin-left:auto;padding:0 1.4rem;border-radius:3px;background:var(--ink);color:#fff;font-weight:700;font-size:1rem;cursor:pointer}
.skd__save[aria-busy=true]{opacity:.6}

/* あなたに合いそうなアイテム（マイページ・トップ）と、商品ページの1行 */
.persona{margin-top:1.8rem}
.persona--my{margin-top:2.4rem}
.persona .h2{margin-bottom:.9rem}
.persona .h3{margin:0 0 .6rem}
.persona__ev{display:block;font-size:.78rem;font-weight:700;line-height:1.45;color:var(--ink)}
.persona__cap{margin:.6rem 0 0;font-size:.75rem;line-height:1.5;color:var(--ink-soft)}
.pdp__persona{margin:.35rem 0 0;font-size:.85rem;line-height:1.6}
.pdp__persona-l{display:block}
.pdp__persona-l b{margin:0 .1em;color:var(--b-700)}

/* 管理画面: 購入を記録 */
.adm__bl{margin-bottom:.8rem}
.adm__br{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.4rem 0;border-top:1px solid var(--g-300);font-size:.85rem}
.adm__bn{overflow-wrap:anywhere}
.adm__bd{min-height:44px;padding:0 .4rem;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.adm__bq{display:grid;grid-template-columns:1fr 2fr;gap:.6rem}
.adm__bq .acct__lab{display:block;margin-bottom:.3rem}

/* ---- 記事 v2 の新ブロック・チップ（docs/article-template-v2-requirements.md） ---- */
.ab__label{font-size:.9rem}
.ab.art2__body>*+.ab__label{margin-top:1.8rem}
.ab.art2__body>.ab__label+*{margin-top:.6rem}
.ab__acct{display:flex;align-items:center;gap:.7rem}
.ab__acct-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--pa-soft);color:var(--ink);font-family:var(--f-en);font-weight:700;font-size:1.1rem}
.ab__acct-t{flex:1;min-width:0;display:grid;line-height:1.45}
.ab__acct-t b,.ab__acct-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab__acct-t small{font-size:.76rem;color:var(--g-500)}
.ab .ab__acct-btn{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;border-radius:3px;background:var(--b-600);color:#fff;font-weight:700;font-size:.8rem;white-space:nowrap;text-decoration:none}
.ab .ab__acct-btn:hover{background:var(--b-700)}
.ab__gal{position:relative;margin-inline:calc(var(--gutter)*-1)}
.ab__gal-t{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.ab__gal-t::-webkit-scrollbar{display:none}
.ab__gal-t img{flex:0 0 78%;min-width:0;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start;border-radius:2px;background:var(--g-100)}
.ab__gal-t:focus-visible{outline:2px solid var(--b-600);outline-offset:-2px}
.ab__gal-d{display:flex;justify-content:center;gap:8px;margin-top:.75rem}
.ab__gal-d i{width:8px;height:8px;border-radius:50%;background:var(--g-200)}
.ab__gal-d i.on{background:var(--pa)}
.ab__gal-n{display:none;position:absolute;top:calc(50% - 34px);z-index:2;width:44px;height:44px;place-items:center;padding:0;border:0;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);cursor:pointer}
.ab__gal-n svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ab__gal-n--prev{left:var(--gutter)}
.ab__gal-n--next{right:var(--gutter)}
.ab__gal-n:hover{background:var(--ink);color:#fff}
.ab__gal-n:focus-visible{outline:2px solid var(--b-600);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ab__gal.is-js .ab__gal-n{display:grid}.ab__gal.is-js .ab__gal-n[disabled]{display:none}}
@media (prefers-reduced-motion:no-preference){.ab__gal-t{scroll-behavior:smooth}}
.ab .ab__credit{font-size:.74rem;line-height:1.6;color:var(--g-500)}
.ab .ab__credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ab.art2__body>.ab__gal+.ab__credit{margin-top:.4rem}
.ab.art2__body>.ab__fig+.ab__credit{margin-top:-.8rem}
.ab a.ab__chip,.ab span.ab__chip{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pa);text-decoration-thickness:2px;text-underline-offset:3px}
.ab a.ab__chip:hover{text-decoration-color:var(--b-600)}
.ab img.ab__chip-th{display:inline-block;width:1.2em;height:1.2em;margin-right:.3em;object-fit:cover;vertical-align:-.22em;border-radius:2px;background:var(--g-100)}
.ab__chip-k{margin-right:.25em;font-size:.72em;font-weight:700;color:var(--g-500)}
.ab__chip-p{margin-left:.35em;font-size:.82em;font-weight:600;color:var(--g-500)}
.ab span.ab__chip--missing{text-decoration-style:dashed;text-decoration-color:var(--g-400);color:var(--g-500)}
/* 記事ブロック: ブランド・記事・ランキング・リンクのカード（2026-10-10）。白地＋墨線、角丸 3px。HTML は tools/studio/cards.js と article-blocks.js */
.ab__brand,.ab__artc,.ab__link{display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);text-decoration:none}
.ab a.ab__brand:hover,.ab a.ab__artc:hover,.ab a.ab__link:hover{background:var(--surface)}
.ab__brand:focus-visible,.ab__artc:focus-visible,.ab__link:focus-visible,.ab__rank-r:focus-visible,.ab__rank-m:focus-visible{outline:2px solid var(--b-600);outline-offset:2px}
.ab__card-a,.ab__link-a{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ab__brand--ph,.ab__artc--ph,.ab__rank--ph{display:block;padding:1rem;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white)}
.ab__brand-ph{flex:none;display:grid;place-items:center;width:5.2rem;height:3.6rem;overflow:hidden;border-radius:2px;background:var(--surface)}
.ab__brand-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab__brand-ph--logo img{object-fit:contain;padding:.45rem}
.ab__brand-ph--mono{background:var(--b-600);color:#fff;font-family:var(--f-en);font-weight:700;font-size:1.3rem}
.ab__brand-t,.ab__artc-t,.ab__link-t{flex:1;min-width:0;display:grid;line-height:1.5}
.ab__brand-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-ja);font-size:1.02rem}
.ab__brand-t small,.ab__link-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;color:var(--g-500)}
.ab__artc-ph{flex:none;width:4.5rem;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--g-100)}
.ab__artc-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ab__artc-t{gap:.35rem}
.ab__artc-t b,.ab__link-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;font-family:var(--f-ja);font-size:.98rem}
.ab__link-t b{-webkit-line-clamp:2}
.ab__artc-t time{font-size:.76rem;color:var(--g-500)}
.ab__rank{padding:.95rem 1rem .9rem;border-radius:3px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ab__rank-h{position:relative;margin:0 0 .45rem!important;padding-left:.7rem;font-family:var(--f-ja);font-weight:700;font-size:1.05rem;line-height:1.5!important}
.ab__rank-h::before{content:"";position:absolute;left:0;top:.2em;width:4px;height:1.1em;background:var(--pa)}
.ab__rank-r{display:grid;grid-template-columns:2.1rem 3.4rem 1fr;align-items:center;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--g-200);color:inherit;text-decoration:none}
.ab__rank-n{font-family:var(--f-en);font-weight:700;font-style:italic;font-size:1.9rem;line-height:1;text-align:center;color:var(--ink)}
.ab__rank-n--1{color:var(--b-600)}
.ab__rank-i{width:3.4rem;height:3.4rem;object-fit:cover;border-radius:2px;background:var(--g-100)}
.ab__rank-b{min-width:0;display:grid;gap:.1rem;line-height:1.45}
.ab__rank-b>small{font-size:.72rem;color:var(--g-500)}
.ab__rank-b>b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.9rem}
.ab__rank-p{display:flex;align-items:baseline;gap:.45rem;font-size:.84rem;font-weight:700}
.ab__rank-p small{font-size:.72rem;font-weight:400;color:var(--g-500)}
.ab__rank-e{padding:.8rem 0;font-size:.88rem;color:var(--g-500)}
.ab__rank-note{margin:.15rem 0 0!important;font-size:.72rem!important;line-height:1.6!important;color:var(--g-500)}
.ab a.ab__rank-m{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:.75rem;border-radius:3px;background:var(--ink);color:#fff;font-weight:700;font-size:.86rem;text-decoration:none}
.ab a.ab__rank-m:hover{background:var(--b-700)}

/* 日本の販売サイトの価格（content/retail-prices.json。本番の商品ページ・記事）。
   1行 = 販売サイト（リンク）・価格・確認日。白地に墨線、最安だけ価格の色を変える */
.rp{display:grid;margin:.2rem 0 .4rem;border-top:1px solid var(--g-200)}
.rp__r{display:grid;grid-template-columns:1fr auto;grid-template-areas:"st p" "d d";gap:.1rem .6rem;align-items:center;min-height:48px;padding:.45rem 0;border-bottom:1px solid var(--g-100)}
.rp__st{grid-area:st;font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.rp__p{grid-area:p;font-size:1.05rem}
.rp__r--best .rp__p{color:var(--buy);font-size:1.25rem}
.rp__d{grid-area:d;font-size:.74rem;color:var(--ink-soft)}