@charset 'utf-8';

/* common
------------------------------------------------ */
#main { padding-top: 0; }

@media screen and (max-width: 768px) {
  .page-hd { background-image: url(../../img/contact/title.jpg); }
  .nav-category { padding: 0 30px; }
  .nav-category-links--item { width: 33.3333%; }
}

@media screen and (min-width: 769px) {
  .page-hd { background-image: url(../../img/contact/title-pc.jpg); }
}

/* contact
------------------------------------------------ */
.contact { position: relative; }
.contact button,
.contact input,
.contact textarea { appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: none; border: none; border-radius: 0; box-shadow: none; font-family: inherit; }
.contact-btns { margin-top: 45px; }
.contact-btns-item { position: relative; }
.contact-btns-item > button,
.contact-btns-item > a,
.contact-btns-item input { display: block; position: relative; padding: 15px 10px; width: 100%; border: 1px solid #b0a69f; text-align: center; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #534741; cursor: pointer; }
.contact-btns-item .i-arrow { position: absolute; top: 50%; right: 12px; margin-top: -3px; }
.contact-btns-item .wpcf7-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

@media screen and (max-width: 768px) {
  .contact-btns-item:not(:first-child) { margin: 20px 23px 0; }
}

@media screen and (min-width: 769px) {
  .contact-btns { display: flex; justify-content: center; margin-top: 68px; }
  .contact-btns-item { width: 360px; }
  .contact-btns-item:not(:first-child) { margin-left: 20px; }
  .contact-btns-item > button,
  .contact-btns-item > a,
  .contact-btns-item input { padding: 20px 10px; font-size: 1.6rem; }
  .contact-btns-item .i-arrow { right: 22px; width: 33px; }
}

/* content
------------------------------------------------ */
.contact-content { position: relative; }

/* form
------------------------------------------------ */
.contact-form { position: relative; margin-top: 35px; }
.contact-form-lead { text-align: center; font-size: 1.2rem; line-height: 2; }
.contact-form-note { margin-top: 20px; text-align: center; font-size: 1.1rem; line-height: 1.2; color: #736357; }
.contact-form .inquiry { color: #de1c24; }
.contact-form-content { margin-top: 26px; }
.contact-form-box:not(:first-child) { margin-top: 25px; }
.contact-form-box--title { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.contact-form-box__content { display: flex; align-items: center; }
.contact-form-input { position: relative; }
.contact-form-input.w-100 { width: 100%; }
.contact-form-input.w-50 { width: 50%; }
.contact-form-input input,
.contact-form-input textarea { display: block; padding: 10px 15px; width: 100%; background-color: #f4f2f0; border: 1px solid #f4f2f0; border-radius: 4px; font-size: 1.1rem; color: #534741; }
.contact-form-input textarea { height: 205px; }
.contact-form-input input:focus,
.contact-form-input textarea:focus { border-color: #8a8075; outline: none; }
.contact-form-input input.error-input,
.contact-form-input textarea.error-input,
.contact-form-input input.wpcf7-not-valid,
.contact-form-input textarea.wpcf7-not-valid { border-color: #de1c24; }
.contact-form-input .error-text { position: absolute; top: 11px; left: 15px; color: #de1c24; }
.contact-form-box--note { padding-left: 10px; width: 50%; font-size: 1.1rem; line-height: 1.2; color: #8a8075; }
.contact-form-agree { margin-top: 35px; }
.contact-form-agree--text { text-align: center; font-size: 1.2rem; line-height: 2; }
.contact-form-agree--check { position: relative; margin-top: 42px; text-align: center; }
.contact-form-agree--check .wpcf7-form-control-wrap { position: revert; }
.contact-form-agree--check label { display: inline-flex; align-items: center; position: relative; vertical-align: top; }
.contact-form-agree--check label input { position: relative; width: 12px; height: 12px; border: 1px solid #534741; }
.contact-form-agree--check label .wpcf7-list-item-label { display: inline-block; text-indent: -9999px; white-space: nowrap; vertical-align: top; overflow: hidden; }
.contact-form-agree--check label input:checked + .wpcf7-list-item-label::before { content: ''; position: absolute; top: 2px; left: 3px; width: 13px; height: 8px; background: url(../../img/icon/check1.svg) no-repeat center center; background-size: 100% 100%; }
.contact-form-agree--check .text { display: inline-block; position: relative; padding-left: 15px; vertical-align: top; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.contact-form-agree--check .text a { text-decoration: underline; }
.device-click .contact-form-agree--check .text a:hover { text-decoration: none; }

.contact-form-content .wpcf7-not-valid-tip { position: relative; margin-top: 10px; color: #de1c24; }
.contact-form-agree--check .wpcf7-not-valid-tip { position: absolute; top: auto; bottom: -20px; left: 0; width: 100%; text-align: center; }
.contact-form-content form .wpcf7-response-output { padding: 16px; text-align: center; font-size: 1.2rem; }

@media screen and (max-width: 768px) {
  .contact-form { padding: 0 30px; }
  .contact-form-box__content { margin-top: 6px; }
}

@media screen and (min-width: 769px) {
  .contact-form { margin-top: 66px; max-width: 852px; }
  .contact-form-lead { font-size: 1.4rem; line-height: 2.14285714286; }
  .contact-form-note { margin-top: 26px; font-size: 1.4rem; }
  .contact-form-content { margin-top: 78px; }
  .contact-form-box { display: flex; }
  .contact-form-box:not(:first-child) { margin-top: 30px; }
  .contact-form-box--title { padding-top: 18px; width: 230px; font-size: 1.6rem; }
  .contact-form-box__content { width: calc(100% - 230px); }
  .contact-form-input input,
  .contact-form-input textarea { padding: 15px 30px; border-radius: 7px; font-size: 1.4rem; }
  .contact-form-input textarea { height: 290px; }
  .contact-form-input .error-text { top: 15px; left: 30px; font-size: 1.4rem; }
  .contact-form-box--note { margin-left: 30px; font-size: 1.4rem; }
  .contact-form-agree { margin-top: 80px; }
  .contact-form-agree--text { font-size: 1.4rem; line-height: 2.14285714286; }
  .contact-form-agree--check { margin-top: 50px; }
  .contact-form-agree--check label input { width: 20px; height: 20px; }
  .contact-form-agree--check label input:checked + .wpcf7-list-item-label::before { left: 3px; width: 21px; height: 13px; }
  .contact-form-agree--check .text { padding-left: 25px; font-size: 1.6rem; }
  
  .contact-form-content .wpcf7-not-valid-tip { margin-top: 15px; font-size: 1.4rem; }
  .contact-form-agree--check .wpcf7-not-valid-tip { top: auto; bottom: -30px; left: 0; }
  .contact-form-content form .wpcf7-response-output { padding: 20px; font-size: 1.4rem; }
}

/* thanks
------------------------------------------------ */
.contact-thanks { position: relative; padding-top: 65px; }
.contact-thanks-title { text-align: center; }
.contact-thanks-title::before { content: ''; display: block; margin: 0 auto 30px; width: 52px; height: 60px; background: url(../../img/contact/thanks.svg) no-repeat center center; background-size: 100% 100%; }
.contact-thanks-title--en { font-family: 'Overpass', sans-serif; font-size: 3.9rem; font-weight: 600; line-height: 1.2; }
.contact-thanks-title--ja { margin-top: 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.contact-thanks-text { margin-top: 36px; text-align: center; font-size: 1.2rem; line-height: 2.16666666667; }

@media screen and (max-width: 768px) {
  .contact-thanks { margin: 0 30px; }
}

@media screen and (min-width: 769px) {
  .contact-thanks { padding-top: 120px; }
  .contact-thanks-title::before { margin-bottom: 40px; width: 68px; height: 80px; }
  .contact-thanks-title--en { font-size: 6rem; }
  .contact-thanks-title--ja { font-size: 2rem; }
  .contact-thanks-text { margin-top: 65px; font-size: 1.4rem; line-height: 2.14285714286; }
}