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

/* =======================================
	PC Elements
======================================= */

/*CONT Default*/

body{
    background:#FFF url("../img/bg.gif");
    position:relative;
}

#op_win {
    background:#FFF url("../img/bg.gif");
}

div.wrap{
    width:75%;
    max-width:1100px;
    margin:0 0 0 20%;
    padding:1.5em 0 1em;
    transition:1s;
    /*border:solid 1px #000;*/
}

@media screen and (max-width: 900px) {
    div.wrap{
     margin:0 0 0 10%;  
    }
}


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

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

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

section,footer{
    position:relative;
    min-width:900px;
}

section a:hover,
body a:hover{
    opacity:0.6;
    transition:0.5s;
}

section{
    padding:3em 0 2em;
}

p.caution{
    margin:0.8em auto;
}

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

span.newIcon{
    display:block;
    width:12%;
    position:absolute;
    right:-0.8em;
    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:-0.8em;
    top:-0.5em;
}

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

h1,h2{
    /*height:2em;*/
    font-size:2.7em;
    color:#375270;
    text-align:left;
    font-family: 'Share Tech Mono', monospace;
}

h1 img,h2 img{
    height:100%;
    image-rendering: -webkit-optimize-contrast;
}

@media screen and (max-width: 1200px) {
    div.wave{
    /*top:-12px;*/
}
}

.bg_yel{
   fill:#f5f1c2;
}

.bg_cre{
   fill:#FFFBD5; 
}

.bg_wh{
   fill:#FFF; 
}


/**/
div#loadlogo{
    width:100%;
    height:100vh;
    background:url("../img/logo_2nd.png") no-repeat center 45%;
    background-size:28%;
    position:absolute;
    left:0;
    top:0;
    animation-fill-mode:forwards;
    animation-delay: 5s;
}

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

div.mainvidu{
  position: relative;
  /*background: url("../img/main.jpg") no-repeat center top;
    background: url("../img/main2sky.jpg") no-repeat center top;
    background-size:contain;*/
  width: 65vw;
  margin-left:22%;
    /*animation-delay: 3.2s;*/
    animation-duration: 1.7s;
}

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

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

div.main2chara{
    width:100%;
    height:100%;
    background: url("../img/main2chara2.png") no-repeat center top;
    background-size:contain;
    position:absolute;
    left:0;
    top:0;
    opacity:1;
}

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: 103%;  
}

div#main{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
    position:fixed;
    left:0;
    top:0;
}

div#main > div{
    height:100vh;
    /*border:solid 1px #000;*/
    position:relative;
}

div#main div.leftArea{
    width:30%;
    /*min-height:650px;*/
    position:relative;
}

div.leftArea > .vChange{
    width:22%;
    position:absolute;
    right:15%;
    top:1.5em;
    filter: drop-shadow(3px 3px 2px #000);
    cursor:pointer;
    transition:0.3s;
}

div.leftArea > .vChange:hover{
    transform: scale(1.2, 1.2);
}

div.leftArea > .vChange:active{
    transform: rotate(200deg);
    filter: none;
}

div#main div.rightArea{
    width:18%;
}

div#main div.rightArea ul.minivideoArea{
    width:90%;
    margin:1.5em 0 0;
}

div#main div.rightArea ul.minivideoArea img{
    transition:1s;
    cursor:pointer;
}

div#main div.rightArea ul.minivideoArea img:hover{
    opacity:0.5;
}

div#main div.rightArea div.top_copy{
    width:60%;
    position:absolute;
    right:3%;
    top:20%;
    /*animation-delay: 3.4s;*/
}

div#main div.leftArea a.bnr1st{
    display:inline-block;
    width:60%;
    margin:0 20% 0 0 ;
    /**/
    position:absolute;
    left:10%;
    bottom:5%;
    /*animation-delay: 4.4s;*/
    animation-delay: 1s;
}

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:23%;
    /*animation-delay: 3.2s;*/
    /*animation-fill-mode:forwards;
    animation-delay: 0.5s;
    animation-name:fadeIn; */
}

ul.top_navi{
    /*border:solid 1px #000;*/
    width:55%;
    margin:1.5em 1.5em 2em;
    text-align:left;
    font-size:1.4em;
    font-family: 'Share Tech Mono', monospace;
    /*animation-delay: 4.4s;*/
    animation-delay: 1s;
}

ul.top_navi li{
    margin-bottom:0.2em;
}

nav ul.top_navi li.on{
    margin-bottom:0.2em;
}

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;
}

ul.top_navi li a:link{
    text-decoration: none;
    color:#375270;
  z-index:1;
    display:inline-block;
    padding:0.3em 0;
    position:relative;
    transition:0.8s;
}

ul.top_navi li a:hover,
ul.top_navi li a.twi:hover{
    color:#EF0072;
    opacity:1;
}

ul.top_navi li a:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #EF0072;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
ul.top_navi li:hover a:after{
  width: 100%;/*hover時に表示*/
}



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%;
}

section#top div.wave{
    position:absolute;
    left:0;
    bottom:-2.5em;
}


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

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 1em;
}

section#cont1 dl.newsIndex div{
    width:31%;
    background:rgba(255,255,255,0.6);
}

section#cont1 dl.newsIndex div a{
    display:block;
    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:100%;
    background:#EF0072;
    padding:0.3em 0;
    text-align:right;
}

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

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

/*STORY*/

section#cont2{
}

section#cont2 h2{
    margin:0 auto 0.5em;
    position:relative;
}

section#cont2 h2 picture{
user-select: none;
    }
section#cont2 h2 picture img{
    width:100%;
    height:auto;
}

section#cont2 h2 span{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(255,255,255,0);
}

section#cont2 h3{
    font-size:1.8em;
    line-height:1.4em;
    font-weight:bold;
    text-align:left;
    margin:1em 0 0;
}

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:1.5em;
    padding:0.5em 0;
}

section#cont2 ul#storyList{
    width:100%;
    margin:1.5em auto 0;
    text-align: left;
}

section#cont2 ul#storyList li{
    width:5.4%;
    margin:0 0.6% 0;
    display:inline-block;
    vertical-align: middle;
    position:relative;
    cursor:pointer;
    transition:1s;
}

section#cont2 ul#storyList li:first-child{
    width:14%;
    margin:0 1% 0 0;
    background:url("../img/story/li_intro-.png") no-repeat;
    background-size:100% auto; 
}

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

section#cont2 ul#storyList li:last-child{
    margin:0 0 0 0.6%;
}

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

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

section#cont2 ul#storyList li:hover{
    opacity:0.5;
}

section#cont2 ul#storyList li img.li_on{
    width:15px;
    position:absolute;
    bottom:-10px;
    left:50%;
    margin-left:-7.5px;
    opacity:0;
    transition:1s;
}

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

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

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

section#cont2 img.yaji_fw,
section#cont2 img.yaji_pre{
    display:none;
}

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

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

section#cont2 .storyTitle{
    text-align: left;
    margin-bottom:1em;
}

section#cont2 h4{
    display:inline-block;
    font-size:1.4em;
    margin-right:1em;
}

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

section#cont2 h3{
    display:inline-block;
}

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

div.storyStill div.still{
    width:85%;
    display:inline-block;
    position:relative;
}

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

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

div.storyStill ul{
    width:14.2%;
    margin-left:85.8%;
}

div.storyStill ul li{
    opacity:0.5;
    cursor:pointer;
    transition:1s;
    margin:0;
    padding:0;
    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 dl{
    width:100%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    margin:1em 0 3em;
	justify-content: space-between;
    position:relative;
}

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

section#cont3 dl.castList div{
    width:49%;
    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:inline-block;
    font-size:0.8em;
    line-height:2em;
    font-weight:600;
    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 dt{
    font-weight:normal;
}

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.2em 0.7em;
    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 dd span.com_btn:hover{
    opacity:0.5;
}

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;
    display:inline-block;
    height:100%;
}

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%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%); 
    display:none;
}

section#cont3 div.comBox > div{
    width:100%;
    height:auto;
    min-height:55vh;
    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:left;
    margin:1em auto;
}

section#cont3 div.comBox.com01 > div h3{
    margin-top:10%;
}
section#cont3 div.comBox.com03 > div h3{
    margin-top:5%;
}
section#cont3 div.comBox.com04 > div h3{
    margin-top:15%;
}
section#cont3 div.comBox.com05 > div h3{
    margin-top:7%;
}
section#cont3 div.comBox.com06 > div h3{
    margin-top:7%;
}
section#cont3 div.comBox.com07 > div h3{
    margin-top:10%;
}
section#cont3 div.comBox.com08 > div h3{
    margin-top:7%;
}
section#cont3 div.comBox.com09 > div h3{
    margin-top:6%;
}
section#cont3 div.comBox.com10 > div h3{
    margin-top:7%;
}
section#cont3 div.comBox.com11 > div h3{
    margin-top:8%;
}
section#cont3 div.comBox.com12 > div h3{
    margin-top:7%;
}
section#cont3 div.comBox.com13 > div h3{
    margin-top:10%;
}
section#cont3 div.comBox.com14 > div h3{
    margin-top:10%;
}

/*section#cont3 div.comBox.com02 > div{
    width:500px;
}*/

section#cont3 div.comBox.com02 > div p img{
    width:auto;
    height:60vh;
    margin:0 2.5em 0 0;
}

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

section#cont3 div.comBox > div p{
    width:80%;
    margin:0 auto;
    padding:1.5em;
    font-size:0.8em;
    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{
    overflow:visible;
}


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

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

section#cont3 div.comBox > div img.yaji_fw{
    position:absolute;
    right:-40px;
    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;
    color:#375270;
}

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

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

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

section#cont3-2 h3 span{
    display:inline-block;
}

section#cont3-2 h3 > span.pin.comma::after{
	content: "、";
}

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

section#cont3-2 ul{
    /*max-width:900px;*/
    margin:0 auto 0.5em;
    border-top:solid 1px #375270;
}


section#cont3-2 ul li{
    padding:0.8em 0;
    border-bottom:solid 1px #375270;
    margin:0 auto;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}



section#cont3-2 h5{
    width:24%;
    font-size:1em;
    font-weight:bold;
    vertical-align: middle;
    text-align:left;
    margin-left:0.5em;
}

section#cont3-2 h5 span{
    display:inline-block;
}

section#cont3-2 h5 span.icon{
    width:16px;
    height:16px;
    margin:0;
    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 h5 a:hover{
    opacity:1;
}

section#cont3-2 h5 a:hover span.icon{
    opacity:0.1;
    transition:0.5s;
}

section#cont3-2 ul#stream_ul2 li h5,
section#cont3-2 ul#stream_ul3 li h5{
    width:auto;
}

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

section#cont3-2 p.date{
    width:43%;
    font-size:1em;
}

section#cont3-2 p.time{
    text-align: left;
    width:32%;
}

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

section#cont3-2 p.time span.repeat{
    font-size:0.8em;
    margin:1em 0 0.3em;
    font-weight:bold;
}

section#cont3-2 p.time span#dokusen{
    display:inline-block;
    font-size:1.1em;
    font-weight:bold;
}



section#cont3-2 p.caution{
    text-align:right;
    font-weight:normal;
    font-size:0.7em;
    /*max-width:900px;*/
    margin:0em auto 0.5em;
}



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

section#cont4 ul.charaList{
    /*width:70%;*/
    width:100%;
    margin:2em auto 1em;
    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:absolute;
    left:20%;
    top:8.2em;*/
}

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:100%;
}

section#cont4 div.charaWrap{
    position:relative;
    width:80%;
    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:-12px;
    top:40%;
    transition:0.2s;
    cursor:pointer;
}

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

section#cont4 div.charaWrap img.yaji_pre:hover,
section#cont4 div.charaWrap img.yaji_fw:hover{
    opacity:0.5;
}

section#cont4 div.charaArea{
    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: center;
    /*align-items:center;*/
}

section#cont4 div.charaArea div{
    width:46%;
    margin-top:1em;
}

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:left;
    font-size:1.3em;
    margin-top:5em;
    margin-bottom:0.5em;
    font-weight:600;
}

section#cont4 div.charaArea div h4{
    color:#375270;
    text-align:left;
    font-size:1.1em;
    font-weight:600;
    margin-bottom:2.5em;
}

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:1em 0 0;
    letter-spacing:0.05em;
    font-feature-settings: "palt" 1;
}

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

section#cont4-2 div.wrap div.movieArea{
   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: center;  
}

section#cont4-2 div.wrap div.movieArea div.videoWrap{
    width:46%;
    margin:1.5em 2% 0;
}

section#cont4-2 div.wrap div.movieArea div.videoWrap:first-child{
    width:60%;
    margin:1.5em 2%;
}

section#cont4-2 div.wrap div.movieArea div.videoWrap div.videoArea{
    width:100%;
    position:relative;
    padding:5px;
    background:#FFF;
    border:solid 1px #375270;
}

.iframe-wrapper {
position: relative;
  width: 98%;
	margin:5px 1%;
    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#cont4-2 div.wrap div.movieArea div img{
    width:100%;
    cursor:pointer;
    transition:0.5s;
}

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:2em;
}

section#cont4-3 div.musicInner{
    width:90%;
    margin:0 auto;
    text-align: left;
}

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.7em;
    line-height:1.4em;
    font-weight:bold;
    text-align:left;
    margin:1em 0 0 -0.3em;
    text-indent:0.2em;
}

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

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

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

section#cont4-3 h5{
    font-size:1em;
    font-weight:bold;
    text-align:left;
    display:inline-block;
    margin-bottom:1.5em;
}

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;
    width:90%;
}

section#cont4-3 p.caution{
    /*font-weight:bold;*/
    font-size:0.8em;
    margin:-1.5em auto 0;
    width:100%;
    text-indent:0;
}

/**/
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{
    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:flex-end;
    position:relative;
    margin:0 auto 3.5em;
}

div.comicsWrap div,
div.novelsWrap div{
}

div.latest{
    width:27%;
    position:relative;
    margin-left:1%;
}

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

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

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

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:68%;
    text-align: left;
}

div.published#novelsinfo,
div.published#comicinfo{
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

div.published#novelsinfo > div,
div.published#comicinfo > div{
    position:relative;
}

div.published h5{
    margin:0.5em 0 0.8em;
    text-align:left;
    font-size:1.2em;
}

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;
    text-align:left;
    font-size:1.1em;
}

div.published h6.drama{
    display:inline-block;
    margin-right:1.5em;
    margin-left:0;
}

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

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

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

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


div.published a.btn_more{
    display:inline-block;
    width:auto;
    position:absolute;
    right:-0.5em;
    top:0;
    font-size:0.9em;
    letter-spacing:0.1em;
    padding:0.5em 0.8em 0.5em 1em;
    background:#EF0072;
    color:#FFF;
    text-decoration: none;
    transition:0.2s;
}

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

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

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

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

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

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

/**/

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

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

nav{
    position:fixed;
    left:0;
    top:0;
    display:none;
    width:16.5%;
    transition:1s;
}

@media screen and (max-width: 900px) {
    nav{
    left:-50%;
    }
    
}

@media screen and (max-width: 1100px) {
    div.published a.btn_more{
    position:relative;
    right:0;
    margin:1em 0;
}
}


nav ul li a:link{
    text-decoration: none;
    color:#375270;
      z-index:1;
    display:inline-block;
    padding:0.3em 0;
    position:relative;
    transition:0.8s;
}

nav ul li a:hover{
    color:#EF0072;
    opacity:1;
}

nav ul li a:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #EF0072;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
nav ul li:hover a:after{
  width: 100%;/*hover時に表示*/
}

nav ul.top_navi li.on a{
    color:#EF0072;
}

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

div#btn_top:hover{
    opacity:0.5;
}

div#btn_top img{
    width:100%;
}

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

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



/* 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;
}


.storyBox .lSAction > .lSPrev {
    display:none;
}
.storyBox .lSAction > .lSNext {
    display:none;
}

.spdn{
	display:inline-block;
}

.pcdn{
	display:none;
}

.t10{
    margin-top:12px;
}