/* =============================================================
   /top-pop.css  ― トップページの見た目だけを作り替える上書き
   -------------------------------------------------------------
   本人の言葉（2026-09-09）:
     「イメージをロゴの様に。白ベースでカラフルをちりばめて、
       ポップでカジュアル。若者向き。そして、美容のプロがつくったような感じに」

   ■ ここでやること / やらないこと
     やる  … 色・書体・角の丸み・余白・飾り
     やらない … 文言、料金、写真の差し替え、予約やマイページの導線、HTML の構造
     ★ index.html は全店で共通の雛形。差し込み記法（{{STORE_*}}）と
       data-store-only / data-needs には触れていない。

   ■ 色はロゴから測って取った（勝手な色を足していない）
     images/logo-circle.png の画素を色相ごとに束ね、代表色を中央値で取得。
       ピンク  #CF90B6    ミント  #A4D2D2
       ゴールド #B5A165    ネイビー #74809F
       イエロー #E9DBA9
     ★ そのままでは白の上で読めない（比 1.38〜3.94）。**飾りには測った色をそのまま**、
       **文字とボタンには同じ色相・彩度のまま明るさだけ落としたもの**を使う。
       落とした値は 4.5 以上を満たす最小限（下の --c-*-ink）。
       ピンクのボタンだけは、地をロゴの色のまま使い、**上に濃い文字**を置く（比 5.61）。
       白抜き文字にすると 2.52 で読めないため。

   ■ 書体
     丸ゴシック（Zen Maru Gothic）。ポップでカジュアルの芯はここ。
     ただし本文は 400、行間は広めにして「子どもっぽく」ならないようにする。
   ============================================================= */

:root {
  /* ---- ロゴから測った色（飾り用。文字には使わない） ---- */
  --c-pink:    #CF90B6;
  --c-mint:    #A4D2D2;
  --c-gold:    #B5A165;
  --c-navy:    #74809F;
  --c-yellow:  #E9DBA9;
  /* ---- 同じ色相のまま暗くしたもの（文字・線用。白の上で 4.5 以上） ---- */
  --c-pink-ink:   #956883;
  --c-mint-ink:   #5F7A7A;
  --c-gold-ink:   #827449;
  --c-navy-ink:   #6B7692;

  /* ---- 既存の共通ボキャブラリを差し替える ---- */
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #FBF7FA;   /* ほんのり桃を落とした白 */
  --ink:         #2B2A33;
  --ink-soft:    #5C5A66;
  --ink-2:       #3A3844;
  --line:        #EFE7EE;
  --brand-deep:  var(--c-pink-ink);
  --brand-deep-2:var(--c-navy-ink);
  --accent:      var(--c-pink);
  --accent-soft: #F4E2EC;
  --accent-text: var(--c-pink-ink);
  --on-brand:    #FFFFFF;
  --gold:        var(--c-gold);
  --neutral-chip:#F6F3F6;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
}

/* ================= 書体 ================= */
body,
.lead,
.menu-row,
.sec-lead,
p, li, dd, dt, td, th, input, button, select, textarea {
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
}
h1, h2, h3, h4,
.sec-title, .menu-cat h3, .btn {
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}
body { font-weight: 400; line-height: 1.95; }

/* ================= ヘッダー（ナビ） ================= */
nav {
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
/* ★ 元は白地の上に薄いグレーで、白ベースにすると読みにくい。
   　 実測 4.5 以上になるまで濃くする。 */
html body nav a,
html body .nav-links a { color: var(--ink) !important; font-weight: 500; opacity: 1 !important; }
html body .nav-links a:not(.nav-cta) { letter-spacing: .1em; }
html body .nav-links a.nav-cta {
  background: var(--c-pink) !important;
  color: var(--ink) !important;      /* 白抜きは比 2.52 で読めない。濃い文字で 5.61 */
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
}
html body .nav-links a.nav-cta + a.nav-cta { background: var(--c-mint) !important; }

/* ================= ヒーロー ================= */
/* 白地に、ロゴと同じ色の点を散らす。点は画像を足さず、CSS の円で描く。 */
.hero {
  background: #fff !important;
  min-height: auto;
  padding: 0 6vw 40px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--c-pink)   0 6px, transparent 7px),
    radial-gradient(circle, var(--c-mint)   0 9px, transparent 10px),
    radial-gradient(circle, var(--c-yellow) 0 7px, transparent 8px),
    radial-gradient(circle, var(--c-navy)   0 4px, transparent 5px),
    radial-gradient(circle, var(--c-gold)   0 5px, transparent 6px),
    radial-gradient(circle, var(--c-pink)   0 4px, transparent 5px),
    radial-gradient(circle, var(--c-mint)   0 5px, transparent 6px);
  background-repeat: no-repeat;
  background-position:
    5% 10%, 90% 7%, 76% 22%, 12% 30%, 94% 44%, 3% 56%, 86% 66%;
  opacity: 1;
}
/* 「SCROLL」の細い明朝はもう合わない */
.hero::after { display: none !important; }

.hero-text { padding: 108px 0 24px; }
h1 {
  font-weight: 700;
  font-size: clamp(2.3rem, 8.5vw, 3.6rem);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ink);
}
h1 em {
  font-style: normal;
  color: var(--c-pink-ink);
  position: relative;
}
/* 「余韻」の下に、色鉛筆で引いたような線 */
h1 em::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: .12em;
  height: .28em; border-radius: 999px;
  background: var(--c-yellow);
  z-index: -1;
}
.h1-sub {
  display: block; margin-top: 14px;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .06em; color: var(--ink-soft);
  line-height: 1.9;
}
.lead {
  margin-top: 20px; max-width: 26ch;
  font-size: 1rem; color: var(--ink-soft);
  letter-spacing: .01em;
}

/* ================= ボタン ================= */
.btn {
  min-width: 0; width: 100%;
  padding: 17px 26px; border-radius: 999px;
  font-size: .98rem; font-weight: 700; letter-spacing: .04em;
  border: 0;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-fill {
  background: var(--c-pink) !important;
  color: var(--ink) !important;                 /* 比 5.61 */
  box-shadow: 0 6px 0 #B97CA1;                  /* ポップな「厚み」。押すと沈む */
}
.btn-fill:active { box-shadow: 0 2px 0 #B97CA1; }
/* 2つ目の塗りボタン（公式LINE）はミントに。同じ色が並ぶと押し先が分からない */
.hero-cta .btn-fill + .btn-fill {
  background: var(--c-mint) !important;
  box-shadow: 0 6px 0 #8CBDBD;
}
.hero-cta .btn-fill + .btn-fill:active { box-shadow: 0 2px 0 #8CBDBD; }
.btn-line {
  background: #fff !important;
  color: var(--ink) !important;
  border: 2px solid var(--line) !important;
  box-shadow: 0 6px 0 var(--line);
}
.btn-line:active { box-shadow: 0 2px 0 var(--line); }
.hero-cta { margin-top: 30px; gap: 12px; flex-direction: column; align-items: stretch; }

/* ================= 写真 ================= */
.hero-visual { position: relative; z-index: 2; }
.hero-img, .hero-visual img {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero-visual img { box-shadow: 0 18px 40px rgba(43, 42, 51, .10); }

/* ================= 見出し ================= */
.sec-head { margin-bottom: 40px; }
.sec-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  letter-spacing: .01em; color: var(--ink);
}
/* 節の英字ラベル（About / Concept …）を丸いバッジにする。
   ★ 実際の class は .sec-tag（.sec-label ではなかった。HTML を見て直した）。
   ★ 節ごとに色を変えて、下へ進むほど色が移っていくようにする。 */
html body .sec-tag {
  display: inline-block;
  padding: 5px 15px; border-radius: 999px;
  /* ★ 淡い地の上では、白の上で 4.5 を満たす色でも足りない（実測 4.09〜4.28）。
     　 その地の上で 4.5 を満たすところまで、もう一段落とす。 */
  background: #FBEFF5; color: #896079 !important;
  font-family: 'Zen Maru Gothic', sans-serif !important;
  font-style: normal !important;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  margin-bottom: 14px;
}
html body section:nth-of-type(3n+2) .sec-tag { background: #EDF6F6; color: #597373 !important; }
html body section:nth-of-type(3n)   .sec-tag { background: #FBF6E9; color: #7B6E45 !important; }

/* 節のあいだにも、そっと点を置く（飾りだけ。読むものの邪魔をしない位置に） */
.sec-head { position: relative; }
.sec-head::after {
  content: ""; position: absolute; right: 2px; top: -6px;
  width: 74px; height: 34px; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--c-yellow) 0 5px, transparent 6px),
    radial-gradient(circle, var(--c-pink)   0 3px, transparent 4px),
    radial-gradient(circle, var(--c-mint)   0 4px, transparent 5px);
  background-repeat: no-repeat;
  background-position: 4px 20px, 34px 2px, 60px 16px;
}

/* ================= メニュー ================= */
.menu-cat { margin-bottom: 30px; }
.menu-cat h3 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  border-bottom: 0 !important;
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface-2);
  display: inline-flex; gap: 8px;
}
.menu-cat:nth-of-type(3n+1) h3 { background: #FBEFF5; }   /* ピンクを薄めた地 */
.menu-cat:nth-of-type(3n+2) h3 { background: #EDF6F6; }   /* ミント */
.menu-cat:nth-of-type(3n)   h3 { background: #FBF6E9; }   /* イエロー */
.menu-row {
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 2px; font-size: .95rem;
}
.menu-price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.menu-name small { color: var(--ink-soft); }

/* ================= 読めなくなっていた文字を直す =================
   ★ 元の CSS は、小さな文字にも --accent（淡いピンク）をそのまま使っていた。
     色を差し替えたことで、白地の上で 2.2〜2.5 まで落ちた場所がある。
     **実際に描かれた文字を1つずつ測って**見つけたもの（scratchpad/contrast.mjs）。
     色相はそのままに、白の上で 4.5 を満たすところまで落とす。 */
html body .staff-role,
html body .cpn-badge,
html body .latin,
html body .accent,
html body .sec-lead-link a,
html body .price-note {
  color: #7A5468 !important;      /* ロゴのピンクを落としたもの。淡い色地の上でも 4.5 を満たす濃さ（実測して決めた） */
}
html body .cpn-badge { background: #FBEFF5 !important; border-color: #EBD3E0 !important; }

/* ★ 締めの節（.closing）は地が濃い。ここに濃い文字を当てると、直したつもりで
   　 かえって読めなくなる（実測：3.01 → 2.22 に悪化した）。
   　 白ベースに合わせて地を白にし、文字は他と同じ濃さに戻す。 */
html body .closing { background: var(--surface-2) !important; color: var(--ink) !important; }
html body .closing .latin { color: #7A5468 !important; }
html body .closing h2 { color: var(--ink) !important; }
html body .closing p, html body .closing span:not(.latin) { color: var(--ink-soft) !important; }
/* 上の波の飾りも、白ベースに合わせる */
html body .closing .wave-top path { fill: #fff !important; }

/* 店名の副題。元は白抜き（暗いヒーロー用）。白地では見えない。
   ★ `.hero h1 .h1-sub`（0,2,1）に負けていたので、同じ形で書く。 */
html body .hero h1 .h1-sub,
html body .hero .h1-sub { color: var(--ink-soft) !important; text-shadow: none !important; }

/* ヒーロー以外のボタンも、白地で読める形に揃える */
html body a.btn, html body .btn, html body .cta-btn, html body .btn-primary {
  background: var(--c-pink) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: 0 6px 0 #B97CA1 !important;
}
html body a.btn-line, html body .btn-line {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--line) !important; box-shadow: 0 6px 0 var(--line) !important;
}

/* ================= 面・カード ================= */
section { background: #fff; }
.card, .box, .panel, .coupon-section > * { border-radius: var(--r-md); }

/* ================= 元のスマホ用の指定を戻す =================
   ★ 880px 以下では、元の CSS が写真を**全画面の背景**にして、その上に
     暗いグラデを2枚重ね、h1 を白抜きにしていた（すべて !important）。
     白ベースにするので、そこを流れの中の「丸い写真」に戻す。
     同じ強さで書かないと勝てないので、ここだけ !important を使う。 */
@media (max-width: 880px) {
  .hero { display: block !important; padding: 0 22px 36px !important; }
  .hero-visual {
    position: relative !important; inset: auto !important;
    width: 100% !important; height: auto !important;
    order: 0 !important; z-index: 2 !important;
    margin-top: 26px !important;
  }
  .hero-img {
    position: relative !important; inset: auto !important;
    height: 62vw !important; max-height: 340px !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface-2) !important;
    box-shadow: 0 16px 34px rgba(43, 42, 51, .10) !important;
  }
  /* 暗くしていた2枚の膜を消す */
  .hero-img::before, .hero-img::after { display: none !important; }
  .hero-img img {
    object-position: center 30% !important;
    filter: none !important;
  }
  .hero h1 {
    color: var(--ink) !important;
    text-shadow: none !important;
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
  }
  .hero h1 em { color: var(--c-pink-ink) !important; }
  /* ★ 元は `.hero p.lead`（0,2,1）。こちらが `.hero .lead`（0,2,0）だと負ける。
     　 実測して分かった。同じ形で書く。 */
  .hero p.lead, .hero .h1-sub {
    color: var(--ink-soft) !important; text-shadow: none !important;
    max-width: none !important;
  }
  /* ★ ボタンは `.hero-cta .btn:not(.btn-primary)`（0,3,0・!important）と
     　 `a.btn`（0,1,1・!important）に負けていた。一段強い形で書き直す。 */
  .hero .hero-cta a.btn {
    background: #fff !important;
    color: var(--ink) !important;
    border: 2px solid var(--line) !important;
    box-shadow: 0 6px 0 var(--line) !important;
    text-shadow: none !important;
  }
  .hero .hero-cta a.btn-fill {
    background: var(--c-pink) !important;
    color: var(--ink) !important;
    border: 0 !important;
    box-shadow: 0 6px 0 #B97CA1 !important;
  }
  .hero .hero-cta a.btn-fill + a.btn-fill {
    background: var(--c-mint) !important;
    box-shadow: 0 6px 0 #8CBDBD !important;
  }
  .hero-text { padding: 96px 0 4px !important; }
}

/* ================= 書体（元の指定より強く書く） =================
   ★ 元は `.hero h1`（0,1,1）で指定されている。こちらが `h1`（0,0,1）だと
     後ろに書いても負ける。同じか強い形で書く。 */
html body h1, html body h2, html body h3, html body h4,
html body .sec-title, html body .menu-cat h3, html body .btn,
.hero h1, .hero .lead, .hero .h1-sub {
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
}
.hero h1 { font-weight: 700; }
/* 「余韻」は元が Cormorant のイタリック。丸ゴシックに揃える */
.hero h1 em {
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* ================= スマホを先に ================= */
@media (max-width: 820px) {
  .hero { padding: 0 22px 32px; display: block; }
  .hero-text { padding: 96px 0 20px; }
  .hero-visual { margin-top: 26px; }
  .lead { max-width: none; }
}
/* PC 幅でも、元の `a.btn` のグラデーション（!important）に勝てる形で書く */
.hero .hero-cta a.btn {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--line) !important; box-shadow: 0 6px 0 var(--line) !important;
}
.hero .hero-cta a.btn-fill {
  background: var(--c-pink) !important; color: var(--ink) !important;
  border: 0 !important; box-shadow: 0 6px 0 #B97CA1 !important;
}
.hero .hero-cta a.btn-fill + a.btn-fill {
  background: var(--c-mint) !important; box-shadow: 0 6px 0 #8CBDBD !important;
}
.hero p.lead, .hero .h1-sub { color: var(--ink-soft) !important; text-shadow: none !important; }

@media (min-width: 821px) {
  .hero { grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center;
          padding: 0 7vw 60px; }
  .hero-cta { flex-direction: row; }
  .hero-cta .btn { width: auto; min-width: 210px; }
}

/* 動きを減らす設定の人には、跳ねる動きを出さない */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}