@charset "utf-8";
/* CSS Document */


/*-----------------------------------------

Last update:    2024-04-14

---------------------------------------*/


/*=============================
common style
=============================*/
#ttl_main h1{
    margin-bottom: 0em;
}
#form_area input[type="submit"],
#form_area input[type="button"]{
    -webkit-appearance: none;
    border-radius: 10px;
    border:2px solid #4cc4c5;
    background: #fff;
}


/*=============================
form_area
table
=============================*/
#form_area table{
    width:100%;
    border:2px solid #58270e;
    margin-bottom: 3em;
}
#form_area table tr{
}

#form_area table th{
    border:1px solid #58270e;
    background: #fde5cb;
    width:16em;
    vertical-align:top;
    box-sizing:border-box;
    padding:0.7em 2em 0.85em 2em;
}
#form_area table td{
    border:1px solid #58270e;
    background: #fff;
    box-sizing:border-box;
    vertical-align:top;
    word-break: break-all;
    padding:0.7em 2em 0.85em 2em;
}
#form_area table span{
    display: inline-block;
}

@media screen and (max-width:768px){
    #form_area table th{
        width:14em;
        padding:0.7em 1em 0.85em 1em;
    }
    #form_area table td{
        padding:1em 1em 1em;
    }
}


@media screen and (max-width:600px){
    #form_area table{
        width:100%;
        border:1px solid #58270e;
    }
    #form_area table th{
        display:block;
        width:100%;
        padding:0.75em 1em;
    }
    #form_area table td{
        display:block;
        width:100%;
        padding:0.75em 1em;
    }
}




/*=============================
パーツ
=============================*/
#mainarea .att01{
    background:#fc7965;
    color:#fff;
    font-size:85%;
    font-weight:normal;
    padding:0 0.5em;
    margin-left:1em;
}
#mainarea .att02{
    font-size:85%;
}
#mainarea .space01{
    margin:0 0.5em;
}

#form_area input,
#form_area select,
#form_area textarea{
    font-family: 'Noto Sans JP';
    font-size: 16px;
    border:1px solid #ccc;
    background: #fff;
    padding:0.5em 1em;
    margin:0.25em 0;
}

#form_area .textbox01{
    width:100%;
    box-sizing:border-box;
}

#form_area .textbox02{
    width:3em;
}
#form_area .textbox03{
    width:10em;
}

#form_area input:hover,
#form_area select:hover,
#form_area textarea:hover{
    border:1px solid #7bcde1;
    box-shadow:0 0 2px #7bcde1;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
}

@media screen and (max-width:480px){
    /*#form_area .textbox03{
        width:100%;
        box-sizing:border-box;
    }*/
}



/*=============================
checkbox
=============================*/
#form_area input[type="checkbox"]{
   opacity: 0;
}
.check_icon {
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    padding: 0 0 0 0.75em;
    vertical-align: middle;
    cursor: pointer;
}
.check_icon:hover:after {
    border-color: #7bcde1;
}
.check_icon:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: -1em;
    display: block;
    margin-top: -0.5em;
    width: 1em;
    height: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    content: '';
    background: #fff;
}
.check_icon:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: -0.75em;
    display: block;
    margin-top: -0.35em;
    width: 0.25em;
    height: 0.5em;
    border-right: 3px solid #7bcde1;
    border-bottom: 3px solid #7bcde1;
    content: '';
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}
input[type=checkbox]:checked + .check_icon:before {
    opacity: 1;
}


/*=============================
radio btn
=============================*/
#form_area input[type="radio"]{
   opacity: 0;
}
.radio_icon {
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    padding: 0 0 0 0.75em;
    vertical-align: top;
    line-height: 1.4;
    cursor: pointer;
    margin: 0.5em 0;
    max-width: calc( 100% - 1.75em );
}

.radio_icon:hover:after {
    border-color: #7bcde1;
}
.radio_icon:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 0.75em;
    left: -1em;
    display: block;
    margin-top: -0.5em;
    width: 1em;
    height: 1em;
    border: 1px solid #ddd;
    border-radius: 20px;
    content: '';
    background: #fff;
}
.radio_icon:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 0.75em;
    left: -0.75em;
    display: block;
    margin-top:-0.25em ;
    width: 0.5em;
    height: 0.5em;
    border:1px solid #7bcde1;
    border-radius: 20px;
    background:#7bcde1;
    content: '';
    opacity: 0;
    z-index: 1;
}
input[type=radio]:checked + .radio_icon:before {
    opacity: 1;
}



/*=============================
btn_area
=============================*/
.err_mes{
    color:#ee2929 !important;
    margin-bottom:1em;
}

#form_area .btn_form{
    width: 30%;
    display:inline-block;
    background:#fff;
    border: 2px solid #4cc4c5;
    color: #58270e;
    font-size:inherit;
    cursor:pointer;
    border-radius:10px;
    padding:0.5em 0.5em;
    margin: 0 5%;
    font-family: 'Noto Sans JP';
}
#form_area .btn_form:hover{
    background:#4cc4c5;
    color: #fff;
    box-shadow:none;
    border:2px solid #4cc4c5;
}
#form_area .btn_form:last-of-type{
    background:#4cc4c5;
    color:#fff;
    margin:0 1em;
}
#form_area .btn_form:last-of-type:hover{
    background:#fff;
    color: #58270e;
}
#form_area .btn_form a[href^="tel:"] {
    color: #58270e;
}
#form_area .btn_form:hover a[href^="tel:"] {
    color: #58270e;
}


/*=============================
msg_area
=============================*/
#msg_area{
    text-align:center;
}

@media screen and (max-width:480px){
    #msg_area{
        text-align:left;
    }
    #msg_area p br{
        display:none;
    }
}