/* ==========================================================================
   Contact(お問い合わせ・送信完了)
   フォームは Contact Form 7(項目の原本は pages-html/cf7-contact.txt)
   ========================================================================== */
:root {
  --color-form-border: #a0a0a0;
  --color-placeholder: #ababa9;
}

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */
.c-page-head--contact {
  background-image: url("../img/contact/sp/bg.jpg");
}

@media (min-width: 768px) {
  .c-page-head--contact {
    background-image: url("../img/contact/bg.jpg");
  }
}

/* --------------------------------------------------------------------------
   共通見出し(お電話 / メールでのお問合わせ)(SP〜)
   -------------------------------------------------------------------------- */
.p-contact__heading {
  font-family: var(--font-ttl);
  font-size: 2.4rem;
  font-weight: var(--fw-ttl);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-brown);
}

/* --------------------------------------------------------------------------
   リード文・お電話でのお問合わせ(SP〜)
   -------------------------------------------------------------------------- */
.p-contact-tel {
  position: relative;
  padding: 95px 20px 70px;
}

/* ページタイトルの下端を基準に配置 */
.p-contact-tel__leaf {
  position: absolute;
  top: -47.2px;
  left: 0;
  width: 156px;
  pointer-events: none;
}

.p-contact-tel__inner {
  position: relative;
  z-index: 1;
}

.p-contact-tel .p-contact__heading {
  margin-top: 60px;
  letter-spacing: 0.05em;
}

.p-contact-tel__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 132px;
  margin-top: 15px;
  color: var(--color-white);
  background-color: var(--color-key);
  border-radius: var(--radius-20);
}

.p-contact-tel__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ttl);
  font-size: 3.6rem;
  font-weight: var(--fw-ttl);
  line-height: 1;
  letter-spacing: 0;
}

.p-contact-tel__num img {
  width: 45px;
}

.p-contact-tel__time {
  font-size: 1.3rem;
  line-height: normal;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   メールでのお問合わせ(SP〜)
   -------------------------------------------------------------------------- */
.p-contact-form {
  padding: 30px 20px;
  background-color: var(--color-beige);
}

.p-contact-form__inner {
  padding: 45px 15px 20px;
  background-color: var(--color-cream);
  border-radius: var(--radius-30);
}

.p-contact-form__body {
  margin-top: 40px;
}

.p-contact-form__item + .p-contact-form__item {
  margin-top: 30px;
}

/* 項目名 */
.p-contact-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ttl);
  font-size: 1.8rem;
  font-weight: var(--fw-ttl);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.p-contact-form__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 27px;
  font-size: 1.4rem;
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: var(--radius-50);
}

.p-contact-form__badge--optional {
  background-color: var(--color-key-light);
}

/* 入力欄 */
.p-contact-form__item .wpcf7-form-control-wrap {
  display: block;
  margin-top: 12px;
}

.p-contact-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 15px;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  border-radius: var(--radius-10);
}

.p-contact-form ::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.p-contact-form select {
  height: 54px;
  padding-right: 40px;
  background: var(--color-white) url("../img/contact/ico_select.svg") no-repeat right 10px center / 15px auto;
  cursor: pointer;
  appearance: none;
}

/* 未選択(選択してください)の間はプレースホルダーの色 */
.p-contact-form select:has(option[value=""]:checked) {
  color: var(--color-placeholder);
}

.p-contact-form select option {
  color: var(--color-text);
}

.p-contact-form textarea {
  height: 170px;
  padding-block: 15px;
  resize: vertical;
}

/* スパム対策(Cloudflare Turnstile。CF7のインテグレーションで有効化) */
.p-contact-form__turnstile {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.p-contact-form__turnstile:empty,
.p-contact-form__turnstile:not(:has(.wpcf7-turnstile)) {
  display: none;
}

/* プライバシーポリシーに同意する */
.p-contact-form__acceptance {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}


.p-contact-form__acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.p-contact-form__acceptance label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.p-contact-form__acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  margin: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  cursor: pointer;
  appearance: none;
}

.p-contact-form__acceptance input[type="checkbox"]:checked {
  background: var(--color-key) url("../img/contact/ico_check.svg") no-repeat center / 100%;
}

.p-contact-form__acceptance a {
  text-decoration: underline;
}

/* 送信ボタン */
.p-contact-form__submit {
  position: relative;
  margin-top: 50px;
}

.p-contact-form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 370px;
  height: 75px;
  margin-inline: auto;
  font-family: var(--font-ttl);
  font-size: 2.2rem;
  font-weight: var(--fw-ttl);
  line-height: normal;
  letter-spacing: 0;
  color: var(--color-white);
  background: var(--gradient-cta);
  border: none;
  border-radius: var(--radius-10);
  box-shadow: 2px 3px 2px rgb(0 0 0 / 20%);
  cursor: pointer;
  transition: opacity var(--duration);
}

@media (hover: hover) {
  .p-contact-form input[type="submit"]:hover {
    opacity: 0.7;
  }
}

/* 同意にチェックするまでは押せない(Contact Form 7 標準の動作) */
.p-contact-form input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 送信中のくるくる(ボタンの下に表示) */
.p-contact-form .wpcf7-spinner {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

/* 入力エラー・送信結果のメッセージ */
.p-contact-form .wpcf7-not-valid-tip {
  margin-top: 5px;
  font-size: 1.4rem;
  color: var(--color-accent);
}

.p-contact-form .wpcf7 form .wpcf7-response-output {
  margin: 30px 0 0;
  padding: 15px;
  font-size: 1.5rem;
  border-radius: var(--radius-10);
}

/* 来店に関するご案内 */
.p-contact-form__info {
  margin: 45px 5px 0;
}

/* --------------------------------------------------------------------------
   送信完了(finish)(SP〜)
   -------------------------------------------------------------------------- */
.p-finish {
  position: relative;
  padding: 167px 20px 80px;
}

/* ページタイトルの下端を基準に配置 */
.p-finish__leaf {
  position: absolute;
  top: 25px;
  left: 0;
  width: 156px;
  pointer-events: none;
}

.p-finish__inner {
  position: relative;
  z-index: 1;
}

.p-finish__inner p + p {
  margin-top: calc(var(--lh-body) * 1em);
}

.p-finish__btn {
  width: 222px;
  margin: 50px auto 0;
}

/* --------------------------------------------------------------------------
   PC(768px〜)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .p-contact__heading {
    font-size: 3rem;
  }

  .p-contact-tel {
    padding-top: 60px;
  }

  .p-contact-tel__leaf {
    top: -62.7px;
    width: 291px;
  }

  .p-contact-tel__lead {
    text-align: center;
  }

  .p-contact-tel .p-contact__heading {
    margin-top: 63px;
    letter-spacing: 0;
  }

  /* Figmaに合わせて中身をやや下寄せ */
  .p-contact-tel__btn {
    gap: 13px;
    padding-top: 13px;
    width: 495px;
    height: 155px;
    margin-inline: auto;
  }

  .p-contact-tel__num {
    gap: 12px;
    font-size: 4.4rem;
  }

  .p-contact-tel__num img {
    width: 64px;
  }

  .p-contact-tel__time {
    font-size: 1.6rem;
  }

  .p-contact-form {
    padding-block: 34px;
  }

  .p-contact-form__inner {
    max-width: var(--inner-width);
    margin-inline: auto;
    padding: 60px 20px 55px;
  }

  .p-contact-form__body {
    max-width: 700px;
    margin: 45px auto 0;
  }

  .p-contact-form__label {
    gap: 15px;
    font-size: 2rem;
  }

  .p-contact-form__badge {
    width: 59px;
    height: 29px;
    font-size: 1.6rem;
  }

  .p-contact-form__item .wpcf7-form-control-wrap {
    margin-top: 15px;
  }

  .p-contact-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    height: 70px;
    padding-inline: 17px;
    font-size: 1.8rem;
  }

  .p-contact-form select {
    width: 380px;
    height: 60px;
    padding-right: 40px;
    background-size: 17px auto;
  }

  .p-contact-form textarea {
    height: 235px;
    padding-block: 17px;
  }

  .p-contact-form__turnstile {
    margin-top: 35px;
  }

  .p-contact-form__acceptance {
    margin-top: 35px;
  }

  .p-contact-form__submit {
    margin-top: 35px;
  }

  .p-contact-form input[type="submit"] {
    height: 70px;
    font-size: 2.5rem;
  }

  .p-contact-form__info {
    margin: 65px 0 0;
  }

  .p-finish {
    padding-top: 95px;
    padding-bottom: 95px;
  }

  .p-finish__leaf {
    top: 59px;
    width: 291px;
  }

  .p-finish__inner {
    text-align: center;
  }

  .p-finish__btn {
    margin-top: 55px;
  }
}