@charset "UTF-8";
/**
 * LUXE ENTRY Contact ページ（Contact (LUXE)）スタイル
 *
 * Contact.dc.html デザインの移植。templates/page-contact.php でのみ読み込む
 * （inc/setup.php で条件付き enqueue）。ヒーロー・セクション見出しは
 * css/style.css の共通部品（.luxe-hero / .luxe-sechead / .luxe-label）を再利用する。
 */

/* ============================================================
 * ② ページヒーロー（共通 .luxe-hero のバリアント）
 * ============================================================ */
.luxe-contact-hero {
	padding-bottom: 56px;
}

/* ============================================================
 * ③ 公式 LINE 導線（主）— 中央寄せの標準パターン
 * ============================================================ */
.luxe-contact-line {
	background: #fff;
	padding: 72px var(--luxe-pad-x);
	text-align: center;
}

.luxe-contact-line__inner {
	max-width: 640px;
	margin: 0 auto;
}

.luxe-contact-line__label {
	color: #9a7f63;
	margin-bottom: 14px;
}

.luxe-contact-line__title {
	font-family: var(--luxe-mincho-head);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: 0.05em;
	color: var(--luxe-ink);
	margin-bottom: 18px;
}

.luxe-contact-line__lead {
	font-size: 14px;
	line-height: 2.1;
	color: var(--luxe-body);
	margin-bottom: 36px; /* 本文→ボタン間隔はサイト共通 36px */
}

/* QR コード枠（実画像は公式 LINE URL 確定後に差し替え） */
.luxe-contact-line__qr {
	width: 168px;
	height: 168px;
	border: 1px dashed rgba(122, 108, 93, 0.4);
	background: #faf6f0;
	display: grid;
	place-items: center;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--luxe-body);
	text-align: center;
	margin: 40px auto 0;
}

/* ============================================================
 * ④ お問い合わせフォーム（1 カラム・中央寄せ）
 * ============================================================ */
.luxe-contact-main {
	padding: 80px var(--luxe-pad-x) 110px;
	max-width: 760px;
	margin: 0 auto;
}

/* --- フォーム --- */
.luxe-contact-form__label {
	display: block;
	margin-bottom: 14px;
}

.luxe-contact-form__title {
	font-family: var(--luxe-mincho-head);
	font-weight: 500;
	font-size: 24px;
	letter-spacing: 0.05em;
	color: var(--luxe-ink);
	margin-bottom: 12px;
}

.luxe-contact-form__lead {
	font-size: 13.5px;
	line-height: 2;
	color: var(--luxe-body);
	margin-bottom: 36px;
}

.luxe-contact-form form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.luxe-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.luxe-contact-form__field label {
	display: block;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--luxe-body);
	margin-bottom: 8px;
}

.luxe-contact-form__req {
	color: #b06a52;
}

/* 入力部品（本ページ専用） */
.luxe-input {
	width: 100%;
	font-family: var(--luxe-gothic);
	font-size: 14px;
	color: var(--luxe-ink-soft);
	background: #fff;
	border: 1px solid rgba(122, 108, 93, 0.28);
	padding: 14px 16px;
	outline: none;
	transition: border-color 0.25s ease;
}

.luxe-input:focus {
	border-color: var(--luxe-gold-3);
}

.luxe-input::placeholder {
	color: #b3a894;
}

.luxe-input--select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" stroke="%239a7f63" stroke-width="1.4" fill="none"/></svg>');
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.luxe-input--textarea {
	resize: vertical;
	line-height: 1.9;
}

.luxe-contact-form__privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--luxe-body);
}

.luxe-contact-form__privacy input {
	margin-top: 3px;
	accent-color: var(--luxe-cta);
}

.luxe-contact-form__submit {
	align-self: flex-start;
	font-family: var(--luxe-label);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #f6f1ea;
	background: var(--luxe-ink);
	border: none;
	padding: 17px 46px;
	cursor: pointer;
	transition: opacity 0.2s;
}

@media screen and (max-width: 599px) {
	.luxe-contact-form__submit{
		width: 100%;
	}
}

.luxe-contact-form__submit:hover {
	opacity: 0.85;
}

.luxe-contact-form__note {
	font-size: 11.5px;
	color: #8a7e6f;
	line-height: 1.8;
}

/* ============================================================
 * ⑤ お問い合わせの流れ（トープバンド 4 ステップ）
 * ============================================================ */
.luxe-contact-flow {
	background: var(--luxe-bg-band);
	padding: 96px var(--luxe-pad-x);
}

.luxe-contact-flow__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.luxe-contact-flow__head {
	margin-bottom: 52px;
}

.luxe-contact-flow__label {
	color: #9a7f63;
}

.luxe-contact-flow__title {
	font-size: 40px;
}

.luxe-contact-flow__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.luxe-contact-flow__step {
	background: #f6f0e8;
	border: 1px solid rgba(122, 108, 93, 0.14);
	padding: 32px 26px;
}

.luxe-contact-flow__num {
	font-family: var(--luxe-serif);
	font-size: 30px;
	color: var(--luxe-gold-2);
	margin-bottom: 12px;
}

.luxe-contact-flow__steptitle {
	font-family: var(--luxe-mincho-head);
	font-weight: 500;
	font-size: 16px;
	color: var(--luxe-ink);
	margin-bottom: 10px;
}

.luxe-contact-flow__step p {
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--luxe-body);
}

/* ============================================================
 * レスポンシブ
 * ============================================================ */
@media (max-width: 860px) {
	.luxe-contact-line {
		padding: 56px var(--luxe-pad-x);
	}

	.luxe-contact-main {
		padding: 48px var(--luxe-pad-x) 64px;
	}

	.luxe-contact-form__row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.luxe-contact-flow { padding: 64px var(--luxe-pad-x); }
	.luxe-contact-flow__head { margin-bottom: 36px; }
	.luxe-contact-flow__title { font-size: 32px; }
	.luxe-contact-flow__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (max-width: 560px) {
	.luxe-contact-flow__grid { grid-template-columns: 1fr; }
}