@charset "utf-8";
/* ===================================================================
CSS information

 file name  :top.css
 style info :トップページのスタイル
=================================================================== */
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  text-align: center;
  background: #000000;
}
li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: #fff;
}
/* --=== header ===-- */
header {
  position: fixed;
  height: 31px;
  background-color: #000;
  z-index: 4;
  width: 100%;
  padding: 10px 10px 0 10px;
}
#header {
  padding: 10px 10px 7px 10px;
  position: fixed;
  background: #000;
  width: 100%;
  z-index: 3;
}
.header-inner {
  padding: 0px 20px 0 0;
  overflow: hidden;
}
#logo {
  width: 25%;
  float: left;
  position: absolute;
  transform: translateY(-50%);
  margin-top: 2.5%;
}
#social {
  width: 208px;
  float: right;
  line-height: 0;
}
#social div {
  float: left;
  overflow: hidden;
  margin: 0px;
  width: auto;
}
#social .tw {
  margin-right: 5px;
  width: 76px;
}
#social .fb-like {
  margin-right: 5px;
  width: 72px;
}
/* --=== navi ===-- */
.hover-off .drawer-menu-item {
  color: #999;
}
.drawer-menu-item a:hover {
  text-decoration: none;
}
/* --=== #content ===-- */
.contents {
  margin-top: 41px;
}
body#top .main {
  background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/top/bg-main.jpg) no-repeat 0 0;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
  background-size: 100% auto;
}
h1 {
  padding-top: 67%;
  padding-bottom: 3%;
}
body#top h2 {
  position: absolute;
  top: 2%;
}
.taiken-ban {
  text-align: left;
  padding: 0 10px 15px;
}
.btn_patch {
  padding: 0 0 15px;
}
.movie {
  padding: 0 10px 30px;
}
.news-inner {
    background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/top/bg-news.jpg) repeat-y 0 0;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
    position: relative;
    margin: 0 20px;
    min-height: 203px;
}
.news-title {
  position: absolute;
  top: -20px;
  z-index: 1;
  left: -10px;
}
body#top .topics_area {
    position: absolute;
    top: 10px;
    overflow: hidden;
    width: 87%;
    margin: 0 auto;
    text-align: left;
    background-color: #202020;
    border: 4px solid #000;
    padding: 10px 10px 0;
    left: 0;
    right: 0;
}
body#top .topics dt {
  color: #ffd400;
}
body#top .topics dd {
    margin: 5px 0 12px 0px;
    line-height: 1.6;
}
body#top #newslist dd a {
  color: #fff;
  text-decoration: none;
}
body#top .btn-more {
  width: 40%;
  margin: 0 auto 0;
  padding: 10px 0 0 0;
}
.section p {
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
  padding: 0 10px;
}
.section-text {
  margin-top: 15px;
}
.section.bg-02 h3 {
  position: relative;
  z-index: 1;
}
.first-photo {
  margin-top: -30px;
}
.first-photo_00 {
  margin-top: -20px;
}
.second-photo {
  margin: 25px 0 15px;
}
.section.bg-02 p {
  margin-bottom: 10px;
}
.section.bg-03 {
  position: relative;
  top: 20px;
  margin-bottom: 15px;
}
.section.bg-03 h3 {
  position: relative;
  z-index: 2;
}
.bg-h3 {
  background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/top/bg-h3-03.png) no-repeat top center;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
  background-size: 100% auto;
}
.chara {
  position: absolute;
  top: -6%;
  z-index: 1;
}
/* --=== footer ===-- */
footer {
  clear: both;
  padding: 30px 10px 0;
}
.footer-banner {
  overflow: hidden;
  padding-top: 3px;
  margin-bottom: 25px;
}
.footer-banner li {
  /* width: 47%; */
    /* float: left; */
  margin: 0 2% 2%;
}
.footer-banner li:nth-child(odd) {
  margin-right: 0;
}
.footer-banner li:nth-child(even) {
  margin-right: 0;
}
footer p {
  line-height: 0;
}
.spec dt {
  color: #ffd400;
  font-weight: 600;
  margin-bottom: 5px;
}
.spec dd {
  margin-bottom: 18px;
  line-height: 1.6;
}
/* ===================================================================
 style info :共通
=================================================================== */
.main {
  background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/shared/bg.jpg) no-repeat 0 0;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
  background-size: 100% auto;
  margin-bottom: 20px;
  position: relative;
  min-height: 400px;
}
h2 {
  padding-top: 10px;
}
/* ===================================================================
 style info :ニュースページ
=================================================================== */
body#news .topics_area {
  margin: 10px 20px;
  text-align: left;
}
body#news .topics_area dt {
  background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/news/bg-date.png) no-repeat left top;
  -webkit-background-size: 119px 25px;
  -moz-background-size: 119px 25px;
  -ms-background-size: 119px 25px;
  background-size: 119px 25px;
  height: 25px;
  padding: 5px 0 0 25px;
  color: #ffd400;
}
body#news .topics_area dd {
  text-shadow: 0 2px 0 #000;
  padding: 15px;
  background-color: rgba(0,0,0,0.7);
  margin-bottom: 15px;
}
/* ===================================================================
 style info :ムービーページ
=================================================================== */
body#movie h3 {
  margin-top: -3%;
}
body#movie .thumbnail {
  margin: 0 15px 30px;
  position: relative;
}
body#movie .icon-new {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
}
/* ===================================================================
 style info :スペックページ
=================================================================== */
body#spec .package {
  width: 85%;
  margin: 0 auto 5%;
}
body#spec .spec-text {
  margin: 0 10px;
}
/* ===================================================================
 style info :スペシャルページ
=================================================================== */
body#special .special-box {
  line-height: 1.8;
  text-align: left;
}
body#special .special-box {
  line-height: 1.8;
  text-align: left;
}
body#special .special-text,.special-synopsis {
  margin: 20px 10px 25px;
}
body#special .special-ss {
  margin: 0 10px 20px;
}
body#special .special-box dl {
  margin: 0 10px 20px;
}
body#special .special-box dt {
  color: #000;
  font-weight: 600;
}
body#special .special-box dt span {
  background-color: #17a3c1;
  padding: 0px 5px;
  display: inline-block;
}
body#special .special-box dd {
  margin: 10px 0;
}
body#special .privilege-item {
  float: left;
  width: 46.85%;
  margin: 0 10px 30px;
}
body#special .privilege-item:nth-child(odd) {
  margin-right: 0;
}
body#special .privilege-item:nth-child(even) {
  margin-left: 0;
}
body#special .privilege-item dt {
  background: url(https://titleimg.spike-chunsoft.co.jp/www.danganronpa.com/v3/sp/images/special/icon-item.gif) no-repeat left top;
  -webkit-background-size: 33px 36px;
  -moz-background-size: 33px 36px;
  -ms-background-size: 33px 36px;
  background-size: 33px 36px;
  padding: 7px 10px 0 10px;
  font-size: 14px;
  font-weight: 600;
  min-height: 36px;
}
body#special h4 {
  text-align: left;
  line-height: 1.6;
  margin: 10px;
  font-size: 12px;
}
body#special .privilege-item-detail {
  overflow: hidden;
  margin: 10px 0 0 10px;
  text-align: left;
}
body#special .privilege-item-detail li {
  margin-bottom: 12px;
  font-size: 12px;
}
body#special .privilege-item-detail li a {
  color: #ffd400;
  border-bottom: 1px solid #ffd400;
}
body#special .privilege-item-detail li.special-site {
  background-color: #ffd400;
  text-align: center;
}
body#special .privilege-item-detail .special-site a {
  color: #000;
  border: none;
  font-weight: 600;
  display: inline-block;
  padding: 5px 0 3px;
}
body#special .coution {
  clear: both;
  text-align: left;
  margin: 10px 20px 30px;
  font-size: 12px;
}
#anchor_01 {
  margin-top: -51px;
  padding-top: 51px;
}
/* ===================================================================
 style info :キャラクターページ
=================================================================== */
body#character .main-chara {
  margin-top: -30px;
}
body#character .main-chara img {
  width: 100%;
}
body#character .detail_main {
  border-top: 20px solid #000;
}
body#character .detail_main img {
  width: 100%;
}
body#character .text {
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
  padding: 10px 10px 15px;
}
/* ===================================================================
 style info :システムページ
=================================================================== */
body#system {
}
body#system #anchor_03 {
    margin-top: -60px;
    padding-top: 55px;
}
body#system .text {
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
}
body#system p, h3 {
  padding: 0 10px 0;
}
body#system h3 {
  position: relative;
}
body#system .pt15 {
  padding: 15px 0 0px;
}
body#system .pb7 {
  padding: 0 10px 7px;
}
body#system .pb15 {
  padding: 0 10px 15px;
}
body#system .pb25 {
  padding: 0 10px 25px;
}
body#system .arrow {
  padding: 20px 10px 0;
}
body#system .rule {
  color: #000;
  background-color: #f8005a;
  height: 23px;
  padding: 10px 0 0;
  margin: 0 10px;
}
body#system ul {
  padding: 20px 10px 15px;
}
body#system ul li {
  color: #f8005a;
  padding: 0 0 10px;
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
  padding-left: 1em;
  text-indent: -1em;
}
body#system ul li.indent {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

body#system .text-caption {
    text-align: left;
    margin-bottom: 10px;
    font-size: 14px;
    color: #ffd400;
    line-height: 1.6;
}