body{ background-color:#fff; }

.archive-blog.page-top-img-wrapper{
   height: 40vh;
}
.archive-blog.page-top-img-wrapper h1{
   margin: -41vh auto 60px;
}
.archive-blog main{
   max-width: 1600px;
}
h1{
  max-width: 1100px;
  margin: 50px 0 20px 3%;
  padding-bottom:0;
}
.contents-container.archive-blog {
   display: flex;

}

/*------------------------------------------------------------
blog検索
--------------------------------------------------------------*/
.search-all-container{
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   float: right;
   margin-top: -10px;
}
input[type="text"]{
background-color: #ededed;
}

h2.blog-search{
   font-weight: normal;
   font-size:16px;
   margin:0;
   padding: 0 0 1px 5px;
   text-align: left;
}

.view-more-wrapper.atBottom{
   margin: 15px 0 80px 0;
   display:flex;
   justify-content: flex-end;
}
.view-more-wrapper{
   font-size:18px;
   margin: 0 0 3px 10px;
}
a.view-more {
   display: block;
   width: 141px;
}

/*------------------------------------------------------------
 blog category list
--------------------------------------------------------------*/
 .grid.blog-cat{
   gap:20px;
   padding:20px 0 0;
 }
 .grid.blog-cat {
   grid-template-columns: repeat( 4 , 1fr );
 }
 .blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0.4s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0.6s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0.8s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 1.0s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 1.2s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 1.4s;
}
 h2.category{
   text-align: center;
   border-top: 1px solid #e3e3e3;
   font-size:25px;
   color:#000;
   margin:0;
   padding: 20px 0 10px;
   width: 100%;
 }
 .blog-cat-list li{
   border:1px solid #e3e3e3;
   background-color:#fff;
 }
 .blog-cat-list h3{
   margin:0;
   font-size:1.5rem;
   text-align:center;
   padding:1em 0 0.5em;
   border-top :1px solid #e3e3e3;
   color:#000;
 }
 .blog-cat-list a{
   padding: 15px;
   transition: .5s ease;
   height:100%;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .blog-cat-list a:hover{
   transition: .5s ease;
   background-color:#e3e3e3;
   transform:scale(1.01);
 }
 .blog-cat-list p{
   margin:0;
   color:#464646;
   padding-left:0.5em;
 }
 aside.blog-list{
   background-color: #fff;
 }
.blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0.4s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0.6s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0.8s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 1.0s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 1.2s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 1.4s;
}
/**************************************************************************
1600px
****************************************************************************/

@media screen and (max-width: 1600px) {
  div.archive-blog.contents-container{
    width:100%;
  }
}
/**************************************************************************
1140px
****************************************************************************/
@media screen and (max-width: 1140px){
   .grid.category{
      grid-template-columns: repeat( 3 , 1fr );
   }
      
   .blog-cat.category>li:nth-of-type(2){
      animation-delay: 0.2s;
   }
   .blog-cat.category>li:nth-of-type(3){
      animation-delay: 0.4s;
   }
   .blog-cat.category>li:nth-of-type(4){
      animation-delay: 0s;
   }
   .blog-cat.category>li:nth-of-type(5){
      animation-delay: 0.2s;
   }
   .blog-cat.category>li:nth-of-type(6){
      animation-delay: 0.4s;
   }
   .blog-cat.category>li:nth-of-type(7){
      animation-delay: 0s;
   }
   .blog-cat.category>li:nth-of-type(8){
      animation-delay: 0.2s;
   }
}
/**************************************************************************
900px
****************************************************************************/
@media screen and (max-width: 900px){
   .grid.category{
      grid-template-columns: repeat( 2 , 1fr );
   }
   .blog-cat.category>li:nth-of-type(2){
      animation-delay: 0.2s;
   }
   .blog-cat.category>li:nth-of-type(3){
      animation-delay: 0s;
   }
   .blog-cat.category>li:nth-of-type(4){
      animation-delay: 0.2s;
   }
   .blog-cat.category>li:nth-of-type(5){
      animation-delay: 0s;
   }
   .blog-cat.category>li:nth-of-type(6){
      animation-delay: 0.2s;
   }
   .blog-cat.category>li:nth-of-type(7){
      animation-delay: 0s;
   }
   .blog-cat.category>li:nth-of-type(8){
      animation-delay: 0.2s;
   }
}
/**************************************************************************
599px
****************************************************************************/
@media screen and (max-width: 599px) { 
   .grid.category {
      grid-template-columns: 1fr;
   }
   .blog-cat.category>li:nth-of-type(1){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(2){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(3){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(4){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(5){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(6){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(7){
      animation-delay: 0.1s;
   }
   .blog-cat.category>li:nth-of-type(8){
      animation-delay: 0.1s;
   }
  
.blog-cat-list a {
  padding: 15px;
}
.view-more-wrapper{
   text-align: center;
   font-size: 22px;
   margin: 0px 8px 20px 0;
}

.view-more-wrapper.atBottom {
   margin: 30px 7px 70px 0;
}
.view-more-wrapper{
   font-size:18px;
   margin: 8px 10px;
}
a.view-more::before {
   left: 105px; 
}
.search-all-container {
   margin-top:30px;
   flex-direction: column;
   align-items: center;
}
a.view-more {
   padding: 5px 29px 0 10px;
}
.view-more-wrapper.atBottom{
   justify-content: center;
}
}