@charset "utf-8";

summary {
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  outline: none;
  padding-left:10px;
  color:#7d460d;
  display:list-item;
}

summary:hover {
  cursor: pointer;
  opacity: 1;
  transition: all .5s ease;
}

details[open] summary {
  background-color:#E0C09F;
}

details[open] .index-wrap {
  -webkit-animation: fadeIn 0.5s ease;
          animation: fadeIn 0.5s ease;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}




@media screen and (min-width: 768px) {
.index-wrap{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin: 0 3%;
}

.index-wrap-item{
width:20%;
margin:0 1%;
}


.index-wrap-item figure{
margin:0px;
}

.index-wrap-item figure img{
margin-bottom:0px;
}

.index-wrap-item figcaption{
font-size:60%;
text-align:center;
}
.pc{
display: block;
}
.sp{
  display: none;
}
}

@media screen and (max-width: 767px) {
.index-wrap{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.index-wrap-item{
width:20%;
margin:1%;
}

.index-wrap-item figure{
margin:0px;
}

.index-wrap-item figure img{
margin-bottom:0px;
}

.index-wrap-item figcaption{
font-size:60%;
text-align:center;
}
.sp{
display: block;
}
.pc{
  display: none;
}
}