:root{
    --paper:#FDFBFA;
    --surface:#FFFFFF;
    --surface-alt:#FBF3F1;
    --ink:#2B2226;
    --ink-soft:#5B4A4E;
    --muted:#8B7A7D;
    --pink:#DD8FA0;
    --pink-deep:#C9758B;
    --pink-soft:#F6DEE2;
    --pink-line:#EFC7D0;
    --enji:#7A2233;
    --enji-deep:#5C1926;
    --line:#ECE0DF;
    --store-a:#F6DEE2; --store-b:#DD8FA0;
    --shadow: 0 1px 2px rgba(43,34,38,.05), 0 12px 28px rgba(43,34,38,.06);
    --serif: "Shippori Mincho", "Noto Serif JP", serif;
    --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#1B1315; --surface:#221819; --surface-alt:#291A1D;
      --ink:#F3E9E9; --ink-soft:#D6C4C6; --muted:#A69295;
      --pink:#E39AA9; --pink-deep:#EFB4C0; --pink-soft:#33222A; --pink-line:#4A2E36;
      --enji:#D68C9C; --enji-deep:#E39AA9; --line:#382628;
      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --paper:#1B1315; --surface:#221819; --surface-alt:#291A1D;
    --ink:#F3E9E9; --ink-soft:#D6C4C6; --muted:#A69295;
    --pink:#E39AA9; --pink-deep:#EFB4C0; --pink-soft:#33222A; --pink-line:#4A2E36;
    --enji:#D68C9C; --enji-deep:#E39AA9; --line:#382628;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); text-wrap:balance; margin:0; }
  p{ margin:0; color:var(--ink-soft); }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  section{ position:relative; }
  .wrap{ max-width:1120px; margin:0 auto; padding-left:1.4rem; padding-right:1.4rem; }
  .eyebrow{ font-size:.72rem; letter-spacing:.32em; color:var(--enji); font-weight:700; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ============ Header ============ */
  header.site{
    position:sticky; top:0; z-index:40;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.4rem; max-width:1120px; margin:0 auto; }
  .logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
  .logo .mark{ font-family:var(--serif); font-weight:700; font-size:1.4rem; letter-spacing:.06em; color:var(--enji); }
  .logo .tag{ font-size:.68rem; color:var(--muted); letter-spacing:.14em; }
  .logo-img{ height:2.9rem; width:auto; display:block; }
  .logo-mascot{ height:2.6rem; width:auto; display:block; }
  .foot-logo-img{ height:3.4rem; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; font-size:.87rem; color:var(--ink-soft); }
  .nav-links a:hover{ color:var(--enji); }
  .nav-cta{ display:flex; align-items:center; gap:.9rem; }
  .hamburger{ display:none; background:none; border:none; padding:.4rem; cursor:pointer; }
  .hamburger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }

  /* 店舗ページ用のシンプルなヘッダーナビ（ホームの.nav-linksとは別クラスにして衝突を防ぐ） */
  .nav-links-simple{ display:flex; align-items:center; gap:1.8rem; list-style:none; margin:0; padding:0; }
  .nav-links-simple a{ text-decoration:none; font-size:.85rem; color:var(--ink-soft); }
  .nav-links-simple a:hover{ color:var(--enji); }
  @media (max-width:600px){ .nav-links-simple{ display:none; } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    font-family:var(--sans); font-weight:700; font-size:.86rem;
    padding:.75rem 1.5rem; border-radius:999px; text-decoration:none; white-space:nowrap;
    border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--enji); color:#fff; }
  .btn-primary:hover{ background:var(--enji-deep); }
  .btn-pink{ background:var(--pink); color:#fff; }
  .btn-pink:hover{ background:var(--pink-deep); }
  .btn-ghost{ background:transparent; color:var(--enji); border-color:var(--enji); }
  .btn-ghost:hover{ background:var(--pink-soft); }
  .btn-sm{ padding:.55rem 1.1rem; font-size:.8rem; }

  .crumb{ font-size:.78rem; color:var(--muted); padding:1.1rem 0 0; }
  .crumb a{ text-decoration:none; color:var(--muted); }
  .crumb a:hover{ color:var(--enji); }

  /* ============ Hero（トップページ） ============ */
  .hero{
    padding:5.5rem 0 5rem;
    text-align:center;
    background:
      radial-gradient(46% 60% at 18% 10%, color-mix(in srgb, var(--pink-soft) 90%, transparent) 0%, transparent 70%),
      radial-gradient(40% 50% at 85% 0%, color-mix(in srgb, var(--pink-soft) 70%, transparent) 0%, transparent 70%),
      var(--paper);
    overflow:hidden;
  }
  .hero-art{
    width:min(680px, 92vw); aspect-ratio:16/10; margin:0 auto 2.6rem;
    border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
  }
  .hero-art img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:760px){
    .hero{ padding-top:0; padding-bottom:3rem; }
    .hero-art{
      width:auto; max-width:none;
      margin:0 -1.4rem 2rem;
      aspect-ratio:1/1; border-radius:0; box-shadow:none;
    }
    .hero-art img{ object-position:top; }
  }

  .hero h1{ font-size:clamp(2.6rem, 7vw, 4.4rem); font-weight:700; line-height:1.35; margin-bottom:.9rem; }
  .hero .lede{ font-family:var(--serif); font-size:clamp(1rem, 2vw, 1.2rem); color:var(--ink-soft); max-width:32em; margin:0 auto 2.4rem; }
  .hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }

  /* ============ Philosophy ============ */
  .philosophy{ padding:6.5rem 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .philosophy .grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
  .philosophy .art{ aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:relative; box-shadow:var(--shadow); }
  .philosophy .art img{ width:100%; height:100%; object-fit:cover; display:block; }
  .philosophy h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin:.9rem 0 1.4rem; text-wrap:balance; line-height:1.6; }
  .philosophy .body-copy{ white-space:pre-line; font-size:.98rem; margin-bottom:1.8rem; }

  @media (max-width:820px){ .philosophy .grid{ grid-template-columns:1fr; } .philosophy .art{ order:-1; aspect-ratio:16/10; } }

  /* ============ Services ============ */
  .services{ padding:6.5rem 0; background:var(--paper); }
  .section-head{ text-align:center; max-width:34em; margin:0 auto 3.2rem; }
  .section-head h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-top:.7rem; }
  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1.8rem 1.5rem;
    box-shadow:var(--shadow); text-decoration:none; display:flex; flex-direction:column; gap:.9rem;
    transition:transform .25s ease, border-color .25s ease;
  }
  .card:hover{ transform:translateY(-4px); border-color:var(--pink-line); }
  .card .icon{ width:2.6rem; height:2.6rem; color:var(--enji); }
  .card h3{ font-size:1.05rem; }
  .card h3 .subhead{ display:block; font-size:.72rem; font-weight:700; color:var(--muted); margin-top:.2rem; }
  .card p{ font-size:.86rem; }
  .card .go{ margin-top:auto; font-size:.8rem; font-weight:700; color:var(--enji); }

  /* ============ Concerns ============ */
  .concerns{ padding:5.5rem 0; background:var(--surface-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; max-width:820px; margin:0 auto; }
  .chip{
    background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.75rem 1.3rem;
    font-size:.87rem; color:var(--ink); text-decoration:none; box-shadow:var(--shadow);
  }
  .chip:hover{ border-color:var(--pink); color:var(--enji); }
  .chip.solo{ background:var(--enji); color:#fff; border-color:var(--enji); }

  /* ============ Steps ============ */
  .steps-sec{ padding:6.5rem 0; background:var(--paper); }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:none; }
  .step{ text-align:center; padding:0 .5rem; position:relative; }
  .step .n{ font-family:var(--serif); font-size:2.6rem; color:var(--pink); line-height:1; margin-bottom:.8rem; }
  .step h3{ font-size:1.1rem; margin-bottom:.6rem; }
  .step p{ font-size:.87rem; max-width:22em; margin:0 auto; }
  .step-arrow{ display:none; }
  @media (min-width:700px){
    .steps{ align-items:start; }
    .step:not(:last-child)::after{
      content:"→"; position:absolute; right:-1.1rem; top:.35rem; color:var(--pink); font-size:1.3rem;
    }
  }
  @media (max-width:699px){ .steps{ grid-template-columns:1fr; gap:2.2rem; } }

  /* ============ Stores（トップページの店舗一覧カード） ============ */
  .stores-sec{ padding:6.5rem 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
  .store{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow); }
  .store .thumb{ height:130px; position:relative; overflow:hidden; }
  .store .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .store .body{ padding:1.4rem 1.4rem 1.6rem; }
  .store h3{ font-size:1.1rem; margin-bottom:.5rem; }
  .store .addr{ font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
  .store .fit{ font-size:.82rem; color:var(--enji-deep); margin-bottom:1.2rem; }
  .store .actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

  /* ============ Instagram/Blogティザー ============ */
  .insta{ padding:6rem 0; background:var(--paper); }
  .insta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:2rem; }
  @media (min-width:640px){ .insta-grid{ grid-template-columns:repeat(6,1fr); } }
  .insta-tile{ aspect-ratio:1; border-radius:4px; position:relative; overflow:hidden; }
  .insta-tile::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.06); }
  .insta-tile:nth-child(6n+1){ background:linear-gradient(150deg,#F8E6E9,#DD8FA0); }
  .insta-tile:nth-child(6n+2){ background:linear-gradient(150deg,#F3D9C8,#DD8FA0); }
  .insta-tile:nth-child(6n+3){ background:linear-gradient(150deg,#7A2233,#DD8FA0); }
  .insta-tile:nth-child(6n+4){ background:linear-gradient(150deg,#FBECE9,#C9758B); }
  .insta-tile:nth-child(6n+5){ background:linear-gradient(150deg,#DD8FA0,#5C1926); }
  .insta-tile:nth-child(6n+6){ background:linear-gradient(150deg,#F6DEE2,#7A2233); }

  /* ============ FAQ ============ */
  .faq{ padding:6rem 0; background:var(--paper); }
  .faq-list{ max-width:760px; margin:0 auto; display:grid; gap:.7rem; }
  details{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:0; box-shadow:var(--shadow); }
  summary{
    list-style:none; cursor:pointer; padding:1.1rem 1.3rem; display:flex; justify-content:space-between; align-items:center;
    font-weight:700; font-size:.92rem; gap:1rem;
  }
  summary::-webkit-details-marker{ display:none; }
  summary .q{ color:var(--ink); }
  summary .plus{ color:var(--pink); font-size:1.2rem; flex:none; transition:transform .2s ease; }
  details[open] summary .plus{ transform:rotate(45deg); }
  details .a{ padding:0 1.3rem 1.2rem; font-size:.88rem; color:var(--ink-soft); }

  /* ============ CTA（トップページ） ============ */
  .cta{
    padding:6rem 0; text-align:center; color:#fff;
    background: linear-gradient(155deg, var(--enji-deep), var(--enji) 60%, var(--pink-deep));
  }
  .cta h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1rem; }
  .cta p{ color:color-mix(in srgb, #fff 82%, transparent); margin-bottom:2.2rem; }
  .cta .btn-primary{ background:#fff; color:var(--enji-deep); }
  .cta .btn-primary:hover{ background:var(--pink-soft); }
  .cta-stores{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:1.6rem; }
  .cta-stores .btn{ background:transparent; border:1px solid color-mix(in srgb,#fff 55%, transparent); color:#fff; }
  .cta-stores .btn:hover{ background:color-mix(in srgb,#fff 14%, transparent); }

  /* ============ Footer ============ */
  footer.site{ background:var(--surface); padding:3.5rem 0 6.5rem; border-top:1px solid var(--line); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.4rem; margin-bottom:2.6rem; }
  .foot-brand .mark{ font-family:var(--serif); font-size:1.3rem; color:var(--enji); }
  .foot-brand p{ font-size:.82rem; margin-top:.8rem; max-width:20em; }
  .foot-col h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; color:var(--muted); font-weight:700; margin-bottom:.9rem; }
  .foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
  .foot-col a{ text-decoration:none; font-size:.85rem; color:var(--ink-soft); }
  .foot-col a:hover{ color:var(--enji); }
  .foot-bottom{ border-top:1px solid var(--line); padding-top:1.6rem; font-size:.76rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

  /* ============ Mobile bottom nav（トップページ） ============ */
  .mobile-nav{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--line);
    padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(43,34,38,.08);
  }
  .mobile-nav .row{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:.5rem; max-width:520px; margin:0 auto; }
  .mobile-nav a{
    display:flex; flex-direction:column; align-items:center; gap:.2rem; text-decoration:none;
    font-size:.68rem; color:var(--ink-soft); padding:.35rem 0;
  }
  .mobile-nav a svg{ width:1.25rem; height:1.25rem; }
  .mobile-nav .reserve{ background:var(--enji); color:#fff; border-radius:10px; font-weight:700; }
  .mobile-nav .reserve svg{ display:none; }

  @media (max-width:880px){
    .nav-links{ display:none; }
    .nav-cta .btn-ghost{ display:none; }
    .hamburger{ display:block; }
    .mobile-nav{ display:block; }
    body{ padding-bottom:4.3rem; }
    .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  }

  /* ============================================================
     店舗ページ専用（body class="page-store"）
     ============================================================ */
  .page-store .wrap{ max-width:1080px; }
  .page-store .nav{ max-width:1080px; }
  .page-store .hero{ padding:2.4rem 0 4rem; text-align:left; background:none; overflow:visible; }
  .page-store .hero h1{ font-size:clamp(2rem,4.5vw,2.9rem); margin:.6rem 0 .8rem; }
  .page-store .hero .lede{ font-family:var(--serif); font-size:1.05rem; color:var(--ink-soft); max-width:34em; margin:0 0 1.8rem; }
  .page-store .hero-actions{ justify-content:flex-start; }
  .page-store .section-head{ text-align:left; max-width:34em; margin:0 0 2.4rem; }
  .page-store .section-head h2{ font-size:clamp(1.5rem,3vw,1.9rem); margin-top:.6rem; }
  .page-store .cta{ padding:5rem 0; }

  .hero-photo{ height:min(46vw,340px); border-radius:6px; overflow:hidden; position:relative; box-shadow:var(--shadow); margin-bottom:2rem; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2rem; font-size:.84rem; color:var(--muted); }
  .hero-meta b{ color:var(--ink); font-weight:700; }

  .staff{ padding:5rem 0; background:var(--paper); }
  .staff-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; }
  .staff-card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
  .staff-photo{ aspect-ratio:1; overflow:hidden; }
  .staff-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .staff-body{ padding:1.1rem 1.2rem 1.3rem; }
  .staff-body .role{ font-size:.72rem; color:var(--muted); letter-spacing:.05em; }
  .staff-body h3{ font-size:1rem; margin:.35rem 0 .5rem; }
  .staff-body p{ font-size:.84rem; }

  .menu-sec{ padding:5rem 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .menu-cats{ display:grid; gap:1rem; }
  .menu-cat{ background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1.4rem 1.6rem; }
  .menu-cat h3{ font-size:1.02rem; margin-bottom:.9rem; }
  .menu-row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dotted var(--line); font-size:.88rem; }
  .menu-row:last-child{ border-bottom:none; }
  .menu-row .name{ color:var(--ink); }
  .menu-row .price{ color:var(--enji); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }

  .info{ padding:5rem 0; background:var(--surface-alt); }
  .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
  .info dl{ font-size:.92rem; display:grid; grid-template-columns:6em 1fr; gap:.6rem 1rem; }
  .info dt{ color:var(--muted); }
  .info dd{ margin:0; color:var(--ink-soft); }
  .map-link{ aspect-ratio:4/3; border-radius:6px; background:
      repeating-linear-gradient(45deg, var(--surface) 0 10px, var(--pink-soft) 10px 20px);
      border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:.7rem; text-decoration:none; transition:transform .2s ease; }
  .map-link:hover{ transform:translateY(-2px); }
  .map-link svg{ width:2.2rem; height:2.2rem; color:var(--enji); }
  .map-link span{ font-size:.85rem; font-weight:700; color:var(--enji-deep); background:color-mix(in srgb, var(--surface) 82%, transparent); padding:.45rem 1.1rem; border-radius:999px; }
  @media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     ブログページ専用（body class="page-blog"）
     ============================================================ */
  .page-blog .wrap{ max-width:880px; padding-left:1.5rem; padding-right:1.5rem; }
  .page-blog .nav{ max-width:1080px; }
  .page-blog .hero{ padding:2.4rem 0 1rem; text-align:center; background:none; overflow:visible; }
  .page-blog .hero h1{ font-size:clamp(2.1rem,5vw,2.8rem); margin:.6rem 0 1rem; }
  .page-blog .hero .lede{ font-family:var(--serif); font-size:1.05rem; color:var(--ink-soft); max-width:34em; margin:0 auto; }

  section.block{ padding:2.6rem 0 5rem; }

  .post-grid{ display:grid; gap:1.3rem; max-width:720px; margin:0 auto; }
  .post-card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.7rem; box-shadow:var(--shadow); }
  .post-card .post-date{ font-size:.78rem; color:var(--muted); letter-spacing:.06em; margin-bottom:.5rem; }
  .post-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
  .post-card h3 a{ text-decoration:none; }
  .post-card h3 a:hover{ color:var(--enji); }
  .post-card .post-excerpt{ font-size:.92rem; margin-bottom:.9rem; }
  .post-card .post-more{ font-size:.85rem; color:var(--enji); text-decoration:none; font-weight:700; }
  .post-card .post-more:hover{ color:var(--enji-deep); }

  .post-detail{ max-width:680px; margin:0 auto; }
  .post-detail .post-date{ font-size:.8rem; color:var(--muted); margin:1.4rem 0 .5rem; }
  .post-detail h2{ font-size:clamp(1.5rem,4vw,1.9rem); margin-bottom:1.4rem; }
  .post-body p{ font-size:.98rem; margin-bottom:1.1rem; }
  .back-link{ display:inline-block; font-size:.85rem; color:var(--enji); text-decoration:none; margin:1rem 0; }
  .back-link:hover{ color:var(--enji-deep); }

  .empty-state{ text-align:center; max-width:480px; margin:2rem auto; font-size:.95rem; color:var(--muted); }