/* 杉工作所 デモサイト共通スタイル(自作・BESTテンプレート非使用) */
:root{
  --navy:#1F3C68;
  --navy-deep:#152A4A;
  --blue:#3D6CB4;
  --green:#4FA83D;
  --ink:#252A31;
  --muted:#66707C;
  --bg:#F5F7FA;
  --card:#FFFFFF;
  --line:#DDE3EA;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.85;
}
img{max-width:100%;display:block}
a{color:var(--blue)}

/* ヘッダー */
.topbar{background:var(--navy-deep);color:#fff;font-size:.78rem;padding:6px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.topbar .demo-badge{background:#E8B54A;color:#3A2B00;font-weight:700;border-radius:4px;padding:1px 8px;font-size:.72rem}
header.site{background:#fff;border-bottom:3px solid var(--navy);position:sticky;top:0;z-index:50}
.head-inner{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.brand .co{font-size:1.25rem;font-weight:700;letter-spacing:.04em}
.brand .co span{color:var(--navy)}
.brand .tag{font-size:.7rem;color:var(--muted)}
.head-tel{text-align:right;font-size:.75rem;color:var(--muted)}
.head-tel .num{font-size:1.3rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
nav.global{background:var(--navy)}
nav.global ul{max-width:1080px;margin:0 auto;list-style:none;display:flex;overflow-x:auto;white-space:nowrap}
nav.global a{display:block;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:11px 16px;border-right:1px solid rgba(255,255,255,.15)}
nav.global li:first-child a{border-left:1px solid rgba(255,255,255,.15)}
nav.global a:hover,nav.global a.on{background:var(--blue)}

/* ヒーロー(トップ) */
.hero{position:relative;min-height:480px;display:flex;align-items:center;background:url("img/hero-machining.jpg") center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(21,42,74,.88) 0%,rgba(21,42,74,.55) 55%,rgba(21,42,74,.25) 100%)}
.hero-inner{position:relative;max-width:1080px;margin:0 auto;padding:56px 20px;color:#fff}
.hero h1{font-size:clamp(1.6rem,4.2vw,2.6rem);font-weight:700;line-height:1.5;letter-spacing:.05em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero h1 .accent{color:#9FD68B}
.hero p{margin-top:14px;font-size:clamp(.9rem,2vw,1.05rem);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hero .btns{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:6px;padding:12px 26px;font-size:.92rem}
.btn-green{background:var(--green);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn:hover{opacity:.9}

/* ページ共通 */
.page-title{background:linear-gradient(100deg,var(--navy) 0%,var(--blue) 100%);color:#fff;padding:44px 20px}
.page-title .inner{max-width:1080px;margin:0 auto}
.page-title h1{font-size:1.7rem;letter-spacing:.06em}
.page-title p{font-size:.9rem;opacity:.9;margin-top:6px}
main{max-width:1080px;margin:0 auto;padding:40px 16px 70px}
section{margin-bottom:52px}
h2.sec{font-size:1.35rem;color:var(--navy);border-bottom:3px solid var(--line);padding-bottom:10px;margin-bottom:22px;position:relative}
h2.sec::after{content:"";position:absolute;left:0;bottom:-3px;width:88px;height:3px;background:var(--green)}
h3.sub{font-size:1.05rem;color:var(--navy);border-left:5px solid var(--green);padding-left:10px;margin:26px 0 12px}
p.lead{font-size:1rem;margin-bottom:18px}

/* カード・グリッド */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .body{padding:14px 16px}
.card .num{color:var(--green);font-weight:700;font-size:.8rem;letter-spacing:.1em}
.card h3{font-size:1.05rem;color:var(--navy);margin:2px 0 6px}
.card p{font-size:.85rem;color:var(--muted)}
a.card:hover{box-shadow:0 6px 18px rgba(31,60,104,.15)}

/* 写真+文章の段組 */
.media{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-bottom:30px}
.media img{border-radius:10px;width:100%;object-fit:cover;max-height:320px}
@media(max-width:760px){.media{grid-template-columns:1fr}}

/* テーブル */
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
table.info{width:100%;border-collapse:collapse;font-size:.92rem}
table.info th,table.info td{border-bottom:1px solid var(--line);padding:12px 16px;text-align:left;vertical-align:top}
table.info th{width:11em;background:#EEF2F7;color:var(--navy);font-weight:700;white-space:nowrap}
table.info tr:last-child th,table.info tr:last-child td{border-bottom:none}
table.spec{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}
table.spec th,table.spec td{border:1px solid var(--line);padding:8px 12px;text-align:left;background:#fff}
table.spec thead th{background:var(--navy);color:#fff;border-color:var(--navy)}

/* お知らせ */
.news{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 20px}
.news dl{display:grid;grid-template-columns:8.5em 1fr;font-size:.9rem}
.news dt{padding:10px 0;color:var(--muted);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.news dd{padding:10px 0;border-bottom:1px solid var(--line)}
.news dt:nth-last-of-type(1),.news dd:last-child{border-bottom:none}
@media(max-width:600px){.news dl{grid-template-columns:1fr}.news dt{padding-bottom:0;border-bottom:none}}

/* 採用の流れ */
.steps{display:grid;gap:12px}
.step{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--green);border-radius:8px;padding:14px 18px;display:grid;grid-template-columns:9em 1fr;gap:12px;align-items:center}
.step .no{color:var(--navy);font-weight:700}
.step .no small{display:block;color:var(--green);font-size:.72rem;letter-spacing:.15em}
@media(max-width:600px){.step{grid-template-columns:1fr}}
.step-arrow{text-align:center;color:var(--green);font-size:1.2rem;line-height:1}

/* FAQ */
.faq{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 20px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:none}
.faq summary{font-weight:700;color:var(--navy);cursor:pointer;font-size:.95rem}
.faq summary::marker{color:var(--green)}
.faq .a{margin-top:8px;font-size:.9rem;padding-left:1em}

/* インタビュー */
.voice{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;margin-bottom:26px}
.voice .head{display:flex;gap:18px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.voice .head img{width:110px;height:110px;object-fit:cover;border-radius:50%}
.voice .head h3{color:var(--navy);font-size:1.15rem}
.voice .head small{color:var(--muted)}
.voice h4{font-size:.92rem;color:var(--green);margin:14px 0 4px}
.voice p{font-size:.92rem}

/* CTA */
.cta{background:var(--navy);color:#fff;border-radius:12px;padding:30px 24px;text-align:center}
.cta h2{font-size:1.2rem;margin-bottom:6px}
.cta .tel{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}
.cta small{display:block;opacity:.85;margin-top:4px}
.cta .btns{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 注記 */
.demo-note{background:#FFF8EA;border:1px solid #F0DFB4;border-radius:8px;padding:10px 14px;font-size:.8rem;color:#8A6100;margin-bottom:24px}

/* フッター */
footer.site{background:var(--navy-deep);color:#C9D4E3;margin-top:20px}
.foot-inner{max-width:1080px;margin:0 auto;padding:34px 20px 20px}
.foot-inner .co{color:#fff;font-weight:700;font-size:1.05rem}
.foot-inner p{font-size:.82rem;margin-top:6px}
.foot-nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.8rem}
.foot-nav a{color:#C9D4E3;text-decoration:none}
.foot-nav a:hover{color:#fff}
.copyright{text-align:center;font-size:.75rem;padding:14px;border-top:1px solid rgba(255,255,255,.15);margin-top:20px}

/* お問い合わせフォーム */
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea{
  width:100%;padding:8px 10px;border:1px solid #c9d2da;border-radius:3px;font-size:16px;font-family:inherit;background:#fff;color:#1f2933}
.contact-form label{display:inline-block;margin:2px 0;cursor:pointer}
.contact-form .req{display:inline-block;margin-left:6px;font-size:11px;color:#fff;background:#b4531f;border-radius:3px;padding:1px 5px;vertical-align:middle}
.contact-form .hp{position:absolute;left:-9999px}
.btn-send{padding:12px 46px;font-size:17px;font-weight:700;color:#fff;background:#17365f;border:0;border-radius:4px;cursor:pointer}
.btn-send:hover{background:#0f2748}

/* ── ファーストビューの仕上げ(2026-09-24) ───────────────── */
.hero{min-height:560px;overflow:hidden;background-position:center 42%}
.hero::before{
  background:linear-gradient(105deg,rgba(14,30,56,.94) 0%,rgba(16,36,66,.78) 42%,rgba(18,42,78,.30) 78%,rgba(18,42,78,.10) 100%)}
/* 斜めに走る細い光の線 */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(105deg,rgba(255,255,255,.05) 0 1px,transparent 1px 78px)}
.hero-inner{padding:72px 20px 78px}
.hero .kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.34em;font-weight:700;color:#9FD68B;
  padding-bottom:9px;margin-bottom:16px;border-bottom:2px solid rgba(159,214,139,.55)}
.hero h1{position:relative;padding-left:20px;line-height:1.45}
.hero h1::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;
  background:linear-gradient(180deg,#9FD68B,rgba(159,214,139,.25))}
.hero p{max-width:34em}
.hero .btns .btn{padding:13px 30px;border-radius:2px;letter-spacing:.06em}
.hero .btn-white{box-shadow:0 6px 18px rgba(0,0,0,.18)}
/* 下辺をゆるく斜めに切って、次のセクションへつなぐ */
.hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%)}
@media(max-width:620px){
  .hero{min-height:420px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%)}
  .hero-inner{padding:48px 18px 56px}
  .hero .kicker{letter-spacing:.24em}
}

/* ── ファーストビューを3枚の写真でゆっくり切り替える(2026-09-24) ── */
.hero{background:#0E1E38}
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero::before,.hero::after{z-index:1}
.hero-inner{z-index:2}
.hero-slides span{
  position:absolute;inset:0;background-size:cover;background-position:center 45%;
  opacity:0;animation:heroFade 21s infinite;transform:scale(1.04)}
.hero-slides span:nth-child(1){background-image:url("img/hero-1.jpg");animation-delay:0s}
.hero-slides span:nth-child(2){background-image:url("img/hero-2.jpg");animation-delay:7s}
.hero-slides span:nth-child(3){background-image:url("img/hero-3.jpg");animation-delay:14s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.04)}
  6%{opacity:1}
  33%{opacity:1;transform:scale(1.10)}
  39%{opacity:0;transform:scale(1.10)}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-slides span{animation:none;opacity:0;transform:none}
  .hero-slides span:nth-child(1){opacity:1}
}

/* 設備・機械一覧の列幅(2026-09-26) */
table.equip th,table.equip td{white-space:nowrap;vertical-align:middle}
table.equip td:nth-child(4),table.equip td:nth-child(5){white-space:normal;min-width:11em}
table.equip th:last-child,table.equip td:last-child{text-align:center}