@charset "UTF-8";
/* ============================================================
   ページ後半（index-test.html 専用）
     ① RECRUIT の3項目に添える図
     ② 閉じの大コピー「誠実に、挑み、共に高みへ、つながる。」
        ＋ スクロールで描かれる背景の線（harc-top3 から移植）
     ③ お問い合わせのタブ（harc-top3 の形）
   ============================================================ */

/* ============================================================
   ① RECRUIT の図
   STRENGTH の図より線を減らし、意味だけが分かる簡単な形にする。
   ここは「読む」より「拾う」区間なので、密度を上げない。
   ============================================================ */
#recruit .rec-fig {
  position: relative; width: 100%; aspect-ratio: 5 / 3;
  margin: 4px 0 18px;
}
#recruit .rec-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#recruit .rec-fig .st { fill: none; stroke: var(--gold-300); vector-effect: non-scaling-stroke; }
#recruit .rec-fig .st--dim   { stroke: rgba(198, 167, 104, 0.38); }
#recruit .rec-fig .st--faint { stroke: rgba(22, 35, 63, 0.12); }
#recruit .rec-fig .fl        { fill: var(--gold-300); }
#recruit .rec-fig .fl--dim   { fill: rgba(198, 167, 104, 0.42); }

/* 01 まわりの三人から、真ん中の一人へ支えが集まる */
/* 光が線の上を外→内へ走る。pathLength=1 なので割合で指定できる */
#recruit .rec-fig .recflow {
  stroke: var(--gold-200); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 0.24 0.76;
  animation: recFlow 2.8s linear infinite;
}
#recruit .rec-fig .recflow--2 { animation-delay: -.93s; }
#recruit .rec-fig .recflow--3 { animation-delay: -1.86s; }
@keyframes recFlow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 真ん中の下敷き。線が体の上を横切らないよう、地の色で一度隠す */
#recruit .rec-fig .rec-plate { fill: var(--bg); }
/* 支えられている人は、ゆっくり息をする */
#recruit .rec-fig .rec-center {
  transform-box: fill-box; transform-origin: center;
  animation: recBreathe 3.4s ease-in-out infinite;
}
@keyframes recBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* 02 任される量が増えていく＝箱が積み上がる */
#recruit .rec-fig .stack1 { transform-box: fill-box; transform-origin: 50% 100%; animation: recStack 4.4s var(--ease-out) infinite; }
#recruit .rec-fig .stack1--2 { animation-delay: .22s; }
#recruit .rec-fig .stack1--3 { animation-delay: .44s; }
@keyframes recStack {
  0%, 6%   { transform: scaleY(0); opacity: 0; }
  30%, 80% { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(0); opacity: 0; }
}

/* 03 どこにいても、同じ輪の中にいる */
#recruit .rec-fig .ping { transform-box: fill-box; transform-origin: center; animation: recPing 3s ease-out infinite; }
#recruit .rec-fig .ping--2 { animation-delay: 1s; }
#recruit .rec-fig .ping--3 { animation-delay: 2s; }
@keyframes recPing {
  0%   { transform: scale(.4); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ============================================================
   ② 閉じの大コピー
   冒頭の理念と同じ一文でページを挟む。
   背景の線はスクロール量に合わせて描かれる（--d を JS が 0→1 で流す）。
   path に pathLength="1" を付けてあるので、実長を測らずに割合で描ける。
   ============================================================ */
.catch {
  position: relative; overflow: hidden;
  padding-block: clamp(80px, 16vh, 170px);
}
.catch__l {
  position: absolute; z-index: 1; left: -6%; top: 50%; translate: 0 -50%;
  width: 112%; height: min(70vh, 480px); pointer-events: none;
}
.catch__l path {
  fill: none; stroke: var(--gold-400); stroke-width: 2; stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0));
}
.bigcopy__t {
  position: relative; z-index: 2;
  font-size: clamp(26px, 5.4vw, 62px); font-weight: 700; line-height: 1.55;
  letter-spacing: 0.04em; color: var(--text);
}
.bigcopy__t span { display: block; overflow: hidden; }
.bigcopy__t b {
  display: block; font-weight: inherit;
  transform: translateY(118%); transition: transform .9s var(--ease-out);
}
.bigcopy__t.in b { transform: none; }
.bigcopy__t.in span:nth-child(2) b { transition-delay: .12s; }

/* ============================================================
   ③ お問い合わせのタブ（harc-top3 の形）
   ============================================================ */
.tabs { display: flex; gap: 10px; margin: 6px 0 30px; flex-wrap: wrap; }
.tab {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 13px 28px; border-radius: 3px;
  font-family: inherit; font-size: 14px; letter-spacing: 0.1em; cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.tab:hover { border-color: var(--gold-400); color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--gold-300); border-color: var(--gold-300); color: var(--navy-900); font-weight: 700;
}
.form[hidden] { display: none; }
.form:focus-visible { outline: 1px dashed var(--line); outline-offset: 12px; }

/* 欄の下に出すエラー。ブラウザ標準の吹き出しは1つずつしか出ず、
   スクロールで消え、読み上げにも素直に乗らないので使わない */
.err {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; line-height: 1.7; color: #C1584E;
}
.err::before { content: "！"; flex: none; }
.err[hidden] { display: none; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #C1584E; background: rgba(193, 88, 78, 0.06); }

/* 迷惑送信よけ。人の目にもキーボードにも触れさせない */
.f--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 種別で出し分ける欄 */
.field--extra[hidden] { display: none; }

/* ============================================================
   動きを控える設定のとき
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) #recruit .rec-fig * { animation: none !important; }
  html:not(.motion-full) #recruit .rec-fig .stack1 { transform: scaleY(1); opacity: 1; }
  html:not(.motion-full) #recruit .rec-fig .recflow { stroke-dasharray: none; opacity: .5; }
  html:not(.motion-full) #recruit .rec-fig .ping { opacity: .5; }
  html:not(.motion-full) .catch__l path { stroke-dashoffset: 0; }
  html:not(.motion-full) .bigcopy__t b { transform: none; }
}
html.motion-reduced #recruit .rec-fig * { animation: none !important; }
html.motion-reduced #recruit .rec-fig .stack1 { transform: scaleY(1); opacity: 1; }
html.motion-reduced #recruit .rec-fig .recflow { stroke-dasharray: none; opacity: .5; }
html.motion-reduced #recruit .rec-fig .ping { opacity: .5; }
html.motion-reduced .catch__l path { stroke-dashoffset: 0; }
html.motion-reduced .bigcopy__t b { transform: none; }


/* ============================================================
   CONTACT — harc-top3 の形にそろえる（紺地）
   ------------------------------------------------------------
   harc-top3 の作りを写している。

     ・地はHARCの紺。奥に集合写真をうっすら敷く
     ・見出しの下に、金色でメールアドレス
     ・タブは角を落とさず、選ばれた側は金でベタ塗り
     ・入力欄は白の半透明＋金の細い罫。角は立てたまま
     ・送信ボタンは金の輪郭。押す直前に金で塗りつぶす

   もとの index.html 側はクリーム地の明るい配色だったので、
   文字色や罫の色を紺地向けに置き換える。
   ============================================================ */
.contact-navy {
  position: relative;
  background: rgba(15, 22, 38, 0.94);
  color: var(--cream-50, #EDE8DC);
  overflow: hidden;
}

/* ★写真は敷かない★
   一度 team-2.jpg を 14% で敷いたが、
   紺地の上に明るい集合写真を乗せると、14% でも人の顔がはっきり出る。
   入力欄の枠や文字と重なって、フォームがまるごと読みにくくなった。
   地は無地の紺だけにする。 */
.contact-navy > .container { position: relative; z-index: 1; }

/* 見出しまわり */
.contact-navy .sec-head__en { color: var(--gold-300, #C6A768); }
.contact-navy .sec-head__jp { color: var(--cream-50, #EDE8DC); }
.contact-navy .sec-head__desc { color: rgba(237, 232, 220, 0.76); }
.contact-navy .sec-head__rule { background: rgba(198, 167, 104, 0.34); }

/* メールアドレス。harc-top3 と同じく明朝の金 */
.contact__mail {
  margin-top: 0.9rem;
  font-family: "Cormorant Garamond", var(--font-en, serif);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.06em;
}
.contact__mail a {
  color: var(--gold-300, #C6A768);
  text-decoration: none;
  text-underline-offset: 0.25em;
}
.contact__mail a:hover { text-decoration: underline; }

/* ---- タブ ---- */
.contact-navy .tabs { gap: 0.5rem; flex-wrap: wrap; }
.contact-navy .tab {
  background: none;
  border: 1px solid rgba(198, 167, 104, 0.5);
  border-radius: 0;                /* 角は立てたまま */
  color: var(--cream-50, #EDE8DC);
  padding: 0.65rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.contact-navy .tab[aria-selected="true"] {
  background: var(--gold-300, #C6A768);
  color: var(--navy-900, #0B1428);
  border-color: var(--gold-300, #C6A768);
}

/* ---- 入力欄 ---- */
.contact-navy .field__label { color: rgba(237, 232, 220, 0.7); letter-spacing: 0.12em; }
/* ★「必須」が見えなくなっていた★
   もとの .field__req は「金の下地に紺の文字」という札の形（style.css）。
   紺地に合わせて文字色だけ金にしたため、
   金の下地に金の文字＝完全に読めない状態になっていた。

   harc-top3 は札にせず、金の細い文字を添えるだけ。そちらに合わせる。 */
.contact-navy .field__req {
  color: var(--gold-300, #C6A768);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-left: 0.35em;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.contact-navy .field input,
.contact-navy .field select,
.contact-navy .field textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(198, 167, 104, 0.32);
  border-radius: 0;
  color: var(--cream-50, #EDE8DC);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.contact-navy .field input:focus,
.contact-navy .field select:focus,
.contact-navy .field textarea:focus {
  outline: none;
  border-color: var(--gold-300, #C6A768);
  background: rgba(255, 255, 255, 0.1);
}
/* 選択肢の一覧は、開くと地色が変わるので合わせておく */
.contact-navy .field select option {
  background: var(--navy-900, #0B1428);
  color: var(--cream-50, #EDE8DC);
}
.contact-navy .field input::placeholder,
.contact-navy .field textarea::placeholder { color: rgba(237, 232, 220, 0.38); }

/* 入力に不備があるとき */
.contact-navy .field input[aria-invalid="true"],
.contact-navy .field select[aria-invalid="true"],
.contact-navy .field textarea[aria-invalid="true"] {
  border-color: #C9705A;
  background: rgba(201, 112, 90, 0.08);
}
.contact-navy .err { color: #F0A48D; }

.contact-navy .form__note,
.contact-navy .form__msg { color: rgba(237, 232, 220, 0.56); }
.contact-navy .form__note a { color: var(--gold-300, #C6A768); }

/* ---- 送信ボタン ---- */
.contact-navy .form__submit {
  border: 1px solid var(--gold-300, #C6A768);
  background: none;
  color: var(--cream-50, #EDE8DC);
  border-radius: 0;
}
.contact-navy .form__submit:hover {
  background: var(--gold-300, #C6A768);
  color: var(--navy-900, #0B1428);
}


/* ============================================================
   CONTACT のフォーム — harc-top3 と同じ組み方
   ------------------------------------------------------------
   ・幅は 820px までに抑える（画面いっぱいに広げない）
   ・2列。氏名／会社名、メール／電話 が横に並ぶ
   ・種別・本文・同意・注意書き・ボタンは横いっぱい
   ・並び順も harc-top3 にそろえる
       氏名 → 会社名 → メール → 電話 → 種別 → 追加欄 → 本文
     HTML の順番は触らず、CSS の order だけで入れ替える。
     （id を参照している検証や表示の処理を壊さないため）
   ============================================================ */
.contact-navy .form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem clamp(1rem, 2.4vw, 1.8rem);
  max-width: 820px;
}

/* 横いっぱいに使うもの */
.contact-navy .form > .field:has(select),
.contact-navy .form > .field:has(textarea),
.contact-navy .form > .field--extra,
.contact-navy .form > .agree,
.contact-navy .form > .err--wide,
.contact-navy .form > .form__note,
.contact-navy .form > .form__msg,
.contact-navy .form > .form__submit { grid-column: 1 / -1; }

/* 並び替え。指定のないものは 0 なので、先に来てほしい欄に小さい番号を振る */
.contact-navy .form > .field:has(#cName), .contact-navy .form > .field:has(#eName) { order: 1; }
.contact-navy .form > .field:has(#cCorp), .contact-navy .form > .field:has(#eSchool) { order: 2; }
.contact-navy .form > .field:has(#cMail), .contact-navy .form > .field:has(#eMail) { order: 3; }
.contact-navy .form > .field:has(#cTel),  .contact-navy .form > .field:has(#eGrad) { order: 4; }
.contact-navy .form > .field:has(select) { order: 5; }
.contact-navy .form > .field--extra      { order: 6; }
.contact-navy .form > .field:has(textarea) { order: 7; }
.contact-navy .form > .agree      { order: 8; }
.contact-navy .form > .err--wide  { order: 8; }
.contact-navy .form > .form__note { order: 9; }
.contact-navy .form > .form__submit { order: 10; justify-self: start; }
.contact-navy .form > .form__msg  { order: 11; }

/* ---- 同意チェック ---- */
.contact-navy .agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: rgba(237, 232, 220, 0.72);
  cursor: pointer;
}
.contact-navy .agree input {
  margin-top: 0.35em;
  accent-color: var(--gold-300, #C6A768);
  width: 16px; height: 16px;
  flex: none;
}
.contact-navy .agree a {
  color: var(--gold-300, #C6A768);
  text-underline-offset: 0.25em;
}

/* ---- 見出しからフォームまでを、同じ幅の柱にそろえる ---- */
.contact-navy .sec-head,
.contact-navy .tabs { max-width: 820px; }

/* ---- 狭い画面では1列に ---- */
@media (max-width: 720px) {
  .contact-navy .form { grid-template-columns: 1fr; }
  .contact-navy .form > * { grid-column: 1 / -1; }
}


/* ---- CONTACT の電話番号 ----
   メールアドレスの隣に、同じ金色で添える。
   スマホでは幅が足りないので、下へ折り返す。 */
.contact__tel {
  margin-left: 1.1em;
  padding-left: 1.1em;
  border-left: 1px solid rgba(198, 167, 104, 0.4);
}
.contact__tel a { color: var(--gold-300, #C6A768); text-decoration: none; }
.contact__tel a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  /* 縦に積む。区切りの縦線は意味がなくなるので外す */
  .contact__tel {
    display: block;
    margin-left: 0; padding-left: 0;
    border-left: 0;
    margin-top: 0.35em;
  }
}