@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

body {
    font-family: 'Zen Maru Gothic', sans-serif; 
    font-size: 2rem; 
    line-height: 1.6;
    text-align: justify;
    -webkit-text-size-adjust: 100%;
    color: #6D3309;
    display: flex;
    flex-direction: column;
    background:url(../img/nebalove/bg.jpg);
    overflow-x: hidden;
}

.inner{
    width:90%;
    max-width:1100px;
    margin:0 auto;
}

footer{
    margin:15px auto;
}

/******************** logo ********************/

#logo{
    top:0px;
    left:30px;
    position:absolute;
    width:150px;
    z-index:100;
}

#logo a:hover{
    opacity:1;
}

#logo a img:hover{
    transform: scale(1.1);
    transition: .3s ;
 }


/******************** kv ********************/

#kv{
    margin:30px auto 0;
    background: #fff url(../img/nebalove/kv_bg.jpg)no-repeat center top;
    background-size: 1800px;
}

#kv .inner{
    height:580px;
    position: relative;
}

#kv img.main{
    width:710px;
    position: absolute;
    right:0;
    bottom:0;
    z-index:2;
}

#kv h1{
    width:500px;
    position: absolute;
    top:110px;
    left:-20px;
    z-index:2;
 }

 #kv a img{
    width:200px;
    position: absolute;
    right:-10px;
    bottom:-70px;
    z-index:5;
 }

 #kv a:hover{
    opacity: 1;
 }

 #kv a img:hover{
    transform: scale(1.1);
    transition: .3s ;
 }

 /******************** story ********************/

 #story{
    position: relative;
    text-align: center;
    padding:50px 0 180px;
    overflow: hidden;
    z-index:1;
 }

 .story_skew::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:url(../img/nebalove/story_bg02.png)no-repeat center,url(../img/nebalove/story_bg.jpg)no-repeat center;
    background-size:1800px,cover;
    transform: skewY(-4deg)translateY(-100px);
    z-index:-1;
}

#story h2{
    width:270px;
    margin: 0 auto;
}

#story p{
    margin:30px 0 0;
    font-size:2.2rem;
    line-height: 2.2;
    position: relative;
}

#story p img.deco{
    position: absolute;
    width:200px;
    left:50px;
    bottom:-140px;
    z-index:-1;
}

/******************** character ********************/

#character{
    position: relative;
    text-align: center;
    margin:-30px auto 0;
    padding:0 0 200px;
 }

 .character_skew::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 186, 240, 0.7);
    transform: skewY(-4deg)translateY(-100px);
    z-index: -1;
}

#character h2{
    width:400px;
    margin: 0 auto 0;
}

#character ul{
    display: flex;
    justify-content: space-between;
    margin:80px 0 0;
    position: relative;
}

#character .deco1{
    position: absolute;
    left:-100px;
    top:-100px;
    width:200px;
    z-index:-1;
}

#character .deco2{
    position: absolute;
    z-index:-1;
    right:-140px;
    top:-200px;
    width:160px;
}

#character .deco2_2{
    position: absolute;
    z-index:-1;
    left:-80px;
    bottom:-100px;
    width:160px;
}

#character .deco3{
    position: absolute;
    z-index:3 !important;
    right:-80px;
    bottom:-145px;
    width:200px;
}

#character ul li{
    width:31%;
    background:#fff;
    border:2px solid #6D3309;
    display: flex;
    flex-direction:column;
}

#character ul li img{
    margin:-60px auto 0;
}

#character ul li p{
    margin:0 20px 0;
}

#character p.name{
    font-size: 2.2rem;
    font-weight: 700;
    margin:15px 0 ;
}

#character p.profile{
    font-size: 1.6rem;
    text-align: left;
    flex-grow: 1;
}

#character ul li a{
    margin:15px 20px 20px;
    background: #6D3309;
    color:#fff;
    font-size:1.6rem;
    font-weight: 500;
    display:block;
    border-radius: 100px;
    padding:10px 25px;
    position: relative;
}

#character ul li a::before{
    position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	right: 15px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/******************** movie ********************/

#movie{
    position: relative;
    text-align: center;
    margin:-200px 0 0;
    padding:180px 0 ;
    overflow: hidden;
    background:url(../img/nebalove/movie_bg02.png)no-repeat top center,url(../img/nebalove/movie_bg.jpg)no-repeat center 120%;
    background-size:1400px,1800px;
 }

 .movie_skew::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:#fff;
    transform: skewY(-4deg)translateY(100px);
    z-index: -1;

}

#movie h2{
    width:280px;
    margin: -20px auto 0;
}

#movie ul{
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

#movie .deco1{
    position: absolute;
    left:-100px;
    top:-10px;
    width:160px;
}

#movie .deco2{
    position: absolute;
    right:-100px;
    top:50%;
    width:170px;
}

#movie ul li{
    width:48%;
    margin:30px 0 0;
    z-index:3;
}

#movie ul li p{
    font-size:2rem;
}

#movie ul li p span{
    font-size:3rem;
}

#movie ul li .yb{
    margin:10px auto ;
    aspect-ratio: 16 / 9;
    text-align:center;
    width:100%;
}

#movie ul li .yb iframe {
    width: 100%;
    height:100%;
}



/******************** 1100px ********************/

@media only screen and (max-width: 1100px) {

    #kv .inner{
        width:98%;
        margin:0 auto;
    }
    
    #kv h1{
        width:450px;
        position: absolute;
        top:30%;
        bottom:0;
        left:-20px;
        z-index:2;
     }

     #kv a img{
        width:170px;
        position: absolute;
        right:-10px;
        bottom:-70px;
        z-index:5;
     }

}




/******************** SP ********************/

@media only screen and (max-width: 767px) {

    /******************** sp/logo ********************/

    #logo{
        top:0px;
        left:10px;
        position:absolute;
        width:120px;
        z-index:100;
    }

    #logo a img:hover{
        transform: scale(1);
    }


    /******************** sp/kv ********************/

    #kv{
        margin:30px auto 0;
        background: #fff url(../img/nebalove/kv_bg.jpg)no-repeat left 35% top;
        background-size: 220%;
    }

    #kv .inner{
        height:auto;
        width:100%;
        display: flex;
        flex-direction:column;
        flex-direction: column-reverse;
    }

    #kv img.main{
        width:100%;
        position: relative;
        right:0;
        left:0;
        bottom:0;
        z-index:2;
    }

    #kv h1{
        width:95%;
        position: relative;
        top:15px;
        left:2.5%;
        right:0;
        z-index:2;
    }

    #kv a img{
        width:140px;
        position: absolute;
        right:0;
        bottom:-30px;
        z-index:5;
    }

    #kv a:hover{
        opacity: 1;
    }

    #kv a img:hover{
        transform: scale(1);
        transition: .3s ;
    }

    /******************** sp/story ********************/

    #story{
        position: relative;
        text-align: center;
        padding:50px 0 180px;
        overflow: hidden;
        z-index:1;
    }

    .story_skew::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background:url(../img/nebalove/sp_story_bg02.png)no-repeat center,url(../img/nebalove/story_bg.jpg)no-repeat center left 20%;
        background-size:cover,cover;
        transform: skewY(-4deg)translateY(-100px);
        z-index:-1;
    }

    #story h2{
        max-width:270px;
        width:65%;
        margin: 0 auto;
    }

    #story p{
        margin:30px 0 0;
        font-size:1.8rem;
        line-height: 2.2;
        position: relative;
    }

    #story p img.deco{
        position: absolute;
        width:130px;
        left:-2%;
        bottom:-120px;
        z-index:2;
    }

    /******************** sp/character ********************/

    #character{
        position: relative;
        text-align: center;
        margin:-30px auto 0;
        padding:0 0 200px;
    }

    .character_skew::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 186, 240, 0.7);
        transform: skewY(-4deg)translateY(-100px);
        z-index: -1;
    }

    #character h2{
        max-width:400px;
        width:100%;
        margin: 0 auto 0;
    }

    #character ul{
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        margin:-10px 0 0;
        position: relative;
    }

    #character .deco3{
        position: absolute;
        z-index:3 !important;
        right:-20px;
        bottom:-160px;
        width:170px;
    }

    #character ul li{
        width:100%;
        margin:80px 0 0;
        background:#fff;
        border:2px solid #6D3309;
        display: flex;
        flex-direction:column;
    }

    #character ul li:nth-child(2){
        order: -1;
        padding:0 0 20px;
    }

    /******************** sp/movie ********************/

    #movie{
        position: relative;
        text-align: center;
        margin:-200px 0 0;
        padding:180px 0  80px;
        overflow: hidden;
        background:url(../img/nebalove/sp_movie_bg02.png)no-repeat top center,url(../img/nebalove/movie_bg.jpg)no-repeat center bottom;
        background-size:120%,100%;
    }


    #movie h2{
        max-width:280px;
        width:65%;
        margin: -20px auto 0;
    }

    #movie ul{
        margin:0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
    }

    #movie .deco1{
        position: absolute;
        left:-8%;
        top:0px;
        width:120px;
        z-index:-1;
    }

    #movie .deco2{
        position: absolute;
        right:-10%;
        top:50%;
        width:120px;
        z-index:-1;
    }

    #movie ul li{
        width:100%;
        margin:10px 0 0;
    }

    #movie ul li p{
        font-size:1.8rem;
    }

    #movie ul li p span{
        font-size:3rem;
    }

    #movie ul li .yb{
        margin:10px auto ;
        aspect-ratio: 16 / 9;
        text-align:center;
        width:100%;
    }

    #movie ul li .yb iframe {
        width: 100%;
        height:100%;
    }




}