/* sample02（サロニズム）写真と見出しの動き。全ページ共通（トップ・コンセプト・ギャラリー・下層ページ）
   2026-09-29 ノブさん「写真の動きがワンパターン」→ 09-30「似ている。もっと動きをつけて」「くるくるして出る、大きく出て元の大きさになる」
   写真の枠に、現れ方17種類を順番に割り当てる（割り当ては motion.js）。写真は現れたら止まる（スクロールに合わせて動かさない） */
@property --b{syntax:'<percentage>';inherits:false;initial-value:0%;}

/* 写真のあるかたまり：かたまりは出したままにして、写真の枠と文字を別々に動かす */
:is(.rv,.item).has-fx{opacity:1;transform:none;}
:is(.rv,.item).has-fx .fx-text{opacity:0;transform:translateY(40px);transition:opacity 1s ease .45s, transform 1.3s cubic-bezier(.2,.8,.2,1) .45s;}
:is(.rv,.item).has-fx.in .fx-text{opacity:1;transform:none;}
:is(.rv,.item).fx-self{opacity:1;}

.fx{overflow:hidden;}
.fx img{scale:1.15;transition:scale 2s cubic-bezier(.2,.8,.2,1), transform 1.4s cubic-bezier(.2,.8,.2,1), filter .8s ease !important;}
:is(.in .fx,.fx.in) img{scale:1;}

/* ---- 現れ方（枠ごと動かさないもの。回転して置いた写真にも使える） ---- */
.fx-wipe-l{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1);}
.fx-wipe-up{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1);}
.fx-split{clip-path:inset(0 50% 0 50%);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1);}
:is(.in .fx-wipe-l,.fx-wipe-l.in,.in .fx-wipe-up,.fx-wipe-up.in,.in .fx-split,.fx-split.in){clip-path:inset(0 0 0 0);}
.fx-diag{clip-path:polygon(0 0,0 0,0 0);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1);}
:is(.in .fx-diag,.fx-diag.in){clip-path:polygon(0 0,220% 0,0 220%);}
.fx-circle{clip-path:circle(0% at 50% 50%);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1);}
:is(.in .fx-circle,.fx-circle.in){clip-path:circle(75% at 50% 50%);}
.fx-blinds{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--b),transparent var(--b) 12.5%);mask-image:repeating-linear-gradient(90deg,#000 0 var(--b),transparent var(--b) 12.5%);transition:--b 1.5s cubic-bezier(.65,0,.35,1);}
:is(.in .fx-blinds,.fx-blinds.in){--b:12.6%;}
.fx-curtain::after{content:'';position:absolute;inset:0;background:var(--accent,#C92D63);transform:scaleX(0);transform-origin:left;z-index:2;pointer-events:none;}
.fx-curtain img{opacity:0;transition:opacity .01s linear .75s, scale 2s cubic-bezier(.2,.8,.2,1) .75s !important;}
:is(.in .fx-curtain,.fx-curtain.in) img{opacity:1;}
:is(.in .fx-curtain,.fx-curtain.in)::after{animation:fx-curtain 1.5s cubic-bezier(.77,0,.18,1) forwards;}
@keyframes fx-curtain{0%{transform:scaleX(0);transform-origin:left;}50%{transform:scaleX(1);transform-origin:left;}50.1%{transform:scaleX(1);transform-origin:right;}100%{transform:scaleX(0);transform-origin:right;}}
.fx-zoom img{scale:1.7;transition:scale 2.6s cubic-bezier(.2,.8,.2,1), transform 1.4s ease, filter .8s ease !important;}
.fx-zoom{opacity:0;transition:opacity 1.4s ease;}
:is(.in .fx-zoom,.fx-zoom.in){opacity:1;}
.fx-blur{opacity:.2;filter:blur(20px) grayscale(1);transition:opacity 1.4s ease, filter 1.8s ease;}
:is(.in .fx-blur,.fx-blur.in){opacity:1;filter:none;}

/* ---- 現れ方（枠ごと動かすもの） ---- */
/* くるくる回りながら、小さな所から出る */
.fx-spinin{opacity:0;transform:scale(.2) rotate(-720deg);transition:opacity .8s ease, transform 1.8s cubic-bezier(.2,.8,.2,1);}
/* 大きく出て、元の大きさに戻る */
.fx-bigin{opacity:0;transform:scale(1.7);z-index:3;transition:opacity .9s ease, transform 1.3s cubic-bezier(.2,.8,.2,1);}
/* 奥に傾いた所から、正面に向き直る */
.fx-tilt{opacity:0;transform:perspective(900px) rotateY(32deg) translateX(60px) scale(.9);transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.2,.8,.2,1);}
/* 下の辺を軸に、起き上がる */
.fx-flip{opacity:0;transform-origin:50% 100%;transform:perspective(900px) rotateX(80deg);transition:opacity .9s ease, transform 1.4s cubic-bezier(.34,1.3,.64,1);}
/* 上の辺からぶら下がって、揺れて止まる */
.fx-swing{opacity:0;transform-origin:50% 0;transform:rotate(-24deg);transition:opacity .8s ease, transform 1.6s cubic-bezier(.34,1.9,.5,1);}
/* 小さく傾いた所から、弾んで大きくなる */
.fx-spin{opacity:0;transform:scale(.55) rotate(-10deg);transition:opacity 1s ease, transform 1.5s cubic-bezier(.34,1.4,.64,1);}
/* 上から落ちて、弾む */
.fx-bounce{opacity:0;transform:translateY(-140px);transition:opacity .6s ease, transform 1.3s cubic-bezier(.34,1.8,.64,1);}
/* 上から降りながら、上から開く */
.fx-drop{opacity:0;transform:translateY(-90px);clip-path:inset(0 0 100% 0);transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), clip-path 1.4s cubic-bezier(.77,0,.18,1);}
:is(.in .fx-drop,.fx-drop.in){clip-path:inset(0 0 0 0);}
:is(.in :is(.fx-spinin,.fx-bigin,.fx-tilt,.fx-flip,.fx-swing,.fx-spin,.fx-bounce,.fx-drop), :is(.fx-spinin,.fx-bigin,.fx-tilt,.fx-flip,.fx-swing,.fx-spin,.fx-bounce,.fx-drop).in){opacity:1;transform:none;}

/* ---- 見出し・カード・行 ---- */
.rv.fx-head{transform:none;letter-spacing:.34em;filter:blur(6px);transition:opacity 1.2s ease, letter-spacing 1.6s cubic-bezier(.2,.8,.2,1), filter 1.2s ease;}
.rv.fx-head.in{letter-spacing:.06em;filter:none;}
.rv.fx-side-l{transform:translateX(-60px);}
.rv.fx-side-r{transform:translateX(60px);}
.rv.fx-side-l.in,.rv.fx-side-r.in{transform:none;}
.rv.fx-pop{transform:scale(.92);transition:opacity .9s ease, transform 1s cubic-bezier(.34,1.56,.64,1);}
.rv.fx-pop.in{transform:none;}

@media (prefers-reduced-motion:reduce){
  .fx,.fx img,.fx-text,.rv.fx-head,.rv.fx-side-l,.rv.fx-side-r,.rv.fx-pop{transition:none!important;animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important;}
  .fx-curtain::after{display:none;}
}

/* スマホの上の帯：店名・予約ボタン・メニューの印が、画面の幅に収まるようにする（全ページ共通。2026-09-30 ノブさん「ホットペッパーで予約…が横幅を超えてる」） */
@media (max-width:900px){
  header{gap:10px!important;padding:10px 12px!important;}
  .logo{min-width:0;flex-shrink:1;}
  .logo .en{font-size:17px!important;letter-spacing:.12em!important;}
  .hright{gap:12px!important;min-width:0;}
  .reserve{padding:5px 8px!important;font-size:11.5px!important;line-height:1.35!important;white-space:nowrap;}
  .reserve small{font-size:10px!important;}
}
@media (max-width:380px){
  .logo .en{font-size:15px!important;letter-spacing:.08em!important;}
  .reserve{padding:4px 6px!important;font-size:11px!important;}
  .reserve small{font-size:9.5px!important;letter-spacing:0;}
}

/* スマホで、ページが横にずれて（横に動いて）しまわないようにする。画面の外にはみ出した英字・写真は切って見せない（2026-09-30 ノブさん「白い部分ごと横にずれる」）
   hidden ではなく clip を使う（hidden を html と body の両方に付けると、スクロールの仕組みが変わって上の帯の固定が効かなくなるため） */
html,body{overflow-x:clip;}
main,main > section,.page-head{overflow-x:clip;}

/* スマホのメニュー（右上の三本線と、開いた時の一覧）。全ページ共通（2026-09-30） */
.menu-btn{display:none;}
.menu-btn::before,.menu-btn::after{content:none!important;}
.sp-menu{display:none;}
@media (max-width:900px){
  .menu-btn{display:flex!important;flex-direction:column;justify-content:space-between;width:28px!important;height:18px!important;padding:0;border:0;background:none;cursor:pointer;position:relative;z-index:320;flex:none;}
  .menu-btn i{display:block;height:1.5px;background:var(--ink,#161618);transition:transform .35s ease, opacity .25s ease;}
  .sp-menu-open .menu-btn i:nth-child(1){transform:translateY(8.2px) rotate(45deg);}
  .sp-menu-open .menu-btn i:nth-child(2){opacity:0;}
  .sp-menu-open .menu-btn i:nth-child(3){transform:translateY(-8.2px) rotate(-45deg);}
  .sp-menu{display:block;position:fixed;inset:0;z-index:300;background:#fff;padding:210px 28px 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s;}
  .sp-menu-open .sp-menu{opacity:1;visibility:visible;}
  .sp-menu-open,.sp-menu-open body{overflow:hidden;}
  .sp-menu-open .topbar,.sp-menu-open header{position:relative;z-index:310;}
  .sp-menu-en{font-family:var(--serif,serif);font-size:34px;letter-spacing:.06em;color:var(--accent,#C92D63);font-style:italic;margin-bottom:10px;}
  .sp-menu nav{display:block!important;}
  .sp-menu ul{list-style:none;border-top:1px solid var(--line,#DADADA);}
  .sp-menu li a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line,#DADADA);font-size:16px;letter-spacing:.06em;color:var(--ink,#161618);}
  .sp-menu li a::after{content:'→';font-family:var(--serif,serif);color:var(--mute,#66666B);}
  .sp-menu li a[aria-current="page"]{color:var(--accent,#C92D63);}
  .sp-menu-note{margin-top:22px;font-size:13px;color:var(--mute,#66666B);line-height:1.8;}
}