@charset "UTF-8";
/* CSS Document */


h2{
text-align: center;
font-weight: 600;
}
/*---------------
#category
---------------*/
#category ul{
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#category ul li{
text-align: center;
}
/*---------------
#course
---------------*/
#course a.btn{
color: #fff;
background-color: #111;
font-size: 1.8rem;
padding: 10px 0;
margin-top: 60px;
/*
display: block;
text-align: center;
background-color: #555;
width: 300px;
padding: 10px;
margin: 0 auto;
*/
}

@media (max-width: 560px){
main{
padding-top: 40px;
}
section{
padding-bottom: 40px;
}
h2{
font-size: 2.2rem;
padding-bottom: 10px;
}
/*---------------
#hero
---------------*/
#hero{
padding-top: 60px;
}
/*---------------
#category
---------------*/
#category ul{

}
#category ul li{
width: 33.333%;
padding-bottom: 10px;
}
/*---------------
#course
---------------*/
#course ul li{
margin-bottom: 20px;
}
#course ul li:last-of-type{
margin-bottom: 0;
}	
}
@media (min-width: 561px){
main{
padding-top: 60px;
}
section{
padding-bottom: 60px;
}
h2{
font-size: 2.6rem;
padding-bottom: 30px;
}
/*---------------
#hero
---------------*/
#hero{
padding-top: 90px;
}
/*---------------
#category
---------------*/
#category ul{
width: 60%;
}
#category ul li{
width: 25%;
padding-bottom: 20px;
}
/*---------------
#course
---------------*/
#course ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#course ul li{
border: solid 1px #999;
width: calc(48% - 2px);
margin-right: 4%;
margin-bottom: 30px;
overflow :hidden; 
transition: .3s;
}
#course ul li:nth-of-type(2n){
margin-right: 0;
}
#course ul li:nth-last-child(-n+2){
margin-bottom: 0;
}
#course ul li:nth-last-child(-n+X){
margin-bottom: 0;
}
#course ul li img{
transition: .6s;
}
#course ul li img:hover{
transform:scale(1.1,1.1);
opacity: 0.5;
transition: .6s;
}
}
@media(min-width: 561px) and (max-width: 768px){
/*---------------

---------------*/
}
@media (min-width: 561px) and (max-width: 1024px){
/*---------------

---------------*/
}
@media screen and (min-width: 1025px){
/*---------------

---------------*/
}