/* ===== 株式会社光工業 ｜ 重厚・建設業 ===== */
:root{
  --bg:#14171c;          /* 鋼の闇 */
  --bg2:#1b1f26;
  --panel:#20252e;
  --ink:#e9ebee;         /* 明色文字 */
  --ink-dark:#14171c;    /* 明背景上の文字 */
  --muted:#9aa3ad;
  --paper:#f4f3f0;       /* 明セクション背景 */
  --paper2:#ebe9e3;
  --steel:#3a4350;       /* 鋼グレー */
  --line:rgba(255,255,255,.1);
  --line-dark:#d7d3c9;
  --ember:#e2562a;       /* 赤熱した鉄 */
  --ember-d:#c4441d;
  --gold:#caa24a;
  --max:1140px;
  --serif:"Shippori Mincho",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.9;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.4;font-weight:700}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ember);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--ember);z-index:120;transition:width .1s}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(20,23,28,.4);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.header.is-scrolled{background:rgba(20,23,28,.92);border-bottom-color:var(--line)}
.header__inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:42px;height:42px;display:grid;place-items:center;background:var(--ember);color:#fff;
  font-family:var(--serif);font-weight:800;font-size:24px;border-radius:3px;box-shadow:0 4px 14px rgba(226,86,42,.3)}
.brand__name{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.04em;display:block}
.brand__sub{font-size:10px;letter-spacing:.28em;color:var(--muted);display:block}
.nav{display:flex;align-items:center;gap:30px}
.nav__link{font-size:14px;color:var(--ink);opacity:.85;transition:opacity .2s,color .2s;position:relative}
.nav__link:hover{opacity:1;color:var(--ember)}
.nav__cta{font-size:14px;font-weight:700;color:#fff;background:var(--ember);padding:11px 22px;border-radius:3px;transition:background .2s}
.nav__cta:hover{background:var(--ember-d)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 32px;border-radius:3px;
  transition:transform .25s,background .25s,box-shadow .25s;letter-spacing:.03em}
.btn--primary{background:var(--ember);color:#fff;box-shadow:0 8px 22px rgba(226,86,42,.28)}
.btn--primary:hover{background:var(--ember-d);transform:translateY(-2px);box-shadow:0 12px 30px rgba(226,86,42,.4)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--ember);color:var(--ember)}
.btn--block{width:100%;justify-content:center}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__img{position:absolute;inset:0;
  background:
    linear-gradient(180deg,#10131a 0%,#1a1e26 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px);
  background-blend-mode:overlay}
.hero__img::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 78% 30%,rgba(226,86,42,.30),transparent 55%),
             radial-gradient(ellipse at 20% 80%,rgba(58,67,80,.5),transparent 60%)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,19,26,.9) 0%,rgba(16,19,26,.45) 60%,transparent 100%)}
.hero__sparks{position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 70% 35%,rgba(226,134,42,.8),transparent),
    radial-gradient(1px 1px at 82% 55%,rgba(226,134,42,.6),transparent),
    radial-gradient(1.5px 1.5px at 60% 65%,rgba(226,86,42,.5),transparent);
  opacity:.7}
.hero__inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}
.hero__eyebrow{display:inline-block;font-size:13px;letter-spacing:.22em;color:var(--ember);
  border-left:3px solid var(--ember);padding-left:12px;margin:0 0 24px}
.hero__title{font-family:var(--serif);font-weight:800;
  font-size:clamp(40px,7vw,76px);line-height:1.18;letter-spacing:.02em;margin:0 0 28px;
  text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero__lead{font-size:clamp(15px,1.7vw,18px);color:#d4d8de;max-width:42ch;margin:0 0 40px;line-height:2}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.25em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll span{width:1px;height:46px;background:linear-gradient(var(--ember),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== Section commons ===== */
.section{padding:108px 0;position:relative}
.kicker{font-size:13px;letter-spacing:.22em;color:var(--ember);font-weight:700;margin:0 0 14px;text-transform:uppercase}
.kicker--accent{color:var(--ember)}
.section__title{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.3;letter-spacing:.02em}
.section__head{margin-bottom:56px}
.section__desc{color:var(--muted);margin-top:18px;font-size:15px}
.section__head--light .section__title,.section__head--light .section__desc{color:var(--ink)}

/* ===== 写真プレースホルダ ===== */
.ph{position:relative;width:100%;aspect-ratio:4/3;background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),var(--panel);
  border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;overflow:hidden}
.ph span{font-size:13px;letter-spacing:.1em;color:var(--muted);border:1px dashed var(--line);padding:8px 16px;border-radius:3px}
.ph--portrait{aspect-ratio:3/4}
.ph--tall{aspect-ratio:3/4;height:100%}

/* ===== About / 代表挨拶 ===== */
.about{background:var(--paper);color:var(--ink-dark)}
.about .kicker{color:var(--ember)}
.about__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:center}
.about__media .ph{background:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 10px,transparent 10px 20px),var(--paper2);border-color:var(--line-dark)}
.about__media .ph span{color:#8a857a;border-color:var(--line-dark)}
.about__caption{font-size:13px;color:#6a6459;margin:14px 0 0;text-align:center;letter-spacing:.05em}
.about__body .section__title{color:var(--ink-dark);margin-bottom:24px}
.about__text{margin:0 0 22px;color:#3a3a36;line-height:2.1}
.about__sign{font-family:var(--serif);font-size:17px;color:var(--ink-dark);text-align:right;margin-top:30px}

/* ===== Business（交互レイアウト） ===== */
.business{background:var(--bg2)}
.biz{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.biz:first-of-type{border-top:0}
.biz--rev .biz__media{order:2}
.biz__media .ph{aspect-ratio:5/4}
.biz__no{font-family:var(--serif);font-size:14px;color:var(--ember);letter-spacing:.18em;margin:0 0 10px}
.biz__title{font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);letter-spacing:.04em;margin:0 0 6px}
.biz__lead{font-size:16px;color:var(--ink);margin:0 0 16px;font-weight:500}
.biz__text{font-size:15px;color:var(--muted);line-height:2;margin:0 0 22px}
.biz__tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.biz__tags li{font-size:13px;color:var(--ink);border:1px solid var(--line);padding:6px 14px;border-radius:3px;background:rgba(255,255,255,.02)}

/* ===== Flow / 対応の流れ ===== */
.flow{background:var(--bg);position:relative}
.flow::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 1px,transparent 1px 22px);pointer-events:none}
.flow__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;counter-reset:none}
.flow__item{position:relative;padding:32px 24px;border-top:2px solid var(--steel);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.flow__item:not(:last-child)::after{content:"→";position:absolute;top:50%;right:-18px;transform:translateY(-50%);color:var(--ember);font-weight:700;z-index:2}
.flow__num{font-family:var(--serif);font-size:30px;color:rgba(255,255,255,.12)}
.flow__item h3{font-family:var(--serif);font-size:19px;margin:6px 0 12px}
.flow__item p{font-size:14px;color:var(--muted);margin:0;line-height:1.9}

/* ===== Recruit / 採用 ===== */
.recruit{background:var(--bg2)}
.recruit__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.recruit .section__title{color:var(--ink);margin-bottom:20px}
.recruit__text{color:var(--muted);margin:0 0 22px;line-height:2}
.recruit__points{list-style:none;padding:0;margin:0 0 30px}
.recruit__points li{padding:10px 0 10px 26px;position:relative;font-size:15px;border-bottom:1px solid var(--line)}
.recruit__points li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:2px;background:var(--ember)}

/* ===== Area + FAQ ===== */
.area{background:var(--paper2);color:var(--ink-dark)}
.area .kicker{color:var(--ember)}
.area__inner{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:start}
.area .section__title{color:var(--ink-dark)}
.area__desc{margin:20px 0 26px;color:#3a3a36}
.area__desc strong{color:var(--ink-dark)}
.area__list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.area__list li{background:var(--ink-dark);color:#fff;font-size:14px;font-weight:500;padding:8px 18px;border-radius:3px}
.faq{border-bottom:1px solid var(--line-dark);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;font-size:15px;position:relative;color:var(--ink-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;color:var(--ember);transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 16px;color:#4a443a;font-size:14.5px;line-height:1.9}

/* ===== Company ===== */
.company{background:var(--bg2)}
.company__table{margin:0;border-top:1px solid var(--line)}
.company__row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--line)}
.company__row dt{padding:22px 16px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.02);font-size:15px}
.company__row dd{padding:22px 16px;margin:0;color:var(--muted)}

/* ===== Contact ===== */
.contact{background:var(--bg);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;top:-30%;right:-10%;width:50%;height:160%;
  background:radial-gradient(circle,rgba(226,86,42,.12),transparent 70%);pointer-events:none}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;position:relative}
.contact .section__title{color:var(--ink)}
.contact__desc{color:var(--muted);margin:18px 0 30px}
.contact__tel{border:1px solid var(--line);border-radius:6px;padding:22px 26px;background:rgba(255,255,255,.02)}
.contact__tel-label{font-size:12px;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:6px}
.contact__tel-num{font-family:var(--serif);font-size:30px;color:var(--ink);letter-spacing:.04em}
.contact__form{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:36px}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.req{color:var(--ember);font-size:11px;margin-left:6px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);padding:13px 14px;font-family:inherit;font-size:15px;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember)}
.contact__note{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0}

/* ===== Footer ===== */
.footer{background:#0e1116;border-top:1px solid var(--line);padding:54px 0 26px}
.footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.footer__brand{display:flex;gap:14px;align-items:center}
.footer__name{font-family:var(--serif);font-size:17px;margin:0}
.footer__addr{font-size:13px;color:var(--muted);margin:4px 0 0}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__nav a{font-size:13px;color:var(--muted);transition:color .2s}
.footer__nav a:hover{color:var(--ember)}
.footer__copy{text-align:center;font-size:12px;color:var(--muted);margin:40px 0 0;letter-spacing:.04em}

/* ===== Reveal ===== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:880px){
  .about__grid,.area__inner,.contact__inner,.recruit__inner{grid-template-columns:1fr;gap:40px}
  .about__media{max-width:300px;margin:0 auto}
  .biz,.biz--rev{grid-template-columns:1fr;gap:24px}
  .biz--rev .biz__media{order:0}
  .flow__list{grid-template-columns:1fr 1fr;gap:20px}
  .flow__item:not(:last-child)::after{display:none}
  .recruit__media{max-width:340px;margin:0 auto;width:100%}
}
@media(max-width:720px){
  .nav{position:fixed;inset:78px 0 auto 0;background:rgba(16,19,26,.98);flex-direction:column;gap:0;
    padding:10px 0;transform:translateY(-120%);transition:transform .35s;border-bottom:1px solid var(--line)}
  .nav.is-open{transform:translateY(0)}
  .nav__link,.nav__cta{width:100%;padding:16px 24px;border-radius:0}
  .nav__cta{text-align:center}
  .nav-toggle{display:flex}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .section{padding:76px 0}
  .flow__list{grid-template-columns:1fr}
  .company__row{grid-template-columns:1fr}
  .company__row dt{padding-bottom:6px}
  .company__row dd{padding-top:6px}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__scroll span{animation:none}
}