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

body{background:white;}
a {text-decoration: none;display: block;}

/* -------黒の obi-------------------------------------------- */
.obi{height:50px;width:100%;display: flex;justify-content: space-between;
      background: black;position: fixed;top:70px;z-index: 100;}
.obi h5{font-family: "Sawarabi Mincho";text-align: center;
         color:tan;padding-top: 10px;font-size: 30px;}/* -----（帯の中の楽器名）------ */
.obi span{font-size: 20px;}/* -----（帯の中の楽器名 No）------ */

.yajirusi_left,.yajirusi_right{display: flex;}
.yajirusi_left h5,.yajirusi_right h5{font-family: "Sawarabi Mincho";color:tan;
      padding-top: 15px;font-size: 20px;width:120px;}
.yajirusi_left h5{text-align: left;}
.yajirusi_right h5{text-align: right;}
.yajirusi_left img{width: 50px;height: 50px;margin-left: 10px;margin-right: 0px;margin-top: 0px;}
.yajirusi_right img{width: 50px;height: 50px;margin-left: 0px;margin-right: 10px;margin-top: 0px;}
.yajirusi_left img:hover{opacity: 0%;transition: all 1.0s;}
.yajirusi_right img:hover{opacity: 0%;transition: all 1.0s;}

.for_pc{display:flex;justify-content: space-around;}
main{width:100%;position:relative;top:124px;padding-bottom:74px;}
/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-family: "Sawarabi Mincho";font-size: 20px;
        color:darkgreen;margin:15px 0 -5px 30px;}
.no1,.no2,.no3{width:33%;}
.no1{background-color: tan;}
.no2{background-color: #BAD3FF;}
.no3{background-color:pink;}
/* --------- （楽器名）------------------------------------------- */
main h5{font-family: serif;font-size: 15px;margin:7px 0 5px 35px;line-height: 1.3;}

/* ---------（audio）---------------------------------------- */
audio{width: 80%;height: 50px;margin:0 0 0 30px;}
/* --------- main p（ダウンロードをする）------------ */
main p{font-size: 13px;color:darkred;margin:0 0 20px 40px;}
main p:hover{color:yellow;}
/* ------------------------------------------------footer-------------- */
footer{position: fixed;bottom: 0;
       width: 100%;height: 70px;background:crimson;}
.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;}


/* ---------レスポンシブ--------------------------------------------------------- */
/* -----------------------------------------------------1500px以下-------------- */
@media screen and ( max-width :1500px )
{
/* -------黒の obi----------------------------------------------- */
.obi{top:50px;}
main{width:100%;position:relative;top:105px;padding-bottom:74px;}
/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-size: 17px;margin:15px 0 -5px 30px;}
/* --------- （楽器名）------------------------------------------- */
main h5{font-size: 12px;margin:7px 0 5px 30px;}
}
/* -----------------------------------------------------900px以下-------------- */
@media screen and ( max-width :900px )
{
/* -------黒の obi----------------------------------------------- */
.obi{height:40px;width:100%;background: black;top:50px;}
.obi h5{padding-top: 8px;font-size: 24px;}/* --------- （帯の中の楽器名）------------ */
.obi span{font-size: 16px;}/* -----（帯の中の楽器名 No）------ */

.yajirusi_left,.yajirusi_right{display: flex;}
.yajirusi_left h5,.yajirusi_right h5{padding-top: 15px;font-size: 12px;width:75px;}
.yajirusi_left img{width: 40px;height: 40px;margin-right: 0px;}
.yajirusi_right img{width: 40px;height: 40px;margin-left: 0px;}
/* --------- （main---------------------------------------------- */
.for_pc{display:flex;flex-wrap: wrap;}
main{top:93px;padding-bottom:74px;}
/* ---------（audio）---------------------------------------- */
audio{width: 88%;height: 50px;margin:0 0 0 30px;}
.for_pc{display:flex;justify-content: space-around;}
.no1,.no2,.no3{margin:0 auto;width:100%;}
}

/* -----------------------------------------------------450px以下-------------- */
@media screen and ( max-width :450px )
{
/* -------黒の obi------------------------------------------- */
.obi{height:44px;top:40px;}
.obi h5{padding-top: 8px;font-size: 18px;}/* --------- （帯の中の楽器名）------------ */
.obi span{font-size: 15px;}/* -----（帯の中の楽器名 No）------ */
.yajirusi_left,.yajirusi_right{display: flex;}
.yajirusi_left h5,.yajirusi_right h5{padding-top: 15px;font-size: 10px;width:65px;}
.yajirusi_left img{width: 36px;height: 36px;margin-right: 0px;margin-top: 4px;}
.yajirusi_right img{width: 36px;height: 36px;margin-left: 0px;margin-top: 4px;}

main{top:86px;padding-bottom:42px;}
/* --------- （楽器名　サブ）---------------------------------- */
main h5{font-size: 13px;margin:5px 0 3px 20px;}
/* --------- （ダウンロードをする）----------------------------- */
main p{font-size: 11px;margin:3px 0 15px 20px;}
/* ---------no （audio）--------------------------------------- */
audio{width: 300px;height: 40px;margin:0px 0 0px 15px;}
/* --------- （楽器名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-size: 15px;margin:10px 0 -10px 20px;}
.no1,.no2,.no3{margin: auto;width:100%;}
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;}
}

/* -----------------------------------------------------320px以下-------------- */
@media screen and ( max-width :320px )
{
/* -------黒の obi------------------------------------------- */
.obi{height:44px;top:40px;}
.obi h5{padding-top: 12px;font-size: 15px;}/* --------- （帯の中の楽器名）------------ */
.obi span{font-size: 12px;}/* -----（帯の中の楽器名 No）------ */
.yajirusi_left,.yajirusi_right{display: flex;}
.yajirusi_left h5,.yajirusi_right h5{padding-top: 15px;font-size: 10px;width:65px;}
.yajirusi_left img{width: 36px;height: 36px;margin-right: 0px;margin-top: 4px;}
.yajirusi_right img{width: 36px;height: 36px;margin-left: 0px;margin-top: 4px;}

.no1 h3,.no2 h3,.no3 h3{font-size: 15px;margin:10px 0 -5px 20px;}
audio{width: 270px;height: 40px;margin:0px 0 0px 15px;}
.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;}
}