@charset "UTF-8";
/* ==========================================================================
   page-reserve.css ── ご予約・お問い合わせ
   値は Figma の contact_PC（552:33170）／contact_SP（552:33684）のもの。フォームの入力エラーは §12-3（赤 #FF0000・14px・線1px）
   ========================================================================== */

/* ---- 1. ご予約前にご確認ください ---- */
.pw-rattn { padding: 40px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-rattn__box { display: flex; align-items: flex-start; gap: 24px; width: min(920px, 100%); margin-inline: auto; padding: 16px 24px 16px 24px; background: var(--pw-color-bg-yellowgreen); }
.pw-rattn__icon { flex: none; width: 34.7px; height: 29.5px; }
.pw-rattn__body { flex: 1 1 0; min-width: 0; }
.pw-rattn__ttl { font-size: 16px; font-weight: 500; line-height: 29px; color: var(--pw-color-primary); }
.pw-rattn__list { gap: 10px; margin-top: 10px; }
.pw-rattn__list li { min-height: 30px; }
.pw-rattn__list li::before { top: 13px; }

/* ---- 2. Contact Channels ---- */
.pw-rch { padding: 88px var(--pw-gutter) 88px; background: var(--pw-color-bg); }
.pw-rch__heading { width: min(364px, 100%); margin-inline: auto; }
.pw-rch__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: min(var(--pw-content), 100%); margin: 88px auto 0; }
.pw-rch__card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 23px 15px; text-align: center; background: var(--pw-color-white); border: 1px solid var(--pw-color-primary); border-radius: 8px; }
.pw-rch__badge { position: absolute; left: 47px; right: 47px; top: -13px; padding: 0 8px; font-size: 14px; line-height: 25px; color: var(--pw-color-white); background: var(--pw-color-primary); border-radius: 8px; }
.pw-rch__ttl { font-size: 26px; font-weight: 500; line-height: 47px; color: var(--pw-color-primary); }
.pw-rch__desc { margin-top: 24px; font-size: 16px; line-height: 29px; }
.pw-rch__desc--big { font-size: 20px; line-height: 36px; }
.pw-rch__tel { margin-top: 31px; }
.pw-rch__telnum { display: block; font-family: var(--pw-font-en); font-size: 32px; line-height: 38px; color: var(--pw-color-text); }
.pw-rch__telnote { display: block; margin-top: 8px; font-size: 12px; line-height: 22px; }
.pw-rch__desc + .pw-rch__desc--big { margin-top: 47px; }   /* Figma：メールフォームのカードだけ 47 */
.pw-rch__btn { width: 100%; margin-top: auto; padding-top: 31px; }
.pw-rch__btn .pw-btn { display: flex; width: 100%; }
.pw-rch__card--line .pw-rch__btn { padding-top: 24px; }

/* ---- 3. LINE Steps ---- */
.pw-rsteps { padding: 56px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-rsteps__heading { width: min(364px, 100%); margin-inline: auto; }
.pw-rsteps .pw-steps__list { margin-top: 64px; }
.pw-rsheet { width: min(920px, 100%); margin: 40px auto 0; text-align: center; }
.pw-rsheet__ttl { font-size: 18px; font-weight: 500; line-height: 32px; color: var(--pw-color-primary); }
.pw-rsheet__lead { margin-top: 16px; }
.pw-rsheet__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; text-align: left; }
.pw-rsheet__list li { position: relative; padding: 17.5px 8px 17.5px 46.9px; font-size: 16px; line-height: 29px; background: var(--pw-color-white); border: 1px solid var(--pw-color-border); border-radius: 4px; }
.pw-rsheet__list li::before { content: ""; position: absolute; left: 14px; top: 25px; width: 19px; height: 16px; background: url(../img/contact/we_accept.svg) no-repeat center / contain; }

/* ---- 4. お問い合わせフォーム ---- */
.pw-rform { padding: 88px var(--pw-gutter); background: var(--pw-color-bg-green10); }
.pw-rform__heading { width: min(459px, 100%); margin-inline: auto; }
.pw-rform__note { font-size: 12px; line-height: 22px; text-align: center; }
.pw-rform__box { width: min(920px, 100%); margin: 56px auto 0; padding: 72px 56px; background: var(--pw-color-white); border-radius: 8px; }
.pw-form__field + .pw-form__field { margin-top: 32px; }
.pw-form__label { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; }
.pw-form__req { padding: 0 4px; font-size: 14px; line-height: 20px; color: var(--pw-color-white); background: var(--pw-color-red); }
.pw-form__field .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.pw-form__input, .pw-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) { display: block; width: 100%; padding: 7px 16px; font: inherit; font-size: 16px; line-height: 29px; color: var(--pw-color-text); background: #EFF1F2; border: 1px solid transparent; border-radius: 0; }
.pw-form--static .pw-form__input { margin-top: 8px; }
.pw-form :where(textarea) { height: 194px; resize: vertical; }
.pw-form :where(input, textarea)::placeholder { color: var(--pw-color-placeholder); opacity: 1; }
.pw-form :where(input, textarea):focus-visible { outline: 2px solid var(--pw-color-primary); outline-offset: 0; }
/* 入力エラー（§12-3）：欄のすぐ下に赤 14px の文、欄に赤 1px の線 */
.pw-form .wpcf7-not-valid { border-color: var(--pw-color-red); }
.pw-form .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--pw-color-red); }
.pw-form .wpcf7-form-control-wrap[data-name="consent"] .wpcf7-not-valid-tip { margin-top: 8px; }
.pw-form__consent { margin-top: 32px; font-size: 16px; line-height: 29px; }
.pw-form__consent a { color: var(--pw-color-primary); text-decoration: underline; text-underline-offset: .2em; }
.pw-form__consent .wpcf7-form-control-wrap { display: inline; }
.pw-form__consent .wpcf7-list-item { display: inline; margin: 0; }
.pw-form__consent :where(label) { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.pw-form__consent input[type="checkbox"] { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; background: #EFF1F2; border: 1px solid transparent; cursor: pointer; }
.pw-form__consent input[type="checkbox"]:checked { background: var(--pw-color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 16px; }
.pw-form__consent input[type="checkbox"].wpcf7-not-valid { border-color: var(--pw-color-red); }
.pw-form__submit { display: flex; justify-content: center; margin-top: 56px; }
.pw-form__btn { width: 200px; }
.pw-form__btn .pw-btn__label { flex: 1 1 auto; text-align: center; }
.pw-form .wpcf7-spinner { display: none; }
.pw-form form.submitting .pw-form__btn { opacity: .6; pointer-events: none; }
.pw-form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; font-size: 14px; line-height: 25px; border: 1px solid var(--pw-color-primary); border-radius: 4px; }
.pw-form form.invalid .wpcf7-response-output, .pw-form form.failed .wpcf7-response-output, .pw-form form.spam .wpcf7-response-output { color: var(--pw-color-red); border-color: var(--pw-color-red); }
.pw-form form.init .wpcf7-response-output { display: none; }
.pw-form__static-note { margin-top: 24px; font-size: 12px; line-height: 22px; color: var(--pw-color-caption); text-align: center; }

/* ==========================================================================
   タブレット（768〜1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-rch__cards { gap: 24px; }
	.pw-rsheet__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-rform__box { padding: 48px 32px; }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	.pw-rattn { padding: 40px 20px; }
	.pw-rattn__box { flex-direction: column; align-items: center; gap: 24px; padding: 16px 24px; }
	.pw-rattn__body { width: 100%; }
	.pw-rattn__list li { min-height: 0; }
	.pw-rattn__list li::before { top: 13px; }
	.pw-rch { padding: 56px 20px; }
	.pw-rch__heading { width: 100%; }
	.pw-rch__cards { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
	.pw-rch__card--line { padding-top: 31px; }   /* バッジのぶん */
	.pw-rch .pw-h2, .pw-rsteps .pw-h2, .pw-rform .pw-h2 { font-size: 26px; line-height: 47px; }   /* Figma の SP は 26px のまま */
	.pw-rch__badge { left: auto; right: auto; width: 120px; top: -11px; margin-inline: auto; line-height: 25px; padding: 2px 0; }
	.pw-rch__desc { margin-top: 20px; }
	.pw-rch__desc--big { font-size: 16px; line-height: 29px; }
	.pw-rch__card:not(.pw-rch__card--line) .pw-rch__desc + .pw-rch__desc--big { font-size: 20px; line-height: 36px; margin-top: 20px; }
	.pw-rch__tel { margin-top: 20px; }
	.pw-rch__telnote { margin-top: 4px; }
	.pw-rch__btn { padding-top: 20px; }
	.pw-rch__card--line .pw-rch__btn { padding-top: 20px; }
	.pw-rsteps { padding: 56px 20px; }
	.pw-rsteps__heading { width: 100%; }
	.pw-rsteps .pw-steps__list { margin-top: 40px; }
	.pw-rsheet { margin-top: 40px; }
	.pw-rsheet__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.pw-rsheet__list li { padding: 8px 8px 8px 46.9px; }
	.pw-rsheet__list li::before { top: 15px; }
	.pw-rform { padding: 56px 12px; }
	.pw-rform__heading { width: 100%; }
	.pw-rform__box { margin-top: 40px; padding: 32px 16px; }
	.pw-form__field + .pw-form__field { margin-top: 24px; }
	.pw-form__input, .pw-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) { padding: 11px 16px; }
	.pw-form__consent { margin-top: 24px; }
	.pw-form__consent :where(label) { gap: 6px; }
	.pw-form :where(textarea) { height: 140px; }
	.pw-form__submit { margin-top: 32px; }
	.pw-form__btn { width: 100%; }
}