@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   header ほかの指定
   --------------------------------------------------------------------------
   もとは contact-personal.html の <head> に直接書かれていたスタイルです。
   CSP から style-src 'unsafe-inline' を外すため、2026-09 に外部ファイル化しました。
   修正するときは、HTML ではなくこのファイルを編集してください。
   ========================================================================== */
header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}
header.scrolled {
  background: #eed5ae;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header:not(.scrolled) nav ul li a {
  color: #ffffff;
  text-shadow: none;
}
header:not(.scrolled) nav ul li > a::after {
  background: #ffffff;
}
header:not(.scrolled) .logo img {
  filter: none;
}
header:not(.scrolled) .hamburger span {
  background: #ffffff;
}
header:has(nav ul li.has-dropdown:hover) {
  background: #eed5ae;
}
header:has(nav ul li.has-dropdown:hover) nav ul li a {
  color: rgba(0,0,0,0.88);
  text-shadow: none;
}
header:has(nav ul li.has-dropdown:hover) .logo img {
  filter: none;
}
:root {
      --c-navy:  #1a1a1a;
      --c-blue:  #444444;
      --c-dark:  #0d1f3c;
      --c-bg:    #ffffff;
      --c-border: rgba(0,0,0,0.10);
      --c-gold:  #c8960a;
      --c-mid:   #888888;
    }
body { font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color: #1a1a1a; background: #ffffff; overflow-x: hidden; }
.page-hero { margin-top: 0; padding: 160px 8vw 60px; background-color: #eed5ae; background-image: url("../image/contact-personal.webp"); background-position: 85% 40%; background-size: cover; background-repeat: no-repeat; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.15); text-align: center; }
.page-hero h1, .page-hero p, .page-hero .hero-pretitle { text-shadow: 1px 2px 10px rgba(0,0,0,0.75), 0 0 24px rgba(0,0,0,0.5); }
.page-hero .hero-pretitle { font-size: 0.92rem; letter-spacing: 0.12em; opacity: 0.9; margin-bottom: 8px; }
.page-hero .breadcrumb { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-bottom: 16px; letter-spacing: 0.1em; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.15em; margin-bottom: 10px; font-weight: 300;}
.sp-br { display: none; }
@media (max-width: 640px) {
  .sp-br { display: inline; }
  .access-card { text-align: center; }
}
.page-hero p { font-size: 0.78rem; opacity: 0.8; }
.page-content { max-width: 1080px; margin: 0 auto; padding: 28px 8vw 80px; }

/* ===== ご相談種別 選択（プルダウン） ===== */
.type-select-group { max-width: 480px; margin: 0 auto 8px; position: relative; }
.type-select-group label { font-size: 1rem; }
.custom-select { position: relative; }
.custom-select-trigger {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 18px;
      font-size: 1.05rem;
      font-weight: 700;
      font-family: inherit;
      color: #1a3a6e;
      border: 2px solid rgba(26,58,110,0.25);
      border-radius: 8px;
      background: #f4f8ff;
      cursor: pointer;
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
.custom-select-trigger:focus,
.custom-select.open .custom-select-trigger { border-color: #1a3a6e; box-shadow: 0 0 0 3px rgba(26,58,110,0.10); }
.custom-select-trigger .custom-select-arrow { transition: transform 0.2s; color: #1a3a6e; font-size: 0.9rem; }
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-options {
      list-style: none;
      margin: 0;
      padding: 8px;
      position: absolute;
      left: 0; right: 0; top: calc(100% + 6px);
      background: #fff;
      border: 1px solid #ccd6e8;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      z-index: 20;
      display: none;
    }
.custom-select.open .custom-select-options { display: block; }
.custom-select-options li {
      padding: 14px 16px;
      font-size: 0.98rem;
      font-weight: 700;
      color: #1a3a6e;
      line-height: 1.5;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s;
    }
.custom-select-options li:hover { background: #f4f8ff; }
.custom-select-options li + li { margin-top: 4px; }
.type-opt-br { display: none; }
@media (max-width: 480px) {
  .type-opt-br { display: block; }
}

/* ===== STEP B：Webフォーム／お電話 選択 ===== */
.method-select-wrap { display: block; }
.method-select-badge {
      text-align: center;
      font-size: 0.85rem;
      font-weight: bold;
      letter-spacing: 0.06em;
      color: #1a3a6e;
      margin: 0 auto 18px;
    }
.method-select-badge span {
      display: inline-block;
      padding: 5px 18px;
      border-radius: 50px;
      background: #eef2f8;
      border: 1px solid rgba(0,0,0,0.1);
    }
.method-select-badge.is-existing span { background: #fbe4e8; border-color: rgba(192,38,63,0.3); color: #99162c; }
.method-select { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 90%; margin: 0 auto 60px; }
.method-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #fff;
      border: 1px solid var(--c-border);
      border-radius: 10px;
      padding: 26px 28px;
      cursor: pointer;
      font-family: inherit;
      transition: border-color 0.25s, background 0.25s, transform 0.2s;
    }
.method-card:hover { border-color: #1a3a6e; background: #f2f6fc; transform: translateY(-2px); }
.method-card-title { font-size: 1rem; font-weight: bold; color: #1a3a6e; letter-spacing: 0.03em; }
.method-card-arrow { font-size: 1.3rem; color: #999; }
@media (max-width: 640px) {
  .method-select { grid-template-columns: 1fr; width: 100%; }
}

.contact-form { display: flex; flex-direction: column; gap: 64px; }
.form-row { display: contents; }
.form-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.form-group label { font-size: 0.92rem; color: #1a3a6e; font-weight: bold; letter-spacing: 0.04em; }
.form-group label .required { display: inline-block; margin-left: 6px; padding: 2px 7px; background: #c0392b; color: #fff; font-size: 0.68rem; border-radius: 3px; vertical-align: middle; }
.form-group label .optional { display: inline-block; margin-left: 6px; padding: 2px 7px; background: #aaa; color: #fff; font-size: 0.68rem; border-radius: 3px; vertical-align: middle; }
.form-group input,
    .form-group select,
    .form-group textarea { width: 100%; box-sizing: border-box; padding: 15px 18px; border: 1px solid #ccd6e8; border-radius: 8px; font-size: 1rem; font-family: inherit; color: #333; background: #fff; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: #1a3a6e; box-shadow: 0 0 0 3px rgba(26,58,110,0.10); }
.form-group textarea { height: 180px; resize: vertical; }
.privacy-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: #555; line-height: 1.7; margin-top: 28px; }
.privacy-check input[type="checkbox"] { margin-top: 3px; accent-color: #1a3a6e; width: 16px; height: 16px; flex-shrink: 0; }
.privacy-check a { color: var(--c-gold); }
.submit-btn { width: 100%; padding: 16px; background: #1a3a6e; color: #fff; font-size: 1rem; font-weight: bold; letter-spacing: 0.12em; border: none; border-radius: 50px; cursor: pointer; transition: opacity 0.3s, transform 0.2s; font-family: inherit; }
.submit-btn:hover { opacity: 0.85; transform: translateY(-2px); }

.section-title { font-size: 1.2rem; color: #1a3a6e; letter-spacing: 0.1em; margin-bottom: 32px; padding-left: 16px; border-left: 3px solid var(--c-gold); }

.access-card { background: #eef2f8; border-radius: 14px; padding: 28px 24px; }
.access-card h3 { font-size: 0.95rem; color: #1a3a6e; margin-bottom: 12px; letter-spacing: 0.06em; }
.access-card p { font-size: 0.86rem; color: #555; line-height: 1.9; }
.access-card .tel { font-size: 1.2rem; font-weight: bold; color: #1a3a6e; letter-spacing: 0.06em; margin: 8px 0 4px; }
.access-card .hours { font-size: 0.78rem; color: #888; }
.contact-method-block { margin-bottom: 64px; }

/* ==========================================================================
   確認画面（入力内容のご確認）
   --------------------------------------------------------------------------
   【表示の決まりごと】
     ・パソコン … 左に項目名、右に入力内容の2列。
                  table-layout: fixed を指定しているため、入力内容が
                  どれだけ長くても、項目名の列は必ず一定の幅を保ちます。
                  （これが無いと、長い文字列に押されて項目名が
                    1文字ずつ縦に折り返され、非常に読みにくくなります）
     ・スマホ   … 2列だと幅が足りないため、項目名を上、入力内容を下に
                  積み重ねて表示します（下の 600px 以下の指定）。

   【長い入力への対応】
     td に overflow-wrap / word-break を指定しているため、
     「testtesttest…」のような切れ目のない文字列でも、
     枠からはみ出さずに折り返されます。
   ========================================================================== */
.confirm-box { background: #eef2f8; border-radius: 12px; padding: 36px 32px; }
.confirm-notice { font-size: 0.9rem; color: #555; margin-bottom: 24px; line-height: 1.8; }
.confirm-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 32px;
      table-layout: fixed;
    }
.confirm-table th {
      width: 30%;
      padding: 14px 16px;
      background: #e2e8f2;
      color: #1a3a6e;
      font-size: 0.85rem;
      font-weight: 700;
      text-align: left;
      vertical-align: top;
      line-height: 1.7;
      border-bottom: 1px solid #ccd6e8;
    }
.confirm-table td {
      padding: 14px 16px;
      font-size: 0.9rem;
      color: #333;
      line-height: 1.9;
      vertical-align: top;
      white-space: pre-wrap;        /* 入力された改行をそのまま表示する */
      overflow-wrap: anywhere;      /* 切れ目のない長い文字列も折り返す */
      word-break: break-word;
      border-bottom: 1px solid #e0e8f4;
    }
/* スマホでは、項目名を上・入力内容を下に積み重ねて表示する */
@media (max-width: 600px) {
  .confirm-box { padding: 24px 18px; }
  .confirm-table,
  .confirm-table tbody,
  .confirm-table tr,
  .confirm-table th,
  .confirm-table td {
        display: block;
        width: auto;
      }
  .confirm-table tr {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #ccd6e8;
      }
  .confirm-table tr:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
      }
  .confirm-table th {
        padding: 0 0 4px;
        background: transparent;
        border-bottom: none;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
      }
  .confirm-table td {
        padding: 0;
        border-bottom: none;
        font-size: 0.92rem;
        line-height: 1.8;
      }
}
.confirm-btns { display: flex; gap: 16px; justify-content: center; }
/* 「← 入力に戻る」が2行に折り返されないようにする */
.confirm-btns .back-btn {
      flex: 0 0 auto;
      white-space: nowrap;
      padding-left: 28px;
      padding-right: 28px;
    }
.confirm-btns .submit-btn { flex: 1 1 auto; max-width: 420px; }
/* スマホでは2つ並べると「送信する」が細くつぶれてしまうため、
   上下に積み重ねて、それぞれ横幅いっぱいに表示する。
   （法人・採用エントリーのフォームも同じ指定です） */
@media (max-width: 640px) {
  .confirm-btns { flex-direction: column; gap: 12px; }
  .confirm-btns .back-btn,
  .confirm-btns .submit-btn {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        white-space: nowrap;
      }
}
.back-btn { padding: 14px 40px; background: #fff; color: #1a3a6e; font-size: 1rem; font-weight: bold; letter-spacing: 0.1em; border: 2px solid #1a3a6e; border-radius: 0; cursor: pointer; transition: background 0.3s, color 0.3s; font-family: inherit; }
.back-btn:hover { background: #eef2f8; }
.complete-box { text-align: center; padding: 60px 20px; }
.complete-icon { width: 64px; height: 64px; background: #1a3a6e; color: #fff; font-size: 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.complete-box h3 { font-size: 1.3rem; color: #1a3a6e; margin-bottom: 16px; letter-spacing: 0.08em; }
.complete-box p { font-size: 0.95rem; color: #555; line-height: 2; }
@media (max-width: 580px) {
  header { padding: 12px 18px; }
  .form-row { grid-template-columns: 1fr; }
}

.form-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
      min-width: 60px;
    }

.form-step.active .step-num { background: #1a3a6e; color: #fff; }
.form-step.active .step-label { color: #1a3a6e; font-weight: 700; }
.form-step.done .step-num { background: #c8960a; color: #fff; }
.form-step.done .step-num::before { content: "✓"; }
.form-step.done .step-label { color: #c8960a; }

/* ボット対策：ハニーポット（人の目には見えないが、ボットは入力してしまう） */
.hp-field {
      position: absolute;
      left: -9999px;
      top: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
.form-section-label {
      font-size: 0.7rem;
      font-weight: 700;
      color: #1a3a6e;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border-bottom: 2px solid #1a3a6e;
      padding-bottom: 8px;
      margin: 60px 0 28px;
    }
.form-section-label:first-of-type { margin-top: 0; }
.form-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid #e4eaf4;
    }
.form-actions .back-btn { flex-shrink: 0; }
@media (max-width: 600px) {

  
  .form-actions { flex-direction: column-reverse; }

}
@media (max-width: 480px) {
  
  body { overflow-x: hidden; }
}
@media (max-width: 480px) {
  .page-hero {
        padding: 140px 6vw 36px;
      }
  .page-hero h1 {
        font-size: 1.5rem;
        line-height: 1.5;
      }
  .page-hero .hero-sub {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
      }
}

    /* ==============================================================
       背景画像のレスポンシブ対応（2026年 改版②で追加）
       CSS の背景画像は <img> の srcset が使えないため、
       画面幅に応じて小さい画像へ切り替えています。
       画像そのものは同じで、表示結果は変わりません。
         〜480px      … 1024px幅（スマホ。DPR2でも十分な解像度）
         481〜1023px  … 1280px幅（タブレット・小型ノート）
         1024px〜     … 元画像
       画像を差し替えたときは image/rs/ の各サイズも作り直してください。
       ============================================================== */
    @media (max-width: 480px) {
      .page-hero {
        background-image: url("../image/rs/contact-personal-1024.webp");
      }
    }
    @media (min-width: 481px) and (max-width: 1023px) {
      .page-hero {
        background-image: url("../image/rs/contact-personal-1280.webp");
      }
    }

/* ==========================================================
   自動送信対策（Cloudflare Turnstile）の確認欄
   確認画面の「送信する」ボタンの上に出ます。
   turnstile-config.js のサイトキーが未設定のときは出ません。
   ========================================================== */
.turnstile-wrap {
      margin: 18px 0 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
.turnstile-wrap.u-hidden { display: none; }   /* 読み込み順に左右されないように指定 */
.turnstile-note {
      margin: 0;
      font-size: 0.82rem;
      line-height: 1.6;
      color: #666;
      text-align: center;
    }