/* ── 青焼き図面の世界に振り切る。単一テーマで通す ───────────────── */
:root {
  /* Meiryo UI 優先。無い環境は OS 標準の日本語 UI 書体へ落とす */
  --ui: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --sheet:   #0B1420;   /* 図面の地 */
  --sheet-2: #101C2C;
  --grid:    #17293F;
  --grid-2:  #1E344E;
  --line:    #8FB4DC;   /* 図面線 */
  --line-d:  #4C6C90;
  --paper:   #DCE7F2;   /* 文字 */
  --paper-d: #91A8BF;
  --live:    #F2B705;   /* 通電 */
  --live-d:  #7A5E12;
  --dead:    #3A4A5C;   /* 停電 */
  --alert:   #E8563F;
  --ok:      #4FB286;
  --edge:    #22364E;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sheet);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 15px; line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
.ttl { font-family: var(--ui); font-weight: 600; letter-spacing: .04em; }
.mono { font-family: var(--ui); font-variant-numeric: tabular-nums; }

/* ── 方眼の地。スクロールでゆっくり流れる ───────────────────── */
#grid {
  position: fixed; inset: -10% -10% -10% -10%; z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  will-change: transform;
  pointer-events: none;
}
main, header, footer { position: relative; z-index: 1; }

.band {
  background: var(--alert); color: #0B1420; font-weight: 700;
  font-size: 11.5px; letter-spacing: .06em; padding: 7px 20px; text-align: center;
  position: relative; z-index: 3;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── ヘッダ ────────────────────────────────────────────────── */
header { padding: 44px 0 12px; }
.brandrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand { font-size: 13px; letter-spacing: .34em; color: var(--live); }
.brand b { display: block; font-size: 27px; letter-spacing: .16em; color: var(--paper); font-weight: 900; }
.reg { font-size: 11.5px; color: var(--paper-d); text-align: right; line-height: 1.9; }

h1 {
  margin: 26px 0 10px;
  font-size: clamp(30px, 5vw, 58px); line-height: 1.28; letter-spacing: .02em; font-weight: 900;
}
h1 em { font-style: normal; color: var(--live); }
.lede { max-width: 62ch; color: var(--paper-d); font-size: 15.5px; margin: 0 0 30px; }

/* ── 図面シート ────────────────────────────────────────────── */
.sheet {
  position: relative;
  background: var(--sheet-2);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  padding: 18px 18px 0;
  margin-bottom: 14px;
}
.sheet::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--line-d); opacity: .35; pointer-events: none;
}
.sheetbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 0 8px 12px; border-bottom: 1px solid var(--edge); margin-bottom: 8px;
}
.sheetbar h2 { font-size: 13px; letter-spacing: .2em; color: var(--paper-d); font-weight: 500; }
.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--paper-d); flex-wrap: wrap; }
.legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--dead); vertical-align: middle; margin-right: 6px; }
.legend .l i { border-top-color: var(--live); }

.stage { overflow-x: auto; padding: 0 8px 8px; }
.stage svg { display: block; width: 100%; min-width: 720px; height: auto; }

/* 結線図 */
.wire { stroke: var(--dead); stroke-width: 2.4; fill: none; transition: stroke .35s; }
.wire.live { stroke: var(--live-d); }
.flow {
  stroke: var(--live); stroke-width: 2.4; fill: none;
  stroke-dasharray: 10 190; stroke-dashoffset: 0;
  opacity: 0; transition: opacity .35s;
}
.flow.on { opacity: 1; animation: flow 3.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -200; } }

.nd rect, .nd circle, .nd path.sym { transition: stroke .35s, fill .35s; }
.nd .box { fill: var(--sheet); stroke: var(--line-d); stroke-width: 1.4; }
.nd.on .box { stroke: var(--live); }
.nd .lbl { fill: var(--paper); font-size: 11px; font-family: var(--ui); font-weight: 500; }
.nd .sub { fill: var(--paper-d); font-size: 9px; font-family: var(--ui); }
.nd .sym { stroke: var(--dead); stroke-width: 2.2; fill: none; }
.nd.on .sym { stroke: var(--live); }
.brk { cursor: pointer; }
.brk .hit { fill: transparent; }
.brk:hover .box { stroke: var(--paper); }
.brk .state { font-size: 8.5px; font-family: var(--ui); fill: var(--dead); letter-spacing: .1em; }
.brk.on .state { fill: var(--live); }
.cab { fill: none; stroke: var(--line-d); stroke-width: 1.2; stroke-dasharray: 6 4; }
.cablbl { fill: var(--paper-d); font-size: 10px; font-family: var(--ui); }

/* 表題欄 */
.titleblk {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  border-top: 1px solid var(--edge); margin: 0 8px;
}
.titleblk div { padding: 9px 12px; border-right: 1px solid var(--edge); }
.titleblk div:last-child { border-right: none; }
.titleblk dt { font-size: 9.5px; letter-spacing: .16em; color: var(--paper-d); margin: 0 0 2px; }
.titleblk dd { margin: 0; font-size: 12.5px; font-family: var(--ui); }

.hint {
  font-size: 12.5px; color: var(--live); margin: 0 0 44px;
  display: flex; align-items: center; gap: 9px;
}
.hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blip 1.6s ease-in-out infinite; }
@keyframes blip { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }

/* ── セクション ────────────────────────────────────────────── */
section { padding: 54px 0; border-top: 1px solid var(--edge); }
.shead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.shead .no { font-family: var(--ui); font-size: 12px; color: var(--live); letter-spacing: .1em; }
.shead h2 { font-size: 25px; font-weight: 900; letter-spacing: .04em; }

.rise { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.rise.seen { opacity: 1; transform: none; }

/* 対応工事 */
.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.work { background: var(--sheet-2); padding: 24px 22px; position: relative; overflow: hidden; }
.work::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--live);
  transition: width .45s cubic-bezier(.2,.8,.3,1);
}
.work:hover::after { width: 100%; }
.work .n { font-family: var(--ui); font-size: 11px; color: var(--live); }
.work h3 { font-size: 17px; margin: 6px 0 8px; font-weight: 700; }
.work p { margin: 0; font-size: 13px; color: var(--paper-d); line-height: 1.8; }

/* 有資格者：カウントアップ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 26px; }
.stat { border-left: 2px solid var(--live); padding-left: 16px; }
.stat .v { font-family: var(--ui); font-size: 46px; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.stat .v span { font-size: 17px; color: var(--paper-d); margin-left: 3px; }
.stat .k { font-size: 12.5px; color: var(--paper-d); margin-top: 6px; }

/* 保安点検の流れ */
.flowlist { list-style: none; margin: 0; padding: 0; }
.flowlist li { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--edge); }
.flowlist .when { font-family: var(--ui); font-size: 12px; color: var(--live); padding-top: 3px; }
.flowlist h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.flowlist p { margin: 0; font-size: 13.5px; color: var(--paper-d); }

/* 会社概要 */
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; }
.info dl { display: grid; grid-template-columns: 92px minmax(0,1fr); margin: 0; }
.info dt, .info dd { padding: 9px 0; border-bottom: 1px solid var(--edge); margin: 0; font-size: 13.5px; }
.info dt { color: var(--paper-d); font-size: 12.5px; }

/* ── 実装メモ ──────────────────────────────────────────────── */
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 22px 30px; }
.techgrid dt { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.techgrid dd { margin: 0; font-size: 12.5px; color: var(--paper-d); line-height: 1.8; }
.techgrid .m { font-family: var(--ui); font-size: 11.5px; color: var(--live); }

/* ── 問い合わせ ────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px 22px; max-width: 820px; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f > label { font-size: 10.5px; letter-spacing: .16em; color: var(--paper-d); font-family: var(--ui); }
.f .req { color: var(--live); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f textarea, .f select {
  font: inherit; font-size: 14px; padding: 10px 11px; width: 100%;
  background: var(--sheet); color: var(--paper); border: 1px solid var(--edge); border-radius: 0;
}
.f textarea { min-height: 112px; resize: vertical; }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--live); }
.f .err { font-size: 11.5px; color: var(--alert); min-height: 1.15em; font-family: var(--ui); }
.f.bad input, .f.bad textarea, .f.bad select { border-color: var(--alert); }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--paper-d); cursor: pointer; }
.consent input { accent-color: var(--live); margin-top: 5px; }
.submit {
  font: inherit; font-family: var(--ui); font-size: 16px; letter-spacing: .1em;
  padding: 14px 44px; margin-top: 4px; cursor: pointer;
  background: var(--live); color: var(--sheet); border: none;
  transition: background .2s, transform .16s;
}
.submit:hover { background: var(--paper); transform: translateY(-1px); }
.sent { display: none; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ok); background: var(--sheet-2); font-size: 13px; max-width: 820px; }
.sent.on { display: block; }

/* ── ページ上部へ ──────────────────────────────────────────── */
.pagetop {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 50px; height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--live); color: var(--sheet); text-decoration: none;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .2s;
}
.pagetop.on { opacity: 1; pointer-events: auto; transform: none; }
.pagetop:hover { background: var(--paper); }
.pagetop b { font-size: 15px; line-height: 1; }
.pagetop span { font-size: 7.5px; letter-spacing: .1em; margin-top: 3px; font-family: var(--ui); }

footer { padding: 34px 0 64px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--paper-d); }
footer p { margin: 0 0 8px; text-wrap: pretty; word-break: auto-phrase; }

@media (max-width: 700px) {
  .flowlist li { grid-template-columns: 1fr; gap: 4px; }
  .titleblk { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #grid { transform: none !important; }
  .flow.on { animation: none; }
  .rise { opacity: 1 !important; transform: none !important; }
  .hint::before { animation: none; opacity: 1; }
  .work::after { transition: none; }
}
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }