@charset "utf-8";

.wrap {
  width: 100%;
}

.header {
  width: 100%;
  margin: 0 0 30px;
}

.content {
  width: 100%;
  margin: 0 auto;
}

.outer {
  position: relative;
  width: 100%;
  margin: 0 auto 40px;
  padding: 12px 0 0;
}

.section {
  position: relative;
  width: 100%;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20291.65%20301.29%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3A%23ddd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22b%22%20d%3D%22M43.9%2C40.57c3.66%2C0%2C7.65%2C0%2C10.64-2.99%2C1.33-1.33%2C6.98-8.98%2C8.98-8.98%2C3.33%2C0%2C23.61%2C15.3%2C23.61%2C21.28%2C0%2C1.33-1%2C2.66-2%2C3.33-5.65%2C3.99-6.32%2C4.66-6.98%2C6.65-.67%2C2.33-1%2C74.82-1%2C84.13%2C0%2C8.31%2C1%2C49.22%2C1%2C58.53%2C0%2C7.65%2C0%2C19.62-14.63%2C19.62-9.31%2C0-9.31-7.65-9.31-17.29%2C0-7.32-4.99-7.32-9.31-7.32h-11.64c-3.33%2C0-6.65%2C0-8.31%2C3.33-.67%2C1.33-.33%2C12.97-.33%2C17.29%2C0%2C6.98%2C0%2C19.62-15.96%2C19.62-7.98%2C0-8.65-5.99-8.65-10.64%2C0-2%2C.67-12.3%2C.67-14.3%2C.67-26.94%2C1.66-61.85%2C1.66-135.35%2C0-5.99-1-35.58-1-42.23%2C0-2.99%2C0-7.32%2C2.33-7.32%2C2.99%2C0%2C17.96%2C8.65%2C21.28%2C10.31%2C4.99%2C2.33%2C7.98%2C2.33%2C13.3%2C2.33h5.65Zm1%2C148.32c4.32%2C0%2C8.98%2C0%2C9.31-7.98%2C.33-13.63%2C.67-95.77%2C.67-113.4%2C0-15.3%2C0-18.29-9.31-18.29h-10.64c-4.32%2C0-9.31%2C0-10.31%2C6.32-.33%2C3.33-.33%2C95.44-.33%2C109.41%2C0%2C21.28%2C0%2C23.94%2C9.64%2C23.94h10.97Zm88.79-109.41c-2.99%2C0-5.65%2C0-7.65%2C2-2.33%2C2.33-2.33%2C4.99-2.33%2C30.59%2C0%2C81.48-8.31%2C115.73-27.27%2C146.65-15.96%2C26.27-42.9%2C42.57-43.9%2C42.57s-1.33-.67-1.33-1.33c0-.33%2C14.96-18.62%2C17.62-22.61%2C27.27-41.57%2C32.26-86.46%2C32.26-152.31%2C0-24.28-1-42.9-1.33-49.22-.33-2-1.66-10.97-1.66-13.3s.67-2.99%2C2.99-2.99c4.32%2C0%2C12.64%2C3.66%2C16.29%2C5.32%2C11.97%2C5.65%2C17.96%2C5.99%2C24.94%2C5.99h22.61c9.98%2C0%2C9.98-3.66%2C9.98-12.97%2C0-7.98%2C0-38.58-1-45.23-.33-1.33-4.32-8.65-4.32-10.64s2.66-2%2C3.66-2c2%2C0%2C24.28%2C4.99%2C29.6%2C7.98%2C1.33%2C.67%2C2%2C2.33%2C2%2C3.33%2C0%2C1.33-4.66%2C6.65-5.65%2C7.98-1%2C2-1.33%2C5.65-1.33%2C8.31%2C0%2C7.98%2C5.32%2C7.98%2C9.64%2C7.98h19.95c13.97%2C0%2C15.3%2C0%2C19.95-7.32%2C2-3.33%2C6.65-10.31%2C9.64-10.31%2C4.32%2C0%2C27.27%2C17.96%2C27.27%2C22.28%2C0%2C2.66-3.33%2C3.66-5.65%2C3.66-3.99%2C.33-5.99%2C.33-12.3%2C.33h-58.86c-9.98%2C0-9.98%2C2.99-9.98%2C13.3%2C0%2C9.64%2C0%2C13.3%2C10.31%2C13.3h28.6c4.32%2C0%2C10.64%2C0%2C15.3-4.99%2C5.99-6.32%2C6.32-6.98%2C8.98-6.98%2C.67%2C0%2C1%2C0%2C1.66%2C.33%2C1%2C.33%2C16.96%2C15.96%2C18.96%2C17.63%2C9.31%2C8.98%2C10.31%2C9.98%2C10.31%2C13.3%2C0%2C4.99-4.99%2C5.65-9.31%2C5.65-2.33%2C0-14.63-1-17.29-1-4.66%2C0-17.96%2C4.99-17.96%2C7.98%2C0%2C1%2C1.66%2C3.99%2C1.66%2C4.99%2C0%2C4.99-5.32%2C5.32-17.29%2C6.65l-29.93%2C3.66c-5.99%2C.67-9.31%2C1.66-9.31%2C12.97%2C0%2C12.64%2C2.33%2C14.63%2C32.26%2C14.63s32.26-2.33%2C36.58-10.64c2-3.33%2C7.98-21.95%2C9.98-21.95%2C1.66%2C0%2C2.33%2C1.33%2C2.66%2C3.66%2C1%2C14.96%2C4.99%2C22.61%2C6.65%2C23.61%2C3.99%2C3.66%2C4.66%2C3.99%2C4.66%2C6.32%2C0%2C4.32-5.65%2C13.3-15.3%2C16.29-9.98%2C2.99-33.59%2C3.33-44.56%2C3.33-54.21%2C0-54.21-6.32-54.21-36.25%2C0-4.66-1.66-7.32-5.99-7.32-3.33%2C0-21.62%2C3.99-22.61%2C3.99s-1.66-.67-2.99-2l-7.32-6.65c-1-.67-1.66-1.66-1.66-2.33s1.33-1%2C3.33-1c8.31%2C0%2C15.96-.67%2C24.28-1.33%2C11.64-.67%2C12.97-1.33%2C12.97-13.3%2C0-18.62%2C0-20.62-9.64-20.62h-27.6Zm-26.6%2C205.52c-.67-1-1.33-1.66-1.33-2.33s.67-.67%2C1.33-.67c6.65%2C0%2C40.57%2C2%2C48.22%2C2%2C3.99%2C0%2C6.32-1%2C6.98-4.32%2C.33-1.66%2C.33-44.23%2C.33-51.21%2C0-9.64%2C0-25.61-.67-34.25-.33-2.33-2.99-12.97-2.99-15.63%2C0-1.33%2C.67-3.33%2C2.99-3.33%2C1.66%2C0%2C19.95%2C5.32%2C26.27%2C7.65%2C1.66%2C.67%2C3.33%2C2%2C3.33%2C4.66%2C0%2C1.66-6.32%2C8.31-6.65%2C9.98-.67%2C2.99-1%2C33.26-1%2C39.24s0%2C41.9%2C.67%2C44.23c1%2C3.33%2C3.66%2C3.33%2C11.31%2C3.33%2C2.99%2C0%2C7.32%2C0%2C7.98-4.66%2C.33-1.66%2C.33-41.9%2C.33-48.22%2C0-26.6%2C0-28.93-.67-37.25-.33-2.33-2.66-13.63-2.66-16.29s1.66-2.66%2C3.66-2.66c2.33%2C0%2C29.93%2C7.65%2C29.93%2C14.3%2C0%2C1.66-7.65%2C8.31-7.98%2C10.31-1%2C3.33-1%2C38.91-1%2C44.89%2C0%2C4.99%2C0%2C31.59%2C.33%2C34.25%2C.33%2C3.99%2C3.99%2C5.32%2C7.98%2C5.32%2C10.31%2C0%2C12.3-1%2C14.3-2.66%2C2.66-2.33%2C12.64-17.96%2C16.63-17.96%2C3.66%2C0%2C25.61%2C20.29%2C25.61%2C24.94%2C0%2C4.32-6.98%2C4.32-17.62%2C4.32h-107.08c-7.98%2C0-30.26%2C0-41.9%2C1-1%2C0-5.99%2C.67-6.98%2C.67s-2-1-2.99-2l-6.65-7.65Zm50.88-32.59c0%2C9.64-5.32%2C17.29-12.64%2C17.29-12.64%2C0-12.97-10.64-13.97-35.25-.33-10.31-3.99-21.62-8.31-31.59-.33-.67-.67-1.66%2C0-2%2C1-1%2C34.92%2C22.28%2C34.92%2C51.55Zm30.59-172.93c-1.33%2C0-2.33%2C0-2.33%2C1.66%2C0%2C3.33%2C6.98%2C4.99%2C7.65%2C4.99%2C2%2C.33%2C7.32%2C1.66%2C7.32%2C5.65%2C0%2C1.66-5.65%2C5.99-6.65%2C6.98-1.33%2C1.33-1.66%2C2.99-1.66%2C5.32%2C0%2C4.66%2C3.33%2C5.32%2C5.65%2C5.32%2C11.64%2C0%2C14.63-4.66%2C15.96-7.32%2C5.32-10.64%2C5.65-11.97%2C8.65-11.97%2C2.33%2C0%2C10.97%2C5.65%2C13.3%2C5.65%2C4.32%2C0%2C7.65-10.97%2C7.65-12.3%2C0-3.99-4.66-3.99-6.98-3.99h-48.55Zm63.18%2C115.73c.33%2C0%2C31.26%2C11.97%2C31.26%2C16.29%2C0%2C2.99-2%2C3.66-7.32%2C5.65-3.33%2C1-3.99%2C2.33-9.64%2C12.64-12.64%2C22.61-31.26%2C42.57-32.92%2C42.57-.67%2C0-.67-.67-.67-1%2C0-1%2C6.98-22.61%2C8.65-27.27%2C2.33-7.32%2C9.64-33.25%2C9.64-39.91%2C0-1-1.66-5.32-1.66-6.32s.33-1.66%2C1-2c.33-.33%2C1-.67%2C1.66-.67Z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: bottom 40px right -20px;
  background-size: 60% auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.inner {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.entry__fornt {
  position: absolute;
  width: 30%;
  top: 0;
  left: 0;
  z-index: 3;
}

.entry__back {
  position: absolute;
  width: 30%;
  top: 0;
  left: 0;
  z-index: 1;
}

.logo {
  width: 70%;
  margin: 0 auto;
}

.title__text {
  text-align: center;
  color: #e0373d;
  font-size: 26px;
  font-weight: 900;
}

.koma__image {
  width: 100%;
  margin: 10px 0 20px;
}

.koma__image img {
  border: #000 solid 2px;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
}

.detail__box {
  width: 100%;
  margin: 0 0 20px;
  display: flex;
  justify-content: space-between;
}

.cover {
  width: 45%;
}

.cover img {
  border: #ccc solid 1px;
}

.synopsis {
  width: 50%;
}

.number {
  width: 100%;
  padding: .3rem 0;
  margin: 0 0 10px;
  background: rgb(53, 82, 165);
  background: linear-gradient(90deg, rgba(53, 82, 165, 1) 0%, rgba(49, 204, 176, 1) 89%);
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  vertical-align: baseline;
}

.synopsis p {
  color: #000;
  font-size: 14px;
  font-weight: 500;
}

.btn {
  width: 100%;
  margin: 0 auto;
}

.btn img {
  box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
}

.read {
  width: 90%;
  margin: 0 auto;
  padding: 0 0 20px;
}

.social {
  width: 100%;
  padding-bottom: 40px;
  text-align: center;
}

.social li {
  display: inline-block;
  width: 50px;
  margin: 0 12px;
  vertical-align: middle;
}

.btn__back {
  width: 40%;
  margin: 0 auto;
  padding: 0 0 40px;
}

.footer {
  width: 100%;
  margin: 0 auto;
  padding: 2em 0 5em;
  font-size: 12px;
  font-weight: 300;
  text-align: center;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .pc_display {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sp_display {
    display: none;
  }

  .wrap {
    width: 100%;
    height: 900px;
    background-image: url(../img/kouka_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .header {
    width: 100%;
    height: 700px;
    background-image: url(../img/pc_top.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }

  .content {
    width: 60%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1025px) {
  .sp_display {
    display: none;
  }

  .wrap {
    width: 100%;
    height: 900px;
    background-image: url(../img/kouka_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .header {
    width: 100%;
    height: 700px;
    background-image: url(../img/pc_top.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }

  .read {
    width: 640px;
    margin: 0 auto;
  }

  .content {
    width: 640px;
    margin: 0 auto;
  }

  .inner {
    width: 80%;
  }

  .section {
    background-size: 50% auto;
    background-position: bottom 80px right -40px;
  }

  .number {
    font-size: 20px;
  }

  .synopsis p {
    font-size: 16px;
  }

  .btn {
    width: 70%;
    margin: 0 auto;
  }

  .read {
    width: 80%;
    margin: 0 auto;
    padding: 0 0 20px;
  }

  .alpha a {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }

  .alpha a:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
  }

  a.btn_over img {
    -webkit-transition: -weblit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
  }

  a.btn_over img:hover {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }
}