/*
  Contact(contact.html)専用。TOP/About/Services/career.html/web-production.html/
  training.html/ai-program.html/case-studies.htmlのトークンを継承。
  デザイン強度は★2(下層ページの中でも最も控えめ)。強い演出やガラス質感は使わず、
  「迷わない・入力しやすい・信頼できる」ことを最優先にしている。

  重要: 以下のクラス名・構造はjs/script.jsから直接参照されているため、
  スタイルの再定義のみ行い、クラス名自体は変更していない。
  - .ct-select-card / data-target / .is-active (フォーム切り替えの起点)
  - .ct-form-panel / .is-visible (表示切り替え)
  - .ct-form-placeholder / .is-hidden
  - #form-individual-inner, #i-privacy, #i-privacy-error 等のID(同意チェック検証)
  - .ct-form-hp(ハニーポット。position:absolute+opacity:0の非表示方法を維持。
    display:noneにすると簡易スパム対策として機能しなくなるため変更していない)
*/

.tl-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; white-space: nowrap; }
.tl-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gradient); }

/* ---------- Hero(cta-consultation.webpを1枚のメインビジュアルとして使用) ----------
  画像自体の「左に大きな白余白/右に人物」という構図をそのまま活かし、
  2カラムには分割せず、画像の左余白の上へ直接コピーを重ねている。
  可読性の保険として、左→中央にごく薄いwhiteグラデーションのみ重ねる(濃色オーバーレイなし)。
*/
.cf-hero { padding-top: 124px; padding-bottom: 40px; }
@media (max-width: 760px) { .cf-hero { padding-top: 96px; padding-bottom: 28px; } }

.cf-hero-media {
  position: relative; display: flex; align-items: center; min-height: 560px;
  border-radius: var(--radius-panel); overflow: hidden; isolation: isolate;
  border: 1px solid var(--op-border); box-shadow: 0 26px 60px -42px rgba(46,69,123,.22);
}
.cf-hero-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.cf-hero-media-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 34%, rgba(255,255,255,0) 58%);
}

.cf-hero-copy { position: relative; z-index: 1; max-width: 620px; padding: 0 clamp(32px,5vw,72px); }
.cf-hero-copy .tl-eyebrow { margin-bottom: 20px; }
.cf-hero h1 { margin: 0 0 16px; font-family: var(--font-heading); font-size: clamp(26px,3vw,36px); font-weight: 700; line-height: 1.5; color: var(--navy); }
.cf-hero-lead { margin: 0; color: var(--secondary-text); line-height: 1.9; font-size: 15.5px; }

@media (max-width: 760px) {
  .cf-hero-media { flex-direction: column; align-items: stretch; min-height: 0; box-shadow: 0 18px 40px -32px rgba(46,69,123,.2); }
  .cf-hero-media-img { position: relative; inset: auto; width: 100%; aspect-ratio: 4/3; object-position: 72% 20%; }
  .cf-hero-media-overlay { display: none; }
  .cf-hero-copy { max-width: none; padding: 28px 24px 32px; text-align: center; }
  .cf-hero-copy .tl-eyebrow { justify-content: center; }
}

/* ---------- 個人 / 法人 入口 ---------- */
.ct-select-section { padding: 0 0 64px; }
@media (max-width: 760px) { .ct-select-section { padding-bottom: 40px; } }
.ct-select-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.2vw,26px); }
@media (max-width: 760px) { .ct-select-grid { grid-template-columns: 1fr; } }

.ct-select-card {
  display: block; text-align: left; width: 100%; padding: clamp(26px,2.8vw,36px);
  border: 1px solid var(--op-border); border-radius: var(--radius-panel);
  background: linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  cursor: pointer; font-family: inherit;
  transition: border-color var(--duration-hover), box-shadow var(--duration-hover), transform var(--duration-hover) var(--easing);
}
.ct-select-card:hover { border-color: var(--border-hover); box-shadow: 0 22px 50px -30px rgba(46,69,123,.22); transform: translateY(-2px); }
.ct-select-card.is-active { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(76,112,221,.14); }
.ct-select-title { margin: 0 0 12px; font-family: var(--font-heading); font-size: clamp(18px,1.8vw,21px); font-weight: 700; color: var(--navy); line-height: 1.5; }
.ct-select-desc { margin: 0 0 16px; font-size: 13.5px; line-height: 1.85; color: var(--secondary-text); flex: none; }
.cf-select-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.cf-select-tags li { font-family: var(--font-latin); font-size: 11px; letter-spacing: .02em; color: #6b7590; background: rgba(255,255,255,.7); border: 1px solid var(--op-border); border-radius: 999px; padding: 5px 12px; }
.cf-select-note { margin: 0 0 18px; font-size: 12.5px; line-height: 1.8; color: #96a1b8; }
.ct-select-btn,
.ct-select-btn--corp {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  font-family: var(--font-latin); font-size: 13px; font-weight: 400; letter-spacing: normal;
  color: var(--accent-blue); background: none; border-radius: 0; padding: 0; margin-top: 0;
}
.ct-select-btn::after { content: "→"; transition: transform var(--duration-hover) var(--easing); }
.ct-select-card:hover .ct-select-btn::after,
.ct-select-card:hover .ct-select-btn--corp::after { transform: translateX(4px); }
.ct-select-card:hover .ct-select-btn,
.ct-select-card--company:hover .ct-select-btn--corp { background: none; color: var(--accent-blue); }

/* ---------- フォームエリア ---------- */
.ct-form-section { background: var(--background); padding: clamp(48px,6vw,80px) 0 96px; }
.ct-form-panel { display: none; max-width: 720px; margin: 0 auto; padding-top: 8px; }
.ct-form-panel.is-visible { display: block; }
.ct-form-panel + .ct-form-panel { margin-top: 72px; }
.ct-form-placeholder { max-width: 640px; margin: 0 auto; padding: 48px 0; text-align: center; }
.ct-form-placeholder p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--secondary-text); }
.ct-form-placeholder.is-hidden { display: none; }

.ct-form-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--op-border); }
.ct-form-title { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(21px,2.1vw,26px); font-weight: 700; color: var(--navy); }
.ct-form-lead { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--secondary-text); }

.ct-form-alert { margin-bottom: 24px; padding: 14px 18px; border: 1px solid rgba(214,69,69,.35); border-radius: 12px; background: rgba(214,69,69,.06); color: #9a3131; font-size: 13.5px; line-height: 1.75; }
.ct-form-interest-notice { margin-bottom: 24px; padding: 13px 16px; border: 1px solid var(--op-border); border-left: 3px solid var(--accent-blue); border-radius: 10px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--navy); }

.ct-form-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.ct-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; gap: 20px; } }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 13.5px; font-weight: 600; color: var(--navy); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.form-required { font-family: var(--font-latin); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #b5433e; background: rgba(214,69,69,.08); border-radius: 999px; padding: 2px 9px; }
.form-optional { font-family: var(--font-latin); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #8693b4; background: rgba(134,147,180,.1); border: none; border-radius: 999px; padding: 2px 9px; }

.form-control {
  width: 100%; height: auto; padding: 13px 16px; font-size: 15px; font-family: inherit; color: var(--navy);
  border: 1px solid var(--op-border); border-radius: 12px; background: #fff; -webkit-appearance: none; appearance: none;
  transition: border-color var(--duration-hover), box-shadow var(--duration-hover);
}
.form-control::placeholder { color: #a7aec2; }
.form-control:hover { border-color: var(--border-hover); }
.form-control:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(76,112,221,.14); }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238693b4'%3e%3cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%238693b4' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-textarea { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; line-height: 1.8; }

.form-privacy { gap: 6px; }
.form-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.7; color: var(--secondary-text); }
.form-checkbox { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-blue); cursor: pointer; }
.form-checkbox:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.form-checkbox-text { }
.form-privacy-link { color: var(--accent-blue); text-decoration: underline; text-decoration-color: rgba(76,112,221,.35); }
.form-privacy-link:hover { text-decoration-color: var(--accent-blue); }
.form-privacy-error { margin: 0; font-size: 12.5px; color: #b5433e; min-height: 1em; }

.form-submit { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; text-align: center; }
.form-submit .tv-btn { justify-content: center; }
.form-note { margin: 0; font-size: 12.5px; color: #96a1b8; }
@media (max-width: 600px) { .form-submit { align-items: stretch; } .form-submit .tv-btn { width: 100%; justify-content: center; } }

/* ---------- 法人フォーム: 人材紹介の料金体系(成果報酬型)の簡潔な案内 ---------- */
.ct-form-pricing-note { margin-bottom: 24px; padding: 16px 20px; border: 1px solid var(--op-border); border-left: 3px solid var(--accent-blue); border-radius: 10px; background: var(--surface); }
.ct-form-pricing-note h3 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--navy); }
.ct-form-pricing-note p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--secondary-text); }

/* input系のfocus-visible(キーボード操作)を明確に */
.form-control:focus-visible { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(76,112,221,.16); }