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

/*######################################　　　汎　用　　　#######################################*/
.noneve{pointer-events:none;cursor:auto}

/*CHARACTER*/
.force{display:flex}
.force label{display:block;width:48%}
.force img{opacity:0.5;cursor:pointer;transition:.2s ease}
.force img:hover{opacity:1}
.force input{display:none}
.force input:checked+img{opacity:1}

#selector{position:relative;width:100%}
.selector li{outline:none}
#selector_arw button{position:absolute;top:50%;display:block;height:100%;background-color:#000;background-repeat:no-repeat;border:0}
#selector_arw button::before{content:''}
#selector_arw button.slick-prev{background-image:url("../img/btn/arrow_left.png");left:0;background-position:80% center}
#selector_arw button.slick-next{background-image:url("../img/btn/arrow_right.png");right:0;background-position:20% center}
#selector_arw .slick-arrow{z-index:30;}/*.slick-prevがcssは反応するのに動作しなかった時に入れる*/

.charaslide{position:relative;width:100%;max-width:1200px;margin:auto;background-image:url(../img/job/flag_lbr.jpg),url(../img/job/bg_liber.jpg);background-repeat:no-repeat,no-repeat}
.character{width:100%;height:100%;position:relative;display:flex}
#slider{position:absolute;top:0;left:0;width:100%;pointer-events:none}
/*
#slider li{transition:.5s ease;opacity:0}
#slider li.slick-center{opacity:1;}
*/
#slider li img{width:auto;transform:translateX(50%);opacity:0;transition:.5s ease}
#slider li img.active{transform:translateX(0);opacity:1}

.character>div:first-of-type{width:55%;pointer-events:none}
.character>div:last-of-type{width:5%;pointer-events:none}
.character .frame{display:flex;flex-wrap:wrap;width:40%;height:100%;color:#fff;z-index:99}
.character .frame .class{width:30%;margin-bottom:1rem}
.character .frame .inframe{position:relative;padding:0}
.character .frame .inframe p{padding:0 1em 0.5em 0;text-align:justify;ine-height:1.4;text-shadow:0 0 10px #000,0 0 5px #000,1px 1px 0 #000;background-size:contain}
.character .frame .chara_txtdeco_top{display:none;position:absolute;pointer-events:none}
.character .frame .chara_txtdeco_bottom{position:absolute;pointer-events:none}
.character .frame .jobchange{position:relative;display:flex;align-items:flex-start;width:100%}
.character .frame .jobchange div.img{width:42%}
.character .frame .jobchange div.img img{border:solid 1px #fe9}
.character .frame .jobchange div.img p{margin-top:0.5rem;text-align:center;line-height:1.4;text-shadow:0 0 10px #000,0 0 5px #000,1px 1px 0 #000}
.character .frame .jobchange div.img span{display:block;font-size:0.75em;color:#fe9;}
.character .frame .jobchange>img{position:absolute;top:0;transform:translateY(-120%);left:0;width:42%;filter:drop-shadow(0 0 1rem #000) drop-shadow(0 0 0.5rem #000)}
.character .frame .jobchange>span{display:flex;align-items:center;width:10%;aspect-ratio:5/21;padding:0 3%}
.character>button{position:absolute;background:none;border:0;transition:.2s;z-index:99}
.character>button img{filter:drop-shadow(0 0 10px #000000) drop-shadow(0 0 10px #000000)}
.character>button:hover{opacity:0.7}

/*######################################　　　P　C　　　#######################################*/
@media screen and (min-width:900px){
/*CHARACTER*/
.force{justify-content:space-between}

#selector{margin:50px 0}
.selector{width:calc((100%/7)*6);margin:auto}
#selector_arw button{width:calc(100% / 14);background-size:40%;opacity:0.5;transition:.2s ease}
#selector_arw button:hover{opacity:1}

.charaslide{aspect-ratio:5/4;background-size:300px,contain;background-position:82% 100%,left top}
#slider{}
#slider li{}
#slider li img{margin-left:-8%;}
.character .frame .inframe{margin-top:30px}
.character .frame .inframe p{font-size:21px;}
.character .frame .jobchange{margin-top:120px}
.character .frame .jobchange div p{font-size:14px}
.character .frame .jobchange>img{transform:translateY(-130%)}
.character .frame .chara_txtdeco_top{width:303px;top:-14px;left:0}
.character .frame .chara_txtdeco_bottom{width:220px;bottom:-25px;right:0}
.character>button{bottom:0px;left:20%;width:20%}

}
/*######################################　　　S　P　　　#######################################*/
@media screen and (max-width:900px){
/*CHARACTER*/
.force{justify-content:space-around}

#selector{margin:5vw 0}
.selector{width:80%;margin:auto}
#selector_arw button{width:10%;background-size:50%}

.charaslide{aspect-ratio:1/1;background-size:30vw,100%;background-position:85% 100%,left top}
#slider{}
#slider li{}
#slider li img{margin-left:-21%;}
.character .frame .inframe{margin-top:3vw}
.character .frame .inframe p{font-size:2.7vw}
.character .frame .jobchange{margin-top:10vw}
.character .frame .jobchange div p{font-size:1.6vw;white-space:nowrap}
.character .frame .jobchange>img{transform:translateY(-130%)}
.character .frame .chara_txtdeco_top{width:70%;top:-1.4vw;left:0}
.character .frame .chara_txtdeco_bottom{width:43%;bottom:-1.9vw;right:0}
.character>button{bottom:0vw;left:10vw;width:40vw}

}