/* =========================================================
content01
========================================================= */

.content01_contact {
    max-width: 880px;
    margin: 0 auto;
}

.c-title.contact {
    text-align: center;
}

.content01_contact p{
    max-width:fit-content;
    margin: 0 auto;
    padding:0 5%
}

.content01_contact p a{
    color: #007ec6;
}

/* =========================================================
contact
========================================================= */

#contact .contact_form {
    max-width: 880px;
    margin: 64px auto 80px;
    padding: 0 5%;
}

.contact_item {
    display: flex;
    margin-bottom: 40px;
}

.contact_item_tx {
    display: flex;
    justify-content: space-between;
    width: 30%;
    align-items: center;
    font-weight: 700;
}

.contact_item_tx.last {
    align-items: baseline;
    padding-top: 5px;
}

.contact_tx_box {
    width: 70%;
    margin-left: 10px;
}

.contact_select_box {
    margin-left: 10px;
    position:relative;
}

.contact_select_box:after{
    content: "";
    position: absolute;
    top:40%;
    right: 8px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    transform: rotate(135deg);
}

input::placeholder {
    color: #dddddd;;
}

textarea::placeholder {
    color: #dddddd;;
}

.redbox {
    padding: 3px 5px;
    background-color: #d80202;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    border-radius: 2px;
}

.tx_box_inner {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Noto Sans JP';
    font-size: 16px;
    font-weight: 500;
    width: 97%;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%) inset;
}

.select_box_inner {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Noto Sans JP';
    font-size: 16px;
    font-weight: 500;
    padding: 8px 24px 8px 8px;
    background-color: #fff;
    color: #000000;
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%) inset;
}

.txarea_inner {
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Noto Sans JP';
    font-size: 16px;
    font-weight: 500;
    width: 97%;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%) inset;
}

.contact_bottom {
    text-align: center;
    padding-top: 40px;
}

.contact_bottom p {
    font-weight: 500;
}

/*
.contact_bottom p a {
    border-bottom: 1px solid #111;
    padding-bottom: 7px;
}
*/

#contact form input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: 'Noto Sans JP';
    display: inline-block;
    transition: 0.1s;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background-color: #1e2a61;
    width: 260px;
    padding: 18px 0;
    margin: 0 auto;
    /*border-radius: 5px;
    box-shadow: 0 5px 0 #05537a;*/
    text-align: center;
    border: none;
    cursor: pointer;
    position: relative;
}

#contact .submit_btn {
    position: relative;
    width: 260px;
    margin: 0 auto;
}

#contact .submit_btn::after {
    content: "";
    position: absolute;
    bottom: 26px;
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

@media screen and (min-width:769px){
    #contact form input[type="submit"]:hover {
        opacity:0.7;
        transition: all 0.4s ease-in-out;
    }
}

#contact .form_btn {
    margin: 80px 0 0;
}

.scroll_box {
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%) inset;
    overflow: auto;
    width: 550px;
    height: 200px;
    margin: 30px auto 30px;
    text-align: left;
    padding: 3%;
}

input[type="text"]{
    padding:8px;
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%) inset;
}

input::placeholder{
    color:#ddd;
}

input.zipcode{
    width:100px;
}

/*
input.address{
    width:70%;
}
*/

@media screen and (max-width:768px) {
    #contact .contact_form {
        padding: 0 5%;
        margin: 40px auto 50px;
        font-size: 14px;
    }

    .contact_item {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .contact_item_tx {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .redbox {
        margin-left: 16px;
    }

    .contact_tx_box {
        width: 100%;
        margin-left: 0;
    }

    .tx_box_inner, .select_box_inner, .txarea_inner {
        font-size: 16px;
    }
    
    .contact_select_box {
        margin-left: 0;
    }

    .contact_bottom {
        padding-top: 30px;
    }

    .contact_bottom p  {
        line-height: 1.5;
    }

    #contact .form_btn {
        margin-top: 40px;
    }

    .scroll_box {
        width: 93%;
        margin: 20px auto 20px;
    }
}

/* =========================================================
confirm
========================================================= */
.contact_form ul{
    margin-bottom: 20px;
}
.contact_form li{
    color:#d80202;
}
.contact_form li:before{
    content:'※';
}
.confirm_item{
    display: flex;
    padding-bottom: 20px;
    flex-wrap: wrap;
}
.confirm_label{
    width:30%;
    font-weight: 700;
    color:#1e2a61;
}

.confirm_data{
    width:70%;
}
.confirm_form{
    display: flex;
    justify-content: space-evenly;
    max-width: 720px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.confirm_form form{
    margin-top: 40px;
}

@media screen and (max-width:768px) {
    .confirm_item{
        padding:20px 0;
        border-bottom:2px solid #ebedf5;
    }
    .confirm_label{
        width:100%;
        text-align: left;
    }
    .confirm_data{
        width:100%;
    }
    .confirm_form form{
        margin-top: 20px;
    }
}