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

/* =======================================
	SP Elements
======================================= */

/*CONT Default*/

body{
	width:100%;
    margin:0;
    padding:0;
	font-size:1em;
    background:#FFF url("../img/bg.gif");
}
#op_win {
    background:#FFF url("../img/bg.gif");
}

img{
    image-rendering: -webkit-optimize-contrast;
}

::-webkit-full-page-media, :future, :root
 img {
    image-rendering: auto;
}

.box{
    margin:0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%); 
}

div.wrap{
    width:90%;
    margin:0 auto;
    padding:0em 0 1em;
}

.cover{
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    left:0;
    top:0;
}

.cover img{
    width:100%;
    height:100%;
}

section{
    padding:3em 0 0;
}

section,footer{
    position:relative;
}

section h2 img{
    width:100%;
    image-rendering: -webkit-optimize-contrast;
}

p.caution{
}

.caution::before{
	content: "※ ";
}

.ora{
	color:#F9A159;
}
span.newIcon{
    display:block;
    width:24%;
    position:absolute;
    right:-0.5em;
    top:-0.3em;
}

span.newIcon::before {
  content:"";
  display: block;
  padding-bottom: 100%;
}

span.newIcon.news{
    background:url("../img/new_pin.png") no-repeat;  
    background-size:contain; 
}

span.newIcon.books{
    background:url("../img/new_pur.png") no-repeat;
    background-size:contain; 
    width:18%;
    left:2em;
    top:-1em;
}

span.newIcon.novels{
    background:url("../img/new_pin.png") no-repeat;
    background-size:contain; 
    width:18%;
    left:2em;
    top:-1em;
}

h1,h2{
    /*height:2em;*/
    font-size:2.7em;
    color:#375270;
    text-align:center;
    font-family: 'Share Tech Mono', monospace;
}
/**/
div#loadlogo{
    width:100%;
    height:85vh;
    background: url("../img/logo_2nd.png") no-repeat center 50%;
    background-size:80%;
    position:absolute;
    left:0;
    top:0;
    animation-fill-mode:forwards;
    animation-delay: 5s;
}

section#top{
    width:100%;
    position:relative;
    opacity:0;
    padding:0; animation-fill-mode:forwards;
    animation-name:fadeIn; 
    animation-delay: 5s;
}

div.mainvidu{
  /*background: url("../img/sp_main.png") no-repeat center top;
    background-size:100% auto;*/
    width: 100vw;
    height:auto;
    position:relative;
    margin-bottom:1.5em;
    border:solid 1px #FFF;
}

div.mainvidu > div.ill01{
    width:100%;
    background: url("../img/sp_main1_v3.png") no-repeat center top;
    background-size:100% auto;
    opacity:0;
    transition:1.8s;
}

div.mainvidu > div.ill02{
    width:100%;
    background: url("../img/sp_main2_v3.png") no-repeat center top;
    background-size:100% auto;
    position:absolute;
    left:0;top:0;
    opacity:1;
    transition:1.8s;
}

div.mainvidu.another > div.ill01{
    opacity:1;
}

div.mainvidu.another > div.ill02{
    opacity:0;
}

div.mainvidu > div.ill01::before,
div.mainvidu > div.ill02::before{
  content:"";
  display: block;
  /*padding-bottom: 136%;*/
  padding-bottom: 145%;  
}

div.menu_head{
    width:100%;
    height:35px;
    background:#EF0072 url("../img/btn_menu.png") no-repeat center;
    background-size:contain;
    /*position:absolute;
    left:0;
    bottom:-35px;*/
    z-index:888;
    display:block!important;
}

div.menu_head.scl{
    position:fixed;
    left:0;
    top:0;
    z-index:888;
}


div#menu_btn{
    width:57%;
    position:absolute;
    left:20%;
    top:82%;
    margin:0 auto;
    transition:0.2s;
}

div#menu_btn img{
    width:100%;
}

div#menu_btn:hover{
    opacity:0.5;
}

div.mainvidu a.twi{
    display:inline-block;
    position:absolute;
    top:17%;
    left:2%;
    width:15%;
    filter: drop-shadow(1px 1px 2px #066DC1);
}

div.mainvidu a.twi img{
    width:100%;
}

div.mainvidu .vChange{
    width:14%;
    display:block;
    position:absolute;
    right:2%;
    top:17%;
    z-index:10;
}

div#main div.leftArea{
    display:none;
}

div#main div.rightArea{
    display:none;
}

div#main div.rightArea ul.minivideoArea{
    display:none;
}

div#main div.rightArea div.top_copy{
    display:none;
}

a.bnr1st{
    display:inline-block;
    width:16%;
    /**/
    position:absolute;
    left:0.5em;
    top:0.2em;
    z-index:99;
}

a.bnr1st img{
    width:100%;
}

div#main div.rightArea ul.minivideoArea img,
div#main div.rightArea div.top_copy img,
div#main div.leftArea a.bnr1st img{
    width:100%;
}

div#main div.leftArea img.top_logo{
    width:100%;
    position:absolute;
    left:0;
    bottom:28%;
    /*animation-fill-mode:forwards;
    animation-delay: 0.5s;
    animation-name:fadeIn; */
}


ul.bnrArea{
    /*border:solid 1px #000;*/
    width:60%;
    margin:1.5em 0 1.5em 2em;
    text-align:left;
    display:none;
}

ul.bnrArea li{
    margin:0 0 0.5em;
}

ul.bnrArea li a img{
    width:100%;
}

/**/

div.videoWrap{
    width:100%;
    margin:0em auto 2.5em;
    position:relative;
}

div.videoArea{
    width:100%;
    margin:1em auto 0.5em;
    position:relative;
}

div.videoArea img{
    width:100%;
    height:auto;
}

.iframe-wrapper {
position: relative;
  width: 100%;
	margin:0px auto;
    background: rgba(255,255,255,0.8);
  padding: calc(360 / 640 * 100%) 0 0;
   /* padding: calc(352 / 640 * 100%) 0 0;*/
}

.iframe-wrapper iframe{
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
  	height: 100%;
}



/**/
section#cont1{
    background:#F5EDD5;
    padding-bottom:1.5em;
}

section#cont1 dl.newsIndex{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    align-items: stretch;
    position:relative;
    margin:1.5em auto 0;
}

section#cont1 dl.newsIndex div{
    width:46%;
    background:rgba(255,255,255,0.6);
    margin:0 0 1.5em;
}

section#cont1 dl.newsIndex div:last-child{
    background:#EF0072;
}

section#cont1 dl.newsIndex div a{
    display:block;
    height:100%;
    padding:1em 1em 1.5em;
    text-align:left;
    position:relative;
    text-decoration:none;
    color:#000;
}

section#cont1 dl.newsIndex div dt{
    color:#375270;
    font-size:0.8em;
    margin-bottom:0.8em;
}

section#cont1 dl.newsIndex div dd{
    font-size:0.9em;
    line-height:1.6em;
    width:100%;
    overflow: hidden;
}

section#cont1 dl.newsIndex div dd p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

section#cont1 div.newsMore{
    width:46%;
    background:#EF0072;
    padding:1.2em 0;
    text-align:center;
}

section#cont1 div.newsMore > a{
    display:inline-block;
    margin:0 auto;
    width:50%;
}

section#cont1 div.newsMore a img{
    width:100%;
}

/**/

section#cont2{
}
section#cont2 h2{
    margin:0.5em auto;
}
section#cont2 h2 picture{
user-select: none;
    }

section#cont2 h2 picture img{
    width:100%;
    height:auto;
}

section#cont2 h3{
    font-size:1.5em;
    line-height:1.5em;
    font-weight:bold;
    text-align:center;
    margin:0 0 0.5em;
}

section#cont2 h3 span{
    display:inline-block;
    font-size:100%;
}

section#cont2 p{
    font-size:0.9em;
    line-height:1.8em;
    letter-spacing:0.05em;
    font-feature-settings: "palt" 1;
    text-align: justify;
    background:rgba(255,255,255,0.65);
    margin-bottom:2.5em;
    padding:0.5em 0;
}


section#cont2 ul#storyList{
    width:100%;
    height:100px;
    margin:1.5em auto 0;
    text-align: left;
    position:relative;
    z-index: 666;
}

section#cont2 ul#storyList li{
    width:40px;
    height:100px;
    margin:0 0;
    vertical-align: middle;
    position:relative;
    display:inline-block;
}

section#cont2 ul#storyList li:active{
}

li#str00{
    background:url("../img/story/sp_li_intro-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}

li#str01{
    background:url("../img/story/li_01-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}

li#str02{
    background:url("../img/story/li_02-.png") no-repeat;
    background-size:100% auto;
    display:block; 
}
li#str03{
    background:url("../img/story/li_03-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str04{
    background:url("../img/story/li_04-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str05{
    background:url("../img/story/li_05-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str06{
    background:url("../img/story/li_06-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str07{
    background:url("../img/story/li_07-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str08{
    background:url("../img/story/li_08-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str09{
    background:url("../img/story/li_09-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str10{
    background:url("../img/story/li_10-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str11{
    background:url("../img/story/li_11-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}
li#str12{
    background:url("../img/story/li_12-.png") no-repeat;
    background-size:100% auto; 
    display:block;
}

section#cont2 ul#storyList li:last-child{
}

section#cont2 ul#storyList li img{
    width:100%;
    opacity:0;
}

section#cont2 ul#storyList li.activeon img{
    opacity: 1;
}

section#cont2 ul#storyList li img.li_on{
    width:12px;
    position:absolute;
    top:48px;
    left:50%;
    margin-left:-6px;
    opacity:0;
    transition:1s;
}

section#cont2 ul#storyList li.activeon img.li_on{
    opacity:1;
}

section#cont2 ul#storyList li.pre{
    opacity:0.2;
    cursor:default;
}

section#cont2 ul#storyList li.pre img{
    opacity:1;
}

section#cont2 div.storyBox{
    display:none;
}

section#cont2 div.storyBox.shw{
    display:block;
}

section#cont2 .storyTitle{
    text-align: center;
    margin:-1.5em auto 1em;
}

section#cont2 h4{
    display:block;
    font-size:1.4em;
    margin:0 auto;
}

section#cont2 h4 span{
    color:#EF0072;
    font-size:1.7em;
    font-weight:bold;
}

section#cont2 h3{
    display:block;
    text-align: center;
}

div.storyStill{
    text-align: left;
    background:#FFF;
}

div.storyStill div.still{
    width:100%;
    padding: calc(360 / 640 * 100%) 0 0;
    position:relative;
    margin:0 0 0.3em;
}

div.storyStill div.still img{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    display: none;
    z-index:5;
}

div.storyStill div.still img:first-child{
    display: block;
}


div.storyStill ul{
    width:100%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    align-items: stretch;
}

div.storyStill ul li{
    opacity:0.5;
    cursor:pointer;
    transition:1s;
    width:33.3%;
    display:block;
}

div.storyStill ul li img{
    width:100%;
    display:block;
}

div.storyStill ul li.activeon,
div.storyStill ul li:hover{
    opacity:1;
}



/**/
section#cont3{
    
}

section#cont3 dl{
    width:100%;
    margin:1em 0 3em;
    position:relative;
}

section#cont3 dl.staffList div{
    width:100%;
    background:#375270;
    margin:0 0 1em;
    padding:1.2em 0;
    color:#FFF;
    vertical-align: middle;
}

section#cont3 dl.castList div{
    width:100%;
    background:#FFFFFF;
    border:solid 1px #375270;
    margin:0 0 1em;
    padding:1.2em 0;
    color:#375270;
    vertical-align: middle;
}

section#cont3 dl div.w100{
    width:100%;
}

section#cont3 dl div dt{
    display:inline-block;
    font-size:0.7em;
    line-height:2.5em;
    font-weight:200;
    vertical-align: top;
}

section#cont3 dl.castList div dt{
    display:block;
    font-size:0.8em;
    line-height:2em;
    font-weight:normal;
    vertical-align: top;
}

section#cont3 dl div dd{
    display:inline-block;
    font-size:1em;
    line-height:1.6em;
    vertical-align: top;
}

section#cont3 dl.castList div dd{
    font-weight:bold;
}

section#cont3 dl div dd span{
    font-size:0.7em;
    line-height:1.2em;
    font-weight:normal;
    display:inline-block;
    margin:0;
}

section#cont3 dd span.com_btn{
    display:inline-block;
    font-size:0.6em;
    padding:0.3em 0.7em 0.2em;
    border-radius:8px;
    margin:0 0.8em 0.2em;
    vertical-align: middle;
    transition:0.3s;
    cursor:pointer;
}

section#cont3 dl.staffList dd span.com_btn{
    background:#FFF;
    color:#375270;
}

section#cont3 dl.castList dd span.com_btn{
    background:#375270;
    color:#FFF;
}

section#cont3 dl.castList div#message_btn{
    font-size:0.9em;
    background:#EF0072;
    color:#FFFF00;
    text-align:center;
    border:none;
}

section#cont3 dl.castList div#message_btn a{
    color:#FFF;
    text-decoration: none;
    line-height:1.6em;
}

section#cont3 dl.castList div#message_btn a img{
    height:1em;
    width:auto;
    margin:0.2em;
}

section#cont3 div.comArea{
    width:100vw;
    height:100vh;
    position:fixed;
    left:0;
    top:0;
    background:rgba(255,255,255,0.8);
    z-index:9999;
    display:none;
}

section#cont3 div.comBox{
    margin:0 auto;
    position: absolute;
    top: 45%;
    left: 50%;
    width:80%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%); 
    display:none;
}

section#cont3 div.comBox > div{
    width:100%;
    height:auto;
    position:relative;
    padding:1.5em 0 1.5em;
}

div.comBox.staCom > div{
    background:#375270;
    border:solid 1px #FFF;
    color:#FFF;
}

div.comBox.casCom > div{
    background:#FFF;
    border:solid 1px #375270;
    color:#375270;
}

section#cont3 div.comBox > div h3{
    width:86%;
    text-align:center;
    line-height:1.5em;
    margin:0em auto 1em;
}

section#cont3 div.comBox > div h3 span{
    font-weight:normal;
    font-size:0.7em;
    margin-right:0.5em;
    display:block;
}

section#cont3 div.comBox > div p{
    width:80%;
    max-height:16.5em;
    margin:0 auto;
    padding:1.5em;
    font-size:0.7em;
    line-height:1.5em;
    font-weight:400;
    text-align:left;
    overflow:auto;
}

section#cont3 div.comBox.staCom > div p{
    border-top:solid 1px #FFF;
    border-bottom:solid 1px #FFF;
}

section#cont3 div.comBox.casCom > div p{
    border-top:solid 1px #375270;
    border-bottom:solid 1px #375270;
}


section#cont3 div.comBox.com02 > div p{
    height:23em;
    text-align:center;
}


section#cont3 div.comBox.com02 > div p img{
    width:auto;
    height:100%;
    margin:0 auto;
}



section#cont3 div.comBox > div > img:hover{
    opacity:0.5;
}

section#cont3 div.comBox > div img.yaji_pre{
    position:absolute;
    left:-34px;
    top:45%;
    cursor:pointer;
    transition:0.3s;
}

section#cont3 div.comBox > div img.yaji_fw{
    position:absolute;
    right:-34px;
    top:45%;
    cursor:pointer;
    transition:0.3s;
}

section#cont3 div.comBox > div img.comClose{
    position:absolute;
    right:5px;
    bottom:-25px;
    cursor:pointer;
    transition:0.3s;
}

/**/

section#cont3-2{
    background:#FFF;
    padding:4em 0;
    color:#375270;
}

section#cont3-2 div.tv{
    margin-bottom:3em;
}
section#cont3-2 div.stream{
    margin-bottom:0;
}

section#cont3-2 div.stream h3>span.pin:first-child{
    display:inline-block;
}

section#cont3-2 h2{
    width:100%;
    background:#375270;
    text-align: center;
    padding:0.2em;
    margin:1em 0;
    font-size:1.6em;
    letter-spacing:0.1em;
    color:#FFF;
    font-family: 'Share Tech Mono', monospace;
}

section#cont3-2 h3{
    font-size:1.4em;
    line-height:1.2em;
    font-weight:bold;
    text-align:center;
    margin:1em 0;
}

section#cont3-2 h3 > span.pin{
    display:block;
}

section#cont3-2 h3#stream_h3,
section#cont3-2 h3#stream_h4
{
    margin:2em 0 0.5em;
}

section#cont3-2 p{
    text-align:left;
    font-size:0.9em;
    padding:0.5em;
}

section#cont3-2 ul {
    border-top:solid 1px #375270; 
    margin-bottom:0.5em;
}

section#cont3-2 ul li{
    padding:0.8em 0;
    border-bottom:solid 1px #375270;
    margin:0 auto;
}


section#cont3-2 h5{
    font-size:1.1em;
    font-weight:bold;
    text-align:center;
    margin-botton:1em;
}

section#cont3-2 h5 span.icon{
    width:16px;
    height:16px;
    margin:0;
    display:inline-block;
    background: url("../img/icon_blank.png")no-repeat bottom;
    background-size:cover;
    opacity:0.4;
}

section#cont3-2 h5 a:link{
    text-decoration: none;
}

section#cont3-2 p{
    font-size:1em;
    font-weight:bold;
    text-align: center;
}

section#cont3-2 p.date{
    font-size:1.1em;
    margin-bottom:0;
    padding:0.5em 0 0.2em;
}

section#cont3-2 p.time{
    margin:0 auto;
    padding:0;
}

section#cont3-2 p.time span{
    display:block;
    font-size:0.9em;
    width:14em;
    text-align:left;
    margin:0 auto;
}

section#cont3-2 p.time span.repeat{
    width:100%;
    font-size:0.9em;
    margin:1.2em auto 0.3em;
    font-weight:bold;
    text-align: center;
}

section#cont3-2 p.time span#dokusen{
    font-size:1.2em;
    font-weight:bold;
    text-align: center;
    margin:0.8em auto;
}

section#cont3-2 p.caution{
    text-align:center;
    font-weight:normal;
    font-size:0.7em;
    margin:0 auto 0.2em;
    display:block;
}

/**/
section#cont4{
    padding-bottom:4.5em;
}

section#cont4 ul.charaList{
    
    margin:2em auto;
   /* width:80%;
    margin:2em auto 1em;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    align-items: stretch;
    position:relative;*/
}

section#cont4 ul li{
    width:9%;
    transition:0.5s;
    cursor:pointer;
}

section#cont4 ul li:hover{
    opacity:0.5;
}

section#cont4 ul li img{
    width:80%;
    margin:0 10% 0 0;
}

section#cont4 div.charaWrap{
    position:relative;
    width:90%;
    margin:0 auto 0;
}

#chara02,#chara03,#chara04,#chara05,#chara06,#chara07,#chara08,#chara09,#chara10{
    display:none;
}

section#cont4 div.charaWrap img.yaji_pre{
    width:24px;
    position:absolute;
    left:-24px;
    top:25%;
    transition:0.2s;
}

section#cont4 div.charaWrap img.yaji_fw{
    width:24px;
    position:absolute;
    right:-24px;
    top:25%;
    transition:0.2s;
}

section#cont4 div.charaArea{
    /*align-items:center;*/
}

section#cont4 div.charaArea div{
    width:100%;
    margin:0 auto;
}

img#c01{
    width:89%;
    margin-right:-6%;
}
img#c02{
    width:59%;
}
img#c03{
    width:64%;
}
img#c04{
    width:53%;
}
img#c05{
    width:82%;
}
img#c06{
    width:76%;
}
img#c07{
    width:71%;
}
img#c08{
    width:59%;
}
img#c09{
    width:77%;
}
img#c10{
    width:71%;
}

section#cont4 div.charaArea div h3{
    color:#375270;
    text-align:center;
    font-size:1.1em;
    margin-top:2em;
    margin-bottom:0.5em;
    font-weight:600;
    
}

section#cont4 div.charaArea div h4{
    color:#375270;
    text-align:center;
    font-size:1em;
    font-weight:600;
    margin-bottom:1.2em;
}

section#cont4 div.charaArea div p{
    color:#375270;
    background:rgba(255,255,255,0.65);
    padding:1em;
    font-size:0.9em;
    text-align: justify;
    line-height:1.5em;
    margin:0;
    letter-spacing:0.05em;
    font-feature-settings: "palt" 1;
}

/**/
section#cont4-2 {
    padding-bottom:2em;
}


section#cont4-2 div.wrap div.movieArea{
    margin-top:1.5em;
}

section#cont4-2 div.wrap div.movieArea div{
    width:100%;
}

section#cont4-2 div.wrap div.movieArea div.videoWrap div.videoArea{
    padding:3px;
    background:#FFF;
    border:solid 1px #375270;
}

section#cont4-2 div.wrap div.movieArea div img{
    display:block;
}

section#cont4-2 div.wrap div.movieArea div img:hover{
    opacity:0.5;
}

section#cont4-2 div.wrap div.movieArea div p{
    font-size:1em;
    color:#375270;
    font-weight:bold;
    margin:0.5em auto 1em;
}

/**/
section#cont4-3{
    padding-bottom:1.5em;
}

section#cont4-3 div.musicInner{
}

section#cont4-3 h2{
    width:100%;
    background:#375270;
    text-align: center;
    padding:0.2em;
    margin:1em 0;
    font-size:1.6em;
    letter-spacing:0.1em;
    color:#FFF;
    font-family: 'Share Tech Mono', monospace;
}

section#cont4-3 h3{
    font-size:1.6em;
    line-height:1.4em;
    font-weight:bold;
    text-align:center;
    margin:1em 0 0;
}

section#cont4-3 h3 span{
    display:block;
    font-size:0.6em;
    line-height:1.2em;
    text-align: center;
    margin-bottom:0.8em;
}

section#cont4-3 h4{
    font-size:1.7em;
    line-height:1.4em;
    font-weight:bold;
    text-align:left;
    display:inline-block;
}

section#cont4-3 div#musicEd h4{
    margin-bottom:0.5em;
    text-align: center;
}

section#cont4-3 h4 span{
    font-size:0.7em;
    text-align: left;
}

section#cont4-3 div#musicEd h4 span{
    line-height:1.2em;
}
section#cont4-3 div#musicEd h4 span.sp_com{
    display:none;
}

section#cont4-3 h5{
    font-size:1em;
    line-height:1.5em;
    font-weight:bold;
    text-align:center;
    display:block;
    margin-bottom:1.8em;
}

section#cont4-3 h5 > span{
    display:none;
}

section#cont4-3 p{
    text-align:left;
    font-size:0.9em;
    line-height:1.5em;
    margin-bottom:1.5em;
    background:rgba(255,255,255,0.8);
    padding:0.5em;
}

section#cont4-3 p.credit{
    text-align: center;
}

section#cont4-3 p.caution{
    font-size:0.7em;
    margin:-1.5em auto 0;
    text-indent:0;
    text-align: left;
}


/**/
section#cont5{
    background:#FFF;
}

section#cont5 h3{
    width:100%;
    background:#375270;
    text-align: center;
    padding:0.2em;
    margin:1em 0 1.8em;
    font-size:1.6em;
    letter-spacing:0.1em;
    color:#FFF;
    font-family: 'Share Tech Mono', monospace;
}

section#cont5 h3 img{
    height:2em;
}

div.comicsWrap,
div.novelsWrap{
    position:relative;
    margin:0 auto 3.5em;
    width:90%;
}

div.comicsWrap div,
div.novelsWrap div{
}

div.latest{
    width:100%;
    margin:0 auto 1em;
    position:relative;
}

div.latest a{
    width:55%;
    display:block;
    margin:0 auto;
}

div.latest a{
    text-decoration: none;
}

div.latest a img{
    width:100%;
}

div.latest div.obi{
    background:#9F119E;
    padding:0.5em 0 0.6em;
    margin-top:0.5em;
}

div.novelsWrap div.latest div.obi{
    background:#EF0072;
    padding:0.5em 0 0.6em;
}

div.latest div.obi p{
    color:#FFF;
    font-size:0.8em;
}

div.latest div.obi p span{
    color:#FFFF00;
    font-weight:bold;
    margin-right:1em;
    font-size:1.1em;
    letter-spacing:0.1em;
}

div.published{
    width:100%;
    text-align: left;
}

div.published h5{
    margin:0em 0 0.8em;
    line-height:1.5em;
    text-align:left;
    font-size:1.1em;
}

div.published h5 span{
    font-size:0.7em;
    font-weight:normal;
    color:#EF0072;
    margin:0 0 0 1em;
}

div.published h6{
    margin:1.5em 0 0.8em;
    line-height:1.5em;
    text-align:left;
    font-size:1em;
}

div.published p{
    display:inline-block;
    font-size:0.9em;
    margin-right:1.5em;
}

div.published ul{
    margin:1.5em 0 0;
}

div.published ul li a{
    width:78%;
    margin:0 0 0  10%;
    display:block;
}

div.published ul li a > img{
    width:100%
}

div.turn{
    padding:0.2em 0 0.3em;
    margin-bottom:1em;
    position:relative;
}

div.turn p{
    width:100%;
    font-size:0.9em;
    letter-spacing: 0.2em;
    text-align: center;
    color:#000;
}

div.turn p::after{
    content:" ";
    width:14%;
    height:64%;
    background: url("../img/book_yaji.png") no-repeat center;
    background-size:contain;
    position:absolute;
    right:0.5em;
    top:18%;
}

/* div.turn img{
   width:auto !important;
    height:60%;
    position:absolute;
    right:0.5em;
    top:20%;
}*/

div.published ul li p{
    font-size:0.7em;
    letter-spacing:0;
}

div.turn p span{
    font-size:80%;
}

div.published ul li div.turn img{
    right:0.2em;
}

div.published a.btn_more{
    display:inline-block;
    width:100%;
    text-align: center;
    font-size:0.9em;
    letter-spacing:0.1em;
    padding:1em 0;
    background:#EF0072;
    color:#FFF;
    text-decoration: none;
    margin:1em auto;
}

div.published a.btn_more > span{
    font-size:1em;
    color:#FFFF00;
    font-weight:bold;
    margin-left:0.2em;
}

/**/

footer{
    position:relative;
    background: #A8C4D0;
    padding:0.3em 0;
    text-align:center;
    width:100%;
}

footer copyright{
    color:#375270;
    font-size:0.7em;
}

ul.chara_logo{
    width:96%;
    text-align:center;
    margin:0 auto 3em;
    position:relative;
    display:block;
}

ul.support
{
    width:80%;
    text-align:center;
    margin:0 auto 5em;
    position:relative;
    display:block;
}

ul.support li{
    display:block;
    font-size:0.9em;
    color:#AFA9A1;
    padding:0;
    margin-bottom:1.5em;
}

ul.support li:last-child{
    margin-left:-2em;
}

ul.support li img{
    vertical-align: baseline;
    margin:0 0.5em 0;
}

ul.support li img#scp{
    width:12%;
    margin-bottom:-3px;
    margin-left:1.5em;
}

ul.support li img#tfc{
    width:30%;
    margin-bottom:-3px;
}

ul.support li img#adm{
    width:40%;
    margin-bottom:-3px;
}


div#btn_top{
    width:34%;
    position:fixed;
    background:url("../img/b_top.png") no-repeat center top;
    background-size:100% auto;
    right:0.5em;
    bottom:0.2em;
    display:none;
    z-index: 9999;
}

div#btn_top img{
    width:100%;
}

footer div.edge{
    z-index:999;
}

nav{
    width:100vw;
    height:100vh;
    background:#FFF url("../img/bg.gif");
    position:fixed;
    left:0;
    top:0;
    z-index:889;
    display:none;
}

nav div.box{
    width:70%;
    margin:-12vh auto 0;
    padding-top:80px;
    background: url("../img/logo_2nd.png") no-repeat center top;
    background-size:86% auto;
}

nav div.box ul li{
    font-size:1.4em;
    margin-bottom:0.5em;
    font-family: 'Share Tech Mono', monospace;
}

nav div.box ul li a{
    display:inline-block;
    text-decoration: none;
    color:#375270;
}

ul.top_navi li a.twi:link,
ul.top_navi li a.twi:visited{
    color:#1DA1F2;
    vertical-align: middle;
}

ul.top_navi li a.twi img{
    height:1em;
    margin:-0.2em 0.1em 0;
    vertical-align: middle;
}

nav div.sp_cls{
    width:25%;
    position:absolute;
    right:1em;
    bottom:1.5em;
}

nav div.nihiki{
    width:36%;
    position:absolute;
    left:1em;
    bottom:1em;
}


nav div.sp_cls img,
nav div.nihiki img{
    width:100%;
}

div.en p{
    letter-spacing:0.05em;
    font-size:0.95em;
}
div.ja p{
}

/*modal*/

div.modal-wrapper{
	width:96%;
	height:auto;
	position:absolute;
	left:2%;
}

/* slider actions */
.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url('../img/controls_p.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 1;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    background-position: 0 0;
    left: -5px;
    z-index: 20;
}
.lSAction > .lSNext {
    background-position: -32px 0;
    right: -5px;
    z-index: 20;
}
.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}

section#cont2 .lSPrev{
    display:block;
    top:20px;
    height:90px;
    width:38px;
    background:#FFF url("../img/yaji_pre.png") no-repeat;
    background-position:center; 
    background-size:18px auto;
    z-index: 667;
}

section#cont2 .lSNext{
    display:block;
    top:20px;
    height:90px;
    width:30px;
    background:#FFF url("../img/yaji_fw.png") no-repeat;
    background-position:center ; 
    background-size:18px auto;
    z-index: 667;
}

section#cont2 .lightSlider{
    left:-86px;
    height:100px;
}

.spdn{
	display:none;
}

.pcdn{
	display:block;
}

br.pcdn{
	display:inline-block;
}