/* お問い合わせページ（コンタクトフォーム7の出力に合わせたスタイル） */
:root {
  --ink: #1d2b3a;
  --ink-sub: #5b6875;
  --line: #cfd6dd;
  --field: #f6f7f9;
  --error: #c8175f;
}

.contact-page { padding: 16rem 0 12rem; }
.contact-page__head { text-align: center; }
.contact-page__head .jp-title { margin-top: .4rem; }
.contact-page__head .body-text { margin-top: 2.4rem; }

/* グラデーションの枠 */
.form-frame { width: 104rem; margin: 6.4rem auto 0; padding: .6rem; border-radius: 4.6rem; background: var(--grad); }
.form-card { padding: 8rem; border-radius: 4rem; background: var(--white); color: var(--ink); }

/* 行のレイアウト */
.form-row { display: grid; grid-template-columns: 26rem 1fr; gap: 3.2rem; align-items: center; }
.form-row + .form-row { margin-top: 3.2rem; }
.form-row--top { align-items: start; }
.form-row--top .form-label { padding-top: 1.6rem; }
.form-label { display: flex; align-items: center; justify-content: space-between; font-size: 1.7rem; line-height: 1.5; }
.form-badge { flex: none; padding: .2rem 1rem; border-radius: .6rem; background: #e9ecf0; color: var(--ink-sub); font-size: 1.2rem; line-height: 1.6; }
.form-badge--req { background: var(--pink); color: var(--white); }

/* 入力欄 */
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
  width: 100%;
  padding: 1.5rem 2rem;
  border: .2rem solid var(--line);
  border-radius: 1.2rem;
  background: var(--field);
  color: var(--ink);
  font: 500 1.7rem/1.6 "Noto Sans JP", sans-serif;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wpcf7 textarea { display: block; min-height: 22rem; resize: vertical; }
.wpcf7 ::placeholder { color: #7b8794; opacity: 1; }
.wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 .4rem rgba(34, 128, 196, .18);
}

/* ラジオボタン */
.wpcf7-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.wpcf7-radio .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-radio label { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.6rem; border: .2rem solid var(--line); border-radius: 1.2rem; background: var(--field); font-size: 1.6rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
.wpcf7-radio label:has(:checked) { border-color: var(--blue); background: #e9f3fa; }
.wpcf7-radio label:has(:focus-visible) { box-shadow: 0 0 0 .4rem rgba(34, 128, 196, .18); }
.wpcf7 input[type="radio"], .wpcf7 input[type="checkbox"] { flex: none; width: 2rem; height: 2rem; margin: 0; accent-color: var(--blue); }

/* 同意チェック */
.form-accept { margin-top: 4.8rem; text-align: center; }
.wpcf7-acceptance label { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.7rem; font-weight: 500; cursor: pointer; }
.wpcf7-acceptance a { color: var(--blue); text-decoration: underline; }

/* 送信ボタン */
.form-submit { position: relative; width: 32rem; margin: 3.2rem auto 0; }
.form-submit input { display: block; width: 100%; height: 7.2rem; border: 0; border-radius: 4rem; background: var(--grad); color: var(--white); font: 700 2rem "Noto Sans JP", sans-serif; letter-spacing: .1rem; cursor: pointer; transition: filter .2s, transform .2s; }
.form-submit input:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-.2rem); }
.form-submit input:focus-visible { outline: .3rem solid var(--ink); outline-offset: .3rem; }
.form-submit input:disabled { background: #b4bcc5; cursor: not-allowed; }
.form-submit::after { content: ""; position: absolute; right: 2.1rem; top: 2.1rem; width: 3rem; height: 3rem; background: url(../assets/svg/arrow-white.svg) center / contain no-repeat; pointer-events: none; }
.form-submit .wpcf7-spinner { position: absolute; left: 100%; top: 50%; margin: -1.2rem 0 0 1.2rem; }

/* エラーと送信結果 */
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: .8rem; color: var(--error); font-size: 1.4rem; font-weight: 700; line-height: 1.5; }
.wpcf7 input.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: var(--error); background: #fdf1f6; }
.wpcf7 form.wpcf7-form .wpcf7-response-output { margin: 3.2rem 0 0; padding: 1.6rem 2rem; border: .2rem solid var(--error); border-radius: 1.2rem; background: #fdf1f6; color: var(--error); font-size: 1.6rem; line-height: 1.6; text-align: center; }
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output { border-color: var(--blue); background: #e9f3fa; color: #1b6aa5; }

/* スマホ */
@media (max-width: 767px) {
  .contact-page { padding: 11rem 1.6rem 6rem; }
  .contact-page__head .body-text br { display: none; }
  .contact-page__head .body-text { margin-top: 1.6rem; }
  .form-frame { width: auto; margin-top: 3.2rem; padding: .4rem; border-radius: 2.8rem; }
  .form-card { padding: 3.2rem 2rem; border-radius: 2.4rem; }
  .form-row { grid-template-columns: 1fr; gap: 1rem; }
  .form-row + .form-row { margin-top: 2.4rem; }
  .form-row--top .form-label { padding-top: 0; }
  .form-label { justify-content: flex-start; gap: 1rem; font-size: 1.6rem; }
  .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { padding: 1.3rem 1.6rem; font-size: 1.6rem; }
  .wpcf7-radio { grid-template-columns: 1fr; gap: 1rem; }
  .form-accept { margin-top: 3.2rem; }
  .wpcf7-acceptance label { font-size: 1.5rem; }
  .form-submit { width: 100%; margin-top: 2.4rem; }
  .form-submit input { height: 6.4rem; font-size: 1.8rem; }
  .form-submit::after { top: 1.7rem; right: 1.7rem; }
  .form-submit .wpcf7-spinner { left: 50%; top: 100%; margin: .8rem 0 0 -1.2rem; }
}

/* 固定ページ・404など本文のページ */
.entry-title { text-align: center; color: var(--white); font-size: 3.6rem; line-height: 1.5; }
.entry-body { font-size: 1.7rem; font-weight: 500; line-height: 2; }
.entry-body > * + * { margin-top: 1.6rem; }
.entry-body h2 { margin-top: 4rem; font-size: 2.4rem; line-height: 1.5; }
.entry-body h3 { margin-top: 3.2rem; font-size: 2rem; line-height: 1.5; }
.entry-body a { color: var(--blue); text-decoration: underline; }
.entry-body ul, .entry-body ol { padding-left: 2.4rem; }
.entry-body img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .entry-title { font-size: 2.4rem; }
  .entry-body { font-size: 1.5rem; }
}