@charset "utf-8";
/* ================================================================
   home.css — トップ(index.html)専用。site.css の後に読む
   ヒーロー(写真集の扉+表題欄)と、トップの各節の配置だけを持つ。
   部品そのもの(ラインの台紙・断面図・路線図・給与・認証マーク・SDGs)は site.css にある。
   ================================================================ */

/* ------------------------------------------------ hero: 全幅の写真(3 枚を切り替え)の上に見出しを重ねる + 表題欄 */
.hero{max-width:1680px;margin-inline:auto;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:clamp(640px,calc(100svh - var(--header-h)),1040px)}
.hero__main{position:relative;isolation:isolate;display:flex;align-items:center;min-height:520px;overflow:hidden;background:#2A3A4A}
.hero__text{position:relative;z-index:2;width:min(100%,640px);padding:clamp(48px,8vh,96px) var(--gutter);color:var(--white)}
.hero__title{color:var(--white);font-size:clamp(2.8rem,4.6vw,4.8rem);line-height:1.24;letter-spacing:.03em;text-shadow:0 2px 24px rgba(10,13,52,.35)}
.hero__lead{margin-top:28px;font-size:17px;line-height:1.95;max-width:26em;color:rgba(255,255,255,.94);word-break:auto-phrase}
.hero__actions{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hero__actions .btn--fill{background:var(--white);color:var(--navy);border-color:var(--white)}
.hero__actions .btn--fill:hover{background:#E8ECF6}
.hero__more{padding-block:6px;color:var(--white)}
/* 写真: ヒーロー全体に敷く。左から紺のかげりを掛けて、白い文字を読ませる */
.hero__photo{position:absolute;inset:0;z-index:0;margin:0}
.hero__frame{position:absolute;inset:0;overflow:hidden}
.hero__frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(13,17,64,.88) 0%,rgba(13,17,64,.74) 26%,rgba(13,17,64,.38) 50%,rgba(13,17,64,0) 72%),
  linear-gradient(0deg,rgba(13,17,64,.5) 0%,rgba(13,17,64,0) 22%)}
.hero__frame{background:#0D1140}
.hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%;opacity:0;transition:opacity 1.2s ease}
/* 写真の切り替え(home.js)。表示中の 1 枚だけ .is-on。JS が無い時は 1 枚目だけが見える */
.hero__frame img.is-on{opacity:1}
.hero__frame .hero__img--rack{object-position:50% 56%}
.hero__frame .hero__img--factory{object-position:50% 62%}
/* 右下: キャプション(写真の名前)と切り替えボタン */
.hero__ctrl{position:absolute;right:var(--gutter);bottom:18px;z-index:2;display:flex;align-items:center;gap:2px;padding:4px 6px;background:rgba(13,17,64,.62);border-radius:2px}
.hero__ctrl[hidden]{display:none}
.hero__ctrl button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;color:var(--white);cursor:pointer}
.hero__ctrl :focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.hero__dot::before{content:"";width:16px;height:3px;background:rgba(255,255,255,.42);transition:background .3s}
.hero__dot[aria-current="true"]::before{background:var(--white)}
.hero__dot:hover::before{background:rgba(255,255,255,.75)}
.hero__pause{margin-left:4px;border-left:1px solid rgba(255,255,255,.3)!important}
.hero__pause svg{width:12px;height:12px;fill:currentColor}
.hero__pause .i-play,.hero__pause.is-paused .i-pause{display:none}
.hero__pause.is-paused .i-play{display:inline}
.hero__photo figcaption{position:absolute;z-index:2;right:calc(var(--gutter) + 156px);bottom:18px;height:38px;display:flex;align-items:center;margin:0;color:var(--white);text-shadow:0 1px 8px rgba(10,13,52,.6);white-space:nowrap}
.hero__photo figcaption b{color:var(--white);letter-spacing:.12em}
html:not(.js) .hero__photo figcaption{right:var(--gutter)}
/* 表題欄: 色だけ画面の端まで伸ばす(1680px より広い画面用) */
.titleblock{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.95fr) minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.6fr);background:var(--paper-2);padding:22px var(--gutter) 24px;box-shadow:0 0 0 100vmax var(--paper-2);clip-path:inset(0 -100vmax)}
.titleblock>div{min-width:0;padding:1px clamp(16px,2vw,32px) 2px;border-left:1px solid var(--rule)}
.titleblock>div:first-child{padding-left:0;border-left:0}
.titleblock dt{font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:.12em;line-height:1.4}
.titleblock dd{margin-top:6px;font-family:var(--fig);font-size:15.5px;font-weight:500;line-height:1.65}
.titleblock .num{font-weight:600}

/* ------------------------------------------------ lines */
.lines__foot{margin-top:32px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:8px 32px}
.lines__note{font-size:15px;color:var(--ink-2)}

/* ------------------------------------------------ finish (3価クロメート) */
.finish__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.finish__text p{max-width:34em;margin-top:20px}
.finish__text .fact{margin-top:28px;padding:20px 24px;background:var(--paper-2)}
.finish__text .fact strong{font-weight:700}
.finish .coat{justify-self:end}

/* ------------------------------------------------ environment */
.env{background:var(--paper-2)}
.env__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4.4fr);gap:48px;align-items:start}
.env__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.env__photo figcaption{margin-top:12px}
.env h3{font-size:clamp(1.25rem,1.55vw,1.42rem);line-height:1.55}
.env__block+.env__block{margin-top:44px}
.env__block p{margin-top:12px}
.env__years{list-style:none;margin-top:18px;border-top:1px solid var(--rule)}
.env__years li{display:grid;grid-template-columns:5.2em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);line-height:1.65}
.env__years time{font-family:var(--fig);font-weight:600;font-size:15px;padding-top:1px}

/* ------------------------------------------------ news */
.news__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8.4fr);gap:48px}
.news__list{list-style:none;border-top:1px solid var(--rule)}
.news__list li{display:grid;grid-template-columns:8.5em 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.news__list time{font-family:var(--fig);font-weight:500;font-size:15px;color:var(--ink-2);letter-spacing:.04em;padding-top:1px}

/* ------------------------------------------------ recruit */
.recruit{background:var(--paper-2)}
.recruit__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* ------------------------------------------------ company + access */
.co__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.co__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.co__photo figcaption{margin-top:12px}
.co__dl{margin-top:32px;border-top:1px solid var(--rule)}
.co__dl>div{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.co__dl dt{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:.08em;padding-top:1px}
.co__more{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:700}
.access h3{font-size:clamp(1.25rem,1.6vw,1.45rem);line-height:1.5}
.access__addr{margin-top:12px}
.access__note{margin-top:16px}
.access__car{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.access__car h4{font-size:17px}
.access__car p{margin-top:6px}

/* ================================================ responsive */
/* tablet: two-column hero, compact title block */
@media (min-width:600px) and (max-width:1179.98px){
  .hero__text{width:min(100%,560px);padding:56px var(--gutter)}
  .hero__title{font-size:clamp(2.5rem,6vw,3.6rem)}
  .hero__lead{font-size:16px;margin-top:22px}
  .hero__actions{margin-top:28px}
  .hero__frame::after{background:
    linear-gradient(90deg,rgba(13,17,64,.88) 0%,rgba(13,17,64,.72) 40%,rgba(13,17,64,.3) 70%,rgba(13,17,64,.08) 100%),
    linear-gradient(0deg,rgba(13,17,64,.5) 0%,rgba(13,17,64,0) 22%)}
  .titleblock{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:16px}
  .titleblock>div:nth-child(1){grid-column:span 2}
  .titleblock>div:nth-child(2){grid-column:span 4}
  .titleblock>div:nth-child(n+3){grid-column:span 2}
  .titleblock>div:nth-child(3){padding-left:0;border-left:0}
}

@media (max-width:960px){
  .finish__grid{grid-template-columns:1fr;gap:36px}
  .finish .coat{justify-self:stretch}
  .env__grid{grid-template-columns:1fr;gap:40px}
  .env__photo{max-width:480px}
  .news__grid{grid-template-columns:1fr;gap:24px}
  .news__list li{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .recruit__actions .btn{width:100%;justify-content:center}
  .co__grid{grid-template-columns:1fr;gap:48px}
  .co__dl>div{grid-template-columns:5.6em 1fr;gap:12px}
}

/* phone: 写真が先、見出しはその下。キャプションは横組みに戻す */
@media (max-width:599.98px){
  .hero{display:block;min-height:0}
  /* 写真を画面いっぱいに敷き、見出しは下側に寄せる。キャプションとボタンは右上 */
  .hero__main{align-items:flex-end;min-height:clamp(560px,calc(100svh - var(--header-h)),760px)}
  .hero__frame::after{background:linear-gradient(0deg,rgba(13,17,64,.92) 0%,rgba(13,17,64,.8) 34%,rgba(13,17,64,.4) 58%,rgba(13,17,64,.06) 80%,rgba(13,17,64,.25) 100%)}
  /* 1 枚目(液がしたたるバレル)は正方形で、そのままだとバレルが見出しの下に隠れる。
     写真を上へずらして、バレルとしずくを見出しの上の空きに収める(下端は紺へぼかす) */
  .hero__frame img.hero__img--drip{inset:-24% 0 auto;height:86%;object-position:56% 50%;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 98%);mask-image:linear-gradient(180deg,#000 74%,transparent 98%)}
  .hero__frame .hero__img--rack{object-position:50% 40%}
  .hero__frame .hero__img--factory{object-position:42% 50%}
  .hero__ctrl{top:12px;bottom:auto;right:12px}
  .hero__photo figcaption{top:12px;bottom:auto;right:168px}
  html:not(.js) .hero__photo figcaption{right:12px}
  .hero__text{width:100%;padding:0 var(--gutter) 32px}
  .hero__title{font-size:clamp(2.15rem,10.2vw,2.9rem);line-height:1.3}
  .hero__lead{margin-top:16px;font-size:16px}
  .hero__actions{margin-top:24px;gap:10px}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__more{margin-top:4px}
  .titleblock{grid-template-columns:1fr;padding:6px var(--gutter) 8px}
  .titleblock>div{display:grid;grid-template-columns:4.8em minmax(0,1fr);gap:10px;padding:11px 0;border-left:0;border-top:1px solid var(--rule)}
  .titleblock>div:first-child{border-top:0}
  .titleblock dt{padding-top:2px}
  .titleblock dd{margin-top:0;font-size:15px}
}

/* 動きを減らす設定: 写真はフェードせず切り替える(自動の切り替えは home.js が止める) */
@media (prefers-reduced-motion:reduce){.hero__frame img{transition:none}}