@charset "utf-8";

@import url(normalize.css);
@import url(common_parts.css);
@import url(common.css);



/* common */
.list-hide { display:none!important; }
.active { display:block!important; }
.none { display:none!important; }
#anchor ul li.list-active { background:#663300; color:#fff; }


/* anchor */
#anchor {}
#anchor h2 { font-size: 4rem; font-weight: bold; text-align:center; color:#707070; margin:5rem 0; }
#anchor ul { display:flex; justify-content:center; max-width:124rem; width:100%; margin:auto; padding:0 2rem; flex-wrap:wrap; }
#anchor ul li { width:calc((100% - 5rem) / 2); margin-right:2rem; background:#B9ABAB; }
#anchor ul li:nth-of-type(2n) { margin-right:0; }
#anchor ul li:nth-of-type(n+3) { margin-top:2rem; }
#anchor ul li a { display:block; position:relative; font-size:3.2rem; color:#fff; padding-left:1em; }
#anchor ul li a:after { content:"▼"; display:block; position:absolute; top:50%; right:2%; transform:translateY(-50%); }
@media screen and (max-width:1100px){
  #anchor ul li a { font-size: 2.2rem; }
}
@media screen and (max-width:768px){
  #anchor ul li a { font-size: 2rem; }
}
@media screen and (max-width:414px){
  #anchor h2 { font-size: 2.2rem; }
  #anchor ul { display:block; }
  #anchor ul li { width:100%; padding:1rem 2rem; }
  #anchor ul li:nth-of-type(n+2) { margin-top:1rem; }
  #anchor ul li a { font-size:2rem; text-align:center; }
}


/* archive-list */
#archive-list { margin-top: 8rem; margin-bottom: 10rem; }
#archive-list .inner { max-width:124rem; width:100%; margin:auto; padding:0 2rem; }
#archive-list div.list { display:flex; justify-content:flex-start; flex-wrap:wrap; }

#archive-list div.list > div { width:calc((100% - 6rem) / 3); margin:0 1rem; border:solid 1px #BBB9B9; border-radius:15px; box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2); }
#archive-list div.list div:nth-of-type(n+4) { margin-top:3rem; }
#archive-list div.list div a { display:block; padding:3rem; color:#787878;}
#archive-list div.list div .img { overflow:hidden; border-radius:15px; }
#archive-list div.list div .img img { transform:scale(1); transition:ease-out .3s all; }
#archive-list div.list div a:hover img { transform:scale(1.2);  }
#archive-list div.list div p.day { font-size: 1.4rem; margin-bottom:1rem; }
#archive-list div.list div p.cate { font-size: 1.4rem; margin:1rem 0; }
#archive-list div.list div h3 { font-size:2rem; font-weight: bold; }

#archive-list .more { position:relative; width:100%; max-width:60%; margin:5rem auto 0; cursor:pointer; border:solid 1px #707070; background:#fff; }
#archive-list .more span { position:absolute; content:""; display:inline-block; width:100%; height:100%; background:#663300; transform:scaleX(0); transition:ease-out .3s all; }
#archive-list .more p { text-align:center; font-size:1.8rem; font-weight: bold; color:#663300; padding:2rem; }
#archive-list .more:hover span { background:#663300; transform:scaleX(1); }
#archive-list .more:hover p { position:relative; color:#fff; z-index:10; }

@media screen and (max-width:900px){
  #archive-list div.list div a { padding:2rem; }
}

@media screen and (max-width:414px){
  #archive-list { margin-top: 5rem; }
  #archive-list div.list { display:block; }
  #archive-list div.list > div { margin:0; }
  #archive-list div.list div { width:100%; }
  #archive-list div.list div:nth-of-type(n+2) { margin-top:2rem; }
}

/* animation */
.fuwa {
    animation-name:fuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
@keyframes fuwa {
    0% {
        transform: translate(0,-15px);
    }

    100% {
        transform: translate(0,-5px)
    }
}