@charset "UTF-8";

/*==================================================================

HEADER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.header_area{
width:700px;
margin:0 auto;
}
.header_area h1{
width:70%;
margin:15px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.header_area{
width:80%;
margin:30px auto 0;
}
.header_area h1{
width:70%;
margin:15px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.header_area{
width:98%;
margin:30px auto 50px;
}
.header_area h1{
width:90%;
margin:0 auto;
}
}









/*==================================================================

OCTOBER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.october_area{
width:100%;
margin:40px auto 80px;
}
.october_area h2{
width:60%;
margin:0 auto;
}
.october_area ul{
width:90%;
margin:70px auto;
}
.october_area ul li{
margin:50px 0;
height:auto;
}
.october_area ul li img{
position:relative;
left:0;
transition:0.8s;
}
.october_area ul li img:hover{
left:20px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.october_area{
width:100%;
margin:30px auto 60px;
}
.october_area h2{
width:60%;
margin:0 auto;
}
.october_area ul{
width:80%;
margin:70px auto;
}
.october_area ul li{
margin:40px 0;
height:auto;
}
.october_area ul li img{
position:relative;
left:0;
transition:0.8s;
}
.october_area ul li img:hover{
left:20px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.october_area{
width:94%;
margin:40px auto　60px;
}
.october_area h2{
width:80%;
margin:0 auto;
}
.october_area ul{
width:80%;
margin:50px auto;
}
.october_area ul li{
margin:30px 0;
height:auto;
}
.october_area ul li img{
position:relative;
left:0;
transition:0.8s;
}
.october_area ul li img:hover{
left:20px;
}
}