@charset "UTF-8";
/* ============================================================

★ series css

============================================================ */
body {
  font-family: "Meiryo", "メイリオ", "平成明朝", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Verdana", sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  background: url("../../images/bg-special.gif") repeat center 0 #fff;
}

a {
  overflow: hidden;
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  vertical-align: top;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 5px #222;
          box-shadow: 0px 0px 5px #222;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

header {
  padding-top: 0px;
}
header nav {
  background-color: #B81442;
  width: 960px;
  margin: 0 auto;
  height: 73px;
  position: relative;
  top: 0;
  z-index: 10000;
  /*background: url(../images/nav_bg.jpg) no-repeat top left;*/
  height: 60px;
}
header nav ul {
  margin: 0;
  /*height: 100%;*/
}
header nav ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
header nav ul li a {
  height: 100%;
  -ms-flex-item-align: center;
      align-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
header nav ul li img {
  -ms-flex-item-align: center;
      align-self: center;
}
header nav ul.nav-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*position: absolute;*/
  /*top: -5px;*/
  right: 0;
}
header nav ul.nav-wrapper > li {
  border-right: 0.7px solid #fff;

}
header nav ul.nav-wrapper > li:last-child {
  border-right: none;
}
header nav ul.nav-wrapper > li > a {
  padding: 0 20px;
}
header nav ul.share-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
header nav ul.share-wrapper > li.share-title {
  padding-right: 15px;
}
header nav ul.share-wrapper > li > a {
  padding: 0 15px;
}
header nav #nav_title {
  position: absolute;
  top: 75px;
  right: 55px;
}
header nav #nav_s_logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
header .MV {
  position: relative;
  height: 1942px;
  background: url(../images/top_bg.jpg) no-repeat top left;
  margin-top: -1px;
}
header .MV #bg-01 {
  position: absolute;
  top: 0;
  left: 0;
  /*-webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;*/
}
header .MV #bg-02 {
  position: absolute;
  top: 0;
  left: 0;
  /*-webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;*/
}
header .MV #subCatch {
  position: absolute;
  top: -28px;
  left: 50%;
  /*-webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #subTitle-01 {
  position: absolute;
  top: 0px;
  right: -10px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;*/
}
header .MV #subTitle-02 {
  position: absolute;
  top: 220px;
  left: 23px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;*/
}
header .MV #globalTitle {
  position: absolute;
  bottom: 955px;
  right: 80px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #globalNumber {
  position: absolute;
  bottom: 810px;
  right: 440px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #mainCatch {
  position: absolute;
  bottom: 1705px;
  left: 0;
  margin: 0;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #buyBtn {
  position: absolute;
  bottom: 135px;
  left: 605px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #buyBtn a:hover {
  opacity: 0.7;
}
header .MV #saleData {
  position: absolute;
  bottom: -9px;
  right: 13px;
  /*-webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;*/
}
header .MV #topBuyBtnLatest {
  position: absolute;
  bottom: 385px;
  left: 45px;
}
header .MV #topBuyBtnLatest a:hover {
  opacity: 0.7;
}
header .MV #topBuyBtnComic {
  position: absolute;
  bottom: 200px;
  left: 45px;
}
header .MV #topBuyBtnComic a:hover {
  opacity: 0.7;
}
header .MV #synopsis {
  position: absolute;
  bottom: 285px;
  right: 30px;
 /* 3秒かけてアニメーションする */
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
 /* 2秒待ってからアニメーションする */
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  /*-webkit-animate-repeat: 3;
          animate-repeat: 3;*/
 /* 4回繰り返す */
  -webkit-animation-iteration-count: 4;
  animation-iteration-count: 4;
}
header .MV #synopsis a:hover {
  opacity: 0.7;
}

#container {
  background-color: #fff;
}

#main {
  background-color: #fff;
}

.top-link {
  margin: 0 auto;
  text-align: right;
  font-size: 11.52px;
  padding: 0 10px 15px 0;
}
/*.top-link a {
  color: #fff;
}*/

.titleEn {
  background-color: #fff;
  padding: 10px 0;
  text-align: center;
}


 /* contents部分 */
.contents-box .contents {
  padding: 0 10px;
  font-size: 14.4px;
  line-height: 1.4;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

 /* contents カクヨムネクスト部分 */
.contents-box#contents-kakuyomunext {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0;
}

.contents-box#contents-kakuyomunext .contents {
  position: relative;
  background: #B81442;
  height: 450px;
  margin: -1px auto 0 ;
  padding: 0 ;
}
.contents-box#contents-kakuyomunext .contents .contents01 {
  position: absolute;
  bottom: 25px;
  left: 5px;
  margin: 0 auto ;
  padding: 0 ;
}
.contents-box#contents-kakuyomunext .contents .contents01 a:hover {
  opacity: 0.7;
}

 /* contents movie部分 */
.contents-box#contents-movie {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0;
  margin-top :18px;
}
.contents-box#contents-movie .contents {
  padding: 50px 0;
  background: #B81442;
  height: 525px;
  margin-top: -38px;
  position: relative;
}
.contents-box#contents-movie .contents p.movie{
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.contents-box#contents-movie .contents p.movie span.movie_left{
  position: absolute;
  top: 30px;
  left: 872px;
}
.contents-box#contents-movie .contents p.movie span.movie_right{
  position: absolute;
  top: 449px;
  right: 873px;
}
.contents-box#contents-movie .contents02 {
  padding: 0;
  margin: -2px 0 0 0 ;
  height: 72px;
  /*position: relative;*/
}
.contents-box#contents-movie .contents02 p{
  padding: 0;
  margin: 0;
}


 /* contents story部分 */
.contents-box#contents-story .contents {
  padding: 0;
  margin-top: -57px;
  height: 1221px;
  background: url(../images/story_bg.png) no-repeat top left;
  position: relative;
}
.contents-box#contents-story .contents .contents-header {
  margin-top: 0px;
  position: absolute;
  /*bottom: 0px;*/
  top: 5px;
  right: 25px;
  width: fit-content;
}
.contents-box#contents-story .contents p {
  margin-top: 0px;
  position: absolute;
  top: 110px;
  right: 155px;
}
.contents-box#contents-story .contents p.story_text02 {
  margin-top: 0px;
  position: absolute;
  top: 1023px;
  right: 0px;
}
.contents-box#contents-story .contents02 p{
  padding: 0;
  margin: 0;
}
.contents-box#contents-comic {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0
}


 /* contents comic部分 */
.contents-box#contents-comic .contents {
  margin-top: 0px;
  background-color: #152289;
  padding-bottom: 30px;
  height: 480px;
}
.contents-box#contents-comic .contents .comingsoon {
  font-family: "Kozuka Gothic Pro Regular", "小塚ゴシック Pro R", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "游ゴシック", YuGothic, sans-serif;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  margin: 0;
  padding: 60px 0;
  text-align: center;
}
.contents-box#contents-comic .contents #btnTrialComic {
  margin: 10px auto 0;
  padding: 0px;
  text-align: center;
  width: 100%;
}

 /*.contents-box#contents-comic .contents::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 165%;
  z-index: -1;
  background-color: #152289;
 clip-path: polygon(0 0, 100% calc(0% + 5vw), 100% calc(100% - 0vw), 0 100%);
  transform-origin: top right;
}*/
.contents-box#contents-comic .contents #btnTrialComic li {
  margin: 0px;
  padding: 0px;
}
.contents-box#contents-comic .contents #btnTrialComic li a:hover {
  opacity: 0.7;
}
.contents-box#contents-comic .contents .comics-authors {
  text-align: left;
  margin: 0;
  position: absolute;
  bottom: 110px;
  left: 288px;
}
.contents-box#contents-comic .contents .info {
  text-align: right;
  margin: 15px 35px 0 0;
	padding-bottom: 30px;
}
.contents-box#contents-comic .contents02 {
  padding: 0;
  margin: -1px 0 0 0 ;
  height: 80px;
  background: #B81442;
  /*position: relative;*/
}
.contents-box#contents-comic .contents02 p{
  padding: 0;
  margin: 0;
}
.contents-box#contents-character {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0;
  margin-top :17px;
}
.contents-box#contents-character .contents {
  padding: 0;
  background: #B81442;
  height: 2250px;
}
/*.contents-box#contents-character .contents::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 140%;
  z-index: -1;
  background: #B81442;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
  transform-origin: top right;
}*/


 /* contents character部分 */
.contents-box#contents-character .contents-header {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: -4px;
  left: 25px;
  text-align: left;
  width: fit-content;
}
.contents-box#contents-character .contents .charaList {
  height: 1600px;
  list-style: none;
  margin:-18px 0 0 0;
  padding: 0;
}
.contents-box#contents-character .contents .charaList h3{
  margin: 0;
  padding: 0;
}
.contents-box#contents-character .contents .charaList li#chara_name1 {
  position: relative;
  top: 20px;
  left: 0px;
  right: 0px;
  text-align: right;
  margin : 0;
  padding: 0;
}
.contents-box#contents-character .contents .charaList li#chara_name2 {
  position: relative;
  top: 0px;
  left: 120px;
  right: 0px;
  text-align: left;
  margin : 0;
  padding: 0;
}
.contents-box#contents-character .contents .charaList li#chara_name3 {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  margin : 0;
  padding: 0;
}
.contents-box#contents-character .contents02 {
  padding: 0;
  margin: -1px 0 0 0 ;
  height: 77px;
  background: #B81442;
  /*position: relative;*/
}
.contents-box#contents-character .contents02 p{
  padding: 0;
  margin: 0;
}


 /* contents benefit部分 */
.contents-box#contents-benefit .contents {
  padding: 0;
  margin-top: 0;
  /*height: 960px;*/
  background: #fff;
  position: relative;
}
.contents-box#contents-benefit .contents .contents-header {
  margin-top: 0px;
  position: absolute;
  /*bottom: 0px;*/
  top: -9px;
  right: 25px;
  width: fit-content;
}
.contents-box#contents-benefit .contents .benefit {
  display: flex;
  list-style: none;
  text-align: center;
  margin: 0px;
  /*align-items: flex-end;*/
  padding-left: 40px;
}
.contents-box#contents-benefit .contents .benefit li {
  margin: 50px 40px 0 0px;
  width: 350px;
}
.contents-box#contents-benefit .contents .benefit li a:hover {
  opacity: 0.7;
}
.contents-box#contents-benefit .contents .benefit li.benefit_icon {
  position: relative;
}
.contents-box#contents-benefit .contents .benefit li.benefit_icon .icon{
  position: absolute;
  top: -25px;
  left: -35px;
}
.contents-box#contents-benefit .contents p {
  padding: 15px 0 15px 10px;
  text-align: left;
  
}
.contents-box#contents-benefit .contents02 {
  padding: 0;
  margin-top: 25px;
  height: 76px;
  /*position: relative;*/
}
.contents-box#contents-benefit .contents02 p{
  padding: 0;
  margin: 0;
}


 /* contents series（赤）部分 */
.contents-box#contents-series {
  position: relative;
  margin: 0;
  padding: 0;
}
.contents-box#contents-series .contents {
  padding: 0 60px;
  margin-top: -1px;
  background: #B81442;
  height: 800px;
}
.contents-box#contents-series .contents-header {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: -1px;
  left: 25px;
  text-align: left;
}
.contents-box#contents-series .contents .product {
  list-style-type: none;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 200px;
}
.contents-box#contents-series .contents .product > * {
  display: inline;
  width: 180px;
  font-size: 14.4px;
  line-height: 1.3;
  /*padding-bottom: 20px;*/
  margin-top: 20px;

}
.contents-box#contents-series .contents .product > * img {
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.contents-box#contents-series .contents .product > * h3 {
  color: #fff;
}
.contents-box#contents-series .contents .product > * a:hover {
  opacity: 0.7;
}
.contents-box#contents-series .contents .product::before {
  content: "";
  display: block;
  width: 180px;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.contents-box#contents-series .contents .product::after {
  content: "";
  display: block;
  width: 180px;
}


 /* contents series（白）部分 */
.contents-box#contents-series_w {
  position: relative;
  /*height: 800px;*/
  margin: 0;
  padding: 0;
}
.contents-box#contents-series_w .contents {
  padding: 0;
  margin-top: 0;
  height: 800px;
  background: #fff;
  position: relative;
}
.contents-box#contents-series_w .contents .contents-header {
  margin-top: 0px;
  position: absolute;
  /*bottom: 0px;*/
  top: -9px;
  right: 25px;
  width: fit-content;
}
.contents-box#contents-series_w .contents .product {
  list-style-type: none;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 0 100px;
}
.contents-box#contents-series_w .contents .product > * {
  display: inline;
  width: 180px;
  font-size: 14.4px;
  line-height: 1.3;
  /*padding-bottom: 20px;*/
  margin-top: 40px;

}
.contents-box#contents-series_w .contents .product > * img {
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.contents-box#contents-series_w .contents .product > * h3 {
  color: #222;
  margin: 0 auto;
  padding: 0;
}
.contents-box#contents-series_w .contents .product > * a:hover {
  opacity: 0.7;
}
.contents-box#contents-series_w .contents .product::before {
  content: "";
  display: block;
  width: 180px;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
/*.contents-box#contents-series_w .contents .product::after {
  content: "";
  display: block;
  width: 180px;
}*/


/*# sourceMappingURL=extention.css.map */