@font-face {
  font-family: 'NotoSans-regular';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.eot");
  src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.woff") format("woff"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'NotoSans-bold';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.eot");
  src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.woff") format("woff"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.ttf") format("truetype");
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* ============================================================================================
  TOP

  @date 2017-07-12
  @include _top

  memo:

  @mixin =========================================================================================== */
#top-page {
  background-color: #ff0000;
}

#blind {
  background-color: #ff0000;
}

.preloader__bar {
  background-color: #ff0000;
}

.main {
  width: 100%;
  height: 100%;
  min-height: 840px;
  position: relative;
  z-index: 0;
}

.main__cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #ff0000;
  display: none;
  transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
}

.main__cover.origin100 {
  transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
}

.main__visualPC {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

.main__visualPC p {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: none;
}

.main__visualPC p.is__current {
  display: block;
}

.main__visualSP {
  display: none;
}

.mainmodal__cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8001;
  background-color: #ff0000;
  transform: scaleX(0);
  transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
}

.mainmodal__cover.origin100 {
  transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
}

.mainmodal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8000;
}

.mainmodal__visual {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.mainmodal__btnClose {
  position: absolute;
  right: 42px;
  top: 45px;
  z-index: 1;
}

.mainmodal__visual__pc {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.mainmodal__visual__pc p {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.mainmodal__visual__pc__fix {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  display: none;
}

.mainmodal__visual__pc__ci {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  overflow: hidden;
}

.mainmodal__visual__pc__ci__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.mainmodal__visual__pc__ci1,
.mainmodal__visual__pc__ci2,
.mainmodal__visual__pc__ci3 {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
}

.mainmodal__visual__sp {
  display: none;
}

.mainmodal__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: table;
  background-color: rgba(0, 0, 0, 0.5);
}

.mainmodal__inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.mainmodal__al {
  width: 80%;
  margin: 0 auto;
}

.mainmodal__anime {
  width: 100%;
  height: 100%;
}

.mainmodal__anime p {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/uploads/update_anime.jpg") no-repeat center center;
  background-size: cover;
}

.options {
  width: 100%;
}

.options__inner {
  width: 1300px;
  margin: 0 auto;
  position: relative;
}

.options__btnComic {
  position: fixed;
  right: 200px;
  bottom: 45px;
  z-index: 50;
  width: 232px;
  height: 108px;
  background: url("../img/top/btn_comicalize_on_pc.png") no-repeat center center;
  background-size: 100% auto;
}

.options__btnComic img {
  transition: all .2s ease;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.options__btnComic a {
  display: block;
  width: 100%;
  height: 100%;
}

.options__btnComic a:hover img {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.options__bnn {
  position: fixed;
  right: 175px;
  bottom: 45px;
  z-index: 50;
  background-size: 100% auto;
}

.options__bnn a {
  display: block;
  width: 100%;
  height: 100%;
}

#comicalize {
  display: none;
  padding: 50px 0;
}

#comicalize p {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  /* ============================================================================================
  SP TOP

  @date 2017-07-12
  @include sp/_top

  memo:
  padding: 70px
  padding: 18.66667vw
  @mixin =========================================================================================== */
  #top-page {
    background-color: #000000;
  }
  #blind {
    background-color: #ff0000;
  }
  .main {
    width: 100%;
    height: auto;
    min-height: auto;
    position: relative;
    z-index: 0;
    background-color: #000000;
  }
  .main__cover {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #ff0000;
    display: none;
    transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
  }
  .main__cover.origin100 {
    transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
  }
  .main__visualPC {
    display: none;
  }
  .main__visualSP {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .main__visualSP p {
    width: 100%;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
  }
  .main__visualSP p.is__current {
    display: block;
  }
  .main__visualSP__blank {
    height: 560px;
    height: 149.33333vw;
  }
  .mainmodal__cover {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8001;
    transform: scaleX(0);
    transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
  }
  .mainmodal__cover.origin100 {
    transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
  }
  .mainmodal {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8000;
  }
  .mainmodal__visual {
    position: relative;
    width: 100%;
    height: calc(100vh -80px);
    z-index: 0;
  }
  .mainmodal__btnClose {
    position: fixed;
    right: 20px;
    right: 5.33333vw;
    top: 25px;
    top: 6.66667vw;
    z-index: 1;
    width: 28px;
    width: 7.46667vw;
    height: 28px;
    height: 7.46667vw;
  }
  .mainmodal__btnClose img {
    width: 100%;
    height: auto;
  }
  .mainmodal__visual__pc {
    display: none;
  }
  .mainmodal__visual__sp {
    display: block;
    display: table;
    width: 100%;
    height: calc(100vh -80px);
    background-color: #a8a8a8;
    position: relative;
  }
  .mainmodal__visual__sp p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .mainmodal__visual__sp__fix {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: none;
  }
  .mainmodal__visual__sp__fix ul {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #a8a8a8;
  }
  .mainmodal__visual__sp__fix li {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: table;
    display: none;
  }
  .mainmodal__visual__sp__fix li.is__show {
    display: table;
  }
  .mainmodal__visual__sp__fix span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .mainmodal__visual__sp__fix__l,
  .mainmodal__visual__sp__fix__r {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 12px;
    width: 3.2vw;
  }
  .mainmodal__visual__sp__fix__l {
    left: 10px;
    left: 2.66667vw;
  }
  .mainmodal__visual__sp__fix__r {
    right: 10px;
    right: 2.66667vw;
  }
  .mainmodal__visual__sp__ci {
    width: 100%;
    height: 343.5px;
    height: 91.6vw;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .mainmodal__visual__sp__ci__inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mainmodal__visual__sp__ci1,
  .mainmodal__visual__sp__ci2,
  .mainmodal__visual__sp__ci3 {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
  }
  html,
  body {
    height: calc(100vh -80px);
  }
  .mainmodal__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: table;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .mainmodal__inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .mainmodal__al {
    width: 90%;
    margin: 0 auto;
  }
  .mainmodal__anime {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mainmodal__anime:before, .mainmodal__anime:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    z-index: 0;
  }
  .mainmodal__anime:before {
    top: 0;
    background-color: #000000;
  }
  .mainmodal__anime:after {
    bottom: 0;
    background-color: #ffffff;
  }
  .mainmodal__anime p {
    display: block;
    width: 100%;
    height: 100%;
    background: url("/uploads/update_anime_sp.jpg") no-repeat center center;
    background-size: 100% auto;
    position: relative;
    z-index: 1;
  }
  .options {
    width: 100%;
  }
  .options__inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .options__btnComic {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 50;
    width: 100%;
    height: auto;
    background: none;
  }
  .options__btnComic img {
    transition: none;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  .options__btnComic a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .options__btnComic a:hover img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  .options__bnn {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 50;
    width: 100%;
    height: auto;
  }
  .options__bnn a {
    display: block;
    width: 100%;
    height: 100%;
  }
  #comicalize {
    display: none;
    padding: 30px 0;
    padding: 8vw 0;
  }
  #comicalize p {
    margin: 0 10px 10px 10px;
    margin: 0 2.66667vw 2.66667vw 2.66667vw;
  }
  #comicalize img {
    width: 100%;
    height: auto;
  }
}