:root{
    --paper:#ffffff;
    --paper-raise:#f4f4f2;
    --band:#4a4a48;
    --band-ink:#f4f4f2;
    --band-ink-soft:#c7c7c4;
    --ink:#141414;
    --ink-soft:#666666;
    --line:#e2e2e0;
    --line-strong:#c9c9c6;
    --focus:#141414;
    --font-sans:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;
    --font-serif:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#121212;
      --paper-raise:#1a1a1a;
      --band:#050505;
      --band-ink:#eeeeec;
      --band-ink-soft:#8a8a87;
      --ink:#f2f2f0;
      --ink-soft:#a3a3a0;
      --line:#2e2e2c;
      --line-strong:#3d3d3a;
      --focus:#f2f2f0;
    }
  }
  :root[data-theme="dark"]{
    --paper:#121212;
    --paper-raise:#1a1a1a;
    --band:#050505;
    --band-ink:#eeeeec;
    --band-ink-soft:#8a8a87;
    --ink:#f2f2f0;
    --ink-soft:#a3a3a0;
    --line:#2e2e2c;
    --line-strong:#3d3d3a;
    --focus:#f2f2f0;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-serif);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    word-break:normal;
    overflow-wrap:break-word;
    line-break:strict;
    font-feature-settings:"palt";
  }
  @media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth;}
  }
  img{max-width:100%;}
  a{color:inherit;}
  h1,h2,h3{
    font-family:inherit;
    font-weight:700;
    margin:0;
    text-wrap:balance;
  }
  .eyebrow{
    font-family:var(--font-sans);
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--ink-soft);
    margin:0 0 1em;
  }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:clamp(20px,5vw,64px);
  }
  :focus-visible{outline:2px solid var(--focus); outline-offset:3px;}

  /* ---------- photobay (image container) ---------- */
  .photobay{
    position:relative;
    width:100%; height:100%;
    background:var(--paper-raise);
    overflow:hidden;
  }
  .photobay picture,
  .photobay img{
    display:block;
    position:absolute; inset:0;
    width:100%; height:100%;
  }
  .photobay img{
    object-fit:cover;
  }

  /* ---------- FV (crossfade) ---------- */
  /* height comes from the ::before padding-top hack (not aspect-ratio alone),
     since some renderers (e.g. Rakuten's page display) drop the aspect-ratio
     property and collapse the box to zero height. aspect-ratio is kept as a
     harmless progressive enhancement -- it resolves to the same number. */
  .fv{position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;}
  .fv::before{content:""; display:block; padding-top:133.333%;}
  @media (min-width:760px){
    .fv{aspect-ratio:16/9;}
    .fv::before{padding-top:56.25%;}
  }
  .fv-bay{position:absolute; inset:0;}
  .fv-bay-a{animation:fvfade 14s infinite;}
  .fv-bay-b{animation:fvfade 14s infinite; animation-delay:-7s;}
  @keyframes fvfade{
    0%, 43%  {opacity:1;}
    50%, 93% {opacity:0;}
    100%     {opacity:1;}
  }
  @media (prefers-reduced-motion: reduce){
    .fv-bay-a, .fv-bay-b{animation:none;}
    .fv-bay-b{opacity:0;}
  }
  .fv-overlay{
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    padding:0 24px;
    pointer-events:none;
  }
  .fv-wordmark{
    font-size:clamp(1.3rem,4.2vw,2.5rem);
    font-weight:900;
    letter-spacing:.14em;
    line-height:1.15;
    color:#fff;
  }
  .fv-sub{
    margin:.2em 0 0;
    font-size:clamp(1.1rem,3.8vw,2.3rem);
    font-weight:700;
    letter-spacing:.1em;
    line-height:1.15;
    text-transform:uppercase;
    color:#fff;
  }

  /* ---------- section rhythm (text sections) ---------- */
  .theme, .coupon, .look-index-nav, .lineup, .tiktok-intro, .site-footer{padding:clamp(56px,9vw,108px) 0;}
  .look-index-nav{padding-block:0;}
  .theme{text-align:center;}
  .theme h2{
    font-size:clamp(1.35rem,3.1vw,2rem);
    line-height:1.7;
    max-width:22ch; margin-inline:auto;
  }
  .theme .lead{
    max-width:32em; margin:1.8em auto 0;
    color:var(--ink-soft); font-size:.96rem;
  }
  /* short-page only: "Coming soon" line, matched to .theme h2 */
  .theme-comingsoon{
    font-family:inherit;
    font-weight:700;
    font-size:clamp(1.35rem,3.1vw,2rem);
    line-height:1.7;
    letter-spacing:.02em;
    max-width:22ch; margin:1em auto 0;
  }

  /* ---------- coupon ---------- */
  .coupon .wrap{max-width:960px;}
  .panel{
    font-family:var(--font-sans);
    display:grid; grid-template-columns:1fr;
    background:var(--paper-raise);
    border:1px solid var(--line);
  }
  @media (min-width:760px){ .panel{grid-template-columns:1.5fr 1fr;} }
  .panel-main{
    padding:clamp(28px,5vw,48px);
    border-bottom:1px solid var(--line);
  }
  @media (min-width:760px){
    .panel-main{border-bottom:none; border-right:1px solid var(--line);}
  }
  .panel-main h2{font-size:clamp(1.4rem,3.2vw,2rem); line-height:1.5; font-weight:700;}
  .panel-main p{color:var(--ink-soft); margin:1em 0 0; font-size:.92rem;}
  .panel-side{
    padding:clamp(28px,5vw,48px);
    display:flex; flex-direction:column; gap:1.1em;
  }
  .panel-label{
    font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft); margin:0;
  }
  .panel-period{
    margin:0; font-size:1.1rem; font-weight:500;
  }
  .panel-note{
    font-size:.76rem; color:var(--ink-soft); margin:0;
  }
  .cta-row{display:flex; flex-wrap:wrap; gap:.7em;}
  .cta{
    display:inline-flex; align-items:center; gap:.6em;
    font-weight:500; font-size:.88rem;
    letter-spacing:.04em;
    color:var(--paper); background:var(--ink);
    padding:.85em 1.7em; text-decoration:none;
    border:1px solid var(--ink);
    transition:background .2s ease, color .2s ease;
  }
  .cta:hover{background:var(--paper); color:var(--ink);}
  .cta-secondary{
    color:var(--ink); background:transparent;
  }
  .cta-secondary:hover{background:var(--ink); color:var(--paper);}

  /* ---------- look index ---------- */
  .look-index-nav .wrap{
    display:flex; align-items:baseline; gap:1.4em;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding-block:14px;
  }
  .look-index-nav .eyebrow{margin:0; flex-shrink:0;}
  .index-scroller{
    display:flex; gap:.3em; overflow-x:auto; padding:.1em;
    scrollbar-width:thin;
  }
  .index-pill{
    flex-shrink:0;
    font-weight:500; font-size:.8rem;
    text-decoration:none; color:var(--ink-soft);
    width:2.2em; height:2.2em; border-radius:0;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
  }
  .index-pill:hover{background:var(--ink); color:var(--paper);}

  /* ---------- look blocks (full-bleed) ---------- */
  .block{
    position:relative;
    opacity:0; transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .block.is-visible{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .block{opacity:1; transform:none; transition:none;}
  }
  .photos{
    display:grid; grid-template-columns:1fr;
  }
  /* pair blocks = same look, two angles: keep side-by-side even on SP */
  .block-pair .photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  /* selected pair blocks: stack vertically on SP, back to side-by-side from 640px */
  .block-pair.stack-sp .photos{grid-template-columns:minmax(0,1fr);}
  @media (min-width:640px){
    .block-pair.stack-sp .photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  }
  /* split blocks = two different looks: wrap to single column on SP */
  @media (min-width:640px){
    .block-split .photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  }
  .bay-half{aspect-ratio:3/4;}
  .bay-half::before{content:""; display:block; padding-top:133.333%;}
  /* trio blocks = three images from one look: stack on SP, 3-column from 640px */
  .block-trio .photos{grid-template-columns:minmax(0,1fr);}
  @media (min-width:640px){
    .block-trio .photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  }
  .bay-wide{aspect-ratio:3/2;}
  .bay-wide::before{content:""; display:block; padding-top:66.667%;}

  /* full-bleed band; the nested .wrap keeps the text content itself
     aligned to the same max-width as the rest of the page */
  .block-meta{
    background:var(--band);
    color:var(--band-ink);
  }
  .block-meta .wrap{
    padding-block:16px 40px;
  }
  .block-label{
    margin:0 0 .5em; font-size:.72rem; font-weight:500;
    letter-spacing:.08em; color:var(--band-ink-soft);
  }
  .item-list{list-style:none; margin:0; padding:0;}
  .item{
    display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap;
    padding:.2em 0;
    font-size:.78rem; line-height:1.7;
  }
  .item-cat{
    font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--band-ink); flex-shrink:0;
  }
  .item-no{
    font-weight:500; font-variant-numeric:tabular-nums;
    color:var(--band-ink-soft); flex-shrink:0;
  }
  .item-price{
    font-variant-numeric:tabular-nums; color:var(--band-ink);
  }
  .item-price .tax{
    margin-left:.4em; font-size:.85em; color:var(--band-ink-soft);
  }
  .item-pending .item-cat, .item-pending .item-no{color:var(--band-ink-soft);}
  .item-note .item-name{color:var(--band-ink-soft);}
  .item-status{font-size:.72rem; color:var(--band-ink-soft);}
  .tag{
    font-family:var(--font-sans);
    font-size:.62rem; letter-spacing:.02em;
    border:1px solid var(--band-ink-soft);
    padding:.15em .55em; color:var(--band-ink-soft);
  }
  .tag-tiktok{color:var(--band-ink); border-color:var(--band-ink);}
  .buy-link{
    font-size:.72rem; font-weight:600; letter-spacing:.03em;
    color:var(--ink); text-decoration:underline;
    text-underline-offset:.2em;
  }
  .block-meta .buy-link{color:var(--band-ink);}

  .split-meta{
    display:grid; grid-template-columns:minmax(0,1fr); gap:20px 32px;
  }
  @media (min-width:640px){ .split-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }

  /* mood / auto-scroll block */
  .block-scroll{
    aspect-ratio:4/3;
    overflow:hidden;
  }
  .block-scroll::before{content:""; display:block; padding-top:75%;}
  @media (min-width:640px){
    .block-scroll{aspect-ratio:21/8;}
    .block-scroll::before{padding-top:38.095%;}
  }
  .scroll-track{
    position:absolute; inset:0; width:130%;
    animation:pan 22s ease-in-out infinite alternate;
  }
  @keyframes pan{
    0%   {transform:translateX(0);}
    100% {transform:translateX(-23%);}
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-track{animation:none;}
  }
  .bay-scroll{width:100%; height:100%;}
  .scroll-caption{
    position:absolute; left:20px; bottom:14px;
    margin:0; font-size:.72rem; letter-spacing:.14em;
    color:var(--paper); text-shadow:0 1px 6px rgba(0,0,0,.5);
  }

  /* short-page: no-caption right-to-left photo marquee */
  .photo-marquee{
    overflow:hidden;
    background:var(--paper-raise);
    padding:clamp(20px,3.4vw,36px) 0;
  }
  .marquee-track{
    display:flex;
    width:max-content;
    gap:8px;
    animation:marquee-rtl 36s linear infinite;
  }
  .marquee-track img{
    display:block;
    height:clamp(200px,32vw,420px);
    width:auto;
    aspect-ratio:3/4;
    object-fit:cover;
    flex:0 0 auto;
  }
  @keyframes marquee-rtl{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
  }

  /* ---------- lineup ---------- */
  .lineup{background:var(--paper-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .lineup-head{text-align:center; margin-bottom:2.6em;}
  .lineup-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
  .lineup-sub{font-family:var(--font-sans); color:var(--ink-soft); margin:.8em 0 0; font-size:.9rem;}
  .lineup-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 22px;
    align-items:start;
  }
  @media (min-width:640px){ .lineup-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
  @media (min-width:1000px){ .lineup-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
  .product{
    position:relative;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .product-link{display:block; color:inherit; text-decoration:none;}
  .product.is-visible{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .product{opacity:1; transform:none; transition:none;}
  }
  .product .photobay{aspect-ratio:760/980; height:auto; background:var(--paper); border:1px solid var(--line);}
  .product .photobay::before{content:""; display:block; padding-top:128.947%;}
  .product-no{
    font-weight:500; font-variant-numeric:tabular-nums;
    color:var(--ink-soft); font-size:.78rem; margin:.9em 0 0;
  }
  .product-name{
    font-size:.92rem; font-weight:500; margin:.35em 0 0; line-height:1.6;
  }
  .product-price{margin:.55em 0 0; font-size:.92rem; font-variant-numeric:tabular-nums;}
  .product-price .tax{color:var(--ink-soft); font-size:.85em;}
  .product .buy-link{display:inline-block; margin:.6em 0 0;}
  .tag-off{
    font-family:var(--font-sans);
    position:absolute; top:10px; left:10px;
    background:var(--ink); color:var(--paper); border-color:var(--ink);
    font-weight:500;
  }
  .price-note{
    text-align:center; margin:3em auto 0; max-width:34em;
    font-size:.78rem; color:var(--ink-soft);
    border-top:1px solid var(--line); padding-top:1.2em;
  }

  /* ---------- TikTok limited intro ---------- */
  .tiktok-intro{text-align:center;}
  .tiktok-intro h2{font-size:clamp(1.4rem,3.2vw,2rem); margin:.5em 0 0;}
  .tiktok-intro .lead{
    margin:1.2em 0 0; color:var(--ink-soft); font-size:.92rem;
  }
  .account-grid{
    margin-top:2.6em;
    display:grid; grid-template-columns:1fr; gap:20px;
    text-align:left;
  }
  @media (min-width:760px){ .account-grid{grid-template-columns:1fr 1fr;} }
  .account-card{
    border:1px solid var(--line); padding:clamp(22px,4vw,32px);
    background:var(--paper);
  }
  .account-head{
    display:flex; align-items:center; flex-wrap:wrap; gap:.9em;
    margin-bottom:1.2em;
  }
  .account-avatar{
    font-family:var(--font-sans);
    flex-shrink:0; width:2.6em; height:2.6em; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.62rem; font-weight:700; letter-spacing:.02em;
    border:1px solid var(--line-strong); color:var(--ink-soft);
    text-align:center; line-height:1.1;
    overflow:hidden;
  }
  .account-avatar img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .account-avatar-alt{background:var(--paper-raise);}
  .account-id{display:flex; flex-direction:column; gap:.2em; flex:1 1 auto;}
  .account-name{font-weight:700; font-size:1rem;}
  .account-handle{
    font-family:var(--font-sans);
    font-size:.78rem; color:var(--ink-soft);
  }
  .account-badge{
    font-family:var(--font-sans);
    flex-shrink:0; font-size:.68rem; letter-spacing:.03em;
    padding:.4em .9em; border:1px solid var(--line-strong);
    color:var(--ink-soft);
  }
  .account-badge-alt{color:var(--ink); border-color:var(--ink);}
  .account-points{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:.6em;
  }
  .account-points li{
    position:relative; padding-left:1.2em;
    font-size:.86rem; color:var(--ink-soft); line-height:1.7;
  }
  .account-points li::before{
    content:"・"; position:absolute; left:0;
  }
  .reason-box{
    text-align:left;
    margin-top:24px; padding:clamp(22px,4vw,32px);
    background:var(--paper-raise); border:1px solid var(--line);
  }
  .reason-label{
    margin:0 0 .8em; font-weight:700; font-size:.94rem;
  }
  .reason-box p + p{
    margin:.8em 0 0; color:var(--ink-soft); font-size:.86rem; line-height:1.9;
  }
  .tiktok-note{
    margin:2.4em 0 0; font-size:.92rem; line-height:1.9;
  }
  .openchat{margin-top:3.6em;}
  .openchat-title{font-weight:700; font-size:1.05rem;}
  .openchat-lead{
    margin:.8em 0 0; color:var(--ink-soft); font-size:.86rem;
  }
  .step-grid{
    margin-top:2em;
    display:grid; grid-template-columns:1fr; gap:14px;
  }
  @media (min-width:640px){ .step-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
  .step{
    border-top:1px solid var(--line-strong); padding-top:1em;
    text-align:center;
  }
  .step-shot{
    max-width:220px; aspect-ratio:9/16; margin:0 auto 1em;
    position:relative;
    overflow:hidden; background:var(--paper-raise); border:1px solid var(--line);
  }
  .step-shot::before{content:""; display:block; padding-top:177.778%;}
  .step-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .step-label{
    font-family:var(--font-sans);
    margin:0; font-size:.7rem; letter-spacing:.14em;
    color:var(--ink-soft);
  }
  .step-text{margin:.6em 0 0; font-size:.88rem; line-height:1.7;}
  .lp-redirect{
    margin-top:3.6em; padding-top:2.6em; border-top:1px solid var(--line);
  }
  .lp-redirect p{
    margin:0 0 1.2em; font-size:.88rem; color:var(--ink-soft);
  }
  .lp-redirect .cta{display:inline-flex;}

  /* ---------- footer ---------- */
  .site-footer{
    text-align:center;
    font-size:.78rem; color:var(--ink-soft);
  }
  .site-footer p{margin:.4em 0;}
  .site-footer .brand{
    font-size:.85rem; color:var(--ink); font-weight:700;
    letter-spacing:.1em;
  }