/* ═══════════════════════════════════════════════════════════════
   anue.css ─ 2026-10-04 anue（anue-nail.com）のデザインベースに統一する上書きレイヤー
   jp.css / refine.css / 各ページの <style> より後に読み込む。
   元に戻すときは各HTMLの <link rel="stylesheet" href="/anue.css…"> を外す。
   トークンは anue-booking の public/index.html と同一：
   地 #FFF／文字 #4A4847／補助 #8C8986／罫線 #DDDAD6／グレー地 #F1F0EE／ボタン #8E8B88（hover #6F6C69）／フッター #9A9794
   書体 Libre Baskerville＋Noto Serif JP／角丸0／影なし
   ═══════════════════════════════════════════════════════════════ */
:root{
  --a-bg:#FFFFFF; --a-ink:#4A4847; --a-sub:#8C8986; --a-line:#DDDAD6; --a-gray:#F1F0EE;
  --a-btn:#8E8B88; --a-btn-hover:#6F6C69; --a-foot:#9A9794;
  --a-latin:"Libre Baskerville","Times New Roman",serif;
  --a-jp:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --a-gutter:clamp(16px,4vw,48px);
  --a-hd:112px;

  /* 既存ページが参照する変数を anue のトークンに差し替える */
  --ink:#4A4847; --ink-soft:#6F6C69; --muted:#8C8986;
  --hair:#DDDAD6; --hair-2:#F1F0EE;
  --paper:#FFFFFF; --paper-2:#F1F0EE; --card:#FFFFFF;
  --gold:#8E8B88; --gold-d:#6F6C69; --bordeaux:#8C8986; --deep:#4A4847;
  --serif:"Libre Baskerville","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Libre Baskerville","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans-jp:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --mincho:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --display:"Libre Baskerville","Noto Serif JP",serif;
  --r-sans-jp:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --r-disc:transparent; --r-disc-2:transparent;
  --gut:var(--a-gutter);
}

/* ---------- 全体：角丸0・影なし ---------- */
*,*::before,*::after{border-radius:0!important;box-shadow:none!important}
input[type=radio],input[type=checkbox]{border-radius:revert!important}
html{scroll-padding-top:120px}
body{
  background:var(--a-bg);color:var(--a-ink);
  font-family:var(--a-latin);font-weight:400;font-size:16px;line-height:1.95;letter-spacing:.06em;
  word-break:auto-phrase;font-feature-settings:"palt" 1;
}
h1,h2,h3,h4,.display,.sec-h{font-family:var(--a-latin);font-weight:500;font-style:normal;line-height:1.6;letter-spacing:.08em;text-wrap:balance}
em,i.it{font-style:normal}
p{text-wrap:pretty}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--a-ink);outline-offset:4px}

/* ---------- ヘッダー：中央ロゴ＋下に罫線のナビ（anue .hd） ---------- */
header,header.solid{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.97)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:1px solid var(--a-line)!important;
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". brand right" "nav nav nav";
  align-items:center;gap:0 24px;padding:16px var(--a-gutter) 0!important;color:var(--a-ink);
}
header .brand{
  grid-area:brand;justify-self:center;font-family:var(--a-latin);font-size:34px;letter-spacing:.16em;
  padding-left:.16em;line-height:1.2;font-weight:400;color:var(--a-ink);
}
header .brand span{display:none}
header .head-r{grid-area:right;justify-self:end;gap:16px}
header .nav{
  grid-area:nav;display:flex;justify-content:center;flex-wrap:wrap;gap:4px clamp(18px,3vw,40px);
  padding:10px 0 14px;
}
header .nav > a,header .nav .drop > button{
  font-family:var(--a-latin);font-size:13px;letter-spacing:.18em;text-transform:none;font-weight:400;padding:0;white-space:nowrap;
}
header .nav > a::after,header .nav .drop > button::after{display:none}
header .nav > a:hover{text-decoration:underline;text-underline-offset:6px}
.cart-btn,.fav-link{font-family:var(--a-latin);font-size:13px;letter-spacing:.14em;text-transform:none}
.cart-count{background:var(--a-btn);color:#fff}
.fav-btn{background:rgba(255,255,255,.92);border-color:var(--a-line)}
.fav-btn.on svg{fill:var(--a-btn);stroke:var(--a-btn)}

/* ---------- ボタン：灰色の四角（anue .gbtn） ---------- */
.btn,.btn.fill,.btn.dark,.more-btn,.checkout-btn,.add-btn,.cta-btn,button.primary,.oc-cta,.oc-primary,a.btn,
.sort-tabs button.on{
  background:var(--a-btn)!important;color:#fff!important;border:0!important;
  font-family:var(--a-latin);font-size:14px;letter-spacing:.12em;text-transform:none;
  padding:12px 28px;transition:background-color .2s ease-out;
}
.btn:hover,.btn.fill:hover,.btn.dark:hover,.more-btn:hover,.checkout-btn:hover,.add-btn:hover,.cta-btn:hover,button.primary:hover,.oc-cta:hover,.oc-primary:hover,a.btn:hover{
  background:var(--a-btn-hover)!important;color:#fff!important;
}
.more-btn::before,.checkout-btn::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;vertical-align:middle;
  border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.sort-tabs button{font-family:var(--a-latin);letter-spacing:.12em;background:transparent;color:var(--a-ink);border:1px solid var(--a-line)}
.sort-tabs button.on{border-color:var(--a-btn)}

/* ---------- ヒーロー：余白で囲む写真（anue .fv） ---------- */
.hero{
  margin:var(--a-hd) var(--a-gutter) 0!important;min-height:clamp(380px,52vw,740px)!important;
  background:var(--a-bg);
}
.hero-in{left:clamp(16px,3vw,40px)!important;bottom:clamp(14px,3vw,36px)!important}
.hero-in .kicker,.hero-in h1.display{color:#fff!important;text-shadow:0 1px 14px rgba(0,0,0,.28)!important;opacity:1!important}
.hero-in .kicker{font-family:var(--a-latin);font-style:normal;letter-spacing:.18em;font-size:clamp(12px,1.1vw,14px)}
.hero-in h1.display{font-family:var(--a-latin);font-size:clamp(20px,2.6vw,34px)!important;letter-spacing:.14em;line-height:1.5}
.hero-cta .btn{color:#fff!important;background:transparent!important;opacity:1;text-shadow:0 1px 14px rgba(0,0,0,.28);padding:0;font-size:12px}
.hero-cta .btn::after{font-style:normal}
.hero-dots{gap:4px!important}
.hero-dots button{background:none!important;border:0!important;opacity:1!important;transform:none!important;width:28px!important;height:24px!important;position:relative}
.hero-dots button::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:1px;background:rgba(255,255,255,.55)}
.hero-dots button.on::after{background:#fff;height:2px;top:10px}
.hero-dots button.on{transform:none!important}
.scroll-hint{display:none}

/* ---------- セクション見出し：両脇に線の英字＋下に和文（anue .ttl） ---------- */
.kicker.sec{
  display:block!important;width:100%;text-align:center;margin:0 0 56px!important;padding:0!important;
  font-family:var(--a-latin)!important;font-weight:400;color:var(--a-ink)!important;line-height:1.4;
}
.kicker.sec::before,.kicker.sec::after{content:none!important;display:none!important}
.kicker.sec .en{
  display:flex;align-items:center;justify-content:center;gap:22px;
  font-size:clamp(22px,2.4vw,28px);letter-spacing:.42em;padding-left:.42em;text-transform:none;
}
.kicker.sec .en::before,.kicker.sec .en::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.kicker.sec .ja{display:block;margin-top:14px;font-family:var(--a-jp);font-size:15px;color:var(--a-sub);letter-spacing:.14em;font-weight:400}
.sec-lede{color:var(--a-sub)}
.rank-head,.col-head{margin-bottom:0}

/* ---------- セクションの余白と地色 ---------- */
.ranking,.collection,.howworks,.review,.faq,.news{padding-top:120px!important;padding-bottom:0!important}
.review,.howworks{background:var(--a-gray)}
.howworks,.review{padding-bottom:120px!important}
.faq{padding-bottom:120px!important}
.news{padding-bottom:120px!important}
.prod,.rank-card,.news-card,.how-steps li,.rev-card,.faq details{background:transparent}
.how-steps li{background:var(--a-bg);text-align:center}
.how-steps li::before{font-family:var(--a-latin);color:var(--a-sub)}
.prod .name,.prod h3{font-family:var(--a-latin);letter-spacing:.1em}
.prod .price,.price,.yen{font-family:var(--a-latin);font-variant-numeric:lining-nums tabular-nums}
hr,.hair{border-color:var(--a-line)}

/* ---------- Q&A（anue .qa） ---------- */
.faq details,.faq .qa-item{border-bottom:1px solid var(--a-line)}
.faq summary{font-family:var(--a-latin);letter-spacing:.06em}

/* ---------- フッター：灰色・中央揃え（anue .ft） ---------- */
footer{background:var(--a-foot)!important;color:#fff!important}
footer .f-in{text-align:center}
footer .f-top{display:flex!important;flex-direction:column;align-items:center;gap:28px;padding-block:64px 8px}
footer .f-brand-col,footer .f-head{display:flex;flex-direction:column;align-items:center}
footer .f-brand{font-family:var(--a-latin);font-size:30px!important;letter-spacing:.16em;padding:0!important;color:#fff}
footer .f-brand::before{display:none}
footer .f-brand::after{content:none}
footer .f-col{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 28px;align-items:baseline}
footer .f-col h4{display:none}
footer .f-col a,footer .f-note,footer .f-note a{font-family:var(--a-jp);font-size:14px;letter-spacing:.08em;color:#fff!important;text-decoration:none}
footer .f-col a:hover{text-decoration:underline;padding-left:0}
footer .f-bot{color:#fff;opacity:.9;font-family:var(--a-latin);font-size:13px;letter-spacing:.12em;border-top:0;padding-bottom:36px}
footer .f-social{justify-content:center}
footer .soc svg,footer .share-btn svg{stroke:#fff}

/* ---------- カート・ドロワー・フォーム ---------- */
.drawer{background:var(--a-bg);border-left:1px solid var(--a-line)}
.d-row.total{border-top:1px solid var(--a-ink)}
input,select,textarea{border:1px solid var(--a-line);background:#fff;font-family:inherit;letter-spacing:.04em}
input:focus,select:focus,textarea:focus{outline:1px solid var(--a-ink);outline-offset:2px;border-color:var(--a-ink)}

/* ---------- 下層ページ（コラム・商品・法務・シーン・店舗・相談）の見出し周り ---------- */
.t1,.t2,.col-title,.page-title{font-family:var(--a-latin);letter-spacing:.1em}
.crumb,.breadcrumb{color:var(--a-sub)}
a.link,.p-link{text-underline-offset:5px}

/* ---------- スマホ ---------- */
@media (max-width:820px){
  :root{--a-hd:68px}
  header,header.solid{grid-template-columns:1fr auto 1fr;grid-template-areas:". brand right";padding:10px var(--a-gutter)!important}
  header .brand{font-size:28px}
  header .nav{grid-area:unset}
  body.menu-open header .nav{background:var(--a-bg)}
  header .nav > a{font-family:var(--a-latin);font-size:14px;letter-spacing:.18em;padding:14px 2px;border-top:1px solid var(--a-line)}
  .hero{margin-inline:0!important;min-height:clamp(420px,110vw,620px)!important}
  .ranking,.collection,.howworks,.review,.faq,.news{padding-top:84px!important}
  .howworks,.review,.faq,.news{padding-bottom:84px!important}
  .kicker.sec{margin-bottom:40px!important}
  .hero-in{bottom:52px!important}
  .kicker.sec .en{letter-spacing:.32em;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.rank-head>div,.col-head>div,.how-in,.news-in{width:100%}
.rank-head,.col-head{display:block!important;text-align:center}

/* フッター：ネイルサロン anue へのリンク（金文字） */
footer .f-col a.gold{color:#FFDF8A!important;text-decoration:underline;text-decoration-color:rgba(255,223,138,.6);text-underline-offset:5px;font-weight:600}

/* ヘッダー右側：スマホ幅で「カート」が縦に折り返さないようにする */
header .head-r{flex-wrap:nowrap;white-space:nowrap}
header .cart-btn,header .cart-btn .lbl,header .fav-link{white-space:nowrap}
@media (max-width:820px){header .head-r{gap:12px}header .cart-btn{gap:6px;font-size:12px;letter-spacing:.08em}header .fav-link .lbl,header .fav-link span{display:none}}