/* ============================================================================
   ワークスHP お問い合わせ（contact.html） — このページ固有の座標
   ----------------------------------------------------------------------------
   共通部分（リセット・スケーリング土台・ヘッダー・Entry/Contact帯・フッター・
   ボタン・見出しの型）は css/style.css にある。
   HTML では style.css → このファイルの順で読み込むこと。

   ・company と同じく Figma の元データが無いため、既存ページのシステムを踏襲して
     こちらで設計している（ヒーロー帯＝strengths／見出し＝about／
     白カード・破線＝news・message／Entry・Contact帯・フッター＝全ページ共通）。
   ・フォームだけは絶対配置に馴染まないため、絶対配置した .form-card の中は
     通常フローで組んでいる。高さが変わると下のブロックと重なるので、
     行の高さ・余白は固定値にしてある（内訳は .form-card のコメント参照）。
   ========================================================================== */

.stage { height: 4169px; }

/* ============================================================================
   背景
   ========================================================================== */
.bg-main {
  left: -160px; top: 524px; width: 2240px; height: 2768px;
  background: linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
}
.deco {
  background: linear-gradient(91.94deg, #001B44 44%, rgba(0, 27, 68, 0) 98.62%);
  border-radius: 442.493px;
  transform: rotate(-45deg);
}
.deco-94 { left: -155.02px; top: 591.07px; width: 477.71px; height: 169.54px; opacity: 0.06; filter: blur(6.7px); }
.deco-87 { left: 129.26px;  top: 560.00px; width: 208.26px; height: 51.48px;  opacity: 0.64; }
.deco-93 { left: 1623.13px; top: 686.50px; width: 434.61px; height: 89.87px;  opacity: 0.21; filter: blur(8.7px); }

/* ============================================================================
   ヒーロー（home_image_04.jpg の y=900〜1319 を使用。
   about・company・Entry/Contact帯とは違う位置を切り出している）
   ========================================================================== */
.hero-photo { left: 0; top: 105px; width: 1920px; height: 419px; overflow: hidden; }
.hero-photo img { position: absolute; left: 0; top: -900px; width: 1920px; height: 1440px; }
.hero-veil {
  left: 0; top: 105px; width: 1920px; height: 419px;
  background: linear-gradient(90deg, #001B44 0%, rgba(0, 27, 68, 0) 67.31%);
}
.hero-badge {
  left: 180px; top: 262px; width: 245px; height: 71px;
  display: flex; flex-direction: row; align-items: center; gap: 38px;
}
.hero-badge .bar { width: 9px; height: 71px; background: #FFFFFF; border-radius: 19px; }
.hero-badge span {
  width: 198px; height: 60px;
  font-size: 30px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF;
}
.hero-lead {
  left: 180px; top: 360px; width: 908px; height: 60px;
  font-size: 30px; line-height: 60px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF; margin: 0;
}

/* ============================================================================
   セクション見出しの位置（型は css/style.css の .lb / .sec-h / .sec-p）
   ========================================================================== */
.lb-route { top: 700px;  width: 520px; }
.h-route  { top: 739px;  width: 800px; }
.p-route  { top: 832px;  width: 1200px; height: 36px; }

.lb-form  { top: 1294px; width: 400px; }
.h-form   { top: 1333px; width: 800px; }
.p-form   { top: 1426px; width: 1200px; height: 72px; }
.p-form a { color: var(--blue); font-weight: 500; }

/* ============================================================================
   お問い合わせ先の振り分け（3枚のカード）
   500px × 3 ＋ gap30 × 2 = 1560px（left 180 → 1740）
   ========================================================================== */
.route {
  top: 934px; width: 500px; height: 260px;
  padding: 40px;
  background: #FFFFFF;
  border-radius: 30px;
  box-shadow: 0px 0px 40px rgba(0, 27, 68, 0.12);
}
.r1 { left: 180px;  background: var(--navy); }   /* このページの窓口 */
.r2 { left: 710px; }
/* 3枚目（各店舗・クリニックのご予約）はご指示により削除 */

.r-ttl {
  display: block; height: 40px;
  font-size: 22px; line-height: 40px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy); margin: 0;
}
.r-body {
  display: block; height: 64px; margin: 16px 0 0;
  font-size: 16px; line-height: 32px; font-weight: 350;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.r-link {
  display: block; height: 32px; margin: 24px 0 0;
  font-size: 16px; line-height: 32px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--blue);
}
.r1 .r-ttl, .r1 .r-body { color: #FFFFFF; }
.r1 .r-link { color: #FFFFFF; opacity: 0.85; }

/* ============================================================================
   フォーム
   中身の高さ内訳（合計1124px ＋ 上下padding140px = カード1264px）
     ラベル36＋間12＋入力64 = 112 の行が4本（間36×4）
     お問い合わせ内容 36＋12＋240＋カウンタ30 = 318（間36）
     同意チェック40（下に56）
     送信ボタン82
   ========================================================================== */
.form-card {
  left: 260px; top: 1568px; width: 1400px;
  padding: 70px 100px;
  background: #FFFFFF;
  border-radius: 40px;
  box-shadow: 0px 0px 70px rgba(0, 27, 68, 0.2);
}
.f-row { margin: 0 0 36px; }
.f-row.cols { display: flex; flex-direction: row; gap: 36px; }
.f-row.cols > div { flex: 1 1 0; min-width: 0; }

.f-label {
  display: flex; flex-direction: row; align-items: center;
  height: 36px; margin-bottom: 12px;
  font-size: 18px; line-height: 36px; font-weight: 700;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--navy);
}
.req, .any {
  display: inline-block;
  margin-left: 14px; padding: 0 12px;
  height: 24px;
  font-size: 12px; line-height: 24px; font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 12px;
}
.req { background: var(--navy); color: #FFFFFF; }
.any { border: 1px solid rgba(0, 27, 68, 0.35); color: rgba(0, 27, 68, 0.7); }

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select,
.form-card textarea {
  display: block; width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px; font-weight: 350; letter-spacing: 0.08em;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select { height: 64px; padding: 0 24px; line-height: 62px; }
.form-card textarea {
  height: 240px; padding: 18px 24px; line-height: 36px;
  resize: vertical;
}
.form-card ::placeholder { color: rgba(0, 27, 68, 0.35); }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34, 95, 186, 0.12);
}

/* セレクトの矢印は既定のUIを消して、サイト共通の紺の山形に差し替えている */
.form-card select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%23001B44' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

.f-hint {
  display: block; height: 30px;
  font-size: 14px; line-height: 30px; font-weight: 350;
  letter-spacing: 0.08em; text-align: right;
  color: rgba(0, 27, 68, 0.6);
}

.f-check {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 14px; height: 40px; margin: 0 0 56px;
  font-size: 18px; line-height: 40px; letter-spacing: 0.1em;
}
.f-check input[type="checkbox"] {
  width: 22px; height: 22px; margin: 0;
  accent-color: var(--blue);
}
.f-check a { color: var(--blue); font-weight: 500; text-decoration: underline; }

.f-submit { display: flex; justify-content: center; margin: 0; }

/* 送信ボタン（HOME の .btn と同じ 314×82） */
.f-submit .btn {
  position: relative;
  border: 0; padding: 0; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ============================================================================
   電話・所在地
   ========================================================================== */
.tel-card {
  left: 260px; top: 2932px; width: 1400px; height: 240px;
  padding: 50px 80px;
  background: #FFFFFF;
  border-radius: 40px;
  box-shadow: 0px 0px 40px rgba(0, 27, 68, 0.12);
  display: flex; flex-direction: row;
}
.tel-col { flex: 1 1 0; }
.tel-col + .tel-col { padding-left: 80px; border-left: 1px dashed var(--rule); }
.tel-h {
  display: block; height: 40px;
  font-size: 18px; line-height: 40px; font-weight: 700;
  letter-spacing: 0.1em; white-space: nowrap;
  color: var(--blue); margin: 0;
}
.tel-num {
  display: block; height: 56px; margin: 8px 0 0;
  font-size: 40px; line-height: 56px; font-weight: 700;
  letter-spacing: 0.06em; white-space: nowrap;
  color: var(--navy);
}
.tel-sub, .tel-addr {
  display: block; margin: 8px 0 0;
  font-size: 16px; line-height: 32px; font-weight: 350;
  letter-spacing: 0.1em;
  color: var(--navy);
}
.tel-addr a { color: var(--blue); font-weight: 500; }

/* ============================================================================
   Entry / Contact 帯とフッターの縦位置（本体は css/style.css）
   ========================================================================== */
.ec-band  { top: 3292px; }
.ec-panel { top: 3365px; }
.ft       { top: 3667px; }