/* ============================================================
   FROZE — The Porcelain Gallery(モダン・フル幅レイアウト)
   ============================================================ */
:root{
  --base:#F6F7F9; --white:#FFFFFF; --ink:#23252B; --line:#E4E7EC; --gray:#6E7580;
  --sian-deep:#3E6C96; --sian-c1:#DCEAF5; --sian-c2:#AFCEE8;
  --mauve-deep:#6E1F35; --mauve-acc:#C4526F; --mauve-c1:#33121D; --mauve-c2:#57202f;
  --muul-deep:#D8548A; --muul-c1:#FBDFEB; --muul-c2:#F6BED6;
  --shadow-card:0 12px 32px rgba(43,41,48,.10);
  --shadow-card-h:0 24px 48px rgba(43,41,48,.16);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}  /* display:flex等の指定よりhidden属性を優先 */
html{
  scroll-behavior:smooth;
  color-scheme:light;                        /* フォーム部品等の自動ダーク化を防ぐ */
  -webkit-tap-highlight-color:transparent;   /* タップ時の灰色フラッシュを消す(:activeの演出が担う) */
  -webkit-text-size-adjust:100%;
  /* reveal入場のtranslateXやタイトルドリフトが発火前に画面外へはみ出しても
     横スクロール/横揺れを発生させない(clipはスクロールコンテナ化しない) */
  overflow-x:clip;
}
@supports not (overflow: clip){
  html{overflow-x:hidden;}
}
/* キーボード操作時だけ見えるフォーカスリング */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}
/* タッチ端末では出さない(タップ後・ページ復帰時にリングが残留して「謎の枠線」に見えるため) */
@media (hover:none) and (pointer:coarse){
  :focus-visible{outline:none;}
}
body{
  background-color:var(--base);
  /* 三角格子の模様(主張弱め) */
  background-image:
    repeating-linear-gradient(0deg,   rgba(35,37,43,.030) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(60deg,  rgba(35,37,43,.030) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(120deg, rgba(35,37,43,.030) 0 1px, transparent 1px 58px);
  font-family:'Zen Kaku Gothic New',sans-serif;color:var(--ink);
  /* 横はみ出しの二重防御。一部のAndroid Chromeはルート(html)のclipだけでは
     横パンを止めないため、bodyにもclipを張る。
     ※hiddenは絶対に使わない — bodyがスクロールコンテナ化してposition:stickyが
       全滅する(採用LPデッキで実際に起きた退行)。clipはコンテナ化しない */
  overflow-x:clip;
}
.en{font-family:'Montserrat',sans-serif;}
.jp-serif{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;}
.container{max-width:1140px;margin:0 auto;padding:0 22px;}

/* 3色の菱形トリオ(グループの唯一の色アクセント) */
.trio{display:inline-flex;gap:6px;align-items:center;}
.trio i{width:7px;height:7px;transform:rotate(45deg);display:inline-block;}
.trio i:nth-child(1){background:var(--sian-deep);}
.trio i:nth-child(2){background:var(--mauve-acc);}
.trio i:nth-child(3){background:var(--muul-deep);}

/* ============================================================
   ヘッダー(左上ロゴプレート+右上円形バーガー)
   ============================================================ */
.gh{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;}
.logo-plate{
  pointer-events:auto;display:flex;align-items:center;gap:14px;
  background:var(--white);padding:16px 40px 15px 24px;
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
  box-shadow:0 4px 20px rgba(43,41,48,.14);text-decoration:none;
}
.logo-plate .en{font-size:clamp(17px,2.2vw,22px);letter-spacing:.26em;font-weight:600;color:var(--ink);}
.burger{
  pointer-events:auto;margin:16px 16px 0 0;position:relative;z-index:66;
  width:54px;height:54px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5.5px;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(43,41,48,.32);
  transition:transform .2s;
}
.burger:hover{transform:scale(1.06);}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s;}
/* 開いている間は白に反転(暗いオーバーレイに閉じるボタンが溶けないように) */
.burger.open{background:#fff;}
.burger.open span{background:var(--ink);}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* 全画面メニュー */
.menu-overlay{position:fixed;inset:0;z-index:64;background:rgba(22,20,27,.93);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease;}
.menu-overlay.open{opacity:1;pointer-events:auto;}
/* 画像入りの横長カード型メニュー */
.menu-nav{display:flex;flex-direction:column;gap:11px;width:min(88vw,400px);
  max-height:84svh;overflow-y:auto;scrollbar-width:none;padding:4px 0;}
.menu-nav::-webkit-scrollbar{display:none;}
.menu-nav > a{position:relative;display:flex;align-items:center;
  height:clamp(58px,8.4svh,76px);flex:none;
  border-radius:16px;overflow:hidden;
  color:#fff;text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;}
.menu-overlay.open .menu-nav > a{opacity:1;transform:none;}
.menu-nav > a:active{transform:scale(.97);transition-duration:.12s;}
.mn-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s ease;}
.menu-nav > a:hover .mn-bg, .mn-card:hover .mn-bg{transform:scale(1.06);}
/* 左を濃くして文字を立たせるスクリム */
.mn-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(14,12,18,.78) 28%, rgba(14,12,18,.38) 62%, rgba(14,12,18,.12));}
.mn-body{position:relative;flex:1;display:flex;flex-direction:column;gap:2px;
  padding:0 18px;min-width:0;}
.mn-label{font-family:'Montserrat','Zen Kaku Gothic New',sans-serif;
  font-size:clamp(17px,2.5svh,21px);font-weight:700;letter-spacing:.16em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-sub{font-size:10px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.72);}
.mn-arrow{position:relative;flex:0 0 auto;margin-right:16px;
  font-size:15px;font-weight:700;opacity:.85;}
.menu-nav > a[aria-current="page"]{outline:1.5px solid rgba(255,255,255,.9);outline-offset:2px;}
.menu-nav > a[aria-current="page"] .mn-sub::after{content:" — いまここ";color:rgba(255,255,255,.9);}

/* ---- メニューの構造化(2026-08-24): セクション見出し+店舗カード内クイックリンク ---- */
.mn-sec{margin:8px 2px 0;display:flex;align-items:center;gap:10px;
  font-family:'Montserrat','Zen Kaku Gothic New',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.65);
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;}
.mn-sec::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.22);}
.menu-overlay.open .mn-sec{opacity:1;transform:none;}
/* 店舗カード(本体リンク+下段チップ)。単発カード(.menu-nav > a)と同じ入場演出 */
.menu-nav .mn-card{position:relative;flex:none;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;}
.menu-overlay.open .mn-card{opacity:1;transform:none;}
.mn-card .mn-main{position:relative;display:flex;align-items:center;
  height:clamp(54px,7.6svh,70px);color:#fff;text-decoration:none;}
.mn-card .mn-main[aria-current="page"] .mn-sub::after{content:" — いまここ";color:rgba(255,255,255,.9);}
.mn-links{position:relative;display:flex;gap:8px;padding:0 12px 12px;}
.mn-links a{flex:1;text-align:center;color:#fff;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  padding:8px 0;border-radius:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .2s ease;}
.mn-links a:hover{background:rgba(255,255,255,.26);}
.mn-links a:active{transform:scale(.95);}

/* ============================================================
   ヒーロー(フル幅動画+ホワイトドット+ジグザグ縁)
   ============================================================ */
.hero{position:relative;height:76svh;min-height:500px;overflow:hidden;background:#141218;}
.video-sim{position:absolute;inset:0;z-index:0;background:
  radial-gradient(circle at 78% 16%, rgba(220,234,245,.9) 0 90px, transparent 91px),
  radial-gradient(circle at 15% 40%, rgba(196,82,111,.5) 0 110px, transparent 111px),
  radial-gradient(circle at 70% 72%, rgba(246,190,214,.85) 0 130px, transparent 131px),
  linear-gradient(160deg, #C9A6B8 0%, #A98BA4 40%, #8296B0 100%);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#8296B0;}
/* ゆっくり寄っていくケン・バーンズ演出(静止画ポスターの間も生きて見える) */
@media (prefers-reduced-motion: no-preference){
  .hero-video{animation:hero-zoom 24s ease-in-out infinite alternate;}
  @keyframes hero-zoom{from{transform:scale(1);}to{transform:scale(1.07);}}
}
@media (prefers-reduced-motion: reduce){ .hero-video{display:none;} }
.dots-overlay{position:absolute;inset:0;z-index:2;
  background-image:
    radial-gradient(rgba(255,255,255,.85) 1.3px, transparent 1.9px),
    radial-gradient(rgba(255,255,255,.45) 1px, transparent 1.5px);
  background-size:11px 11px, 7px 7px;
  background-position:0 0, 4px 5px;
  opacity:.6;}
/* 下端を暗く締めてコピーを読みやすく */
.hero-shade{position:absolute;inset:auto 0 0 0;height:46%;z-index:2;background:linear-gradient(180deg,transparent,rgba(20,18,24,.55));}
.hero-copy{position:absolute;left:clamp(20px,6vw,84px);bottom:clamp(72px,14svh,150px);z-index:3;color:#fff;}
.hero-copy .over{font-size:clamp(10px,1.2vw,12px);font-weight:700;letter-spacing:.36em;opacity:.92;}
.hero-copy h1{font-size:clamp(58px,10vw,118px);font-weight:700;letter-spacing:.12em;line-height:1;margin-top:10px;text-shadow:0 6px 30px rgba(0,0,0,.35);}
.hero-copy .sub{font-size:clamp(13px,1.6vw,17px);letter-spacing:.22em;margin-top:12px;opacity:.95;}
/* 尖頭アーチの縁(ゴシック建築のアーケード。次セクションの地色が立ち上がる) */
.gothic-edge{position:absolute;left:0;right:0;bottom:-1px;height:46px;z-index:4;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="76" height="46" viewBox="0 0 76 46"><path d="M0 46 Q31 40 38 5 Q45 40 76 46 Z" fill="%23F6F7F9"/></svg>');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:76px 46px;}
@media (max-width:599px){
  .gothic-edge{height:34px;background-size:56px 34px;}
}
/* スクロール誘導 */
.scroll-cue{position:absolute;right:clamp(18px,4vw,52px);bottom:34px;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.32em;writing-mode:vertical-rl;}
.scroll-cue i{width:1.5px;height:46px;background:linear-gradient(180deg,#fff,transparent);display:block;animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ============================================================
   セクション共通(巨大英字見出し)
   ============================================================ */
.sec{padding:76px 0 10px;}
.sec-head .en-title{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(40px,6vw,74px);letter-spacing:.04em;line-height:.98;
  color:var(--ink);text-transform:uppercase;
}
.sec-head .jp-sub{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:700;letter-spacing:.2em;color:var(--gray);margin-top:12px;}

/* スクロールで現れる(JSが動いた時だけ透明にする=JSが落ちても内容は見える) */
html.js .reveal{opacity:0;transform:translateY(22px);}
html.js .reveal.on{opacity:1;transform:none;}
.reveal{transition:opacity .45s ease,transform .45s ease;}
/* 兄弟要素を時間差で立ち上げる(awgroup式stagger) */
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){ html.js .reveal{opacity:1;transform:none;transition:none;} }

/* CTAはホバー/フォーカスで文字間がすっと広がる(awgroupのOPEN演出) */
.enter,.sns-follow,.more a,.nf-more,.ev-more{transition:letter-spacing .35s ease,transform .2s,opacity .2s,background .2s,color .2s,box-shadow .2s;}
.enter:hover,.enter:focus-visible{letter-spacing:.16em;}
.sns-follow:hover{letter-spacing:.14em;}
.more a:hover{letter-spacing:.14em;}
a:hover .nf-more,a:hover .ev-more{letter-spacing:.3em;}

/* 押下感(タップに指先で応える) */
.enter:active,.more a:active,.sns-follow:active,.news-row:active,.news-feature:active,
.event-card:active,.cast-card:active,.other-card:active,.news-card-item:active,
.share-btn:active,.dot-btn:active,.reserve-fab:active,.sns-icon:active .circle,
.art:active .card{transform:scale(.97);transition-duration:.12s;}

/* データ読込中のスケルトン(白紙ではなく「形」を先に見せる) */
.sk{position:relative;overflow:hidden;background:#EBEDF1;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:sk-shine 1.3s ease-in-out infinite;}
@keyframes sk-shine{to{transform:translateX(100%);}}
.sk-card{flex:0 0 82%;scroll-snap-align:center;height:520px;border-radius:20px;}
.sk-row{height:58px;border-bottom:1px solid var(--line);}
.sk-row:last-child{border-bottom:none;}
@media (prefers-reduced-motion: reduce){ .sk::after{animation:none;} }
.panel-empty{color:var(--gray);font-size:13px;padding:20px 24px;}

/* ============================================================
   Collection(店舗カード)
   ============================================================ */
.swipe-hint{display:flex;justify-content:center;margin:18px 0 6px;transition:opacity .5s;}
.swipe-hint .inner{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--gray);}
.swipe-hint .ch{display:inline-block;animation:nudge 1.4s ease-in-out infinite;font-size:13px;}
.swipe-hint .ch.l{animation-name:nudgeL;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@keyframes nudgeL{0%,100%{transform:translateX(0);}50%{transform:translateX(-6px);}}
.swipe-hint.off{opacity:0;}

.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px max(22px, calc((100vw - 1140px)/2 + 22px)) 26px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;}  /* 端までスワイプしてもブラウザの戻るジェスチャに化けない */
.rail::-webkit-scrollbar{display:none;}
.art{flex:0 0 82%;scroll-snap-align:center;scroll-snap-stop:always;}

.card{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .4s ease,box-shadow .4s ease;}
.art.active .card{transform:translateY(-8px);box-shadow:var(--shadow-card-h);}

.canvas{height:320px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;overflow:hidden;background-size:cover;background-position:center;}
.canvas .dots-mini{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.6px);background-size:9px 9px;opacity:.8;}
.canvas .logo-line{position:relative;text-align:center;padding-bottom:24px;}
.canvas .rose{font-size:26px;display:block;}
.canvas .nm{font-style:italic;font-weight:600;font-size:40px;line-height:1.1;}
.canvas .concept{font-size:10.5px;letter-spacing:.24em;margin-top:6px;font-weight:700;}
.canvas .copy{font-size:11.5px;margin-top:8px;opacity:.92;}
.canvas.has-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.42));}
.canvas.has-image .logo-line{z-index:1;}
.canvas.has-image .rose,.canvas.has-image .nm,.canvas.has-image .concept,.canvas.has-image .copy{color:#fff !important;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.cv-sian{background:
  radial-gradient(circle at 78% 18%, rgba(255,255,255,.8) 0 32px, transparent 33px),
  radial-gradient(circle at 65% 60%, var(--sian-c2) 0 60px, transparent 61px),
  linear-gradient(170deg, #EAF3FA, var(--sian-c1) 55%, var(--sian-c2));}
.cv-mauve{background:
  radial-gradient(circle at 80% 22%, rgba(196,82,111,.45) 0 44px, transparent 45px),
  radial-gradient(circle at 18% 55%, rgba(196,82,111,.3) 0 30px, transparent 31px),
  linear-gradient(165deg, var(--mauve-c2), var(--mauve-c1) 70%);}
.cv-muul{background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 6px, transparent 6px 24px),
  radial-gradient(circle at 75% 25%, var(--muul-c2) 0 50px, transparent 51px),
  linear-gradient(170deg, #FEF2F7, var(--muul-c1) 60%, var(--muul-c2));}

.card-info{padding:20px 22px 24px;}
.card-info .no{font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--gray);}
.card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.ctag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink);
  background:var(--white);border:1.5px solid var(--ink);border-radius:999px;padding:3.5px 12px;}
.ctag-area{background:var(--ink);color:#fff;}
.card-info .t{font-size:18px;font-weight:700;margin-top:7px;}
.card-info .d{font-size:12px;color:var(--gray);margin-top:4px;}
/* 初めての方への導線バナー(STORES直下) */
.fv-link{display:flex;align-items:center;gap:14px;margin-top:18px;
  background:var(--white);border:1.5px solid var(--ink);border-radius:16px;
  padding:15px 18px;text-decoration:none;color:var(--ink);
  box-shadow:0 3px 0 rgba(43,41,48,.16);
  transition:transform .15s ease,box-shadow .2s;}
.fv-link:active{transform:scale(.98);}
.fv-link .fv-ic{flex:0 0 30px;width:30px;height:30px;color:var(--sian-deep);}
.fv-link .fv-ic svg{width:100%;height:100%;}
.fv-link .fv-tx{flex:1;display:flex;flex-direction:column;gap:2px;}
.fv-link .fv-tx b{font-size:14.5px;font-weight:700;letter-spacing:.06em;}
.fv-link .fv-tx small{font-size:11px;color:var(--gray);letter-spacing:.02em;}
.fv-link .fv-arrow{flex:0 0 auto;font-size:16px;font-weight:700;}
@media (min-width:760px){
  .fv-link{max-width:560px;margin-left:auto;margin-right:auto;}
}

/* カードのアクション3ボタン(店舗詳細/MAP/予約・問合せ) */
.card-actions{display:flex;gap:8px;margin-top:16px;}
.cbtn{flex:1;text-align:center;font-size:12px;font-weight:700;letter-spacing:0;
  padding:11px 2px;border-radius:10px;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,opacity .2s;}
.cbtn:active{transform:scale(.95);}
.cbtn.ghost{background:var(--white);border:1.5px solid;}
.cbtn.fill{color:#fff;box-shadow:0 3px 10px rgba(43,41,48,.18);}

.card-info .enter{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.08em;
  background:var(--ink);color:#fff;border-radius:999px;padding:11px 28px;text-decoration:none;
  transition:transform .2s,box-shadow .2s,letter-spacing .35s ease;}
.card-info .enter:hover{transform:translate(-2px,-2px);}
.enter.s-sian{box-shadow:4px 4px 0 var(--sian-deep);}
.enter.s-mauve{box-shadow:4px 4px 0 var(--mauve-acc);}
.enter.s-muul{box-shadow:4px 4px 0 var(--muul-deep);}

/* ワイプ・開閉インジケータはモバイルのアコーディオン専用 */
.canvas .wipe,.canvas .exp-ind{display:none;}

/* ============================================================
   モバイル:縦アコーディオンカード(タップで「額」が開く)
   ============================================================ */
@media (max-width:599px){
  .swipe-hint,#storesSec .dots-nav{display:none;}
  .rail{display:block;overflow:visible;scroll-snap-type:none;padding:8px 18px 4px;}
  .art{width:100%;margin-bottom:14px;flex:none;scroll-snap-align:unset;}
  .sk-card{height:150px;margin-bottom:14px;flex:none;}

  /* 入場は左右交互スライドイン(awgroup流のリズム) */
  html.js .art.reveal{transform:translateX(-28px);}
  html.js .art.reveal:nth-child(even){transform:translateX(28px);}
  html.js .art.reveal.on{transform:none;}
  /* カードを合成レイヤーに昇格(紋様背景+影のスクロール時再描画を隔離) */
  .art{will-change:transform;}

  /* --- 折りたたみ状態:150pxの帯(店名+英字コンセプトのみ) --- */
  .art .canvas{height:150px;justify-content:center;transition:height .55s var(--ease);}
  .art .canvas .logo-line{padding-bottom:0;transition:transform .45s var(--ease);}
  .canvas .rose{font-size:20px;}
  .canvas .nm{font-size:31px;}
  .canvas .concept{margin-top:4px;}
  .canvas .copy{max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .45s var(--ease),opacity .35s,margin-top .35s;}

  /* 左右交互レイアウト(奇数=左寄せ/偶数=右寄せ) */
  .art:nth-child(odd)  .canvas{align-items:flex-start;}
  .art:nth-child(odd)  .canvas .logo-line{text-align:left;padding-left:24px;}
  .art:nth-child(even) .canvas{align-items:flex-end;}
  .art:nth-child(even) .canvas .logo-line{text-align:right;padding-right:24px;}
  /* 偶数カードは文字が右寄せなので、開閉ボタンは左下に逃がす */
  .art:nth-child(even) .canvas .exp-ind{left:13px;right:auto;}

  .card-info{max-height:0;opacity:0;padding:0 22px;overflow:hidden;
    transition:max-height .55s var(--ease),opacity .4s,padding .4s var(--ease);}

  /* 開閉インジケータ(+が45°回って×に) */
  .canvas .exp-ind{display:block;position:absolute;right:13px;bottom:13px;z-index:3;
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);
    box-shadow:0 3px 10px rgba(43,41,48,.22);
    transition:transform .4s var(--ease);}
  .canvas .exp-ind::before,.canvas .exp-ind::after{content:"";position:absolute;
    top:50%;left:50%;background:var(--ink);border-radius:1px;}
  .canvas .exp-ind::before{width:12px;height:2px;transform:translate(-50%,-50%);}
  .canvas .exp-ind::after{width:2px;height:12px;transform:translate(-50%,-50%);}

  /* --- 展開状態:ワイプが走り、額が開き、情報が時間差で立ち上がる --- */
  .art.exp .canvas{height:290px;}
  .art.exp .canvas .copy{max-height:3.2em;opacity:.92;margin-top:8px;}
  .art.exp .canvas .exp-ind{transform:rotate(45deg);}
  .art.exp .card-info{max-height:360px;opacity:1;padding:18px 22px 22px;}
  .art.exp .card{box-shadow:var(--shadow-card-h);}

  /* 白磁のワイプ(テーマ色の帯が左から右へ走り抜ける) */
  .canvas .wipe{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
    transform:scaleX(0);transform-origin:left;opacity:0;}
  .art.exp .wipe{animation:wipe-sweep .6s var(--ease) forwards;}
  @keyframes wipe-sweep{
    0%{transform:scaleX(0);opacity:1;}
    62%{transform:scaleX(1);opacity:1;transform-origin:left;}
    100%{transform:scaleX(1);opacity:0;transform-origin:left;}
  }

  /* 展開時の中身は下から時間差で(stagger) */
  .card-info > *{opacity:0;transform:translateY(12px);
    transition:opacity .35s ease,transform .35s ease;}
  .art.exp .card-info > *:nth-child(1){transition-delay:.16s;}
  .art.exp .card-info > *:nth-child(2){transition-delay:.22s;}
  .art.exp .card-info > *:nth-child(3){transition-delay:.28s;}
  .art.exp .card-info > *:nth-child(4){transition-delay:.34s;}
  .art.exp .card-info > *:nth-child(5){transition-delay:.40s;}
  .art.exp .card-info > *{opacity:1;transform:none;}

  @media (prefers-reduced-motion: reduce){
    .art .canvas,.card-info,.canvas .copy,.card-info > *{transition:none;}
    .art.exp .wipe{animation:none;}
    html.js .art.reveal{transform:none;}
  }
}

/* ページネーション:店舗カラーのドット(タップで移動できるボタン) */
.dots-nav{display:flex;justify-content:center;gap:2px;margin-top:2px;}
.dots-nav .dot-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;}
.dots-nav i{width:9px;height:9px;border-radius:50%;opacity:.3;transition:all .3s;}
.dots-nav i.c-sian{background:var(--sian-deep);}
.dots-nav i.c-mauve{background:var(--mauve-acc);}
.dots-nav i.c-muul{background:var(--muul-deep);}
.dots-nav i.on{opacity:1;transform:scale(1.4);}

/* ============================================================
   Today / Information
   ============================================================ */
.panel{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);margin-top:26px;}
.hour-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 24px;border-bottom:1px solid var(--line);}
.hour-row:last-child{border-bottom:none;}
.hour-row .st{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;}
.hour-row .mark{width:10px;height:10px;transform:rotate(45deg);flex:0 0 auto;}
.hour-row .htags{display:inline-flex;gap:6px;flex-wrap:wrap;}
.htag{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--gray);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;}
.htag-area{color:#fff;background:var(--ink);border-color:var(--ink);}
@media (max-width:480px){ .hour-row .htags{flex-basis:100%;margin-left:19px;} }
.hour-row .nm2{font-style:italic;font-weight:600;font-size:18px;}
.hour-row .tm{font-size:14.5px;font-weight:700;letter-spacing:.05em;}
.hour-row .op{font-size:10px;font-weight:700;color:#1E7A52;background:#E4F3EC;border-radius:999px;padding:3px 11px;margin-left:10px;letter-spacing:.08em;}
.hour-row .op.open{color:#1E7A52;background:#E4F3EC;}
.hour-row .op.soon{color:#8A6A1B;background:#F8F0DA;}
.hour-row .op.closed{color:var(--gray);background:#ECEEF2;}
.hour-row .op-sub{font-size:10.5px;font-weight:700;color:var(--gray);letter-spacing:.02em;}

/* 最新のお知らせはサムネイル付きのピックアップカード */
.news-feature{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);transition:background .2s;}
.news-feature:hover{background:#EFF1F5;}
.nf-thumb{height:158px;background-size:cover;background-position:center;}
.nf-noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#ECEEF2,#E2E6EC);color:#C0C6D0;font-size:15px;letter-spacing:.24em;font-weight:600;}
.nf-body{padding:15px 24px 18px;}
.nf-meta{display:flex;align-items:center;gap:10px;}
.nf-meta .dt{font-size:11px;color:var(--gray);font-weight:700;letter-spacing:.06em;}
.nf-title{font-size:15.5px;font-weight:700;line-height:1.55;margin-top:8px;}
.nf-more{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--gray);margin-top:8px;}

.news-row{display:flex;gap:14px;align-items:center;padding:17px 24px;border-bottom:1px solid var(--line);font-size:13.5px;transition:background .2s;text-decoration:none;color:var(--ink);}
.news-row:last-child{border-bottom:none;}
.news-row:hover{background:#EFF1F5;}
.news-row .nr-title{flex:1;}
.news-row .nr-arrow{color:var(--gray);font-weight:700;}
.news-row .dt{font-size:11px;color:var(--gray);font-weight:700;white-space:nowrap;letter-spacing:.06em;}
.tag{font-size:10px;font-weight:700;border-radius:999px;padding:3px 12px;white-space:nowrap;}
.tag.sian{background:var(--sian-c1);color:var(--sian-deep);}
.tag.mauve{background:#F4E0E6;color:var(--mauve-deep);}
.tag.muul{background:var(--muul-c1);color:var(--muul-deep);}
.tag.all{background:var(--ink);color:#fff;}
.more{display:flex;justify-content:center;margin-top:22px;}
.more a{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink);border:1.5px solid var(--ink);background:var(--white);border-radius:999px;padding:10px 30px;text-decoration:none;transition:background .2s,color .2s;}
.more a:hover{background:var(--ink);color:#fff;}

/* ============================================================
   Follow Us(SNS紹介: 動画モック+解説)
   ============================================================ */
.sns-split{display:flex;flex-direction:column;align-items:center;gap:30px;margin-top:40px;}
.sns-split + .sns-split{margin-top:64px;}
.mock-wrap{flex:0 0 auto;display:flex;justify-content:center;}

/* 縦型モック — 実機の細長さ(9:19.3)ではなく、見やすいチャンキーな縦型(9:13) */
.mock-phone{width:min(230px,62vw);height:auto;aspect-ratio:9/13;background:#0D0D11;border-radius:26px;padding:8px;
  position:relative;box-shadow:0 26px 52px rgba(23,25,35,.30), inset 0 0 0 2px #2B2B33;}
.mock-phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:56px;height:15px;background:#0D0D11;border-radius:999px;z-index:3;}
.mock-phone .mock-screen{width:100%;height:100%;border-radius:20px;overflow:hidden;position:relative;background:#17171C;}

/* 横型モック(YouTube等) */
.mock-land{width:min(560px,92vw);aspect-ratio:16/9;background:#0D0D11;border-radius:20px;padding:10px;
  box-shadow:0 26px 52px rgba(23,25,35,.28), inset 0 0 0 2px #2B2B33;}
.mock-land .mock-screen{width:100%;height:100%;border-radius:12px;overflow:hidden;position:relative;background:#17171C;}

.mock-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 動画未設定時のプレースホルダー */
.mock-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#5E5E6A;background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.05) 0 60px, transparent 61px),
    linear-gradient(165deg,#1B1B22,#101014);}
.mock-empty .mk{font-size:26px;}
.mock-empty .pf{font-size:11px;font-weight:700;letter-spacing:.24em;font-family:'Montserrat',sans-serif;text-transform:uppercase;}

/* 解説パート */
.sns-text{flex:1;min-width:0;text-align:center;}
.sns-badge{display:inline-block;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:6px 18px;}
.sns-account{font-family:'Montserrat','Zen Kaku Gothic New',sans-serif;font-size:clamp(21px,3vw,28px);font-weight:700;
  letter-spacing:.04em;margin-top:14px;word-break:break-word;}
.sns-desc{font-size:14px;line-height:2.05;letter-spacing:.03em;color:var(--ink);margin-top:14px;}
.sns-desc p + p{margin-top:.35em;}
.sns-follow{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.08em;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 32px;text-decoration:none;
  transition:transform .2s,opacity .2s;}
.sns-follow:hover{transform:translateY(-2px);opacity:.9;}

@media (min-width:900px){
  .sns-split{flex-direction:row;gap:64px;max-width:980px;margin-left:auto;margin-right:auto;padding:0 22px;}
  /* モックを項目ごとに左右交互に配置 */
  .sns-split:nth-child(even){flex-direction:row-reverse;}
  .sns-split + .sns-split{margin-top:88px;}
  .sns-text{text-align:left;}
  .mock-phone{height:293px;width:auto;}
  .mock-land{width:520px;flex:0 0 520px;}
}

/* ============================================================
   サブページ(お知らせ一覧・詳細)
   ============================================================ */
.subpage-main{padding-top:130px;min-height:60vh;}
.container-narrow{max-width:760px;}

.news-cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px;}
.news-card-item{display:flex;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:transform .3s,box-shadow .3s;}
.news-card-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h);}
.nc-thumb{flex:0 0 132px;background-size:cover;background-position:center;min-height:110px;}
.nc-noimg{display:flex;align-items:center;justify-content:center;background:#ECEEF2;color:#C6CBD4;font-size:14px;letter-spacing:.2em;font-weight:600;}
.nc-body{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:7px;}
.nc-meta{display:flex;align-items:center;gap:10px;}
.nc-meta .dt{font-size:11px;color:var(--gray);font-weight:700;letter-spacing:.06em;}
.nc-title{font-size:14.5px;font-weight:700;line-height:1.55;}
.nc-arrow{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--gray);margin-top:auto;font-family:'Montserrat',sans-serif;}

.news-detail{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);
  padding:34px 26px;margin-top:26px;}
.nd-meta{display:flex;align-items:center;gap:10px;}
.nd-meta .dt{font-size:12px;color:var(--gray);font-weight:700;letter-spacing:.06em;}
.nd-title{font-size:clamp(20px,3.4vw,27px);font-weight:700;line-height:1.5;margin-top:12px;}
.nd-thumb{margin-top:22px;}
.nd-thumb img{width:100%;border-radius:12px;display:block;}
.nd-body{margin-top:22px;}
.nd-body p{font-size:14.5px;line-height:2.05;letter-spacing:.03em;}
.nd-body p + p{margin-top:1.1em;}

/* シェアボタン(OSのシェアシート/Xポスト) */
.nd-share{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;}
.share-btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;
  font-family:inherit;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);
  border-radius:999px;padding:10px 22px;text-decoration:none;cursor:pointer;transition:transform .2s;}
.share-btn svg{width:15px;height:15px;}
.share-btn.share-x{background:var(--ink);color:#fff;}

/* 法的ページ(プライバシー・特商法・お問い合わせ) */
.legal-body h3{font-size:15px;font-weight:700;margin:28px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.legal-body h3:first-child{margin-top:0;}
.legal-body p,.legal-body li{font-size:13.5px;line-height:1.95;letter-spacing:.02em;}
.legal-body ul{margin:6px 0 6px 1.3em;}
.legal-body a{color:var(--sian-deep);}
.legal-body .note{font-size:12px;color:var(--gray);background:#EFF1F5;border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:20px;line-height:1.8;}
.legal-body .lrow{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line);}
.legal-body .lrow:first-of-type{border-top:1px solid var(--line);}
.legal-body .lk{font-weight:700;font-size:13.5px;padding:12px 10px 12px 0;line-height:1.8;}
.legal-body .lv{font-size:13.5px;padding:12px 0;line-height:1.8;}
@media (max-width:560px){ .legal-body .lrow{grid-template-columns:1fr;} .legal-body .lk{padding-bottom:2px;} .legal-body .lv{padding-top:2px;} }
.ph{color:#B0392F;background:#FBEAE8;border-radius:4px;padding:0 5px;font-size:.92em;}

@media (min-width:900px){
  .news-cards{grid-template-columns:repeat(2,1fr);gap:22px;}
  .nc-thumb{flex-basis:170px;}
  .news-detail{padding:52px 56px;}
  .subpage-main{padding-top:150px;}
}

/* ============================================================
   フッター
   ============================================================ */
footer{margin-top:88px;background:var(--ink);color:#F4F2ED;text-align:center;padding:58px 20px 52px;}
footer .flogo{font-size:26px;letter-spacing:.32em;font-weight:600;}
footer .trio{margin-top:16px;}
footer .trio i{width:8px;height:8px;}
footer .sns{margin-top:18px;font-size:12px;letter-spacing:.12em;font-weight:700;}
footer .flinks{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;}
footer .flinks a{color:#F4F2ED;text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.06em;opacity:.85;padding:6px 2px;display:inline-block;}
footer .flinks a:hover{opacity:1;text-decoration:underline;}
footer .cp{margin-top:20px;font-size:10px;opacity:.6;letter-spacing:.16em;}

/* ============================================================
   モダン演出(対応ブラウザだけで有効・非対応でも壊れない)
   ============================================================ */
/* ページ間をアプリのようにクロスフェード(MPAでもView Transitionsが効く) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}

/* 巨大英字見出しがスクロールに合わせて滑り込む(CSSのみ) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sec-head .en-title{animation:title-drift linear both;animation-timeline:view();animation-range:entry 0% cover 45%;}
    @keyframes title-drift{from{transform:translateX(34px);opacity:.35;}to{transform:none;opacity:1;}}
  }
}

/* STORESセクション: アクティブな店舗のテーマ色に背景がほんのり応答する */
#storesSec{background-color:var(--rail-tint, transparent);transition:background-color .8s ease;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (min-width:600px) and (max-width:899px){
  .art{flex:0 0 56%;}
}
@media (min-width:900px){
  .hero{height:min(62vw,88vh);min-height:560px;}
  .swipe-hint{display:none;}
  .dots-nav{display:none;}
  .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;overflow:visible;
    max-width:1140px;margin:0 auto;padding:14px 22px 0;}
  .art{flex:none;}
  .art .card{cursor:pointer;}
  .art:hover .card{transform:translateY(-10px);box-shadow:var(--shadow-card-h);}
  .canvas{height:350px;}
  .sec{padding-top:104px;}
  footer{margin-top:120px;}
}