@charset "UTF-8";
/* =========================================================
   compat layer  —  旧 style.css からの引き継ぎ
   ---------------------------------------------------------
   style.css は新TOPのもの（FLOCSS / Sass ビルド成果物）に
   差し替わった。下層ページが旧 style.css に依存していた分を
   ここで補う。style.css 側は改変しない。
   読み込み順: style.css → parts.css（この順序が前提）

   ※ .l-section / .is-active は style.css と名前が衝突するが、
     parts.css が後から読まれるため下の定義が優先される。
   ========================================================= */

/* ---------- tokens（旧 style.css :root から移植） ---------- */
:root{
  --c-primary:#5394F5;
  --c-navy:#375897;
  --c-blue:#0966F0;
  --c-text:#231815;
  --c-gray:#D9D9D9;
  --c-bg:#F8F8F8;
  --c-bg-blue:#F2F7FF;
  --c-yellow:#FBDB13;
  --c-green:#8DB93F;
  --c-line:#E0E0E0;
  --f-jp:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"Karla",var(--f-jp);
  --f-num:"Poppins",var(--f-en);
  --f-script:"Parisienne",cursive;
  --inner:1200px;
  --gutter:20px;
}

/* ---------- base の復元 ----------
   新 reset は body{line-height:1} / img{width:100%} / button 未リセット。
   ヘッダー・フッターは新TOPの見た目のままにしたいので main 配下だけ戻す。 */
button{padding:0;border:0;background:none;font:inherit;cursor:pointer;color:inherit}

main{
  font-size:14px;
  line-height:1.8;
  font-family:var(--f-jp);
}
main img{width:auto}
main a{color:inherit;transition:opacity .3s}
main a:hover{opacity:.7}

/* ---------- レイアウト ---------- */
.l-inner{max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- コンポーネント（旧 style.css から移植） ---------- */
.c-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding-inline:18px;border-radius:50px;
  font-size:14px;font-weight:500;letter-spacing:.05em;white-space:nowrap;
}
.c-pill--yellow{background:var(--c-yellow);color:var(--c-text)}
.c-pill--green{background:var(--c-green);color:#fff}

.c-more{
  display:inline-flex;align-items:center;justify-content:space-between;
  width:160px;height:48px;padding:0 8px 0 24px;
  border:1px solid var(--c-gray);border-radius:40px;background:#fff;
  font-family:var(--f-en);font-size:14px;letter-spacing:-.05em;color:var(--c-primary);
}
.c-more i{
  width:40px;height:24px;border-radius:50px;background:var(--c-primary);
  background-image:url(../img/common/icon-arrow.svg);
  background-repeat:no-repeat;background-position:center;background-size:12px auto;
}

.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:272px;height:48px;margin-top:16px;
  border-radius:100px;background:var(--c-navy);color:#fff;
  font-size:14px;font-weight:500;letter-spacing:.05em;
}
.c-btn img{width:auto;height:17px}

.c-text{margin-top:8px;font-size:12.5px;line-height:2;letter-spacing:.05em}
.c-text--wh{color:#fff}

/* ---------- 全ページ共通 CTA（旧 style.css から移植） ---------- */
.p-contact__cards{display:grid;gap:16px;margin-top:24px}
.p-card{
  padding:24px 20px;border-top:3px solid var(--c-navy);border-radius:5px;
  background:#fff;text-align:center;
}
.p-card__title{font-size:15px;font-weight:500;line-height:1.5;letter-spacing:.08em}
.p-card__desc{margin-top:8px;font-size:11px;line-height:1.75;letter-spacing:.05em}
.p-card__tel{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.p-card__tel img{width:20px}
.p-card__tel a{
  font-family:var(--f-num);font-weight:500;font-size:24px;letter-spacing:.05em;color:var(--c-navy);
}

@media (min-width:768px){
  main{font-size:16px}
  .c-more{width:199px;height:50px;padding:0 10px 0 27px;font-size:16px}
  .c-more i{width:48px;height:29px;background-size:14px auto}
  .c-text{margin-top:24px;font-size:clamp(15px,1.15vw,18px);line-height:2}
  .p-contact__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,72px);margin-top:56px}
  .p-card{display:flex;flex-direction:column;align-items:center;padding:32px 24px}
  .p-card__title{font-size:clamp(17px,1.6vw,22px)}
  .p-card__desc{font-size:clamp(12px,1vw,14px)}
  .p-card__tel{margin-top:16px}
  .p-card__tel a{font-size:clamp(24px,2vw,28px)}
  .c-btn{margin-top:auto}
  .p-card .c-btn{margin-top:24px}
}
/* ===== compat layer ここまで ===== */

/* =========================================================
   伊藤鋳造鉄工所 下層パーツ集  parts.css
   style.css の後に読み込む（tokens / base / header / footer は style.css 側）
   Breakpoint: SP base / PC = min-width:768px
   Design: Figma「下層」2501:257 ＋「【編集用】SP下層 - 375」6471:2
   ========================================================= */

/* ---------- 下層で追加するトークン ---------- */
:root{
  /* 罫線・STEPバッジの緑。PC/SP 両方で使われている実測値。
     青に寄せたい場合はこの 1 行を var(--c-primary) に変えるだけでよい */
  --c-accent:#3F9137;
  --c-accent-weak:#C9D6C7;   /* STEP の接続線 */
  --c-rule:#D8D8D8;          /* 表の罫線 */
  --c-th-bg:#EDF4FF;         /* 表ヘッダー */
  --c-zebra:#FBFBFB;         /* 表の偶数行 */
  --c-wm:#F1F2F2;            /* 透かし文字 */
  --r-photo:10px;            /* 下層の写真角丸（トップは 8px） */
}

/* =========================================================
   セクション枠 — 背景色はクラスで指定する
   ========================================================= */
.l-section{padding:56px 0}
.l-section--gray{background:var(--c-bg)}
.l-section--blue{background:var(--c-bg-blue)}
.l-section--navy{background:var(--c-navy);color:#fff}
.l-section--flush{padding:0}
@media (min-width:768px){
  .l-section{padding:120px 0}
}

/* =========================================================
   下層 KV
   ========================================================= */
.p-lkv{position:relative;height:420px;overflow:hidden;background:#3A3A3A}
.p-lkv__media{position:absolute;inset:0}
.p-lkv__media img{width:100%;height:100%;object-fit:cover}
/* KV 画像の被写体が右寄りのとき（SP で中央トリミングすると切れるページ用）*/
.p-lkv__media--right img{object-position:70% center}
.p-lkv::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.p-lkv__inner{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  height:100%;max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
  padding:64px var(--gutter) 72px;
}
.p-lkv__title{
  color:#fff;font-size:26px;font-weight:500;line-height:1.6;letter-spacing:.05em;
  opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;
}
.p-lkv__crumb{
  margin-top:14px;color:#fff;font-size:11px;line-height:1.9;letter-spacing:.05em;
  opacity:0;transform:translateY(24px);transition:opacity .8s .15s ease,transform .8s .15s ease;
}
.p-lkv.is-shown .p-lkv__title,
.p-lkv.is-shown .p-lkv__crumb{opacity:1;transform:none}
.p-lkv__wm{
  position:absolute;left:0;right:0;bottom:20px;z-index:1;
  display:flex;overflow:hidden;pointer-events:none;user-select:none;
}
.p-lkv__wm span{
  flex:0 0 auto;padding-right:.25em;
  font-family:var(--f-en);font-weight:800;font-size:64px;line-height:50px;color:var(--c-wm);
  animation:lkv-marquee var(--lkv-duration,24s) linear infinite;
}
@keyframes lkv-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media (min-width:768px){
  .p-lkv{height:min(700px,72vh)}
  .p-lkv__inner{padding:87px var(--gutter) 140px}
  .p-lkv__title{font-size:clamp(28px,3vw,36px)}
  .p-lkv__crumb{margin-top:20px;font-size:14px;line-height:1.6}
  .p-lkv__wm{bottom:0}
  .p-lkv__wm span{font-size:clamp(80px,8.1vw,156px);line-height:.78}
}
@media (prefers-reduced-motion:reduce){
  .p-lkv__wm span{animation:none}
  .p-lkv__title,.p-lkv__crumb{opacity:1;transform:none;transition:none}
}

/* =========================================================
   見出しブロック
   ========================================================= */
.c-headblock__en{
  font-family:var(--f-en);font-weight:500;font-size:20px;line-height:1.8;
  letter-spacing:.05em;color:var(--c-primary);
}
.c-headblock__title{margin-top:4px;font-size:24px;font-weight:500;line-height:1.6;letter-spacing:.05em}
.c-headblock__line{width:50px;height:1px;margin:32px 0 0;border:0;background:var(--c-accent)}
.c-headblock__sub{margin-top:10px;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:.1em}
.c-headblock .c-text{margin-top:32px}
.c-headblock .c-more{margin-top:32px}
.c-headblock--center{text-align:center}
.c-headblock--center .c-headblock__line{margin-inline:auto}
.c-headblock--wh .c-headblock__title,
.c-headblock--wh .c-headblock__sub{color:#fff}

@media (min-width:768px){
  .c-headblock__en{font-size:clamp(24px,2.5vw,32px)}
  .c-headblock__title{margin-top:8px;font-size:clamp(32px,3.8vw,48px)}
  .c-headblock__line{margin-top:48px}
  .c-headblock__sub{margin-top:16px;font-size:clamp(24px,2.5vw,32px)}
  .c-headblock .c-text{margin-top:40px}
  .c-headblock .c-more{margin-top:48px}
}

/* =========================================================
   リスト
   ========================================================= */
.c-list{font-size:12.5px;line-height:1.9;letter-spacing:.05em}
.c-list > li{padding-left:1.6em;text-indent:-1.6em}
.c-list--dash > li::before{content:"-\00a0\00a0"}
.c-list--circle > li::before{content:"〇\00a0"}
.c-list--num{counter-reset:c-list-num}
.c-list--num > li{counter-increment:c-list-num}
.c-list--num > li::before{content:counter(c-list-num) "．"}
@media (min-width:768px){
  .c-list{font-size:16px;line-height:1.8}
}

/* =========================================================
   表組み  T-01 / T-02 / T-03
   SP は縦積み、PC は表。列が増えても崩れないようにする
   ========================================================= */
.c-tbl{width:100%;border-collapse:collapse}
.c-tbl th,.c-tbl td{text-align:left;font-weight:400}

/* --- T-01: 行区切りのみ / T-02: 見出し列にアクセント罫 --- */
.c-tbl--rows,.c-tbl--split{display:block}
.c-tbl--rows tbody,.c-tbl--split tbody,
.c-tbl--rows tr,.c-tbl--split tr{display:block}
.c-tbl--rows tr,.c-tbl--split tr{padding:8px 0;border-bottom:1px solid var(--c-rule)}
.c-tbl--rows tr:first-child,.c-tbl--split tr:first-child{border-top:1px solid var(--c-rule)}
.c-tbl--rows th,.c-tbl--rows td,
.c-tbl--split th,.c-tbl--split td{
  display:block;padding:4px 0;font-size:12px;line-height:1.65;letter-spacing:.02em;
}
.c-tbl--rows th,.c-tbl--split th{font-weight:700;color:var(--c-text)}
.c-tbl--rows td,.c-tbl--split td{color:#333}

/* --- T-03: 罫線グリッド。列が増えたら横スクロール --- */
.c-tbl--grid{min-width:560px}
.c-tbl--grid th,.c-tbl--grid td{
  padding:10px 12px;border:1px solid var(--c-rule);
  font-size:12px;line-height:1.65;letter-spacing:.02em;white-space:nowrap;
}
.c-tbl--grid thead th{background:var(--c-th-bg);font-weight:700}
.c-tbl--grid tbody tr:nth-child(even) td{background:var(--c-zebra)}

/* --- 表の上に置く小見出し（h2/h3 より下の階層用）--- */
.c-tbl__cap{margin:32px 0 10px;font-size:15px;font-weight:700;letter-spacing:.08em}

/* --- 横スクロールの入れ物（scroll-hint はこの要素に付く）--- */
.c-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.c-tbl-scroll::-webkit-scrollbar{height:6px}
.c-tbl-scroll::-webkit-scrollbar-thumb{border-radius:3px;background:var(--c-gray)}

@media (min-width:768px){
  .c-tbl--rows,.c-tbl--split{display:table}
  .c-tbl--rows tbody,.c-tbl--split tbody{display:table-row-group}
  .c-tbl--rows tr,.c-tbl--split tr{display:table-row;padding:0;border:0}
  .c-tbl--rows th,.c-tbl--rows td,
  .c-tbl--split th,.c-tbl--split td{
    display:table-cell;padding:18px 8px;border-bottom:1px solid var(--c-rule);
    font-size:18px;line-height:1.6;letter-spacing:.1em;vertical-align:top;font-weight:400;
  }
  .c-tbl--rows tr:first-child th,.c-tbl--rows tr:first-child td,
  .c-tbl--split tr:first-child th,.c-tbl--split tr:first-child td{border-top:1px solid var(--c-rule)}
  /* 字下げはビューポート幅に連動させる。126px 固定だとタブレット幅で
     見出し列の内容幅が 55px しか残らず、日付すら折り返してしまうため。
     1200px 以上では clamp の上限に張り付いて 126px（Figma 実測値）になる。 */
  /* 見出し列は幅だけ指定。左padding は th/td 共通の 8px に揃える（thead とも一致させる）*/
  .c-tbl--rows th,.c-tbl--split th{width:26%}
  .c-tbl--split th{border-bottom-color:var(--c-primary)}
  .c-tbl--split tr:first-child th{border-top-color:var(--c-primary)}
  .c-tbl__cap{margin-top:48px;font-size:18px}
  .c-tbl--grid{min-width:0}
  .c-tbl--grid th,.c-tbl--grid td{padding:16px 20px;font-size:14px;letter-spacing:0}
}

/* --- 列幅を内容にまかせる版 ---
   既定の .c-tbl--rows th は width:26% + padding-left:126px。
   HTML の width 属性はプレゼンテーション・ヒント（詳細度0）なので
   その CSS に必ず負け、さらに 126px の字下げで見出し列が膨らむ。
   このクラスは幅指定を外して字下げを詰め、ブラウザに内容から
   列幅を決めさせる（table-layout は既定の auto のまま）。
   1200px 未満では適用しない — それ以下は表の中身（約1130px）が
   コンテナに収まらず、どう配分しても折り返しは解消しないため。
   その場合は既定の見た目のままにしておく。 */
@media (min-width:1200px){
  .c-tbl--auto th{width:auto}
}

/* =========================================================
   View More — テキスト長に合わせて伸びる版
   （固定幅の .c-more は style.css 側。こちらは可変幅）
   ========================================================= */
.c-more--auto{width:auto;min-width:160px;gap:24px}
.c-more--auto span{white-space:nowrap}
.c-more:hover{opacity:1;border-color:var(--c-primary)}
.c-more i{transition:transform .3s}
.c-more:hover i{transform:translateX(4px)}
@media (min-width:768px){
  .c-more--auto{min-width:199px;gap:32px}
}

/* =========================================================
   画像＋テキスト（大）
   ========================================================= */
.c-media{background:var(--c-bg)}
.c-media + .c-media{margin-top:40px}
.c-media__photo{width:100%;aspect-ratio:375/220;object-fit:cover;display:block}
.c-media__body{padding:32px var(--gutter) 40px}
@media (min-width:768px){
  .c-media{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.79fr);align-items:center;
    max-width:1444px;margin-inline:auto;border-radius:var(--r-photo);overflow:hidden;
  }
  .c-media + .c-media{margin-top:72px}
  .c-media--rev{grid-template-columns:minmax(0,1.79fr) minmax(0,1fr)}
  .c-media--rev .c-media__photo{order:2}
  .c-media__photo{height:100%;aspect-ratio:auto;min-height:618px}
  .c-media__body{padding:clamp(40px,5vw,80px)}
}

/* =========================================================
   3カラムカード
   ========================================================= */
.c-cards{display:grid;gap:24px;padding-inline:var(--gutter)}
.c-card__photo{width:100%;aspect-ratio:335/200;object-fit:cover;border-radius:var(--r-photo);display:block}
.c-card__line{width:50px;height:1px;margin:24px 0 0;border:0;background:var(--c-accent)}
.c-card__title{margin-top:13px;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:.1em}
.c-card .c-text{margin-top:12px}
@media (min-width:768px){
  .c-card .c-text{margin-top:16px}
}
/* ロゴ・認定マークなど、切り抜かずに全体を見せる画像 */
.c-card__photo--contain{object-fit:contain;background:#fff;padding:20px}
/* 宣言文書などのスキャン画像（縦横比は原寸のまま） */
.c-doc{width:100%;aspect-ratio:3/4;object-fit:contain;display:block;border:1px solid var(--c-line);border-radius:var(--r-photo);background:#fff}
@media (min-width:768px){
  .c-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,8.8vw,128px) clamp(40px,6.6vw,96px);
    max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
  }
  .c-card__photo{aspect-ratio:368/220}
  .c-card__line{margin-top:40px}
  .c-card__title{margin-top:20px;font-size:24px}
}

/* =========================================================
   全幅交互（写真が画面端まで抜ける）
   ========================================================= */
.c-bleed--gray{background:var(--c-bg)}
.c-bleed__photo{width:100%;aspect-ratio:375/240;object-fit:cover;display:block}
.c-bleed__body{padding:40px var(--gutter) 48px}
@media (min-width:768px){
  .c-bleed{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
    gap:clamp(32px,5vw,80px);
  }
  .c-bleed__photo{aspect-ratio:887/490;height:100%;border-radius:0 var(--r-photo) var(--r-photo) 0}
  .c-bleed__body{
    padding:clamp(40px,5vw,80px) max(var(--gutter),calc(50% - var(--inner)/2)) clamp(40px,5vw,80px) 0;
  }
  .c-bleed--rev .c-bleed__photo{order:2;border-radius:var(--r-photo) 0 0 var(--r-photo)}
  .c-bleed--rev .c-bleed__body{
    padding-left:max(var(--gutter),calc(50% - var(--inner)/2));padding-right:0;
  }
}

/* =========================================================
   数値実績（カウントアップ）
   ========================================================= */
.c-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-inline:var(--gutter)}
.c-stat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px 10px 20px;background:#fff;border-radius:5px}
.c-stat__label{font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.05em;color:var(--c-primary)}
.c-stat__icon{display:flex;align-items:center;justify-content:center;height:48px;margin-top:6px}
.c-stat__icon img,.c-stat__icon svg{width:auto;height:100%}
.c-stat__figure{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-top:8px}
.c-stat__num{font-family:var(--f-en);font-size:30px;line-height:1;letter-spacing:0}
.c-stat__unit{font-size:11px;font-weight:500;line-height:1;letter-spacing:.05em}
.c-stat__pair{display:flex;align-items:flex-end;justify-content:center;gap:28px;margin-top:8px}
.c-stat__side{text-align:center}
.c-stat__sub{font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.05em}
.c-stat__side--f .c-stat__sub,
.c-stat__side--f .c-stat__num,
.c-stat__side--f .c-stat__unit{color:#F4354B}
.c-stats__updated{
  margin-top:16px;padding-inline:var(--gutter);text-align:right;
  font-size:10px;line-height:1.5;letter-spacing:.05em;color:var(--c-primary);
}
@media (min-width:768px){
  .c-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);
    max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
  }
  .c-stat{padding:24px 16px 28px}
  .c-stat__label{font-size:18px}
  .c-stat__icon{height:70px;margin-top:12px}
  .c-stat__num{font-size:clamp(36px,3.6vw,48px)}
  .c-stat__unit{font-size:16px}
  .c-stat__sub{font-size:14px}
  .c-stat__pair{gap:48px}
  .c-stats__updated{margin-top:24px;font-size:18px}
}

/* =========================================================
   STEP
   ========================================================= */
.c-steps{padding-inline:var(--gutter)}
.c-step{--step-photo-w:395px;position:relative;padding-bottom:32px;background:var(--c-bg)}
.c-step__badge{
  position:absolute;top:-32px;left:50%;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:var(--c-accent);color:#fff;
}
.c-step__badge em{font-style:normal;font-size:10px;line-height:1.6;letter-spacing:.05em}
.c-step__badge b{font-weight:400;font-size:22px;line-height:1.6;letter-spacing:.05em}
.c-step__photo{width:100%;aspect-ratio:335/200;object-fit:cover;border-radius:var(--r-photo);display:block}
.c-step__line{width:50px;height:1px;margin:24px 0 0 20px;border:0;background:var(--c-accent)}
.c-step__title{margin-top:13px;padding-inline:20px;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:.1em}
.c-step__body{margin-top:12px;padding-inline:20px}
/* 担当・関連の補足行（.c-step__body の中に置く。padding は __body 側が持つ）*/
.c-step__meta{margin-top:10px;font-size:12px;line-height:1.8;letter-spacing:.05em;color:#666}
.c-step__meta strong{font-weight:700;color:var(--c-text)}
.c-step + .c-step{margin-top:64px}
.c-step + .c-step::before{
  content:"";position:absolute;top:-64px;left:50%;width:1px;height:32px;background:var(--c-accent-weak);
}
@media (min-width:768px){
  .c-steps{max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;padding-left:71px}
  .c-step{
    display:grid;grid-template-columns:var(--step-photo-w) minmax(0,1fr);align-items:stretch;
    padding-bottom:0;border-radius:var(--r-photo);
  }
  .c-step__badge{top:50%;left:-51px;width:102px;height:102px;transform:translateY(-50%)}
  .c-step__badge em{font-size:16px}
  .c-step__badge b{font-size:36px}
  .c-step__photo{height:100%;aspect-ratio:auto;min-height:321px;border-radius:var(--r-photo) 0 0 var(--r-photo)}
  .c-step__text{display:flex;flex-direction:column;justify-content:center;padding:40px 0}
  .c-step__line{margin:0 0 0 44px}
  .c-step__title{margin-top:8px;padding-inline:44px}
  .c-step__body{padding-inline:44px}
  .c-step__meta{margin-top:14px;font-size:13px}
  .c-step + .c-step{margin-top:120px}
  .c-step + .c-step::before{top:-120px;left:calc(var(--step-photo-w) / 2);height:120px}
}

/* =========================================================
   製品事例（画像クリックでモーダル）
   ========================================================= */
.c-products{display:grid;gap:48px;padding-inline:var(--gutter)}
.c-product__btn{display:block;width:100%;border-radius:var(--r-photo);overflow:hidden;cursor:zoom-in}
.c-product__photo{width:100%;aspect-ratio:335/212;object-fit:cover;display:block;transition:transform .4s}
.c-product__btn:hover .c-product__photo{transform:scale(1.04)}
.c-spec{width:100%;margin-top:12px;border-collapse:collapse}
.c-spec th,.c-spec td{
  padding:6px 0;border-bottom:1px solid var(--c-gray);
  font-size:11px;line-height:1.65;letter-spacing:.02em;text-align:left;vertical-align:top;
}
.c-spec th{width:68px;font-weight:500;color:#1A1A1A}
.c-spec td{color:#333}
.c-spec tr:first-child th,.c-spec tr:first-child td{border-top:1px solid var(--c-gray)}
@media (min-width:768px){
  .c-products{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.4vw,29px);
    max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
  }
  .c-product__photo{aspect-ratio:380/240}
  .c-spec{margin-top:16px}
  .c-spec th,.c-spec td{padding:8px 0;font-size:16px;letter-spacing:.05em}
  .c-spec th{width:86px}
}

/* モーダル */
.c-modal{
  width:min(92vw,1100px);max-width:none;padding:0;border:0;border-radius:var(--r-photo);
  background:transparent;overflow:visible;
}
.c-modal::backdrop{background:rgba(0,0,0,.78)}
.c-modal img{width:100%;height:auto;border-radius:var(--r-photo);display:block}
.c-modal__close{
  position:absolute;top:-44px;right:0;
  width:36px;height:36px;border-radius:50%;background:#fff;color:var(--c-text);
  font-size:18px;line-height:1;
}
.c-modal__cap{margin-top:12px;color:#fff;font-size:12px;line-height:1.7;letter-spacing:.05em}
@media (min-width:768px){
  .c-modal__cap{font-size:16px}
}

/* =========================================================
   写真スライダー（中央大・両脇のぞき）
   ========================================================= */
.c-photoslider__track{
  display:flex;gap:16px;padding-inline:calc(50% - 92.5px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.c-photoslider__track::-webkit-scrollbar{display:none}
.c-photoslider__track li{flex:0 0 185px;scroll-snap-align:center}
.c-photoslider__track img{
  width:100%;aspect-ratio:185/150;object-fit:cover;border-radius:var(--r-photo);display:block;
  transform:scale(.82);transition:transform .4s;
}
.c-photoslider__track li.is-active img{transform:scale(1)}
@media (min-width:768px){
  .c-photoslider__track{gap:24px;padding-inline:calc(50% - 258px)}
  .c-photoslider__track li{flex:0 0 516px}
  .c-photoslider__track img{aspect-ratio:516/326}
}

/* =========================================================
   12カラムグリッド（交互配置）
   SP では写真が下に来る
   ========================================================= */
.l-cols{display:grid;gap:12px;padding-inline:var(--gutter)}
.l-cols + .l-cols{margin-top:32px}
.l-cols__text{display:flex;align-items:center;justify-content:center;min-height:120px;padding:24px}
.l-cols__img{border-radius:var(--r-photo);overflow:hidden}
.l-cols__img img{width:100%;aspect-ratio:335/160;object-fit:cover;display:block}
/* 縦位置の写真を入れる枠。SP でも強制的な横長トリミングをしない（人物が切れるため）*/
.l-cols__img--portrait img{aspect-ratio:auto}
@media (min-width:768px){
  .l-cols{
    grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,35px);
    max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;align-items:center;
  }
  .l-cols + .l-cols{margin-top:clamp(24px,2.2vw,32px)}
  .l-cols__text{min-height:0;padding:0}
  .l-cols__img img{aspect-ratio:auto;height:100%}
  .col-2{grid-column:span 2}
  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
  .col-7{grid-column:span 7}
  .col-8{grid-column:span 8}
  .col-9{grid-column:span 9}
  .col-10{grid-column:span 10}
  .col-12{grid-column:span 12}
  .l-cols--rev .l-cols__img{order:-1}
}

/* =========================================================
   汎用グリッド（2/3/4カラム・センター寄せ）
   ========================================================= */
.l-grid{display:grid;gap:8px;padding-inline:var(--gutter)}
@media (min-width:768px){
  .l-grid{gap:clamp(56px,8.8vw,128px) clamp(40px,6.6vw,96px);max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto}
  .l-grid--col2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l-grid--col3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .l-grid--col4{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 端数のときに中央寄せする */
  .l-grid--center{justify-content:center}
  .l-grid--center.l-grid--col2{grid-template-columns:repeat(2,minmax(0,564px))}
  .l-grid--center.l-grid--col3{grid-template-columns:repeat(3,minmax(0,368px))}
  .l-grid--center.l-grid--col4{grid-template-columns:repeat(4,minmax(0,264px))}
}

/* =========================================================
   パララックス
   ========================================================= */
.c-parallax{position:relative;height:280px;overflow:hidden;background:var(--c-gray)}
.c-parallax__media{position:absolute;inset:-15% 0;will-change:transform}
.c-parallax__media img{width:100%;height:100%;object-fit:cover}
.c-parallax__inner{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  height:100%;padding-inline:var(--gutter);color:#fff;text-align:center;
}
@media (min-width:768px){
  .c-parallax{height:clamp(360px,24vw,466px)}
}
@media (prefers-reduced-motion:reduce){
  .c-parallax__media{transform:none !important}
}

/* =========================================================
   上部固定の見出し切替
   ========================================================= */
.c-stickybar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;height:48px;
  border-bottom:1px solid var(--c-line);background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.c-stickybar__inner{
  display:flex;align-items:center;gap:12px;width:100%;
  max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter);
}
.c-stickybar__now{font-size:13px;font-weight:500;letter-spacing:.08em;transition:opacity .25s}
.c-stickybar__now.is-swapping{opacity:0}
@media (min-width:768px){
  .c-stickybar{height:64px}
  .c-stickybar__now{font-size:16px}
}

/* =========================================================
   グローバルナビ — 親子メニュー
   「当社について」「会社案内」は親自体をリンクにせず、子を開く
   SP: ドロワー内でアコーディオン / PC: ホバーでドロップダウン
   ========================================================= */
.l-nav__parent{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;color:#fff;font-size:16px;letter-spacing:.1em;text-align:left;
}
.l-nav__parent::after{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-bottom:3px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .3s;
}
.l-nav__item.is-open > .l-nav__parent::after{transform:rotate(-135deg);margin-bottom:-3px}
.l-nav__child{overflow:hidden;max-height:0;transition:max-height .35s ease}
.l-nav__item.is-open > .l-nav__child{max-height:340px}
.l-nav__child a{
  display:block;padding:9px 0 9px 16px;color:#fff;font-size:14px;letter-spacing:.06em;opacity:.85;
}

@media (min-width:768px){
  .l-nav__item{position:relative}
  .l-nav__parent{
    justify-content:flex-start;gap:6px;width:auto;
    font-size:clamp(13px,1.05vw,16px);white-space:nowrap;
  }
  .l-nav__parent::after{width:6px;height:6px;margin-bottom:2px}
  .l-nav__item.is-open > .l-nav__parent::after{margin-bottom:-2px}
  .l-nav__child{
    position:absolute;top:100%;left:50%;z-index:60;transform:translateX(-50%);
    min-width:240px;max-height:none;margin-top:12px;padding:8px 0;
    border-radius:8px;background:rgba(28,45,88,.97);
    visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;
  }
  /* ホバーが途切れないよう、親との隙間を埋める */
  .l-nav__child::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
  .l-nav__item:hover > .l-nav__child,
  .l-nav__item:focus-within > .l-nav__child,
  .l-nav__item.is-open > .l-nav__child{visibility:visible;opacity:1}
  .l-nav__child a{padding:9px 20px;font-size:14px;white-space:nowrap;opacity:1}
  .l-nav__child a:hover{opacity:1;background:rgba(255,255,255,.12)}
}

/* =========================================================
   表のヘッダー行
   SP では行見出し（th）が項目名を兼ねるので thead は隠す
   ========================================================= */
.c-tbl--rows thead,.c-tbl--split thead{display:none}
@media (min-width:768px){
  .c-tbl--rows thead,.c-tbl--split thead{display:table-header-group}
  .c-tbl--rows thead th,.c-tbl--split thead th{
    padding-left:8px;background:var(--c-th-bg);font-weight:700;text-align:left;
  }
  .c-tbl--rows thead td,.c-tbl--split thead td{background:var(--c-th-bg);font-weight:700}
}

/* =========================================================
   余白ユーティリティ（本文ページ組み立て用）
   ========================================================= */
.u-mt16{margin-top:16px}
.u-mt24{margin-top:24px}
.u-mt32{margin-top:32px}
.u-mt40{margin-top:40px}
@media (min-width:768px){
  .u-mt16{margin-top:24px}
  .u-mt24{margin-top:32px}
  .u-mt32{margin-top:48px}
  .u-mt40{margin-top:64px}
}

/* =========================================================
   お問い合わせフォーム（cform）
   表組みは .c-tbl--rows を流用し、入力要素だけここで定義する
   ========================================================= */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea{
  width:100%;padding:11px 14px;
  border:1px solid var(--c-gray);border-radius:6px;background:#fff;
  font-family:inherit;font-size:16px;line-height:1.6;color:var(--c-text);
  transition:border-color .15s,box-shadow .15s;
}
.c-form textarea{min-height:180px;resize:vertical}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{
  outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(83,148,245,.18);
}
.c-form__req{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:3px;
  background:#E50012;color:#fff;font-size:10px;font-weight:500;letter-spacing:.05em;vertical-align:2px;
}
.c-form__opt{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:3px;
  background:var(--c-gray);color:var(--c-text);font-size:10px;font-weight:500;letter-spacing:.05em;vertical-align:2px;
}
.c-form label.error,.c-form .error{
  display:block;margin-top:6px;color:#E50012;font-size:12px;line-height:1.6;
}
.c-form__note{margin-top:8px;font-size:12px;line-height:1.8;color:#666}

/* プライバシーポリシー枠 */
.c-form__policy{
  margin-top:32px;padding:20px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-bg);
}
.c-form__policy-body{
  max-height:220px;overflow-y:auto;padding-right:12px;
  font-size:12px;line-height:1.9;letter-spacing:.03em;
}
.c-form__policy-body h4{margin:16px 0 4px;font-size:13px;font-weight:700}
.c-form__policy-body h4:first-child{margin-top:0}
.c-form__policy-body::-webkit-scrollbar{width:8px}
.c-form__policy-body::-webkit-scrollbar-track{border-radius:4px;background:#EDEDED}
.c-form__policy-body::-webkit-scrollbar-thumb{border-radius:4px;background:var(--c-gray)}

/* 同意チェック */
.c-form__agree{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:32px;text-align:center;
}
.c-form__agree input[type="checkbox"]{width:20px;height:20px;accent-color:var(--c-primary)}
.c-form__agree label{font-size:14px;letter-spacing:.05em}

/* 送信ボタン */
.c-form__submit{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.c-form__submit input[type="button"],
.c-form__submit input[type="submit"]{
  min-width:240px;height:56px;padding-inline:24px;border:0;border-radius:100px;
  background:var(--c-navy);color:#fff;
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:.08em;cursor:pointer;
  transition:opacity .3s;
}
.c-form__submit input[type="button"]:hover{opacity:.8}
.c-form__submit .is-back{background:#fff;border:1px solid var(--c-gray);color:var(--c-text)}

@media (min-width:768px){
  .c-form textarea{min-height:220px}
  .c-form__policy{padding:32px}
  .c-form__policy-body{max-height:280px;font-size:13px}
  .c-form__agree label{font-size:16px}
}

/* =========================================================
   福利厚生カード（c-benefit）
   アイコン＋分類名＋項目リストのカード。項目数が多い制度一覧を
   テーマごとに区切って見せる用途。
   ※ 背景は var(--c-bg) なので必ず「白いセクション」に置くこと
     （l-section--gray の上だと .c-step と同じく背景と同化する）
   ========================================================= */
.c-benefits{display:grid;gap:16px;padding-inline:var(--gutter)}
.c-benefit{
  display:flex;flex-direction:column;
  padding:24px 20px 26px;
  border-radius:var(--r-photo);
  background:var(--c-bg);
}
.c-benefit__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.c-benefit__icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:54px;height:54px;border-radius:50%;background:#fff;
}
.c-benefit__icon svg{width:28px;height:28px}
.c-benefit__no{font-family:var(--f-en);font-size:24px;line-height:1;color:rgba(83,148,245,.4)}
.c-benefit__title{
  margin-top:16px;padding-bottom:14px;border-bottom:1px solid var(--c-line);
  font-size:17px;font-weight:700;line-height:1.5;letter-spacing:.08em;
}
.c-benefit__list{margin-top:14px;font-size:13px;line-height:1.95;letter-spacing:.04em}
.c-benefit__list > li{padding-left:1.1em;text-indent:-1.1em}
.c-benefit__list > li::before{content:"—\00a0";color:var(--c-primary)}

@media (min-width:768px){
  .c-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(16px,2.2vw,32px);
    max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
  }
  .c-benefit{padding:32px 28px 34px}
  .c-benefit__icon{width:62px;height:62px}
  .c-benefit__icon svg{width:32px;height:32px}
  .c-benefit__no{font-size:30px}
  .c-benefit__title{margin-top:20px;padding-bottom:18px;font-size:clamp(17px,1.55vw,20px)}
  .c-benefit__list{margin-top:18px;font-size:14.5px;line-height:2}
}

/* =========================================================
   選考フロー（c-flow）
   写真を持たない手続きのステップ用。アイコン＋番号＋見出し＋本文。
   写真前提の .c-step（PC で395pxの写真列）とは別物なので混同しないこと。
   ========================================================= */
.c-flow{
  display:grid;gap:44px;
  padding-inline:var(--gutter);
  max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
}
.c-flow__item{position:relative;text-align:center}
.c-flow__icon{
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;margin-inline:auto;
  border-radius:50%;background:rgba(83,148,245,.1);
}
.c-flow__icon svg{width:40px;height:40px}
.c-flow__num{
  margin-top:16px;
  font-family:var(--f-en);font-size:13px;letter-spacing:.12em;color:var(--c-primary);
}
.c-flow__title{margin-top:6px;font-size:17px;font-weight:700;line-height:1.5;letter-spacing:.08em}
.c-flow__text{margin-top:10px;font-size:13px;line-height:1.95;letter-spacing:.04em;color:#333}

/* つなぎの矢印。SP は下向き、PC は右向き */
.c-flow__item + .c-flow__item::before{
  content:"";position:absolute;z-index:1;
  width:11px;height:11px;
  border-top:2px solid var(--c-accent-weak);
  border-right:2px solid var(--c-accent-weak);
  top:-28px;left:50%;transform:translateX(-50%) rotate(135deg);
}

@media (min-width:768px){
  .c-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
  .c-flow__icon{width:104px;height:104px}
  .c-flow__icon svg{width:50px;height:50px}
  .c-flow__num{margin-top:20px;font-size:15px}
  .c-flow__title{margin-top:8px;font-size:20px}
  .c-flow__text{margin-top:14px;font-size:14px;line-height:2}
  .c-flow__item + .c-flow__item::before{
    top:52px;left:calc(-1 * clamp(24px,3.4vw,48px) / 2);
    transform:translate(-50%,-50%) rotate(45deg);
  }
}
@media (prefers-reduced-motion:reduce){
  .c-flow__item{transition:none}
}

/* =========================================================
   強調表示（c-emph）
   表組みや本文の中で「ここだけは読ませたい」1行に使う。
   ========================================================= */
.c-emph{
  display:inline-block;
  padding:9px 16px;
  border-left:4px solid var(--c-primary);
  border-radius:0 6px 6px 0;
  background:rgba(83,148,245,.1);
  font-weight:700;letter-spacing:.06em;color:var(--c-navy);
}
@media (min-width:768px){
  .c-emph{padding:12px 22px}
}

/* =========================================================
   サイトマップ（c-sitemap）
   カテゴリ見出し＋リンクの縦並び。カテゴリを段組みで並べる。
   ========================================================= */
.c-sitemap{
  display:grid;gap:36px;
  padding-inline:var(--gutter);
  max-width:calc(var(--inner) + var(--gutter)*2);margin-inline:auto;
}
.c-sitemap__cat{
  padding-bottom:12px;
  border-bottom:2px solid var(--c-navy);
  font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.08em;
}
.c-sitemap__list{margin-top:8px}
.c-sitemap__list > li + li{border-top:1px solid var(--c-line)}
.c-sitemap__list a{
  display:block;position:relative;
  padding:13px 8px 13px 20px;
  font-size:14px;line-height:1.6;letter-spacing:.04em;
  transition:color .2s;
}
.c-sitemap__list a::before{
  content:"";position:absolute;left:4px;top:50%;
  width:6px;height:6px;
  border-top:2px solid var(--c-primary);
  border-right:2px solid var(--c-primary);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .2s;
}
.c-sitemap__list a:hover{color:var(--c-primary);opacity:1}
.c-sitemap__list a:hover::before{transform:translateY(-50%) translateX(3px) rotate(45deg)}

@media (min-width:768px){
  .c-sitemap{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(48px,5.5vw,72px) clamp(40px,6.6vw,96px);
  }
  .c-sitemap__cat{padding-bottom:16px;font-size:19px}
  .c-sitemap__list a{padding:16px 8px 16px 24px;font-size:15px}
  .c-sitemap__list a::before{left:6px;width:7px;height:7px}
}

/* =========================================================
   お知らせ一覧の行（c-sitemap__list の中で使う）
   日付と本文を横並びにする。WP のアーカイブ用。
   ========================================================= */
.c-news__date{
  display:block;
  font-family:var(--f-en);font-size:13px;letter-spacing:.08em;color:var(--c-primary);
}
.c-news__title{display:block;margin-top:4px}
@media (min-width:768px){
  .c-news__date{display:inline-block;width:110px;font-size:14px;vertical-align:top}
  .c-news__title{display:inline-block;margin-top:0;width:calc(100% - 120px)}
}