/* 最初の写真とページ内の目次。メニューの .r4-photo には適用しない。 */
/* 登場の速さの倍率（1＝最初の速さ）。社長の指示（10-15）で 1.8＝ゆっくり。登場の時間はすべてこの1つに掛かる。 */
#top{--r4f-k:1.8}
#top.r4-photo{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:calc(100svh - var(--header-h,72px));overflow:hidden;background:#4D3B30;color:#F5EFE4;padding:clamp(28px,4vw,64px);box-sizing:border-box;view-timeline-name:--r4-front;view-timeline-axis:block}
#top.r4-photo::before,#top.r4-photo::after{content:none}
#top .r4f-window{position:absolute;inset:0;z-index:-2}
#top .r4f-pane{position:absolute;inset:0;isolation:isolate;z-index:1}
#top .r4f-parallax{position:absolute;inset:-10% 0;z-index:-2}
#top .r4f-entry,#top picture,#top img{position:absolute;inset:0;display:block;width:100%;height:100%}
#top picture{border:0;border-radius:0;overflow:visible}
#top img{object-fit:cover;object-position:50% 50%;animation:none;transform:none}
#top .r4f-copy{position:relative;max-width:calc(100% - 132px);z-index:1}
#top .r4f-copy::before{content:"";position:absolute;z-index:-1;inset:-80px -100vw -80px -64px;pointer-events:none;background:linear-gradient(0deg,rgba(27,18,12,.92),rgba(27,18,12,.8) calc(100% - 64px),transparent)}
#top p{margin:0}
#top .r4f-title{font:800 clamp(2rem,5vw,4.4rem)/1.3 var(--serif);letter-spacing:.02em;text-wrap:balance}
/* 最後の文字が出たら will-change を外し、呼吸へ渡す。 */
@keyframes r4fEnd{from{opacity:0}to{opacity:1}}
@keyframes r4fBreathe{50%{transform:scale(1.04)}}
#top.r4f-ready{--r4f-ease:cubic-bezier(.19,1,.22,1)}
#top.r4f-ready:not(.r4f-in):not(.r4f-done):not(.r4f-calm) .r4f-copy p{opacity:0}
#top.r4f-done .r4f-entry>picture{animation:r4fBreathe 24s ease-in-out infinite}
#top.r4f-entering .r4f-entry{will-change:transform}
/* 中央から五枚の幕。写真全体を共有する座標で切り、境を0.5pxずつ重ねる。 */
#top .r4f-strips,#top .r4f-slice,#top .r4f-reveal{position:absolute;inset:0}
#top .r4f-strips{display:none}
#top .r4f-slice{clip-path:inset(0 calc(100% - (var(--s) + 1)*20% - .5px) 0 calc(var(--s)*20% - .5px))}
#top .r4f-line{position:absolute;left:50%;top:0;width:1px;height:100%;background:#F7AC1D;transform-origin:top;pointer-events:none;opacity:0}
#top .r4f-ph{position:relative;display:inline-block}
#top .r4f-plain{visibility:hidden}
#top .r4f-letters{position:absolute;inset:0;white-space:nowrap}
#top .r4f-char{display:inline-block;clip-path:inset(0);vertical-align:baseline}
#top .r4f-char>span{display:inline-block}
#top.r4f-ready:not(.r4f-done):not(.r4f-calm) .r4f-entry>picture{visibility:hidden}
#top.r4f-ready:not(.r4f-done):not(.r4f-calm) .r4f-strips{display:block}
#top.r4f-ready:not(.r4f-in) .r4f-reveal{clip-path:inset(100% 0 0)}
@keyframes r4fCurtain{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes r4fCurtainZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes r4fThread{0%{transform:scaleY(0);opacity:1}67%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes r4fChar{from{transform:translateY(110%)}to{transform:translateY(0)}}
#top.r4f-in .r4f-reveal{animation:r4fCurtain calc(.9s * var(--r4f-k)) var(--r4f-ease) calc((.6s + var(--delay)) * var(--r4f-k)) both}
#top.r4f-in .r4f-entry{animation:r4fCurtainZoom calc(1.8s * var(--r4f-k)) var(--r4f-ease) both}
#top.r4f-in .r4f-line{animation:r4fThread calc(.9s * var(--r4f-k)) linear both}
#top.r4f-in .r4f-char>span{animation:r4fChar calc(.7s * var(--r4f-k)) var(--r4f-ease) calc((.85s + var(--i)*.04s) * var(--r4f-k)) both}
#top.r4f-entering .r4f-reveal{will-change:clip-path}
#top.r4f-ready:not(.r4f-in):not(.r4f-done):not(.r4f-calm) .r4f-copy::before{opacity:0}
#top.r4f-in .r4f-copy::before{animation:r4fEnd calc(.9s * var(--r4f-k)) var(--r4f-ease) calc(.6s * var(--r4f-k)) both}
#top.r4f-ready.r4f-paused :is(.r4f-window,.r4f-pane,.r4f-entry,.r4f-reveal,.r4f-line,.r4f-copy p,.r4f-char>span,picture),#top.r4f-ready.r4f-paused .r4f-copy::before{animation-play-state:paused}
@supports (animation-timeline: view()){
  @keyframes r4fParallax{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
  #top.r4f-ready .r4f-parallax{animation:r4fParallax linear both;animation-timeline:--r4-front;animation-range:entry 0% exit 100%}
  #top.r4f-paused .r4f-parallax{animation-play-state:paused}
}
#top.r4f-ready:is(.r4f-done,.r4f-calm) :is(.r4f-window,.r4f-pane,.r4f-entry,.r4f-copy p,.r4f-char>span){animation:none;transform:none;opacity:1;clip-path:none}
#top.r4f-ready:is(.r4f-done,.r4f-calm) .r4f-copy::before{animation:none;opacity:1}
#top.r4f-ready:is(.r4f-done,.r4f-calm) .r4f-line{animation:none;opacity:0}
#top.r4f-calm :is(.r4f-parallax,picture){animation:none;transform:none}
#top.r4f-ready.r4f-calm .r4f-entry>picture{animation:none;transform:none}
/* 中央線で選ばれた節。右の余白が狭い幅では札を常時出さない。 */
.r4-side{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:40}
.r4-side ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.r4-side a{position:relative;display:grid;place-items:center;width:24px;height:40px;color:#F5EFE4;text-decoration:none}
.r4-side a::after{content:"";width:10px;height:10px;box-sizing:border-box;border:1px solid #4D3B30;border-radius:50%;background:#F5EFE4;box-shadow:0 0 0 1px #F5EFE4;transition:transform .2s}
.r4-side a[aria-current]::after{background:#F7AC1D;transform:scale(1.4)}
.r4-side span{position:absolute;right:34px;white-space:nowrap;padding:7px 12px;border-radius:6px;background:#4D3B30;color:#F5EFE4;font:700 .8rem/1.4 var(--sans);opacity:0;transform:translateX(5px);pointer-events:none;transition:opacity .2s,transform .2s}
.r4-side a:is([aria-current],:hover,:focus-visible) span{opacity:1;transform:none}
.r4-side a:focus-visible{outline:2px solid #4D3B30;outline-offset:2px;border-radius:12px;box-shadow:0 0 0 4px #F5EFE4}
html.r4-intro:not(.r4-intro-end) .r4-side{visibility:hidden}
html.r4-front-calm .r4-side *,html.r4-front-calm .r4-side a::after{transition:none}
#top,#r4-hero,#hero,#signature,#kodawari,#menu,#takeout,#store,#news,#access{scroll-margin-top:var(--header-h,72px)}
@media (max-width:1800px){.r4-side a[aria-current]:not(:hover):not(:focus-visible) span{opacity:0;transform:translateX(5px)}}
@media (max-width:1280px){.r4-side{right:6px}}
@media (max-width:760px){
  .r4-side{display:none}
  #top.r4-photo{padding:24px 20px calc(100px + var(--bar-h,60px) + env(safe-area-inset-bottom))}
  #top img{object-position:62% 50%}
  #top .r4f-copy{max-width:100%}
  #top .r4f-title{font-size:min(2rem,8.4vw)}
}
@media (prefers-reduced-motion:reduce){
  #top.r4-photo :is(.r4f-entry,.r4f-parallax,.r4f-copy p,picture){animation:none;transform:none;opacity:1}
  .r4-side *,.r4-side a::after{transition:none}
}