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

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

/*CONT Default*/

body{
    background:#FFF;
    position:relative;
}

div.wrapper{
    width:100vw;
    overflow-x:hidden;
}

div.wrapper::before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url("../img/sp_background.jpg") no-repeat;
    background-position:50% 100%;
    background-size:cover;
}

div.wrap{
    width:90vw;
    margin:0 auto;
    transition:1s;
    position:relative;
    /*border:solid 1px #000;*/
}

section{
    position:relative;
    max-width:auto;
}

section{
    padding:5em 0;
}

section:nth-child(even){
  background: rgba(255,255,255,0.7);
}

p.caution{
    margin:0.8em auto;
}

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

h2{
    /*height:2em;*/
    font-size:2em;
    letter-spacing:0.1em;
    display:inline-block;
    background: rgb(227,0,126);
    background: -moz-linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    background: linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3007e",endColorstr="#00a0df",GradientType=1); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align:center;
    font-family: "goudy-old-style", serif;
    margin:0 0.1em 0.8em 0;
}

/**/
section#top{
    width:100%;
    height:auto;
    position:relative;
    background:rgba(255,255,255,0.7);
    /*opacity:0;*/
    padding:0;
}

section#top div#main{
    /*background:url("../img/sp_main_001.jpg") no-repeat center bottom;
    background-size:cover;*/
    width:100%;
    height:auto;
    left:0;
    top:0;
}

section#top div#main img#sp_main{
    position:relative;
    width:100%;
    margin-top:50px;
}

section#top div#main div#main_copy{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:-17%;    
    background:url("../img/sp_main_txt.png") no-repeat bottom;
    background-size:100% auto;
}

section#top.anm div#main div#main_copy{
    opacity:0;
    animation:fadeInLeft 1.5s 1.2s forwards;
}

section#top div#main.hide div#main_copy{
    display:none;
}

section#top div#main div#main_copy span{
    display:none;
}

section#top div#main img#sp_oa{
    position:absolute;
    width:88%;
    left:6%;
    bottom:4%;
}

section#top div#main.hide img#sp_oa{
    display:none;
}

/**/
section#news{
    /*margin-top:-15vh;*/
    padding-top:3em;
    width:100%;
}

section#news dl.newsIndex{
    width:100%;
    margin:0 auto;
    padding-top:10px;
    background:url("../img/sp_news_li_line.png") no-repeat top;
    background-size:100% auto;
}

section#news dl.newsIndex div{
    width:96%;
    padding:10px 0 18px 4%;
    background:url("../img/sp_news_li_line.png") no-repeat bottom;
    background-size:100% auto;
    animation-name:fadeInUp;
    text-align:left;
}

section#news dl.newsIndex div dt{
    display:inline-block;
    vertical-align: top;
    color:#FFF;
    font-size:0.7em;
    letter-spacing:0.1em;
    font-weight:normal;
    width:120px;
    margin-right:10px;
    padding:6px 0;
    text-align: center;
    background: rgb(227,0,126);
    background: -moz-linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    background: linear-gradient(90deg, rgba(227,0,126,0.8) 0%, rgba(178,11,130,0.8) 30%, rgba(32,46,144,0.8) 60%, rgba(0,160,223,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3007e",endColorstr="#00a0df",GradientType=1);
}

span.newIcon.news{
    width:50px;
    display:inline-block;
    margin-right:10px;
    font-size:0.7em;
    letter-spacing:0.1em;
    line-height:1em;
    color:#0DCA68;
    border:solid 1px #0DCA68;
    padding:5px 0;
    text-align:center;
    vertical-align: top;
}

section#news dl.newsIndex div dd{
    display:inline-block;
    width:96%;
    text-align: left;
    font-size:0.9em;
    line-height:1.3em;
    letter-spacing:0.1em;
    margin:0.8em auto 0.5em;
}

section#news dl.newsIndex div a dd{
    color:#231815;
}

section#news dl.newsIndex div a:hover{
    opacity:1;
}
section#news dl.newsIndex div a:hover dt{
      /*background: #93278F;*/
}
section#news dl.newsIndex div a:hover dd{
    color:#93278F;
}


section#news dl.newsIndex div.newsMore{
    width:100%;
    padding:1em 0 0;
    text-align:right;
    background:none;
}

section#news dl.newsIndex div.newsMore > a{
    display:inline-block;
    margin:0;
    width:9%;
    transition:0.5s;
}

section#news dl.newsIndex div.newsMore > a:hover{
    opacity:0.5;
}

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



/*STORY*/

section#intro{
}

section#intro h2{
    letter-spacing:0;
}

section#intro p{
    width:90%;
    margin:0 auto;
    font-size:0.9em;
    color:#4D4D4D;
    line-height:2.8em;
}

section#intro p span{
    display:inline-block; 
}

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


section#staffcast dl{
    width:96%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    margin:1em auto 3em;
	justify-content: space-between;
    position:relative;
}

section#staffcast dl:last-child{
    margin:1em auto 0;
}

section#staffcast dl > div{
    width:44%;
    margin-bottom:2em;
}

section#staffcast dl.staffList > div:first-child{
    width:100%;
}

section#staffcast dl dt{
    width:100%;
    padding-bottom:10px;
    margin-bottom:10px;
    background:url("../img/staffcast_line.png")repeat-x left bottom;
    font-size:0.7em;
    letter-spacing:0.1em;
    color:#0DCA68;
    text-indent:0.2em;
}

section#staffcast dl dd{
    font-size:0.9em;
    letter-spacing:0.05em;
    color:#4D4D4D;
    font-weight:600;
    text-indent:0.2em;
    line-height:2em;
}

section#staffcast dl dt span,
section#staffcast dl dd span{
    display:inline-block;
}

section#staffcast dl dd span.txt-s_b{
    font-size:0.7em;
    line-height:1.4em;
}

section#staffcast div#staff{
    
}

section#staffcast div#cast{
    padding-top:3em;
}


section#staffcast dd span.com_btn{
    display:inline-block;
    margin:0 0.4em 0;
    vertical-align: middle;
    transition:0.3s;
    cursor:pointer;
}

section#staffcast dd span.com_btn img{
    width:1.4em;
    height:1.4em;
    object-fit:contain; 
}

section#staffcast dd span.com_btn:hover{
    opacity:0.5;
}



section#cont3 div.comArea{
    width:100%;
    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#bnr{
    
}

section#bnr a{
    display:block;
    width:80%;
    margin:0 auto;
    max-width:300px;
}

section#bnr a:link > img{
    width:100%;
}


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

.pcdn{
	display:inline-block;
}

.t10{
    margin-top:12px;
}