/* =========================================================
   たなっち × MEGAドン・キホーテUNY砺波店 専門店街  特設LP
   ---------------------------------------------------------
   配色：公式HP準拠（黄 #F8DC4A／墨 #313232／生成り #FCFAF8／茶 #B88F63）
   書体：見出し Zen Maru Gothic（丸ゴ）／本文 Noto Sans JP・游ゴシック
   幅　：本文カラム最大1120px、3ブレークポイント（〜599 / 600〜899 / 900〜）
   ========================================================= */
:root{
  --yellow:#F8DC4A;
  --yellow-deep:#E9C51E;
  --yellow-pale:#FFF6C7;
  --ink:#313232;
  --ink-soft:#5B5D5C;
  --grey:#7A7A7A;
  --line:#E5E1DC;
  --paper:#FCFAF8;
  --sand:#F6F1EC;
  --brown:#B88F63;
  --sky-pale:#E4F1FA;
  --red:#D9463C;
  --white:#FFFFFF;

  --font-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c","游ゴシック",sans-serif;
  --font-body:"Noto Sans JP","游ゴシック","游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,sans-serif;

  --max:1120px;
  --gutter:clamp(16px, 4vw, 40px);
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:light; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.9;
  font-feature-settings:"palt"; overflow-x:hidden;
}
@media (min-width:900px){ body{font-size:16px} }
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
dl,dd{margin:0}
button{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.4; margin:0}
:focus-visible{outline:3px solid var(--yellow-deep); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* 改行制御：見出し・名称・ラベルは文節（<wbr>）や空白でのみ折り返す */
.kp,h1,h2,h3,.btn,.tag,.chip,.day-tabs [role=tab],.legend span{word-break:keep-all; overflow-wrap:anywhere; line-break:strict}
.nw{white-space:nowrap}
.br-sp{display:inline}
.br-pc{display:none}
@media (min-width:900px){ .br-sp{display:none} .br-pc{display:inline} }
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(48px, 8vw, 96px)}

/* 見出し */
.section-head{display:grid; gap:10px; margin-bottom:clamp(24px,4vw,40px); text-align:center; justify-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--brown)}
.kicker::before{content:""; width:8px; height:8px; background:var(--yellow); transform:rotate(45deg)}
.h2{font-size:clamp(22px, 3.6vw, 34px); line-height:1.45; text-wrap:balance}
.h2 .mk{background:linear-gradient(transparent 66%, var(--yellow) 66%)}
.h2 .mk.neon{background:linear-gradient(transparent 66%, rgba(255,63,164,.55) 66%, rgba(195,75,255,.55)); background:linear-gradient(transparent 66%, transparent 66%), linear-gradient(100deg,#FF3FA4,#C34BFF 55%,#7A5CFF); background-size:100% 100%, 100% 34%; background-repeat:no-repeat; background-position:0 0, 0 100%}
.lead{color:var(--ink-soft); max-width:36em; text-align:left; word-break:keep-all; overflow-wrap:anywhere; line-break:strict}
@media (min-width:900px){ .lead{text-align:center} }

/* ---------- header ---------- */
.site-head{position:sticky; top:0px; z-index:50; background:rgba(252,250,248,.96); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px}
.brand{text-decoration:none; display:block; flex:none; width:263px}
.brand .logo{position:relative; display:block; width:100%; aspect-ratio:915/160}
.brand .logo img{display:block; width:100%; height:100%}
.brand .logo-grad{position:absolute; inset:0; background:linear-gradient(90deg,#FF5FA2,#FFC53D,#4FD1FF,#B98CFF,#FF5FA2); background-size:300% 100%; -webkit-mask:url(../img/logo-mask.png) center/100% 100% no-repeat; mask:url(../img/logo-mask.png) center/100% 100% no-repeat; animation:hue 4s linear infinite}
@media (max-width:899px){ .brand{width:min(100%, 300px)} }
.gnav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{white-space:nowrap; text-decoration:none; font-size:13px; font-weight:700; padding:8px 11px; color:var(--ink-soft); border-bottom:2px solid transparent}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--yellow)}
@media (max-width:899px){
  .site-head .wrap{flex-wrap:wrap; padding-block:8px 0; row-gap:4px}
  .gnav{width:100%; margin-inline:calc(var(--gutter) * -1); padding-inline:calc(var(--gutter) - 8px) 40px; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent)}
}

/* ---------- buttons / tags ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.3; padding:12px 22px; border-radius:999px;
  background:var(--ink); color:var(--white); border:1.5px solid var(--ink); transition:background .15s, color .15s;
}
.btn:hover{background:#4a4b4b; border-color:#4a4b4b}
.btn.yellow{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.btn.yellow:hover{background:var(--yellow-deep); border-color:var(--yellow-deep)}
.btn.ghost{background:var(--white); color:var(--ink)}
.btn.ghost:hover{background:var(--sand)}
.btn.sm{padding:8px 15px; font-size:13px}
.tag,.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; line-height:1.2; padding:4px 8px; border-radius:3px; background:var(--sand); color:var(--ink-soft); white-space:nowrap}
.chip.floor{background:var(--yellow); color:var(--ink)}
.chip i{width:7px; height:7px; border-radius:50%; display:inline-block}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.dot-fashion{background:#EE9AAE}.dot-food{background:#F0A63A}.dot-interior{background:#7FC08C}.dot-service{background:#7FAEE3}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:#3C92EB; min-height:calc(100vw * 1.95)}
.hero .wrap{display:block; padding-inline:0; max-width:none}
.kv{position:absolute; inset:0; z-index:1}
.kv img{width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block}
.hero-copy{position:relative; z-index:3; display:grid; gap:14px; align-content:start; padding:clamp(22px,4vw,36px) var(--gutter) 0; max-width:var(--max); margin-inline:auto; width:100%}
.tieup{display:inline-block; width:max-content; max-width:none; white-space:nowrap; font-size:clamp(8px, 2.55vw, 12px); font-weight:700; line-height:1.4; letter-spacing:.02em; color:var(--ink); padding-bottom:4px; border-bottom:2px solid var(--ink); text-shadow:0 0 6px rgba(255,255,255,.9)}
.hero h1{font-size:clamp(32px, 9.4vw, 64px); font-weight:900; line-height:1.12; letter-spacing:.01em; color:var(--ink)}
.hero h1 .l1{display:block; word-break:keep-all; color:var(--ink)}
.hero h1 .l2{display:block; white-space:nowrap; font-size:1.95em; line-height:1; margin-top:.1em; letter-spacing:.04em; font-feature-settings:"palt" 0, "pkna" 0; font-kerning:none}
.hero h1 .l2 .g{display:inline-block}
.hero h1 .l2 .g2{margin-left:-.05em}
.hero h1 .l2 .g3{margin-left:.07em}
.hero-sub{font-weight:700; font-size:clamp(14px,1.8vw,17px); line-height:1.9; background:rgba(252,250,248,.9); padding:10px 14px; border-radius:6px; margin-top:6px}
.hero-sub b{color:var(--red)}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
@media (max-width:599px){
  .hero-copy > *{max-width:100%}
  .hero-sub{font-size:13.5px; padding:9px 12px; background:rgba(252,250,248,.82)}
  .hero h1{font-size:clamp(32px, 9.6vw, 64px)}
}
@media (min-width:600px){
  .hero{min-height:min(640px, 78vw)}
  .kv img{object-position:62% 40%}
  .hero-copy{padding:clamp(36px,5vw,84px) var(--gutter) 48px}
  .hero-copy > *{max-width:calc(46vw - max(var(--gutter), (100vw - 1120px) / 2))}
  .hero h1{font-size:clamp(36px, 4.6vw, 62px)}
}
@media (min-width:900px){
  .hero{min-height:min(720px, 54vw)}
  .kv img{object-position:60% 40%}
  .hero-copy{padding:clamp(48px,6vw,84px) var(--gutter) 56px}
  .hero-copy > *{max-width:calc(41vw - max(var(--gutter), (100vw - 1120px) / 2))}
  .hero h1{font-size:clamp(44px, 4.4vw, 66px)}
  .hero h1 .l2{font-size:2.05em}
  .hero-sub{margin-top:14px}
}

/* ---------- 参加店の帯 ---------- */
.shops-band{background:var(--yellow)}
.shops-band .wrap{display:flex; align-items:center; gap:0 14px; padding-block:12px; font-size:12.5px; font-weight:700}
.shops-band .lbl{font-family:var(--font-display); font-size:13px; padding-right:12px; border-right:1.5px solid rgba(49,50,50,.35); flex:none}
.shops-band .band-track{flex:1; min-width:0; display:flex}
.shops-band .band-run{display:flex; flex-wrap:wrap; gap:6px 14px}
.shops-band .bi{white-space:nowrap}
.shops-band .bi::before{content:"／"; color:rgba(49,50,50,.5); margin-right:14px; font-weight:400}
@media (min-width:900px){
  .shops-band .band-run+.band-run{display:none}
  .shops-band .band-run .bi:first-child::before{content:none}
}
@media (max-width:899px){
  .shops-band .band-track{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .shops-band .band-run{flex:none; flex-wrap:nowrap; gap:0; padding-right:0; animation:band-marquee 34s linear infinite; will-change:transform}
  .shops-band .bi{margin-right:14px}
  .shops-band .bi::before{margin-right:14px}
  @keyframes band-marquee{from{transform:translateX(0)} to{transform:translateX(-100%)}}
}
@media (max-width:599px){ .shops-band .wrap{font-size:12px; gap:0 10px} .shops-band .bi,.shops-band .bi::before{margin-right:10px} }
@media (prefers-reduced-motion: reduce){ .shops-band .band-run{animation:none} .shops-band .band-track{overflow-x:auto; mask-image:none; -webkit-mask-image:none} .shops-band .band-run+.band-run{display:none} }

/* ---------- たなっち紹介 ---------- */
.intro{background:var(--white); padding-block:clamp(24px,4vw,40px)}
.intro-card{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"pic body" "text text" "chips chips" "btn btn"; gap:12px 16px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(16px,2.5vw,24px)}
.intro-pic{grid-area:pic; width:clamp(80px,11vw,116px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid var(--white); box-shadow:0 0 0 1px var(--line); align-self:start}
.intro-pic img{width:100%; height:100%; object-fit:cover; display:block}
.intro-body{grid-area:body; display:grid; gap:4px; min-width:0}
.intro-kicker{font-size:12px; font-weight:700; color:var(--brown)}
.intro-name{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.intro-name b{font-family:var(--font-display); font-size:clamp(20px,2.4vw,26px); line-height:1.3}
.intro-name b small{font-size:.6em; font-weight:700; color:var(--ink-soft); white-space:nowrap}
.intro-name span{font-weight:700; color:var(--grey); font-size:12px}
.intro-text{grid-area:text; font-size:13.5px; color:var(--ink-soft); line-height:1.8; max-width:44em; margin:0}
.intro-chips{grid-area:chips; display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.intro-chips li{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:5px 9px; white-space:nowrap}
.intro-chips li b{font-family:var(--font-display); font-size:14px}
.intro-chips li small{font-weight:400; color:var(--grey); font-size:10px}
.ig-mark{width:16px; height:16px; border-radius:4px; background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); position:relative; flex:none}
.ig-mark::after{content:""; position:absolute; inset:3.5px; border:1.5px solid #fff; border-radius:50%}
.intro-card .btn{grid-area:btn; justify-self:start}
.btn-ig{background:linear-gradient(45deg,#F9CE34 0%,#EE2A7B 50%,#6228D7 100%); border-color:transparent; color:#fff; gap:8px}
.btn-ig:hover{background:linear-gradient(45deg,#f5c21c 0%,#e21a6f 50%,#561fc4 100%); color:#fff}
.btn-ig .ig-mark{background:transparent; border:1.5px solid #fff; border-radius:4px}
.btn-ig .ig-mark::after{inset:3px; border-width:1.5px}
.btn-ig .ig-mark::before{content:""; position:absolute; top:2px; right:2px; width:2px; height:2px; border-radius:50%; background:#fff}
@media (max-width:599px){ .intro-card{gap:10px 14px; align-items:center} .intro-pic{width:72px; align-self:center} .intro-body{gap:2px} .intro-name{flex-direction:column; align-items:flex-start; gap:2px} .intro-name span{line-height:1.5} .intro-text{font-size:13px; line-height:1.75} .intro-card .btn{justify-self:stretch; text-align:center} }
@media (min-width:760px){
  .intro-card{grid-template-columns:auto 1fr auto; grid-template-areas:"pic body btn" "pic text btn" "pic chips btn"; gap:8px 20px}
  .intro-card .btn{justify-self:end; align-self:center}
}

/* ---------- 専門店街って？ ---------- */
.what{background:var(--white); border-top:1px solid var(--line)}
.what-grid{display:grid; gap:28px; align-items:start}
@media (min-width:860px){.what-grid{grid-template-columns:1.05fr 1fr; gap:48px}}
.what-fig{position:relative; padding-left:15%}
.what-fig svg{width:100%; height:auto; display:block}
.what-fig .fig-tana{position:absolute; left:0; bottom:0; width:24%; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.points{display:grid}
.point{display:grid; grid-template-columns:1fr; gap:0; padding:16px 0 16px 18px; border-bottom:1px solid var(--line); position:relative}
.point:first-child{border-top:1px solid var(--line)}
.point::before{content:""; position:absolute; left:0; top:22px; width:8px; height:8px; background:var(--yellow); transform:rotate(45deg)}
.point .n{display:none}
.point h3{font-size:17px; margin-bottom:4px}
.point p{font-size:14px; color:var(--ink-soft); line-height:1.85}

/* 吹き出し */
.tana-say{display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:start}
.tana-say .face{width:52px; height:52px; border-radius:50%; overflow:hidden; border:2px solid var(--white); box-shadow:0 0 0 1px var(--line)}
.tana-say .face img{width:100%; height:100%; object-fit:cover; display:block}
.bubble{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; font-size:14px; line-height:1.85}
.bubble::before,.bubble::after{content:""; position:absolute; left:-9px; top:18px; border:8px solid transparent; border-left:0; border-right-color:var(--line)}
.bubble::after{left:-7.5px; border-right-color:var(--white)}
.bubble .who{display:block; font-size:11.5px; font-weight:700; color:var(--brown); margin-bottom:2px}
@media (min-width:900px){ .tana-say{grid-template-columns:60px 1fr; gap:12px} .tana-say .face{width:60px; height:60px} .bubble{font-size:15px} }

/* ---------- 1週間の使い方 ---------- */
.route{background:var(--sand)}
.day-tabs{position:sticky; top:calc(0px + 58px); z-index:20; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:10px; margin:0 calc(var(--gutter) * -1) 14px; padding-inline:var(--gutter); background:rgba(246,241,236,.96)}
.day-tabs::-webkit-scrollbar{display:none}
.day-tabs [role=tab]{flex:none; display:grid; justify-items:center; align-content:center; min-width:64px; padding:7px 10px 6px; border-radius:6px; border:1.5px solid var(--line); background:var(--white); cursor:pointer; line-height:1.1}
.day-tabs [role=tab] b{font-family:var(--font-display); font-size:17px}
.day-tabs [role=tab] span{font-size:10px; font-weight:700; color:var(--grey); margin-top:3px; white-space:nowrap}
.day-tabs .sm{display:none}
@media (max-width:599px){
  .day-tabs{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; overflow:visible}
  .day-tabs [role=tab]{min-width:0; padding:6px 2px 5px}
  .day-tabs [role=tab] b{font-size:15px}
  .day-tabs [role=tab] span{font-size:9px; margin-top:2px}
  .day-tabs .lg{display:none}
  .day-tabs .sm{display:block}
}
.tabs-hint{display:none}
@media (max-width:899px){
  .tabs-box{margin:0 calc(var(--gutter) * -1) 16px; padding:12px var(--gutter) 12px; background:var(--white); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
  .tabs-hint{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4}
  .tabs-hint::before{content:"▼"; font-size:10px; color:var(--ink)}
  .tabs-hint b{background:var(--yellow); padding:1px 5px; border-radius:3px}
  .tabs-box .day-tabs{position:static; margin:0; padding:0; background:transparent}
  .day-tabs [role=tab]{border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); position:relative; top:0; transition:top .1s, box-shadow .1s}
  .day-tabs [role=tab] span{color:var(--ink-soft)}
  .day-tabs [role=tab]:active{top:3px; box-shadow:0 0 0 var(--ink)}
  .day-tabs [role=tab][aria-selected=true]{background:var(--yellow); border-color:var(--ink); top:3px; box-shadow:0 0 0 var(--ink)}
  .day-tabs [role=tab][aria-selected=true]::after{content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); border:7px solid transparent; border-bottom:0; border-top-color:var(--ink)}
}
@media (max-width:599px){ .tabs-box{padding:10px var(--gutter)} .tabs-hint{font-size:12px} .day-tabs [role=tab]{padding:8px 2px 7px} }
.day-tabs [role=tab]:hover{border-color:var(--ink)}
.day-tabs [role=tab][aria-selected=true]{background:var(--yellow); border-color:var(--yellow-deep)}
.day-tabs [role=tab][aria-selected=true] span{color:var(--ink)}
@media (min-width:900px){
  .day-tabs{gap:8px; justify-content:center}
  .day-tabs [role=tab]{min-width:96px; padding:9px 14px 8px}
  .day-tabs [role=tab] b{font-size:20px}
  .day-tabs [role=tab] span{font-size:11px}
}
.route-note{display:grid; gap:8px; margin-bottom:clamp(20px,3vw,32px)}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; font-weight:700; color:var(--ink-soft)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:9px; height:9px; border-radius:50%; display:inline-block}
.route-note p{font-size:12px; color:var(--grey)}

.week{display:grid; gap:clamp(40px,6vw,64px)}
.week .day[hidden]{display:none}
.day-head{display:grid; grid-template-columns:auto 1fr; gap:12px 16px; align-items:center; margin-bottom:18px; padding-bottom:16px; border-bottom:2px solid var(--yellow)}
.day-badge{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; min-width:64px; width:auto; height:64px; padding:0 8px; border-radius:var(--r); background:var(--yellow); text-align:center; line-height:1}
.day-badge b{font-family:var(--font-display); font-size:26px}
.day-badge.two b{font-size:17px}
.day-badge span{font-size:9.5px; font-weight:700; white-space:nowrap; letter-spacing:0}
.day-badge.two{gap:3px}
.day-txt{display:grid; gap:4px; min-width:0}
.day-time{font-size:12px; font-weight:700; color:var(--brown)}
.day-txt h3{font-size:clamp(18px,2.6vw,24px); line-height:1.45}
.day-txt p:last-child{font-size:13.5px; color:var(--ink-soft); max-width:42em; line-height:1.8}
.day-tana{display:none}
@media (min-width:900px){
  .day-head{grid-template-columns:auto 1fr auto; gap:16px 22px; align-items:center}
  .day-badge{min-width:76px; height:76px; padding:0 10px}
  .day-badge b{font-size:30px}
  .day-badge.two b{font-size:20px}
  .day-tana{display:block; height:104px; width:auto; max-width:140px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
}

.timeline{position:relative; display:grid; gap:clamp(22px,3vw,32px)}
.timeline::before{content:""; position:absolute; left:24px; top:0; bottom:0; width:2px; background:var(--line)}
.stop{position:relative; display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:start}
.stop .clock{position:sticky; top:calc(0px + 132px); z-index:2; width:48px; height:48px; border-radius:50%; background:var(--white); border:2px solid var(--yellow-deep); color:var(--ink); display:grid; place-items:center; align-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1}
.stop .clock small{font-size:9px; color:var(--grey); font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums}
.stop .clock.two{font-size:11px}
.card{background:var(--white); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); display:grid}
.card .photo{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sand)}
.card .photo img.main{width:100%; height:100%; object-fit:cover}
.card .photo .tana{position:absolute; left:3%; bottom:0; height:var(--h,66%); width:auto; max-width:40%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 4px 8px rgba(0,0,0,.28)); z-index:2}
.card .photo .tana.right{left:auto; right:3%}
.card .photo .no{position:absolute; left:10px; top:10px; z-index:3; background:rgba(49,50,50,.85); color:var(--white); border-radius:3px; padding:3px 8px; font-family:var(--font-display); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums}
.card .photo .no small{font-size:10px; opacity:.8; margin-left:2px}
.card .body{padding:16px 16px 18px; display:grid; gap:10px; min-width:0}
.card .shop{font-size:clamp(17px,2vw,20px); line-height:1.4}
.card .shop small{display:block; font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--grey); letter-spacing:.03em; margin-top:2px}
.card .title{font-size:15px; font-weight:700; line-height:1.6}
.card .did{font-size:13px; color:var(--ink-soft); line-height:1.7; padding-left:1em; text-indent:-1em}
.card .did::before{content:"●"; font-size:8px; color:var(--brown); margin-right:.55em; vertical-align:middle}
.card .meta{display:grid; gap:2px; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:10px}
.card .meta div{display:flex; gap:10px; line-height:1.7}
.card .meta dt{flex:none; width:4.5em; color:var(--grey); font-weight:700; font-size:12px}
.card .meta dd{min-width:0}
.card .links{display:flex; flex-wrap:wrap; gap:8px; padding-top:2px}
@media (min-width:900px){
  .timeline::before{left:35px}
  .stop{grid-template-columns:72px 1fr; gap:24px}
  .stop .clock{width:72px; height:72px; font-size:17px; top:calc(0px + 140px)}
  .stop .clock.two{font-size:14px}
  .stop .clock small{font-size:10px}
  .card{grid-template-columns:1.15fr 1fr}
  .card .photo{aspect-ratio:auto; min-height:100%}
  .card .photo img.main{position:absolute; inset:0}
  .stop:nth-child(even) .card .photo{order:2}
  .card .body{padding:24px 26px 24px 22px; align-content:start; gap:12px}
}
.goal{margin-top:clamp(28px,4vw,44px); background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,4vw,36px) clamp(22px,4vw,36px) 0; display:grid; gap:12px; align-items:end; overflow:hidden}
.goal h3{font-size:clamp(20px,2.8vw,28px); line-height:1.45}
.goal p{color:var(--ink-soft); font-size:14.5px}
.goal > div{padding-bottom:clamp(22px,4vw,36px)}
.goal .tana{width:min(44vw,200px); height:auto; justify-self:end; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
@media (min-width:760px){.goal{grid-template-columns:minmax(0,1fr) 220px; gap:32px} .goal .tana{width:200px}}

/* ---------- 館内マップ ---------- */
.map{background:var(--white); border-top:1px solid var(--line)}
.map-grid{display:grid; gap:24px; align-items:start}
@media (min-width:900px){.map-grid{grid-template-columns:1.4fr 1fr}}
.map .figure{margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:clamp(10px,2vw,20px)}
.map .figure img{width:100%; height:auto}
.map .cap{font-size:12px; color:var(--grey); margin-top:8px; line-height:1.7}
.floor-list{display:grid; gap:18px}
.floor-list h3{font-size:15px; display:flex; align-items:center; gap:10px; margin-bottom:8px}
.floor-list h3 b{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:6px; background:var(--yellow); font-size:15px}
.floor-list ul{display:flex; flex-wrap:wrap; gap:6px}
.floor-list li a{display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13px; font-weight:700; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:5px 10px; white-space:nowrap}
.floor-list li a:hover{border-color:var(--ink)}
.floor-list li a i{width:7px; height:7px; border-radius:50%}

/* ---------- 推し17選 ---------- */
.osusume{background:var(--paper)}
.pt-grid{display:grid; gap:12px}
@media (min-width:640px){.pt-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pt-grid{grid-template-columns:repeat(3,1fr)}}
.pt{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-width:0}
.pt a{display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; text-decoration:none; padding:10px}
.pt img{width:92px; height:92px; object-fit:cover; border-radius:6px}
.pt-body{display:grid; gap:3px; min-width:0}
.pt-body b{font-size:15px; line-height:1.4; font-family:var(--font-display)}
.pt-body b small{font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--grey); margin-left:6px; white-space:nowrap}
.pt-body > span{font-size:13px; color:var(--ink-soft); line-height:1.65}
.pt-floor{margin-bottom:32px}
.pt-floor h2{font-size:17px; display:flex; align-items:center; gap:10px; margin-bottom:12px}
.pt-floor h2 b{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:6px; background:var(--yellow); font-size:16px}
.pt-list{display:grid; gap:12px}
@media (min-width:700px){.pt-list{grid-template-columns:repeat(2,1fr)}}
.pt-list .pt{display:grid; grid-template-columns:112px 1fr; gap:14px; padding:12px}
.pt-list .pt img{width:112px; height:112px; object-fit:cover; border-radius:6px}
.pt-list .pt-body{gap:6px; align-content:start}
.pt-list .pt-body b{font-size:16px}
.pt-say{font-size:14px; color:var(--ink); line-height:1.7}
.pt-links{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.pt-links a{font-size:12px; font-weight:700; text-decoration:none; border:1px solid var(--line); border-radius:3px; padding:4px 9px; background:var(--paper); white-space:nowrap}
.pt-links a:hover{border-color:var(--ink)}
@media (max-width:420px){.pt-list .pt{grid-template-columns:88px 1fr} .pt-list .pt img{width:88px;height:88px}}
.note{font-size:12px; color:var(--grey); line-height:1.7}

/* ---------- 店舗一覧 ---------- */
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px}
.filters button{border:1.5px solid var(--line); background:var(--white); border-radius:999px; padding:7px 14px; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font-display); white-space:nowrap}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--yellow); border-color:var(--yellow-deep)}
.shop-grid{display:grid; gap:16px}
@media (min-width:640px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
.shop-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid; grid-template-rows:auto 1fr; min-width:0}
.shop-card[hidden]{display:none}
.shop-card .ph{aspect-ratio:3/2; overflow:hidden; background:var(--sand)}
.shop-card .ph img{width:100%; height:100%; object-fit:cover}
.shop-card .bd{padding:16px 16px 18px; display:grid; gap:9px; align-content:start}
.shop-card h3{font-size:17px; line-height:1.4}
.shop-card h3 small{display:block; font-size:11px; color:var(--grey); font-family:var(--font-body); font-weight:400; margin-top:2px}
.shop-card p{font-size:13px; color:var(--ink-soft); line-height:1.8}
.shop-card .items{font-size:12.5px; color:var(--ink-soft); line-height:1.7}
.shop-card .items b{color:var(--brown); font-weight:700; margin-right:.5em}
.shop-card .meta{font-size:12.5px; display:grid; gap:2px; border-top:1px solid var(--line); padding-top:10px; color:var(--ink-soft)}
.shop-card .meta div{display:flex; gap:8px; line-height:1.7}
.shop-card .meta dt{flex:none; width:4.5em; color:var(--grey); font-weight:700}
.shop-card .meta dd{min-width:0}
.shop-card .links{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.empty{color:var(--grey); font-size:14px; padding:24px 0}

/* ---------- アクセス ---------- */
.access{background:var(--white); border-top:1px solid var(--line)}
.access-grid{display:grid; gap:20px}
@media (min-width:860px){.access-grid{grid-template-columns:1.1fr 1fr}}
.info{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,28px); display:grid; gap:14px}
.info h3{font-size:18px; line-height:1.45}
.info dl{display:grid; gap:0; font-size:14px}
.info dl div{display:grid; grid-template-columns:6em 1fr; gap:8px; padding:9px 0; border-top:1px solid var(--line)}
.info dl div:last-child{border-bottom:1px solid var(--line)}
.info dt{color:var(--grey); font-weight:700; font-size:12.5px; padding-top:2px}
.info dd{min-width:0; line-height:1.75}
.info .addr{white-space:nowrap; font-size:15px; font-weight:700}
@media (max-width:599px){
  .info dl div{grid-template-columns:1fr; gap:2px; padding:8px 0}
  .info dt{font-size:11.5px}
  .info dd{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
  .info .addr{font-size:clamp(10px, 3.3vw, 14px); letter-spacing:0}
}
@media (max-width:359px){ .info{padding:14px} .info .addr{font-size:3.1vw} }

.info .copy{display:inline-flex; gap:6px; align-items:center; font-size:11.5px; border:1px solid var(--line); border-radius:3px; padding:2px 8px; background:var(--white); cursor:pointer; margin-left:8px; vertical-align:middle}
.info .links{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:899px){ .info .links{justify-content:center} }
.mapbox{position:relative; background:var(--sky-pale); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-height:260px}
.mapbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
@media (max-width:859px){ .mapbox{aspect-ratio:16/10; min-height:0} }
@media (max-width:599px){ .mapbox{aspect-ratio:4/3} }
.mapbox .pin{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.5}
.mapbox .pin small{display:block; font-family:var(--font-body); font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-top:6px}
.mapbox svg{width:34px; height:34px; margin-inline:auto}

/* ---------- CTA / footer ---------- */
.final{background:var(--yellow)}
.final .wrap{display:grid; gap:18px; align-items:center; padding-block:clamp(40px,7vw,72px) 0}
.final .wrap > div{padding-bottom:clamp(40px,7vw,72px)}
@media (min-width:760px){.final .wrap{grid-template-columns:minmax(0,1.3fr) auto 140px; align-items:end}}
.final h2{font-size:clamp(21px,3vw,32px); line-height:1.45}
.final p{font-size:14.5px; margin-top:6px}
.final .btns{display:grid; gap:10px}
.final .tana{height:clamp(220px, 24vw, 320px); width:auto; max-width:none; justify-self:center; align-self:end; display:block; margin-top:8px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.tana.cut,.fig-tana.cut,.day-tana.cut{-webkit-mask-image:linear-gradient(#000 74%, transparent 100%); mask-image:linear-gradient(#000 74%, transparent 100%)}
.site-foot{background:var(--ink); color:#D6D6D6; font-size:12px; line-height:1.8}
.site-foot .wrap{display:grid; gap:10px; padding-block:26px}
.site-foot a{color:var(--yellow); text-decoration:none}
.site-foot .row{display:flex; flex-wrap:wrap; gap:6px 18px}

/* ---------- サブページ ---------- */
.page-hero{background:var(--yellow)}
.page-hero .wrap{display:grid; gap:10px; padding-block:clamp(28px,5vw,56px); grid-template-columns:minmax(0,1fr) auto; align-items:end}
.page-hero h1{font-size:clamp(26px,4.4vw,42px); line-height:1.4}
.page-hero .sub{font-weight:700; margin-top:6px; font-size:14.5px}
.page-hero .tana{width:min(28vw,140px); filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.crumbs{font-size:12px; color:var(--ink-soft); padding-block:10px}
.crumbs a{text-decoration:none}

/* ---------- utilities ---------- */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{transition:none; opacity:1; transform:none}}
.totop{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--white); border:0; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s; font-family:var(--font-display); font-weight:700}
.totop.show{opacity:1; pointer-events:auto}
.day,.stop,section[id],.shop-card,.pt{scroll-margin-top:calc(0px + 72px)}
.stop{scroll-margin-top:calc(0px + 132px)}

/* ---------- print / PDF ---------- */
@media print{
  .site-head{position:static}
  .day-tabs,.totop{display:none !important}
  .week .day[hidden]{display:block !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .stop .clock{position:static}
  .card,.pt,.shop-card,.point,.goal,.intro-card,.info,.day-head{break-inside:avoid; page-break-inside:avoid}
  .section-head{break-after:avoid}
}

/* ---------- 推しページ ---------- */
.oshi-hero{background:var(--yellow); overflow:hidden}
.oshi-hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:end; padding-block:clamp(28px,5vw,56px) 0}
.oshi-hero-txt{padding-bottom:clamp(24px,4vw,44px)}
.oshi-hero-kicker{font-weight:700; font-size:clamp(10px,3vw,13px); letter-spacing:.04em; border-bottom:2px solid var(--ink); display:inline-block; width:max-content; max-width:none; white-space:nowrap; padding-bottom:4px; margin-bottom:10px}
.oshi-hero h1{font-size:clamp(30px,5vw,48px); line-height:1.15; font-weight:900; white-space:nowrap}
.oshi-hero h1 .big{font-size:1.85em; line-height:1; display:inline-block; margin-left:.06em; padding:.02em .1em .06em; color:transparent;
  background:linear-gradient(100deg,#FF3FA4 0%,#C34BFF 55%,#7A5CFF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(255,80,190,.75)) drop-shadow(0 0 22px rgba(160,80,255,.55)); -webkit-text-stroke:0; text-shadow:none}
.oshi-hero h1 .big::selection{-webkit-text-fill-color:#fff}
.stamp{border-color:#E23C9A; color:#E23C9A; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 14px rgba(226,60,154,.45)}
.oshi-hero .sub{font-weight:700; font-size:14.5px; line-height:1.9; margin-top:12px; max-width:34em}
.oshi-hero .tana{width:min(36vw,190px); height:auto; align-self:end; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.floor-h{display:flex; align-items:center; gap:12px; font-size:16px; margin:8px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--yellow)}
.floor-h b{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:6px; background:var(--yellow); font-size:17px}
.floor-h span{color:var(--ink-soft); font-weight:700; font-size:14px}
.oshi-floor{margin-bottom:40px}
.oshi-grid{display:grid; gap:18px}
@media (min-width:760px){.oshi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oshi{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid; grid-template-rows:auto 1fr; min-width:0}
.oshi-photo{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sand)}
.oshi-photo .main{width:100%; height:100%; object-fit:cover}
.oshi-photo .tana{position:absolute; left:3%; bottom:0; height:var(--h,66%); width:auto; max-width:40%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 4px 8px rgba(0,0,0,.28)); z-index:2}
.oshi-photo .tana.right{left:auto; right:3%}
.stamp{position:absolute; right:12px; top:12px; z-index:3; width:74px; height:74px; border-radius:50%; border:3px solid var(--red); color:var(--red); display:grid; place-content:center; text-align:center; font-family:var(--font-display); font-weight:700; font-size:10px; line-height:1.1; letter-spacing:.06em; transform:rotate(-10deg); background:rgba(255,255,255,.82)}
.stamp b{display:block; font-size:24px; letter-spacing:.04em; margin-top:1px}
.oshi-body{padding:18px 18px 20px; display:grid; gap:12px; align-content:start; min-width:0}
.oshi-name{font-size:clamp(18px,2.2vw,21px); line-height:1.4}
.oshi-name small{display:block; font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--grey); margin-top:2px}
.oshi-point{font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2vw,20px); line-height:1.55; color:var(--ink); padding:12px 14px; background:var(--yellow-pale); border-left:4px solid var(--yellow); border-radius:0 6px 6px 0}
.oshi-point .q{color:var(--brown); font-size:1.2em; line-height:0; margin:0 .05em}
.oshi-items{font-size:12.5px; color:var(--ink-soft); line-height:1.7}
.oshi-items b{color:var(--brown); font-weight:700; margin-right:.5em}
.oshi .meta{display:grid; gap:2px; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:10px}
.oshi .meta div{display:flex; gap:10px; line-height:1.7}
.oshi .meta dt{flex:none; width:4.5em; color:var(--grey); font-weight:700; font-size:12px}
.oshi .meta dd{min-width:0}
.oshi .links{display:flex; flex-wrap:wrap; gap:8px; padding-top:2px}
@media (max-width:599px){ .oshi-hero .wrap{grid-template-columns:minmax(0,1fr) auto; gap:8px} .oshi-hero .tana{width:24vw} .oshi-hero h1{font-size:6.2vw} .stamp{width:62px;height:62px;font-size:9px} .stamp b{font-size:20px} }

/* ---------- ファーストビューの見出しアニメーション（カラフル版） ---------- */
.hero-copy{position:relative}
.hero h1 .l1{text-shadow:none}
.hero h1 .ch{display:inline-block; opacity:0; transform:translateY(.6em) scale(.5) rotate(-12deg); color:var(--ink);
  -webkit-text-stroke:0;
  text-shadow:0 0 2px #fff, 0 0 8px rgba(255,255,255,.95);
  -webkit-filter:drop-shadow(.07em .07em 0 var(--c,#fff)) drop-shadow(0 0 2px rgba(255,255,255,.9));
  filter:drop-shadow(.07em .07em 0 var(--c,#fff)) drop-shadow(0 0 2px rgba(255,255,255,.9));
  animation:chpop .6s cubic-bezier(.2,1.6,.35,1) forwards, chwave 2.2s ease-in-out infinite; animation-delay:calc(.25s + var(--i) * .06s), calc(2.4s + var(--i) * .08s)}
.hero h1 .ch:nth-child(6n+1){--c:#FF5FA2}.hero h1 .ch:nth-child(6n+2){--c:#FFC53D}.hero h1 .ch:nth-child(6n+3){--c:#4FD1FF}.hero h1 .ch:nth-child(6n+4){--c:#8BE38B}.hero h1 .ch:nth-child(6n+5){--c:#B98CFF}.hero h1 .ch:nth-child(6n+6){--c:#FF8A5B}
@keyframes chpop{60%{opacity:1; transform:translateY(-.12em) scale(1.18) rotate(4deg)} 100%{opacity:1; transform:none}}
@keyframes chwave{0%,100%{transform:translateY(0)} 30%{transform:translateY(-.08em) rotate(-2deg)} 60%{transform:translateY(.02em) rotate(1.5deg)}}
.hero h1 .l2in{display:inline-block; position:relative; opacity:0; transform-origin:30% 70%; -webkit-text-stroke:0;
  filter:drop-shadow(5px 5px 0 var(--ink)) drop-shadow(0 8px 18px rgba(0,0,0,.35));
  animation:slam .7s cubic-bezier(.18,1.35,.3,1) forwards, l2pulse 1.6s ease-in-out infinite; animation-delay:1.1s, 2.4s}
@keyframes l2pulse{0%,100%{transform:scale(1) rotate(-1.5deg)} 50%{transform:scale(1.07) rotate(-1.5deg)}}
.hero h1 .l2fg{position:relative; z-index:1; display:inline-block;
  background:linear-gradient(90deg,#FF5FA2,#FFC53D,#4FD1FF,#B98CFF,#FF5FA2); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:hue 4s linear infinite; animation-delay:1.8s}
.hero h1 .l2bg{position:absolute; left:0; top:0; z-index:0; color:#fff; -webkit-text-fill-color:#fff; -webkit-text-stroke:.16em #fff; paint-order:stroke fill; pointer-events:none; user-select:none}
.hero h1 .l2{-webkit-text-stroke:0; text-shadow:none; color:var(--ink)}
@supports (paint-order:stroke){ .hero h1 .l2{-webkit-text-stroke:0} }
.hero h1 .l2in .maru{position:relative; z-index:1; -webkit-text-fill-color:#FF5FA2; color:#FF5FA2; text-shadow:.05em 0 0 #fff, -.05em 0 0 #fff, 0 .05em 0 #fff, 0 -.05em 0 #fff, .04em .04em 0 #fff, -.04em -.04em 0 #fff, .04em -.04em 0 #fff, -.04em .04em 0 #fff}
@keyframes hue{to{background-position:300% 0}}
@keyframes slam{0%{opacity:0; transform:scale(2.4) rotate(-12deg) translateY(-.1em)} 55%{opacity:1; transform:scale(.92) rotate(2deg)} 75%{transform:scale(1.05) rotate(-1.5deg)} 100%{opacity:1; transform:scale(1) rotate(-1.5deg)}}
.hero h1 .maru{display:inline-block; opacity:0; transform:scale(0); transform-origin:50% 80%; animation:maru .5s cubic-bezier(.2,1.7,.4,1) forwards; animation-delay:1.75s}
@keyframes maru{to{opacity:1; transform:scale(1)}}
@keyframes blink{0%,100%{transform:scale(1)} 50%{transform:scale(1.25)}}
@media (prefers-reduced-motion: reduce){
  .hero h1 .ch,.hero h1 .l2in,.hero h1 .maru{animation:none; opacity:1; transform:none}
}

/* ---------- リール動画 ---------- */
.reel{background:var(--white); padding-block:clamp(28px,4vw,44px)}
.reel .section-head{margin-bottom:14px}
/* 基本：横スワイプ（新しい動画が先頭） */
.reel-stage{position:relative}
.reels{display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 6px; -webkit-overflow-scrolling:touch}
.reels::-webkit-scrollbar{display:none}
.reel-item{flex:0 0 min(78vw, 320px); scroll-snap-align:center; margin:0; display:grid; gap:8px; justify-items:center}
.reel-stage:not(:has(.reel-item:nth-child(2))) .reels{justify-content:center}
.reels.one{justify-content:center}
.reel-frame{display:block; width:100%; height:600px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper)}
.reel-item figcaption{font-size:12.5px; font-weight:700}
.reel-item figcaption a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.swipe-hint{display:none; margin:6px 0 0; text-align:center; font-size:12px; font-weight:700; color:var(--grey)}
.swipe-hint::before{content:"← "}.swipe-hint::after{content:" →"}
.reel-stage:has(.reel-item:nth-child(2)) .swipe-hint{display:block}
/* たなっち＋吹き出し
   位置は「動画枠の上端」を基準に決める（Instagram埋め込みの高さが変わっても指先が動画を指すように）
   基本（スマホ・タブレットで複数本）：吹き出しは動画の上、たなっちは動画の右端に重ねて動画の中を指さす */
.reel-stage{padding-top:78px}
.reel-guide{position:absolute; inset:0; pointer-events:none; z-index:2}
.reel-bubble{pointer-events:auto; position:absolute; top:0; right:10px; background:var(--yellow); border:2px solid var(--ink); border-radius:14px; padding:8px 12px; font-weight:900; font-family:var(--font-display); font-size:12.5px; line-height:1.5; color:var(--ink); text-decoration:none; white-space:nowrap; box-shadow:3px 3px 0 var(--ink); transform:scale(0); transform-origin:85% 100%}
.reel-guide.in .reel-bubble{animation:bpop .7s cubic-bezier(.2,1.7,.4,1) .15s forwards, bfloat 2.6s ease-in-out .9s infinite}
.reel-bubble:hover{animation-play-state:paused}
@keyframes bpop{0%{transform:scale(0) rotate(-12deg)} 60%{transform:scale(1.12) rotate(3deg)} 80%{transform:scale(.96) rotate(-1deg)} 100%{transform:scale(1) rotate(0)}}
@keyframes bfloat{0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-5px) rotate(-1.5deg)} 65%{transform:translateY(2px) rotate(1deg)}}
@media (prefers-reduced-motion: reduce){ .reel-bubble{transform:none} .reel-guide.in .reel-bubble{animation:none} }
/* しっぽ：下向き（たなっちの頭の方へ） */
.reel-bubble::before,.reel-bubble::after{content:""; position:absolute; width:0; height:0; border-style:solid}
.reel-bubble::before{right:26px; bottom:-22px; border-width:22px 12px 0 12px; border-color:var(--ink) transparent transparent transparent}
.reel-bubble::after{right:30px; bottom:-16px; border-width:16px 8px 0 8px; border-color:var(--yellow) transparent transparent transparent}
.reel-tana{position:absolute; top:110px; right:-8px; display:block; height:200px; width:auto; pointer-events:none; -webkit-mask-image:linear-gradient(#000 74%, transparent 100%); mask-image:linear-gradient(#000 74%, transparent 100%); filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.swipe-hint{position:relative; z-index:1}
@media (max-width:359px){ .reel-bubble{font-size:11px; padding:7px 9px} .reel-tana{height:180px; top:104px} }

/* タブレット以上・動画1本：動画の右隣に立ち、指先は動画の中ほど */
@media (min-width:768px){
  .reel-stage:not(:has(.reel-item:nth-child(2))){padding-top:0}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-guide{inset:auto; top:88px; left:calc(50% + 160px + 14px); display:flex; flex-direction:column; align-items:center; gap:14px}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-bubble{position:relative; top:auto; right:auto; transform-origin:50% 100%}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-bubble::before{right:auto; left:50%; margin-left:-12px}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-bubble::after{right:auto; left:50%; margin-left:-8px}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-tana{position:static; height:240px; filter:none}
}
@media (min-width:900px){
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-guide{top:49px; left:calc(50% + 160px + 22px)}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-bubble{font-size:15px; padding:12px 18px}
  .reel-stage:not(:has(.reel-item:nth-child(2))) .reel-tana{height:320px}
}
/* PC・動画2本以上：横一列に並べ、列の右端にたなっち */
@media (min-width:1100px){
  .reel-stage:has(.reel-item:nth-child(2)){display:flex; justify-content:center; align-items:flex-start; gap:0 24px; padding-top:0}
  .reel-stage:has(.reel-item:nth-child(2)) .reels{flex:0 1 auto; flex-wrap:wrap; justify-content:center; gap:16px; overflow:visible; margin:0; padding:0; scroll-snap-type:none}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-item{flex:0 0 250px}
  .reel-stage:has(.reel-item:nth-child(2)) .swipe-hint{display:none}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-guide{position:static; inset:auto; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:14px}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-bubble{position:relative; top:auto; right:auto; font-size:13.5px; padding:10px 14px; transform-origin:50% 100%}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-bubble::before{right:auto; left:50%; margin-left:-12px}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-bubble::after{right:auto; left:50%; margin-left:-8px}
  .reel-stage:has(.reel-item:nth-child(2)) .reel-tana{position:static; height:300px; filter:none}
}

/* ---------- のぼり（砺波店） ---------- */
.hero .nobori{position:absolute; z-index:4; right:max(8px, 2.5vw); bottom:-2px; height:clamp(150px, 38vw, 220px); width:auto; transform-origin:12% 100%; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); animation:nobori-in .8s cubic-bezier(.2,1.5,.4,1) 1.9s both, nobori-sway 3.4s ease-in-out 2.7s infinite}
@keyframes nobori-in{from{opacity:0; transform:translateY(30px) rotate(-8deg)} to{opacity:1; transform:none}}
@keyframes nobori-sway{0%,100%{transform:rotate(0)} 30%{transform:rotate(1.8deg)} 70%{transform:rotate(-1.2deg)}}
@media (min-width:600px){ .hero .nobori{height:clamp(170px, 26vw, 250px); right:max(12px, 2vw)} }
@media (min-width:900px){ .hero .nobori{height:clamp(220px, 19vw, 290px); right:max(16px, 2.5vw)} }
@media (prefers-reduced-motion: reduce){ .hero .nobori{animation:none} }

.stamp.left{right:auto; left:12px}