@charset "UTF-8";
html {font-size: 100%;}
body{background-color: white;}
a{text-decoration: none;}
/* ---------main-------------------------------------------------- */
main{position: relative;top:90px; height: auto;padding-bottom:80px;}
main{display: flex;justify-content: space-between;margin: 0 10px 0 10px;}
main h3/* --title--- */{font-family: "Sawarabi Mincho";
	font-size:20px;color:floralwhite;padding-top: 9px;padding-left: 20px;}
main h5/* --曲名--- */{font-size:15px;color:black;line-height: 1.2;}
main h5{white-space: nowrap;}/*----折り返し禁止-----*/

.list/* --曲名--- */{margin: 10px 0 10px 20px;}

.no1{width: 33%;background:#FFEEFF;padding-left: 0px;}
.no2{width: 33%;background:#FFFFDD;padding-left: 0px;}
.no3{width: 33%;background:#FFDBC9;padding-left: 0px;}
/* ---------title----------------- */
.title_a/* --紺--- */{height: 40px;background:#330066;border-radius: 0 15px 0 0;margin-top:-10px;}
.title_b/* --赤--- */{height: 40px;background:darkorange;border-radius: 0 15px 0 0;margin-top:-10px;}
.title_c/* --みどり--- */{height: 40px;background:#12B448;border-radius: 0 15px 0 0;margin-top:-10px;}
.title_d/* --ピンク--- */{height: 40px;background:#DC42C3;border-radius: 0 15px 0 0;margin-top:-10px;}
/* ---------ENTER ボタン----------------- */
.enter{width: 80px;height: 50px;border-radius: 50%;
	     margin: 12px 0px 0 20px; background: darkgreen;}
.enter a{font-family: 'Sawarabi Gothic', sans-serif;
	     font-size:16px;font-weight: bold;text-align: center; padding-top: 13px; color: tan;display: block;}
.enter:hover{background: black;transition: all 0.9s ease 0s;}
.enter a:hover{color: red;transition: all 0.9s ease 0s;}

.block{display: flex;}
.sen{border-bottom: dotted 2px #AAAAAA;}

/* ---------------------------------------------------------footer-------------- */
footer{position: fixed;bottom: 0;
       width: 100%;height: 70px;background:black;}
.cresit{display: flex;justify-content: center;}
.dtmicon{width: 50px;height: 50px;margin-top: 10px;}
.jasrac{display: flex;}
.jasrac_mark{width: 50px;height: 50px;margin-top: 10px;margin-left: 50px;}
.jasrac p{font-size: 10px;color:tan;margin-top: 27px;margin-left: 20px;}

/* ---------レスポンシブ------------------------------------------------------------------------- */
@media screen and ( max-width :1500px )
{
main{top:70px;}
main h5/* --曲名--- */{font-size:14px;color:black;}
.enter{background: darkred;width: 80px;height: 40px;border-radius: 50%;margin: 15px 0px 0 20px;}
.enter a{font-size:16px;text-align: center; padding-top: 8px;}
.list{margin: 10px 0 10px 15px;}
}

@media screen and ( max-width :1050px )
{
main{display: flex;flex-direction: column;top:70px;}
.no1,.no2,.no3{width: 100%;}
main h5/* --曲名--- */{font-size:12px;color:black;}
.enter{background: darkblue;width: 80px;height: 40px;border-radius: 50%;margin: 12px 0px 0 10px;}
.enter a{font-size:16px;text-align: center; padding-top: 8px;}
.list{margin: 10px 0 10px 7px;}
}

@media screen and ( max-width :600px )
{
main{display: flex;flex-direction: column;top:70px;}
.no1,.no2,.no3{width: 100%;}
.enter{background: darkgreen;width: 80px;height: 40px;border-radius: 50%;margin: 12px 0px 0 10px;}
}
@media screen and ( max-width :450px )
{
/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 40px;width: 70px;}

main{top:60px; height: auto;padding-bottom:50px;}
.enter{background: darkgreen;width: 80px;height: 40px;border-radius: 50%;margin: 12px 0px 0 10px;}
main h3/* --title--- */{font-size:15px;padding-top: 7px;padding-left: 20px;}
.title_a,.title_b,.title_c,.title_d{height: 30px;}
.list{margin: 10px 0 10px 15px;}
footer{height: 40px;}
.dtmicon{width: 30px;height: 30px;margin-top: 5px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 40px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}

@media screen and ( max-width :320px )
{
.dtmicon{width: 30px;height: 30px;margin-top: 5px;margin-left: 30px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 20px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}