@charset "utf-8";

html {font-size: 62.5%;}
body{font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Meiryo","メイリオ"; color: #717171;}
ul li,ol li {list-style: none;list-style-image: none;}
h1,h2,h3,h4,h5,dl,ol,ul,dd,p {padding: 0; margin: 0; font-size: 1.3rem;}

/*タイトル
**********************/
.ttl-a {color: #144182; font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #144182; padding-bottom: 10px;}

.ttl-b {font-weight: bold; font-size: 3.0rem; margin-bottom: 3%;}

/*ボタン
**********************/
.btn-bll {background-color: #1977D1; color: #fff; position: relative; border: none; box-shadow: 0 -3px 0 0 #125394 inset; }
.btn-bll:hover, .btn-bll:focus {background-color: #186FC5; color: #fff; }
.btn-bll:active {background-color: #1977D1; color: #fff; box-shadow: none; top: 3px;}

.btn-red {background-color: #f54337; color: #fff; position: relative; border: none; box-shadow: 0 -3px 0 0 #CA1A0B inset; }
.btn-red:hover, .btn-red:focus {background-color: #EE1E0D; color: #fff; }
.btn-red:active {background-color: #f54337; color: #fff; box-shadow: none; top: 3px;}

.btn-grn {background-color: #0098A6; text-align: center; color: #fff;}
.btn-nml {background-color: #90A4AE; text-align: center; color: #fff;}
.btn-dff {background-color: #A2A2A2; text-align: center; color: #fff;}

.btn-bll:hover,
.btn-grn:hover {color: #fff; text-decoration: none;}

.btn--lg {padding: 15px 0; text-align: center; font-size: 1.7rem; display: block; font-weight: bold; margin: 0 auto; width: 60%;}

.btn-next {width: 60%; margin-bottom: 2%;}
.btn-next + .btn--lg.btn-back {width: 50%;}

.btn-back {background: #A4A4A6; border: none; color: #fff; box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset; position: relative;}
.btn-back:hover, .btn-back:focus {background: #939395; color: #fff;}
.btn-back:active {background: #A4A4A6;  box-shadow: none; top: 1px;}

.rtnBtn{margin-top: 2%;}

.btn-fbb {background-color: #212E9E; color: #fff; position: relative; border: none; box-shadow: 0 -3px 0 0 #182278 inset; }
.btn-fbb:hover, .btn-fbb:focus {background-color: #2432B0; color: #fff; }
.btn-fbb:active {background-color: #212E9E; color: #fff; box-shadow: none; top: 3px;}

/* Bootstrapカスタマイズ*/
.btn-group > .btn-default:active,
.btn-group > .btn-default.active {
background-color: #8080C0;
border-color: #adadad;
color: #fff;
}

/*ワイド
**********************/
.form-control {padding-left: 5px;}
.form-inline .form-control.wid-4, .form-control.wid-4{width: 4em;}
.form-inline .form-control.wid-30, .form-control.wid-30{width: 30em;}


/*Bootstrap上書き
**********************/
.btn-group > .btn, .btn-group-vertical > .btn {background-color: #F3F3F1;}
.btn-group > .btn-mail-yes:active, .btn-group > .btn-mail-yes.active {background-color: #219EB8;border-color: #adadad;color: #fff;}
.btn-group > .btn-mail-no:active, .btn-group > .btn-mail-no.active {background-color: #FF0000;border-color: #adadad;color: #fff;}

.submit,
#ReserveReservationForm, #CmnMemberReservationForm {display: inline-block;}

.delete-flash{font-size: 20px; font-weight: bold; color: #f00; margin-bottom: 5px;}
.delete-error{font-size: 20px; font-weight: bold; color: #f00; margin-bottom: 5px;}
.save-flash{font-size: 20px; font-weight: bold; color: #f00; margin-bottom: 5px;}

/*エラーメッセージ
**********************/
.error-msg {color: #f4511e;}


.mb-m {margin-bottom: 30px;}
.red {color:#FF3333;}
.cxl-str {margin: 0 0 10px 0;color:#144182;font-size:1.5rem;font-weight:bold;}

/* ローディング
**********************/
.is-hide{
 display:none; 
}
.submit-loading{
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:10000;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.5);
}
.submit-loader {
    width: 5em;
    height: 5em;
    border-top: 1em solid rgba(255, 255, 255, 0.2);
    border-right: 1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1em solid rgba(255, 255, 255, 0.2);
    border-left: 1em solid rgba(255, 255, 255, 1);
    animation: loaderAnime 1s infinite linear;
    border-radius: 50%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 11;
}
.search-loader {
    width: 2em;
    height: 2em;
    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
    border-left: 0.5em solid rgba(255, 255, 255, 1);
    animation: loaderAnime 1s infinite linear;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    top: 0.8em;
    right: 0.8em;
    bottom: 0.8em;
    margin: auto;
    z-index: 11;
}
@keyframes loaderAnime {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loadingAnime {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        display: none;
    }
}