/* JOCALIS 2026 — サイトラフのデザイン */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: 12-column hairline grid on white, museum caption typography, generous margins; one light look by design */
:root{
  --white:#ffffff;
  --g1:#f2f2f2;   /* 面：写真の地 */
  --g2:#e4e4e4;
  --line:#d9d9d9; /* 罫線 */
  --g4:#9a9a9a;
  --sub:#6b6b6b;  /* 補助文字 */
  --ink:#111111;  /* 文字 */
  --memo:#111111;
  --f-latin:"Marcellus","Times New Roman",serif;
  --f-disp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gutR:max(16px, env(safe-area-inset-right, 0px));
  --wrap:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gutR)}
.latin{font-family:var(--f-latin);letter-spacing:.18em;text-transform:uppercase}
.cap{font-size:11px;letter-spacing:.16em;color:var(--sub)}
h1,h2,h3{font-family:var(--f-disp);font-weight:500;text-wrap:balance;margin:0;letter-spacing:.06em}
p{margin:0}

/* prototype notice */
.proto{background:var(--ink);color:var(--white);font-size:11px;letter-spacing:.08em}
.proto .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:6px}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--white)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--white);border-bottom:1px solid var(--line)}
header.site .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px;gap:16px}
.brand{grid-column:2;text-align:center;line-height:1.1}
.brand b{display:block;font-family:var(--f-latin);font-weight:400;font-size:22px;letter-spacing:.42em;margin-right:-.42em}
.brand .logo-j{display:block;height:17px;width:auto;margin:0 auto 5px}
.logo-a{height:44px;width:auto;display:block}
.ars-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ars-h .logo-a{height:34px}
.brand small{font-size:9px;letter-spacing:.3em;color:var(--sub)}
nav.main{grid-column:1;grid-row:1;display:flex;gap:28px;font-size:12px}
nav.main a{display:flex;flex-direction:column;line-height:1.3;padding-block:4px;border-bottom:1px solid transparent}
nav.main a span{font-size:10px;color:var(--sub);letter-spacing:.1em}
nav.main a[aria-current="page"]{border-bottom-color:var(--ink)}
.tools{grid-column:3;justify-self:end;font-size:12px;display:flex;gap:20px}
.menu-btn{display:none}
@media (max-width:820px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px var(--gutR) 16px var(--gut)}
  nav.main.open{display:flex}
  nav.main a{padding-block:12px;border-bottom:1px solid var(--line)}
  .menu-btn{display:block;grid-column:1;grid-row:1;justify-self:start;font-size:12px;letter-spacing:.12em}
  .tools .hide-sm{display:none}
}

/* figure placeholder */
.fig{background:var(--g1);aspect-ratio:4/5;max-width:100%;display:grid;place-items:center;position:relative;overflow:hidden}
.fig svg{width:58%;height:auto}
.fig .ph{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--g4);letter-spacing:.1em}

/* hero */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding-block:72px 64px}
.hero-txt{grid-column:1 / span 5;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;min-width:0}
.hero h1{font-size:clamp(28px,4.2vw,46px);line-height:1.5;font-weight:400}
.hero .lead{max-width:30em;color:var(--sub);font-size:14px}
.hero-fig{grid-column:7 / span 6}
.hero-fig .fig{aspect-ratio:5/4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border:1px solid var(--ink);font-size:13px;letter-spacing:.14em;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--white)}
.btn.solid{background:var(--ink);color:var(--white)}
.btn.solid:hover{background:#333}
@media (max-width:820px){
  .hero .wrap{display:flex;flex-direction:column-reverse;gap:32px;padding-block:32px 48px}
}

/* assurance strip */
.assure{border-bottom:1px solid var(--line)}
.assure .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.assure div{padding:22px 20px;border-left:1px solid var(--line);font-size:13px;line-height:1.7;min-width:0}
.assure div:first-child{border-left:0;padding-left:0}
.assure b{display:block;font-weight:500;margin-bottom:2px}
.assure span{color:var(--sub);font-size:12px}
@media (max-width:820px){.assure .wrap{grid-template-columns:1fr 1fr}.assure div{padding:16px 12px;border-top:1px solid var(--line)}.assure div:nth-child(odd){border-left:0;padding-left:0}.assure div:nth-child(-n+2){border-top:0}}

/* sections */
section.blk{padding-block:88px;border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:48px;align-items:end}
.sec-head .cap{grid-column:1 / span 3}
.sec-head h2{grid-column:4 / span 6;font-size:26px}
.sec-head .more{grid-column:10 / span 3;justify-self:end;font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--ink)}
@media (max-width:820px){.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.sec-head .more{align-self:flex-start}section.blk{padding-block:56px}}

/* collection grid */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.col{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 20px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;text-align:left}
.col:hover .fig{background:var(--g2)}
.col .fig{transition:background .3s}
.col h3{font-size:17px}
.col h3 .latin{font-size:11px;display:block;color:var(--sub);margin-bottom:2px}
.col p{font-size:12.5px;color:var(--sub);line-height:1.8}
.col .price{font-size:13px;font-variant-numeric:tabular-nums;margin-top:auto}
@media (max-width:820px){.cols{grid-template-columns:1fr 1fr}.col{padding:12px 12px 16px}}

.hero .sub{font-family:var(--f-disp);font-size:18px;letter-spacing:.12em;margin-top:-12px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.cols.three{grid-template-columns:repeat(3,1fr)}
.col .stk{color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.others{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line)}
.others a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.others a:hover{background:var(--g1)}
.stacks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stacks figure{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.stacks .fig{aspect-ratio:1}
.stacks figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px}
.stacks figcaption b{font-weight:500}
.stacks figcaption span{color:var(--sub);font-size:12px}
.num{font-variant-numeric:tabular-nums}
@media (max-width:820px){.cols.three{grid-template-columns:1fr}.cols.three .col .fig{aspect-ratio:4/3}.others{grid-template-columns:1fr}.stacks{grid-template-columns:1fr}}
/* entry band */
.entry .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.entry .t{grid-column:1 / span 5}
.entry h2{font-size:24px;margin-block:8px 16px}
.entry .items{grid-column:7 / span 6;display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.entry .wrap{display:flex;flex-direction:column;align-items:stretch}.entry .items{gap:12px}}

/* craft */
.craft .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.craft .fig{grid-column:1 / span 5;aspect-ratio:1}
.craft .t{grid-column:7 / span 5;display:flex;flex-direction:column;gap:20px;justify-content:center;min-width:0}
.craft h2{font-size:26px;line-height:1.6}
.craft dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:8px 0 0;font-size:13px;border-top:1px solid var(--line);padding-top:20px}
.craft dt{color:var(--sub)}
.craft dd{margin:0}
@media (max-width:820px){.craft .wrap{display:flex;flex-direction:column}}

/* ars */
.ars .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.ars .t{grid-column:1 / span 4;display:flex;flex-direction:column;gap:16px}
.ars h2{font-size:22px}
.ars .pair{grid-column:6 / span 7;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.ars .pair > div{background:var(--white);padding:16px;display:flex;flex-direction:column;gap:10px}
@media (max-width:820px){.ars .wrap{display:flex;flex-direction:column;align-items:stretch}}

/* listing */
.ab-hero{border-bottom:1px solid var(--line);padding-block:48px}
.ab-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ab-hero .fig{aspect-ratio:3/2;max-width:100%}
.ab-hero blockquote{margin:0;display:flex;flex-direction:column;gap:16px}
.ab-hero blockquote .ab-lead{font-size:13.5px;line-height:2;color:var(--sub);margin:8px 0 0;text-wrap:pretty}
.ab-hero blockquote p{font-size:32px;line-height:1.6;margin:0;text-wrap:balance}
.ab-pil{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ab-pil>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ab-pil b{font-size:16px;font-weight:500;line-height:1.6}
.ab-pil p,.ab-row p,.ab-mini p,.ab-tl p{color:var(--sub);font-size:13.5px;line-height:1.9;margin:0}
.ab-collab .wrap{display:flex;flex-direction:column;gap:56px}
.ab-collab .paris-v{grid-template-columns:1fr 1fr;column-gap:56px;margin:0;border:0;min-height:0}
.ab-collab .paris-v .pv-img{min-height:380px}
.ab-collab .paris-v .pv-t{padding:24px 0}
@media (max-width:820px){.ab-collab .paris-v{grid-template-columns:1fr;row-gap:16px}.ab-collab .paris-v .pv-img{min-height:0;aspect-ratio:4/3}.ab-collab .paris-v .pv-t{padding:0}}
.ab-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.ab-row .fig{aspect-ratio:auto;min-height:380px;height:100%;max-width:100%}
.ab-row .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-row .fig.zoom img{transform:scale(1.7)}
.ab-row .t{display:flex;flex-direction:column;justify-content:center;padding-block:24px;gap:16px;min-width:0;align-items:flex-start}
.ab-row.rev .fig{order:2}
.ab-row.rev .t{order:1}
.ab-row h3{font-size:20px;font-weight:400;line-height:1.6;margin:0}
.ab-row dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;font-size:13px;border-top:1px solid var(--line);padding-top:16px;width:100%}
.ab-row dt{color:var(--sub)}.ab-row dd{margin:0}
.ab-mini{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ab-mini>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ab-tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ab-tl li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding-block:24px;border-bottom:1px solid var(--line)}
.ab-tl li>span{font-size:28px;line-height:1}
.ab-tl li div{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (max-width:820px){.ab-hero .wrap{grid-template-columns:1fr;gap:24px}.ab-hero blockquote p{font-size:22px}.ab-pil{grid-template-columns:1fr 1fr}.ab-pil>div{padding:16px 12px}.ab-row,.ab-row.rev{display:flex;flex-direction:column;align-items:stretch}.ab-row .fig{min-height:0;aspect-ratio:4/3;height:auto}.ab-row .t{padding-block:0}.ab-row.rev .fig,.ab-row.rev .t{order:0}.ab-mini{grid-template-columns:1fr}.ab-tl li{grid-template-columns:1fr;gap:10px}}
@media (max-width:480px){.ab-pil{grid-template-columns:1fr}}
.ct-top{grid-template-columns:repeat(3,1fr)}
.ct-top>div:nth-child(7){grid-column:1/-1}
.ct-wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.ct-form{display:flex;flex-direction:column;gap:20px;min-width:0}
.ct-form h2{font-size:22px;font-weight:400;margin:-8px 0 4px}
.ct-form label{display:flex;flex-direction:column;gap:8px;font-size:13px}
.ct-form label i{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--sub);border:1px solid var(--line);padding:1px 6px;margin-left:10px}
.ct-form input,.ct-form select,.ct-form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:0;padding:12px 14px;width:100%;box-sizing:border-box}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--ink)}
.ct-form .err{border-color:#9b2c2c}
.ct-form .btn{align-self:flex-start}
.ct-note{margin:0}
.ct-side{display:flex;flex-direction:column;border-top:1px solid var(--ink);min-width:0}
.ct-side>div{display:flex;flex-direction:column;gap:10px;padding-block:24px;border-bottom:1px solid var(--line);align-items:flex-start}
.ct-side b{font-size:16px;font-weight:500}
.ct-side p{color:var(--sub);font-size:13px;line-height:1.9;margin:0}
.ct-side dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;font-size:13px}
.ct-side dt{color:var(--sub)}.ct-side dd{margin:0}
.ct-side .ig-link{border-bottom:1px solid var(--line);font-size:13px}
.ct-faq>div:last-child{border-top:1px solid var(--ink);max-width:48em}
@media (max-width:820px){.ct-top{grid-template-columns:1fr 1fr}.ct-wrap{grid-template-columns:1fr;gap:40px}}
@media (max-width:480px){.ct-top{grid-template-columns:1fr}}
.ab-vmd .wrap{display:flex;flex-direction:column;gap:32px}
.ab-vmd .sec-head{margin-bottom:0}
.ab-vlead{font-size:16px;line-height:2;max-width:40em;margin:0;text-wrap:pretty}
.ab-pil3{grid-template-columns:repeat(3,1fr)}
.ab-story{display:grid;grid-template-columns:1fr 1fr;gap:56px;border-top:1px solid var(--ink);padding-top:24px}
.ab-story>div{display:flex;flex-direction:column;gap:12px;min-width:0}
.ab-story p{font-size:14px;line-height:2;margin:0;color:var(--ink)}
@media (max-width:820px){.ab-pil3{grid-template-columns:1fr}.ab-story{grid-template-columns:1fr;gap:24px}}
.ab-two{border-bottom:1px solid var(--line);padding-block:72px}
.ab-two .wrap{display:flex;flex-direction:column;gap:32px}
.ab-two .sec-head{margin-bottom:0}
.ab-two-g{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.ab-ax{display:flex;flex-direction:column;gap:14px;padding:32px 32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;color:var(--ink);text-decoration:none;transition:background .2s}
.ab-ax:hover{background:var(--g1)}
.ab-no{font-size:44px;line-height:1;letter-spacing:.06em;color:var(--ink)}
.ab-ax b{font-size:22px;font-weight:400;line-height:1.5}
.ab-ax p{color:var(--sub);font-size:13.5px;line-height:1.9;margin:0}
.ab-ax ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:13px}
.ab-ax ul li::before{content:"— ";color:var(--sub)}
.ab-go{font-size:12px;letter-spacing:.14em;margin-top:auto;padding-top:8px}
.ab-link{color:var(--sub);font-size:13.5px;line-height:2;max-width:46em;margin:0}
.ab-axis{background:var(--ink);color:var(--white)}
.ab-axis .wrap{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;padding-block:28px}
.ab-axis .ab-no{color:var(--white);font-size:36px}
.ab-axis b{font-size:20px;font-weight:400}
.ab-axis span.s{font-size:12px;letter-spacing:.14em;opacity:.7}
@media (max-width:820px){.ab-two{padding-block:48px}.ab-two-g{grid-template-columns:1fr}.ab-ax{padding:24px 20px}}
.ab-clients{display:grid;grid-template-columns:220px 1fr;gap:12px 32px;align-items:start;border-top:1px solid var(--line);padding-top:24px}
.ab-cl-h{display:flex;flex-direction:column;gap:8px}.ab-cl-h b{font-size:16px;font-weight:500}
.ab-clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;font-size:15px;letter-spacing:.06em}
.ab-clients li{line-height:1.4}
.ab-cl-n{grid-column:2}
@media (max-width:820px){.ab-clients{grid-template-columns:1fr}.ab-cl-n{grid-column:1}}
.ab-scope{list-style:none;margin:-8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ab-scope li{border:1px solid var(--ink);padding:6px 14px;font-size:12.5px;letter-spacing:.08em}
.page-head{padding-block:56px 32px;border-bottom:1px solid var(--line)}
.page-head .wrap{display:flex;flex-direction:column;gap:12px}
.page-head h1{font-size:32px;font-weight:400}
.page-head p{color:var(--sub);font-size:13px;max-width:40em}
.filters{border-bottom:1px solid var(--line);position:sticky;top:calc(env(safe-area-inset-top,0px) + 65px);background:var(--white);z-index:4}
.filters .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.filters button{padding:14px 18px;font-size:12px;letter-spacing:.1em;white-space:nowrap;border-bottom:1px solid transparent;color:var(--sub)}
.filters button:first-child{padding-left:0}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 24px;padding-block:40px 88px}
.card{display:flex;flex-direction:column;gap:10px;min-width:0;text-align:left}
.card:hover .fig{background:var(--g2)}
.card .fig{transition:background .3s}
.card .nm{font-size:14px;line-height:1.6}
.card .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.card .meta b{font-weight:400;color:var(--ink)}
.tag{display:inline-block;font-size:11px;letter-spacing:.24em;border:1px solid #fff;color:#fff;padding:2px 8px;line-height:1.5;position:absolute;top:14px;left:14px;background:transparent;font-family:var(--f-latin),var(--f-body);z-index:1}
.tag.ghost{border-color:#9a9a9a;color:#bdbdbd}
.grid-sub{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card.sold{opacity:.55}
@media (max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr 1fr;gap:36px 12px}}

/* product */
.crumbs{font-size:11px;color:var(--sub);letter-spacing:.08em;padding-block:20px}
.crumbs a{border-bottom:1px solid var(--line)}
.pdp{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:88px}
.gallery{grid-column:1 / span 7;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.gallery .fig:first-child{grid-column:1 / -1;aspect-ratio:1}
.gallery .fig{aspect-ratio:1}
.gallery:has(.selg) .fig{grid-column:auto}.gallery:has(.selg) .fig:first-child{grid-column:auto}
.info{grid-column:9 / span 4;display:flex;flex-direction:column;gap:24px;min-width:0;align-self:start}
.info h1{font-size:24px;line-height:1.5}
.info .series{font-size:11px;color:var(--sub)}
.info .price{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.info .price small{font-size:11px;color:var(--sub);margin-left:6px}
.ship{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding-block:12px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.ship b{font-weight:500}
.ship span{color:var(--sub);font-size:12px}
.opt label{display:block;font-size:11px;color:var(--sub);letter-spacing:.12em;margin-bottom:8px}
.opt .chips{display:flex;flex-wrap:wrap;gap:6px}
.opt .chips button{min-width:48px;height:40px;padding:0 10px;border:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.opt .chips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--white)}
.opt .help{font-size:11px;color:var(--sub);margin-top:8px;border-bottom:1px solid var(--line);display:inline-block}
.cart-msg{font-size:12px;color:var(--sub);min-height:1.5em}
.copy{font-family:var(--f-disp);font-size:15px;line-height:2.1}
.copy p + p{margin-top:1em}
.copy .lore{font-family:var(--f-body);font-size:12px;color:var(--sub)}
table.spec{width:100%;border-collapse:collapse;font-size:13px}
table.spec th,table.spec td{border-top:1px solid var(--line);padding:10px 0;text-align:left;vertical-align:top;font-weight:400}
table.spec th{width:6.5em;color:var(--sub)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:1px solid var(--line)}
.tbc{color:var(--g4)}
details.acc{border-bottom:1px solid var(--line);font-size:13px}
details.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding-block:12px}
details.acc summary::after{content:"+";color:var(--sub)}
details.acc[open] summary::after{content:"−"}
details.acc div{padding-bottom:14px;color:var(--sub);font-size:12.5px}
.maker{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--sub)}
.maker b{color:var(--ink);font-weight:500;font-size:13px}
.related{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:40px}
.related h2{font-size:18px;margin-bottom:24px}
.related .grid{padding:0;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.pdp{display:flex;flex-direction:column}.info{position:static}.related .grid{grid-template-columns:1fr 1fr}}

/* footer */
footer.site{padding-block:56px 40px}
footer.site .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;font-size:12px}
footer.site .b{grid-column:1 / span 4;display:flex;flex-direction:column;gap:8px}
footer.site .b b{font-family:var(--f-latin);font-weight:400;font-size:18px;letter-spacing:.42em}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer.site .l1{grid-column:6 / span 3}
footer.site .l2{grid-column:9 / span 4}
footer.site .copy-r{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:20px;color:var(--sub);font-size:11px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:820px){footer.site .wrap{display:flex;flex-direction:column}}

/* improvement memos */
.memo{display:none}
.show-memo .memo{display:block;font-family:var(--f-body);font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--white);background:var(--memo);padding:6px 10px;margin-block:8px;max-width:34em;text-align:left;font-weight:400}
.show-memo .memo::before{content:attr(data-ref);display:inline-block;border:1px solid var(--white);padding:0 5px;margin-right:6px;font-size:10px}
.memo-toggle{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--white);border:1px solid var(--ink);padding:10px 16px;font-size:12px;letter-spacing:.08em;display:flex;gap:10px;align-items:center}
.memo-toggle i{width:28px;height:14px;border:1px solid var(--ink);position:relative;display:inline-block}
.memo-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;background:var(--ink);transition:left .2s}
.show-memo .memo-toggle i::after{left:16px}
/* collection banners */
.coll{border-bottom:1px solid var(--line)}
.coll .wrap{padding-block:56px}
.coll-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cb{position:relative;display:block;background:#242424;aspect-ratio:1;overflow:hidden;color:#fff}
.cb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cb:hover img{transform:scale(1.03)}
.cb .t{position:absolute;left:20px;bottom:16px;right:20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cb .t b{font-family:var(--f-latin);font-weight:400;letter-spacing:.24em;font-size:13px}
.cb .t b span{display:block;font-size:30px;letter-spacing:.12em;margin-top:2px}
.cb .t i{font-style:normal;font-size:11px;letter-spacing:.08em;color:#bdbdbd;text-align:right;line-height:1.7}
.cb.soon{display:grid;place-items:center;background:#1a1a1a}
.cb.soon .t{position:static;flex-direction:column;align-items:center;text-align:center}
@media (max-width:820px){.coll-row{grid-template-columns:1fr;gap:12px}.cb{aspect-ratio:16/9}}
.sblk{margin-top:64px}.sblk:first-of-type{margin-top:0}
.sblk-h{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:20px}
.sblk-h .latin{font-size:12px}
.sblk-h h3{font-size:18px}
.sblk-h .more{margin-left:auto;font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--ink)}
.mag-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mag-row figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.mag-row .ph5{aspect-ratio:1;background:#242424;display:grid;place-items:center;color:#8a8a8a;font-size:11px;letter-spacing:.1em}
.mag-row b{font-family:var(--f-latin);font-weight:400;letter-spacing:.18em;font-size:13px}
.mag-row figcaption{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--sub)}
.mag-lead{max-width:40em;color:var(--sub);font-size:13.5px;margin:-24px 0 32px}
@media (max-width:820px){.mag-row{grid-template-columns:1fr 1fr}}
.hero-stack{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;aspect-ratio:5/4;background:#1c1c1c}
.hs{position:relative;overflow:hidden;background:#242424}
.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.9)}
.hs-l{position:absolute;left:10px;bottom:8px;font-size:10px;color:#8a8a8a;letter-spacing:.08em}
.staple-link{font-size:12px;letter-spacing:.1em;border-bottom:1px solid var(--ink);align-self:flex-start}
.coll-row{grid-template-columns:2fr 1fr}
.coll-row .cb:first-child{grid-row:1 / 3;aspect-ratio:auto}
.coll-row .cb:first-child .t b span{font-size:48px}
.cb .new{position:absolute;top:16px;left:20px;z-index:1;font-family:var(--f-latin);font-size:11px;letter-spacing:.24em;border:1px solid #fff;padding:2px 8px}
@media (max-width:820px){.coll-row{grid-template-columns:1fr}.coll-row .cb:first-child{grid-row:auto;aspect-ratio:1}}
.hero-hand{position:relative;aspect-ratio:5/4;background:#0b0b0b;overflow:hidden}
.hero-hand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 47%}
@media (max-width:820px){.hero-hand{aspect-ratio:4/5}.hero-hand img{object-position:50% 50%}}
.stacks{grid-template-columns:repeat(4,1fr)}
.look{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px}
.look img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#111}
.look-cap{grid-column:1 / -1;font-size:11px;color:var(--sub);letter-spacing:.1em}
@media (max-width:820px){.stacks{grid-template-columns:1fr 1fr}.look{grid-template-columns:1fr 1fr}}
.lookbook{border-bottom:1px solid var(--line);padding-block:40px 56px}
.lb-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.lb-head h2{font-size:20px}
.lookbook .look{margin-top:0}
.sig-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sig{display:flex;flex-direction:column;gap:14px;min-width:0}
.sig .fig{aspect-ratio:4/5}
.sig .fig.zoom img{transform:none}
.sig h3{font-size:22px}
.sig h3 .latin{display:block;font-size:11px;color:var(--sub);margin-bottom:4px}
.sig p{font-size:13px;color:var(--sub);line-height:1.9}
.sig .price{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:820px){.sig-row{grid-template-columns:1fr}}
.ars .wrap{display:block}
.ars-lead{color:var(--sub);font-size:13.5px;margin:-24px 0 32px;max-width:40em}
.ars3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;padding-top:8px}
.ars3 a{display:flex;flex-direction:column;gap:6px;min-width:0}
.ars3 .fig{aspect-ratio:4/5;margin-bottom:8px}
.ars3 b{font-family:var(--f-disp);font-weight:500;font-size:17px;letter-spacing:.06em}
.fig.contain{background:#2a2a2a}.fig.contain img{object-fit:contain;padding:14%}
.fig.zoom img{transform:none}
.ars-g{display:grid;grid-template-columns:5fr 7fr;gap:40px;padding-block:56px;border-bottom:1px solid var(--line)}
.ars-g .fig{aspect-ratio:4/5}
.ars-g .t{display:flex;flex-direction:column;gap:16px;min-width:0}
.ars-g h2{font-size:24px}
.ars-g .tx{color:var(--sub);font-size:13.5px}
@media (max-width:820px){.ars3{grid-template-columns:1fr}.ars-g{grid-template-columns:1fr;gap:20px}}
.paris{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:baseline;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:16px 0;margin:-8px 0 32px}
.paris .latin{grid-row:1 / 3;font-size:12px}
.paris b{font-family:var(--f-disp);font-weight:500;font-size:16px}
.paris span:last-child{font-size:12.5px;color:var(--sub)}
.paris-tag{font-size:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
@media (max-width:820px){.paris{grid-template-columns:1fr}.paris .latin{grid-row:auto}}
.ars-items{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ars-items figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ars-items .fig{aspect-ratio:1}
.ars-items figcaption{display:flex;flex-direction:column;font-size:12px}
.ars-items b{font-weight:500}
@media (max-width:820px){.ars-items{grid-template-columns:1fr 1fr}}
.cols.two{grid-template-columns:1fr 1fr}
@media (max-width:820px){.cols.two{grid-template-columns:1fr}}
.hane-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hane-grid figure{margin:0;display:flex;flex-direction:column;gap:4px}
.hane-grid .fig{aspect-ratio:1}
.hane-grid figcaption{display:flex;flex-direction:column;font-size:11.5px}
.ars-items .fig.zoom img,.hane-grid .fig.zoom img{transform:none}
.feat{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;border:1px solid var(--line);border-top:0;padding:32px}
.feat .fig{aspect-ratio:4/3}
.feat .t{display:flex;flex-direction:column;gap:14px}
.feat h3{font-size:24px}
.feat p{font-size:13.5px;color:var(--sub)}
.feat .price{font-size:13px;font-variant-numeric:tabular-nums}
@media (max-width:820px){.feat{grid-template-columns:1fr;padding:16px;gap:16px}}
.paris-v{display:grid;grid-template-columns:7fr 5fr;margin:-8px 0 88px;background:var(--white);color:var(--ink);min-height:360px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv-img{position:relative;overflow:hidden;min-height:280px}
.pv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-t{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:56px 48px}
.pv-big{font-family:var(--f-latin);font-size:13px;letter-spacing:.42em;line-height:1;color:var(--ink)}
.pv-t .latin{font-size:11px;color:var(--sub)}
.pv-t b{font-family:var(--f-disp);font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1.5;letter-spacing:.06em}
.pv-s{font-size:13px;color:var(--sub);line-height:1.9}
.pv-more{font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--ink);align-self:flex-start;margin-top:8px}
@media (max-width:820px){.paris-v{grid-template-columns:1fr}.pv-t{padding:24px}}
.stk-h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.stk-h .latin{font-size:12px}
.stacks.two{grid-template-columns:repeat(4,1fr)}

.stk-row2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.stacks.pair{grid-template-columns:1fr 1fr}
@media (max-width:820px){.stk-row2{grid-template-columns:1fr}}
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fin-grid .fig{aspect-ratio:1}
.fig.photo:has(img[src*="ls_"]){background:#b9b9b7}
.fig.photo:has(img[src*="ls_tsubu"]){background:#65615f}
.fig.photo img[src*="ls_"]{inset:20%;width:60%;height:60%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.fig.photo:has(img[src*="mg_"]),.ph5.mg{background:#fff}
.fig.photo img[src*="mg_"]{inset:8%;width:84%;height:84%;object-fit:contain}
.ph5.mg{position:relative;overflow:hidden}.ph5.mg img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.annc{display:block;border-bottom:1px solid var(--line);background:var(--white)}
.annc{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 16px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));font-size:12.5px;text-align:center}
.annc .latin{font-size:10px}
.annc-more{border-bottom:1px solid var(--ink);font-size:12px}
.order-steps{list-style:none;padding:0;margin:40px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--ink)}
.order-steps li{padding:20px 16px 24px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.order-steps li:last-child{border-right:0}
.order-steps li+li{padding-left:16px}
.order-steps b{font-family:var(--f-disp);font-weight:500;font-size:17px}
.order-steps p{font-size:12.5px;color:var(--sub);line-height:1.8}
.order-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}
.order-news{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0 28px;display:flex;flex-direction:column;gap:6px;margin-bottom:80px}
.order-news b{font-family:var(--f-disp);font-weight:500;font-size:18px}
@media (max-width:820px){.order-steps{grid-template-columns:1fr}.order-steps li{border-right:0;border-bottom:1px solid var(--line);padding-left:0}.order-steps li+li{padding-left:0}}
.perks{display:grid;grid-template-columns:4fr 8fr;gap:24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:28px 0;margin:8px 0 56px}
.perks>div{display:flex;flex-direction:column;gap:4px}
.perks>div b{font-family:var(--f-disp);font-weight:500;font-size:22px}
.perks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.perks li{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);padding-left:20px;min-width:0}
.perks li b{font-family:var(--f-latin),var(--f-disp);font-weight:400;font-size:26px;letter-spacing:.06em}
.perks li span{font-size:13px;color:var(--sub)}
.rsv-g{margin-bottom:56px}
.rsv-g h2{font-size:24px;margin:4px 0 0}
.rsv-g .grid{padding-top:24px}
.perk-line{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ink);padding:12px 14px;font-size:13px}
.perk-line b{font-weight:500}
.perk-line span{color:var(--sub);font-size:12px}
.perk-line .annc-more{align-self:flex-start;color:var(--ink)}
@media (max-width:820px){.perks{grid-template-columns:1fr}.perks ul{grid-template-columns:1fr}.perks li{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}}
.perks2{border-top:1px solid var(--ink);margin:8px 0 56px}
.ph-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.ph{padding:24px 24px 28px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.ph+.ph{border-left:1px solid var(--line);padding-left:24px}
.ph>b{font-family:var(--f-disp);font-weight:500;font-size:22px}
.ph .dt{font-family:var(--f-latin);font-size:24px;letter-spacing:.08em}
.ph ul,.ph-all ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ph li,.ph-all li{display:flex;flex-direction:column;gap:2px;font-size:13px}
.ph li span,.ph-all li span{color:var(--sub);font-size:12.5px}
.ph li b,.ph-all li b{font-weight:500;font-size:15px}
.ph-all{padding:20px 0 24px;border-bottom:1px solid var(--line)}
.ph-all ul{flex-direction:row;flex-wrap:wrap;gap:16px 40px}
.ph-all li{flex:1 1 200px}
.perks2 code{font-size:13px;background:var(--line);padding:1px 6px}
@media (max-width:820px){.ph-row{grid-template-columns:1fr}.ph+.ph{border-left:0;border-top:1px solid var(--line);padding-left:0}}
.ig-link{display:inline-flex;align-items:center;gap:6px}.ig-link .ig{flex:none}
.sel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sel-th{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left}.sel-th .fig{aspect-ratio:1}.sel-th[aria-current="true"] .fig{outline:1px solid var(--ink);outline-offset:2px}@media (max-width:640px){.sel-grid{grid-template-columns:1fr 1fr}}
.art-pick{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px}.art-pick .chips{flex-wrap:wrap}.art-sel{font-size:14px}
.fig.photo{background:#242424}.fig.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.fig.photo .tag{z-index:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- BASE の部品 ---- */
#jcl-base,#jcl-items,#jcl-item,#jcl-page{display:none!important}
.tools{align-items:center}
.tools #baseMenu,.tools > div{display:flex;align-items:center}
.logo-base{display:none}
.ct-base{gap:14px}
.ct-base form,.page-body form{max-width:640px;font-size:13px}
.ct-base input[type="text"],.ct-base input[type="email"],.ct-base input[type="tel"],.ct-base textarea,.ct-base select,.page-body input[type="text"],.page-body input[type="email"],.page-body input[type="tel"],.page-body textarea,.page-body select{display:block;width:100%;max-width:640px;border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;padding:12px 14px;margin:4px 0 16px;box-sizing:border-box;border-radius:0}
.ct-base textarea,.page-body textarea{min-height:180px}
.ct-base dl,.ct-base dd,.page-body form dl,.page-body form dd{margin-left:0;padding-left:0}
.ct-base dt,.page-body form dt{font-size:12px;letter-spacing:.06em}
.ct-base input[type="submit"],.ct-base button,.page-body input[type="submit"],.page-body form button{min-height:48px;padding:0 32px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:13px;letter-spacing:.14em;cursor:pointer}
.page-body{font-size:14px;line-height:2}
#jcl-report{font-size:11px;color:var(--sub)}
#cartBtn[disabled]{opacity:.5;cursor:default}