.contact-page{}

.contact-page .container-main{
  background-image: url(/assets/images/contact/contact-bg.png);
  background-repeat: no-repeat;
  background-position: calc(50% + 90px) 160px;
  background-size: 180px;
}

@media screen and (min-width: 768px) {
  .contact-page .container-main{
    background-position: calc(50% + 300px) 24px;
    background-size: auto;
  }
}

.block-page-title{
  position: relative;
  padding-block: 86px 48px;
  text-align: center;
  margin-inline: 20px;
}

@media screen and (min-width: 768px) {
  .block-page-title{
    padding-block: 120px 48px;
    margin-inline: auto;
  }
}

.block-page-title h2{
  font-size: 36px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.5;
  padding-block: 24px 48px;
}
.block-page-title h2 span{
  display: inline-block;
}

.block-page-title .subtitle{
  font-size: 20px;
  font-family: var(--font-en);
  color: var(--color-text);
}

.block-page-title p{
  line-height: 1.75;
  font-size: 16px;
  color: var(--color-text);
}

.block-page-title p span{
  display: inline-block;
}

.section-contact-steps{
  max-width: 700px;
  text-align: center;
  margin-inline: auto;
  padding-block: 48px;
  margin-inline: 20px;
}

@media screen and (min-width: 768px) {
  .section-contact-steps{
    margin-inline: auto;
  }
}


.section-contact-steps .block-steps{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
}

.section-contact-steps .block-steps .step-item{
  line-height: 2;
  color: var(--color-disabled)
}
.section-contact-steps .block-steps .step-item.active{
  color: var(--color-primary-600);
}

.section-contact-steps .block-steps .step-mark{
  font-size: 8px;
  display: block;
  text-align: center;
}

/* 入力画面 */
.section-contact-input{
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
  padding-block: 0 96px;
  margin-inline: 20px;
}

@media screen and (min-width: 768px) {
  .section-contact-input{
    margin-inline: auto;
  }
}
.section-contact-input .form-contact{
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.section-contact-input .error{
  color: var(--color-badge-required);
  font-size: 14px;
  font-weight: 500;
}

.section-contact-input .badge-required{
  display: inline-block;
  padding: 0.25em;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background-color: var(--color-badge-required);
  color: var(--color-badge-on-required);
  line-height: 1;
}

.section-contact-input .form-group label{
  display: flex;
  flex-direction: row;
  column-gap: .5em;
  align-items: center;
}

.section-contact-input .form-group{
  display: flex;
  flex-direction: column;
  row-gap: 0.2em;
}

.section-contact-input .form-group.center{
  align-items: center;
  justify-content: center;
}

.section-contact-input input[type="text"],
.section-contact-input input[type="email"],
.section-contact-input input[type="tel"],
.section-contact-input textarea{
  width: 100%;
  padding: 14px 20px;
  font-size: 14px;
  border: 1px solid var(--color-form-border);
  border-radius: 4px;
  box-sizing: border-box;
}

.section-contact-input .form-group:has(.error) input[type="text"],
.section-contact-input .form-group:has(.error) input[type="email"],
.section-contact-input .form-group:has(.error) input[type="tel"],
.section-contact-input .form-group:has(.error) textarea{
  border: 1px solid var(--color-badge-required);
}

.section-contact-input textarea{
  resize: vertical;
  min-height: 200px;
	field-sizing: content;
	max-height: 30lh;
}

.section-contact-input .form-footer{
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  align-items: center;
  padding-block: 32px 0;
}
.section-contact-input .checkbox-privacy-policy{
  color: var(--color-primary-600);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1;
}
.section-contact-input .checkbox-privacy-policy:has(.error){
  color: var(--color-badge-required);
  text-align: center;
}

input[type="checkbox"] { accent-color: var(--color-primary-600); }

.checkbox-privacy-policy input[type="checkbox"]{
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid var(--color-primary-600);
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.checkbox-privacy-policy input[type="checkbox"]:checked {
  background-color: var(--color-primary-600);
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.486 16.73C10.3547 16.7303 10.2247 16.7046 10.1034 16.6545C9.98206 16.6044 9.87182 16.5308 9.779 16.438L5.537 12.195C5.44143 12.1028 5.36517 11.9925 5.31267 11.8706C5.26018 11.7486 5.2325 11.6174 5.23126 11.4846C5.23001 11.3519 5.25522 11.2202 5.30541 11.0972C5.35561 10.9743 5.42978 10.8626 5.52361 10.7686C5.61743 10.6747 5.72903 10.6004 5.85189 10.55C5.97475 10.4996 6.10641 10.4742 6.23919 10.4753C6.37197 10.4763 6.5032 10.5038 6.62525 10.5562C6.74729 10.6085 6.85768 10.6846 6.95 10.78L10.485 14.315L16.85 7.95202C17.0375 7.76438 17.2919 7.65891 17.5571 7.65881C17.8224 7.65872 18.0769 7.76401 18.2645 7.95152C18.4521 8.13902 18.5576 8.39339 18.5577 8.65866C18.5578 8.92393 18.4525 9.17838 18.265 9.36602L11.193 16.438C11.1002 16.5308 10.9899 16.6044 10.8686 16.6545C10.7473 16.7046 10.6173 16.7303 10.486 16.73Z" fill="%23ffffff"/></svg>');
  background-size: 18px auto;
  background-repeat: no-repeat;
  background-position: center;

}

@media (forced-colors: active) {
  input[type="checkbox"] {
      all: revert !important;
  }
}

/* 確認画面 */
.section-contact-confirm{
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
  padding-block: 0 96px;
}
.section-contact-confirm .form-contact{
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}
.section-contact-confirm .form-group{
  margin-inline: 20px;
}

.section-contact-confirm .form-group label{
  font-size: 14px;
  color: var(--color-primary-600);
}
.section-contact-confirm .form-group .form-value{
  border-bottom: 1px solid #C6E2F7;
  font-size: 16px;
  line-height: 1.75;
  padding-block: .2em;
}

.section-contact-confirm .form-footer{
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
  padding-block: 32px 0;
  margin-inline: 10px;
  font-size: 15px;
}
.section-contact-confirm .form-footer > p{
  padding-block: 24px 48px;
}

.section-contact-confirm .form-footer .button-back{
  display: inline-block;
  width: 240px;
  padding: 0.5em 1em;
  font-size: 14px;
  text-align: center;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  border: none;
}

/* 送信完了画面 */
.section-contact-thanks{
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
  padding-block: 0 96px;
  margin-inline: 20px;
}
@media screen and (min-width: 768px) {
  .section-contact-thanks{
    margin-inline: auto;
  }
}
.section-contact-steps p.strong{
  padding-block: 0 40px;
  font-weight: 700;
}
.section-contact-thanks .thanks-message{
  padding-block: 0 48px;
}

.section-contact-thanks .thanks-message p{
  line-height: 1.5;
  padding-block-end: 1em;
}

.section-contact-thanks .thanks-message p.strong{
  font-weight: 700;
}

/* 送信ボタン */
.contact-page .button-next{
  display: inline-block;
  width: 240px;
  margin-inline: auto;
  padding: 14px 1em;
  font-size: 14px;
  text-align: center;
  color: var(--color-primary-600);
  border: 1px solid var(--color-primary-600);
  border-radius: 999px;
  cursor: pointer;
  background-image: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3333 14.1667L15.5 10L11.3333 5.83337M5.5 14.1667L9.66667 10L5.5 5.83337" stroke="%233B7DD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 18px auto;
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (any-hover: hover) {
  .contact-page .button-next:hover{
    background-color: var(--color-primary-600);
    background-image: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3333 14.1667L15.5 10L11.3333 5.83337M5.5 14.1667L9.66667 10L5.5 5.83337" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    color: var(--color-on-primary);
  }
  .section-contact-confirm .form-footer .button-back:hover{
    color: var(--color-primary-600);
  }
}

:where(:focus-visible) {
  outline-offset: 0;
}

/* 個人情報保護方針 */
section.privacy{
  padding-block: 40px 0;
}
section.privacy .scroll {
  border: 1px solid #ccc;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  height: 250px;
  overflow-y: scroll;
  background: #f9f9f9;
}
section.privacy .scroll header h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--color-text);
  font-weight: 500;
}
section.privacy .scroll p {
  margin-bottom: 20px;
  font-size: 14px;
}
section.privacy .scroll dl dt {
  font-size: 15px;
  margin-bottom: 5px;
}
section.privacy .scroll dl dt strong{
  font-weight: 500;
}
section.privacy .scroll dl dd {
  font-size: 14px;
  margin-bottom: 15px;
}