@charset "UTF-8";
/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
img {
	max-width: 100%;
	height: auto;
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    overflow-x: hidden;
}

body {
	display: block;
	z-index: -1;
	width: 100%;
    background:#FFF;
    font-size:14px;
    background: url("../../_img/bg.jpg") center top;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

#wrapper{width:100%; overflow: hidden;}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
/* ヘッダーロゴ部分 */
header{
	width:100%;height:832px;position:relative;background:url(../../_img/bg_top.jpg) no-repeat center top #000;background-size: cover; margin:0 auto; padding:0;z-index:0;overflow: hidden;border:1px solid #ff0000;
    opacity: 0;
}
header h1 {font-size: 0;}
header #blackBox{width:100%;height:auto;padding-bottom: calc(100%*922/1600); background:#000;position:absolute;z-index:1;}
header #copy1{
    max-width:501px; position: absolute; left:-500px; right:0; margin:0 auto;top:3%; z-index:4;}
header #copy2{
   max-width:519px; position: absolute; left:-500px; right:0; margin:0 auto;top:21%; z-index:3;}
header #sakka{
    max-width:193px; position: absolute; left:-450px; right:0; margin:0 auto;top:88%; z-index:4;}
header #btn1{
    max-width:222px;position: absolute; left:-800px; right:0; margin:0 auto;top:83%; z-index:5;}
header #logo6th{
    max-width:125px;position: absolute; left:0px; right:-400px; margin:0 auto;top:84%; z-index:4;}
header #comic{
   max-width:256px; position: absolute; left:0px; right:-800px; margin:0 auto;top:67%; z-index:4;}
header #chara {
    width:781px; position: absolute; left:0; right:-350px; margin:0 auto;top:-40px; z-index:1;}
header #logo{
    max-width:516px; position: absolute; left:-500px; right:0; margin:0 auto;top:41%; z-index:3;}
header #flash {
    width:100%; height:100%; position: absolute; left:0px;top:0; z-index:20;background:#FFF;}

/* NAV部分 */

#menu{width:100%;height:90px; margin:0 auto;background: url("../../_img/bg_nav.png") repeat-x;z-index:21;}
#menu ul li:nth-child(1){width:203px;position:absolute; top:5px; left:-800px;right:0; margin:0 auto;}
#menu ul li:nth-child(2){width:140px;position:absolute; top:5px; left:-470px;right:0; margin:0 auto;}
#menu ul li:nth-child(3){width:162px;position:absolute; top:5px; left:0px;right:-470px; margin:0 auto;}
#menu ul li:nth-child(4){width:179px;position:absolute;top:5px; left:0px;right:-800px; margin:0 auto;}
#menu h1{width:306px;position:absolute;left:0;right:0;margin:0 auto; top:0;}




/* tableBox基本*/
section.tableBox:before{content: ''; display: inline-block;
  width: 1038px; height: 80px;
  background-image: url('../../_img/table_top.png');
  background-size: contain;
  vertical-align: middle;position:absolute;top:-80px;}
section.tableBox:after{content: ''; display: inline-block;
  width: 1038px; height: 64px;
  background-image: url('../../_img/table_btm.png');
  background-size: contain;
  vertical-align: middle;position:absolute;bottom:-64px;}

section.tableBox{width:1038px;background: url('../../_img/table_cmn.png') center top;position:relative; margin:130px auto 220px;padding:0px;padding-bottom:20px;}

section.tableBox.topSec{margin:150px auto 100px;}

/* intro部分 */
section#intro h2{width:498px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_intro.png") center top no-repeat;}

section#intro .inner{width:930px; height:560px; margin:0px auto 0; position: relative;}
section#intro .inner ul{display: flex; flex-wrap: nowrap;}
section#intro .koma1{ width:260px; position: absolute; left:0px; top:-20px; z-index:1;}
section#intro .koma2{ width:186px; position: absolute; right:0px; top:-20px; z-index:1;}
section#intro .chara{width:595px; position: absolute; left:0px; right:-20px; margin:0 auto;top:-30px; z-index:3;}
section#intro .text{width:776px; position: absolute; left:0px; right:0px; margin:0 auto;top:300px; z-index:4;}
section#intro p{width:670px;margin:0 auto;font-size:18px;line-height:28px;}

section#intro ul{display:flex;flex-wrap: nowrap;justify-content: center;margin:10px auto 0;}
section#intro ul li{margin:5px;}

#mainBanners{background:#CC0000;padding:30px 0;}
#mainBanners ul{width:800px;margin:0 auto;}

/* 追加要素 */
section#limited h2{width:498px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_limited.png") center top no-repeat;}

section#youtube h2{width:403px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_youtube.png") center top no-repeat;}

section#present h2{width:498px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_present.png") center top no-repeat;}

section#limited div.imgs{width:887px;margin:0px auto;padding-top:20px;position: relative;}
section#limited .icon1{position:absolute;right:190px;bottom:30px;}
section#limited .icon2{position:absolute;right:50px;bottom:30px;}

section#youtube div.imgs{width:762px;margin:0px auto;padding-top:20px;}
section#present div.imgs{width:870px;margin:0px auto;padding-top:20px;position: relative;}
section#present .icon1{position:absolute;left:0;bottom:0;}


/* movie embed*/
.box_video{
    width:100%;margin:20px auto 0;height:0;padding-bottom:56%;position:relative;}
.box_video iframe{
	position:absolute;top:0;left:0;width:100%;height:100%;}

/* twitter部分 */
section#twitter h2{width:384px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_twitter.png") center top no-repeat;}
section#twitter .inner{width:930px;height:700px;margin:0px auto 0; position: relative;padding-top:40px;}

section#twitter .tweetBlock{width:470px;  margin-left:0;}
section#twitter .asta{width:460px; position:absolute; right:0; top:0;}


/* コミックスのリスト*/
section#comics h2{width:384px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-50px; margin:0 auto; background:URL("../../_img/h2_comics.png") center top no-repeat;}

section#comics{width:100%; margin:0 auto; border-top:3px solid #ebad70;border-bottom:3px solid #ebad70;  position:relative;background:#401f02;padding-top:50px;box-shadow: 0px 0px 10px 10px rgba(86,17,17,0.6);}

section#comics .btn1{width:287px;margin:0px auto;}

/* コミックス詳細ページ*/
section#comics2 h2{width:352px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-103px; margin:0 auto; background:URL("../../_img/h2_comics.png") center top no-repeat;}

ul#comicsList{width:82%; margin:0 auto;display:flex; flex-wrap: wrap;}
ul#comicsList li{width:18%;margin:1%;}
ul#comicsList li img{width:100%;}

ul#novelList{width:90%; margin:0 auto;display:flex; flex-wrap: wrap;justify-content: center;}
ul#novelList li{width:28%;margin:1%;position:relative;padding-bottom:10vh;}
ul#novelList li img{margin-bottom:7px;}
ul#novelList li p{margin-bottom:7px;}
ul#novelList li p strong{font-weight:bold; font-size:16px;}

a.buy{display:block;width:100%;background-color:#16506e;color:#fff;text-align:center;padding:8px 0;margin-top:5px;font-size:14px;line-height:20px;text-decoration: none;position: relative;}
a.buy:hover{display:block;width:100%;background-color:#0d3346;color:#fff;text-align:center;padding:8px 0;margin-top:5px;font-size:14px;line-height:20px;position: relative;}

a.buy:after {
content: "";
display: block;
width: 7px;
height: 7px;
border-top: #FFF 2px solid;
border-right: #FFF 2px solid;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right: 10px;
top: 5%;
bottom: 15%;
margin: auto;
}

a.buy.read{background-color:#cc0000;}
a.buy.read:hover{background-color:#881919;}


#comics2 h3,#novelize h3{width:80%;margin:0 auto; font-weight:bold; background:#703907;color:#FFF;font-size:24px;letter-spacing: 0.3em;padding:12px;text-align: center;}

dl#newestComic{width:80%;margin:0 auto 30px;background:#FFF;border:1px solid #999;padding:20px; box-sizing: border-box;}

dl#newestComic dt{width:240px;float:right;}

dl#newestComic dd{margin-right:270px;}

.mainBannerImg{width:100%; margin:20px auto; padding:0; display: block;border:1px solid #787878;}
#newestComic .topics_yokoImg{float:right; width:240px; margin-left:30px; border:1px solid #999;}
#newestComic .inner{padding:0px;width:100%; font-size:15px;line-height:24px;}
#newestComic p{margin-bottom:10px;}

#newestComic .topics_title{color:#CC0000; font-size:30px; line-height:36px;font-weight:bold;margin-bottom:10px;}

#newestComic .kakomi{border:1px solid #999;padding:12px;}
#comicSpec{margin-bottom:20px;}
#comicSpec p {
margin: 4px 8px;
display: inline-block;
vertical-align: top;
line-height: 1.25;
color: rgba(0,0,0,.54);
min-width: calc(20% - 20px);
font-size:12px;
}

section#novelize{margin-top:200px;margin-bottom:100px;}
section#novelize h2{width:384px;height:100px;font-size:0; position:absolute; left:0; right:0;top:-102px; margin:0 auto; background:URL("../../_img/h2_novelize.png") center top no-repeat;}

/* フッター */
footer {
	width: 100%;
    background:#000;
    margin-top:50px;
}
footer p.copy {
    padding:10px 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    color:#FFF;
}
section#footer_banner ul {
margin: 30px auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
section#footer_banner ul li {
margin: 0 1vw;
}
footer #snsBtn{
  font-size: 0;
  padding: 20px 0;
    text-align:center;
}
footer #snsBtn li{
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
footer #snsBtn li + li {
  margin-left: 15px
}
footer #snsBtn img {
  width: 50px;
  height: auto
}

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}