/* サロンのページ C 案「銀座の扉（昼も夜も）」（2026-10-02）
   明るい個室で始め 明るい節と落ち着いた節を交互に 差し色は銅 */
.hc{--ink:#0E1013;--ink2:#15181C;--light:#F2F1EE;--on-dark:#E9E6E1;--sub-dark:#C9C4BC;--mute-dark:#8F8A83;--on-light:#1C1E21;--sub-light:#4A4D52;--mute-light:#6E6A64;--cu:#D2A57A;--cu-deep:#8E5F36;background:var(--ink);color:var(--on-dark);font-family:"Noto Sans JP","Hiragino Sans",sans-serif}
.hc h1,.hc h2,.hc h3{margin:0;font-weight:400}
.hc h2{font-family:"Shippori Mincho","Noto Serif JP",serif;font-size:clamp(28px,3.6vw,44px);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.hc p{margin:0}
.hc img{display:block;width:100%;height:auto}
.hc a:focus-visible{outline:2px solid var(--cu);outline-offset:3px}
.hc-wrap{max-width:1240px;margin:0 auto}
.hc-sec{padding:clamp(80px,10vw,140px) clamp(20px,5vw,64px)}
.hc-sec.is-light{background:var(--light);color:var(--on-light)}
.hc-sec.is-dark2{background:var(--ink2)}
.hc-eye{font-family:"Cormorant Garamond",serif;font-size:14px;letter-spacing:.3em;color:var(--cu);margin-bottom:14px!important;text-transform:uppercase}
.is-light .hc-eye{color:var(--cu-deep)}
.hc-lead{margin-top:22px!important;font-size:15px;line-height:2.1;color:var(--sub-dark);max-width:34em}
.is-light .hc-lead{color:var(--sub-light)}
.hc-en{margin-top:12px!important;font-family:"Cormorant Garamond",serif;font-size:18px;line-height:1.6;color:var(--mute-dark)}
.is-light .hc-en{color:var(--mute-light)}
html:not([lang="ja"]) .hc-en{display:none}
.hc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.hc-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}

/* hero */
.hc-hero{position:relative;min-height:min(92svh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hc-hero picture,.hc-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,19,.8) 0%,rgba(14,16,19,.4) 55%,rgba(14,16,19,.05) 100%)}
.hc-hero-copy{position:relative;z-index:1;padding:120px clamp(20px,5vw,64px) 72px;max-width:900px}
.hc-hero .hc-tag{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;color:var(--cu);margin-bottom:18px}
.hc-hero h1{font-family:"Shippori Mincho","Noto Serif JP",serif;font-size:clamp(40px,5.6vw,76px);line-height:1.35;color:#fff;word-break:keep-all}
.hc-hero .hc-lead{color:#E3DED7}
.hc-hero .hc-en{color:#C9C4BC}
.hc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px!important}
.hc-btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;font-size:14px;letter-spacing:.04em;text-decoration:none;touch-action:manipulation}
.hc-btn.is-cu{background:var(--cu);color:var(--ink)}
.hc-btn.is-cu:hover{background:#E0B78F}
.hc-btn.is-line{border:1px solid #fff;color:#fff}
.hc-btn.is-line:hover{background:rgba(255,255,255,.1)}

/* room */
.hc-rooms{list-style:none;padding:0;margin:28px 0 0}
.hc-rooms li{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid #C9C6C0;font-size:14px}
.hc-rooms li:last-child{border-bottom:1px solid #C9C6C0}
.hc-rooms b{font-weight:500;color:var(--cu-deep)}

/* ritual */
.hc-ritual figure{margin:0}
.hc-ritual img{aspect-ratio:4/5;object-fit:cover}
.hc-ritual figcaption{margin-top:16px}
.hc-ritual figcaption b{display:block;font-family:"Shippori Mincho",serif;font-weight:500;font-size:18px;color:#fff}
.hc-ritual figcaption span{font-size:14px;line-height:1.9;color:var(--sub-dark)}

/* care */
.hc-brands{list-style:none;padding:0;margin:0}
.hc-brands li{border-top:1px solid #C9C6C0}
.hc-brands li:last-child{border-bottom:1px solid #C9C6C0}
.hc-brands a{display:flex;justify-content:space-between;align-items:center;min-height:64px;color:var(--on-light);text-decoration:none}
.hc-brands a span:first-child{font-family:"Cormorant Garamond",serif;font-size:26px}
.hc-brands a span:last-child{font-size:12px;color:var(--cu-deep)}
.hc-brands a:hover span:first-child{color:var(--cu-deep)}
.hc-more{margin-top:20px!important;font-size:14px}
.hc-more a{color:var(--cu-deep)}

/* styles */
.hc-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
.hc-styles a{color:inherit;text-decoration:none}
.hc-styles img{aspect-ratio:3/4;object-fit:cover}
.hc-styles span{display:block;margin-top:10px;font-size:13px;color:var(--sub-light)}
@media (max-width:720px){.hc-styles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* voices */
.hc-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px;margin-top:40px}
.hc-voice{display:block;border-top:1px solid var(--cu-deep);padding-top:18px;color:var(--on-light);text-decoration:none}
.hc-voice p{font-family:"Shippori Mincho",serif;font-size:17px;line-height:1.9}
.hc-voice small{display:block;margin-top:12px;font-size:12px;color:var(--mute-light);letter-spacing:.04em}
.hc-note{margin-top:28px!important;font-size:12px;color:var(--mute-light)}

/* booking */
.hc-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;background:#2A2D31;margin-top:40px}
.hc-stores a{display:flex;flex-direction:column;gap:6px;padding:28px;background:var(--ink2);color:#fff;text-decoration:none;min-height:132px}
.hc-stores a:hover{background:#1C2025}
.hc-stores .c{font-family:"Cormorant Garamond",serif;font-size:26px}
.hc-stores .r{font-size:13px;color:var(--sub-dark)}
.hc-stores .g{font-size:13px;color:var(--cu)}
.hc-detail{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px!important;font-size:13px}
.hc-detail a{color:var(--sub-dark);display:inline-flex;align-items:center;min-height:44px}

/* faq */
.hc-faq{max-width:820px;margin:0 auto}
.hc-faq details{border-top:1px solid #C9C6C0}
.hc-faq details:last-of-type{border-bottom:1px solid #C9C6C0}
.hc-faq summary{cursor:pointer;list-style:none;min-height:56px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px}
.hc-faq summary::-webkit-details-marker{display:none}
.hc-faq summary::after{content:"+";color:var(--cu-deep);font-size:18px}
.hc-faq details[open] summary::after{content:"−"}
.hc-faq details p{padding:0 0 18px;font-size:14px;line-height:2;color:var(--sub-light)}

/* closing */
.hc-close{text-align:center}
.hc-close h2{color:#fff}
.hc-close .hc-cta{justify-content:center}
.hc-close .legal-links a{color:var(--mute-dark)!important}
.hc-close .legal-links{color:var(--mute-dark)!important}

/* ── スクロールの物語（2026-10-04）──
   開く：写真がゆっくり引き 文字が順に現れる
   章：見出しに 01 02 … の番号 見出しと本文が順に浮かぶ
   写真：下から幕が上がり 内側の写真がわずかに流れる
   並び：一枚ずつ遅れて現れる 罫線は左から引かれる
   上端：銅の細い線で 読み進めた量を示す
   動きを減らす設定では すべて止めて最初から見せる */
.hc [data-reveal]{transition-delay:var(--d,0ms)}

/* 開く */
@keyframes hcSettle{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes hcRise{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes hcTrack{from{letter-spacing:.16em;opacity:0}to{letter-spacing:.02em;opacity:1}}
.hc-hero picture img{animation:hcSettle 9s cubic-bezier(.16,1,.3,1) both}
.hc-hero-copy>*{animation:hcRise 1.2s cubic-bezier(.16,1,.3,1) both}
.hc-hero-copy>.hc-tag{animation-delay:.2s}
.hc-hero-copy>h1{animation:hcTrack 1.6s cubic-bezier(.16,1,.3,1) .35s both}
.hc-hero-copy>.hc-lead{animation-delay:.8s}
.hc-hero-copy>.hc-en{animation-delay:1s}
.hc-hero-copy>.hc-cta{animation-delay:1.2s}
.hc-hero::before{content:"";position:absolute;left:50%;bottom:18px;z-index:2;width:1px;height:44px;background:linear-gradient(#D2A57A,transparent);transform-origin:top;animation:hcCue 2.4s ease-in-out 2s infinite}
@keyframes hcCue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 章の番号 */
.hc{counter-reset:hcchap}
.hc-chap{counter-increment:hcchap}
.hc-chap::before{content:counter(hcchap,decimal-leading-zero);display:inline-block;margin-right:14px;padding-right:14px;border-right:1px solid currentColor;font-style:italic}

/* 写真の幕 */
.hc [data-reveal="img"]{opacity:1;filter:none;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) var(--d,0ms)}
.hc [data-reveal="img"].is-revealed{clip-path:inset(0 0 0 0)}
.hc [data-reveal="img"] img{transform:scale(1.14);transition:transform 2.2s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.hc [data-reveal="img"].is-revealed img{transform:scale(1)}
.hc-ritual figure,.hc-styles a{overflow:hidden}
.hc-ritual figure picture,.hc-ritual figure>img,.hc-styles picture{display:block;overflow:hidden}

/* 罫線を引く */
.hc-brands li,.hc-rooms li,.hc-faq details{position:relative}
.hc-brands li[data-reveal]::after,.hc-rooms li[data-reveal]::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:#8E5F36;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1) calc(var(--d,0ms) + 200ms)}
.hc-brands li.is-revealed::after,.hc-rooms li.is-revealed::after{transform:scaleX(1)}

/* 197 */
.hc-count{display:flex;align-items:baseline;gap:14px;margin-top:28px!important}
.hc-count-n{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(64px,9vw,104px);line-height:1;color:var(--cu-deep);font-variant-numeric:tabular-nums}
.hc-count-c{font-size:13px;color:var(--sub-light);letter-spacing:.06em}

/* 予約の店：銅が下から満ちる */
.hc-stores a{position:relative;overflow:hidden}
.hc-stores a>*{position:relative;z-index:1}
.hc-stores a::before{content:"";position:absolute;inset:0;background:#D2A57A;transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hc-stores a:hover::before,.hc-stores a:focus-visible::before{transform:scaleY(1)}
.hc-stores a:hover .c,.hc-stores a:hover .r,.hc-stores a:hover .g,.hc-stores a:focus-visible .g{color:#0E1013}
.hc-brands a span:last-child{transition:transform .4s ease}
.hc-brands a:hover span:last-child{transform:translateX(6px)}
.hc-btn{transition:background .3s ease,color .3s ease,transform .3s ease}
.hc-btn:active{transform:translateY(1px)}

/* 読み進めた量 */
.hc-progress{display:none}
@supports (animation-timeline: scroll()){
  .hc-progress{display:block;position:fixed;left:0;top:0;z-index:70;width:100%;height:2px;background:#D2A57A;transform-origin:left;transform:scaleX(0);animation:hcProg linear both;animation-timeline:scroll(root)}
  @keyframes hcProg{to{transform:scaleX(1)}}
  /* 写真がわずかに流れる */
  .hc-par img{animation:hcDrift linear both;animation-timeline:view();animation-range:cover}
  @keyframes hcDrift{from{translate:0 -5%}to{translate:0 5%}}
  .hc-par{overflow:hidden}
  .hc-hero picture{animation:hcHeroOut linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes hcHeroOut{to{opacity:.35;translate:0 18%}}
}

@media (prefers-reduced-motion:reduce){
  .hc *,.hc *::before,.hc *::after{animation:none!important;transition:none!important}
  .hc [data-reveal],.hc [data-reveal="img"]{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
  .hc [data-reveal="img"] img{transform:none!important}
  .hc-progress{display:none!important}
}

/* ── ホテルの格（2026-10-04）──
   画面いっぱいの扉 中央の文字 広い余白 映画の幕間 下に予約バー */
.hc{--light:#F4F3F0}
.hc-hero{min-height:100svh;align-items:center;justify-content:center;text-align:center}
.hc-hero::after{background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(14,16,19,.62) 0%,rgba(14,16,19,.35) 60%,rgba(14,16,19,.55) 100%)}
.hc-hero-copy{max-width:1000px;margin:0 auto;padding:120px 24px 96px;display:flex;flex-direction:column;align-items:center}
.hc-hero .hc-tag{font-style:normal;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:#E8CDB0}
.hc-hero h1{font-size:clamp(40px,6.2vw,88px);letter-spacing:.06em;line-height:1.45}
.hc-hero .hc-lead{max-width:36em;font-size:15px;line-height:2.3}
.hc-hero .hc-cta{justify-content:center}
.hc-btn{letter-spacing:.18em;font-size:13px;min-height:54px;padding:0 34px}
.hc-btn.is-cu{background:transparent;border:1px solid #D2A57A;color:#fff}
.hc-btn.is-cu:hover{background:#D2A57A;color:#0E1013}
.hc-close .hc-btn.is-cu{background:#D2A57A;color:#0E1013}

/* 広い余白と大きな見出し */
.hc-sec{padding:clamp(110px,13vw,200px) clamp(24px,6vw,96px)}
.hc h2{font-size:clamp(30px,4.2vw,54px);letter-spacing:.06em;line-height:1.6}
.hc-lead{font-size:15.5px;line-height:2.3}
.hc-eye{font-size:12px!important;letter-spacing:.42em}
/* 一列の章は中央に（ホテルの章扉） */
.hc-sec>.hc-wrap>.hc-eye,.hc-sec>.hc-wrap>h2,.hc-sec>.hc-wrap>.hc-lead,.hc-faq>.hc-eye,.hc-faq>h2{text-align:center;margin-left:auto;margin-right:auto}
.hc-sec>.hc-wrap>.hc-lead{max-width:40em}
.hc-sec>.hc-wrap>.hc-cta{justify-content:center}
.hc-two{gap:clamp(48px,7vw,120px)}
.hc-ritual{gap:clamp(20px,3vw,40px)}
.hc-voice p{font-size:18px;line-height:2}

/* 映画の幕間 */
.hc-interlude{position:relative;min-height:82svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.hc-il-pic,.hc-il-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-interlude::after{content:"";position:absolute;inset:0;background:rgba(14,16,19,.45)}
.hc-il-copy{position:relative;z-index:1;padding:0 24px}
.hc-il-eye{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.42em;color:#E8CDB0;margin-bottom:22px!important}
.hc-il-line{font-family:"Shippori Mincho","Noto Serif JP",serif;font-size:clamp(28px,4.4vw,56px);letter-spacing:.14em;color:#fff;word-break:keep-all}
@supports (animation-timeline: view()){
  .hc-il-pic img{animation:hcIl linear both;animation-timeline:view();animation-range:cover}
  @keyframes hcIl{from{transform:scale(1.18) translateY(-4%)}to{transform:scale(1.04) translateY(4%)}}
}

/* 予約バー（パソコン幅） */
.hc-resv{display:none}
@media (min-width:1024px){
  #stickyBook{display:none!important}
  .hc-resv{display:flex;align-items:center;gap:0;position:fixed;left:50%;bottom:28px;z-index:65;transform:translate(-50%,24px);opacity:0;pointer-events:none;
    background:rgba(14,16,19,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#E9E6E1;border:1px solid rgba(210,165,122,.35);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .hc-resv.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .hc-resv-brand{padding:0 28px;font-family:"Cormorant Garamond",serif;font-size:13px;letter-spacing:.32em;border-right:1px solid rgba(233,230,225,.18);line-height:60px}
  .hc-resv-lab{padding:0 12px 0 24px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#C9C4BC}
  .hc-resv select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#fff;font-family:"Cormorant Garamond",serif;font-size:18px;letter-spacing:.08em;padding:0 34px 0 4px;height:60px;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#D2A57A 50%),linear-gradient(135deg,#D2A57A 50%,transparent 50%);background-position:calc(100% - 16px) 28px,calc(100% - 11px) 28px;background-size:5px 5px;background-repeat:no-repeat}
  .hc-resv select option{color:#0E1013}
  .hc-resv button{height:60px;padding:0 34px;border:0;background:#D2A57A;color:#0E1013;font-size:13px;letter-spacing:.24em;cursor:pointer;transition:background .3s}
  .hc-resv button:hover{background:#E0B78F}
  .hc-resv :focus-visible{outline:2px solid #D2A57A;outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){.hc-resv{transition:none}.hc-il-pic img{animation:none!important}}
/* 画面の幅いっぱいに（サイト共通の 1280px の枠はこのページだけ外す） */
body.salon-world{max-width:none!important;margin-left:0!important;margin-right:0!important;background:#0E1013}
/* スマホの追従ボタンも角のない銅の線に */
#stickyBook{border-radius:0!important;background:rgba(14,16,19,.92)!important;border:1px solid #D2A57A;color:#fff!important;letter-spacing:.18em;font-size:13px!important;box-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 速さ優先の調整（10/5：黒い時間が長い・出るまで遅い）
   ぼかしをやめ 動きを短く 遅れを半分に。最初の文字は 0.6 秒以内に出そろう */
.hc [data-reveal]{filter:none!important;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)!important;transition-delay:calc(var(--d,0ms) * .5)!important}
.hc [data-reveal].is-revealed{transform:none}
.hc [data-reveal="img"]{transform:none;transition:clip-path .8s cubic-bezier(.77,0,.18,1)!important;transition-delay:calc(var(--d,0ms) * .5)!important}
.hc [data-reveal="img"] img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)!important}
.hc-hero picture img{animation-duration:5s}
.hc-hero-copy>*{animation-duration:.8s}
.hc-hero-copy>.hc-tag{animation-delay:0s}
.hc-hero-copy>h1{animation-duration:1s;animation-delay:.1s}
.hc-hero-copy>.hc-lead{animation-delay:.3s}
.hc-hero-copy>.hc-en{animation-delay:.4s}
.hc-hero-copy>.hc-cta{animation-delay:.5s}
.hc-hero{background:#1C1A18}
.hc-sec.is-dark2,.hc-interlude{background:#15181C}
/* スマホで見出しが一語だけ次の行に落ちないように（10/5） */
@media (max-width:480px){.hc h2{font-size:26px;letter-spacing:.04em}}