@charset "UTF-8";

/* ===============================================
# comics
=============================================== */
.p-comics {
  position: relative;
  overflow: hidden;
}

.p-comics__in {
  padding-top: 40px;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .p-comics__in {
    padding-top: 0px;
    margin-bottom: 52px;
  }
}

.p-comics__ttl {
  margin-bottom: 40px;
  font-size: 20px;
  line-height: 2;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}

@media screen and (max-width: 768px) {
  .p-comics__ttl {
    font-size: 12px;
    margin-bottom: 24px;
  }
}

.-subLoadComplete .p-comics__ttl {
  opacity: 1;
  -webkit-transform: translateY(0px) scaleY(1.15);
  transform: translateY(0px) scaleY(1.15);
  -webkit-transition: opacity 0.8s, -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

@media screen and (min-width: 769px) {
  .p-comics__wrap:hover .p-comics__item {
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
  }
}

.p-comics__item {
  position: relative;
  -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  opacity: 0;
  -webkit-animation: ani-fadein 0.8s cubic-bezier(0.02, 0.88, 0.58, 1) 0s 1 normal forwards;
  animation: ani-fadein 0.8s cubic-bezier(0.02, 0.88, 0.58, 1) 0s 1 normal forwards;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.85s, -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, -webkit-transform 0.85s, -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s, filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s, filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.85s, -webkit-filter 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
}

.p-comics__item:nth-of-type(1) {
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.p-comics__item:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.p-comics__item:nth-of-type(3) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.p-comics__item:nth-of-type(4) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.p-comics__item:nth-of-type(5) {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.p-comics__item:nth-of-type(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.p-comics__item:nth-of-type(7) {
  -webkit-animation-delay: 0.35s;
  animation-delay: 0.35s;
}

.p-comics__item:nth-of-type(8) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.p-comics__item:nth-of-type(9) {
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

.p-comics__item:nth-of-type(10) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.p-comics__item:nth-of-type(11) {
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}

.p-comics__item:nth-of-type(12) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.p-comics__item:nth-of-type(13) {
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}

.p-comics__item:nth-of-type(14) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.p-comics__item:nth-of-type(15) {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.p-comics__item:nth-of-type(16) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.p-comics__item:nth-of-type(17) {
  -webkit-animation-delay: 0.85s;
  animation-delay: 0.85s;
}

.p-comics__item:nth-of-type(18) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.p-comics__item:nth-of-type(19) {
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}


.p-comics__item:nth-of-type(1) .p-comics__img {
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.p-comics__item:nth-of-type(2) .p-comics__img {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.p-comics__item:nth-of-type(3) .p-comics__img {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.p-comics__item:nth-of-type(4) .p-comics__img {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.p-comics__item:nth-of-type(5) .p-comics__img {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.p-comics__item:nth-of-type(6) .p-comics__img {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.p-comics__item:nth-of-type(7) .p-comics__img {
  -webkit-animation-delay: 0.35s;
  animation-delay: 0.35s;
}

.p-comics__item:nth-of-type(8) .p-comics__img {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.p-comics__item:nth-of-type(9) .p-comics__img {
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

.p-comics__item:nth-of-type(10) .p-comics__img {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.p-comics__item:nth-of-type(11) .p-comics__img {
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}

.p-comics__item:nth-of-type(12) .p-comics__img {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.p-comics__item:nth-of-type(13) .p-comics__img {
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}

.p-comics__item:nth-of-type(14) .p-comics__img {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.p-comics__item:nth-of-type(15) .p-comics__img {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.p-comics__item:nth-of-type(16) .p-comics__img {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.p-comics__item:nth-of-type(17) .p-comics__img {
  -webkit-animation-delay: 0.85s;
  animation-delay: 0.85s;
}

.p-comics__item:nth-of-type(18) .p-comics__img {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.p-comics__item:nth-of-type(19) .p-comics__img {
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}

.p-comics__item:hover {
  -webkit-filter: inherit !important;
  filter: inherit !important;
}

@media screen and (min-width: 769px) {
  .p-comics__item:hover .p-comics__vol {
    bottom: 100%;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.p-comics__item:hover .p-comics__img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.p-comics__link {
  -webkit-transition: all 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: all 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
}

.p-comics__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.p-comics__img {
  width: calc(100% - 6vw);
  overflow: hidden;
  -webkit-animation: ani-flash 0.1s 2 cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal 0.2s;
  animation: ani-flash 0.1s 2 cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal 0.2s;
}

@media screen and (max-width: 768px) {
  .p-comics__img {
    width: calc(100% - 8.53333vw);
  }
}

.p-comics__img img {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
}

.p-comics__vol {
  width: 6vw;
  position: absolute;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: bottom 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: bottom 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), bottom 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), bottom 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  -webkit-transition-delay: .05s;
  transition-delay: .05s;
}

@media screen and (max-width: 768px) {
  .p-comics__vol {
    width: 8.53333vw;
  }
}

.p-comics__vol::before {
  width: 6vw;
  height: 13.33333vw;
  content: '';
  display: block;
}

@media screen and (max-width: 768px) {
  .p-comics__vol::before {
    width: 9.6vw;
  }
}

.-doubleDigit .p-comics__vol::before {
  height: 16.66667vw;
}

@media screen and (max-width: 768px) {
  .-doubleDigit .p-comics__vol::before {
    height: 26.66667vw;
  }
}

@media screen and (max-width: 768px) {
  .p-comics__vol::before {
    width: 8.53333vw;
    height: 24vw;
  }
}

.p-comics__vol.-vol1::before {
  background: url("../../assets/img/comics/comics_1_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol2::before {
  background: url("../../assets/img/comics/comics_2_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol3::before {
  background: url("../../assets/img/comics/comics_3_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol4::before {
  background: url("../../assets/img/comics/comics_4_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol5::before {
  background: url("../../assets/img/comics/comics_5_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol6::before {
  background: url("../../assets/img/comics/comics_6_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol7::before {
  background: url("../../assets/img/comics/comics_7_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol8::before {
  background: url("../../assets/img/comics/comics_8_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol9::before {
  background: url("../../assets/img/comics/comics_9_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol10::before {
  background: url("../../assets/img/comics/comics_10_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol11::before {
  background: url("../../assets/img/comics/comics_11_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol12::before {
  background: url("../../assets/img/comics/comics_12_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol13::before {
  background: url("../../assets/img/comics/comics_13_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol14::before {
  background: url("../../assets/img/comics/comics_14_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol15::before {
  background: url("../../assets/img/comics/comics_15_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol16::before {
  background: url("../../assets/img/comics/comics_16_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol17::before {
  background: url("../../assets/img/comics/comics_17_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol18::before {
  background: url("../../assets/img/comics/comics_18_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol19::before {
  background: url("../../assets/img/comics/comics_19_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol20::before {
  background: url("../../assets/img/comics/comics_20_vol.svg") no-repeat left bottom/contain;
}

.p-comics__vol.-vol21::before {
  background: url("../../assets/img/comics/comics_21_vol.svg") no-repeat left bottom/contain;
}



.p-comics__vol--txt {
  background: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

@media screen and (max-width: 768px) {
  .p-comics__vol--txt {
    max-width: 12px;
  }
}

.p-comics__linkbox {
  max-width: 910px;
  margin: 0 auto 48px;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.-subLoadComplete .p-comics__linkbox {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: opacity 0.8s, -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: opacity 0.8s, transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.85s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}

@media screen and (max-width: 768px) {
  .p-comics__linkbox {
    margin: 0 auto 28px;
  }
}

.p-comics__linkbox--link {
  padding: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  border: 1px solid #666666;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-comics__linkbox--link {
    padding: 16px;
  }
}

.p-comics__linkbox--link>div {
  width: 50%;
  position: relative;
  z-index: 10;
}

.p-comics__linkbox--link::before,
.p-comics__linkbox--link::after {
  content: '';
  position: absolute;
  height: 100%;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  background: rgba(255, 255, 255, 0.1);
  top: 0;
  width: calc(100% + 300px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}

.p-comics__linkbox--link::before {
  left: calc(-100% - 440px);
}

.p-comics__linkbox--link::after {
  left: calc(100% + 140px);
}

.p-comics__linkbox--link:hover::before,
.p-comics__linkbox--link:hover::after {
  left: -145px;
}

.p-comics__linkbox--txt {
  font-size: 20px;
  line-height: 2;
  text-align: center;
  -webkit-transform: translateX(-10px) scaleY(1.15);
  transform: translateX(-10px) scaleY(1.15);
}

@media screen and (max-width: 768px) {
  .p-comics__linkbox--txt {
    font-size: 12px;
    line-height: 1.875;
  }
}

.p-comics__linkbox--img {
  overflow: hidden;
}

.p-comics__linkbox--img img {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
  transition: transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98), -webkit-transform 0.5s cubic-bezier(0.18, 0.63, 0.19, 0.98);
}

a:hover .p-comics__linkbox--img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.p-comics .swiper {
  overflow: inherit !important;
}

.p-comics .swiper-wrapper {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-comics .swiper-wrapper.-slide {
  -webkit-transition-duration: 2s !important;
  transition-duration: 2s !important;
}