/* ══ beadspark.jp ── infrared scale ══════════════════ */
:root{
  --c-0:#0d1524;
  --c-1:#233a6b;
  --c-2:#6b3a8f;
  --c-3:#c4433f;
  --c-4:#f0a03a;
  --c-5:#fff2d6;

  --paper:#eef0f4;
  --paper-2:#e4e7ee;
  --ink:#0d1524;
  --ink-60:#4d5668;
  --ink-30:#9aa2b1;
  --rule:#c9cedb;

  --ramp:linear-gradient(90deg,var(--c-0),var(--c-1) 22%,var(--c-2) 44%,var(--c-3) 66%,var(--c-4) 84%,var(--c-5));

  --f-disp:"Archivo","Zen Kaku Gothic New",sans-serif;
  --f-jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,80px);
  --maxw:1280px;
  --rail:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-jp); line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%,var(--c-4),transparent 70%);
  opacity:calc(var(--heat,0) * .15); transition:opacity .4s linear;
}
main,header,footer{position:relative; z-index:1}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.34; font-weight:900; letter-spacing:.01em}
:focus-visible{outline:2px solid var(--c-3); outline-offset:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--c-3); color:#fff; padding:8px 14px; z-index:99}

/* ── 校正レール ─────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  border-right:1px solid var(--rule); background:var(--paper);
  display:none; z-index:20; flex-direction:column; align-items:center;
  justify-content:space-between; padding:18px 0;
}
.rail__bar{
  flex:1; width:8px; margin:14px 0; border-radius:1px; position:relative;
  background:linear-gradient(180deg,var(--c-0),var(--c-1) 22%,var(--c-2) 44%,var(--c-3) 66%,var(--c-4) 84%,var(--c-5));
}
.rail__cursor{
  position:absolute; left:-11px; right:-11px; height:2px; background:var(--ink);
  top:calc(var(--heat,0) * 100%); transition:top .12s linear;
}
.rail__cursor::after{content:""; position:absolute; right:-5px; top:-3px; border:4px solid transparent; border-right-color:var(--ink)}
.rail__mark{font-family:var(--f-mono); font-size:10px; color:var(--ink-30); letter-spacing:.08em}
.rail__id{font-family:var(--f-mono); font-size:10px; color:var(--ink-60); writing-mode:vertical-rl; letter-spacing:.28em}
@media(min-width:1000px){ .rail{display:flex} body{padding-left:var(--rail)} }

/* ── ヘッダー ───────────────────────────────── */
header{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:24px var(--gut) 0; flex-wrap:wrap; max-width:var(--maxw);
}
.brand{font-family:var(--f-disp); font-weight:900; font-size:21px; letter-spacing:.14em; text-decoration:none}
nav{display:flex; gap:clamp(14px,2.4vw,30px); font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; flex-wrap:wrap}
nav a{color:var(--ink-60); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent}
nav a:hover{color:var(--ink); border-bottom-color:var(--c-3)}

/* ── ヒーロー ───────────────────────────────── */
.hero{
  padding:clamp(48px,9vh,104px) var(--gut) clamp(30px,5vh,52px);
  max-width:var(--maxw); display:grid; gap:clamp(28px,4vw,56px); align-items:center;
}
@media(min-width:940px){ .hero{grid-template-columns:1fr 1.15fr} }
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--ink-60); margin:0 0 24px}
.eyebrow b{color:var(--ink); font-weight:500}
.hero h1{font-size:clamp(28px,4.4vw,52px); letter-spacing:-.01em}
.hero h1 em{font-style:normal; background:var(--ramp); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__lead{margin:24px 0 0; color:var(--ink-60); font-size:15.5px}
.hero .btn{margin-top:30px}
.hero__fig{margin:0}
.hero__fig img{border:1px solid var(--rule); width:100%}
.hero__fig figcaption,
.ir__flow figcaption{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-30);
  margin-top:9px; line-height:1.8;
}

/* スケール帯 */
.scale-wrap{padding:0 var(--gut) clamp(40px,7vh,70px); max-width:var(--maxw)}
.scale{max-width:900px}
.scale__bar{height:12px; background:var(--ramp); border-radius:2px}
.scale__ticks{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-30); letter-spacing:.06em;
}

/* ── セクション ─────────────────────────────── */
section{padding:clamp(50px,8vh,96px) var(--gut); border-top:1px solid var(--rule); max-width:var(--maxw)}
.hero,.scale-wrap{border-top:0}
.sec-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:clamp(28px,5vh,50px)}
.sec-head h2{font-size:clamp(21px,3vw,30px)}
.sec-head .lat{font-family:var(--f-disp); font-weight:700; font-size:12px; letter-spacing:.22em; color:var(--ink-30); text-transform:uppercase}

/* ── 事業内容 ───────────────────────────────── */
.work{display:grid; gap:clamp(22px,3vw,46px); align-items:center; margin-bottom:clamp(44px,7vh,76px)}
.work:last-child{margin-bottom:0}
@media(min-width:860px){
  .work{grid-template-columns:1.1fr 1fr}
  .work--rev .work__fig{order:2}
}
.work__fig{margin:0; border:1px solid var(--rule); overflow:hidden; background:var(--paper-2)}
.work__fig img{width:100%}
.work__read{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-60); display:flex; align-items:center; gap:9px; margin:0 0 14px}
.dot{width:9px; height:9px; border-radius:50%; flex:none}
.d1{background:var(--c-3)} .d2{background:var(--c-4)} .d3{background:var(--c-2)}
.work h3{font-size:clamp(19px,2.4vw,25px)}
.work__body p{font-size:14.5px; color:var(--ink-60)}
.work__body > p:last-of-type{margin-bottom:0}
.work ul{margin:22px 0 0; padding:0; list-style:none; font-size:13px; color:var(--ink-60)}
.work li{padding:9px 0; border-top:1px dotted var(--rule)}

/* ── IRシリーズ ─────────────────────────────── */
.ir{
  max-width:none; background:var(--ink); color:var(--paper);
  padding-left:0; padding-right:0;
}
.ir > *{max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--gut); padding-right:var(--gut)}
.sec-head--light h2{color:var(--paper)}
.sec-head--light .lat{color:#5c6a86}
.ir__lead{margin:0 auto clamp(32px,5vh,54px); color:#b8c0d0; font-size:15px; max-width:min(var(--maxw),100%)}
.ir__flow{margin:0 auto clamp(38px,6vh,64px)}
.ir__flow img{width:100%; background:#fff; border:1px solid #26324c}
.ir__flow figcaption{color:#6f7c96}

.prods{display:grid; gap:1px; background:#26324c; border:1px solid #26324c; padding:0!important; max-width:calc(var(--maxw) - 2*var(--gut))}
@media(min-width:920px){ .prods{grid-template-columns:repeat(3,1fr)} }
.prod{background:var(--ink); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column}
.prod__name{
  font-family:var(--f-disp); font-size:clamp(19px,2.2vw,24px); font-weight:700;
  letter-spacing:.02em; color:var(--paper); margin:0;
}
.prod__sub{
  font-family:var(--f-jp); font-size:12px; color:#7a8599;
  margin:5px 0 16px; letter-spacing:.04em;
}
.prod__role{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  color:var(--c-4); margin:0 0 12px;
}
.prod__desc{margin:0 0 20px; font-size:14px; color:#b8c0d0; line-height:1.95}
.prod__shot{margin:0 0 20px; border:1px solid #26324c; overflow:hidden; background:#0a0f1a}
.prod__shot img{width:100%}
.prod__shot--tall{max-height:300px; overflow:hidden}
.prod__shot--tall img{object-fit:cover; object-position:top}
.prod__soon{
  margin:0 0 20px; border:1px dashed #34405c; padding:30px 20px; text-align:center; border-radius:3px;
}
.prod__soon span{font-family:var(--f-disp); font-size:14px; letter-spacing:.1em; color:#0e9f8e; display:block}
.prod__soon p{margin:10px 0 0; font-size:12.5px; color:#7a8599}
.prod__pts{margin:auto 0 0; padding:0; list-style:none; font-size:12.5px; color:#8f9ab0}
.prod__pts li{padding:9px 0; border-top:1px solid #26324c}
.ir__note{margin:clamp(30px,5vh,50px) auto 0; font-size:13.5px; color:#8f9ab0}
.ir__note a{color:var(--c-4)}

/* ── 会社概要 ───────────────────────────────── */
dl.about{margin:0; max-width:800px}
dl.about > div{display:grid; grid-template-columns:7.5em 1fr; gap:16px; padding:15px 0; border-top:1px solid var(--rule)}
dl.about > div:last-child{border-bottom:1px solid var(--rule)}
dl.about dt{font-family:var(--f-mono); font-size:12px; color:var(--ink-60); letter-spacing:.06em; padding-top:3px}
dl.about dd{margin:0; font-size:14.5px}
@media(max-width:520px){ dl.about > div{grid-template-columns:1fr; gap:4px} }

/* ── ビーズ導線 ─────────────────────────────── */
.beads{max-width:none; background:var(--paper-2)}
.beads__in{
  max-width:var(--maxw); margin:0 auto; display:flex; gap:30px;
  align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
}
.beads h2{font-size:clamp(20px,2.8vw,28px)}
.beads p{color:var(--ink-60); font-size:14.5px; margin:18px 0 0; max-width:34em}

/* ── お問い合わせ ───────────────────────────── */
#contact{background:linear-gradient(180deg,transparent,rgba(240,160,58,.10)); max-width:none}
#contact > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.contact-lead{max-width:34em; color:var(--ink-60); margin:0 auto 30px; font-size:15px}
.note{margin:22px auto 0; font-size:13px; color:var(--ink-30); font-family:var(--f-mono); line-height:2}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:14px; letter-spacing:.05em;
  padding:16px 28px; text-decoration:none;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink); border-radius:2px;
  transition:background .2s, color .2s, transform .2s;
}
.btn:hover{background:var(--c-3); border-color:var(--c-3); transform:translateY(-2px)}
.btn em{font-style:normal; color:var(--c-4)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}

/* ── フッター ───────────────────────────────── */
footer{
  padding:32px var(--gut) 44px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-30); letter-spacing:.06em;
  max-width:var(--maxw);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important; animation:none!important}
}

/* ── その他事業のカード ─────────────────────── */
.etc{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  margin-top:clamp(38px,6vh,64px);
}
@media(min-width:680px){ .etc{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .etc{grid-template-columns:repeat(4,1fr)} }
.etc__card{background:var(--paper); padding:clamp(22px,2.4vw,30px)}
.etc__card h3{font-size:17px; margin-bottom:12px}
.etc__card p:last-child{margin:0; font-size:13.5px; color:var(--ink-60); line-height:1.95}
.work ul b{color:var(--ink); font-weight:700}
.credits{margin:16px 0 0; padding:0; list-style:none; font-size:12.5px; color:var(--ink-60)}
.credits li{padding:8px 0; border-top:1px dotted var(--rule); line-height:1.7}
.credits b{color:var(--ink); font-weight:700}
.credits a{text-decoration:none; display:block}
.credits a:hover{color:var(--ink)}
.yt{
  display:inline-flex; align-items:center; gap:5px; margin-left:9px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--c-3); white-space:nowrap;
}
.yt::before{content:"\25B6"; font-size:8px}
.credits a:hover .yt{text-decoration:underline}

/* ── 見出しの折り返しを制御 ─────────────────── */
.hero h1{
  font-size:clamp(26px,3.6vw,44px);
  word-break:keep-all; line-break:strict; line-height:1.42;
}
.hero h1 span{display:block}
@media(min-width:940px){ .hero{grid-template-columns:1.05fr 1fr} }
.eyebrow{line-height:1.85}

/* ── 連絡先の並び ───────────────────────────── */
.ways{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  max-width:820px; margin-top:6px;
}
@media(min-width:680px){ .ways{grid-template-columns:1fr 1fr} }
.way{background:var(--paper); padding:clamp(22px,2.4vw,30px)}
.way__label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-30); margin:0 0 10px;
}
.way__value{margin:0 0 12px; font-size:clamp(19px,2.4vw,25px); font-weight:700; letter-spacing:.01em}
.way__value a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--c-4); padding-bottom:2px}
.way__value a:hover{color:var(--c-3); border-bottom-color:var(--c-3)}
.way__note{margin:0; font-size:12.5px; color:var(--ink-60); line-height:1.9}