@charset "utf-8";

/***********動く流体シェイプ***********/
.poyo{
    width: 500px;
    height: 100px;
    margin: 0 auto;
}


/***********見出し***********/
h4{
    font-family: Pacifico;
    font-size: 64px;
    margin-top: 100px;
}

.coment{
    margin: 0 auto;
    text-align: center;
}

h3{
    margin: 200px 0 100px;
}


/***********右上に文字の箱***********/
.white{
    width: 40%;
    padding-bottom: 30px;
    height: fit-content;
}

.white img{
    width: 95%;
}

/***********プレイリストボタン***********/
.playlist_box{
    margin: 0 auto 100px;
    text-align: center;
    width: 400px;
}

.playlist li{
    border-radius: 20px;
    width: 400px;
    height: 50px;
    margin-top: 20px;
    font-size: 20px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
    display: table;
}

.playlist li a{
    text-decoration: none;
    font-weight: 500;
    color: black;
    display: table-cell;
    vertical-align: middle;
    transition: 1s;
}

.playlist_yellow{
    background-color: #F1F37F;
}

.playlist_yellow a:hover{
    border-radius: 20px;
    background-color: #D5D933;
}



.playlist_pink{
    background-color:#F3BAF4;
}

.playlist_pink a:hover{
    border-radius: 20px;
    background-color: #EF7DF1;
}

.playlist_green{
    background-color: #BAF4CB;
}

.playlist_green a:hover{
    border-radius: 20px;
    background-color: #65DD87;
}



/********************************************/

/****************レスポンシブ******************/

/********************************************/

@media screen and (max-width: 600px) {
    html {
        font-size: 75%;
    }


.header_right{
    display: none;
}
    
/***********動く流体シェイプ***********/
.poyo{
    width: 450px;
    height: 100px;
    margin: 0 auto;
}

/***********見出し***********/
h3{
    margin: 150px 0 80px;
    width: 100%;
    text-align: left;
    padding: 15px;
}



/***********右上に文字の箱***********/
.white{
    width: 95%;
}