@media(max-width:980px) {
.wrap{ width: 98%;}
#middle .wrap{ margin-top: -11px;}
#middle .wrap::before{ border-bottom: 10px solid #828282; border-left: 10px solid transparent; left: -10px;}
#middle .wrap::after{ border-bottom: 10px solid #828282; border-right: 10px solid transparent; right: -10px;}
.trainingTimes{ margin: 0 auto 60px;}
.top-navi ul li.logo{ margin-right: 20px;}
.top-navi ul li a{ padding: 0px 20px 0px;}
}

@media(max-width:800px) { /*768*/
#header h1 br{ display:none;}
#header h1{ font-size: 1.7em; padding: 0 10px; }
#header h2{ font-size: 1.3em; padding: 0 10px; margin: 0 0 8px; text-align: center;}
#header h1 span{ font-size: .65em;}
.top-navi ul li.logo{ max-width: 125px; margin-right: 2px; padding-top: 6px;}
.top-navi ul li.arrow::before{ bottom: -28px;}
#header .right1{ float:none; width: auto;}
#header .left1{ float:none; margin:0 auto; padding-top:20px;}
#header .left1 img{ z-index:2; position:relative;}
#header .left1:after{ top:0px; right:0; left:0; content:''; margin:0 auto; width:22px; height:40px; background:url(../images/arrow-up.png) no-repeat ;}
.right{ float: none; margin:0 auto; max-width: none;}
.left{ float:none; max-width: none; max-width: none; margin-bottom:20px;} 
.ebook{ width:220px;}
.timer { display:block;}
.timer1{ display:none;}
.calendar-box{ width:100%; max-width:448px; margin:0 auto;}
.calendar-box ul p.t2{ idth:79%;}
.book{ display:block;}
.conbox .boxL{ float:none; margin:0 auto 20px; }

.boxR{ float: none; margin-right: 0;}
#middle .wrap h1 br{ display:none;}
#middle .wrap{ padding: 0 30px 40px;}
.button.right{ float: none; padding-top: 0; max-width: inherit; margin: 0 0 0;}
.boxL1{ float: none; }
.top-navi ul li.first a{ border-left: none;}
.top-navi ul li{ font-size: .9em; line-height: 1.3em;}
.top-navi ul li a{ padding: 6px 10px 8px;}
.trainingTimes{ width: 97%; margin: 0 auto 30px; padding: 20px 0 0px;}
.trainingTimes .boxL{ float: none; margin: 0 auto;}
.trainingTimes .boxR{ float: none; max-width: none; margin-bottom: 20px;}
.hl-box p {
	font-size: 12px !important;
}

.trainingTimes h3 br{ display:none;}
.trainingTimes h3{ font-size: 1.1em;}
.conbox h1 br{ display:none;}
.button a, .button button{ font-size: 1.6em;}
.button a.arrow::before{ display:none;}
.button a.arrow::before, .button a.arrow::after{ top: 13px; }
#middle .wrap::before,#middle .wrap::after{ display:none;}
.w210, .w270{ max-width: 180px !important;}
.moblink{ display:block; margin: -14px 0 26px !important;}
p.t2{ font-size: 1.3em;}
.midbox{ margin: 0 -30px 30px; padding: 20px 30px;}
.midbox .conR{ max-width: 490px;}
.midbox .imgL{ max-width: 196px;}
.mob { display: block!important; }
.pc{ display: none; }
.imgL2 { float: none; margin: 0 auto; max-width: 250px; }
.imgL2 img{ margin: 0; }
.midbox{ margin: 0 -20px 30px; padding: 20px 20px;}
.midbox .imgL{ float: none; margin: 0 auto;}
.midbox .imgL img{ margin: 10px 0 -20px;}
.midbox .conR{ float: none; max-width: none;}
.imgL{ display:none; }
.imgL.mob{ display: block; }
.imgL1 { float: none; margin: 0 auto; }
.button.dbtn:before, .button.dbtn:after {
	display:none;
}
}

@media(max-width:650px) { /*600*/
.list{ width:100%;}
.ebook{ float:none; margin:0 auto 10px;}
.righr-con{ float:none; width:auto;}
#middle .wrap{ padding: 0 20px 20px;}
#middle .wrap h1{ font-size: 1.4em; }
#middle .wrap h1 br{ display:none;}
#middle .trainingTimes p.date{ font-size: 16px;}
#middle .wrap h2.sub{ font-size: 1.2em;}
.conbox h1{ font-size: 1.2em;}
.conbox{ margin: 30px auto 0;}
.top-navi{ padding: 8px 0 6px;}
.top-navi ul li{ font-size: 1em;}
.top-navi ul li a span{ font-size: .65em;}
.top-navi ul li a{ padding: 3px 10px 0;}
.top-navi ul li.arrow::before{ bottom: -27px;}
.top-navi ul li.logo{ max-width: 100px!important; display: none; margin:0 auto!important;}
.top-navi ul li.logo.stl{ display:block;}
.trainingTimes .boxL img{ max-width: 250px;}
.trainingTimes h3{ font-size: 1em;}
.trainingTimes h3 span{ font-size: 1.1em; line-height: normal; display: block;}
p.t2{ font-size: 1.2em; margin: 40px -20px 20px !important; line-height: 1.3em !important;}
.button a.arrow::before, .button a.arrow::after{ display:none; }
#header h2{ font-size: 1.1em;}
.qa h4 { font-size: 1.2em; }
li.mid-strip {
    padding: 5px 10px !important;
}
#hidden-content2 a{ font-size:1.2em; padding:10px;}
}

@media(max-width:500px) { /*480*/
body{ font-size: 1em;}
#header h1{ font-size: 1.3em; margin: 20px 0 6px;}
#header h1 br{ display:none;}
#header h2{ padding: 0 30px; font-size: 1em; font-weight: 600; line-height: normal;}
#middle{ padding: 1px 0 10px;}
#middle .wrap{ padding: 20px 20px 30px;}
#middle .wrap h1{ font-size:1.2em; }
#middle .wrap h1 span{ font-size: .8em;}
.timer { display:none;}
.timer1{ display:block;}
.bottom-box{ margin:14px -14px 0; padding:0 16px 20px;}
.bottom-box h2{ margin:0 -16px 20px}
.calendar-box{ text-align:center;}
.lefticon{ float:none; margin-bottom:10px;}
.calendar-box ul{ text-align:center;}
.calendar-box ul p.t2{ float:none; width:auto; margin:8px 10px 0;}
.bottom-box h2{ font-size:30px; line-height:34px;}
.button a, .button button{ font-size:1.22em; padding: 12px 15px; margin: 10px auto 0;}
.button.t1 a{ font-size: 1em; padding: 12px 15px 10px;}
.button a span{ font-size: .75em; padding-top: 2px;}

#middle .wrap h2.sub{ font-size: 1.1em; margin-top:5px;}
.conbox .boxL img{ max-width: 170px;}
button.link{ font-size: .8em;}
.top-navi ul li.logo{ margin-right: 0; max-width: 52px;}
.top-navi ul li{ font-size: .8em;}
.top-navi ul li a span{ font-size: .65em;}
.top-navi ul li a{ padding: 2px 4px 0px;}
.top-navi ul li.arrow::before{ bottom: -27px;}

.conimg{ float: none; max-width: 200px; margin: 0 auto 10px;}
.conimg.right{ float:none; margin: 0 auto 20px;}
.HLB{ padding: 6px 14px 4px;}
.conbox{ padding: 0 10px 20px; margin: 10px auto 0;}
.conbox h1{margin: 0 -10px 15px; padding: 10px 5px;} 
#middle .wrap{ margin-top: 2px; padding: 0 10px 20px;}
.trainingTimes{ width: 96%; margin: 0 auto 10px; padding: 14px 0 0;}
.trainingTimes .boxR h3{ font-weight: 800; font-size: .9em; padding: 0 0 5px !important;}
p.t2{ margin: 30px -10px 10px !important;}
.midbox{ margin: 0 -10px 30px; padding: 10px;}
.midbox .imgL img{ margin: 0 0 -10px;}
.hl-box {padding: 10px 10px 10px 25px; margin: 10px auto 0;}
.hl-box::before{ font-size: 1.5em; top: -16px; left: 7px;}
#hidden-content2 a{ font-size:1.1em; padding:10px;}
.trainingTimes.bttns .button.t1 a{ font-size: 1.1em;}
.list ul li{ padding: 0 0 5px 34px; margin-bottom: 5px; border-bottom: dashed 1px rgba(255, 255, 255, 0.3);}
.text1{ font-size: 1em; border-radius: 5px; line-height: normal; padding: 8px 10px 12px; margin: 14px auto 0;}
.qa{ padding: 0 10px;}
.qa h4{ font-size: 1.1em; margin-top: 30px;}
}

@media(max-width:390px) { /*360*/
#header{ padding: 5px 0;}

.right .button a, .button input[type="submit"]{ font-size:20px;}
.calendar-box ul li{ width:auto; display:block; padding:6px 0 0; margin:6px 10px 0; border-left:none; border-top:4px solid #3a3f55;}
.calendar-box ul li.selected{ border-left:none; border-top:4px solid #f00;}
.list ul li br{ display:none;}
#middle .wrap h2.sub{ font-size: 1em;} 
#middle .wrap h1 span{ font-size: .7em;}
.top-navi ul li.logo {
    display: block;
    margin: 0 auto 10px;
    max-width: 90px;
}
.trainingTimes h3{ font-size:1em;}
.top-navi ul li a span{ font-size: .7em;}
.button.t1 a{ font-size: .9em;}
.button a, .button button{ font-size: 1em;}
.trainingTimes{ padding: 14px 12px 0px;}
.top-navi ul li {
    font-size: .6em;}
#hidden-content2 a{ font-size:1.0em; padding:10px;}
.trainingTimes.bttns .button.t1 a{ font-size: 1em;}
.trainingTimes .boxR h3{ font-size: .8em;}
}

@media(max-width:320px) {
.button.t1 a{ font-size: 1em;}
.button a, .button button{ font-size: 1.1em;}
.top-navi ul li a{ padding: 2px 4px 4px;}
.top-navi ul li{ font-size: .7em;}

.trainingTimes{ padding: 10px;}
#middle .wrap h1{ font-size: 1em;}
body{ font-size: .93em;}
}