/* Contact Form 7：入力・確認・送信完了ページ */

.myousenzi-contact {
 --contact-border: #e5d7c7;
 --contact-surface: #fff8f2;
}

.myousenzi-contact .standard-page__body {
 max-width: 960px;
}

/* お問い合わせ専用ページでは、共通ページ末尾の汎用フォームを重複表示しない。 */
.myousenzi-contact #contact-form {
 display: none;
}

.myousenzi-contact .wpcf7 {
 color: var(--color-text);
 font-family: var(--font-family-base);
}

.myousenzi-contact .wpcf7 [hidden] {
 display: none !important;
}

/* お問い合わせ方法の切り替え。旧テーマのタブCSSに依存させない。 */
.contact-channels {
 padding-bottom: clamp(56px, 7vw, 104px);
}

.contact-channels__toggle {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 white-space: nowrap;
}

.contact-channels__nav {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 margin-bottom: clamp(28px, 4vw, 48px);
}

.contact-channels__nav label {
 display: flex;
 min-height: 82px;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 14px 18px;
 border: 1px solid var(--contact-border);
 border-radius: 18px;
 background: rgb(255 255 255 / 82%);
 color: #6f625b;
 font-size: var(--font-size-18);
 font-weight: var(--font-weight-bold);
 line-height: 1.55;
 text-align: center;
 cursor: pointer;
 box-shadow: 0 10px 26px rgb(133 91 0 / 6%);
 transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}

.contact-channels__nav label:hover {
 transform: translateY(-2px);
}

#contact-channel-form:focus-visible ~ .contact-channels__nav label[for='contact-channel-form'],
#contact-channel-line:focus-visible ~ .contact-channels__nav label[for='contact-channel-line'] {
 outline: 3px solid var(--color-focus);
 outline-offset: 3px;
}

.contact-channels__nav i {
 color: var(--color-accent-pink);
 font-size: 1.65em;
}

#contact-channel-form:checked ~ .contact-channels__nav label[for='contact-channel-form'],
#contact-channel-line:checked ~ .contact-channels__nav label[for='contact-channel-line'] {
 border-color: var(--color-accent-pink-border);
 background: var(--color-accent-pink-surface);
 color: var(--color-accent-pink-dark);
 box-shadow: 0 12px 30px rgb(245 49 112 / 12%);
}

.contact-channels__panel {
 display: none;
}

#contact-channel-form:checked ~ .contact-channels__panels .contact-channels__panel--form,
#contact-channel-line:checked ~ .contact-channels__panels .contact-channels__panel--line {
 display: block;
}

.contact-line-card {
 display: grid;
 grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
 align-items: center;
 gap: clamp(24px, 5vw, 64px);
 padding: clamp(30px, 5vw, 64px);
 border: 1px solid #b9dfbd;
 border-radius: clamp(22px, 3vw, 34px);
 background: rgb(255 255 255 / 88%);
 box-shadow: 0 18px 44px rgb(37 143 62 / 10%);
}

.contact-line-card__icon {
 display: grid;
 aspect-ratio: 1;
 place-items: center;
 border-radius: 50%;
 background: #06c755;
 color: var(--color-white);
 font-size: clamp(76px, 9vw, 118px);
 box-shadow: 0 16px 34px rgb(6 199 85 / 22%);
}

.contact-line-card__content h2 {
 margin: 0 0 18px;
 color: var(--color-brand-gold-dark);
 font-size: var(--font-size-30);
 line-height: 1.5;
}

.contact-line-card__content p {
 margin: 0;
 font-size: var(--font-size-18);
 line-height: 1.9;
}

.contact-line-card__button {
 display: inline-flex;
 min-height: 58px;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-top: 28px;
 padding: 12px 30px;
 border-radius: 999px;
 background: #06c755;
 color: var(--color-white);
 font-size: var(--font-size-18);
 font-weight: var(--font-weight-bold);
 text-decoration: none;
 box-shadow: 0 10px 24px rgb(6 199 85 / 22%);
 transition: filter .25s ease, transform .25s ease;
}

.contact-line-card__button:hover {
 filter: brightness(.95);
 transform: translateY(-2px);
}

.form-steps {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 8px;
 margin: 0 0 clamp(28px, 3vw, 44px);
 padding: 0;
 list-style: none;
 counter-reset: contact-step;
}

.form-steps li {
 position: relative;
 display: grid;
 min-height: 64px;
 place-items: center;
 padding: 10px;
 border: 1px solid var(--contact-border);
 border-radius: 14px;
 background: var(--color-white);
 color: #766c66;
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 text-align: center;
 counter-increment: contact-step;
}

.form-steps li::before {
 content: counter(contact-step);
 display: inline-grid;
 width: 24px;
 height: 24px;
 place-items: center;
 margin-bottom: 3px;
 border-radius: 50%;
 background: #eee5df;
 color: #625953;
 font-size: var(--font-size-12);
}

.form-steps li.is-current,
.form-steps li.is-complete {
 border-color: var(--color-accent-pink-border);
 background: var(--color-accent-pink-surface);
 color: var(--color-accent-pink-dark);
}

.form-steps li.is-current::before,
.form-steps li.is-complete::before {
 background: var(--color-accent-pink);
 color: var(--color-white);
}

.form-intro,
.form-confirm__lead,
.form-complete {
 margin: 0 0 28px;
 padding: 20px clamp(18px, 3vw, 32px);
 border-radius: 16px;
 background: var(--contact-surface);
 line-height: 1.9;
}

.form-list {
 display: grid;
 grid-template-columns: minmax(190px, 30%) minmax(0, 1fr);
 margin: 0;
 border: 1px solid var(--contact-border);
 border-bottom: 0;
 border-radius: 18px 18px 0 0;
 overflow: hidden;
}

.form-list dt,
.form-list dd {
 box-sizing: border-box;
 margin: 0;
 padding: 18px;
 border-bottom: 1px solid var(--contact-border);
}

.form-list dt {
 background: var(--contact-surface);
 font-weight: var(--font-weight-bold);
 line-height: 1.7;
}

.form-list dd {
 min-width: 0;
 background: var(--color-white);
}

.form-row {
 display: block;
}

/* Contact Form 7の自動挿入p要素を、姓名2列のレイアウトコンテナにする。 */
.form-row > p {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 margin: 0;
}

.form-postcode {
 display: block;
}

.form-postcode > p {
 display: grid;
 grid-template-columns: minmax(160px, 240px) auto;
 align-items: center;
 gap: 10px;
 margin: 0;
}

.myousenzi-contact .wpcf7-form-control-wrap {
 display: block;
}

.myousenzi-contact :is(input[type='text'], input[type='email'], input[type='tel'], select, textarea) {
 box-sizing: border-box;
 width: 100%;
 min-height: 50px;
 padding: 11px 13px;
 border: 1px solid #cbbbaf;
 border-radius: 9px;
 background: var(--color-white);
 color: var(--color-text);
 font: inherit;
 line-height: 1.5;
}

.myousenzi-contact textarea {
 min-height: 170px;
 resize: vertical;
}

.myousenzi-contact :is(input, select, textarea, button):focus-visible {
 outline: 3px solid var(--color-focus);
 outline-offset: 2px;
}

.myousenzi-contact .wpcf7-list-item {
 display: block;
 margin: 0 0 8px;
}

.myousenzi-contact .wpcf7-list-item label {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 line-height: 1.7;
}

.myousenzi-contact input[type='checkbox'] {
 flex: 0 0 auto;
 width: 20px;
 height: 20px;
 margin-top: .25em;
 accent-color: var(--color-accent-pink);
}

.must,
.any {
 display: inline-block;
 margin-right: 8px;
 padding: 2px 8px;
 border-radius: 999px;
 color: var(--color-white);
 font-size: var(--font-size-12);
 line-height: 1.5;
}

.must { background: var(--color-accent-pink); }
.any { background: #968b84; }

.form-help,
.form_remarks,
.form-address-status {
 margin: 8px 0 0;
 color: #655d58;
 font-size: var(--font-size-14);
 line-height: 1.7;
}

.form_remarks a {
 color: var(--color-accent-pink-dark);
 text-underline-offset: .25em;
}

.form-buttons {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 2rem;
 margin-top: 32px;
}

/* 自動挿入p要素を基準に、操作ボタン全体を正確に中央配置する。 */
.form-buttons > p {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 2rem;
 width: 100%;
 margin: 0;
}

.form-buttons br {
 display: none;
}

.form-btn,
.myousenzi-contact .wpcf7-submit,
.myousenzi-contact .wpcf7-previous {
 box-sizing: border-box;
 display: inline-flex;
 min-width: 210px;
 min-height: 54px;
 align-items: center;
 justify-content: center;
 padding: 12px 28px;
 border: 1px solid transparent;
 border-radius: 999px;
 background: linear-gradient(135deg, var(--color-accent-pink), var(--color-accent-pink-dark));
 color: var(--color-white);
 font: inherit;
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
 cursor: pointer;
 transition: filter .25s ease, transform .25s ease;
}

.form-btn:hover,
.myousenzi-contact .wpcf7-submit:hover,
.myousenzi-contact .wpcf7-previous:hover {
 filter: brightness(1.06);
 transform: translateY(-2px);
}

.form-btn--reset,
.form-btn--back,
.myousenzi-contact .wpcf7-previous {
 border-color: var(--contact-border);
 background: var(--color-white);
 color: var(--color-text);
}

.form-address-search {
 min-height: 46px;
 padding: 8px 16px;
 border: 1px solid var(--color-accent-pink-border);
 border-radius: 999px;
 background: var(--color-accent-pink-surface);
 color: var(--color-accent-pink-dark);
 font: inherit;
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 cursor: pointer;
 transition: background-color .25s ease, color .25s ease;
}

.form-address-search:hover {
 background: var(--color-accent-pink);
 color: var(--color-white);
}

.form-address-search:disabled,
.myousenzi-contact .wpcf7-submit:disabled {
 cursor: wait;
 opacity: .65;
 transform: none;
}

.form-address-input {
 margin-top: 12px;
}

.form-address-input > p {
 margin: 0;
}

.form-confirm-list dt,
.form-confirm-list dd {
 padding-block: 14px;
}

.form-confirm-list dd {
 white-space: normal;
 overflow-wrap: anywhere;
}

.form-confirm-list dd[data-multiline='true'] {
 white-space: pre-line;
}

.form-confirm-list :is(dt, dd) > p {
 margin: 0;
}

.form-complete {
 padding-block: clamp(32px, 5vw, 56px);
 text-align: center;
}

.form-complete h2 {
 margin: 0 0 18px;
 color: var(--color-brand-gold);
 font-size: var(--font-size-30);
}

/* 送信完了文と「トップページへ戻る」ボタンの間隔。 */
.myousenzi-contact .form-complete > p:last-child {
 margin-top: 2em;
 margin-bottom: 0;
}

.myousenzi-contact .form-complete > p:last-child .form-btn {
 text-decoration: none;
}

.myousenzi-contact .wpcf7-not-valid-tip {
 margin-top: 6px;
 color: #a82242;
 font-size: var(--font-size-14);
}

.myousenzi-contact .wpcf7-response-output {
 margin: 22px 0 0;
 padding: 14px 18px;
 border-radius: 10px;
 line-height: 1.7;
}

.myousenzi-contact .wpcf7-spinner {
 position: absolute;
 inset-inline-end: 0;
 align-self: center;
 margin: 0;
}

/* 本文のクリーム色を残しながらフッター画像へ自然につなぐ。 */
.myousenzi-contact .site-footer {
 margin-top: -1px;
}

.myousenzi-contact .site-footer::before {
 content: '';
 position: absolute;
 z-index: 0;
 inset: 0 0 auto;
 height: clamp(100px, 11vw, 150px);
 background: linear-gradient(
  to bottom,
  var(--color-surface-cream) 0%,
  rgb(252 238 229 / 82%) 28%,
  transparent 100%
 );
 -webkit-mask-image: none;
 mask-image: none;
 pointer-events: none;
}

@media (max-width: 767px) {
 .contact-channels__nav {
  gap: 8px;
 }

 .contact-channels__nav label {
  min-height: 70px;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 14px;
  font-size: var(--font-size-14);
 }

 .contact-line-card {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
 }

 .contact-line-card__icon {
  width: min(180px, 60vw);
  margin-inline: auto;
 }

 .contact-line-card__button {
  width: 100%;
 }

 .form-steps li {
  min-height: 56px;
  padding: 8px 4px;
  font-size: var(--font-size-12);
 }

 .form-list {
  display: block;
 }

 .form-list dt,
 .form-list dd {
  padding: 13px;
 }

 .form-list dt {
  border-bottom: 0;
 }

 .form-row > p {
  grid-template-columns: minmax(0, 1fr);
 }

 .form-buttons,
 .form-buttons > p {
  flex-direction: column;
  gap: 2rem;
 }

 .form-address-search,
 .form-btn,
 .myousenzi-contact .wpcf7-submit,
 .myousenzi-contact .wpcf7-previous {
  width: 100%;
 }
}

@media (prefers-reduced-motion: reduce) {
 .contact-channels__nav label,
 .contact-line-card__button,
 .form-btn,
 .form-address-search,
 .myousenzi-contact .wpcf7-submit,
 .myousenzi-contact .wpcf7-previous {
  transition: none;
 }
}