@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   header ほかの指定
   --------------------------------------------------------------------------
   もとは contact-entry.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: #ffffff;
  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: #ffffff;
}
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:  #8f6807;
      --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:linear-gradient(160deg, rgba(5,5,5,0.182) 0%, rgba(30,28,25,0.149) 100%), url("../image/contact-entry-top1.webp") center center / cover no-repeat; color: #fff; border-bottom: 1px solid rgba(154,138,106,0.3); }
.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: rgba(154,138,106,0.9); }
.page-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.15em; margin-bottom: 10px; font-weight: 300;}
.page-hero p { font-size: 0.78rem; opacity: 0.8; }
.page-content { max-width: 1080px; margin: 0 auto; padding: 80px 8vw; }

.contact-form { display: flex; flex-direction: column; gap: 22px; }
/* ボット対策：ハニーポット */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 0.92rem; color: #1c1c1c; 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: #1c1c1c; 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; }
.privacy-check input[type="checkbox"] { margin-top: 3px; accent-color: #1c1c1c; width: 16px; height: 16px; flex-shrink: 0; }
.privacy-check a { color: var(--c-gold); }
.submit-btn { padding: 16px; background: #1c1c1c; 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: #1c1c1c; letter-spacing: 0.1em; margin-bottom: 32px; padding-left: 16px; border-left: 3px solid var(--c-gold); }

.access-card { background: #eeede9; border-radius: 14px; padding: 28px 24px; }
.access-card h3 { font-size: 0.95rem; color: #1c1c1c; 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: #1c1c1c; letter-spacing: 0.06em; margin: 8px 0 4px; }
.access-card .hours { font-size: 0.78rem; color: #666666; }
.sp-br { display: none; }
@media (max-width: 480px) {
  .sp-br { display: inline; }
  .access-card { text-align: center; }
}
.contact-method-block { margin-bottom: 64px; }
/* ==========================================================================
   確認画面（入力内容のご確認）
   --------------------------------------------------------------------------
   【表示の決まりごと】
     ・パソコン … 左に項目名、右に入力内容の2列。
                  table-layout: fixed を指定しているため、入力内容が
                  どれだけ長くても、項目名の列は必ず一定の幅を保ちます。
                  （これが無いと、長い文字列に押されて項目名が
                    1文字ずつ縦に折り返され、非常に読みにくくなります）
     ・スマホ   … 2列だと幅が足りないため、項目名を上、入力内容を下に
                  積み重ねて表示します（下の 600px 以下の指定）。

   【長い入力への対応】
     td に overflow-wrap / word-break を指定しているため、
     「testtesttest…」のような切れ目のない文字列でも、
     枠からはみ出さずに折り返されます。
   ========================================================================== */
.confirm-box { background: #eeede9; 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: #e2e0da;
      color: #1c1c1c;
      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; }
.back-btn { padding: 14px 40px; background: #fff; color: #1c1c1c; font-size: 1rem; font-weight: bold; letter-spacing: 0.1em; border: 2px solid #1c1c1c; border-radius: 0; cursor: pointer; transition: background 0.3s, color 0.3s; font-family: inherit; }
@media (max-width: 640px) {
  .confirm-btns { flex-direction: column; gap: 12px; }
  .confirm-btns .back-btn,
  .confirm-btns .submit-btn { width: 100%; min-width: 0; box-sizing: border-box; white-space: nowrap; max-width: none; }
}
.back-btn:hover { background: #f0ede8; }
.complete-box { text-align: center; padding: 60px 20px; }
.complete-icon { width: 64px; height: 64px; background: #1c1c1c; 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: #1c1c1c; 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; }
}
@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: linear-gradient(160deg, rgba(5,5,5,0.182) 0%, rgba(30,28,25,0.149) 100%),
          url("../image/rs/contact-entry-top1-1024.webp");
      }
    }
    @media (min-width: 481px) and (max-width: 1023px) {
      .page-hero {
        background-image: linear-gradient(160deg, rgba(5,5,5,0.182) 0%, rgba(30,28,25,0.149) 100%),
          url("../image/rs/contact-entry-top1-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;
    }