@charset "utf-8";

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

body {
width:100%;
height:100%;
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-family: 'Parisienne', cursive;
font-size:17px;
z-index:1000;
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

}


ul{
margin:0;
padding:0;
}
li{
padding-bottom:15px;
list-style-type:none;
}
.insta img{
width:30px;
}











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






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

#logo{
margin:0 auto;
width:400px;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform:translateY(-50%) translateX(-50%);
z-index:1;

}
#logo img{
width:100%;
}


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





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



background-color:
#e4edf5;

/*===
#ede7f2;
#e4e4f4;

===*/
}





#header{
position:relative;
margin:0;
width:100%;
height:100vh;
}


#top{
position:relative;
margin:0;
width:100%;
height:60%;
background-color:#fff;
}
#bottom{
position:relative;
margin:0;
width:100%;
height:40%;
background-image:url(../pic/bottom.jpg);
background-size:cover;
}










#about{
margin:0 auto;
width:100%;
padding:100px 0;
background-color:#ffffff;
}
.about{
margin:0 auto;
width:80%;
text-align:center;
}
#about02{
margin:0 auto;
width:100%;
padding:100px 0;
}

.about02{
margin:0 auto;
width:80%;
display:flex;
justify-content: space-between;
}

.about03{
margin:30px auto 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;
}

#menu{
margin:0 auto;
width:100%;
padding:100px 0;

}
.menu{
margin:0 auto;
width:80%;
display:flex;
justify-content: space-between;
}

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

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


#link{
margin:0 auto;
width:100%;
padding:100px 0;
}
.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:250px;
}
.cdtxt{
padding:0 10px;
line-height:150%;
}
.cdbox img{
width:100%;
}
.artist{

}


.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:16px;
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight:bolder;
line-height:200%;
margin-bottom:20px;
}







.title02{
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size:24px;
line-height:130%;
text-align:left;
border-bottom:1px solid;

}
.title002{
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight:bolder;
line-height:100%;
border-bottom:1px solid;
padding-bottom:10px;
text-align:left;
}

.title05{
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size:18px;
line-height:170%;
text-align:left;
border-bottom:1px solid;
color:#cc0033;
margin-bottom:20px;
}


.title03{
font-family:'soleil', Arial, 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
margin-bottom:30px;
text-align:left;

}

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



.abouttxt{
margin:40px auto 0 auto;
}

.abouttxt02{
margin:40px auto 0 auto;
width:660px;
background-color:#e4edf5;
border-radius:10px;
color:#4281b6;
}
.abouttxt03{
padding:30px;
text-align:left;
}


.left{
margin:0 auto;
width:40%;
}
.left img{
width:100%;
}
.right{
width:60%;
text-align:left;
}
.txt{
padding:0 50px;
}

#slide, #mslide{
margin:0 auto;
padding:0;
width:100%;
height:100vh;
}
#profileimg{
margin:0;
padding:0;
width:100%;
height: 0;
overflow: hidden;
padding-bottom:100%;
position: relative;
}
.mj{
margin:20px 0;
width:70%;
}
.mj img{
width:100%;
}


#mslide{
display:none;
}

blockquote{
margin:30px 0 0 0;
padding:30px;
border:1px solid;
}



#footer{
width:100%;
margin:0 auto;
padding:50px 0;
background:#4281b6;
color:#ffffff;
font-size:12px;
line-height:150%;
text-align:center;
}
.footerimg img{
width:120px;
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:underline;}
a:link{color:#336699;}
a:visited{color:#336699;}
a:hover{color:#007bb7;}
a:active{color:#336699;}


.topmenu a {text-decoration:none;}


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



}

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

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

#logo{
margin:0 auto;
width:80%;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform:translateY(-50%) translateX(-50%);
z-index:1;
}
#logo img{
width:100%;
}


#top{
position:relative;
margin:0;
width:100%;
height:60%;
background-color:#fff;
}
#bottom{
position:relative;
margin:0;
width:100%;
height:40%;
background-image:url(../pic/bottom02.jpg);

}


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

.about, .about02, .about03, .info, .profile, .add, .menu, .movie, .add, .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;

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



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


.title{
font-size:16px;
}
.title02{
font-size:20px;
text-align:center;

}
.title03{
margin-bottom:10px;
text-align:center;
}
.title05{
font-size:16px;
text-align:center;

}





.left, .right{
width:100%;
}
.left img{
width:100%;
}
.right img{
width:100%;
}
.txt{
padding:30px 0;
}


.mj{
width:100%;
}
.mj img{
width:100%;
}


.abouttxt02{
margin:30px auto 0 auto;
width:100%;
}
.abouttxt03{
padding:20px;
}


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


.cdbox{
margin:0 0 30px 0;
padding:0;
width:33%;
}
.cdtxt{
font-size:12px;
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:55%;
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;
}
















}