@charset "UTF-8";
html {font-size: 100%;}
a {text-decoration: none;display: block;}

/* -----「DOWNLOAD」の色指定---------------------------------------------------- */
body{background: aliceblue;}
/* -------mp3--------------------------------------------------- */
.mp3{width:500px;margin: 0 auto;
     border: 1px solid midnightblue;
     background-color: #BAD3FF;}

/* ---------450px以下-------------------------------- */
@media screen and ( max-width :450px )
{
/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 40px;width: 70px;}
}

/* --------- ここから下は　WORK と　DL 共通--------------------------------- */
/* -------黒の obi-------------------------------------------------- */
.obi{height:50px;width:100%;background: black;position: fixed;
    top:70px;z-index: 100;text-align: center;padding-top: 4px;}
.obi h5{font-family: "Sawarabi Mincho";color:tan;font-size: 30px;padding-top: 5px;}
/* -----「WORK」「D.L.」---------- */
.obi span{font-family: "Sawarabi Mincho";color:tan;font-size: 15px;
        padding-top: 0px;}
/* -------main------------------------------------------------------ */
main{display:flex;justify-content: space-between;}
main{width:1050px;height: auto;margin: 150px auto 100px;padding-bottom: 5px;}

/* --------- （D.L./曲名  WORK/Instrument）------- */
.mp3 h3{font-family: "Sawarabi Mincho";font-size: 20px;
        color:darkgreen;margin:15px 0 0px 30px;}
/* --------- （情報）----------------------------- */
.mp3 h5{font-family: serif;font-size: 15px;margin:3px 0 3px 30px;}

/* --------- （クリックでダウンロード）----------------------------- */
.mp3 p{font-size: 13px;margin:10px 0 10px 40px;}
/* ---------（audio）----------------------------- */
audio{width: 88%;height: 50px;margin:0 0 -10px 25px;}

footer{position: fixed;z-index: 999;
        width: 100%;height:70px;bottom: 0;background: black;}

/* ---------レスポンシブ----------------------------------------------- */
/* ---------1500px以下-------------- */
@media screen and ( max-width :1500px )
{
/* -------黒の obi-------------------------------------------------- */
.obi{height:40px;top:50px;padding-top: 4px;}
.obi h5{color:tan;font-size: 20px;padding-top: 5px;}
.obi span{font-size: 12px;padding-top: 0px;}
main{display:flex;flex-wrap: wrap;width: 400px;
     margin: 100px auto 50px;padding-bottom: 5px;}
audio{width: 90%;height: 50px;margin:0 0 -10px 25px;}
/* -------mp3--------------------------------------------------- */
.mp3{width:400px;margin-top: 0px;}
footer{height: 30px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px )
{
/* -------黒の obi-------------------------------------------------- */
.obi{height:30px;width:100%;top:40px;}
.obi h5{color:tan;font-size: 15px;padding-top:2px;}
.obi span{font-size: 8px;padding-top: 0px;}
.mp3 h3{font-size: 15px;margin:10px 0 -10px 20px;}
.mp3 h5{font-size: 13px;margin:10px 0 0px 20px;}
/* --------- （クリックでダウンロード）----------------------------- */
.mp3 p{font-size: 13px;margin:3px 0 10px 30px;}
audio{width: 300px;height: 35px;margin:5px 0 0px 15px;}
main{width: 340px;margin: 80px auto 0px;padding-bottom: 5px;}
footer{height: 0px;}
}

/* ---------340px以下-------------- */
@media screen and ( max-width :340px )
{
audio{width: 270px;height: 35px;margin:5px 0 0px 15px;}
main{display:flex;flex-wrap: wrap;width: 310px;
     margin: 80px auto 0px;padding-bottom: 5px;}
}