/* Layout: 写真が主役の全幅ブロックと余白の多い白いブロックを交互に。動きはスクロールに連動させ、文字は最小限 */
:root{
  --paper:#FBF8F4;      /* ミルク */
  --paper-2:#F5EDE6;    /* 淡いベージュ */
  --greige:#ECE2D9;     /* ミルクティー */
  --ink:#4A403A;        /* やわらかいブラウングレー */
  --ink-soft:#85776E;
  --gold:#A9846F;       /* シャンパンベージュ（少しピンク寄り） */
  --gold-light:#EBD9CC;
  --line:#E8DDD3;
  --f-copy:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-latin:"Cormorant Garamond","Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}body{background:transparent;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.9;letter-spacing:.04em}
a{color:inherit}
.u-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em;text-decoration-color:var(--gold);transition:color .3s}
.u-link:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* header */
.hd{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) 18px;transition:background .5s,padding .5s,border-color .5s;border-bottom:1px solid transparent}
.hd.solid{background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px;border-bottom-color:var(--line)}
.logo{font-family:var(--f-latin);font-size:26px;letter-spacing:.42em;color:var(--gold-light);text-decoration:none;font-weight:500;transition:color .5s}
.hd.solid .logo{color:var(--gold)}
.nav{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;margin:0;padding:0}
.nav a{display:grid;justify-items:center;text-decoration:none;color:#fff;transition:color .5s}
.hd.solid .nav a{color:var(--ink)}
.nav .en{font-family:var(--f-latin);font-size:14px;letter-spacing:.16em;position:relative}
.nav .en::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s ease}
.nav a:hover .en::after{transform:scaleX(1);transform-origin:left}
.nav .ja{font-size:10px;letter-spacing:.1em;opacity:.8;line-height:1.4}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;color:#fff;transition:color .5s}
.hd.solid .menu-btn{color:var(--ink)}
.menu-btn span{display:block;width:24px;height:1px;background:currentColor;margin:7px auto}

/* hero: 画面に固定したまま、スクロールで写真が縮んで白に溶け、コピーが本文の見出しに変わる */
.hero-wrap{position:relative;height:230vh}
.hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:transparent}
.flowbg{position:fixed;inset:-10vh 0;z-index:-1;background:var(--paper);pointer-events:none;transform:translateZ(0)}
.frame{position:absolute;inset:0;overflow:hidden;background:#cfc5b8;will-change:clip-path,opacity}
/* 一番上：文字と動きだけ（馬蹄のマークと金の線）。Italwaxの映像は使わない */
.frame{background:linear-gradient(160deg,#FBF8F4 0%,#F4ECE4 55%,#EFE4DA 100%)!important}
.hx{position:absolute;inset:0;overflow:hidden}
.hx-glow{position:absolute;width:70vmax;height:70vmax;right:-12vmax;top:50%;margin-top:-35vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(228,200,182,.95),rgba(228,200,182,0));animation:hxBreath 9s ease-in-out infinite alternate}
.hx-mark{position:absolute;left:calc(50% - var(--s)*.446);top:0;height:100%;width:calc(var(--s)*.892);color:var(--gold);overflow:visible}
.hx-mark .trace{fill:none;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:hxDraw 2.8s cubic-bezier(.6,0,.2,1) 2.3s forwards,hxOut 1.8s ease 5.2s forwards}
.hx-mark .fillm{opacity:0}
.hx-mark{opacity:0;filter:blur(10px);transform:scale(1.04);animation:hxFocus 3.2s cubic-bezier(.2,.7,.2,1) 2.6s forwards}
.hx-mark .fillm{animation:none;opacity:.22}
@keyframes hxFocus{to{opacity:1;filter:blur(0);transform:scale(1)}}
/* PC：文字とマークを、下の見出しと同じ幅の中に収め、マークは小さめに */
@media (min-width:821px){
  .copy,.intro{left:max(clamp(16px,5vw,56px),calc((100vw - 1120px)/2 + 56px))!important}
  .hx-orb{--s:min(32vh,280px);right:max(14%,calc((100vw - 1120px)/2 + 120px))}
  .hx-glow{right:max(-12vmax,calc((100vw - 1120px)/2 - 18vmax))}
}

/* 馬蹄は、ぼかしからゆっくり焦点が合うように現れる */
.hx-orb{--s:min(32vh,280px);position:absolute;right:12%;top:50%;width:var(--s);height:var(--s);transform:translateY(-50%)}
/* 光のにじみ（2つがゆっくり漂う）と、紙のような粒子感 */
.hx-glow2{position:absolute;width:60vmax;height:60vmax;left:-18vmax;bottom:-26vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(218,178,166,.75),rgba(218,178,166,0));animation:hxFloat 18s ease-in-out infinite alternate}
@keyframes hxFloat{from{transform:translate(0,0)}to{transform:translate(8vmax,-6vmax)}}
.hx-grain{position:absolute;inset:0;opacity:.15;mix-blend-mode:multiply;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='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (max-width:820px){
  .hx-orb{--s:min(19vh,160px);right:calc(18px - var(--s)*.054);top:38%}
}
@keyframes hxDraw{to{stroke-dashoffset:0}}
@keyframes hxOut{to{opacity:0}}
@keyframes hxIn{to{opacity:.22}}
@keyframes hxBreath{from{transform:scale(.92);opacity:.75}to{transform:scale(1.06);opacity:1}}

/* 一番上：日の出の映像を文字の後ろにうっすら敷く（ふちはぼかして角を見せない／太陽は右寄り＝馬蹄の中） */
.hx-vwrap{position:absolute;inset:0;opacity:.78;--sx:75%;--sy:50%;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at var(--sx) var(--sy),#000 25%,rgba(0,0,0,.55) 55%,transparent 85%);
          mask-image:radial-gradient(ellipse 62% 70% at var(--sx) var(--sy),#000 25%,rgba(0,0,0,.55) 55%,transparent 85%)}
.hx-vid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;max-width:none;filter:saturate(.8)}
.hx-fog{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(251,248,244,.62) 0%,rgba(251,248,244,.26) 45%,rgba(251,248,244,.06) 100%),
  linear-gradient(180deg,rgba(251,248,244,.3) 0%,rgba(251,248,244,0) 30%,rgba(251,248,244,0) 70%,rgba(251,248,244,.4) 100%)}
@media (max-width:820px){
  .hx-vwrap{-webkit-mask-image:radial-gradient(ellipse 110% 48% at var(--sx) var(--sy),#000 25%,rgba(0,0,0,.55) 55%,transparent 85%);
                    mask-image:radial-gradient(ellipse 110% 48% at var(--sx) var(--sy),#000 25%,rgba(0,0,0,.55) 55%,transparent 85%)}
  .hx-fog{background:linear-gradient(180deg,rgba(251,248,244,.25) 0%,rgba(251,248,244,0) 25%,rgba(251,248,244,.2) 50%,rgba(251,248,244,.5) 100%)}
}
/* 馬蹄マークは消す（位置合わせの目印としてだけ残す） */
.hx-orb .hx-mark{display:none!important}
@keyframes hxDrift{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@media (max-width:820px){
  .hx-glow{right:-30vmax;top:30%}
}
/* PC：見出しと文章の左端を、下の「取扱ブランド」と同じ線にそろえる */
@media (min-width:821px){.copy,.intro{left:max(clamp(16px,7vw,110px),calc((100vw - 1120px)/2 + 56px))!important}}
/* 明るい背景なので、最初から文字とメニューは濃い色 */
.copy{color:var(--ink)!important}
.copy .sub{color:var(--gold)!important}
.hd .logo{color:var(--gold)!important}
.nav a,.nav .has-dd>button,.menu-btn{color:var(--ink)!important}
.nav .cur-page a,.nav a:hover{color:var(--gold)!important}
.scroll-hint{color:var(--ink-soft)!important}
.scroll-hint i{background:var(--line)}
.scroll-hint i::after{background:var(--gold)}

.copy,.intro,.track,.panel .pic img{will-change:transform}
.slide{position:absolute;inset:0;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
.slide.on{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.slide.under{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.slide.enter{clip-path:polygon(115% 0,100% 0,100% 100%,140% 100%)}
.slide.on.go{clip-path:polygon(-40% 0,100% 0,100% 100%,0 100%)}
.slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.18);transition:transform 7s ease-out}
.slide.on img{transform:scale(1.02)}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,64,58,.28) 0%,rgba(74,64,58,0) 30%,rgba(74,64,58,0) 50%,rgba(74,64,58,.38) 100%);pointer-events:none}
/* 明るい場面でも白い文字が読めるよう、文字の側をやわらかく沈める */
.tint{background:linear-gradient(90deg,rgba(58,48,42,.42) 0%,rgba(58,48,42,.26) 38%,rgba(58,48,42,.08) 70%,rgba(58,48,42,0) 100%)!important}
@media (max-width:820px){.tint{background:rgba(58,48,42,.30)!important}}
.tag{position:absolute;left:clamp(16px,4vw,48px);bottom:22px;z-index:3;font-size:11px;color:rgba(255,255,255,.8);letter-spacing:.12em;margin:0}
.dots{position:absolute;right:clamp(16px,4vw,48px);bottom:26px;z-index:3;display:flex;gap:10px}
.dots i{position:relative;width:36px;height:1px;background:rgba(255,255,255,.35);overflow:hidden}
.dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dots i.on::after{animation:bar 6s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}

.copy{position:absolute;z-index:4;left:clamp(16px,7vw,110px);top:50%;transform:translateY(-50%);transform-origin:left center;color:#fff;max-width:calc(100% - 32px)}
.copy h1{font-family:var(--f-copy);font-weight:400;font-size:clamp(28px,3.3vw,44px);line-height:1.6;letter-spacing:.14em;margin:0}
.copy h1 .ln{display:block;overflow:hidden}
.copy h1 .ch{display:inline-block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{transform:none}}
.copy .sub{font-family:var(--f-latin);font-size:clamp(14px,1.4vw,18px);letter-spacing:.3em;margin:12px 0 0;color:var(--gold-light);opacity:0;animation:fade 1.2s 1.4s forwards}
@keyframes fade{to{opacity:1}}
.intro{position:absolute;z-index:4;left:clamp(16px,7vw,110px);right:16px;top:56%;max-width:32em;color:var(--ink-soft);opacity:0;margin:0}
.intro a{display:inline-block;margin-top:14px;color:var(--ink)}
.scroll-hint{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;color:#fff;font-family:var(--f-latin);font-size:12px;letter-spacing:.3em}
.scroll-hint i{width:1px;height:42px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#fff;animation:drop 2s ease-in-out infinite}
@keyframes drop{to{top:100%}}

/* sections */
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,5vw,56px)}
.sec{padding-block:clamp(96px,14vw,176px)}
.eyebrow{font-family:var(--f-latin);font-size:15px;letter-spacing:.32em;color:var(--gold);margin:0 0 18px}
.h2{font-family:var(--f-copy);font-weight:400;font-size:clamp(22px,2.6vw,30px);letter-spacing:.12em;line-height:1.7;margin:0 0 26px}
.h2 .ln{display:block;overflow:hidden}
.h2 .ln>span{display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.lead{max-width:34em;margin:0 0 34px;color:var(--ink-soft)}

/* 写真がカーテンのように開く */
.reveal-img{position:relative;overflow:hidden;max-width:100%}
.reveal-img img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.reveal-img{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.ph{position:absolute;left:12px;bottom:8px;font-size:11px;color:rgba(255,255,255,.85);letter-spacing:.1em;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.35)}

.b-card .name{font-family:var(--f-latin);font-size:clamp(32px,3.8vw,50px);letter-spacing:.18em;margin:0;line-height:1.2}
.b-card .kana{font-size:12px;letter-spacing:.3em;color:var(--ink-soft);margin:6px 0 26px}
.links{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}

/* 横長の写真：近づくと大きく、通り過ぎると戻る */
.band{position:relative;height:clamp(320px,62vw,680px);overflow:hidden;display:grid;place-items:center}
.band img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.band .word{position:relative;z-index:2;font-family:var(--f-latin);color:#fff;font-size:clamp(36px,9vw,128px);letter-spacing:.2em;margin:0;white-space:nowrap;will-change:transform;opacity:.92}
.band .ph{left:clamp(16px,4vw,48px);bottom:18px}

.news-list{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:16px;padding:22px 4px;text-decoration:none;transition:color .3s,padding-left .4s}
.news-list a:hover{color:var(--gold);padding-left:14px}
.news-list time{font-family:var(--f-latin);font-size:16px;letter-spacing:.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.ft{background:var(--paper-2);padding-block:56px calc(40px + env(safe-area-inset-bottom,0px))}
.ft .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end}
.ft .logo{color:var(--gold);font-size:22px}
.legal small{font-size:11px;color:var(--ink-soft);letter-spacing:.1em}
.ft .row{display:flex;gap:24px;flex-wrap:wrap;align-items:center}

.note{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:#fff;font-size:11px;padding:6px 12px;letter-spacing:.08em;margin:0}

/* 下から現れる（最初の画面より下の要素だけ、JSで付ける） */
.rv{transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv.pre{opacity:0;transform:translateY(32px)}
.h2.pre .ln>span{transform:translateY(105%)}
.reveal-img.pre{clip-path:inset(100% 0 0 0)}
.reveal-img.pre img{transform:scale(1.25)}

/* mobile menu */
.drawer{position:fixed;inset:0;z-index:40;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:calc(80px + env(safe-area-inset-top,0px)) 32px 40px}
.drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.drawer a{text-decoration:none;display:grid}
.drawer .en{font-family:var(--f-latin);font-size:24px;letter-spacing:.18em;color:var(--ink)}
.drawer .ja{font-size:12px;color:var(--ink-soft);letter-spacing:.1em}
.drawer .sub-l{padding-left:16px;border-left:1px solid var(--gold-light);display:flex;flex-direction:column;gap:8px;margin-top:10px;font-size:13px}
.drawer .sub-l a.sub{padding-left:1em;position:relative;font-size:.92em;align-self:flex-start}
.drawer .sub-l a.sub::before{content:"";position:absolute;left:0;top:50%;width:.55em;height:1px;background:currentColor;opacity:.5}
.close{position:absolute;right:16px;top:calc(18px + env(safe-area-inset-top,0px));background:none;border:0;font-size:13px;letter-spacing:.2em;color:var(--ink);cursor:pointer;font-family:var(--f-latin)}

@media (max-width:820px){
  .nav{display:none}
  .menu-btn{display:block}
  .b-card{margin:-60px 0 0 auto;width:calc(100% - 24px)}
  .dd-in{grid-template-columns:minmax(0,1fr)}
  .news-list a{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media not all{
  .hero-wrap{height:auto}
  .hero{position:relative}
  .slide,.slide img,.rv,.reveal-img,.reveal-img img,.h2 .ln>span{transition:none!important}
  .copy h1 .ch,.copy .sub{animation:none;transform:none;opacity:1}
  .rv.pre,.reveal-img.pre,.h2.pre .ln>span{opacity:1;transform:none;clip-path:none}
  .scroll-hint i::after,.dots i.on::after{animation:none}
}

/* ブランドのドロップダウン */
.nav li{position:relative}
.nav .has-dd>button{all:unset;cursor:pointer;display:grid;justify-items:center;color:#fff;transition:color .5s}
.hd.solid .nav .has-dd>button{color:var(--ink)}
.nav .has-dd>button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nav li.has-dd{position:static}
.has-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px}
.dd{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility .6s}
.has-dd:hover .dd,.has-dd:focus-within .dd,.has-dd.open .dd{clip-path:inset(0 0 0 0);visibility:visible}
.dd-in{max-width:1180px;margin:0 auto;padding:44px clamp(16px,5vw,56px) 48px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.dd .lbl{font-family:var(--f-latin);font-size:14px;letter-spacing:.3em;color:var(--gold);margin:0 0 6px}
.dd .ttl{font-family:var(--f-copy);font-size:22px;letter-spacing:.12em;margin:0}
.dd .card{display:block;justify-self:center;text-decoration:none}
.dd .card img{display:block;width:clamp(150px,15vw,200px);height:auto;transition:opacity .4s ease}
.dd .card:hover img{opacity:.7}
.dd .b-name{font-family:var(--f-latin);font-size:28px;letter-spacing:.16em;margin:0;line-height:1.2}
.dd .b-kana{font-size:11px;letter-spacing:.24em;color:var(--ink-soft);margin:4px 0 0}
.dd ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,max-content);gap:18px 36px;justify-content:end}
.dd ul a{display:grid;justify-items:start;white-space:nowrap;min-width:11em;text-decoration:none;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--line);position:relative}
.dd ul a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.dd ul a:hover::after,.dd ul a:focus-visible::after{transform:scaleX(1)}
.dd ul .e{font-family:var(--f-latin);font-size:11px;letter-spacing:.24em;color:var(--gold)}
.dd ul .j{font-size:13px;letter-spacing:.08em}
.dd .dd-in>*{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.has-dd:hover .dd-in>*,.has-dd:focus-within .dd-in>*,.has-dd.open .dd-in>*{opacity:1;transform:none}
.dd-in>*:nth-child(2){transition-delay:.08s!important}.dd-in>*:nth-child(3){transition-delay:.16s!important}

/* 横に流れるストーリー：縦スクロールで横に進む */
.story-wrap{position:relative;height:340vh}
.story{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.story-head{position:absolute;left:clamp(16px,5vw,64px);top:calc(88px + env(safe-area-inset-top,0px));display:flex;gap:18px;align-items:baseline}
.story-head .eyebrow{color:var(--gold);margin:0}
.story-head span{font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
@media (min-width:601px){.story-head{position:static;padding-inline:clamp(16px,5vw,64px);margin:0 0 clamp(36px,5vh,60px)}.story-head .eyebrow{font-size:16px}.story-head span{font-size:15px}}
.track{display:flex;gap:clamp(24px,4vw,64px);padding-inline:clamp(16px,5vw,64px);will-change:transform}
.panel{flex:0 0 auto;width:min(68vw,880px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:end}
.panel .pic{position:relative;aspect-ratio:4/3;overflow:hidden}
.panel .pic img{position:absolute;inset:0;width:118%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.panel .no{font-family:var(--f-latin);font-size:13px;letter-spacing:.3em;color:var(--gold);margin:0 0 10px}
.panel h3{font-family:var(--f-latin);font-weight:400;font-size:clamp(34px,5vw,68px);letter-spacing:.12em;line-height:1;margin:0 0 18px}
.panel p.t{font-size:14px;line-height:2;color:var(--ink-soft);margin:0;max-width:22em}
.progress{position:absolute;left:clamp(16px,5vw,64px);right:clamp(16px,5vw,64px);bottom:calc(40px + env(safe-area-inset-bottom,0px));height:1px;background:var(--line)}
.progress i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.story .icredit{position:absolute;right:clamp(16px,5vw,64px);bottom:calc(52px + env(safe-area-inset-bottom,0px));font-size:10px;letter-spacing:.1em;color:var(--ink-soft);margin:0}
@media (max-width:600px){.story .icredit{bottom:calc(40px + env(safe-area-inset-bottom,0px))}}

/* ブランド：後ろに大きな文字がゆっくり流れる */
#brand{position:relative;overflow:hidden}
.ghost{position:absolute;left:0;top:50%;white-space:nowrap;font-family:var(--f-latin);font-size:clamp(120px,22vw,300px);letter-spacing:.08em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold-light);opacity:.55;pointer-events:none;will-change:transform;margin:0}
#brand .wrap{position:relative;z-index:1}
/* ブランド：写真がスクロールで画面いっぱいに広がり、情報カードが重なる */
.brand-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.brand-head .count{font-family:var(--f-latin);font-size:15px;letter-spacing:.2em;color:var(--ink-soft);margin:0;font-variant-numeric:tabular-nums}
.show{position:relative;padding-inline:clamp(16px,5vw,56px)}
/* ヒーローの文章と取扱ブランドの間を詰める */
/* 各項目の間隔をそろえる（PC 約180px／スマホ 約100px） */
#brand{position:relative;z-index:2;margin-top:calc(-44vh + 127px);margin-top:calc(-44svh + 127px)}
#news{padding-top:140px;padding-bottom:173px}
@media (max-width:820px){#brand{margin-top:0;padding-top:46px}.intro{top:calc(42% + 100px)!important;bottom:auto}#news{padding-top:72px;padding-bottom:94px}}
.show-img{position:relative;height:clamp(380px,62vw,720px);overflow:hidden;will-change:clip-path}
.show-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;will-change:transform}
.show-img .ph{left:16px;bottom:12px}
/* 商品写真：白い背景をページの色に溶かし、大きくしすぎない */
.show-img.ph2{height:auto;aspect-ratio:2/1;max-height:640px}
.show-img.ph2 img{object-position:50% 52%}
.show-img.mv{height:auto;width:min(66%,860px);aspect-ratio:1.42/1;max-height:none;background:var(--paper-2)}
/* PC：映像の枠とカードを、見出しと同じ幅（左右の端）にそろえる */
@media (min-width:821px){
  #brand .show{max-width:1120px;margin-inline:auto}
  .show-img.mv{width:72%}
  .show-img.mv+.b-card{margin-left:auto;margin-right:0}
}
.show-img.mv .mvwin{position:absolute;left:5.6%;top:8%;height:84%;aspect-ratio:3/2;overflow:hidden;will-change:transform;box-shadow:0 30px 60px -40px rgba(74,58,48,.45)}
.show-img.mv video{display:block;width:100%;height:100%;object-fit:cover}
.show-img.pr{height:auto;aspect-ratio:2/1;max-height:640px;background:var(--paper-2)}
.show-img.pr img{left:auto;right:7%;top:9%;bottom:auto;height:86%;width:auto;aspect-ratio:1904/1223;object-fit:contain}
.b-card{position:relative;z-index:2;width:min(440px,100%);margin:-140px clamp(16px,6vw,96px) 0 auto;background:var(--paper);padding:clamp(28px,3.4vw,44px);will-change:transform}
.b-card .b-no{max-width:none}
.b-card .name a{text-decoration:none}
.b-card .lead{margin-bottom:26px}
.b-card .links{flex-direction:row;flex-wrap:wrap;gap:12px 28px}

/* フッターの大きなロゴが下から揃う */
/* 最後の入口：臨店講習とお問い合わせ */
.cta{display:grid;grid-template-columns:1fr}
.cta a{align-items:flex-start}
.cta .bar{width:min(520px,100%)}
.cta a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(260px,32vw,420px);padding:clamp(24px,4vw,56px);color:#fff;text-decoration:none;background:#9C8B80}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:.55;mix-blend-mode:luminosity;transform:scale(1.2);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity 1s}

/* お問い合わせの背景：モヤがゆっくり流れる（マウスに関係なく、いつも動く） */
.cta img{z-index:0;animation:haze 18s ease-in-out infinite alternate}
.cta a::before,.cta a::after{content:"";position:absolute;inset:-30%;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(18px)}
.cta a::before{background:radial-gradient(22% 30% at 30% 45%,rgba(255,250,244,.55),transparent 70%),radial-gradient(18% 26% at 62% 30%,rgba(255,255,255,.4),transparent 70%);animation:mistA 12s ease-in-out infinite alternate}
.cta a::after{background:radial-gradient(24% 32% at 70% 62%,rgba(255,246,236,.5),transparent 70%),radial-gradient(16% 22% at 45% 70%,rgba(255,255,255,.35),transparent 70%);animation:mistB 15s ease-in-out infinite alternate}
.cta .e,.cta .j,.cta .d,.cta .bar{z-index:2}
.cta:not(.live) img,.cta:not(.live) a::before,.cta:not(.live) a::after{animation-play-state:paused}
@keyframes haze{0%{translate:-6% 3%}50%{translate:4% -4%}100%{translate:6% 4%}}
@keyframes mistA{0%{transform:translate(-18%,8%) scale(1);opacity:.55}50%{transform:translate(6%,-8%) scale(1.25);opacity:1}100%{transform:translate(20%,6%) scale(1.05);opacity:.7}}
@keyframes mistB{0%{transform:translate(16%,-6%) scale(1.1);opacity:.8}50%{transform:translate(-8%,8%) scale(.95);opacity:.5}100%{transform:translate(-20%,-4%) scale(1.2);opacity:1}}
@media not all{.cta img,.cta a::before,.cta a::after{animation:none}}
.cta a:hover img,.cta a:focus-visible img{transform:scale(1.16);opacity:.75}
.cta .e,.cta .j,.cta .d{position:relative}
.cta .e{font-family:var(--f-latin);font-size:14px;letter-spacing:.32em;color:#fff;opacity:.85}
.cta .j{font-family:var(--f-copy);font-size:clamp(22px,2.6vw,32px);letter-spacing:.12em;margin-top:6px}
.cta .d{font-size:13px;color:rgba(255,255,255,.88);margin-top:10px}
.cta .bar{position:relative;display:block;height:1px;background:rgba(251,250,246,.35);margin-top:22px;overflow:hidden}
.cta .bar::after{content:"";position:absolute;inset:0;background:var(--gold-light);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cta a:hover .bar::after,.cta a:focus-visible .bar::after{transform:scaleX(1)}
.cta a+a{border-left:1px solid rgba(251,250,246,.15)}
/* PC：お問い合わせの帯を薄くし、文字の左端を下の一覧（ロゴ）の左端にそろえる */
@media (min-width:821px){
  .cta a{min-height:clamp(170px,17vw,240px);padding-block:clamp(28px,3vw,44px);
    padding-inline:calc(max(0px,(100% - 1120px)/2) + clamp(16px,5vw,56px))}
}
.site{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px;padding-block:64px 48px}
.site .logo{color:var(--gold);font-size:22px}
.site address{font-style:normal;font-size:12px;color:var(--ink-soft);margin-top:14px;line-height:1.9}
.site h4{font-family:var(--f-latin);font-weight:500;font-size:14px;letter-spacing:.24em;margin:0 0 12px}
.site h4 a{text-decoration:none}
.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-soft)}
.site ul a{text-decoration:none}
.site ul a:hover{color:var(--gold)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-block:20px calc(24px + env(safe-area-inset-bottom,0px))}
@media (max-width:820px){.cta{grid-template-columns:1fr}.cta a+a{border-left:0;border-top:1px solid rgba(251,250,246,.15)}.site{grid-template-columns:1fr 1fr}.site>div:first-child{grid-column:1/-1}}

@media (max-width:820px) and (orientation:portrait){
  .panel{width:84vw;grid-template-columns:minmax(0,1fr);align-items:start}
  .panel .pic{aspect-ratio:16/10}
}
@media not all{
  .story-wrap{height:auto}
  .story{position:relative;height:auto;padding-block:120px 80px}
  .track{flex-direction:column}
  .panel{width:auto}
}

.brand-head{margin-bottom:clamp(40px,6vw,72px)}
#brand{padding-bottom:162px}
@media (max-width:820px){#brand{padding-bottom:100px}}
.brand-head .h2{margin:0}
.b-no{font-family:var(--f-latin);font-size:13px;letter-spacing:.3em;color:var(--gold);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);max-width:12em}
.story{justify-content:center;padding-top:calc(60px + env(safe-area-inset-top,0px))}
.panel{align-items:center}

/* マウスに付いてくる円（パソコンのみ） */
.cur{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:60;opacity:0;transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1),background-color .45s,border-color .45s,opacity .4s}
.cur.on{opacity:1}
.cur.big{width:44px;height:44px;margin:-22px 0 0 -22px;background:color-mix(in srgb,var(--gold-light) 45%,transparent);border-color:transparent}
.cur.light{border-color:rgba(255,255,255,.8)}
.cur.big.light{background:rgba(255,255,255,.22)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* スマホの調整 */
@media (max-width:600px){
  body{font-size:14px}
  .hd.solid{backdrop-filter:none;background:var(--paper)}
  .hd{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px}
  .hd.solid{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .logo{font-size:20px;letter-spacing:.36em}
  .copy{left:20px}
  .copy h1{font-size:clamp(22px,6.3vw,27px);letter-spacing:.12em}
  .intro{left:20px;right:20px;top:58%;font-size:13px}
  .sec{padding-block:88px}
  .eyebrow{font-size:13px;margin-bottom:12px}
  .h2{font-size:22px;margin-bottom:18px}
  .show{padding-inline:0}
  .show-img{height:min(118vw,520px)}
  .show-img.pr{aspect-ratio:1.42;height:auto}
  .show-img.ph2{aspect-ratio:4/3;max-height:none}
  .show-img.mv{width:auto;aspect-ratio:auto;height:auto;max-height:none;padding:22px 0 26px}
  .show-img.mv .mvwin{position:relative;left:auto;top:auto;height:auto;width:88%;margin:0 auto}
  .show-img.pr img{left:4%;right:auto;top:6%;width:92%;height:auto}
  .b-card{width:calc(100% - 32px);margin:-14px 16px 0 auto;padding:28px 24px}
  .b-card .name{font-size:32px}
  .story-head{top:calc(109px + env(safe-area-inset-top,0px));flex-direction:column;gap:2px}
  .story-head .eyebrow{font-size:12px}
  .track{gap:20px;padding-inline:20px}
  .panel{width:82vw;gap:18px}
  .panel .pic{aspect-ratio:4/3}
  .panel h3{font-size:38px;margin-bottom:10px}
  .panel p.t{font-size:13px}
  .progress{bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .news-list a{padding:18px 2px}
  .news-list span{font-size:13px;line-height:1.8}
  .cta a{min-height:180px;padding:26px 24px}
  .site{gap:28px 20px;padding-block:48px 36px}
  .drawer{padding-inline:28px}
  .drawer .en{font-size:21px}
  /* 余白をそろえる */
  #brand{position:relative;z-index:1;margin-top:calc(275px - 58svh);padding-bottom:100px}
  .story{justify-content:flex-start;padding-top:calc(205px + env(safe-area-inset-top,0px))}
  .track{align-items:flex-start}
  .panel{align-content:start}
}
.opening{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;place-items:center;pointer-events:none;animation:lift 1s cubic-bezier(.7,0,.2,1) 2.1s forwards}
.opening .om{display:grid;justify-items:center;gap:18px}
.opening .oline{display:block;width:120px;height:1px;background:var(--gold-light);transform:scaleX(0);animation:lineIn 1.1s cubic-bezier(.7,0,.2,1) .7s forwards}
@keyframes logoIn{to{opacity:1;letter-spacing:.42em;margin-left:.42em}}
@keyframes lineIn{to{transform:scaleX(1)}}
@keyframes lift{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
.copy .sub{animation-delay:3.4s!important}
@media not all{.opening{display:none}}
/* 英字はすべて大文字・数字も大文字の高さにそろえる */
.logo,.nav .en,.eyebrow,.copy .sub,.scroll-hint,.b-no,.count,.name,.b-name,.lbl,.dd ul .e,.panel .no,.panel h3,.story-head .eyebrow,.cta .e,.site h4,.drawer .en,.close,.ol,.news-list time,.sub-l span{text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}
.panel h3{letter-spacing:.1em}
.b-card .name{letter-spacing:.14em}

/* 正式ロゴ */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo svg{height:15px;width:auto;display:block}
.site .logo svg{height:78px}
.ol{line-height:0;opacity:0;transform:translateY(10px);animation:logoUp 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards;color:var(--gold)}
.ol svg{width:clamp(110px,12vw,150px);height:auto;display:block}
@keyframes logoUp{to{opacity:1;transform:none}}
@media (max-width:600px){.logo svg{height:13px}}

.site .sub-brand{font-family:var(--f-latin);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.site .sub-brand a{text-decoration:none}
.site ul.nest{padding-left:14px;border-left:1px solid var(--gold-light)}

/* 日本語を言葉のまとまりで改行する */
body{word-break:auto-phrase;line-break:strict}
.site ul a,.dd ul a{white-space:nowrap}
.site{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)}
@media (max-width:820px){.site{grid-template-columns:1fr 1fr}}

/* 駆け抜ける馬の面影（スクロール連動） */
.run-wrap{position:relative;height:240vh}
.run{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.run canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media not all{.run-wrap{height:auto}.run{position:relative;height:60vh}}

/* メインの映像 */
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;filter:saturate(.85) contrast(.94) brightness(.94);transform:scale(1.04)}
.tint{position:absolute;inset:0;background:rgba(251,248,244,.10);pointer-events:none}

/* 明朝の見出しは文字の左の余白ぶん左へ寄せ、英字や本文と左端をそろえる */
.ph-title,.lead-copy,.h2,.copy h1{margin-left:-.08em}
@media not all{
.rv{transition:opacity 1.1s ease!important}
.rv.pre{opacity:0!important;transform:none!important;filter:none!important}
.h2 .ln>span{transition:opacity 1s ease!important}
.h2.pre .ln>span{opacity:0!important;transform:none!important;filter:none!important}
.ph-title .ch{transform:none!important;opacity:0;animation-name:chFade!important;animation-duration:.9s!important;animation-timing-function:ease!important;animation-fill-mode:both!important}
.reveal-img{transition:opacity 1.2s ease!important}
.reveal-img.pre{opacity:0!important;clip-path:none!important}
.reveal-img.pre *{transform:none!important;clip-path:none!important}
}
@keyframes chFade{from{opacity:0}to{opacity:1}}
.nw{white-space:nowrap}
.legal{align-items:baseline}
.legal .u-link,.legal small{line-height:1.6}
.tag.credit{left:auto;right:clamp(16px,4vw,48px);font-family:var(--f-body);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.mvcredit{position:absolute;left:5.6%;bottom:2.2%;margin:0;font-family:var(--f-body);font-size:10px;letter-spacing:.1em;color:var(--ink-soft);opacity:.85}
@media (max-width:820px){.mvcredit{position:static;text-align:right;width:88%;margin:10px auto 0}}

/* 取扱ブランド：文字だけの一覧（取扱代理店ページと同じ雰囲気） */
.bl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bl-list li{border-bottom:1px solid var(--line)}
.bl-list a,.bl-list .soon{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px 32px;align-items:baseline;padding:clamp(28px,3.2vw,40px) 4px;text-decoration:none;color:var(--ink);transition:padding-left .5s cubic-bezier(.2,.7,.2,1),background .5s}
.bl-list a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bl-list a:hover{padding-left:16px;background:color-mix(in srgb,#fff 40%,transparent)}
.bl-list a:hover::after{transform:scaleX(1)}
.bl-list .nm{font-family:var(--f-latin);font-size:clamp(24px,2.6vw,32px);letter-spacing:.22em;line-height:1.3}
.bl-list .ds{font-size:13px;color:var(--ink-soft);letter-spacing:.06em;line-height:1.9}
.bl-list .kn{display:block;font-family:var(--f-copy);font-size:15px;color:var(--ink);letter-spacing:.14em;margin-bottom:2px}
.bl-list .soon .nm{color:var(--gold);opacity:.7;font-size:clamp(18px,1.9vw,22px);letter-spacing:.24em;text-transform:uppercase}
.bl-list .soon .ds{opacity:.8}
@media (max-width:820px){.bl-list a,.bl-list .soon{grid-template-columns:minmax(0,1fr);gap:6px}}

/* 「ユーワンは〜」→取扱ブランド と、取扱ブランド→お知らせ の間をそろえる */
#brand{padding-bottom:72px!important}
@media (max-width:820px){#brand{padding-bottom:13px!important}}
@media (max-width:600px){#brand{padding-bottom:44px!important}}

/* 見出し「取扱ブランド」が主、ITALWAXはその中の項目：文字を一段小さく、左端を見出しにそろえる */
.bl-list a,.bl-list .soon{padding-left:0;padding-right:0}
.bl-list .nm{font-size:clamp(19px,1.8vw,23px);letter-spacing:.2em}
.bl-list .soon .nm{font-size:clamp(15px,1.4vw,17px)}

/* ブランドの説明文は「ユーワンは〜」の文章と同じ大きさ・字間に */
.bl-list .ds{font-size:15px;letter-spacing:.04em;line-height:1.9}
@media (max-width:600px){.bl-list .ds{font-size:13px}}
.nest li.sub a{padding-left:1em;position:relative;font-size:.92em}
.nest li.sub a::before{content:"";position:absolute;left:0;top:50%;width:.55em;height:1px;background:currentColor;opacity:.5}

.hd .logo{padding:14px 10px;margin:-14px -10px}
/* WordPress：ログイン中の管理バーの分だけ、固定ヘッダーを下げる */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}