@charset "utf-8";
:root{
    --contentWidth:1000px;
    --btnColor1:#655F5F;
    --btnColor2:#fff;
    --btnColor3:#FDF525;
    --statusColor1:#68b7a1;
}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.menu-trigger { position: relative; width: 30px; height: 24px;}
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color:var(--btnColor1); border-radius: 4px;}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger span:nth-of-type(2) { top: 10px;}
.menu-trigger span:nth-of-type(3) { bottom: 0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

.clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*/ /*/ height: auto; overflow: hidden; /**/}
.bold { font-weight: bold;}
.copyRight { font-size: 0.75rem; letter-spacing: 0em; padding: 1rem 0 1rem;}

.ac{ text-align:center;}

.mb1rem{ margin-bottom:1rem;}
.mb2rem{ margin-bottom:2rem;}
.mb4rem{ margin-bottom:4rem;}
.mt5px{ margin-top:5px;}
.mt2rem{ margin-top:2rem;}
.mw480{ max-width:480px; width:100%; margin:0 auto;}
.ml{ margin-left:1em;}


* { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body { text-align: center; font-family: "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif; line-height: 1.7; color: #000; letter-spacing: 0.1em; background:#fff;}

img { border: none; vertical-align: middle; max-width: 100%;}
img { width: auto\9; height: auto\9;}
a { text-decoration:underline;}
a:hover { text-decoration: none;}
.avenir{font-style: italic; font-weight: lighter;}
.spOnly { display: none;}

@media screen and (max-width: 800px) {
    .ml{ margin-left:0;}

.pcOnly { display: none;}
.spOnly { display: block;}

.calendarHeader h2.avenir{font-size:1.4rem;}
}




.baseBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:#fff; text-decoration:none; background:var(--btnColor1); padding:1rem 2rem 0.9rem; border-radius:8px; border:none; white-space: nowrap; vertical-align: bottom;}
.baseBtn:hover{ opacity:0.8; color:#fff;}

.whiteBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:#fff; border:1px solid #fff; text-decoration:none; padding:0.7rem 2rem 0.6rem; border-radius:50px; white-space: nowrap;}
.whiteBtn:hover{ opacity:0.8;}

.yellowBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:#655F5F; text-decoration:none; background:var(--btnColor3); padding:1rem 2rem 0.9rem; border-radius:8px; border:none; white-space: nowrap; font-weight:bold; vertical-align: bottom; min-width:136px;}
.yellowBtn:hover{ opacity:0.8;}

.closeBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:#655F5F; padding:1rem 0rem 0.9rem; border-radius:8px; background:#eee; white-space: nowrap; font-weight:bold; vertical-align: bottom; min-width:136px; text-decoration:none;}
.closeBtn:hover{ opacity:0.8;}

.adminBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:var(--btnColor3); text-decoration:none; padding:0.7rem 2rem 0.6rem; border-radius:50px; border:none; white-space: nowrap; border:var(--btnColor3) 1px solid ;}
.adminBtn:hover{ opacity:0.8;}

.ngBtn { display: inline-block; line-height: 1; font-size: 0.8rem; color: #ccc; text-decoration: none; background: #eee; padding: 1rem 2rem 0.9rem; border-radius: 8px; border: none; white-space: nowrap; letter-spacing:0; vertical-align: bottom;}

#reservationForm{ display:inline-block; margin-right:1rem;}
.backBtn{ display:inline-block; line-height:1; font-size:0.8rem; color:#fff; text-decoration:none; background:#b2afaf; padding:1rem 2rem 0.9rem; border-radius:8px; border:none; white-space: nowrap; vertical-align: bottom;}
.backBtn:hover{ opacity:0.8; color:#fff;}

.maxDisp{ display:inline-block; line-height:1; font-size:0.8rem; color:#333; text-decoration:none; background:#eee; padding:1rem 2rem 0.9rem; border-radius:8px; vertical-align: bottom;}



.headerMenu{ position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding:0.75rem 0 0.5rem; background: #000; z-index: 9999; box-shadow: 0 5px 5px rgba(0, 0, 0, .1); color:#fff;}
.pageTitle{ font-size:0.8rem; position:absolute; bottom:1rem; left:1rem;}

.memberNav{ padding-right:1rem; text-align:right;}
.memberNav li{ display:inline-block; padding:0 0 0 10px;}



.headerWrapper{ max-width:var(--contentWidth); width:100%; margin:0 auto; text-align:left; position:relative; padding:calc(60px + 2rem) 0 0;}
.headerWrapper a{ display:inline-block;}

.forReaervationNote{ position:absolute; top:calc(60px + 1rem); right:0; font-size:0.8rem;}
.forReaervationNote a{ color:var(--btnColor1); display:inline-block; padding:0 0.1em;}
.logoutWrapper{ position:absolute; top:calc(60px + 1rem); right:0; z-index:9999;}
.logoutWrapper a{ color:var(--btnColor1); font-size:0.8rem; letter-spacing:0;}
.logoutWrapper span{ color:var(--btnColor1); font-size:0.8rem; padding:0 1em 0 0; display:inline-block;}

.calendarHeader h2{ font-size:1.8rem;}
.calendarHeader p{ margin:5px auto 1rem;font-size:0.8rem;}

.calendarFlex{ max-width:var(--contentWidth); margin:2rem auto 0; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content:space-around;}
.calendarFlex > div{ width:100%;}

.dayTriger{ cursor: pointer; font-size:0.8rem;}
.dayTriger.on{ background:var(--btnColor1); color: #fff; padding:5px 0;}
.dayTriger.off{ color:var(--btnColor1); padding:5px 0; /*background: linear-gradient(0deg, rgba(101,95,95,0.1) 0%, rgba(255,255,255,1) 50%); position:relative; border-bottom:1px solid var(--btnColor1);*/}
/*
.dayTriger.off::after{ content:""; position:absolute; bottom:0; right:0; height:50%; width:1px; background: linear-gradient(0deg, rgba(101,95,95,1) 0%, rgba(101,95,95,0) 50%);}
.dayTriger.off:first-child:before{ content:""; position:absolute; bottom:0; left:0; height:50%; width:1px; background: linear-gradient(0deg, rgba(101,95,95,1) 0%, rgba(101,95,95,0) 50%);}
*/
.dayTriger.off:hover{ background:var(--btnColor1); opacity:0.5; color: #fff; padding:5px 0;}

.dayWrapper{ max-width:var(--contentWidth); width:100%; margin:0 auto 2rem;}
.dayWrapper.on{ display:block;}
.dayWrapper.off{ display:none;}

.eventClassBox{ margin:1rem 0; padding:1rem 1rem; background:#fff; border-bottom:1px solid #ccc; display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
.eventEmptyBox{ margin:1rem 0; padding:1rem 0; background:#fff; border-bottom:1px solid #ccc;}

.eventEyecatch{ text-align:left; width:10%;}
.eventTime{ font-weight:bold; font-size:1.2rem; width:20%; text-align:center;}
.eventDisp1{ text-align:left; width:30%; padding:0 1em;}
.eventDisp2{ text-align:left; width:20%; padding:0 1em;}
.eventToBtn{ width:20%;}

.eventEyecatch img{ border-radius:300px;}

.eventDetailWrapper{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; max-width:var(--contentWidth); margin:4rem auto;}
.eventPrimary{ width:40%; text-align:center; padding:0 1rem;}
.eventSecondary{ width:60%; text-align:left; padding:0 1rem;}

.eventDetailContent .icon{ display:block; height:1.8rem; width:auto; margin-bottom:1em;}
.eventDetailDate{ margin:2rem 0; line-height:1;}
.eventDetailDate .icon{ display:inline-block; height:1.8rem; width:auto; padding-right:1em; vertical-align:bottom;}
.eventDetailDate .time{ font-weight:bold; font-size:1.4rem;}
.eventDetailDate .day{ font-weight:bold; font-size:1rem; padding:0 1em 0 0;}
.eventDetailPrice{ margin:2rem 0;}
.eventDetailPrice .price{ font-weight:bold; font-size:1.4rem;}
.eventDetailPriceNote{ font-size:0.8rem; margin:4px 0 0;}
.eventDetailPriceNote table td{ padding-right:1em;}

.eyecatch{ margin-bottom:2em;}
.eyecatch img{ border-radius:300px; max-width:240px; width:100%; margin:0 auto;}

.subImages ul{ padding:0; display:flex; gap:5px; justify-content: space-between;}
.subImages ul li{ width:50%;}

p.eventName{ font-size:1.4rem; margin-bottom:10px;}
p.eventTeacher{ font-size:1rem; margin-bottom:2rem;}

#hamburger{ display:none;}

@media screen and (max-width: 800px) {
    .baseBtn{ min-width:180px;}
    .whiteBtn{ min-width:180px;}
    .yellowBtn{ min-width:180px;}
    .closeBtn{ min-width:180px;}
    .adminBtn{ min-width:180px;}

    .maxDisp{ margin-bottom:0;}

    .pageTitle{ bottom:auto; top:1rem;}
    .headerMenu{ width: 100%; height: 100%; padding:0.75rem 0 0.5rem; box-shadow:0 0 0 rgba(0, 0, 0, 0); transform: translateX(120%); transition: all .5s;}
    .headerMenu.on{ transform: translateX(0);}

    .headerWrapper{ padding:1rem 1rem 2rem;}
    .headerWrapper h1 img{ max-width:120px;}
    .memberNav{ padding:4rem 1rem 1rem; box-shadow:0 0 0 rgba(0, 0, 0, 0); z-index:9999; transition: all .5s; text-align:center;}
    .memberNav li{ display:block; padding:0 0 1rem; font-size:0.8rem;}
    .memberNav li .baseBtn{  padding:0.5rem 2rem 0.5rem 0; color:var(--btnColor1); background: transparent;}
    .logoutWrapper{ position:fixed; top:10px; right:4rem; line-height:1.2;}
    .logoutWrapper > span{ display:block;}

    .forReaervationNote{ position:static; text-align:center; margin:1rem 0 0;}

    .calendarFlex{ width:100vw; overflow:hidden;}
    .calendarFlex > div{ font-size:0.6rem;}
    .dayTriger.on{ padding:5px 5px;}
    .dayTriger.off{ padding:5px 5px;}

    #hamburger{ display:block; position: fixed; top:1rem; right:1rem; z-index:10000;}

    .eventClassBox{ flex-direction: column; padding-bottom:2rem;}
    .eventEyecatch{ text-align:center; width:50%;}
    .eventTime{ font-size:1rem; width:100%; margin-top:1em;}
    .eventDisp1{ text-align:center; width:100%; margin-top:1em;}
    .eventDisp2{ text-align:center; width:100%;}
    .eventToBtn{ width:100%; margin-top:1em;}

    .eventDetailWrapper{ flex-direction: column; margin:0 auto;}
    .eventPrimary{ width:100%;}
    .eventPrimary .eyecatch{ width:50%; margin:0 auto;}
    .eventPrimary p.eventName{ margin-top:1rem; margin-bottom:0;}
    .eventPrimary p.eventTeacher{ margin-bottom:1rem;}

    .eventSecondary{ width:100%;}
    .eventDetailContent .icon{ height:1.4rem;}
    .eventDetailDate .icon{ height:1.4rem; padding-right:5px;}
    .eventDetailDate .time{ font-weight:bold; font-size:0.8rem;}
    .eventDetailDate .day{ font-weight:bold; font-size:0.8rem; padding:0 1em 0 0;}
    .eventDetailPrice{ margin:2rem 0;}
    .eventDetailPrice .price{ font-weight:bold; font-size:1rem;}

    .eventDetailReservation{ text-align: center;}

    #reservationForm{ display:block; margin-bottom:1rem; margin-right:0;}
}

#companionWrapper{ margin:2rem 0 0; height:0; transition: all .5s; overflow: hidden;}
#companionWrapper.texareaOpen{ height:auto;}
#companion{ margin:5px 0 2rem;}
.companionLabel{ font-size:1rem; font-weight:bold;}
.submitList > li{ display:inline-block; margin:0 1rem 1rem 0;}
.submitList > li:last-child{ margin:0;}

.reservedWrapper{ margin:2rem auto 4rem; max-width: var(--contentWidth);}
.reservedWrapper.mw480{ max-width:480px;}
.reservedWrapper h2{ text-align:left; font-size:1rem; border-bottom: 1px solid #ccc; padding-bottom:10px;}
.reservedWrapper h2 .icon{ display:inline-block; height:1.8rem; width:auto; margin-bottom:1em; padding-right:1em;}
.reservedTable{ display:flex; justify-content: space-between; align-items: center; padding:1rem 0; border-bottom: 1px solid #ccc;}
.reservedDay{ flex-basis:15%; text-align:left; font-weight:bold;}
.reservedName{ flex-basis:20%; text-align:left;}
.reservedTeacher{ flex-basis:10%; text-align:left;}
.reservedNumber{ flex-basis:10%; text-align:left;}
.statusText{ display:block; padding:10px 1rem 10px; font-size:0.8rem; line-height:1; margin:2rem auto; color:#fff;}
.statusText.ok{ background:#3b73e0;}
.statusText.ok span{ background:url(../storage/img/icon_ok.png) 0 center no-repeat; background-size:3rem; display:inline-block; padding:1.2rem 0 0.8rem 4rem;}
.statusText.stop{ background:#e03b3b;}
.statusText.stop span{ background:url(../storage/img/icon_stop.png) 0 center no-repeat; background-size:1.8rem; display:inline-block; padding:1.2rem 0 0.8rem 4rem;}
.emptyWrapper{ margin:2rem auto 0;}

.classListPageImage{ text-align: center; margin:1rem auto 1rem; max-width:240px;}

.classBtnWrapper{ max-width:var(--contentWidth); width:100%; margin:0 auto 2rem;}
.classBtnList{ margin:1rem auto 0;}
.classBtnList > li{ display: inline-block; width:50%; padding:0 0.5rem 1rem;}
.classBtnList > li > a{ display:block; line-height:1; border-radius:8px; padding:2rem 0; text-decoration:none; color:#545454; font-size:0.8rem; position:relative;}
.classBtnList > li > a.class1{ background:#abb58e;}
.classBtnList > li > a.class1:hover{ background:hsl(75, 21%, 73%);}
.classBtnList > li > a.class2{ background:#aec7b6;}
.classBtnList > li > a.class2:hover{ background:hsl(139, 18%, 83%);}
.classBtnList > li > a.class3{ background:#aca2ad;}
.classBtnList > li > a.class3:hover{ background:hsl(295, 6%, 76%);}
.classBtnList > li > a.class4{ background:#e3e0b3;}
.classBtnList > li > a.class4:hover{ background:hsl(56, 46%, 90%);}
.classBtnList > li > a::after { content: ""; position: absolute; top: 50%; right:2rem; width: 0.8rem; height: 0.8rem; transform: rotate(45deg) translate(-50%,0); border: 1px solid; border-color: #000 #000 transparent transparent; transition: all .5s;}
.classBtnList > li > a:hover::after { right: 2.5rem;}


.classBtnList > li > span{ display:block; line-height:1; border-radius:8px; padding:2rem 0; text-decoration:none; color:#545454; font-size:0.8rem; position:relative; cursor: pointer;}
.classBtnList > li > span.class1{ background:#abb58e;}
.classBtnList > li > span.class1:hover{ background:hsl(75, 21%, 73%);}
.classBtnList > li > span.class2{ background:#aec7b6;}
.classBtnList > li > span.class2:hover{ background:hsl(139, 18%, 83%);}
.classBtnList > li > span.class3{ background:#aca2ad;}
.classBtnList > li > span.class3:hover{ background:hsl(295, 6%, 76%);}
.classBtnList > li > span.class4{ background:#e3e0b3;}
.classBtnList > li > span.class4:hover{ background:hsl(56, 46%, 90%);}
.classBtnList > li > span::after { content: ""; position: absolute; top: 50%; right:2rem; width: 0.8rem; height: 0.8rem; transform: rotate(45deg) translate(-50%,0); border: 1px solid; border-color: #000 #000 transparent transparent; transition: all .5s;}
.classBtnList > li > span:hover::after { right: 2.5rem;}


@media screen and (max-width: 800px) {
    .reservedWrapper{ margin:2rem 1rem 4rem;}
    .reservedWrapper.mw480{ max-width:none; width:auto;}
    .reservedTable{ flex-direction: column; gap:10px;}
    .reservedDay{ text-align:center;}

    .companionLabel{ font-size:0.8rem;}

    .submitList > li{ display:block; margin:0 0 1rem;}
    .submitList > li:last-child{ margin:0;}

    .classListPageImage{ padding:0 1rem; max-width:none;}
    .classListPageImage img{ width:50%; margin:0 auto; height:auto;}
    .calendarHeader h2.classListTitle{ font-size:1.4rem;}

    .classBtnList{ padding:0 1rem;}
    .classBtnList > li{ display:block; width:100%; padding:0 0 10px;}

    .classBtnList > li > span{ padding:1rem 0;}
    .classBtnList > li > span::after { right:1rem; width: 0.6rem; height: 0.6rem;}
    .classBtnList > li > span:hover::after { right:1.5rem;}
}




input[type=text]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=email]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=password]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=number]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:240px; width:100%;}
textarea{ border:1px solid #ccc; background:#fff; padding:0.5rem; width:100%; height:6em;}
.selectList{
    position: relative;
    display: inline-block;
    width: 5rem;
    border: 1px solid var(--btnColor1);
    background: #fff;
    margin:0 0.5rem;
}
.selectList:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        display: block;
        width: 0;
        height: 0;
        margin: -2px 0 0 0;
        border: 5px solid transparent;
        border-top: 7px solid var(--btnColor1);
}
.selectList select{
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 5rem;
    border: none;
    background: transparent;
    padding:1rem;
    box-sizing:border-box;
}

.submitBtnWrapper{ margin:2rem auto 0;}
.submitBtnWrapper button.success{ background:#3399FF; color:#fff; display:inline-block; padding:10px;}

.pagenationWrapper{ text-align:center;}
.pagenationWrapper > nav{display:inline-block; margin:0 auto;}

.managerBaseWrapper{ max-width:var(--contentWidth); width:100%; margin:0 auto; padding:2rem 0;}
.managerTableWrapper{ max-width:var(--contentWidth); width:100%; margin:0 auto; padding:2rem 0;}
.managerTableWrapper table{ margin:2rem auto; background:#fff; font-size:0.8rem; width:100%;}
.managerTableWrapper table tr:nth-child(odd){ background:#f7f7f7;}
.managerTableWrapper table th{ text-align:left; padding:0.5rem 1rem; background:#eee; white-space: nowrap;}
.managerTableWrapper table td{ text-align:left; padding:0.5rem 1rem; vertical-align: top;}
.managerTableWrapper table td.ar{ text-align:right;}
.managerTableWrapper table td img{ height:200px; width:auto;}

.eventCreateWrapper{ background: #fff; padding:2rem 0; max-width:var(--contentWidth); width:100%; margin:0 auto;}



.formFlex{ display:flex; align-items: center; padding:1rem 0 0;}
.formFlex > div:nth-child(1){ flex-basis:30%; text-align:right; padding:0 2rem 0;}
.formFlex > div:nth-child(2){ flex-basis:70%; text-align:left;}

.upNote{ margin-top:1em;}

@media screen and (max-width: 800px) {
    #origin_date{ margin:0 1rem; width:calc(100% - 2rem); font-size:16px;}
}


.reservedPeopleWrapper{ width:100%; max-width:var(--contentWidth); margin:4rem auto 4rem;}
.reservedPeopleWrapper table{ margin:2rem auto; background:#fff; font-size:0.8rem; width:100%;}
.reservedPeopleWrapper table tr:nth-child(odd){ background:#efefef;}
.reservedPeopleWrapper table th{ text-align:left; padding:0.5rem 1rem; background:#eee; white-space: nowrap;}
.reservedPeopleWrapper table td{ text-align:left; padding:0.5rem 1rem; vertical-align: middle;}
.reservedPeopleWrapper.popup{ margin:0 auto 2rem;}
.reservedPeopleWrapper.zeroPopup{ margin:2rem auto 2rem;}

.submitBtnWrapper{}
.submitBtnList > li{ display:inline-block; padding:0 0.5rem; vertical-align:top;}

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




.authContentWrapper{ margin:2rem auto; text-align:left; max-width:480px; width:100%;}

.authContentWrapper h2{ text-align:center; margin-bottom:2rem;}
.registerNote{ text-align:center; margin:0 auto 2rem; font-size:0.8rem;}

.authContentWrapper dl{ display:flex; flex-direction:column; justify-content: space-between; align-items: center; width:100%; text-align:left; margin-bottom:1rem;}
.authContentWrapper dl dt{ width:100%; font-weight:normal; margin-bottom:5px;}
.authContentWrapper dl dd{ width:100%;}
.authContentWrapper dl dd input{ width:100%; border:1px solid #ccc; border-radius:0; padding:0.5em;}
.authSubmit{ text-align: center; margin:2rem auto 0;}
.authPassForget{ margin:1rem auto 0;}
.authPassForget a{ font-size:0.8rem;}

.authCheckBox{ margin:2rem auto 0; text-align:center;}
input[type=radio],
input[type=checkbox]{ display:none;}
.form-check-label{ position:relative; display:inline-block; padding:0 0 0 1.8em; cursor:pointer; line-height:1;}
.form-check-label::after{content:''; position:absolute; top:50%; left:0; display:block; line-height:1; transform: translate(0,-50%); width:16px; height:16px; border: 2px solid #333;}
.form-check-label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    line-height: 1;
    transform: translate(0, -50%);
    width: 16px;
    height: 16px;
    content: "";
    opacity: 0;
    background:var(--btnColor1);}
input[type=radio]:checked + .form-check-label:before { opacity:1;}
input[type=radio]:checked + .form-check-label:after { border: 2px solid var(--btnColor1);}
input[type=checkbox]:checked + .form-check-label:before { opacity:1;}
input[type=checkbox]:checked + .form-check-label:after { border: 2px solid var(--btnColor1);}
.select {
    background:#eee;
    height: 40px;
    width: 80%;
    max-width:300px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

.select::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
border-bottom: 2px solid #333;
border-right: 2px solid #333;
z-index: -1;
}

select {
/* 初期化 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: none;
border: none;
color: #333;
font-size: 16px;
width: 100%;
height: 100%;
padding: 0 10px;
}

@media screen and (max-width: 800px) {
    .authContentWrapper{ margin:0 auto 2rem;}
    .authContentWrapper dl{ flex-direction: column; max-width:380px; width:100%; padding:0 1rem; margin:1rem auto 0;}
    .authContentWrapper dl dt{ text-align:left; padding-right:0; margin-bottom:5px;}
    .authContentWrapper dl dd{ text-align:left; width:100%;}
}

.userTable{ margin:2rem auto 2rem;}
.userTable table{ max-width:680px; width:100%; margin:0 auto;}
.userTable table th,.userTable table td{ padding:10px;}
.userTable table th{ width:30%;}
.userTable table td{ text-align:left;}
.updateBtnWrapper{ margin:2rem auto 0;}

.formNote{ text-align: center; font-size:0.8rem; margin:0 auto 2rem;}

.requiredBtn{ display:inline-block; line-height:1; padding:0.25rem 0.5rem; background:#e26459; border-radius:5px; color:#fff; font-size:0.75rem; margin:0.25rem 0 0 1rem; vertical-align: top;}

.otheCheckWrapper{ margin:2rem auto 2rem; text-align:center;}
.otheCheckWrapper > p{ font-size:0.8rem;}
.otheCheckWrapper > ul{ margin-top:1rem;}
.otheCheckWrapper > ul > li{ display:inline-block;}
.otheCheckWrapper > ul > li:not(:first-child){ padding-left:1rem;}

.searchBox{ margin:1rem auto 0;}
.bottomBoxWrapper{ margin:2rem auto;}
#calCheckIcon{ max-width:80px; width:100%; margin:1rem auto 5px;}
#origin_date{ max-width:300px;}

.text-size-s{ font-weight:bold; font-size:0.8rem; letter-spacing:0;}
.minText{ font-weight:bold; font-size:1rem;}

.calBackWrapper{ margin:0 auto 2rem;}

@media screen and (max-width: 800px) {
    .formNote{ padding:0 1rem; text-align:left;}
    .formNote br{ display:none;}
    .otheCheckWrapper{ margin:2rem auto 2rem;}
    #calCheckIcon{ max-width:60px;}
}




.iconInInput{ position:relative;}
#visibleBtn{ position:absolute; top:0.5rem; right:0.3rem; height:1.8rem; width:auto; cursor: pointer;}
#visibleBtn2{ position:absolute; top:0.5rem; right:0.3rem; height:1.8rem; width:auto; cursor: pointer;}

.siteBackWrapper{ margin:4rem auto 0; text-align: center;}
.siteBackWrapper > a{ display:inline-block; padding:3rem 1.4rem 3rem; background:var(--btnColor3); border-radius:100px; position:relative;}
.siteBackWrapper > a > span{ position:absolute; top:1rem; left:50%; transform: translate(-50%,0); font-size:0.8rem; text-decoration:none; display:inline-block; margin-bottom:10px; letter-spacing:0; color:#655F5F;}
.siteBackWrapper > a > img{ width:120px; height:auto;}
.siteBackWrapper > a:hover{ opacity:0.8;}

.resetWrapper{ margin:0 auto; padding:0 1rem;}
.resetTitle{ font-size:1.8rem; margin-bottom:2rem;}

.error{color:#e26459; display:block; margin:1rem 0 2rem;}
.passNote{ font-size:0.8rem; margin:0 0 0; color:#655F5F;}
.resetNote{font-size:0.8rem; margin:0 0 1rem;}
.invalid-feedback strong{ margin:1rem 0 1rem; display: inline-block; color:#e26459; font-size:1rem;}
.alert-success{ color: #68b7a1; font-size:1rem; font-weight:bold;}

.formOff{ display:none;}
.verifiNote{ margin:0 auto 1rem;}
.registerOkWrapper{ max-width: var(--contentWidth); margin:0 auto; width:100%;}
.verifiCheck{ font-size:0.8rem;}
.verifiTitle{ font-size:1rem; font-weight:bold;}
.verifiText{ text-align:left; font-size:0.8rem;}
.verifiBox{ margin:0 auto 2rem; padding:1rem; border:1px solid var(--btnColor1); max-width:480px; width:100%;}
.nextText{ text-align:center; font-size:0.8rem;}
.back-to-class{ cursor: pointer;}


.mCalendarWrapper{}
.monthTable{ width:100%; max-width:1000px; margin:2rem auto; border-top:2px solid #fff; border-left:2px solid #fff;}
.monthTable th{ padding:10px 1rem; text-align:center; background:#f7f7f7; font-weight:normal; border-bottom:2px solid #fff; border-right:2px solid #fff; width:14.285714%;}
.monthTable th.satColor{ background:#dfedf3;}
.monthTable th.sunColor{ background:#f8eadd;}

.monthTable td{ text-align:center; border-bottom:2px solid #fff; border-right:2px solid #fff;}
.dayHeader{ padding:10px; letter-spacing:0;}
.dayHeader.todayFlag span{ display: inline-block;  background:rgba(253, 245, 37, 0.3); padding:0 2px; border-radius:50px;}
.timeList{ padding:0 10px;}
.timeList.todayFlag{ background:rgba(253, 245, 37, 0.3);}
.offDay{ padding:10px 10px;}
.nothingSign{ margin:10px auto;}

.fromTimeLink{ margin:0 auto 10px;}
.fromTimeLink a{ color:#3b73e0; display:block; border:1px solid #3b73e0; text-decoration: none; background: #fff;}
.fromTimeLink a:hover{background:#3b73e0; color:#fff;}
.fromTimeLink span{ color:#3b73e0; display:block; border:1px solid #3b73e0; text-decoration: none; background: #fff; cursor: pointer;}
.fromTimeLink span:hover{background:#3b73e0; color:#fff;}
.fromTimeLink.cancelFlag a{ color:#e26459; display:block; border:1px solid #e26459; text-decoration: none;}
.fromTimeLink.cancelFlag a:hover{background:#e26459; color:#fff;}
.fromTimeLink.cancelFlag a span{ display:block; font-size:0.75rem; letter-spacing:0;}
.fromTimeLink.reservedFlag > div{ color:#46ae73; border:1px solid #46ae73; text-decoration: none;}
.fromTimeLink.reservedFlag > div > span{ display:block; font-size:0.75rem; letter-spacing:0;}
.fromTimeLink.zeroFlag a{ color:#aaaaaa; display:block; border:1px solid #aaaaaa; text-decoration: none;}
.fromTimeLink.zeroFlag a:hover{background:#aaaaaa; color:#fff;}
.fromTimeLink.zeroFlag span{ color:#aaaaaa; display:block; border:1px solid #aaaaaa; text-decoration: none; cursor: pointer;}
.fromTimeLink.zeroFlag span:hover{background:#aaaaaa; color:#fff;}

.popupCover{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .5); cursor: pointer; z-index:4900;}
.popupRearvationPeople{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background:#fff; padding:0 2rem 2rem; border:5px solid #333; z-index:4999;}

.calendarHeader h2.selectTitle{ font-size:1.4rem;}
.monthTitle{ font-size:1.4rem;}
.monthTitle span{ display:block; font-size:1rem;}
.moveBtnsWrapper{ max-width:1000px; margin:2rem auto 0; width:100%; display:flex;justify-content: space-between; align-items:end;}
.prevBtn:hover{ opacity:0.8; cursor: pointer;}
.nextBtn:hover{ opacity:0.8; cursor: pointer;}

.hide{ display:none;}
.hide.dispBlock{ display:block;}

#calendarPoint{ padding-top:6rem; margin-top:-4rem;}
#cancelWaitingOpneBtn{ margin:2rem auto; cursor: pointer; padding-left:1rem; padding-right:1rem;}
.noClassWrapper{ margin:1rem auto;}
.classNameInCalendar{ font-size:1.0rem; line-height:1.4;}
.siteSign{ text-align:center;font-size: 1.4rem; margin-bottom:2rem;}
.siteSign::before{ content:"\\ ";}
.siteSign::after{ content:" /";}
.wakuColorInfo{font-size:1.0rem;}
.blueColor{ color:#3b73e0;}
.redColor{ color:#e26459;}
.reserveTimeInfo{ font-size:0.8rem;}

@media screen and (max-width: 800px) {
    #calendarPoint{ padding-top:2rem; margin-top:-2rem;}

    .siteBackWrapper > a{ transform: scale(0.8);}
    .resetTitle{ font-size:1.4rem;}
    .verifiNote{ font-size:0.8rem;}

    .registerOkWrapper{ padding:0 1rem;}

    .moveBtnsWrapper{ margin:1rem auto 0; padding:0 1rem;}
    .calendarHeader h2.selectTitle{ font-size:1.0rem;}
    .monthTable{ border-top:1px solid #fff; border-left:1px solid #fff;}
    .monthTable th{ border-bottom:1px solid #fff; border-right:1px solid #fff;}
    .monthTable td{ border-bottom:1px solid #fff; border-right:1px solid #fff;}
    .monthTitle{ font-size:1.0rem;}
    .monthTitle span{ font-size:0.8rem;}
    .monthTable{ font-size:0.7rem; letter-spacing:0;}
    .monthTable th{ padding:10px 0;}
    .dayHeader{ padding:10px 0;}
    .timeList{ padding:0 0;}
    .offDay{ padding:10px 0;}

    .siteSign{ font-size: 1.0rem; margin-bottom:0; margin-top:1rem;}
    .wakuColorInfo{font-size:0.8rem;}
    .classNameInCalendar{ font-size:0.8rem;}

    .popupRearvationPeople{ width:100%; overflow:auto; padding:0 1rem 1rem; border:2px solid #333;}
}


.gCalWrapper{ max-width:1000px; margin: 2rem auto 4rem;}
.gCalNote{ display:none;}
.gCalMeta{ font-size:0.8rem;}
.gCalScroll{ position:relative;}
/*
.gCalScroll::after{ content:""; position: absolute; bottom:0; left:0; height:calc(100% - 5em); width:100%; background:rgba(0, 0, 0, 0);}
*/
.gCalScroll iframe{ width:100%;}
.blockTitle{ margin:0 auto 0;}
.blockTitle::before{content:"\\\\"; margin-right:5px;}
.blockTitle::after{content:"//"; margin-left:4px;}

@media screen and (max-width: 800px) {
    .gCalWrapper{ margin:0 auto 4rem;}
    .gCalNote{ display:block; font-size:0.8rem;}
    .gCalScroll{width:100%; overflow:auto; margin-top:1rem;}
/*
    .gCalScroll::after{ width:1100px;}
*/
    .gCalScroll iframe{ width:1100px; height:480px;}
    .blockTitle{ font-size:0.8rem;}
}