/*! world-night — /records/ (楽曲制作). Loaded after records.css.
    Warm black with amber and violet stage light; Fraunces italic and Noto Serif JP. */
body[data-world="night"]{
  --ground:#120D0D;--raise:#1A1212;
  --ink:#F6EDE0;--ink-mid:#C9BBAE;--ink-dim:#9C8A7A;--ink-faint:#917F6E;
  --line:rgba(246,237,224,.12);--line-firm:rgba(246,237,224,.26);
  --acc:#E8A24A;--acc-line:rgba(232,162,74,.55);--acc-glow:rgba(232,162,74,.18);--tint:#E8A24A;
  background-color:#120D0D;
  background-image:radial-gradient(900px 900px at -60px -120px,rgba(232,162,74,.22),transparent 60%),radial-gradient(900px 900px at 100% 640px,rgba(122,92,255,.18),transparent 60%);
  background-repeat:no-repeat;
}
body[data-world="night"] main{--grad:linear-gradient(96deg,#E8A24A 0%,#F6C98A 100%)}
body[data-world="night"] :is(.btn,.submit){color:#1A1008}
body[data-world="night"] .sec h2{font-family:'Noto Serif JP',serif;font-weight:700;letter-spacing:0}
/* ── Hero ── */
.w-hero--night .w-house,.w-hero--night .w-unit{font-style:italic}
.w-hero--night .w-house{font-size:clamp(34px,4vw,56px)}
.w-hero--night .w-unit{color:var(--acc);letter-spacing:-.02em}
.w-jackets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:508px;margin:0 0 0 auto;padding:6px}
.w-jacket{margin:0;display:flex;flex-direction:column;gap:10px;transform:rotate(var(--rot,0deg))}
.w-jacket img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.w-jacket figcaption{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.5;letter-spacing:.04em;color:var(--ink-dim)}
.w-jacket.r1{--rot:-3deg}.w-jacket.r2{--rot:2deg}.w-jacket.r3{--rot:1.5deg}.w-jacket.r4{--rot:-2deg}
.w-wave{display:block;width:100%;max-width:var(--shell);height:64px;margin:clamp(24px,4vh,40px) auto 0;color:var(--acc);opacity:.34}
@media (max-width:960px){.w-jackets{margin:0 auto}}
@media (max-width:620px){.w-jackets{gap:20px;padding:0}.w-jacket{--rot:0deg}.w-wave{height:40px}}


/* ── 縦を詰める・PC は横に広く（2026-10-15 仕様46。/studio/ の仕様45と同じ考え方） ──────────
   中身は最大 1400px、1440px の画面で左右 80px 前後。節の上下の余白は PC 64px ずつ・スマホ 40px ずつ。
   節の番号と英字の見出しは外した。最初の画面の標語と4つの項目の帯（.w-tracks）も外した。 */
body[data-world="night"]{--shell:1400px}
@media (min-width:1001px){body[data-world="night"]{--pad:clamp(56px,5.6vw,80px)}}
body[data-world="night"] .sec{padding-top:clamp(40px,4.45vw,64px);padding-bottom:clamp(40px,4.45vw,64px)}
body[data-world="night"] .sec h2{margin:0 0 clamp(20px,1.7vw,24px);font-size:clamp(26px,3vw,42px)}
body[data-world="night"] .sec-lede{margin:-8px 0 clamp(18px,1.7vw,24px);font-size:clamp(14px,1.2vw,15.5px);line-height:1.85}
.w-hero--night{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(20px,2.4vw,32px)}
.w-hero--night .w-grid{align-items:center}
.w-hero--night .crumb{margin-bottom:14px}
.w-hero--night .w-lockup{margin-bottom:clamp(14px,1.8vh,20px)}
.w-hero--night .w-lede{margin-bottom:22px}
.w-jackets{max-width:460px;gap:28px}
.w-wave{margin-top:clamp(16px,2.4vh,28px);height:48px}
/* 札：PC で横に並べる（こんなときに・納品の日には 4 列）。値段は札の頭に（人の真似のレビューで、文末の値段が読まれなかった） */
body[data-world="night"] .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="night"] .card .idx{margin-bottom:10px}
body[data-world="night"] .card h3{margin-bottom:8px;font-size:clamp(17px,1.35vw,19px);line-height:1.42}
body[data-world="night"] .card p{line-height:1.8}
body[data-world="night"] #needs .card p .from{display:block;margin-bottom:2px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:17px;color:var(--acc)}
body[data-world="night"] #needs .card p strong{color:var(--ink)}
body[data-world="night"] :is(#needs,#delivery) .g2{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-world="night"] .promo{margin:16px 0 0}
/* 制作実績：先頭の1曲（Apple Music）は幅いっぱいのまま、残りの3つを PC で横に */
@media (min-width:1001px){
  body[data-world="night"] #portfolio .grid.g2{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-world="night"] #portfolio .sample:nth-child(2){grid-column:1;grid-row:2}
  body[data-world="night"] #portfolio .sample:nth-child(3){grid-column:2;grid-row:2}
  body[data-world="night"] #portfolio .sample:nth-child(4){grid-column:3;grid-row:2}
}
/* プランと料金：札の中を詰める */
body[data-world="night"] .tier{margin:clamp(24px,2.6vw,36px) 0 12px}
body[data-world="night"] .tier:first-of-type{margin-top:0}
body[data-world="night"] .plan .meta{margin-bottom:12px}
body[data-world="night"] .plan ul{gap:4px}
body[data-world="night"] .plan .foot{margin-top:10px}
body[data-world="night"] .alt{margin-top:12px;padding:10px 14px}
body[data-world="night"] .note{margin-top:16px}
body[data-world="night"] .producer{padding:clamp(20px,2.4vw,32px)}
body[data-world="night"] .pr-name{margin-bottom:14px}
body[data-world="night"] .pr-list{gap:4px;margin-bottom:14px}
@media (min-width:1001px){body[data-world="night"] .pr-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
body[data-world="night"] .step{padding:20px 20px 18px}
body[data-world="night"] .step b{font-size:22px;margin-bottom:10px}
/* よくある質問は PC で 2 列（開いた問いだけが伸びる） */
body[data-world="night"] .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
body[data-world="night"] .faq summary{padding:16px 22px}
/* 相談の節は PC で横に：左に見出しと一言、右にフォーム */
@media (min-width:1001px){
  body[data-world="night"] #contact .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto 1fr;column-gap:clamp(32px,3.4vw,56px);align-items:start}
  body[data-world="night"] #contact h2{grid-column:1;grid-row:1}
  body[data-world="night"] #contact .sec-lede{grid-column:1;grid-row:2;margin:0}
  body[data-world="night"] #contact .form-wrap{grid-column:2;grid-row:1/span 2}
}
body[data-world="night"] .form-wrap{padding:clamp(20px,2.4vw,32px)}
body[data-world="night"] .fields{gap:14px}
body[data-world="night"] .submit{margin-top:20px}
@media (max-width:1180px){
  body[data-world="night"] :is(#needs,#delivery) .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body[data-world="night"] :is(#needs,#delivery) .g2,body[data-world="night"] .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .w-hero--night{padding-top:20px;padding-bottom:16px}
  .w-wave{margin-top:16px;height:32px}
  body[data-world="night"] .card{padding:20px 18px 18px}
  body[data-world="night"] .faq summary{padding:14px 18px;gap:12px}
  body[data-world="night"] .faq .a{padding:0 18px 18px 48px}
  body[data-world="night"] .form-wrap{padding:18px}
  body[data-world="night"] .fields{gap:12px}
}