@charset "UTF-8";

.common-section[data-section="contact"] .common-section__inner{
  padding-block: 10.8rem;
  padding-inline: 3.2rem;
  position: relative;
  z-index: 2;
}

.common-section[data-section="contact"] .common-section__heading{
  margin-bottom: 1.8rem;
  display: grid;
  justify-content: center;
  gap: 1.2rem;
}

.common-section[data-section="contact"] .common-section__heading--en{
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.55rem;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-accent);
}

.common-section[data-section="contact"] .common-section__heading--en::before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  align-self: center;
  background-color: var(--color-accent);
}

.common-section[data-section="contact"] .common-section__heading--ja{
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-main);
}

.common-section[data-section="contact"] .common-section__lead {
  margin-top: 1.8rem;
  font-size: 1.4rem;
  letter-spacing: 0.02rem;
  line-height: 2;
  text-align: center;
}

.common-section[data-section="contact"] .common-section__content {
  margin-top: 5.6rem;
}

.common-section[data-section="contact"] .contact-form__wrapper{
  padding: 3.7rem 3.2rem;
  border: 1px solid #E6E7EA;
  background-color: #f9f9fa;
}

.common-section[data-section="contact"] :where(form > p:nth-of-type(n+2)){
  margin-top: 3.6rem;
}

.common-section[data-section="contact"] :where(label){
  display: grid;
  gap: 0.3rem;
}

.common-section[data-section="contact"] .label-text{
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3rem;
  line-height: normal;
  text-transform: uppercase;
}

.common-section[data-section="contact"] :where(input[type="text"], input[type="email"], input[type="tel"], textarea){
  padding: 1rem 2rem;
  width: 100%;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.028rem;
  line-height: 2;
  border: 1px solid #E6E7EA;
  background-color: var(--color-white);
}

.common-section[data-section="contact"] :where(input::placeholder){
  color: rgb(0 26 67 / 0.5);
}

.common-section[data-section="contact"] :where(textarea){
  height: 17rem;
}

.common-section[data-section="contact"] .agreement-box{
  margin-top: 3.4rem;
}

.common-section[data-section="contact"] .agreement-box .label-text{
  letter-spacing: 0.26rem;
}

.common-section[data-section="contact"] .agreement-box__text{
  padding: 2.7rem 2.4rem;
  margin-top: 0.2rem;
  height: 17.6rem;
  overflow: auto;
  background-color: var(--color-white);
  border: 1px solid #E6E7EA;
}

.common-section[data-section="contact"] .agreement-box__text :where(p){
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02rem;
  line-height: 1.5;
}

.common-section[data-section="contact"] .agreement-box__text :where(p:first-of-type){
  font-weight: var(--fw-bold);
  margin-bottom: 1.18rem;
}

.common-section[data-section="contact"] [data-name="checkbox-agreement"] :where(label){
  margin-top: 4.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}

.common-section[data-section="contact"] [data-name="checkbox-agreement"] :where(input[type="checkbox"]){
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--color-white);
  border: 1px solid #767676;
  border-radius: 0.2rem;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--transition-default), border-color var(--transition-default);
}

.common-section[data-section="contact"] [data-name="checkbox-agreement"] :where(input[type="checkbox"]:checked){
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2210%22%20viewBox%3D%220%200%2013%2010%22%20fill%3D%22none%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.7149%200.288767C12.8975%200.473903%2013%200.724865%2013%200.986525C13%201.24819%2012.8975%201.49915%2012.7149%201.68428L4.79055%209.71114C4.69907%209.80371%204.59032%209.87693%204.47063%209.92651C4.35094%209.9761%204.22271%2010.0011%204.0934%209.99996C3.9641%209.99886%203.8363%209.97171%203.71745%209.92009C3.59861%209.86847%203.49109%209.79341%203.40116%209.69929L0.277939%206.42904C0.188114%206.33602%200.117325%206.22594%200.0696424%206.10511C0.0219597%205.98429%20-0.00167659%205.85511%209.2444e-05%205.725C0.00186148%205.5949%200.0290008%205.46643%200.0799504%205.34698C0.1309%205.22753%200.204655%205.11946%200.296975%205.02898C0.389295%204.93851%200.49836%204.8674%200.617899%204.81976C0.737439%204.77212%200.865095%204.74889%200.99353%204.75139C1.12196%204.75389%201.24864%204.78208%201.36629%204.83434C1.48393%204.8866%201.59021%204.9619%201.67903%205.05591L4.1134%207.6047L11.3372%200.288767C11.52%200.10386%2011.7678%200%2012.0261%200C12.2844%200%2012.5321%200.10386%2012.7149%200.288767Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 1.1rem;
  background-position: center;
}

.common-section[data-section="contact"] [data-name="checkbox-agreement"] :where(span){
  margin: 0;
  display: block;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.028rem;
  line-height: 1.5;
}

.common-section[data-section="contact"] p:has(>.c-button){
  margin-top: 2.5rem;
}

.common-section[data-section="contact"] .c-button{
  padding-block: 1.4rem;
  padding-inline: 6rem;
  margin-inline: auto;
  display: block;
  width: 21rem;
  cursor: pointer;
  letter-spacing: 0.2rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2219%22%20viewBox%3D%220%200%2016%2019%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M10.7548%2010.1593H2.72266V8.83984H10.7548L7.06033%205.1454L8.00043%204.22179L13.2782%209.49957L8.00043%2014.7773L7.06033%2013.8537L10.7548%2010.1593Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 1.6rem;
  background-position: center right 5.8rem;
  text-align: left;
  text-transform: uppercase;
}

.common-section[data-section="contact"] .wpcf7-spinner{
  display: none;
}

@keyframes fadeOut{
  0%{
    opacity: 1;
    visibility: visible;
  }

  80%{
    opacity: 1;
    visibility: visible;
  }

  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.common-section[data-section="contact"] .wpcf7-form.sent::before{
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: rgb(0 0 0 / 0.5);
  animation: fadeOut 3s ease-in-out forwards;
}

.common-section[data-section="contact"] .wpcf7-form.sent .wpcf7-response-output{
  margin: 0;
  padding: 2rem;
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 80%;
  max-width: 50rem;
  height: fit-content;
  background-color: var(--color-white);
  border: none;
  box-shadow: 0 0 2rem rgb(0 0 0 / 0.5);
  animation: fadeOut 3s ease-in-out forwards;
}

[data-section="contact"] label:has(.wpcf7-validates-as-required) .label-text{
  display: flex;
  gap: .5ch;
}
[data-section="contact"] label:has(.wpcf7-validates-as-required) .label-text::after{
  content: '*';
  color: var(--color-accent);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output{
  margin: 2em auto 0;
  grid-column: 1 / 3;
  text-align: center;
  border: none;
  color: var(--color-accent);
}

@media (min-width: 768px){
  .common-section[data-section="contact"] .common-section__inner{
    margin-inline: auto;
    padding-inline: 0;
    padding-block: 12rem;
    width: min(1110px, 111rem);
  }

  .common-section[data-section="contact"] .common-section__heading{
    margin-bottom: 1.8rem;
    justify-content: center;
    gap: 1.4rem;
  }

  .common-section[data-section="contact"] .common-section__heading--en {
    margin-inline: auto;
    letter-spacing: 0.35rem;
    translate: 0;
    width: fit-content;
  }

  .common-section[data-section="contact"] .common-section__heading--ja{
    font-size: 4rem;
    letter-spacing: 0;
    line-height: 1.15;
  }

  .common-section[data-section="contact"] .common-section__content {
    margin-top: 5.6rem;
  }

  .common-section[data-section="contact"] .contact-form__wrapper{
    padding: 6rem 5.6rem 5.6rem;
    margin-inline: auto;
    width: min(93rem, 930px);
  }

  .common-section[data-section="contact"] .wpcf7-form{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3.2rem;
  }

  .common-section[data-section="contact"] :where(form > p:nth-of-type(n+2)){
    margin-top: 0;
  }

  .common-section[data-section="contact"] .label-text{
    font-size: 1.1rem;
    letter-spacing: 0.35rem;
  }

  .common-section[data-section="contact"] :where(form > p:has(textarea)){
    grid-column: 1 / 3;
  }

  .common-section[data-section="contact"] :where(form > p:has([data-name="checkbox-agreement"])){
    grid-column: 1 / 3;
  }

  .common-section[data-section="contact"] :where(textarea){
    height: 16rem;
  }

  .common-section[data-section="contact"] .agreement-box{
    margin-top: 0;
    grid-column: 1 / 3;
  }

  .common-section[data-section="contact"] [data-name="checkbox-agreement"] :where(label){
    margin-top: 0.5rem;
  }

  .common-section[data-section="contact"] p:has(>.c-button){
    margin-top: -1.5rem;
    grid-column: 1 / 3;
  }

  .common-section[data-section="contact"] .c-button{
    width: 22.5rem;
    letter-spacing: 0.5rem;
  }

  .wpcf7-form.invalid .wpcf7-response-output,
  .wpcf7-form.unaccepted .wpcf7-response-output{
    margin: auto;
  }
}

.contact-form__inquiry-options input[type="radio"] {
  margin: 0;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  appearance: none;
  border: 1px solid #808080;
  border-radius: 50%;
  background-color: var(--color-white);
  cursor: pointer;
}

.contact-form__inquiry-options input[type="radio"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  box-shadow: inset 0 0 0 0.5rem var(--color-white);
}

.contact-form__inquiry-options input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.contact-form__inquiry {
  display: grid;
  gap: 1rem;
}

.contact-form__wrapper label:has(.contact-form__inquiry-options) {
  gap: 1rem;
}

.contact-form__wrapper label:has(.contact-form__inquiry-options) > .label-text::after {
  content: " *";
  color: var(--color-accent);
}

.contact-form__wrapper label:has(.contact-form__inquiry-options) > .wpcf7-form-control-wrap {
  display: block;
}

@media (min-width: 768px) {
  .contact-form__inquiry {
    grid-column: 1 / 3;
  }

  .contact-form__wrapper :where(form > p:has(.contact-form__inquiry-options)),
  .contact-form__wrapper :where(form > label:has(.contact-form__inquiry-options)) {
    grid-column: 1 / 3;
  }
}

.contact-form__inquiry-options {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  max-width: 80rem;
}

.contact-form__inquiry-options .wpcf7-list-item {
  margin: 0;
  width: 20rem;
}

.contact-form__inquiry-options label {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  cursor: pointer;
}
.common-section[data-section="contact"] .contact-form__inquiry-options label {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  cursor: pointer;
}
.contact-form__inquiry-options .wpcf7-list-item-label {
  font-size: 1.6rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-main);
}

@media (max-width: 767px) {
  .contact-form__inquiry {
    margin-top: 3.2rem;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

.privacy-message{
  margin: auto;
  grid-column: 1 / 3;
  text-align: center;
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02rem;
  line-height: 1.7;
}
.privacy-message a{
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02rem;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .privacy-message{
    text-align: left;
  }
}