@charset "UTF-8";
/*color*/
/* mixinCSS Document */
/*----------common----------*/
/*alt*/
/*hover*/
/*
 style.css（ファイル名変更不可）
 本サイト各ページ用CSS（記事ページ）
*/
/* ntv-wrapper
========================================== */
.ntv-wrapper {
  background-color: #fff;
}

/* ========= nav ========== */
#d-nav {
  background-color: #c50c6d;
  /* drama-nav-list
  ------------------------------ */
  /* d-nav - status */
  /* d-nav - contents */
}
#d-nav .d-nav-list {
  width: 100%;
  margin: 0px auto;
  font-size: 0;
  text-align: center;
}
#d-nav .d-nav-item {
  display: inline-block;
  width: 12%;
  vertical-align: top;
  position: relative;
}
#d-nav .d-nav-item:after {
  content: "";
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB4CAYAAAAzOJiAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpi+P//PwMTAxCQR/yHsxhHlQxXJf/x6sVKAAQYACckEuwlqzxQAAAAAElFTkSuQmCC") no-repeat center center;
  display: block;
  width: 1px;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: -1%;
}
#d-nav .d-nav-item:first-child:after {
  display: none;
}
#d-nav .d-nav-item:not(:first-child) {
  margin-left: 0.56%;
}
#d-nav .d-nav-item a,
#d-nav .d-nav-item span.cs {
  display: block;
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  overflow: hidden;
}
#d-nav .d-nav-item.is-new:before {
  content: '';
  display: block;
  width: 35%;
  height: 35%;
  background: url(../images/nav/icon_new.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: -10%;
  right: 0%;
  z-index: 30;
}
#d-nav .d-nav-item.is-coming {
  background-color: transparent;
}
#d-nav .d-nav-item.is-coming a {
  opacity: 1;
  pointer-events: none;
}
#d-nav .d-nav-item.intro a {
  background-image: url(/gamemitaini/images/nav/intro.png);
}
#d-nav .d-nav-item.story a {
  background-image: url(/gamemitaini/images/nav/story.png);
}
#d-nav .d-nav-item.chart a {
  background-image: url(/gamemitaini/images/nav/chart.png);
}
#d-nav .d-nav-item.music a {
  background-image: url(/gamemitaini/images/nav/music.png);
}
#d-nav .d-nav-item.sns a {
  background-image: url(/gamemitaini/images/nav/sns.png);
}
#d-nav .d-nav-item.staff a {
  background-image: url(/gamemitaini/images/nav/staff.png);
}
#d-nav .d-nav-item.movie a {
  background-image: url(/gamemitaini/images/nav/movie.png);
}
#d-nav .d-nav-item.manga a {
  background-image: url(/gamemitaini/images/nav/manga.png);
}
#d-nav .d-nav-item.comingsoon a {
  background-image: url(/gamemitaini/images/nav/comingsoon.png);
}
#d-nav .d-nav-item a span {
  width: 100%;
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* ========= contents ========== */
.d-contentsBox {
  background: url(../images/common/bg_black.jpg) repeat;
  background-color: #000;
}
.d-contentsBox .d-contentsBox-inner .copyright {
  color: #fff;
  text-align: center;
  font-size: 14px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

/* aside内(※margin, paddingは変更しないでください)
========================================== */
/* タイトル（フォント色、背景色）
------------------------------------------ */
.drama-box-title.title-base {
  /* color: #000; */
  /* background-color: #f00; */
}

/* SNS・シェア（枠色）
------------------------------------------ */
.drama-box-sns-area,
.drama-box-share-area {
  /* border-color: #000; */
}

/* SNS・シェア（タイトル色、タイトル背景色）
------------------------------------------ */
.drama-box-sns-area .drama-box-title,
.drama-box-share-area .drama-box-title {
  /* color: #000; */
  /* background-color: #fff; */
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
  /* ntv-wrapper
  ========================================== */
  .ntv-wrapper {
    margin-bottom: 0;
  }

  #d-nav .d-nav-area .d-nav-list {
    position: relative;
    padding: 5px 0;
  }
  #d-nav .d-nav-area .d-nav-list:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAABCAMAAAA7HHRPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTk2Q0Y5MzAwMjgzMTFFOTlCNzdCMUM5REI0NDVFNUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTk2Q0Y5MzEwMjgzMTFFOTlCNzdCMUM5REI0NDVFNUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjc2QkE3RjAyNzcxMUU5OUI3N0IxQzlEQjQ0NUU1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjc2QkE4MDAyNzcxMUU5OUI3N0IxQzlEQjQ0NUU1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prd3dhcAAAAGUExURf///////1V89WwAAAACdFJOU/8A5bcwSgAAABFJREFUeNpiYGBgYAQDgAADAAAfAAfvwIGSAAAAAElFTkSuQmCC") repeat-x center center;
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
  }
  #d-nav .d-nav-area .d-nav-item {
    width: 24%;
  }
  #d-nav .d-nav-area .d-nav-item:nth-child(5):after {
    display: none;
  }
}
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  #d-nav {
    background-color: #c50c6d;
    /* drama-nav-list
    ------------------------------ */
    /* d-nav - status */
    /* d-nav - contents */
  }
  #d-nav .d-nav-list {
    width: 100%;
    margin: 0px auto;
    font-size: 0;
    text-align: center;
  }
  #d-nav .d-nav-item {
    display: inline-block;
    width: 12%;
    vertical-align: top;
    position: relative;
  }
  #d-nav .d-nav-item:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB4CAYAAAAzOJiAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpi+P//PwMTAxCQR/yHsxhHlQxXJf/x6sVKAAQYACckEuwlqzxQAAAAAElFTkSuQmCC") no-repeat center center;
    display: block;
    width: 1px;
    padding-top: 100%;
    position: absolute;
    top: 0;
    left: -1%;
  }
  #d-nav .d-nav-item:first-child:after {
    display: none;
  }
  #d-nav .d-nav-item:not(:first-child) {
    margin-left: 0.56%;
  }
  #d-nav .d-nav-item a,
  #d-nav .d-nav-item span.cs {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    overflow: hidden;
  }
  #d-nav .d-nav-item.is-new:before {
    content: '';
    display: block;
    width: 35%;
    height: 35%;
    background: url(../images/nav/icon_new.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -10%;
    right: 0%;
    z-index: 30;
  }
  #d-nav .d-nav-item.is-coming {
    background-color: transparent;
  }
  #d-nav .d-nav-item.is-coming a {
    opacity: 1;
    pointer-events: none;
  }
  #d-nav .d-nav-item.intro a {
    background-image: url(/gamemitaini/images/nav/intro.png);
  }
  #d-nav .d-nav-item.story a {
    background-image: url(/gamemitaini/images/nav/story.png);
  }
  #d-nav .d-nav-item.chart a {
    background-image: url(/gamemitaini/images/nav/chart.png);
  }
  #d-nav .d-nav-item.music a {
    background-image: url(/gamemitaini/images/nav/music.png);
  }
  #d-nav .d-nav-item.sns a {
    background-image: url(/gamemitaini/images/nav/sns.png);
  }
  #d-nav .d-nav-item.staff a {
    background-image: url(/gamemitaini/images/nav/staff.png);
  }
  #d-nav .d-nav-item.hulu a {
    background-image: url(/gamemitaini/images/nav/hulu.png);
  }
  #d-nav .d-nav-item.manga a {
    background-image: url(/gamemitaini/images/nav/manga.png);
  }
  #d-nav .d-nav-item a span {
    width: 100%;
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
  }
}
/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
  /* area
  ========================================== */
  .d-area {
    margin: 0px auto;
  }

  .d-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .ntv-pageTop a {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    z-index: 100;
  }

  .ntv-pageTop a:after {
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-top: 24.5px;
  }
}