@charset "utf-8";
/* CSS Document */

.comic {
  margin-top: 30px;
}
.comic h1 {
  width: 577px;
  margin: 0 auto;
}
.comic > div {
  width: 1080px;
  margin: 10px auto 0 auto;
  padding: 9px;
  background: #fff;
}
.comic > div > div {
  padding: 44px 57px;
  border: solid 8px #ffea00;
  font-family: 'M PLUS 1p', "Hiragino Kaku Gothic ProN", "Hiragino Sans W3",  "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.comic > div > div ul {
  display: flex;
  width: 100%;
  margin-top: 50px;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.comic > div > div ul li {
  width: calc((100% - 22px) / 2);
  border: solid 2px #d3d3d3;
}
.comic > div > div ul li a {
  display: flex;
  gap: 15px;
  padding: 20px;
}
.comic > div > div ul li a div {}
.comic > div > div ul li a div.thum {
  width: 260px;
  border: solid 2px #d3d3d3;
}
.comic > div > div ul li a div.detail {
  flex: 1;
  text-align: left;
  font-size: 16px;
  color: #b2b2b2;
  font-weight: bold;
  line-height: 170%;
}
.comic > div > div ul li a div.detail > span {
  font-size: 30px;
  color: #5e5e5e;
}
.comic > div > div ul li a div.detail > span > span {
  font-size: 40px;  
}

.comic > div > div ul li a div.read {
  display: none;
}

.comic > div > div .viewer {
  width: 611px;
  margin: 50px auto 0 auto;
  border: solid 2px #d3d3d3;
}
.comic > div > div .view_control {
  display: flex;
  width: 100%;
  margin-top: 30px;
  justify-content: center;
  align-items: center;
}
.comic > div > div .view_control .nav-block {
  text-align: center;
}
.comic > div > div .view_control .nav-block a {
  display: block;
  transition: transform 0.2s;
}
.comic > div > div .view_control .nav-block a:hover {
  opacity: 0.8;
}
.comic > div > div .view_control .is-prev, .comic > div > div .view_control .is-next {
  width: 12.89%;
  max-width: 133px;
}
.comic > div > div .view_control .is-prev a:hover {
  transform: rotateZ(-10deg);
}
.comic > div > div .view_control .is-next a:hover {
  transform: rotateZ(10deg);
}
.comic > div > div .view_control .is-counter {
  width: 9.79%;
  margin: 0 90px;
  color: #5e5e5e;
  font-size: 34px;
  font-weight: bold;
  max-width: 101px;
}
.comic > div > div .view_control .is-disabled {
  position: relative;
}
.comic > div > div .view_control .is-disabled a {
  cursor: default;
  opacity: 0.5 !important;
}
.comic > div > div .view_control .is-disabled a:hover {
  transform: none;
}
.comic > div > div .view_control .is-disabled a img {
   filter: grayscale(100%);
}

.comic .btnBack {
  display: block;
  width: 531px;
  margin: 45px auto 0 auto;
}

@media (max-width: 1180px) {
  .comic h1 {
    width: 51.6%;
    margin: 0 auto;
  }  
  .comic > div {
    width: 100%;
    padding: 9px 0;
  }
  .comic > div > div {
    padding: 3.33vw 5.33vw;
    border-top: solid 8px #ffea00;
    border-bottom: solid 8px #ffea00;
    border-left: none;
    border-right: none;
  }
  .comic > div > div ul {
    display: flex;
    width: 100%;
    margin-top: clamp(20px, 3vw, 50px);
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
  }
  .comic > div > div ul li {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px #d3d3d3;
  }
  .comic > div > div ul li:last-child {
    border-bottom: none;
  }
  .comic > div > div ul li a {
    display: flex;
    gap: 10px;
    padding: 3vw;
  }
  .comic > div > div ul li a div {}
  .comic > div > div ul li a div.thum {
    width: 45.37%;
  }
  .comic > div > div ul li a div.detail {
    flex: 1;
    text-align: left;
    font-size: clamp(12px, 3.33vw, 25px);
    color: #b2b2b2;
    font-weight: bold;
    line-height: 170%;
  }
  .comic > div > div ul li a div.detail > span {
    font-size: clamp(12px, 4vw, 30px);
    color: #5e5e5e;
  }
  .comic > div > div ul li a div.detail > span > span {
    font-size: clamp(12px, 5.33vw, 40px);
  }

  .comic > div > div ul li a div.read {
    display: block;
    width: 17.01%;
    padding: 1vw 2.67vw;
    align-self: center;
    border: solid 3px #ffa200;
    color: #ffa200;
    text-align: center;
    font-size: clamp(12px, 3.5vw, 22px);
    letter-spacing: -0em;
    border-radius: 9999px;
  }
  
  .comic > div > div .viewer {
    width: 100%;
    max-width: 611px;
    margin-top: clamp(20px, 3vw, 50px);
  }
  .comic > div > div .view_control {
    margin-top: clamp(10px, 2.54vw, 30px);
  }
  .comic > div > div .view_control .is-counter {
    margin: 0 clamp(30px, 7.63vw, 90px);
    max-width: 101px;
  }

  .comic .btnBack {
    display: block;
    width: 70.27%;
    margin: 6.67vw auto 0 auto;
  }

}

@media (max-width: 768px) {
  .comic > div > div .view_control .is-prev, .comic > div > div .view_control .is-next {
    width: 25%;
    max-width: 133px;
  }
  .comic > div > div .view_control .is-counter {
    width: 20%;
    max-width: 101px;
  }
}