/* ═══════════════════════════════════════════════════════════════
   refine.css ─ 2026-09-05 デザイン洗練レイヤー（jp.css の後に読み込む）
   セクションの順番・構造は変えず、見せ方だけを整える。
   元に戻すときは各HTMLの <link rel="stylesheet" href="/refine.css"> を外す。
   ═══════════════════════════════════════════════════════════════ */
:root{
  --r-disc:#ece5d8;          /* 見出しの後ろの円（明るい面用） */
  --r-disc-2:#e3d9c8;        /* 見出しの後ろの円（paper-2 面用） */
  --r-sans-jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
}

/* ── 共通：セクション見出し「英語 大 ＋ 和文 小」＋ 円のモチーフ ── */
.kicker.sec{
  position:relative; z-index:0; display:inline-flex; align-items:baseline; gap:22px; flex-wrap:wrap;
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.3vw,42px)!important;
  letter-spacing:.02em!important; text-transform:none; color:var(--ink); line-height:1.1;
  padding:14px 0 14px 30px; margin-bottom:26px;
}
.kicker.sec::before{
  content:""; position:absolute; z-index:-1; left:0; top:50%; width:74px; height:74px; border-radius:50%;
  background:var(--r-disc); transform:translateY(-50%);
}
.ranking .kicker.sec::before,.review .kicker.sec::before,.news .kicker.sec::before{background:var(--r-disc-2)}
.kicker.sec::after{
  content:attr(data-ja); font-family:var(--r-sans-jp); font-size:11.5px; letter-spacing:.26em;
  color:var(--muted); font-weight:400; transform:translateY(-3px);
}
.kicker.sec[data-en]::before{content:""} /* jp.css の data-en 方式を無効化 */
.rank-head{margin-bottom:34px}
.col-head{margin-bottom:28px}

/* ── ヘッダー：細く・静かに ── */
header{padding:26px var(--gut)}
header.solid{padding:14px var(--gut);background:rgba(251,249,245,.9)}
.brand{font-size:29px}
.nav{gap:36px}
.nav > a{font-family:var(--r-sans-jp);font-size:12.2px;letter-spacing:.2em;text-transform:none;font-weight:400}
.cart-btn{font-family:var(--r-sans-jp);text-transform:none;letter-spacing:.14em;font-size:12.2px}

/* ── ヒーロー：写真を主役に。文字は左下の紙のパネルにまとめる ── */
:root{--hero-opacity:1;--hero-veil:0}
.hero{min-height:clamp(560px,82vh,860px);display:block;padding:0}
.hero-bg::before,.hero-bg::after{display:none}
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hero-slides .slide{position:absolute;inset:0;background-size:cover;background-position:center 40%;
  opacity:0;transform:scale(1.03);transition:opacity 3s var(--ease),transform 5s linear}
.hero-slides .slide.on{opacity:1;transform:scale(1.0)}
.hero-in{position:absolute;left:var(--gut);bottom:clamp(30px,5vh,56px);z-index:2;max-width:none;padding:0}
.hero-lead{background:transparent;padding:0;max-width:none}
.hero-in .kicker{font-family:var(--serif);font-style:italic;font-size:12.5px;letter-spacing:.14em;text-transform:none;color:var(--ink);opacity:.72;margin-bottom:8px;
  text-shadow:0 0 12px rgba(251,249,245,.9)}
.hero-in h1.display{font-family:var(--mincho);font-weight:400;font-size:clamp(15px,1.25vw,18px);line-height:1.9;letter-spacing:.18em;margin:0;color:var(--ink);
  text-shadow:0 0 14px rgba(251,249,245,.95),0 0 3px rgba(251,249,245,.9)}
.hero-in h1.display br{display:none}
.hero-in .sub,.hero-tagline{display:none}
.hero-cta{margin:16px 0 0;padding:0;background:transparent;max-width:none;display:flex;align-items:center;gap:22px;height:auto}
.hero-cta .btn{flex-direction:row;font-family:var(--r-sans-jp);text-transform:none;letter-spacing:.2em;font-size:10.5px;padding:0;border:0;border-radius:0;
  background:transparent!important;color:var(--ink)!important;opacity:.7;position:relative;height:auto;text-shadow:0 0 10px rgba(251,249,245,.9)}
.hero-cta .btn::after{content:"→";margin-left:8px;font-family:var(--serif);font-style:italic;transition:transform .35s var(--ease);display:inline-block}
.hero-cta .btn:hover{opacity:1;color:var(--gold-d)!important}
.hero-cta .btn:hover::after{transform:translateX(4px)}
.hero-cta .btn span{border-bottom:1px solid currentColor;padding-bottom:2px}
.hero-dots{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(40px,6vh,72px);z-index:2;display:flex;gap:12px}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);opacity:.45;padding:0;transition:.3s var(--ease);background:rgba(251,249,245,.7)}
.hero-dots button.on{background:var(--ink);opacity:.9;transform:scale(1.25)}
.scroll-hint{display:none}
@media (max-width:900px){
  .hero{min-height:0;height:min(62vh,520px);padding:0}
  .hero-slides{inset:0;height:auto}
  .hero-slides .slide{background-position:center 40%}
  .hero-in{position:absolute;left:var(--gut);right:var(--gut);bottom:52px;padding:0}
  .hero-lead{background:transparent;padding:0;max-width:none}
  .hero-in .kicker{font-size:12px;margin-bottom:6px}
  .hero-in h1.display{font-size:14.5px;letter-spacing:.14em;line-height:1.8}
  .hero-cta{margin:12px 0 0;padding:0;background:transparent;height:auto;flex-wrap:wrap;gap:8px 20px;justify-content:flex-start}
  .hero-cta .btn{flex:0 0 auto;min-width:0;justify-content:flex-start;font-size:10.5px;letter-spacing:.18em}
  .hero-dots{bottom:20px;top:auto;right:var(--gut);gap:10px}
}
/* ── ランキング・コレクション：カードを静かに。写真を主役に ── */
.ranking,.collection{padding-top:clamp(44px,5.4vw,80px);padding-bottom:clamp(44px,5.4vw,80px)}
.rank-grid,.prod-grid{gap:clamp(18px,2.4vw,34px) clamp(14px,1.8vw,26px)}
.rank-card,.prod{background:transparent;border:0;box-shadow:none}
.rank-card:hover,.prod:hover{transform:none;box-shadow:none}
.rank-card .thumb,.prod .thumb{aspect-ratio:4/5;border-radius:2px;background:var(--paper-2)}
.rank-card:hover .ph,.prod:hover .ph,.prod:hover .shot{transform:scale(1.04)}
.rank-body,.prod .body{padding:14px 2px 6px!important}
.rank-body h3,.prod h3{font-family:var(--serif)!important;font-size:19.5px!important;font-weight:400;letter-spacing:.06em!important;line-height:1.3}
.rank-body .price,.prod .price{color:var(--ink-soft)!important;font-size:14px!important;letter-spacing:.06em;margin-top:6px}
.prod .price small{display:none}
.prod .foot{padding-top:6px}
.add{width:auto;margin-top:10px;padding:0 0 4px;border:0;border-bottom:1px solid var(--hair);
  text-align:left;font-family:var(--r-sans-jp);font-size:11.2px;letter-spacing:.2em;text-transform:none;color:var(--gold-d);
  display:inline-block;position:relative}
.add::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold-d);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.prod:hover .add::after{transform:scaleX(1)}
.add:hover,.prod:hover .add{background:transparent;color:var(--gold-d)}
.tag{top:10px;left:10px;font-family:var(--serif);font-style:italic;font-size:12.5px;letter-spacing:.06em;
  text-transform:none;padding:5px 12px;background:rgba(251,249,245,.9);color:var(--ink);border:1px solid rgba(58,52,46,.18)}
.tag.gold{background:rgba(251,249,245,.9);color:var(--gold-d);border-color:rgba(176,141,85,.5)}
.rank-no{top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(251,249,245,.92)!important;
  color:var(--ink);font-size:14.5px;border:1px solid rgba(58,52,46,.2);font-style:italic}
.rank-card:nth-child(1) .rank-no{color:var(--gold-d);border-color:var(--gold)}
.more-btn{border-color:rgba(58,52,46,.35);font-family:var(--r-sans-jp);text-transform:none;letter-spacing:.2em;font-size:12px;padding:15px 44px}

/* ── ご注文から配送まで：番号を大きく、横に流す ── */
.howworks{padding-top:clamp(44px,5.4vw,80px)}
.how-block{border:0;padding-top:0;margin-top:10px}
.how-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;counter-reset:how-step}
.how-steps li{padding:26px 0 0;border-top:1px solid var(--hair)}
.how-steps li::before{position:static;width:auto;height:auto;background:transparent;border-radius:0;
  font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gold-d);line-height:1;margin-bottom:12px;display:block;
  content:"0" counter(how-step)}
.how-steps li span{display:block;font-size:13.8px;line-height:1.9}
@media (max-width:980px){.how-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.how-steps{grid-template-columns:1fr;gap:16px}.how-steps li{padding-top:16px}.how-steps li::before{font-size:24px;margin-bottom:6px}}

/* ── お客様の声：左に言葉、右に大きな写真（スライド） ── */
.review{padding-top:clamp(44px,5.4vw,80px);padding-bottom:clamp(44px,5.4vw,80px)}
.review-grid{display:none}
.rev-slider{margin-top:10px;display:grid;grid-template-columns:1fr minmax(0,44%);gap:clamp(28px,5vw,80px);align-items:center}
.rev-text{position:relative;min-height:260px}
.rev-item{display:none}
.rev-item.on{display:block;animation:revIn .8s var(--ease)}
@keyframes revIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rev-stars{color:var(--gold-d);font-size:14px;letter-spacing:.2em}
.rev-body{margin-top:18px;font-family:var(--mincho);font-size:clamp(16px,1.35vw,19px);line-height:2.05;letter-spacing:.03em;color:var(--ink)}
.rev-who{margin-top:22px;font-size:11.8px;letter-spacing:.14em;color:var(--muted)}
.rev-who a{color:inherit;border-bottom:1px solid var(--hair)}
.rev-nav{display:flex;gap:6px;align-items:center;margin-top:30px}
.rev-nav button{width:40px;height:40px;border:1px solid var(--hair);display:grid;place-items:center;transition:.3s var(--ease)}
.rev-nav button:hover{border-color:var(--gold);color:var(--gold-d)}
.rev-nav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}
.rev-nav .cnt{margin-left:14px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);letter-spacing:.1em}
.rev-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper);margin:0}
.rev-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.rev-photo img.on{opacity:1}
.rev-photo figcaption{position:absolute;left:18px;bottom:16px;font-family:var(--serif);font-style:italic;font-size:15px;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);letter-spacing:.06em}
.review-note{margin-top:22px}
@media (max-width:900px){.rev-slider{grid-template-columns:1fr}.rev-photo{aspect-ratio:4/3;order:-1}.rev-text{min-height:0}}

/* ── FAQ ── */
.faq{padding-top:clamp(44px,5.4vw,80px)}
.faq-in{grid-template-columns:.7fr 1.3fr}
@media (max-width:1000px){.faq-in{grid-template-columns:1fr;gap:8px}.faq .kicker.sec{margin-bottom:6px}}
@media (max-width:600px){.q > button{font-size:14px;padding:15px 34px 15px 0;letter-spacing:0}.kicker.sec{gap:14px;flex-wrap:nowrap}.kicker.sec::after{white-space:nowrap;font-size:10.5px;letter-spacing:.18em}}
.q > button{font-family:var(--r-sans-jp);font-size:15px;padding:18px 40px 18px 0}
.a p{font-size:14.2px}

/* ── Journal（コラム）：写真付きカード ── */
.news{padding-top:clamp(44px,5.4vw,80px);padding-bottom:clamp(44px,5.4vw,80px)}
.news-list{margin-top:10px;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.news-item{display:flex;flex-direction:column;gap:0;padding:0;background:transparent;border:0}
.news-item:hover{transform:none;box-shadow:none;border:0}
.news-thumb{aspect-ratio:3/2;overflow:hidden;background:var(--paper);position:relative}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.news-item:hover .news-thumb img{transform:scale(1.04)}
.news-thumb .news-cat{position:absolute;left:12px;top:12px;background:rgba(251,249,245,.92);border-color:transparent;
  font-family:var(--serif);font-style:italic;text-transform:none;font-size:13px;letter-spacing:.06em;color:var(--gold-d);padding:5px 12px}
.news-date{border:0;padding:16px 0 0;text-align:left;font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.08em;color:var(--muted);display:block}
.news-date b{display:inline;font-size:13px;margin:0;color:var(--muted)}
.news-body h3{font-family:var(--mincho)!important;font-weight:500;font-size:20px;line-height:1.55;margin-top:8px;letter-spacing:.03em}
.news-body p{font-size:13.8px;line-height:1.9;margin-top:10px;max-width:none}
.news-read{margin-top:14px;font-family:var(--r-sans-jp);font-size:11.5px;letter-spacing:.2em;color:var(--gold-d);display:inline-block;border-bottom:1px solid var(--hair);padding-bottom:3px}
.news-item:hover .news-read{border-color:var(--gold-d)}
.news-meta{display:none}
.news-more{grid-column:1/-1;justify-self:end;margin-top:8px;font-family:var(--r-sans-jp);letter-spacing:.2em;font-size:12px;color:var(--ink);text-decoration:none;position:relative;padding-bottom:5px}
.news-more span{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.news-more:hover{color:var(--gold-d)}
@media (max-width:720px){.news-list{grid-template-columns:1fr}.news-body p{display:none}.news-date{text-align:left;display:block}.news-body{text-align:left}.news-body h3{margin-top:6px}.news-read{margin-top:10px}}

/* ── フッター：大きなワードマーク ── */
footer{background:#2b2622;color:rgba(255,255,255,.72)}
.f-top{grid-template-columns:1.4fr 1fr 1fr}
.f-brand{font-size:clamp(44px,5vw,64px);padding-top:18px;position:relative}
.f-brand::before{content:"";position:absolute;left:2px;top:0;width:120px;height:1px;background:rgba(255,255,255,.55)}
.f-brand::after{content:"nail tip studio";display:block;font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.1em;
  color:rgba(255,255,255,.55);margin-top:10px}
.f-col h4{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.08em;font-size:16px;color:#e6d3b2}
.f-col a{font-family:var(--r-sans-jp);font-size:13.5px}
.f-bot{color:rgba(255,255,255,.4)}

/* ── モバイルメニュー ── */
@media (max-width:820px){
  .nav > a{font-family:var(--mincho);font-size:19px;letter-spacing:.16em;padding:14px 0}
  body.menu-open .nav{background:var(--paper)}
}

/* ── フッター：スマホは1列にして各リンクを1行に ── */
@media (max-width:600px){.f-top{grid-template-columns:auto 1fr;gap:26px 18px}.f-brand-col{grid-column:1/-1}.f-col a{white-space:nowrap;font-size:12.5px;letter-spacing:.02em}.f-col a:hover{padding-left:0}.f-note{font-size:11px;letter-spacing:0}.f-note a{white-space:nowrap}}


/* ── お気に入り（ハート）・並び替え・シェア（2026-09-05） ── */
.fav-btn{position:absolute;right:10px;top:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(251,249,245,.92);
  border:1px solid rgba(58,52,46,.15);display:grid;place-items:center;transition:.3s var(--ease);cursor:pointer}
.fav-btn svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.3;transition:.3s var(--ease)}
.fav-btn:hover svg{stroke:var(--gold-d)}
.fav-btn.on svg{fill:#c97b7b;stroke:#c97b7b}
.fav-btn.pop svg{animation:favpop .45s var(--ease)}
@keyframes favpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.fav-btn.on-page{position:static;width:40px;height:40px;flex:none}
.pname-row{display:flex;align-items:center;gap:14px}
.pname-row h1{margin:0}
.fav-link{display:flex;align-items:center;gap:8px;font-family:var(--r-sans-jp);font-size:12.2px;letter-spacing:.14em;position:relative;color:inherit}
.fav-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.15}
.fav-count{position:absolute;top:-6px;left:9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#c97b7b;color:#fff;
  font-size:10.3px;letter-spacing:0;font-weight:500;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .34s var(--ease)}
.fav-count.on{transform:scale(1)}
@media (max-width:820px){.fav-link .lbl{display:none}}
.sortbar{max-width:1180px;margin:0 auto 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--hair)}
.sort-tabs{display:flex;gap:4px}
.sort-tabs button{font-family:var(--r-sans-jp);font-size:12.2px;letter-spacing:.16em;padding:8px 14px;color:var(--ink-soft);position:relative;transition:.3s var(--ease)}
.sort-tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--gold-d);transform:scaleX(0);transition:transform .3s var(--ease)}
.sort-tabs button.on{color:var(--ink)} .sort-tabs button.on::after{transform:scaleX(1)}
.sort-tabs button:hover{color:var(--gold-d)}
.fav-filter{display:inline-flex;align-items:center;gap:8px;font-family:var(--r-sans-jp);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);
  padding:7px 14px;border:1px solid var(--hair);border-radius:999px;transition:.3s var(--ease)}
.fav-filter svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.fav-filter:hover{border-color:var(--gold);color:var(--gold-d)}
.fav-filter.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fav-filter.on svg{fill:#c97b7b;stroke:#c97b7b}
.fav-filter span{color:inherit;opacity:.7}
.fav-empty{max-width:1180px;margin:0 auto 20px;font-size:14px;color:var(--ink-soft)}
@media (max-width:520px){.sort-tabs button{font-size:11.5px;letter-spacing:.08em;padding:8px 10px}.sort-tabs button::after{left:10px;right:10px}}
.share-wrap{position:relative}
.share-btn{display:inline-flex;align-items:center;gap:9px;padding:0 16px;height:40px;border:1px solid rgba(255,255,255,.22);
  font-family:var(--r-sans-jp);font-size:11.5px;letter-spacing:.16em;color:rgba(255,255,255,.8);transition:.36s var(--ease)}
.share-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.share-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.share-menu{position:absolute;right:0;bottom:calc(100% + 8px);background:#fff;color:var(--ink);border:1px solid var(--hair);min-width:170px;
  display:none;flex-direction:column;box-shadow:0 22px 48px -26px rgba(0,0,0,.45);z-index:5}
.share-menu.on{display:flex}
.share-menu a,.share-menu button{display:block;text-align:left;padding:11px 16px;font-family:var(--r-sans-jp);font-size:12.5px;letter-spacing:.08em;color:var(--ink);border-bottom:1px solid var(--hair-2);transition:.2s}
.share-menu a:last-child,.share-menu button:last-child{border-bottom:0}
.share-menu a:hover,.share-menu button:hover{background:var(--paper-2);color:var(--gold-d)}