/* ContactInput */

#contact_input, #contact_thanks, #contact_check { position:relative; width:80%; height:auto; min-height:80vh; left:50%; margin-top:110px; padding-top:40px; padding-bottom:80px; transform:translateX(-50%); }
.contact_input_inner, .contact_thanks_inner, .contact_check_inner { position:relative; width:100%; height:auto; }

.contact_thanks_inner p, .contact_check_inner p { margin-bottom:10px; }
.contact_thanks_ttl, .contact_check_ttl { position:relative; text-align:center; width:100%; height:auto; margin-bottom:30px; }
.contact_thanks_ttl h1, .contact_check_ttl h1, .contact_check_ttl h6 { margin-bottom:0; }
.contact_check_ttl h6 { margin-top:5px; }
.thks_note { padding:15px; margin:20px 0 40px 0; border-radius:10px; background-color: #ececec; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.3); }
.thks_note p { font-size:1rem; }

.contact_input_inner form, .contact_check_inner form { position:relative; width:100%; height:auto; padding:30px 0; border-top:1px solid #dedede; }
.contact_check_inner form { margin-top:30px; }
.contact_input_txt { position:relative; width:100%; height:auto; margin-bottom:40px; }
.contact_input_inner p { text-align: justify; text-justify: inter-ideograph; word-break: break-all; margin-bottom:20px; }
.form_txt, .form_txtarea, .form_txt_cfm { position:relative; width:100%; display:flex; flex-wrap:wrap; }
.form_txt { margin-bottom:30px; }
.form_txtarea { margin-bottom:50px; }
.form_txt_cfm { border-bottom:1px solid #dedede; padding-bottom:20px; margin-bottom:20px; }
.form_txt label, .form_txt input, .form_txtarea label, .form_txtarea textarea, .form_txt_cfm label { width:100%; }
.form_txt label, .form_txtarea label, .form_txt_cfm label { font-weight:bold; margin-bottom:6px; display:block; }
.form_txt label, .form_txtarea label { font-size:1.3rem; }
.form_txt_cfm label { font-size:1rem; }
.form_txt input, .form_txtarea textarea { font-size:1.3rem; padding:15px; border-radius:10px; background-color: #fefefe; border:none; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.3); }
.contact_input_inner input:focus, .contact_input_inner textarea:focus { background-color: #edece5; outline:none; }
.form_txt input { height:60px; }
.form_txt_cfm p { margin:0; font-size:1.4rem; font-weight:bold; }

.form_check { position:relative; width:100%;}
.form_check input[type=checkbox] { display:none; }
.form_check label { position:relative; padding:6px 0 6px 40px; width:100%; font-size:1.3rem; height:28px; display:block; cursor:pointer; }
.form_check label::before { content:''; position:absolute; top:0; left:0; width:28px; height:28px; background-color:#fefefe; border-radius:6px; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.2); transition:border-radius .4s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.form_check label::after { content:''; position:absolute; top:0; left:0; width:8px; height:12px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:translate(10px, 6px) rotate(0); opacity:0; transition:all .4s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.form_check input[type=checkbox]:checked + label::before { border-radius: 100%; box-shadow:2px 2px 3px rgba(0,0,0,0.3) ; background-color: #01e0be; }
.form_check input[type=checkbox]:checked + label::after { opacity:1; transform:translate(10px, 6px) rotate(45deg); }

.privacy { position:relative; width:100%; }
.privacy a { color:#0022ff; text-decoration: underline; transition:opacity .3s ease; }
.privacy a:hover { opacity:0.6; }

.btn_area { border-top:1px solid #dedede; margin-top:30px; padding-top:30px; }
.cfm_btn_area { position:relative; width:100%; height:auto; margin-top:40px; }
.cfm_btn_area_inner { display:flex; flex-wrap:wrap; justify-content: center; }
.confirm_btn, .index_btn, .back_btn, .submit_btn { position:relative; width:100%; max-width:280px; height:60px; border:none; border-radius:30px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); transition:box-shadow .3s cubic-bezier(0, 0.55, 0.45, 1); cursor:pointer; overflow: hidden; }
.confirm_btn, .index_btn { left:50%; transform:translateX(-50%); }
.confirm_btn, .submit_btn { background-color: #121212; color:#fff; }
.back_btn { background-color: #dedede; margin-bottom:20px;}
.confirm_btn p, .index_btn p, .back_btn p, .submit_btn p { position:relative; font-weight:bold; text-align:center; display:block; z-index:2; margin:0; }
.btn_arw, .btn_arw_back { position:absolute; top:50%; width:24px; height:24px; transform:translateY(-50%); opacity:0; }
.btn_arw { right:22px; transition:opacity .3s cubic-bezier(0, 0.55, 0.45, 1), right .3s cubic-bezier(0, 0.55, 0.45, 1); }
.btn_arw_back { left:22px; transform:translateY(-50%) rotate(180deg); transition:opacity .3s cubic-bezier(0, 0.55, 0.45, 1), left .3s cubic-bezier(0, 0.55, 0.45, 1); }
.btn_arw svg, .btn_arw_back svg { width:100%; }
.btn_arw svg { fill:#fff; }
.btn_arw_back svg { fill:#000; }

.confirm_btn:hover, .index_btn:hover, .back_btn:hover, .submit_btn:hover { box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); }
.confirm_btn:hover > .btn_arw { right:18px; opacity:1; }
.submit_btn:hover > .btn_arw { right:18px; opacity:1; }
.index_btn:hover  > .btn_arw_back { left:18px; opacity:1; }
.back_btn:hover  > .btn_arw_back { left:18px; opacity:1; }

#night .contact_input_inner form, #night .contact_check_inner form { border-top:1px solid #565656; }
#night .contact_input_inner input, #night .contact_input_inner textarea, #night .form_check label::before { color:#fff; background-color: #444; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.8); }
#night .contact_input_inner input:focus, #night .contact_input_inner textarea:focus { background-color: #666; outline:none; }
#night .form_check input[type=checkbox]:checked + label::before { border-radius: 100%; box-shadow:2px 2px 3px rgba(0,0,0,0.3) ; background-color: #01e0be; }
#night .form_txt_cfm { border-bottom:1px solid #565656; }
#night .thks_note { background-color: #121212; box-shadow:inset 2px 2px 3px #000; }
#night .btn_area { border-top:1px solid #565656; }
#night .confirm_btn, #night .submit_btn { background-color: #dedede; color:#000; box-shadow: 2px 2px 4px rgba(0, 0, 0, 1),inset 2px 2px 4px #fff;  }
#night .index_btn, #night .back_btn { background-color: #434343; color:#fff; }
#night .confirm_btn:hover, #night .submit_btn:hover { box-shadow: 3px 3px 8px rgba(0, 0, 0, 1),inset 2px 2px 4px #fff; }
#night .btn_arw svg { fill:#000; }
#night .btn_arw_back svg { fill:#fff; }
#night .privacy a { color:#dda200; }


@media screen and (min-width:960px) {

    #contact_input, #contact_thanks, #contact_check { width:55%; margin-top:160px; padding-bottom:180px; }
    .thks_note { margin:40px 0 60px 0; }
    .btn_area { margin-top:60px; padding-top:60px; }
    .cfm_btn_area { margin-top:60px; }
    .confirm_btn, .index_btn, .back_btn, .submit_btn { max-width:260px; margin:0 15px; }

}

@media screen and (min-width:1500px) {

    #contact_input, #contact_thanks, #contact_check {  margin-top:12vw; padding-top:2vw; padding-bottom:18vw; }
    .contact_thanks_ttl, .contact_check_ttl { margin-bottom:4vw; }
    .contact_check_ttl h6 { margin-top:0.4vw; }
    .contact_thanks_inner p, .contact_check_inner p { margin-bottom:1vw; }
    .contact_input_inner form, .contact_check_inner form { padding:3vw 0; border-top:0.1vw solid #dedede ; }
    .contact_check_inner form { margin-top:3vw; }

    .form_txt label, .form_txtarea label { font-size:1vw; }
    .form_txt input, .form_txtarea textarea { padding:1vw; border-radius:0.8vw; box-shadow: inset 0.2vw 0.2vw 0.4vw rgb(0 0 0 / 30%); }
    .form_txt input { height:4vw; }
    .form_txt input, .form_txtarea textarea { font-size:1vw; }
    .contact_input_inner p { margin-bottom:1.2vw; }
    .form_check label { font-size:1vw; height:2.2vw; padding:0.4vw 0 0.4vw 3vw; }
    .form_check label::before { width:2.2vw; height:2.2vw; border-radius:0.4vw; box-shadow: inset 0.2vw 0.2vw 0.4vw rgb(0 0 0 / 20%); }
    .form_check label::after { width:0.6vw; height:1vw; top:0.2vw; left:0.2vw; border-right:0.2vw solid #fff; border-bottom:0.2vw solid #fff; }

    .form_txt_cfm { padding-bottom:1vw; margin-bottom:2vw; border-bottom:0.1vw solid #dedede; }
    .form_txt label, .form_txtarea label, .form_txt_cfm label { margin-bottom:0.4vw; }
    .form_txt_cfm label { font-size:0.8vw; }
    .form_txt_cfm p { font-size:1vw; }


    .confirm_btn, .index_btn, .back_btn, .submit_btn { width:16vw; max-width:16vw; height:4vw; border-radius:2vw; margin:0 1vw; }
    .confirm_btn p, .index_btn p, .back_btn p, .submit_btn p { margin:0; }
    .btn_arw, .btn_arw_back { width:1.6vw; height:1.6vw; }
    .btn_arw_back { left:1.2vw; }
    .btn_arw { right:1.2vw; }
    .btn_area { margin-top:4vw; padding-top:4vw; }
    .cfm_btn_area { margin-top:5vw; }

    .back_btn:hover  > .btn_arw_back { left:0.9vw; }
    .confirm_btn:hover > .btn_arw { right:0.9vw; }
    .submit_btn:hover > .btn_arw { right:0.9vw; }
    .index_btn:hover  > .btn_arw_back { right:0.9vw; }

    .thks_note { margin:2.5vw 0 4vw 0; padding:1.5vw; border-radius:1vw; box-shadow: inset 0.2vw 0.2vw 0.4vw rgb(0 0 0 / 30%); }
    #night .thks_note { box-shadow: inset 0.2vw 0.2vw 0.4vw #000; }
    .thks_note p { font-size:0.8vw; }


    #night .contact_input_inner input, #night .contact_input_inner textarea, #night .form_check label::before { box-shadow: inset 0.2vw 0.2vw 0.4vw rgb(0 0 0 / 80%); }
    #night .contact_input_inner form, #night .contact_check_inner form  { border-top:0.1vw solid #565656; }
    #night .form_txt_cfm { border-bottom:0.1vw solid #565656; }





}