@charset "UTF-8";

html{
font-size: 62.5%;
}

body{
font-family: 'Sawarabi Gothic', sans-serif;
font-size: 1.6rem;
line-height: 1.6;
color: #333;
}

img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}

a{
    color: #333;
    text-decoration: none;
}

a:hover{
    color: #e754ff;
}

ul{
list-style-type: none;
margin: 0;
padding: 0;
}

h1,h2,h3{
    font-family: nobel, sans-serif;
    font-weight: 700;
    font-style: normal;
    margin: 0;
    text-align: center;
}

::selection {
    background: #e754ff;
    color: #35ffea;
}


/*ここまで基本設定*/

.wrapper{
    width: 80vw;
    margin: 0 auto;
}


h2{
    display: none;
}


#top{
    height: 100vh;
    position: relative;
    background-color: #EBEBEB;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow: hidden;
}

/*トップ画像の位置設定*/

.topimg{
/*    animation: move-y 1.5s infinite alternate ease-in-out;*/
    position: absolute;
    width: 77vw;
}

.nu01{
    top: 25vh;
    left: 0vw;
}

.nu02{
    top: 0vh;
    left: 17vw;
    width:88vw;
}

.nu03{
    top: 15vh;
    right: 2vw;
}

/*

トップのアニメーション設定
@keyframes move-y {
  from {transform: translateY(0);}
  to {transform: translateY(10px);}
}
*/
/*

以下遅延の指定
.nu02 {animation-delay: .3s;}
.nu03 {animation-delay: .7s;}
*/

/*
------------------
メンバー写真の設定
------------------
*/


#profile{
    height: auto;
    background-color: #EBEBEB;
    padding-top: 100px;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow: hidden;
}

.profile-flex{
    display: flex;
    justify-content: center;
    padding-bottom: 30vw;
}

#profile .profileimg{
    position: relative;
    animation: rotation1 1.5s infinite alternate ease-in-out;
}

.profileimg.marii{
    top: 20vw;
}

.profileimg.zun{
}

.profileimg.mayuki{
    top:16vw;
}

.podcast{
    padding-bottom: 10%;
}

/*
------------------
youtubeメニューの設定
------------------
*/


#youtube{
    background: #FEFF2C url("../images/bg-zz.svg") repeat top/10%;
    text-align: center;
    height: auto;
    display: flex;
    align-items: center;
    padding: 10% 0;
    
}

.video iframe{
  width: 75vw;
  aspect-ratio: 16 / 9;
    }
/*
------------------
音楽メニューの設定
------------------
*/

#music{
    background-color:#A7FF53;
    padding:10% 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 3.2;
}

.disc>p{
    font-size: 1.2rem;
    color: #ff6866;
    line-height: 2.0;  
    margin: 0;
}

.tonight{
    margin-top:100px;
    text-align: right
}

/*
------------------
フッターの設定
------------------
*/

#gfooter{
    background-color: #353535;
    font-family: 'Noto Sans JP', sans-serif;
     font-family: 'Poppins', sans-serif;
    height: 80px;    
    color: #A7FF53;
    display: flex;
    align-items: center;
}


/*
------------------
スライドインの設定
------------------
*/


.start{
opacity: 0;
transition-duration: .5s;
transform: translate(0, 50%);
}



/* 画面内に収まった時の設定 */
.in{
opacity: 1;
transform: translate(0, 0);
}


.topimg.nu01{
   transition-delay: .3s; 
}
.topimg.nu03{
   transition-delay: .6s; 
}

.mayuki.start{
transition-delay: .3s;
}

.marii.start{
transition-delay: .6s;
}

/*
------------------
カルーセルの設定
------------------
*/

.slider li{
    height: auto;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}


/*
--------------------------



600px以上の設定



--------------------------
*/

@media (min-width:600px){    

.topimg{
    width: 50vw;
}


.nu02{
    top: 0px;
    left: 30vw;
    width: 63vw;
    
}

.nu03{
    top: 22vh;
    right: 0px;
}
    
    
.video {
    margin: 0 auto;
}
    
.video iframe{
    width: 75vw;
    height: auto;
    aspect-ratio: 16 / 9;
    }
}
    
/*
--------------------------



1200px以上の設定



--------------------------
*/