/* ============================================================
   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{
  --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;
  --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}
.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__jp{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__jp{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}
.hd__in .hd__ic:first-of-type{margin-left: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{--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{--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)}