@charset "utf-8";

.wrap {
  width: 100%;
}

.header {
  width: 100%;
}

.outer {
  position: relative;
  width: 100%;
  background-image:
    url(../img/bg_top.png),
    url(../img/bg.jpg);
  background-size:
    100% auto,
    100% auto;
  background-repeat:
    no-repeat,
    repeat-y;
  background-position:
    top left,
    top left;
}

.social_area {
  width: 100%;
  padding: 3% 0;
  text-align: center;
}

.social_area_bg {
  background: rgba(175, 0, 0, 1.0);
}

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

.content {
  width: 90%;
  margin: 0 auto 1.2rem;
}

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

.anchor__area {
  width: 100%;
  padding: 3% 0 0;
}

.anchor__area li {
  width: 100%;
  margin-bottom: 1.4%;
}

.anchor__area li:first-child {
  margin-bottom: 0;
}

.episode__area {
  background-image: url(../img/bg_inner.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top left;
}

.wanokuni__area {
  background-image: url(../img/bg_inner_short.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top left;
}

.episode__title {
  margin: 10px 0 10px;
}

.episode__text__left {
  height: auto;
  position: relative;
  text-align: left;
  align-items: center;
  display: flex;
  justify-content: left;
}

.episode__image__left {
  position: absolute;
  width: 60%;
  left: -9%;
}

.episode__text__right {
  height: auto;
  position: relative;
  text-align: right;
  align-items: center;
  display: flex;
  justify-content: right;
}

.episode__image__right {
  position: absolute;
  width: 60%;
  right: -9%;
}

.furigana {
  position: absolute;
  width: 24%;
  height: auto;
  top: 19%;
  left: -2%;
}

.btn__read {
  width: 66%;
  margin: 10px auto 0;
}

.shikiri {
  width: 90%;
  margin: 20px auto 10px;
}

.comics__area {
  margin: 24px 0;
}

.comics__area li {
  width: 100%;
}

.comics__area li:nth-child(2) {
  margin: 10px 0;
}

.btn__read__99{
  width: 80%;
  margin: 20px auto;
}

.footer {
  width: 100%;
  padding: 2rem 0;
  font-size: 12px;
  text-align: center;
}

#page-top {
    position: relative;
    width: 5rem;
    height: 5rem;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 9999;
}

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

  .header__inner img {
    height: 100%
  }

  .content {
    width: 80%;
  }

  .inner {
    width: 90%;
    margin: 0 auto;
  }

  .social_area li {
    width: 42px;
    margin: 0 20px;
  }

}

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

  .header {
    height: 500px;
    margin: 0 auto;
    background-image: url(../img/pc_top.jpg);
    background-size: auto 500px;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #e8d9bb;
  }

  .header img {
    height: 100%
  }

  .outer {
    width: 100%;
    background-image:
      url(../img/pc_bg_top.png),
      url(../img/bg.jpg);
    background-size:
      100% auto,
      750px auto;
    background-repeat:
      no-repeat,
      repeat;
    background-position:
      top left,
      top left;
  }

  .content {
    width: 720px;
  }

  .inner {
    width: 66%;
    margin: 0 auto;
    padding: 50px 0 70px;
  }

  .social_area li {
    width: 50px;
    margin: 0 20px;
  }

  .episode__title {
    width: 70%;
    margin: 20px auto;
  }

  .shikiri {
    width: 70%;
    margin: 40px auto 20px;
  }

  .comics__area {
    width: 480px;
    margin: 40px auto;
  }

  .center {
    text-align: center;
  }

  .kazari {
    width: 480px;
  }

  .btn__read__99{
    width: 46%;
    margin: 20px auto 40px;
  }

  .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.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }

  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);
  }
}