:root{
    --brand1:#e4007f; /* メインピンク */
    --brand2:#ff8ddc; /* ライトピンク */
    --brand3:#dcb8ff; /* ラベンダー */
    --ink:#1a1a1a;
    --ink-soft:#5a5a5a;
    --bg:#ffffff;
    --line:#ececec;

    /* TODO: Adobe Fontsキット(dee5kcf)発行後の平成角ゴシックの正式ファミリー名に
       差し替えてください。Typekitのスタイルシートを一度読み込んだ後、
       ブラウザの開発者ツールで生成されたfont-family名を確認できます。 */
    --font-body:"heisei-kaku-gothic-std", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    --font-heading:"Dela Gothic One", var(--font-body);

    /* 平成角ゴシックのウエイト。基本W5、太字はW9。
       Adobe FontsのキットがウエイトごとにCSS font-weight切替に対応していない場合、
       重い文字だけ別ファミリー名になることがあるので、実機で確認して調整してください。 */
    --fw-regular:500;
    --fw-bold:900;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:var(--fw-regular);
    letter-spacing:.04em;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  section{ padding:176px 24px; max-width:1100px; margin:0 auto; }
  h1,h2,h3{ margin:0; }

  /* ===== 見出し：塗り＋黒フチ ===== */
  .heading-outline{
    font-family:var(--font-heading);
    -webkit-text-stroke:1.5px #111;
    text-stroke:1.5px #111;
    paint-order:stroke fill;
    letter-spacing:.06em;
    line-height:1.4;
  }
  .heading-outline.c-brand2{ color:var(--brand2); }
  .heading-outline.c-brand3{ color:var(--brand3); }

  .section-title{
    font-size:clamp(28px,5vw,44px);
    text-align:center;
    margin-bottom:48px;
  }

  /* ===== セクション間の区切り（既存の余白の中に収める） ===== */
  .section-divider{
    text-align:center;
    font-family:var(--font-heading);
    color:#d4d4d4;
    font-size:18px;
    letter-spacing:.5em;
    margin:-88px 0;
    pointer-events:none;
  }

  /* ===== Hero ===== */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero .hero-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
    z-index:1;
  }
  .hero-logo{
    position:absolute;
    top:36%; left:50%;
    transform:translate(-50%,-50%);
    width:60%;
    max-width:520px;
    z-index:2;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(0,0,0,.35));
  }
  .hero-inner{
    position:relative; z-index:2;
    width:100%;
    padding:0 24px 64px;
    text-align:center;
    color:#fff;
  }
  .hero-catch{
    font-family:var(--font-heading);
    font-size:clamp(30px,6vw,54px);
    color:var(--brand2);
    -webkit-text-stroke:2px #111;
    text-stroke:2px #111;
    paint-order:stroke fill;
    line-height:1.35;
    margin-bottom:14px;
  }
  .hero-sub{
    font-size:clamp(14px,2.6vw,17px);
    letter-spacing:.08em;
    margin-bottom:28px;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }

  /* ===== 常時表示CTA（フローティング） ===== */
  .cta-float{
    position:fixed;
    left:50%; bottom:22px;
    transform:translateX(-50%);
    z-index:50;
    background:linear-gradient(90deg, var(--brand1), #ff2fa0);
    color:#fff;
    padding:14px 32px;
    border-radius:999px;
    font-family:var(--font-heading);
    font-size:14px;
    letter-spacing:.06em;
    box-shadow:0 8px 24px rgba(228,0,127,.4);
    white-space:nowrap;
  }
  .hero .cta-inline{
    display:inline-block;
    background:linear-gradient(90deg, var(--brand1), #ff2fa0);
    color:#fff;
    padding:14px 32px;
    border-radius:999px;
    font-family:var(--font-heading);
    font-size:14px;
    letter-spacing:.06em;
    box-shadow:0 8px 24px rgba(228,0,127,.4);
  }

  /* ===== 翻訳バナー ===== */
  .translate-banner{
    background:linear-gradient(90deg, var(--brand3), var(--brand2));
    color:#1a1a1a;
    text-align:center;
    font-size:12px;
    letter-spacing:.03em;
    padding:10px 16px;
    line-height:1.7;
  }

  /* ===== SNSアイコン行 ===== */
  .social-row{
    display:flex; justify-content:center; gap:30px;
    padding:88px 24px;
  }
  .social-row a{
    color:var(--brand1);
    display:inline-flex;
    transition:opacity .2s;
  }
  .social-row a:hover{ opacity:.7; }
  .social-row svg{ width:34px; height:34px; }
  @media (min-width:700px){
    .social-row{ gap:38px; }
    .social-row svg{ width:44px; height:44px; }
  }

  /* ===== コンセプト ===== */
  .concept{
    text-align:center;
    max-width:640px;
    padding-top:0;
  }
  .concept p{
    font-size:15px;
    color:var(--ink-soft);
    margin:0 0 10px;
  }
  /* ===== CAFEメニュー ===== */
  .menu-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  @media (max-width:860px){
    .menu-grid{ grid-template-columns:1fr; }
  }
  .menu-card{
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  .menu-card .photo{
    aspect-ratio:1/1;
    overflow:hidden;
    background:linear-gradient(135deg, var(--brand3), var(--brand2));
  }
  .menu-card .photo img{ width:100%; height:100%; object-fit:cover; }
  .menu-card .body{
    padding:22px 20px 26px;
    flex:1;
    display:flex; flex-direction:column;
  }
  .menu-card .tag{
    font-size:11px; letter-spacing:.12em;
    color:var(--brand2); font-weight:var(--fw-bold); margin-bottom:8px;
  }
  .menu-card h3{
    font-family:var(--font-heading);
    font-size:19px;
    color:var(--brand1);
    -webkit-text-stroke:0;
    margin-bottom:8px;
  }
  .menu-card p{
    font-size:13.5px; color:var(--ink-soft);
    margin:0 0 14px;
    flex:1;
  }
  .menu-card .price{
    font-size:14px; font-weight:var(--fw-bold); margin-bottom:16px;
  }
  .menu-card .link{
    align-self:flex-start;
    font-size:13px; font-weight:var(--fw-bold);
    border-bottom:2px solid var(--brand1);
    padding-bottom:2px;
  }
  .menu-card.plan .photo{
    display:flex; align-items:center; justify-content:center;
  }
  .menu-card.plan .photo span{
    font-family:var(--font-heading);
    color:#fff; -webkit-text-stroke:1.5px #111; paint-order:stroke fill;
    font-size:26px;
  }
  .current-menu-note{
    grid-column:1/-1;
    text-align:center;
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:4px;
  }

  /* ===== SHOP ===== */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  @media (max-width:700px){
    .shop-grid{ grid-template-columns:1fr 1fr; }
  }
  .shop-grid img{
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:16px;
  }
  .shop-note{
    text-align:center;
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:20px;
  }

  /* ===== ギャラリー（カルーセル） ===== */
  .gallery-carousel{ position:relative; }
  .gallery-track{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gallery-track::-webkit-scrollbar{ display:none; }
  .gallery-track img{
    flex:0 0 auto;
    width:clamp(220px, 32vw, 300px);
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
    scroll-snap-align:center;
  }
  .gallery-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:15px; color:var(--brand1); z-index:2;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
  }
  .gallery-nav.prev{ left:-4px; }
  .gallery-nav.next{ right:-4px; }
  @media (max-width:760px){
    .gallery-nav{ display:none; } /* モバイルはスワイプ操作のみ */
  }

  /* ===== フッター ===== */
  footer{
    background:#fafafa;
    padding:56px 24px 120px;
    text-align:center;
    font-size:13px;
    color:var(--ink-soft);
  }
  footer .brand{
    font-family:var(--font-heading);
    color:var(--brand1);
    -webkit-text-stroke:1px #111; paint-order:stroke fill;
    font-size:20px;
    margin-bottom:16px;
  }
  footer .hours{
    margin-top:14px;
    line-height:1.8;
  }
  footer .hours a{
    color:var(--brand1);
    font-weight:var(--fw-bold);
    border-bottom:1px solid var(--brand1);
  }

/* ===================================================
   カテゴリB（予約導線）共通コンポーネント
   =================================================== */

.page-header{
  text-align:center;
  padding:32px 24px 0;
  max-width:1100px;
  margin:0 auto;
}
.page-header a{
  font-size:13px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}

.detail-page{ max-width:720px; }
.detail-photo{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:28px;
}
.detail-photo img{ width:100%; object-fit:cover; display:block; }
.detail-title{
  font-size:clamp(26px,5vw,38px);
  margin-bottom:6px;
  text-align:center;
}
.detail-lede{
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
  margin-bottom:20px;
}
.detail-price{
  font-size:16px; font-weight:var(--fw-bold); color:var(--brand1);
  margin-bottom:32px;
  text-align:center;
}

.section-label{
  font-family:var(--font-heading);
  font-size:14px;
  color:var(--brand1);
  -webkit-text-stroke:.6px #111; paint-order:stroke fill;
  margin-bottom:14px;
}

.rule-list{
  list-style:none; margin:0 0 32px; padding:0;
}
.rule-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
  font-size:14px;
  color:var(--ink-soft);
}
.rule-list li::before{
  content:"";
  position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--brand2);
}

.rules-fixed{
  background:#fff7fb;
  border:1px solid var(--brand2);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:20px;
}
.rules-fixed p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; }
.rules-fixed p:last-child{ margin-bottom:0; }

.rules-accordion{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-bottom:36px;
}
.rules-toggle{
  display:block;
  width:100%;
  text-align:center;
  background:none; border:none;
  font-family:var(--font-body);
  font-weight:var(--fw-bold);
  font-size:13px;
  color:var(--brand1);
  cursor:pointer;
  padding:8px;
}
.rules-body{ margin-top:10px; }
.rules-body p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; }
.rules-body strong{ color:var(--ink); }

.big-cta{
  display:block;
  text-align:center;
  background:linear-gradient(90deg, var(--brand1), #ff2fa0);
  color:#fff;
  font-family:var(--font-heading);
  font-size:16px;
  padding:18px;
  border-radius:999px;
  box-shadow:0 8px 24px rgba(228,0,127,.35);
}

/* ===== 入口ページ ===== */
.branch-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
}
@media (max-width:640px){
  .branch-grid{ grid-template-columns:1fr; }
}
.branch-card{
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  text-align:center;
}
.branch-card .photo{ aspect-ratio:1/1; overflow:hidden; }
.branch-card .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.branch-card .label{
  padding:20px;
  font-family:var(--font-heading);
  font-size:18px;
  color:var(--brand1);
  -webkit-text-stroke:.8px #111; paint-order:stroke fill;
}

/* ===== 貸切プラン詳細 ===== */
.private-photo-placeholder{
  aspect-ratio:16/10;
  border-radius:20px;
  background:linear-gradient(135deg, var(--brand3), var(--brand2));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
}
.private-photo-placeholder span{
  font-family:var(--font-heading);
  color:#fff; font-size:28px;
  -webkit-text-stroke:1.5px #111; paint-order:stroke fill;
}