@charset "UTF-8";

/* ============================================================
   CONTACT（GET IN TOUCH）ページ固有
   ============================================================ */
.contact-wrap { margin: 0px auto 0px auto; }
.contact-intro { text-align: center; color: #444b5e; }

/* 電話での問い合わせ */
.contact-tel { text-align: center; border-radius: 16px; background: rgba(255, 255, 255, 0.5); box-shadow: 0px 14px 34px rgba(17, 25, 47, 0.08); }
.contact-tel__label { font-family: "Cinzel", serif; letter-spacing: 0.08em; color: #8a90a0; }
.contact-tel__num { display: inline-block; font-family: "Cinzel", serif; font-weight: 600; color: #11192f; letter-spacing: 0.04em; transition: color 0.3s ease; }
.contact-tel__num:hover { color: #5985d1; }
.contact-tel__hours { color: #8a90a0; }

/* LINE 友だち追加 */
.contact-line { text-align: center; border-radius: 16px; background: rgba(255, 255, 255, 0.5); box-shadow: 0px 14px 34px rgba(17, 25, 47, 0.08); }
.contact-line__label { font-family: "Cinzel", serif; letter-spacing: 0.08em; color: #8a90a0; }
.contact-line__qr { display: block; margin: 0px auto 0px auto; border-radius: 8px; background: #ffffff; }
.contact-line__note { color: #8a90a0; }
.contact-line__btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; letter-spacing: 0.06em; color: #fbfbf8; background: #06c755; border-radius: 40px; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.contact-line__btn:hover { transform: translateY(-2px); box-shadow: 0px 12px 28px rgba(6, 199, 85, 0.3); }

/* メールフォーム */
.contact-form__label { text-align: center; font-family: "Cinzel", serif; letter-spacing: 0.08em; color: #8a90a0; }
.form-row { display: flex; flex-direction: column; }
.form-row__label { display: inline-flex; align-items: center; font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #11192f; }
.badge { display: inline-flex; align-items: center; border-radius: 4px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #fbfbf8; line-height: 1; }
.badge--req { background: linear-gradient(135deg, #ad4ea7 0%, #8e61b6 50%, #24abff 100%); }
.badge--any { background: #b3b8c8; }
/* 背景は半透明ではなく単色。ブラウザのオートフィル（予測変換からの入力）は
   background-color を UA 側で上書きしてしまい、半透明のままだと手入力した欄と
   色が揃わない。下のオートフィル用ルールと同じ単色にして見た目を一致させる。 */
.form-row input,
.form-row textarea { width: 100%; font-family: inherit; color: #11192f; background: #f9fafc; border: 1px solid #d6d9e6; border-radius: 8px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-row input::placeholder,
.form-row textarea::placeholder { color: #aab0c0; }
.form-row input:focus,
.form-row textarea:focus { outline: none; border-color: #8e61b6; box-shadow: 0px 0px 0px 3px rgba(142, 97, 182, 0.15); }
/* オートフィルされた欄。UA の background-color は打ち消せないため、
   内側いっぱいの box-shadow で通常時と同じ色に塗り潰す。
   transition を極端に長くしておくと、確定直後の色の点滅も出ない。 */
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:active,
.form-row textarea:-webkit-autofill,
.form-row textarea:-webkit-autofill:hover,
.form-row textarea:-webkit-autofill:active { -webkit-text-fill-color: #11192f; caret-color: #11192f; -webkit-box-shadow: inset 0px 0px 0px 1000px #f9fafc; box-shadow: inset 0px 0px 0px 1000px #f9fafc; transition: background-color 100000s ease 0s, border-color 0.3s ease; }
.form-row input:-webkit-autofill:focus,
.form-row textarea:-webkit-autofill:focus { -webkit-box-shadow: inset 0px 0px 0px 1000px #f9fafc, 0px 0px 0px 3px rgba(142, 97, 182, 0.15); box-shadow: inset 0px 0px 0px 1000px #f9fafc, 0px 0px 0px 3px rgba(142, 97, 182, 0.15); }
.form-row textarea { resize: vertical; min-height: 160px; line-height: 1.8; }

.form-agree { display: flex; align-items: center; justify-content: center; color: #444b5e; }
.form-agree input { width: 18px; height: 18px; accent-color: #8e61b6; }
.form-agree a { color: #5985d1; text-decoration: underline; transition: color 0.3s ease; }
.form-agree a:hover { color: #24abff; }

.contact-submit { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; letter-spacing: 0.1em; color: #fbfbf8; background: linear-gradient(135deg, #ad4ea7 0%, #8e61b6 50%, #24abff 100%); border: none; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.contact-submit:hover { transform: translateY(-2px); box-shadow: 0px 12px 28px rgba(142, 97, 182, 0.3); }
.contact-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }


/* ============================================================
   PC（min-width: 768px）
   ============================================================ */
@media (min-width: 768px) {
  .contact-wrap { max-width: 760px; padding: 16px 40px 120px 40px; }
  .contact-intro { font-size: 16px; line-height: 2; margin: 0px 0px 56px 0px; }

  .contact-tel { padding: 40px 40px 40px 40px; margin: 0px 0px 64px 0px; }
  .contact-tel__label { font-size: 14px; margin: 0px 0px 16px 0px; }
  .contact-tel__num { font-size: 40px; margin: 0px 0px 12px 0px; }
  .contact-tel__hours { font-size: 14px; }

  .contact-line { padding: 40px 40px 40px 40px; margin: 0px 0px 64px 0px; }
  .contact-line__label { font-size: 14px; margin: 0px 0px 24px 0px; }
  .contact-line__qr { width: 200px; height: 200px; }
  .contact-line__note { font-size: 13px; line-height: 1.9; margin: 20px 0px 24px 0px; }
  .contact-line__btn { padding: 16px 40px 16px 40px; font-size: 13px; }

  .contact-form__label { font-size: 14px; margin: 0px 0px 40px 0px; }
  .form-row { margin: 0px 0px 28px 0px; }
  .form-row__label { font-size: 15px; margin: 0px 0px 12px 0px; }
  .badge { font-size: 11px; padding: 4px 10px 4px 10px; margin: 0px 0px 0px 12px; }
  .form-row input { font-size: 15px; padding: 14px 16px 14px 16px; }
  .form-row textarea { font-size: 15px; padding: 14px 16px 14px 16px; }

  .form-agree { font-size: 14px; gap: 0px 10px; margin: 8px 0px 40px 0px; }
  .contact-submit { width: 280px; font-size: 14px; padding: 18px 0px 18px 0px; margin: 0px auto 0px auto; }
}

/* ============================================================
   SP（max-width: 767px）
   ============================================================ */
@media (max-width: 767px) {
  .contact-wrap { padding: 8px 24px 72px 24px; }
  .contact-intro { font-size: 14px; line-height: 1.95; margin: 0px 0px 40px 0px; }

  .contact-tel { padding: 32px 24px 32px 24px; margin: 0px 0px 48px 0px; }
  .contact-tel__label { font-size: 13px; margin: 0px 0px 12px 0px; }
  .contact-tel__num { font-size: 28px; margin: 0px 0px 10px 0px; }
  .contact-tel__hours { font-size: 13px; }

  .contact-line { padding: 32px 24px 32px 24px; margin: 0px 0px 48px 0px; }
  .contact-line__label { font-size: 13px; margin: 0px 0px 20px 0px; }
  .contact-line__qr { width: 180px; height: 180px; }
  .contact-line__note { font-size: 13px; line-height: 1.85; margin: 16px 0px 20px 0px; }
  .contact-line__btn { padding: 14px 32px 14px 32px; font-size: 13px; }

  .contact-form__label { font-size: 13px; margin: 0px 0px 32px 0px; }
  .form-row { margin: 0px 0px 24px 0px; }
  .form-row__label { font-size: 14px; margin: 0px 0px 10px 0px; }
  .badge { font-size: 10px; padding: 4px 8px 4px 8px; margin: 0px 0px 0px 10px; }
  .form-row input { font-size: 16px; padding: 12px 14px 12px 14px; }
  .form-row textarea { font-size: 16px; padding: 12px 14px 12px 14px; }

  .form-agree { font-size: 13px; gap: 0px 8px; margin: 8px 0px 32px 0px; }
  .contact-submit { width: 100%; font-size: 13px; padding: 16px 0px 16px 0px; }
}