:root{--ink:#1f1c1a;--ink-2:#5c3a42;--gray:#6e6862;--gray-2:#9a928a;--deep:#141312;--accent:#7b2436;--gold:#a8832f;--line:#e2dbd1;--bg:#f7f4ef;--bg-2:#efe9e0;--on-dark:#ece7df;--veil-top:rgba(20,19,18,.50);--veil-mid:rgba(20,19,18,.20);--veil-bot:rgba(20,19,18,.76);--ph-a:#3a3330;--ph-b:#211d1b;--ph-light-a:#e6e0d6;--ph-light-b:#cdc5b9}
:root{
  /* 配色は build 時に注入(src/themes.mjs) */
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --en:"Times New Roman",Georgia,serif;
  --sans:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:15px;line-height:2.15;letter-spacing:.055em;
  -webkit-font-smoothing:antialiased;padding-bottom:56px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.7em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:760px;margin:0 auto;padding:0 32px}

/* ---------- reveal ---------- */
.has-js .rv{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1)}
.has-js .rv.in{opacity:1;transform:none}
.has-js .rv.d1{transition-delay:.12s}
.has-js .rv.d2{transition-delay:.24s}
.has-js .rv.d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.has-js .rv{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s;
  padding:26px 0;mix-blend-mode:normal}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
header.site.solid{background:var(--bg);backdrop-filter:blur(10px);
  padding:16px 0;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:flex-end;gap:12px}
.logo .mark{font-family:var(--en);font-size:26px;letter-spacing:.2em;line-height:1;color:var(--ink)}
.logo .sub{font-size:9px;letter-spacing:.26em;color:var(--gray-2);line-height:1.7;padding-bottom:2px}
header.site.over .logo .mark,header.site.over .logo .sub,header.site.over nav.main a{color:#fff}
header.site.solid{opacity:.97}
nav.main{display:flex;gap:30px}
nav.main a{font-family:var(--en);font-size:12px;letter-spacing:.22em;color:var(--ink-2);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:currentColor}
@media(max-width:900px){header.site{padding:16px 0}
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  nav.main{gap:18px;flex-wrap:wrap}
  nav.main a{font-size:10.5px;letter-spacing:.16em}}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--deep)}
.hero .ph{position:absolute;inset:0}
.hero .ph::after,.hero .pic.hero-pic::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--veil-top) 0%,var(--veil-mid) 38%,var(--veil-bot) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding-bottom:120px}
.hero .vtext{position:absolute;top:16vh;right:6vw;z-index:2;writing-mode:vertical-rl;
  font-family:var(--serif);font-size:clamp(17px,2vw,23px);letter-spacing:.42em;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hero h1{font-family:var(--serif);color:#fff;font-weight:400;
  font-size:clamp(23px,3.4vw,40px);line-height:1.85;letter-spacing:.1em;margin:0 0 22px;
  text-shadow:0 1px 18px rgba(0,0,0,.28)}
.hero p{color:rgba(255,255,255,.9);max-width:520px;font-size:14px;margin:0}
.scrollcue{position:absolute;bottom:74px;right:6vw;z-index:3;font-family:var(--en);
  font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.75);writing-mode:vertical-rl}
.scrollcue::after{content:"";display:block;width:1px;height:52px;margin:12px auto 0;
  background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
@media(max-width:900px){.hero .inner{padding-bottom:96px}.hero .vtext{top:14vh;right:7vw;letter-spacing:.34em}}

/* ---------- photo placeholder ---------- */
.ph{background:linear-gradient(135deg,var(--ph-a) 0%,var(--ph-b) 100%);
  position:relative;overflow:hidden}
.ph::before{content:attr(data-label);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-family:var(--en);font-size:10px;letter-spacing:.3em;
  color:rgba(255,255,255,.42);white-space:nowrap;z-index:1}
.ph.light{background:linear-gradient(135deg,var(--ph-light-a) 0%,var(--ph-light-b) 100%)}
.ph.light::before{color:var(--gray-2)}
.ratio-4x3{aspect-ratio:4/3}.ratio-3x4{aspect-ratio:3/4}.ratio-4x5{aspect-ratio:4/5}.ratio-16x9{aspect-ratio:16/9}.ratio-1x1{aspect-ratio:1/1}

/* ---------- 実写 ---------- */
.pic{position:relative;overflow:hidden;background:var(--bg-2)}
.pic.light{background:#fff}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic.hero-pic{position:absolute;inset:0}
.pic.hero-pic img{filter:brightness(.92) saturate(.92)}
.pitem .thumb .pic img{transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.pitem:hover .thumb .pic img{transform:scale(1.035)}

/* ---------- sections ---------- */
section{padding:130px 0}
section.tight{padding:96px 0}
section.alt{background:var(--bg-2)}
.slabel{font-family:var(--en);font-size:11px;letter-spacing:.42em;color:var(--gold);
  margin:0 0 10px;text-transform:uppercase}
.stitle{font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--ink-2);margin:0 0 46px;font-weight:400}
h2.lead{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.4vw,28px);
  line-height:2;letter-spacing:.13em;margin:0 0 34px}
h2.lead.en-lead{font-family:var(--en);letter-spacing:.22em;line-height:1.65;
  font-size:clamp(19px,2.7vw,31px);margin-bottom:26px}
h2.lead.brand-lead{font-size:clamp(34px,5.4vw,62px);letter-spacing:.32em;margin:0 0 18px}
.en-sub{font-family:var(--en);font-size:15px;letter-spacing:.15em;color:var(--ink-2);margin:0 0 8px}
.body-note{color:var(--gray);font-size:14px;max-width:620px}
@media(max-width:900px){section{padding:88px 0}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split.rev>div:first-child{order:2}
.split.top{align-items:flex-start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}.split.rev>div:first-child{order:0}}

/* ---------- poem ---------- */
.poem{font-family:var(--serif);font-size:clamp(15px,1.5vw,17.5px);line-height:2.6;
  letter-spacing:.16em;color:var(--ink-2)}
.poem span{display:block}

/* ---------- products ---------- */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:56px 38px}
.pitem .thumb{margin-bottom:20px;transition:.5s}
.pitem:hover .thumb{opacity:.82}
.pitem .cat{font-family:var(--en);font-size:10px;letter-spacing:.28em;color:var(--gold);margin-bottom:9px}
.pitem h3{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.11em;
  line-height:1.8;margin:0 0 8px}
.pitem p{font-size:13px;color:var(--gray);margin:0 0 12px;line-height:1.95}
.pitem .status{font-family:var(--en);font-size:13.5px;letter-spacing:.1em;color:var(--ink-2)}
.pitem.soon{opacity:.55}

/* ---------- テキストのみの一覧(プロデュース OTHER) ---------- */
.plist-plain{list-style:none;margin:0 0 30px;padding:0;max-width:760px;border-top:1px solid var(--line)}
.plist-plain li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:20px 2px;border-bottom:1px solid var(--line)}
.plist-plain .pn{font-family:var(--serif);font-size:16px;letter-spacing:.09em;line-height:1.7}
.plist-plain .pp{font-size:12.5px;color:var(--gray);letter-spacing:.06em;white-space:nowrap}
@media(max-width:600px){.plist-plain li{flex-direction:column;gap:6px}.plist-plain .pp{white-space:normal}}

/* ---------- links / buttons ---------- */
.tlink{display:inline-flex;align-items:center;gap:14px;font-family:var(--en);font-size:11.5px;
  letter-spacing:.28em;color:var(--ink-2);padding-bottom:7px;border-bottom:1px solid var(--line);transition:.3s}
.tlink::after{content:"→";font-family:var(--sans);transition:.3s}
.tlink:hover{border-bottom-color:var(--ink-2)}
.tlink:hover::after{transform:translateX(4px)}
.tlink.on-dark{color:var(--on-dark);border-bottom-color:rgba(255,255,255,.4)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:17px 42px;
  font-size:12.5px;letter-spacing:.22em;font-family:var(--en);border:1px solid var(--accent);transition:.3s}
.btn:hover{background:transparent;color:var(--accent)}
.btn.on-dark{background:var(--on-dark);color:var(--deep);border-color:var(--on-dark)}
.btn.on-dark:hover{background:transparent;color:var(--on-dark)}
.btns{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* ---------- dark band ---------- */
.band{background:var(--deep);color:var(--on-dark);padding:120px 0;text-align:center}
.band .slabel{color:rgba(255,255,255,.55)}
.band .stitle{color:rgba(255,255,255,.85)}
.band h2.lead{color:#fff}
.band p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 38px;font-size:14px}

/* ---------- page head ---------- */
.phead{padding:190px 0 74px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.phead h1{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,31px);
  letter-spacing:.16em;margin:0}
.phead .slabel{margin-bottom:14px}
.phead p{margin:20px 0 0;color:var(--gray);font-size:14px;max-width:640px}
@media(max-width:900px){.phead{padding:150px 0 56px}}

/* ---------- video ---------- */
.video{position:relative;aspect-ratio:16/9;background:var(--deep);margin:24px 0 8px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- tables ---------- */
table.spec{width:100%;border-collapse:collapse;margin:14px 0 30px;font-size:14px}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:17px 4px;text-align:left;vertical-align:top}
table.spec th{width:34%;font-weight:400;color:var(--gray);letter-spacing:.1em}
@media(max-width:600px){table.spec th{width:42%}table.spec th,table.spec td{padding:13px 2px;font-size:13px}}

/* ---------- flow ---------- */
ol.flow{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));background:var(--line);border:1px solid var(--line)}
ol.flow li{counter-increment:s;background:var(--bg-2);padding:38px 30px}
ol.flow li::before{content:"0" counter(s);display:block;font-family:var(--en);font-size:13px;
  letter-spacing:.24em;color:var(--gray-2);margin-bottom:16px}
ol.flow strong{display:block;font-family:var(--serif);font-weight:400;font-size:16px;
  letter-spacing:.1em;margin-bottom:10px}
ol.flow span{font-size:13px;color:var(--gray);line-height:1.95}

/* ---------- shops ---------- */
ul.shops{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ul.shops li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:20px 2px;border-bottom:1px solid var(--line)}
ul.shops .nm{font-family:var(--serif);font-size:16px;letter-spacing:.09em}
ul.shops .nm a{border-bottom:1px solid var(--line)}
ul.shops .nm a:hover{border-bottom-color:var(--accent)}
ul.shops .tw{font-size:12.5px;color:var(--gray);text-align:right;white-space:nowrap}
@media(max-width:640px){ul.shops li{flex-direction:column;gap:6px}
  ul.shops .tw{text-align:left;white-space:normal}}

/* ---------- note ---------- */
.note{border-left:1px solid var(--accent);padding:6px 0 6px 26px;font-size:13px;
  color:var(--gray);line-height:2;margin:34px 0}

/* ---------- index rail ---------- */
.rail{position:fixed;left:26px;bottom:96px;z-index:40;display:flex;flex-direction:column;gap:11px}
.rail .rl{font-family:var(--en);font-size:9px;letter-spacing:.3em;color:var(--gray-2);
  writing-mode:vertical-rl;margin-bottom:6px}
.rail a{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--gray);
  opacity:.75;transition:.3s}
body.hero-top .rail a,body.hero-top .rail .rl{color:rgba(255,255,255,.82)}
body.hero-top .rail a:hover{color:#fff}
.rail a:hover{opacity:1;color:var(--deep)}
@media(max-width:1320px){.rail{display:none}}

/* ---------- fixed bottom bar ---------- */
.fixbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--deep);color:var(--on-dark);
  height:56px;display:flex;align-items:center}
.fixbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.fixbar .info{display:flex;gap:30px;font-size:11.5px;letter-spacing:.13em;color:rgba(255,255,255,.75);
  overflow:hidden;white-space:nowrap}
.fixbar .cta{background:var(--accent);color:#fff;padding:9px 26px;font-size:11.5px;
  letter-spacing:.2em;white-space:nowrap;transition:.3s;font-family:var(--en)}
.fixbar .cta:hover{filter:brightness(1.18)}
@media(max-width:760px){.fixbar .info span:nth-child(n+2){display:none}
  .fixbar .info{font-size:10.5px}.fixbar .cta{padding:9px 16px;font-size:10.5px;letter-spacing:.12em}}

/* ---------- footer ---------- */
footer.site{background:var(--bg-2);border-top:1px solid var(--line);padding:96px 0 40px}
footer.site .fgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;margin-bottom:64px}
@media(max-width:760px){footer.site .fgrid{grid-template-columns:1fr;gap:40px}}
footer.site .fname{font-family:var(--en);font-size:22px;letter-spacing:.2em;margin-bottom:20px}
footer.site .faddr{font-size:12.5px;line-height:2.3;color:var(--gray)}
footer.site nav{display:flex;flex-direction:column;gap:13px}
footer.site nav a{font-family:var(--en);font-size:11px;letter-spacing:.24em;color:var(--gray);transition:.3s}
footer.site nav a:hover{color:var(--deep)}
footer.site .copy{border-top:1px solid var(--line);padding-top:26px;
  font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--gray-2)}