@charset "UTF-8";
html {font-size: 100%;}

body{background: #999966;}
a{text-decoration: none;}

header{width:100%;margin-top:0px;height: 50px;
	    display: flex;justify-content: space-between;
			text-align: center;background: black;}
/* ------次-------------------------------------------------- */
.more{width: 70px;height:34px;border-radius: 5px;background: tan;
	margin-top:8px;margin-right: 20px;}
.more h5{display: block;font-family: "Sawarabi Mincho";
         font-size: 20px;font-weight: bold;color:black;padding-top:6px;}
.more:hover{background: yellow;}
/* ------header-------------------------------------------------- */
header h3{font-family: "Sawarabi Mincho";color:tan;
	      font-size: 30px;padding-left: 50px;padding-top: 10px;}
header span{color:tan;font-size: 15px;padding-left: 10px;}
.next{font-size: 15px;width: 50px;height: 30px;
	margin-top: 10px;background: tan;padding-top: 0px;}
.next h2{color:black;}
.next{border-radius: 5px;margin-right: 50px;}
.wrap{width: 500px;height: 480px;background: white; margin: 60px auto;}

/* ------header 下の帯　-------------------------------------------------- */
footer{position: absolute;width: 100%;height: 50px;text-align: center;
			 display: flex;justify-content: center;top: 50px;}
.for_top h3,.for_data h3{font-size: 18px;color:#fff;margin-top: 10px;}
.for_top,.for_data{width: 50%;height: 50px;}
.for_top{background: #036;}
.for_data{background: #906;}
.for_top h3:hover{color:yellow;}
.for_data h3:hover{color:yellow;}
/* ------START-------------------------------------------------- */
#list1{display: none;}

/* ------AUDIO-------------------------------------------------- */
section{width:100%;height: 70px;background: #EEE8AA;}
audio{width: 440px;margin: 9px 0 0 30px;}
section p{font-size: 12px;margin: 5px 0 0 50px;}
/* ------UL  LIST------------------------------------------------- */
.kyokumei{display: flex;}
ul{line-height: 2;margin: 30px 0 30px 50px;}
li{font-size:15px;color: darkred; }/* ------●と←now playing-------------- */
ul a{color: darkgreen;}/* ------曲名-------------- */

.link{display: flex;justify-content: flex-start;}
.coment{line-height: 2;font-size: 12px;
	      margin-top:20px;margin-left: 40px;color:darkred;}

.modoru{width: 80px;height:30px;border-radius: 5px; margin-left: 40px;
      	background: #136D24;text-align: center;}
.modoru a{display: block;font-size:18px; padding-top: 1px;color: white;}
.modoru:hover{background: darkorange;}
.modoru a:hover{color: white;}

.melo{width: 100px;height:30px;border-top-left-radius: 5px;
	   border-bottom-left-radius: 5px; margin-left: 30px;
	   background: darkred;text-align: center;}
.melo a{display: block;font-size:18px; padding-top: 1px;color: white;}
.melo:hover{background: darkorange;}
.melo a:hover{color: darkred;}

.bgm{width: 100px;height:30px;border-top-right-radius: 5px;
	   border-bottom-right-radius: 5px;
	   background: black;text-align: center;}
.bgm a{display: block;font-size:18px; padding-top: 1px;color: white;}
.bgm:hover{background: darkorange;}
.bgm a:hover{color: black;}

.ver1{width: 100px;height:30px;border-top-left-radius: 5px;
	   border-bottom-left-radius: 5px;
	   margin-left: 40px; background:  #FF4F50;text-align: center;}
.ver1 a{display: block;font-size:18px; padding-top: 1px;color: white;}
.ver1:hover{background: #32CD32;}
.ver1 a:hover{color: #FF4F50;}

.ver2{width: 100px;height:30px;border-top-right-radius: 5px;
	    border-bottom-right-radius: 5px;
	    background: #4B0082;text-align: center;margin-right: 40px;}
.ver2 a{display: block;font-size:18px;padding-top: 1px;color: white;}
.ver2:hover{background: #32CD32;}
.ver2 a:hover{color: #4B0082;}

aside{width: 100%; margin: 50px auto;}
img{width: 150px;height: 150px; margin: 10px auto;}

/* ---------レスポンシブ-------------------------------------------------- */
@media screen and ( max-width :1450px )
{
}

@media screen and ( max-width :1200px )
{
/* ------header 下の帯　-------------------------------------------------- */
footer{height: 50px;top: 50px;}
.for_top h3,.for_data h3{font-size: 16px;margin-top: 2px;}
.for_top,.for_data{width: 50%;height: 30px;}
.wrap{margin: 38px auto;}
}

@media screen and ( max-width :600px )
{
/* ------header-------------------------------------------------- */
header h3{font-size: 20px;padding-left: 50px;padding-top: 15px;}

.wrap{width: 450px;height: 480px;margin: 38px auto;}
/* ------AUDIO-------------------------------------------------- */
section{width:100%;height: 70px;background: #EEE8AA;}
audio{width: 400px;margin: 9px 0 0 25px;}
section p{font-size: 12px;margin: 5px 0 0 50px;}
}

@media screen and ( max-width :450px )
{
header{width:100%;height: 40px;}
header h3{font-size: 20px;padding-left: 15px;padding-top: 10px;}
header span{font-size: 12px;padding-left: 5px;}
/* ------次-------------------------------------------------- */
.more{width: 50px;height:26px;border-radius: 5px;margin-top:7px;margin-right: 10px;}
.more h5{font-size: 20px;padding-top: 6px;}
.wrap{width: 100%;height: 500px; margin: 40px auto;}
.next{font-size: 12px;width: 40px;height: 20px;margin-top: 10px;margin-right: 10px;}
/* ------header 下の帯　-------------------------------------------------- */
footer{height: 40px;top: 40px;}
.for_top,.for_data{width: 50%;height: 40px;}
.for_top h3,.for_data h3{font-size: 15px;margin-top: 8px;}

/* ------AUDIO-------------------------------------------------- */
section{height: 60px;}
audio{width: 90%;height: 80%;margin: 6px 0 0 18px;}
section p{font-size: 12px;margin: 5px 0 0 40px;}
/* ------UL  LIST------------------------------------------------- */
ul{line-height: 2.5;margin:30px 0 0px 40px;}
li{font-size:13px;}/* ------●と←now playing-------------- */
.coment{line-height: 1.7;margin-top:20px;margin-left: 40px;padding-bottom: 20px;}

.modoru{width: 60px;height:30px;margin-top: 40px;margin-left: 20px;}
.modoru a{font-size:15px; padding-top: 6px;}

.melo{width: 70px;height:30px;margin-top: 40px;margin-left: 15px;}
.melo a{font-size:15px; padding-top: 6px;}

.bgm{width: 70px;height:30px;margin-top: 40px;}
.bgm a{font-size:15px; padding-top: 6px;}

.ver1{width: 80px;height:30px;margin-top: 40px;margin-left: 15px;}
.ver1 a{font-size:15px; padding-top:7px;}
.ver2{width: 80px;height:30px;margin-top: 40px;
       margin-right: 20px;text-align: center;}
.ver2 a{font-size:15px;padding-top:7px;}

aside{display: none;}
}

@media screen and ( max-width :400px )
{
	header{width:100%;height: 40px;}
	header h3{font-size: 20px;padding-left: 15px;padding-top: 10px;}
	header span{font-size: 12px;padding-left: 5px;}
	/* ------次-------------------------------------------------- */
	.more{width: 40px;height:26px;border-radius: 5px;margin-top:7px;margin-right: 10px;}
	.more h5{font-size: 15px;padding-top:5px;}

	/* ------header 下の帯　-------------------------------------------------- */
	footer{height: 40px;top: 40px;}

	.modoru{width: 60px;height:30px;margin-top: 20px;margin-left: 15px;}
	.modoru a{font-size:15px; padding-top: 7px;}

	.melo{width: 65px;height:30px;margin-top: 20px;margin-left: 10px;}
	.melo a{font-size:13px; padding-top: 7px;}

	.bgm{width: 65px;height:30px;margin-top: 20px;}
	.bgm a{font-size:13px; padding-top: 7px;}

	.ver1{width: 70px;height:30px;margin-top: 20px;margin-left: 10px;}
	.ver1 a{font-size:13px; padding-top:7px;}

	.ver2{width: 70px;height:30px;margin-top: 20px;
	        margin-right: 15px;text-align: center;}
	.ver2 a{font-size:13px;padding-top:7px;}
}

@media screen and ( max-width :320px )
{
header h3{font-size: 16px;padding-left: 15px;padding-top: 12px;}
header span{font-size: 12px;padding-left: 5px;}
section{height: 50px;}
.wrap{width: 100%;height: 500px; margin: 40px auto;}
.next{font-size: 12px;width: 40px;height: 20px;margin-top: 10px;margin-right: 10px;}
.next h2{padding-top: -4px;}
/* ------AUDIO-------------------------------------------------- */
audio{width: 90%;height: 70%;margin: 8px 0 0 16px;}
/* ------UL  LIST------------------------------------------------- */
ul{line-height: 1.7;margin:25px 0 0px 30px;}
li{font-size:13px;}/* ------●と←now playing-------------- */
.coment{font-size: 10px;margin-top: 5px;margin-left: 40px;padding-bottom: 17px;}



}