@charset "utf-8";
.archive01{
margin:10rem auto;
}
.archive01 ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.archive01 li{
width: 23%;
margin:3% 1%;
}
.archive01 h3 {
color: #B21519;
font-size: 3rem;
text-align: center;
}
.day {
border-bottom: #FCCF2C 1px solid;
text-align: center;
margin: 2rem auto;
}
.archive02{
margin:0 auto 10rem;
}

/*peger*/
.pager .pagination {
text-align: center;
background-color: #FFF6D8;
padding: 1rem 0;
}
.pager .pagination li {
display: inline;
margin: 0 2px;
padding: 0;
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
position: relative;
border-radius: 10px;
}
.pager .pagination li a{
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.pager .pagination li a span{
display:table-cell;
vertical-align:middle;
}
.pager .pagination li a:hover,
.pager .pagination li a.active{
color: #fff;
background: #B21519;
}

/*parallax*/
.parallax {
min-height: 72vh;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover; 
position: relative;
}
.content_wrapper {
padding: 60px;
background-color: #fff;
}
div.parallax .top_box h2 {
font-size: 6rem;
line-height: 8rem;
color: #fff;
text-align: left;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.top_box{
max-width: 1200px;
margin: 0 auto;
position: absolute;
top:50%;
left: 30%;
transform: translate(-50%,-50%);
}
.top_box p {
color: #fff;
font-size: 3rem;
line-height: 3.5rem;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.content_wrapper h2{
line-height: 600px;
font-size: 60px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
}
.parallax_img01 img {
position: absolute;
z-index: 10;
width: 300px;
top:50%;
left: 80%;
transform: translate(-50%,-50%);
}
.parallax_img01{
background-image:url("../images/top/img_top_01.png");
}
.parallax_img02{
background-image:url("../images/top/img_top_10.png");   }
.parallax_img03{
background-image:url("../images/main_img03.jpg");   
}
.parallax_img04{
background-image:url("../images/main_img04.jpg");   
}
.parallax_img05{
background:url("../images/main_img05.jpg"); 
}
.parallax_img06{
background:url("../images/main_img06.jpg"); 
}




/*MOBILE*/
@media only screen and ( max-width : 768px ) {
.archive01{
margin:10rem auto;
width: 98%
}
.archive01 li {
    width: 48%;
    margin: 3% 1%;
}

/*pager*/
.pager .pagination li{
display: none;
}
.pager .pagination li.pre,
.pager .pagination li.next{
display: inline-block;
width: 40%;
height: 50px;
text-align: center;
}
.pager .pagination li.pre a,
.pager .pagination li.next a{
width: 100%;
text-align: center;
}
.pager .pagination li.pre span::after{
content: "　前へ";
}
.pager .pagination li.next span::before{
content: "次へ　";
}

/*parallax*/
.parallax_img01 img {
width: 115px;
top: 73%;
left: 50%;
}
.parallax_img01 .top_box{
width: 100%;
margin: 0 auto;
position: absolute;
top: 39%;
left: 50%;
text-align: center;
}
div.parallax .top_box h2 {
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
}
.top_box p {
color: #fff;
font-size: 1.8rem;
line-height: 2.5rem;
font-weight: normal;
text-shadow: 3px 3px 6px rgba(50, 97, 16, 0.68);
text-align: center;
}
}