/* =========================================================
   お問い合わせ（/contact）  Studio の実測値（tree_contact_pc / sp）で再現
   ========================================================= */

/* ---------- 上の写真（PC：高さ477px・画像は幅1387pxで中央。スマホ：高さ276px・cover） ---------- */
.contact-hero { height: 477px; }
.contact-hero__img { position: relative; height: 100%; background: var(--gray-bg); overflow: hidden; }
.contact-hero__img::before { content: ""; position: absolute; inset: 0; background: var(--img) center / 1387px auto no-repeat; }

/* ---------- 本文（灰色の背景） ---------- */
.contact-sec { background: var(--gray-bg); }
/* 1141px 以上：Studio は左メニューの下（左180px）を白い帯で覆っている */
@media (min-width: 1141px) { .contact-sec { background: linear-gradient(90deg, #fff var(--side), var(--gray-bg) var(--side)); } }
.contact-sec__in { display: flex; flex-direction: column; align-items: center; padding: 160px 30px; }

/* 見出し：CONTACT ＋ お問い合わせ */
.contact-head { scroll-margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: 40px; }
.contact-head__ja { font-family: var(--mont); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: .5em; color: var(--navy); text-align: center; }

/* ---------- フォーム ---------- */
.contact-form, .contact-done { display: flex; flex-direction: column; align-items: flex-start; width: 600px; max-width: calc(100% - 40px); margin: 20px; }
.contact-field { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 20px; }
.contact-field__lbl { display: flex; align-items: flex-start; margin-bottom: 10px; font-weight: 700; font-size: 15px; line-height: 21px; color: var(--text); }
.contact-field__name { font-family: var(--serif); }
.contact-field__req { margin-left: 5px; font-family: var(--lato); color: #f23a3c; }
.contact-field__input { display: block; width: 100%; height: 50px; margin: 0; padding: 10px; border: 1px solid var(--gray-bg); border-radius: 4px; background: #fff; box-shadow: none; color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 21px; text-align: left; -webkit-appearance: none; appearance: none; outline: none; transition: border-color .2s; }
/* Studio はメール・電話・住所だけ左右の余白が16px */
.contact-field--email .contact-field__input, .contact-field--tel .contact-field__input, .contact-field--address .contact-field__input { padding: 10px 16px; }
textarea.contact-field__input { height: 160px; padding: 10px; font-family: "Lato", "Hiragino Sans", sans-serif; font-weight: 500; resize: none; /* 日本語は Studio と同じくヒラギノ角ゴシック。Studio の見た目の太さに合わせて 500 */ overflow: auto; white-space: pre-wrap; }
.contact-field__input::placeholder { color: #e0e0e0; opacity: 1; }
.contact-field__input:focus { border-color: var(--navy); }

/* 入力エラー（Studio に無い表示。最小限の赤字） */
.contact-field.is-error .contact-field__input { border-color: #f23a3c; }
.contact-field__error { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #f23a3c; }
.contact-form__alert { width: 100%; margin-bottom: 20px; padding: 12px 16px; border-radius: 4px; background: #fff; color: #f23a3c; font-size: 14px; line-height: 1.6; }

/* 送信ボタン */
.contact-form__submit { all: unset; box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin-top: 20px; padding: 15px; border-radius: 4px; background: var(--pink); cursor: pointer; }
.contact-form__submit span { padding-bottom: 2px; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 18px; color: var(--navy); }
.contact-form__submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* 見えない入力欄（機械的な送信の判定用） */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 送信しました ---------- */
.contact-done { align-items: center; text-align: center; color: var(--navy); }
.contact-done__title { margin-bottom: 30px; font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: .1em; }
.contact-done__text { margin-bottom: 20px; font-size: 15px; line-height: 1.9; color: var(--text); }
.contact-done__tel { display: inline-block; margin-top: 4px; color: var(--navy); font-weight: 500; letter-spacing: .2em; }
.contact-done__back { margin-top: 20px; }

/* =========================================================
   990px 以下（上に帯。写真は画面いっぱい・上端から）
   ========================================================= */
@media (max-width: 990px) {
	.contact-head { scroll-margin-top: 90px; } /* 送信後に見出しへ移るとき、上の帯に隠れないように */
	.contact-head__en { font-size: 32px; line-height: 32px; }
}

/* =========================================================
   690px 以下：スマホ
   ========================================================= */
@media (max-width: 690px) {
	.contact-hero { height: 276px; }
	.contact-hero__img::before { background-size: cover; }
	.contact-sec__in { padding: 80px 20px; }
	.contact-head { gap: 20px; }
	.contact-head__ja { font-size: 16px; }
	.contact-form, .contact-done { max-width: 100%; margin: 20px 0; }
}
@media (max-width: 360px) {
	.contact-head__ja { font-size: 13px; }
}