/* 限定正社員 採用サイト 構築 v3（08 承認版）用 CSS。site.css・apply.css・v2.css のあとに読む。素の CSS だけ。
   元のサイトの色（青緑 #78CDCF・橙 #F98607）・書体・部品はそのまま使い、ここでは写真を使わない図と、
   新しい部品（働き方の枠・応援の範囲・ランクの段・給与の式・仕事の分野・社員紹介・公式 SNS・応募の流れ）だけを足す。
   動きは「見えた時に 1 回だけ」（site.js の data-reveal が付ける .is-in）で、スクロールには手を出さない。 */

/* ===== 図の注記（イメージです） ===== */
.v3-note { display: inline-block; font-size: 12px; color: var(--c-ink2); background: rgba(255,255,255,0.85); border: 1px solid var(--c-line); border-radius: 999px; padding: 0 10px; line-height: 1.8; }
.v3-figure { position: relative; margin: 0; padding-bottom: 30px; }
.v3-figure .v3-note { position: absolute; right: 10px; bottom: 0; }

/* ===== トップの頭（写真の代わりに働き方の枠の図） ===== */
.v3-hero { padding-bottom: 150px; }
.v3-hero .hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; }
.v3-hero .hero__title { font-size: clamp(30px, 4.4vw, 52px); }
.v3-hero .hero__title .ln { display: block; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.js .v3-hero .hero__title .ln { opacity: 0; transform: translateY(0.4em); }
.js .v3-hero.hero-ready .hero__title .ln { animation: fadeUp 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 160ms + 150ms); }
.v3-hero__art { position: relative; z-index: 1; }

/* 働き方の枠（A-1）: 線の枠が描かれ、中に「働く場所」「仕事の範囲」、外に「期間の定めなし」 */
.v3-frame { width: 100%; height: auto; display: block; overflow: visible; }
.v3-frame .fr { fill: rgba(255,255,255,0.72); stroke: var(--c-deep); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.v3-frame .fr-in { fill: #fff; stroke: var(--c-main); stroke-width: 2; }
.v3-frame .lbl { font-family: var(--f-jp); font-weight: 700; fill: #1d3c40; }
.v3-frame .lbl-s { font-family: var(--f-jp); font-weight: 500; fill: var(--c-ink2); }
.v3-frame .band { fill: var(--c-deep); }
.v3-frame .band-t { font-family: var(--f-jp); font-weight: 700; fill: #fff; }
.v3-frame .ic { fill: none; stroke: var(--c-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v3-frame .ring { fill: none; stroke: var(--c-main); stroke-width: 2; stroke-dasharray: 4 6; }
.js .v3-frame .fr { stroke-dashoffset: 1; }
.js .v3-frame .fade { opacity: 0; }
.js .hero-ready .v3-frame .fr, .js .is-in .v3-frame .fr { animation: v3Draw 1.4s var(--ease) 0.3s forwards; }
.js .hero-ready .v3-frame .fade, .js .is-in .v3-frame .fade { animation: v3Fade 0.7s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
/* トップの道すじ（4 段）。960px 以下は site.css の縦並びのまま */
@media (min-width: 961px) { .path--row.v3-path4 { grid-template-columns: repeat(4, 1fr); } }
@keyframes v3Draw { to { stroke-dashoffset: 0; } }
@keyframes v3Fade { from { opacity: 0; } to { opacity: 1; } }
/* ===== 3 つの安心（A-2）: features の上に「期間の定めなし」などの文字の特長 ===== */
.v3-features .feature__big--text { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; }

/* ===== 応援の範囲（A-2）: 中心から円が広がる ===== */
.v3-range { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.v3-range__svg { width: 100%; max-width: 420px; height: auto; margin-inline: auto; display: block; }
.v3-range__svg .c1 { fill: var(--c-tint); stroke: var(--c-main); stroke-width: 2; }
.v3-range__svg .c2 { fill: none; stroke: #b9c9cb; stroke-width: 1.5; stroke-dasharray: 3 7; }
.v3-range__svg .home { fill: var(--c-deep); }
.v3-range__svg .t { font-family: var(--f-jp); font-weight: 700; fill: #1d3c40; }
.v3-range__svg .ts { font-family: var(--f-jp); font-weight: 500; fill: var(--c-ink2); }
.v3-range__svg .grow { transform-box: fill-box; transform-origin: 50% 50%; }
.js [data-reveal] .v3-range__svg .grow { transform: scale(0.35); opacity: 0; transition: transform 1.1s var(--ease) 0.2s, opacity 0.6s 0.2s; }
.js [data-reveal].is-in .v3-range__svg .grow { transform: none; opacity: 1; }
.v3-points { display: grid; gap: 14px; }
.v3-points li { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px 20px; }
.v3-points b { display: block; color: var(--c-deeper); font-size: 17px; margin-bottom: 4px; }
.v3-points p { margin: 0; font-size: 15px; line-height: 1.8; }

/* ===== 制度の注記（製造の現場の制度・IT は見直し中） ===== */
.v3-scope { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--c-deeper); background: var(--c-tint); border: 1px solid var(--c-line); border-radius: 8px; padding: 6px 14px; margin: 0 0 22px; line-height: 1.7; }

/* ===== 縦の道すじ（スクロールに連動しない版。見えた時に線と点が出る） ===== */
.v3-steps { position: relative; display: grid; gap: 18px; }
.v3-steps::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--c-line); }
.v3-steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.v3-steps .no { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 4px solid var(--c-main); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 700; font-size: 24px; color: var(--c-deep); position: relative; z-index: 1; }
.v3-steps .card { background: #fff; border-radius: var(--r-card); padding: 18px 22px; box-shadow: var(--shadow); }
.v3-steps h3 { font-size: 19px; margin: 0 0 4px; }
.v3-steps .tagline { font-size: 12.5px; font-weight: 700; color: var(--c-deeper); margin: 0 0 2px; }
.v3-steps p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--c-ink2); }
.v3-steps .sub { margin-top: 10px; padding: 10px 14px; background: var(--c-tint); border-radius: 10px; font-weight: 700; color: var(--c-deeper); font-size: 14px; }

/* ===== 13 のランク（A-4）: 段が低い方から順に伸びる。人や矢印は描かない ===== */
.v3-ranks { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); padding: 26px 26px 20px; }
.v3-ranks__bars { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; align-items: end; height: 200px; padding: 0; margin: 0; }
.v3-ranks__bars li { height: calc(24% + var(--k) * 6%); border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; font-family: var(--f-num); font-weight: 700; font-size: 13px; color: #fff; transform-origin: bottom; }
.v3-ranks__bars .w { background: #78CDCF; color: #0f3f44; }
.v3-ranks__bars .l { background: #3fb0b5; }
.v3-ranks__bars .m { background: #1b8a91; }
.v3-ranks__bars .d { background: #0f5f66; }
.js [data-reveal] .v3-ranks__bars li { transform: scaleY(0.06); transition: transform 0.7s var(--ease); transition-delay: calc(var(--k) * 60ms + 200ms); }
.js [data-reveal].is-in .v3-ranks__bars li { transform: none; }
.v3-ranks__layers { display: grid; grid-template-columns: 3fr 6fr 2fr 2fr; gap: 6px; margin: 10px 0 0; }
.v3-ranks__layers li { border-top: 3px solid var(--c-line); padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--c-deeper); text-align: center; line-height: 1.5; }
.v3-ranks__layers li span { display: block; font-family: var(--f-num); font-weight: 600; font-size: 12px; color: var(--c-ink2); }
.v3-ranks__cap { margin: 14px 0 0; font-size: 14px; color: var(--c-ink2); }
.v3-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 18px 0 0; font-size: 14px; }
.v3-names div { display: flex; gap: 10px; border-bottom: 1px dashed var(--c-line); padding: 4px 0; }
.v3-names dt { font-family: var(--f-num); font-weight: 700; color: var(--c-deep); min-width: 2.6em; }
.v3-names dd { margin: 0; }

/* 査定の月（静止。根拠の確認が残るので脈打たせない） */
.v3-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 14px 0 6px; max-width: 640px; }
.v3-months span { text-align: center; font-family: var(--f-num); font-weight: 600; font-size: 13px; padding: 6px 0; border-radius: 8px; background: #fff; border: 1px solid var(--c-line); color: var(--c-ink2); }
.v3-months span.on { background: var(--c-tint2); border-color: var(--c-main); color: var(--c-deeper); font-weight: 700; }

/* ===== 給与の組み立て（A-5）: 式の 3 つの要素が順に出る ===== */
.v3-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0 0 30px; }
.v3-formula .term { background: #fff; border: 2px solid var(--c-main); border-radius: 16px; padding: 12px 20px; text-align: center; min-width: 150px; }
.v3-formula .term b { display: block; font-size: 17px; color: #1d3c40; }
.v3-formula .term small { display: block; font-size: 12.5px; color: var(--c-ink2); line-height: 1.6; }
.v3-formula .term--res { background: var(--c-deep); border-color: var(--c-deep); }
.v3-formula .term--res b, .v3-formula .term--res small { color: #fff; }
.v3-formula .op { font-family: var(--f-num); font-weight: 700; font-size: 28px; color: var(--c-deep); }
.js [data-reveal] .v3-formula > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--n) * 140ms + 150ms); }
.js [data-reveal].is-in .v3-formula > * { opacity: 1; transform: none; }

/* ===== 仕事の分野（A-6）: 同じ大きさのカードを並べる。強みの特集の印 ===== */
.v3-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v3-field { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-card); padding: 24px 26px 22px; color: var(--c-ink); transition: border-color 0.3s; }
a.v3-field:hover, a.v3-field:focus-visible { text-decoration: none; border-color: var(--c-main); }
.v3-field__en { font-family: var(--f-en); font-weight: 600; letter-spacing: .18em; font-size: 12px; color: var(--c-deep); text-transform: uppercase; }
.v3-field__t { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: #1d3c40; line-height: 1.35; }
.v3-field__x { margin: 0; color: var(--c-ink2); line-height: 1.8; flex: 1; }
.v3-field__sites { margin: 0; font-size: 14px; color: var(--c-ink); }
.v3-field__go { font-weight: 700; color: var(--c-deep); }
.v3-field__go::after { content: " →"; }
.v3-field .v3-badge { position: absolute; top: 18px; right: 20px; }
.v3-badge { align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: #fff1e0; color: #9a4a00; border: 1px solid #f3c48f; }
.v3-field--wait { background: #fbfdfd; border-style: dashed; }
.js [data-reveal] .v3-fields > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.3s; transition-delay: calc(var(--n) * 110ms + 100ms); }
.js [data-reveal].is-in .v3-fields > * { opacity: 1; transform: none; }

/* ===== 求人へ直行（A-7） ===== */
.v3-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 18px 22px; box-shadow: var(--shadow); }
.v3-direct b { font-size: 17px; color: #1d3c40; margin-right: auto; }
.v3-direct a.v3-quick { font-weight: 700; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--c-main); color: var(--c-deep); font-size: 14px; }
.v3-direct a.v3-quick:hover { text-decoration: none; background: var(--c-tint); }

/* ===== 応募の流れ（応募・相談のページ） ===== */
.v3-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: f; }
.v3-flow li { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 18px 18px 16px; counter-increment: f; }
.v3-flow li::before { content: counter(f); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-main); color: #fff; font-family: var(--f-num); font-weight: 700; margin-bottom: 8px; }
.v3-flow b { display: block; font-size: 16px; color: #1d3c40; }
.v3-flow p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--c-ink2); }
.v3-apply-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v3-apply-list li { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px 18px; }
.v3-apply-list b { font-size: 17px; }
.v3-apply-list .apply-sites__job { font-size: 14px; line-height: 1.6; }
.v3-apply-list .btn { width: 100%; min-height: 44px; font-size: 15px; }

/* ===== 公式 SNS（通常の外部リンク） ===== */
.v3-sns { margin-top: 26px; }
.v3-sns__t { font-weight: 700; font-size: 14px; color: var(--c-deeper); margin: 0 0 8px; }
.v3-sns__list { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-sns__list a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--c-main); background: #fff; color: var(--c-deep); font-weight: 700; font-size: 14px; }
.v3-sns__list a::after { content: "↗"; font-size: 0.9em; }
.v3-sns__list a:hover { text-decoration: none; background: var(--c-tint); }
.v3-sns__src { margin: 8px 0 0; font-size: 12px; color: var(--c-ink2); }

/* ===== 社員紹介（一覧・個別の雛形） ===== */
.v3-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v3-member { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; color: var(--c-ink); }
.v3-member:hover { text-decoration: none; }
.v3-member__top { height: 120px; background: linear-gradient(135deg, #78CDCF, #28A4CB); position: relative; }
.v3-member__top img { width: 100%; height: 100%; object-fit: cover; }
.v3-member__body { padding: 16px 20px 20px; display: grid; gap: 6px; }
.v3-member__name { font-size: 18px; font-weight: 700; color: #1d3c40; }
.v3-member__meta { font-size: 13px; color: var(--c-ink2); }
.v3-empty { background: var(--c-tint); border: 1px dashed var(--c-main); border-radius: var(--r-card); padding: 28px; text-align: center; }
.v3-empty b { display: block; font-size: 20px; color: #1d3c40; margin-bottom: 6px; }
.v3-empty p { margin: 0 0 6px; color: var(--c-ink2); }
.v3-qa { display: grid; gap: 18px; }
.v3-qa h2 { font-size: 20px; margin: 0 0 6px; }

/* ===== 960px 以下 ===== */
@media (max-width: 960px) {
  .v3-hero .hero__in { grid-template-columns: 1fr; gap: 24px; }
  .v3-hero__art { max-width: 520px; }
  .v3-range { grid-template-columns: 1fr; }
  .v3-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .v3-hero { padding-bottom: 130px; }
  .v3-fields, .v3-apply-list, .v3-flow, .v3-members, .v3-names { grid-template-columns: 1fr; }
  .v3-ranks { padding: 18px 14px 16px; }
  .v3-ranks__bars { height: 160px; gap: 3px; }
  .v3-ranks__bars li { font-size: 10px; border-radius: 5px 5px 0 0; }
  .v3-ranks__layers li { font-size: 11px; }
  .v3-months span { font-size: 11px; padding: 5px 0; }
  .v3-formula .term { min-width: 0; flex: 1 1 100%; }
  .v3-formula .op { flex: 1 1 100%; text-align: center; line-height: 1; }
  .v3-direct b { margin-right: 0; flex: 1 1 100%; }
}

/* ===== 元のページの動きのうち、繰り返しの動きを、このサイトでは止める ===== */
.flow__icon { animation-iteration-count: 1 !important; }

/* ===== 動きを止める設定：最初から最終の状態を見せる（site.css の全体停止に加えて、初期状態を戻す） ===== */
@media (prefers-reduced-motion: reduce) {
  .js .v3-frame .fr { stroke-dashoffset: 0 !important; }
  .js .v3-frame .fade, .js .v3-hero .hero__title .ln { opacity: 1 !important; transform: none !important; }
  .js [data-reveal] .v3-range__svg .grow, .js [data-reveal] .v3-ranks__bars li,
  .js [data-reveal] .v3-formula > *, .js [data-reveal] .v3-fields > * { opacity: 1 !important; transform: none !important; }
}

/* ===== 点検（impeccable・Codex Sol）を受けた直し ===== */
/* 文字の見えやすさ（色の面の上の文字を濃くする） */
.v3-flow li::before { background: #fff; border: 3px solid var(--c-main); color: var(--c-deeper); }
.v3-ranks__bars .l { color: #062a2d; }
.v3-ranks__bars .m { background: #157a80; }
.v3-formula .term--res { background: var(--c-deeper); border-color: var(--c-deeper); }
.v3-frame .band { fill: var(--c-deeper); }
.v3-field__en { color: var(--c-deeper); }
:focus-visible { outline-color: var(--c-deeper); }
.v3-direct a.v3-quick { min-height: 44px; display: inline-flex; align-items: center; }
/* 4 つの層の帯を棒の色に合わせる */
.v3-ranks__layers li:nth-child(1) { border-top-color: #78CDCF; }
.v3-ranks__layers li:nth-child(2) { border-top-color: #3fb0b5; }
.v3-ranks__layers li:nth-child(3) { border-top-color: #157a80; }
.v3-ranks__layers li:nth-child(4) { border-top-color: #0f5f66; }
/* 中で順に出す箱は、外側の浮き上がりを付けない（動きが二重にならない） */
.js [data-reveal].v3-stagger { transform: none; }
/* 動き続ける飾りを止める（見えた時に 1 回だけの決まり）。工程の図は見えた時に 1 回だけ順に光る */
.hero__blob, .apply-band::before, .apply-band::after, .page-hero__word, .wafer-spin { animation: none !important; }
.js .flow__icon { animation: none; }
.js .is-in .flow__icon { animation: flowGlow 7.5s ease-in-out 1 both; animation-delay: calc(var(--n) * 1.2s + 0.3s); }
.js .flow__label { opacity: 0.45; transition: opacity 0.8s var(--ease); }
.js .is-in .flow__label { opacity: 1; transition-delay: calc(var(--n) * 1.2s + 0.5s); }
/* 相談の求人の札：ホバー・絞り込みのたびの浮き上がり・影・拡大を付けない（宮城の札と同じ強さにしない） */
.gcard--wait, .gcard--wait:hover { transform: none; box-shadow: var(--shadow); }
.gcard--wait:hover .gcard__top::before { transform: none; }
.gcard--wait:hover .gcard__more::after { transform: none; }
.ggrid .gcard--wait.is-show { animation: none; }
.v3-card-tel { margin: 0; padding: 0 20px 18px; }
.v3-card-tel .btn { width: 100%; }
.v3-notes { margin-top: 20px; font-size: 14px; color: var(--c-ink2); }
.v3-notes li { margin-bottom: 4px; }
@media (max-width: 760px) {
  .v3-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v3-steps li { grid-template-columns: 48px 1fr; gap: 12px; }
  .v3-steps .no { width: 48px; height: 48px; font-size: 20px; }
  .v3-steps::before { left: 22px; }
  .v3-frame .lbl-s { font-size: 20px; }
  .v3-frame .band-t { font-size: 22px; }
  .v3-range__svg .ts { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .is-in .flow__icon { animation: none !important; }
  .js .flow__label { opacity: 1 !important; }
}