/* ============================================================
   リデザイン層（style.css の後に読み込んで上書きする）

   Design read:
     福井の高校生・大学生に向けた採用LP。既存のフクタカ紺を土台に、
     工業製品らしい「直線・硬質・活版的」な言語へ寄せる。
   Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 5
   ============================================================ */

:root{
  --c-paper: #F7F7F4;      /* 純白は硬いので温度のある紙色に */
  --c-paper-2: #EDEEE9;
  --shadow-1: 0 1px 2px rgba(30,47,107,.07);
  --shadow-2: 0 14px 34px -16px rgba(30,47,107,.28);
  --z-base: 1; --z-sticky: 40; --z-header: 50; --z-modal: 60;
  --rule: 1px solid #d7dae0;
}

/* ---------- 面 ---------- */
body{ background:var(--c-paper); }
.section{ background:transparent; }
.section--tint{ background:var(--c-paper-2); }

/* 平面すぎる紙面に極薄のグレインを敷く（固定・イベント透過でGPU負荷を出さない） */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-modal); pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- 形の統一：角丸を全廃（工業製品の直線に寄せる） ---------- */
.job,.interview,.contact__box,.igsec__feed,.btn,.stat,.flow__item,.facts__item,
.skilltag li,.hero__hooks li,.day__card,.salarycard,.cpop__box,.gallery__item,
.tabs__btn,.day__more,.igsec__btn,.faq__item{ border-radius:0; }

/* ---------- タイポグラフィ ---------- */
.section__title,.hero__title,.stephead__title,.igsec__title,.contact__title,.dayhead__title{
  letter-spacing:-.03em; text-wrap:balance;
}
.section__title{ font-size:32px; line-height:1.25; }
.section__sub,.lead-text,.job__desc,.day__text p,.interview .qa dd{ text-wrap:pretty; }
.section__sub{ font-weight:450; color:#59626f; font-size:14.5px; }
/* 数字は等幅。桁が動くと工業製品の精度感が崩れる */
.stat__num,.day__time,.flow__item span,.spec dd,.steps5__label{ font-variant-numeric:tabular-nums; }
.stat__label,.facts__label,.note{ font-weight:500; }

/* ---------- セクション見出し ----------
   「01 ABOUT」の通し番号ラベルはAIが作る全セクション同型の癖なので廃止。
   代わりに背面にあった英字を前面へ出し、輪郭線の見出しとして使う。 */
.section__label{ display:none; }
.section__bg{
  position:static; display:block; margin:0 0 6px -2px;
  font-size:clamp(34px,10.5vw,50px); line-height:.92; letter-spacing:-.045em;
  color:transparent; -webkit-text-stroke:1px var(--c-accent);
  opacity:.55; white-space:nowrap;
}
.section--tint .section__bg{ opacity:.6; }
.section__head{
  text-align:left; border-top:3px solid var(--c-blue);
  padding-top:18px; padding-bottom:20px; border-bottom:var(--rule);
}

/* ---------- 数字で見るフクタカ：等分6マスをやめ、主役を作る ---------- */
.stats{ background:#c9ced8; border:0; border-top:1px solid #c9ced8; border-left:1px solid #c9ced8; }
.stat{ background:var(--c-paper); padding:22px 12px; }
/* 学生が最初に見る「従業員数」と「年間休日」だけ反転させて主役にする。
   マスをまたがせると 6 項目では必ず空きマスが出るので、枠内で差をつける。 */
.stats .stat:nth-child(2),.stats .stat:nth-child(5){ background:var(--c-blue); }
.stats .stat:nth-child(2) .stat__num,
.stats .stat:nth-child(5) .stat__num{ color:#fff; font-size:40px; letter-spacing:-.03em; }
.stats .stat:nth-child(2) .stat__label,
.stats .stat:nth-child(5) .stat__label{ color:rgba(255,255,255,.8); }

/* ---------- 職場の雰囲気の3項目：枠を外して罫線だけに ---------- */
.facts{ background:none; border:0; border-top:var(--rule); border-bottom:var(--rule); }
.facts__item{ background:none; border-right:var(--rule); padding:20px 6px; }
.facts__item:last-child{ border-right:0; }

/* ---------- 仕事内容：同型カード4連をやめ、1枚目を主役にする ---------- */
.job{ background:#fff; border:0; box-shadow:var(--shadow-1); }
.jobs .job:first-child{ box-shadow:var(--shadow-2); }
.jobs .job:first-child .job__title{ font-size:21px; }
/* 2枚目以降は左に正方サムネを置いた行型に */
.jobs .job:not(:first-child){ display:grid; grid-template-columns:104px 1fr; column-gap:14px; }
.jobs .job:not(:first-child) .job__img{ grid-row:1 / span 2; aspect-ratio:auto; align-self:stretch; }
.jobs .job:not(:first-child) .job__title{ margin:14px 14px 0 0; font-size:16px; }
.jobs .job:not(:first-child) .job__desc{ margin:6px 14px 14px 0; }
.job__title{ border-left-width:3px; }

/* ---------- 選考の流れ：等分の箱をやめ、番号の階段に ---------- */
.flow{ grid-template-columns:1fr; gap:0; }
.flow__item{
  background:none; border:0; border-bottom:var(--rule);
  display:grid; grid-template-columns:56px 1fr; align-items:center;
  text-align:left; padding:16px 2px;
}
.flow__item:last-child{ border-bottom:0; }
.flow__item span{
  font-size:30px; font-weight:700; color:var(--c-accent);
  font-family:var(--ff-cond); line-height:1;
}
.flow__item p{ font-size:15px; font-weight:700; color:var(--c-blue); }
.flow__item br{ display:none; }

/* ---------- インタビュー：左右のリズムをつける ---------- */
.interview{ background:#fff; border:0; box-shadow:var(--shadow-2); }
.interviews .interview:nth-child(even) .interview__photo img{ object-position:70% 40%; }

/* ---------- 操作の手応え ---------- */
.btn,.faq__q,.tabs__btn,.day__more,.igsec__btn,.gallery__link,.cpop__link,.salarycard{
  transition:transform .18s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active,.igsec__btn:active,.day__more:active,.cpop__link:active,.salarycard:active{
  transform:translateY(1px) scale(.995);
}
.btn--line:hover,.btn--primary:hover{ box-shadow:0 6px 18px -8px rgba(6,199,85,.65); }
a:focus-visible,button:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

/* ---------- 重なり順を段階値で管理（9999のような場当たり値を排除） ---------- */
.header{ z-index:var(--z-header); }
.fixed-cta{ z-index:var(--z-sticky); }
.cpop{ z-index:var(--z-modal); }

/* ---------- 動き ----------
   目的は「新しい章に入った」ことを示すことだけ。装飾の動きは足さない。
   スクロール駆動アニメーション対応ブラウザのみ、見出しの罫線が引かれる。 */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .section__head{ animation:ruleIn linear both; animation-timeline:view(); animation-range:entry 10% entry 55%; }
    @keyframes ruleIn{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
  }
}

/* プレビュー識別バッジ */
.v2badge{
  position:fixed; left:0; top:0; z-index:var(--z-modal);
  background:#C97B3D; color:#fff; font-size:10px; font-weight:700;
  padding:3px 10px; letter-spacing:.06em;
}

/* ---------- ファーストビューの補足（不安の除去は1回だけ言う） ---------- */
.hero__note{
  margin-top:12px; font-size:12px; line-height:1.7;
  color:rgba(255,255,255,.82); text-align:center;
}

/* ---------- 参加特典（ポップアップをやめて常設に） ----------
   注目度が最も高い「働く環境」の直後に置く。 */
.giftcta{ display:block; margin:30px 0 6px; }
.giftcta__img{ display:block; width:100%; height:auto; border:1px solid var(--c-line); }

/* ============ 工場見学 申込フォーム ============ */
.apply{ background:#fff; }
/* 見出しの直後に特典が来るので、このセクションだけ間隔を詰める */
.apply .section__head{ margin-bottom:var(--sp-s); }
.apply .agift{ margin-top:0; }

/* 見学特典の説明 */
.agift{ margin-top:var(--sp-s); padding:16px 18px; background:var(--c-paper); border-left:3px solid var(--c-accent); }
.agift__lead{ font-size:15px; font-weight:700; line-height:1.7; color:var(--c-ink); }
.agift__lead b{ color:var(--c-accent); }
.agift__note{ margin-top:8px; }
.agift__note li{ position:relative; padding-left:1.1em; font-size:12.5px; line-height:1.8; color:var(--c-ink-2); }
.agift__note li + li{ margin-top:6px; }
.agift__note li::before{ content:"※"; position:absolute; left:0; }
.aform{ margin-top:var(--sp-m); }
.aform__row{ margin-bottom:20px; }
.aform__label{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:14px; font-weight:700; color:var(--c-blue);
}
.aform__req,.aform__opt{
  font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:3px 6px; line-height:1;
}
.aform__req{ background:var(--c-accent); color:#fff; }
.aform__opt{ background:var(--c-line); color:var(--c-ink-2); }
.aform__input{
  width:100%; padding:14px 14px; font-family:inherit; font-size:16px; /* 16px未満はiOSで拡大される */
  color:var(--c-ink); background:#fff; border:1px solid #c3cad6; border-radius:0;
  transition:border-color .2s, box-shadow .2s;
}
.aform__input:focus{
  outline:none; border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(44,143,214,.18);
}
.aform__input--area{ resize:vertical; line-height:1.7; }
select.aform__input{ appearance:auto; }
/* 学年の3択。ラジオを隠してラベルをボタンに見せる */
.aform__choice{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.aform__choice label{ position:relative; display:block; cursor:pointer; }
.aform__choice input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.aform__choice span{
  display:flex; align-items:center; justify-content:center; min-height:52px;
  font-size:15px; font-weight:700; color:var(--c-ink);
  background:#fff; border:1px solid #c3cad6; transition:.2s;
}
.aform__choice input:checked + span{
  background:var(--c-blue); border-color:var(--c-blue); color:#fff;
}
.aform__choice input:focus-visible + span{ box-shadow:0 0 0 3px rgba(44,143,214,.18); }
.aform__help{ margin-top:6px; font-size:12px; color:var(--c-ink-2); }
.aform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aform__agree{ display:flex; gap:10px; align-items:flex-start; margin:24px 0 18px; }
.aform__agree input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--c-accent); }
.aform__agree span{ font-size:12.5px; line-height:1.75; color:var(--c-ink); }
.aform__agree a{ color:var(--c-accent); text-decoration:underline; }

.aform__error{
  margin-bottom:14px; padding:12px 14px; font-size:13px; font-weight:700;
  color:#a3232b; background:#fdecec; border-left:3px solid #a3232b;
}
.aform__submit{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:18px 20px; font-family:inherit; font-size:16px; font-weight:900;
  color:#fff; background:var(--c-blue); border:0; border-radius:0; cursor:pointer;
  transition:background .2s, transform .15s;
}
.aform__submit:hover{ background:#16224c; }
.aform__submit:active{ transform:translateY(1px); }
.aform__submit[disabled]{ opacity:.6; cursor:default; }
.aform__arrow{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; background:var(--c-accent); color:#fff; font-size:15px;
}
.aform__note{ margin-top:14px; font-size:12.5px; color:var(--c-ink-2); text-align:center; }

/* 送信完了 */
.athanks{ margin-top:var(--sp-m); text-align:center; }
.athanks__ic{
  width:56px; height:56px; margin:0 auto 18px; line-height:56px;
  font-size:28px; color:#fff; background:var(--c-accent);
}
.athanks__title{ font-size:22px; font-weight:900; color:var(--c-blue); letter-spacing:-.02em; }
.athanks__lead{ margin-top:12px; font-size:14px; line-height:1.9; color:var(--c-ink); }
.athanks__line{ margin-top:28px; padding-top:24px; border-top:1px solid var(--c-line); }
.athanks__linelead{ margin-bottom:14px; font-size:13.5px; line-height:1.8; color:var(--c-ink); }
.athanks .btn--line{ width:100%; }


/* 追従CTA：フォームへ送るときは青。緑はLINE専用にする */
.fixed-cta--form{ background:var(--c-blue); }

/* ============ LINEで届くイベント（最終CTAの直前） ============ */
.events{ margin:var(--sp-l) 0 var(--sp-m); }
.events__head{
  font-size:17px; font-weight:900; color:#fff; text-align:center;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.28);
}
.event{ margin-top:26px; }
.event__pics{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; }
.event__pics img{ display:block; width:100%; height:auto; }
.event__when{
  font-family:var(--ff-en); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--c-accent-2);
}
.event__title{ margin-top:6px; font-size:17px; font-weight:900; line-height:1.5; color:#fff; }
.event__desc{ margin-top:8px; font-size:13.5px; line-height:1.85; color:rgba(255,255,255,.85); }
.events__note{
  margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.28);
  font-size:13.5px; line-height:1.8; color:#fff; text-align:center; font-weight:700;
}

/* 地域での活動：独立セクション化して、人が残っている前半に置く */
.evsec{ background:var(--c-blue); padding-block:var(--sp-l); }
.evsec .events{ margin:0; }
.events__cta{ width:100%; margin-top:16px; }