/* ======================================================================
   Seitaro Arai — Unified Stylesheet (Contact)
   Path: /in/css/contact.css
   Purpose:
   - お問い合わせページ全体スタイル
   - ヒーロー／フォーム／フロー図／案内／サンクスページ
   - ブレークポイント統一（1200 / 920 / 768）
   ====================================================================== */


/* ======================================================================
   0) Tokens（カラートークン／レイアウト共通値）
   ====================================================================== */
:root {
  --fg: #0f172a;
  --ink: #0f172a;
  --muted: #475569;          /* 補助テキスト色（duplicateを統一） */
  --card: #ffffff;
  --bg: #f8fafc;
  --line: #e2e8f0;

  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --brand: #2563eb;

  --ok: #16a34a;
  --ng: #dc2626;

  --maxw: 1080px;            /* このページ内コンテナ最大幅 */
}


/* ======================================================================
   1) Base（リセット／土台）
   ====================================================================== */

/* ボックスサイズ統一 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 余白リセット */
html,
body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* ページ全体のフォント・背景・行間 */
main {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;

  background-color: var(--bg);
  background-image: none;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;

  color: var(--fg);
  line-height: 2;
}

/* 汎用コンテナ */
main .container {
  max-width: var(--maxw);

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: clamp(16px, 3vw, 24px);
  padding-right: clamp(16px, 3vw, 24px);
  padding-bottom: clamp(16px, 3vw, 24px);
  padding-left: clamp(16px, 3vw, 24px);
}

/* セクション上下余白 */
main .section {
  padding-top: clamp(20px, 5vw, 56px);
  padding-right: 0;
  padding-bottom: clamp(20px, 5vw, 56px);
  padding-left: 0;
}


/* ======================================================================
   2) Hero（ビジュアルヘッダー）
   ====================================================================== */

.hero {
  position: relative;

  min-height: 62vh;

  display: grid;
  align-items: center;
  justify-items: center;

  color: #ffffff;

  background-color: #000000;
  background-image: url("../img/hero/contact-hero.webp");
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;
  background-attachment: fixed;  /* PC でのみ有効。SP は後述メディアクエリで scroll に変更 */
}

/* ヒーローの暗幕グラデーション */
.hero::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-image: linear-gradient(180deg, rgba(2, 6, 23, 0.64), rgba(2, 6, 23, 0.32));
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
}

/* ヒーロー内コンテンツブロック */
.hero__inner {
  position: relative;
  z-index: 1;

  text-align: center;

  max-width: var(--maxw);

  padding-top: 48px;
  padding-right: 16px;
  padding-bottom: 48px;
  padding-left: 16px;

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* ヒーロー見出し */
.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.02em;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 0;

  white-space: nowrap;  /* SP ではブレーク解除（後述） */
}

/* ヒーローリード文 */
.hero p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 16px;
  margin-left: 0;

  color: #e2e8f0;
}

/* CTA ボタン群（横並び + wrap） */
.hero .cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  row-gap: 12px;
  column-gap: 12px;
}

/* 下部スクロール誘導テキスト */
.scroll-down {
  position: absolute;
  bottom: 10px;
  left: 50%;

  transform: translateX(-50%);

  font-size: 12px;
  color: #e2e8f0;
}


/* ======================================================================
   3) Buttons（共通ボタン）
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-top: 12px;
  padding-right: 18px;
  padding-bottom: 12px;
  padding-left: 18px;

  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  background-color: var(--brand);
  background-image: none;

  color: #ffffff;

  font-weight: 700;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  cursor: pointer;

  transition-property: transform, box-shadow, background-color;
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
}

/* ゴーストボタン（白地） */
.btn--ghost {
  background-color: #ffffff;
  background-image: none;

  color: var(--brand);

  border-top-color: #cbd5e1;
  border-right-color: #cbd5e1;
  border-bottom-color: #cbd5e1;
  border-left-color: #cbd5e1;
}

/* ホバー時のわずかな浮き */
.btn:hover {
  background-color: var(--primary-2);

  transform: translateY(-1px);
}

.btn--ghost:hover {
  background-color: #ffffff;

  transform: translateY(-1px);
}

/* キーボードフォーカスの可視化 */
.btn:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}


/* ======================================================================
   4) Headlines（見出し・リード）
   ====================================================================== */

.h2 {
  font-size: 22px;
  color: var(--ink);

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
}

/* リード文（汎用） */
.lead {
  color: var(--muted);

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 24px;
  margin-left: 0;
}


/* ======================================================================
   5) Contact Layout（フォームと情報の2カラム構造）
   ====================================================================== */

main #contact .container {
  display: flex;
  flex-direction: column;

  row-gap: 80px;
  column-gap: 0;

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}


/* ======================================================================
   6) Form（お問い合わせフォーム本体）
   ====================================================================== */

.form-card {
  background-color: #ffffff;
  background-image: none;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;

  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* 入力フィールドのグリッド（PCは2カラム） */
.fields {
  display: grid;

  grid-template-columns: 1fr 1fr;

  row-gap: 18px;
  column-gap: 18px;
}

/* 横幅いっぱい使うフィールド */
.field.full {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* ラベル（項目名） */
.label {
  display: inline-block;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 6px;
  margin-left: 0;

  color: var(--ink);
}

/* 入力要素共通（input / select / textarea） */
.input,
select,
textarea {
  width: 100%;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background-color: #ffffff;
  background-image: none;

  color: var(--ink);

  font: inherit;

  transition-property: border-color, box-shadow, background-color;
  transition-duration: 0.15s, 0.15s, 0.15s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
}

/* テキストエリア高さ */
textarea {
  min-height: 160px;
  resize: vertical;
}

/* フォーカス時（マウス・キーボード共通） */
.input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
  outline-style: none;
  outline-color: transparent;

  border-top-color: var(--primary);
  border-right-color: var(--primary);
  border-bottom-color: var(--primary);
  border-left-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* フォーカス可視化（キーボードナビゲーション） */
.input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

/* 補足テキスト */
.hint {
  font-size: 12px;
  color: var(--muted);

  margin-top: 6px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 横並びフィールド（ラジオ／チェックボックス等） */
.inline {
  display: flex;
  flex-wrap: wrap;

  row-gap: 8px;
  column-gap: 18px;
}

/* チェックボックス行 */
.check {
  display: flex;
  align-items: center;

  row-gap: 0;
  column-gap: 8px;
}

/* エラー表示テキスト（デフォルト非表示） */
.error {
  font-size: 12px;
  color: var(--ng);

  display: none;

  margin-top: 6px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* バリデーション NG のボーダー強調 */
.is-invalid {
  border-top-color: var(--ng) !important;
  border-right-color: var(--ng) !important;
  border-bottom-color: var(--ng) !important;
  border-left-color: var(--ng) !important;

  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* フォーム下のアクション行 */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  row-gap: 8px;
  column-gap: 12px;

  margin-top: 16px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 備考テキスト */
.note {
  font-size: 12px;
  color: var(--muted);

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 送信中状態（aria-busy="true"） */
.btn[aria-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
}

/* 送信中スピナー */
.btn[aria-busy="true"]::after {
  content: "";

  width: 1em;
  height: 1em;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0.5em;

  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;

  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: #ffffff;
  border-right-color: transparent;
  border-bottom-color: #ffffff;
  border-left-color: #ffffff;

  display: inline-block;

  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}

/* スピナー回転アニメーション */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ======================================================================
   7) Flow / Wide（相談フローのカードレイアウト）
   ====================================================================== */

/* 横幅広めの白カード（フローを囲うラッパー） */
.wide {
  background-color: #ffffff;
  background-image: none;

  width: min(1200px, 96vw);

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: clamp(32px, 4vw, 80px);
  padding-right: 20px;
  padding-bottom: clamp(32px, 4vw, 80px);
  padding-left: 20px;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* フローアイテムのグリッド */
.flow {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  row-gap: 12px;
  column-gap: 12px;
}

/* 各ステップカード */
.step {
  background-color: #ffffff;
  background-image: none;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
  padding-left: 14px;

  text-align: center;
}


/* ======================================================================
   8) Info（電話・FAX・受付時間などの案内）
   ====================================================================== */

.contact-info {
  background-color: #ffffff;
  background-image: none;

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: 80px;
  padding-right: 20px;
  padding-bottom: 80px;
  padding-left: 20px;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* 案内リスト */
.contact-info ul {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 20px;
}

.contact-info li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 6px;
  margin-left: 0;
}

/* 案内下の補足文 */
.contact-info .hint {
  text-align: center;
  font-size: 13px;
  color: #64748b;

  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}


/* ======================================================================
   9) Thanks（送信完了ページ）
   ====================================================================== */

.thx-wrap {
  max-width: 720px;

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: 64px;
  padding-right: 16px;
  padding-bottom: 64px;
  padding-left: 16px;
}

.thx-card {
  background-color: #ffffff;
  background-image: none;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--line);
  border-right-color: var(--line);
  border-bottom-color: var(--line);
  border-left-color: var(--line);

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;

  text-align: center;

  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.thx-card h2 {
  font-size: 24px;
  color: var(--ink);

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
}

.thx-card p {
  color: var(--muted);

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
}

/* 戻るボタン */
.thx-card .btn {
  display: inline-block;

  margin-top: 12px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 10px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-left: 16px;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

  background-color: var(--brand);
  background-image: none;

  color: #ffffff;

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  font-weight: 700;
}

/* 備考（自動リダイレクト等） */
.thx-card .small {
  font-size: 12px;
  color: var(--muted);

  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}


/* ======================================================================
   10) MEDIA QUERIES（ブレークポイント統一 920 / 768）
   - 旧 900px → 920px
   - 旧 600px → 768px
   - min-width は使用しない
   ====================================================================== */

/* ------------------------------------------------------
   < 920px：フォーム 1カラム化、ヒーロー背景の fixed を解除
   ------------------------------------------------------ */
@media (max-width: 920px) {
  /* フィールド 1 カラム */
  .fields {
    grid-template-columns: 1fr;
  }

  /* 見出しの折り返しを許可 */
  .hero h1 {
    white-space: normal;
  }

  /* iOS / SP での fixed 背景ずれ対策 */
  .hero {
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------
   < 768px：フローを 1 カラム、wide の横はみ出し保護
   ------------------------------------------------------ */
@media (max-width: 768px) {
  /* wide コンテナの横幅調整とはみ出し防止 */
  .wide {
    max-width: 100%;

    padding-top: 0;
    padding-right: 16px;
    padding-bottom: 0;
    padding-left: 16px;

    overflow-x: hidden;
    overflow-y: visible;
  }

  /* フローを縦一列に */
  .flow {
    grid-template-columns: 1fr;

    row-gap: 16px;
    column-gap: 16px;

    text-align: center;
  }

  .flow .step {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}