.contact-section{
  padding:0;
  border-top:1px solid #2448a5;
  background:#f4f7f9;
  color:#173463;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
.contact-section-fv{border-top:0;}
.form-container{
  width:min(calc(100% - 32px),476px);
  margin:0 auto;
  padding:34px 0 72px;
}
.main-form-heading{
  margin:0 0 28px;
  text-align:center;
}
.main-form-heading h2{
  margin:0;
  color:#fff;
  font-size:31px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.01em;
}
.main-form-heading h2 span{
  display:table;
  margin:0 auto 6px;
  padding:1px 10px 0;
  border-radius:4px;
  background:#2448a5;
}
.main-form-heading h2 span:nth-child(2){
  font-size:1.2em;
}
.main-form-heading p{
  margin:30px 0 0;
  color:#173463;
  font-size:15px;
  line-height:2.05;
  font-weight:600;
  letter-spacing:.015em;
}
.main-multi-step-form{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#173463;
}
.main-step-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 24px;
}
.main-step-count{
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
  color:#173463;
}
.main-step-progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:150px;
  height:7px;
  border:1px solid #7990be;
}
.main-step-progress span{
  display:block;
  border-right:1px solid #7990be;
  background:#f7f9fc;
}
.main-step-progress span:last-child{border-right:0;}
.main-step-progress span.is-complete,
.main-step-progress span.is-active{background:#2448a5;}
.main-multi-step-form .field-grid{
  display:block;
}
.main-multi-step-form .field{
  margin-bottom:28px;
}
.main-multi-step-form .field label,
.main-multi-step-form .field legend{
  display:block;
  margin:0 0 10px;
  color:#173463;
  font-size:18px;
  line-height:1.45;
  font-weight:700;
}
.main-multi-step-form .required{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  margin-left:7px;
  padding:1px 7px 2px;
  background:#ff6b57;
  color:#fff;
  font-family:"Noto Sans JP",sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:500;
  vertical-align:2px;
}
.main-multi-step-form .optional{
  display:inline-block;
  margin-left:7px;
  color:#7d8793;
  font-size:12px;
}
.main-multi-step-form .field input:not([type=radio]):not([type=checkbox]),
.main-multi-step-form .field select,
.main-multi-step-form .field textarea{
  width:100%;
  min-height:66px;
  border:1px solid #d5d8dc;
  border-radius:10px;
  background:#fff;
  padding:13px 18px;
  color:#173463;
  font-family:"Noto Sans JP",sans-serif;
  font-size:18px;
  box-shadow:none;
}
.main-multi-step-form .field input::placeholder,
.main-multi-step-form .field textarea::placeholder{
  color:#53677d;
  opacity:1;
}
.main-multi-step-form .field textarea{
  min-height:132px;
  line-height:1.7;
}
.main-multi-step-form .choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}
.main-multi-step-form .field[data-field="contact_method"] .choice-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.main-multi-step-form .field[data-field="contact_time"] .choice-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.main-multi-step-form .choice{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  padding:9px 10px;
  border:1px solid #d5d8dc;
  border-radius:10px;
  background:#fff;
  color:#173463;
  font-family:"Noto Sans JP",sans-serif;
  font-size:17px;
  line-height:1.25;
  font-weight:400;
  text-align:center;
  cursor:pointer;
}
.main-multi-step-form .field label.choice{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}
.main-multi-step-form .choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.main-multi-step-form .choice:has(input:checked){
  border-color:#2448a5;
  background:#2448a5;
  color:#fff;
  box-shadow:0 2px 4px rgba(28,61,129,.2);
}
.main-multi-step-form .choice:has(input:focus-visible){
  outline:2px solid #173463;
  outline-offset:2px;
}
.main-multi-step-form .error-message{
  margin:5px 0 0;
  min-height:0;
  color:#c23e3e;
  font-family:"Noto Sans JP",sans-serif;
  font-size:12px;
}
.main-multi-step-form .form-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:34px;
}
.main-multi-step-form .btn-primary{
  position:relative;
  width:calc(100% - 32px);
  min-height:68px;
  margin:0 auto;
  padding:0 46px 0 20px;
  border:0;
  border-radius:10px;
  background:#f56a20;
  color:#fff;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:20px;
  font-weight:700;
  box-shadow:0 5px 8px rgba(0,0,0,.2);
}
.main-multi-step-form .btn-primary::after{
  content:"›";
  position:absolute;
  right:18px;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fff;
  color:#d6a33d;
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:400;
  transform:translateY(-50%);
}
.main-multi-step-form .btn-secondary{
  width:calc(100% - 32px);
  min-height:50px;
  margin:0 auto;
  border:1px solid #c6ced7;
  border-radius:8px;
  background:#fff;
  color:#173463;
  font-size:14px;
}
.main-multi-step-form .privacy-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:15px;
  border:1px solid #d5d8dc;
  border-radius:10px;
  background:#fff;
  color:#173463;
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  line-height:1.7;
}
.main-multi-step-form .privacy-row input{
  flex:0 0 auto;
  margin-top:4px;
}
.main-multi-step-form .form-global-error{
  margin-top:14px;
}
.main-multi-step-form .recaptcha-note{
  margin-top:14px;
}
@media(max-width:374px){
  .form-container{width:calc(100% - 24px);}
  .main-form-heading h2{font-size:27px;}
  .main-form-heading p{font-size:14px;}
  .main-step-count{font-size:14px;}
  .main-step-progress{width:130px;}
  .main-multi-step-form .field label{font-size:16px;}
  .main-multi-step-form .field input:not([type=radio]):not([type=checkbox]),
  .main-multi-step-form .field textarea{font-size:16px;}
  .main-multi-step-form .choice{font-size:15px;}
  .main-multi-step-form .btn-primary{font-size:18px;}
}
@media(min-width:768px){
  .form-container{
    width:min(100% - 64px,760px);
    padding:58px 0 88px;
  }
  .main-form-heading h2{font-size:42px;}
  .main-form-heading p{font-size:17px;}
  .main-step-status{margin-bottom:30px;}
  .main-multi-step-form .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px;
  }
  .main-multi-step-form .field.full{grid-column:1/-1;}
  .main-multi-step-form .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .main-multi-step-form .btn-primary,
  .main-multi-step-form .btn-secondary{max-width:520px;}
}

/* PC contact form reference layout; the SP rules above are left intact. */
@media (min-width:768px) {
  .contact-section {
    padding:104px 0 40px;
    background:#f7faff;
  }
  .contact-section .form-container {
    position:relative;
    width:min(calc(100% - 64px),840px);
    margin:0 auto;
    padding:75px 0 42px;
    border-radius:9px;
    background:#fff;
  }
  .contact-section .main-form-heading {
    margin:0 auto 34px;
    text-align:center;
  }
  .contact-section .main-form-heading h2 {
    position:absolute;
    top:-60px;
    left:50%;
    width:max-content;
    max-width:calc(100% - 24px);
    margin:0;
    transform:translateX(-50%);
    font-size:clamp(26px,2.9vw,34px);
    line-height:1.24;
    white-space:nowrap;
  }
  .contact-section .main-form-heading h2 span {
    margin:0 auto 4px;
    padding:2px 15px 5px;
  }
  .contact-section .main-form-heading h2 span:nth-child(2) {
    font-size:1.28em;
  }
  .contact-section .main-form-heading p {
    margin:0;
    font-size:clamp(14px,1.3vw,17px);
    line-height:1.7;
  }
  .contact-section .main-form-heading p br:first-of-type {
    display:none;
  }
  .contact-section .main-multi-step-form {
    width:min(calc(100% - 48px),400px);
    margin:0 auto;
  }
  .contact-section .main-step-status {
    margin-bottom:17px;
  }
  .contact-section .main-multi-step-form .field-grid {
    display:block;
  }
  .contact-section .main-multi-step-form .field {
    margin-bottom:24px;
  }
  .contact-section .main-multi-step-form .field label,
  .contact-section .main-multi-step-form .field legend {
    margin-bottom:9px;
    font-size:15px;
    line-height:1.5;
  }
  .contact-section .main-multi-step-form .field input:not([type=radio]):not([type=checkbox]),
  .contact-section .main-multi-step-form .field select,
  .contact-section .main-multi-step-form .field textarea {
    min-height:54px;
    padding:10px 16px;
    font-size:16px;
  }
  .contact-section .main-multi-step-form .choice-grid {
    gap:10px 11px;
  }
  .contact-section .main-multi-step-form .choice {
    min-height:53px;
    padding:8px 7px;
    font-size:15px;
  }
  .contact-section .main-multi-step-form .form-actions {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:28px;
  }
  .contact-section .main-multi-step-form .btn-primary {
    flex:1 1 0;
    width:auto;
    max-width:322px;
    min-width:0;
    min-height:55px;
    margin:0;
    font-size:18px;
  }
  .contact-section .main-multi-step-form .btn-secondary {
    flex:0 1 110px;
    width:auto;
    max-width:110px;
    min-width:0;
    min-height:55px;
    margin:0;
  }
}
@media (min-width:768px) and (max-width:899px) {
  .contact-section .form-container {
    width:calc(100% - 48px);
  }
  .contact-section .main-form-heading h2 {
    font-size:clamp(24px,3.6vw,30px);
  }
}


/* 4STEP confirmation. FAQ下のフォームUIを両フォームの基準にする。 */
.main-multi-step-form .form-confirmation-heading{
  margin:0 0 22px;
  text-align:left;
}
.main-multi-step-form .form-confirmation-heading h3{
  margin:0 0 8px;
  color:#173463;
  font-size:22px;
  line-height:1.45;
  font-weight:700;
}
.main-multi-step-form .form-confirmation-heading p{
  margin:0;
  color:#53677d;
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  line-height:1.7;
}
.main-multi-step-form .form-confirmation{
  display:grid;
  gap:0;
  border:1px solid #d5d8dc;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.main-multi-step-form .confirmation-row{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  border-bottom:1px solid #e3e6ea;
}
.main-multi-step-form .confirmation-row:last-child{border-bottom:0;}
.main-multi-step-form .confirmation-label,
.main-multi-step-form .confirmation-value{
  padding:13px 14px;
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  line-height:1.6;
}
.main-multi-step-form .confirmation-label{
  background:#f5f7fb;
  color:#173463;
  font-weight:700;
}
.main-multi-step-form .confirmation-value{
  color:#2f3742;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:430px){
  .main-multi-step-form .confirmation-row{grid-template-columns:1fr;}
  .main-multi-step-form .confirmation-label{padding-bottom:6px;}
  .main-multi-step-form .confirmation-value{padding-top:6px;}
}