@charset "UTF-8";
/* CSS Document */

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html, body { height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #E9385B;}
a:visited { color: #E9385B;}
a:hover { color: #069;}
a:active { color: #09C;}

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color: #b70000; font-size: 16px; line-height:180%; color: #FFF;  background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}
.clearfix{ clear:both;}
hr{ border:solid 1px #333;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}

.youtube { position: relative; width: 100%; max-width: 902px; margin: 0 auto 60px; font-size: 13px;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.fb_iframe_widget > span { vertical-align: baseline !important; }
.fb_iframe_widget{ width:90px;}

.ls{ float:left;}
.rs{ float:right; }

.clearfix2{ clear:both; height:100px;}
.clearfix3{ clear:both; height:120px;}
.clearfix4{ clear:both; height:30px;}
.clearline{ background-image:url(../img/line2.gif); height:2px; background-position:center; box-shadow: 0px 2px 7px #000;
 position: relative;}

.opp{ filter: alpha(opacity=50)!important; -moz-opacity: 0.5!important; opacity: 0.5!important;}
#imgnotice{ font-size:12px; padding:0 0 10px 10px; color:#ccc;}
.notice{ font-size: 13px; line-height: 140%; color: #ccc; margin-left: 2px;}

iframe.twitter-share-button {width: 80px!important;}

.gallery_yt{ max-width:980px; width:100%; margin:20px auto;}
.gallery_yt span{ display:block; padding:10px; line-height:1.5;}
.stage{ position: relative; width: 100%; padding-top: 56.25%;}
.stage iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.getkt{ margin:40px auto 20px; border:solid 1px #e66666; width:100%; max-width:980px; padding:20px 0; font-size:80%;}

img.story1{ width:100%;}
img.story3{ width: 100%;}
img.story4{ width:33.33%;}
.devphoto img{ width:100%; padding:20px 0;}
.devphoto2 img{ width:100%; padding:20px 0 7px;}
.devphoto3 img{ width:100%; padding:20px 0 7px;}
.evecap{ display:block; font-size:14px; padding-bottom:15px;}

.tbox ul{}
.tbox li{ margin-left:1em; line-height: 1.4; padding-bottom: 15px;}
.tbox .naiyo{ padding-bottom: 15px;	font-size: 120%; font-weight: bold;	color: #FFE96F;}

.dlcnotice{ border:solid 1px #fff; display:inline-block; padding:5px; background-color:#600;}

@media screen and (min-width: 640px) {

/* Navigation */
#naviback{ width:100%; }

#navi{ width: 100%; max-width: 1000px; height: 47px; margin: 0 auto; border-left: solid 1px #CA5851;}
#navi ul{ list-style:none;}
#navi li{ float: left; display: inline-block; height: 47px; border-right: solid 1px #CA5851; background-repeat: no-repeat; position: relative;}
#navi li a{ float:left; display:block; height:47px; text-indent:0px; background-repeat:no-repeat; font-size:0px;}
#navi li .new{ position: absolute; left: 38%; bottom: 5%;}

#navi .new2{ position: absolute; left: 361px; top: 57px;}
#navi .new3{ position: absolute; left: 474px; top: 57px;}
#navi .new4{ position: absolute; left: 578px; top: 57px;}
#navi .new5{ position: absolute; left: 661px; top: 57px;}
#navi .new6{ position: absolute; left: 790px; top: 57px;}

#navi ul li.flow a{ background-position:center; width:100%; background-image:url(../img/navi1.png);}
#navi ul li.story a{background-position:center; width:100%; background-image:url(../img/navi2.png);}
#navi ul li.characters a{background-position:center; width:100%; background-image:url(../img/navi3.png);}
#navi ul li.system a{ background-position:center; width:100%; background-image:url(../img/navi4.png);}
#navi ul li.gallery a{ background-position:center; width:100%; background-image:url(../img/navi5.png);}
#navi ul li.dlc a { background-position:center; width:102%; background-image:url(../img/navi6.png);}

#navi ul li.flow a:hover{ background:#400 url(../img/navi1.png) no-repeat; background-position:center;}
#navi ul li.story a:hover{ background:#400 url(../img/navi2.png) no-repeat; background-position:center;}
#navi ul li.characters a:hover{ background:#400 url(../img/navi3.png) no-repeat; background-position:center;}
#navi ul li.system a:hover{ background:#400 url(../img/navi4.png) no-repeat; background-position:center;}
#navi ul li.gallery a:hover{ background:#400 url(../img/navi5.png) no-repeat; background-position:center;}
#navi ul li.dlc a:hover{ background:#400 url(../img/navi6.png) no-repeat; background-position:center;}

#navi ul li.flow { background-position:center; width:16%; text-indent:-9999px; }
#navi ul li.story { background-position:center; width:17%; text-indent:-9999px; }
#navi ul li.characters { background-position:center; width:17%; text-indent:-9999px; }
#navi ul li.system { background-position:center; width:16%; text-indent:-9999px; }
#navi ul li.gallery { background-position:center; width:17%; text-indent:-9999px; }
#navi ul li.dlc { background-position:center; width:16%; text-indent:-9999px; }

body.flow #navi ul li.flow>a { background:#400 url(../img/navi1.png) no-repeat; background-position:center;}
body.story #navi ul li.story>a { background:#400 url(../img/navi2.png) no-repeat; background-position:center;}
body.characters #navi ul li.characters>a { background:#400 url(../img/navi3.png) no-repeat; background-position:center;}
body.system #navi ul li.system>a { background:#400 url(../img/navi4.png) no-repeat; background-position:center;}
body.gallery #navi ul li.gallery>a { background:#400 url(../img/navi5.png) no-repeat; background-position:center;}
body.dlc #navi ul li.dlc>a { background:#400 url(../img/navi6.png) no-repeat; background-position:center;}

body.is-fixed #naviback { position: fixed; top: 35px; left: 0; right:0; z-index:100; background-image:url(../img/bg_header.png); background-repeat:repeat-x; background-position:0 -75px;}
/* Navigation */

#customElement { width: 100%; height: 820px; background: rgba(81, 150, 191, 0.60); position: relative; top: 0px; left: 0; z-index: 0; background: url("../img/main.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover; text-align: center;}
#customElement #platforms{ position: absolute; right: 130px; top: 390px;}
#customElement h1{ padding-top: 474px;}
#customElement h2{ position: absolute; left: 8%; top: 35px;}
#customElement .niko{ position: absolute; right: 5%; top: 35px; max-width:300px; /*background-image:url(../movie.gif); background-size:cover;*/ background-color:#f00;}
#customElement .niko img{ width:100%;}
#customElement .tgs{ position:absolute; right:5%; top:210px;}
#customElement .tgs img{ max-width:300px;}
#customElement .famitsu{ position:absolute; left:4%; bottom:38px;}

#news{ margin-top: 0px; clear: both; font-size: 14px; padding-top: 4px; margin-bottom: 0px; background-color: #FFFFFF; background-image: url(../img/line_new.jpg); background-repeat: repeat-x; background-position: top center; text-align:center;}
#news #newstext{ width: 95%; max-width: 1000px; margin: 0 auto; position: relative;}
#news #newstext #social{ position:absolute; right:5px; top:15px;}
#news #newstext h3 img{ padding: 15px 30px 5px;}
#news #newstext h3 span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 34px; font-weight: bold; display: inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); color:#333;}
#news #newstext dl{ width:100%; text-align:left; padding:20px 0 40px;}
#news #newstext dt{ float:left; margin-right:20px; color:#000; padding:5px 0;}
#news #newstext dd{ border-bottom: dotted 1px #333333; padding: 5px 0; padding-left: 8em; color: #333;}
#news a{ color:#333; text-decoration:none;}
#news a:hover{ color: #FF0000; text-decoration: underline;}

.topbanners{ margin: 20px auto; text-align: center; max-width: 1600px; position: relative;}
.topbanners img{ width:33%;}

.topbanners2{ margin: 20px auto; text-align: center; max-width: 1600px; position: relative;}
.topbanners2 img{ width:49%;}

#tophead{ display:none;}
#header{ height: 125px; width: 100%; z-index: 1000; background-image: url(../img/bg_header.png); background-repeat: repeat-x; text-align: center;}
#header #headerlogo{ border-bottom:solid 1px #dd2e00}

#f1{ background: url("../img/p00.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover; text-align: center; padding: 150px 0;}
#f1 #f1c{ margin:0 auto; max-width: 572px; padding: 40px; text-align:left; background-image:url(../img/black.png);}

.pt{ clear: both; font-size: 12px; padding: 40px 0; background-color: #971C20; background-image: url(../img/line2.gif); background-repeat: repeat-x; background-position: top center; text-align: center;}
.pt img{ padding:10px 80px;}
.pt h3 span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 34px; font-weight: bold; display: inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.pt h4{ font-size: 17px; padding-top: 30px; padding-bottom: 20px; font-weight:normal; margin:0 auto; width:90%;}

.leftbox{ width:50%; float:left; min-height:500px; background-image: url(../img/bg_wrapper.jpg);
 background-repeat: repeat-x;}
.rightbox{ width:50%; float:right; min-height:500px; background-image: url(../img/bg_wrapper.jpg);
 background-repeat: repeat-x;}
.ptbox{ padding:40px 50px 0px 60px; max-width:600px;}
.ptbox h4{ font-size: 24px; font-weight: normal; padding-bottom: 15px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.5;}
.ptbox a{ color:#FFE14B; text-decoration:none; padding-top:15px; display:inline-block;}
.ptbox a:hover{ color: #F90;}
.ptbox a img{ padding:0 0 3px 5px;}

.wrapper{ width: 100%; margin: 0 auto; text-align: center; background-image: url(../img/bg_wrapper.jpg); background-repeat: repeat-x;}
.wrapper h2{ padding: 0 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 72px; line-height: 1; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); background-image: url(../img/midashi_line.jpg); background-repeat: no-repeat; background-position: bottom center; margin-bottom: 40px;}
.wrapper h3{ padding: 100px 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 32px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox{ margin: 40px auto; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 2%; position: relative; border-radius: 10px;}
.wrapper .flowbox .titles img{ padding:10px 80px;}
.wrapper .flowbox .titles span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 38px; font-weight: bold; display: inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox  .read{ padding:30px 0;}
.wrapper .flowbox .sbox{ width: 30.3%; float: left; background-color: #971C20; margin: 0.5%; padding:1%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);}
.wrapper .flowbox .sbox h4{ padding:5px 0 20px; font-weight:normal; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:25px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }
.wrapper .flowbox .sbox p{ text-align:left; font-size:14px; line-height:1.6; padding:10px 0 20px;}
.wrapper .flowbox .sbox img{ width:100%;}
.wrapper .flowbox .sbox2{ width: 96.9%; background-color: #410000; margin: 4% 0.5% 0.5% 0.5%; padding: 1%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); position: relative;}
.wrapper .flowbox .sbox2 h4{ padding: 40px 0px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 40px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox .sbox2 img{ width:30%; padding:1%;}
.wrapper .flowbox .sbox3{ width: 96.9%; background-color: #991A1B; margin: 0.5%; padding: 1%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);}
.wrapper .flowbox .sbox3 h4{ padding: 10px 0 10px; font-weight: normal; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 25px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox .sbox3 img{ width:30%; padding:1%;}

.wrapper .charabox{ margin: 40px auto; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 5% 2%;}
.wrapper .charabox h3, .wrapper .charabox2 h3{ padding: 0px 0 40px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 32px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .charabox .titles{ text-align:left;}
.wrapper .charabox .titles img{ padding: 10px 10px;}
.wrapper .charabox .titles span{ font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:38px; font-weight:normal;  display:inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .charabox .pc img{ max-width: 1583px; width: 100%;}
.wrapper .charabox .sp{ display:none;}
.wrapper .charabox2{ margin: 40px auto; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 5% 2%;}
.wrapper .charabox2 img{ width: 12.7%; max-width: 193px; padding: 0 1% 1%;}

.wrapper .tokuten{ margin: 40px auto; border: solid 1px #d9c368; width: 88%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 4%;}
.wrapper .tokuten .titles{ text-align: center;}
.wrapper .tokuten .titles img{ padding: 10px 10px;}
.wrapper .tokuten .titles h4{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 35px; font-weight: normal; display: inline-block; padding-bottom: 15px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.3; color: #FFE878;}
.wrapper .tokuten .titles h5{ font-size:130%; display: inline-block; text-align:center; font-weight:normal; padding-bottom:20px;}
.wrapper .tokuten .doll{ width:100%; max-width:1000px; margin:0 auto 30px; padding-bottom:20px; border-bottom:dotted 1px #996600;}
.wrapper .tokuten .doll img{ width:100%;}
.wrapper .tokuten a .preorder{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow: none; font-weight: bold; display: block; font-size: 19px; border: solid 1px #f79393; padding: 7px; border-radius: 8px; box-shadow: 0px 0px 7px rgba(0,0,0,0.7); margin: 30px auto; width: 30%; text-align: center; background: linear-gradient(#ec3558, #ff0000); color: #FFF;}
.wrapper .tokuten a:hover .preorder{ background: linear-gradient(#0080ff, #00659a); color: #FF0; text-decoration: none;}

.wrapper .tokuten .tbox{ text-align: center;}
.wrapper .tokuten .tbox .products{ max-width:800px; text-align:left; margin:0 auto;}
.wrapper .tokuten .tbox h4{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 35px; font-weight: normal; display: inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.3; color: #FFE878;}
.wrapper .tokuten .tbox h5{ font-size:24px; line-height:1.5; padding:5px 0;}

.gettown{ display: block; background-color: #B70000; width: 99%; margin: 0 auto 5px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); height: 100%; position: relative;}
.gettown .left{ float:left; width:25%; padding-left:30px; text-align:left;}
.gettown .left img{ width:100%; max-width:262px; padding-top:45%}
.gettown .right{ float:right; padding:30px 30px 30px 0; width:65%; text-align:right;}
.gettown .right img{ width:100%; max-width:784px;}

.ya_left{ position:fixed; left:0; top:50%;}
.ya_right{ position:fixed; right:0; top:50%;}
.still{ height:1384px; background-position:center top; position:relative;}

.charaspec{ position: absolute; border: solid 1px #996633; padding: 30px; font-size: 15px; top: 500px; left: 9%; width: 350px; background-color: rgba(49, 6, 6, 0.66); background-image:url(../chara/sen.png); background-repeat:no-repeat; box-shadow:0px 1px 15px #000;}
.charaspec h2{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight: bold; font-size: 40px; padding-bottom: 5px; padding-top: 15px color: #FFE878;  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); color: #FFE878;}
.charaspec h2 span{ font-size:16px;}
.charaspec h4{ font-size: 18px; font-weight: normal; padding-bottom: 10px;}
.charaspec h5{ color: #FFE878; font-size: 23px; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; padding-bottom: 10px; font-weight:normal;}
.charaspec .ss{ position:relative;}
.charaspec .ss img.glass{ width:28px; position:absolute; bottom:2px; left:215px;}
.charaspec .ss img{ width:70%; margin-top:15px;}

.charaselect{ font-size:23px; text-align:center; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); color:#FC0; font-weight:bold; position:relative; padding-top:25px;}
.charaselect a{ color:#FFF; text-decoration:none;}
.charaselect a:hover{ color:#F90;}
.charaselect .gotop{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow: none; font-weight: normal; display: block; position: absolute; right: 3%; font-size: 14px; top: 35px; display: block; border: solid 1px #FFFFFF; padding: 5px; border-radius: 8px; box-shadow: 0px 0px 7px rgba(0,0,0,0.7);}

.spchara{ display:none;}

#dlctab{ margin:30px 0;}
.mod-tab .pcnotice{ padding: 15px; color: #FC0; font-size: 16px; line-height: 1.4; border: dotted 1px #FC0; margin-bottom:40px; text-align:center; background-image:url(../shop/black.png);}
.mod-tab-nav { float: left; list-style: none; min-width:155px; width:15%;}
.mod-tab-nav > li { margin-bottom: 0px; border-bottom: solid 1px #d48d0d;}
.mod-tab-nav > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 40px; color: #ccc; text-decoration: none;}
.mod-tab-nav > li > a:hover { color: #cc0000; text-decoration: none;}
.mod-tab-nav a.current { color: #FFE878; text-decoration: none;}
.mod-tab-nav a.current:hover { color: #cc0000; text-decoration: none;}
.mod-tab { width: 100%; max-width: 1000px; margin: 0 auto;}
.mod-tab:after { clear: both;}
.mod-tab-contents { float: right; width: 80%; border-left: solid 1px #d48d0d; padding-left: 3%; min-height: 600px; text-align: left;}
.mod-tab-contents h3{ font-size: 24px; padding-bottom: 30px; font-weight: bold; padding-top: 10px;}
.mod-tab-contents h4{ font-size: 19px; padding-bottom: 5px; font-weight: bold; color: #FFE878; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.mod-tab-contents h5{ font-weight:normal; line-height:1.5; font-size:16px;}
.mod-tab-contents h7{ display: inline-block; background-color: #000; padding: 5px; text-align: center; color: #FFF; float: left; margin: 8px 0 0; font-size: 14px; line-height: 1;}
.mod-tab-contents .chara{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab-contents .chara img{width:100%; max-width:662px;}
.mod-tab-contents .item{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab-contents .photo{ float:left; width:32.3%; margin-right:1%; text-align:center; font-size:16px; line-height:180%; margin-top:10px;}
.mod-tab-contents .photo img{ width:100%;}

.mod-tab2 .pcnotice{ padding: 15px; color: #FC0; font-size: 16px; line-height: 1.4; border: dotted 1px #FC0; margin-bottom:40px; text-align:center; background-image:url(../shop/black.png);}
.mod-tab2-nav { float: left; list-style: none; min-width:155px; width:15%;}
.mod-tab2-nav > li { margin-bottom: 5px; border: solid 1px #d48d0d; background-color: rgba(0, 0, 0, 0.6);}
.mod-tab2-nav > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 40px; color: #ccc; text-decoration: none;}
.mod-tab2-nav > li > a:hover { color: #cc0000; text-decoration: none;}
.mod-tab2-nav a.current { color: #FFE878; text-decoration: none;}
.mod-tab2-nav a.current:hover { color: #cc0000; text-decoration: none;}
.mod-tab2 { width: 100%; max-width: 1000px; margin: 0 auto; padding-bottom: 70px;}
.mod-tab2:after { clear: both;}
.mod-tab2-contents { margin-left: 20%; width: 65%; padding: 4%; min-height: 600px; text-align: left; background-color: rgba(0, 0, 0, 0.8); border: solid 1px #d48d0d;}
.mod-tab2-contents h3{ font-size: 24px; padding-bottom: 65px; font-weight: bold; padding-top: 10px; color:#fdd168;}
.mod-tab2-contents h4{ font-size: 19px; padding-bottom: 5px; font-weight: bold; color: #FFE878; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.mod-tab2-contents h5{ font-weight:normal; line-height:1.5;}
.mod-tab2-contents h7{ display: inline-block; background-color: #000; padding: 5px; text-align: center; color: #FFF; float: left; margin: 8px 0 0; font-size: 12px; line-height: 1;}
.mod-tab2-contents .chara{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab2-contents .item{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab2-contents .photo{ float:left; width:50%; margin-bottom:7px; text-align:center; font-size:16px; line-height:180%; margin-top:10px;}
.mod-tab2-contents .photo img{width:98%;}
.devtitle{ text-align:center; padding:70px 0 0px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 72px; line-height: 1; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.bg_dev{ width: 100%; margin: 0 auto; text-align: center; background-image: url(../img/bg_dev.jpg); background-position: center top; background-repeat: no-repeat;}

#done ul{ list-style:none;}
#done li{ width: 48%; text-align: center; float: left; margin: 0 1%; min-height: 350px; position: relative;}
#done li h5{ padding-top: 10px; font-size: 16px; font-weight: bold;}
#done li p{ margin: 5px 0; padding: 0; font-size: 13px; line-height: 135%; text-align: left; color: #666; width: 100%;}
#done li img{ width:100%;}
#done li img.new{ position:absolute; width:20%; max-width:72px;}

#spec{ width: 100%; margin: 0 auto; position: relative; max-width: 970px;}
#spec #kamon{ text-align: center; padding-bottom: 60px; padding-top: 60px;}
#spec #kamon img{ width:150px;}
#spec dl{ line-height: 160%; margin-bottom: 20px; border-top: solid 1px #c15757; padding-top: 20px; padding-bottom: 10px; border-bottom: solid 1px #c15757; margin-bottom: 60px;}
#spec dl .tboxcost{ font-size:23px; font-weight:bold; margin:20px 0 10px;}
#spec dt{ float: left; width: 10em; display: block; padding-bottom:8px;}
#spec dd{ display: block; padding-bottom:8px;}
#spec dd .pac{ float:left; margin-right:2em;}
#spec dd .pac2{ }
#spec dd .dlc{ margin-left:1em;}
#spec .package {float:left; padding:20px 20px 20px 10px;}
#spec #cero{ position: absolute; right: 10px;}
#spec #thanks{ position: absolute; right: 0px; top: 150px;}
#spec .notice{ padding-top: 5px; padding-bottom: 5px; color: #CCC;}

#footer{ text-align: center; padding-bottom: 30px; background-color: #B70000; background-image: url(../img/line.gif); background-repeat: repeat-x; background-position: center top;}
#footer #sns{ text-align:center;}
#footer #links{ margin: 10px auto 40px auto; font-size: 12px; color: #999;}
#footer #links a{ color:#FFF; text-decoration:none; }
#footer #links a:hover{ color: #FFD748; text-decoration: underline;}
#footer #sns img{ margin:30px 50px;}
#footer #sns2{ text-align: center; padding: 40px 0 10px;}
#footer #sns2 img{ margin:0 10px;}
#footer #platform img{ width:100%; max-width:754px;}

#news #social{ padding-top:5px;}
.pccopy{ width:100%; max-width:766px;}
#pagetop { bottom: 50px; right: 25px; position: fixed; z-index: 500;display:none;}
.hidepc{ display:none;}

.caption{ position: absolute; display: block; width: 35%; bottom: 30px; background-color: rgba(84, 2, 5, 0.87); padding: 1% 2% 2%; text-align: left; right: 5%; border: solid 1px #D8C26E; box-shadow: 1px 1px 15px #000; font-size: 95%; max-width: 500px; line-height: 1.7;}
.caption span{ font-size:200%; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; display:block; padding-bottom:7px; color:#FFE878; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}

.storyline{ padding: 4%; background-image: url(../story/bg.jpg); font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 140%; line-height: 1.5; text-align: center; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.storyline span{ color: #FC0; font-size: 140%;}
.storyline span.big{ color:#FFF;}

img.story2{ width:50%;}

.pt .sys{ max-width:1500px; margin:15px auto 30px;}
.pt .sys img{ width:40%; padding:0.5%;}

.devphoto2{ width:49%; margin-right:1%; float:left;}
}

@media screen and (min-width: 1400px) {
.charaspec{ position: absolute; border: solid 1px #996633; background-color: rgba(49, 6, 6, 0.66); padding: 30px; font-size: 15px; top: 500px; left: 20%; width: 350px; background-image:url(../chara/sen.png); background-repeat:no-repeat; box-shadow:0px 1px 15px #000;}
}

@media screen and (min-width: 640px) and (max-width: 918px) {
.mod-tab-contents { float: right; width:70%; border-left: solid 1px #666; padding-left: 3%; min-height:600px;}
.display .eren img{ display:none;}
/*#customElement h2{ position: absolute; left: 40%; top: 35px;}*/
}

@media screen and (min-width: 640px) and (max-width: 830px) {
.pt img{ padding:10px 20px;}
.ptbox{ padding:40px 25px 0px 30px; max-width:600px;}
.leftbox{ width:50%; float:left; min-height:500px; background-image: url(../img/bg_wrapper.jpg);
 background-repeat: repeat-x;}
.rightbox{ width:50%; float:right; min-height:500px; background-image: url(../img/bg_wrapper.jpg);
 background-repeat: repeat-x;}
}

@media screen and (max-width: 639px) {

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 15px; line-height:180%; color: #FFF;  }

#header{ }
#headerlogo{ height:54px;}

.main_sp{ margin-top: 0px; margin-bottom: 10px; text-align: center;}
.main_sp img{ width: 100%;}
.main_sp #tgs{ position: absolute; left: 68%; top: 255px;}
.main_sp #tgs img{ width:100px;}
.main_sp .sptweet{ width:238px; margin-left:20px; padding-top:10px;}
#customElement{ display:none;}

#navi{ display:none;}
#newsbar{ display:none;}

#tophead{ padding: 5px 10px 5px 0; border-bottom: solid 1px #555555; position: fixed; width: 100%; top: 35px; z-index: 1000; text-align: right; background-color: #b70000;}
#tophead #splogo{ float: left; width: 40%; margin: 0 0 0 5px; text-align: left;}
#tophead #splogo img{ width: 92px;}

#news{ margin-top: 0px; clear: both; font-size: 14px; padding-top: 4px; margin-bottom: 0px; background-color: #FFFFFF; background-image: url(../img/line_new.jpg); background-repeat: repeat-x; background-position: top center; text-align:center;}
#news #newstext{ width: 95%; max-width: 1000px; margin: 0 auto; position: relative;}
#news #newstext #social{ display:none;}
#news #newstext h3{ padding-top:10px;}
#news #newstext h3 img{ width: 10%; padding: 5px 10px 10px;}
#news #newstext h3 span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 34px; font-weight: bold; display: inline-block; padding: 10px 0; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); color:#333;}
#news #newstext dl{ width:100%; text-align:left; padding:0px 0 20px;}
#news #newstext dt{ margin-right:20px; color:#c00; padding:5px 0 0; line-height:1;}
#news #newstext dd{ border-bottom: dotted 1px #333333; padding: 5px 0; line-height: 1.5; color: #333;}
#news a{ color:#333; text-decoration:none;}
#news a:hover{ color: #FF0000; text-decoration: underline;}

.niko{ width:100%; background-image:url(../movie.gif); background-size:cover;}
.niko img{ width:100%;}

.topbanners{ margin: 10px auto; text-align: center; max-width: 1600px; position: relative;}
.topbanners img{ width:100%;}

.topbanners2{ margin: 10px auto; text-align: center; max-width: 1600px; position: relative;}
.topbanners2 img{ width:100%;}

.bx-controls-direction{ display:none;}
.spimg{ width:100%;}

#f1{ background: url("../img/p00.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover; text-align: center; padding: 0;}
#f1 #f1c{ margin:0 auto; max-width: 572px; padding: 40px; text-align:left; background-image:url(../img/black.png);}
#f1 #f1c img{ width:100%;}

.pt{ clear: both; font-size: 12px; padding: 10px 0; background-color: #971C20; background-image: url(../img/line2.gif); background-repeat: repeat-x; background-position: top center; text-align: center;}
.pt img{ width: 10%; padding: 5px 6px 10px;}
.pt h3 span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 34px; font-weight: bold; display: inline-block; padding: 10px 0; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.pt h4{ font-size: 16px; padding-top: 10px; font-weight:normal; width:95%; margin:0 auto; text-align:left;}

.ptbox{ padding:40px 30px 30px 30px; max-width:600px;}
.ptbox h4{ font-size: 24px; font-weight: normal; padding-bottom: 15px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.5;}
.ptbox a{ color:#FFE14B; text-decoration:none; padding-top:15px; display:inline-block;}
.ptbox a:hover{ color: #F90;}
.ptbox a img{ padding:0 0 3px 5px;}

.sppt img{ width:100%;}

.wrapper{ width: 95%; margin: 0 auto; background-image: url(../img/bg_wrapper.jpg); background-repeat: repeat-x; text-align: center;}
.wrapper h2{ padding: 0 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 50px; line-height: 1; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); background-image: url(../img/midashi_line.jpg); background-repeat: no-repeat; background-position: bottom center; margin-bottom: 40px; text-align:center;}
.wrapper h3{ padding: 50px 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 24px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); text-align: center;}
.wrapper .flowbox{ margin: 20px auto 40px; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 2%; position: relative;}
.wrapper .flowbox .titles{ padding-top:20px;}
.wrapper .flowbox .titles img{ padding: 10px 10px; width: 10%;}
.wrapper .flowbox .titles span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 38px; font-weight: bold; display: inline-block; padding-bottom: 0px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox  .read{ padding: 30px 0; text-align: left; width: 95%; margin: 0 auto;}
.wrapper .flowbox .sbox{ width: 92%; background-color: #971C20; margin: 0.5% auto 2%; padding: 3%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);}
.wrapper .flowbox .sbox h4{ padding:5px 0 20px; font-weight:normal; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:25px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }
.wrapper .flowbox .sbox p{ text-align:left; font-size:14px; line-height:1.6; padding:10px 0 20px;}
.wrapper .flowbox .sbox img{ width:100%;}
.wrapper .flowbox .sbox2{ width: 92%; background-color: #410000; margin: 5% auto; padding: 3%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); position: relative;}
.wrapper .flowbox .sbox2 h4{ padding: 20px 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 40px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox .sbox2 p{ text-align:left; width:95%; margin:0 auto;}
.wrapper .flowbox .sbox2 img{ width: 100%;}
.wrapper .flowbox .sbox3{ width: 92%; background-color: #991A1B; margin: 0.5%; padding: 3%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);}
.wrapper .flowbox .sbox3 h4{ padding: 10px 0 10px; font-weight: normal; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 25px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .flowbox .sbox3 img{ width: 100%;}
.bigya{ width:30%;}
.bigya2{ width:90%;}

.wrapper .charabox{ margin: 40px auto; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding:2%;}
.wrapper .charabox h3, .wrapper .charabox2 h3{ padding: 10px 0 20px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 24px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); text-align: center;}
.wrapper .charabox .titles{ text-align:left; padding-bottom:20px;}
.wrapper .charabox .titles img{ padding: 10px 10px; width: 10%;}
.wrapper .charabox .titles span{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 25px; font-weight: normal; display: inline-block; padding: 0 0 12px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.wrapper .charabox .pc{ display:none}
.wrapper .charabox .sp img{ width: 100%;}
.wrapper .charabox2{ margin: 40px auto; border: solid 1px #d9c368; width: 92%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 5% 2%;}
.wrapper .charabox2 img{ width: 30%; max-width: 193px; padding: 0 1% 1%;}

.wrapper .tokuten{ margin: 40px auto; border: solid 1px #d9c368; width: 88%; background-color: #670000; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); text-align: center; padding: 4%;}
.wrapper .tokuten .titles{ text-align: center;}
.wrapper .tokuten .titles img{ padding: 10px 10px;}
.wrapper .tokuten .titles h4{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 22px; font-weight: normal; display: inline-block; padding-bottom: 10px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.3; color: #FFE878;}
.wrapper .tokuten .titles h5{ font-size:100%; line-height:1.5; padding-bottom:15px;}
.wrapper .tokuten .doll{ width: 100%; max-width: 1000px; margin: 0 auto; padding-bottom: 5px; border-bottom: dotted 1px #996600;}
.wrapper .tokuten .doll img{ width:100%;}
.wrapper .tokuten a .preorder{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow: none; font-weight: bold; display: block; font-size: 14px; border: solid 1px #f79393; padding: 5px; border-radius: 8px; box-shadow: 0px 0px 7px rgba(0,0,0,0.7); margin: 20px auto; width: 50%; text-align: center; background: linear-gradient(#ec3558, #ff0000); color:#FFF;}
.wrapper .tokuten a:hover .preorder{ background: linear-gradient(#0080ff, #00659a); color: #FF0; text-decoration: none;}
.wrapper .tokuten .tbox{ text-align: center;}
.wrapper .tokuten .tbox .products{ max-width:800px; text-align:left; margin:0 auto;}
.wrapper .tokuten .tbox h4{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 28px; font-weight: normal; display: inline-block; padding-bottom: 20px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); line-height: 1.3; color: #FFE878;}
.wrapper .tokuten .tbox h5{ font-size: 17px; line-height: 1.5; padding: 5px 0;}

.gettown{ display: block; background-color: #B70000; width: 98%; margin: 0 auto 25px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); height: 100%; position: relative;}
.gettown .left{ margin:0 auto; padding-top:20px;}
.gettown .left img{ width:60%; max-width:262px;}
.gettown .right{ padding:3%; width:94%; }
.gettown .right img{ width:100%; max-width:784px;}

.charaspec{ border-top: solid 1px #996633; border-bottom: solid 1px #996633; background-color: #3a0404; padding: 5%; font-size: 15px; width: 90%; background-image:url(../chara/sen.png); background-repeat:no-repeat; background-size:contain;}
.charaspec h2{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight: bold; font-size: 40px; padding-bottom: 5px; padding-top: 20px; color: #FFE878;}
.charaspec h2 span{ font-size:16px;}
.charaspec h4{ font-size: 18px; font-weight: normal; padding-bottom: 10px;}
.charaspec h5{ color: #FFE878; font-size: 23px; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; padding-bottom: 10px; font-weight: normal;}
.charaspec .ss{ position:relative;}
.charaspec .ss img{ width:100%; margin-top:15px;}
.charaspec .ss img.glass{ width:28px; position:absolute; bottom:2px; right:2px;}

.charaselect{ padding:15px 0 0; font-size:23px; text-align:center; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); color:#FC0; font-weight:bold; position:relative;}
.charaselect a{ color:#FFF; text-decoration:none;}
.charaselect a:hover{ color:#F90;}
.charaselect img{ width:33%;}

.spchara{ width:100%;}

.gotop a{ color:#FFF; text-decoration:none;}
.gotop a:hover{ color:#F90;}
.gotop{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow: none; font-weight: normal; display: block; font-size: 14px; display: block; border: solid 1px #FFFFFF; padding: 5px; border-radius: 8px; box-shadow: 0px 0px 7px rgba(0,0,0,0.7); margin: 20px auto; width: 50%; text-align: center;}
.ya_left{ position:absolute; left:0; top:80%;}
.ya_right{ position:absolute; right:0; top:80%;}

.mod-tab .notice{ padding-top:10px; color:#ccc; width:95%; margin:0 auto; font-size:13px; }
.mod-tab .pcnotice{ padding: 2.5%; color: #FC0; font-size: 16px; line-height: 1.4; border: dotted 1px #FC0; margin:20px auto; width:90%;}
.mod-tab-nav { border-top: 1px solid #d48d0d; width: 95%; list-style: none; margin:10px auto;}
.mod-tab-nav > li { margin-bottom: 0px; border-bottom: solid 1px #d48d0d;}
.mod-tab-nav > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 40px; color: #ccc; text-decoration: none;}
.mod-tab-nav > li > a:hover { color: #cc0000; text-decoration: none;}
.mod-tab-nav a.current { color: #FFE878; text-decoration: none;}
.mod-tab-nav a.current:hover { color: #cc0000; text-decoration: none;}
.mod-tab { width: 100%; max-width: 1000px; margin: 0 auto;}
.mod-tab:after { clear: both;}
.mod-tab-contents { width: 100%; margin: 30px auto; min-height: 100px; text-align: left; }
.mod-tab-contents h3{ font-size: 24px; padding-bottom: 10px; font-weight: bold; padding-top: 0; text-align: left;}
.mod-tab-contents h4{ font-size: 19px; padding-bottom: 5px; font-weight: bold; color: #FFE878;}
.mod-tab-contents h5{ font-weight: normal; line-height: 1.5; font-size: 100%;}
.mod-tab-contents h7{ display: inline-block; background-color: #000; padding: 5px; text-align: center; color: #FFF; float: left; margin: 8px 0 0; font-size: 12px; line-height: 1;}
.mod-tab-contents .chara{ text-align:center; position:relative; padding-bottom:20px;}
.mod-tab-contents .chara img{ width:100%;}
.mod-tab-contents .item{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab-contents .item img{ width:100%;}
.mod-tab-contents .photo{ width:48%; margin:2px; text-align:center; float:left; margin-top:7px;}
.mod-tab-contents .photo img{width:100%;}

.mod-tab2 .notice{ padding-top:10px; color:#ccc; width:95%; margin:0 auto; font-size:13px; }
.mod-tab2 .pcnotice{ padding: 2.5%; color: #FC0; font-size: 16px; line-height: 1.4; border: dotted 1px #FC0; margin:20px auto; width:90%;}
.mod-tab2-nav { width: 95%; list-style: none; margin:0px auto 10px;}
.mod-tab2-nav > li { margin: 1px; border: solid 1px #d48d0d; width:18.6%; float:left; text-align:center; background-color:#000;}
.mod-tab2-nav > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 40px; color: #ccc; text-decoration: none;}
.mod-tab2-nav > li > a:hover { color: #cc0000; text-decoration: none;}
.mod-tab2-nav a.current { color: #FFE878; text-decoration: none;}
.mod-tab2-nav a.current:hover { color: #cc0000; text-decoration: none;}
.mod-tab2 { width: 100%; max-width: 1000px; margin: 0 auto;}
.mod-tab2:after { clear: both;}
.mod-tab2-contents { width:82%; padding:6%; margin:10px auto 30px; min-height:100px; text-align:left; background-color:rgba(0, 0, 0, 0.7); border:solid 1px #d48d0d;}
.mod-tab2-contents h3{ font-size: 24px; padding-bottom: 30px; font-weight: bold; padding-top: 0; text-align: left; color:#fdd168;}
.mod-tab2-contents h4{ font-size: 19px; padding-bottom: 5px; font-weight: bold; color: #FFE878;}
.mod-tab2-contents h5{ font-weight:normal; line-height:1.5;}
.mod-tab2-contents h7{ display: inline-block; background-color: #000; padding: 5px; text-align: center; color: #FFF; float: left; margin: 8px 0 0; font-size: 12px; line-height: 1;}
.mod-tab2-contents .chara{ text-align:center; position:relative; padding-bottom:20px;}
.mod-tab2-contents .chara img{ height:600px;}
.mod-tab2-contents .item{ text-align:center; position:relative; padding-bottom:20px; }
.mod-tab2-contents .item img{ width:100%;}
.mod-tab2-contents .photo{ width:48%; margin:2px; text-align:center; float:left; margin-top:7px;}
.mod-tab2-contents .photo img{width:100%;}
.devtitle{ text-align:center; padding:0; }
.devtitle img{ width:100%;}

#done{ padding-top:30px;}
#done ul{ list-style:none;}
#done li{ width: 100%; text-align: center; float: left; margin: 0 0.5% 8%; line-height:1.3;}
#done li h5{ padding-top: 10px; font-size: 14px; font-weight: bold;}
#done li p{ margin:5px auto 15px; padding:0; font-size:12px; line-height:135%; text-align:left; color:#666; width:97%;}
#done li img{ width:100%;}
#done li img.new{ position:absolute; width:10%; max-width:72px;}

#spec{ width:92%; margin:0 auto; position:relative; font-size:14px;}
#spec #kamon{ text-align: center; padding: 30px 0;}
#spec #kamon img{ width:150px;}
#spec dl{ line-height:160%; line-height: 160%; margin-bottom: 20px; border-top: solid 1px #c15757; padding-top: 10px; padding-bottom: 10px; border-bottom: solid 1px #c15757;}
#spec dl .tboxcost{ font-size:23px; font-weight:bold; margin:30px 0 10px;}
#spec dt{}
#spec dd{ margin-bottom:10px; border-bottom: dotted 1px #C15758; padding-bottom: 5px;}
#spec .package{ display:none;}
#spec #cero{ margin-bottom:10px;}
#spec #thanks{ margin-bottom:30px;}
#spec #thanks img{ width:100%; text-align:center;}

#footer{ text-align: center; padding: 30px 0 60px; background-color: #B70000; background-image: url(../img/line.gif); background-repeat: repeat-x; background-position: center top;}
#footer #sns{ text-align:center;}
#footer #sns img{ width:18%;}
#footer #sns2{ text-align: center;}
#footer #sns2 img{ margin:10px 3px;}
#footer #links{ margin:0 auto 20px auto; font-size:12px; color:#999; width:95%;}
#footer #links a{ color:#FFF; text-decoration:none; }
#footer #links a:hover{ color:#F03; text-decoration:underline;}
#footer #sns img{ margin: 30px 15px;}
#footer #platform img{ width:95%;}
img.spcopy{ width:100%;}

.fb_iframe_widget{ width:75px;}
#pagetop { bottom: 10px; right: 10px; position: fixed; z-index: 500;}
.hidesp{ display:none;}

.caption{ display: block; bottom: 30px; padding: 3%; text-align: left; font-size: 95%; line-height: 1.7;}
.caption span{ font-size:170%; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; display:block; color:#FFE878; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}

.storyline{ padding:6% 4%; background-image:url(../story/bg.jpg); font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:108%; line-height:1.5; text-align:left; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}
.storyline span{ color: #FC0; font-size: 140%;}
.storyline span.big{ color:#FFF;}

img.story2{ width:100%;}
.famitsu_sp{ margin-bottom:15px;}
.famitsu_sp img{ max-width:259px;}

.pt .sys{ max-width:1500px; margin:15px auto 30px;}
.pt .sys img{ width:90%; padding:0.5%;}
}

.product_notice{ width: 95%; margin: 5px auto 0px 1em; font-size: 12px; color: #FCC; line-height: 1.5; text-align: left; text-indent: -1em;}

.pt2{ background: url("../img/p01.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover;}
.pt3{ background: url("../img/p02.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover;}
.pt4{ background: url("../img/p03.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover;} 
.pt5{ background: url("../img/p04.jpg") no-repeat center center; -moz-background-size: cover; background-size: cover;}

.masayuki{ background-image:url(../chara/s01.jpg);}
.masayuki_m{ background-image:url(../chara/s01m.jpg);}
.yukimura_b{ background-image:url(../chara/s02b.jpg);}
.yukimura{ background-image:url(../chara/s02.jpg);}
.yukimura_m{ background-image:url(../chara/s02m.jpg);}
.chacha_b{ background-image:url(../chara/s03b.jpg);}
.chacha{ background-image:url(../chara/s03.jpg);}
.sasuke{ background-image:url(../chara/s04.jpg);}
.nobuyuki_b{ background-image:url(../chara/s05b.jpg);}
.nobuyuki{ background-image:url(../chara/s05.jpg);}
.nobuyuki_m{ background-image:url(../chara/s05m.jpg);}
.muramatsu_b{ background-image:url(../chara/s06b.jpg);}
.muramatsu{ background-image:url(../chara/s06.jpg);}
.katsuyori{ background-image:url(../chara/s07.jpg);}
.hidetada{ background-image:url(../chara/s08.jpg);}
.hidetada_m{ background-image:url(../chara/s08m.jpg);}

a.thumnail { display: block; float: left; overflow: hidden; max-width:500px;}
figure img { height: auto; -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; width: 100%; vertical-align: bottom;}
figure { margin: 0; overflow: hidden; position: relative; text-align: center;} 
figcaption { background-color: rgba(0,0,0,0.6); color: #FFF; opacity: 0; font-size: 16px; font-size: 1.6rem; position: absolute; text-align: center; -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding-top: 25%;}
a:hover>figure img { transform: scale(1.15,1.15); -webkit-transform:scale(1.15,1.15); -moz-transform:scale(1.15,1.15); -ms-transform:scale(1.15,1.15); -o-transform:scale(1.15,1.15);}
a:hover>figure figcaption { opacity: 1;}