/* ==========================================================================
   お問い合わせ（contact.html）
   ・数値は元サイト（PC 1280px／スマホ 320px）の実測値です
   ========================================================================== */

/* ---------- ページ見出し（Contact） ---------- */
.ct-head { position: relative; height: 232px; overflow: hidden; }
.ct-head .ct-head__title { top: 76px; width: 354px; margin-left: -177px; }
.ct-head .ct-head__line { top: 98px; width: 596px; }
.ct-head .ct-head__line--l { left: calc(50% - 802px); }
.ct-head .ct-head__line--r { left: calc(50% + 197px); }

/* ---------- 本文（左の列の中央を基準に配置。右の細い列は空き） ---------- */
.ct { position: relative; }
.ct { padding: 0 30px; }
.ct__inner { position: relative; max-width: 940px; margin: 0 auto; overflow: hidden; } /* 画面幅に合わせて縮む（右で切れないように） */
.ct__title { position: relative; z-index: 1; display: inline-block; padding-right: 24px; background: #fff; font-size: 25px; line-height: 35px; font-weight: 700; }
.ct__line { position: absolute; left: 0; right: 0; top: 18px; height: 7px; border-top: 1px solid var(--c-line); }
.ct-intro { margin: 32px 0 0; font-size: 16px; line-height: 1.4; }
.ct-intro a[href^="tel:"] { font-weight: inherit; }  /* 元サイトでは太字にしていない */

/* ---------- フォーム ---------- */
.ct-form { position: relative; padding: 44px 0 110px; }
.ct-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }  /* ロボットよけ（人には見えない欄） */

.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 24px; }
.ct-field--name, .ct-field--work, .ct-field--inquiry, .ct-field--quals, .ct-field--job { grid-column: 1; }
.ct-field--email, .ct-field--birth, .ct-field--visit { grid-column: 2; }
.ct-field--message { grid-column: 1 / -1; }
.ct-field { min-width: 0; }

/* 項目名 */
.ct-label { display: block; margin-bottom: 5px; padding: 0; font-size: 15px; line-height: 16px; color: var(--c-navy); }
.ct-req { color: inherit; }

/* 入力欄：うすい水色の背景＋下線 */
.ct-input {
  display: block; width: 100%; height: 49px; margin: 0; padding: 3px 3px 3px 8px;
  border: 0; border-bottom: 3px solid var(--c-teal-d); border-radius: 0;
  background: rgba(85, 185, 198, .18); color: #000;
  font: 400 16px/1.4 var(--font);
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color .2s, background-color .2s;
}
.ct-input::placeholder { color: rgba(55, 59, 77, .55); opacity: 1; }
.ct-input:focus { background: rgba(85, 185, 198, .28); }
/* 勤務先名の欄も他の欄と同じ色にそろえた（元サイトはこの欄だけ緑×紫で不自然だったため） */
.ct-input--date { min-width: 0; text-align: left; }
.ct-input--date::-webkit-date-and-time-value { text-align: left; }
.ct-input--date::-webkit-calendar-picker-indicator { cursor: pointer; }
.ct-field--message .ct-label { margin-bottom: 8px; }
.ct-textarea { height: 193px; padding-top: 6px; font-size: 17px; resize: vertical; }

/* チェックボックス（1つ以上えらぶ欄） */
.ct-group { width: 293px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-group legend { float: left; width: 100%; }
.ct-checks { clear: both; }
.ct-checks li + li { margin-top: 6px; }
.ct-check { position: relative; display: flex; align-items: center; min-height: 18px; font-size: 16px; line-height: 18px; color: var(--c-navy); cursor: pointer; }
.ct-check input { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: 0; opacity: 0; }
.ct-check__box {
  position: relative; flex: none; width: 18px; height: 18px; margin-right: 12px;
  border: 1px solid var(--c-teal-d); background: rgba(85, 185, 198, .18);
  transition: background-color .2s;
}
.ct-check input:checked + .ct-check__box { background: var(--c-teal-d); }
.ct-check input:checked + .ct-check__box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ct-check input:focus-visible + .ct-check__box { outline: 2px solid var(--c-teal-d); outline-offset: 2px; }

/* 送信ボタンを押したときに、未入力の欄を赤く表示 */
.ct-form.is-validated .ct-input:invalid { border-bottom-color: var(--c-red); }
.ct-group.is-invalid .ct-check__box { border-color: var(--c-red); }

/* 送信ボタンとメッセージ */
.ct-submit { position: relative; margin-top: 77px; }
.ct-submit__btn { min-width: 320px; }
.ct-submit__btn:disabled { cursor: default; opacity: .6; }
.ct-submit__btn:disabled:hover { color: var(--fg); }
.ct-submit__btn:disabled:hover::before { background-size: 0 100%, auto; }
.ct-submit__btn:disabled:hover .btn__arrow::before, .ct-submit__btn:disabled:hover .btn__arrow::after { background: var(--bg); transform: none; }
.ct-submit__msg {
  display: none; position: absolute; left: 353px; top: 14px; width: 320px;
  font-size: 13px; line-height: 15.6px; color: var(--c-red);
}
.ct-submit__msg.is-shown { display: block; }
.ct-submit__msg span { display: block; }

/* ==========================================================================
   スマホ（320px 幅で表示）
   ========================================================================== */
@media (max-width: 699px) {
  .anim.is-in.a-sp-floatup { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fx: 0px; --fy: 60px; }
  .anim.is-in.a-sp-fade { animation: k-fade 1200ms cubic-bezier(.445,.05,.55,.95) 300ms both; }

  .ct-head { height: 109px; }
  .ct-head .ct-head__title { top: 29.4px; width: 280px; margin-left: -140px; }
  .ct-head .ct-head__line { top: 39px; width: 128px; height: 3px; }
  .ct-head .ct-head__line--l { left: -35px; }
  .ct-head .ct-head__line--r { left: 227px; }

  .ct { padding: 0; }
  .ct__inner { max-width: none; margin: 0 20px; }
  .ct__title { display: block; padding-right: 0; font-size: 18px; line-height: 25.2px; }
  .ct__line { left: 0; right: 0; top: 36px; height: 2px; }
  .ct-intro { margin: 29.5px 0 0; font-size: 15px; }

  .ct-form { padding: 27.3px 0 80px; }
  .ct-grid { display: block; }
  .ct-field--email, .ct-field--work, .ct-field--birth { margin-top: 20px; }
  .ct-field--inquiry, .ct-field--quals { margin-top: 30px; }
  .ct-field--job { margin-top: 36px; }
  .ct-field--visit, .ct-field--message { margin-top: 22px; }
  .ct-input { height: 40px; }
  .ct-textarea { height: 118px; }
  .ct-group { width: 260px; }

  .ct-submit { margin-top: 24px; }
  .ct-submit__btn { display: flex; width: 240px; min-width: 0; margin: 0 auto; }
  .ct-submit__msg { left: 10px; top: 56px; width: 260px; font-size: 12px; line-height: 14.4px; text-align: center; }
}

/* ---------- スマホの文字サイズ（全ページ共通の基準）----------
   本文 11.5px ／ 補足 10〜11px ／ 小見出し・質問 13px ／ 見出し 16.5〜17px ／ ページの題 18px */
@media (max-width: 699px) {
  .ct__title { font-size: 16.5px; }
  .ct-intro { font-size: 11.5px; line-height: 1.8; }
  .ct-label { font-size: 12px; }
  .ct-check { font-size: 12px; }
  .ct-submit__msg { font-size: 11px; }
}

/* ---------- 電話・LINE のボタン（サイト共通の矢羽根ボタンを横に2つ） ---------- */
.ct-quick { display: flex; gap: 16px; margin-top: 22px; }
.ct-quick .ct-quick__btn { width: 230px; min-width: 0; text-decoration: none; opacity: 1; }
.btn--line { --bg: #06c755; }  /* LINE の緑 */
@media (max-width: 699px) {
  .ct-quick { gap: 8px; margin-top: 14px; }
  .ct-quick .ct-quick__btn { flex: 1; width: auto; --bh: 42px; padding: 0 56px 0 16px; font-size: 12.5px; }
}

/* 入力欄の例文（プレースホルダー）は小さめに。入力した文字は 16px のまま（iPhone で入力時に画面が拡大されないように） */
.ct-input::placeholder { font-size: 14px; }
@media (max-width: 699px) {
  .ct-input::placeholder { font-size: 11.5px; letter-spacing: .02em; }
}

/* 送信ボタンから下（Visit & Entry）までの余白を詰める */
.ct-form { padding-bottom: 36px; }
@media (max-width: 699px) {
  .ct-form { padding-bottom: 20px; }
  .ct-submit__msg.is-shown { position: static; margin: 12px auto 0; }  /* 送信後のメッセージはボタンの下に（余白を詰めても重ならないように） */
}

/* 日付の欄：iPhone で日付の文字が上に寄るのを直す（高さいっぱいの行の高さで上下中央に） */
.ct-input--date { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; line-height: 46px; }
.ct-input--date::-webkit-date-and-time-value { margin: 0; line-height: 46px; min-height: 46px; display: flex; align-items: center; }
@media (max-width: 699px) {
  .ct-input--date { line-height: 37px; }
  .ct-input--date::-webkit-date-and-time-value { line-height: 37px; min-height: 37px; }
}