@charset "utf-8";

.kome {
  font-size: 18rem;
}
.gray {
  color: #999;
}
.bracket_mgn {
  margin: 0 -0.5em;
}
.pop {
  border: none;
  -webkit-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
.pop:hover {
  -webkit-filter: brightness(1.15);
  filter: brightness(1.15);
}

.serif {
  position: relative;
  margin: 0 0 26px;
  text-align: center;
}
.serif img {
  width: 100%;
  max-width: 877px;
  text-align: center;
}
.link_btn {
  position: absolute;
  top: 148px;
  left: 64px;
  display: block;
  width: 130px;
  height: 29px;
  background: url(../img/btn_link.png) 0 0 no-repeat;
  border: none;
}
.link_btn img {
  display: block;
  width: 130px;
  height: 29px;
  background: url(../img/btn_link.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.link_btn:hover img {
  opacity: 1;
}
.award01 {
  position: relative;
  margin: 0 auto 30px;
  background: url(../img/award01.png) 0 0 no-repeat;
}
.award01 a.pop {
  position: absolute;
}
.award02 {
  position: relative;
  background: url(../img/award02.png) 0 0 no-repeat;
}
.award02 a.pop {
  position: absolute;
}
.award03 {
  position: relative;
  background: url(../img/award03.png) 0 0 no-repeat;
}
.award03 a.pop {
  position: absolute;
}

.illust_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 98%;
  margin: auto;
}
.illust_list li {
  width: 28.4vw;
  padding: 0 0 12px;
  text-align: center;
  font-size: 17rem;
}
.illust_list li a {
  display: block;
  width: 28.4vw;
  height: 28.4vw;
  margin: 0 0 4px;
  background: #fff 50% 50% / contain no-repeat;
  -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 7px rgba(0,0,0,0.3);
  border: none;
}

.illust_list li .f_small {
  font-size: 13rem;
}

@media screen and (max-width:670px) {
  .smart-hide {
    display: none;
  }
  .pc-hide {
    display: inline-block;
  }
  .frame .inner {
    height: 3820px;
  }
  .award01, .award02, .award03 {
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    margin: 0 auto 30px;
  }
  .award01 {
    width: 579px;
    height: 460px;
  }
  .award02, .award03 {
    width: 339px;
    height: 323px;
  }
  .award01 a.pop {
    top: 58px;
    left: 23px;
  }
  .award01 a.pop img {
    width: 215px;
  }
  .award02 a.pop,
  .award03 a.pop {
    top: 54px;
    left: 16px;
  }
  .award02 a.pop img,
  .award03 a.pop img {
    width: 138px;
  }
}

@media screen and (min-width:671px) {
  .pc-hide {
    display: none;
  }
  .frame .inner {
    height: 3440px;
  }
  .award01 {
    width: 772px;
    height: 612px;
  }
  .award01 a.pop {
    top: 76px;
    left: 28px;
  }
  .award02 {
    position: relative;
    width: 452px;
    height: 430px;
    margin: 0 0 40px 3px;
    background: url(../img/award02.png) 0 0 no-repeat;
  }
  .award02 a.pop,
  .award03 a.pop {
    top: 70px;
    left: 20px;
  }
  .award03 {
    position: absolute;
    top: 837px;
    left: 464px;
    width: 452px;
    height: 430px;
    background: url(../img/award03.png) 0 0 no-repeat;
  }
  .illust_list li {
    width: 214px;
    padding: 0 0 12px;
  }
  .illust_list li a {
    position: relative;
    width: 214px;
    height: 214px;
  }
  .illust_list li a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 214px;
    height: 214px;
    background: #fff;
    opacity: 0;
    z-index: 10;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }
  .illust_list li a:hover:after {
    opacity: 0.4;
  }
}