/* ============================================================
   02.html だけが読み込む、追加の見た目（01.html は css/style.css だけを読み込む）
   ・01（完成LP01）の見た目は、ここでは変えない。足した部品と、その部品のための上書きだけを書く
   ・MV：会場の写真が、1枚ずつ入れ替わる
   ・実績：会場の写真をちりばめる（PCは四隅、タブレット・スマホは下に並べる）
   ・CV の手前：「専門家が、定着まで支える」の面（支援の全体を、写真つきの4枚で）と、CVへ導く大きな矢印（にょろにょろ）
   ・運営会社の面の上に、黄色の細い線（紺の帯と濃紺が、溶けて隣り合わないように）
   ============================================================ */

/* ============================================================
   MV：会場の写真が入れ替わる（「ジョブドラフトFes」の名札などは、指示により付けない。LP全体は、あくまで「ジョブドラフト」）
   写真は、カラーのまま（指示 2026-09-30）。01 の写真の「白黒＋青の2色」の加工（css/style.css の .fv__photo img の filter と ::after）は、ここで打ち消す。
   窓の形（スラッシュ）は 01 のまま。
   --dx：窓の中での横位置（%）／ --my：縦位置（%。幅が狭くて窓が横長になるとき）
   ============================================================ */
.fv__slides { position: absolute; inset: 0; }
.js .fv__photo .fv__slide, .fv__photo .fv__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--dx, 50%) var(--my, 50%);
  scale: 1; translate: none; transform-origin: 62% 50%;      /* 01 の写真用の拡大・ずらしを打ち消す */
  transform: scale(1.09); opacity: 0; z-index: 1;
  transition: opacity 0s linear 1.5s, transform 8.5s linear;      /* 前の写真は、次の写真が完全に重なってから消える（途中で背景が透けて暗くならない） */
  animation: none;
  filter: none;                    /* 01 の白黒の加工を打ち消す（カラー） */
}
.fv__photo .fv__slide.is-on { opacity: 1; z-index: 2; transform: scale(1); transition: opacity 1.5s ease, transform 8.5s linear; }
.fv__photo--fes::after { content: none; }      /* 01 の「暗い所を紺に持ち上げる」重ね（2色にする加工）は、カラーなので使わない */
/* 窓の上端の紺の線（899px以下）と、文字の列の幅（900px以上）は、01 と同じ（css/style.css） */
.fv__title { font-feature-settings: "palt"; }        /* 「な」と「ら」の間などの、かなの間を詰める */
/* カーテンで MV が沈むとき、写真は 01 と同じ動き（.fv__visual ごと）。ここでは何もしない */

/* ============================================================
   実績：会場の写真をちりばめる
   PC（1200px以上）は、見出しと数字の外側に（1500px以上は四隅の4枚、それ未満は上の2枚。下の2枚は、札・受賞バッジの列より下）。
   それ未満は、注記の下に並べる（スマホは大きめの2枚、タブレットは4枚）。
   影の色は、対角の2枚（1枚目と4枚目）を橙、あとの2枚を黄色にする。
   ============================================================ */
.auth__scatter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 370px; margin: clamp(30px, 6vw, 46px) auto 0; padding-inline: 6px; }
.sc { position: relative; min-width: 0; margin: 0; padding: 5px; background: #fff; border-radius: 6px; box-shadow: 4px 5px 0 var(--sh, var(--hilite)); rotate: var(--r, 0deg); }
.sc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.sc--1 { --r: -3deg; --sh: var(--orange); }
.sc--2 { --r: 2.5deg; --sh: var(--hilite); }
.sc--3 { --r: -2deg; --sh: var(--hilite); }
.sc--4 { --r: 3deg; --sh: var(--orange); }
.sc--3, .sc--4 { display: none; }
@media (min-width: 600px) {
  .auth__scatter { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 780px; }
  .sc--3, .sc--4 { display: block; }
}
@media (min-width: 1200px) {
  .auth__scatter { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; pointer-events: none; }
  .sc { position: absolute; width: var(--w); padding: 6px; box-shadow: 6px 7px 0 var(--sh, var(--hilite)); }
  .auth__inner { --w: clamp(120px, calc((100cqw - 800px) / 2 - 60px), 240px); }
  .sc--1 { --r: -6deg; left: 1.2%; top: clamp(84px, 8.6vw, 132px); }
  .sc--2 { --r: 5deg; right: 1.4%; top: clamp(64px, 6.4vw, 100px); }
  .sc--3, .sc--4 { display: none; }
}
@media (min-width: 1500px) {
  /* 「唯一の上場企業」の札を大きくしたので、札・受賞バッジの列の横には、写真が入らない。下の2枚は、その列より下（注記の両わき）に置く。そのぶん、下の余白を足す */
  .auth__inner { padding-bottom: calc(clamp(52px, 7vw, 100px) + 64px); }
  .sc--3, .sc--4 { display: block; width: calc(var(--w) * .72); }
  .sc--3 { --r: 4deg; left: 1.4%; bottom: 22px; }
  .sc--4 { --r: -4deg; right: 1.6%; bottom: 34px; }
}
/* ふわっと浮く（写真の枠ごと、上下に少しだけ） */
.js .sc { animation: sc-float 6.5s ease-in-out infinite alternate; animation-delay: var(--fd, 0s); }
.sc--2 { --fd: -1.6s; } .sc--3 { --fd: -3.2s; } .sc--4 { --fd: -4.6s; }
@keyframes sc-float { from { translate: 0 -3px; } to { translate: 0 3px; } }

/* ============================================================
   CV の手前：「専門家が、定着まで支える」の面と、CVへ導く大きな矢印
   ============================================================ */
.fesx { position: relative; padding: clamp(56px, 8vw, 110px) 0 12px; background: var(--sky); }
.fesx__hd { display: grid; justify-items: center; gap: clamp(12px, 1.6vw, 18px); text-align: center; }
/* 「ジョブドラフトなら」の札（.fesx__tag）は、投資対効果の見出しの札と同じ（css/style.css） */
.fesx__title { font-size: clamp(26px, 6.4vw, 64px); }      /* palt は付けない：約物は .pm・.pe で詰める（palt が効く環境だと二重に詰まり、「、」と次の字が重なる） */
/* 波線は、橙の「出会える」の真下に（見出し全体の真ん中ではなく） */
.fesx__title .acc { position: relative; display: inline-block; padding-bottom: .12em; }      /* 波線と文字のすき間は、ほかの波線と同じ */
.fesx__title .acc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .26em; background: var(--wave) repeat-x center / auto 100%; }
.js .fesx__title .acc::after { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .35s; }
.js .fesx__title.is-in .acc::after { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) { .js .fesx__title .acc::after { clip-path: none; } }
.fesx__lead { max-width: 36em; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; line-height: 1.95; text-wrap: balance; }
/* 支援の全体（4枚）：採用計画 → 学校との関係づくり → 高校生との出会い → 入社後の定着。最後の1枚（定着）は、橙の影で目立たせる */
.sup { display: grid; gap: 16px; max-width: 1040px; margin: clamp(30px, 4.6vw, 56px) auto 0; padding: 4px 6px 0; }
.sup__item {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; padding: 9px 14px 9px 9px;
  background: #fff; border: 3px solid var(--navy); border-radius: 16px; box-shadow: 5px 5px 0 var(--hilite); rotate: var(--r, 0deg);
}
.sup__item--end { box-shadow: 5px 5px 0 var(--orange); }
.sup__ph { margin: 0; min-width: 0; }
.sup__ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }      /* スマホは正方形（写真の見せる位置は、HTML の object-position） */
.sup__body { min-width: 0; }
.sup__ttl { font-size: 17px; font-weight: 900; line-height: 1.4; color: var(--navy); }
.sup__item--end .sup__ttl { color: var(--orange); }
.sup__txt { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.75; text-wrap: balance; }      /* 行の長さをそろえる（右だけ空かないように） */
@media (max-width: 599px) { .sup__item { rotate: calc(var(--r, 0deg) * .5); } }      /* スマホは横長の札なので、傾きは控えめに */
@media (max-width: 374px) {      /* 幅の狭いスマホ：写真を小さくして、文字の幅を広げる（1行が8字ほどになり、細かく折れるため） */
  .sup__item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .sup__txt { font-size: 13px; }
}
@media (min-width: 600px) {
  .sup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
  .sup__item { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 8px 8px 18px; }
  .sup__ph img { aspect-ratio: 4 / 3; object-position: 50% 50% !important; }      /* 4:3 の写真を、そのまま全部見せる */
  .sup__body { padding: 6px 8px 0; text-align: center; }      /* 縦長の札は、見出しと文を中央に（指示 2026-10-01：左に偏って見えた） */
  .sup__ttl { font-size: clamp(17px, 2vw, 20px); }
  .sup__txt { font-size: 15px; }
}
@media (min-width: 900px) {
  .sup { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-inline: 12px; }
  .sup__item { translate: 0 var(--y, 0px); box-shadow: 6px 6px 0 var(--hilite); }
  .sup__item--end { box-shadow: 6px 6px 0 var(--orange); }
}
.flow--fesx { z-index: 2; height: clamp(300px, 44vh, 420px); margin-top: clamp(26px, 3vw, 40px); }
@media (min-width: 600px) and (max-width: 899px) { .flow--fesx { height: clamp(240px, 26vh, 320px); } }      /* タブレット：矢印だけの区間が長くなりすぎないように */

/* （運営会社の面の上の黄色の細い線は、2026-10-01 に、よくあるご質問を先に見せる並びにしたので、なくした。運営会社の面の上は、白いよくあるご質問の面） */