@charset "utf-8";

html,body{
width:100%;
height:100%;
}

body {
margin:0 auto;
padding:0;
font-size:16px;
line-height:200%;
font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.topmenu{
position:fixed;
top:15px;
right:15px;
padding:25px 25px 0 25px;
text-align:right;
font-size:36px;
font-family: 'Great Vibes', cursive;
z-index:1000;
}
.topmenu img{
width:130px;
}
.insta img{
width:30px;
}


ul{
margin:0;
padding:0;
}
li{
padding-bottom:15px;
list-style-type:none;
}

/*========= 背景動画設定のCSS ===============*/

#header{
margin:0 auto;
padding:0;
width:100%;
height:100%;
min-height:100%;
background-position:center bottom;
}




#scroll{
position:absolute;
bottom:30px;
left:50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
z-index:100;
}

#logo{
display:none;
}


/*========= レイアウトのためのCSS ===============*/





#container{
margin:0 auto;
padding:0;
width:100%;
background:#ebe6e0;

}

#about{
margin:0 auto;
width:100%;
padding:100px 0;
}
.about{
margin:0 auto;
width:80%;
display:flex;
justify-content: space-between;
}




#info{
margin:0 auto;
width:100%;
padding:100px 0;
background:#fff;
}
.info{
margin:0 auto;
width:600px;
}


#profile{
margin:0 auto;
width:100%;
padding:100px 0;
}
.profile{
margin:0 auto;
width:80%;
display:flex;
justify-content: space-between;
}

#release{
margin:0 auto;
width:100%;
padding:100px 0;
background:#fff;
}
.release{
margin:0 auto;
padding:0;
width:960px;
}

#movie{
margin:0 auto;
width:100%;
padding:100px 0;
}
.movie{
margin:0 auto;
padding:0;
width:840px;
text-align:center;
}

#link{
margin:0 auto;
width:100%;
padding:100px 0;
background:#fff;
}
.link{
margin:0 auto;
width:70%;
display:flex;
justify-content: space-between;
}
.brisado, .cellulam, .naomi, .llc{
margin:0 auto;
width:30%;
text-align:center;
line-height:150%;
}
.brisado img, .cellulam img, .naomi img, .llc img{
width:100%;
}



.cds{
width:100%;
margin:50px auto 0 auto;
padding:0;
display:flex;
flex-wrap: wrap;
align-content:flex-start;
list-style-type: none;
}


.cdbox{
margin:0 10px 30px 10px;
padding:0;
width:300px;
}
.cdtxt{
padding:0 10px;
line-height:150%;
font-weight:bolder;
}
.cdbox img{
width:100%;
}
.artist{
border-bottom:1px solid #cccccc;
}


.movies{
width:840px;
margin:50px auto 0 auto;
padding:0;
display:flex;
flex-wrap: wrap;
align-content:flex-start;
list-style-type: none;
}

.moviebox{
padding:0;
width:400px;
margin:0 10px 30px 10px;
}









.headline{
font-size:36px;
line-height:170%;
font-family: "Hannari", serif;
padding:0;
}


.headline2{
margin:0 auto;
width:100%;
font-size:36px;
line-height:170%;
margin-bottom:50px;
font-family: "Hannari", serif;
}

.title{
font-size:20px;
font-family:georgia;
font-weight:normal;
line-height:200%;
border-bottom:1px solid #999999;
margin-bottom:10px;
}
.title02{
font-size:69px;
font-family: 'Great Vibes', cursive;
font-weight:normal;
line-height:100%;
border-bottom:1px solid #999999;
padding-bottom:20px;
margin-bottom:20px;
text-align:center;
}
.title03{
font-size:20px;
margin-bottom:10px;
}

.date{
background-color:#a38b70;
color:#ffffff;
padding:0 10px;
margin-right:20px;
font-family:georgia;
font-style:italic;
}


.aboutleft{
margin:0 auto;
width:50%;
}
.aboutleft img{
width:100%;


}
.aboutright{
width:50%;
text-align:right;
}
.abouttxt{
padding:80px 0 0 50px;
}

.profileleft{
margin:0 auto;
width:50%;
}
.profileleft img{
width:100%;
}
.profileright{
width:50%;
text-align:left;
}
.profiletxt{
padding:0 50px;
}

#slide, #mslide{
margin:0 auto;
padding:0;
width:100%;
height:100vh;
}

#mslide{
display:none;
}






#footer{
width:100%;
margin:0 auto;
padding:50px 0;
width:100%;
background:#a38b70;
color:#ffffff;
font-size:12px;
line-height:150%;
text-align:center;
}
.footerimg img{
width:70px;
margin-bottom:10px;
}





a:hover img{filter:Alpha(Opacity=70);  -moz-opacity:0.7; opacity:0.7; -khtml-opacity:0.7;}
a img{border:none;}

a {text-decoration:none;}
a:link{color:#ffffff;}
a:visited{color:#ffffff;}
a:hover{color:#33ccff;}
a:active{color:#ffffff;}

.topmenu a {text-decoration:none;}
.topmenu a:link{color:#40220f;}
.topmenu a:visited{color:#40220f;}
.topmenu a:hover{color:#a38b70;}
.topmenu a:active{color:#40220f;}

#link a {text-decoration:underline;}
#link a:link{color:#40220f;}
#link a:visited{color:#40220f;}
#link a:hover{color:#a38b70;}
#link a:active{color:#40220f;}

.toplink a {text-decoration:underline;}
.toplink a:link{color:#40220f;}
.toplink a:visited{color:#40220f;}
.toplink a:hover{color:#a38b70;}
.toplink a:active{color:#40220f;}

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

.release{
margin:0 auto;
padding:0;
width:810px;
}


.cdbox{
margin:0 10px 30px 10px;
padding:0;
width:250px;
}

}

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

body {
font-size:12px;
}
.topmenu{
display:none;
}

#about, #info, #profile, #add, #release, #movie, #link{
display:block;
margin:0 auto;
width:100%;
padding:50px 0;
}

.about, .info, .profile, .add, .release, .movie, .link{
display:block;
margin:0 auto;
width:80%;
}

.link{
display:block;
}

.brisado, .cellulam, .naomi, .llc{
margin:0 auto 50px auto;
width:100%;
text-align:center;
}
.brisado img, .cellulam img, .naomi img, .llc img{
width:70%;
}

#mslide{
display:block;
}

#slide{
display:none;
}


#image{
display:block;
padding:0;
}


.headline{
margin:0 auto;
padding:0;
width:100%;
font-size:22px;
line-height:200%;
font-family: "Hannari", serif;
text-align:left;
}
.headline2{
margin:0 auto 30px auto;
padding:0;
width:100%;
font-size:22px;
line-height:200%;
font-family: "Hannari", serif;
}

#logo{
display:block;
position:absolute;
top:30px;
left:30px;
width:30%;
z-index:10;
}
#logo img{
width:100%;
}

#scroll{
position:absolute;
bottom:10px;
left:50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
z-index:100;
}

.title02{
font-size:49px;
}
.title03{
font-size:16px;
margin-bottom:10px;
}

.aboutleft{
margin:-70px auto 0 auto;
width:100%;
}
.aboutright{
margin:0 auto;
width:100%;
}
.abouttxt{
text-align:right;
}


.profileleft, .profileright{
width:100%;
}
.profileleft img{
width:100%;
}
.profiletxt{
padding:30px 0;
}



.cds{
display:block;
width:100%;
margin:30px auto 0 auto;
padding:0;
}


.cdbox{
margin:0 0 30px 0;
padding:0;
width:100%;
}
.cdtxt{
font-size:14px;
padding:0 10px;
line-height:150%;
}
.cdbox img{
width:100%;
border:5px solid #ffffff;
}


.movies{
width:100%;
margin:30px auto 0 auto;
padding:0;
}

.moviebox{
width:100%;
}



.youtube{
position: relative;
width: 100%;
padding-top:60%;
margin:0 auto 10px auto;
}
.movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}






#footer{
width:100%;
margin:0 auto;
padding:50px 0;
width:100%;
font-size:9px;
line-height:150%;
text-align:center;
}
















}