@charset "UTF-8";
/* ===================================================================
   共通パーツ（parts.css）  2026-08-22

   同じ意味を持つ要素は、ページごとに書かずここに1つだけ定義して使い回す。

     .jp-person    社員カード（写真＋ひとこと＋名前・所属＋リンク）
     .jp-textlink  「詳しく見る →」のような文字リンク
     .jp-pill      「職種を見る →」のような枠付きピル型ボタン

   使っている場所
     ・採用トップ  /recruit/            INTERVIEW（先輩社員の声）
     ・職種ページ  /jobs/               この職種で働く社員
     ・インタビュー個別ページ            他の先輩の声／この先輩が関わる仕事

   色はページ側の変数に依存しないよう、このファイル内で完結させている。
   =================================================================== */

.jp-person{
  --jp-green:#47aa4f; --jp-green-dark:#2f7d37; --jp-ink:#1a1a1a; --jp-muted:#6b7268;
  display:flex; flex-direction:column; background:#fff; text-align:left;
  color:var(--jp-ink); text-decoration:none;
  border-radius:14px; overflow:hidden; position:relative;
  /* ホバーは本番トップの WORKS カードと同じ動き（4px持ち上げ＋影が濃くなる）2026-08-23 */
  box-shadow:0 4px 8px rgba(0,0,0,.10), 0 6px 12px rgba(0,0,0,.05);
  transition:box-shadow .2s, transform .2s;
}
/* .jp-person.in を併記しているのは、スクロール表示の .recruit-lp .reveal.in{transform:none}
   （詳細度0,3,0）に負けて transform が効かなくなるため。これで同じ詳細度になり後勝ちする */
.jp-person:hover,
.jp-person.in:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  z-index:3;
}
.jp-person .person-photo{
  aspect-ratio:1.5; background:#e7ede7 center/100% 100% no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:var(--jp-muted); font-size:13px; font-weight:700; letter-spacing:.08em;
  border-bottom:3px solid var(--jp-green); overflow:hidden;
  transition:background-size .45s cubic-bezier(.22,.61,.36,1);
}
/* 写真の内部ズームは「迫る」と動きが二重になるため停止 2026-08-23 */
/* H.I さんの写真（実写真が揃うまでの暫定。ほかの4名はプレースホルダのまま） */
.jp-person .person-photo.ph-hi,
.jp-person .person-photo.ph-kh,
.jp-person .person-photo.ph-as{
  background:#e7ede7 center/100% 100% no-repeat; color:transparent;
}
.jp-person .person-photo.ph-hi{background-image:url(images/recruit/interview-hi-card.jpg)}
.jp-person .person-photo.ph-kh{background-image:url(images/recruit/interview-kh-card.jpg)}
.jp-person .person-photo.ph-as{background-image:url(images/recruit/interview-as-card.jpg)}
.jp-person .person-quote{
  padding:32px 26px 16px; color:var(--jp-ink);
  font-size:19px; font-weight:800; line-height:1.6;
}
.jp-person .person-meta{
  padding:0 26px 26px; margin-top:auto; display:grid; gap:3px;
}
.jp-person .person-meta strong{font-size:14px}
.jp-person .person-meta small{color:var(--jp-muted); font-size:12px; line-height:1.6}
.jp-person .person-meta .jp-textlink{justify-self:end; margin-top:4px}

/* 文字リンク（カードの中でも単体でも使う） */
.jp-textlink{
  color:#47aa4f; font-size:12px; font-weight:800; text-decoration:none;
  transition:color .2s ease;
}
.jp-textlink:hover{color:#2f7d37}

/* 枠付きピル型ボタン */
.jp-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 26px; border-radius:999px;
  background:#fff; color:#2f7d37; border:1.5px solid #47aa4f;
  font-size:13.5px; font-weight:700; text-decoration:none;
  /* 文字色だけは時間をかけずほぼ即座に切り替える 2026-08-25。
     0.2秒かけると、タップ直後のページ遷移で描画が止まった時点の
     「緑と白の中間色＝薄い緑」のまま画面に残ってしまうため。 */
  transition:color .08s linear, border-color .2s ease;
  /* F方式（左から色が流れ込む）用。緑の面(::after)を先に用意しておき、
     幅0から広げるだけなので背景色の塗り直しが起きない 2026-08-25 */
  position:relative; z-index:0; overflow:hidden;
}
.jp-pill::after{
  content:""; position:absolute; inset:0; z-index:-1; background:#47aa4f;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .3s cubic-bezier(.45,0,.55,1);
}
/* 文字色を#fffにすると、矢印(→)やSVG(stroke:currentColor)も同じ色を引き継ぐ */
.jp-pill:hover{color:#fff}
.jp-pill:hover::after{transform:scaleX(1)}

@media(max-width:720px){
  .jp-person .person-quote{padding:26px 22px 14px; font-size:17px}
  .jp-person .person-meta{padding:0 22px 22px}
  .jp-pill{flex:1 1 100%}
}


/* ===== 募集要項リスト／ENTRY バンド（共通パーツ）2026-08-22 =====
   採用トップで完成しているデザインを、インタビュー個別ページでも使う。
   recruit-lp.css から移動。定義はここ1か所だけ。 */
.req-company{margin:26px 0 0}
.req-company .btn-outline{margin-top:0}
.requirements h2{font-size:18px;margin:0;color:var(--muted,#6b7268)}
.requirements .section-label{font-size:clamp(34px,4.2vw,60px);line-height:1;font-weight:900;color:var(--green,#47aa4f);letter-spacing:.06em;margin-bottom:10px}
.requirements{background:#f3f4f3}
.requirements-grid{display:grid;grid-template-columns:44% 1fr;gap:7%;align-items:center}
.requirements-list{padding:0;list-style:none;margin:32px 0}
.requirements-list li{margin-bottom:12px}
.requirements-list a{display:grid;grid-template-columns:46px 1fr auto;align-items:center;padding:16px 18px;font-weight:800;font-size:19px;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(11,61,39,.06);transition:box-shadow .18s ease,transform .18s ease}
/* カードの浮き上がり（translateY）と影の変化は不要との指示により削除 2026-08-25。
   演出はアイコンの丸が広がるH方式だけにする（下の .requirements-list i 参照） */
.requirements-list .req-ic{width:36px;height:36px;object-fit:contain}
.requirements-list span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--green,#47aa4f);color:#fff;font-size:11px}
.requirements-list i{font-style:normal;color:var(--green,#47aa4f)}
/* H方式（丸が広がる）2026-08-25。以前はアイコンのbackground-colorを直接
   塗り替えていたため、タップ→ページ遷移に描画が間に合わずJS側の遅延が必要
   だった。緑の丸(::before)を先に仕込んでおき、scaleで広げるだけにすることで
   塗り直しが起きなくなり、遅延なしでも確実に見えるようになる。
   ※ .recruit-lp / .jobspage 双方の募集要項リストに共通で効く */
/* 矢印の色も同じ理由で即座に切り替える（.jp-pillのコメント参照）2026-08-25 */
.requirements-list i{position:relative;z-index:0;overflow:hidden;transition:color .08s linear}
.requirements-list i::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--green,#47aa4f);border-radius:50%;
  transform:scale(0);transition:transform .25s ease}
.requirements-list a:hover i{color:#fff}
.requirements-list a:hover i::before{transform:scale(1)}
.requirements-grid>img{width:100%;aspect-ratio:1.75}
.entry{min-height:410px;position:relative;color:#fff;display:grid;align-items:center;overflow:hidden}
.entry-photo{position:absolute;inset:0;background:#2f7d37}
.entry-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(55,140,64,.93),rgba(71,170,79,.72),rgba(40,105,52,.88))}
.entry-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.entry-inner p{font-size:19px;margin:0}
.entry-inner h2{font-size:45px;margin:0 0 12px}
.entry-inner small{color:#d7eadc}
.entry-button{width:min(600px,100%);height:auto;border-radius:999px;display:flex;align-items:center;gap:18px;padding:16px 22px;box-shadow:0 14px 30px rgba(11,62,33,.30);transition:transform .4s cubic-bezier(.45,0,.55,1)}
@media(max-width:767px){.requirements-grid{grid-template-columns:1fr;gap:42px}.requirements-grid>img{margin-top:8px}.entry{min-height:520px}.entry-inner{display:block;text-align:center}.entry-inner h2{font-size:38px}.entry-button{margin:26px auto 0;width:100%}.entry-overlay{background:linear-gradient(160deg,rgba(20,100,52,.93),rgba(35,130,68,.90) 45%,rgba(35,130,68,.90))}}
.requirements{background:#eef6ef}
.requirements{position:relative;background:url(images/recruit/req-tools.jpg) center/cover no-repeat}
.requirements:before{content:"";position:absolute;inset:0;background:rgba(224,240,226,.84)}
.requirements>.container{position:relative;z-index:1}
.entry-photo{background:url(images/recruit/entry-bg.jpg) center/cover no-repeat}
.requirements-grid{grid-template-columns:1fr}

/* ENTRY：左から緑グラデーション→右の人物写真にはフィルターをかけない 2026-08-22
   （PCのみ。SPは可読性優先で下の @media(max-width:767px) 側の一様な緑を使う）

   2026-08-23 調整
   ・グラデーションの消え際を写真の女性の左側あたり（約48%）まで前倒し
   ・キャッチとボタンの左端をフッター（.site-footer .inner）と揃える。
     フッターは max-width:1280px＋左右64px。ENTRY だけ既定の 1180px ではなく
     同じ 1280px にすることで、左端の位置がぴったり一致する */
@media(min-width:768px){
  .entry-overlay{background:linear-gradient(90deg,rgba(23,111,58,.95) 0%,rgba(30,120,62,.92) 20%,rgba(38,138,72,.55) 36%,rgba(43,150,79,0) 48%)}
  .entry-inner{align-items:flex-start;text-align:left}
  /* 緑が早く消える分、文字が明るい背景に重なる。影で可読性を確保する */
  .entry-inner p,.entry-inner h2,.entry-inner small{text-shadow:0 1px 12px rgba(8,42,20,.55)}
}

/* パーツ単体で成立させるための土台（採用トップ以外のページ用） 2026-08-22 */
.requirements>.container{width:min(calc(100% - 64px),1180px);margin-inline:auto}
/* ENTRY の内側だけはフッターと同じ骨格（1280px＋左右64px）にして左端を揃える 2026-08-23 */
.entry>.container{width:min(100%,1280px);margin-inline:auto;padding-inline:64px}
@media(max-width:768px){.entry>.container{padding-inline:20px}}
.requirements.section{padding:96px 0}
.requirements a,.entry a{text-decoration:none}
.requirements-list a{color:#1a1a1a}
.requirements .btn-outline{display:inline-flex;align-items:center;gap:14px;margin-top:24px;
  padding:15px 34px;border:2px solid var(--green,#47aa4f);border-radius:999px;background:#fff;
  color:var(--green,#47aa4f);font-weight:800;font-size:14px;
  transition:background .3s ease,color .3s ease}
.requirements .btn-outline:hover{background:var(--green,#47aa4f);color:#fff}
.requirements .btn-outline span{transition:transform .25s ease}
.requirements .btn-outline:hover span{transform:translateX(4px)}
.entry-button .eb-ic{width:34px;height:34px;flex:none}
.entry-button .eb-ic svg{width:100%;height:100%}
.entry-button .eb-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;flex:1 1 auto}
.entry-button .eb-txt small{font-size:11px;font-weight:800;letter-spacing:.22em;opacity:.85}
.entry-button .eb-txt strong{font-size:19px;font-weight:800}
.entry-button .eb-arrow{width:26px;height:26px;flex:none;background:#fff;border-radius:50%;display:grid;place-items:center;padding:5px}
.entry-button .eb-arrow svg{width:100%;height:100%}

/* ENTRYボタンの幅を、緑グラデーションの終わり（48%）に揃える 2026-08-23
   ボタンの左端＝コンテナ左端なので、右端を 48vw に合わせると幅は次の式になる。
     vw≥1280px … 左端 = 50vw - 576px  ->  幅 = 48vw - (50vw - 576px) = 576px - 2vw
     vw<1280px … 左端 = 64px          ->  幅 = 48vw - 64px
   1280px でどちらも 550.4px になり、段差なくつながる。 */
/* 通常時は 1/1.1 に縮め、ホバーで中心から1.1倍＝これまでの幅にぴたりと戻す。
   SPは幅100%のため拡大させない（はみ出す＆タッチではホバーが無いため） */
@media(min-width:768px){
  .entry-button{width:max(280px,calc((48vw - 64px)/1.31))}
}
@media(min-width:1280px){.entry-button{width:calc((576px - 2vw)/1.31)}}

/* ============================================================
   ENTRYボタン：緑と白を反転（白地に緑文字）＋ホバーは「迫る」  2026-08-23

   ※ 詳細度に注意。recruit-lp.css の `.recruit-lp a{color:inherit}` (0,1,1) や
     このファイル内の後方にある .eb-arrow の背景指定 (0,2,0) に負けないよう、
     ここでは `.entry` を前置して詳細度を1段上げ、ファイル末尾に置いている。
   ============================================================ */
.entry .entry-button{
  background:#fff; color:#176F3A;
  border:2px solid rgba(255,255,255,.9);
}
.entry .entry-button:hover{ color:#176F3A; }
.entry .entry-button .eb-ic{ background:rgba(23,111,58,.10); }
.entry .entry-button .eb-ic svg{ stroke:#176F3A; }
.entry .entry-button .eb-arrow{ background:#176F3A; }
.entry .entry-button .eb-arrow svg{ stroke:#fff; }
/* .entry-inner small の色（#d7eadc）と文字の影を拾わないよう明示的に打ち消す */
.entry .entry-button .eb-txt small{ color:#176F3A; opacity:.72; text-shadow:none; }
.entry .entry-button .eb-txt strong{ color:#176F3A; text-shadow:none; }

/* ============================================================
   ENTRYボタン 2026-08-23（第2版）
   ・紙アイコンを廃止（マークアップ側からも削除）
   ・文字は「エントリー」。ボタン内で中央に置き、矢印だけ右端に固定する
   ・ホバーは参考サイトの「スライド 斜め」(.c-btn.slide.skew)。
     緑が斜めに流れ込み、文字と矢印が反転する
   ============================================================ */
.entry .entry-button{
  position:relative; z-index:1; overflow:hidden;
  justify-content:center;
  transition:color .25s cubic-bezier(.45,0,.55,1);
}
.entry .entry-button .eb-txt{ flex:0 0 auto; align-items:center; text-align:center; }
.entry .entry-button .eb-arrow{
  position:absolute; right:22px; top:50%; margin-top:-13px;
  transition:background .3s cubic-bezier(.45,0,.55,1);
}
.entry .entry-button .eb-arrow svg{ transition:stroke .3s cubic-bezier(.45,0,.55,1); }
.entry .entry-button::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:200px;
  background:#176F3A; z-index:-1;
  transform:skewY(-20deg) scaleY(0); transform-origin:left top;
  transition:transform .3s cubic-bezier(.45,0,.55,1);
}
.entry .entry-button:hover::after{ transform:skewY(-10deg) scaleY(1); }
.entry .entry-button:hover,
.entry .entry-button:hover .eb-txt strong,
.entry .entry-button:hover .eb-txt small{ color:#fff; }
.entry .entry-button:hover .eb-arrow{ background:#fff; }
.entry .entry-button:hover .eb-arrow svg{ stroke:#176F3A; }

/* リード文を白に。直下の子に限定しないとボタン内の <small>（ENTRY）まで白くなる */
.entry .entry-inner > div > small{ color:#fff; }

/* ===================================================================
   ENTRY：募集要項ページ（template-parts/job-detail.php）向けの文字サイズ調整
   2026-08-24
   採用トップは recruit-lp.css 側で「未経験から／一生モノの技術を、その手に。」
   用に文字サイズ・行間・SPの左揃えを調整済み（.recruit-lp スコープ）。
   募集要項ページも同じENTRYパーツ（template-parts/entry.php）を使うようになったが、
   .entry はインタビューページ（page-interview-*.php・文言が異なり短い）とも共通のため、
   ここでは .flow（job-detail.php だけが使うラッパー）を付けてスコープし、
   インタビューページの見た目には影響させない。値は採用トップと完全に同じにする。
   ===================================================================== */
@media(max-width:767px){
  .entry-inner p,
  .entry-inner h2{font-size:32px;font-weight:700;line-height:1.3;margin:0}
  .entry-inner h2{margin-bottom:14px}
  .entry-inner{text-align:center}
  .entry-inner > div{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
}
@media(min-width:768px){
  .entry-inner p,
  .entry-inner h2{font-size:44px;font-weight:700;line-height:1.3;margin:0}
  .entry-inner h2{margin-bottom:18px}
  .entry-inner small{line-height:1.6}
}

/* ===== ENTRY のキャッチコピー 2026-08-26（ユーザー指示） ==========================
   文言：あなたの技術が、／社会の当たり前を支える。
   ヒーロー（インタビューの大見出し）と同じ考え方で組む：
     ・1行ずつブロックにする（.ln）。<br> のままだと text-wrap:balance が効かない
     ・text-wrap:balance … 折り返すとき行の長さを揃え、1〜2文字だけ次行へ送らせない
     ・font-size を画面幅に追従（clamp）… 狭い機種でそもそも折り返さないようにする
   ※このパーツは採用トップ・職種ページ・インタビューで共通。全ページに反映される。
   ================================================================================ */
.entry-inner h2 .ln{display:block}
.entry-inner h2{text-wrap:balance}
@media(max-width:767px){
  .entry-inner h2{font-size:clamp(22px,6.6vw,32px)}
}

/* --- ENTRY セクションの共通スタイル 2026-08-24 → 2026-08-29 全ページ共通化 ---
   **ここが唯一の定義。ページごとにスコープを付けたコピーを作らないこと。**
   以前は `.recruit-lp` / `.jobspage` / `.ivbtm` と3か所に同じ値を書いていたため、
   新しいラッパー（`.flow`＝募集要項ページ）を使うページを作ったときに
   どのリストにも入れ忘れ、SPの高さ（520px のまま）と背景写真の位置（中央のまま）が
   採用トップと食い違った（2026-08-29）。セレクタ列挙をやめ、素の `.entry` で定義する。
   ① ENTRYの内側の骨格。フッターと左端を揃えるため 1280px＋左右64px にする */
/* ページ側の .container 指定（例：.jobspage .container は 1160px／左右30px）に負けないよう、
   ページ名でスコープする代わりに `.container.entry-inner`（要素が両方のクラスを持つ）で
   詳細度を上げる。こうすればどのページに置いても ENTRY の骨格は同じになる 2026-08-29 */
.entry > .container.entry-inner{width:min(100%,1280px);max-width:none;margin-inline:auto;padding-inline:64px}
/* ② ENTRYボタンの「ENTRY」の5文字を、「エントリー」の幅に合わせて両端揃えにする
      （左右に半角分の余白。字間指定は使わないので letter-spacing は0に戻す） */
.entry .entry-button .eb-txt{align-items:center;gap:2px}
.entry .entry-button .eb-txt small{display:flex;justify-content:space-between;width:100%;
  padding-inline:.5em;box-sizing:border-box;letter-spacing:0}
/* ③ 「エントリー」の字間 */
.entry .entry-button .eb-txt strong{letter-spacing:.06em}
/* .ivbtm（インタビュー個別ページ下部）は .interview の外に置くため、
   採用トップの `.recruit-lp{font-family:...}` が当たらない。代替書体だけ補う。
   ※これは「そのページのラッパーにしか必要ないもの」なのでスコープ付きのままでよい */
.ivbtm{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
@media(max-width:768px){
  .entry > .container.entry-inner{padding-inline:20px}
}
@media(max-width:767px){
  /* ④ SPの高さ。中身は約207pxなので、上下の余りが均等に約70pxずつになる
        （2026-08-29 ユーザー指示で 520px→350px。.entry は align-items:center なので
          min-height を下げると上下が均等に詰まる） */
  .entry{min-height:350px}
  /* ⑤ 背景写真（1600×900）。SPでは3人のうち**真ん中の人物が画面中央**に来るようにする
        （2026-08-29 ユーザー指示）。
        右端を固定したまま（background-position-x:100%）拡大すると、
        画像は左方向へはみ出すので、見えている範囲が画像の右寄りへ移動する。
        真ん中の人物は画像の横 約74% の位置にいるので、
          必要な背景幅 = ボックス幅 ÷ (2 × (1 − 0.74)) ≒ ボックス幅 × 1.9
        実際に390px・430pxで描画して中心線と照合し **185%** に決定。
        高さは auto（縦横比維持）。185%なら背景高さは画面幅390pxで約411px、
        430pxで約453pxとなり、セクション高350pxを必ず覆う。 */
  .entry-photo{background-position:100% 60%;background-size:185% auto}
}

/* --- 「採用トップへ戻る」導線：職種ページ（page-jobs.php内の<style>）と同じ見た目を、
   .ivbtm 配下（代表メッセージページ等、募集要項の直前に置く場合）にも適用 2026-08-26 --- */
/* 上の余白が下(44px)より狭く見える、という指摘（2026-08-30）。
   ボタンの上のあきは「直前セクションの下padding＋ここのpadding-top」で決まる。
   インタビューページは直前が24pxなので 24+6=30px しかなく、下の44pxと不揃いだった。
   padding-top を20pxにして 24+20=44px＝上下同じにする（SPは 24+10=34px で下と同じ）。
   ※直前セクションの余白はページごとに違うので、上のあきもページごとに少し変わる
     （インタビュー44 / 職種ページ50 / 福利厚生111 / 代表メッセージ100。下は全ページ44） */
.ivbtm .jobs-back{text-align:center;padding:20px 20px 44px}
.ivbtm .jobs-back__btn{gap:10px;height:48px;padding:0 30px;font-size:14.5px}
.ivbtm .jobs-back__btn svg{width:17px;height:17px;flex:none;transition:transform .25s ease}
.ivbtm .jobs-back__btn:hover svg{transform:translateX(-3px)}
@media(max-width:767px){
  .ivbtm .jobs-back{padding:10px 20px 34px}
  .ivbtm .jobs-back__btn{flex:0 0 auto;height:46px;font-size:14px}
}

/* ===================================================================
   .iv3 社員カード（新デザイン） — 全ページ共通版 2026-08-23
   採用トップ（recruit-lp.css内の .recruit-lp .iv3〜）と同じデザインを、
   職種ページ（page-jobs.php）とインタビュー個別ページ「他の先輩の声」でも
   使うための、ページ限定クラスに依存しない共通コピー。
   recruit-lp.css は /recruit/ ページでしか読み込まれないため、
   全ページで読み込まれる parts.css 側に置く。値は完全に同じものを保つ。
   ================================================================= */
.iv3{position:relative;overflow:hidden;background:#fff;
  aspect-ratio:3/4;display:block;text-decoration:none;
  container-type:inline-size;
  box-shadow:0 4px 8px rgba(0,0,0,.06),0 6px 12px rgba(0,0,0,.04);
  transition:box-shadow .2s,transform .2s}
.iv3:hover,.iv3.in:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12)}
.iv3::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--slash,#8fbf97);
  clip-path:polygon(26% 0, 100% 0, 100% 62%)}
.iv3__photo{
  --portrait-height:55%;--portrait-right:0%;--portrait-bottom:0%;--portrait-scale:1;
  position:absolute;right:var(--portrait-right);bottom:var(--portrait-bottom);top:auto;
  width:auto;height:var(--portrait-height);max-width:none;z-index:1;
  object-fit:contain;object-position:right bottom;
  transform:scale(var(--portrait-scale));transform-origin:right bottom;
  pointer-events:none}
.iv3__photo.ph-hi{--portrait-height:55.5%;--portrait-right:-20%;--portrait-bottom:0%;--portrait-scale:1.33}
.iv3__photo.ph-kh{--portrait-height:74.9%;--portrait-right:-11%;--portrait-bottom:0%;--portrait-scale:1}
.iv3__photo.ph-as{--portrait-height:74.5%;--portrait-right:-28%;--portrait-bottom:0%;--portrait-scale:1}
.iv3__body{position:relative;z-index:2;height:100%;box-sizing:border-box}
.iv3__msg{position:absolute;top:0;left:0;right:0;height:46%;box-sizing:border-box;
  display:flex;align-items:flex-end;
  padding:26px 20px 52px}
/* 引用文は原稿側で改行位置を決めている（コピーとして意味の切れ目で折る）ため white-space:nowrap。
   折り返せない以上、カードが狭いときは文字が縮むしかない。
   下限を15px→13pxに下げた（2026-08-30）。6cqw が15pxを下回るのはカード幅250px未満のときだけなので、
   通常のカード（250px以上）では見た目は一切変わらない。
   250pxを下回るのは募集要項ページ（本文カラムが max-width:820px と狭く、
   スライダーの器そのものが794pxしかない）のようなケース。
   ★このファイルが .iv3__quote の唯一の定義。recruit-lp.css にあった同値コピーは削除した */
.iv3__quote{font:800 clamp(13px,6cqw,19px)/1.6 "Noto Sans JP",sans-serif;color:#1a1a1a;
  white-space:nowrap;margin:0;min-height:4.8em}
.iv3__foot{position:absolute;left:20px;top:39%;right:20px}
.iv3__rule{width:30px;height:2px;background:#47aa4f;margin:0 0 9px}
.iv3__name{font:700 clamp(13px,4.8cqw,15px)/1.45 "Noto Sans JP",sans-serif;color:#1a1a1a}
.iv3__role{font:400 clamp(11px,4.2cqw,13px)/1.5 "Noto Sans JP",sans-serif;color:#6c766e;margin-bottom:4px}
.iv3__year{font:400 clamp(10px,3.6cqw,12px)/1.5 "Noto Sans JP",sans-serif;color:#8b948d;margin:0}
.iv3__more{position:absolute;left:20px;bottom:43px;z-index:2;
  display:inline-flex;align-items:center;gap:14px;min-height:44px;
  font:700 12px/1 "Noto Sans JP",sans-serif}
.iv3__more i{display:block;width:38px;height:1.5px;background:#47aa4f;position:relative;transition:width .25s}
.iv3__more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid #47aa4f;border-right:1.5px solid #47aa4f;transform:rotate(45deg)}
.iv3:hover .iv3__more i{width:52px}
.iv3{color:#1a1a1a}
.iv3 .iv3__more{color:#2f7d37}
/* ===================================================================
   社員インタビュー スライダー — 全ページ共通版 2026-08-24
   採用トップ（recruit-lp.css内の `.recruit-lp .interview-slider〜`）と
   同じ見た目・同じ数値を、ページ限定クラスに依存しない形で置いたもの。
   recruit-lp.css は /recruit/ でしか読み込まれないため、職種ページ（/jobs/）へ
   届かせるにはここ（全ページ読込）に同じ内容が必要。**値は完全に同じものを保つ。**
   JSの実装は js/interview-slider.js（こちらは1か所のみ）。
   ================================================================= */
.interview-slider{position:relative;display:flex;align-items:center;gap:12px;margin-top:45px;padding-bottom:36px}
.iv-viewport{overflow:hidden;flex:1;padding:18px 0}
.iv-track{display:flex;gap:26px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.iv-track>.person-card{flex:0 0 calc((100% - 52px)/3);box-sizing:border-box}
/* タブレット（768〜1023px）は2枚表示。3枚のままだとカードが175〜217pxまで痩せ、
   引用文（.iv3__quote は white-space:nowrap／文字の下限15px）がカード幅を超えて
   右端が切れる（2026-08-30 実機指摘・iPad Air 820px で最大43px切れていた）。
   境目を1159pxにしているのは実測の結果。3枚表示のときの「いちばん長い引用文の余り」は
   1024px:-18px / 1080px:-3px / 1120px:+7.6px / 1160px:+15.9px で、
   1160px以上でようやく余裕が出る。1159px以下は2枚にする（文字16.5〜19pxを保てる）。
   ★ここを変えたら js/interview-slider.js の perView も必ず合わせること
     （送り幅 stepPx() の計算に perView を使うため、ズレると変な位置で止まる）
   ★このカード幅の指定は「このファイルの1か所だけ」。
     以前は recruit-lp.css と interview.css にも同値コピーがあり、
     interview.css だけ1枚表示の境目が 720px（他は767px）になっていて、
     721〜767px では「CSSは3枚・JSは1枚」という食い違いが起きていた（2026-08-30に統合） */
@media (min-width:768px) and (max-width:1159px){
  .iv-track>.person-card{flex:0 0 calc((100% - 26px)/2)}
}
.iv-nav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid #dbe9de;background:#fff;
  color:#47aa4f;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.2s;padding-bottom:3px}
.iv-nav:hover{background:#47aa4f;color:#fff;border-color:#47aa4f}
.iv-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px}
.iv-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#dbe9de;cursor:pointer;transition:.2s}
.iv-dots button.on{background:#47aa4f;width:22px;border-radius:5px}
/* 送る先が無いとき（カード1枚／PCで3枚表示のカード3枚）は矢印とドットを出さない。
   .iv-single＝カードが1枚しかない／.iv-static＝その画面幅では全部が収まる（JSが付与） */
.interview-slider.iv-single .iv-nav,
.interview-slider.iv-single .iv-dots,
.interview-slider.iv-static .iv-nav,
.interview-slider.iv-static .iv-dots{display:none}
.interview-slider.iv-single,
.interview-slider.iv-static{padding-bottom:0}
@media(max-width:767px){
  /* SP＝1枚表示。矢印は下のドットと同じ行の左右に小さく置く（採用トップと同じ） */
  .interview-slider{position:relative;gap:0}
  .iv-track>.person-card{flex:0 0 100%}
  .interview-slider .iv-nav{position:absolute;top:auto;bottom:0;transform:none;z-index:4;
    width:34px;height:34px;font-size:20px;
    background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.10)}
  .interview-slider .iv-prev{left:4px}
  .interview-slider .iv-next{right:4px}
  .iv-dots{bottom:13px}
  /* 横スライド中に .reveal の縦移動が重なると「浮いて」見える（採用トップと同じ対処） */
  .iv-track .reveal{opacity:1;transform:none;transition:none}
  .iv-track .iv3,.iv-track .iv3.in{transition:none}
  .iv-track .iv3:hover,.iv-track .iv3.in:hover{transform:none}
}

/* ===================================================================
   GUIDELINE（募集要項リスト）の細部 2026-08-24 → 2026-08-29 全ページ共通化

   **ここが唯一の定義。ページごとにスコープを付けたコピーを作らないこと。**
   以前は `.recruit-lp`（recruit-lp.css）と `.jobspage/.ivbtm`（このファイル）に
   同じ値を二重に書いていた。そのためどちらのスコープにも当てはまらない
   新デザインの募集要項ページでカードの幅（max-width:820px）が効かず、
   採用トップと横幅が違う、という事故が起きた（2026-08-29）。
   セクションのHTMLは template-parts/requirements.php の1か所、
   見た目はこのブロックの1か所。どのページに置いても同じ見た目になる。
   =================================================================== */
.requirements-list{max-width:820px;margin-inline:auto}
.requirements-list a{grid-template-columns:56px 1fr auto}
.requirements-list .req-txt{border-left:1.5px solid var(--green,#47aa4f);padding-left:20px;
  letter-spacing:.14em;font-weight:800;font-size:19px}
.requirements-list i{width:34px;height:34px;border:1.5px solid var(--green,#47aa4f);border-radius:50%;
  display:grid;place-items:center;font-size:20px;font-weight:700;line-height:1;font-style:normal;
  /* 字形が円の中心よりわずかに下に見えるため、下側にpaddingを取って視覚的な中央に合わせる */
  padding-bottom:3px}
/* 色の反転は共通の .requirements-list i（H方式・丸が広がる）が担当する 2026-08-25 */
@media(max-width:767px){
  .requirements-list a{grid-template-columns:44px 1fr auto}
  .requirements-list li{container-type:inline-size}
  /* 職種名が2行に折り返さないよう、カード幅に応じて文字サイズを自動で縮める。
     下限は13px→15px（小さすぎて読みにくいとのフィードバック）2026-08-25 */
  .requirements-list .req-txt{white-space:nowrap;font-size:clamp(15px,5cqw,19px);
    letter-spacing:.04em;padding-left:14px}
}

/* ===================================================================
   タップ時の演出（共通パーツ）2026-08-24

   対象端末では指で押しても :active が付かない（実測）。
   :active は使わず、js/nav.js が付け外しする .is-tapped で指定する。
   ※ スライダー内の .iv3 は横スライド中に浮いて見える問題があるため、
     SPでは持ち上げを足さない（下線が伸びるだけ）。
   =================================================================== */
@media(hover:none){
  /* タップは一瞬（指が触れているのは0.1秒前後）。元の transition は 0.2〜0.3秒あり、
     指を離す頃には色が3〜4割しか進まないため「薄い緑がチラつく」だけに見えていた。
     押した状態へは即座に、離すときは元の速度でゆっくり戻す。
     .is-tapped はJSが対話要素にだけ付けるので、まとめて指定してよい */
  .is-tapped{transition-duration:.07s !important}
  .jp-textlink.is-tapped{color:#2f7d37}
  /* .jp-pill と .requirements-list は、塗り直しの起きない作り（::afterを
     scaleXで広げる／::beforeの丸をscaleで広げる）に置き換えたため、
     :hover だけで完結する。.is-tapped の指定は不要になったので削除 2026-08-25 */
  .jp-person.is-tapped{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12);z-index:3}
  .requirements .btn-outline.is-tapped{background:var(--green,#47aa4f);color:#fff}
  .requirements .btn-outline.is-tapped span{transform:translateX(4px)}
  .entry .entry-button.is-tapped::after{transform:skewY(-10deg) scaleY(1)}
  .entry .entry-button.is-tapped,
  .entry .entry-button.is-tapped .eb-txt strong,
  .entry .entry-button.is-tapped .eb-txt small{color:#fff}
  .entry .entry-button.is-tapped .eb-arrow{background:#fff}
  .entry .entry-button.is-tapped .eb-arrow svg{stroke:#176F3A}
  .iv3.is-tapped .iv3__more i{width:52px}
  .iv-nav.is-tapped{background:#47aa4f;color:#fff;border-color:#47aa4f}
}

/* ===================================================================
   ENTRY FLOW（エントリー方法と採用フロー）の見出し 2026-08-29
   採用トップ（/recruit/）と募集要項ページで同じ部品を使い回すため、
   マークアップは template-parts/entry-flow.php に一本化した。
   見出しの文字組みだけは、以前ページごとにCSSを複製していて
   **採用トップは太字・募集要項ページは細字**という食い違いが起きたため、
   ここ（全ページで読み込まれる parts.css）に1か所だけ置く。
   ページ個別のCSS（recruit-lp.css の .recruit-lp 系 / style.css の .job-flow 系）には
   見出しの文字指定を書かないこと。
   ・色の #6b7268 は recruit-lp.css の --muted と同じ値。style.css の --muted は
     rgba(26,26,26,.5) と別物なので、変数ではなく実値で揃えている
   =================================================================== */
.entry-flow .section-heading{text-align:left;margin-bottom:45px}
.entry-flow .section-label{font-size:clamp(34px,4.2vw,60px);line-height:1;font-weight:900;
  color:var(--green,#47aa4f);letter-spacing:.06em;margin-bottom:10px}
.entry-flow .section-heading h2{font-size:18px;font-weight:700;margin:0;color:#6b7268}

/* 「採用トップへ戻る」ボタン：GUIDELINE（募集要項）セクションの最下部・中央
   （2026-08-29 ユーザー指示）。マークアップは template-parts/requirements.php にあり、
   $args['back_to_recruit'] が true のときだけ出る（採用トップ自身では出さない）。
   ボタン自体の見た目（高さ・文字サイズ）は style.css の .job-specs .jobs-back（旧デザイン）と
   同じ値に保つこと。 */
.requirements .req-back{text-align:center;margin-top:44px}
.requirements .req-back .jobs-back__btn{gap:10px;height:48px;padding:0 30px;font-size:14.5px}
.requirements .req-back .jobs-back__btn svg{width:17px;height:17px;flex:none;transition:transform .25s ease}
.requirements .req-back .jobs-back__btn:hover svg{transform:translateX(-3px)}
@media(max-width:767px){
  .requirements .req-back{margin-top:32px}
  .requirements .req-back .jobs-back__btn{height:46px;font-size:14px}
}

/* ===================================================================
   ENTRY セクションのキャッチコピー「THE NEXT FIELD／次の時代の現場へ」2026-08-29
   マークアップは template-parts/entry.php の1か所。
   **文字サイズは下の .entry-catch__en / __ja が自前で持つ。**
   .entry-inner h2 のサイズはページごとに別々の値（45px / 32px / 44px）が
   当たっているため、h2側に任せるとページごとに大きさが変わってしまう。
   ここで子要素に直接サイズを持たせることで、どのページでも同じ見た目になる。
   ページ個別のCSSにこのキャッチ用の指定を書き足さないこと。
   =================================================================== */
.entry-catch{margin:0 0 16px;font-weight:700}
/* 英字は明るい緑のアクセント（2026-08-29 ユーザーがD案を選択）。
   #a8e6ae は濃い緑の背景（.entry-overlay の #146434）に対してコントラスト比 5.03:1 で、
   小さめの文字でもWCAG AAの本文基準（4.5:1）を満たす。
   text-indent は letter-spacing と同じ値。字間は最後の文字の右にも入るため、
   これが無いと左揃えのときに右へ寄って見える */
/* ★書体は Noto Sans JP に固定（2026-08-30 ユーザー判断）。
   ここは全ページ共通のENTRYパーツなのに、Jostを読み込むページ（インタビュー・/jobs/）と
   読み込まないページ（採用トップ・福利厚生・募集要項）で書体が分かれていた。
   Jost側にそろえる案もあったが、Noto Sans JP でよいとの判断。
   var(--font-en) を使うと Jost が先頭に来てしまうので、ここでは直接指定する。 */
.entry-catch__en{display:block;font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(13px,1.3vw,15px);font-weight:700;letter-spacing:.3em;
  color:#a8e6ae;margin:0 0 12px;text-indent:.3em}
.entry-catch__ja{display:block;font-size:clamp(30px,4.2vw,46px);font-weight:700;
  line-height:1.28;letter-spacing:.06em;color:#fff;text-wrap:balance}
@media(max-width:767px){
  .entry-catch{margin-bottom:12px}
  .entry-catch__en{letter-spacing:.26em;text-indent:.26em;margin-bottom:9px}
}

/* ===================================================================
   「採用トップへ戻る」ボタンの色 2026-08-29 ユーザー指示
   代表メッセージページに「仕事について知る」（進む導線）を足したことで、
   戻る導線と主従を付けたい、という要望。全ページの戻るボタンを薄い緑グレーにする。

   ・素のクラス名（.jobs-back__btn）で1か所だけ置く。ページ名でスコープしない
     （引き継ぎメモのハマり35。スコープ別の同値コピーは作らない）
   ・`.jp-pill`（このファイル上方）と同じ詳細度なので、必ずこれより後ろに置くこと
   ・仕組みは .jp-pill のまま（::after の面を左から広げる）。色だけ差し替える
   ・ホバーで薄い面に白文字を乗せると 1.8〜2.2:1 で読めないため、文字は濃色に切り替える
     （通常時 #4f8557 は白地で4.35:1、ホバー時 #1a1a1a は #dbe8dd 上で11.9:1）
   ・対象：/jobs/ ／社員インタビュー5 ／募集要項3（requirements の req-back）／
     福利厚生 ／代表メッセージ。同じ .jobs-back__btn を使っている全ページ
   ・`.interview .relx-cta .jp-pill`（関連リンクCTA）は .jobs-back__btn を
     持たないので影響しない
   =================================================================== */
.jobs-back__btn{border-color:#c2d5c4; color:#4f8557}
.jobs-back__btn::after{background:#dbe8dd}
.jobs-back__btn:hover{color:#1a1a1a}

/* ENTRY FLOW「面接会場へのアクセスはこちら」の折り返し位置（2026-09-02 ユーザー指示）。
   どの画面幅でも「面接会場への／アクセスはこちら」でしか折り返らないようにする。
   <i> をそれぞれ nowrap にするだけなので、1行に収まる幅では改行しない（<br> は使わない）。
   .entry-flow は採用トップ（.flow）と募集要項（.job-flow）の共通クラス。
   追記は末尾・スコープ付き（ハマりどころ1） */
.entry-flow .flow-list .flow-access .fa-txt{font-weight:inherit;text-align:center}
.entry-flow .flow-list .flow-access .fa-txt i{font-style:normal;white-space:nowrap}