/* =========================================================
   お問い合わせ（/contact/）  Studio の実測値で再現
   PC 1440px：写真の帯 360px → フォーム（幅600px）
   画面幅の切り替え：840px（@tablet）・540px（@mobile）
   ========================================================= */

/* ---------- 上の写真の帯（帯の下に写真が入り、白い膜をかける） ---------- */
.contact-hero { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; height: 360px; overflow: hidden; }
.contact-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; }
.contact-hero__veil { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 80px 48px 0; background: rgba(255, 255, 255, .9); }
.contact-hero__in { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.contact-hero__ttl { display: flex; flex-direction: column; align-items: flex-start; }
.contact-hero__ja { margin: 0; color: #000; font-weight: var(--w-l); font-size: 20px; line-height: 1.4; letter-spacing: .05em; }
.contact-hero__en { color: #000; font-weight: var(--w-m); font-size: 40px; line-height: 1.4; letter-spacing: .25em; }

/* ---------- フォーム ---------- */
.contact-sec { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 60px 30px; }
.contact-form, .contact-done { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 600px; max-width: 100%; margin: 0 0 20px; }

.contact-field { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 20px; }
.contact-field__head { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 10px; }
.contact-field__lbl { display: flex; align-items: flex-start; }
.contact-field__name, .contact-field__note { color: #333; font-weight: var(--w-m); font-size: 16px; line-height: 1.6; }
.contact-field__req { color: #f00; font-family: var(--lato); font-weight: 700; font-size: 16px; line-height: 1.6; }
.contact-field__input { display: block; width: 100%; height: 50px; margin: 0; padding: 10px 15px; border: 2px solid #000; border-radius: 4px; background: #fff; color: #333; font-family: var(--gin); font-weight: var(--w-m); font-size: 15px; line-height: 1.4; letter-spacing: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; transition: background .2s; }
textarea.contact-field__input { height: 160px; padding: 10px; overflow: auto; resize: none; }
.contact-field__input::placeholder { color: #777; opacity: 1; }
@media (hover: hover) { .contact-field__input:hover { background: #eee; } }
.contact-field__input:focus { background: #ddd; }
.contact-field__input:focus-visible { outline: 2px solid #142fdf; outline-offset: 2px; }
.contact-field.is-error .contact-field__input { border-color: #d00; }
.contact-field__error { display: block; margin-top: 6px; color: #d00; font-weight: var(--w-m); font-size: 14px; line-height: 1.5; }
.contact-form__alert { width: 100%; margin: 0 0 20px; padding: 10px 14px; border: 1px solid #d00; border-radius: 4px; color: #d00; font-weight: var(--w-m); font-size: 14px; line-height: 1.6; }

/* 同意のチェック */
.contact-agree { margin: 0 0 20px; }
.contact-agree__lbl { display: flex; align-items: center; }
.contact-agree__check { flex: none; width: 13px; height: 13px; margin: 0 10px 0 0; accent-color: #142fdf; }
.contact-agree__link { color: #142fdf; font-weight: var(--w-m); font-size: 15px; line-height: 1.4; text-decoration: underline; transition: opacity .3s; }
@media (hover: hover) { .contact-agree__link:hover { opacity: .5; } }
.contact-agree .contact-field__error { margin-top: 6px; }

/* 送信ボタン（「トップページへ戻る」も同じ形） */
.contact-btn { display: flex; justify-content: center; align-items: center; padding: 10px 30px; border: 1px solid #000; border-radius: 8px; background: #000; color: #fff; font-family: var(--gin); font-weight: var(--w-m); font-size: 15px; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .contact-btn:hover { background: #fff; color: #000; } }

/* 見えない欄（機械的な送信よけ）。display:none だと埋めてくれないので画面の外へ */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 送信しました */
.contact-done__title { margin: 0 0 20px; color: #333; font-weight: var(--w-m); font-size: 24px; line-height: 1.4; letter-spacing: .1em; }
.contact-done__text { margin: 0 0 16px; color: #333; font-weight: var(--w-l); font-size: 16px; line-height: 1.8; }
.contact-done__tel { font-weight: var(--w-m); text-decoration: underline; }
.contact-done__back { margin-top: 12px; }

/* =========================================================
   840px 以下
   ========================================================= */
@media (max-width: 840px) {
	.contact-hero { height: 280px; }
	.contact-hero__veil { flex-direction: column; padding: 80px 0 0; }
	.contact-hero__in { flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 0 32px; }
	.contact-hero__ja { font-size: 18px; }
	.contact-hero__en { font-size: 32px; }
}

/* =========================================================
   540px 以下：スマホ
   ========================================================= */
@media (max-width: 540px) {
	.contact-hero { height: 240px; }
	.contact-hero__in { padding: 0 16px; }
	.contact-hero__ja { font-size: 16px; }
	.contact-hero__en { font-size: 28px; }
	.contact-sec { padding: 40px 30px; }
	.contact-field__input { font-size: 12px; }
	/* Studio のスマホは「お名前」の欄だけ上の余白が 0（文字が少し上に寄る）。同じにする */
	.contact-field--name .contact-field__input { padding: 0 15px 10px; }
	.contact-agree__link { font-size: 12px; }
	.contact-done__title { font-size: 20px; }
	.contact-done__text { font-size: 14px; }
}