@charset "UTF-8";

header {
    margin: 0 auto;
    max-width: 936px;
}
header h1 img {
    width: 300px;
}
h2 {
	font-weight: normal;
    font-size: 28px;
}
footer {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    letter-spacing: initial;
}

.bx_form {background: #fff;width: 90%;max-width: 1000px;margin: 0 auto;border-radius: 20px;padding: 2rem;text-align: left;}
.bx_form dd.w50per label {width: 50%;}
.bx_form dl {display: flex;}
.bx_form dt {min-width: 170px;width: 22%;}
.bx_form dd {width: 78%;}
input[type=text], input[type=number] , input[type=date] {
    margin: 7px 0;
    padding: 5px;
    max-width: 240px;
    width: 100%;
    font-size: 15px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
}
input[type=email] {
    margin: 7px 0;
    padding: 5px;
    width: 100%;
    font-size: 15px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
}
select {
    padding: 5px 25px 5px 10px;
    min-width: 260px;
    width: 100%;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}
.select {position: relative;}
label.select::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 6px 0 6px;
    border-color: #999 transparent transparent transparent;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
textarea {
    padding: 10px;
    width: 100%;
    height: 150px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.bx_form .dl {padding: 15px;border-bottom: 1px solid #dddddd;}
.bx_form .req {position: relative;}
.bx_form .req:after{content: '※';color: #ff0000;font-size: 12px;position: relative;top: -5px;}
.att {font-size: 12px; color: #ff0000;line-height: 1.2;}
.small {font-size: 90%;letter-spacing: initial;}
.block {display: block;}

.error {
    color: #ff0000;
}

/*ボタン
-------------------------------------*/
.btn_blk {
    margin-top: 30px;
    text-align: center;
}
a.btn01, button {
    color: #fff;
    background: #243464;
    padding: 1.5rem 1rem 1.5rem 2rem;
    width: 88%;
    max-width: 300px;
    position: relative;
    text-align: center;
    display: inline-block;
    margin: 0 auto 2rem;
}
.back button {
    background: #999;
}
a.btn01:before, button:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px;
    border-right: solid 2px;
    position: absolute;
    top: calc(50% - 6px);
    transform: rotate(45deg);
    margin-left: -20px;
}

a.btn01:hover, a.btn01:active, button:hover, button:active {
    color: #fff;
    background: #edaa38;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;

}
a.btn01:hover:before, a.btn01:active:before {
    margin-left: -13px;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

@media screen and (max-width: 768px) {
    .pc {display: none !important;}
    .header_tel {display: none;}
    .mainimg {padding-top: 70px;}
    /* #reservation {padding-top: 100px;} */
    #reservation .bx_form {padding: 0;font-size: 80%;}
    header h1 {
        padding: 0 15px;
    }
    header img {width: auto;}
    .flex2 li, .flex4 li {width: 46%;margin-right: 2%;margin-bottom: 1rem;font-size: 14px;}
    .flex2 li:nth-child(2n), .flex4 li:nth-child(2n) {margin-right: 0;}
    #case .flex2 li {width: 100%;margin-bottom: 4rem;font-size: 14px;text-align: left;}
    .bx_consultation {padding: 3rem 1.5rem;font-size: 12px;}
   .bx_33th {padding: 1rem 1.5rem; margin: 1rem auto 2rem;}
    .bx_white {padding: 1rem;}
    .flex2_2 img {width: 30%;margin-left: 0;}
    .tel:before {top: 15px;font-size: 16px;margin-left: -290px;position: relative;}
    .tel {width: auto;font-size: 26px;letter-spacing: initial;padding-left: 25px;}
    .tel span {font-size: 11px;}
    .mb3 {margin-bottom: 2rem;}
    .mb2 {margin-bottom: 1rem;}
    .mb1 {margin-bottom: 10px;}
    h2 {font-size: 22px;}
    #reason h2 {background: url(../img/txt_reason.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #plan h2 {background: url(../img/txt_plan.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #lineup h2 {background: url(../img/txt_lineup.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #case h2 {background: url(../img/txt_case.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #staff h2 {background: url(../img/txt_staff.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #company h2 {background: url(../img/txt_company.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #contact h2 {background: url(../img/txt_contact.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    #visit h2 {background: url(../img/txt_visit.svg) center center no-repeat;padding-bottom: 4rem;background-size: auto 20px;}
    .container {padding: 2rem 1rem;}
    #plan p.mb3 {font-size: 14px;text-align: left;}
    #company img {width: 50%;}
    #company .flex2 li {width: 100%;margin-right: 0; font-size: 12px;margin-bottom: 10px;}
    #contact .inner {margin: 0 auto -2rem;}
    a.btn01 { margin: 0 auto 2rem;font-size: 14px;}
    #staff .flex2 li {margin-bottom: 1rem;}

    .bx_form dl {flex-wrap: wrap;}
    .bx_form dt, .bx_form dd, input[type=text], input[type=number] , input[type=date]  {width: 100%;max-width: 100%;}
    .bx_form dd.w80per input[type=text]  {max-width: 80%;}
    .bx_form dd.w80per label {display: block;}

    #footer_fixed {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        line-height: 1;
        background-color: #EEA93C;
    }
    #footer_fixed a {
        font-family: arial;
        font-weight: bold;
        font-size: 32px;
        color: #fff;
    }
    #footer_fixed span {
        font-size: 20px;
    }


    .bx_form {background: #fff;width: 100%;max-width: 1000px;margin: 0 auto;border-radius: 20px;padding: 1rem;text-align: left;}
  }

  .end_message {
    padding: 100px 0;
    text-align: center;
  }

.mt5 {
    margin-top: 5px !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt40 {
    margin-top: 40px !important;
}
.mt50 {
    margin-top: 50px !important;
}
.mt80 {
    margin-top: 80px !important;
}
.mt100 {
    margin-top: 100px !important;
}
.mt120 {
    margin-top: 120px !important;
}

img {
    width: 100%;
    vertical-align: bottom;
}

.wrapper {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
}
.inner {
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
}
@media screen and (max-width: 768px) {
    .wrapper {
        max-width: 100%;
    }
    .inner {
        padding: 0 20px;
        max-width: 100%;
        box-sizing: border-box;
    }
}