@charset "utf-8";

/*****************
320pxvar
******************/

#class_course,#junior_course,#individual_course{
margin-bottom: 10px;
}
#class_course #feature img,#junior_course #feature img,#individual_course #feature img{
width:100%;
}

/* クラス */

#class_course .introduction{
background:#7671b4;
}

#feature .features:first-child .figure{
background: #d3ebda;
}
#class_course .courses h3{
background: url("../images/title_icon_purple.png") no-repeat 2px 50%;
}

#whenYouAbsent{
background: #f7f5e8;
padding: 10px;
}
#gakushins_way img{
float: left;
width: 110px;
margin-right: 10px;
}

#schedule table{
width:100%;
border-collapse: collapse;
}
#schedule th{
background: #00af62;
color: #fff;
padding-top: 2px;
width: 14.2%;
}

#schedule td{
background:#d3ebda;
padding: 3px 5px 3px 20px;
line-height: 1.6em;
}
#schedule .even td{
background:#fbf9ef;
}
#schedule .first .icon{
background: url("../images/course/icon_first.png") no-repeat #d3ebda 4px 4px;
}
#schedule .even .icon{
background: url("../images/course/icon_second.png") no-repeat #fbf9ef 4px 4px;
}
#schedule .third .icon{
background: url("../images/course/icon_third.png") no-repeat #d3ebda 4px 4px;
}
#classContact .title{
background:#7671b4;
}
#classLinks li{
background: url("../images/course/links_purple.png") no-repeat 5px 50%;
background-size:10px;
}

/* 共通 */

#feature .last{
margin-bottom:0px;
}

.introduction{
margin-bottom: 15px;
color:#fff;
padding: 10px;
overflow: hidden;
}

.introduction img{
visibility:hidden;
position:absolute;
}

.introduction .title{
font-size: 1.25em;
font-weight: bold;
margin-bottom: 6px;
}
.introduction .text{
background: rgba(255,255,255,0.9);
color: #333;
padding: 10px;
}
#feature img{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.question {
    position: relative;
    margin: 20px 10px;
    background: #fcfaf1;
    border-radius: 70px;
    padding: 20px 30px;
    font-weight: bold;
    border: solid 1px #ddd;
    text-align: center;
    font-size: 1.1em;
    color: #7671b4;
}
.question:after, .question:before {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
}
.question:before {
    border-right: solid 20px #ddd;
    border-top: solid 20px transparent;
    bottom: 16px;
    right: 10px;
}

.question:after {
    border-right: solid 20px #fcfaf1;
    border-top: solid 20px transparent;
    bottom: 17px;
    right: 11px;
}
.probrems .ques{
    padding-left: 35px;
    font-weight: bold;
    font-size: 1.1em;
    padding-top: 5px;
    margin-bottom: 10px;
    position: relative;
}
.probrems .ques:before {
    content: "\003f";
    position: absolute;
    font: bold 13px Arial, Helvetica;
    left: 0px;
    top: 0px;
    font-size: 1.2em;
    background: #fff;
    border: solid 2px #7671b42e;
    padding: 3px 5px 2px 7px;
    color: #7671b4;
}
    .probrems{
        margin: 30px 10px;
    }
.courses{
margin-bottom: 10px;
}

#couses li{
    border: solid 1px #ddd;
    padding: 10px 10px 10px 30px;
    width: calc(100% - 43px);
    margin-bottom: 5px;
    position: relative;
    display: flex;
    align-items: center;
}
#couses li:before{
    content: "";
    display: block;
    height: 1.7em;
    width: 5px;
    background: #7671b4;
    position: absolute;
    left: 11px;
}
/*#couses li:first-child:before{
    background: #ff3f74;
}
#couses li:nth-of-type(2):before{
    background: #39b34b;
}
#couses li:last-child:before{
    background: #4c4398;
}*/
#solv > p img{
    width: calc(100% - 20px);
    margin: 10px auto;
    max-width: 360px;
    display: block;
}
.probrems img{
    width: calc(100% - 20px);
    margin: 10px auto;
    max-width: 285px;
    display: block;
}
.courses h3{
font-size: 1.2em;
font-weight: bold;
padding-left: 20px;
margin-bottom: 10px;
}

.features{
margin-bottom: 10px;
overflow:hidden;
}

.features h4{
background: #f7f2e4;
padding: 5px;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 5px;
}
.features h4 .num{
padding: 0px 8px 0px 5px;
border-right: solid 1px #dbd4c2;
margin-right: 8px;
line-height: 1em;
}
.features .figure{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
overflow:hidden;
}
.features .figure p{
padding: 0px 10px 10px;
}
.features .feature .bold{
    font-weight: bold;
    margin: 10px 0px 5px;
    font-size: 1.1em;
}
.contact,.links{
padding-top: 5px;
}
.contact{
margin-bottom:10px;
}
.contact img{
visibility:hidden;
position:absolute;
}
.contact .title{
font-size: 1.1em;
font-weight: bold;
color: #fff;
line-height: 1.6em;
padding: 2px 10px;
}

.contact .boldBig{
font-size: 1.2em;
font-weight: bold;
padding: 5px 0px 0px;
}
.contact .button{
color: #fff;
font-weight: bold;
display: block;
text-align: center;
letter-spacing: 1px;
width: 180px;
}
#juniorContact .button{
background: url("../images/course/arrow.png"), #f7bb7f;
background: url("../images/course/arrow.png"), -moz-linear-gradient(top,  #f7bb7f 0%, #f7bb7f 50%, #f6ac6b 51%, #f6ac6b 100%);
background: url("../images/course/arrow.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7bb7f), color-stop(50%,#f7bb7f), color-stop(51%,#f6ac6b), color-stop(100%,#f6ac6b));
background: url("../images/course/arrow.png"), -webkit-linear-gradient(top,  #f7bb7f 0%,#f7bb7f 50%,#f6ac6b 51%,#f6ac6b 100%);
background: url("../images/course/arrow.png"), -o-linear-gradient(top,  #f7bb7f 0%,#f7bb7f 50%,#f6ac6b 51%,#f6ac6b 100%);
background: url("../images/course/arrow.png"), -ms-linear-gradient(top,  #f7bb7f 0%,#f7bb7f 50%,#f6ac6b 51%,#f6ac6b 100%);
background: url("../images/course/arrow.png"), linear-gradient(to bottom,  #f7bb7f 0%,#f7bb7f 50%,#f6ac6b 51%,#f6ac6b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7bb7f', endColorstr='#f6ac6b',GradientType=0 );
background-repeat:no-repeat;
background-position:20px 50%,0px;
border: solid 1px #f6ac6b;
}
#classContact .button{
background: url("../images/course/arrow.png"), #9d98de; /* Old browsers */
background:url("../images/course/arrow.png"), -moz-linear-gradient(top,  #9d98de 0%, #9d98de 50%, #7671b4 51%, #7671b4 100%); /* FF3.6+ */
background:url("../images/course/arrow.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d98de), color-stop(50%,#9d98de), color-stop(51%,#7671b4), color-stop(100%,#7671b4)); /* Chrome,Safari4+ */
background:url("../images/course/arrow.png"), -webkit-linear-gradient(top,  #9d98de 0%,#9d98de 50%,#7671b4 51%,#7671b4 100%); /* Chrome10+,Safari5.1+ */
background:url("../images/course/arrow.png"), -o-linear-gradient(top,  #9d98de 0%,#9d98de 50%,#7671b4 51%,#7671b4 100%); /* Opera 11.10+ */
background:url("../images/course/arrow.png"), -ms-linear-gradient(top,  #9d98de 0%,#9d98de 50%,#7671b4 51%,#7671b4 100%); /* IE10+ */
background:url("../images/course/arrow.png"), linear-gradient(to bottom,  #9d98de 0%,#9d98de 50%,#7671b4 51%,#7671b4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d98de', endColorstr='#7671b4',GradientType=0 ); /* IE6-9 */
background-repeat:no-repeat;
background-position:20px 50%,0px;
border: solid 1px #7671b4;
}
#individualContact .button{
background: url("../images/course/arrow.png"), #948ed3;
background: url("../images/course/arrow.png"), -moz-linear-gradient(top,  #948ed3 0%, #948ed3 50%, #827cc9 51%, #827cc9 100%);
background: url("../images/course/arrow.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#948ed3), color-stop(50%,#948ed3), color-stop(51%,#827cc9), color-stop(100%,#827cc9));
background: url("../images/course/arrow.png") ,-webkit-linear-gradient(top,  #948ed3 0%,#948ed3 50%,#827cc9 51%,#827cc9 100%);
background: url("../images/course/arrow.png"), -o-linear-gradient(top,  #948ed3 0%,#948ed3 50%,#827cc9 51%,#827cc9 100%);
background: url("../images/course/arrow.png"), -ms-linear-gradient(top,  #948ed3 0%,#948ed3 50%,#827cc9 51%,#827cc9 100%);
background: url(../images/course/arrow.png), linear-gradient(to bottom,  #7671b4b5 0%,#7671b4b5 50%,#7671b4 51%,#7671b4 100%));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948ed3', endColorstr='#827cc9',GradientType=0 );
background-repeat:no-repeat;
background-position:20px 50%,0px;
border: solid 1px #7671b4;
}
.contact .button a{
color: #fff;
text-decoration: none;
display: block;
padding: 7px 0px 7px;
width: 180px;
}
.contact .button:hover{
opacity:0.6;
}
.links li{
padding-left: 20px;
margin: 5px 0px;
}

/************************************************************************************
bigger than 440
*************************************************************************************/
@media screen and (min-width: 440px) {

/* クラス */

#class_course #feature img {
width: 424px;
}
    #class_course #feature .features:not(:first-child) img{
/*max-width: 290px;*/
    margin: 20px auto;
    display: block;
    }

/* 共通 */

.features .figure p {
padding: 10px 10px 10px;
}



}

/************************************************************************************
bigger than 760
*************************************************************************************/
@media screen and (min-width: 760px) {

/* クラス */

#class_course #feature img {
    width: auto;
    padding: 0px;
    display: block;
    margin: 10px auto;
}

#whenYouAbsent {
margin-top: 20px;
}

#gakushins_way{
margin-bottom:0px;
clear: both;
padding-top: 40px;
}
#classLinks li{
background: url("../images/course/links_purple.png") no-repeat 5px 50%;
background-size:auto;
}

#schedule #firstHalf{
width:58%;
float:left;
}

#schedule #secondHalf{
width:42%;
float:left;
}

#schedule table {
font-size: 0.9em;
letter-spacing:0px;
}

#schedule td{
padding: 10px 0px 10px 20px;
}
#schedule .first .icon{
background: url("../images/course/icon_first.png") no-repeat #d3ebda 4px 11px;
}
#schedule .even .icon{
background: url("../images/course/icon_second.png") no-repeat #fbf9ef 4px 13px;
}
#schedule .third .icon{
background: url("../images/course/icon_third.png") no-repeat #d3ebda 4px 12px;
}


/* 共通 */

.introduction img {
visibility: visible;
position: static;
float: left;
margin-right: 15px;
}

.introduction .right{
/*float: right;
width: 470px;*/
}
.introduction .title {
padding-top: 31px;
background: url(../images/course/what_course.png) no-repeat 20px 6px;
}

.introduction {
margin-bottom: 35px;

}
    .introduction > div{
display: flex;
align-items: center;
    }
.courses h3 {
font-size:1.35em;
padding-left: 25px;
margin-bottom: 20px;
}
.features{
margin-bottom: 30px;
}
.features h4{
font-size: 1.2em;
line-height: 1em;
padding: 11px 0px 9px 10px;
margin-bottom: 10px;
}
.features h4 .num{
padding-right: 15px;
margin-right: 15px;
font-size: 1.1em;
font-family: arial;
}
.features .figure {
margin-top: 10px;
}
.features .figure p {
padding: 10px 10px 10px;
float: right;
width: 265px;
background: rgba(255,255,255,0.9);
margin: 22px 10px 0px 0px;
}
.courses {
margin-bottom: 40px;
}
#gakushins_way img{
width:auto;
margin-right: 15px;
}

.contact img{
visibility:visible;
position:static;
float: left;
}
.contact .right{
width: 470px;
float: right;
}
.contact .title{
font-size: 1.3em;
text-align: center;
padding: 5px 0px;
margin-bottom: 13px;
}
.contact .boldBig{
font-size: 1.5em;
margin-bottom: 7px;
}
.contact .button{
font-size: 1.1em;
text-align: left;
margin-top: 10px;
width: 190px;
}
.contact .button a{
padding: 8px 0px 8px 40px;
}
.links li{
font-size: 1.2em;
padding-left: 40px;
margin: 15px 8px;
font-weight: bold;
}
.contact, .links {
padding-top: 15px;
}

/* 小・中学部 */
.probrems .ques:before {
    font-size: 1.35em;
    border: solid 3px #7671b466;
    padding: 5px 10px 4px 10px;
}
.probrems .ques{
    padding-left: 50px;
    padding-top: 9px;
    margin-bottom: 25px;
}
    .probrems{
        margin: 30px 10px;
    }
    #solv > p img{
        float: left;
        margin-right: 10px;
        margin-top: 3px;
        margin-bottom: 0px;
    }
    .probrems img{
        float: right;
        margin-left: 10px;
        margin-top: 3px;
        margin-bottom: 0px;
    }
    #couses ul{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    #couses li{
        height: 3em;
        margin: 5px;
        width: calc(50% - 53.5px);
    }
    /* #couses ul li:first-child,
    #couses ul li:nth-child(2),
    #couses ul li:nth-child(3){
        width: calc(33% - 50px);
    } */

    #couses li:before{
        height: 3em;
    }
}

/************************************************************************************
bigger than 1000
*************************************************************************************/
@media screen and (min-width: 1000px) {

/* クラス */

/* ジュニア */

#juniorContact .right {
width: 445px;
}

/* 個別指導 */



/* 共通 */

.introduction .right {
width: 415px;
}

.features .figure p {
width: 215px;
}
.contact .right {
width: 385px;
}

.introduction .text {
font-size: 0.95em;
}

}