@charset "UTF-8";
/* ============================================================
   viborn 公式サイト — style.css
   配色: 店舗写真とロゴから実測 / 書体: Bodoni Moda × Shippori Mincho × Noto Sans JP
   方針: カード羅列をしない。罫線・余白・大きなタイポ・写真のブリードで組む
   ============================================================ */
:root{
  --paper:#FBF8F7; --paper-2:#F5EEEE; --marble:#ECE8E7; --blush:#EBCDD0; --blush-2:#D9A7AC; --rose:#B8767E;
  --gold:#C4A572; --ink:#3B3835; --ink-2:#646464; --mute:#9A9492;
  --line:rgba(59,56,53,.14); --line-strong:rgba(59,56,53,.5); --gline:rgba(196,165,114,.5); --line-inv:rgba(255,255,255,.22);
  --f-en:"Bodoni Moda","Playfair Display","Didot",serif; --f-jp:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN",serif; --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --max:1360px; --gutter:24px; --hd:68px; --sticky:60px; --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:1024px){ :root{ --gutter:56px; --hd:88px; --sticky:0px; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--hd); }
body{ background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.95; letter-spacing:.03em; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:var(--sticky); }
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
::selection{ background:var(--blush); color:var(--ink); }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:999; }
.skip:focus{ left:8px; }

.en{ font-family:var(--f-en); font-weight:400; }
.jp{ font-family:var(--f-jp); font-weight:500; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.lead{ font-size:15px; line-height:2.1; max-width:40em; color:var(--ink-2); }
.lead--ink{ color:var(--ink); }
.note{ font-size:12.5px; line-height:1.9; color:var(--mute); }
.hair{ border:0; border-top:1px solid var(--gline); }
.sprig{ pointer-events:none; user-select:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; font-family:var(--f-jp); font-weight:500; font-size:14px; letter-spacing:.22em; line-height:1; transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.btn--primary{ background:var(--ink); color:#fff; padding:19px 40px; }
.btn--primary:hover{ background:var(--rose); }
.btn--ghost{ border:1px solid var(--ink); padding:18px 40px; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--sm{ padding:14px 22px; font-size:12px; letter-spacing:.18em; }
.btn--text{ padding:0; letter-spacing:.2em; }
.btn--text .arrow{ position:relative; display:inline-block; width:56px; height:1px; background:currentColor; transition:width .5s var(--ease); }
.btn--text .arrow::after{ content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.btn--text:hover .arrow{ width:84px; }
.btn--ext::after{ content:"↗"; font-family:var(--f-en); font-size:14px; margin-left:-6px; }
.chip-link{ font-family:var(--f-jp); font-size:14px; letter-spacing:.14em; border-bottom:1px solid var(--line-strong); padding-bottom:3px; margin-right:22px; }
.chip-link:hover{ border-color:var(--rose); color:var(--rose); }

/* ---------- header ---------- */
.hd{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hd); transition:background .5s var(--ease), box-shadow .5s var(--ease); }
.hd.is-scrolled{ background:rgba(251,248,247,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }
.hd__inner{ height:100%; max-width:none; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hd__logo img{ height:28px; width:auto; }
.hd__nav{ display:none; gap:34px; font-family:var(--f-en); font-size:13px; letter-spacing:.18em; color:var(--ink-2); }
.hd__nav a{ position:relative; padding:6px 0; }
.hd__nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--ink); transition:width .5s var(--ease); }
.hd__nav a:hover::after{ width:100%; }
.hd__cta{ font-family:var(--f-en); font-size:12px; letter-spacing:.22em; padding:13px 20px; background:var(--ink); color:#fff; transition:background .5s var(--ease); margin-left:auto; }
.hd__cta:hover{ background:var(--rose); }
.hd__burger{ width:40px; height:40px; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.hd__burger span{ display:block; width:24px; height:1px; background:var(--ink); margin-inline:auto; transition:transform .5s var(--ease); }
.hd__burger.is-active span:first-child{ transform:translateY(4px) rotate(45deg); }
.hd__burger.is-active span:last-child{ transform:translateY(-4px) rotate(-45deg); }
@media (min-width:1024px){
  .hd__logo img{ height:34px; }
  .hd__nav{ display:flex; }
  .hd__cta{ padding:15px 28px; margin-left:0; }
  .hd__burger{ display:none; }
}

/* ---------- full-screen menu ---------- */
.fsm{ position:fixed; inset:0; z-index:55; background:var(--paper); opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility 0s .6s; overflow:auto; }
.fsm.is-open{ opacity:1; visibility:visible; transition:opacity .6s var(--ease); }
.fsm__inner{ min-height:100%; padding:calc(var(--hd) + 24px) var(--gutter) 48px; display:grid; gap:40px; position:relative; }
.fsm__nav a{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); transform:translateY(16px); opacity:0; transition:transform .7s var(--ease), opacity .7s var(--ease); }
.fsm.is-open .fsm__nav a{ transform:none; opacity:1; }
.fsm.is-open .fsm__nav a:nth-child(2){ transition-delay:.05s } .fsm.is-open .fsm__nav a:nth-child(3){ transition-delay:.1s } .fsm.is-open .fsm__nav a:nth-child(4){ transition-delay:.15s } .fsm.is-open .fsm__nav a:nth-child(5){ transition-delay:.2s } .fsm.is-open .fsm__nav a:nth-child(6){ transition-delay:.25s } .fsm.is-open .fsm__nav a:nth-child(7){ transition-delay:.3s }
.fsm__nav .en{ font-size:36px; line-height:1.1; }
.fsm__nav small{ font-size:11px; letter-spacing:.14em; color:var(--mute); }
.fsm__label{ font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--mute); margin-bottom:10px; }
.fsm__stores li a{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-family:var(--f-jp); font-size:15px; letter-spacing:.1em; }
.fsm__stores span{ font-family:var(--f-body); font-size:11px; color:var(--mute); letter-spacing:.06em; }
.fsm__side .btn{ margin-top:24px; width:100%; }
.fsm__ig{ display:inline-block; margin-top:18px; font-size:12px; letter-spacing:.14em; border-bottom:1px solid var(--line-strong); }
.fsm__sprig{ position:absolute; right:-20px; bottom:-10px; width:min(60vw,420px); opacity:.22; }
@media (min-width:1024px){
  .fsm__inner{ grid-template-columns:7fr 4fr; gap:120px; padding-top:calc(var(--hd) + 60px); }
  .fsm__nav .en{ font-size:64px; }
  .fsm__nav a{ padding:18px 0; gap:28px; }
  .fsm__sprig{ width:520px; right:40px; bottom:20px; }
}

/* ---------- store picker ---------- */
.picker{ position:fixed; inset:0; z-index:70; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s; }
.picker.is-open{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
.picker__bg{ position:absolute; inset:0; background:rgba(59,56,53,.45); }
.picker__panel{ position:absolute; left:0; right:0; bottom:0; background:var(--paper); padding:28px var(--gutter) 32px; max-height:88vh; overflow:auto; transform:translateY(24px); transition:transform .5s var(--ease); }
.picker.is-open .picker__panel{ transform:none; }
.picker__head{ position:relative; padding-right:40px; margin-bottom:12px; }
.picker__en{ font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--mute); }
.picker__head h2{ font-size:20px; letter-spacing:.08em; margin:6px 0 6px; }
.picker__head p{ font-size:12.5px; color:var(--ink-2); line-height:1.8; }
.picker__close{ position:absolute; right:-6px; top:-4px; width:40px; height:40px; }
.picker__close span{ position:absolute; left:8px; top:19px; width:24px; height:1px; background:var(--ink); }
.picker__close span:first-child{ transform:rotate(45deg); } .picker__close span:last-child{ transform:rotate(-45deg); }
.picker__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.picker__row b{ display:block; font-size:17px; letter-spacing:.1em; }
.picker__row span{ display:block; font-size:11.5px; color:var(--mute); letter-spacing:.04em; }
@media (min-width:1024px){
  .picker__panel{ left:auto; top:0; bottom:0; width:480px; max-height:none; padding:120px 56px 56px; transform:translateX(24px); }
  .picker__head h2{ font-size:24px; }
}

/* ---------- sections ---------- */
.sec{ padding:88px 0; }
.sec--tight{ padding:64px 0; }
.sec--alt{ background:var(--paper-2); }
.sec + .sec:not(.sec--alt):not(.sec--noline){ border-top:1px solid var(--gline); }
.sec__label{ display:grid; gap:14px; margin-bottom:40px; }
.sec__label .top{ display:flex; align-items:center; gap:16px; }
.sec__label .num{ font-size:34px; line-height:1; }
.sec__label .line{ width:48px; height:1px; background:var(--gold); }
.sec__label .en-l{ font-style:italic; font-size:13px; letter-spacing:.22em; color:var(--ink-2); }
.sec__label h2{ font-size:26px; line-height:1.5; letter-spacing:.06em; text-wrap:balance; }
.sec__label--center{ text-align:center; justify-items:center; }
.sec__label--center .top{ justify-content:center; }
@media (min-width:1024px){
  .sec{ padding:140px 0; } .sec--tight{ padding:96px 0; }
  .sec__label{ margin-bottom:64px; gap:18px; }
  .sec__label .num{ font-size:48px; } .sec__label h2{ font-size:38px; }
}

/* ---------- reveal ---------- */
[data-reveal] .r, [data-reveal].r-self{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * .09s); }
[data-reveal].is-in .r, [data-reveal].is-in.r-self{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal] .r, [data-reveal].r-self{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- TOP hero ---------- */
.hero{ position:relative; padding-top:calc(var(--hd) + 24px); }
.hero__text{ padding:0 var(--gutter) 40px; position:relative; z-index:2; }
.hero__eyebrow{ font-family:var(--f-en); font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--ink-2); display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.hero__eyebrow::before{ content:""; width:32px; height:1px; background:var(--gold); }
.hero__ttl{ font-family:var(--f-jp); font-weight:500; font-size:clamp(38px,10.5vw,52px); line-height:1.32; letter-spacing:.04em; }
.hero__ttl .l{ display:block; overflow:hidden; }
.hero__ttl .l span{ display:block; transform:translateY(110%); animation:rise 1.1s var(--ease) forwards; }
.hero__ttl .l:nth-child(2) span{ animation-delay:.16s } .hero__ttl .l:nth-child(3) span{ animation-delay:.32s }
.hero__sub{ margin-top:22px; font-size:12.5px; letter-spacing:.1em; line-height:2; color:var(--ink-2); opacity:0; animation:fade .9s var(--ease) .7s forwards; }
.hero__sub b{ font-weight:500; color:var(--ink); }
.hero__cta{ margin-top:30px; opacity:0; animation:fade .9s var(--ease) .95s forwards; }
.hero__media{ position:relative; height:min(118vw,560px); margin-left:var(--gutter); }
.hero__photo{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 100%); animation:wipe 1.3s var(--ease) .1s forwards; }
.hero__photo img{ width:100%; height:112%; object-fit:cover; object-position:50% 60%; transform:scale(1.06); animation:settle 1.8s var(--ease) .1s forwards; will-change:transform; }
.hero__small{ position:absolute; left:-10px; bottom:-28px; width:34%; aspect-ratio:4/5; overflow:hidden; box-shadow:0 30px 60px -30px rgba(59,56,53,.4); opacity:0; animation:fade 1s var(--ease) 1.1s forwards; }
.hero__small img{ width:100%; height:100%; object-fit:cover; }
.hero__vert{ display:none; }
.hero__wm{ display:none; }
.nw{ white-space:nowrap; }
@keyframes rise{ to{ transform:none } } @keyframes fade{ to{ opacity:1 } } @keyframes wipe{ to{ clip-path:inset(0 0 0 0) } } @keyframes settle{ to{ transform:scale(1) } }
@media (min-width:1024px){
  .hero{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; min-height:780px; padding:calc(var(--hd) + 40px) 0 0 var(--gutter); }
  .hero__text{ grid-column:1/6; align-self:center; padding:0 0 200px; }
  .hero__eyebrow{ font-size:14px; margin-bottom:34px; } .hero__eyebrow::before{ width:40px; }
  .hero__ttl{ font-size:clamp(52px,5.2vw,76px); line-height:1.3; }
  .hero__sub{ font-size:14px; letter-spacing:.14em; margin-top:30px; }
  .hero__cta{ margin-top:44px; }
  .hero__media{ grid-column:6/13; height:auto; min-height:680px; margin:0; }
  .hero__photo{ inset:0 0 0 12%; }
  .hero__small{ left:-6%; bottom:60px; width:26%; }
  .hero__vert{ display:block; position:absolute; right:28px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--f-jp); font-size:12px; letter-spacing:.3em; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.4); z-index:3; }
  .hero__wm{ display:block; position:absolute; left:var(--gutter); bottom:-14px; font-family:var(--f-en); font-style:italic; font-size:clamp(80px,11vw,150px); line-height:1; color:var(--blush); opacity:.5; letter-spacing:-.02em; z-index:1; pointer-events:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero__ttl .l span,.hero__sub,.hero__cta,.hero__photo,.hero__photo img,.hero__small{ animation:none; transform:none; opacity:1; clip-path:none; }
}

/* ---------- statement ---------- */
.statement{ display:grid; gap:36px; }
.statement__media{ position:relative; margin-left:calc(-1 * var(--gutter)); }
.statement__media .main{ aspect-ratio:4/5; overflow:hidden; }
.statement__media .main img{ width:100%; height:100%; object-fit:cover; }
.statement__media .sub{ position:absolute; right:-6px; bottom:-30px; width:38%; aspect-ratio:3/4; overflow:hidden; box-shadow:0 30px 60px -30px rgba(59,56,53,.4); }
.statement__media .sub img{ width:100%; height:100%; object-fit:cover; }
.statement__text h2{ font-size:28px; line-height:1.55; letter-spacing:.06em; margin-bottom:22px; text-wrap:balance; }
.statement__text .btn{ margin-top:28px; }
@media (min-width:1024px){
  .statement{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; }
  .statement__media{ grid-column:1/8; margin-left:calc(-1 * var(--gutter)); }
  .statement__media .main{ aspect-ratio:5/4; }
  .statement__media .sub{ right:-40px; bottom:-48px; width:32%; }
  .statement__text{ grid-column:9/13; }
  .statement__text h2{ font-size:36px; }
}

/* ---------- promise ---------- */
.promise{ border-top:1px solid var(--line); }
.promise__row{ display:grid; gap:24px; padding:40px 0; border-bottom:1px solid var(--line); }
.promise__num{ font-size:44px; line-height:1; color:var(--gold); }
.promise__body h3{ font-size:22px; line-height:1.5; letter-spacing:.06em; margin-bottom:12px; }
.promise__body p{ color:var(--ink-2); }
.promise__media{ overflow:hidden; aspect-ratio:4/3; }
.promise__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.promise__row:hover .promise__media img{ transform:scale(1.04); }
@media (min-width:1024px){
  .promise__row{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; padding:56px 0; }
  .promise__num{ grid-column:1/2; font-size:56px; }
  .promise__body{ grid-column:2/7; padding-right:40px; }
  .promise__body h3{ font-size:26px; }
  .promise__media{ grid-column:8/13; aspect-ratio:16/10; }
  .promise__row:nth-child(even) .promise__media{ grid-column:1/6; grid-row:1; }
  .promise__row:nth-child(even) .promise__num{ grid-column:7/8; }
  .promise__row:nth-child(even) .promise__body{ grid-column:8/13; padding-right:0; }
}

/* ---------- price list ---------- */
.pl{ border-top:1px solid var(--line); }
.pl li{ padding:16px 0; border-bottom:1px solid var(--line); }
.pl li, .pl__head{ display:flex; align-items:baseline; gap:12px; }
.pl--full li{ display:block; }
.pl__n{ font-size:14.5px; letter-spacing:.06em; }
.pl__n small{ display:block; font-size:11px; color:var(--mute); letter-spacing:.04em; }
.pl__dots{ flex:1; border-bottom:1px dotted rgba(59,56,53,.4); transform:translateY(-5px); min-width:24px; }
.pl__p{ font-size:21px; letter-spacing:.02em; white-space:nowrap; }
.pl__p i{ font-style:normal; font-size:13px; margin-right:1px; }
.pl__cat{ margin-bottom:28px; }
.pl__cat h3{ font-size:13px; letter-spacing:.24em; color:var(--ink-2); margin-bottom:10px; }
.pl__d{ font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.8; }
.pl__t{ font-size:12px; color:var(--mute); }
.price-top{ display:grid; gap:40px; }
.price-top__aside h2{ font-size:26px; letter-spacing:.06em; line-height:1.5; margin-bottom:16px; }
.price-top__aside .btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
@media (min-width:1024px){
  .price-top{ grid-template-columns:4fr 7fr; column-gap:120px; }
  .price-top__aside{ position:sticky; top:calc(var(--hd) + 40px); align-self:start; }
  .price-top__aside h2{ font-size:34px; }
  .pl li{ padding:20px 0; } .pl__p{ font-size:24px; }
}

/* ---------- salon blocks ---------- */
.salon-grid{ display:grid; gap:40px; }
.salon{ display:block; }
.salon__media{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--marble); }
.salon__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.salon__media::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
.salon:hover .salon__media img{ transform:scale(1.04); }
.salon__ph{ position:absolute; inset:0; background:linear-gradient(135deg,var(--paper-2),var(--blush)); display:grid; place-items:center; }
.salon__ph .sprig{ position:absolute; right:6%; bottom:8%; width:48%; opacity:.3; }
.salon__ph .en{ font-style:italic; font-size:22px; letter-spacing:.2em; color:var(--ink-2); }
.salon__body{ display:grid; gap:6px; padding-top:18px; }
.salon__en{ font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--mute); }
.salon__name{ font-size:24px; letter-spacing:.1em; }
.salon__meta{ font-size:12.5px; color:var(--ink-2); line-height:1.9; }
.salon__body .btn{ margin-top:10px; font-size:13px; }
@media (min-width:1024px){
  .salon-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .salon__media{ aspect-ratio:4/5; }
  .salon:nth-child(2){ margin-top:64px; }
}

/* ---------- marquee gallery ---------- */
.marquee{ position:relative; overflow:hidden; padding:0; }
.marquee__wm{ position:absolute; left:var(--gutter); top:-6px; font-family:var(--f-en); font-style:italic; font-size:clamp(72px,14vw,200px); line-height:1; color:var(--blush); opacity:.45; pointer-events:none; z-index:0; }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marquee 60s linear infinite; position:relative; z-index:1; padding-top:48px; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track figure{ height:240px; flex:none; overflow:hidden; }
.marquee__track figure img{ height:100%; width:auto; max-width:none; }
@keyframes marquee{ to{ transform:translateX(-50%) } }
@media (min-width:1024px){ .marquee__track{ gap:24px; padding-top:80px; } .marquee__track figure{ height:380px; } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; width:auto; flex-wrap:wrap; } }

/* ---------- voice ---------- */
.voice{ display:grid; gap:40px; }
.voice__scores{ display:grid; gap:28px; }
.voice__score{ display:grid; gap:8px; padding:24px 0; border-top:1px solid var(--line); }
.voice__score .btn{ margin-top:8px; }
.voice__store{ font-family:var(--f-jp); font-size:14px; letter-spacing:.14em; }
.voice__num{ font-size:56px; line-height:1; }
.voice__num small{ font-size:16px; margin-left:6px; color:var(--mute); }
.voice__meta{ font-size:12px; color:var(--mute); line-height:1.8; }
.voice__quotes{ display:grid; gap:0; border-top:1px solid var(--line); }
.voice__quote{ padding:24px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; }
.voice__quote .q{ font-family:var(--f-jp); font-size:18px; line-height:1.7; letter-spacing:.04em; }
.voice__quote .a{ font-size:12px; color:var(--mute); letter-spacing:.08em; }
@media (min-width:1024px){ .voice{ grid-template-columns:4fr 7fr; column-gap:120px; } .voice__num{ font-size:72px; } .voice__quote .q{ font-size:21px; } }

/* ---------- banners ---------- */
.banners{ display:grid; gap:1px; background:var(--line); }
.banner{ position:relative; display:grid; align-content:end; min-height:300px; padding:32px var(--gutter); background:var(--paper); overflow:hidden; color:#fff; }
.banner__bg{ position:absolute; inset:0; }
.banner__bg img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease), filter 1.6s var(--ease); filter:brightness(.72); }
.banner:hover .banner__bg img{ transform:scale(1.04); filter:brightness(.82); }
.banner__wm{ position:absolute; right:-4px; top:12px; font-family:var(--f-en); font-style:italic; font-size:clamp(64px,9vw,120px); line-height:1; color:#fff; opacity:.28; }
.banner__body{ position:relative; display:grid; gap:10px; }
.banner__en{ font-style:italic; font-size:12px; letter-spacing:.24em; opacity:.9; }
.banner__ttl{ font-size:26px; letter-spacing:.08em; line-height:1.4; }
.banner__txt{ font-size:13px; line-height:1.9; opacity:.92; max-width:30em; }
.banner__body .btn{ color:#fff; margin-top:8px; }
@media (min-width:1024px){ .banners{ grid-template-columns:1fr 1fr; } .banner{ min-height:460px; padding:48px; } .banner__ttl{ font-size:32px; } }

/* ---------- footer ---------- */
.ft{ background:var(--ink); color:rgba(255,255,255,.86); padding:64px 0 32px; }
.ft__top{ display:grid; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-inv); }
.ft__brand img{ width:140px; height:auto; }
.ft__brand p{ font-size:12px; letter-spacing:.14em; line-height:2; margin-top:18px; opacity:.8; }
.ft__stores li a{ display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--line-inv); }
.ft__stores b{ font-family:var(--f-jp); font-weight:500; font-size:15px; letter-spacing:.12em; }
.ft__stores span{ font-size:12px; opacity:.72; letter-spacing:.04em; }
.ft__nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; font-size:12.5px; letter-spacing:.1em; }
.ft__nav a{ padding:4px 0; opacity:.85; }
.ft__nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.ft__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-top:24px; font-size:11.5px; letter-spacing:.1em; }
.ft__legal{ display:flex; gap:24px; }
.ft__legal a{ opacity:.75; } .ft__legal a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.ft__copy{ letter-spacing:.14em; opacity:.7; }
@media (min-width:1024px){ .ft{ padding:96px 0 40px; } .ft__top{ grid-template-columns:3fr 5fr 3fr; gap:64px; padding-bottom:56px; } .ft__nav{ grid-template-columns:1fr; } }

/* ---------- sticky bar (SP) ---------- */
.sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:1.5fr 1fr 1fr; background:rgba(251,248,247,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); height:var(--sticky); }
.sticky a,.sticky button{ display:flex; align-items:center; justify-content:center; font-family:var(--f-jp); font-weight:500; font-size:12.5px; letter-spacing:.18em; }
.sticky__main{ background:var(--ink); color:#fff; }
.sticky a + a{ border-left:1px solid var(--line); }
@media (min-width:1024px){ .sticky{ display:none; } }

/* ---------- page hero (sub pages) ---------- */
.ph{ padding:calc(var(--hd) + 40px) 0 0; }
.ph__text{ padding:0 var(--gutter) 36px; }
.ph__en{ font-style:italic; font-size:12px; letter-spacing:.24em; color:var(--ink-2); display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ph__en::before{ content:""; width:32px; height:1px; background:var(--gold); }
.ph h1{ font-family:var(--f-jp); font-weight:500; font-size:clamp(30px,8vw,40px); line-height:1.4; letter-spacing:.06em; text-wrap:balance; }
.ph__lead{ margin-top:18px; color:var(--ink-2); max-width:36em; }
.ph__media{ margin-left:var(--gutter); aspect-ratio:4/3; overflow:hidden; }
.ph__media img{ width:100%; height:100%; object-fit:cover; }
.ph__media--store{ margin:0; aspect-ratio:16/10; }
.ph__media--ph{ background:linear-gradient(135deg,var(--paper-2),var(--blush)); position:relative; display:grid; place-items:center; }
.ph__media--ph .sprig{ position:absolute; right:4%; bottom:8%; width:34%; opacity:.3; }
.ph__media--ph .en{ font-style:italic; font-size:28px; letter-spacing:.2em; color:var(--ink-2); }
.ph__ctas{ display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:26px; align-items:center; }
@media (min-width:1024px){
  .ph{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; padding:calc(var(--hd) + 72px) 0 0 var(--gutter); align-items:end; }
  .ph__text{ grid-column:1/7; padding:0 40px 72px 0; }
  .ph h1{ font-size:clamp(40px,4vw,56px); }
  .ph__media{ grid-column:7/13; margin:0; aspect-ratio:5/4; }
  .ph--store{ display:block; padding-left:0; }
  .ph--store .ph__text{ padding:0 var(--gutter) 56px; max-width:var(--max); margin-inline:auto; }
  .ph__media--store{ aspect-ratio:21/9; max-height:620px; }
}

/* ---------- page hero: text only (写真を無理に入れないページ用) ---------- */
.ph--text{ display:block; position:relative; overflow:hidden; padding-left:0; }
.ph--text .ph__text{ position:relative; z-index:1; max-width:var(--max); margin-inline:auto; padding:0 var(--gutter) 56px; }
.ph--text h1{ font-size:clamp(30px,8.6vw,44px); }
.sp{ display:none; }
@media (max-width:1023px){ .sp{ display:inline; } }
.ph--text .ph__lead{ max-width:40em; }
.ph--text .ph__sprig{ position:absolute; right:-40px; bottom:-10px; width:min(48vw,340px); opacity:.2; pointer-events:none; }
.ph__kv{ display:flex; flex-wrap:wrap; gap:16px 40px; margin-top:30px; padding-top:22px; border-top:1px solid var(--gline); max-width:var(--max); }
.ph__kv li{ display:grid; gap:4px; }
.ph__kv .v{ font-family:var(--f-en); font-size:28px; line-height:1; }
.ph__kv .v small{ font-family:var(--f-jp); font-size:13px; margin-left:4px; }
.ph__kv .k{ font-size:11.5px; letter-spacing:.14em; color:var(--mute); }
@media (min-width:1024px){
  .ph--text .ph__text{ padding:0 var(--gutter) 96px; }
  .ph--text h1{ font-size:clamp(44px,4.6vw,64px); }
  .ph--text .ph__lead{ font-size:16px; }
  .ph--text .ph__sprig{ right:var(--gutter); bottom:40px; width:440px; opacity:.24; }
  .ph__kv{ gap:20px 64px; margin-top:40px; padding-top:28px; }
  .ph__kv .v{ font-size:38px; }
}
/* ---------- roles (FC: 役割分担) ---------- */
.roles{ display:grid; gap:40px; }
.roles__col h3{ display:flex; align-items:baseline; gap:14px; font-size:14px; letter-spacing:.2em; color:var(--ink-2); padding-bottom:14px; border-bottom:1px solid var(--line-strong); }
.roles__col h3 .en{ font-style:italic; font-size:12px; letter-spacing:.2em; color:var(--mute); }
.roles__col li{ padding:16px 0; border-bottom:1px solid var(--line); display:grid; gap:4px; }
.roles__col li b{ font-family:var(--f-jp); font-weight:500; font-size:17px; letter-spacing:.06em; }
.roles__col li span{ font-size:13px; color:var(--ink-2); line-height:1.8; }
.roles__owner{ background:var(--paper-2); padding:28px; }
.roles__owner .tag{ display:inline-block; font-family:var(--f-jp); font-size:13px; letter-spacing:.18em; color:var(--rose); margin-bottom:8px; }
@media (min-width:1024px){ .roles{ grid-template-columns:5fr 7fr; column-gap:64px; align-items:start; } .roles__owner{ padding:40px; position:sticky; top:calc(var(--hd) + 40px); } }

/* ---------- info table ---------- */
.info{ border-top:1px solid var(--line); }
.info div{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); }
.info dt{ font-size:12px; letter-spacing:.18em; color:var(--mute); }
.info dd{ font-size:14.5px; line-height:1.9; }
@media (min-width:1024px){ .info div{ grid-template-columns:200px 1fr; gap:24px; padding:22px 0; } .info dt{ padding-top:4px; } }
.two{ display:grid; gap:40px; }
@media (min-width:1024px){ .two{ grid-template-columns:4fr 7fr; column-gap:120px; } .two--even{ grid-template-columns:1fr 1fr; column-gap:80px; } }
.two__aside h2{ font-size:26px; line-height:1.5; letter-spacing:.06em; margin-bottom:14px; }
.two__aside .sec__label{ margin-bottom:24px; }
@media (min-width:1024px){ .two__aside{ position:sticky; top:calc(var(--hd) + 40px); align-self:start; } .two__aside h2{ font-size:32px; } }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.gallery figure{ overflow:hidden; aspect-ratio:4/5; background:var(--marble); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery .g1{ grid-column:span 2; aspect-ratio:16/10; }
@media (min-width:1024px){
  .gallery{ grid-template-columns:repeat(4,1fr); gap:20px; }
  .gallery .g1{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  .gallery .g4{ grid-column:span 2; aspect-ratio:16/10; }
}
.space-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.space-grid figure{ overflow:hidden; aspect-ratio:4/5; }
.space-grid figure img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){ .space-grid{ grid-template-columns:repeat(6,1fr); gap:20px; } .space-grid figure:nth-child(1){ grid-column:span 3; aspect-ratio:16/10; } .space-grid figure:nth-child(2){ grid-column:span 3; aspect-ratio:16/10; } .space-grid figure:nth-child(n+3){ grid-column:span 2; } }

/* ---------- flow ---------- */
.flow{ display:grid; gap:0; border-top:1px solid var(--line); }
.flow__step{ display:grid; grid-template-columns:64px 1fr; gap:16px; padding:24px 0; border-bottom:1px solid var(--line); }
.flow__num{ font-size:34px; line-height:1; color:var(--gold); }
.flow__step h3{ font-size:18px; letter-spacing:.08em; margin-bottom:6px; }
.flow__step h3 small{ font-family:var(--f-body); font-size:11.5px; color:var(--mute); letter-spacing:.08em; margin-left:10px; }
.flow__step p{ font-size:13.5px; color:var(--ink-2); line-height:1.9; }
@media (min-width:1024px){
  .flow{ grid-template-columns:repeat(4,1fr); border-top:0; }
  .flow__step{ grid-template-columns:1fr; gap:14px; padding:0 32px 0 0; border-bottom:0; border-top:1px solid var(--line); padding-top:24px; }
  .flow__num{ font-size:44px; }
}

/* ---------- numbers ---------- */
.nums{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.nums li{ padding:24px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:4px; }
.nums .v{ font-family:var(--f-en); font-size:36px; line-height:1; }
.nums .v small{ font-family:var(--f-jp); font-size:14px; margin-left:4px; }
.nums .k{ font-size:12px; letter-spacing:.12em; color:var(--mute); }
@media (min-width:1024px){ .nums{ grid-template-columns:repeat(4,1fr); } .nums li{ padding:36px 28px; } .nums .v{ font-size:52px; } }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 24px; gap:16px; align-items:center; padding:20px 0; font-family:var(--f-jp); font-weight:500; font-size:16px; letter-spacing:.04em; line-height:1.6; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary i{ position:relative; width:24px; height:24px; display:block; }
.faq summary i::before,.faq summary i::after{ content:""; position:absolute; left:6px; top:12px; width:12px; height:1px; background:var(--ink); transition:transform .4s var(--ease); }
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq .faq__a{ padding:0 40px 22px 0; font-size:14px; color:var(--ink-2); line-height:1.95; }
@media (min-width:1024px){ .faq summary{ font-size:18px; padding:26px 0; } }

/* ---------- recruit ---------- */
.points{ display:grid; gap:0; border-top:1px solid var(--line); }
.point{ display:grid; gap:14px; padding:28px 0; border-bottom:1px solid var(--line); }
.point__num{ font-size:34px; line-height:1; color:var(--gold); }
.point h3{ font-size:20px; letter-spacing:.06em; line-height:1.5; }
.point p{ font-size:14px; color:var(--ink-2); }
@media (min-width:1024px){ .points{ grid-template-columns:1fr 1fr; column-gap:80px; border-top:0; } .point{ border-top:1px solid var(--line); border-bottom:0; padding:36px 0 44px; } .point h3{ font-size:22px; } }
.income{ display:grid; gap:16px; }
.income__case{ border:1px solid var(--line); padding:22px 24px; display:grid; gap:8px; }
.income__case .v{ font-family:var(--f-en); font-size:34px; line-height:1; }
.income__case .v small{ font-family:var(--f-jp); font-size:14px; margin-left:4px; }
.income__case .k{ font-size:12.5px; color:var(--ink-2); line-height:1.8; }
@media (min-width:1024px){ .income{ grid-template-columns:1fr 1fr; gap:24px; } .income__case{ padding:32px; } .income__case .v{ font-size:44px; } }
.apply{ display:grid; gap:16px; }
.apply__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:20px 0; border-top:1px solid var(--line); }
.apply__row:last-child{ border-bottom:1px solid var(--line); }
.apply__row b{ font-family:var(--f-jp); font-weight:500; font-size:18px; letter-spacing:.1em; }
.apply__row span{ font-size:12px; color:var(--mute); display:block; }

/* ---------- form ---------- */
.form{ display:grid; gap:28px; }
.form__row{ display:grid; gap:8px; }
.form label.l{ font-size:12px; letter-spacing:.18em; color:var(--ink-2); }
.form label.l em{ font-style:normal; color:var(--rose); margin-left:6px; font-size:11px; }
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{ width:100%; background:#fff; border:1px solid var(--line); padding:14px 16px; font-size:16px; line-height:1.6; border-radius:0; transition:border-color .4s var(--ease); -webkit-appearance:none; appearance:none; }
.form textarea{ min-height:180px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--ink); outline:none; }
.form .radios{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.form .radios label{ display:inline-flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.form .radios input{ width:16px; height:16px; accent-color:var(--ink); }
.form .consent{ font-size:13px; display:flex; gap:10px; align-items:flex-start; }
.form .consent input{ width:16px; height:16px; margin-top:6px; accent-color:var(--ink); }
.form .hp{ position:absolute; left:-9999px; }
.form__msg{ font-size:13px; color:var(--rose); min-height:1.5em; }
.form .btn{ justify-self:start; }
@media (min-width:1024px){ .form__row--2{ grid-template-columns:1fr 1fr; gap:24px; } }

/* ---------- map ---------- */
.map{ aspect-ratio:4/3; background:var(--marble); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
@media (min-width:1024px){ .map{ aspect-ratio:21/9; } }

/* ---------- misc ---------- */
.cta-band{ padding:72px 0; background:var(--paper-2); text-align:center; }
.cta-band h2{ font-size:24px; letter-spacing:.08em; line-height:1.6; margin-bottom:14px; }
.cta-band p{ color:var(--ink-2); font-size:13.5px; margin-bottom:28px; }
.cta-band .btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 20px; }
@media (min-width:1024px){ .cta-band{ padding:120px 0; } .cta-band h2{ font-size:34px; } }
.prose{ max-width:46em; }
.prose h2{ font-size:20px; letter-spacing:.06em; margin:40px 0 12px; }
.prose h3{ font-size:16px; margin:24px 0 8px; }
.prose p,.prose li{ font-size:14px; color:var(--ink-2); line-height:2; }
.prose ol,.prose ul{ padding-left:1.4em; }
.prose ol{ list-style:decimal; } .prose ul{ list-style:disc; }
.prose table{ width:100%; border-collapse:collapse; font-size:14px; }
.prose th,.prose td{ text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.8; }
.prose th{ width:30%; font-weight:500; color:var(--ink-2); font-size:12.5px; letter-spacing:.1em; }
.notice{ border:1px dashed var(--line-strong); padding:16px 20px; font-size:13px; color:var(--ink-2); }
.center{ text-align:center; }
.mt-24{ margin-top:24px } .mt-40{ margin-top:40px } .mt-64{ margin-top:64px }