@charset "UTF-8";

/* =========================================================
   フクタカ 新卒採用LP  /  SPファースト（PCでもSP表示固定）
   デザイン：ササキ採用サイト風
   ディープブルー × ビビッドレッド／太ゴシック＋Roboto Condensed
   巨大背景英字・セクション番号・斜めアクセントで「格好よく」
   ========================================================= */

:root{
  --c-bg: #FFFFFF;
  --c-blue: #1E2F6B;       /* ブランドブルー（主役・濃紺寄りで上品に） */
  --c-blue2: #2C4198;      /* 中間ブルー（タグ等） */
  --c-blue-d: #16224c;     /* 濃いブルー（フッター等） */
  --c-accent: #2C8FD6;     /* アクセント：明るいスチールブルー（旧・赤の置き換え） */
  --c-accent-2: #5FB3E6;   /* 明アクセント（ライン演出など） */
  --c-tint: #EAF0F8;       /* ライトブルー面 */
  --c-ink: #1c2330;        /* 本文 */
  --c-ink-2: #79879a;      /* 補助グレー */
  --c-line: #dde2ec;       /* 罫線 */

  --maxw: 430px;           /* PCでもSP幅を固定（モバイル1カラム） */
  --gut: 26px;
  --sp-xs: 8px; --sp-s: 16px; --sp-m: 28px; --sp-l: 48px; --sp-xl: 84px;
  --radius: 2px;
  --ff-jp: "Noto Sans JP", system-ui, sans-serif;
  --ff-en: "Roboto", var(--ff-jp);
  --ff-cond: "Roboto Condensed", "Roboto", var(--ff-jp);
}

/* ---- リセット ---- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:#dfe3ea; }
body{
  font-family:var(--ff-jp); color:var(--c-ink); background:var(--c-bg);
  line-height:1.85; font-weight:400; letter-spacing:.02em;
  font-size:15px; overflow-x:hidden;
  /* PCでもSP表示：モバイル幅の1カラムを中央寄せ */
  max-width:var(--maxw); margin-inline:auto; border-inline:1px solid var(--c-line);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
em{ font-style:normal; }

/* ---- レイアウト ---- */
.container{ position:relative; z-index:1; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut); }
.container--narrow{ max-width:var(--maxw); }
.section{ position:relative; overflow:hidden; padding-block:var(--sp-xl);
  content-visibility:auto; contain-intrinsic-size:auto 720px; }
.section--tint{ background:var(--c-tint); }

/* 巨大背景英字 */
.section__bg{ position:absolute; top:30px; left:-4px; z-index:0;
  font-family:var(--ff-cond); font-weight:700; text-transform:uppercase;
  font-size:54px; line-height:1; letter-spacing:.01em; white-space:nowrap;
  color:var(--c-blue); opacity:.06; pointer-events:none; }
.section--tint .section__bg{ color:#fff; opacity:.55; }

/* セクション見出し */
.section__head{ position:relative; z-index:1; margin-bottom:var(--sp-l); }
.section__label{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.section__no{ font-family:var(--ff-cond); font-weight:700; font-size:14px;
  color:var(--c-accent); letter-spacing:.06em; }
.section__no::before{ content:""; display:inline-block; width:22px; height:2px;
  background:var(--c-accent); margin-right:10px; vertical-align:middle; }
.section__en{ font-family:var(--ff-en); font-weight:700; font-size:12px;
  letter-spacing:.18em; color:var(--c-blue); text-transform:uppercase; }
.section__title{ font-size:28px; font-weight:900; line-height:1.35;
  letter-spacing:.01em; color:var(--c-blue); }
.section__sub{ color:#5c6a7d; font-size:15px; line-height:1.75; margin-top:12px; font-weight:500; }

.subhead{ font-size:19px; font-weight:900; color:var(--c-blue);
  margin:var(--sp-l) 0 var(--sp-m); padding-left:14px;
  border-left:5px solid var(--c-accent); line-height:1.4; }
.lead-text{ font-size:16px; line-height:2.05; margin-bottom:var(--sp-m); font-weight:500; }
.lead-text strong{ color:var(--c-blue); font-weight:900; }
.lead-note{ display:inline-block; font-size:12.5px; color:var(--c-ink-2); margin-top:8px; font-weight:400; }
.note{ font-size:12px; color:var(--c-ink-2); margin-top:var(--sp-s); }
/* 強調の下線（“”の代わり） */
.u{ text-decoration:underline; text-decoration-color:var(--c-accent);
  text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-skip-ink:none; }

/* ---- プレースホルダ ---- */
.ph{ position:relative; background:
  repeating-linear-gradient(45deg, #e3e8f1 0 12px, #dbe1ec 12px 24px);
  border:1px solid var(--c-line); aspect-ratio:4/3; }
.ph::after{ content:attr(data-ph); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px; font-size:12px; color:#9aa6bb; letter-spacing:.04em; }
.ph--wide{ aspect-ratio:16/7; }
.ph--portrait{ aspect-ratio:3/4; }
.ph--person{ aspect-ratio:3/2; }
.ph--qr{ aspect-ratio:1/1; width:160px; }
.ph--map{ aspect-ratio:16/8; }
/* 画像が入ったら縞プレースホルダを隠して画像を全面表示 */
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph:has(img){ background:none; }
.ph:has(img)::after{ display:none; }

/* ---- ボタン ---- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; padding:16px 26px; border-radius:var(--radius);
  border:2px solid transparent; transition:opacity .2s, background .2s, color .2s; width:100%; }
.btn--primary{ background:#06C755; color:#fff; }   /* LINE導線はLINEカラー */
.btn--primary:hover{ opacity:.9; }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.8); }
.btn--ghost:hover{ background:#fff; color:var(--c-blue); }
.btn--line{ background:#06C755; color:#fff; font-size:16px; padding:18px 26px; }
.btn--line:hover{ opacity:.9; }

/* 矢印付きの動き（格好よさ） */
.btn::after{ content:"→"; font-family:var(--ff-en); margin-left:10px; transition:transform .2s; }
.btn:hover::after{ transform:translateX(4px); }

/* =========================================================
   ヘッダー
   ========================================================= */
.header{ position:fixed; top:0; left:0; right:0; z-index:50;
  max-width:var(--maxw); margin-inline:auto;
  background:#fff; border-bottom:1px solid var(--c-line); }
.header__inner{ display:flex; align-items:center; justify-content:space-between;
  height:58px; padding-inline:var(--gut); max-width:var(--maxw); margin-inline:auto; }
.header__logo{ display:flex; align-items:center; gap:9px; }
.header__logo-img{ width:30px; height:30px; display:block; }
.header__logo-mark{ font-family:var(--ff-jp); font-weight:900; font-size:16px;
  letter-spacing:.03em; color:var(--c-blue); display:block; line-height:1.1; white-space:nowrap; }
.header__logo-sub{ display:block; font-family:var(--ff-jp); font-size:10px;
  letter-spacing:.14em; color:var(--c-accent); font-weight:700; margin-top:1px; }

.hamburger{ width:30px; height:20px; position:relative; background:none; border:0; cursor:pointer; }
.hamburger span{ position:absolute; left:0; width:100%; height:2.5px; background:var(--c-blue);
  transition:transform .3s, opacity .3s; }
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:9px; }
.hamburger span:nth-child(3){ top:18px; }
.hamburger.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* 全画面メニュー（ブルー） */
.gnav{ position:fixed; top:58px; bottom:0; left:0; right:0; background:var(--c-blue);
  max-width:var(--maxw); margin-inline:auto;
  transform:translateX(100%); transition:transform .32s ease; overflow-y:auto; }
.gnav.is-open{ transform:translateX(0); }
.gnav__list{ padding:var(--sp-m) var(--gut) var(--sp-xl); }
.gnav__link{ display:block; padding:18px 4px; font-weight:700; font-size:17px; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18); }
.gnav__link::before{ content:""; }
.gnav__link--cta{ margin-top:var(--sp-m); background:#06C755; color:#fff;
  text-align:center; border:0; border-radius:var(--radius); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:88px var(--gut) 108px; color:#fff; overflow:hidden;
  background:var(--c-blue); }
.hero__media{ position:absolute; inset:0; aspect-ratio:auto; border:0; z-index:0; overflow:hidden; }
.hero__video{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.hero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(44,65,152,.55) 0%, rgba(28,40,95,.86) 100%); }
.hero__media.ph::after{ color:rgba(255,255,255,.45); }

/* 斜めの細いアクセントライン（ロード時に“シュッ”と伸びる） */
.hero__accent{ position:absolute; z-index:2; left:-6%; top:30%; width:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c-accent-2), var(--c-accent));
  transform:rotate(-7deg); transform-origin:left center; opacity:.85;
  transition:width 1.1s cubic-bezier(.16,.84,.44,1) .5s; }
.hero.is-loaded .hero__accent{ width:118%; }
/* 巨大背景英字 */
.hero__bgword{ position:absolute; z-index:2; left:8px; bottom:120px;
  font-family:var(--ff-cond); font-weight:700; font-size:84px; line-height:1;
  letter-spacing:.02em; color:rgba(255,255,255,.10); white-space:nowrap;
  writing-mode:vertical-rl; }

.hero__copy{ position:relative; z-index:3; }
.hero__eyebrow{ font-family:var(--ff-en); font-weight:700; letter-spacing:.16em; font-size:12px;
  color:#fff; }
.hero__eyebrow span{ color:var(--c-accent); background:#fff; padding:1px 7px; margin-left:6px;
  font-family:var(--ff-cond); }
.hero__title{ font-size:26px; font-weight:900; line-height:1.6; margin:18px 0 20px;
  letter-spacing:.005em; text-shadow:0 2px 16px rgba(0,0,0,.35); }
.hero__line{ display:block; }
/* 強調は“下線だけ”。ロード時にスッと引かれる */
.hero__u{ background:linear-gradient(var(--c-accent),var(--c-accent)) left 100%/0% 4px no-repeat;
  padding-bottom:5px; transition:background-size .7s var(--ease-out) .9s; }
.hero.is-loaded .hero__u{ background-size:100% 4px; }
.hero__lead{ font-size:14px; line-height:2; color:rgba(255,255,255,.92); margin-bottom:var(--sp-m); }
.hero__actions{ display:flex; flex-direction:column; gap:12px; max-width:360px; }
.hero__scroll{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--ff-en); font-size:10px; font-weight:700; letter-spacing:.2em; color:#fff; }
.hero__scroll::after{ content:""; display:block; width:1px; height:34px; margin:8px auto 0;
  background:var(--c-accent); animation:scrolldown 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes scrolldown{ 0%{ transform:scaleY(0);} 40%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* =========================================================
   About / 数字 / メッセージ
   ========================================================= */
.about__diagram{ margin:var(--sp-l) 0 var(--sp-s); }
/* 図解は切り取らず全体を表示（縦横比は画像のまま） */
.about__diagram.ph{ aspect-ratio:auto; background:#fff; }
.about__diagram.ph > img{ position:static; inset:auto; width:100%; height:auto; object-fit:contain; }
.about__diagram-cap{ font-size:12px; color:var(--c-ink-2); margin-top:8px; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--c-line); border:1px solid var(--c-line); }
.stat{ background:var(--c-bg); padding:24px 14px; text-align:center; }
.stat__num{ font-family:var(--ff-cond); font-weight:700; color:var(--c-blue);
  font-size:32px; line-height:1; display:inline-flex; align-items:baseline; gap:1px;
  white-space:nowrap; }
.stat__unit{ font-size:14px; }
.stat__pre{ font-size:15px; font-weight:700; align-self:center; margin-right:1px; }
.stat__label{ display:block; font-size:12px; color:var(--c-ink-2); margin-top:10px; font-weight:500; }

.message{ margin-top:var(--sp-l); }
.message__photo{ width:100%; margin:0 0 18px; }
.message__photo.ph{ aspect-ratio:16/9; }     /* 全幅・横長で“右の余白”を解消 */
.message__body{ border-left:4px solid var(--c-accent); padding-left:16px; }
.message__body p{ font-size:15px; line-height:2; font-weight:500; }
.message__body cite{ display:block; font-style:normal; font-size:13px;
  color:var(--c-blue); font-weight:700; margin-top:12px; }

/* =========================================================
   仕事内容
   ========================================================= */
.jobs{ display:grid; grid-template-columns:1fr; gap:18px; }
.job{ background:#fff; border:1px solid var(--c-line); overflow:hidden; }
.job__img{ margin-bottom:0; }
.job__img.ph{ aspect-ratio:16/9; }
.job__title{ font-size:18px; font-weight:900; color:var(--c-blue);
  margin:18px 18px 0; padding-left:12px; border-left:4px solid var(--c-accent); }
.job__desc{ font-size:14.5px; color:var(--c-ink-2); line-height:1.9; padding:10px 18px 20px; }

.timeline{ position:relative; padding-left:6px; }
.timeline__item{ position:relative; display:grid; grid-template-columns:58px 1fr;
  gap:14px; padding-bottom:var(--sp-m); }
.timeline__item::before{ content:""; position:absolute; left:6px; top:8px; bottom:0;
  width:2px; background:var(--c-tint); }
.timeline__item:last-child::before{ display:none; }
.timeline__item::after{ content:""; position:absolute; left:0; top:6px;
  width:13px; height:13px; background:var(--c-accent); border-radius:50%; }
.timeline__time{ font-family:var(--ff-cond); font-weight:700; font-size:15px;
  color:var(--c-blue); padding-left:24px; }
.timeline__body h4{ font-size:16px; font-weight:900; color:var(--c-blue); }
.timeline__body p{ font-size:14.5px; color:#5c6a7d; line-height:1.85; margin-top:4px; }

/* =========================================================
   インタビュー
   ========================================================= */
.interviews{ display:grid; gap:var(--sp-l); }
.interview{ background:#fff; border:1px solid var(--c-line); }
.interview__photo{ border:0; border-bottom:3px solid var(--c-accent); }
.interview__photo img{ object-position:center 40%; }   /* 横長写真をバランスよく */
.interview__text{ padding:26px 20px 30px; }
.interview__tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--c-blue); padding:4px 12px; margin-bottom:14px; }
.interview__name{ font-size:19px; font-weight:900; line-height:1.5; color:var(--c-blue);
  margin-bottom:var(--sp-s); }
.qa dt{ font-size:13px; font-weight:700; color:var(--c-accent); margin-top:18px;
  letter-spacing:.02em; }
.qa dd{ font-size:15px; line-height:1.95; }

.gallery{ display:grid; grid-template-columns:1fr; gap:20px; }
.gallery__item{ background:#fff; border:1px solid var(--c-line); }
.gallery__link{ display:block; color:inherit; }
.gallery__img{ aspect-ratio:16/9; overflow:hidden; }
.gallery__img img{ transition:transform .5s var(--ease-out); }
.gallery__link:hover .gallery__img img{ transform:scale(1.05); }
.gallery__cap{ font-size:14px; font-weight:700; color:var(--c-blue);
  padding:14px 18px; border-left:4px solid var(--c-accent); margin:14px 0; }
.gallery__more{ display:block; font-size:11.5px; font-weight:500; color:var(--c-accent); margin-top:5px; }
.gallery__link:hover .gallery__more{ text-decoration:underline; }

/* =========================================================
   入社後の流れ
   ========================================================= */
.steps{ display:grid; gap:var(--sp-s); }
.step{ background:#fff; border:1px solid var(--c-line); padding:var(--sp-m) var(--sp-s);
  position:relative; border-top:4px solid var(--c-blue);
  display:flex; gap:16px; align-items:flex-start; }
.step__icon{ flex:0 0 auto; width:36px; height:36px; color:var(--c-accent); margin-top:2px; }
.step__icon svg{ width:100%; height:100%; fill:currentColor; display:block; }
.step__body{ flex:1 1 auto; min-width:0; }
.step__no{ font-family:var(--ff-cond); font-weight:700; font-size:13px; letter-spacing:.1em;
  color:var(--c-accent); }
.step__title{ font-size:17px; font-weight:900; color:var(--c-blue); margin:6px 0 8px; }
.step p{ font-size:14px; color:var(--c-ink-2); line-height:1.9; }
.support{ display:grid; gap:var(--sp-s); margin-top:var(--sp-l); }
.support li{ background:#fff; border-left:5px solid var(--c-accent); padding:14px 0 14px 16px; }
.support h4{ font-size:15px; font-weight:900; color:var(--c-blue); }
.support p{ font-size:13px; color:var(--c-ink-2); }

/* =========================================================
   福利厚生
   ========================================================= */
.welfare{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--c-line); border:1px solid var(--c-line); }
.welfare__item{ background:var(--c-bg); padding:24px var(--sp-s); }
.welfare__icon{ display:block; width:32px; height:32px; color:var(--c-accent); margin-bottom:12px; }
.welfare__icon svg{ width:100%; height:100%; fill:currentColor; display:block; }
.welfare__item h3{ font-size:14px; font-weight:900; color:var(--c-blue); margin-bottom:8px; }
.welfare__item p{ font-size:13px; color:var(--c-ink-2); line-height:1.8; }
.welfare__big{ font-family:var(--ff-cond); font-weight:700; color:var(--c-accent); font-size:15px; }
.welfare__big em{ font-size:34px; }
.welfare__big span{ font-size:14px; margin-left:2px; }
.welfare__note{ margin-top:4px; }

/* =========================================================
   募集要項（タブ）
   ========================================================= */
.tabs{ display:flex; gap:0; margin-bottom:var(--sp-m); border:2px solid var(--c-blue); }
.tabs__btn{ flex:1; padding:15px 8px; background:#fff; color:var(--c-blue);
  font-weight:900; font-size:14px; border:0; cursor:pointer; transition:background .2s; }
.tabs__btn.is-active{ background:var(--c-blue); color:#fff; }
.tabs__panel{ display:none; }
.tabs__panel.is-active{ display:block; }
.spec{ border-top:2px solid var(--c-blue); }
.spec > div{ display:grid; grid-template-columns:104px 1fr; gap:14px;
  padding:16px 4px; border-bottom:1px solid var(--c-line); }
.spec dt{ font-size:13px; font-weight:900; color:var(--c-blue); }
.spec dd{ font-size:14px; color:var(--c-ink); line-height:1.8; }

.flow{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.flow__item{ background:#fff; border:1px solid var(--c-line); padding:18px 12px;
  text-align:center; border-top:4px solid var(--c-accent); }
.flow__item span{ font-family:var(--ff-cond); font-weight:700; font-size:24px;
  color:var(--c-accent); display:block; }
.flow__item p{ font-size:13px; line-height:1.6; margin-top:6px; font-weight:500; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:2px solid var(--c-blue); }
.faq__item{ border-bottom:1px solid var(--c-line); }
.faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--c-blue);
  padding:20px 40px 20px 4px; position:relative; line-height:1.6; }
.faq__q::before{ content:"Q"; font-family:var(--ff-cond); font-weight:700;
  color:var(--c-accent); margin-right:12px; font-size:18px; }
.faq__q::after{ content:""; position:absolute; right:8px; top:26px;
  width:11px; height:11px; border-right:2px solid var(--c-accent);
  border-bottom:2px solid var(--c-accent); transform:rotate(45deg); transition:transform .25s; }
.faq__q[aria-expanded="true"]::after{ transform:rotate(-135deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__a p{ font-size:14px; color:var(--c-ink); line-height:1.9; padding:0 4px 20px 30px; }

/* =========================================================
   コンタクト（LINE）
   ========================================================= */
.contact{ position:relative; background:var(--c-blue); color:#fff;
  padding-block:var(--sp-xl); text-align:center; overflow:hidden; }
.contact::before{ content:"CONTACT"; position:absolute; top:24px; left:50%;
  transform:translateX(-50%); font-family:var(--ff-cond); font-weight:700; font-size:64px;
  color:rgba(255,255,255,.07); white-space:nowrap; pointer-events:none; }
.contact__en{ position:relative; z-index:1; font-family:var(--ff-en); font-weight:700;
  letter-spacing:.18em; font-size:12px; color:var(--c-accent); }
.contact__title{ position:relative; z-index:1; font-size:25px; font-weight:900;
  line-height:1.5; margin:10px 0 var(--sp-s); }
.contact__lead{ position:relative; z-index:1; font-size:14px; line-height:2;
  color:rgba(255,255,255,.9); margin-bottom:var(--sp-l); }
.contact__box{ position:relative; z-index:1; max-width:420px; margin-inline:auto; }
.contact__qr{ display:block; width:200px; margin:var(--sp-m) auto 10px;
  background:#fff; padding:12px; border-radius:var(--radius); }
.contact__qr img{ display:block; width:100%; height:auto; }
.contact__qrnote{ font-size:12px; color:rgba(255,255,255,.75); }
/* 応募ハードル低減（安心リスト） */
.reassure{ position:relative; z-index:1; max-width:340px; margin:var(--sp-m) auto 0; text-align:left; }
.reassure li{ position:relative; font-size:13.5px; color:#fff; padding:7px 0 7px 26px; line-height:1.6;
  border-bottom:1px solid rgba(255,255,255,.15); }
.reassure li::before{ content:""; position:absolute; left:2px; top:12px; width:12px; height:7px;
  border-left:2px solid var(--c-accent-2); border-bottom:2px solid var(--c-accent-2);
  transform:rotate(-45deg); }
.contact__sns{ position:relative; z-index:1; font-size:13px; color:rgba(255,255,255,.85); margin-top:var(--sp-m); }
.contact__sns a{ color:var(--c-accent-2); font-weight:700; }

/* 若手向け指標（職場の雰囲気） */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--c-line); border:1px solid var(--c-line); margin-bottom:var(--sp-l); }
.facts__item{ background:var(--c-tint); padding:18px 6px; text-align:center; }
.facts__item em{ display:block; font-family:var(--ff-jp); font-weight:900; color:var(--c-blue);
  font-size:20px; line-height:1.25; }
.facts__label{ display:block; font-size:11px; color:var(--c-ink-2); margin-top:7px; font-weight:500; line-height:1.4; }

/* 成長イメージ（入社後の流れ） */
.career{ display:grid; gap:12px; }
.career__item{ display:grid; grid-template-columns:62px 1fr; gap:14px; align-items:start;
  background:#fff; border:1px solid var(--c-line); border-left:4px solid var(--c-accent); padding:16px; }
.career__when{ font-weight:900; color:var(--c-blue); font-size:15px; }
.career__item p{ font-size:14px; color:var(--c-ink-2); line-height:1.85; }

/* 収入の目安（働く環境） */
.model{ display:grid; gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.model__item{ display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:center;
  background:#fff; padding:15px 16px; }
.model__when{ font-weight:900; color:var(--c-blue); font-size:15px; }
.model__pay{ font-family:var(--ff-cond); font-weight:700; color:var(--c-blue); font-size:18px; }
.model__tbd{ font-family:var(--ff-jp); font-weight:500; color:var(--c-ink-2); font-size:14px; }

/* Instagram セクション（自動更新フィード） */
.igsec{ background:var(--c-blue); color:#fff; padding-block:var(--sp-xl); text-align:center; }
.igsec__en{ font-family:var(--ff-en); font-weight:700; letter-spacing:.18em; font-size:12px; color:var(--c-accent-2); }
.igsec__title{ font-size:25px; font-weight:900; line-height:1.4; margin:8px 0 6px;
  display:inline-block; padding-bottom:8px;
  background:linear-gradient(var(--c-accent-2),var(--c-accent-2)) center bottom/52px 3px no-repeat; }
.igsec__sub{ font-size:13.5px; color:rgba(255,255,255,.85); margin-bottom:var(--sp-l); }
.igsec__feed{ position:relative; background:#fff; border-radius:var(--radius); padding:14px; min-height:120px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.igsec__feed iframe{ width:100% !important; border:0; display:block; }
/* グリッド全体をタップでInstagramへ（無料での導線確保） */
.igsec__overlay{ position:absolute; inset:0; z-index:2; }
.igsec__placeholder{ font-size:13px; color:var(--c-ink-2); line-height:1.8; padding:24px 8px; }
.igsec__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  margin-top:var(--sp-m); padding:14px 28px; border-radius:var(--radius);
  background:var(--c-accent); color:#fff; font-weight:700; font-size:15px; }
.igsec__btn:hover{ opacity:.9; }
.igsec__btn svg{ width:22px; height:22px; fill:currentColor; }

/* =========================================================
   フッター
   ========================================================= */
.footer{ background:var(--c-blue-d); color:rgba(255,255,255,.8); padding-block:var(--sp-l); }
.footer__name{ font-family:var(--ff-cond); font-weight:700; color:#fff; font-size:20px;
  letter-spacing:.04em; }
.footer__addr{ font-size:12px; line-height:1.9; }
.footer__map{ margin:var(--sp-m) 0; }
.footer__map.ph{ background:#1a2750; border-color:#2c3c6e; }
.footer__map.ph::after{ color:#6878a8; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:var(--sp-m); }
.footer__nav a{ font-size:13px; }
.footer__nav a:hover{ color:#fff; }
.footer__copy{ font-family:var(--ff-en); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.5); }

/* =========================================================
   画面下固定CTA
   ========================================================= */
.fixed-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:var(--maxw); margin-inline:auto;
  background:#06C755; color:#fff; text-align:center; padding:11px 16px;
  transform:translateY(110%); transition:transform .3s ease; }
.fixed-cta.is-visible{ transform:translateY(0); }
.fixed-cta__main{ display:block; font-weight:900; font-size:15px; }
.fixed-cta__sub{ display:block; font-size:11px; opacity:.92; }

/* =========================================================
   スクロール演出（スタイリッシュ）
   ========================================================= */
:root{ --ease-out:cubic-bezier(.16,.84,.44,1); --ease-io:cubic-bezier(.77,0,.18,1); }

/* 基本リビール：ふわっと上へ。staggerはJSで delay 付与 */
.reveal{ opacity:0; transform:translateY(30px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
/* 出現前のみ合成ヒント（出現後は解除してメモリ負荷を抑える＝スクロールを滑らかに） */
.reveal:not(.is-in){ will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }

/* 見出しの英字ラベルは少し横から */
.section__label.reveal{ transform:translateX(-16px); }
.section__label.reveal.is-in{ transform:none; }

/* 画像ワイプ（“シュッ”）：アクセント帯が走り抜けて写真がズームから定位 */
.ph.wipe{ overflow:hidden; }
.ph.wipe > img{ opacity:0; transform:scale(1.12);
  transition:opacity .01s .42s, transform 1.3s var(--ease-out) .42s; }
.ph.wipe::before{ content:""; position:absolute; inset:0; z-index:3;
  background:var(--c-accent); transform:scaleX(0); transform-origin:left center; }
.ph.wipe.is-in > img{ opacity:1; transform:scale(1); }
.ph.wipe.is-in::before{ animation:wipe .95s var(--ease-io) forwards; }
@keyframes wipe{
  0%{ transform:scaleX(0); transform-origin:left center; }
  45%{ transform:scaleX(1); transform-origin:left center; }
  55%{ transform:scaleX(1); transform-origin:right center; }
  100%{ transform:scaleX(0); transform-origin:right center; }
}

/* ヒーロー：ロード時に要素が順番に立ち上がる（stagger） */
.hero__eyebrow,.hero__title,.hero__lead,.hero__actions{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.hero.is-loaded .hero__eyebrow{ opacity:1; transform:none; transition-delay:.15s; }
.hero.is-loaded .hero__title{ opacity:1; transform:none; transition-delay:.30s; }
.hero.is-loaded .hero__lead{ opacity:1; transform:none; transition-delay:.50s; }
.hero.is-loaded .hero__actions{ opacity:1; transform:none; transition-delay:.66s; }
/* ヘッダー：スクロールで陰影＋少し凝縮 */
.header{ transition:box-shadow .3s ease, background .3s ease; }
.header.is-scrolled{ box-shadow:0 6px 22px rgba(20,32,80,.10); }

/* 数字カウントアップ中の安定表示 */
.stat__num em{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.section__label.reveal{ opacity:1; transform:none; transition:none; }
  .ph.wipe > img{ opacity:1; transform:none; transition:none; }
  .ph.wipe::before{ display:none; }
  .hero__eyebrow,.hero__title,.hero__lead,.hero__actions{ opacity:1; transform:none; transition:none; }
  .hero__u{ background-size:100% 4px; transition:none; }
  .hero__accent{ width:118%; transition:none; }
  .hero__scroll::after{ animation:none; }
}

/* =========================================================
   PCでもSP表示を固定
   モバイル1カラムのまま画面中央に幅 var(--maxw) で表示。
   PC専用のマルチカラム・横並びナビは意図的に無効化。
   ========================================================= */

/* =========================================================
   印刷 / PDF出力（上から下まで1枚の縦長ページ）
   - スクロール演出要素を必ず表示
   - 固定ヘッダー・固定CTA・SCROLL表示は隠す
   - ヒーローの 100svh を固定高さに（PDFの空白防止）
   ========================================================= */
@media print{
  html, body{ background:#fff !important; }
  body{ border-inline:0 !important; box-shadow:none !important; }
  .header, .fixed-cta, .hero__scroll{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero{ min-height:0 !important; height:760px !important; }
  .hero__media.ph, .ph{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .interview, .step, .stat, .job, .welfare__item, .flow__item,
  .faq__item, .message, .timeline__item, .section__head{ break-inside:avoid; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}
@page{ size:430px 13340px; margin:0; }