header{background:#000000;
            
             height: 50px;
             line-height:30px;}

header ul{ display: flex;
                
           float: left;
              }

header li{margin: 0 50px;}

header p{ color: #FFFFFF;}

header a { color: #FFFFFF;}

header a :hover{color: #0000FF;}




.intro{clear: both;}

.phone {
   float: right; 
}

.name{font-weight: bold;}
.price{margin: 40px;}


.timetable {text-align: center;
             border-collapse: collapse; 
            border-collapse:  collapse;
            margin:30px;
 }
.timetable th {padding: 10px;
               color:#FFFFFF;
               background:#000000;
               border: solid 1px;
}



.timetable td{padding:10px;
              border: solid 1px;
}






.home-hero{background-image :  url('../images/sora.jpg');
 background-repeat: no-repeat; 
background-position: right top;
background-size: 70vw auto;

padding: 5.5rem 1rem 3rem;}

.home hero h2 { font-family: ''Sawarabi Mincho, sans-serif;
font-size:1.5rem
margin: 8vw 0 12vw;
background: rgba(255,255,255,.8);
padding: 1rem;
display: inline-block;}

.home-hero p{
           font-size: 1.125rem;
           margin-bottom: 2rem;}


/* Contents */
.brown-bg {
    background: #f8f6f2;
}
.content {
    padding: 4rem 1rem;
}



#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}


div#pagenation {
   position: relative;
   overflow: hidden;
}
div#pagenation ul {
    position:relative;
    left:50%;
    float:left;
    list-style: none;
}
div#pagenation li {
    position:relative;
    left:-50%;
    float:left;
}
div#pagenation li a {
    border:1px solid #CECECE;
    margin: 0 3px;
    padding:3px 7px;
    display: block;
    text-decoration:none;
    color: #666666;
    background: #fff;
}
div#pagenation li.active a,
div#pagenation li a:hover{
    border:solid 1px #666666;
    color: #FFFFFF;
    background: #3399FF;
}










footer{ background: #000000;
            text-align: center;
             padding: 3rem;}

footer ul{ display: flex;
               justify-content: center;
               margin-bottom:2rem;}

html , body{height: 100%;}
body{display: flex;
          flex-direction: column;}

article{ flex: 1;}

footer li{margin: 0 12px;}

footer a { color: #FFFFFF;}

footer a :hover{color: #0000FF;}

footer small{color: #FFFFFF;
                   font-size: .875rem}



.question{display: flex;
justify-content: space-between;
 margin-bottom: 4rem;
 padding: 1rem 2.5rem 2.5rem;}

.question article{overflow-wrap: break-word;}

.main{width: 68%;
              margin-bottom: 0;}

.aside{width: 28%;}

.txt{
    display: inline;
       padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
  
    margin : 20px ;
}

.txk{
       display: inline-block;
   padding: 0.5rem;
    border: 1px solid #999;
    box-sizing: border-box;

}



 @media (min-width: 600px) {
                        .home-hero{  padding: 16vw 1rem;}
                     .home-hero h2{font-size: 2.5rem;
                                            margin: 0 0 2rem;
                                            background: none;
                                            padding: 0;}
                    .home-hero p { width: 38vw;} 


    /* Contents */
.brown-bg {
    background: #f8f6f2;
}
    .content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 4rem 1rem;
    }
    .flex-reverse {
        flex-direction: row-reverse;
    }
    .home-text {
        width: 50vw;
        margin-bottom: 0;
    }


.howstudy{width:320px ;
                height: 300px;}
.howstep{width: 320px;  height: 300px;}


.howcost{width:320px;  height: 300px;}



.price{margin: 40px;}

.timetable {text-align: center;
             border-collapse: collapse; 
            border-collapse:  collapse;
            margin:30px;
 }
.timetable th {padding: 10px;
               color:#FFFFFF;
               background:#000000;
               border: solid 1px;
}



.timetable td{padding: 10px;
              border: solid 1px;
}

html , body{height: 100%;}
body{display: flex;
          flex-direction: column;}

article{ flex: 1;}

.question{display: flex;
justify-content: space-between;
 margin-bottom: 4rem;
 padding: 1rem 2.5rem 2.5rem;}

.question article{overflow-wrap: break-word;}


.main{width: 68%;
              margin-bottom: 0;
           text-align: }

.aside{width: 28%;}

.txt{
    display: inline;
       padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
      margin : 20px;
}

.txk{
    display: inline-block;
   padding: 0.5rem;
  
    border: 1px solid #999;
    box-sizing: border-box;

}
}