/* ワイヤー（構成確認用）rev8：Figma「Section 1」(167:1326) の3案を実装。
   冒頭〜コンセプトは scene.css（案03）をそのまま使い、その下のセクションだけをここで組む。 */
:root{--ink2:#2a2a2a;--line:#d9d4cb;--gutter:20px}
/* コンテンツ幅：画面幅から左右20pxずつ引いた幅にサイト全体でそろえる */
.w-menu,.w-access,.w-recruit,.w-about,.w-footer{position:relative;z-index:1;background:var(--paper)}
.w-menu:focus,.w-access:focus,.w-recruit:focus,.w-calendar:focus{outline:none}

/* ===== Menu：3案を html[data-menu] で切り替え ===== */
.w-menu{scroll-margin-top:72px}
.menu-var{display:none}
[data-menu="1"] .menu-1,[data-menu="2"] .menu-2,[data-menu="3"] .menu-3{display:block}
[data-menu="1"] .w-menu{padding:0 var(--gutter)}
.m-red{position:relative;background:var(--red);color:#fff;padding:48px var(--gutter) 40px}
.m1-card{padding-left:24px;padding-right:24px}
.m-title{display:flex;align-items:center;gap:16px;margin:0;font:400 32px/1 'Music Newsreader',Georgia,serif;letter-spacing:-.64px;color:#fff}
.m-title small{font:500 12px/1 'Noto Sans JP',sans-serif;letter-spacing:1.7px}
.m-tax{margin:0;font-size:11px;line-height:1.4}
.mp-panel{padding:0 2px 14px 0}
.mp-rows{margin:0}
.mp-rows>div{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:11px 0;border-bottom:1px solid #fff;font-size:14px;line-height:1.3}
.mp-rows dt small{display:block;margin-top:2px;font-size:10px}
.mp-rows dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-note{margin:0;font-size:11px;line-height:1.4}
.mp-note:first-of-type{margin-top:8px}
.mp-panel h4{margin:18px 0 0;font:400 16px/1.2 'Music Newsreader',Georgia,serif}
.mp-panel h4:first-child{margin-top:0}
/* 案1：横並びタブ・詳細あり（赤いカードを左右20px内側に） */
.m1-body{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.m1-tabs{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between}
.m1-tab{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 10px;background:none;color:#fff;font-size:12px;letter-spacing:.3px}
.m1-tab:nth-child(3n+1){padding-left:2px}
.m1-chev{display:block;width:6px;height:4px;transition:transform .3s var(--ease)}
.m1-tab[aria-expanded=true] .m1-chev{transform:rotate(180deg)}
.m1-line{width:100%;height:0;margin:0;border:0;border-top:1px solid #fff}
.m1-body .mp-panel{margin-top:-4px}
.m1-body .mp-rows>div{border-bottom:0}
/* 案2：縦並び・詳細あり */
.menu-2 .m-title{margin-bottom:20px}
.m2-list{border-top:1px solid #fff}
.m2-row{border-bottom:.6px solid #fff}
.m2-item{display:flex;align-items:center;gap:10px;width:100%;padding:16px 2px;background:none;color:#fff;text-align:left}
.m2-en{font:400 20px/1.2 'Music Newsreader',Georgia,serif}
.m2-ja{flex:1;font-size:11px;letter-spacing:.9px}
.m2-plus{position:relative;width:11px;height:11px;flex:none;transition:transform .3s var(--ease)}
.m2-plus::before,.m2-plus::after{content:'';position:absolute;background:#fff}
.m2-plus::before{left:0;top:5px;width:11px;height:1px}
.m2-plus::after{left:5px;top:0;width:1px;height:11px}
.m2-item[aria-expanded=true] .m2-plus{transform:rotate(45deg)}
.m2-row .mp-panel{padding-left:14px}
.m2-row .mp-rows>div{border-bottom:0}
.menu-2 .m-tax{margin-top:20px}
/* 案3：縦並び・料金表示・詳細なし */
.menu-3 .m-title{margin-bottom:20px}
.m3-list{margin:0;border-top:.6px solid #fff}
.m3-list>div{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 2px}
.m3-list dt{font-size:11px;letter-spacing:.9px}
.m3-list dd{margin:0;font:500 17px/1 'Music Newsreader',Georgia,serif;font-variant-numeric:tabular-nums}
.menu-3 .m-tax{margin-top:20px}

/* 比較用の切り替え（案1〜3） */
.menu-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;padding:8px;background:#fbf7e6;border:1px dashed #c9a227}
[data-menu="2"] .menu-switch,[data-menu="3"] .menu-switch{margin:16px var(--gutter)}
html:not(.notes) .menu-switch{display:none}
.menu-switch span{margin-right:4px;color:#5f5130;font-size:11px}
.menu-switch button{min-height:36px;padding:0 14px;border:1px solid #c9a227;background:#fff;color:#5f5130;font-size:12px;border-radius:18px}
.menu-switch button[aria-pressed=true]{background:#5f5130;border-color:#5f5130;color:#fff}
[data-menu="1"] .menu-switch{margin:16px 0}

/* ===== Access ===== */
.w-access{display:flex;flex-direction:column;align-items:center;gap:24px;padding:64px var(--gutter) 56px;border-top:1px solid #ece8e1;scroll-margin-top:0;color:var(--ink2)}
.a-title{display:flex;flex-direction:column;gap:10px;margin:0;color:var(--red);font:400 40px/1 'Music Newsreader',Georgia,serif;letter-spacing:-.8px}
.a-title small{color:#333330;font:500 12px/1 'Noto Sans JP',sans-serif;letter-spacing:1.7px}
.a-card{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;padding:20px 0;background:#f7f4f3}
.a-holidays{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc(100% - 68px);padding:16px 18px;background:#fff}
.a-hol-head{display:flex;align-items:center;gap:8px;margin:0}
.a-hol-head img{display:block}
.a-hol-head b{color:var(--red);font-size:14px;font-weight:500;letter-spacing:1.8px;line-height:1}
.w-holidays-dates{margin:0;font-size:16px;font-variant-numeric:tabular-nums}
.w-calendar{width:100%;scroll-margin-top:96px}
.w-cal-head{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 24px}
.w-cal-head h3{margin:0;font:500 20px/1 'Music Newsreader',Georgia,serif}
.w-cal-head button{width:44px;height:44px;margin:0 -14px;background:none;color:var(--ink2);font-size:16px}
.w-cal-grid{padding:0 10px}
.w-cal-grid table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
.w-cal-grid th{height:30px;padding:0;font-size:11px;font-weight:500}
.w-cal-grid td{height:38px;padding:0}
.w-day{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;font-variant-numeric:tabular-nums}
.w-day.closed{background:var(--red);color:#fff}
.w-day.extra{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.w-day[aria-current=date]{text-decoration:underline;text-underline-offset:3px}
.w-legend{display:flex;gap:18px;margin:0;padding:10px 0 0 10px;font-size:11px}
.w-legend span{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot.regular{background:var(--red)}.dot.extra{box-shadow:inset 0 0 0 1.5px var(--red)}
.w-cal-extra{margin:8px 0 0 10px;font-size:12px;color:var(--red)}.w-cal-extra:empty{display:none}
.a-store{display:flex;flex-direction:column;gap:14px;width:100%}
.a-store-name{margin:0;font:400 20px/1 'Music Newsreader',Georgia,serif;letter-spacing:.8px}
.a-store address{font-style:normal;font-size:14px;line-height:26.6px}
.a-facts{display:flex;flex-direction:column;gap:14px;margin:0}
.a-facts>div{display:flex;gap:12px}
.a-facts dt{flex:none;width:64px;font-size:12px;line-height:24px}
.a-facts dd{margin:0;font-size:14px;line-height:26.6px}
.a-hours{display:grid;grid-template-columns:auto auto;gap:0 16px;font-variant-numeric:tabular-nums}
.a-phone{display:inline-block;color:var(--red);font:500 24px/1.2 'Music Newsreader',Georgia,serif;text-decoration:none}
.a-facts small{display:block;font-size:11px;line-height:1.4}
.a-map-block{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.a-map{width:100%;height:220px;background:#f4f2ee}
.a-map iframe{display:block;width:100%;height:100%;border:0}
.a-maplink{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);font-size:13px;text-decoration:none}

/* ===== Recruit：写真カード＋白い丸の矢印 ===== */
.w-recruit{display:flex;justify-content:center;padding:24px var(--gutter) 42px;scroll-margin-top:72px}
.wr-card{position:relative;display:block;width:100%;aspect-ratio:350/222;overflow:hidden;color:#fff;text-decoration:none}
.wr-photo{position:absolute;left:-14.99%;top:-10.81%;width:132%;height:116.67%;max-width:none;object-fit:cover;transition:transform .8s var(--ease)}
.wr-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,22,18,.4),rgba(30,22,18,.2))}
.wr-card:hover .wr-photo{transform:scale(1.03)}
.wr-text{position:absolute;left:20px;top:46px;display:flex;flex-direction:column;gap:8px}
.wr-en{font:400 40px/1 'Music Newsreader',Georgia,serif;letter-spacing:.4px}
.wr-ja{font-size:11px;font-weight:500;letter-spacing:1.2px}
.wr-arrow{position:absolute;right:21px;bottom:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--red);font-size:16px;font-weight:500}
.w-recruit .slot-tag{position:absolute;right:8px;top:8px}

/* ===== この画面について ===== */
.w-about{margin:0;padding:40px var(--gutter);background:#f6f4f0}
.w-about h2{margin:0 0 12px;font-size:14px;font-weight:500}
.w-about ul{margin:0;padding-left:1.2em;font-size:12px;line-height:1.9;color:#5f5952}

/* ===== Footer：赤地に白文字 ===== */
.w-footer{display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px var(--gutter) calc(92px + env(safe-area-inset-bottom,0px));background:var(--red);color:#fff;text-align:center}
.w-footer a{color:#fff;text-decoration:none}
.wf-logo img{display:block;width:120px}
.wf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.wf-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:400 16px 'Music Newsreader',Georgia,serif;letter-spacing:.04em}
.wf-sns{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.wf-sns a{display:grid;place-items:center;width:44px;height:44px}
.wf-sns svg{width:20px;height:20px}
.wf-info{margin:0;font-size:12px;line-height:1.9;opacity:.9}
.w-footer small{font-size:10px;opacity:.8}

/* ===== 構成確認用の注記（?notes=0 で消える） ===== */
.slot-tag,.wire-note{display:none}
html:not(.notes) .wire-only{display:none}
.notes .wire-note{display:block;margin:14px 0 0;padding:10px 12px;border-left:2px solid #c9a227;background:#fbf7e6;color:#5f5130;font-size:11px;line-height:1.8}
.notes .w-access>.wire-note{margin:0;width:100%}
.notes .wire-note a{color:inherit}
.notes .m-wn{margin-top:20px}
.notes .slot-tag{display:block;margin:0;padding:6px 9px;background:rgba(40,36,32,.72);color:#fff;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.06em;pointer-events:none}
.slot-tag small{display:block;font-size:10px;font-weight:400;opacity:.85}
.slot-hero{position:absolute;z-index:4;right:12px;bottom:84px;max-width:210px}

/* rev14：赤の比較（?red=0|1|2|3）。0＝看板の赤。色相はそのまま、明るさと鮮やかさだけを段階的に下げる（OKLCH h≈24〜28）。 */
html[data-red="1"]{--red:#d42130}
html[data-red="2"]{--red:#c32831}
html[data-red="3"]{--red:#b32d32}
.red-switch{display:none}
.notes .red-switch{position:fixed;z-index:21;right:6px;top:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:#fbf7e6;border:1px dashed #c9a227;border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.red-switch span{color:#5f5130;font-size:10px;line-height:1}
.red-switch button{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #fff;color:#fff;font-size:11px;font-weight:500;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.red-switch button[data-red="0"]{background:#e60012}.red-switch button[data-red="1"]{background:#d42130}.red-switch button[data-red="2"]{background:#c32831}.red-switch button[data-red="3"]{background:#b32d32}
.red-switch button[aria-pressed=true]{box-shadow:0 0 0 2px #5f5130}
.red-hex{color:#5f5130;font-size:8px;letter-spacing:0;writing-mode:vertical-rl}

/* rev15：メニューの説明を赤い枠の外（すぐ下）へ。上向きの三角で、どの枠の説明かを示す */
.notes .m-wn{position:relative;margin:14px 0 8px;border:1px solid #c9a227;border-left-width:1px}
.notes .m-wn::before,.notes .m-wn::after{content:'';position:absolute;left:24px;border:8px solid transparent;border-top:0}
.notes .m-wn::before{top:-8px;border-bottom-color:#c9a227}
.notes .m-wn::after{top:-6.5px;border-bottom-color:#fbf7e6}
.notes .menu-2>.m-wn,.notes .menu-3>.m-wn{margin-left:var(--gutter);margin-right:var(--gutter)}
.m-wn-head{display:block;margin-bottom:2px}

/* rev17：写真ページ（photos.html）への導線。注記表示時のみ */
.notes .w-photo-link{display:flex;align-items:center;gap:6px;margin-top:16px;min-height:48px;text-decoration:none;font-size:12px}
.w-photo-link b{font-weight:500}
.w-photo-link .wpl-arrow{margin-left:auto;padding-left:8px}
.w-recruit{flex-direction:column}

/* rev18：オープニング〜FV（案03）の比較。赤い幕（op-veil）と、円い穴の幕（op-hole） */
.op-veil,.op-hole{display:none}
.js:not(.ready) .op-veil{display:block;position:fixed;inset:0;z-index:19;background:var(--red);pointer-events:none}
.js:not(.ready) .op-hole{display:block;position:fixed;z-index:19;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 200vmax var(--red);pointer-events:none;opacity:0}
.js.motion-started:not(.ready) .op-hole{opacity:1}
html:not([data-op="b"]) .op-hole{display:none!important}
.op-switch{display:none}
.notes .op-switch{position:fixed;z-index:16;right:6px;top:340px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:#fbf7e6;border:1px dashed #c9a227;border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.op-switch span{color:#5f5130;font-size:10px;line-height:1}
.op-switch button{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #c9a227;background:#fff;color:#5f5130;font-size:11px;font-weight:500}
.op-switch button[aria-pressed=true]{background:#5f5130;border-color:#5f5130;color:#fff}

/* rev20：赤の切替をオープニング中も押せるように（幕より上）。▶で、選んだ赤のままオープニングを再生 */
.red-switch .red-replay{margin-top:2px;background:#fff;color:#5f5130;border:1px solid #c9a227;box-shadow:none;font-size:10px}

/* rev21：アンケート（赤・メニュー・構成）。注記表示時のみ（?notes=0 で消える）。選ぶと画面が切り替わる */
.w-answer{position:relative;z-index:1;display:flex;flex-direction:column;gap:28px;padding:56px var(--gutter) 64px;background:#fbf7e6;border-top:1px dashed #c9a227;color:#3f3622}
.an-title{display:flex;flex-direction:column;gap:8px;margin:0;font:500 22px/1.3 'Noto Sans JP',sans-serif;letter-spacing:.04em}
.an-title small{font-size:12px;font-weight:400;letter-spacing:.1em;color:#6d5f3c}
.an-lead,.an-help{margin:0;font-size:13px;line-height:1.8}
.an-help{color:#6d5f3c}.an-help a{color:inherit}
.an-q{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;min-width:0}
.an-q legend{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0;font-size:17px;font-weight:500}
.an-no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#5f5130;color:#fff;font-size:14px}
.an-opts{display:flex;flex-direction:column;gap:8px}
.an-opts label{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;background:#fff;border:1px solid #e3d6ac;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer}
.an-opts label:has(input:checked){border:2px solid #5f5130;padding:9px 13px}
.an-opts input{flex:none;width:20px;height:20px;margin:0;accent-color:#5f5130}
.an-opts small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:#6d5f3c;line-height:1.5}
.an-sw{flex:none;width:28px;height:28px;border-radius:50%}
.an-other{font-weight:400!important}
.an-flow{margin:0;padding:12px 14px 12px 34px;background:#fff;border-radius:10px;font-size:13px;line-height:2}
.an-text{display:flex;flex-direction:column;gap:6px;font-size:13px}
.an-text textarea,.an-fallback{width:100%;padding:10px 12px;border:1px solid #d9c98f;border-radius:8px;background:#fff;color:#333;font:16px/1.6 'Noto Sans JP',sans-serif}
.an-copy{min-height:56px;border-radius:28px;background:#5f5130;color:#fff;font-size:16px;font-weight:500;letter-spacing:.06em}
.an-status{margin:-14px 0 0;font-size:13px;text-align:center}.an-status:empty{display:none}

/* rev22：アンケートをフッターの下へ。画面下の予約バーに隠れないよう、下の余白はアンケート側で取る */
.notes .w-footer{padding-bottom:48px}
.w-answer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}

.an-note{margin-top:-4px;font-size:12px}

/* rev24：画面下のバーをページの最後まで表示（body直下へ移動）。赤いフッターの上でも「予約する」が見えるよう、白い細い縁を付ける */
/* rev54：白い縁は、赤い面（メニュー・フッター）の上に来たときだけ（wire.js が .on-red をつける） */
[data-variant="3"] .hero-visit .phone{box-shadow:0 0 0 1px rgba(255,255,255,0);transition:box-shadow .3s}
[data-variant="3"] .hero-visit.on-red .phone{box-shadow:0 0 0 1px rgba(255,255,255,.85)}

/* ===== rev26：スマホのサイズを整える（参考サイトの実測と、Apple・Google・WCAG のタップ基準から） =====
   ルール：押せるものは高さ44px以上／情報として読む文字は12px以上（© のみ11px）／本文は14px・行間2.0 */
/* 画面下の「お休み・予約する」：36px → 44px */
[data-variant="3"] .hero-visit.visit-bar{height:44px}
[data-variant="3"] .hero-visit .holidays{min-height:44px;height:44px}
[data-variant="3"] .hero-visit .phone{width:112px;min-height:44px;height:44px}
[data-variant="3"] .hero-visit .phone b{font-size:14px}
/* コンセプト本文：13px・行間1.6 → 14px・行間2.0 */
[data-variant="3"] .concept-copy{font-size:14px;line-height:2;letter-spacing:1.4px}
/* 小さすぎた文字：11px → 12px */
.m2-ja,.m-tax,.w-legend,.a-facts small,.wr-ja{font-size:12px}
/* 地図のリンク：押せる高さを44pxに */
.a-maplink{min-height:44px;font-size:14px}
/* フッター：上の余白を広げ、住所・電話を読みやすく。電話は押せる高さに */
.w-footer{padding-top:64px}
.wf-info{font-size:13px}
.wf-info a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;letter-spacing:.04em}
.w-footer small{font-size:11px}

/* rev27：アクセスのカレンダーを一回り小さく（全体で約60px低く）。
   日付のマスは押す場所ではないので44pxの基準の対象外。赤い丸の面積を減らして、重たく見えないようにする */
.w-holidays-dates{font-size:14px;letter-spacing:.02em}
.a-holidays{padding:14px 16px;gap:6px}
.a-card{gap:16px;padding:16px 0}
.w-cal-head{height:40px}
.w-cal-head h3{font-size:18px}
.w-cal-grid th{height:26px;font-size:12px}
.w-cal-grid td{height:34px}
.w-day{width:26px;height:26px;font-size:12px}

/* rev28：メニューとアクセスの間に「写真の帯」（参考：jin-din-rou.net の3枚並び）。細い｜広い｜中くらい の3枚を端から端まで。?band=0 でなし */
.w-band{position:relative;z-index:1;display:grid;grid-template-columns:24fr 48fr 28fr;gap:2px;height:220px;margin:0;background:var(--paper)}
.wb-photo{overflow:hidden;min-width:0}
.wb-photo img{display:block;width:100%;height:100%;object-fit:cover}
.wb-a img{object-position:32% 50%}
.wb-b img{object-position:56% 45%}
.wb-c img{object-position:44% 50%}
[data-band="0"] .w-band{display:none}
.w-band .slot-band{position:absolute;right:8px;bottom:8px;max-width:230px}
.band-switch{display:none}
.notes .band-switch{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin:0;padding:8px var(--gutter);background:#fbf7e6;border-top:1px dashed #c9a227;font-size:11px;color:#5f5130}
.band-switch button{min-height:32px;padding:0 14px;border:1px solid #c9a227;background:#fff;color:#5f5130;font-size:12px;border-radius:16px}
.band-switch button[aria-pressed=true]{background:#5f5130;border-color:#5f5130;color:#fff}

/* rev29：写真の帯は「あり」で確定（切替を外した）。画像とセクションに動きを付ける（動きを減らす設定では止める） */
.wb-photo img{height:118%;margin-top:-9%;will-change:transform}
.js .reveal-pending{opacity:0;transform:translateY(16px)}
.js .wb-photo.reveal-pending{opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.js .wr-card.reveal-pending{opacity:0;transform:none;clip-path:inset(0 0 100% 0)}
@media (prefers-reduced-motion:reduce){.js .reveal-pending{opacity:1!important;transform:none!important;clip-path:none!important}.wb-photo img{height:100%;margin-top:0}}

/* rev30：写真の帯を「帯ごと横に流れる」形に。3枚を2組つなげ、右から左へゆっくりループ（1周48秒）。
   コンセプトの「360°＝途切れず巡る」「音楽のように流れ続ける」に合わせる。画面外では止め、動きを減らす設定では止まった帯になる */
.w-band{display:block;overflow:hidden;height:220px}
.wb-track{display:flex;width:max-content;height:100%;animation:band-flow 48s linear infinite}
.wb-set{display:flex;height:100%}
.wb-set .wb-photo{height:100%;margin-right:2px}
.wb-set .wb-a{width:150px}.wb-set .wb-b{width:300px}.wb-set .wb-c{width:200px}
.wb-photo img{height:100%;margin-top:0;will-change:auto}
.w-band.is-offscreen .wb-track,.w-band.is-revealing .wb-track{animation-play-state:paused}
@keyframes band-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.wb-track{animation:none}}

/* rev31：参考サイト（jin-din-rou.net）と同じ比率に。1組3枚で画面幅ちょうど（390pxで 77｜194｜119px、約20:50:30）、
   高さは横幅の1/3（約130px）。すき間の白線をなくして、写真を全部つなげる */
.w-band{height:calc(100vw / 3)}
.wb-set .wb-photo{margin-right:0}
.wb-set .wb-a{width:calc(100vw * .197)}
.wb-set .wb-b{width:calc(100vw * .497)}
.wb-set .wb-c{width:calc(100vw * .306)}

/* rev32：3枚とも同じ横幅（画面幅の1/3）に。写真はカット／ヘッドスパ／ヘアケア商品 */
.wb-set .wb-a,.wb-set .wb-b,.wb-set .wb-c{width:calc(100vw / 3)}
.wb-a img{object-position:35% 45%}
.wb-b img{object-position:55% 45%}
.wb-c img{object-position:42% 50%}

/* rev33：参考サイト（jin-din-rou.net）の実測に合わせる。
   スマホ幅390pxで、写真1枚＝240×160px（3:2・同じ幅・すき間なし）が横に並んで流れる。画面には約1.6枚が見える。
   PC幅1512pxでは 682×455px（同じ3:2）。スクショで「20:50:30」に見えたのは、流れている途中の一瞬の切れ方 */
.w-band{height:calc(100vw * 160 / 390)}
.wb-set .wb-a,.wb-set .wb-b,.wb-set .wb-c{width:calc(100vw * 240 / 390)}

/* ===== rev36：ハンバーガーメニューを全画面の赤に =====
   確定の赤の面に白い文字。右上の閉じるボタンは、開くボタンと同じ位置・大きさ（44px）の白い丸。
   案03の「半透明の円」を背景に大きく置き、項目は順にふわっと出る。下にお休み・電話・住所・SNS */
dialog.sm{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;overflow:hidden auto;background:var(--red);color:#fff;display:none;flex-direction:column}
dialog.sm[open]{display:flex;animation:sm-in .45s cubic-bezier(.22,1,.36,1) both}
dialog.sm::backdrop{background:transparent}
@keyframes sm-in{from{opacity:0}to{opacity:1}}
.sm-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px 0 20px;padding-top:env(safe-area-inset-top,0px)}
.sm-logo img{display:block;height:17px;width:auto}
.sm-close{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--red);min-height:0;padding:0}
.sm-close span{position:absolute;left:13px;top:21px;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.sm-close span+span{transform:rotate(-45deg)}
.sm-ring{position:absolute;z-index:0;right:-42vw;top:18%;width:110vw;height:110vw;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none}
.sm-nav{position:relative;z-index:1;display:flex;flex-direction:column;padding:28px 32px 0}
.sm-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:68px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none}
.sm-en{font:400 36px/1 'Music Newsreader',Georgia,serif;letter-spacing:-.4px}
.sm-ja{font-size:12px;letter-spacing:.14em;opacity:.85}
.sm-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;margin-top:auto;padding:32px 32px calc(28px + env(safe-area-inset-bottom,0px))}
.sm-hol{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:13px;letter-spacing:.06em}
.sm-hol-label{font-weight:500}
.sm-hol-days{font-variant-numeric:tabular-nums}
.sm-tel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;border-radius:30px;background:#fff;color:var(--red);text-decoration:none}
.sm-tel-label{font-size:11px;letter-spacing:.14em}
.sm-tel-num{font:500 20px/1.1 'Music Newsreader',Georgia,serif;letter-spacing:.06em}
.sm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sm-addr{margin:0;font-size:12px;line-height:1.7;opacity:.9}
.sm-sns{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.sm-sns a{display:grid;place-items:center;width:44px;height:44px;color:#fff}
.sm-sns svg{width:20px;height:20px}
/* 項目が順に出る */
dialog.sm[open] .sm-nav a,dialog.sm[open] .sm-info>*{animation:sm-up .6s cubic-bezier(.22,1,.36,1) both}
dialog.sm[open] .sm-nav a:nth-child(1){animation-delay:.08s}dialog.sm[open] .sm-nav a:nth-child(2){animation-delay:.14s}
dialog.sm[open] .sm-nav a:nth-child(3){animation-delay:.2s}dialog.sm[open] .sm-nav a:nth-child(4){animation-delay:.26s}
dialog.sm[open] .sm-info>*:nth-child(1){animation-delay:.32s}dialog.sm[open] .sm-info>*:nth-child(2){animation-delay:.38s}dialog.sm[open] .sm-info>*:nth-child(3){animation-delay:.44s}
dialog.sm[open] .sm-ring{animation:sm-ring .9s cubic-bezier(.22,1,.36,1) both}
@keyframes sm-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sm-ring{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.sm[open],dialog.sm[open] *{animation:none!important}}
@media (max-height:700px){.sm-nav a{min-height:56px;padding:10px 0}.sm-en{font-size:30px}.sm-nav{padding-top:12px}}
/* 閉じるボタンを、開くボタンとぴったり同じ位置に（scene.css の .dialog-close の位置指定を上書き） */
.sm-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:16px}
/* rev37：背景の円の線を外し、面だけのやわらかい円に（トップの半透明の円と同じ扱い）。今月のお休みは下のボタンに合わせて中央ぞろえ */
.sm-ring{box-shadow:none;background:rgba(255,255,255,.08)}
.sm-hol{justify-content:center;text-align:center}
/* rev38：予約ボタンの電話番号の左に電話アイコン */
.sm-tel-num{display:inline-flex;align-items:center;gap:8px}
.sm-tel-icon{width:17px;height:17px;flex:none}

/* ===== rev39：文字のルールを整理（全体で7段階・英字と日本語の書体を分ける） =====
   英字 = Music Newsreader（セリフ）／日本語 = Noto Sans JP（ゴシック）。日本語に明朝（Serif）は使わない
   36 セクション見出し（英）  28 メニュー画面の項目（英）  20 一覧の項目・店名・電話番号（英・数字）
   16 小見出し（英）          14 本文（日）                12 添え字・注記（日）   11 コピーライト
   字間：英字の見出し -0.01em／日本語の本文 0.1em／日本語の添え字 0.14em */
:root{--fs-display:36px;--fs-nav:28px;--fs-item:20px;--fs-sub:16px;--fs-body:14px;--fs-label:12px;--fs-legal:11px;
  --ff-en:'Music Newsreader',Georgia,serif;--ff-ja:'Noto Sans JP',sans-serif}
/* 36：セクション見出し（Menu 32・Access 40・Recruit 40 → そろえる） */
.m-title,.a-title,.wr-en{font-size:var(--fs-display);letter-spacing:-.01em}
/* 28：メニュー画面の項目（36 → 28） */
.sm-en{font-size:var(--fs-nav);letter-spacing:-.01em}
.sm-nav a{min-height:60px;padding:12px 0}
/* 20：一覧の項目・店名・電話番号 */
.m2-en,.a-store-name,.sm-tel-num{font-size:var(--fs-item)}
.a-phone{font-size:22px}
/* 16：小見出し・フッターのナビ */
.w-cal-head h3,.wf-nav a{font-size:var(--fs-sub)}
/* 日本語はすべてゴシック。メニュー画面の日本語の添え字がセリフ（明朝ふう）で表示されていたのを直す */
.sm-ja,.m-title small,.a-title small,.m2-ja,.wr-ja{font-family:var(--ff-ja);font-size:var(--fs-label);letter-spacing:.14em;font-weight:400}
/* 段階の外にあった文字を寄せる：13px → 14（本文）、11px の添え字 → 12、電話番号 22 → 20 */
.sm-hol,.wf-info{font-size:var(--fs-body)}
.sm-tel-label{font-size:var(--fs-label)}
.a-phone{font-size:var(--fs-item)}
/* rev40：メニュー一覧の区切り線（いちばん上以外）を、メニュー画面と同じ「白28%・1px」に。いちばん上の線は白のまま */
.m2-row{border-bottom:1px solid rgba(255,255,255,.28)}
/* rev41：Menu見出しの下の白い線を削除（メニュー画面と同じく、項目の下の線だけで区切る）。見出しと一覧のあいだは余白で分ける */
.m2-list{border-top:0}
.menu-2 .m-title{margin-bottom:12px}

/* ===== rev45：左上ロゴ =====
   大きさは今のまま（92×20）で確定（rev44 の比較で A）。
   ロゴの右に「HAIR & MAKE」を添える案を比較（?sub=a|b|c・注記表示時は左の切替）。参考：companycoc.com のヘッダー
   A なし／B 2行。2行の高さ＝ロゴの高さ（COC と同じ比率）／C 1行・12px（読める最小の大きさ） */
[data-variant="3"] .brand img{width:100%;height:100%}
.brand-sub{display:flex;flex-direction:column;justify-content:space-between;top:3.6px;height:17px;font-size:8px;line-height:1;letter-spacing:.16em;position:absolute;left:calc(100% + 12px);color:var(--red);font-family:var(--ff-ja);font-weight:500;white-space:nowrap;pointer-events:none}

/* ===== rev46：文字の位置を実測でそろえる =====
   ロゴ横の添え字：箱（line-height）ではなく、文字の実際の形（インク）でロゴにそろえる。
   ロゴ「M」の上端＝ロゴの箱の上から4.75px、ベースライン＝下端から0.5px上。
   Noto Sans JP は line-height:1 のとき、箱の上下に 0.14em ずつ余白がある。
   B：1行目の大文字の上端＝Mの上端、2行目のベースライン＝ロゴのベースライン（9pxだと2行の間が詰まるため8px）
   C：ベースライン＝ロゴのベースライン */
/* メニュー画面：行の高さ60pxに対し、文字が上に寄っていた（上14px・下27px）。
   英字の大文字（高さ約19px）が行の上下中央に来るよう、上の余白を増やして下を減らす。日本語は英字とベースラインをそろえたまま */
.sm-nav a{padding:18px 0 14px}

/* rev47：添え字は B（2行・8px・Mの上端〜ロゴのベースライン）で確定。切替と A・C を削除 */

/* ===== rev48 =====
   ③ 求人カード：幕が開く出方をやめ、ふわっと現れる（wire.js）。待機中は透明にしておく */
.js .wr-card.reveal-pending{opacity:0;clip-path:none}
/* ⑥ メニュー：＋は、開くと縦の線が寝て「−」になる（今までは×） */
.m2-item[aria-expanded=true] .m2-plus{transform:none}
.m2-plus::after{transition:transform .42s cubic-bezier(.22,1,.36,1)}
.m2-item[aria-expanded=true] .m2-plus::after{transform:rotate(90deg)}

/* ===== rev49 =====
   ①開幕・⑤フッターは今のまま（A）で確定し、比較を外した。
   ② 画面下のお休み：流す表示をやめ、止めて出す（B＝次の1日／C＝この先3日） */
.holidays>.holiday-window{display:none!important}
.holiday-next{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:12px}
.holiday-next b{color:var(--red);font-weight:500;letter-spacing:.06em;flex:none}
.holiday-next span{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.holiday-next{gap:6px}
.holiday-next span{letter-spacing:0}
.holiday-next small{font-size:12px;margin-left:1px;color:var(--ink);opacity:.75}
.holiday-next i{font-style:normal;margin:0 -1px;opacity:.6}
/* rev50：お休みの表示は C（この先3日）で確定。比較の切替を削除 */

/* rev56：オープニングから写真へ切り替わる間、写真の上端に1pxの赤い線（案01の赤い面の名残り .red-plane）が見えていた。案03では使わないので消す */
[data-variant="3"] .red-plane{display:none}

/* rev57：メニュー画面を開くと、最初のリンク（左上のロゴ）に自動でフォーカスが当たり、四角い枠が出ていた。
   開いたときは画面全体（dialog）にフォーカスを置く（scene.js）。dialog 自体には枠を出さない。キーボードで Tab を押せば各リンクに枠が出る */
dialog.sm:focus{outline:none}

/* ===== rev58：お休みの2か月表示（?cal=a|b|c）===== */
/* A・B：矢印の見出しは使わない（月ごとに見出しを持つ） */
.w-calendar[data-mode="a"] .w-cal-head,.w-calendar[data-mode="b"] .w-cal-head{display:none}
.w-cal-block{background:#fff;padding:12px 8px 8px}
.w-cal-block-title{margin:0 0 4px;text-align:center;font:500 var(--fs-sub)/1.6 'Music Newsreader',Georgia,serif;letter-spacing:.02em}
.w-cal-block table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
/* A：横に並べて、次の月を見切れさせる */
.w-calendar[data-mode="a"] .w-cal-grid{padding:0}
.w-calendar[data-mode="a"] .w-cal-months{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.w-calendar[data-mode="a"] .w-cal-months::-webkit-scrollbar{display:none}
.w-calendar[data-mode="a"] .w-cal-block{flex:0 0 82%;scroll-snap-align:start}
.w-cal-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.w-cal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(51,51,48,.2);transition:background .3s}
.w-cal-dots i.on{background:var(--red)}
/* B：縦に並べる */
.w-calendar[data-mode="b"] .w-cal-months{display:grid;gap:12px}
/* C：白い箱に2か月分 */
.a-holidays.two{align-items:stretch;gap:4px}
.a-holidays.two .a-hol-head{justify-content:center;margin-bottom:2px}
.a-hol-row{display:flex;gap:12px;align-items:baseline;margin:0}
.a-hol-row b{flex:none;width:3em;color:var(--red);font-weight:500;font-size:var(--fs-label);letter-spacing:.1em}
.a-hol-row .w-holidays-dates{font-size:var(--fs-body)}
/* メニュー画面：2か月分を2行で */
.sm-hol{flex-direction:column;align-items:center;gap:2px}
.sm-hol-row{display:flex;gap:12px;align-items:baseline}

/* ===== rev59 =====
   カレンダーA・B：白い箱（今月のお休み）はカレンダーと重なるので出さない。Cだけ白い箱に2か月分 */
[data-cal="a"] .a-holidays,[data-cal="b"] .a-holidays{display:none}
[data-cal="a"] .w-calendar,[data-cal="b"] .w-calendar{margin-top:4px}
/* 画面下のお休み：押せると分かる印「›」。A＝日付の右／B＝上下2段／C＝「お休みカレンダー ›」だけ */
.hol-go{flex:none;font-style:normal;color:var(--red);font-size:18px;line-height:1;margin-left:2px}
.visit-bar .holiday-next b{font-size:13px;letter-spacing:.1em}

/* rev61：画面下のお休みの文字は、A・B・C すべて中央ぞろえ（アイコンと「›」の間の中央） */
.visit-bar .holiday-next{justify-content:center;text-align:center}
/* rev62：画面下のお休みは「お休みカレンダー ›」で確定。カレンダー C の矢印は、端（今月・再来月）で薄くして押せなくする */
.w-cal-head button:disabled{opacity:.25;cursor:default}

/* ===== rev63 =====
   画面下のお休み：アイコンを文字のすぐ左に置き、アイコン＋文字のまとまりをボタンの中央に。「›」は右端に固定（どの幅でも中央がずれない） */
[data-variant="3"] .hero-visit .holidays{position:relative;justify-content:center;gap:8px;padding:0 28px}
.visit-bar .holidays>.pill-calendar{flex:none}
.visit-bar .holiday-next{flex:0 1 auto;min-width:0}
.visit-bar .hol-go{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0}
/* カレンダーの3案の説明（比較として開いたとき・注記表示のときだけ） */
.cal-note{display:none}
.cal-compare .cal-note{display:block;width:100%;margin:0 0 16px;padding:14px 14px 12px;border:1px dashed #c9a227;background:#fbf7e6;color:#5f5130}
.cal-note-head{margin:0;font-size:var(--fs-body);font-weight:500;letter-spacing:.08em;line-height:1.6}
.cal-note-head small{display:block;font-size:var(--fs-label);font-weight:400;letter-spacing:.06em}
.cal-note-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 0}
.cal-note-tabs button{min-height:44px;border:1px solid #c9a227;border-radius:2px;background:#fff;color:#5f5130;font:400 var(--fs-sub) 'Music Newsreader',Georgia,serif}
.cal-note-tabs button[aria-pressed=true]{background:#5f5130;border-color:#5f5130;color:#fff}
.cal-note-title{margin:12px 0 4px;font-size:var(--fs-body);font-weight:500;letter-spacing:.06em}
.cal-note-points{margin:0;padding:0;list-style:none}
.cal-note-points li{position:relative;padding-left:12px;font-size:var(--fs-label);line-height:1.8;letter-spacing:.04em}
.cal-note-points li::before{content:'';position:absolute;left:0;top:.8em;width:4px;height:4px;border-radius:50%;background:#c9a227}
/* 幅の狭い端末（〜359px）：余白と字間を詰めて、アイコン＋文字が欠けずに中央に収まるように */
@media (max-width:359px){[data-variant="3"] .hero-visit .holidays{padding:0 22px;gap:6px}.visit-bar .holiday-next b{font-size:12px;letter-spacing:.04em}.visit-bar .hol-go{right:10px}}
/* rev66：カレンダーは A で確定。再来月（3か月目）は予定の注記。PC（768px以上）は今月・来月の2か月を横に並べる（スライドなし） */
.w-cal-tentative{margin:-2px 0 6px;text-align:center;font-size:var(--fs-label);color:var(--ink2);opacity:.7;letter-spacing:.04em}
@media (min-width:768px){.w-calendar[data-mode="a"] .w-cal-months{display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:visible;scroll-snap-type:none;padding:0 20px}.w-calendar[data-mode="a"] .w-cal-block{flex:none}.w-calendar[data-mode="a"] .w-cal-block:nth-child(n+3),.w-calendar .w-cal-dots{display:none}}

/* rev68：営業時間（新）は320〜359pxで2列に収まらないため、曜日と時間を縦に並べる */
@media (max-width:359px){.a-hours{grid-template-columns:auto}.a-hours span:nth-child(odd):not(:first-child){margin-top:6px}}