@charset "utf-8";

/*********************
* マンガで見るカート
*********************/

/* PC */
@media print,screen and (min-width: 1001px) {
#comics .page_header {
	background-image: url(../images/comics/main.jpg);
}

#comics .s1 {
  margin: 120px 0 100px;
}

#comics .s1_box {
  background-color: #ffffc1;
  border: 20px solid #ffffc1;
  border-radius: 20px;
}

#comics .s1_box::after {
  content: "";
  display: block;
  width: calc(100% / 3 - 6px);
}

#comics .s1 .item {
  width: calc(100% / 3 - 6px);
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 30px;
  padding: 10px;
  position: relative;
}

#comics .s1 .item .img {
  margin-bottom: 20px;
}

#comics .s1 .item .latest_episode {
  display: inline-block;
  font-size: 1.286em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #dc000c;
  border-radius: 30px;
  margin: 0 0 10px 20px;
  padding: 3px 2.5em;
}

#comics .s1 .item h2 {
  font-size: 1.714em;
  line-height: 1.3;
  margin: 0 20px 20px;
}

#comics .s1 .item > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: ease all .5s;
}

#comics .s1 .item > a:hover {
  background-color: rgba(255, 255, 255, .5);
}

#comics .s2 {
  margin: 120px 0 180px;
}

#comics .s2 .caption {
  margin-bottom: 40px;
}

#comics .s2_box {
  background-color: #ffffc1;
  border: 20px solid #ffffc1;
  border-radius: 20px;
}

#comics .s2 .s2_inner {
  width: 520px;
  background-color: #fff;
  border-radius: 20px;
  margin: 0 auto;
  padding: 35px 0;
}

#comics .s2 .s2_box .img {
  text-align: center;
}

#comics .s2 .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

#comics .s2 .btns li + li {
  margin-left: 20px;
}

#comics .s2 .btns li:not([class]) .btn1 {
  width: 420px;
}
#comics .s2 .btns li.racepack .btn1 {
  background-color: #fac000;
}
#comics .s2 .btns li.private .btn1 {
  background-color: #f479b3;
}

#comics .s2 .btns li.racepack .btn1:hover {
  background-color: rgba(250, 192, 0, .7);
}
#comics .s2 .btns li.private .btn1:hover {
  background-color: rgba(244, 121, 178, .7);
}

} /* @media print,screen and (min-width: 1001px) */



/* SP */
@media screen and (max-width: 1000px) {
#comics .page_header {
	background-image: url(../images/comics/main_sp.jpg);
}

#comics .breadcrumbs {
  flex-wrap: wrap;
}

#comics .breadcrumbs li:not(:last-child) {
  flex-shrink: 0;
}

#comics .s1 {
  margin: 13vw 0 15vw;
}

#comics .s1 .contents_inner {
  padding-left: 2vw;
  padding-right: 2vw;
}

#comics .s1_box {
  background-color: #ffffc1;
  border: 10px solid #ffffc1;
  border-radius: 10px;
}

#comics .s1 .item {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 0;
  padding: 10px;
  position: relative;
}

#comics .s1 .item + .item {
  margin-top: 3vw;
}

#comics .s1 .img {
  margin-bottom: 3vw;
}

#comics .s1 .item .latest_episode {
  display: inline-block;
  color: #fff;
  text-align: center;
  background-color: #dc000c;
  border-radius: 30px;
  margin: 0 2vw 1vw;
  padding: 1px 1.5em;
}

#comics .s1 .item h2 {
  font-size: 1.231em;
  line-height: 1.3;
  margin: 0 3vw 3vw;
}

#comics .s1 .item > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#comics .s2 {
  margin: 13vw 0 15vw;
}

#comics .s2 .contents_inner {
  padding-left: 2vw;
  padding-right: 2vw;
}

#comics .s2 .caption {
  margin-bottom: 5vw;
  padding-left: 3vw;
  padding-right: 3vw;
}

#comics .s2 .caption .border {
  margin-top: 1.5vw;
}

#comics .s2_box {
  background-color: #ffffc1;
  border: 10px solid #ffffc1;
  border-radius: 10px;
}

#comics .s2 .s2_inner {
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
}

#comics .s2 .s2_box .img {
  text-align: center;
}

#comics .s2 .btns {
  margin-top: 7vw;
}

#comics .s2 .btns li + li {
  margin-top: 3vw;
}

#comics .s2 .btns li .btn1 {
  margin: 0 auto;
}
#comics .s2 .btns li:not([class]) .btn1 {
  background-position: right 20px center;
  padding: 2vw 55px 2vw 7vw;
}
#comics .s2 .btns li.racepack .btn1 {
  background-color: #fac000;
}
#comics .s2 .btns li.private .btn1 {
  background-color: #f479b3;
}

#comics .s2 .btns li .btn1 span {
  display: block;
}

} /* @media screen and (max-width: 1000px) */