/* Default */
.hero {display:flex; width:100%; height:240px; justify-content:center; align-items:center; color:#ffffff; text-align:center; font-weight:bold; font-size:4rem; background:#00457f;}

@media screen and (max-width:1023px) {
  .hero {height:120px; font-size:22px; letter-spacing:1px;}
}

::placeholder {color:#bebebe;}
::-ms-input-placeholder {color:#bebebe;}
:-ms-input-placeholder {color:#bebebe;}


.sec {width:100%; max-width:826px; margin:40px auto 130px; font-size:1.6rem; line-height:2;}


#contact {}

#contact .contact_read {margin:0; text-align:center; font-size:1.6rem;}
#contact .contact_note {text-align:center; font-size:1.6rem;}

#contact .contact_flow {display:flex; width:100%; justify-content:space-between; margin:0 auto 60px;}
#contact .contact_flowItem {display:flex; justify-content:center; align-items:center; width:50%; flex:1 1 50%; padding:30px 0; border-bottom:solid 10px #dcdcdc; color:#808080; text-align:center; font-size:1.8rem; line-height:1; font-weight:bold;}
#contact .contact_flowItem.current {border-color:#00457f; color:#00457f;}

#contact .contact_sttl {margin:0 0 30px; text-align:center; font-size:1.8rem; font-weight:bold;}

#contact .contact_items {}
#contact .contact_item {position:relative; font-size:1.8rem; margin:0 0 5rem;}
#contact .contact_item input[type="text"],
#contact .contact_item input[type="email"] {width:100%; min-width:0; height:5.8rem; padding:5px 15px; border:solid 1px #00457f; border-radius:5px; font-weight:bold;}
#contact .contact_item input[type="radio"] {}
#contact .contact_item select {width:98%; cursor:pointer; font-weight:bold;}
#contact .contact_item select::-ms-expand {display:none;}
#contact .contact_item textarea {width:100%; padding:5px 15px; border:solid 1px #00457f; border-radius:5px;}
#contact .contact_item textarea {width:100%; padding:5px 15px; border:solid 1px #00457f; border-radius:5px;}
#contact .contact_item textarea {width:100%; padding:5px 15px; border:solid 1px #00457f; border-radius:5px;}
#contact .contact_item.contact_medical textarea {height:12rem;}
#contact .contact_item.contact_content textarea {height:30rem;}

#contact .contact_cap {margin:0 0 5px; font-size:1.8rem; font-weight:bold;}
#contact .contact_cap_sub {width:4rem; flex:0 0 4rem; margin:0 10px 0 0; font-size:1.8rem; font-weight:bold; text-align:right;}
#contact .contact_required {display:inline-block; margin:0 0 0 10px; padding:7px 10px 6px; font-size:1.4rem; font-weight:bold; line-height:1; color:#ffffff; background:#e00000;}
#contact.contactConfirm p {margin:0 0 10px; font-weight:bold;}
#contact.contactConfirm .contact_cap {color:#808080;}
#contact.contactConfirm .contact_cap_sub {display:none;}
#contact.contactConfirm .contact_required {display:none;}
#contact.contactComplete .contact_read {margin:0 0 2rem; text-align:center; font-size:1.6rem;}

#contact .contact_radioBox {display:flex; position:relative; flex-wrap:wrap; justify-content:space-between; align-items:stretch;}
#contact .contact_radioBox span.mwform-radio-field {width:49%; flex:0 0 49%; margin:0 0 10px;}
#contact .contact_radioBox label {display:block; width:100%; height:100%;}
#contact .contact_radioBox input {display:none;}
#contact .contact_radioBox span.mwform-radio-field-text {display:flex; position:relative; width:100%; flex:0 0 100%; height:100%; margin:0; padding:18px 0 18px 65px; border:solid 1px #dcdcdc; border-radius:5px; font-weight:bold; font-size:1.8rem; line-height:1.2; transition:all 0.3s;}
#contact .contact_radioBox span.mwform-radio-field-text::before {content:''; display:block; position:absolute; top:50%; left:20px; width:30px; height:30px; border-radius:100%; border:solid 1px #00457f; background:#ffffff; transform:translateY(-50%); transition:background 0.3s;}
#contact .contact_radioBox span.mwform-radio-field-text::after {content:''; display:block; position:absolute; top:50%; left:26px; width:18px; height:18px; border-radius:100%; background:#ffffff; transform:translateY(-50%); transition:background 0.3s;}
.fontL #contact .contact_radioBox span.mwform-radio-field-text::before {top:18px; transform:translateY(0);}
.fontL #contact .contact_radioBox span.mwform-radio-field-text::after {top:24px; transform:translateY(0);}
#contact .contact_radioBox input[type="radio"]:checked + span.mwform-radio-field-text {border:solid 1px #00457f; background:#e1ecf5;}
#contact .contact_radioBox input[type="radio"]:checked + span.mwform-radio-field-text::after {background:#00457f;}
#contact.contactConfirm .contact_radioBox {font-weight:bold;}

#contact .contact_selectBox {position:relative;}
#contact .contact_select {display:flex; position:relative; justify-content:flex-end; align-items:center; position:relative; width:100%; height:5.8rem; border:solid 1px #00457f; border-radius:5px;}
#contact .contact_select::after {content:''; display:block; position:absolute; top:50%; right:20px; width:8px; height:8px; border-top:solid 2px #00457f; border-right:solid 2px #00457f; transform:translateY(-50%) rotate(135deg);}
#contact.contactConfirm .contact_select {justify-content:flex-start; border:#ffffff; font-weight:bold;}
#contact.contactConfirm .contact_select::after {content:none;}

#contact .contact_nameBox {display:flex; position:relative; flex-wrap:wrap; justify-content:space-between;}
#contact .contact_nameBox div {display:flex; justify-content:flex-start; align-items:center; width:49%; flex:0 0 49%; margin:0 0 10px;}
#contact.contactConfirm .contact_nameBox {justify-content:flex-start;}
#contact.contactConfirm .contact_nameBox div {width:auto; flex:0 0 auto; margin:0 40px 0 0; font-weight:bold;}
#contact.contactConfirm .contact_medical {font-weight:bold;}

#contact .contact_item span.error {position:absolute; top:6rem; color:#e00000; font-size:1.4rem; font-weight:bold;}
#contact .contact_item span.error + input,
#contact .contact_item span.error ~ span span.mwform-radio-field-text,
#contact .contact_item span.error ~ .contact_select,
#contact .contact_item span.error + textarea {border-color:#e00000;}

#contact .contact_nameBox span.error {transform:translateX(calc(4rem + 10px));}
#contact .contact_tel span.error,
#contact .contact_email span.error {top:10rem;}
#contact .contact_medical span.error {top:16rem;}
#contact .contact_content span.error {top:34rem;}

#contact .contact_privacy {padding:30px 36px; background:#f5f5f5; font-size:1.6rem; font-weight:bold;}
#contact .contact_privacy a {color:#d17364; text-decoration:underline;}
#contact.contactConfirm .contact_privacy {display:none;}


#contact .contact_btn {display:flex; justify-content:center; align-items:center; margin:60px auto;}
#contact .contact_btnNext {display:flex; width:308px; height:80px; margin:0 8px; border-radius:5px; background:#d17364; justify-content:center; align-items:center; font-size:18px; text-align:center; font-weight:bold; color:#ffffff; transition:all 0.3s;}
#contact .contact_btnBack {display:flex; width:308px; height:80px; margin:0 8px; border-radius:5px; background:#00457f; justify-content:center; align-items:center; font-size:18px; text-align:center; font-weight:bold; color:#ffffff; transition:all 0.3s;}
#contact .contact_btnTop {display:flex; width:308px; height:80px; margin:0 8px; border-radius:5px; background:#00457f; justify-content:center; align-items:center; font-size:18px; font-weight:bold; color:#ffffff; transition:all 0.3s;}


@media screen and (min-width:1024px) {
  #contact .contact_btnConfirm:hover,
  #contact .contact_btnNext:hover,
  #contact .contact_btnBack:hover {opacity:0.5;}
}

@media screen and (max-width:1023px) {
  .sec {width:calc(100% - 36px); margin:20px 18px 130px;}

  #contact .contact_read {text-align:left;}
  #contact .contact_note {text-align:left; font-size:1.4rem;}

  #contact .contact_flow {margin:30px auto 40px; align-items:center;}
  #contact .contact_flowItem {height:70px; padding:10px 0; border-bottom:solid 8px #dcdcdc; line-height:1.4; font-size:16px;}

  #contact .contact_item {font-size:16px; margin:0 0 40px;}
  #contact .contact_item input[type="text"],
  #contact .contact_item input[type="email"] {height:50px; padding:5px 15px; border-radius:3px;}
  #contact .contact_item textarea {padding:5px 15px; border-radius:3px;}

  #contact .contact_cap {margin:0 0 10px; font-size:16px;}
  #contact .contact_cap_sub {line-height:50px; font-size:16px;}
  #contact .contact_required {margin:0 0 0 10px; padding:2px 5px;}
  #contact.contactComplete .contact_item p {margin:0 0 20px; text-align:left;}

  #contact .contact_radioBox {display:block;}
  #contact .contact_radioBox span.mwform-radio-field {display:block; width:100%; margin:0 0 10px;}
  #contact .contact_radioBox label {display:block; width:100%;}
  #contact .contact_radioBox input {display:none;}
  #contact .contact_radioBox span.mwform-radio-field-text {height:50px; margin:0; padding:0 0 0 45px; border-radius:3px; font-size:16px; line-height:50px;}
  #contact .contact_radioBox span.mwform-radio-field-text::before {left:11px; width:25px; height:25px;}
  #contact .contact_radioBox span.mwform-radio-field-text::after {left:16px; width:15px; height:15px;}

  #contact .contact_select {height:50px; border-radius:3px;}

  #contact .contact_nameBox {display:block;}
  #contact .contact_nameBox div {position:relative; width:100%; margin:0 0 10px; align-items:flex-start;}
  #contact.contactConfirm .contact_nameBox {display:flex;}
  #contact.contactConfirm .contact_nameBox div {margin:0 30px 0 0;}

  #contact .contact_item span.error {top:50px;}
  #contact .contact_item span.error + input {margin:0 0 30px;}

  #contact .contact_doctor span.error {top:auto; bottom:-30px;}
  #contact .contact_doctor span.error ~ span:last-of-type {margin:0 0 50px;}
  #contact .contact_medical span.error {top:155px;}
  #contact .contact_medical span.error + textarea {margin:0 0 30px;}
  #contact .contact_tel span.error,
  #contact .contact_email span.error {top:95px;}
  #contact .contact_content span.error {top:315px;}
  #contact .contact_content span.error + textarea {margin:0 0 30px;}

  #contact .contact_privacy {padding:15px 25px;}

  #contact .contact_btn {flex-wrap:wrap; flex-direction:column-reverse; width:calc(100% - 112px); margin:40px auto 50px;}
  #contact .contact_btnNext {width:100%; height:70px; margin:0 auto 10px; border-radius:3px; font-size:16px;}
  #contact .contact_btnBack {width:100%; height:70px; margin:0 auto 10px; border-radius:3px; font-size:16px;}
  #contact .contact_btnTop {position:relative; width:100%; height:70px; margin:0 auto 10px; border-radius:3px; font-size:16px;}
  #contact .contact_btnTop::after {content:''; display:block; position:absolute; top:50%; right:15px; width:10px; height:10px; border-top:solid 2px #ffffff; border-right:solid 2px #ffffff; transform:translateY(-50%) rotate(45deg);}



}