@charset "UTF-8";
/* ==========================================================
  shared.css
  display: common
========================================================== */
body {
    background-color: #262626;
    color: #fff;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
}

/* ====================
  @BASE
===================== */
#page {
    width: 100%;
    min-width: 750px;
    margin: 0 auto;
}

/* ====================
  @MAIN
===================== */
#main {
    border-top: 10px solid #000;
    width: 100vw;
    height: calc(100vh - 10px);
    margin: 0 auto;
}

#main > div {
    background-position: center 0;
    background-size: cover;
    width: 100%;
    min-width: 750px;
    height: calc(100vh - 10px);
    position: absolute;
    top: 10px;
    left: 0;
}

#main .inner {
    width: 750px;
    height: calc(100vh - 10px);
    margin: 0 auto;
    position: relative;
}

#main .inner > * {
    position: absolute;
    z-index: 4;
}

#main .inner .sc {
    top: 16px;
    left: 20px;
}

#main .inner .ps4 {
    top: 10px;
    right: 20px;
}

#main .inner h1 {
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#main .inner .scroll-arrow {
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

/* ====================
  @MAIN -INDEX
===================== */

#check #main .layer-01 {
    background-image: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/main_layer01.gif");
    background-repeat: repeat;
    background-size: calc(149px / 2);
    z-index: 1;
}

#check #main .layer-02 {
    background-image: url("http://media.spike-chunsoft.co.jp/pages/conan/sp/images/main_layer_caution.png");
    background-repeat: no-repeat;
    z-index: 2;
}
#check #main .inner .read {
    width: 100%;
    text-align: center;
    font-size: 2.0rem;
    top: 40.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#check #main .inner .read strong {
    font-size: 2.6rem;
}

#check #main .inner .check-btn {
    width: 100%;
    top: 56.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 0;
}

#check #main .inner .check-btn li {
    width: 280px;
    margin: 0 10px;
    box-sizing: border-box;
    display: inline-block;
}

#check #main .inner .check-btn li a {
    border: 1px solid #fff;
    background: transparent;
    display: block;
    font-size: 2.4rem;
    color: #fff;
    line-height: 1.4;
    padding: 6px 0 10px;
    box-sizing: border-box;
}

#check #main .inner .check-btn li a span {
    font-size: 1.8rem;
    display: block;
}

/* ====================
  @MAIN -TOP
===================== */

#top #main .layer-01 {
    background-image: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/main_layer01.gif");
    background-repeat: repeat;
    background-size: calc(149px / 2);
    z-index: 1;
}

#top #main .layer-02 {
    background-image: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/main_layer02.png");
    background-repeat: no-repeat;
    z-index: 2;
}

#top #main .layer-03 {
    background-image: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/main_layer03.png");
    background-repeat: repeat-x;
    z-index: 3;
}

#top #main .spec {
    background: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/bg_inline.png") repeat;
    width: 85%;
    padding: 30px 0 20px 40px;
    margin: 0 auto;
    box-sizing: border-box;
    bottom: 23.5%;
    left: 50%;
    transform: translateX(-50%);
}
#top #main .spec dl {
    width: 100%;
}
#top #main .spec dl dt, #top #main .spec dl dd {
    color: #000;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 8px;
}

#top #main .spec dl dt {
    width: 160px;
    font-size: 1.6rem;
}

#top #main .spec dl dd {
    width: 400px;
    font-size: 2.0rem;
}

/* ====================
  @CONTENTS
===================== */
#contents {
    background-color: #000;
    padding: 0 0 30px;
}

#contents h2 {
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    text-align: center;
    margin: 30px 0;
}

#contents h2 span {
    font-size: 2.6rem;
    line-height: 2.5;
}

#contents h4 {
    border-top: 1px solid #404040;
    border-bottom: 1px solid #404040;
    text-align: center;
    margin: 0 0 15px;
}

#contents h4 span {
    font-size: 2.2rem;
    line-height: 2.4;
}

#contents h5 {
    border-top: 1px solid #404040;
    text-align: center;
    margin: 25px 0 30px;
    position: relative;
}

#contents h5 span {
    background: #000;
    font-size: 2.2rem;
    padding: 0 25px;
    display: inline-block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

#contents div .scroll-arrow {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

#contents #features {
    background: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/bg_features.jpg") no-repeat center 0;
    background-size: cover;
    padding: 40px 60px 80px;
    margin: 0 auto;
    position: relative;
}

#contents #features .ss-list dl {
    margin: 0 0 30px;
}

#contents #features .ss-list dl dd {
    margin: 20px 0 0;
}

#contents #features .ss-list dl dd h3 {
    background: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/bg_inline.png") repeat;
    display: table;
    font-size: 2.2rem;
    color: #000;
    line-height: 1.6;
    padding: 0 10px;
}

#contents #features .ss-list dl dd p {
    font-size: 2.0rem;
    margin: 10px 0 0;
}

#contents #trailer {
    background: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/bg_trailer.jpg") no-repeat center 0;
    background-size: cover;
    padding: 10px 60px 80px;
    margin: 0 auto;
    position: relative;
}

#contents #guide {
    padding: 35px 60px 0;
    margin: 0 auto;
}

#contents #guide p,
#contents #guide ul {
    font-size: 2.4rem;
}

#contents #guide small {
    font-size: 1.4rem;
}

#contents #guide .img {
    background: url("https://media.spike-chunsoft.co.jp/pages/conan/sp/images/img_guidebook.jpg") no-repeat 0 0;
}

#contents #guide .img span {
    display: block;
    padding: 20px 0 50px;
    margin: 0 0 0 125px;
}

#contents #guide ul li {
    width: 52%;
    float: left;
}
#contents #guide ul li:last-child {
    width: 43%;
    margin: 0 0 0 5%;
}
#contents #guide ul li span {
    font-size: 2.0rem;
    display: block;
}
#contents #guide .comments {
    margin: 20px 0 0;
}

#contents #guide .comments p {
    font-size: 1.4rem;
    display: inline;
    padding: 0 10px 0 0;
}

#contents .difference {
    padding: 0 60px;
    margin: 35px auto 0;
}

#contents .difference div {
    font-size: 1.8rem;
}
#contents .difference div p {
    font-size: 1.6rem;
    padding: 0 0 0 1em;
    text-indent: -1em;
}

/* ====================
  @FOOTER
===================== */
footer {
    font-size: 1.4rem;
    padding: 30px 15px 25px;
    margin: 0 auto;
}
footer ul {
    font-size: 0;
    text-align: center;
    margin: 20px 0 0;
}
footer ul li {
    display: inline-block;
}