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

body{background:whitesmoke;}
a {text-decoration: none;display: block;}
li{color:#696969;}
.song{cursor: pointer;}

/* -------------------- header ------------------------------------- */
/* --戻る の image ----------------------------------------- */
.p_return_grup{width:50px;height:50px;margin: 10px 20px 0 10px;}
/* --　連続再生　MENU に移動　-------------------------------- */
.return_grup,.return_grup_l,.return_grup_r{display: flex;}
.return_grup h5{font-size: 20px;color:linen;padding-top: 20px;}
/* -------黒の 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 img{width: 50px;height: 50px;margin-left: 20px;margin-top: 0px;}
.yajirusi_right img{width: 50px;height: 50px;margin-right: 20px;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:165px;padding-bottom:50px;}

/* ---------プルダウン　---------------------------------------- */
/* ---------SONG ▼ openのバック----------------------------------------- */
.song{height: 40px;font-size: 18px;position: relative;
  background:silver;color:black;padding-top: 7px;display: block;}
.song:hover{background:#8fcccc;color:darkgreen;}

.hidden_box{width: 100%;}
.hidden_show{width: 100%;display: flex;justify-content: space-between;}
.song_L,.song_R{width: 50%;border: 1px solid tan;}
/*ボタンホバー時*/
.hidden_box label:hover {color:yellow;}/*チェックは見えなくする*/
.hidden_box input {display: none;}

/*中身を非表示にしておく*/
.hidden_box .hidden_show{
    height: 0;padding: 0px;overflow: hidden;transition: 0.8s;}

/*クリックで中身表示　プルダウンのバック（の高さ*/
.hidden_box input:checked ~ .hidden_show
{padding: 0px 0px;height: 317px;}

/* ---------プルダウンBOXの中身------------------------------- */
.hidden_box{display: block;position: fixed;top:120px;
  width:100%;height:20px;right: 0px;
  text-align: center;padding-top:0px;z-index: 100;}

.A1,.A2,.A3,.A4,.A5,.A6,.A7,.A7,.A8{background:darkgreen;height: 40px;}
.A1 a,.A2 a,.A3 a,.A4 a,.A5 a,.A6 a,.A7 a,.A8 a
{display: block; color: tan;font-size:15px;padding:6px;}
.A1 a:hover {background:darkblue;color:silver;}
.A2 a:hover {background:#333333;color:silver;}
.A3 a:hover {background:darkred;color:silver;}
.A4 a:hover {background:darkblue;color:silver;}
.A5 a:hover {background:#333333;color:silver;}
.A6 a:hover {background:darkred;color:silver;}
.A7 a:hover {background:darkblue;color:silver;}
.A8 a:hover {background:#333333;color:silver;}
.A3 a:hover {background:darkred;color:silver;}

/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-family: "Sawarabi Mincho";font-size: 20px;
        margin:15px 0 0px 30px;}
.no1 h3,.no2 h3,.no3 h3{display: inline-block;width: 80%;overflow: hidden;
        text-overflow: ellipsis;white-space: nowrap;}/*----折り返し禁止-----*/
.no1 h3 span,.no2 h3 span,.no3 h3 span
{font-size: 12px;color:red;}/*----補足-----*/

.no1 h3{color: #663300;}/* -------no1の曲名の色---------- */
.no2 h3{color: navy;}/* -------no2の曲名の色---------- */
.no3 h3{color: darkred;}/* -------no3の曲名の色---------- */
.no1,.no2,.no3{width:33%;margin-bottom: 20px;}
.no1{background-color: tan;}
.no2{background-color: #BAD3FF;}
.no3{background-color:pink;}
/* --------- （曲名サブ）----------------------------------------- */
main h5{font-family: serif;color:black;font-size: 15px;margin:10px 0 0px 40px;}
main h5{display: inline-block;width: 80%;overflow: hidden;
        text-overflow: ellipsis;white-space: nowrap;}/*----折り返し禁止-----*/

/* ---------（audio）----------------------------------------- */
audio{width: 88%;height: 50px;margin:0 0 0 30px;}

/* --------- （曲名　ダウンロードページへ 歌詞　WORK）------------------------------ */
/* --------- （曲名　ダウンロードページへ）---------------------- */
.dl1,.dl2,.dl3{display: flex;justify-content: space-between;}
.dl_L{height: 70px;width: 250px;text-align: center;
      background: black;border-radius: 10px;margin: 10px 0 20px 30px;}
.dl_L h4{line-height: 1.2;padding-top: 15px;}
/* --------- （曲名）------------------------ */
main h4{font-family: serif;font-size: 17px;color: tan;}
main h4{display: inline-block;width:90%;overflow: hidden;
        text-overflow: ellipsis;white-space: nowrap;}/*----折り返し禁止-----*/
/* --------- （ダウンロードページへ）----------- */
main p{color: white;font-size: 13px;padding-top:0px;}
main p{display: inline-block;width: 80%;overflow: hidden;
       text-overflow: ellipsis;white-space: nowrap;}/*----折り返し禁止-----*/
/* --------- （「歌詞」、「WORK」）---------------------- */
.dl_R{width: 100px;height: 70px;
      margin-top: 10px;margin-right: 20px;}
.dl_R h4{display: block;height: 28px;width: 70px;text-align: center;
         font-size:14px;background: red;color:white;border-radius: 5px;
         margin: 0px 0px 15px 10px;padding-top: 3px;}
.dl_L:hover{background: darkgreen;}

/*---------data----------------------------------*/
.data1A label,.data2A label,.data3A label{
  display: block;cursor: pointer;text-align: center;padding: 0.4em;}
.data1A label{color: #ffffff;background: #663300;}
.data2A label{color: #ffffff;background: navy;}
.data3A label{color: #ffffff;background: darkred;}

.data1B label,.data2B label,.data3B label{
    display: block;cursor: pointer;text-align: center;
    padding: 0.4em;margin-top: -10px;
    color: #ffffff;background: #999999;}
input[type="checkbox"] {display: none;}
ul {
  list-style: none;
  margin: 0 0 0.5em 0;padding: 0;height: 0;
  overflow: hidden;transition: height 0.6s;}
#acm1A:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
#acm1B:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
#acm2A:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
#acm2B:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
#acm3A:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
#acm3B:checked + ul{height: auto;}/*--中身の高さ自動指定-------*/
li {
  margin: 0px;padding: 5px 0px 5px 20px;line-height: 1;background: #eeeeee;}
.data1A a,.data2A a,.data3A a {
  display: block;text-decoration: none;
  padding: 0.8em 0.8em 0 0.8em;
  color: #000000;background: #eeeeee;}
.data1A li,.data1B li,.data2A li,.data2B li,.data3A li,.data3B li
    {font-size: 12px;}
li:last-child a {padding-bottom: 0.8em;}
/* ---------------------------------------------------------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画像---- */
.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 )
{
/* --戻る の image ----------------------------------------- */
  .p_return_grup{width:30px;height:30px;margin: 10px 15px 0 10px;}
  /* --　連続再生　MENU に移動　-------------------------------- */
  .return_grup h5{font-size: 15px;padding-top: 15px;}

/* -------黒の obi-------------------------------------------- */
  .obi{height:40px;top:50px;}
  .obi h5{padding-top: 8px;font-size: 25px;}/* -----（帯の中の文字）------ */
  .obi span{font-size:15px;}/* -----（帯の中の文字 No）------ */
  .yajirusi_left img{width: 40px;height: 40px;margin-left: 20px;}
  .yajirusi_right img{width: 40px;height: 40px;margin-right: 20px;}
/* ---------SONG ▼ openのバック----------------------------------------- */
  .song{height: 30px;font-size: 12px;padding-top: 5px;position: relative;top:0px;}
  /*中身を非表示にしておく*/
  .hidden_box .hidden_show{
      height: 0;padding: 0px;overflow: hidden;transition: 0.8s;}
  /*クリックで中身表示　プルダウンのバック（の高さ*/
  .hidden_box input:checked ~ .hidden_show
  {margin-top: 0px;padding: 0px 0px;height: 317px;}
  /* ---------プルダウンBOXの中身------------------------------- */
  .hidden_box{display: block;position: fixed;top:90px;
    width:100%;height:20px;right: 0px;
    text-align: center;padding-top:0px;z-index: 100;}
  /* --------- プルダウンBOXの中身-nの設定---------------------- */
  .hidden_show{margin-top: 0px}

main{width:100%;position:relative;top:125px;padding-bottom:30px;}
/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-size: 18px;margin:15px 0 0px 30px;}
.no1,.no2,.no3{width:33%;margin-bottom: 20px;}
/* --------- （曲名サブ）----------------------------------------- */
main h5{font-size: 13px;margin:3px 0 0px 50px;}

audio{width: 88%;height: 40px;margin:0 0 0 30px;}

/* --------- （「歌詞」　「WORK」）---------------------- */
.dl_R h4{display: block;height: 28px;width: 65px;text-align: center;
         font-size:12px;background: red;color:white;border-radius: 5px;
         margin: 0px 0px 15px 10px;padding-top: 4px;}
/* ---------------------------------------------------------footer-------------- */
footer{width: 100%;height: 50px;}
.dtmicon{width: 30px;height: 30px;margin-top: 10px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 10px;margin-left: 50px;}
.jasrac p{font-size: 10px;margin-top: 17px;margin-left: 10px;}
}

/* ---------1000px以下  （ここからflex-wrap: wrap に変更）-------------- */
@media screen and ( max-width :1000px )
{
main{top:125px;padding-bottom: 50px;}
/* --------- （歌詞　WORK）---------------------- */
.dl_R{width: 100px;height: 70px;
      margin-top: 10px;margin-right: 20px;}
.dl_R h4{height: 28px;width: 100px;font-size:14px;
         margin: 0px 0px 15px 0px;padding-top: 3px;}
.for_pc{display:flex;flex-wrap: wrap;}
.no1,.no2,.no3{margin:0 auto;width:100%;}
/* --------- （歌詞　WORK）---------------------- */
.dl_R{margin-right:80px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px )
{
main{top:113px;padding-bottom: 40px;}
/* --戻る の image ----------------------------------------- */
.p_return_grup{width:30px;height:30px;margin: 5px 15px 0 5px;}
/* --　連続再生　MENU に移動　-------------------------------- */
.return_grup h5{font-size: 12px;padding-top: 12px;}

/* -------黒の obi-------------------------------------------- */
.obi{height:38px;top:40px;}
.obi h5{padding-top: 10px;font-size: 20px;}/* -----（帯の中の文字）------ */
.obi span{font-size:15px;}/* -----（帯の中の文字 No）------ */
.yajirusi_left img{width: 30px;height: 30px;margin-left: 10px;margin-top: 4px;}
.yajirusi_right img{width: 30px;height: 30px;margin-right: 10px;margin-top: 4px;}
/* ---------プルダウンBOXの中身------------------------------- */
.hidden_box{display: block;position: fixed;top:78px;
    width:100%;height:20px;right: 0px;
    text-align: center;padding-top:0px;z-index: 100;}  /* ------SONG ▼ openのバック----------- */
.song{height: 30px;font-size: 12px;padding-top: 7px;}
.no1,.no2,.no3{margin:0 auto;width:100%;}
.A1,.A2,.A3,.A4,.A5,.A6,.A7,.A7,.A8{background:darkgreen;height: 40px;}
.A1 a,.A2 a,.A3 a,.A4 a,.A5 a,.A6 a,.A7 a,.A8 a
{display: block; color: tan;font-size:12px;padding:10px;}

/* --------- （曲名）----------------------------------------- */
.no1 h3,.no2 h3,.no3 h3{font-size: 15px;margin:10px 0 0px 20px;}
/* --------- （曲名　サブ）----------------------------------------- */
main h5{font-size: 13px;margin:5px 0 0px 20px;}
/* ---------（audio）----------------------------------------- */
audio{width: 300px;height: 40px;margin:0px 0 0px 15px;}
.no1,.no2,.no3{margin: auto;width:100%;}

/* --------- （曲名　ダウンロードページへ 歌詞　WORK）------------------------------ */
/* --------- （曲名　ダウンロードページへ）---------------------- */
.dl_L{height: 67px;width: 220px;margin: 10px 0 20px 20px;}
.dl_L h4{line-height: 1.2;padding-top: 12px;}
/* --------- （曲名）------------------------ */
main h4{width:90%;font-size: 17px;}
/* --------- （ダウンロードページへ）----------- */
main p{font-size: 10px;padding-top:3px;}
/* --------- （歌詞　WORK）---------------------- */
.dl_R{width: 100px;height: 67px;
      margin-top: 10px;margin-right: 20px;}
.dl_R h4{height: 28px;width: 80px;font-size:14px;
        margin: 0px 0px 10px 20px;padding-top: 3px;}

/* ---------footer------------------------------- */
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 )
{
/* --------- （曲名　サブ）----------------------------------------- */
main h5{font-size: 13px;margin:5px 0 0px 20px;}
audio{width: 270px;height: 40px;margin:0px 0 0px 15px;}
/* --------- （歌詞　WORK）---------------------- */
.dl_R h4{padding-top: 5px;}
/* ---------footer------------------------------- */
.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;}

}