@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 1rem 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% - 6rem) / 4);
  margin-right: 2rem;
  display: list-item;
  background: #B9ABAB;
}
#anchor ul li:nth-of-type(4n) { margin-right: 0; }
#anchor ul li:nth-of-type(n+3) { margin-top: 0; }
#anchor ul li.list-active { background: #663300; color: #fff; }
#anchor ul li a { display:block; position:relative; font-size:1.6rem; padding: 1.2rem 1em;  /* 上下の余白も少し縮める */ 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: 1.8rem; }
}
@media screen and (max-width:768px){
  #anchor ul li a { font-size: 2rem; }
}
@media screen and (max-width:414px){
  #anchor h2 { font-size: 2.5rem; }
  #anchor ul { display:flex; flex-wrap:wrap; padding:0 1rem; }
  #anchor ul li { width:calc((100% - 1rem) / 2); margin-right:1rem; padding:1rem 0; }
  #anchor ul li:nth-of-type(2n) { margin-right:0; }
  #anchor ul li:nth-of-type(n+3) { margin-top:1rem; }
  #anchor ul li a { font-size:1.6rem; text-align:center; padding-left:0; }
  #anchor .anchor-desc {text-align: center !important; padding: 0 2rem; font-size: 4rem;
  }
}
#anchor .anchor-desc {
  text-align: center;
  font-size: 1.6rem;
  color: #707070;
  margin-bottom: 3rem;
}


/* 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:1.4rem; font-weight: 500; }

#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)
    }
}