@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, header, footer, div, ul, li, p, h1, figure {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

body {
  background: url(../img/bg_flower.jpg) center top;
  font-family: "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "HG丸ゴシックM-PRO", "HGMaruGothicMPRO", "メイリオ", Meiryo, sans-serif;
  text-align: center;
}

header {
  padding: 35px 0;
}
header figure {
  margin: -70px 0 20px -10px;
}
header p {
  color: #781b2e;
  font-size: 22px;
}

footer {
  padding: 35px 0 15px;
}
footer .banner {
  width: 326px;
  height: 61px;
  margin: 0 auto 15px;
}
footer .banner a, footer .banner img {
  display: block;
}
footer .banner a img {
  -webkit-transition: -webkit-filter .2s;
  transition: -webkit-filter .2s;
  transition: filter .2s;
  transition: filter .2s, -webkit-filter .2s;
}
footer .banner a:hover img {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
footer small {
  color: #751f2f;
  font-family: Helvetica,sans-serif;
  font-size: 12px;
}

.main {
  width: 800px;
  margin: auto;
}
.main ul {
  width: 798px;
  margin: auto;
}
.main ul::after {
  content: "";
  display: block;
  clear: both;
}
.main li {
  float: left;
  width: 260px;
  height: 195px;
  margin: 3px;
  background-color: white;
  border-radius: 20px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.main li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: hidden;
}
.main li a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 55px;
  background: url(../img/over_illust.png) no-repeat center;
  bottom: -55px;
}
.main li a:hover::after {
  -webkit-animation: bounce .3s ease both;
          animation: bounce .3s ease both;
}
.main li img {
  max-width: 100%;
}

[data-aos^=flip] {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-55px);
            transform: translateY(-55px);
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-55px);
            transform: translateY(-55px);
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
}