@charset "utf-8";
/* ==========================================================================
   L.U.X.I Studio / works-studio.css（2026-09-28 新設・works/{slug} の本文用）
   base.css の後に読む。制作記録の本文を、トップや /video/ と同じ
   深い紺 × 金・しっぽり明朝＋Cinzel の意匠に寄せる上書きだけを置く。
   店ごとの帯の色（data-theme）は使わず、全ページ同じ Studio の色にそろえる。
   色と書体は base.css のトークンを差し替えて効かせる（部品の形はそのまま）。
   文字の大きさは var(--fs-x, 天井値) の形で書く（check_lp.py の約束）。
   ========================================================================== */

/* ---------- 1. トークンの差し替え（[data-theme="dining"] などより強い指定で上書き） ---------- */
html[data-theme]{
  color-scheme:dark;
  --canvas:#0B1A2E;
  --canvas-2:#11253F;
  --ink:#F4EEE2;
  --ink-2:#B4BBC6;
  --ink-3:#A3ADBB;
  --line:rgba(244,238,226,.14);
  --line-strong:rgba(201,164,92,.42);
  --navy:#0B1A2E;
  --gold:#D9BC7A;
  --gold-soft:#EBD59E;
  --accent:#11253F;
  --accent-deep:#060F1C;
  --accent-2:#D9BC7A;
  --accent-soft:#11253F;
  --on-accent:#F4EEE2;
  --font-display:"Cinzel","Shippori Mincho","Times New Roman",serif;
  --font-ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --font-mono:"Cinzel","Shippori Mincho",serif;
  /* 本文の左右の端を、ほかのページの .st-wrap（最大1320px・余白20〜56px）にそろえる */
  --gutter:clamp(20px,4.5vw,56px);
  --container:1432px;
  --fs-w-display:clamp(2.5rem,1.2rem + 4.4vw,5.25rem);
  --fs-w-mid:clamp(2rem,1.2rem + 2.8vw,3.5rem);
  --fs-w-sm:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
  --fs-w-mincho:clamp(2.25rem,1.3rem + 3.2vw,4.25rem);
  --fs-w-h1:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  --fs-w-h3:clamp(1.25rem,1.05rem + .8vw,1.625rem);
}
body{
  background:
    radial-gradient(120% 60% at 78% -8%,#16305A 0%,rgba(22,48,90,0) 55%),
    var(--canvas);
  color:var(--ink);
}
::selection{ background:var(--gold); color:#0B1A2E; }
:focus-visible{ outline-color:var(--gold); }

/* ヘッダー・フッターの左右の端: base.css 11-4 と同じ式で、上の --container に合わせて広げる */
.st-header .st-wrap,
.st-footer .st-wrap{ width:min(calc(100% - var(--gutter) * 2),calc(var(--container) - var(--gutter) * 2)); }

/* ---------- 2. 文字 ---------- */
.t-display,
.t-display--mid,
.t-display--sm{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:.06em;
}
.t-display{ font-size:var(--fs-w-display,5.25rem); }
.t-display--mid{ font-size:var(--fs-w-mid,3.5rem); }
.t-display--sm{ font-size:var(--fs-w-sm,2.25rem); color:var(--ink); }
.t-mincho{ font-size:var(--fs-w-mincho,4.25rem); color:#EBD59E; }
.t-h1,.t-h2,.t-h3,.t-h4{ font-family:var(--font-mincho); font-weight:600; letter-spacing:.04em; }
.t-h1{ font-size:var(--fs-w-h1,2.75rem); line-height:1.4; }
.t-h3{ font-size:var(--fs-w-h3,1.625rem); color:#EBD59E; }
.u-mono,
.u-num{
  font-family:var(--font-mono);
  letter-spacing:.14em;
  color:#D9BC7A;
}
.u-num{ color:var(--ink-2); }
.u-muted,.t-small{ color:var(--ink-2); }

/* ---------- 3. ヒーロー帯（Studio のヒーローと同じ、紺の面＋右上の金の弧） ---------- */
.lx-hero{
  isolation:isolate;
  background:
    radial-gradient(60% 80% at 88% 20%,rgba(27,52,86,.55) 0%,rgba(27,52,86,0) 62%),
    linear-gradient(180deg,#0B1A2E 0%,#060F1C 100%);
  color:var(--ink);
  border-bottom:1px solid rgba(201,164,92,.38);
}
.lx-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-46%; right:-18%;
  width:min(70vw,980px);
  aspect-ratio:1;
  border:1px solid rgba(217,188,122,.42);
  border-radius:50%;
  pointer-events:none;
}
.lx-hero__title{
  color:#EBD59E;
}
.lx-hero__title .lx-mask__inner{
  background:linear-gradient(105deg,#A9853F 0%,#EBD59E 30%,#F7EACB 46%,#D9BC7A 66%,#A9853F 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}
.lx-hero__ja{ color:var(--ink); }
.lx-hero .lx-topbar{ color:var(--ink); }
.lx-hero .u-mono,
.lx-hero .u-num{ color:#D9BC7A; }
.lx-hero .t-note{ color:var(--ink-2); }
.lx-hero .lx-browser{ box-shadow:0 42px 70px -32px rgba(0,0,0,.9),0 0 0 1px rgba(201,164,92,.3); }

/* PC: 題名と説明を左、LPの画面（FIG.01）と業務デモ（FIG.02）を右に置き、最初の画面の右側を空けない */
@media (min-width:1100px){
  .lx-hero > .lx-wrap{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:
      "top    top"
      "kicker stage"
      "title  stage"
      "lead   stage";
    grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(40px,4vw,72px);
    align-items:start;
  }
  .lx-hero .lx-topbar{ grid-area:top; }
  .lx-hero__kicker{ grid-area:kicker; margin-top:clamp(40px,4.4vw,72px); }
  .lx-hero__title{ grid-area:title; }
  .lx-hero__ja{ grid-area:lead; }
  .lx-hero__stage{
    grid-area:stage;
    grid-template-columns:minmax(0,1fr);
    margin-top:clamp(32px,3.6vw,56px);
  }
  .lx-hero__stage > :first-child{ width:90%; }
  .lx-hero__stage > :nth-child(2){
    position:relative;
    z-index:1;
    justify-self:end;
    width:56%;
    margin-top:-22%;
    filter:drop-shadow(0 28px 40px rgba(0,0,0,.6));
  }
}

/* ---------- 4. 帯と面 ---------- */
.lx-band{
  background:linear-gradient(180deg,#11253F 0%,#0B1A2E 100%);
  color:var(--ink);
  border-top:1px solid rgba(201,164,92,.38);
}
.lx-band--deep{ background:#060F1C; }
.lx-soft,
.lx-canvas2{
  background:linear-gradient(180deg,#11253F 0%,#0B1A2E 100%);
  color:var(--ink);
  border-top:1px solid rgba(201,164,92,.38);
}
.lx-band .lx-shead,
.lx-shead{ border-bottom-color:rgba(201,164,92,.38); }
.lx-band .lx-shead .u-mono,
.lx-band .u-mono{ color:#D9BC7A; }
.lx-band .t-small,
.lx-band .u-muted{ color:var(--ink-2); }
.lx-band .lx-rule{ background:var(--line); }

/* ---------- 5. 札・ボタン ---------- */
.lx-label{
  border-color:rgba(201,164,92,.6);
  background:rgba(11,26,46,.5);
  color:#F7EACB;
}
.lx-badge{
  font-family:var(--font-ja);
  letter-spacing:.08em;
  background:linear-gradient(105deg,#C9A45C 0%,#EBD59E 48%,#D9BC7A 100%);
  color:#0B1A2E;
}
.lx-badge--outline,
.lx-band .lx-badge--outline{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(201,164,92,.5);
}
.lx-tag,
.lx-band .lx-tag{ border-color:rgba(201,164,92,.38); color:var(--ink-2); }
.lx-btn{
  background:rgba(11,26,46,.3);
  border-color:#C9A45C;
  color:#F7EACB;
  font-weight:700;
}
.lx-btn:hover,
.lx-btn:focus-visible{ background:rgba(201,164,92,.16); border-color:#EBD59E; color:var(--ink); }
.lx-btn--gold{
  border-color:transparent;
  background:linear-gradient(105deg,#C9A45C 0%,#EBD59E 48%,#D9BC7A 100%);
  color:#0B1A2E;
}
.lx-btn--gold:hover,
.lx-btn--gold:focus-visible{
  border-color:transparent;
  background:linear-gradient(105deg,#D9BC7A 0%,#F7EACB 48%,#EBD59E 100%);
  color:#0B1A2E;
}
.lx-btn--ghost,
.lx-band .lx-btn--ghost{ background:transparent; color:#F7EACB; border-color:#C9A45C; }
.lx-btn--ghost:hover,
.lx-band .lx-btn--ghost:hover{ background:rgba(201,164,92,.16); color:var(--ink); border-color:#EBD59E; }

/* ---------- 6. INFORMATION 表（金の縁の板に載せる） ---------- */
.lx-meta{
  padding:clamp(4px,1vw,12px) clamp(20px,2.6vw,36px);
  border:1px solid rgba(201,164,92,.38);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(27,52,86,.55) 0%,rgba(11,26,46,.35) 100%);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85);
}
.lx-meta > dt{ color:#D9BC7A; letter-spacing:.16em; }
.lx-meta > dd{ color:var(--ink); }
.lx-meta > dt:last-of-type,
.lx-meta > dd:last-of-type{ border-bottom:0; }

/* ---------- 7. 4象限・検証3案・数字の一覧 ---------- */
.lx-quad--on-band,
.lx-quad--on-soft{ border-top-color:rgba(201,164,92,.3); border-left-color:rgba(201,164,92,.3); }
.lx-quad--on-band .lx-quad__cell,
.lx-quad--on-soft .lx-quad__cell{ border-right-color:rgba(201,164,92,.3); border-bottom-color:rgba(201,164,92,.3); }
.lx-quad__list > li::before{ background:#D9BC7A; opacity:.8; }
.lx-plan{
  background:linear-gradient(180deg,rgba(27,52,86,.5) 0%,rgba(11,26,46,.3) 100%);
  border-color:rgba(201,164,92,.38);
  border-radius:14px;
}
.lx-plan:hover{ background:linear-gradient(180deg,rgba(27,52,86,.7) 0%,rgba(11,26,46,.45) 100%); }
.lx-plan--picked{ border-color:#D9BC7A; box-shadow:0 0 0 1px rgba(201,164,92,.3),0 0 44px rgba(217,188,122,.16); }
.lx-plan__wire{ border-radius:8px; }
.lx-plan__order{ font-family:var(--font-mono); color:var(--ink-2); }
.lx-figure-list > li,
.lx-figure-list > li:first-child{ border-color:rgba(201,164,92,.3); }
.lx-figure-list__v{ font-family:var(--font-mono); color:#EBD59E; }

/* ---------- 8. 画面の枠（ブラウザ・スマホ・仮置き） ---------- */
.lx-browser{
  border-color:rgba(201,164,92,.38);
  background:#060F1C;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85);
}
.lx-browser__bar{ background:linear-gradient(180deg,#1B3456 0%,#11253F 100%); border-bottom-color:var(--line); }
.lx-browser__dot{ background:rgba(244,238,226,.34); }
.lx-browser__url{ background:#0B1A2E; border-color:var(--line); color:var(--ink-2); font-family:var(--font-ja); letter-spacing:.04em; }
.lx-browser__screen{ background:#060F1C; }
.lx-phone{
  border-color:transparent;
  background:
    linear-gradient(160deg,#2A2F38 0%,#0B0D11 32%,#1A1D23 62%,#07080B 100%) padding-box,
    linear-gradient(135deg,#F7EACB 0%,#8A7A5C 22%,#D9BC7A 46%,#4E4838 72%,#EBD59E 100%) border-box;
  border:2px solid transparent;
  box-shadow:0 42px 70px -32px rgba(0,0,0,.9);
}
.lx-ph,
.lx-soft .lx-ph{ background-color:#0B1A2E; border-color:rgba(201,164,92,.3); color:var(--ink-2); }

/* ---------- 9. 次の制作記録へ ---------- */
.lx-next{ background:#060F1C; border-top-color:rgba(201,164,92,.38); }
.lx-next .t-display--mid{ color:#EBD59E; }
.lx-next:hover .t-display--mid,
.lx-next:focus-visible .t-display--mid{ color:#F7EACB; }
.lx-next__ico{ color:#D9BC7A; }

/* パンくず（← L.U.X.I STUDIO・WORKS INDEX →）の押せる高さを44pxに */
.lx-topbar a{ display:inline-flex; align-items:center; min-height:44px; }