:root{
  --brand-pink:#f3a9c8; --ink:#2f2a2a; --ink-soft:#5f5858;
  --bg:#ffd6e7; --muted:#faf5f7; --card:#fff; --accent:#ffdcea;
  --radius:18px; --radius-lg:26px; --shadow: 0 8px 30px rgba(0,0,0,.07); --shadow-soft:0 4px 14px rgba(0,0,0,.06);
  --maxw:1120px;
}
*{box-sizing:border-box}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}
.eb-lp{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;color:var(--ink); background:var(--bg); line-height:1.75; letter-spacing:.02em}
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:16px }

/* Header */
header#siteHeader{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.72); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid rgba(243,169,200,.35); box-shadow:0 6px 18px rgba(243,169,200,.15) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 6px; gap:12px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900 }
.brand-mark{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#f3a9c8,#ff94bd); padding:6px 10px; border-radius:9999px; box-shadow:0 4px 12px rgba(243,169,200,.35) }
.brand-logo-img{ height:18px; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) }
.brand-wordmark{ height:22px; width:auto; display:inline-block }
@media (max-width: 767px){ .brand-wordmark{ height:20px } }

/* Desktop menu */
.menu{ display:flex; align-items:center; gap:10px }
.menu a{ position:relative; padding:10px 12px; border-radius:12px; color:var(--ink-soft) }
.menu a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:linear-gradient(90deg,#ffd6e7,#f3a9c8); transform:scaleX(0); transform-origin:left; transition:transform .2s ease }
.menu a:hover::after, .menu a:focus-visible::after{ transform:scaleX(1) }
.btn-cta{ background:linear-gradient(90deg,#f3a9c8,#ff94bd); color:#fff; padding:10px 16px; border-radius:999px; font-weight:800; box-shadow:0 8px 22px rgba(243,169,200,.45); border:1px solid rgba(255,255,255,.5) }

/* Hamburger button */
.hamburger{ display:none; position:relative; width:44px; height:44px; border:none; background:transparent; border-radius:12px; }
.hamburger:focus-visible{ outline:2px solid #ffb3cf }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#5f5858; border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease }
.hamburger span:nth-child(1){ top:14px }
.hamburger span:nth-child(2){ top:21px }
.hamburger span:nth-child(3){ top:28px }
.hamburger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg) }
.hamburger.is-open span:nth-child(2){ opacity:0 }
.hamburger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg) }

/* Mobile menu panel */
@media (max-width: 959px){
  .hamburger{ display:block }
  .menu{ 
    position:fixed; inset:58px 12px auto 12px; 
    display:grid; gap:8px; padding:12px; border-radius:16px;
    background:#fff; border:1px solid #f3d7e4; box-shadow:var(--shadow);
    transform-origin: top right;
    transform: scale(.96); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu[data-open="true"]{ transform:scale(1); opacity:1; pointer-events:auto }
  .menu .btn-cta{ text-align:center }
}
@media (min-width: 960px){
  .menu{ position:static; transform:none !important; opacity:1 !important; pointer-events:auto !important; display:flex }
}

/* Progress bar */
.scroll-progress{ position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,#f3a9c8,#ffb3cf); transition:width .2s ease }

/* HERO */
.hero{ margin:0 0 20px }
.kv{ margin:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow) }
.kv picture, .kv img{ width:100%; height:auto; display:block }
@media (max-width: 767px){ .kv{ border-radius:14px } }

/* Logo under HERO */
.hero-logo-wrap{ display:flex; justify-content:center; align-items:center; margin: 4px 0 8px }
.hero-wordmark{ height:44px; width:auto }
@media (max-width: 767px){ .hero-wordmark{ height:34px } }

/* Sections */
.section-title{font-size:clamp(24px,5vw,40px);text-align:center;margin:0 0 10px;font-weight:900;letter-spacing:.02em}
.section-sub{max-width:760px;margin:0 auto 20px;text-align:center;color:#5f5858}

/* Alternating modules */
#lineup{ padding:8px 0 }
.module{ display:grid; gap:22px; align-items:center; padding:38px 0; border-top:1px solid #f6e7ef; grid-template-columns:1fr }
@media(min-width:960px){
  .module{ grid-template-columns:1.1fr .9fr }
  .module.reverse{ grid-template-columns:.9fr 1.1fr }
}
.m-media{ border-radius:26px; overflow:hidden; box-shadow:var(--shadow); background:#ffe7f1 }
.m-body{ background:#fff; border:1px solid #f3d7e4; border-radius:16px; padding:16px; box-shadow:var(--shadow-soft) }
.m-body h3{ font-size:clamp(20px,3.6vw,30px); margin:.2em 0 .4em }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 }
.chip{ font-size:12px; border:1px dashed #f1bfd4; border-radius:999px; padding:6px 10px; background:#fff }
.shops{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
.shops a{ background:#fff; border:1px solid #f3d7e4; border-radius:12px; padding:10px 12px; text-align:center; font-weight:700 }

/* Notes */
.notes .note{ background:#fff; border:1px dashed #f3d7e4; border-radius:12px; padding:12px 14px; color:#5f5858 }

footer .container{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:22px 16px 48px }

/* --- Mobile order fix: 画像→テキストの順に固定 --- */
@media (max-width: 959px){
  #lineup .module{ display:flex; flex-direction:column; } /* grid→縦並び */
  #lineup .module .m-media{ order:1; }  /* 画像を先頭 */
  #lineup .module .m-body{ order:2; }   /* 説明を後ろ */
}