/* ==========================================================================
   ASOBOU! 名古屋店 LP  外部CSS（head登録）  方式A / 店舗テンプレ対応
   - 全ルールを .asobou-lp / #asobou-root にスコープ（テンプレ衝突・サニタイザ対策）
   - タップ機能は CSS :checked / <details> で実装（JSイベント非依存）
   - 740pxカラム対策：グリッドは auto-fit、画像は #asobou-root … !important
   ========================================================================== */

.asobou-lp{
  --violet:#4B1E78; --violet-soft:#EFE9F6;
  --blue:#008AD8; --blue-soft:#E5F4FC;
  --green:#55A51C; --green-soft:#EEF6E4;
  --red:#C5003E; --red-soft:#FBE9EF;
  --orange:#FF7500; --orange-soft:#FFF0E3;
  --ink:#2B2433; --ink-soft:#6B6477;
  --paper:#FFFFFF; --note:#FBFAF7; --line:#E8E4DD;
  --radius:18px;
  --font-display:"Noto Sans JP",sans-serif;
  --font-body:"Noto Sans JP",sans-serif;

  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.asobou-lp *{margin:0;padding:0;box-sizing:border-box}
.asobou-lp img{max-width:100%;display:block}
.asobou-lp a{color:inherit}
@media (prefers-reduced-motion:reduce){
  .asobou-lp *,.asobou-lp *::before,.asobou-lp *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 自由研究ノート風の方眼背景 ---------- */
.asobou-lp .grid-paper{
  background-color:var(--note);
  background-image:
    linear-gradient(rgba(75,30,120,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,30,120,.05) 1px, transparent 1px);
  background-size:24px 24px;
}

/* ---------- ヘッダー ---------- */
.asobou-lp header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.asobou-lp .site-inner{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:10px 20px;
}
.asobou-lp .site-brand{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--violet);letter-spacing:.04em}
.asobou-lp .site-brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;color:var(--ink-soft);letter-spacing:.1em}
.asobou-lp .site-cta{
  font-size:12px;font-weight:700;color:#fff;background:var(--violet);
  border-radius:999px;padding:8px 18px;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease, background .15s ease;
}
.asobou-lp .site-cta:hover{background:#5d2a92;transform:translateY(-1px)}

/* ---------- ヒーロー ---------- */
.asobou-lp .hero{position:relative;overflow:hidden;text-align:center;padding:64px 20px 88px}
.asobou-lp .hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--violet);
  background:#fff;border:2px solid var(--violet);
  border-radius:999px;padding:6px 18px;margin-bottom:22px;letter-spacing:.08em;
}
.asobou-lp .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:asb-blink 1.6s ease-in-out infinite}
@keyframes asb-blink{0%,100%{opacity:1}50%{opacity:.25}}
.asobou-lp .hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(44px,9vw,84px);line-height:1.05;letter-spacing:.02em;color:var(--violet)}
.asobou-lp .hero h1 .asobou{display:block}
.asobou-lp .hero h1 .asobou span{display:inline-block;animation:asb-bounce 2.6s ease-in-out infinite}
.asobou-lp .hero h1 .asobou span:nth-child(2){animation-delay:.12s}
.asobou-lp .hero h1 .asobou span:nth-child(3){animation-delay:.24s;color:var(--orange)}
.asobou-lp .hero h1 .asobou span:nth-child(4){animation-delay:.36s}
.asobou-lp .hero h1 .asobou span:nth-child(5){animation-delay:.48s;color:var(--orange)}
.asobou-lp .hero h1 .asobou span:nth-child(6){animation-delay:.6s}
@keyframes asb-bounce{0%,100%{transform:translateY(0)}10%{transform:translateY(-10px)}20%{transform:translateY(0)}}
.asobou-lp .hero h1 .lab{display:block;font-size:clamp(18px,3.6vw,30px);letter-spacing:.18em;margin-top:10px;color:var(--ink)}
.asobou-lp .hero-copy{margin:26px auto 0;max-width:560px;font-size:clamp(14px,2.6vw,16px);font-weight:500;color:var(--ink)}
.asobou-lp .hero-copy strong{background:linear-gradient(transparent 62%, var(--orange-soft) 62%);font-weight:900}
.asobou-lp .hero-period{
  display:inline-block;margin-top:30px;font-family:var(--font-display);font-weight:900;
  font-size:clamp(17px,3.4vw,24px);color:#fff;background:var(--violet);border-radius:14px;
  padding:14px 30px;letter-spacing:.06em;box-shadow:0 6px 0 rgba(75,30,120,.25);
}
.asobou-lp .hero-period small{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;opacity:.85;margin-bottom:2px}
.asobou-lp .hero-free{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.asobou-lp .hero-free span{font-size:12px;font-weight:700;border-radius:999px;padding:6px 16px;background:#fff;border:1.5px solid var(--line)}
.asobou-lp .hero-free span b{color:var(--red)}
/* 浮かぶ音符（inline style を廃し座標をクラス化） */
.asobou-lp .float-note{position:absolute;font-size:30px;opacity:.5;pointer-events:none;user-select:none;
  animation:asb-burst .7s cubic-bezier(.34,1.56,.64,1) backwards, asb-floaty 7s ease-in-out infinite}
.asobou-lp .float-note.fn1{top:10%;left:2%}
.asobou-lp .float-note.fn2{top:11%;right:2%;animation-delay:1.2s,1.2s}
.asobou-lp .float-note.fn3{bottom:14%;left:3%;animation-delay:2.4s,2.4s}
.asobou-lp .float-note.fn4{bottom:18%;right:5%;animation-delay:.6s,.6s}
.asobou-lp .float-note.fn5{top:46%;left:4%;animation-delay:3s,3s}
.asobou-lp .float-note.fn6{top:45%;right:5%;animation-delay:1.8s,1.8s}
@keyframes asb-burst{from{scale:0;opacity:0}to{scale:1;opacity:.5}}
@keyframes asb-floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-26px) rotate(8deg)}}
/* ヒーロー浮遊：楽器アイコン画像 */
.asobou-lp .float-note{opacity:.72}
#asobou-root .float-note img{width:58px;height:58px;object-fit:contain;display:block}
@media (max-width:760px){#asobou-root .float-note img{width:40px;height:40px}}
/* 楽器体感：体験できる楽器 テキスト一覧 */
.asobou-lp .gakki-list{max-width:660px;margin:8px auto 0;text-align:center;font-size:13px;color:var(--ink-soft);line-height:2}

/* ---------- 共通セクション ---------- */
.asobou-lp section{padding:72px 20px}
.asobou-lp .wrap{max-width:1040px;margin:0 auto}
.asobou-lp .sec-head{text-align:center;margin-bottom:44px}
.asobou-lp .sec-eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.22em;color:var(--violet);margin-bottom:10px}
.asobou-lp .sec-title{font-family:var(--font-display);font-weight:900;font-size:clamp(24px,5vw,36px);line-height:1.3}
/* 見出しアクセント：タイトル頭に▮の縦バー（アイブロウとタイトルの区別を明確に） */
.asobou-lp .sec-title::before{content:"";display:inline-block;width:.2em;height:.82em;margin-right:.36em;background:var(--violet);border-radius:2px;vertical-align:-.02em}
.asobou-lp .sec-lead{margin-top:14px;font-size:14px;color:var(--ink-soft);max-width:620px;margin-left:auto;margin-right:auto}
.asobou-lp .final-title{margin-bottom:24px}

/* スクロール出現：JS(IntersectionObserver)が .asb-ready を付けてから作動。
   ＝JS未実行時は全要素そのまま表示（no-JSフォールバック） */
.asobou-lp .reveal{opacity:1;transform:none}
.asobou-lp.asb-ready .reveal{
  opacity:0;transform:translateY(50px);
  transition:opacity .55s ease var(--d,0s), transform .75s cubic-bezier(.34,1.56,.64,1) var(--d,0s);
}
.asobou-lp.asb-ready .reveal.from-l{transform:translateX(-90px) rotate(-7deg)}
.asobou-lp.asb-ready .reveal.from-r{transform:translateX(90px) rotate(7deg)}
.asobou-lp.asb-ready .reveal.from-b{transform:translateY(70px) rotate(2deg)}
.asobou-lp.asb-ready .reveal.from-t{transform:translateY(-60px) rotate(-2deg)}
.asobou-lp.asb-ready .reveal.spin{transform:scale(.4) rotate(-14deg)}
.asobou-lp.asb-ready .reveal.in{opacity:1;transform:none}
/* ▼ フェイルセーフ：監視(IO)が一度も発火しない環境のみ約2秒で時差表示＋追従CTA表示。
   JSが健全なら asb-io-ok が付いて無効化＝PCのスクロール演出は完全無傷 */
@keyframes asb-failsafe-in{to{opacity:1;transform:none}}
.asobou-lp.asb-ready:not(.asb-io-ok):not(.asb-poll) .reveal:not(.in){animation:asb-failsafe-in .6s ease calc(2.5s + var(--d,0s)) forwards}
.asobou-lp.asb-ready:not(.asb-io-ok):not(.asb-poll) .sticky-cta{transform:none;transition:transform .4s ease 3s}

/* 流れる帯（ティッカー） */
.asobou-lp .ticker{overflow:hidden;background:#fff;color:var(--violet);
  border-top:2px dashed var(--violet);border-bottom:2px dashed var(--violet);
  padding:12px 0;transform:rotate(-1.4deg) scale(1.02);margin:6px -8px}
.asobou-lp .ticker.orange{color:var(--orange);border-color:var(--orange);transform:rotate(1.2deg) scale(1.02)}
.asobou-lp .ticker-track{display:flex;white-space:nowrap;width:max-content;animation:asb-ticker 26s linear infinite}
.asobou-lp .ticker span{font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.14em;padding:0 20px}
@keyframes asb-ticker{to{transform:translateX(-50%)}}

/* ---------- 3つのあそびかた ---------- */
.asobou-lp .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.asobou-lp .way{border-radius:var(--radius);padding:30px 24px;text-align:center;background:#fff;border:1.5px solid var(--line);transition:transform .2s ease, border-color .2s ease}
.asobou-lp .way:hover{transform:translateY(-4px)}
#asobou-root .way .icon img{width:58px;height:58px;object-fit:contain;display:block}
.asobou-lp .way .icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px}
.asobou-lp .way h3{font-family:var(--font-display);font-weight:900;font-size:21px;margin-bottom:8px}
.asobou-lp .way p{font-size:13px;color:var(--ink-soft)}
.asobou-lp .way.miru .icon{background:var(--blue-soft)} .asobou-lp .way.miru h3{color:var(--blue)} .asobou-lp .way.miru:hover{border-color:var(--blue)}
.asobou-lp .way.tsukuru .icon{background:var(--green-soft)} .asobou-lp .way.tsukuru h3{color:var(--green)} .asobou-lp .way.tsukuru:hover{border-color:var(--green)}
.asobou-lp .way.sawaru .icon{background:var(--orange-soft)} .asobou-lp .way.sawaru h3{color:var(--orange)} .asobou-lp .way.sawaru:hover{border-color:var(--orange)}
.asobou-lp .way a.jump{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2px dotted currentColor}

/* ---------- クイズ（CSS :checked + カウンター採点） ---------- */
.asobou-lp .q{padding-bottom:26px;margin-bottom:26px;border-bottom:2px dashed var(--line)}
/* ラジオは display:none にせず 0サイズ絶対配置（counter を効かせるため） */
/* 回答後：正解を必ず緑で明示／選んだ誤答を赤で明示 */
/* 解説の出し分け */
/* 結果（正解数をカウンターで自動表示） */
@keyframes asb-pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- カード（イベント＝details / WS＝article 共通） ---------- */
.asobou-lp .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.asobou-lp .cards.cards-wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.asobou-lp .card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease, rotate .25s ease}
.asobou-lp .cards .card:nth-child(3n+1){rotate:-1.4deg}
.asobou-lp .cards .card:nth-child(3n+2){rotate:1.1deg}
.asobou-lp .cards .card:nth-child(3n){rotate:-.6deg}
.asobou-lp .cards .card:hover{rotate:0deg;transform:translateY(-4px);box-shadow:0 12px 28px rgba(43,36,51,.1)}
.asobou-lp .card-visual{height:120px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;
  background-color:var(--note);background-image:linear-gradient(rgba(75,30,120,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(75,30,120,.05) 1px,transparent 1px);background-size:20px 20px;border-bottom:1.5px solid var(--line);border-radius:16px 16px 0 0}
.asobou-lp .card-date{position:absolute;top:12px;left:12px;background:#fff;border:2px solid var(--ink);border-radius:12px;font-family:var(--font-display);font-weight:900;text-align:center;padding:4px 12px;line-height:1.25}
.asobou-lp .card-date .m{font-size:10px;letter-spacing:.1em;display:block;color:var(--ink-soft)}
.asobou-lp .card-date .d{font-size:20px;display:block}
.asobou-lp .card-date .w{font-size:10px;display:block}
.asobou-lp .card-date .w.sat{color:var(--blue)} .asobou-lp .card-date .w.sun{color:var(--red)}
.asobou-lp .card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.asobou-lp .card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.asobou-lp .tag{font-size:10px;font-weight:700;border-radius:999px;padding:3px 10px;letter-spacing:.04em}
.asobou-lp .tag.free{background:var(--green-soft);color:var(--green)}
.asobou-lp .tag.reserve{background:var(--red-soft);color:var(--red)}
.asobou-lp .tag.floor{background:var(--violet-soft);color:var(--violet)}
.asobou-lp .tag.paid{background:var(--orange);color:#fff}
.asobou-lp .card h3{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.5;margin-bottom:8px}
.asobou-lp .card p{font-size:13px;color:var(--ink-soft);flex:1}
.asobou-lp .card .detail{margin-top:14px;font-size:12px;font-weight:700;color:var(--violet);display:inline-flex;align-items:center;gap:4px;align-self:flex-start}
.asobou-lp .card .detail::after{content:"→";transition:transform .15s}

/* イベントカード = <details> */
.asobou-lp details.card{display:block}
.asobou-lp details.card .card-sum{list-style:none;cursor:pointer;display:flex;flex-direction:column}
.asobou-lp details.card .card-sum::-webkit-details-marker{display:none}
.asobou-lp details.card[open]{rotate:0deg}
.asobou-lp details.card[open] .card-visual{border-radius:16px 16px 0 0}
.asobou-lp details.card[open] .detail::after{content:"↓";transform:rotate(0)}
.asobou-lp .card-detail{padding:0 20px 22px;animation:asb-pop .3s ease}
.asobou-lp .modal-desc{font-size:14px;color:var(--ink);margin:4px 0 18px}
.asobou-lp .modal-info{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px}
.asobou-lp .modal-info-row{display:flex;border-bottom:1px solid var(--line);font-size:13px}
.asobou-lp .modal-info-row:last-child{border-bottom:none}
.asobou-lp .modal-info-row dt{flex:0 0 92px;background:var(--note);padding:11px 14px;font-weight:900;font-size:12px;color:var(--ink-soft)}
.asobou-lp .modal-info-row dd{flex:1;padding:11px 14px;line-height:1.6}
.asobou-lp .modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.asobou-lp .modal-actions .btn{flex:1;text-align:center;padding:13px 16px;font-size:14px;min-width:140px}

/* WS 日程チップ・バンド・実写 */
.asobou-lp .ws-banner{max-width:760px;margin:0 auto 30px;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;rotate:-.6deg}
.asobou-lp .ws-banner figcaption{font-size:11px;color:var(--ink-soft);text-align:center;padding:9px 14px}
.asobou-lp .card-visual.has-photo{height:auto;font-size:0;padding:0;background:none;border-bottom:1.5px solid var(--line)}
.asobou-lp .ws-group{font-family:var(--font-display);font-weight:900;font-size:18px;color:var(--violet);display:flex;align-items:center;gap:8px;margin:0 0 16px}
.asobou-lp .ws-group.mt{margin-top:40px}
.asobou-lp .card .detail-link{margin-top:14px;font-size:12px;font-weight:700;color:var(--violet);text-decoration:none;display:inline-flex;align-items:center;gap:4px;align-self:flex-start}
.asobou-lp .card .detail-link::after{content:"→";transition:transform .15s}
.asobou-lp .card .detail-link:hover::after{transform:translateX(3px)}
/* ★店舗テンプレのimg高詳細度に勝つ（!important） */
#asobou-root .ws-banner img{width:100%;height:auto!important;display:block}
#asobou-root .card-visual.has-photo img{width:100%!important;height:190px!important;object-fit:cover;object-position:center;display:block}
/* トリミング位置を上げたい写真（ラーシュ／渡邉美音） */
#asobou-root .card-visual.has-photo img[src*="masterclass-karlin"],
#asobou-root .card-visual.has-photo img[src*="concert-watanabe"]{object-position:center 22%}
/* 銀メッキ：楽器が画像中央にあるので中央やや上を映す（22%だと壁の余白で楽器が見切れる） */
#asobou-root .card-visual.has-photo img[src*="ginmekki"]{object-position:center 55%}
/* スタッフコンサート：集合写真は全員見せたいので帯クロップせず全体表示 */
#asobou-root .card-visual.has-photo img[src*="concert-staff"]{height:auto!important;object-fit:contain}

/* ---------- 楽器体感（CSS :checked タブ） ---------- */
.asobou-lp .gakki-tabwrap{position:relative}
.asobou-lp .gk-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.asobou-lp .gakki-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.asobou-lp .gakki-tab{font-family:var(--font-display);font-weight:900;font-size:15px;border:2px solid var(--violet);border-radius:999px;background:#fff;color:var(--violet);padding:9px 30px;cursor:pointer;transition:background .15s,color .15s}
.asobou-lp #gk-7:checked ~ .gakki-tabs label[for="gk-7"],
.asobou-lp #gk-8:checked ~ .gakki-tabs label[for="gk-8"]{background:var(--violet);color:#fff}
.asobou-lp .gakki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.asobou-lp #grid8{display:none}
.asobou-lp #gk-8:checked ~ #grid8{display:grid}
.asobou-lp #gk-8:checked ~ #grid7{display:none}
.asobou-lp .gakki{background:#fff;border:1.5px solid var(--line);border-radius:16px;text-align:center;padding:20px 10px;transition:transform .18s,border-color .18s}
.asobou-lp .gakki:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--violet)}
.asobou-lp .gakki .icon{font-size:34px;margin-bottom:8px;height:48px;display:flex;align-items:center;justify-content:center}
#asobou-root .gakki .icon img{width:46px!important;height:46px!important;object-fit:contain;display:block}
.asobou-lp .gakki .name{font-size:12px;font-weight:700}
.asobou-lp .gakki-note{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-soft)}

/* ---------- ラリー＆楽譜 ---------- */
.asobou-lp .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.asobou-lp .duo-card{border-radius:var(--radius);padding:34px 28px;position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-top:6px solid var(--violet)}
.asobou-lp .duo-card.score{border-top-color:var(--blue)}
.asobou-lp .duo-card h3{font-family:var(--font-display);font-weight:900;font-size:22px;margin-bottom:12px;color:var(--violet)}
.asobou-lp .duo-card.score h3{color:var(--blue)}
.asobou-lp .duo-card p{font-size:13px;color:var(--ink-soft)}
.asobou-lp .duo-card .deco{position:absolute;right:-12px;bottom:-16px;font-size:96px;opacity:.1;transform:rotate(-12deg)}
.asobou-lp .duo-card .mini{display:inline-block;margin-bottom:12px;font-size:11px;font-weight:700;border-radius:999px;padding:4px 14px;letter-spacing:.1em;background:var(--violet-soft);color:var(--violet)}
.asobou-lp .duo-card.score .mini{background:var(--blue-soft);color:var(--blue)}

/* ---------- フロアマップ（各階 <details>） ---------- */
.asobou-lp .building{max-width:560px;margin:0 auto}
/* 画像プレースホルダー（空枠・後で画像差し替え） */
.asobou-lp .img-placeholder{max-width:820px;margin:0 auto 30px;aspect-ratio:16/9;border:2px dashed var(--violet);border-radius:var(--radius);background:var(--violet-soft);display:flex;align-items:center;justify-content:center}
.asobou-lp .img-placeholder::before{content:"＋";font-size:44px;font-weight:300;color:var(--violet);opacity:.35}
/* アクセス：Googleマップ埋め込み */
.asobou-lp .map-embed{max-width:820px;margin:0 auto 30px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 24px rgba(75,30,120,.10)}
#asobou-root .map-embed iframe{width:100%!important;height:100%!important;border:0;display:block}

/* フロアマップ：建物を左右から探偵が挟む */
.asobou-lp .building-wrap{position:relative;max-width:780px;margin:0 auto}
.asobou-lp .building-wrap .building{margin:0 auto}
#asobou-root img.fm-det{position:absolute;top:50%;width:clamp(70px,12%,120px)!important;height:auto!important;z-index:2;filter:drop-shadow(0 6px 8px rgba(75,30,120,.14))}
.asobou-lp .fm-l{left:0;transform:translateY(-50%)}
.asobou-lp .fm-r{right:0;transform:translateY(-50%) scaleX(-1)}
@media (max-width:640px){#asobou-root img.fm-det{width:60px!important}.asobou-lp .fm-l{left:-6px}.asobou-lp .fm-r{right:-6px}}

/* ★テンプレ上書き対策（店舗テンプレが label=block / div の max-width をリセットするため #asobou-root+!important で勝たせる） */
#asobou-root .building{max-width:520px!important}
#asobou-root label.floor-sum{display:flex!important;align-items:stretch!important;flex-wrap:nowrap!important}
#asobou-root .floor-num{flex:0 0 64px!important;display:flex!important;align-items:center!important;justify-content:center!important}
#asobou-root .floor-main{flex:1 1 auto!important;min-width:0!important}
#asobou-root .floor-mark{flex:0 0 44px!important}
/* キャラがビルに重なる幅では隠す（740pxの店舗カラム内でもキャラを出すが、狭くなったら退避） */
@media (max-width:760px){#asobou-root img.fm-det{display:none!important}}

.asobou-lp .building-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-bottom:14px}
.asobou-lp .building-roof{width:0;height:0;margin:0 auto;border-left:90px solid transparent;border-right:90px solid transparent;border-bottom:34px solid var(--violet)}
.asobou-lp .floor{position:relative;border:2px solid var(--violet);border-bottom:none;background:#fff}
.asobou-lp .floor:first-of-type{border-radius:16px 16px 0 0}
.asobou-lp .floor:last-of-type{border-bottom:2px solid var(--violet);border-radius:0 0 6px 6px}
.asobou-lp .floor-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.asobou-lp .floor>.floor-asobou{display:none}
.asobou-lp .floor:has(.floor-cb:checked) .floor-asobou{display:block;animation:asb-pop .3s ease}
.asobou-lp .floor:has(.floor-cb:checked){background:var(--violet-soft)}
.asobou-lp label.floor-sum{cursor:pointer;display:flex;align-items:stretch;transition:background .15s;user-select:none}
.asobou-lp .floor:hover .floor-sum{background:var(--note)}
.asobou-lp .floor:has(.floor-cb:checked):hover .floor-sum{background:var(--violet-soft)}
.asobou-lp .floor-num{flex:0 0 64px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:18px;border-right:2px dashed var(--line);color:var(--violet)}
.asobou-lp .floor-main{flex:1;padding:12px 16px}
.asobou-lp .floor-name{font-size:13px;font-weight:700}
.asobou-lp .floor-mark{flex:0 0 44px;display:flex;align-items:center;justify-content:center;font-size:20px}
.asobou-lp .floor-asobou{font-size:12px;color:var(--ink-soft);padding:0 16px 12px 82px;line-height:1.7;animation:asb-pop .3s ease}

/* ---------- アクセス ---------- */
.asobou-lp .access{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:start}
.asobou-lp .access-box{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:28px}
.asobou-lp .access-box h3{font-family:var(--font-display);font-weight:900;font-size:17px;color:var(--violet);margin-bottom:14px}
.asobou-lp .access-box dl{font-size:13px}
.asobou-lp .access-box dt{font-weight:900;margin-top:12px}
.asobou-lp .access-box dd{color:var(--ink-soft)}

/* ---------- 下部CTA・フッター・追従 ---------- */
.asobou-lp .final-cta{text-align:center}
.asobou-lp .final-cta .hero-period{margin-top:0}
.asobou-lp .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.asobou-lp .btn{font-family:var(--font-display);font-weight:900;font-size:15px;text-decoration:none;border-radius:999px;padding:16px 36px;display:inline-block;transition:transform .15s, box-shadow .15s}
.asobou-lp .btn:hover{transform:translateY(-2px)}
.asobou-lp .btn.primary{color:#fff;background:var(--violet);box-shadow:0 5px 0 rgba(75,30,120,.3)}
.asobou-lp .btn.ghost{color:var(--violet);background:#fff;border:2px solid var(--violet)}
.asobou-lp footer{border-top:1px solid var(--line);padding:30px 20px 110px;text-align:center;font-size:11px;color:var(--ink-soft)}
.asobou-lp .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:99;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;transform:translateY(110%);transition:transform .3s ease}
.asobou-lp .sticky-cta.show{transform:none}
.asobou-lp .sticky-cta a{flex:1;max-width:280px;text-align:center;text-decoration:none;font-family:var(--font-display);font-weight:900;font-size:13px;border-radius:999px;padding:12px 10px}
.asobou-lp .sticky-cta .s-primary{color:#fff;background:var(--violet)}
.asobou-lp .sticky-cta .s-ghost{color:var(--violet);border:2px solid var(--violet)}

/* ---------- 謎解きナゾト（探偵×ラボ／ヤマハ ダークバイオレット #26193a＝規定の“深みのある背景”・パレット内） ---------- */
.asobou-lp .nazotoki-sec{position:relative;overflow:hidden;padding-top:56px;padding-bottom:56px;
  background:linear-gradient(180deg,#FBFAFE,#F1EBFA);} /* 白基調（ライトバイオレット極淡トーン＝規定内） */
.asobou-lp .nazotoki{position:relative;z-index:1;text-align:center;max-width:600px;margin:0 auto;color:var(--ink)}
.asobou-lp .nazotoki .mini{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.12em;background:var(--orange);color:#fff;border-radius:999px;padding:5px 14px;margin-bottom:18px}
.asobou-lp .nazotoki-kv{max-width:380px;margin:0 auto;border-radius:14px;overflow:hidden;border:3px solid #d6a4ea;box-shadow:0 14px 30px rgba(75,30,120,.18);rotate:-1.2deg}
#asobou-root .nazotoki-kv img{width:100%!important;height:auto!important;display:block}
.asobou-lp .nazotoki-lead{font-family:"Yu Mincho","游明朝",serif;font-size:14px;line-height:1.95;color:var(--ink-soft);max-width:440px;margin:20px auto 0}
/* 飛び交う ？ と ♪（紫＋オレンジ＝パレット内・白背景で映える） */
.asobou-lp .mystery-note{position:absolute;z-index:0;font-weight:900;pointer-events:none;user-select:none;
  color:rgba(75,30,120,.18);animation:asb-floaty 8s ease-in-out infinite}
.asobou-lp .mystery-note.o{color:rgba(255,117,0,.5)}
/* 飾り音符グリフはCSSで付与（本文に♪♬を置くとSITE PUBLISの不可文字チェックに毎回かかるため） */
.asobou-lp .mn1::before,.asobou-lp .mn4::before,.asobou-lp .mn6::before{content:"？"}
.asobou-lp .mn2::before,.asobou-lp .mn5::before,.asobou-lp .mn8::before{content:"♪"}
.asobou-lp .mn3::before,.asobou-lp .mn7::before{content:"♬"}
.asobou-lp .mn1{top:9%;left:4%;font-size:46px;animation-delay:0s}
.asobou-lp .mn2{top:16%;right:7%;font-size:30px;animation-delay:1.1s}
.asobou-lp .mn3{bottom:14%;left:8%;font-size:34px;animation-delay:2.2s}
.asobou-lp .mn4{bottom:10%;right:12%;font-size:52px;animation-delay:.6s}
.asobou-lp .mn5{top:44%;left:2%;font-size:26px;animation-delay:3s}
.asobou-lp .mn6{top:52%;right:3%;font-size:40px;animation-delay:1.7s}
.asobou-lp .mn7{top:6%;left:46%;font-size:24px;animation-delay:2.6s}
.asobou-lp .mn8{bottom:8%;left:40%;font-size:30px;animation-delay:.3s}
@media (max-width:760px){.asobou-lp .mystery-note{font-size:26px!important}.asobou-lp .mn1,.asobou-lp .mn4{font-size:36px!important}}

/* ---------- 物販ピックアップ ---------- */
.asobou-lp .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.asobou-lp .product{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.asobou-lp .product:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(43,36,51,.1)}
.asobou-lp .product-img{aspect-ratio:4/3;background:var(--note);overflow:hidden}
#asobou-root .product-img img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.asobou-lp .product-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.asobou-lp .product .cat{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--violet);margin-bottom:6px}
.asobou-lp .product h3{font-family:var(--font-display);font-weight:900;font-size:15px;line-height:1.4;margin-bottom:8px}
.asobou-lp .product p{font-size:12px;color:var(--ink-soft);flex:1;line-height:1.7}
.asobou-lp .product .price{font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--ink);margin:12px 0 0}
.asobou-lp .product .price small{font-size:11px;font-weight:700;color:var(--ink-soft)}
.asobou-lp .product .buy{margin-top:12px;text-align:center;font-size:12px;font-weight:900;text-decoration:none;color:#fff;background:var(--violet);border-radius:999px;padding:10px 14px;transition:background .15s}
.asobou-lp .product .buy:hover{background:#5d2a92}
.asobou-lp .product .buy.none{background:var(--note);color:var(--ink-soft);border:1.5px solid var(--line);pointer-events:none}

/* コンサート/その他：写真つきカード（既存 details.card / has-photo を流用）に日付＋開催情報 */
.asobou-lp .card-when{font-size:12px;font-weight:900;color:var(--violet);margin-bottom:6px}
/* 目的訴求ラベル（こんな人に／こんな目的で） */
.asobou-lp .card-purpose{display:inline-block;font-size:11px;font-weight:900;color:var(--violet);background:var(--violet-soft);border-radius:8px;padding:4px 10px;margin-bottom:10px;line-height:1.4}
.asobou-lp .card-photo{position:relative}
.asobou-lp .card-photo .badge{position:absolute;top:10px;left:10px;background:#fff;border:2px solid var(--ink);border-radius:10px;font-family:var(--font-display);font-weight:900;font-size:12px;padding:3px 10px}

/* セクション見出し内の実写バンド（楽器体験・オーディオ等の導入写真） */
.asobou-lp .lead-photo{max-width:820px;margin:0 auto 30px;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);rotate:-.4deg}
#asobou-root .lead-photo img{width:100%!important;height:auto!important;display:block}

/* ★イベント枠の角から、対象楽器のアイコンがちょこっと覗く演出 */
/* イベントカード開閉＝:checked方式（店舗テンプレはsummary内の画像/divが潰れるため<details>を廃止） */
.asobou-lp .card{position:relative;scroll-margin-top:80px}
.asobou-lp .card.has-peek{overflow:visible}
.asobou-lp .card-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.asobou-lp label.detail{cursor:pointer}
.asobou-lp .card>.card-detail{display:none}
.asobou-lp .card:has(.card-cb:checked) .card-detail{display:block;animation:asb-pop .3s ease}
.asobou-lp .card:has(.card-cb:checked) .detail::after{transform:rotate(90deg)}
.asobou-lp .card-visual{overflow:hidden}                        /* 写真は card-visual 側でクリップ維持 */
.asobou-lp .card-peek{
  position:absolute;top:-20px;right:-14px;z-index:2;
  font-size:52px;line-height:1;pointer-events:none;user-select:none;
  rotate:12deg;filter:drop-shadow(0 5px 7px rgba(43,36,51,.22));
  transition:rotate .25s ease, transform .25s ease;
}
#asobou-root .card-peek img{width:60px;height:60px;object-fit:contain;display:block}
.asobou-lp details.card:hover .card-peek{rotate:-8deg;transform:translateY(-3px)}
.asobou-lp details.card[open] .card-peek{rotate:-8deg}
@media (max-width:760px){
  .asobou-lp .card-peek{font-size:42px;top:-15px;right:-10px}
}

/* ---------- クイズ（ウォームアップ）：ヤマハ紫の白基調＋探偵モチーフで謎解きと世界観を接続 ---------- */
/* 探偵バッジ（♪柄の虫めがね・ヤマハ紫） */
/* 音の探偵ペア（ガイドキャラ） */
/* 謎解き：ポスターを男女の探偵が左右から挟む */
/* 横一列：男の子｜ポスター｜女の子（捜索ポーズ・小サイズ・幅％固定で潰れない） */
.asobou-lp .nazotoki-stage{display:flex;align-items:flex-end;justify-content:center;gap:2%;max-width:600px;margin:0 auto}
.asobou-lp .nazotoki-stage .nazotoki-kv{flex:0 0 60%;max-width:320px;margin:0}
#asobou-root img.det-side{flex:0 0 58px!important;width:58px!important;max-width:58px!important;height:auto!important;margin-bottom:6px;filter:drop-shadow(0 6px 8px rgba(75,30,120,.14))}
.asobou-lp .det-r{transform:scaleX(-1)}  /* 女の子は内向き */

/* ---------- レスポンシブ（画面幅・保険。740pxカラム対策は上の auto-fit が主役） ---------- */
@media (max-width:760px){
  .asobou-lp section{padding:56px 18px}
  .asobou-lp .float-note{font-size:22px}
}

/* ---------- 商品名：ブランド行＋品番（細字） ---------- */
.asobou-lp .product-body h3 .brandline{display:block;font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:.02em;margin-bottom:2px}
.asobou-lp .product-body h3 .model{display:block;font-size:11px;font-weight:500;color:var(--ink-soft);margin-top:3px}
.asobou-lp .product .price .pl{display:inline-block;min-width:38px;font-size:11px;font-weight:700;color:var(--ink-soft);margin-right:4px}

/* ---------- 楽器体感：7月／8月を分けて記載 ---------- */
.asobou-lp .gakki-months{max-width:720px;margin:10px auto 0;display:grid;gap:10px}
.asobou-lp .gakki-month{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.9;color:var(--ink-soft);background:var(--violet-soft);border-radius:12px;padding:12px 16px}
.asobou-lp .gakki-month .gm-label{flex:0 0 auto;font-family:var(--font-display);font-weight:900;font-size:13px;color:var(--violet)}

/* ---------- フロアマップ：各階の詳細リンク ---------- */
.asobou-lp .floor-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.asobou-lp .floor-link{font-size:11px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- 追従CTA：みる／つくる／さわる（ヤマハ＝白基調＋紫。3色ベタは避ける） ---------- */
.asobou-lp .sticky-cta .s-miru,
.asobou-lp .sticky-cta .s-tsukuru,
.asobou-lp .sticky-cta .s-sawaru{background:#fff;border:1.5px solid var(--line)}
/* アクセントは左の細い縦バーだけ（区別はつくが主張しすぎない） */
.asobou-lp .sticky-cta .s-primary{position:relative;padding-left:20px}
.asobou-lp .sticky-cta .s-primary::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:4px;height:16px;border-radius:2px;background:var(--violet)}
.asobou-lp .sticky-cta .s-tsukuru::before{background:var(--green)}
.asobou-lp .sticky-cta .s-sawaru::before{background:var(--orange)}
.asobou-lp .access-map{margin-top:12px;font-size:13px;font-weight:700}

/* ★CMSデフォルトの青リンクを上書き（CTA等の文字色を固定）＝#asobou-root+!important でテンプレに勝つ */
#asobou-root .btn.primary,
#asobou-root .buy,
#asobou-root .site-cta{color:#fff!important}
#asobou-root .btn.ghost,
#asobou-root .sticky-cta .s-ghost,
#asobou-root .sticky-cta .s-primary,
#asobou-root .jump,
#asobou-root .detail-link,
#asobou-root .gakki-note a,
#asobou-root .floor-link,
#asobou-root .access-map a,
#asobou-root .access dd a,
#asobou-root .final-cta a.ghost,
#asobou-root .modal-actions .btn.ghost{color:var(--violet)!important}
#asobou-root .site-brand{color:var(--violet)!important}

/* トグルは全て「テキスト/spanのみを包む label＋checkbox＋:has()」（本番実証済みのカード方式に統一） */
#asobou-root .card{scroll-margin-top:80px}

/* フロア行の中身は span（CMSがブロック入り label を組み替えるため）。表示だけブロック相当に */
#asobou-root .floor-main{display:block!important}
#asobou-root .floor-name{display:block!important}
#asobou-root .floor-mark{display:flex!important}

/* ★店舗テンプレが見出し(h1/h2/h3)やhrに付ける黒い罫線・下線を打ち消す（ローカルには無くCMSでのみ出る） */
#asobou-root h1,#asobou-root h2,#asobou-root h3,#asobou-root h4,
#asobou-root .sec-title,#asobou-root .final-title,#asobou-root .hero h1,#asobou-root .hero h1 .lab{
  border:0!important;border-top:0!important;border-bottom:0!important;
  background-image:none!important;box-shadow:none!important;text-decoration:none!important}
#asobou-root .hero{border:0!important}
#asobou-root hr{display:none!important}