/* ============================================================
   the O — shared stylesheet
   Monochrome editorial / light ground
   tokens (DESIGN_BRIEF.md):
     paper #F4F4F2 / ink #141414 / caption gray #5F5F5B
     hairline #D9D9D4 / warm light (FV circle only) #ECE8E1
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#F4F4F2;
  --ink:#141414;
  --gray:#5F5F5B;
  --line:#D9D9D4;
  --warm:#ECE8E1;
  --gray-on-ink:#A9A9A4;      /* caption on ink ground (7.8:1) */
  --lead-on-ink:#D6D6D2;
  --line-on-ink:rgba(244,244,242,.25);
  --header-h:4rem;
  --pad-x:1.25rem;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

/* paper grain (inline SVG, self-contained data: URI — allowed by CSP img-src) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection{background:var(--ink);color:var(--paper)}
.page-ink ::selection{background:var(--paper);color:var(--ink)}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
iframe{border:0;max-width:100%}

/* focus */
a:focus-visible,button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* skip link */
.skip-link{
  position:fixed;
  top:.5rem;left:.5rem;
  z-index:200;
  background:var(--ink);
  color:var(--paper);
  padding:.6rem 1rem;
  font-size:.8rem;
  transform:translateY(-300%);
}
.skip-link:focus{transform:none}
.page-ink .skip-link{border:1px solid var(--paper)}

/* ============ header ============ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad-x);
  background:rgba(244,244,242,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.page-ink .site-header{
  background:rgba(20,20,20,.92);
  border-bottom-color:var(--line-on-ink);
}
.brand{
  display:inline-flex;
  align-items:center;
  padding:.5rem 0;
}
.brand img{
  display:block;
  height:2.4rem;
  width:auto;
}
.header-nav{display:none}
@media (min-width:820px){
  .header-nav{
    display:flex;
    align-items:center;
    gap:2.25rem;
  }
  .header-nav a{
    position:relative;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.24em;
    padding:.5rem 0;
  }
  .header-nav a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:.15rem;
    height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s cubic-bezier(.22,.61,.2,1);
  }
  .page-ink .header-nav a::after{background:var(--paper)}
  .header-nav a:hover::after,
  .header-nav a:focus-visible::after,
  .header-nav a[aria-current="page"]::after{transform:scaleX(1)}
  /* RECRUIT — quietly persistent */
  .header-nav a.nav-recruit::after{transform:scaleX(1);background:var(--line)}
  .page-ink .header-nav a.nav-recruit::after{background:var(--line-on-ink)}
  .header-nav a.nav-recruit:hover::after,
  .header-nav a.nav-recruit:focus-visible::after,
  .header-nav a.nav-recruit[aria-current="page"]::after{background:var(--ink)}
  .page-ink .header-nav a.nav-recruit:hover::after,
  .page-ink .header-nav a.nav-recruit:focus-visible::after,
  .page-ink .header-nav a.nav-recruit[aria-current="page"]::after{background:var(--paper)}
  .nav-recruit .arrow{font-family:var(--sans);margin-left:.35em}
}

/* hamburger */
.menu-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  width:44px;height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
}
.menu-btn .bar{
  display:block;
  width:22px;height:1px;
  background:currentColor;
  transition:transform .35s cubic-bezier(.22,.61,.2,1);
}
body.menu-open{overflow:hidden}
@media (min-width:820px){
  body.menu-open{overflow:visible}
}
.menu-open .menu-btn .bar:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .menu-btn .bar:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (min-width:820px){
  .menu-btn{display:none}
}

/* overlay menu (mobile) */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--header-h) var(--pad-x) 2rem;
  opacity:0;
  transform:translateY(-2.5rem);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.2,1),visibility 0s .4s;
}
.page-ink .menu-overlay{background:var(--ink)}
.menu-open .menu-overlay{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s,0s,0s;
}
.menu-overlay ol{list-style:none}
.menu-overlay li{border-bottom:1px solid var(--line)}
.menu-overlay li:first-child{border-top:1px solid var(--line)}
.page-ink .menu-overlay li{border-bottom-color:var(--line-on-ink)}
.page-ink .menu-overlay li:first-child{border-top-color:var(--line-on-ink)}
.menu-overlay a{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  padding:1.1rem .25rem;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:340;
  line-height:1.1;
}
.menu-overlay .no{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--gray);
}
.page-ink .menu-overlay .no{color:var(--gray-on-ink)}
.menu-overlay .menu-caption{
  margin-top:2.5rem;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--gray);
}
.page-ink .menu-overlay .menu-caption{color:var(--gray-on-ink)}
@media (min-width:820px){
  .menu-overlay{display:none}
}

/* ============ hero (TOP first view) ============ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:clip;
  display:flex;
}

/* the signature O — a thin circular outline crossing the viewport */
.o-ring{
  position:absolute;
  top:45%;
  left:72%;
  width:170vmin;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(20,20,20,.6);
  border-radius:50%;
  animation:ring-in 1.6s cubic-bezier(.22,.61,.2,1) both;
  animation-delay:.15s;
}
/* soft warm light held inside the O (the only non-gray note, FV only) */
.o-ring::before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--warm) 0%,rgba(236,232,225,.4) 45%,rgba(236,232,225,0) 72%);
}
/* a single point on the orbit */
.o-orbit{
  position:absolute;
  inset:0;
  transform:rotate(-38deg);
}
@media (min-width:820px){
  .o-ring{
    top:48%;
    left:60%;
    width:118vmin;
    max-width:1250px;
  }
}
@keyframes ring-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.hero-inner{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:calc(var(--header-h) + 2rem) var(--pad-x) 1.5rem;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}
.eyebrow{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ink);
}
.hero-main{
  margin-top:auto;
  margin-bottom:auto;
  padding:3rem 0;
}
.wordmark{
  font-family:var(--serif);
  font-weight:340;
  line-height:1;
}
.wordmark img{
  display:block;
  width:clamp(16rem,60vw,32rem);
  height:auto;
}
.brandline{
  margin-top:2.25rem;
  font-size:clamp(1.05rem,3.4vw,1.5rem);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.7;
}

/* clip reveals — at most two per page */
.mask{display:block;overflow:hidden}
.mask>.rise{
  display:block;
  transform:translateY(110%);
  animation:rise 1s cubic-bezier(.22,.61,.2,1) forwards;
}
.rise.d1{animation-delay:.25s}
.rise.d2{animation-delay:.5s}
@keyframes rise{to{transform:translateY(0)}}

/* ============ editorial section scaffolding ============ */
.section{
  position:relative;
  padding:4.5rem var(--pad-x);
  scroll-margin-top:var(--header-h);
}
.section-inner{
  max-width:1280px;
  margin:0 auto;
}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-top:.85rem;
  margin-bottom:2.5rem;
}
.page-ink .section-head{border-top-color:var(--line-on-ink)}
.section h2,
.page-title{
  font-family:var(--serif);
  font-size:clamp(2.75rem,9vw,6.5rem);
  font-weight:340;
  font-variation-settings:"opsz" 144;
  line-height:1.05;
  letter-spacing:-.01em;
}
.sec-body{margin-top:2.25rem}
.lead{
  font-size:clamp(1.15rem,2.3vw,1.6rem);
  font-weight:500;
  letter-spacing:.05em;
  line-height:2;
  text-wrap:pretty;
}
.page-ink .lead{color:var(--lead-on-ink)}
.lead-sub{
  margin-top:1.5rem;
  font-size:1rem;
  line-height:2;
  text-wrap:pretty;
}
.page-ink .lead-sub{color:var(--lead-on-ink)}
@media (min-width:820px){
  .section{padding:8rem var(--pad-x)}
  .sec-body{
    margin-top:3.5rem;
    margin-left:38%;
    max-width:46rem;
  }
  .lead{max-width:44ch}
}

/* page hero (sub pages) */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + 3.5rem) var(--pad-x) 4.5rem;
  overflow:clip;
}
@media (min-width:820px){
  .page-hero{padding:calc(var(--header-h) + 5rem) var(--pad-x) 6rem}
}
/* faint echo of the O */
.echo-ring{
  position:absolute;
  top:8%;
  right:-14rem;
  width:30rem;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:50%;
  pointer-events:none;
}
.page-ink .echo-ring{border-color:var(--line-on-ink)}
@media (min-width:820px){
  .echo-ring{right:-10rem;top:12%}
}
.overflow-clip{overflow:clip}


/* magazine table-of-contents (TOP menu teaser) */

/* COMING SOON (TOP cast teaser / CAST page) */

/* ============ recruit (inverted spread / inverted page) ============ */
.recruit-band,
.page-ink{
  background:var(--ink);
  color:var(--paper);
}
.recruit-band .section-head{border-top-color:var(--line-on-ink)}
.recruit-band .lead{color:var(--lead-on-ink)}

.btn-recruit{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.12em;
  padding:1.15rem 2.5rem;
  border:1px solid var(--paper);
  min-height:48px;
}
.btn-recruit .arrow{
  display:inline-block;
  transition:transform .35s cubic-bezier(.22,.61,.2,1);
}
.btn-recruit:hover,
.btn-recruit:focus-visible{
  background:var(--ink);
  color:var(--paper);
}
.btn-recruit:hover .arrow,
.btn-recruit:focus-visible .arrow{
  transform:translate(3px,-3px);
}
button.btn-recruit{appearance:none;-webkit-appearance:none}
/* 無効中のCTAはホバーでも姿を変えない(後段の .btn-recruit:disabled ゴースト指定が全状態を支配する)。
   かつて :disabled:hover を紙ベタで上書きしており、押せないボタンがホバー時だけ主役に化けていた */
.btn-recruit[aria-disabled="true"],
.btn-recruit:disabled{cursor:not-allowed}
.btn-recruit:disabled:hover .arrow{transform:none}
.btn-xl{
  font-size:1.05rem;
  padding:1.4rem 3rem;
  letter-spacing:.14em;
}
.cta-row{margin-top:3rem}
.cta-note{
  margin-top:1rem;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--gray-on-ink);
}


/* ============ information / map ============ */
.info-list{border-top:1px solid var(--line)}
.info-list > div{
  display:grid;
  grid-template-columns:6.5rem 1fr;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.info-list dt{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--gray);
  padding-top:.3rem;
}
.info-list dd{
  font-size:.95rem;
  line-height:1.9;
}
.page-ink .info-list{border-top-color:var(--line-on-ink)}
.page-ink .info-list > div{border-bottom-color:var(--line-on-ink)}
.page-ink .info-list dt{color:var(--gray-on-ink)}

/* google map embed */
.map-wrap{
  margin-top:2rem;
  border:1px solid var(--line);
}
.map-embed{
  display:block;
  width:100%;
  aspect-ratio:4/3;
}
@media (min-width:820px){
  .map-embed{aspect-ratio:16/7}
}

/* buttons (outline) */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.5rem;
}
.btn-map{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.1em;
  padding:.9rem 1.75rem;
  min-height:48px;
}
.btn-map:hover,
.btn-map:focus-visible{
  background:var(--ink);
  color:var(--paper);
}
.page-ink .btn-map{
  border-color:var(--paper);
  color:var(--paper);
}
.page-ink .btn-map:hover,
.page-ink .btn-map:focus-visible{
  background:var(--paper);
  color:var(--ink);
}
/* keep the focus ring visible while the button inverts (currentColor would vanish into the page ground) */
.btn-map:focus-visible{outline-color:var(--ink)}
.page-ink .btn-map:focus-visible{outline-color:var(--paper)}

/* ============ photos (editorial collage — hairline frames, staggered) ============ */
.collage{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem 1.5rem;
  margin-top:2.75rem;
}
.collage .photo-frame,
.photo-frame img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
.photo-frame figcaption{
  margin-top:.7rem;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--gray);
}
/* the O — one photo held inside the brand circle */
@media (max-width:819px){
  .collage .c-side{width:82%;justify-self:end}
}
@media (min-width:820px){
  .collage .c-wide{grid-column:1/8}
  .collage .c-side{grid-column:8/13;margin-top:5rem}
  .collage .c-mid{grid-column:6/13}
}



/* ============ 404 ============ */
.notfound{
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  padding:calc(var(--header-h) + 3rem) var(--pad-x) 4rem;
  position:relative;
  overflow:clip;
}
.notfound .section-inner{width:100%;position:relative;z-index:1}
.nf-code{
  font-family:var(--serif);
  font-size:clamp(5rem,26vw,13rem);
  font-weight:340;
  font-variation-settings:"opsz" 144;
  line-height:1;
  letter-spacing:-.015em;
}
.nf-text{
  margin-top:2rem;
  font-size:1.05rem;
  line-height:2;
}
.nf-cta{margin-top:2.5rem}

/* ============ footer ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding:4.5rem var(--pad-x) 2rem;
  scroll-margin-top:var(--header-h);
}
.page-ink .site-footer{border-top-color:var(--line-on-ink)}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
}
/* colophon footer — one quiet line, no competition with information */
.footer-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.footer-line .fb-mark img{
  display:block;
  width:clamp(6.5rem,12vw,8.5rem);
  height:auto;
}
.colophon{
  font-size:.8rem;
  letter-spacing:.05em;
  line-height:2.1;
}
.colophon .sep{
  color:var(--gray);
  margin:0 .55em;
}
.colophon a{
  border-bottom:1px solid var(--line);
  padding-bottom:.1em;
}
.colophon a:hover,
.colophon a:focus-visible{border-bottom-color:currentColor}
.colophon .arrow{margin-left:.2em}
.page-ink .colophon{color:var(--lead-on-ink)}
.page-ink .colophon .sep{color:var(--gray-on-ink)}
.page-ink .colophon a{border-bottom-color:var(--line-on-ink)}
.footer-bottom{
  margin-top:4rem;
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.page-ink .footer-bottom{border-top-color:var(--line-on-ink)}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}
.footer-nav a{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  padding:.4rem 0;
}
.footer-nav a:hover,
.footer-nav a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.4em;
}
.copyright{
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--gray);
}
.page-ink .copyright{color:var(--gray-on-ink)}

/* ============ reduced motion: keep fades, zero the travel ============ */
@media (prefers-reduced-motion:reduce){
  .mask>.rise{
    transform:none;
    opacity:0;
    animation:rise-still .5s ease forwards;
  }
  @keyframes rise-still{to{opacity:1}}
  .o-ring{animation:ring-still .6s ease both}
  @keyframes ring-still{
    from{opacity:0;transform:translate(-50%,-50%)}
    to{opacity:1;transform:translate(-50%,-50%)}
  }
  .menu-overlay{transform:none}
  .header-nav a::after,
  .menu-btn .bar,
  .btn-recruit .arrow{transition:none}
}

/* ============================================================
   detail pass (2026-07-17 オーナー要望) — Oの反復と多様なモーション
   ============================================================ */

/* O echo — 各セクション罫線上の軌道ドット(FVの軌道の反復) */
.section-head{position:relative}
.section-head::after{
  content:"";
  position:absolute;
  top:-3px;
  left:24%;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--ink);
}
.section:nth-of-type(even) .section-head::after{left:63%}
.page-ink .section-head::after,
.recruit-band .section-head::after{background:var(--paper)}

/* O echo — menu行ホバーで輪が現れる */


/* FVの軌道ドット — 常時ゆっくり周回 */
.o-orbit{animation:orbit-turn 110s linear infinite}
@keyframes orbit-turn{
  from{transform:rotate(var(--orbit-from,-38deg))}
  to{transform:rotate(calc(var(--orbit-from,-38deg) + 360deg))}
}

/* ボタン — 円形ワイプで反転(Oが満ちて色が変わる) */
.btn-map,
.btn-recruit{position:relative;overflow:hidden;z-index:0}
.btn-map::before,
.btn-recruit::before{
  content:"";
  position:absolute;z-index:-1;
  left:50%;top:50%;
  width:220%;
  aspect-ratio:1/1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.2,1);
}
.btn-map::before{background:var(--ink)}
.page-ink .btn-map::before{background:var(--paper)}
.btn-recruit::before{background:var(--ink)}
.btn-map:hover::before,
.btn-map:focus-visible::before,
.btn-recruit:hover:not(:disabled)::before,
.btn-recruit:focus-visible:not(:disabled)::before{transform:translate(-50%,-50%) scale(1)}
/* 旧・即時反転は無効化し、文字色だけ遅延で切替 */
.btn-map:hover,
.btn-map:focus-visible{background:transparent;color:var(--paper);transition:color .3s ease .12s}
.page-ink .btn-map:hover,
.page-ink .btn-map:focus-visible{background:transparent;color:var(--ink)}
.btn-recruit:hover:not(:disabled),
.btn-recruit:focus-visible:not(:disabled){background:var(--paper);color:var(--paper);transition:color .3s ease .12s}
.btn-recruit:disabled::before{display:none}

/* 写真 — ホバーでゆっくり寄る */
@media (hover:hover) and (pointer:fine){
  .photo-frame picture{display:block;overflow:hidden}
  .photo-frame img,
  .photo-frame:hover img{transform:scale(1.035)}
}

/* 出現演出 — 要素別に型を変える(rise/left/scale/curtain) */
html.js [data-rv]{
  opacity:0;
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.2,1);
}
html.js [data-rv="rise"]{transform:translateY(1.4rem)}


/* カーテンはfigure自体でなく子pictureをクリップする
   (全面クリップされた要素はIntersectionObserverが交差0と判定し発火しないため) */
html.js [data-rv="curtain"],
html.js [data-rv="curtain-up"]{opacity:1;transition:none}
html.js [data-rv="curtain"] picture{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.22,.61,.2,1);
}
html.js [data-rv="curtain-up"] picture{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.1s cubic-bezier(.22,.61,.2,1);
}
html.js [data-rv="curtain"] figcaption,
html.js [data-rv="curtain-up"] figcaption{
  opacity:0;
  transition:opacity .6s ease .55s;
}
html.js [data-rv].rv-in{
  opacity:1;
  transform:none;
}
html.js [data-rv="curtain"].rv-in picture,
html.js [data-rv="curtain-up"].rv-in picture{clip-path:inset(0 0 0 0)}
html.js [data-rv="curtain"].rv-in figcaption,
html.js [data-rv="curtain-up"].rv-in figcaption{opacity:1}
html.js [data-rv][data-rv-d="1"]{transition-delay:.12s}
html.js [data-rv][data-rv-d="2"]{transition-delay:.24s}


/* reduced-motion — 消さずに弱める(フェードのみ・周回停止) */
@media (prefers-reduced-motion:reduce){
  html.js [data-rv],
  html.js [data-rv="curtain"],
  html.js [data-rv="curtain-up"]{
    transform:none;
    opacity:0;
    transition:opacity .6s ease;
  }
  html.js [data-rv="curtain"] picture,
  html.js [data-rv="curtain-up"] picture{clip-path:none;transition:none}
  html.js [data-rv="curtain"] figcaption,
  html.js [data-rv="curtain-up"] figcaption{opacity:1;transition:none}
  html.js [data-rv].rv-in{opacity:1}
  .o-orbit{animation:none}
  .btn-map::before,.btn-recruit::before{transition:none}
}

/* ============ featured gallery — 1枚目を常に大きく、タップで主役交代 ============ */
.gallery{margin-top:2.75rem}
.gallery-stage{margin:0}
.gallery-stage picture{transition:opacity .35s ease}
.gallery-stage picture.is-swapping{opacity:0}
.gallery-thumbs{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
}
@media (min-width:820px){
  .gallery-thumbs{gap:1rem;margin-top:1.25rem}
}
.thumb{
  appearance:none;
  padding:0;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  opacity:.55;
  transition:opacity .35s ease,border-color .35s ease;
}
.thumb picture,
.thumb img{display:block;width:100%;height:auto}
.thumb:hover{opacity:.85}
.thumb.is-active{opacity:1;border-color:var(--ink)}
/* ABOUTコラージュ4枚目(矩形) */
@media (min-width:820px){
  .collage .c-tail{grid-column:2/9;margin-top:1rem}
}
@media (max-width:819px){
  .collage .c-tail{width:88%}
}
@media (prefers-reduced-motion:reduce){
  .gallery-stage picture{transition:none}
  .thumb{transition:none}
}

.nowrap{white-space:nowrap}

/* ============ recruit — 白いシルエット(一番の見せ場) ============ */
.recruit-band .section-inner,
.page-hero .section-inner{position:relative}
.recruit-figure{
  margin:2.5rem auto 0;
  width:min(11rem,42vw);
  position:relative;
  display:block;
}
.recruit-figure img{
  display:block;
  width:100%;
  height:auto;
}
/* 彼女を抱くO(細い輪) */
.recruit-ring{
  position:absolute;
  top:6%;
  left:50%;
  width:190%;
  aspect-ratio:1/1;
  transform:translateX(-50%);
  border:1px solid rgba(244,244,242,.28);
  border-radius:50%;
  pointer-events:none;
}
@media (min-width:1024px){
  .recruit-band .section-inner{min-height:34rem}
  .recruit-band .recruit-figure{
    position:absolute;
    right:8%;
    bottom:-8rem;              /* 帯の下端に立たせる(paddingぶん下げる) */
    width:12.5rem;
    margin:0;
  }
  .page-hero .recruit-figure-page{
    position:absolute;
    right:6%;
    bottom:-6rem;
    width:11rem;
    margin:0;
  }
}
/* モバイル: PCと同じ「右側に小さく立つ」構図(全幅ブロック化はスクロール負担のため廃止) */
@media (max-width:1023px){
  .recruit-band .section-inner{position:relative;min-height:15rem}
  .recruit-band .recruit-figure{
    position:absolute;
    right:-0.75rem;
    bottom:-4.5rem;            /* .section のpadding-bottomぶん下げ、帯下端に立たせる */
    width:min(7.5rem,34vw);
    margin:0;
  }
  .recruit-band .sec-body{padding-right:min(9rem,38vw)}
  .recruit-band .btn-recruit,
  .page-hero .btn-recruit{white-space:nowrap;padding-left:1.25rem;padding-right:1.25rem}
  .page-hero .recruit-figure-page{
    position:absolute;
    right:-0.5rem;
    bottom:-4.5rem;
    width:min(7rem,32vw);
    margin:0;
  }
  .page-ink .page-hero .sec-body{padding-right:min(8.5rem,36vw)}
  .page-hero .section-inner{position:relative}
}
.recruit-band{overflow:clip}
@media (min-width:1024px){
  .recruit-band .sec-body{padding-right:17rem}
  .page-ink .page-hero .sec-body{padding-right:15rem}
}

/* ============ Codex案S — 蝶の展開(正式素材のみ) ============ */
/* S1: FVの軌道を飛ぶ蝶(黒点の後継) */
.o-fly{
  position:absolute;
  top:calc(50% - 12px);
  left:-12px;
  width:24px;
  height:auto;
}
/* S2: 罫線に止まる蝶(標本のように・要素ごと僅かに傾ける) */
.section-head .perch{
  position:absolute;
  top:-10px;
  left:58%;
  width:16px;
  height:auto;
  transform:rotate(8deg);
}
.section-head .perch-l{left:30%;transform:rotate(-7deg)}

/* ============ Codex案A/B — 生成アセット ============ */
/* A3: menuカテゴリの円形線画アイコン */
/* A4: aboutの飛跡(コラージュ最下段・線の右端に蝶) */
.collage .flight{
  grid-column:1/-1;
  position:relative;
  margin-top:.5rem;
}
.flight-line{display:block;width:100%;height:auto}
.flight-butterfly{
  position:absolute;
  right:-4px;
  top:56%;
  width:18px;
  height:auto;
  transform:rotate(12deg);
}
/* B5: castの円内・翅脈テクスチャ(低コントラスト) */
/* B6: recruitの輪を「開いた円」へ(蝶の羽ばたきの切れ目) */
.recruit-ring{
  border:none;
  background:url("/img/openring.png") center / contain no-repeat;
  aspect-ratio:495/520;
  opacity:.75;
}

/* system(旧menu): 料金表+ドリンク導入 */

/* セクションの和文ラベル(文章でなく単語で示す) */

/* ============ system 控えめ(2026-07-26 オーナー指示) ============
   独立した「コーナー」にしない: 見出しを1段落とし、informationと同じ紙の上に
   余白だけで同居させる。情報は60分いくらが分かる最小限 */
.section-quiet{padding-top:3.25rem;padding-bottom:.5rem}
.section-quiet .sec-body{margin-top:1rem}
.section-quiet .info-list{max-width:34rem}
/* 行の詰めも1段絞り、ブロック全体の縦を潰す */
.section-quiet .info-list > div{padding:.6rem 0}
.section-quiet .info-list dt{padding-top:.2rem}
.section-quiet + .section{padding-top:3.25rem}
@media (min-width:820px){
  .section-quiet{padding-top:4.5rem;padding-bottom:.75rem}
  .section-quiet + .section{padding-top:4.5rem}
}

/* 準備中ボタンの後退(MoonStella知見の移植):
   「一番押したくなるボタンが押せない」倒錯を避け、リンク確定までゴースト表示 */
.btn-recruit:disabled{
  background:transparent;
  color:var(--gray-on-ink);
  border:1px solid var(--line-on-ink);
  cursor:default;
}
.btn-recruit:disabled .arrow{opacity:.55}

/* タップ領域44px(モバイル導線) */
.footer-nav a{padding:.8rem .3rem;margin:-.5rem 0}
.colophon a{padding-top:.6rem;padding-bottom:.6rem}

/* ============================================================
   面のリズム(2026-07-26 オーナー指示「統一感とメリハリ」)
   紙(hero) → 紙(about) → 墨(recruit) → 紙(system・細) → 墨(information+footer)
   墨を2本の柱にし、白い面をその間の息継ぎにする。色は増やさず面だけで抑揚を作る。
   全ページが「白で始まり黒で締まる」構造に揃う
   ============================================================ */
.info-band,
.site-footer{
  background:var(--ink);
  color:var(--paper);
}
.info-band{padding-bottom:2.5rem}          /* 直下の墨フッターへ続くので余白を詰める */
.info-band .section-head{border-top-color:var(--line-on-ink)}
.info-band .section-head::after{background:var(--paper)}
.info-band .echo-ring{border-color:var(--line-on-ink)}
.info-band .info-list{border-top-color:var(--line-on-ink)}
.info-band .info-list > div{border-bottom-color:var(--line-on-ink)}
.info-band .info-list dt{color:var(--gray-on-ink)}

/* 地図 — 墨の上に置かれた1枚の紙として額装する(黒地の中で最も明るい面=見せたい情報) */
.info-band .map-wrap{
  border-color:rgba(244,244,242,.35);
  background:var(--paper);
}

/* ボタン — 墨地では紙色の線と文字。ホバーで紙色の円が満ちて反転する */
.info-band .btn-map{
  border-color:var(--paper);
  color:var(--paper);
}
.info-band .btn-map::before{background:var(--paper)}
.info-band .btn-map:hover,
.info-band .btn-map:focus-visible{background:transparent;color:var(--ink)}
.info-band .btn-map:focus-visible{outline-color:var(--paper)}

/* フッター(全ページ墨) */
.site-footer{border-top-color:var(--line-on-ink)}
.colophon{color:var(--lead-on-ink)}
.colophon .sep{color:var(--gray-on-ink)}
.colophon a{border-bottom-color:var(--line-on-ink)}
.colophon a:hover,
.colophon a:focus-visible{border-bottom-color:var(--paper)}
.footer-bottom{border-top-color:var(--line-on-ink)}
.copyright{color:var(--gray-on-ink)}

/* INFORMATION の tel を「押せる」形にする(タップ44px確保+下線)。
   墨ベタ化で information が主要導線になったため、フッター奥付と同じ作法を持ち込む */
.info-list dd a{
  display:inline-block;
  padding:.6rem 0;
  margin:-.6rem 0;
  border-bottom:1px solid var(--line);
}
.info-band .info-list dd a,
.page-ink .info-list dd a{border-bottom-color:var(--line-on-ink)}
.info-list dd a:hover,
.info-list dd a:focus-visible{border-bottom-color:currentColor}