/* BASE
--------------------------------------------------------- */
html {
  width:100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background:white;
  overflow-x: hidden;
  margin-left:auto;
  margin-right:auto;
  background: #f9f9f9;
}

body > header {
  position: relative;
  z-index: 300;
}

.font-kind-gothic {
  font-family: "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

.mt-1{
  margin-top:1%;
}
.mt-2{
  margin-top:2%;
}
.mt-3{
  margin-top:3%;
}
.mt-4{
  margin-top:4%;
}
.mt-5{
  margin-top:5%;
}
.mt-6{
  margin-top:6%;
}
.mt-7{
  margin-top:7%;
}
.mt-8{
  margin-top:8%;
}
.mt-9{
  margin-top:9%;
}

.mt-10{
  margin-top:10%;
}

.mt-30{
  margin-top:30%;
}

.mt-40{
  margin-top:40%;
}

.mb-10{
  margin-bottom:10%;
}

.mb-20{
  margin-bottom:20%;
}

.mb-30{
  margin-bottom:30%;
}

.mb-40{
  margin-bottom:40%;
}

.mb-1{
  margin-bottom:1%;
}
.mb-2{
  margin-bottom:2%;
}
.mb-3{
  margin-bottom:3%;
}
.mb-4{
  margin-bottom:4%;
}
.mb-5{
  margin-bottom:5%;
}
.mb-6{
  margin-bottom:6%;
}
.mb-7{
  margin-bottom:7%;
}
.mb-8{
  margin-bottom:8%;
}
.mb-9{
  margin-bottom:9%;
}

.pb-5 {
  padding-bottom:5%;
}

.color-white {
  color:white;
}

.font-size-25em {
  font-size:2.5em;
}

.font-weight-bold {
  font-weight: bold
}

/* COMMON
--------------------------------------------------------- */

*{
/*  touch-callout:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;*/
}

/* LAYOUT
--------------------------------------------------------- */
.l-inline-container {
  letter-spacing: -.40em;
}

.l-inline {
  display: inline-block;
  letter-spacing: normal;
}

.l-center {
  margin-left: auto;
  margin-right: auto;
}

.l-right {
  position: absolute;
  right: 0;
}

.l-text-left {
  text-align: left;
}

.l-text-center {
  text-align: center;
}

.l-relative {
  position: relative;
}

.l-va-top {
  vertical-align: top;
}

.l-va-middle {
  vertical-align: middle;
}

.l-va-bottom {
  vertical-align: bottom;
}

.l-absolute {
  position: absolute;
}

.l-wordwrap {
  word-wrap: break-word;
}

.l-rotate180 {
  -webkit-transform: rotateX(180deg);
}

/* MODULE
--------------------------------------------------------- */
.header-logo {
  margin-left:2%;
}

.header-chara-list {
  height:100%;
}
/* section */
.readMobile,.btn-viewer-left,.btn-viewer-right,#viewer,.btn-popup-close,.js-facebook-share,.title-appeal-text,#js-comic-joker-greed{
  cursor: pointer;
}

.copyright {
  width:100%;
  position:absolute;
  z-index:200;
  font-size:0.3rem;
  text-align:right;
  margin-right:2%;
  color:#333;
}

.header {
  z-index:0;
  position:relative;
  background-color: white;
  overflow-x: hidden;
  display: block;
  width: 100%;
  height:100%;
}

.header img {
  width:100%;
  height:100%;
}

.title {
  z-index:150;
  position:relative;
  width:100%;
  background:white;
  padding-top:1%;
  margin-top:6%;
}

.movie {
  width:100%;
  background:#f9f9f9;
  position:relative;
  z-index:100;
  padding-bottom:2%;
  padding-top:0%;
  margin-top:6%;
}

.comic {
  width:100%;
  background:#f9f9f9;
  position:relative;
  z-index:100;
  padding-bottom:1%;
  padding-top: 0%;
}

.device {
  width:100%;
  background:#f9f9f9;
  position:relative;
  z-index:100;
}

.collabo {
  background: #191919;
}

.footer {
  position:relative;
  z-index:100;
}

.wrap {
  background:white;
  padding-bottom:0px;
  margin-bottom: -1%;
}

.main-logo {
  postion:relative;
  z-index:2;
  padding-top: 3%;
  width:100%;
}

.main-logo img {
  width:90%;
}

.main-container {
  width:100%;
  height:100%;
}

.header-chara-list {
  position:relative;
  left:0%;
  padding-bottom:0%;
}

.header-character-image {
  width:100%;
  /**
  position:relative;
  **/
  top:5%;
  z-index:-5;
}

.character-01 {
  left:0%;
}

.character-02 {
  left:17%;
}

.character-03 {
  left:34%;
}

.character-04 {
  left:51%;
}

.character-05 {
  left:68%;
}

.character-06 {
  left:85%;
}

.header img {
  width:100%;
}

.menu {
    position: absolute;
    z-index: 999;
    background-size: 100% 100%;
    /* margin-top: -1.4%; */
    top: 85%;
    width: 50%;
    left: 0%;
}

.menu-logo {
  margin-left:16.5%;
  margin-top:0.5%;
  width:22.5%;
  margin-right:0.5%;
}

.menu-logo img{
  padding:1%;
  width:100%;
}

.menu-store {
    width: 100%;
    /* padding-top: 2.5%; */
    /* vertical-align: top; */
    /* margin-left: 32.5%; */
}

.menu-sns {
  width:20%;
  vertical-align: top;
}

.menu-sns-wrapper {
  width:100%;
  margin-top:7.5%;
}

.title-icon-twitter {
  width:26%;
  margin-right:5%;
}

.title-icon-facebook{
  width:26%;
}

.title-icon-twitter img{
  width:100%;
}

.title-icon-facebook img{
  width:100%;
}


.cm-wrap {
  margin-top:5%;
  margin-bottom:5%;
}

.youtube {
  position: relative;
/*  width: 560px;
  height: 315px;
  left: 50%;*/
  width: 670px;
  height: 425px;
  margin-left: auto;
  margin-right:auto;
  overflow: hidden;
  text-align: center;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.game {
  background: #fff;
  width:100%;
  height:100%;
  position:relative;
  z-index:250;
}

.game-story-text {
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.game-story-text img{
  width:45%;
}

.game-background {
  position:relative;
  z-index:350;
}

.game-background-image {
  position:relative;
  z-index:360;
  top:0;
}

.game-background-image img{
  width:100%;
}

.game-background-text {
  width:100%;
  text-align: center;
  position:absolute;
  z-index:370;
  top:0%;
}

.game-background-text img{
  width:60%;
}

.title-header {
  margin-top:10%;
}

.device-inner {
  margin-top:-200px;
}

.txt-device-caption {
  text-align: center;
  margin-top:2%;
  font-size:1.5rem;
}

.comic-detail {
  background: #f9f9f9;
  height:100%;
  position:relative;
  z-index:400;
}

.comic-images {
  width:45%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 15%;
  max-height: 450px;
}

.comic-images .over-book-image {
  cursor: pointer;
  position: absolute;
  top: 52%;
  left: 43%;
  z-index: 10;
  width: 14%;
  height: 14%;
  
}

.comic-images .over-book-image.big{
  width: 20%;
  height: 20%;
  left:40%;
  top:40%;
}

.comic-images .over-book-image img{
  width:100%;
}

.comic-images .over-book-image.big img{
  width:100%;
}

.comic-icon {
  /* width: 70%; */
}



.filter-effect {
  /* -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); */
}

.store-wrap {
  /**
  width:45%;
  **/
  text-align: center;
}

.store-banner {
  /**
  width:36%;
  **/
}

.store-banner.ios img{
  width:100%;
}

.store-banner.android img{
  width:100%;
}

#titile ul {
  margin: 0;
  padding: 0;
}

.collabo-content {
}

.collabo-content-app {
  width:100%;
}

.collabo-content-app-image {
  width:20%;
  vertical-align: top;
  text-align: right;
}

.collabo-content-app-image img{
  width: 100%;
  vertical-align: top;
}

.collabo-content-app-text{
  font-size:2em;
  margin-left:2%;
  margin-top:2%;
  text-align: left;
}

.collab-content-banner {
  width:100%;
}

.collab-content-banner img{
  width:60%;
}

.separator {
  width:57%;
  border-top: 1px solid #ccc;
  margin-left:auto;
  margin-right:auto;
}

.store-banner-content{
  width:70%;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.store-banner-image.ios{
  width:45%;
}

.store-banner-image.android{
  width:40%;
  margin-left:2%;
}

.store-banner-image img{
  width:80%;
}

.footer .inner {
  margin-left:auto;
  margin-right:auto;
}

.title .title-icon-twitter {
  margin-left: auto;
  margin-right: auto;
  padding-right:2%;
  position:relative;
  left:-4%;
}

.title .title-icon-twitter a {
/*  display: block;
*/}

.title .title-icon-twitter img{
  display:block;
}

.title .title-icon-facebook {
  width:10%;
  margin-left: auto;
  margin-right: auto;
  padding-left:2%;
}

.title .title-icon-facebook img{
  display:block;
}

.collabo-image {
  background-color: #000000;
  background-image: url("../img/top/title-collabo.png") ;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 0;
  width:100%;
  background-size: 25%;
  padding-top:0.5%;
  padding-bottom:0.5%;
}

/* Popup
---------------------------*/
.popup-bg,.popup-bg-pc,.popup-bg-mobile{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 1000;
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  z-index:999;
}

.popup{
  position: relative;
  width: 700px;
  /*height: 590px;*/
  background-color: #292a22;
  border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  margin: 40px auto 0 auto;
  border: 1px #666666 solid;
}

.popup-bg.hiden,.popup-bg-pc.hiden,.popup-bg-mobile.hiden{
  display: none;
}

.popup-bg.show,.popup-bg-pc.show,.popup-bg-mobile.show{
  display: block;
}


.popup h1{
  font-size: 28px;
  text-align: center;
  margin: 18px 0 10px 0;
  /*padding: 10px 0 0 0;*/
}

.popup .viewer{
  width: 100%;
  height: 600px;
  margin: 26px auto 0 auto;
  text-align: center;
}
.popup .viewer img{
  width: 400px;
  margin: 0 auto;
}
.popup .navi{
  text-align: center;
  margin: 10px 0 18px 0;
  font-size: 16px;
}
.popup .navi a{
  color: #ffd900;
  /*margin: 0 20px 0 0;*/
}

.popup .navi .page{
  width: 50px;
  display: inline-block;
  margin: 0 30px;
}

#mobile .popup .navi .page{
  font-size: 2rem;
}


/*.popup .navi a:last-child{
  margin: 0;
}*/

.popup .close-wrap{
  position: absolute;
  text-align: right;
  top: 18px;
  right: 0;
  padding-right: 20px;
}

.btn-popup-close{
  color: #cc0000;
}

.title-date-image img{
  width:30%;
}

.lh-header {
  padding-top:1%;
}


.title-inner-image {
}

.title-inner-image img{
  width:50%;
}

.title-header-size {
  height: 9%;
}

.title-appeal-text {
  font-size: 2.8em;
  color:#971e1e;
  margin-left:auto;
  margin-right:auto;
  display: block;
}

.title-appeal-text:hover {
  color:#e30000;
}





/* popup scroll
---------------------------*/
.viewer-container{
  width: 260px;
  height: 390px;
  position: relative;
  
  margin: 24px auto 0 auto;
}

#viewer{
  margin: 6px auto 0 auto;
  position: absolute;
  top:0;
  z-index: 1;
  width: 260px;
  height: 100%;
  display:block;
  /*left: 35px;*/
  overflow: hidden;

}

.left-arrow{
  width: 100%;
  height: 27px;
  /*margin: 0 auto;*/
  background-repeat: no-repeat;
  background-image: url(../img/top/viewer-arrow-left.png),url(../img/top/viewer-arrow-right.png);
  background-position: left,right;
  position: absolute;
  top:220px;

}

#viewer-scroll{
  position: absolute;
  top:0;
  padding:0;
  margin:0;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /*width: 750px;*/
  width:100%;
  height: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

#viewer img{
  width: 260px;
  height:100%;
  margin: 0 auto;
}

#viewer-scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

#viewer-scroll li{
  display: block;
  float: left;
  width: 260px;
  height: 100%;
}

/* comic
---------------------------*/
.m .comic{
  width: 100%;
  height: 740px;
  margin: 20px 0 0 0;
  background-repeat: no-repeat;
  background: none;
}

.m .comic .inner{
  width: 320px;
  height: 740px;
  margin: 0 auto;
  position: relative;
}

.m .comic .title{
  width: 320px;
  height: 60px;
  background-repeat: no-repeat;
  background-image: url(../img/top/comic-title-m.png);
  background-size: contain;
}

.m .comic .book-cover{
  width: 290px;
  margin: 2px auto 10px auto;
  text-align: center;
  /*background-color: red;*/
  /*height: 100px;*/
}

.m .comic-social-title{
  width: 280px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url(../img/top/comic-share-m.png);
  background-size: 280px;
  margin: 4px auto 0 auto;
}

.m .comic .btn{
  width: 260px;
  margin: 0 auto;
}

.m .comic .btn ul{
  margin: 0 auto;
  padding: 0;
}

.m .comic .btn a{
  width: 250px;
  height: 43px;
  display: block;
  background-size: contain;
  margin-bottom: 10px;
  background-repeat: no-repeat;
}

.m .comic-social{
  width: 260px;
  margin: 2px auto;
  font-size: 0;
}

.m .comic-so{ margin-right: 4px }

.m .comic-social .icon-facebook,
.m .comic-social .icon-twitter{
  width: 122px;
  height: 50px;
  background-position: 50%;
}

.m .comic .attention{
  width: 260px;
  margin: 0 auto;
  color: #fff;
  font-size: 12px;
  margin-top: 1px;
}
  
.m .comic-magazine{
  width: 310px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url(../img/top/comic-magazine-m.png);
  background-size: 310px;
  margin: 10px auto 0 auto;
}

/* Popup Mobile
---------------------------*/
.m.popup-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
}

.m .popup{
  position: relative;
  width: 100%;
  height: 100%;
  /*height: 590px;*/
  background-color: #292a22;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 0 0;
  padding-top: 16px;
  border: 0px #666666 solid;
  zoom:3;
}

.m .popup h1{
  width: 270px;
  font-size: 20px;
  text-align: left;
  margin: 0 auto 2px auto;
  /*padding: 10px 0 0 0;*/
}

.device-margin {
  margin-bottom:5%;
}

.m .popup .navi{
  margin: 20px 0 18px 0;
}