@charset "UTF-8";
/** General page styling **/


*{
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


body,button{

    font-family:'Noto Serif JP', serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    font-weight: 500;

    background-color: rgba(255,255,255,1);
}

.content-box,ul.tabs,.list-box,table.responsive.timeline{

    /* pc画面の最大幅　外すと100％ */
    max-width: 1080px;

}



/*add20170605*/
.load_mask {

    position:fixed;
    top:0;
    width:100%;
    height:100vh;
    left:0;
    z-index:0;

    background-size: 128px;
    -moz-background-size:128px;
    -webkit-background-size:128px;
    -o-background-size:128px;
    -ms-background-size:128px;
    background-position: center center;
    background-repeat: no-repeat;
    /*background-color: rgba(252,252,252,0.95);*/
    background-image:url('../img/Preloader_1.gif');

}


figure{padding:0; margin:0;}



header {
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    z-index: +3;
    /*    padding-bottom:10px; */
}

.header-inner {

    position: relative;
    width: 100%;
    height: 60px;


    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: stretch;
    align-items: stretch;


}


div#logo {

    padding: 0px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
}

div#logo img{
    max-height: 50px;
}
div#logo span{
    font-size:0.6em;
    vertical-align: top;

}

div#logo a{

}

.tabs-box{

    width: 100%;
    margin-bottom: 20px;
    /*  z-index: +2;
      position: fixed;
    border-bottom: 10px solid;*/
}

ul.tabs,ul.tabs.reservation,ul.tabs.school{
    width: 100%;


    margin:0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: flex-start; /* Safari */
    justify-content:         flex-start;
    -webkit-align-items: center; /* Safari */
    align-items:         center;

    padding-top: 20px;

}

ul.tabs li,ul.tabs.reservation li{

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width:24%;
    height: 60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-justify-content: center; /* Safari */
    justify-content:         center;
    -webkit-align-items: center; /* Safari */
    align-items:         center;
    cursor: pointer;

    margin-right:10px;
}

ul.tabs.school li{
    padding: 0 20px;
    height: 60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-justify-content: center; /* Safari */
    justify-content:         center;
    -webkit-align-items: center; /* Safari */
    align-items:         center;
    cursor: pointer;

    margin-right:10px;

}

ul.tabs li i,ul.tabs.reservation li i{padding-right:10px;}

/*ul.tabs li:first-child,ul.tabs.reservation li:first-child{ margin-left: 60px; }*/

ul.tabs li.active, ul.tabs li:hover,ul.tabs.reservation li.active, ul.tabs.reservation li:hover{border-left:1px solid;}

ul.tabs li,ul.tabs.reservation li{

    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;

}

ul.tabs li:hover,ul.tabs.reservation li:hover{

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

}

ul.tabs li a, ul.tabs.reservation li a,ul.tabs.school li{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width:100%;
    height: 60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-justify-content: center; /* Safari */
    justify-content:         center;
    -webkit-align-items: center; /* Safari */
    align-items:         center;
    cursor: pointer;

    -webkit-flex-direction: row; /* Safari */
    flex-direction:         row;
}

@media screen and (max-width: 640px) {

    ul.tabs.reservation li{margin:0; width:33%;}

    ul.tabs li{margin:0; width:48%;}

    ul.tabs li span,ul.tabs.reservation li span,ul.tabs.school li span{display:block; font-size: 0.7em;}

    ul.tabs li:first-child,ul.tabs.reservation li:first-child,ul.tabs.school li:first-child{ margin-left:0px;}
    ul.tabs li,ul.tabs.reservation li,ul.tabs.school li,ul.tabs.payment li{ margin-right:0px;}

    ul.tabs li i,ul.tabs.reservation li i,ul.tabs.school li i{
        padding-right: 0px;
        display: block;
        text-align: center;
    }

    ul.tabs.school li i{display:none;}

    ul.tabs li, ul.tabs li a,  ul.tabs.reservation li a{
        -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
        width:100%;
        height: 60px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;

        -webkit-justify-content: center; /* Safari */
        justify-content:         center;
        -webkit-align-items: center; /* Safari */
        align-items:         center;
        cursor: pointer;

        -webkit-flex-direction: column; /* Safari */
        flex-direction:         column;

    }



}

@media screen and (max-width: 480px) {



    div#logo img{
        max-width:100%;

    }
    div#logo span{

        display:block;


    }


}


/* ページトップへ戻る */
.pageTop {
    position:relative;
    width:100%;
    height:0;
    margin:0 auto;
    display:none;
}
.pageTop a {
    position: fixed;
    bottom: 0px;
    right:0px;

    display: block;
    width: 60px;
    height:60px;

    /* ↓以下はリンク装飾↓ */

    /*  background: rgba(0, 0, 0, 0.8);*/
    text-align:center;
    outline:none;
    text-decoration: none;
    z-index:9999;

}

.pageTop a img {
    position: relative;
    top: 15px;

}

footer{
    padding: 0 0 60px;
}

.footer{

    position: relative;

    display: flex;
    width: 100%;

    justify-content: space-between;
}

.footer-copy span{
    font-size: 0.8em;

}


.changer{

    /*  position:fixed;
      top:100px;
      left:0px;
      background:#fff;
      z-index:+10;*/

    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


.footer span a{

    text-decoration: underline !important;


}


#container{

    position:relative;

    width:100%;
    height:100%;
    left:0;

    zoom:1;
}

#Header{

    height:60px;

}

#Main{

    position:relative;
    left:0;
}

.content-box{


    width:100%;

    margin: 0 auto;

    /*padding: 10px 20px;*/

}
.content-box.center{
    text-align: center;
}

.content-box.list{

    position: relative;
    padding: 0;
    height: 40px;
    margin: 0.5em auto;
}



.full{

    padding: 0.5em;

}

.content-box h2,
.content-box p{
    max-width: 100%;
    line-height: 2em;
    word-break: break-all;
    text-align: left;
}

.content-box p.notice{

    font-size: 0.7em;
}

span.notice{
    display: block;
    font-size:1em;
}

.full{   width:100%;}

.margin-top{margin-top: 1em;}
.margin-bottom{margin-bottom: 1em;}
.margin-bottom-large{margin-bottom: 2em;}

.border-top{border-top: 1px solid;}
.border-bottom{border-bottom: 1px solid;}

#container.slide-left{


    /*    -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;*/
}

.header-box{


    width:50%;


}

.slide-btn{
    display:none;

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    cursor: pointer;

    /* position: absolute;
    top:0;
    left:0px; */

}

.slide-btn i{
    width: 60px;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 2em;
    display:none;
}

.slide-btn i.active{


    /* -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; */
    display:block;
}

.pageTop i{

    width:60px;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.4em;
    color: #888;


}

ul#navigations li:first-child{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
    display: block;
    vertical-align: middle;
    padding: 10px;
    font-size: 1em;
}

ul#navigations li:first-child span.member-number,ul#navigations li:first-child span.member-title{

    font-size: 0.7em;
    padding:0 10px;
}


ul#navigations li { display: block;}

ul#navigations li a{

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
    display: block;

    cursor: pointer;
    padding: 10px;

}


ul#navigations li span.navigation-name{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    vertical-align: middle;
    line-height: 40px;
    min-height: 40px;
    font-size: 0.9em;

    display: inline-block;
    width:75%;
}

ul#navigations li span.navigation-icon{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    vertical-align: middle;
    line-height: 40px;
    min-height: 40px;
    display: inline-block;
    width:25%;
    font-size: 0.9em;

    text-align: center;
}

ul#navigations li::after{clear:both;}


#slide_menu{
    height: 100%;

    z-index:+100;
    top:0;
    left:0;
    display:block;
    opacity:0;
    position: fixed;
    zoom:1;
}

#slide_menu.slide-left{


}


div.progress{


    width:100%;
    margin-bottom: 20px;
}
div.progress ul{


    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: stretch;
    align-items: stretch;

}

div.progress ul li{
    border-bottom: 4px solid;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding: 10px 0;
    width: 25%;
    /* display: block; */
    text-align: center;
    margin-right: 10px;
    font-size: 0.9em;
}

div.progress ul li:last-child{

    margin-right: 0px;
}

div.category ul{
    width:100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

}

div.category ul li{
    /*border-radius: 20px;*/
    padding: 6px 14px;

}

div.category ul li i.fa{
    font-size: 1.6em;
}

div.category ul li select{
    cursor: pointer;
    /* position: relative; */
    /* z-index: +2; */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* border: none; */
    padding: 6px 18px;
    /* background: none;*/
    /* font-size: 20px; */
    font-size: 1.25rem;
    line-height: 2em;
    text-align: center;
    /*border-radius: 30px;*/
    width: 100%;
    box-sizing:border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    border:1px solid;
}



.search{display:none;}

.search-btn{

    display: block;
    width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    cursor: pointer;

    text-align: center;
    overflow: hidden;
    border-top: 1px solid;
    border-bottom: 1px solid;
    position:relative;
    height: 60px;
    line-height: 60px;
    vertical-align: top;
}
.change-arrow{
    position:absolute;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    right:0;
    top:0;
    height: 60px;
    line-height: 60px;
    width:60px;
    vertical-align: middle;
    border-left: 1px solid;
    text-align: center;
}
.change-arrow i{
    vertical-align: middle;
    height: 60px;
    line-height: 60px;
    display: none;
}
.change-arrow i.active{display: block;}

#Reserve0MainCont{
    width:100%;
    display: block;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding:2em 1em 0;
}
.Reserve0MainContPD{
    padding: 0 0 1em;
    min-width: 33%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    line-height: 2em;
}

.Reserve0MainContPD i{
    padding-right: 10px;
}

.Reserve0MainContPD label{
    margin: 0;
}

.Reserve0MainContPD [type='text']{
    margin: 0.5em 0.5em;
}

#Reserve0MainContUnder{
    padding: 2em 0;
    width: 100%;
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

div.search ul li{
    /*border-radius: 20px;*/
    padding: 6px 14px;

}

div.search ul li i.fa{
    font-size: 1.6em;
}

div.search .Reserve0MainContPD [type='text']{

    /*  width:70%;*/

}

div.checkbox-wrapper{
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    font-size: 1em;
    line-height: 3em;
    margin: 0 0 0 3em;
}


/*** custom checkboxes ***/

input[type='checkbox'] { display:none; } /* to hide the checkbox itself */
input[type='checkbox'] + label:before {
    font-family: FontAwesome;
    display: inline-block;

}
input[type='checkbox'] + label{
    cursor: pointer;
}

input[type='checkbox'] + label:before  {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    width: 24px;
    height: 24px;
    border: 1px solid;
    border-radius: 4px;
}

input[type='checkbox']:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 20px);
    left: -10px;
    width: 10px;
    height: 24px;
    transform: rotate(40deg);
    border-bottom: 3px solid;
    border-right: 3px solid;
}

input[type='text']{
    padding: 4px 12px;

    font-size: 1em;
    line-height: 1.8em;

    max-width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
input[type='password'],
input[type='radio'],
select,
div.datapicker-box .Reserve0MainContPD [type='text'],
div.search .Reserve0MainContPD select,
div.search .Reserve0MainContPD [type='text'],
div.search .Reserve0MainContPD [type='chexkbox']
{
    cursor: pointer;

    padding: 4px 12px;

    font-size: 1em;
    line-height: 1.8em;

    max-width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

}

/* input[type='text'],
input[type='password'],
input[type='checkbox'], */
input[type='radio'],
select,
div.datapicker-box .Reserve0MainContPD [type='text'],
div.search .Reserve0MainContPD select,
div.search .Reserve0MainContPD [type='text'],
div.search .Reserve0MainContPD [type='chexkbox']
{
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

div.search .Reserve0MainContPD select{
    width: 100%;
    max-width: 300px;
}

p.notice{
    font-size:0.8em;
    padding:0.5em 1em;
}

a.submit-btn,button[type="submit"],button[type="button"]{

    cursor: pointer;

    /*    padding: 4px 12px;*/

    text-align: center;
    /*border-radius: 30px;*/

    vertical-align: top;


    box-sizing:border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    vertical-align: middle;

    width: auto;
    /*margin: 0 auto;*/
    min-height: 40px;
    display: block;
    vertical-align: bottom;
    line-height: 40px;
    display: inline-block;
    padding: 0 1.5em;
    border:1px solid;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.link-btn,.link-btn.reservation,.link-btn.cancel,.link-btn.unrated,.information-link-btn{
    display: inline-block;
    padding: 2px 1em;
    font-size: 0.9em;

    text-align: center;
    /*border-radius: 30px;*/

    box-sizing:border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    vertical-align: middle;


    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;



}


.link-btn.google-map,
.link-btn.kiyaku{
    margin: 1em 0;
}

.link-btn.kiyaku::before{

    content:'\f2d2';
}


.studioaddress{
    border-bottom: 1px solid;
    margin: 0 0 1em;
    padding: 0 0 1em;
}

.List1BlockR .studioaddress p{
    margin: 0 0 1em;
}

.link-btn.google-map::before{

    content:'\f041';
}


.next-back{
    margin:0 1em;
}

.link-btn.margin-bottom{

    margin:0 0 1em;

}

.link-btn.cancel,.link-btn.reserve,.link-btn.cancel-wait{
    display: inline-block;
}

.link-btn.release,.link-btn.inline-block{
    display: inline-block;
    padding: 4px 6px;

    text-align: center;
    /*border-radius: 30px;*/

    /*margin: 0 10px;*/
    vertical-align: top;


    box-sizing:border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    vertical-align: middle;


    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;



}
.link-btn::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f054";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.reservation::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: attr(data-btnicon);
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.release::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f0ec";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.unrated::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f27a";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.report::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f15b";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}
.link-btn.start::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f144";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.cancel::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f273";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}
.link-btn.cancel-wait::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: attr(data-btnicon);
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.link-btn.settlement::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: "\f138";
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}


.link-btn:hover,.link-btn.reservation:hover,.link-btn.cancel,.link-btn.unrated:hover,.information-link-btn:hover,a.submit-btn:hover,button[type="submit"]:hover,button[type="button"]:hover{

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}



a.submit-btn i{padding-right:10px;}

.lesson-box a.submit-btn,.list-box a.submit-btn{
    width: 100%;
    margin: 0 auto 20px;
}

.link-btn,.link-btn.reservation,.link-btn.cancel,.link-btn.unrated,.information-link-btn{

    cursor: pointer;
    border:1px solid;
    margin: 0.5em 0;
}



.lesson-box,.list-box{

    width:100%;

}

.list-box > li{
    width: 32%;
    /*border-radius: 1rem;*/
    margin-right:1.2%;
    margin-bottom: 1rem;


}

.timeline-list-btn i,.block-list-btn i{

    display: none;

}
.timeline-list-btn i.active,.block-list-btn i.active{

    display: block;

}

.lesson-box li{margin:20px 0;}


.page-index{
    width:100%;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;

}


.timeline-list-btn,.block-list-btn{

    width: 40px;
    line-height: 40px;
    height: 40px;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    right: 0;
    position: absolute;
    overflow: hidden;

}

.timeline-list ul.list-box > li,.block-list ul.list-box > li{

    -webkit-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    -moz-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    -o-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
}



.timeline-list.active ul.list-box li,.block-list.active ul.list-box li{

    width:100%;

}



.timeline-list.active ul.list-box li table,.block-list.active ul.list-box li .List1Block{

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;

    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
    border-radius: 1rem;
    /*    margin-top: 1rem;*/

}

.block-list.active ul.list-box li .List1Block{
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}


.block-list ul.list-box li .List1BlockL{

    margin-bottom: 10px;

}

.block-list.active ul.list-box li .List1BlockL{
    width: 300px;
    /*    padding: 1rem;*/
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0px;

}

.block-list.active ul.list-box li .List1BlockR{
    padding-left: 1.5rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 300px);
}


.block-list ul.list-box li .List1BlockR form button{
    display: block;
    margin: 0 auto;
}

.block-list.active ul.list-box li .List1BlockR form button{
    display: inherit;
    margin: inherit;
}



.block-list.active ul.list-box li .List1BlockR{
    padding: 0 1rem 1rem;
    padding-left: 2em;
}


.list-box{

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;


    margin: 0 auto;
    width:100%;
    display: flex;

    flex-wrap: wrap;



    -webkit-flex-direction: row; /* Safari */
    flex-direction:         row;
}
.list-box.studio{
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.list-box.studio > li{
    margin-right: 1.2%;
}

.List1Block{

    padding: 1rem;

    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.List1BlockL{


    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;

}

.List1BlockR{


    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 100%;

}

.List1BlockR h3{

    border-bottom: 1px solid;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 0 20px;
    font-size: 1.4em;

}

.List1BlockR p{
    width: 100%;
    /*    margin-bottom: 20px;
        padding: 0 0 10px;*/
    font-size: 1em;
    margin: 0 0 1em;
}

ul.information-box{

    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

ul.information-box li{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;


    text-align: center;



    vertical-align: top;
    width:33%;
    text-align: center;
    padding: .625em;
}

ul.information-box li .information-link-btn{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 60px;
    min-height: 60px;
    padding: 4px 12px;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

ul.information-box li span.navigation-icon{

    padding-right: 10px;
}

.submit-box{

    text-align: center;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width: 100%;

}

.submit-box li{
    width:100%;
    margin-bottom: 1rem;
}


.form-submit-box{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    max-width:100%;
    width: 100%;

}

.form-submit-box ul{

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;


}
.form-submit-box ul{
    width: 100%;
    max-width:100%;
}

.form-submit-box li{
    /* text-align: center;*/
    vertical-align: middle;
    padding: 0.625em;
    max-width:100%;
    width:100%;


    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    display: flex;

    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.form-submit-box li.submit a{

    margin-right:20px;

}


.form-table-box{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    max-width:100%;
    width: 100%;
    border-top:0px solid;
    border-bottom:1px solid;
    border-right:0px solid;
    border-left:1px solid;
}

.form-table-box ul{

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;


}
.form-table-box ul{
    width: 100%;
    max-width:100%;
}

.form-table-box li{
    vertical-align: middle;
    padding: 0.625em;
    max-width:100%;
    width:100%;
    border-right:1px solid;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;
}



.form-table-box input[type="text"],
.form-table-box input[type="password"],
.form-table-box select{

    text-align: left;
    margin: 10px 0;
}

.form-table-box textarea{

    width:100%;
    /* position: relative; */
    /* z-index: +2; */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* border: none; */
    padding: 4px 12px;
    /* background: none; */
    /* font-size: 20px; */
    font-size: 1em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 10px;
    max-width: 100%;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

.form-table-box li{

    border-top:1px solid;

}



.form-table-box li:last-child{

    border-top:0px solid;
    border-top:1px solid;

}

.form-table-box.change li {
    /*
        -webkit-align-items: left;
        align-items: left;
        text-align: left;
        display: flex;*/

}

.form-table-box.change li > * {


}

.form-table-box.change li.white {

    -webkit-align-items: center;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
}


.form-table-box.change li div {

    -webkit-align-items: left;
    align-items: left;
    -webkit-flex-direction: row;
    flex-direction: row;
    text-align: left;

    max-width:100%

}

.form-table-box.change li div.pyajp-box.flex {

    -webkit-align-items: left;
    align-items: left;
    -webkit-flex-direction: row;
    flex-direction: row;
    text-align: left;

    width: 100%;
    max-width:100%

}


.form-table-box li.white, .form-table-box li.white div{
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.form-table-box li.white div a.underline{

    padding-right: 20px;

}

.form-table-box.change li:nth-child(1){

    flex:1;

}

.form-table-box.change li:nth-child(2){
    flex:3;

    flex-flow: wrap;
    justify-content: left;
    align-items: center;

}


.form-table-box.secure,.form-table-box.secure li{

    border:none;

}


.form-table-box.secure li:nth-child(1){

    flex:1;

}

.form-table-box.secure li:nth-child(2){

    flex:5;
}

/*
.form-table-box li:nth-child(1){

  flex:1;

}

.form-table-box li:nth-child(2){

  flex:2;
}*/

.line-btn a img{

    max-width: 204px;

}

#tabs-paypal,
#tabs-credit,
#tabs-confirm-reservation,
#tabs-confirm-cancel,
#tabs-contract
{display:none;}

#tabs-lesson.active,
#tabs-teacher.active,
#tabs-calendar.active,
#tabs-paypal.active,
#tabs-credit.active,
#tabs-confirm-reservation.active,
#tabs-confirm-cancel.active,
#tabs-contract.active,
#tabs-lesson.active,
#tabs-instructor.active,
#tabs-calendar.active
{display:block;}


.column{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;

}

.stretch{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-align-self: stretch ;
    align-self: stretch ;

}

.space-between{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}


.paging_link {
    text-align: center;
    font-size: 1.2em;
    line-height: 3em;
    padding: 0.5em 0.8em;
}
.paging_link a{
    text-align: center;

}
.paging_link span{
    padding: 0.5em 1em;
    text-align: center;
}
.paging_link a span{
    border: 1px solid;
}
.paging_link a:hover span{
    border: 1px solid;
}
.paging_link > span{
    border: 1px solid;
}


.no-padding{padding:0 !important;}


h2.font-highlight span.pointoutdate{
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    padding: 0 1em;
    font-weight: bold;
    line-height: 1.8em;
}

table.responsive td span.pointoutdate{
    padding: 0.5em;
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-align: center;
    margin: 1em 0 0;
    font-weight: bold;
}


.qr-box{
    display: none;
}
.slide-btn{
    display: flex;
    justify-content: flex-start;
    align-items: center;

}
.slide-btn-text{
    display: block;

}

@media screen and (max-width: 640px) {

    table.responsive td span.pointoutdate{
        text-align: left;
    }

    .slide-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 60px;
        height: 60px;
    }

    .slide-btn i{
        padding: 4px 0 0;
        width: 40px;
        line-height: 28px;

    }
    .slide-btn-text{
        display: block;
        font-size: 0.7em;
    }
    

    .qr-box{
        display: block;

    }
    .qr-box .content-box p{
        text-align: center;
        font-size: 0.8em;
    }
    .table-wrapper .header-fixed-table.reservelt td .link-btn{
        padding: 0px 1em;
    }

    .paging_link {
        text-align: left;
    }


    .form-table-box li.white div a.underline{
        display: block;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 20px;
    }

    .form-table-box.change li:nth-child(1){

        flex:auto;

    }

    .form-table-box.change li:nth-child(2){

        flex:auto;
    }


    .form-table-box.secure li:nth-child(1){

        flex:auto;

    }

    .form-table-box.secure li:nth-child(2){

        flex:auto;
    }

    .form-table-box input[type="text"]{

        width:100%;

    }

    .form-table-box input[type="password"]{

        width:100%;

    }





    .link-btn,.link-btn.reservation,.link-btn.cancel,.link-btn.unrated,.information-link-btn{
        display: inline-block;
        font-size: 0.8em;
    }

    .search-btn{font-size:0.8em;}
    div.category ul li select{font-size:1em;}

    div.progress ul li{font-size: 0.7em;}

    .list-box li{width:100%;}

    .list-box > li,
    .list-box.studio > li{
        margin-right: 0;
    }

    .block-list.active ul.list-box li .List1BlockL,.block-list.active ul.list-box li .List1BlockR{
        width:100%;
        padding:0 0.5em;
    }
    .content-box.list{display: none;}
    .search-btn{text-align: left; padding:0 0.5em;}

    #Reserve0MainCont{

        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        padding:1em 0.5em 0;
    }
    #Reserve0MainContUnder {
        padding: 1em 0;
        flex-wrap: wrap;
    }
    #Reserve0MainContUnder button[type="submit"].submit-btn.confirm{
        margin:1em 0 1em;
    }

    .list-box, div.category ul,.CourseList1Block,.form-table-box ul,.content-box.space-between{

        -webkit-flex-direction: column; /* Safari */
        flex-direction:         column;

    }
    .block-list.active  .CourseList1Block{

        -webkit-flex-direction: column; /* Safari */
        flex-direction:         column;
        width:100%;

    }

    .CourseList1BlockL,.CourseList1BlockR{


        width:100%;
        /*  min-height:100%;*/
        -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    }

    .CourseList1BlockR{
        padding: 0 1rem 1rem;
    }


    ul.information-box li span.navigation-name{

        display: block;
        font-size: 1em;

    }

    ul.information-box li span.navigation-icon{

        display: block;
        font-size: 2rem;
        padding-right: 10px;

    }

    ul.information-box li .information-link-btn{

        /*border-radius: 20px;*/

    }
    ul.information-box li{

        width:100%;
        margin:0 0 20px;

    }


}




div.radio03 label,div.radio-wrapper label,div.checkbox02.select-box label{

    cursor: pointer;

}


div.checkbox02.select-box{


    /* position: relative;
    display: inline; */
    /* z-index: +2; */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* border: none; */
    padding: 4px 12px;
    /* background: none;*/
    /* font-size: 20px; */
    font-size: 1em;
    line-height: 1.8em;
    text-align: center;
    /*border-radius: 20px;*/
    max-width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    /*    border:1px solid;*/
}

div.radio-wrapper{

    padding: 4px 12px;
    font-size: 1em;
    line-height: 1.8em;
    max-width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.Reserve0MainContPD div.radio-wrapper{
    padding: 0;
}
/*css radio02*/
div.radio-wrapper input,.radio03-input{
    display: none;
}
div.radio-wrapper input + label{
    padding-left: 20px;
    position:relative;
    margin-right: 20px;
    padding: 0.5em 2em;
    /*border-radius: 2em;*/
    border: 1px solid;
    display: inline-block;
    margin: 0.1em 0.5em;
}

.radio03-input + label{
    position:relative;

}

div.radio-wrapper label:last-child{

    margin-right: 0px;
}

div.radio-wrapper input + label::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    /* top: 5px;
    left: 0; */
    width: 15px;
    height: 15px;
    border: 1px solid;
    border-radius: 50%;
}

div.radio-wrapper input:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    /* top: 7px;
    left: 2px; */
    width: 11px;
    height: 11px;

    border-radius: 50%;
}


.radio03-input + label span.radio::before{
    content: "";
    display: inline-block;
    position: relative;
    top: 2px;
    left: -5px;
    width: 15px;
    height: 15px;
    border: 1px solid;
    border-radius: 50%;
}

.radio03-input:checked + label span.radio::after{
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;

}


table.responsive {
    border: 1px solid;
    border-collapse: collapse;
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table.responsive tr {
    border: 1px solid;
    padding: .35em .35em 2em;
}

table.responsive th,
table.responsive td {
    padding: .625em;
    text-align: center;
    border: 1px solid;
    vertical-align: middle;
}
table.responsive td.displaycheck div.radio-wrapper.select-box input + label{
    width: 100%;
}
table.responsive td.displaycheck div.radio-wrapper.select-box p{
    text-align: left;
    font-size: 0.9em;
}

table.responsive th {

    letter-spacing: .1em;
    text-transform: uppercase;
}

table.responsive .select-container{
    max-width: 100%;
}

table.responsive.timeline{
    table-layout: fixed;
    border-collapse: separate;
    /*max-width:860px;*/

    margin: 0 auto;
}
table.responsive.timeline,table.responsive.timeline tr, table.responsive.timeline td{
    background: none;
    border:none;

}

table.responsive.timeline td{

    text-align: left;
    border-bottom: 1px solid;
    box-sizing:border-box;
    vertical-align: middle;
}

table.responsive.timeline td:nth-of-type(1){


    text-align: left;
}


table.responsive.timeline td:nth-of-type(3){


    text-align: left;
}



@media screen and (max-width: 640px) {


    div.radio-wrapper, div.checkbox02.select-box{

        padding:4px 0;
    }

    table.responsive {
        border: 0;
    }



    table.responsive.timeline td:nth-of-type(1),  table.responsive.timeline td:nth-of-type(2), table.responsive.timeline td:nth-of-type(3){

        width: 100%;
        text-align: right;
    }

    table.responsive thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        display: none;
    }
    table.responsive tr{
        border-bottom: 3px solid;
        display: block;
        margin-bottom: .625em;
        border-top: 3px solid;
    }

    table.responsive.timeline tr {
        border-bottom: 3px solid;
        display: block;
        margin-bottom: .625em;
        border-top: 3px solid;
        border-right:1px solid;
        border-left:1px solid;
    }

    table.responsive td,table.responsive.timeline td {
        border-top: none;
        border-right: none;
        border-left: none;

        border-bottom: 1px solid;
        display: block;

        text-align: right;
    }
    table.responsive td::before {

        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    table td:last-child,table.timeline td:last-child {
        border-bottom: 0;
    }

    table.responsive.timeline td span{

        visibility: hidden;
        opacity: 0;
        zoom:1;
    }

    table.responsive.timeline td::after {

        content: attr(data-time);
        float: right;
        font-weight: bold;
        text-transform: uppercase;
    }

}

/*
table.responsive-row*/

table.responsive-row {
    border: 1px solid;
    border-collapse: collapse;
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table.responsive-row tr {
    border: 1px solid;
    padding: .35em;
}
table.responsive-row th,
table.responsive-row td {
    padding: 0.625em 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid;
    word-break: break-all;
}
table.responsive-row th {

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.youtube-wrap{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 0 2em;
}

.youtube-wrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;

}

span.user_reservelog_lessonurl_smartlock{
    padding: 0.5em;
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-align: left;
    margin: 0.5em 0;

}
span.signup_required{
    padding: 0.25em 0.5em;
    display: inline;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-align: center;
    margin: 0.5em 0.5em;
    white-space: nowrap;
}

span.postscript{
    padding: 0.25em 0.25em;
    display: block;
    font-size: 0.85rem;
    text-align: left;
    width: 100%;
    margin: 0.25em 0;

}
.form-table-box.change li.white.inherit,
.form-table-box li.white.inherit div {
    -webkit-align-items: inherit;
    align-items: inherit;
    text-align: inherit;
    flex-direction: inherit;
    display: block;
}

@media screen and (max-width: 640px) {
    table.responsive-row {
        border: 0;
    }




    table.responsive-row thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        display: none;
    }
    table.responsive-row tr {
        border-bottom: 3px solid;
        display: block;
        margin-bottom: .625em;
        border-top: 3px solid;
    }
    table.responsive-row td {
        border-top: none;
        border-right: none;
        border-left: none;

        border-bottom: 1px solid;
        display: block;

        text-align: right;
    }




    table.responsive-row td::before {

        content: attr(data-label);
        float: left;
        font-weight: bold;

    }

    table.responsive-row td::after {

        content: attr(data-time);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        padding-left: 10px;
    }

    table td:last-child {
        border-bottom: 0;
    }
    table.responsive-row td{display: none;}
    table.responsive-row td.open{display: block;}
    table.responsive-row td:first-child {display: block;}


}
.responsive-row.instructor img{padding:10px 10px 10px;  box-sizing:border-box;}

/*jscroll*/

.jscroll-loader{

    width:100vw;
    box-sizing:border-box;
    padding:20px 0;
    text-align: center;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: +1;

}

/*icon*/

.icon-label{
    display: inline-block;
    vertical-align: top;
}
.icon-label span {
    vertical-align: middle;
    line-height: 40px;
}

.icon{

    display: inline-block;
    position: relative;
    border-radius: 70px;

    width: 120px;
    height: 40px;
    overflow: hidden;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 6px;
    right: 0;
    z-index:+2;
}
.icon .handle {
    width: 35px;
    height: 35px;
    border-radius: 70px;
    position: absolute;
    top: 3px;

    font-size: 1em;
    line-height: 30px;

    text-decoration: none;
    font-size: 1em;

    line-height: 30px;
    text-align: center;
    left: 3px;
    -webkit-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    -moz-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    -o-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
    transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);

}


.icon.on .handle {

    left:82px;


}
.icon .handle::after {
    content: attr(data-name);
    font-size:13px;
    font-weight: 400;

    position: absolute;
    left: 40px;
    width: 80px;
    text-align: left;
    vertical-align: middle;
    line-height: 34px;

}
.icon.on .handle::before {
    content: attr(data-name);
    font-size: 13px;
    font-weight: 400;

    position: absolute;
    left: -70px;
    width: 80px;
    text-align: left;
    vertical-align: middle;
    line-height: 34px;
}

/*baloon*/

.voice-block{

    width:100%;
    height:240px;
    overflow-y:scroll;
    padding: 0 1rem;


}

.voice-balloon {
    margin: 0 auto;
}

.voice-balloon .faceicon {
    float: left;
    margin-right: -90px;
    width: 80px;
}

.voice-balloon .faceicon i{
    width: 80px;
    height: 80px;
    vertical-align: middle;
    line-height: 80px;
    font-size:40px;
    text-align: center;
}



.voice-balloon .faceicon {

    float: left;
}



.voice-balloon .says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;

}
.voice-balloon .says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    border: solid 3px;
    box-sizing: border-box;
}

.voice-balloon .says::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -20px;

    border: 12px solid transparent;
    border-right: 12px solid;
    z-index: 1;
}


.voice-balloon .says::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid;
}



.voice-balloon .says p {
    margin: 0;
    padding: 0;
}


@media screen and (max-width: 640px) {
    .voice-block{
        padding: 0 0.5rem;
    }
    
    .voice-balloon .faceicon i{
        width: 30px;
        line-height: 60px;
        font-size: 30px;
    }

    .voice-balloon .says {
        margin: 5px 0 0 45px;
        padding: 8px 10px;
    }

    .voice-balloon .says::before {
        top: 10px;
    }

    .voice-balloon .says::after {
        top: 10px;
    }
}

.ui-datepicker-trigger{

    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 6px 12px;
    line-height: 1.8em;
    text-align: center;
    /*border-radius: 20px;*/
    max-width: 100%;
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    text-align: -webkit-center;
    text-align: -moz-center;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 120%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border:1px solid;
    margin-left: 10px;
    margin-top: 0;
    height: 40px;

    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;


}
.ui-datepicker-trigge:hover{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;


}

.ui-datepicker-trigger::before{

    content:'\f073';
}

.Reserve0MainContPD.datapicker{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.Reserve0MainContPD.three-line{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 0;
}


.Reserve0MainContPD.three-line .three-line-left-block{
    width: calc(100% - 280px);
    margin: 0.5em 1em;
}
.Reserve0MainContPD.three-line .three-line-left-block .select-container{
    margin: 0;
    display: block;
    }

    .Reserve0MainContPD.three-line .three-line-left-block .select-container label.title{
        padding-bottom: 1em;
        padding-right: 1em;
    }

    .Reserve0MainContPD.three-line .three-line-left-block .select-container label.title::after{
        display: none;
    }

.Reserve0MainContPD.three-line .three-line-left-block .select-container select{
max-width: 100%;
}


.Reserve0MainContPD.three-line .three-line-right-block{
    max-width: 280px;
    width: 100%;
    display: flex;
    justify-content: center;
}

span.status{

    border-radius: 0;
    /* border: 1px solid; */
    padding: 4px 6px;
    margin: 0px 0 10px;
    width: 100%;
    display: inline-block;
}

ul.tabs.school li{

    width:auto;
}

.radio-payment{

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
}



.radio-payment > div{

    /* text-align: center; */
    vertical-align: middle;

    width: 100%;
    border: 1px solid;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: space-between;
    justify-content: left;
    padding: 0.5em;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* .radio-payment > div:first-child{border-right:none;} */

.radio-payment > div label{

    /* padding: .625em; */
    width: 100%;
    display: block;
    padding: 1em;
}

span.radio{

    position: relative;
    display: inline-block;

}

.footer{
    margin: 1em 0;
}


.callenderSelectDetailTitle{
    max-width: 1080px;
    width: 100%;
    margin: 2em auto 2em;
}

.callenderSelectDetailTitle h3{
    text-align: center;
    font-size: 1.2em;
}
.callenderSelectDetailTitle h3 a{
    margin: 0 2em;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    font-size: 0.8em;
    position: relative;
    transition: all .2s;
    display: inline-block;
}
.callenderSelectDetailTitle h3 span.cal-day-btn-date{
    display: inline-block;
}

.callenderSelectDetailTitle h3 a:first-child{
    padding-left: 2em ;
}

.callenderSelectDetailTitle h3 a:last-child{
    padding-right: 2em ;
}

.callenderSelectDetailTitle h3 a:first-child::after {
    display: block;
    content: '\f053';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.5em;
    font: normal 1em FontAwesome;
    pointer-events: none;
}
.callenderSelectDetailTitle h3 a:last-child::after {
    display: block;
    content: '\f054';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5em;
    font: normal 1em FontAwesome;
    pointer-events: none;
}
.callenderSelectDetailTitle h3 a.noactive {
    border: 1px solid #ccc;
    color: #ccc;
}
.callenderSelectDetailTitle h3 a.noactive:hover{
    background-color: #fff;
    color: #ccc;
}

.callenderOneWeek{
    max-width: 1080px;
    width: 100%;
    margin: 2em auto 2em;
}
.callenderOneWeek ul{
    display: flex;
    align-items: center;

}

.callenderOneWeek ul li{
   width:14.285%;

}

.callenderOneWeek ul li a{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em 0.25em;
    
 }
 .callenderOneWeek ul li a span{
    display: block;

 }
 .callenderOneWeek ul li a span.callenderOneWeek-num{
    font-size: 1.4em;
 }

 .callenderOneWeek ul li a span.callenderOneWeek-dayofweek{
    font-size: 0.8em;
}



@media screen and (max-width: 640px) {

    .callenderOneWeek{
        padding: 0 0.5em;
    }

    .callenderOneWeek ul li a span.callenderOneWeek-num{
        font-size: 1.2em;
     }
    
     .callenderOneWeek ul li a span.callenderOneWeek-dayofweek{
        font-size: 0.6em;
    }

    .callenderSelectDetailTitle h3{
        font-size: 1em;
    }

    .callenderSelectDetailTitle h3 a{
        margin: 0 0.5em;
    }
    .footer{
        display: block;
    }
    .FooterL,.FooterR{
        margin: 0 0 1em;
    }
    .FooterL{
        text-align: center;
        padding: 1em 0;
    }
    .FooterR a{

        display: block;

    }


    .radio-payment{

        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .radio-payment > div.detail-container{
        border-top-style: none;
    }

    /* .radio-payment div:first-child{border-right:1px solid;border-bottom:none;} */

    span.done,span.cancel,span.day-cancel{

        display: inline-block;
        margin: 0;
    }

    .link-btn.unrated{

        margin-left: 10px;
    }

    .ui-datepicker-trigger{

        margin:0 auto;
    }

    .Reserve0MainContPD.datapicker{
        display: block;
    }

    .Reserve0MainContPD.datapicker.calendar-box{
        font-size: 0.8em;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Reserve0MainContPD.datapicker.three-line{
        font-size: 1em;
        display: block;
    }

    .Reserve0MainContPD.three-line .three-line-left-block{
        width: 100%;
        margin: 0;
    }
    
    .Reserve0MainContPD.three-line .three-line-right-block{
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .List1BlockR h3{

        font-size: 1em;

    }

}

#tabs-school > div{display: none;}
#tabs-school > div.active{display: block;}

.calendar{

    min-height: 400px;

}
a.underline{

    text-decoration: underline !important;

}

#container.login{
    width: 100%;
    height: 100%;
}

.login-left,.login-right{

    width: 100%;
}

#container.login{

    height: 100%;
    padding: 1.755em;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
}

#container.login span.Alert.active{

    margin:2em 0;


}

.remind-btn-box{
    margin: 0 0 2em;
    max-width: 400px;
    width: 100%;
}

.remind-btn-box p.notice{
    text-align: left;
}

.login-left,.login-right{

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
}

.login-right{

    border-left: 1px solid;

}

.login-left{


}


.login-left div{
    max-width:100%;
    margin-bottom: 20px;
    text-align: left;
}

#logo.login{

    text-align: center;
    padding: 0;
    margin-bottom: 0px;
    justify-content: center;
}

.login{

    text-align: center;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.login h1{

    font-size: 0.8em;

}

.login .alert{

    border: 1px solid;
    /*border-radius: 20px;*/
    padding: 6px 12px;
    margin: 20px auto 10px;
    display: block;
    max-width: 300px;
    width: 100%;

}

.login-box{


    padding: .625em;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: stretch;
    align-items: stretch;

}
.login-bottom{
    padding: 2.25em .625em;

}

button[type="submit"],button[type="button"]{
    cursor: pointer;
    font-size: 1em;
}
button[type="submit"] i,button[type="button"] i{
    padding-right: 0.5em;

}



.login-box button[type="submit"]{
    width: 100%;
    max-width: 100%;
}
.login-box a.submit-btn{
    width: 100%;
    max-width: 400px;
}
.link-btn.show-panel-btn{
    width: 100%;
    margin: 2em auto 1em;
    min-height: 40px;
    font-size: 1em;
    display: block;
    vertical-align: bottom;
    line-height: 40px;
    position: relative;
    padding-left: 2em;
    cursor: pointer;
}

/* .link-btn.show-panel-btn.center{
  margin: 2em auto 1em;
} */

.block-list.active ul.list-box li .List1BlockR .link-btn.show-panel-btn.center {
    display: inherit;
    margin: 2em 0 1em;
}

.link-btn.show-panel-btn::before{
    content: "\f078";
    display: block;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font: normal 1em FontAwesome;
    pointer-events: none;
}

.link-btn.show-panel-btn.active::before{
    content: "\f077";
}

.hidden-content{
    display: none;
    transition: all .2s;
}
.hidden-content.block{
    display: block;
    transition: all .2s;
}
.List1BlockR p{
    line-height: 2em;
    margin:0 0 2em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    transition: all .2s;
}
/* .text-ellipsis.block {
  display: block;
  transition: all .2s;
} */
.login-box a.submit-btn.login,.login-box button[type="submit"].login{


}

.login-bottom a.submit-btn{
    margin: 0 auto;
}

.login-box input[type="text"],.login-box input[type="password"],.login-box input[type="checkbox"]{
    max-width:100%;
    width:100%;
    padding: 4px 6px;
    margin-top: 10px;
}

.login-box .line-btn a img {
    max-width: 240px;
    width: 100%;
    /*    min-width:204px;*/
}

.category .fa-chevron-right{
    display: block;
}

.category .fa-chevron-down{
    display: none;
}


.category .select-box.second{
    display: none;
    opacity:0;
    zoom:1;
}

.category .select-box.second.visible{
    display: block;
    opacity:1;
    zoom:1;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;


}

.reservelt-image{

    width: 100%;
    height: 240px;
    min-height: 240px;
    background-size: cover;
    background-position: center;
    display: block;
    position: relative;
    overflow: hidden;
}

.reservelt-image span{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;

    padding: 0 0.5em;
}


.header-fixed-table.reservelt tr:first-child th{

    padding:0;

}


.link-group{
    display: flex;
    padding: 0 1em;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

}
.link-group a {
    margin: 1em 0.5em 1em;

}

.link-group a span{
    display: block;
    padding: 0.5em 1em;
    /*border-radius: 2em;*/
    border:1px solid;

}



.form-table-box.secure li img{

    max-width: 115px;

}


.Estimate0Table{
    width:100%;
}


div.table-wrapper{
    max-width: 100%;
    max-height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;

}
.header-fixed-table{
    word-break: break-all;
    table-layout: fixed;
    width: 100%;
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
}

div.table-wrapper .header-fixed-table.reserve1 th:first-child {
    width: 200px;

}
div.table-wrapper .header-fixed-table th {
    border-right: 1px solid #777;
}

div.table-wrapper .header-fixed-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: +1 !important;

}

div.table-wrapper.no-scroll .header-fixed-table.no-scroll th {
    position: inherit !important;
    top: inherit !important;
    z-index: inherit !important;

}

.header-fixed-table th.Sunday {
    color:#990000;
}

.header-fixed-table th.Saturday {
    color:#3366cc;
}

div.table-wrapper th:nth-of-type(1) {
    left: 0 !important;
    z-index: +2 !important;

}

div.table-wrapper.no-scroll th:nth-of-type(1) {
    left: inherit !important;
    z-index: inherit !important;

}

.header-fixed-table th{

    padding:0.5em 1em;
    vertical-align: top;
    text-align: left;


}

.header-fixed-table td {

    padding:0.5em 1em;
    vertical-align: top;
    text-align: left;


}

.header-fixed-table td .link-btn,
.header-fixed-table td .information-link-btn{
    margin: 0;
    vertical-align: top;
}

.header-fixed-table td .reserve-btn-wrapper{
 padding: 0.5em 0;
 width: 100%;
 border-bottom: 1px solid #ddd;
 vertical-align: top;
}

.header-fixed-table td .reserve-btn-wrapper span{
    padding: 2px 0;
    vertical-align: top;
}

.header-fixed-table td .reserve-btn-wrapper:last-child{
    border-bottom: none;
}

/* 
div.table-wrapper .header-fixed-table td:nth-child(1) {
  padding: 0;
} */

div.table-wrapper .header-fixed-table td:nth-child(1) {

    position: sticky !important;
    left: 0 !important;
    z-index: +1 !important;
    vertical-align: top;
    text-align: left;
}

div.table-wrapper.no-scroll .header-fixed-table.no-scroll td:nth-child(1) {
    position: inherit !important;
    left: inherit !important;
    z-index: inherit !important;
    vertical-align: middle;
    text-align: center;
}

div.table-wrapper.no-scroll .header-fixed-table.no-scroll th, div.table-wrapper.no-scroll .header-fixed-table.no-scroll td {
    vertical-align: middle;
    text-align: center;
}

.tabs-container.tabs-payment-credit,
.tabs-container.tabs-payment-convenience,
.tabs-container.tabs-payment-paypal{
    display: none;
}
.tabs-container.tabs-payment-credit.active,
.tabs-container.tabs-payment-convenience.active,
.tabs-container.tabs-payment-paypal.active{
    display: block;
}
.full.howto{
    display: none;
}
.full.howto.active{
    display: block;
}

.checkbox-wrapper{
    display: inline-block;
    margin:0 1em;
}

.select-container{
    display: inline-block;
    margin:0.5em 1em;
}
table.responsive .select-container{
    display: block; 
}

.select-container select{
    padding-right: 2em !important;
}


.select-container label{
    position: relative;
}

.select-container label::after{

    display: block;
    content: '\f078';
    position: absolute;
    /* top:5px; */
    top: 50%;
    transform: translateY(-50%);
    right: 0.5em;
    font: normal 1em FontAwesome;
    pointer-events: none;
}

.radio03 .select-container label::after{
    right: 1.5em;
}
.flexslider,
.flex-viewport,
.flexslider .slides,
.timeline-list.active ul.list-box li,
.block-list.active ul.list-box li
{

    height: 100%;
}
.flexslider .slides li {
    /* max-height: 314px;
    min-height: 314px; */
    background-size: cover;
    background-position: center;
}

p.directdebitregist{
    font-weight: bold;
    margin:1em 0;
    text-align: center;

}
p.directdebitregist span{
    border: 1px solid;
    padding: 0.5em 1em;
    /*border-radius: 2em;*/
}

table.responsive.report tr td:nth-child(2){
    text-align: left;
    width: 70%;
}


.top-nav{
    display: flex;

    justify-content: center;
    position: relative;
    width: 100%;
    flex-wrap: wrap;
}
.top-nav li{
    max-width: 80px;
    width: 100%;

    align-items: center;
    margin: 2em 1em 1em;
}

.top-nav li a{
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
    border: 1px solid;
    padding: 0.5em;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
}
.top-nav li a span.navigation-icon{
    text-align: center;
    font-size: 1.8em;
}

.top-nav li a span.navigation-name{
    text-align: center;
    font-size: 0.7em;
}

/* 20221105 */

.top-nav-style02{
    display: block;
    position: relative;
    width: 100%;
}
.top-nav-style02 li{
    width: 100%;
    margin: 2em auto 1em;
}

.top-nav-style02 li a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid;
    padding: 0.5em;
}
.top-nav-style02 li a span.navigation-icon{
    display: block;
    font-size: 2.4em;
    padding: 0 0.5em;
    padding-left: 0;
}

.top-nav-style02 li a span.navigation-name{
    width: 100%;
    padding: 0.25em 1em;
}

.top-nav-style02 li a span.navigation-name span.title{
    font-size: 1.3em;
    display: block;
    width: 100%;
}
.top-nav-style02 li a span.navigation-name span.detail-text{
    font-size: 0.8em;
    display: block;
    width: 100%;
    padding: 0.25em 0;
}

.table-wrapper .flex-table table{
    margin:0 0 2em;
}

.table-notice{
    display: none;
}

div#ui-datepicker-div{
    z-index: +3 !important;
}

div.table-wrapper.no-scroll{
    height:100%;
    overflow: inherit;
}


.flex-group-box{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding:0;
}

input[type='text']#datepicker{
    max-width: 180px;
    text-align: center;
}

.payjs-outer{

    text-align: left;
    margin: 10px 0;
    border-radius: 20px;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 1em;
    line-height: 1.8em;
    max-width: 100%;
    box-sizing: border-box;

}

.form-table-box.change li div.pyajp-box{
    display: flex;
}

.form-table-box.change li div.pyajp-box div#payjs-number-form{
    flex:5;
}
.form-table-box.change li div.pyajp-box div#payjs-expiry-form{
    flex:3;
}
.form-table-box.change li div.pyajp-box div#payjs-cvc-form{
    flex:2;
}

table.responsive.creditregist th:nth-child(1){
    width: 50%;
}
table.responsive.creditregist th:nth-child(2){
    width: 30%;
}
table.responsive.creditregist th:nth-child(3){
    width: 20%;
}


.form-table-box.change li .select-container{
margin: 0;
max-width: 100%;
}
.form-table-box.change li .radio-wrapper{
    padding: 0;
}


.form-table-box.change li .flex-group-box{

    position: relative;
    left:-1em;
}

.form-table-box.change li .radio-wrapper .link-btn.kiyaku{
    margin: 0.5em 0.5em 1em;
}


/* add20221126 */


.scroll-container{
    overflow-y: scroll;
    height: 200px;
    width: 100%;
    border: 1px solid;
}

.form-table-box.change li div.read-text,
.form-table-box.change li div.read-text-complete{
    padding: 0.5em 1em;
    text-align: left;
    font-size: 1rem;
    border: 1px solid;
    border-bottom: none;
}
.form-table-box.change li div.read-text.inactive,
.form-table-box.change li div.read-text-complete{
    display: none;
}

.form-table-box.change li div.read-text,
.form-table-box.change li div.read-text-complete.active{
    display: flex;
    justify-content: space-between;
}

.form-table-box.change li div.read-text span.read-text,
.form-table-box.change li div.read-text-complete.active span.read-complete{
    font-size: 0.9rem;
    padding: 0.25em 0.5em;
    border: 1px solid;
}


#cua3_msg{
    margin: 2em auto 0;
    animation: border-blink .6s ease-in-out infinite alternate;
    padding: 0.5em 1em;
    text-align: center;
    display: block;
    width: 90%;
    font-size: 0.9rem;
}

.form-table-box.change li div.cua3_msg_cont{
    width: 100%;
    margin: 2em auto;
    text-align: center;
}

#cua3_msg.inactive{
    display: none;
}

a.link-btn.start{
    display: block;
    padding: 0.5em;
    margin: 1em 0 1em;
}

.form-table-box.change li div.read-text div:first-child{
    max-width: calc(100% - 70px);
    width: 100%;
}


.fc-event-details{
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

}
.modal__content .modal-close,
.fc-event-details .modal-close{

    cursor: pointer;
    position: absolute;
    z-index: +1;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    background-color: rgba(255,255,255,1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;

}
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
    top: 60px !important; 
    /* ヘッダーの高さ */
}

.fc-toolbar-chunk{
    display: flex;
    align-items: center;
}


.modal__bg{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 5;
}

.modal__content{
    background: #fff;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 6;
    width: 100%;
    max-width: 80vw;
    height: 90vh;

}
.class-status-wrapper{
    position: relative;
    width: 100%;
    height: 100%;

    overflow: scroll;

}



.modal__content h2{
    width: auto;
}

span.class-status.class-td-status.cs-available{
    cursor: pointer;
    
}
.class-ls-ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.class-ls-ellipsis .class-lsname{
    font-size: .75rem;
}

.class-status::before{
    -ms-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    content: attr(data-btnicon);
    font: normal normal normal 2em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right:0.3em;
}

.class-status.class-td-status{
    cursor: pointer;
}

.class-status-wrap{
    padding: 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.class-status-block {
    display: flex;
    max-width: calc(33.3% - 1em);
    width: 100%;

}

.class-status-image{
    height: 100%;
    max-width: 60px;
    width: 100%;
    background-position: center;
    background-size: cover;
}


.class-status-box {
    display: flex;
    flex-direction: column;
    width: calc(100% - 60px);
    padding: 0 0.5em;
    justify-content: flex-start;
}

.class-status-box div{

    border-bottom: 1px solid #ccc;
    padding: 0.25em 0;

}

.class-status-tbtext{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .85rem;
    padding: 0.25em 0;
}

@media screen and (max-width: 1080px) {
    .class-status-block {
        max-width: calc(50% - 1em);
    }
}

@media screen and (max-width: 640px) {

    .class-tbname{
        font-size: .9rem;
    }
    .class-status-tbtext{
        font-size: .75rem; 
    }

    .class-status-wrap{
        padding: 40px 20px 20px;
    }

    .class-status-block {
        max-width: 100%;

    }

    .fc .fc-toolbar.fc-header-toolbar{
        flex-direction: column;
    }

    .fc .fc-toolbar-title{
        font-size: 1rem;
    }


    a.link-btn.cancel{
        margin: 1em 0 0;
    }
    a.link-btn.start{
        margin: 1.5em 0 1em;
    }


    .form-table-box.change li .flex-group-box{

        position: relative;
        left:inherit;
    }
    

    .form-table-box.change li div.pyajp-box{
        display: block;
    }
    .form-table-box.change li.white{
        display: block;
    }

    table.responsive td div.payjs-outer{
        margin: 2.5em 0 1em;
    }

    .form-table-box.change li.white button{
        margin:1em auto 1em;
    }


    div.checkbox-wrapper{
        margin: 0 0 0 2em;
    }


    div.table-wrapper{
        height:500px;
    }

    div.table-wrapper.no-scroll {
        height: 100%;
        overflow: inherit;
    }

    .Reserve0MainContPD.datapicker label{
        margin:0 0.3em;
    }



    input[type='text']#datepicker{
        max-width: 50%;
    }
    button[type="button"].ui-datepicker-trigger{
        display: block;
        max-width: 60px;
        width: 100%;
        margin: 0 0.3em;
    }
    div.table-wrapper .header-fixed-table th, div.table-wrapper .header-fixed-table td {
        width: 110px;
    
    }

    div.table-wrapper.no-scroll .header-fixed-table.no-scroll td a.link-btn::before{
        padding-right: 0;
        font-size: 1rem;
    }
    div.table-wrapper.no-scroll .header-fixed-table.no-scroll th, div.table-wrapper.no-scroll .header-fixed-table.no-scroll td {
        width: inherit;
        font-size: 0.6em;
    }

    div.table-wrapper.no-scroll .header-fixed-table.no-scroll td {
        padding: 0.25em;
    }
    div.table-wrapper.no-scroll .header-fixed-table.no-scroll td a.link-btn,
    div.table-wrapper.no-scroll .header-fixed-table.no-scroll td span.link-btn{
        border-radius: 0;
        width: 100%;
        text-align: center;
        padding: 0.35em 0.05em;
    }
    


    div.table-wrapper.no-scroll .header-fixed-table.no-scroll td a.link-btn span{
        display: block;
        text-align: center;
    }

    div.table-wrapper .header-fixed-table.reserve1 td {
        width: auto !important;
    
    }
    
    div.table-wrapper .header-fixed-table.reserve1 th:first-child,
    div.table-wrapper .header-fixed-table th:first-child {
        width:95px;
    }

    div.table-wrapper.no-scroll .header-fixed-table.no-scroll th:first-child,
    div.table-wrapper.no-scroll .header-fixed-table.no-scroll th:first-child {
        width:inherit;
    }
    

    .table-notice{
    display: block;
    border: 2px solid;
    margin: 0 0 1em;
    padding: 0.5em;
    text-align: center;
    font-size: 0.8em;
    }


    .top-nav li{
        margin: 1em 0.5em 0.5em;
        width: 60px;
    }
    .top-nav li a span.navigation-icon{
        font-size: 1.4em;
    }
    .top-nav li a span.navigation-name{
        font-size: 0.6em;
    }

    .top-nav-style02{
        width: 95%;
        margin: 0 auto;
    }

    .top-nav-style02 li{
        margin: 1em 0 0.5em;
        padding: 0.625em;
    }
    .top-nav-style02 li a span.navigation-icon{
        font-size: 1.4em;
    }
    .top-nav-style02 li a span.navigation-name span.title{
        font-size: 1.2em;
    }
    .top-nav-style02 li a span.navigation-name span.detail-text{
        font-size: 0.9em;
    }


    .table-wrapper .flex-table{
        display: flex;
        align-items: flex-start;
        flex-direction: row;
    }


    /* .table-wrapper .flex-table table th:nth-of-type(1),
    .table-wrapper .flex-table table td:nth-of-type(1){
        display: none;
    }

    .table-wrapper .flex-table table:nth-of-type(1) th:nth-of-type(1),
    .table-wrapper .flex-table table:nth-of-type(1) td:nth-of-type(1){
        display: table-cell;
    } */


    table.responsive.report tr td:nth-child(2){
        width: 100%;
    }

    table.responsive.report td span{
        opacity:0;
        visibility: hidden;
    }

    table.responsive.directdebitregist td,
    table.responsive.contract td,
    table.responsive.subscription td{
        text-align: left;
    }

    div.radio-wrapper input + label,
    .checkbox-wrapper, .select-container{
        margin: 0.5em 0.2em;
    }

    .link-group{
        display: block;
        width: 100%;
    }

    .search form{
        width: 100%;
    }

    .search .CourseList1Block{
        display: block;
        width: 100%;
        /* margin: 0 auto; */
        text-align: center;
    }

    .header-fixed-table th, .header-fixed-table td{
        padding: 0.25em 0.5em;
    }

    .reservelt-image{

        min-height: 100px;
        height: inherit;
    }

    .reservelt-image span{

        font-size: 0.6em;
    }


    ::-webkit-input-placeholder {
        font-size: 0.8em;
    }
    ::-moz-placeholder {
        font-size: 0.8em;
        opacity: 1;
        zoom:1;
    }
    :-ms-input-placeholder {
        font-size: 0.8em;
    }

    #container.login{

        padding:0;

    }

    span.Alert{
        margin: 2em 0 2em;
        display: block;
        text-align: left;
    }

    .login-box{

        -webkit-flex-direction: column; /* Safari */
        flex-direction:         column;

        padding:0;
    }

    .login-left, .login-right{
        padding:0;
        width: 100%;
        height:auto;
        border:none;
    }

    .login-left div{

        margin-bottom: 10px;

    }

    .login-box a.submit-btn.login,button[type="submit"]{

        margin-top:20px;

    }
    button[type="submit"]#regist-card{
        margin:0 auto;
        display: block;
    }
    

    .login-right{

        border-top:1px solid;
        border-bottom:1px solid;
        padding:.625em 0;

    }

    .radio02-input + label{

        margin-right:0;

    }
    .Reserve0MainContPD{

        width:100%;
    }

    .category .fa-chevron-right{
        display: none;
    }

    .category .fa-chevron-down{
        display: block;
    }

}

/* ===============================================================
 * 20260515 追記: チャット機能用CSS (お客様画面)
 * =============================================================== */

/* ヘッダー: チャットアイコンは #logo (flex; justify-content:flex-end) の中に置き、figureの直前に並べる */
.header-chat-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #555;
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
}
.header-chat-link:hover {
    background: #f5f5f5;
    color: #222;
}
.header-chat-link i {
    font-size: 18px;
}
.header-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    background: #d9534f;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
}

/* チャット相手リスト */
.chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.chat-list li {
    border-bottom: 1px solid #ddd;
}
.chat-list li a {
    display: block;
    padding: 10px;
    color: inherit;
    text-decoration: none;
}
.chat-list li a:hover {
    background: #f5f5f5;
}
.chat-list .name {
    font-weight: bold;
}
.chat-list .last {
    color: #666;
    font-size: 0.9em;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-list .unread {
    display: inline-block;
    background: #d9534f;
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    margin-left: 6px;
}
.chat-list .time {
    color: #999;
    font-size: 0.8em;
    float: right;
}

/* 個別チャット画面 */
.chat-thread {
    max-width: 720px;
    margin: 0 auto;
}
.chat-messages {
    background: #f7f7f7;
    padding: 10px;
    height: 420px;
    overflow-y: auto;
    border-radius: 8px;
}
.chat-msg {
    margin: 8px 0;
    clear: both;
    max-width: 75%;
}
.chat-msg .bubble {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 14px;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-msg.mine {
    float: right;
    text-align: right;
}
.chat-msg.mine .bubble {
    background: #cda372;
    color: #fff;
}
.chat-msg.theirs {
    float: left;
}
.chat-msg.theirs .bubble {
    background: #fff;
    border: 1px solid #ddd;
}
.chat-msg .meta {
    font-size: 0.75em;
    color: #888;
    margin: 2px 4px;
}
.chat-msg .bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.chat-msg.theirs .bubble a { color: #1565c0; }
.chat-input {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.chat-input textarea {
    flex: 1;
    min-height: 60px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.chat-empty {
    color: #999;
    padding: 40px;
    text-align: center;
}

/* チャット内ユーティリティ */
.chat-clearfix { clear: both; }
.chat-send-btn-wrap { display: flex; align-items: stretch; }
.chat-send-btn-wrap { display: flex; align-items: center; }
.chat-send-btn-wrap button { white-space: nowrap; }
button.chat-send-btn {
    width: 56px !important;
    min-width: 56px;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-send-btn i { font-size: 20px; transform: rotate(45deg); padding: 0 3px 0 0 !important; margin: 0 !important; }
.chat-search-form { margin-bottom: 15px; }
.chat-search-input { width: 30%; min-width: 200px; padding: 6px; }
.chat-section-heading { margin-top: 20px; }

/* スタッフアバター (お客様画面チャット用) */
.chat-staff-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    margin-right: 10px;
    flex-shrink: 0;
}
.chat-staff-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    border: 1px solid #e0e0e0;
}
.chat-staff-avatar-sm {
    width: 32px;
    height: 32px;
    margin-right: 6px;
}

/* チャット一覧 アバター並びの本文側 */
.chat-list li a {
    display: flex;
    align-items: center;
}
.chat-list-body {
    flex: 1;
    min-width: 0;
}