@charset "UTF-8";

/* =============================================================
   エスエム鉄工有限会社 HP 2026 / static HTML prototype
   Figma: エスエム鉄工HP2026 (1440px artboard)
   ============================================================= */

/* --- design tokens ------------------------------------------------ */
:root {
  --c-ink:            #211815; /* 見出し */
  --c-text:           #3B3736; /* 本文・表組 */
  --c-orange:         #EA5504;
  --c-footer-bg:      #ABD1E8;
  --c-row-blue:       #F0F8FD;
  --c-row-cream:      #FFFCF5;
  --c-border:         #C8CED1;
  --c-border-strong:  #9A9A9A;
  --c-nav-border:     #BCD2E0;
  --c-field-border:   #E2E0E0;
  --c-placeholder:    rgba(60, 18, 18, .4);
  --c-male:           #ABD1E8;
  --c-female:         #EA7576;
  --c-dark:           #3B3736;
  --c-title-blue:     #769BBC; /* 下層ページ見出し（デザイン修正 2026-08-20） */

  /* 上部グラデーション（下層ページ共通） */
  --g-pagetop:        linear-gradient(180deg, #F0F7FC 0%, #B6DBF4 100%);

  /* 横幅 */
  --wrap:   1330px; /* フッター */
  --cont:   1218px; /* 本文コンテンツ（実効 1170px） */
  --narrow:  970px; /* カード列・アクセス行（実効 922px） */
  --table:   878px; /* 表組 */
  --gutter:   24px;

  --header-h: 100px;

  /* ヒーローのモーション（TOP）。速度・タイミングの調整はここだけで全レイヤーに効く。
     Figma「動きの指示」(node 54:96) の記述に合わせた値。
       ・最初は背景とロゴのみ
       ・ぱぱぱっと 人 → 船 が順番に出てくる
       ・トップ表示の 2 秒後に光の筋が出る（光は人とロゴの後） */
  --hero-in-start:    0.30s;  /* 1 枚目（人）が出はじめるまで */
  --hero-in-gap:      0.4s;   /* 2 枚目以降を 1 枚ずつずらす幅（= 出てくるテンポ） */
  --hero-in-dur:      0.7s;   /* 1 枚あたりのフェードインの尺 */
  --hero-in-ease:     cubic-bezier(0.33, 1, 0.68, 1);  /* 減速しながら止まる出方（ease-out cubic） */
  --hero-in-rise:     6%;     /* 出るときに下から持ち上がる量（要素自身の高さ基準） */
  --hero-beam-delay:  2s;     /* 光が出始めるタイミング（指示どおり「2 秒後」） */
  --hero-beam-dur:    0.9s;   /* 光が上端から下端に届くまで */
  --hero-beam-opa:    0.8;    /* 光の濃さ。Figma の実測値（不透明度 80%） */

  /* 英字バッジ（About us / Work / Recruit / Access）のオレンジ部分の表示高さ。
     画像ごとに原寸も余白も違うので、幅ではなく高さを揃えて統一する */
  --badge-h: 31px;
}

/* --- reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               Meiryo, sans-serif;
  color: var(--c-text);
  background: #fff;
  line-height: 1.8;
}

img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

.wrap   { width: 100%; max-width: var(--wrap);   margin-inline: auto; padding-inline: var(--gutter); }
.cont   { width: 100%; max-width: var(--cont);   margin-inline: auto; padding-inline: var(--gutter); }
.narrow { width: 100%; max-width: var(--narrow); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 改行ユーティリティ -------------------------------------------- */
/* <br class="br-pc"> … PC だけで改行（SP は自動折り返し）
   <br class="br-sp"> … SP だけで改行（PC は自動折り返し）
   切り替えは SP 幅（max-width: 900px）のメディアクエリ側で行う。 */
br.br-sp { display: none; }

/* =============================================================
   ヘッダー
   ============================================================= */
.header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  background: #fff;
}

/* TOP のみ：白ベタを敷かず MV に重ねる。MV がヘッダー分だけ上に上がり、
   ファーストビューに MV 全体が収まる。
   SP はメニュー開閉パネルが MV と干渉するため従来どおり白ベタのまま */
@media (min-width: 901px) {
  .header--overlay {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
  }
}

.header__inner {
  display: flex;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 5.2vw, 75px) clamp(16px, 2.85vw, 41px);
}

.header__logo {
  margin-top: 10px;
}

.header__logo img { width: 273px; }

.gnav {
  margin-top: 10px;
  margin-left: auto;
  display: flex;
  gap: 35px;
}

.gnav__list {
  display: flex;
  align-items: center;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--c-nav-border);
  border-radius: 999px;
  background: #fff;
}

.gnav__list a {
  display: block;
  padding: 0 21px;
  font-size: 16px;
  line-height: 47px;
  color: var(--c-ink);
  transition: opacity .2s;
}
.gnav__list a:hover { opacity: .6; }

.gnav__contact { flex: none; }
.gnav__contact img { width: 84px; transition: transform .2s; }
.gnav__contact:hover img { transform: translateY(-2px); }
.gnav__contact-sp { display: none; }   /* SP メニュー用の角丸バナー */

/* ハンバーガー（狭幅時のみ） */
.navtoggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--c-nav-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.navtoggle__bar,
.navtoggle__bar::before,
.navtoggle__bar::after {
  display: block; width: 20px; height: 2px;
  background: var(--c-ink);
  transition: transform .25s, opacity .2s;
}
.navtoggle__bar { margin: 0 auto; position: relative; }
.navtoggle__bar::before,
.navtoggle__bar::after { content: ""; position: absolute; left: 0; }
.navtoggle__bar::before { top: -6px; }
.navtoggle__bar::after  { top: 6px; }
.navtoggle[aria-expanded="true"] .navtoggle__bar { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bar::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* =============================================================
   下層ページ共通：上部グラデーション + ヒーロー画像
   ============================================================= */
/* デザイン上（1440px）: 青帯 y=100〜555 / ヒーロー画像 y=148〜610。
   つまり画像は帯の上端から 48px 下に始まり、下端は帯より 55px（画像高の 11.9%）はみ出す。
   画像の高さは幅追従で伸縮するため、帯の高さも px 固定ではなく画像高に比例させる。
   （px 固定だと画像が縮む SP で帯だけが画像の下にはみ出す） */
.pagehead {
  --ph-top:    48px;            /* 帯の上端 〜 画像の上端 */
  --ph-bottom: 116px;           /* 画像の下端 〜 次セクション（余白多めに / 修正依頼 2026-08-20） */
  position: relative;
  padding: var(--ph-top) 0 var(--ph-bottom);
}
.pagehead::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  /* (100% - 上下padding) = ヒーロー画像の高さ。その 88.1% までを帯で覆う */
  height: calc(var(--ph-top) + (100% - var(--ph-top) - var(--ph-bottom)) * .881);
  background: var(--g-pagetop);
}
.pagehead__img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1170 / 463;
  object-fit: cover;
}

/* =============================================================
   TOP
   ============================================================= */
/* --- ヒーロー --- */
.hero { background: #EDF5FB; }

/* =============================================================
   ヒーロー モーション（TOP のみ / レイヤー分割）
   Figma「動きの指示」(node 54:96) の再現。動きは CSS の @keyframes と
   transform / clip-path のみ（ライブラリ不使用）。1 回きりで、ループしない。

   タイムライン（--hero-* の初期値の場合）
     0        〜        背景（back）とロゴ（hero-logo）だけ表示
     0.30s    〜 1.00s  人（men）がフェードしながら下から持ち上がって出る
     0.70s    〜 2.60s  以降 1 枚ずつ 0.4s 遅れで 船 → 工場 が続く
     2.00s    〜 2.90s  光の筋（beam）が上端から下端へ伸びる
     2.90s    〜        そのまま静止（Figma の 2 秒フレームの絵）
     ※ 光の出はじめ（2.00s）は Figma 指示の「2 秒後」固定なので、
       後半の 2 枚（クレーン群 / 工場 = 2.60s まで）と重なる

   ★ ロゴは「固定 拡大しない」指示なので一切動かさない（アニメを付けない）
   ★ 「船を横には動かさない」指示なので、出方は縦方向の持ち上がりのみ。
     translateY は要素自身の高さ基準の % なので、大きい絵ほど動きも大きくなる
   ★ 出る順番は HTML 側の --hero-step で決まる。値は Figma の赤入れ番号
     （1 = 人 / 2 = 大型クレーン船 / 3 = 小型船 / 4 = クレーン群 / 5 = 工場）そのまま。
     順番を変えたいときは HTML の数字だけ入れ替えればよい

   座標系: レイヤーの left / top / width / height は Figma 実寸 1440 x 922 基準の % 指定。
           重なり順は Figma のレイヤー順（奥 → 手前）をそのまま写している。
   ============================================================= */
.hero--motion {
  position: relative;
  overflow: hidden;
  background: #EDF5FB;
}

.hero__stage {
  position: relative;
  aspect-ratio: 1440 / 922;
}

/* 素材は <img> ではなく背景画像で置いている。SP ではステージごと display:none に
   するので、そのとき PC 用の素材（合計 1.5MB）は最初から取りに行かなくなる */
.hero__layer {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;   /* 枠は下で Figma 実寸どおりに切ってあるので歪まない */
}

/* 各パーツの配置とサイズ（Figma 実寸 1440 x 922 を % 換算） */
.hero__layer--back {
  inset: 0;
  background-image: url("../img/hero/back.png");
  background-size: cover;
}
/* 光の筋。素材が縦 922px = ステージの高さいっぱいなので height は 100% */
.hero__layer--beam   { left: 24.611%; top: 0;       width: 41.591%; height: 100%; }
/* 2.png 大型クレーン船 */
.hero__layer--crane  { left: 53.265%; top: 10.309%; width: 48.549%; height: 64.052%;
                       background-image: url("../img/hero/2.png"); }
/* 4.png 中央のクレーン群 */
.hero__layer--cranes { left: 16.703%; top: 25.994%; width: 27.743%; height: 36.601%;
                       background-image: url("../img/hero/4.png"); }
/* 5.png 左の工場・岸壁（左端は画面外にはみ出す） */
.hero__layer--yard   { left: -9.291%; top: 46.539%; width: 52.079%; height: 32.335%;
                       background-image: url("../img/hero/5.png"); }
/* mens.png 作業員 2 人 */
.hero__layer--men    { left: 36.527%; top: 21.214%; width: 25.979%; height: 55.532%;
                       background-image: url("../img/hero/mens.png"); }
/* 3.png 左の小型船 */
.hero__layer--boat   { left:  3.640%; top: 37.972%; width: 15.352%; height: 16.424%;
                       background-image: url("../img/hero/3.png"); }
/* hero-logo.png SM IRON（固定・拡大しないのでアニメを付けない） */
.hero__layer--logo   { left: 25.846%; top: 72.534%; width: 47.242%; height: 18.667%;
                       background-image: url("../img/hero/hero-logo.png"); }

/* 重なり順（奥 → 手前）。Figma のレイヤー順どおり */
.hero__layer--back   { z-index: 1; }
.hero__layer--beam   { z-index: 2; }
.hero__layer--crane  { z-index: 3; }
.hero__layer--cranes { z-index: 4; }
.hero__layer--yard   { z-index: 5; }
.hero__layer--men    { z-index: 6; }
.hero__layer--boat   { z-index: 7; }
.hero__layer--logo   { z-index: 8; }

/* --- ぱぱぱっと出てくる部分 ------------------------------------- */
/* 遅れの計算だけ共通化して、順番は HTML 側の --hero-step に持たせている。
   --hero-step は Figma の番号どおり 1 始まりなので、1 引いてから間隔を掛ける */
.hero__anim {
  animation: heroPopIn var(--hero-in-dur) var(--hero-in-ease)
             calc(var(--hero-in-start) + (var(--hero-step) - 1) * var(--hero-in-gap)) both;
  will-change: opacity, transform;
}
@keyframes heroPopIn {
  from { opacity: 0; transform: translateY(var(--hero-in-rise)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 光の筋 ------------------------------------------------------- */
/* 素材は assets/img/hero/hikari.png（原寸 600 x 922 = ステージの高さいっぱい）。
   上端 → 下端へ clip-path で切り出していくことで「伸びてくる」動きにしている。
   出きったあとは消さずにそのまま残す（Figma の 2 秒フレームが最終状態のため） */
.hero__layer--beam { opacity: var(--hero-beam-opa); pointer-events: none; }

.hero__beamwipe {
  position: absolute;
  inset: 0;
  display: block;
  background: url("../img/hero/hikari.png") no-repeat;
  background-size: 100% 100%;
  clip-path: inset(0 0 100% 0);
  animation: heroBeamWipe var(--hero-beam-dur) ease-out var(--hero-beam-delay) both;
}
@keyframes heroBeamWipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0    0); }
}

/* 画像が揃うまでは頭出しのまま待機（main.js が is-waiting を外す）。
   JS 無効時は待たずにそのまま再生される */
.hero--motion.is-waiting .hero__anim,
.hero--motion.is-waiting .hero__beamwipe { animation-play-state: paused; }

/* モーション無効設定を尊重: アニメは止め、最終状態（全部出ている絵）を静止表示 */
@media (prefers-reduced-motion: reduce) {
  .hero__anim,
  .hero__beamwipe { animation: none !important; }

  .hero__beamwipe { clip-path: none; }
}

/* --- SP は従来どおりデザイン画像 --------------------------------- */
/* PC 用レイヤーは表示枠ごと display:none にしてある（SP では出さない） */
.hero__sp { display: none; }

@media (max-width: 900px) {
  .hero__stage { display: none; }
  .hero__sp {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- About us --- */
.about {
  position: relative;
  background: #fff;
}
.about__media { width: 60.56%; }             /* 872 / 1440 */
.about__media img {
  display: block;
  width: 100%;
  aspect-ratio: 872 / 766;
  object-fit: cover;
}
.about__body {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 114px 7.85% 0 0;                  /* 右端を x=1327 に合わせる */
  text-align: right;
}
/* 以前の badge-about-us.png は上下に白フチ（上3px / 下2px）を含んでいたため
   62/57 倍する補正を入れていたが、2026-08-31 に差し替わった高解像度版
   （1022x245）はオレンジが天地いっぱいなので、補正なしで揃う */
.badge-about { width: auto; height: var(--badge-h); }

.about__title {
  margin-top: 52px;
  font-size: 28px;
  font-weight: 700;
  line-height: 53px;
  letter-spacing: .135em;
  color: var(--c-ink);
}
.about__lead {
  margin-top: 66px;
  margin-left: auto;
  max-width: 552px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: .04em;
  text-align: left;
  color: var(--c-ink);
}

/* --- 関門海峡セクション --- */
/* 背景写真はデザイン画像からの切り出しで、白のベタが焼き込まれた状態のもの。
   彩度・コントラストを戻して薄ベタに見える現象を軽減する（本来は元写真に差し替えたい）。
   filter を背景だけに掛けるため ::before に逃がす */
.kanmon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 75px 0 167px;
  background: #A8CDE8;
}
.kanmon::before {
  content: "";
  position: absolute;
  inset: -8px 0 0;      /* 元画像の最上端 1px に残る黒い切り出し跡を隠す */
  z-index: -1;
  background: url("../img/top-kanmon.jpg") center / cover no-repeat;
  filter: saturate(1.35) contrast(1.07);
}
.kanmon__title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .185em;
  color: #fff;
}

.cardlist {
  display: flex;
  justify-content: center;
  gap: 170px;
  margin-top: 66px;
}
/* Figma 実測：バッジ・見出しはカード左端から 55px、上端から 40px。
   アイコンは文字揃えに追随させず、カード幅の中央に置く */
.card {
  --card-pad: 14.6%;   /* 376px 幅のとき 55px */
  display: flex;
  flex-direction: column;
  width: 376px;
  min-height: 366px;
  padding: 40px 0 26px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transition: transform .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
/* .card は flex column のため、align-self を指定しないと
   width:auto のバッジが cross 軸いっぱいに引き伸ばされて画像が歪む */
.card__badge {
  align-self: flex-start;
  width: auto;
  height: var(--badge-h);
  margin-left: var(--card-pad);
}
.card__title {
  margin: 4px 0 0 var(--card-pad);
  padding-left: 1px;   /* 見出しの左端をバッジの左端に揃える */
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .17em;
  color: var(--c-ink);
}
/* 溶接工アイコンは黒の面積が左に寄っていて、幾何中心に置くと左寄りに見える。
   インクの重心がカード中央に近づくよう、見た目で少しだけ右へ寄せる
   （修正依頼 2026-08-20「見た目でセンターにくるように右に動かして欲しい」） */
.card__icon--welder { transform: translateX(5.7%); }

.card__icon {
  margin: auto auto 0;
  width: 100%;
  max-width: 315px;
}

/* --- 地図 / アクセス --- */
/* iframe は既定で display:inline のため、放置するとベースライン分の余白が
   地図の下に白帯として出る */
.map iframe {
  display: block;
  width: 100%;
  border: 0;
}
.access {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 53px 0 53px;
}
.access__badge { flex: none; width: auto; height: var(--badge-h); }
.access__text {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-ink);
}

/* =============================================================
   仕事内容
   ============================================================= */
.work-lead {
  margin: 48px auto 0;
  max-width: 1120px;
  padding-inline: var(--gutter);
  font-size: 17px;
  font-weight: 400;
  line-height: 37px;
  letter-spacing: .22em;
  text-align: center;
  color: var(--c-ink);
}

.biz {
  display: flex;
  gap: 62px;
  padding: 164px 0 0 43px;
}
.biz__photos {
  flex: none;
  width: 605px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px 7px;
}
.biz__photos img {
  width: 100%;
  aspect-ratio: 300 / 295;
  object-fit: cover;
}
.biz__body { flex: 1 1 auto; min-width: 0; margin-top: -8px; }
.badge-business { width: 170px; }
.biz__list { margin-top: 31px; }
.biz__list li {
  font-size: 17px;
  font-weight: 400;
  line-height: 45px;
  letter-spacing: .22em;
  color: var(--c-ink);
}

/* 工場紹介（全幅写真にリード文を重ねる）
   work-factory.jpg は上端 24.5% が抜けた空で、色は #70CCFB → #A3DCF7。
   旧デザインの青帯グラデーション（#70CCFC → #A1DCF6）と同じ色なので、
   帯を廃して空にそのまま白文字を重ねている（見た目は従来どおり）。
   24.5% より下は山の稜線と「第１工場 / 第２工場」の吹き出しが焼き込まれているため、
   文字は必ず空の中に収める。空の高さは画面幅に比例するので、
   文字サイズも px 固定ではなく vw 追従にしてある（1440px で 29px）。 */
.factory {
  position: relative;
  margin-top: 76px;
}
.factory__head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 24.5%;          /* 写真の空の部分 */
  /* grid にすると子が inline 方向にストレッチされるので、
     従来どおり max-width:1060px + margin:auto で組幅が決まる（flex だと縮んで右にずれる） */
  display: grid;
  align-content: center;
}
.factory__head p {
  /* grid の子は margin:auto を付けると縮んでしまうため、幅を明示してから中央寄せする */
  width: 100%;
  margin: 0 auto;
  max-width: 1060px;                 /* リード文と同じ組幅にして左端を揃える */
  padding: 0 var(--gutter);
  font-size: clamp(17px, 2.02vw, 29px);
  font-weight: 500;
  line-height: 1.86;                 /* 29px のとき 54px（デザイン実測値） */
  letter-spacing: .05em;
  color: #fff;
}
.factory__img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 現場対応 */
.onsite {
  display: flex;
  align-items: flex-start;
  gap: 62px;
  margin-top: 83px;
}
.onsite__media { flex: none; width: 54.38%; }  /* 783 / 1440 */
.onsite__media img {
  display: block;
  width: 100%;
  aspect-ratio: 783 / 555;
  object-fit: cover;
}
.onsite__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 140px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 45px;
  letter-spacing: .27em;
  color: var(--c-ink);
}

/* =============================================================
   会社概要 / 採用：見出し・表組
   ============================================================= */
.sect-title {
  font-size: 29px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: .1em;
  text-align: center;
  color: var(--c-ink);
}

/* 下層ページのヒーロー直下に置く大見出し（会社について / 会社概要 / 求人について） */
.page-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: .05em;
  text-align: center;
  color: var(--c-title-blue);
}

.spec {
  width: 100%;
  max-width: var(--table);
  margin: 51px auto 0;
  border-collapse: collapse;
  border: 1px solid var(--c-border-strong);
  table-layout: fixed;
}
/* 1 行のセル高さ（53px）は保ったまま、複数行セルの行間だけ詰める */
.spec th,
.spec td {
  padding: 10px 20px 10px 38px;
  border: 1px solid var(--c-border);
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .34em;
  text-align: left;
  vertical-align: top;
  color: var(--c-text);
}
.spec th { width: 201px; }
.spec td ul { padding-block: 0; }
.spec tr:nth-child(odd)  > * { background: var(--c-row-blue); }
.spec tr:nth-child(even) > * { background: var(--c-row-cream); }
.spec td ul li { line-height: 33px; }

.spec--company { margin-top: 110px; }
.spec--recruit { max-width: var(--table); }
.spec--recruit th { width: 258px; }

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 328px;
  height: 54px;
  border-radius: 10px;
  background: var(--c-dark);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .37em;
  text-indent: .37em;
  transition: opacity .2s;
}
.btn:hover { opacity: .82; }
.btn-center { display: flex; justify-content: center; }

/* =============================================================
   採用
   ============================================================= */
.recruit-lead {
  margin: 60px auto 0;
  max-width: 1080px;
  padding-inline: var(--gutter);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.77;
  letter-spacing: .057em;
  color: var(--c-ink);
}
.recruit-desc {
  margin: 57px auto 0;
  max-width: 1055px;
  padding-inline: var(--gutter);
  font-size: 17px;
  font-weight: 400;
  line-height: 37px;
  letter-spacing: .25em;
  color: var(--c-ink);
}
.recruit-photos {
  display: block;
  width: 100%;
  margin-top: 176px;
  aspect-ratio: 1440 / 479;
  object-fit: cover;
}

/* =============================================================
   エントリーフォーム
   ============================================================= */
.pageband {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 109px;
  background: url("../img/page-band.jpg") center / cover no-repeat;
}
.pageband h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.entry-note {
  margin: 50px auto 0;
  max-width: 944px;
  padding-inline: var(--gutter);
  font-size: 18px;
  line-height: 2.34;
  color: #000;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 45px;
  width: 100%;
  max-width: 937px;         /* 889 + gutter*2 */
  margin: 89px auto 0;
  padding-inline: var(--gutter);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field__label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #000;
}
.field__row { display: flex; gap: 22px; }
.field__row > * { flex: 1 1 0; min-width: 0; }
.field__row--zip { align-items: center; gap: 22px; }
.field__zipmark {
  flex: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #3C1212;
}
.field__zipmark + .control { flex: none; width: 281px; }

/* 入力欄 */
.control {
  width: 100%;
  height: 60px;
  padding: 0 22px;
  border: 1px solid var(--c-field-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 2px -1px rgba(0, 0, 0, .14);
  font-family: inherit;
  font-size: 20px;
  letter-spacing: .13em;
  color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
}
.control::placeholder { color: var(--c-placeholder); }
.control:focus {
  outline: none;
  border-color: #7FB6D6;
  box-shadow: 0 0 0 3px rgba(127, 182, 214, .25);
}
textarea.control {
  height: auto;
  padding: 18px 22px;
  line-height: 1.84;
  resize: vertical;
}
.control--h465 { min-height: 465px; }
.control--h294 { min-height: 294px; }

/* セレクト（年 / 月 / 日） */
.selects { display: flex; gap: 22px; }
.selectbox { position: relative; flex: none; width: 281px; }
.selectbox select {
  appearance: none;
  -webkit-appearance: none;
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;
}
.selectbox::after {
  content: "";
  position: absolute;
  top: 50%; right: 22px;
  width: 0; height: 0;
  margin-top: -4px;
  border: 10px solid transparent;
  border-top: 9px solid var(--c-text);
  pointer-events: none;
}

/* 選択式ボタン（性別 / 希望職種） */
.choices { display: flex; gap: 22px; }
.choice { flex: 1 1 0; min-width: 0; }
.choice input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 1px solid var(--c-field-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 2px -1px rgba(0, 0, 0, .14);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #3C1212;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.choice span:hover { border-color: #B9C6CD; }
.choice input:focus-visible + span { outline: 2px solid #7FB6D6; outline-offset: 2px; }
.choice input:checked + span { border-color: transparent; color: #fff; }
.choice--male   input:checked + span { background: var(--c-male); }
.choice--female input:checked + span { background: var(--c-female); }
.choice--dark   input:checked + span { background: var(--c-dark); }

/* 確認チェック */
.confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.confirm input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 25px; height: 25px;
  margin: 0;
  border: 2px solid #3C1212;
  border-radius: 1px;
  background: #fff;
  cursor: pointer;
}
.confirm input:checked {
  background: #3C1212;
  box-shadow: inset 0 0 0 3px #fff;
}
.confirm label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #000;
  cursor: pointer;
}

.submit {
  align-self: center;
  width: 433px;
  height: 60px;
  border: 0;
  border-radius: 10px;
  background: var(--c-dark);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .13em;
  cursor: pointer;
  transition: opacity .2s;
}
.submit:hover { opacity: .82; }

/* =============================================================
   フッター
   ============================================================= */
.footer {
  margin-top: 0;
  padding: 54px 0 65px;
  background: var(--c-footer-bg);
  color: var(--c-ink);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.footer__logo img { width: 348px; }
.footer__address {
  margin-top: 16px;
  padding-left: 55px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: .01em;
}
.footer__nav {
  margin-left: auto;
  display: flex;
  gap: 71px;
  padding-top: 8px;
}
.footer__nav a {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: opacity .2s;
}
.footer__nav a:hover { opacity: .65; }

/* =============================================================
   セクション余白ユーティリティ
   ============================================================= */
.mt-66  { margin-top: 66px; }
.mt-77  { margin-top: 77px; }
.mb-53  { margin-bottom: 53px; }
.mb-83  { margin-bottom: 83px; }
.mb-156 { margin-bottom: 156px; }
.mb-336 { margin-bottom: 336px; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 1280px) {
  .cardlist { gap: 80px; }
  .biz { padding-left: 0; gap: 40px; }
  .biz__photos { width: 52%; }
  .onsite { gap: 40px; }
  .onsite__body { padding-right: 24px; }
}

@media (max-width: 1024px) {
  .about__title { font-size: 24px; }
  .kanmon__title { font-size: 22px; letter-spacing: .14em; }
  .recruit-lead { font-size: 23px; }
  .access__text { font-size: 20px; }
  .footer__nav { gap: 36px; }
  .footer__nav a { font-size: 17px; }
  .footer__logo img { width: 280px; }
  .footer__address { padding-left: 44px; font-size: 15px; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .header__logo img { width: 210px; }
  .navtoggle { display: block; }
  .gnav {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: #fff;
    border-bottom: 1px solid var(--c-nav-border);
    box-shadow: 0 12px 20px rgba(0, 0, 0, .08);
    display: none;
  }
  .gnav.is-open { display: flex; }
  .gnav__list {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 0;
    border-radius: 12px;
  }
  .gnav__list a { padding: 12px 18px; line-height: 1.6; text-align: center; }

  /* お問合わせは丸バッジ → 角丸バナーに差し替え */
  .gnav__contact { align-self: stretch; margin-top: 20px; }
  .gnav__contact img.gnav__contact-pc { display: none; }
  .gnav__contact img.gnav__contact-sp {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  /* SP の About us（デザイン修正依頼 2026-08-31 / Figma node 62:31）
     全幅写真 + 左寄せ から、PC と同じ「写真を右上がりに切って、
     バッジと見出しを右に置く」構図へ変更。
     ・写真は幅 80%（右端の斜めは top-about.jpg に焼き込まれている）
     ・バッジは写真の右下に食い込ませる（下端を写真の下端に合わせる）
     ・本文だけは読みやすさ優先で左寄せのまま（ベース指定のまま） */
  .about { padding-top: 28px; }
  .about__media { width: 80%; }
  .about__media img { aspect-ratio: 16 / 9; }
  .about__body {
    position: static;
    margin-top: -30px;                       /* バッジの下端を写真の下端にそろえる */
    padding: 0 var(--gutter) 40px;
    text-align: right;
  }
  .about__lead { margin-left: 0; max-width: none; margin-top: 32px; }
  .about__title { margin-top: 30px; line-height: 2.1; }

  .kanmon { padding: 56px 0 64px; }
  .cardlist { flex-direction: column; align-items: center; gap: 28px; margin-top: 48px; }
  .card { width: 85%; max-width: 376px; }

  .access { flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px 0; }

  .biz { flex-direction: column; padding-top: 64px; gap: 48px; }
  .biz__photos { width: 100%; }
  .onsite { flex-direction: column; gap: 32px; }
  .onsite__media { width: 100%; }
  .onsite__body { padding: 0 var(--gutter); line-height: 2.2; }
  /* SP は写真の空（画像高の 24.5% = 12.93vw）が狭く、3〜4 行のリード文が収まらない。
     そこで写真の上に空を継ぎ足したうえで、写真のほうを文字の下へ潜り込ませ、
     PC と同じく「文字のすぐ下が工場」の見え方にする。
     継ぎ足す空は写真の上端と同色（#70CCFB）のベタなので継ぎ目は出ない。 */
  .factory {
    margin-top: 56px;
    background: #70CCFB;
  }
  .factory__head {
    position: relative;   /* 写真より前面に出す */
    z-index: 1;
    height: auto;
    display: block;
    padding: 40px 0 0;
    background: none;
  }
  /* 文字の下端が写真の空の下端（= 山の稜線・吹き出しの手前）に来るまで写真を引き上げる。
     空の高さ 12.93vw から余白 1.3vw を残した分だけ潜り込ませる */
  .factory__img { margin-top: -11.6vw; }
  .factory__head p { line-height: 1.7; }

  .spec, .spec--recruit { max-width: 100%; }
  .spec th, .spec td { padding: 12px 18px; line-height: 2.2; font-size: 15px; letter-spacing: .08em; }
  .spec th { width: 33%; }
  .spec td ul li { line-height: 2.2; }

  .field__row { flex-direction: column; }
  /* 〒 は郵便番号欄と同じ行に置く（縦積みにすると 〒 だけが浮く） */
  .field__row--zip { flex-direction: row; }
  .selects { flex-wrap: wrap; }
  .selectbox { flex: 1 1 140px; width: auto; }
  .field__zipmark + .control { width: auto; flex: 1 1 auto; }
  .submit { width: 100%; max-width: 433px; }

  .footer { padding: 40px 0 48px; }
  .footer__inner { flex-direction: column; gap: 28px; }
  .footer__nav { margin-left: 0; padding-top: 0; }
  .footer__address { padding-left: 0; }

  /* 帯の高さは calc で画像高に追従するので、上下の余白だけ詰める */
  .pagehead { --ph-top: 28px; --ph-bottom: 28px; }

  /* PC で広げた余白は SP では従来どおり詰める。
     見出しは修正依頼「下層ページ タイトル 22pt」に合わせ、
     ページ見出し（会社概要 / 求人について等）もセクション見出し（募集要項）も 22px に揃える */
  .page-title      { font-size: 22px; line-height: 1.5; }
  .sect-title      { font-size: 22px; line-height: 1.5; }
  .work-lead       { margin-top: 28px; line-height: 2; }
  .recruit-lead    { margin-top: 28px; }
  .recruit-desc    { margin-top: 32px; }
  .recruit-photos  { margin-top: 56px; }
  .spec--company   { margin-top: 32px; }

  /* 改行ユーティリティの切り替え（定義は reset 直後のユーティリティ節） */
  br.br-pc { display: none; }
  br.br-sp { display: inline; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .about__title  { font-size: 20px; letter-spacing: .08em; }
  /* 修正依頼（2026-08-31 / SP デザイン node 62:31）
     「文字とカードを小さく」。見出しは 3 行（1 行あたり 1 文につき 1 行）に
     収まるサイズまで落とす。17px だと 2 行目が折り返して 4 行になる */
  .kanmon__title { font-size: 15px; letter-spacing: .1em; line-height: 1.65; }
  /* カードは幅 85% → 63%（左右の余白を広げる）。
     幅を詰めた分、中身のバッジ・見出しと、余った下側の空きも合わせて縮める */
  .card { width: 63%; min-height: 0; }
  .card__badge { height: 22px; }
  .card__title { font-size: 16px; line-height: 24px; }
  /* アイコンは max-width: 315px を上限に width: 100% で置いているので、
     カードが 315px より狭くなる SP ではカード幅いっぱいまで広がってしまう。
     PC / タブレットと同じ比率（376px のカードに 315px = 83.8%）に戻す */
  .card__icon { max-width: 83.8%; }
  /* 修正依頼「本文は 15pt」。下層ページの本文はすべて 15px に揃える
     （事業内容リスト / 現場対応 / 表組はすでに 15px） */
  /* SP は 1 行あたりの文字数が少なく、中央寄せだと行頭が揃わず読みにくいので左寄せ
     （下の .recruit-lead と同じ扱い） */
  .work-lead     { font-size: 15px; line-height: 1.7; text-align: left; }
  .factory__head p { font-size: 15px; line-height: 1.6; }
  .recruit-lead  {
    font-size: 18px;
    line-height: 34px;
    text-align: left; }
  .recruit-desc  {
    font-size: 15px;
    margin-top: 26px;
    line-height: 34px;
  }
  .access__text  { font-size: 16px; }
  .biz__list li  { font-size: 15px; line-height: 2; }
  .onsite__body  { font-size: 15px; }

  .pageband { height: 84px; }
  .pageband h1 { font-size: 22px; }
  .entry-note { font-size: 15px; line-height: 2; margin-top: 40px; }
  .form { margin-top: 56px; gap: 32px; }
  .field__label, .confirm label, .field__zipmark { font-size: 17px; }
  .control, .selectbox select, .choice span, .submit { font-size: 16px; }

  .btn { width: 100%; max-width: 328px; }
  .footer__logo img { width: 230px; }
  .footer__nav { gap: 24px; flex-wrap: wrap; }
}

/* =============================================================
   カーソル追随（クレーン船）
   マウス環境でのみ main.js が DOM を差し込む。タッチ端末と
   prefers-reduced-motion: reduce では要素そのものが生成されない
   （＝ここのスタイルは一切効かない）ので、フォールバックは
   「何も起きない」= 通常のカーソルのまま。
   船の絵は Figma「メニューアイコン」(node 11:3) の実寸基準。
   viewBox は 42 5 390 244、船体の喫水線は y≈228。
   ============================================================= */
.shipcursor-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;   /* 画面外にはみ出した船でスクロールバーを出さない */
  pointer-events: none;
}

.shipcursor {
  --ship-w: 74px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ship-w);
  /* ポインタからの離し幅（右下方向）。0 にするとグラブバケットがポインタに重なる。
     船の大きさを変えてもここは追随しない固定値。
     当初 80px → 代表指示「少しカーソルに近づけて」で 50px に短縮 */
  --ship-gap-x: 50px;
  --ship-gap-y: 50px;
  /* まずグラブバケット（オレンジの爪）の中心をポインタ位置に合わせ、そこから上の
     離し幅だけずらす。係数は絵の実測: 横 16.25% / 縦 36.4%（= 高さ比 62.56% × 58.17%） */
  margin-left: calc(var(--ship-w) * -0.1625 + var(--ship-gap-x));
  margin-top:  calc(var(--ship-w) * -0.364  + var(--ship-gap-y));
  opacity: 0;
  transform: translate3d(var(--ship-x, 0px), var(--ship-y, 0px), 0);
  transition: opacity .4s ease;
  will-change: transform;
}

.shipcursor.is-visible { opacity: 1; }

/* 進行方向への傾き（JS が --ship-tilt を更新）と、常時のゆらぎを別レイヤーに分ける。
   どちらも喫水線あたりを軸にすると「水に浮いている」動きになる */
.shipcursor__tilt {
  transform: rotate(var(--ship-tilt, 0deg));
  transform-origin: 58% 91%;
  transition: transform .18s ease-out;
}

.shipcursor__bob {
  transform-origin: 58% 91%;
  animation: ship-bob 3.6s ease-in-out infinite;
}

.shipcursor__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* 白背景の下層ページでも輪郭が沈まないよう、ごく薄い影を敷く */
  filter: drop-shadow(0 1px 2px rgba(33, 24, 21, .18));
}

@keyframes ship-bob {
  0%, 100% { transform: translateY(0)     rotate(-1.1deg); }
  50%      { transform: translateY(-2.6%) rotate(1.1deg); }
}

/* --- 波（船底の水面線） --- */
.shipcursor__wave {
  fill: #ACDFFB;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ship-wave 2.8s ease-in-out infinite;
}

.shipcursor.is-moving .shipcursor__wave { animation-duration: 1.1s; }

@keyframes ship-wave {
  0%, 100% { transform: translateX(0)    scale(1, 1); }
  50%      { transform: translateX(-2px) scale(1.035, .86); }
}

/* --- しぶき --- */
/* 動いている間だけ表示。アニメ自体は常時定義しておき、静止中は
   play-state を paused にして止める（止まった瞬間にガクッと消えないよう
   フェードは親のグループでかける） */
.shipcursor__splashes {
  opacity: 0;
  transition: opacity .28s ease;
}

.shipcursor.is-moving .shipcursor__splashes { opacity: 1; }

.shipcursor__splash,
.shipcursor__drop {
  transform-box: fill-box;
  animation-play-state: paused;
}

.shipcursor.is-moving .shipcursor__splash,
.shipcursor.is-moving .shipcursor__drop { animation-play-state: running; }

.shipcursor__splash {
  fill: #7FC3DE;
  transform-origin: 50% 100%;
  /* both = 開始待ち(--d)の間も 0% の姿勢を保つ。無いと待機中だけ素の状態が見えてしまう */
  animation: ship-splash .62s ease-out var(--d, 0s) infinite normal both;
}

.shipcursor__drop {
  fill: #7FC3DE;
  transform-origin: 50% 50%;
  animation: ship-drop .62s ease-out var(--d, 0s) infinite normal both;
}

@keyframes ship-splash {
  0%   { opacity: 0;   transform: translateY(3px)  scale(.35); }
  25%  { opacity: .95; transform: translateY(0)    scale(1); }
  60%  { opacity: .7;  transform: translateY(-2px) scale(1.16); }
  100% { opacity: 0;   transform: translateY(-6px) scale(1.34); }
}

@keyframes ship-drop {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.3); }
  20%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(var(--dx, 0px), var(--dy, -14px)) scale(1); }
}

@media (max-width: 1200px) {
  .shipcursor { --ship-w: 60px; }
}