@charset "utf-8";
/* =====================================================================
   contact.css  ／  お問い合わせページ（page-contact.php）

   ・間隔はすべて rem（1rem = 16px）。ボタン内側は em
   ・コンテンツ幅は 80rem（--contact-max）
   ・文字サイズ／色／フォントは style.css の変数（--fs**, --main-color 等）に準拠
   ・ブレイクポイントは 768px（テーマ共通）／ SP は最小 375px まで対応
   ===================================================================== */

:root {
	/* --- 配色 ------------------------------------------------------- */
	--contact-red:         #E60012; /* 必須マーク・注意書き */
	--contact-beige:       #c9ad83; /* 「修正する」ボタン */
	--contact-border:      #D8D5D2; /* 入力欄の枠線 */
	--contact-line:        #B9B4AE; /* 見出し下の罫線 */
	--contact-placeholder: #B5B5B5;
	--contact-value:       #4D4D4D; /* 確認画面の入力値 */

	/* --- レイアウト -------------------------------------------------- */
	--contact-max:      80rem; /* コンテンツ幅 */
	--contact-header-h: 5.1365rem;   /* 固定ヘッダーぶんの高さ確保（ヘッダー確定後に調整） */
	--contact-label-w:  10rem;  /* ラベル列の幅（右揃え） */
	--contact-gap:      1.25rem;   /* ラベル列 ⇔ 入力欄 の間隔 */
	--contact-field-w:  32.8125rem;  /* 入力欄の幅 */
	--contact-card-w:   50.1875rem;  /* 確認画面の白カード幅 */
	--contact-btn-w:    18.75rem;  /* ボタン幅 */
	--contact-btn-h:    2.5rem;   /* ボタン高さ */
}

/* =====================================================================
   セクション土台
   ===================================================================== */
.p-contact {
	position: relative;
	overflow: hidden;
	background-color: var(--back-color);
	color: var(--main-color);
	font-family: var(--font-jp);
	/* ↓ ヘッダー（position:fixed）ぶんの高さを確保 */
	padding-top: var(--contact-header-h);
	padding-bottom: 7.5rem;
}

/* 右上の光のあしらい
   PC : img/common/bg-sunlight.webp（2357×2993。左端 8.8% は透過）
   SP : img/common/bg-sunlight-sp.webp（787×796 → 画面幅いっぱい） */
.p-contact__bg {
	position: absolute;
	top: var(--contact-header-h); /* 固定ヘッダーのぶん下げる */
	right: 0;
	z-index: 0;
	width: 70%;
	aspect-ratio: 2357 / 2993;
	background-image: url("../img/common/bg-sunlight-kasou.webp");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	pointer-events: none;
}

.p-contact__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--contact-max);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ステップの表示切替（hidden 属性で制御） */
.p-contact [hidden] {
	display: none !important;
}

/* =====================================================================
   ページ見出し（Contact／お問い合わせ）
   ===================================================================== */
.p-contact__head {
	text-align: center;
	padding-top: 5.625rem;
}
.p-contact__title {
	font-family: var(--font-en);
	font-size: var(--fs50);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--main-color);
	margin: 0;
}
.p-contact__title-jp {
	font-size: var(--fs18);
	letter-spacing: 0.08em;
	color: var(--main-color);
	margin: 0.5rem 0 0;
}

/* =====================================================================
   STEP 1 : 入力
   ===================================================================== */
.p-contact__lead {
	text-align: center;
	margin-top: 4rem;
}
.p-contact__lead p {
	margin: 0;
}
.p-contact__lead-text {
	font-size: var(--fs15);
	line-height: 2;
	color: var(--main-color);
}
.p-contact__lead-contact {
	margin-top: 0.5rem;
	line-height: 2;
}
.p-contact__lead-contact a {
	display: block;
	font-size: var(--fs15);
	letter-spacing: 0.05em;
	color: var(--main-color2);
	text-decoration: none;
	transition: opacity 0.3s;
	-webkit-tap-highlight-color: transparent;
}
.p-contact__lead-contact a:hover {
	opacity: 0.6;
}
.p-contact__lead-note {
	margin-top: 0.375rem;
	font-size: var(--fs15);
	line-height: 1.8;
	color: var(--contact-red);
}
.p-contact__require {
	margin: 2.8125rem 0 0;
	text-align: center;
	font-size: var(--fs15);
	font-weight: 700;
	color: var(--contact-red);
}

/* --- 入力行 -------------------------------------------------------- */
.p-contact__rows {
	margin-top: 2.5rem;
}
.p-contact__row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--contact-gap);
	margin-bottom: 2rem;
}
.p-contact__label {
	flex: 0 0 var(--contact-label-w);
	width: var(--contact-label-w);
	padding-top: 0.625rem;
	text-align: right;
	font-size: var(--fs15);
	font-weight: 700;
	line-height: 1.4;
	color: var(--main-color);
	white-space: nowrap;
}
.p-contact__label label {
	cursor: pointer;
}
.p-contact__field {
	flex: 0 0 var(--contact-field-w);
	width: var(--contact-field-w);
	max-width: 100%;
}
.p-contact__req {
	color: var(--contact-red);
	font-weight: 700;
	margin-left: 0.125rem;
}

/* CF7 が自動で挟む要素の打ち消し */
.p-contact__form p {
	margin: 0 0 1rem;
}
.p-contact__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* --- 入力欄 -------------------------------------------------------- */
.p-contact__input,
.p-contact__select,
.p-contact__textarea {
	display: block;
	width: 100%;
	background-color: #fff;
	border: 1px solid var(--contact-border);
	border-radius: 2px;
	color: var(--main-color);
	font-family: var(--font-jp);
	font-size: var(--fs15);
	line-height: 1.6;
	/* 枠線の色変化は「ふんわり」入るよう、やや長め＋イーズアウト */
	transition: border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow   0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-appearance: none;
	appearance: none;
}
.p-contact__input:hover,
.p-contact__select:hover,
.p-contact__textarea:hover {
	border-color: rgba(0, 67, 137, 0.35);
}
.p-contact__input,
.p-contact__select {
	height: 2.375rem;
	padding: 0 0.875rem;
}
.p-contact__textarea {
	height: 15.625rem;
	padding: 0.625rem 0.875rem;
	resize: vertical;
}
.p-contact__input::placeholder,
.p-contact__textarea::placeholder {
	color: var(--contact-placeholder);
}
.p-contact__input:focus,
.p-contact__select:focus,
.p-contact__textarea:focus {
	outline: none;
	border-color: var(--main-color);
}

/* セレクト（矢印はSVGを内蔵。閉じている状態のみ制御できます） */
.p-contact__select {
	padding-right: 2.5rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23112A45' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 0.75rem auto;
}
.p-contact__select:invalid,
.p-contact__select option[value=""] {
	color: var(--contact-placeholder);
}
.p-contact__select option {
	color: var(--main-color);
}
/* 閉じている状態にも控えめな影 */
.p-contact__select {
	box-shadow: 0 1px 3px rgba(17, 42, 69, 0.05);
}

/* --- プルダウンを開いたときのメニュー ------------------------------
   ネイティブ <select> の展開部分は OS が描画するため、本来 CSS は効きません
   （カンプの影は macOS の標準描画です）。
   ::picker(select) に対応したブラウザ（Chrome 135+ 系）でだけ、
   カンプに寄せた影付きメニューに差し替えます。
   非対応ブラウザは従来どおり OS 標準の見た目のままです。
   ------------------------------------------------------------------ */
@supports (appearance: base-select) {
	.p-contact__select {
		appearance: base-select;
		display: flex;
		align-items: center;
		text-align: left;
	}
	/* 矢印は既存の背景SVGを使うので、ブラウザ標準のアイコンは隠す */
	.p-contact__select::picker-icon {
		display: none;
	}
	.p-contact__select::picker(select) {
		appearance: base-select;
		margin-top: 0.25rem;
		padding: 0.375rem 0;
		border: 1px solid var(--contact-border);
		border-radius: 6px;
		background-color: #fff;
		box-shadow: 0 8px 24px rgba(17, 42, 69, 0.13),
		            0 2px 5px  rgba(17, 42, 69, 0.07);
	}
	.p-contact__select option {
		padding: 0.5625rem 1rem;
		font-size: var(--fs15);
		line-height: 1.5;
		background-color: #fff;
		cursor: pointer;
		/* OS標準のベタ塗り青 → 淡い青がふんわり乗る形に */
		transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.p-contact__select option:hover,
	.p-contact__select option:focus {
		outline: none;
		background-color: rgba(0, 67, 137, 0.08);
	}
	.p-contact__select option:checked {
		background-color: rgba(0, 67, 137, 0.05);
	}
}

/* 郵便番号（〒 ＋ 入力欄） */
.p-contact__zip {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.625rem;
}
.p-contact__zip-mark {
	flex: 0 0 auto;
	font-size: var(--fs15);
	color: var(--main-color);
}
.p-contact__zip .wpcf7-form-control-wrap {
	flex: 0 0 14.875rem;
	width: 14.875rem;
	max-width: 100%;
}
.p-contact__input--zip {
	width: 100%;
}

/* --- プライバシーポリシー同意 --------------------------------------- */
.p-contact__privacy {
	margin-top: 3rem;
	text-align: center;
	font-size: var(--fs15);
}
.p-contact__privacy label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.p-contact__privacy .wpcf7-list-item {
	margin: 0;
}
.p-contact__privacy input[type="checkbox"] {
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
	background-color: #fff;
	border: 1px solid var(--contact-border);
	border-radius: 1px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
}
.p-contact__privacy input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 0.0625rem;
	left: 0.25rem;
	width: 0.25rem;
	height: 0.5rem;
	border: solid var(--main-color);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.p-contact__privacy-link {
	color: var(--contact-beige);
	text-decoration: underline;
	transition: opacity 0.3s;
}
.p-contact__privacy-link:hover {
	opacity: 0.7;
}

/* =====================================================================
   ボタン
   ===================================================================== */
.p-contact__btns {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4.125rem;
	margin-top: 3rem;
}
.p-contact__btn-wrap {
	position: relative;
	display: block;
	width: var(--contact-btn-w);
	max-width: 100%;
}
.p-contact__btn {
	display: block;
	width: 100%;
	height: var(--contact-btn-h);
	padding: 0 2em;
	border: none;
	border-radius: 0;
	background-color: var(--main-color);
	color: #fff;
	font-family: var(--font-jp);
	font-size: var(--fs15);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.3s;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.p-contact__btn:hover {
	opacity: 0.8;
}
.p-contact__btn--back {
	background-color: var(--contact-beige);
}

/* 矢印（CF7 の submit は input のため疑似要素が使えず、別 span で重ねています） */
.p-contact__btn-arrow {
	position: absolute;
	top: 50%;
	right: 1.125rem;
	width: 0.4375rem;
	height: 0.4375rem;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
}
.p-contact__btn-arrow--left {
	right: auto;
	left: 1.125rem;
	transform: translateY(-50%) rotate(-135deg);
}

/* =====================================================================
   STEP 2 : 確認
   ===================================================================== */
.p-contact__confirm-head {
	width: var(--contact-card-w);
	max-width: 100%;
	margin: 3.75rem auto 0;
	padding-bottom: 1.375rem;
	border-bottom: 1px solid var(--contact-line);
	text-align: center;
}
.p-contact__step-title {
	margin: 0;
	font-family: var(--font-jp2); /* Zen Old Mincho */
	font-size: var(--fs20);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--main-color);
}
.p-contact__confirm-card {
	width: var(--contact-card-w);
	max-width: 100%;
	margin: 2rem auto 0;
	padding: 4.375rem 0;
	background-color: #fff;
}
.p-contact__confirm-row {
	display: flex;
	align-items: flex-start;
	gap: 1.875rem;
	margin-bottom: 1.5625rem;
}
.p-contact__confirm-row:last-child {
	margin-bottom: 0;
}
.p-contact__confirm-label {
	flex: 0 0 21.3125rem;
	width: 21.3125rem;
	text-align: right;
	font-size: var(--fs15);
	font-weight: 700;
	line-height: 1.6;
	color: var(--main-color);
}
.p-contact__confirm-values {
	flex: 1 1 auto;
	min-width: 0;
}
.p-contact__confirm-value {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs15);
	line-height: 1.6;
	color: var(--contact-value);
	white-space: pre-wrap;
	word-break: break-all;
	overflow-wrap: anywhere;
}
.p-contact__confirm-value--zip {
	display: flex;
	gap: 0.375rem;
	margin-bottom: 0.75rem;
}
.p-contact__confirm-value--zip .p-contact__zip-mark {
	color: var(--contact-value);
}
.p-contact__confirm-row--message .p-contact__confirm-value {
	line-height: 1.8;
}

/* =====================================================================
   Reservation（ご予約はこちら）
   PC : img/common/bg-reservation.webp（1440×365）
   SP : img/common/bg-reservation-sp.webp（786×600）
   ※ 画像側にすでに暗さが乗っているため、CSS側のオーバーレイはホバー時のみ
   ===================================================================== */
.p-reservation {
	width: 100%;
	font-family: var(--font-jp);
}
.p-reservation__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1440 / 365;
	background-image: url("../img/common/bg-reservation.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
/* ホバー時だけ少し沈ませる（濃さはここで調整） */
.p-reservation__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(17, 42, 69, 0);
	transition: background-color 0.3s;
}
.p-reservation__link:hover::before {
	background-color: rgba(17, 42, 69, 0.2);
}
.p-reservation__text {
	position: relative;
	z-index: 1;
	text-align: center;
}
.p-reservation__title {
	display: block;
	font-family: var(--font-en);
	font-size: var(--fs40);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
}
.p-reservation__sub {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--fs18);
	letter-spacing: 0.08em;
}

/* =====================================================================
   Contact Form 7 のバリデーション表示
   ===================================================================== */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--fs14);
	color: var(--contact-red);
}
.p-contact .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--contact-red);
}
.p-contact .wpcf7-response-output {
	max-width: var(--contact-card-w);
	margin: 1.875rem auto 0;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--contact-border);
	background-color: #fff;
	font-size: var(--fs15);
	line-height: 1.8;
	text-align: center;
}
.p-contact .wpcf7-spinner {
	margin: 0 auto;
	display: block;
}

/* =====================================================================
   タブレット（コンテンツ幅が縮み始める領域）
   ===================================================================== */
@media (max-width: 1050px) {
	:root {
		--contact-field-w: 46vw;
		--contact-card-w:  92%;
	}
	/* この幅から下は光の帯が途切れる位置と重なり calc() が安定しないため、
	   単純な % に切り替え（見出しとの関係は概ね維持されます） */
	.p-contact__bg {
		width: 62%;
	}
	.p-contact__confirm-label {
		flex: 0 0 40%;
		width: 40%;
	}
	.p-contact__confirm-card {
		padding: 3.125rem 1.875rem;
	}
	.p-contact__zip .wpcf7-form-control-wrap {
		flex: 0 0 45%;
		width: 45%;
	}
}

/* =====================================================================
   SP（〜768px ／ 最小 375px）
   ===================================================================== */
@media (max-width: 768px) {
	:root {
		--contact-header-h: 4.042rem;
		--contact-btn-h:    3.125rem;
	}

	.p-contact {
		padding-bottom: 4.375rem;
	}
	.p-contact__bg {
		width: 100%;
		max-width: none;
		aspect-ratio: 787 / 796;
		background-image: url("../img/common/bg-sunlight-sp.webp");
		background-size: 100% auto;
	}
	.p-contact__inner {
		padding: 0 0.9375rem;
	}

	/* --- 見出し --- */
	.p-contact__head {
		padding-top: 2.8125rem;
	}
	.p-contact__title-jp {
		font-size: var(--fs20);
		margin-top: 0.375rem;
	}

	/* --- リード文 --- */
	.p-contact__lead {
		margin-top: 1.875rem;
	}
	.p-contact__lead-text,
	.p-contact__lead-contact a,
	.p-contact__lead-note {
		font-size: var(--fs20);
	}
	.p-contact__lead-text {
		line-height: 1.9;
	}
	.p-contact__require {
		margin-top: 1.875rem;
		font-size: var(--fs20);
	}

	/* --- 入力行（ラベルを上に積む） --- */
	.p-contact__rows {
		margin-top: 1.5625rem;
	}
	.p-contact__row {
		display: block;
		margin-bottom: 1.25rem;
	}
	.p-contact__label {
		width: auto;
		padding-top: 0;
		margin-bottom: 0.5rem;
		text-align: left;
		font-size: var(--fs20);
	}
	.p-contact__field {
		width: 100%;
	}

	/* --- 入力欄（iOS のズーム防止のため 16px 以上を維持） --- */
	.p-contact__input,
	.p-contact__select,
	.p-contact__textarea {
		font-size: var(--fs20);
	}
	.p-contact__input,
	.p-contact__select {
		height: 2.875rem;
		padding: 0 0.75rem;
	}
	.p-contact__select {
		padding-right: 2.375rem;
	}
	.p-contact__textarea {
		height: 11.875rem;
		padding: 0.75rem;
	}
	.p-contact__zip {
		gap: 0.3125rem;
		margin-bottom: 0.5rem;
	}
	.p-contact__zip-mark {
		font-size: var(--fs20);
	}
	.p-contact__zip .wpcf7-form-control-wrap {
		flex: 1 1 auto;
		width: auto;
	}

	/* --- 同意チェック --- */
	.p-contact__privacy {
		margin-top: 1.5625rem;
		font-size: var(--fs20);
	}
	.p-contact__privacy input[type="checkbox"] {
		width: 1rem;
		height: 1rem;
	}
	.p-contact__privacy input[type="checkbox"]:checked::after {
		top: 0.0625rem;
		left: 0.3125rem;
		width: 0.25rem;
		height: 0.5625rem;
	}

	/* --- ボタン（縦積み・全幅） --- */
	.p-contact__btns {
		display: block;
		margin-top: 1.5625rem;
	}
	.p-contact__btn-wrap {
		width: 100%;
	}
	.p-contact__btn-wrap + .p-contact__btn-wrap {
		margin-top: 0.75rem;
	}
	.p-contact__btn {
		font-size: var(--fs20);
	}
	.p-contact__btn-arrow {
		right: 1.25rem;
		width: 0.5rem;
		height: 0.5rem;
	}
	.p-contact__btn-arrow--left {
		left: 1.25rem;
	}

	/* --- 確認画面 --- */
	.p-contact__confirm-head {
		width: 100%;
		margin-top: 1.5625rem;
		padding-bottom: 0.875rem;
	}
	.p-contact__step-title {
		font-size: var(--fs24);
	}
	.p-contact__confirm-card {
		width: 100%;
		margin-top: 1.125rem;
		padding: 1.5625rem 0.9375rem;
	}
	.p-contact__confirm-row {
		display: block;
		margin-bottom: 1.25rem;
	}
	.p-contact__confirm-label {
		width: auto;
		margin-bottom: 0.375rem;
		text-align: left;
		font-size: var(--fs20);
	}
	.p-contact__confirm-value {
		font-size: var(--fs20);
	}
	.p-contact__confirm-value--zip {
		margin-bottom: 0.25rem;
	}

	.p-contact .wpcf7-response-output {
		max-width: 100%;
		font-size: var(--fs20);
	}

	/* --- Reservation --- */
	.p-reservation__link {
		aspect-ratio: 786 / 600;
		background-image: url("../img/common/bg-reservation-sp.webp");
	}
	.p-reservation__sub {
		margin-top: 0.25rem;
		font-size: var(--fs20);
	}
}

/* =====================================================================
   SP 最小幅（375px）調整
   ===================================================================== */
@media (max-width: 400px) {
	.p-contact__inner {
		padding: 0 0.9375rem;
	}
	.p-contact__lead-text {
		letter-spacing: 0;
	}
}