/* =========================================================
   採用サイト（recruit.alivecast.co.jp）専用スタイル

   alivecastrecruitlp.html / job-*.html のモックアップから
   そのまま抜き出したCSSです（内容は変えていません）。
   common.css と重複する行（box-sizingのリセットなど）が
   多少ありますが、動作に影響はないのでそのままにしています。
   ========================================================= */


/* =========================================================
   AliveCast 採用サイト
   カラーは入口看板（青地＋緑・黄・橙の三角）に由来
   ========================================================= */
:root{
  --ink:#333333;          /* 本文・見出し */
  --blue:#1C92BF;         /* 看板のブルー */
  --blue-deep:#12414F;
  --yellow:#EEB156;
  --orange:#C97B3D;
  --paper:#FFFFFF;
  /* セクションの区切りを分かりやすくするための背景色。
     どちらも彩度をかなり落としてあるので、文字は問題なく読めます。
       --paper-2 … 看板のブルー（--blue）を薄めた色
       --paper-3 … 看板のイエロー（--yellow）を薄めた色
     この2色と白を交互に使って、セクションの切り替わりを見せています。 */
  --paper-2:#EFF6FA;
  --paper-3:#FBF6EE;
  --line:#E2E2E2;
  --muted:#6B6B6B;

  /* 【フォント：M PLUS 2（Google Fonts）】
     読み込みは inc/enqueue.php で行っています。400と700の2ウェイトだけです。

     以前は端末のフォント頼りだったため、Windowsでは多くの場合
     「MS Pゴシック」で表示され、Macのヒラギノとは別物の見え方になっていました。
     M PLUS 2を先頭に置くことで、どの端末でも同じ字面になります。

     ⚠️ 後ろの指定（ヒラギノ〜MS Pゴシック）は消さないでください。
        Webフォントの読み込みが終わるまでの表示と、
        通信が失敗したときの備えを兼ねています。 */
  --display:"M PLUS 2","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS PGothic","ＭＳ Ｐゴシック",sans-serif;
  --body:"M PLUS 2",Avenir,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans",ヒラギノ角ゴシック,メイリオ,Meiryo,"MS PGothic","ＭＳ Ｐゴシック",sans-serif;
  /* ライブサイトに合わせて、等幅フォントは使わず本文と同じフォントに統一 */
  --mono:"M PLUS 2",Avenir,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans",ヒラギノ角ゴシック,メイリオ,Meiryo,"MS PGothic","ＭＳ Ｐゴシック",sans-serif;

  --wrap:1080px;
  --gutter:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

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

/* ---------- 共通：セクション見出し ---------- */
.sec{padding:clamp(64px,9vw,112px) 0}
/* 背景色でセクションの区切りを見せる。
   .sec（白）→ .sec--tint（薄い青）→ .sec（白）→ .sec--warm（薄い黄）…
   のように交互に使います。上下の境目に細い線も入れて、
   色の差が分かりにくい環境でも区切りが見えるようにしています。 */
.sec--tint{background:var(--paper-2);border-block:1px solid var(--line)}
.sec--warm{background:var(--paper-3);border-block:1px solid var(--line)}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--blue);
  margin:0 0 10px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:0;height:0;
  border-left:7px solid var(--blue);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.sec-title{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.45;
  letter-spacing:.01em;
  margin:0 0 14px;
}
/* 見出しの中で、いちばん伝えたい言葉だけを強調するための印。
   使い方： <h2 class="sec-title"><span class="sec-title__em">売れる仕組み</span>を、Webでつくる。</h2>

   大きさは em（親に対する倍率）で指定しています。
   .sec-title の文字サイズは画面幅で変わる clamp() なので、
   px で書くとスマホで強調部分だけが不自然に大きくなってしまいます。
   em にしておけば、どの画面幅でも同じ比率を保てます。 */
.sec-title__em{
  font-size:1.3em;
  color:var(--blue);
}
/* 代表メッセージのセクションだけ背景が濃紺（--blue-deep）です。
   そこに看板ブルー（--blue）を置くと暗い色どうしで沈んでしまうので、
   同じセクションの eyebrow と同じ、明るい水色にそろえます。 */
.msg .sec-title__em{color:#9FD6E8}

.sec-lead{margin:0 0 clamp(32px,4vw,48px);color:var(--muted);max-width:44em}
/* 「○○（プランナー）です。」のように、語尾だけが次の行に落ちると
   読みにくいので、ひとかたまりとして折り返させるための指定。
   inline-block にすると、この中では改行されなくなります。 */
.nowrap-tail{display:inline-block}

/* ---------- ヘッダー ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:var(--gutter)}
.hdr__brand{display:flex;align-items:center;gap:16px}
/* 実際のAliveCastロゴ（コーポレートサイトより取得） */
.hdr__logo{display:flex;align-items:center;text-decoration:none;line-height:0}
.hdr__logo img{height:38px;width:auto;display:block}
.hdr__tag{display:flex;flex-direction:column;line-height:1.4;padding-left:16px;border-left:1px solid var(--line)}
.hdr__tag-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.hdr__tag-main{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--ink)}
.hdr__right{display:flex;align-items:center;gap:34px}
.hdr__nav{display:flex;gap:22px;align-items:center}
.hdr__nav a{font-size:13px;text-decoration:none;color:var(--muted)}
.hdr__nav a:hover{color:var(--blue)}
/* 横型ヘッダーのときのエントリーボタン（もとはHTMLに直接書いていた指定）。
   .btn より前に書いてあるため、そのままだと .btn の padding に負けます。
   セレクタに .hdr を足して詳細度を上げ、こちらが優先されるようにしています。 */
.hdr .hdr__cta{flex:none;padding:9px 18px;font-size:13px}
/* 横型ヘッダー（959px以下）では、メニューを出さずにロゴとエントリーボタンだけにします。
   メニューが10項目あり、横一列に並べると1項目が3〜4行に折り返して崩れるためです
   （以前は820pxで切り替えていましたが、項目を増やしたときに821〜959pxで崩れました）。
   スマホと同じく、画面下の固定エントリーバーがあるので応募の導線は減りません。 */
@media(max-width:959px){.hdr__nav{display:none}}

/* =========================================================
   ヘッダー（画面が広いときは、左端に縦型で固定表示）

   参考にした「にじのわクリニック」様の採用ページと同じように、
   ロゴ・ナビ・エントリーボタンを画面左端に縦一列で固定します。
   スマホ・タブレットの狭い画面でこれをやると窮屈になるので、
   ここから下は「画面幅960px以上のときだけ」効くようにしています
   （960px未満は、上に書いてある通常の横型ヘッダーのままです）。

   仕組みは単純で、position を sticky から fixed に変え、
   .hdr__in を「横並び」から「縦並び」に変えているだけです。
   ヘッダーが左端に浮くぶん、<body> の左側に余白（padding-left）を
   空けて、他のセクションの中身と重ならないようにしています。

   ⚠️ 左右を入れ替えるときは、次の4つを必ずセットで直してください。
      1つでも残すと、本文とヘッダーが重なります。
        1. body の padding-left / padding-right
        2. .hdr の left / right
        3. .hdr の border-right / border-left（本文との境目の線）
        4. 下の「エントリーボタン」の位置（.hdr__cta まわり）
   ========================================================= */
@media(min-width:960px){
  body{padding-left:230px}

  .hdr{
    position:fixed;
    top:0;left:0;bottom:0;right:auto;
    width:230px;height:100vh;
    border-bottom:none;border-right:1px solid var(--line);
    background:var(--paper);
  }
  /* ヘッダーの中を「上＝ロゴ」「下＝メニュー」の2ブロックに分けます。
     境目に線を引き、下ブロックだけ背景色を変えることで、
     どこからがメニューなのかが一目で分かるようにしています。 */
  .hdr__in{
    flex-direction:column;
    align-items:stretch;justify-content:flex-start;
    height:100%;padding:0;
  }

  /* 上ブロック：ロゴ。
     以前は看板のイエローを敷いていましたが、白に変えました。
     ロゴ自体が青とグレーの繊細な形なので、濃い色の上に置くと
     ロゴのほうが背景に負けて見えます。白地のほうがロゴが立ちます。
     下のメニューとの境目は、色ではなく細い線で分けています。 */
  .hdr__brand{
    flex-direction:column;align-items:center;gap:10px;text-align:center;
    padding:32px 22px 26px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .hdr__logo img{height:44px}
  .hdr__tag{
    border-left:none;padding-left:0;
    border-top:1px solid var(--line);padding-top:8px;
    align-items:center;
  }
  /* 白地に戻したので、小さいほうの行はグレーに戻して強弱を付けます
     （2行とも同じ濃さだと、どちらを読めばよいか分からなくなるため） */
  .hdr__tag-sub{font-size:11px;color:var(--muted)}
  .hdr__tag-main{font-size:15px;letter-spacing:.14em;color:var(--ink)}

  /* 下ブロック：メニュー＋エントリーボタン
     justify-content:flex-end で中身をまとめて下へ寄せ、
     メニューとエントリーボタンが近くに並ぶようにしています
     （上寄りだと、メニューとボタンの間に大きな空白ができてしまうため）。
     ボタンをヘッダーの一番下にぴったり付けたいので下側のpaddingは0にして、
     左右のpaddingはメニュー項目側（.hdr__nav）で持たせています。 */
  .hdr__right{
    display:flex;flex-direction:column;align-items:center;
    justify-content:flex-end;
    flex:1;width:100%;padding:30px 0 0;
    background:var(--paper);
  }
  .hdr__nav{flex-direction:column;gap:4px;align-items:stretch;width:100%;padding:0 20px}
  /* 縦型のときは1項目ずつを行として見せる。文字を太く・濃くして、
     横型のときより存在感が出るようにしています。 */
  .hdr__nav a{
    font-family:var(--display);font-weight:700;font-size:14px;
    color:var(--ink);text-align:center;
    padding:11px 6px;border-radius:2px;
    transition:background .15s ease,color .15s ease;
  }
  .hdr__nav a:hover{background:rgba(28,146,191,.1);color:var(--blue)}
  /* メニューのすぐ下に置き、幅いっぱいの「帯」にして画面の底に付けます。
     （上の .hdr__right が中身をまとめて下寄せにしているので、
     　ここで margin-top:auto を使って押し下げる必要はありません） */
  .hdr .hdr__cta{
    margin-top:26px;
    width:100%;justify-content:center;
    padding:18px;font-size:14px;border-radius:0;
  }

  /* 保険：どうしても画面に収まらない、とても低い画面のときは
     ヘッダーの中だけスクロールできるようにして、下のメニューや
     エントリーボタンに必ず届くようにします。収まっているときは何も起きません。 */
  .hdr{overflow-y:auto}
}

/* 縦型ヘッダーで、画面の高さが低いとき（ノートパソコンなど）だけ、すき間を詰めます。
   メニューが10項目あるため、標準の余白のままだと高さが約840px必要で、
   それより低い画面ではエントリーボタンが画面の外に押し出されてしまいます。
   行間と上下の余白を詰めて、約600pxに収まるようにしています。
   ⚠️ メニュー項目をさらに増やすときは、この859pxも見直してください。 */
@media(min-width:960px) and (max-height:859px){
  .hdr__brand{padding:20px 22px 16px}
  .hdr__logo img{height:38px}
  .hdr__right{padding-top:16px}
  .hdr__nav a{padding:7px 6px;line-height:1.5}
  .hdr .hdr__cta{margin-top:14px;padding:14px}
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:15px;
  padding:15px 30px;border-radius:2px;text-decoration:none;
  border:2px solid transparent;transition:transform .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--yellow);color:var(--ink)}
.btn--fill:hover{background:#F5C685}
.btn--ghost{border-color:currentColor}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:#146678}
.btn::after{content:"→";font-family:var(--body)}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;
}

/* =========================================================
   HERO ── 対句を対称に見せる
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:var(--blue-deep);
  color:#fff;
  padding:clamp(72px,11vw,132px) 0 clamp(56px,8vw,96px);
}
/* 看板の斜めカラーバンド */
.hero::after{
  content:"";position:absolute;right:-8%;bottom:-40%;
  width:70%;height:120%;
  background:
    linear-gradient(155deg,transparent 46%,var(--blue) 46% 68%,var(--yellow) 68% 88%,transparent 88%);
  opacity:.9;transform:rotate(-4deg);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
/* テキストが横に広がりすぎると読みにくいので、幅を抑えます。
   背景の写真は右側のほうがよく見えるので、文字は左半分に置く形です。 */
.hero__content{max-width:min(640px,62%)}
@media(max-width:860px){.hero__content{max-width:100%}}

/* =========================================================
   ヒーローの背景スライドショー

   濃紺（--blue-deep）で塗ったヒーローの領域いっぱいに写真を敷き、
   透過させて背景色となじませています。切り替えはCSSアニメーションだけで、
   JavaScriptは使っていません。

   【仕組み】
   すべてのスライドに同じアニメーション（ac-hero-fade）を当てて、
   開始タイミング（animation-delay）だけを1枚ずつずらしています。
   1枚あたりの表示は6秒。写真が2枚なら12秒、3枚なら18秒で一周します。

   【写真を増やすとき】
   front-page.php の $hero_slides にファイル名を足すだけです。
   枚数（--slide-count）と切り替えの間合いは、PHP側が出力する
   data-count 属性を見てCSSが自動で合わせます。
   ※ 対応しているのは2枚と3枚です。4枚以上にしたいときは、
   　 下の ac-hero-fade-3 を真似して4枚用のものを足してください。
   ========================================================= */
.hero__slideshow{
  /* 写真1枚あたりの表示時間と、写真の枚数。
     この2つから一周の長さ（アニメーションの再生時間）を計算しています。 */
  --slide-duration:6s;
  --slide-count:2;

  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
/* 枚数に応じて、変数と切り替えパターンを切り替える。
   写真がぴったり入れ替わる（クロスフェードする）タイミングは
   枚数によって変わるため、専用のアニメーションを用意しています。 */
.hero__slideshow[data-count="2"]{--slide-count:2}
.hero__slideshow[data-count="2"] .hero__slide{animation-name:ac-hero-fade-2}
.hero__slideshow[data-count="3"]{--slide-count:3}
.hero__slideshow[data-count="3"] .hero__slide{animation-name:ac-hero-fade-3}
.hero__slideshow[data-count="4"]{--slide-count:4}
.hero__slideshow[data-count="4"] .hero__slide{animation-name:ac-hero-fade-4}
.hero__slide{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  /* 収め方と位置はPHPからCSS変数で受け取ります（--fit / --pos）。
     指定が無いときは cover・中央を使います。 */
  background-size:var(--fit,cover);
  background-position:var(--pos,center);
  opacity:0; /* 通常は透明。アニメーションの出番のときだけ浮かび上がる */
  animation-duration:calc(var(--slide-duration) * var(--slide-count));
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.hero__slide:nth-child(1){animation-delay:calc(var(--slide-duration) * 0)}
.hero__slide:nth-child(2){animation-delay:calc(var(--slide-duration) * 1)}
.hero__slide:nth-child(3){animation-delay:calc(var(--slide-duration) * 2)}
.hero__slide:nth-child(4){animation-delay:calc(var(--slide-duration) * 3)}

/* スマホでは、ヒーローの枠が縦長になります。
   パソコンと同じ設定のままだと、横長の写真は左右が大きく切り落とされて
   被写体が枠の外に出てしまうため、写真ごとに別の指定（--sp-fit / --sp-pos）を
   使えるようにしています。指定が無い写真は、パソコンと同じ設定のままです。 */
@media(max-width:640px){
  .hero__slide{
    background-size:var(--sp-fit,var(--fit,cover));
    background-position:var(--sp-pos,var(--pos,center));
  }
}

/* 写真の上に濃紺のベールをかける。左（文字がある側）を濃く、
   右へ向かって薄くすることで、文字の読みやすさと写真の見え方を両立させます。 */
.hero__slideshow::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    rgba(18,65,79,.92) 0%,
    rgba(18,65,79,.78) 45%,
    rgba(18,65,79,.55) 100%
  );
}

/* 写真が2枚のとき：1周（12秒）のうち前半で表示する。
   50%（次の写真が現れ始める瞬間）にちょうど消えきるよう、
   フェードアウトの終わりを次の写真のフェードインと重ねています。
   こうすると背景が一瞬だけ写真なしになる、という間延びが起きません。 */
@keyframes ac-hero-fade-2{
  0%   {opacity:0}
  6%   {opacity:1}
  50%  {opacity:1}
  56%  {opacity:0}
  100% {opacity:0}
}

/* 写真が3枚のとき：1周（18秒）を3等分し、自分の番（約33%）だけ表示する。
   考え方は2枚のときと同じで、次の写真と入れ替わる境目を重ねています。 */
@keyframes ac-hero-fade-3{
  0%     {opacity:0}
  5%     {opacity:1}
  33.33% {opacity:1}
  38.33% {opacity:0}
  100%   {opacity:0}
}

/* 写真が4枚のとき：1周（24秒）を4等分し、自分の番（25%）だけ表示する。 */
@keyframes ac-hero-fade-4{
  0%   {opacity:0}
  4%   {opacity:1}
  25%  {opacity:1}
  29%  {opacity:0}
  100% {opacity:0}
}

/* 対句（トップページのh1見出し）
   中身は span なので、そのままだと文字のように横一列に並んでしまいます。
   display を指定して、それぞれを行・線として見せています。 */
.couplet{
  display:block;margin:0 0 30px;
  /* h1のブラウザ標準スタイル（大きな文字・太字・上下の余白）を打ち消す。
     実際の文字サイズは下の .couplet__row 側で決めています。 */
  font-size:inherit;font-weight:inherit;
}
.couplet__row{
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,6.4vw,68px);
  /* 大きな文字は、字間が空いていると間延びして見えます。
     サイズを上げたぶん、字間をわずかに詰めて締まりを出しています。 */
  line-height:1.3;letter-spacing:-.015em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .1em;
}
.couplet__lead{color:#8FCBE0}
.couplet__rule{
  display:block;
  height:1px;background:linear-gradient(90deg,rgba(255,255,255,.55),transparent);
  margin:14px 0;max-width:640px;
}
.hero__sub{
  font-size:clamp(14px,1.6vw,16px);line-height:2.1;
  color:#DCEFF4;max-width:34em;margin:0 0 34px;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* 注目職種のリボン */
/* カード全体がリンク。うっすら透けたガラスのような板に見せて、
   背景のスライドショーとなじませています。 */
.hero__pin{
  margin-top:40px;
  display:inline-flex;align-items:center;gap:clamp(16px,2.5vw,28px);
  padding:16px 20px 16px 22px;
  text-decoration:none;color:#fff;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);
  border-left:3px solid var(--yellow);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.hero__pin:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
  border-left-color:var(--yellow);
  transform:translateX(4px);
}

/* 左側の小さな説明と「NOW HIRING」バッジ */
.hero__pin__label{
  display:flex;flex-direction:column;gap:7px;
  font-size:11.5px;letter-spacing:.04em;color:#DCEFF4;line-height:1.4;
}
.hero__pin__badge{
  align-self:flex-start;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;
  background:var(--yellow);color:var(--ink);
  padding:3px 9px;
}

/* 中央の職種名 */
.hero__pin__job{display:flex;flex-direction:column;gap:2px}
.hero__pin__title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(16px,2vw,20px);line-height:1.4;color:#fff;
}
.hero__pin__en{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;color:var(--yellow);
}

/* 右端の丸い矢印。ホバーで塗りつぶして前に出る */
.hero__pin__arrow{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.hero__pin__arrow::after{content:"→";font-size:15px;line-height:1}
.hero__pin:hover .hero__pin__arrow{
  background:var(--yellow);border-color:var(--yellow);color:var(--ink);
}

@media(max-width:640px){
  /* 狭い画面では横一列だと窮屈なので、説明と職種名を縦に積む */
  .hero__pin{flex-wrap:wrap;gap:12px 16px;padding:14px 16px}
  .hero__pin__label{width:100%}
  .hero__pin__job{flex:1}
}

/* =========================================================
   数字
   ========================================================= */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fig{background:var(--paper);padding:32px 22px;text-align:center}
.fig__num{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(30px,4.4vw,44px);
  line-height:1.1;color:var(--blue);letter-spacing:-.02em;
}
.fig__num small{font-size:.44em;margin-left:3px;letter-spacing:0}
.fig__label{font-size:12.5px;color:var(--muted);margin-top:10px}
@media(max-width:720px){
  .figs{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   強み3点
   ========================================================= */
.merits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.merit{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;text-decoration:none;
}
.merit__bg{position:absolute;inset:0;z-index:-2}
.merit__bg img{width:100%;height:100%;object-fit:cover}
.merit::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(190deg,rgba(18,65,79,.35) 0%,rgba(18,65,79,.92) 100%);
  transition:background .25s ease;
}
.merit:nth-child(1)::before{background:linear-gradient(190deg,rgba(28,146,191,.3) 0%,rgba(18,65,79,.92) 100%)}
.merit:nth-child(2)::before{background:linear-gradient(190deg,rgba(18,65,79,.4) 0%,rgba(18,65,79,.94) 100%)}
.merit:nth-child(3)::before{background:linear-gradient(190deg,rgba(201,123,61,.32) 0%,rgba(18,65,79,.92) 100%)}
.merit:hover img{transform:scale(1.06)}
.merit__bg img{transition:transform .5s ease}
.merit__inner{position:relative;padding:26px 26px 28px}
.merit__t{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 12px;line-height:1.5;color:#fff}
.merit p{margin:0 0 16px;font-size:14px;line-height:1.9;color:#E4F1F4}
.merit__more{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:12.5px;color:var(--yellow);text-decoration:none;
}
.merit__more:hover{text-decoration:underline}
@media(max-width:860px){.merits{grid-template-columns:1fr}}

/* =========================================================
   募集職種
   ========================================================= */
/* 枠は他の職種カードと同じグレーから始め、
   マウスを載せたときだけ青くなります（最初から青いと、
   カーソルを当てても変化が分からないためです）。
   太さは2pxのままにして、当たったときに中身がずれないようにしています。 */
.job-featured{
  background:var(--paper);
  border:2px solid var(--line);
  position:relative;text-decoration:none;color:inherit;
  display:grid;grid-template-columns:1.35fr 1fr;
  margin-bottom:clamp(20px,3vw,28px);
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.job-featured:hover{
  box-shadow:0 10px 28px rgba(18,65,79,.14);
  border-color:var(--blue);
  transform:translateY(-3px);
}
.job-featured__body{padding:clamp(24px,3vw,32px);display:flex;flex-direction:column}
.tag-hot{
  display:inline-block;background:var(--blue);color:#fff;
  font-family:var(--display);font-weight:700;font-size:12px;
  padding:5px 14px;letter-spacing:.06em;margin-bottom:16px;align-self:flex-start;
}
.job-featured h3{
  font-family:var(--display);font-weight:900;
  font-size:clamp(21px,2.8vw,27px);margin:0 0 4px;line-height:1.4;
}
.job-featured .job__en{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.job-featured__kw{font-size:14px;line-height:1.95;color:var(--muted);margin:16px 0 0;flex:1}
/* 写真はカードの高さ（＝左側のテキストの高さ）に合わせて切り抜きます。
   こうすると写真の縦横比に引っ張られてカードが間延びしません。 */
.job-featured__media{
  background:var(--paper-2);border-left:1px solid var(--line);
  overflow:hidden;
}
/* 他の職種カードと動きを揃えます（ふだんは白黒、ホバーでカラー＋ゆっくり拡大） */
.job-featured__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%);
  transition:transform .5s ease,filter .4s ease;
}
.job-featured:hover .job-featured__media img{transform:scale(1.04);filter:grayscale(0%)}
@media(max-width:860px){
  .job-featured{grid-template-columns:1fr}
  .job-featured__media{border-left:none;border-top:1px solid var(--line);min-height:180px}
}

/* 円形の矢印アイコン（各職種の「詳しく見る」導線） */
.job-arrow{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--blue);
  color:var(--blue);margin-top:24px;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.job-arrow::after{content:"→";font-size:16px}
a:hover .job-arrow{background:var(--blue);color:#fff;transform:translateX(3px)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12px;border:1px solid var(--line);
  padding:4px 12px;color:var(--muted);border-radius:100px;
}

.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,28px)}
/* 枠の太さはホバー前後で変えません（1pxのまま色だけ変える）。
   太さを変えると、その分だけ中身の位置がずれて画面が揺れて見えるためです。
   目玉職種カード（.job-featured）と同じ青い枠に揃えています。 */
.job{
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.job:hover{
  box-shadow:0 10px 28px rgba(18,65,79,.12);
  transform:translateY(-3px);
  border-color:var(--blue);
}
.job__media{background:var(--paper-2);border-bottom:1px solid var(--line);aspect-ratio:16/9;overflow:hidden}
/* ふだんは白黒。マウスを載せた職種だけ写真がカラーになり、
   「いま見ている職種」がはっきり分かるようにしています。 */
.job__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%);
  transition:transform .5s ease,filter .4s ease;
}
.job:hover .job__media img{transform:scale(1.06);filter:grayscale(0%)}
.job__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.job .job__en{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.14em}
/* 英語ラベルと募集状況（1名募集）を1行に並べる。
   募集状況は「今応募する理由」を伝える情報なので、
   カードを開く前に見えるよう上部に置いています。 */
.job__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.job__note{
  flex:none;
  font-family:var(--display);font-weight:700;font-size:11px;
  color:var(--ink);background:var(--yellow);
  padding:3px 9px;letter-spacing:.02em;
}
.job h3{font-family:var(--display);font-weight:700;font-size:17.5px;margin:6px 0 12px;line-height:1.5}
.job__kw{font-size:13px;line-height:1.9;color:var(--muted);margin:0;flex:1}
@media(max-width:860px){.jobs{grid-template-columns:1fr}}

/* =========================================================
   選考プロセス
   ========================================================= */
/* 5ステップを、アイコン付きのカードを横に並べて見せる。
   1行に5枚だと1枚あたりが細くなりすぎるので、画面幅に応じて
   5列 → 3列 → 1列 と段階的に折り返します。 */
/* 5枚を横に並べ、カードとカードのあいだ（gap）の中央に矢印を描きます。
   矢印用の列は作りません。列を足すとカードがその列に入り込んで
   幅が潰れてしまうためです。
   gapの幅は --flow-gap にまとめてあり、矢印の幅もこれを使います。 */
.flow{
  --flow-gap:clamp(24px,2.6vw,34px);
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--flow-gap);
  align-items:stretch;
  /* 5列だと1枚あたりが細くなりすぎるので、このセクションだけ
     本文幅（--wrap:1080px）より少し外側まで広げます。
     左右に同じ幅だけはみ出させたいので、負のマージンで左に寄せた分を
     width の加算ぶんで取り戻す形にしています。 */
  width:calc(100% + clamp(0px,13vw,200px));
  margin-left:calc(clamp(0px,6.5vw,100px) * -1);
}
/* はみ出させてよいのは、本文の外側に余白が十分あるときだけです。
   960px以上では左端に230pxの縦型ヘッダーがあるので、そのぶん本文に使える幅が狭く、
   1440px未満だとはみ出した分が「左はヘッダーの下に潜り込み、右は画面の外に出て
   横スクロールが発生する」状態になります（ヘッダーを左へ移したときに実際に発生）。
   そのため1439px以下では、はみ出しをやめて本文幅に収めます。
   ⚠️ ヘッダーの幅（230px）を変えたときは、この数字も見直してください。 */
@media(max-width:1439px){.flow{width:100%;margin-left:0}}
.flow li{
  background:var(--paper);border:1px solid var(--line);
  padding:24px 14px 22px;
  display:flex;flex-direction:column;
  position:relative;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}

/* =========================================================
   カードとカードのあいだの「≫」（2本線の矢印）

   最後の1枚以外の右側に、::after で描いています。
   線を2本重ねて「く」の字を作り、それを2つ並べています。
   ========================================================= */
.flow li:not(:last-child)::after{
  content:"";
  position:absolute;top:50%;left:100%;
  /* カードの右端から、次のカードまでの余白いっぱいに広げる */
  width:var(--flow-gap);height:12px;
  transform:translateY(-50%);
  pointer-events:none;
  /* 上向きと下向きの斜線を組み合わせて「く」の字を作り、
     それを少しずらして2つ並べることで「≫」に見せています。 */
  background-repeat:no-repeat;
  background-size:9px 6px;
  background-image:
    linear-gradient(45deg,transparent 42%,var(--blue) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--blue) 42% 58%,transparent 58%),
    linear-gradient(45deg,transparent 42%,var(--blue) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--blue) 42% 58%,transparent 58%);
  background-position:
    calc(50% - 4px) 0, calc(50% - 4px) 6px,
    calc(50% + 4px) 0, calc(50% + 4px) 6px;
}
.flow li:hover{
  border-color:var(--blue);
  box-shadow:0 10px 28px rgba(18,65,79,.1);
  transform:translateY(-3px);
}
.flow__head{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;margin-bottom:16px;
}
.flow__icon{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  background:rgba(28,146,191,.08);
  color:var(--blue);
}
.flow__icon svg{width:32px;height:32px}
.flow__n{
  font-family:var(--mono);font-size:12px;color:var(--blue);
  letter-spacing:.12em;
}
.flow__body{text-align:center}
.flow h3{
  font-family:var(--display);font-weight:700;font-size:15px;
  margin:0 0 10px;line-height:1.6;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.flow p{margin:0;font-size:13px;line-height:1.9;color:var(--muted);text-align:left}
/* 表示に時間差をつけて、左から順に現れるようにする */
/* =========================================================
   選考の流れ：左から1枚ずつ順番に現れるアニメーション

   【なぜ transition ではなく animation を使うか】
   .reveal の仕組みは transition（opacity と transform）で動いていますが、
   .flow li 側にホバー用の transition（box-shadow など）を書いているため、
   後から書いたこちらが .reveal の指定を上書きしてしまい、
   フェードインが効かず「パッと出る」状態になっていました。
   animation は transition とは別のプロパティなので、
   ホバーの動きを残したまま、表示アニメーションだけを指定できます。

   【間合い】
   1枚あたり0.8秒かけて、0.28秒ずつずらして表示します。
   5枚目が出そろうまで約2秒。ステップを目で追える速さにしています。
   ========================================================= */
.flow li.reveal.is-visible{
  animation:ac-flow-in .8s cubic-bezier(.22,.61,.36,1) both;
}
.flow li.reveal.is-visible:nth-child(1){animation-delay:0s}
.flow li.reveal.is-visible:nth-child(2){animation-delay:.28s}
.flow li.reveal.is-visible:nth-child(3){animation-delay:.56s}
.flow li.reveal.is-visible:nth-child(4){animation-delay:.84s}
.flow li.reveal.is-visible:nth-child(5){animation-delay:1.12s}

/* 左から現れることが分かるよう、下からではなく
   少し左にずらした位置から入ってきます。 */
@keyframes ac-flow-in{
  from{opacity:0;transform:translate(-18px,14px)}
  to  {opacity:1;transform:none}
}
/* 画面が狭いときは3列・1列へ折り返します。
   折り返すと矢印の向き（右向き）と並びが合わなくなるので、
   このときは矢印を消し、カードの間に通常の隙間を空けます。 */
@media(max-width:1100px){
  .flow{grid-template-columns:repeat(3,1fr);--flow-gap:clamp(14px,1.6vw,20px)}
  .flow li:not(:last-child)::after{content:none}
}
@media(max-width:700px){
  .flow{grid-template-columns:1fr}
  /* 1列のときはカードが横長になるので、
     アイコンと番号を左に寄せた横並びに切り替える */
  .flow__head{flex-direction:row;justify-content:flex-start;gap:14px;margin-bottom:14px}
  .flow__body{text-align:left}
}
.flow__note{
  margin-top:26px;font-size:13.5px;color:var(--muted);
  border-left:3px solid var(--yellow);padding-left:16px;
}

/* =========================================================
   代表メッセージ
   ========================================================= */
.msg{background:var(--blue-deep);color:#fff;position:relative;overflow:hidden}
.msg::before{
  content:"";position:absolute;left:-6%;top:-30%;
  width:44%;height:150%;
  background:linear-gradient(160deg,transparent 55%,rgba(28,146,191,.5) 55% 70%,rgba(238,177,86,.45) 70% 82%,transparent 82%);
  transform:rotate(6deg);
}
.msg .wrap{position:relative;z-index:2}
.msg .sec-title{max-width:16em}
.msg__grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,5vw,56px);align-items:start}
.msg__body p{font-size:15px;line-height:2.15;color:#DCEFF4;margin:0 0 1.35em}
.msg__body p:last-child{margin-bottom:0}
.msg__lead{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,2.4vw,23px)!important;
  line-height:1.75!important;color:#fff!important;
}
/* 署名なので、手紙と同じように右寄せにします */
/* 署名。名前は「誰が言っているのか」を示す部分なので、
   本文（15px）より大きくして、肩書きとの差もはっきりさせています。 */
.msg__sign{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.4vw,26px);line-height:1.5;
  margin-top:28px;color:#fff;text-align:right;
}
.msg__sign small{
  display:block;font-family:var(--body);font-weight:400;
  font-size:12.5px;color:#9FD6E8;margin-bottom:6px;
}
/* 白い台紙の上に写真を置きます。
   元の写真は胸のあたりで切れているバストアップなので、
   下にも余白を取ると「体が途中で切れた写真が宙に浮いている」ように
   見えてしまいます。そこで下だけ余白を作らず、
   人物の下端を台紙の下端にぴったり接するようにしています
   （こうすると、フレームの外に体が続いているように見えます）。
   左右と上の余白は padding で調整できます。 */
.msg__photo{
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  /* 上と左だけ余白を取り、右と下は人物が枠に接するようにします。
     元の写真は人物が右端・下端いっぱいまで写っているため、
     ここに余白を作ると「切り抜きが浮いている」ように見えてしまいます。 */
  padding:22px 0 0 22px;
  overflow:hidden;
}
/* 高さは指定せず、写真の縦横比のまま伸ばします。
   枠の高さは中身（写真）が決めるので、下端がぴったり揃います。 */
.msg__photo img{width:100%;height:auto;display:block}
@media(max-width:860px){.msg__grid{grid-template-columns:1fr}}

/* =========================================================
   FAQ
   ========================================================= */
.faq-group{margin-bottom:34px}
.faq-group__t{
  font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--blue);letter-spacing:.06em;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--blue);
}
.qa{border-bottom:1px solid var(--line);background:var(--paper)}
.qa summary{
  cursor:pointer;list-style:none;padding:18px 44px 18px 34px;
  /* 質問は見出しの役割なので、回答（14.5px・細字・グレー）より
     はっきり大きく・太くして、ひと目で区別できるようにしています。 */
  font-family:var(--display);font-weight:700;font-size:17px;
  position:relative;line-height:1.7;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{
  content:"Q";position:absolute;left:6px;top:18px;
  font-family:var(--mono);font-weight:700;font-size:15px;color:var(--blue);
}
.qa summary::after{
  content:"";position:absolute;right:14px;top:26px;
  width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa__a{padding:0 34px 22px;font-size:14.5px;line-height:2.05;color:var(--muted)}

/* =========================================================
   ブログ
   ========================================================= */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,28px);margin-bottom:36px}
.post{border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;background:var(--paper);transition:transform .15s ease}
.post:hover{transform:translateY(-3px)}
.post__media{background:var(--paper-2);aspect-ratio:16/9;border-bottom:1px solid var(--line);overflow:hidden}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post:hover .post__media img{transform:scale(1.06)}
.post__body{padding:20px 22px 24px}
.post__date{
  display:block;font-family:var(--mono);font-size:12px;
  color:var(--muted);letter-spacing:.06em;margin-bottom:8px;
}
.post h3{
  font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.65;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post p{
  margin:0;font-size:13.5px;line-height:1.9;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post__more{margin-top:14px;font-size:12.5px;color:var(--blue);font-family:var(--mono)}
/* 「採用ブログを読む」ボタンを中央に置くための入れ物。
   .btn は inline-flex なので、親側で text-align:center にすると中央に来ます。 */
.blog__more{text-align:center}

/* =========================================================
   会社について（ABOUT）
   ========================================================= */
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);align-items:start;
}
.about__media{
  background:var(--paper-2);border:1px solid var(--line);
  aspect-ratio:4/3;overflow:hidden;
}
.about__media img{width:100%;height:100%;object-fit:cover}

/* 会社紹介の下に置く「AliveCastについてもっと知る」ボタン。
   本文の段落と同じ流れに並ぶので、上に少し余白を取っています。 */
/* 「AliveCastについてもっと知る」のボタン。
   本文の左端にそろえていましたが、文章の続きに見えて目立ちませんでした。
   中央にそろえ、上下の余白も倍（28px → 56px）にして、
   本文から独立したボタンだと分かるようにしています。 */
.about__more{margin:56px 0;text-align:center}

@media(max-width:860px){
  /* スマホでは横に並べると窮屈なので縦積みにし、写真を先に見せます。
     写真は .wrap の左右余白（--gutter）を打ち消して画面の端まで広げ、
     ボタンも横幅いっぱいにして押しやすくしています。 */
  .about__grid{grid-template-columns:1fr;gap:24px}
  .about__media{
    order:-1;
    margin-inline:calc(var(--gutter) * -1);
    border-left:none;border-right:none;
    aspect-ratio:16/10;
  }
  .about__more .btn{width:100%;justify-content:center}
}
@media(max-width:860px){.posts{grid-template-columns:1fr}}

/* =========================================================
   エントリー
   ========================================================= */
/* =========================================================
   エントリー帯の背景スライダー

   もとは黄色一色でした。写真を白黒にして敷き、
   その上に濃紺のベールを重ねています。

   【なぜ濃紺を重ねるか】
   写真を50%に透けさせるだけだと、写真の明るい部分と暗い部分で
   文字の読みやすさが大きく変わってしまいます。
   下地に濃紺（--blue-deep）を置いて、その上で写真を半透明にすると、
   どの写真でも一定の暗さに収まり、白い文字が必ず読めます。
   ========================================================= */
.entry{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--blue-deep);
  text-align:center;padding:clamp(64px,9vw,100px) 0;
}
.entry__slideshow{
  --slide-duration:6s;
  position:absolute;inset:0;z-index:-2;pointer-events:none;
}
.entry__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  /* 白黒にして50%まで透かす。下の濃紺と混ざって落ち着いた色になります */
  filter:grayscale(100%);
  opacity:0;
  animation-duration:calc(var(--slide-duration) * 3);
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-name:ac-entry-fade;
}
.entry__slide:nth-child(1){animation-delay:calc(var(--slide-duration) * 0)}
.entry__slide:nth-child(2){animation-delay:calc(var(--slide-duration) * 1)}
.entry__slide:nth-child(3){animation-delay:calc(var(--slide-duration) * 2)}

/* 3枚を6秒ずつ、入れ替わりが重なるように切り替える。
   最大でも0.5（50%）までしか出さないので、常に文字が読めます。 */
@keyframes ac-entry-fade{
  0%     {opacity:0}
  5%     {opacity:.5}
  33.33% {opacity:.5}
  38.33% {opacity:0}
  100%   {opacity:0}
}

/* 写真の上に濃紺のベール。中央（文字がある位置）をいちばん濃くしています */
.entry::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(18,65,79,.72),rgba(18,65,79,.55));
}

/* 看板の斜めカラーバンド（ヒーロー・代表メッセージと同じ装飾）。
   ⚠️ この装飾は「濃い背景の上」でだけ使ってください。
   白や薄い背景に置くと色が強すぎて、文字より装飾が目立ってしまいます。

   ヒーローは右下、代表メッセージは左上に置いているので、
   ここは左下にして、上から下へ左右交互に現れるようにしています。
   同じ位置に出し続けると、繰り返しに見えて印象に残らないためです。

   z-index は 0。写真(-2)とベール(-1)より上、文字(.wrap は 1)より下です。 */
.entry::before{
  content:"";position:absolute;left:-10%;bottom:-45%;z-index:0;
  width:62%;height:120%;
  background:
    linear-gradient(-155deg,transparent 46%,var(--blue) 46% 68%,var(--yellow) 68% 88%,transparent 88%);
  opacity:.55;transform:rotate(4deg);
  pointer-events:none;
}
.entry .wrap{position:relative;z-index:1}

/* 文字は白。写真に重なっても輪郭が沈まないよう、
   わずかに影を落として、サイズも一回り大きくしています。 */
.entry h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(24px,3.8vw,38px);
  margin:0 0 16px;line-height:1.5;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.entry p{
  margin:0 0 32px;font-size:clamp(15px,1.7vw,17px);
  line-height:1.9;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}

/* フッターのスタイルは、このファイルの末尾にまとめてあります
   （以前ここにも同じ指定がありましたが、二重管理になるため統合しました） */

/* ---------- ダミー表示 ---------- */
.ph{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:#9A9A9A;
  text-align:center;padding:12px;letter-spacing:.04em;
}
.msg__photo .ph{color:rgba(255,255,255,.5)}

/* =========================================================
   スクロールで下から浮かび上がるアニメーション
   JSで要素が画面に入ったタイミングで is-visible を付与する
   ========================================================= */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{opacity:1;transform:none}
/* 複数カードが並ぶ箇所は少しずつ時間差をつけて表示 */
.figs .fig:nth-child(1){transition-delay:.05s}
.figs .fig:nth-child(2){transition-delay:.15s}
.figs .fig:nth-child(3){transition-delay:.25s}
.figs .fig:nth-child(4){transition-delay:.35s}
.merits .merit:nth-child(1){transition-delay:.05s}
.merits .merit:nth-child(2){transition-delay:.15s}
.merits .merit:nth-child(3){transition-delay:.25s}
.jobs .job:nth-child(1){transition-delay:.05s}
.jobs .job:nth-child(2){transition-delay:.15s}
.jobs .job:nth-child(3){transition-delay:.25s}
.posts .post:nth-child(1){transition-delay:.05s}
.posts .post:nth-child(2){transition-delay:.15s}
.posts .post:nth-child(3){transition-delay:.25s}
.crosslinks .crosslink:nth-child(1){transition-delay:.05s}
.crosslinks .crosslink:nth-child(2){transition-delay:.15s}
.crosslinks .crosslink:nth-child(3){transition-delay:.25s}
/* テキスト＋画像を並べる箇所（ABOUT・代表メッセージなど）も、
   画像側を少し遅らせると「後から追いかけてくる」ような動きになる */
.reveal--delay{transition-delay:.15s}

/* ---------- 取引先・受賞歴の箇条書き（1行ずつ浮かび上がる） ----------
   カード1枚ぶんの28pxを文字1行に使うと動きが大きすぎるので、
   持ち上げる距離を10pxに抑えています。

   ⚠️ 「.reveal.is-visible」（クラス2つ）より詳細度を高くしないと、
   　　表示後も transform が戻りません。そのため下の解除側は
   　　「.proof li.reveal.is-visible」のようにクラス3つで書いています。 */
.proof .reveal{transform:translateY(10px)}
.proof .reveal.is-visible{transform:none}

/* 上から順に現れるよう、1行ずつ時間差をつける。
   取引先は9行、受賞歴は7行なので9行ぶん用意しています。
   行が増えたときは、ここに続きを足してください
   （足さなくても、遅れずに出るだけで壊れません）。 */
.proof li:nth-child(1){transition-delay:.04s}
.proof li:nth-child(2){transition-delay:.08s}
.proof li:nth-child(3){transition-delay:.12s}
.proof li:nth-child(4){transition-delay:.16s}
.proof li:nth-child(5){transition-delay:.20s}
.proof li:nth-child(6){transition-delay:.24s}
.proof li:nth-child(7){transition-delay:.28s}
.proof li:nth-child(8){transition-delay:.32s}
.proof li:nth-child(9){transition-delay:.36s}
/* 「クライアントの声を読む」は、社名がすべて出そろってから見せる */
.proof__more{transition-delay:.42s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  /* アニメーションを止めると、スライドは opacity:0 のまま全部消えてしまいます。
     そこで1枚目だけを固定で表示し、切り替えのない1枚の背景写真として見せます。 */
  .hero__slide{opacity:0!important}
  .hero__slide:first-child{opacity:1!important}
  /* エントリー帯の背景も、切り替えず1枚目だけを表示します */
  .entry__slide{opacity:0!important}
  .entry__slide:first-child{opacity:.5!important}
}


/* =========================================================
   ここから下は職種の個別ページ（/jobs/xxx/）専用のスタイルです。
   job-hacker.html などのモックアップから移植しました。
   ========================================================= */
/* ---------- パンくず ---------- */
/* パンくず。本文（仕事紹介）のすぐ上に置くので、
   上の余白は取らず、本文との間だけ空けています。 */
.crumb{margin:0 0 20px;font-size:13px;color:var(--muted)}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* =========================================================
   職種ヒーロー
   ========================================================= */
.job-hero{
  position:relative;overflow:hidden;
  background:var(--blue-deep);color:#fff;
  padding:clamp(48px,7vw,72px) 0 clamp(48px,7vw,72px);
}
.job-hero::after{
  content:"";position:absolute;right:-10%;bottom:-55%;
  width:60%;height:130%;
  background:
    linear-gradient(155deg,transparent 46%,var(--blue) 46% 68%,var(--yellow) 68% 88%,transparent 88%);
  opacity:.85;transform:rotate(-4deg);
  pointer-events:none;
}
.job-hero .wrap{position:relative;z-index:2}
.job-hero__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,48px);align-items:center}
.tag-hot{
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:12px;
  padding:5px 14px;letter-spacing:.06em;margin-bottom:16px;
}
.job-hero__en{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:#9FD6E8;margin:0 0 14px}
.job-hero__title{font-family:var(--display);font-weight:900;font-size:clamp(26px,4.2vw,40px);line-height:1.4;margin:0 0 18px}
.job-hero__catch{font-size:clamp(15px,1.8vw,18px);line-height:2;color:#DCEFF4;max-width:38em;margin:0 0 30px}
.job-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* 写真の枠。もとは縦長（4:5）でしたが、職種の写真はどれも横長のため
   拡大されて一部しか見えない状態になっていました。写真の形に近い
   横長（16:10）にして、切り取られる範囲を最小限にしています。 */
.job-hero__media{background:rgba(255,255,255,.09);aspect-ratio:16/10;border:1px solid rgba(255,255,255,.18)}
@media(max-width:860px){.job-hero__grid{grid-template-columns:1fr}.job-hero__media{aspect-ratio:16/9}}

/* ---------- ダミー表示 ---------- */
.ph{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:#9A9A9A;
  text-align:center;padding:12px;letter-spacing:.04em;
}
.job-hero__media .ph{color:rgba(255,255,255,.5)}

/* =========================================================
   チェックリスト（業務内容／向いている人）
   ========================================================= */
.check-list{list-style:none;margin:0;padding:0}
.check-list li{
  position:relative;padding:11px 0 11px 30px;
  font-size:14.5px;line-height:1.9;
  border-bottom:1px dashed var(--line);
}
.check-list li:last-child{border-bottom:none}
.check-list li::before{
  content:"✓";position:absolute;left:2px;top:11px;
  color:var(--blue);font-family:var(--mono);font-weight:700;
}

/* ---------- 使用ツール・チップ ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12.5px;border:1px solid var(--line);
  padding:5px 14px;color:var(--muted);border-radius:100px;
  font-family:var(--mono);
}

/* =========================================================
   1日の仕事の流れ
   ========================================================= */
.timetable{width:100%;border-collapse:collapse;font-size:14px}
.timetable th,.timetable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
.timetable th{
  width:6em;color:var(--blue);font-family:var(--mono);font-weight:500;
  background:var(--paper-2);
}
.timetable td{color:var(--ink)}

/* =========================================================
   入社後の成長イメージ
   ========================================================= */
.growth{list-style:none;margin:0;padding:0}
.growth li{
  display:grid;grid-template-columns:150px 1fr;gap:20px;
  padding:20px 0;border-top:1px solid var(--line);
}
.growth li:last-child{border-bottom:1px solid var(--line)}
.growth__period{font-family:var(--display);font-weight:700;font-size:14px;color:var(--blue)}
.growth p{margin:0;font-size:14.5px;line-height:1.95;color:var(--muted)}
@media(max-width:640px){.growth li{grid-template-columns:1fr}.growth__period{margin-bottom:4px}}

/* =========================================================
   募集要項
   ========================================================= */
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:12px 0;vertical-align:top;border-bottom:1px dashed var(--line)}
.spec th{width:9em;color:var(--muted);font-weight:500}

/* =========================================================
   写真バナー（文章だけのセクションに入れる雰囲気写真）
   選考の流れ・職種ページなど、テキストが続くセクションの
   合間に挟んで、文字ばかりにならないようにするための部品です。
   ========================================================= */
.photo-banner{
  aspect-ratio:21/8;overflow:hidden;
  margin:0 0 clamp(32px,4vw,48px);
}
.photo-banner img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.photo-banner{aspect-ratio:4/3}}

/* ---------- 他の職種リンク ---------- */
.crosslinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.crosslink{
  display:block;border:1px solid var(--line);padding:18px 20px;
  text-decoration:none;background:var(--paper);transition:transform .15s ease,border-color .15s ease;
}
.crosslink:hover{transform:translateY(-2px);border-color:var(--blue)}
.crosslink__en{font-family:var(--mono);font-size:11px;color:var(--muted)}
.crosslink__t{font-family:var(--display);font-weight:700;font-size:15px;margin-top:4px}
@media(max-width:720px){.crosslinks{grid-template-columns:1fr}}

/* ---------- エントリー誘導 ---------- */
.entry-cta{background:var(--yellow);text-align:center;padding:clamp(48px,7vw,72px) 0}
.entry-cta h2{font-family:var(--display);font-weight:900;font-size:clamp(20px,3vw,28px);margin:0 0 14px;line-height:1.5}
.entry-cta p{margin:0 0 26px;font-size:14.5px}

/* ---------- フッター ---------- */
.ftr{
  background:var(--ink);color:#ABABAB;padding:44px 0;font-size:13px;
  position:relative;overflow:hidden;
}
/* フッターにも同じ斜めバンドを。ページの最後を締める役割です。
   ただし、ここは読ませるための場所ではないので、ヒーローより
   ずっと薄く（opacity .22）しています。会社概要や連絡先の文字より
   装飾が目立ってしまうと本末転倒だからです。 */
.ftr::before{
  content:"";position:absolute;right:-6%;top:-60%;z-index:0;
  width:46%;height:220%;
  background:
    linear-gradient(155deg,transparent 46%,var(--blue) 46% 68%,var(--yellow) 68% 88%,transparent 88%);
  opacity:.22;transform:rotate(-4deg);
  pointer-events:none;
}
.ftr .wrap{position:relative;z-index:1}
/* フッターは「案内文」の下に「会社名＋ボタンの1行」を置く、という2段構成です。
   ここを flex にすると3つの要素が折り返して並びが崩れるので、
   横並びにするのは下の .ftr__row だけにしています。 */
.ftr__in{display:block}
.ftr__row{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
}
.ftr a{color:#fff;text-decoration:none}

/* 会社名・住所。もとは上に「AliveCast」というロゴ文字を別に置いていましたが、
   その行を削除し、この1行に見出しと同じフォント（--display）を使っています。 */
.ftr__address{
  margin:0;
  font-family:var(--display);font-weight:700;
  font-size:14px;color:#fff;line-height:1.8;
}

/* コーポレートサイトへのリンク。文字だけだとリンクに見えないので、
   枠線を付けてボタンらしくし、ホバーで白く反転させています。 */
.ftr__link{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--display);font-weight:700;font-size:13.5px;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,.45);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.ftr__link::after{content:"→";font-family:var(--body)}
.ftr__link:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 個人情報保護方針へのリンク。
   コーポレートサイトのボタンと同じ強さで並べると、どちらが主役か
   分からなくなるので、こちらは控えめな文字リンクにしています。 */
.ftr__pp{
  font-size:12.5px;color:rgba(255,255,255,.75);
  text-decoration:underline;text-underline-offset:3px;flex:none;
}
.ftr__pp:hover{color:#fff}

@media(max-width:640px){
  /* 狭い画面では横に並べると窮屈なので、縦積みにしてボタンを幅いっぱいに */
  .ftr__row{flex-direction:column;align-items:stretch;gap:20px}
  .ftr__link{justify-content:center}
}



/* =========================================================
   職種ページの本文（WordPressの本文エディタで書いた部分）

   「業務内容」「向いている人」などのセクションは、管理画面の
   本文エディタに見出し(h2/h3)・箇条書き・表として書いてもらいます。
   その素のHTMLが、モックアップと同じ見た目になるようにするための
   スタイルです。エディタ側で特別なクラスを付ける必要はありません。
   ========================================================= */
.job-body h2{
  font-family:var(--display);font-weight:900;font-size:clamp(20px,2.6vw,24px);
  line-height:1.5;margin:2.4em 0 .8em;padding-bottom:.4em;
  border-bottom:2px solid var(--blue);
}
.job-body h2:first-child{margin-top:0}
.job-body h3{
  font-family:var(--display);font-weight:700;font-size:17px;
  margin:2em 0 .6em;line-height:1.6;
}
.job-body p{margin:0 0 1.4em;line-height:2}
.job-body ul{list-style:none;margin:0 0 1.6em;padding:0}
.job-body ul li{position:relative;padding-left:26px;margin-bottom:12px;font-size:14.5px;line-height:1.9}
.job-body ul li::before{
  content:"";position:absolute;left:2px;top:.6em;
  width:9px;height:5px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.job-body ol{margin:0 0 1.6em;padding-left:1.4em}
.job-body ol li{margin-bottom:10px;font-size:14.5px;line-height:1.9}
.job-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 1.8em}
.job-body table th,.job-body table td{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;
}
.job-body table th{width:9em;color:var(--muted);font-weight:500;background:var(--paper-2)}
.job-body strong{font-weight:700}

/* =========================================================
   エントリーページ（/entry/ ・ /ai/entry/）

   応募フォームは項目数が多いので、読みやすいよう本文より
   少し狭い幅（640px）に絞っています。
   ========================================================= */
.entry-page{max-width:640px;margin-inline:auto}

/* ---------- エラーメッセージ ---------- */
.entry-form__errors{
  max-width:640px;margin:0 auto 28px;
  background:#FDEDEE;border:1px solid #E2A6AC;color:#A3323B;
  padding:18px 22px;font-size:14px;line-height:1.9;
}
.entry-form__errors p{margin:0 0 6px;font-weight:700}
.entry-form__errors ul{margin:0;padding-left:1.2em}

/* ---------- フォーム項目 ---------- */
.entry-form{max-width:640px;margin:0 auto}
.entry-form__row{margin-bottom:28px}
.entry-form__row > label{
  display:block;font-family:var(--display);font-weight:700;font-size:14.5px;
  margin-bottom:12px;
}
.required{
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-family:var(--body);font-weight:400;font-size:11px;color:#fff;
  background:var(--orange);padding:2px 9px;border-radius:100px;
}
.entry-form input[type="text"],
.entry-form input[type="email"],
.entry-form input[type="tel"],
.entry-form input[type="number"],
.entry-form select,
.entry-form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:13px 16px;border:1px solid var(--line);border-radius:2px;
  background:var(--paper);
}
.entry-form input:focus,.entry-form select:focus,.entry-form textarea:focus{
  outline:none;border-color:var(--blue);
}
.entry-form textarea{resize:vertical;min-height:130px;line-height:1.8}
.entry-form button[type="submit"]{width:100%;justify-content:center;margin-top:8px}

/* ---------- トグルボタン（希望の職種／筆記試験の受験形態） ----------
   ラジオボタンそのものは画面から見えない位置に置き、
   隣接する label をボタン風に見せています（input:checked + label で判定）。
   スクリーンリーダーやキーボード操作では、通常のラジオボタンとして扱われます。 */
.toggle-group{display:flex;flex-wrap:wrap;gap:10px}
.toggle-group__input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.toggle-group__btn{
  display:inline-flex;align-items:center;cursor:pointer;
  font-size:14px;padding:11px 22px;
  border:1px solid var(--line);border-radius:100px;
  color:var(--ink);background:var(--paper);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.toggle-group__btn:hover{border-color:var(--blue)}
.toggle-group__input:checked + .toggle-group__btn{
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.toggle-group__input:focus-visible + .toggle-group__btn{
  outline:3px solid var(--yellow);outline-offset:2px;
}

/* ---------- 複数選択のチェックボックス（AliveCastを知ったきっかけ） ----------
   見た目はトグルボタンを流用しつつ、
   「これは1つだけでなく、いくつでも選べる」ことが分かるように
   角を丸くしすぎない（角丸4px）形にして、ラジオボタンと見分けられるようにしています。
   選択済みのものには先頭にチェック記号を出し、
   色が見分けにくい人にも「選ばれている」ことが形で伝わるようにしています。 */
.toggle-group--multi{gap:8px}
.toggle-group--multi .toggle-group__btn{
  border-radius:4px;padding:9px 16px;font-size:13.5px;
}
.toggle-group--multi .toggle-group__input:checked + .toggle-group__btn::before{
  content:"✓";margin-right:6px;font-weight:700;
}

/* 選択肢のかたまり（「求人サイト・求人アプリ」などの小見出し付き）
   fieldset は既定で枠線と余白が付くので、まず打ち消しています。 */
/* fieldset はブラウザの既定で min-width が min-content になっており、
   そのままだと「中身の一番長い単語ぶんまで縮まない」という特殊な動きをします。
   選択肢が横に長い行では、これが原因で幅の計算が崩れるため 0 に戻しています。 */
.source-group{border:0;margin:0 0 16px;padding:0;min-width:0}
.source-group__label{
  padding:0;margin-bottom:8px;
  font-size:12.5px;font-weight:700;color:var(--muted);
}

/* 項目の補足説明と、自由記入欄の小さなラベル */
.entry-form__help{
  margin:-6px 0 14px;font-size:13px;line-height:1.8;color:var(--muted);
}
.entry-form__sublabel{
  display:block;margin:14px 0 8px;font-size:13px;color:var(--muted);
}

/* スマホでは1行に入る選択肢が少なく、縦にとても長くなってしまいます。
   左右の余白と文字を少しだけ詰めて、1行に並ぶ数を増やしています。
   高さは指で押しやすい44px以上を保つよう min-height で下限を決めています
   （小さくしすぎると押し間違いが増え、かえって離脱の原因になります）。 */
@media(max-width:640px){
  .toggle-group--multi{gap:7px}
  .toggle-group--multi .toggle-group__btn{
    padding:8px 12px;font-size:13px;min-height:44px;
  }
}

/* =========================================================
   応募につなげるための追加パーツ（CVR改善）
   ここから下は「エントリーを押してもらう」ための要素です。
   ========================================================= */

/* ---------- ヒーローの「誰に向けた募集か」の1行 ----------
   キャッチコピーとリード文の間に置き、対象を先に言い切ります。
   黄色の下線で、装飾ではなく意味のある一行だと分かるようにしています。 */
.hero__target{
  display:inline-block;margin:0 0 14px;
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;
  border-bottom:2px solid var(--yellow);padding-bottom:4px;
}
@media(max-width:640px){.hero__target{font-size:14px}}

/* ---------- セクション末尾の小さなエントリー導線 ----------
   大きなバナーを何度も出すとしつこいので、1行の帯にとどめています。 */
.cta-inline{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;margin:34px 0 0;padding:16px 22px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
}
.cta-inline__text{font-size:14.5px;color:var(--ink)}
.cta-inline__link{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:14.5px;
  color:var(--blue);text-decoration:none;
}
.cta-inline__link:hover{text-decoration:underline}
/* 矢印は画像を使わず、border だけで三角形を作っています（通信が増えないため） */
.cta-inline__arrow{
  width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent currentColor;
}
/* 薄青・薄黄のセクション内では、帯が背景に沈まないよう白を保つ */
.sec--tint .cta-inline,.sec--warm .cta-inline{background:var(--paper)}
@media(max-width:640px){
  .cta-inline{padding:14px 16px}
  .cta-inline__text{font-size:14px}
}

/* ---------- スマホの画面下に貼り付くエントリーボタン ----------
   パソコンは左端の縦型ヘッダーにボタンが常に見えているので、
   959px以下（縦型ヘッダーが消える幅）でだけ出します。 */
.sp-cta{display:none}
@media(max-width:959px){
  .sp-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px;
    background:rgba(255,255,255,.94);border-top:1px solid var(--line);
    /* iPhoneのホームバーにボタンが隠れないよう、機種ごとの余白を足す */
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .sp-cta__link{
    display:flex;flex-direction:column;align-items:center;gap:0;
    padding:8px 16px;border-radius:4px;line-height:1.5;
    background:var(--blue);color:#fff;text-decoration:none;
  }
  .sp-cta__main{font-family:var(--display);font-weight:700;font-size:15px}
  .sp-cta__sub{font-size:11px;opacity:.92}
  /* 固定ボタンがページ末尾の内容に重ならないよう、下に逃げ場を作る。
     この値は帯の高さ（約72px）より少し大きくしておきます。
     帯の中身を変えて高さが増えたときは、ここも必ず一緒に増やしてください。 */
  body{padding-bottom:88px}
}

/* ---------- フッターの「相談だけでもOK」 ---------- */
/* ⚠️ 色に var(--ink) を使ってはいけません。
   フッターの背景そのものが --ink（濃いグレー）なので、
   同じ色を指定すると文字が背景に沈んで完全に見えなくなります。
   （実際にこの不具合が起きました） */
.ftr__invite{
  margin:0 0 22px;padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:14px;line-height:1.95;color:#E6E6E6;
}

/* ---------- 職種の「別の呼び方」 ---------- */
.job__alt{
  margin:2px 0 6px;font-size:12.5px;color:var(--muted);
}
.job-hero__alt{
  margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.82);
}
/* 職種ページの募集状況（1名募集 など）
   ⚠️ 下の余白（18px）を必ず残してください。
   すぐ下にエントリーボタンが続くため、0にするとバッジとボタンが
   くっついて、バッジがボタンの一部のように見えてしまいます。 */
.job-hero__note{
  display:inline-block;margin:14px 0 18px;padding:6px 14px;
  border-radius:100px;background:var(--yellow);color:var(--blue-deep);
  font-family:var(--display);font-weight:700;font-size:13px;
}

/* =========================================================
   エントリーフォームの入力しやすさ（EFO）
   ========================================================= */

/* 入力にかかる時間の目安と、提出物が不要であることの案内 */
.entry-form__intro{
  max-width:640px;margin:0 auto 26px;padding:14px 18px;
  background:var(--paper-2);border-radius:4px;
  font-size:14px;line-height:1.9;color:var(--ink);
}

/* ---------- エラーの見せ方 ----------
   以前は画面上部にまとめて出すだけで、どの欄を直せばよいか
   分かりませんでした。該当する欄自体も赤くしています。 */
.entry-form__errors a{color:#A3323B}
.entry-form__errors ul{list-style:disc}

.entry-form__row.is-error > label{color:#A3323B}
.entry-form__row.is-error input,
.entry-form__row.is-error textarea{
  border-color:#C0555E;background:#FDF7F7;
}
/* 選択肢（トグルボタン）の欄は入力枠が無いので、左に赤い線を引いて示す */
.entry-form__row.is-error .toggle-group{
  border-left:3px solid #C0555E;padding-left:12px;
}
.entry-form__error{
  margin:0 0 10px;font-size:13px;line-height:1.8;color:#A3323B;font-weight:700;
}

/* 送信中のボタン（二重押しの防止中であることを見た目でも示す） */
.entry-form button[type="submit"]:disabled{
  opacity:.6;cursor:progress;
}

/* 送信ボタンの下の注意書き */
.entry-form__note{
  margin:16px 0 0;font-size:12.5px;line-height:1.9;color:var(--muted);text-align:center;
}

/* =========================================================
   「不信」を消すパーツ（取引先・受賞歴・会社概要）
   ========================================================= */

/* ---------- 取引先と受賞歴の2段組み ---------- */
/* 取引先も受賞歴も縦の箇条書きになったので、幅は半分ずつにしています
   （以前は取引先を横に並べていたため、左を広くとっていました）。 */
.proof{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  margin-top:clamp(40px,5vw,60px);padding-top:clamp(32px,4vw,44px);
  border-top:1px solid var(--line);
}
@media(max-width:860px){.proof{grid-template-columns:1fr;gap:32px}}
/* 中身が文字ばかりで平坦に見えていたので、2つのかたまりを
   それぞれ「カード」にして、背景と余白で区切っています。
   ABOUTのセクションが白なので、カードは薄い青（--paper-2）にして浮かせます。 */
.proof__block{
  background:var(--paper-2);border-radius:4px;
  padding:clamp(22px,3vw,30px);
}

.proof__title{
  font-family:var(--display);font-weight:700;font-size:15px;
  margin:0 0 18px;padding-bottom:14px;color:var(--ink);
  border-bottom:1px solid rgba(28,146,191,.22);
  display:flex;align-items:center;gap:10px;
}
/* 見出しの丸いアイコン。文字だけの並びに、目印になる形を1つ置いています。 */
.proof__icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.proof__icon svg{width:19px;height:19px;display:block}

/* 取引先の社名。ロゴ画像は許諾の範囲が別なので、文字だけで並べています。
   右隣の「受賞・採択」（.awards）と同じ箇条書きに揃えているので、
   2つの列が同じ見た目で並びます。
   社名は信頼の証拠そのものなので、受賞歴より少しだけ大きく・濃くしています。 */
/* 社名は短いので2列に並べます。縦一列だと細長い帯になってしまい、
   同じ幅の右側（受賞・採択）と高さが大きくずれるためです。 */
.clients{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
}
@media(max-width:1000px){.clients{grid-template-columns:1fr}}
.clients li{
  font-size:13.5px;line-height:1.7;color:var(--ink);
  padding-left:16px;position:relative;
}
.clients li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:6px;height:6px;border-radius:50%;
  border:1.5px solid var(--blue);
}
/* 「ほか多数」は社名ではないので、点は付けず、文字も控えめにします。
   点を付けると1社のように見えてしまうためです。

   ⚠️ セレクタを「.clients li.clients__more」と書いているのは、
   　　上の「.clients li」（クラス1つ＋要素1つ）のほうが
   　　「.clients__more」（クラス1つ）より強く、
   　　クラスだけで書くと打ち消せないためです。 */
.clients li.clients__more{
  color:var(--muted);font-size:13.5px;padding-left:16px;
}
.clients li.clients__more::before{content:none}

.proof__more{margin:16px 0 0;font-size:13.5px}
.proof__more a{color:var(--blue);display:inline-flex;align-items:center;gap:6px}
/* 別タブで開くことを示す小さなマーク（画像を使わずCSSだけで作っています） */
.proof__ext{
  width:9px;height:9px;flex:0 0 auto;
  border:1px solid currentColor;border-left-width:2px;border-bottom-width:2px;
  transform:translateY(-1px);
}
/* リンクの下に添える一言。ここも他の項目と大きさを揃え、
   補足であることは色（グレー）で示しています。 */
.proof__note{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}

/* 受賞歴。「派手にせず、事実として置く」ため、色は付けず
   小さな文字で1行ずつ並べるだけにしています。 */
/* 年と名称を左右に分けた2列の並び。
   年が縦にそろうので、実績が積み上がってきたことが一目で分かります。
   1行の文にしていたときは、年が文中に埋もれて読み取れませんでした。 */
.awards{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.awards li{
  display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;
  font-size:13.5px;line-height:1.7;
}
/* 年。数字を等幅（tabular-nums）にすると桁がきれいにそろいます。
   年が分からない実績は空欄になりますが、名称の左端はそろったままです。 */
.awards__year{
  font-family:var(--display);font-weight:700;
  color:var(--blue);font-variant-numeric:tabular-nums;
  text-align:right;
}
.awards__title{color:var(--ink)}

/* ---------- フッター上の会社概要 ---------- */
.company{
  background:var(--paper-2);border-top:1px solid var(--line);
  padding:clamp(40px,5vw,56px) 0;
}
.company__title{
  font-family:var(--display);font-weight:700;font-size:15px;
  margin:0 0 18px;letter-spacing:.04em;
}
.company__table{
  width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.9;
}
.company__table th,.company__table td{
  text-align:left;vertical-align:top;padding:10px 0;
  border-bottom:1px solid var(--line);
}
.company__table th{
  width:110px;font-weight:700;color:var(--muted);white-space:nowrap;
  padding-right:20px;
}
.company__table tr:last-child th,.company__table tr:last-child td{border-bottom:0}
@media(max-width:640px){
  /* スマホでは横に2列だと窮屈なので、見出しと内容を上下に並べます */
  .company__table th,.company__table td{display:block;width:auto;padding:0}
  .company__table th{padding-top:12px;border-bottom:0}
  .company__table td{padding-bottom:12px}
}

/* =========================================================
   「不安」を消すパーツ（挑戦と失敗の方針・対談への導線）
   ========================================================= */
.policy{
  margin-top:clamp(36px,4.5vw,52px);
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(24px,3.5vw,34px);
}
.policy__title{
  font-family:var(--display);font-weight:900;font-size:18px;margin:0 0 8px;
}
.policy__lead{margin:0 0 20px;font-size:14px;color:var(--muted)}
.policy__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media(max-width:860px){.policy__list{grid-template-columns:1fr;gap:18px}}
.policy__list li{
  font-size:14px;line-height:1.9;
  padding-left:16px;border-left:2px solid var(--yellow);
}
.policy__list strong{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}

/* 対談ページへの導線（代表メッセージの下・濃紺の上に置くので白文字） */
.talk{
  margin-top:clamp(36px,4.5vw,52px);
  border:1px solid rgba(255,255,255,.3);border-radius:4px;
  padding:clamp(22px,3vw,30px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
}
.talk__label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--yellow);margin:0;width:100%;
}
.talk__text{margin:0;color:#fff;font-size:14.5px;line-height:1.9;flex:1 1 320px}
.talk__link{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:14.5px;
  color:var(--blue-deep);background:var(--yellow);
  padding:12px 22px;border-radius:2px;text-decoration:none;
}
.talk__link:hover{background:#F5C685}
.talk__arrow{
  width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent currentColor;
}

/* =========================================================
   「不経済」を消すパーツ（選考の所要時間）
   ========================================================= */
.flow__time{
  margin:0 0 6px;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--blue);
}
.flow__time-detail{font-weight:400;font-size:12px;color:var(--muted)}

/* 在職中の方への一文。枠で囲むと「注意書き」に見えて
   かえって声をかけにくくなるため、本文の続きとして置いています。 */
.flow__consult{
  margin:14px 0 0;font-size:14px;line-height:1.95;
}

/* =========================================================
   FAQのカテゴリ分け
   13件を1列に並べていたときは、自分の質問を探せませんでした。
   ========================================================= */
.faq-group + .faq-group{margin-top:clamp(28px,3.5vw,40px)}
.faq-group__title{
  font-family:var(--display);font-weight:700;font-size:15px;
  margin:0 0 12px;padding-bottom:9px;
  border-bottom:2px solid var(--blue);
  display:inline-block;
}

/* =========================================================
   給与レンジ（職種カード・一覧）
   個別ページを開く前に見せることで、求人サイトから来た人が
   「書いていない」と感じて離れるのを防ぎます。
   ========================================================= */
.job__salary{
  margin:8px 0 0;
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  display:flex;align-items:baseline;gap:7px;
}
.job__salary span{
  font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:2px 6px;
  flex:0 0 auto;
}
.job-featured__body .job__salary{margin-top:12px}

/* =========================================================
   社員紹介（先輩が、ここを選んだ理由）
   ========================================================= */
.staff{display:flex;flex-direction:column;gap:16px}
.staff__item{
  display:grid;grid-template-columns:200px 1fr;gap:0;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;
}
@media(max-width:760px){.staff__item{grid-template-columns:1fr}}

/* 左側：写真と名前 */
.staff__person{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:26px 18px;background:var(--paper-2);
  border-right:1px solid var(--line);
}
@media(max-width:760px){
  .staff__person{
    flex-direction:row;justify-content:flex-start;
    border-right:0;border-bottom:1px solid var(--line);padding:18px;
  }
}
/* 項目を「名前」と「きっかけ」だけに絞ったので、
   左側の余白が空きます。写真を少し大きくして釣り合いを取っています。 */
.staff__photo{
  width:104px;height:104px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:760px){.staff__photo{width:72px;height:72px}}
/* 縦長の写真を丸く切り抜くと、既定（中央）では顔より下の
   胸のあたりが真ん中に来てしまいます。
   人物写真は顔が上寄りに写ることがほとんどなので、
   切り取る位置を上に寄せています（縦25%の位置を中心にする）。

   ⚠️ 特定の1枚だけ顔が大きく外れる場合は、その人の写真を
   　　あらかじめ正方形に切ってから登録するのがいちばん確実です。 */
.staff__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 25%;
}
/* 写真が未設定のときに出る、名前の頭文字 */
.staff__initial{
  font-family:var(--display);font-weight:700;font-size:34px;color:#fff;
  line-height:1;
}
.staff__meta{text-align:center}
@media(max-width:760px){.staff__meta{text-align:left}}
.staff__name{
  margin:0;font-family:var(--display);font-weight:700;font-size:17px;
}
/* 右側：本文 */
.staff__body{padding:26px 28px}
@media(max-width:640px){.staff__body{padding:20px 18px}}
.staff__q{
  margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--blue);
}
.staff__reason p{margin:0 0 .8em;font-size:14.5px;line-height:2}
.staff__reason p:last-child{margin-bottom:0}

/* =========================================================
   入社後の勉強会（TRAINING）
   ========================================================= */
.training__head{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;
  padding-bottom:clamp(28px,3.5vw,38px);margin-bottom:clamp(28px,3.5vw,38px);
  border-bottom:1px solid var(--line);
}
@media(max-width:860px){.training__head{grid-template-columns:1fr;gap:22px}}

/* 期間・頻度・講師・ページ数の4つの数字 */
.training__facts{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:18px 26px;
}
.training__facts li{display:flex;flex-direction:column;gap:2px}
.training__facts strong{
  font-family:var(--display);font-weight:900;font-size:23px;color:var(--blue);
  line-height:1.3;
}
.training__facts span{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.training__note{margin:0;font-size:14.5px;line-height:2}

/* 学ぶ内容のカード */
.training__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media(max-width:900px){.training__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.training__grid{grid-template-columns:1fr}}
.training__card{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:20px 22px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;
}
/* 写真つきのカードは、上に写真の見える余白をつくるため
   上側の padding を広げています。 */
.training__card--photo{padding-top:74px}
/* カードとして浮かせる。白い背景の中で境目がはっきりします */
.training__card--photo:hover{
  border-color:var(--blue);
  box-shadow:0 10px 28px rgba(18,65,79,.14);
  transform:translateY(-3px);
}

/* =========================================================
   写真つきのカード

   写真は「見せる絵」ではなく雰囲気を添える背景なので、
   カード全面に敷いたうえで白いベールをかけ、
   文字が問題なく読める濃さまで落としています。

   ::before に背景画像、::after に白いベールを置き、
   どちらも z-index を負にして文字より後ろへ送っています
   （isolation:isolate で、負のz-indexがカードの外に
   　抜けないようにしています）。
   ========================================================= */
.training__card--photo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--card-bg);
  background-size:cover;background-position:center;
  transition:transform .6s ease;
}
.training__card--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* 上は写真をしっかり見せ、文章が重なる下半分だけ白を濃くします。
     全面を均一に白くすると、どのカードも同じに見えて
     メリハリが無くなるため、上下で差をつけています。 */
  background:linear-gradient(180deg,
    rgba(255,255,255,.32) 0%,
    rgba(255,255,255,.62) 34%,
    rgba(255,255,255,.9) 62%,
    rgba(255,255,255,.96) 100%);
}
/* ホバーで写真がゆっくり寄る（カード全体が動くのではなく背景だけ） */
.training__card--photo:hover::before{transform:scale(1.06)}
/* どちらの資料から来た内容かを示す小さなラベル。
   写真つきカードでは左上に浮かせ、色を塗って区別できるようにしています。 */
.training__src{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;
  padding:2px 7px;margin-bottom:10px;
  background:rgba(255,255,255,.85);
}
.training__card--photo .training__src{
  position:absolute;top:18px;left:22px;margin:0;
  background:var(--blue);border-color:var(--blue);color:#fff;
  font-weight:700;
}
/* 一般スキルは別の色にして、業務スキルとひと目で見分けられるようにする */
.training__card--photo .training__src--general{
  background:var(--orange);border-color:var(--orange);
}
/* 見出しは一回り大きく、色も濃くしてカードの主役にします。
   左に青い線を添えて、写真の上でも視線が止まるようにしています。 */
.training__card h3{
  margin:0 0 10px;font-family:var(--display);font-weight:700;
  font-size:17.5px;color:var(--ink);
  padding-left:11px;border-left:3px solid var(--blue);
  line-height:1.5;
}
/* 本文は薄いグレーだと写真に負けるので、少し濃くしています */
.training__card p{margin:0;font-size:13.5px;line-height:1.95;color:#555}

/* ===========================================================
   他社との違い（#difference ／ 導線設計表のN9・不適の解消）
   =========================================================== */

/* 画面には出さず、読み上げソフトにだけ伝えたい文字。
   比較表の左上は見た目には空欄ですが、空のままだと
   読み上げたときに何の列なのか分からなくなるため、
   「比較する項目」という見出しをここに隠しています。 */
.u-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 4列の比較表は、スマホの幅には収まりません。
   文字を小さくして無理に詰めると読めなくなるので、
   表だけを横スクロールさせます（ページ全体は横に動きません）。 */
.diff{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 clamp(36px,5vw,56px)}
.diff__table{
  width:100%;min-width:620px;
  border-collapse:collapse;font-size:14px;
  background:#fff;
}
.diff__table th,.diff__table td{
  text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.75;
}
/* 列見出し（よくある制作会社／インハウス／AliveCast） */
.diff__table thead th{
  font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--muted);background:var(--paper-2);
  border-bottom:2px solid var(--line);white-space:nowrap;
}
/* 行見出し（取引のかたち、担当する範囲 …） */
.diff__table tbody th{
  width:11em;font-weight:500;color:var(--muted);
  background:var(--paper-2);white-space:nowrap;
}
.diff__table td{color:#555}

/* 自社の列だけ、はっきり差をつけます。
   比較表は「どこが違うのか」を一目で分かってもらうためのものなので、
   自社の列が他社と同じ見た目だと、作った意味がなくなります。 */
.diff__table .diff__own{
  background:var(--paper-3);
  color:var(--ink);
  border-left:2px solid var(--blue);
  border-right:2px solid var(--blue);
}
.diff__table thead .diff__own{
  color:var(--blue);background:var(--paper-3);
  border-top:2px solid var(--blue);
}
.diff__table tbody tr:last-child .diff__own{border-bottom:2px solid var(--blue)}
.diff__table .diff__own strong{font-weight:700}

/* 向いている方／向いていない方 */
.fit{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,24px);
  margin:0 0 clamp(28px,4vw,40px);
}
.fit__col{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,3vw,26px);
}
/* 「向いている」は青、「向いていない」はグレー。
   向いていない方を赤など強い色にすると、拒絶された印象になります。
   ここは落とすための線引きではなく、入社後のミスマッチを防ぐための
   案内なので、落ち着いた色にしています。 */
.fit__col--yes{border-top:3px solid var(--blue)}
.fit__col--no{border-top:3px solid var(--line);background:var(--paper-2)}
.fit__title{
  margin:0 0 14px;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--ink);
}
.fit__col--yes .fit__title{color:var(--blue)}
.fit__col--no .fit__title{color:var(--muted)}
.fit__list{margin:0;padding-left:1.25em;list-style:disc}
.fit__list li{margin:0 0 10px;font-size:14px;line-height:1.9;color:#555}
.fit__list li:last-child{margin-bottom:0}
.fit__list strong{color:var(--ink);font-weight:700}

@media (max-width:720px){
  /* 2列だと1列あたりが狭くなりすぎるので、縦に積みます */
  .fit{grid-template-columns:1fr}
  .diff__table th,.diff__table td{padding:12px 13px}
}

/* ===========================================================
   待遇とキャリア（#reward ／ 導線設計表のN11・不経済の解消）
   =========================================================== */

/* 3列なので比較表ほど幅を食いませんが、スマホでは
   「任される仕事」の列が潰れるため、同じく表だけを横スクロールさせます。 */
.pay{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 clamp(28px,4vw,40px)}
.pay__table{
  width:100%;min-width:540px;border-collapse:collapse;
  font-size:14px;background:#fff;
}
.pay__table th,.pay__table td{
  text-align:left;padding:15px 16px;
  border-bottom:1px solid var(--line);line-height:1.75;
}
.pay__table thead th{
  font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--muted);background:var(--paper-2);
  border-bottom:2px solid var(--line);white-space:nowrap;
}
.pay__table tbody th{
  width:9em;font-weight:500;color:var(--muted);
  background:var(--paper-2);white-space:nowrap;
}
.pay__table td{color:#555}

/* 金額はこの表の主役なので、等幅の数字で大きく出します。
   他の列と同じ見た目だと、目的の数字を探す手間が増えます。 */
.pay__amount{
  font-family:var(--mono);font-size:16px;font-weight:700;
  color:var(--blue);white-space:nowrap;
}
.pay__note{
  margin:12px 2px 0;font-size:12.5px;line-height:1.85;color:var(--muted);
}
.pay__note strong{color:var(--ink)}

/* 給与以外の条件は、表にすると情報が多すぎて読み飛ばされます。
   項目名と値を2つ並べただけの、短い行にしています。 */
.payfacts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.payfacts li{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:14px 18px;
}
.payfacts__k{
  font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--blue);min-width:7em;
}
.payfacts__v{font-size:14px;color:#555;line-height:1.8}

@media (min-width:721px){
  /* 画面が広いときは2列にして、縦に伸びすぎないようにします */
  .payfacts{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pay__table th,.pay__table td{padding:13px 13px}
  .pay__amount{font-size:15px}
}

/* ===========================================================
   採用サイト制作の実績（.record ／ 導線設計表のN8・不信の解消）
   =========================================================== */

/* 上の2列グリッド（.proof）とは役割が違うので、
   線で区切って別のかたまりだと分かるようにしています。 */
.record{
  margin-top:clamp(32px,4vw,44px);
  padding:clamp(24px,3.5vw,32px) clamp(22px,3vw,30px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:4px;
}
.record__lead{
  margin:0 0 14px;font-family:var(--display);font-weight:700;
  font-size:clamp(16px,2.2vw,18px);line-height:1.7;color:var(--ink);
}
.record__lead strong{color:var(--blue)}
.record__body{margin:0 0 10px;font-size:14px;line-height:1.95;color:#555}
.record__body--last{margin-bottom:16px;color:var(--muted)}

/* 数字だけを目立たせます。
   ここは「この会社は採用を助けている会社だ」と一目で伝える部分なので、
   文章に埋もれると意味がありません。 */
.record__num{
  color:var(--blue);font-weight:700;
  background:linear-gradient(transparent 62%, rgba(28,146,191,.16) 62%);
}
.record .proof__more{margin:0}

/* ===========================================================
   匿名の質問フォーム（#question ／ 導線設計表のN15・セーフティネット）
   =========================================================== */

.qform{
  margin-top:clamp(32px,4vw,44px);
  padding:clamp(24px,3.5vw,32px) clamp(22px,3vw,30px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:4px;
}
.qform__lead{margin:0 0 12px;font-size:15px;line-height:1.9;color:var(--ink)}
.qform__lead strong{color:var(--blue);font-size:16px}

/* 「個別の返信はできません」は、この窓口でいちばん誤解されやすい点です。
   本文と同じ見た目だと読み飛ばされるので、枠で囲んで必ず目に入れます。 */
.qform__note{
  margin:0 0 20px;padding:11px 14px;
  background:#fff;border:1px dashed var(--line);border-radius:4px;
  font-size:13px;line-height:1.85;color:var(--muted);
}
.qform__note strong{color:var(--ink)}

.qform__error{
  margin:0 0 16px;padding:11px 14px;border-radius:4px;
  background:#FBEDE9;border:1px solid #E3BDB2;
  font-size:13.5px;line-height:1.8;color:#8A3A26;
}

/* 送信後。応募フォームと違い、別ページには飛ばさず同じ場所で返します。
   聞いただけの人をサンクスページへ送ると、応募したと誤解させるためです。 */
.qform__done{
  margin:0;padding:18px 20px;border-radius:4px;
  background:#fff;border-left:4px solid var(--blue);
  font-size:15px;font-weight:700;line-height:1.85;color:var(--ink);
}
.qform__done span{display:inline-block;margin-top:6px;font-weight:400;font-size:13.5px;color:var(--muted)}

.qform__form{display:grid;gap:8px}
.qform__label{
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin-top:8px;
}
.qform__req{
  font-family:var(--sans,inherit);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--blue);border-radius:2px;padding:2px 6px;
}
.qform__select,.qform__text{
  width:100%;font-size:15px;line-height:1.8;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:11px 13px;font-family:inherit;
}
/* 入力欄の文字は16px未満だと、iPhoneで画面が勝手に拡大します。
   15pxにしているのは見た目の都合ですが、拡大が気になる場合は16pxにしてください。 */
.qform__text{resize:vertical;min-height:110px}
.qform__select:focus,.qform__text:focus{
  outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue);
}
.qform__btn{
  justify-self:start;margin-top:14px;
  background:var(--blue);color:#fff;border:0;border-radius:4px;
  font-family:var(--display);font-weight:700;font-size:15px;
  padding:13px 34px;cursor:pointer;line-height:1;
}
.qform__btn:hover{filter:brightness(1.08)}

@media (max-width:720px){
  /* スマホでは、押しやすいよう横いっぱいに広げます */
  .qform__btn{justify-self:stretch;text-align:center}
}

/* ===========================================================
   印刷・PDF保存（職種ページを求人票として持ち帰るため）
   導線設計表の N15「セーフティネット」
   =========================================================== */
@media print{
  /* ⚠️ いちばん大事な1行です。
     スクロールで現れる演出（.reveal）は、画面に入るまで opacity:0 です。
     印刷ではスクロールが起きないため、この指定が無いと
     本文がまるごと消えた紙が出ます（過去に真っ白なPDFができる原因）。 */
  .reveal{opacity:1 !important;transform:none !important}

  /* 紙に出しても意味のないものを消します。
     リンク・ボタン・他職種への誘導は、紙の上では押せません。 */
  .hdr,.ftr,.company,.sp-cta,
  .entry-cta,.crosslinks,.job-hero__cta,.job-hero__print,
  .cta-inline,.qform{display:none !important}

  /* 画面用の濃い背景は、インクを大量に使ううえに文字が読みにくくなります */
  body,.job-hero,.sec,.sec--tint,.sec--warm{
    background:#fff !important;color:#000 !important;
  }
  .job-hero__en,.job-hero__alt,.job-hero__catch,.job-hero__note,
  .job-hero__title{color:#000 !important}

  /* 写真は紙では情報量が少ないわりに場所を取るので省きます */
  .job-hero__media{display:none !important}

  body{font-size:11pt;line-height:1.7}
  .wrap{max-width:none;padding:0}
  .sec{padding:12pt 0 !important;border:0 !important}
  .job-hero{padding:0 0 10pt !important}
  .job-hero__title{font-size:20pt;margin:0 0 6pt}

  /* 表（募集要項）が途中で切れると読めなくなるので、
     1行が2ページにまたがらないようにします。 */
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
  h2,h3{page-break-after:avoid}

  /* 紙だけに出す情報。
     どの会社の、いつ時点の求人票なのかが分からないと、
     印刷して持ち歩いたときに使えません。 */
  .job-hero::before{
    content:"株式会社AliveCast 採用サイト　recruit.alivecast.co.jp";
    display:block;font-size:9pt;color:#000;
    border-bottom:1pt solid #000;padding-bottom:4pt;margin-bottom:10pt;
  }
  .job-single::after{
    content:"※ 最新の募集条件は、採用サイトでご確認ください。";
    display:block;font-size:9pt;color:#000;
    border-top:1pt solid #000;padding-top:6pt;margin-top:12pt;
  }

  @page{margin:14mm 12mm}
}

/* ===========================================================
   求人票の「印刷・PDFで保存」ボタン（職種ページのヒーロー内）
   =========================================================== */

/* ⚠️ ここは一度不具合を出した箇所です。直すときは理由を読んでください。
 *
 * 隣の「募集要項を見る」は <a> ですが、こちらは <button> です。
 * .btn--ghost は border-color しか指定していないため、<a> では
 * 背景が透明のまま（濃いヒーローが透けて白文字が読める）なのに対し、
 * <button> ではブラウザ標準のボタン背景（#f0f0f0 の薄いグレー）が残り、
 * 白い文字とほぼ同化して読めませんでした。
 *
 * appearance:none と background:transparent を明示して、
 * <a> と同じ見た目にそろえます。
 */
.job-hero__print{margin:14px 0 0}
.job-hero__print .btn{
  -webkit-appearance:none;appearance:none;
  background:transparent;
  font:inherit;font-weight:700;
  cursor:pointer;
}
/* .btn は末尾に「→」が付きます。移動ではなく操作のボタンなので矢印は出しません */
.job-hero__print .btn::after{content:""}

/* ===========================================================
   スマホのメニュー（ハンバーガー）
   =========================================================== */

/* パソコン（960px以上）は縦型ヘッダーにメニューが常に出ているので、
   ボタンは出しません。 */
.hdr__burger{display:none}

@media(max-width:959px){
  .hdr__burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;             /* 指で押せる最小サイズ（44px）を確保 */
    background:transparent;border:1px solid var(--line);border-radius:4px;
    cursor:pointer;padding:0;flex:none;
    -webkit-appearance:none;appearance:none;
  }
  /* 三本線は擬似要素で作ります。画像を増やさずに済みます。 */
  .hdr__burger-bars,
  .hdr__burger-bars::before,
  .hdr__burger-bars::after{
    display:block;width:20px;height:2px;background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .hdr__burger-bars{position:relative}
  .hdr__burger-bars::before,
  .hdr__burger-bars::after{content:"";position:absolute;left:0}
  .hdr__burger-bars::before{top:-6px}
  .hdr__burger-bars::after{top:6px}

  /* 開いているときは×印に変えます。
     「閉じられる」ことが見た目で分からないと、戻れないと感じさせるためです。 */
  .hdr__burger.is-open .hdr__burger-bars{background:transparent}
  .hdr__burger.is-open .hdr__burger-bars::before{top:0;transform:rotate(45deg)}
  .hdr__burger.is-open .hdr__burger-bars::after{top:0;transform:rotate(-45deg)}

  /* メニュー本体。ヘッダーのすぐ下に、画面幅いっぱいで開きます。 */
  .hdr__nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(0,0,0,.10);
    padding:6px 0;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .hdr__nav.is-open{display:flex}
  .hdr__nav a{
    padding:14px var(--gutter);         /* 1行ずつ押しやすい高さにします */
    font-size:15px;color:var(--ink);
    border-bottom:1px solid var(--line-soft, #EFEFEF);
  }
  .hdr__nav a:last-child{border-bottom:0}
  .hdr__nav a:hover{color:var(--blue);background:var(--paper-2)}

  /* メニューを重ねて出すので、ヘッダーに重なりの順番と位置の基準を持たせます */
  .hdr{position:sticky;top:0;z-index:50}
  .hdr__in{position:relative}
}

@media (prefers-reduced-motion:reduce){
  /* 動きを減らす設定の人には、線の変形アニメーションを出しません */
  .hdr__burger-bars,
  .hdr__burger-bars::before,
  .hdr__burger-bars::after{transition:none}
}

/* スマホでは、ロゴ＋ハンバーガー＋エントリーボタンを1行に収める必要があります。
   ⚠️ パソコン用の .hdr__right{gap:34px} のままだと、
      ハンバーガーを足したぶん（44px）エントリーボタンが画面外へはみ出し、
      ページ全体が横スクロールします（375px幅で実測5pxはみ出していました）。 */
@media(max-width:959px){
  .hdr__right{gap:10px}
  .hdr .hdr__cta{padding:9px 13px;font-size:12.5px;white-space:nowrap}
}
/* 画面がとくに狭いときは、ロゴ横の「Alivecast / RECRUIT」を省きます。
   ロゴ自体に社名が入っているので、情報は失われません。 */
@media(max-width:400px){
  .hdr__tag{display:none}
}

/* ===========================================================
   文字を大きく・読みやすく（2026-10-16）
   ===========================================================

   【なぜこのブロックが最後にあるか】
   既存の指定を1つずつ書き換えると、どこを変えたか分からなくなり、
   元に戻したいときに追えなくなります。
   ファイルの末尾にまとめて置くことで、
   「ここを消せば元の大きさに戻る」状態を保っています。

   【何を大きくして、何を大きくしていないか】
   大きくしたのは【読む文章】だけです。
   英字ラベル（ABOUT / PROCESS など）、バッジ、職種の英語表記は
   デザイン上の飾りなので、大きくすると逆に雑然とします。触っていません。

   【行間も一緒に広げています】
   日本語は漢字とかなが混ざるため、行間が詰まっていると
   文字を大きくしても読みにくいままです。1.9前後に揃えています。 */

/* --- 基準となる本文 --- */
body{font-size:17px;line-height:1.9}
.sec-lead{font-size:17px;line-height:1.95}

/* --- 各セクションの本文 --- */
.merit p{font-size:15.5px;line-height:1.95}
.job-featured__kw{font-size:15.5px;line-height:2}
.job__kw{font-size:14.5px;line-height:1.95}
.flow p{font-size:14.5px;line-height:1.95}
.training__card p{font-size:15px;line-height:2}

/* --- よくある質問（読む量が多いので大きめに） --- */
.qa summary{font-size:16px}
.qa__a p{font-size:16px;line-height:2}

/* --- 他社との違い（N9） --- */
.diff__table th,.diff__table td{font-size:15px;line-height:1.85}
.fit__list li{font-size:15.5px;line-height:1.95}

/* --- 待遇とキャリア（N11） --- */
.pay__table th,.pay__table td{font-size:15px;line-height:1.85}
.pay__note{font-size:13.5px}
.payfacts__v{font-size:15px}

/* --- 実績・会社概要 --- */
.record__body{font-size:15px;line-height:2}
.company__table th,.company__table td{font-size:15px;line-height:1.9}

/* --- 匿名の質問フォーム --- */
.qform__lead{font-size:16px}
.qform__note{font-size:14px;line-height:1.9}

@media(min-width:960px){
  /* 画面左の縦型メニュー。狭い幅なので上げ幅は控えめにします */
  .hdr__nav a{font-size:14px}
}