/* ===========================================================
   株式会社 樋口製作所 採用（架空）
   型: people(人が主役) × mid(中密度) × face-first(顔から始まる) × casual(口語)

   方針:
   ・Showcase 32本で初めて「写真が主役」の1本。ComfyUI(Krea2)で生成した
     実写を据え、UIは写真を邪魔しないところまで下げる。
   ・ヒーローのコピーは詩にしない。社長がしゃべっている文章そのままを置く。
   ・色は写真から拾う（作業着の紺／機械の緑／切削油の黄）。作った色は使わない。
   ・動きは「読み進める助け」だけ。演出のアニメーションは主役にしない。
   2026-07-25 craft-kit統合（../../assets/craftkit.css/js）で finish を底上げ：
   ・reveal/staggerはcraft-kit任せ（このファイルはレイアウト/配色のみ）。
   ・写真は部品番号ふうの額装タグ(.ph-tag)＋薄枠＋影で「置かれた実写」感を出す。
   =========================================================== */

:root{
  --navy:#243347;        /* 作業着の紺 */
  --green:#3c5a4c;       /* 機械の緑 */
  --oil:#c08a2e;         /* 切削油の黄 */
  --ink:#20242a;
  --ink-2:#555d68;
  --ink-3:#8a929c;
  --paper:#fbfaf8;
  --paper-2:#f0eee9;
  --line:#ddd8cf;

  --sans:"Murecho","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --num:"Oswald","Murecho",sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ---------- ヘッダー（写真より前に出ない） ---------- */
.hd{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px 24px; background:var(--paper); border-bottom:1px solid var(--line);
}
.hd-n{margin:0; font-size:14px; font-weight:800; letter-spacing:.02em}
.hd-n span{font-weight:300; color:var(--ink-3); font-size:12.5px}
.hd-nav{display:flex; gap:16px; margin-left:14px}
.hd-nav a{font-size:13px; color:var(--ink-2); text-decoration:none; font-weight:500}
.hd-nav a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.hd-tel{
  margin-left:auto; font-size:13px; font-weight:800; color:var(--navy);
  text-decoration:none; border:2px solid var(--navy); border-radius:3px; padding:7px 14px;
}
.hd-tel:hover{background:var(--navy); color:#fff}
.hd-nav a:focus-visible, .hd-tel:focus-visible{outline:2px solid var(--oil); outline-offset:3px}

/* ---------- 顔から始まる ---------- */
.face{
  display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:stretch; background:var(--paper-2);
}
.face-img{margin:0; overflow:hidden; position:relative}
.face-img img{width:100%; height:100%; object-fit:cover; object-position:50% 28%; transform:scale(1.07)}
.face-txt{padding:clamp(28px,4.6vw,62px) clamp(24px,4vw,60px); align-self:center}
.face-kick{
  margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--oil);
}
.face-h{
  margin:0 0 20px; font-size:clamp(30px,4.6vw,50px); font-weight:800;
  line-height:1.28; letter-spacing:.01em;
}
.face-body{margin:0 0 15px; font-size:15.5px; max-width:46ch}
.face-body b{font-weight:800; background:linear-gradient(transparent 62%, #f2dfae 62%)}
.face-sign{
  margin:24px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-2);
}
.face-sign b{display:block; font-size:17px; font-weight:800; color:var(--ink)}

/* ---------- 写真の額装（部品番号タグ） ---------- */
.ph-tag{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:baseline; gap:8px;
  padding:6px 12px 6px 10px; max-width:calc(100% - 24px);
  background:rgba(26,29,34,.74); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  color:#f4f1ea; font-size:11px; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ph-tag b{
  font-family:var(--num); font-weight:600; font-size:11.5px; letter-spacing:.05em; color:var(--oil);
  flex:none;
}

/* ---------- 数字 ---------- */
.nums{background:var(--navy); color:#fff}
.nums-in{
  max-width:var(--wrap); margin:0 auto; padding:18px 24px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.nums div{text-align:center; border-left:1px solid rgba(255,255,255,.16)}
.nums div:first-child{border-left:none}
.nums dt{font-size:11.5px; color:#a9b4c2; letter-spacing:.04em}
.nums dd{margin:2px 0 0; font-size:13px; font-weight:500}
.nums dd b{font-family:var(--num); font-weight:600; font-size:31px; letter-spacing:.01em; margin-right:2px}

/* ---------- セクション ---------- */
.sec{padding:56px 0 60px}
.sec-alt{background:var(--paper-2)}
.h2{
  margin:0 0 8px; font-size:clamp(22px,2.8vw,29px); font-weight:800; letter-spacing:.02em;
  display:flex; align-items:baseline; gap:14px;
}
.h2 span{
  font-family:var(--num); font-weight:600; font-size:15px; color:#fff;
  background:var(--green); padding:3px 9px; letter-spacing:.06em;
}
.h3{margin:0 0 12px; font-size:18px; font-weight:800}
.lead{margin:0 0 28px; font-size:15px; color:var(--ink-2); max-width:60ch}

/* ---------- インタビュー ---------- */
.iv{
  display:grid; grid-template-columns:300px 1fr; gap:30px; align-items:start;
  padding:26px 0; border-top:1px solid var(--line);
}
.iv:last-child{border-bottom:1px solid var(--line)}
.iv-rev{grid-template-columns:1fr 300px}
.iv-rev .iv-img{order:2}
.iv-img{margin:0; position:relative; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 32px -22px rgba(32,36,42,.4)}
.iv-img img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 22%; display:block}
.iv-who{margin:0 0 16px; font-size:12.5px; color:var(--ink-3)}
.iv-who b{display:block; font-size:20px; font-weight:800; color:var(--ink); margin-bottom:2px}
.qa{margin:0}
.qa div{padding:12px 0; border-top:1px dashed var(--line)}
.qa div:first-child{border-top:none; padding-top:0}
.qa dt{font-size:14px; font-weight:800; color:var(--green); margin-bottom:4px}
.qa dt::before{content:"— "}
.qa dd{margin:0; font-size:15px; color:var(--ink-2)}

/* ---------- 一日の流れ ---------- */
.day{list-style:none; margin:0; padding:0; border-left:3px solid var(--navy)}
.day li{position:relative; padding:0 0 22px 26px}
.day li::before{
  content:""; position:absolute; left:-8px; top:8px;
  width:13px; height:13px; border-radius:50%; background:var(--paper-2);
  border:3px solid var(--navy);
}
.sec-alt .day li::before{background:var(--paper-2)}
.day-end::before{background:var(--oil) !important; border-color:var(--oil) !important}
.day-t{margin:0; font-family:var(--num); font-weight:600; font-size:19px; color:var(--navy); line-height:1.1}
.day-h{margin:1px 0 3px; font-size:17px; font-weight:800}
.day-d{margin:0; font-size:14.5px; color:var(--ink-2)}

/* ---------- 仕事の中身 ---------- */
.work{display:grid; grid-template-columns:1.15fr 1fr; gap:30px; align-items:center; margin-bottom:26px}
.work-img{margin:0; position:relative; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 32px -22px rgba(32,36,42,.4)}
.work-img img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.work-txt p{margin:0 0 13px; font-size:15.5px}
.work-txt p:last-child{margin-bottom:0}
.work-txt b{font-weight:800; background:linear-gradient(transparent 62%, #f2dfae 62%)}
.kinds{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kinds li{
  background:var(--paper-2); border-top:3px solid var(--green); padding:13px 15px;
  font-size:13.5px; color:var(--ink-2);
}
.sec .kinds li{background:var(--paper-2)}
.kinds b{display:block; font-size:16px; font-weight:800; color:var(--ink); margin-bottom:3px}

/* ---------- 募集要項 ---------- */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); background:var(--paper); margin-bottom:34px}
.req{width:100%; border-collapse:collapse; font-size:14.5px}
.req th{
  width:120px; text-align:left; font-size:12.5px; font-weight:800; color:#fff;
  background:var(--navy); padding:11px 14px; white-space:nowrap; vertical-align:top;
}
.req td{padding:11px 16px; border-bottom:1px solid var(--line)}
.req tr:last-child td{border-bottom:none}
.req b{font-weight:800; color:var(--navy)}

.qa2 .q{border-bottom:1px solid var(--line)}
.qa2 .q:first-of-type{border-top:1px solid var(--line)}
.q summary{
  cursor:pointer; list-style:none; padding:13px 34px 13px 0; position:relative;
  font-size:15.5px; font-weight:800;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);
}
.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.q summary:hover{color:var(--green)}
.q summary:focus-visible{outline:2px solid var(--oil); outline-offset:2px}
.q p{margin:0 0 15px; font-size:14.5px; color:var(--ink-2); max-width:66ch}
.q p b{font-weight:800; color:var(--ink)}

/* ---------- 会社概要 ---------- */
.ft{background:var(--navy); color:#e8ecf1; padding:44px 0 40px}
.ft-call{
  margin:0 0 26px; font-size:clamp(20px,2.6vw,27px); font-weight:800; color:#fff; line-height:1.5;
}
.ft-call span{display:block; font-size:14px; font-weight:500; color:var(--oil); margin-top:5px}
.ft-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start; margin-bottom:22px}
.ft-t{width:100%; border-collapse:collapse; font-size:13.5px}
.ft-t th{
  width:88px; text-align:left; font-size:11.5px; font-weight:800; color:#a9b4c2;
  padding:8px 12px 8px 0; border-bottom:1px solid rgba(255,255,255,.14); white-space:nowrap; vertical-align:top;
}
.ft-t td{padding:8px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.ft-img{margin:0; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.16)}
.ft-img img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.ft-disc{
  margin:0 0 8px; font-size:11.5px; color:#a9b4c2; line-height:1.8;
  border-top:1px solid rgba(255,255,255,.14); padding-top:14px;
}
.ft-disc b{color:#fff}
.ft-c{margin:0; font-size:11px; color:#7d8797}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .face{grid-template-columns:1fr}
  .face-img img{aspect-ratio:4/3; height:auto}
  .nums-in{grid-template-columns:repeat(2,1fr); gap:12px}
  .nums div:nth-child(odd){border-left:none}
  .iv, .iv-rev{grid-template-columns:1fr; gap:18px}
  .iv-rev .iv-img{order:0}
  .iv-img img{aspect-ratio:4/3}
  .work{grid-template-columns:1fr}
  .kinds{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hd-nav{display:none}
  .kinds{grid-template-columns:1fr}
  .req th{width:88px; font-size:11.5px; padding:9px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}