/* -----------共通部分----------- */
@charset "UTF-8";
html {font-size: 100%;}

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

/* --大きさの設定------------------------------ */
header{width:100%;height:60px;
      display: flex;justify-content: space-between;background-color:maroon;
      position: fixed;z-index: 100;}
/* --INSTRUMENT------------------------------------------------------ */
header h6{font-family: 'Playfair Display', serif;
        color:white;font-size:25px;padding: 12px 0 0 20px;}
.inst{height:50px;width:100%;
      background: black;position: fixed;top:60px;z-index: 100;
      font-size: 20px;color:tan;text-align: center;padding-top: 3px;}
/* --to insttop------------------------------------------------------ */
/* --"戻る"-------- */
.to_insttop h3{color: yellow;font-size: 18px;margin: 20px 10px 0 0;}
.to_insttop{display: flex;}
.return{width: 50px;height: 50px;margin: 5px 20px 5px 0px;}
.return:hover{opacity: 20%;transition: 1s ease-in-out;}

/* -----楽器名----------------------------------------------------------- */
.inst h5{font-family: "Sawarabi Mincho";color:tan;font-size: 23px;
        padding-top: 10px;}
/* -------aside------------------------------------------------- */
aside{width: 100%;height: 50px;background: black;
	    display: flex;justify-content: space-around;
      position:fixed;bottom:0;z-index: 100;}
aside a{font-family: 'Playfair Display', serif;}
.sankaku{display: flex;}
.sankaku a:hover{color: red;transition: 1s ease-in-out;}

/* --▲------------------------------------------------ */
.before{font-size:18px;width:30px;height:30px;border-radius: 50%;
          background-color: green;color: red;
          margin: 10px 0 30px 0px;padding: 0px 0 0 7px;}
.before a{color: white;}
/* --▼----------------------------------------------- */
.after {font-size:18px;width:30px;height:30px;border-radius: 50%;
          background-color: orange;
          margin: 10px 0 0px 30px;padding: 2px 0 0 7px;}
.after a{color: white;}
/* -------aside-------------------------------------------------- */
.for_pc{display:flex;justify-content: space-around;}

main{width:100%;position:relative;top:150px;padding-bottom:50px;}


/* ---------プルダウン----------------------------------------- */
/* ---------「 ▼other instrument OPEN 」------------------------- */
label{font-size: 18px;color:darkgreen;}

/*ボタンホバー時*/
.hidden_box label:hover {color:red;}/*チェックは見えなくする*/
.hidden_box input {display: none;}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;padding: 0;
    overflow: hidden;opacity: 1;
    transition: 0.8s;}
/*クリックで中身表示  中身の高さ*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;height:133px;opacity: 1;}

/* ---------プルダウンBOXの中身------------------------------- */
.hidden_box{position: fixed;top:110px;width: 100%;text-align: center;
  padding-top: 5px;background: white;opacity: 1;z-index: 100;}
/* ---------プルダウンBOXの中身の文字サイズと色------------------------------- */
.sec_A a,.sec_B a
{display: block; color: tan;font-size:19px;padding:6px;}

.A1 a:hover {background:black;}
.A2 a:hover {background:red;}
.A3 a:hover {background:black;}
.A4 a:hover {background:red;}
.B1 a:hover {background:black;}
.B2 a:hover {background:red;}
.B3 a:hover {background:black;}
.B4 a:hover {background:red;}
/* ---------楽器名のバックの天地サイズ　40px------------------------------- */
.sec_A,.sec_B
{display: flex;justify-content: space-between;}
.A1,.A3,.B2,.B4{background: darkgreen;}
.A2,.A4,.B1,.B3{background: maroon;}
/* ---------楽器名のバックの左右サイズ------------------------------- */
.A1,.A2,.A3,.A4,.B1,.B2,.B3,.B4{width:25%;height:40px;}

/* --------- 360px　320px　関係あり------------------------------------------------- */
/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-family: "Sawarabi Mincho";font-size: 20px;
        color:darkgreen;margin:15px 0 -10px 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:0 0 -20px 40px;}
/* --------- （ダウンロードをする）----------------------------------------- */
main p{font-size: 13px;margin:0 0 20px 40px;}
/* ---------（audio）----------------------------------------- */
audio{width: 88%;height: 50px;margin:0 0 0 30px;}

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


/* ---------600px以下---------------------------------------------- */
@media screen and ( max-width :1000px )
{
.for_pc{display:flex;flex-wrap: wrap;}
.no1,.no2,.no3{margin:0 auto;width:100%;}
}

/* ---------450px以下---------------------------------------------- */
@media screen and ( max-width :450px )
{
.for_pc{display:flex;flex-wrap: wrap;}

/* --大きさの設定------------------------------ */
header{height:40px;}
header h6{font-size:20px;padding: 8px 0 0 20px;}
/* --INSTRUMENT------------------------------------------------------ */
.inst{height:40px;top:40px;
      font-size: 20px;padding-top: 3px;}
.inst h5{color:tan;font-size:18px;padding-top:4px;}
/* --------------------------------------------------------------------- */
main{top:110px;padding-bottom:50px;}
main h5{font-size: 15px;margin-left:20px;padding-top: 6px;}
.for_pc{display:flex;justify-content: space-between;}
/* --to insttop
.to_insttop{margin: 6px 10px 0 0px;}
.to_insttop h3{font-size: 13px;padding-top:8px;padding-left: 3px;}----------- */
/* --to insttop------------------------------------------------------ */
/* --"戻る"-------- */
.to_insttop h3{font-size: 13px;margin: 10px 5px 0 0;}
.return{width: 30px;height: 30px;margin: 5px 10px 5px 0px;}
/* ---------プルダウン----------------------------------------- */
/* ---------「 ▼other instrument OPEN 」------------------------- */
label{font-size: 14px;color:darkgreen;}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;padding: 0;
    overflow: hidden;opacity: 1;
    transition: 0.8s;}
/*クリックで中身表示  中身の高さ*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;height: 122px;opacity: 1;}

/* ---------プルダウンBOXの中身------------------------------- */
.hidden_box{position: fixed;top:80px;width: 100%;text-align: center;
  padding-top: 5px;background: white;opacity: 1;z-index: 100;}
/* ---------プルダウンBOXの中身の文字サイズと色------------------------------- */
.sec_A a,.sec_B a
{display: block; color: tan;font-size:12px;padding:10px;}
/* ---------楽器名のバックの天地サイズ　40px------------------------------- */
.sec_A,.sec_B
{display: flex;justify-content: space-between;height:35px;}

/* --------- （inst名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-size: 15px;margin:10px 0 -10px 20px;}
/* --------- （trckデータ詳細）----------------------------------------- */
main h5{font-size: 13px;margin:-20px 0 -10px 20px;}
/* --------- （ダウンロードをする）----------------------------------------- */
main p{font-size: 13px;margin:5px 0 18px 20px;}
/* ---------no （audio）----------------------------------------- */
audio{width: 300px;height: 40px;margin:0px 0 0px 15px;}
.no1,.no2,.no3{margin: auto;width:100%;}
}

/* ---------320px以下-------------- */
@media screen and ( max-width :320px )
{
audio{width: 270px;height: 40px;margin:0px 0 0px 15px;}
}