:root{
  --ink:#111111; --paper:#FFFFFF; --sub:#555555; --body:#444444; --on-ink-sub:#C8C8C8;
  --ph:#DAD8D4; --rule:#CFCDC9;
  --en:'Archivo','Zen Kaku Gothic New',sans-serif; --ja:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;
  --gutter:40px; --bar:64px;
  --ease:cubic-bezier(.2,.65,.2,1); --curtain:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ja);font-size:16px;line-height:1.9;-webkit-text-size-adjust:100%;word-break:auto-phrase;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
figure{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.label{margin:0;font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.24em;line-height:1.6}
.cap{margin-top:12px;font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--sub);line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border:1px solid var(--ink);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.12em}
.btn-ink{background:var(--ink);color:var(--paper)}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.2em;text-underline-offset:6px}

/* header */
.hd{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px}
.hd-mark{display:inline-flex;align-items:center;min-height:44px}
.hd-mark img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:32px;font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.2em}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.nav .nav-reserve{padding:0 22px;background:var(--ink);color:var(--paper)}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;align-items:center;justify-content:center;cursor:pointer}
.menu-btn .ic-close,.hd.open .menu-btn .ic-open{display:none}
.hd.open .menu-btn .ic-close{display:block}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:72px;padding-top:16px;padding-bottom:120px}
.hero-id{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hero-id h1{margin:0}
.hero-logo{width:330px;height:auto}
.hero-meta{display:flex;flex-direction:column;gap:4px}
.ginza{font-family:var(--en);font-size:15px;font-weight:500;letter-spacing:.6em}
.since{font-size:14px;color:var(--sub)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-photo img{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 30%}
/* 写真を重ねて切り替える (ヒーロー・ABOUT の店内、js/slides.js) */
.slides{position:relative}
.slides .sl{position:absolute;inset:0;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.slides .sl.on{opacity:1}

/* sections */
.sec{border-top:1px solid var(--ink)}
.sec-in{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-top:96px;padding-bottom:112px}

/* 01 about */
.about{display:flex;gap:56px;align-items:flex-start}
.about figure{flex:1 1 auto;min-width:0}
.about img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about-text{flex:0 0 auto;writing-mode:vertical-rl;height:470px;font-size:17px;font-weight:500;line-height:2.4;letter-spacing:.1em}
.about-text p{margin:0}
.tcy{text-combine-upright:all}
.about-text.en{writing-mode:horizontal-tb;flex:0 1 360px;height:auto;font-family:var(--ja);font-size:17px;line-height:2;letter-spacing:.02em}
.about-text.en p + p{margin-top:12px}

/* 02 works */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.works img{width:100%;aspect-ratio:4/5;object-fit:cover}
.works-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}
.works-foot .cap{margin:0}
/* Instagram の最新投稿 (js/ig.js が /ig/feed.json から並べる。Instagram と同じ 3:4) */
.ig{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}
.ig .works-foot{margin-top:0}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:20px}
.ig-grid[hidden]{display:none}
.ig-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* 03 stylist */
.stylist{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:end}
.stylist img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.role{margin:0;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--sub)}
.name{margin:8px 0 0;font-size:30px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.roman{margin:4px 0 0;font-family:var(--en);font-size:12px;letter-spacing:.3em}
.bio{margin:28px 0 0;color:var(--body);font-size:15px;max-width:30em}
.bio + .bio{margin-top:12px}
/* 2人目からは同じ大きさで、細い線で区切る (11/2 優太郎さんを先に) */
.stylist + .stylist{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}

/* 04 menu */
.price{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.price li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.price .item{font-weight:700}
.price .item small{margin-left:8px;font-size:13px;font-weight:400;color:var(--sub)}
.price .yen{font-family:var(--en);font-weight:500;font-size:17px;letter-spacing:.02em;white-space:nowrap}
.note{margin:16px 0 0;font-size:14px;color:var(--sub)}
.first{margin-top:72px}
.first h3{margin:0 0 4px;font-size:18px;font-weight:700;letter-spacing:.08em}
.first-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:20px 0 0}
.first-grid dt{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--sub)}
.first-grid dd{margin:8px 0 0;font-size:15px;color:var(--body)}
.first-grid div{padding-top:16px;border-top:1px solid var(--ink)}
.outcall{margin:56px 0 0;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:15px}

/* 05 access */
.access{background:var(--ink);color:var(--paper);border-top:0}
.access-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:48px}
.access-info{display:flex;flex-direction:column;gap:12px}
.addr{margin:0;font-size:20px;font-weight:700;line-height:1.7}
.dim{color:var(--on-ink-sub);font-size:15px}
.access p{margin:0}
.access .tel{font-size:15px}
.hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;font-size:15px}
.hours dt{color:var(--on-ink-sub)}
.hours dd{margin:0;font-family:var(--en);letter-spacing:.04em}
.closed{margin-top:16px !important}
.access .cap{color:var(--on-ink-sub)}
.ph{background:#2A2A2A;color:#9A9A9A;display:flex;align-items:center;justify-content:center;font-size:13px;text-align:center;aspect-ratio:4/5}
.entrance img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:64px}
.ft-logo{width:120px;height:auto}
.ft-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-family:var(--en);font-size:12px;letter-spacing:.2em}
.ft-links a{display:inline-flex;align-items:center;min-height:44px}
.ft-links span{color:var(--on-ink-sub)}

/* smartphone bar */
.bar{display:none}

@media (max-width:900px){
  :root{--gutter:24px}
  body{padding-bottom:var(--bar)}
  .hd{padding-top:16px;padding-bottom:16px}
  .hd-mark img{height:30px}
  .nav{display:none}
  .menu-btn{display:inline-flex;position:relative;z-index:21}
  .hd.open .nav{display:flex;position:fixed;inset:0;z-index:20;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:0 var(--gutter);background:var(--paper);font-size:20px}
  .hd.open .nav-reserve{margin-top:24px;min-height:56px;padding:0 32px}
  .hero{grid-template-columns:1fr;gap:28px;padding-top:4px;padding-bottom:72px}
  .hero-id{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}
  .hero-logo{width:170px}
  .hero-meta{align-items:flex-end;text-align:right}
  .ginza{font-size:13px;letter-spacing:.5em;margin-right:-.5em}
  .since{font-size:13px}
  .cta{display:none}
  .hero-photo{margin:0 calc(var(--gutter) * -1)}
  .hero-photo img{aspect-ratio:4/5}
  .sec-in{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:72px}
  .about{flex-direction:column;gap:28px}
  .about figure{width:100%}
  .about-text,.about-text.en{writing-mode:horizontal-tb;flex:none;height:auto;font-size:16px;line-height:2;letter-spacing:.04em}
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .works-foot{flex-direction:column;align-items:flex-start;gap:4px}
  .ig{margin-top:48px;padding-top:28px}
  .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:16px}
  .stylist{grid-template-columns:1fr;gap:28px}
  .stylist + .stylist{margin-top:48px;padding-top:28px}
  .first{margin-top:56px}
  .first-grid{grid-template-columns:1fr;gap:20px}
  .access-grid{grid-template-columns:1fr;gap:40px}
  .access .ph,.entrance img{aspect-ratio:3/2}
  .ft{flex-direction:column;align-items:flex-start}
  .ft-logo{width:96px}
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:1fr 1fr;height:var(--bar);border-top:1px solid var(--ink)}
  .bar a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.08em}
  .bar .tel{background:var(--paper);color:var(--ink)}
  .bar .rsv{background:var(--ink);color:var(--paper)}
}

/* motion: 読み込み時はCSSだけ、スクロール時は js/reveal.js が html に .rv を付ける */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes rv-o{from{opacity:0}}
  @keyframes rv-up{from{opacity:0;transform:translateY(10px)}}
  @keyframes rv-curtain{from{transform:scaleY(1)}}
  @keyframes rv-settle{from{transform:scale(1.06)}}
  .hd{animation:rv-o 1.2s .1s backwards}
  .hero-logo{animation:rv-up 1.2s .15s backwards var(--ease)}
  .hero-meta{animation:rv-up 1s .5s backwards var(--ease)}
  .cta{animation:rv-up 1s .65s backwards var(--ease)}
  .hero-photo{overflow:hidden}
  .hero-photo::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleY(0);transform-origin:bottom;animation:rv-curtain 1.3s .2s backwards var(--curtain)}
  .hero-photo img{animation:rv-settle 2.2s .2s backwards var(--ease)}

  .rv .sec:not(.access){position:relative;border-top-color:transparent}
  .rv .sec:not(.access)::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
  .rv .rv-t{opacity:0;transform:translateY(14px)}
  .rv .rv-i{clip-path:inset(0 0 100% 0)}
  /* transition は .in 側だけに置く（隠すときは一瞬、出すときだけ動く） */
  .rv .sec.in::before{transform:none;transition:transform 1.6s var(--curtain) var(--d,0s)}
  .rv .rv-t.in{opacity:1;transform:none;transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
  .rv .rv-i.in{clip-path:inset(0);transition:clip-path 1.3s var(--curtain) var(--d,0s)}
}

/* hover: マウスのある端末だけ。文字リンクは線、ボタンは白黒反転 */
@keyframes line-pass{0%{transform-origin:right}45%{transform:scaleX(0);transform-origin:right}55%{transform:scaleX(0);transform-origin:left}100%{transform-origin:left}}
@media (hover:hover){
  .btn,.nav .nav-reserve{transition:background-color .35s,color .35s,box-shadow .35s}
  .btn:hover{background:var(--ink);color:var(--paper)}
  .btn-ink:hover,.nav .nav-reserve:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .hd-mark,.ig-grid a{transition:opacity .35s}
  .hd-mark:hover,.ig-grid a:hover{opacity:.5}
  .nav a:not(.nav-reserve),.tlink,.ft-links a{position:relative;text-decoration:none}
  .nav a:not(.nav-reserve)::after,.tlink::after,.ft-links a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .9em);height:1px;background:currentColor}
  .nav a:not(.nav-reserve)::after{transform:scaleX(0);transform-origin:right;transition:transform .5s var(--curtain)}
  .nav a:not(.nav-reserve):hover::after{transform:none;transform-origin:left}
  .tlink:hover::after,.ft-links a:hover::after{animation:line-pass .9s var(--curtain)}
}
@media (prefers-reduced-motion:reduce){
  .nav a::after,.tlink::after,.ft-links a::after{transition:none!important;animation:none!important}
}