@charset "UTF-8";
/* CSS Document */
html,body{ -webkit-text-size-adjust: 100%; background: #000;}
a{ color: inherit;}
.inner{ width: 640px;}
img{ vertical-align: top;}
#contents{ background: #000;}
#logo_nav{ position: fixed; width: 640px; z-index: 100;}
header { background-color: #000;}
header .inner{ background: url(../img/img40/sp_main_image.jpg) top left no-repeat; height: 1528px; position: relative;}
header .inner a.try{ background: url(../img/img40/sp_btn_try.png)no-repeat top center; display: block; width: 410px; height: 91px; position: absolute; top: 1343px; right: 10px; text-indent: 100%; overflow: hidden; white-space: nowrap;}
header .inner h2,
header .inner h3,
header .inner p{ text-indent: 100%; overflow: hidden; white-space: nowrap;}
#sns{position:absolute;top:1460px;right:80px;}
#sns ul{text-align:left;font-size:0;}
#sns ul li{display:inline-block;margin-left:12px;}
#sns ul li a:hover{opacity:0.8;}
#sns ul li a img{vertical-align:middle;}

.sns{position:relative;top:0px;left:0px; margin-top: 20px; width: 640px; overflow: hidden;}
.sns ul{text-align:left;font-size:0; margin-left: 60px;}
.sns ul li{display:inline-block;margin-left:12px;}
.sns ul li a:hover{opacity:0.8;}
.sns ul li a img{vertical-align:middle;}

header h1{  background: #ea752a; position: absolute; top: 0; left: 0; height: 70px; width: 100%;}
header h1 img{ margin-top: 8px; margin-left: 10px;}
ul.pageLink { background: #ea752a; position: absolute; top: 0; left: 320px; height: 70px;}
ul.pageLink li{ display: inline-block;}
ul.pageLink li a { position: relative; padding-top: 20px; padding-right: 40px; display: block; }
ul.pageLink li a:before{ content: ''; border-bottom: 5px solid #000; width: calc(100% - 40px); position: absolute; bottom: -10px;}
ul.pageLink li a:after{ content: url(../img/img40/sp_arrow.png); margin-left: 10px; position: relative; top: 3px;}
ul.topLink{ position: absolute; top: 70px; border: 5px solid #ea752a; border-top: none;justify-content: space-around; width: 640px; box-sizing: border-box;}
ul.topLink li{ border-right: 5px solid #ea752a; width: 25%; float: left; box-sizing: border-box;}
ul.topLink li a{ width: 100%; display: block;text-align: center; padding: 25px 0; background: #000;}
ul.topLink li:last-child{ border: none;}
section{ background: url(../img/img40/sp_bg.jpg) top left no-repeat; padding: 60px 0 20px; text-align: center;}
section p{ color: #adadad; font-size: 20px;}
section#contents{ padding: 0;}
section h2{ text-align: center; }
section#movie{ position: relative;}
section#movie ul li { margin-bottom: 44px;}
section#movie ul li iframe{ width: 560px; height: 315px;}
section#movie ul li:last-child{ margin-bottom: 0;}
section#movie ul li h3{ margin: 10px 0;}
section#presents { padding-bottom: 40px;}
section#presents .inner > h3{ margin-bottom: 20px; background: url(../img/img40/title_present_sp.png)no-repeat top center; height:59px; width: 633px; text-indent: 100%; overflow: hidden; white-space: nowrap;}
section#presents ul.list{ background: url(../img/img40/sp_title_present.png) no-repeat top center; height: 148px; margin-top: 25px; text-indent: 100%; overflow: hidden; white-space: nowrap;}
section#presents ul.caution{ text-align: left; color: #adadad; font-size: 18px; margin: 20px 10px;}
section#presents div.oubo{ color: #fff;}
section#presents div.oubo p{ color: #fff; margin: 20px 0 30px; line-height: 180%;}
section#presents div.oubo h3{ background: #fff; color: #000; font-size: 22px; padding: 5px 0; margin: 0 10px; font-weight: bold;}
section#presents p span.ore{ color: #ea752a; font-size: 28px;}
section#presents ol{ text-align: left; font-size: 18px; margin: 0 20px;}
section#presents ol li{ display: inline-block; margin-right: 10px; margin-bottom: 5px;}
section#presents div.oubo img.ticket{ width: 620px; margin: 20px 10px;}
section#presents div.oubo div.send{ border: 1px solid #fff; font-size: 24px; padding: 20px 0; margin: 0 10px 15px; line-height: 160%; }
section#photo_event{ overflow: hidden; width: 640px;}
section#photo_event h3{ margin: 10px 0;}
section#photo_event div.yurindo{ background: #fff; position: relative; margin: 20px 10px; padding: 20px 10px;text-align: left; position: relative; width: 620px; box-sizing: border-box;}
section#photo_event div.yurindo h4{ color: #ea752a; font-size: 38px; font-weight: bold; margin-bottom: 10px;}
section#photo_event div.yurindo p{ color: #000;}
section#photo_event div.yurindo p.add{font-size: 24px; text-align: left; line-height: 160%; margin-bottom: 10px;}
section#photo_event img.map{ margin: 20px 0;}
section#photo_event img.image{ position: absolute; right: -40px; top: 135px;}
section#photo_event img.kikan{ margin-bottom: 20px;}
section#poster h3{ margin-bottom: 10px;}
section#poster ul { margin: 30px 0;}
section#poster ul li{ display: inline-block; margin: 0 5px;}
section#poster ul li img{ width: 290px;} 


section#article{background: none; padding: 10px 0; width: 640px; background-color: #fff;}
section#article a:hover{ opacity: 0.8;}
section#article .mp {border: 1px solid #12c9d1; width: 615px; margin: 0 auto; padding-bottom: 20px;}
section#article .mp h3{ margin: 20px 0;}
section#article .mp p{ display: none;}
section#article .mp ul li{ display: inline-block; margin: 0 10px;}
section#article .novel{ margin: 20px 0 10px; position: relative;}
section#article .novel a{ position: absolute; top: 152px; right: 22px;}
section#article .guidebook{ margin: 10px 0 20px;}

section#article .other .anime{ margin-bottom: 20px;}

section#article .goods { margin: 20px 0;}
section#article .goods a{ background: url(../img/img40/sp_banner_goods.jpg) top center no-repeat; width:620px; height: 105px; display: block; margin: 0 auto; text-indent: 100%; overflow: hidden; white-space: nowrap;}
section#article .prime1 { margin: 20px 0;}
section#article .prime1 a{ background: url(../img/banner_sp_prime1.jpg) top center no-repeat; width:620px; height: 105px; display: block; margin: 0 auto; text-indent: 100%; overflow: hidden; white-space: nowrap;}
#info{font-size:0;padding-top:18px;overflow:hidden;}
#info .topics{color:#ffffff;background-color:#3a0100;padding:0 6px; width: 620px; box-sizing: border-box; margin: 0 auto;}
#info .topics h2{border-bottom:1px solid #000000;padding:20px 0 7px 20px;}
#info .topics h2 img{ display: block;}
#info .topics ul{padding:0 12px;height:204px;margin-top:14px;font-size:14px;overflow:hidden;overflow-y:auto;line-height:1.5;-webkit-overflow-scrolling:touch; text-align: left;}
#info .topics ul li{margin-top:17px;display:table;}
#info .topics ul li span{display:table-cell;}
#info .topics ul li span.date{width:100px;}
#info .topics ul li span.text{padding-left:10px;}
#info .topics ul li span a{color:#ffffff;display:inline-block;transition:background-color .2s ease;}
#info .topics ul li span a:hover{background-color:rgba(255,255,255,0.2);}
#info .twitter_widget{width:620px; margin: 20px auto;}

section#article .banner { width: 620px; margin: 0 auto;}
section#article .banner a img{ width: 100%;}

footer{ background: #181818; color: #f1f1f1; font-size: 14px; text-align: center; line-height: 160%; padding: 20px 0; margin-top: 20px;}

@media (min-width: 769px) {
   /* (C)PC以上向けスタイル */
    .bsp{ display: none;}
    .inner{ width: 1000px; margin: 0 auto;}
    header{ background-image: url(../img/img40/pc_main_image.jpg); background-position: top center;background-repeat: no-repeat; min-width: 1000px; height: auto;}
    header .inner{background: url(../img/img40/pc_main_image.jpg) top center no-repeat; height: 1059px; }
    header h1 img{ width: 138px;}
    #logo_nav{ width: 100%;
        height: 48px;
        background: #ea752a;
        background: -moz-linear-gradient(left, #ea752a 0%, #ea752a 59%, #282828 59%, #282828 100%);
        background: -webkit-linear-gradient(left, #ea752a 0%,#ea752a 59%,#282828 59%,#282828 100%);
        background: linear-gradient(to right, #ea752a 0%,#ea752a 59%,#282828 59%,#282828 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea752a', endColorstr='#282828',GradientType=1 );}
    #logo_nav>div{ width: 1000px; margin: 0 auto; position: relative;}
    header h1{ height: 48px; float: left; width: 142px; position: relative;}
    header h1 img{ margin-left: 0;}
    nav{ float: left; width: calc( 1000px - 142px);}
    nav ul li a img{ width: auto; height: 18px;}
    ul.pageLink { height: 48px; position: relative; left: auto; float: left; background: #282828;}
    ul.pageLink li a{ padding: 0; height: 48px; padding-top: 15px; box-sizing: border-box; text-align: center;}
    ul.pageLink li.tiral_comic{ width:162px; }
    ul.pageLink li.goods{ width:95px; }
    ul.pageLink li a:before{ display: none;}
    ul.pageLink li a:after{ display: none;}
    ul.pageLink li a:hover{background-image: url(../img/img40/pc_blood_o.png); background-position: left top; background-repeat: no-repeat;}
    ul.topLink { display: block; width: 590px; position: relative; top: auto; border: none; float: left;}
    ul.topLink li{ width: auto; border: none; float: left;}
    ul.topLink li a{ padding: 0; height: 48px; padding-top: 15px; box-sizing: border-box; background-color: #ea752a;}
    ul.topLink li a:hover{ background-image: url(../img/img40/pc_blood.png); background-position: left top; background-repeat: no-repeat;}
    ul li.special_movie{ width: 198px; }
    ul li.present{ width: 114px;}
    ul li.photo_event{ width: 146px;}
    ul li.poster{ width: 132px;}
    header .inner a.try{ top: 943px; right: 10px; background: url(../img/img40/pc_btn_try.png) no-repeat; width: 232px; height: 71px;}
    header .inner a.try:hover{ background-position: 0 -71px;}
    #sns{position:absolute;top:148px;right: 10px; width: 280px;}
    #sns li{ width: 25%}
    #sns li:last-child{ width: 36%;}
    #sns img{ width: 100%;}
    section{ background-image: url(../img/img40/pc_bg.jpg); padding: 60px 0 20px; min-width: 1000px; clear: both;}
    section p{ font-size: 18px;}
    section h2{ margin-bottom: 15px;}
    section#movie ul li h3 img{ height: 24px;}
    section#movie ul li:first-child iframe{ width: 640px; height: 360px;}
    section#movie ul li:nth-child(2n){ float: left; width: 400px; text-align: center; margin-left: 70px;}
    section#movie ul li:nth-child(2n) iframe{ width: 400px; height: 225px;}
    section#movie ul li:nth-child(3n){ float: right; width: 400px; text-align: center; margin-right: 70px;}
    section#movie ul li:nth-child(3n) iframe{ width: 400px; height: 225px;}
    section#presents .inner > h3{ background: url(../img/img40/title_present_pc.png) top center no-repeat; width: 423px; height: 122px; text-align: center; margin: 0 auto 20px;}
    section#presents ul.list{ background: url(../img/img40/pc_title_present.png); width: 856px; height: 75px; margin-left: 70px;}
    section#presents ul.caution{ font-size: 15px; margin: 20px 70px 30px 70px;}
    section#presents div.oubo h3{ width: 90%; margin: 0 auto;}
    section#presents div.oubo p span.ore{ font-size: 22px;}
    section#presents div.oubo ol{ font-size: 14px; margin: 20px 60px 0px;}
    section#presents div.oubo img.ticket{ width: auto;}
    section#presents div.oubo div.send{ font-size: 20px; width: 82%; margin: 0 auto 15px; padding: 15px 0;}
    section#presents div.oubo img.shimekiri{  height: 25px;}
    section#photo_event{ overflow: hidden; width: auto;}
    section#photo_event div.yurindo{ width: 817px; margin: 50px auto; position: relative; overflow: visible; padding-left: 250px;}
    section#photo_event div.yurindo h4{ font-size: 30px;}
    section#photo_event div.yurindo p.add{ font-size: 18px;}
    section#photo_event div.yurindo img.map{ position: absolute; top: 0; left: 10px; width: 220px;}
    section#photo_event div.yurindo img.image{ top: -130px; width: 246px; right: -100px;}
    section#photo_event div.yurindo img.kikan{ height: 25px;}
    section#photo_event div.yurindo a img{ width: 300px; margin-bottom: 28px;}
    section#photo_event div.yurindo p.caution{ font-size: 16px;}
    section#poster ul{ margin-top: 40px;}
    section#poster ul li:first-child{ margin-right: 30px;}
    section#poster ul li:last-child{ margin-left: 30px;}
    section#poster ul li img{ width: auto;}
    
    section#article{ width: 1000px; margin: 0 auto; padding: 20px 10px; box-sizing :border-box;}
    section#article .mp{ width: auto; text-align: left; padding-bottom: 0; background: url('../img/img40/mp_qr.jpg') no-repeat right 10px top 10px;}
    section#article .mp:after {
    content:" ";
    display:block;
    clear:both;
}
    section#article .mp img.mp_title{ width: 489px; float:left; margin-right: 20px;}
    section#article .mp h3 { margin: 10px 0 10px 0;}
    section#article .mp h3 img{ height: 18px;}
    section#article .mp ul li { margin: 0;}
    section#article .mp ul li:first-child{ margin-right: 10px;}
    section#article .mp ul li img{ width: 161px;} 
    section#article .mp p{ color: #099aa2; margin-top: 10px; font-size: 20px; display: block;}
    section#article .books { margin: 20px 0;}
    section#article .books:after {
    content:" ";
    display:block;
    clear:both;
}
    section#article .books .novel{ float: left; width: 478px; margin: 0; }
    section#article .books .novel img{ width: 478px;}
    section#article .books .novel a { top: 126px; right: 17px;}
    section#article .books .novel a img{ width: 168px;}
    section#article .books .guidebook{ float: right; width: 478px; margin: 0;  }
    section#article .books .guidebook img{ width: 478px; }
    
    section#article .goods a{ background: url(../img/img40/pc_banner_goods.jpg) no-repeat top center; width: 975px; height: 113px;}
    section#article .prime1 a{ background: url(../img/banner_pc_prime1.jpg) no-repeat top center; width: 975px; height: 113px;}
    
    section#article .other:after {
    content:" ";
    display:block;
    clear:both;
}
    section#article .other .anime{ float: left; margin: 0;}
    section#article .other .game{ float: right; margin: 0;}
    section#article .other .anime img,
    section#article .other .game img{ width: 478px;}
    section#article #info:after {
    content:" ";
    display:block;
    clear:both;
}
    section#article #info .topics { width: 480px; float: left; height: 274px; }
    section#article #info .twitter_widget{ width: 480px; float: right; margin: 0;}
    
    section#article .banner{ margin-top: 38px;}
    
    .sns{position:relative;top:0;right:0px; left: 0; width: 374px; margin: 0 auto;}
    .sns li{ width: 18%}
    .sns li:last-child{ width: 30%;}
    .sns img{ width: 100%;}
    
    footer { font-size: 11px;}
}