@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;
}
}









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

JUNE_AREA

==================================================================*/
@media screen and (min-width:961px) {
.archive_area{
width:100%;
margin:80px auto 0px;
background:url("../../images/header_june_index_archive.png") no-repeat right top;
background-size:contain;
}
.archive_area h2{
display:none;
}
.archive_area figure{
width:60%;
margin:0 auto  100px;
padding-top:100px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.archive_area{
width:100%;
margin:80px auto 0px;
background:url("../../images/header_june_index_archive.png") no-repeat right top;
background-size:contain;
}
.archive_area h2{
display:none;
}
.archive_area figure{
width:70%;
margin:0 auto  100px;
padding-top:100px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.archive_area{
width:94%;
margin:40px auto 0;
background:url("../../images/header_june_index_archive.png") no-repeat right top;
background-size:130%;
}
.archive_area h2{
display:none;
}
.archive_area figure{
width:70%;
margin:0 auto  100px;
padding-top:100px;
}
}