@charset "UTF-8";
p, ul li, table{color: #666;}

.maincontainer h4.red{color: #a70b1e; font-weight: 600; font-size: 18px; font-size: 1.8rem; margin: 10px 0 10px 0; text-align: left;}
.maincontainer h5{border-bottom: 2px dotted #604c3f; font-weight: 600; margin: 0 0 10px 0; padding-bottom: 5px; font-size: 1.6rem; font-size: 16px; text-align: left;}
#point{border: 2px solid #ea8071; padding: 10px 15px; color: #666;}
#point .pink{font-weight: 600; color: #ea8071; font-size: 1.6rem; font-size: 16px; margin-bottom: 5px;}
#point ul{list-style-image:url("../img/course/point.gif"); font-size:14px; font-size:1.4rem; margin: 0 0 0 13px; padding: 0;}
#course01{margin-bottom: 20px;}
.photobox{margin: 20px 0;}
.photobox img{max-width: 47%; height: auto; width /***/:auto;  float: left; margin: 5px;}
.grayback, .grayback02{background: #eee; padding: 10px 0; margin-bottom: 15px; text-align: center;}
.grayback ul li{list-style: none; margin:0 0 10px -20px;}
.yellback{background: #fff297; padding: 10px 0 20px 0; margin: 30px 0;}
.text .pc{display: none;}
.text{text-align: left;}
.text p{margin: 15px 0;}

#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; margin: 10px; font-weight: 600;}
table.price{width: 100%; text-align: center; color: #666;}
table.price tr th.gr{background: #ccc; border: 1px solid #ddd:}
table.price tr th.gr2{background: #ddd; border: 1px solid #ddd: text-align:;}
table.price tr td,table.price tr th{background: #fff; border: 1px solid #ddd; padding: 10px 5px;}
p.pr{margin: 0; font-weight: 600; text-align: left;}

.voicebox{margin-bottom: 20px;}
.voicebox table.voice{width: 100%;}
.voicebox table.voice tr th{background: #eee; padding: 10px; text-align: left;}
.voicebox table.voice tr td{background: #fff; padding: 10px; text-align: left;}
.voicebox .right{text-align: center;}
.voicebox .right img{margin-bottom: 10px;}

.grayback02 .maincontainer ul.course{text-align: left; width: 100%; list-style-image:url("../img/teacher/circle.gif");}
.grayback02 .maincontainer ul.course li{float: left; margin: 1px 10px 1px 20px; width: 100%; padding: 0; font-size:16px; font-size:1.6rem;}
.minute{font-weight: 600; color: #fff; font-size: 12px; background: #777; padding: 3px 5px; position: relative; top:-2px;}

@media screen and (max-width: 400px) {
.photobox{text-align: center; width: 100%;}
.photobox img{float: none; max-width: 98%; height: auto; width /***/:auto;}
}

    @media screen and (min-width : 450px) {
.grayback ul{width: 450px; margin: 0 auto;}
.grayback ul li{list-style: none; width: 48%; float: left; margin:0 12px 10px -5px;}
.voicebox table.voice{width: 75%; margin-right: 2%; float: left;}
.voicebox .right{text-align: center; float: left; width: 23%;}
.voicebox .right img{margin-bottom: 10px;}
}

    @media screen and (min-width : 600px) {
.photobox{margin: 20px 0;}
.photobox img{max-width: 48%; height: auto; width /***/:auto;  float: left; margin: 5px;}
#point .clearfix ul{float: left; width: 48%;}
#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; width: 300px; margin: 10px 0 ; font-weight: 600;}
table.price{width: 600px; text-align: center; color: #666;}
.grayback02 .maincontainer ul.course li{width: 45%;}
}

    @media screen and (min-width : 680px) {
.grayback, .grayback02{text-align: left;}
.grayback ul{width: 100%; text-align: left;}
.grayback ul li{list-style: none; width: 224px; float: left; margin:0 12px 10px -5px;}
}

    @media screen and (min-width : 850px) {
.maincontainer h4.red{text-align: left;}
.text{float: left; width: 71%;}
.text .pc{display: inherit;}
.photobox{margin: 0; float: left; width: 26%;}
.photobox img{max-width: 100%; height: auto; width /***/:auto;  float: left; margin:0 0 5px 15px;}
}
    @media screen and (min-width : 980px) {
.grayback02 .maincontainer ul.course li{width: 30%; line-height: 1.8rem;}
}