@charset "utf-8";

/*=====================================               MUSIC  ================*/
.music{display: flex;width:100%;text-align: center;}

.music_left{margin-top: 60px;width:25%;height:100vh;}
    .music_1{height: 48%;} /* 画像の高さ */
    .music_2{height: 52%;} /* 画像の高さ */

.music_center{position: relative;top: 60px;width:50%;height:100vh;}
    /*========= DATAボタン 歌詞ボタン 大きさ ===============*/
    .btn_data,.btn_kasi{position: absolute;text-align: center;
                        width: 70px;height:70px;}
    .btn_data h3,.btn_kasi h3{width: 70px;height:70px;
                              font-size: 15px;padding: 25px 0 0 0;}
    /* DATAボタン 位置 */
    .btn_data{top: 20px;left:20px;z-index: 99;background: darkorange;}
    .btn_data h3{font-family: 'Oswald', sans-serif;letter-spacing: 2px;color:white;}
    .btn_data:hover{background-color: darkred;}
     /* 「閉」ボタン の位置と大きさと色 */
    .closebtn{
    	position:absolute;z-index: 1000;
    	transform: translate(-50%,-50%);top:120px;left:50%;
      background: black;
    	cursor: pointer;
      width: 70px;height:70px;}
    /* DATAボタン close時「閉」の上左のアキと色 */
    .btn_close{position:absolute;top:23px;left:26px;color:yellow;}
    .closebtn:hover{background: red;}

    /*========= DATA の内容 ===============*/
    #data-nav{position:fixed;z-index: 999;
    	top:-120%;left:0;width:100%;height: 100vh;/*ナビの高さ*/
    	background:#F5F5DC;
    	transition: all 0.6s;}
    #data-nav.panelactive{top: 0;}
    #data-nav.panelactive #data-nav-list{
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;}
    /*========= 「閉」の中のレイアウト ===============*/
    /*リストの箱の大きさと位置*/
    #data-nav ul {width: 600px;
        position: absolute;
        z-index: 999;
        top:390px;left:50%;
        transform: translate(-50%,-50%);}
    /*「閉」の中のリスト設定*/
    #data-nav-list li{
      font-family: 'Oswald', sans-serif;
    	list-style: none;text-align: center;
    	font-size: 17px;color: tan;
    	text-decoration: none;
    	padding:0px;
    	display: block;
    	text-transform: uppercase;
      line-height: 1.7;
    	letter-spacing: 0.1em;
    	font-weight: bold;}
    #data-nav-list li span{color: dimgray;}

    /*========= 歌詞ボタン ===============*/
    /* 歌詞ボタン 位置*/
    .btn_kasi{top: 90px;left:20px;z-index: 99;background: darkgreen;}
    .btn_kasi h3{color:white;}
    .btn_kasi:hover{background-color: darkred;}

    /*==== コンテンツ　　music_center を　relative　に、ここを　absolute ======*/
    .music_center_group{position: absolute;transform: translate(-50%,-50%);
                        z-index: 1;/* ここを上にしないと不都合がある　*/
                        width: 100%;text-align: center;
                        top: 46%;left:50%;}
    /*========= 貧弱アイコンの回転 ===============*/
    .dtm_ikon img{width:70px;text-align: center;margin: 10px auto 0;}
    .maru{transform: translateY(-50%) translateX(-50%);}
    .maru{animation: rotation-s2 10s linear infinite;
         right: calc(50% - 5px);top: calc(50% - 5px);}
    /*========= 文字 ===============*/
    .text_kyokumei{/* 文字　「曲名」　*/
      font-family: 'Oswald', sans-serif;letter-spacing: 2px;font-size: 30px;
      margin-top: 10px;line-height:0.8;color:tan;}
    .text_kyokumei_sub{/* 文字　「を打ち込んでみた」　*/
      font-size: 18px;color:silver;}
    .text_ver{/* 文字　「ver1 ver2」　*/
      font-family: 'Oswald', sans-serif;font-size: 15px;margin-top: 5px;
      letter-spacing: 2px;line-height:0.8;color:silver;}
    /*========= audio ===============*/
    .audio_group{margin-top: 80px;}
    audio{margin: 5px 0px 0px 0px;width: 70%;}

.music_right{margin-top: 60px;width:25%;height:100vh;}
    .music_3{height: 48%;} /*=== 画像の高さ ===*/
    .music_4{height: 52%;} /*=== 画像の高さ ===*/

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

@media screen and (max-width:1540px)
{
/*========= DATAボタン 歌詞ボタン ===============*/
/*  DATAボタン 歌詞ボタン 大きさ　　*/
.btn_data,.btn_kasi{width: 60px;height:60px;}
.btn_data h3,.btn_kasi h3{
    width: 60px;height:60px;font-size: 13px;padding: 22px 0 0 0;}
/*  DATAボタン 歌詞ボタン 位置　　*/
.btn_data{top: 10px;left:10px;}
.btn_kasi{top: 70px;left:10px;}
/*========= music_center_group ===============*/
.music_center_group{top: 40%;left:50%;}
/*  貧弱アイコンの回転   */
.dtm_ikon img{width:50px;margin: 50px auto 0;}
/*  文字 　　*/
.text_kyokumei{letter-spacing: 2px;font-size: 25px;
               margin-top: 10px;line-height:0.9;}/* 曲名 */
.text_kyokumei_sub{font-size: 15px;}/*「を打ち込んでみた」*/
.text_ver{font-size: 15px;margin-top: 5px;}/*「ver1 ver2」*/
.audio_group{margin-top: 50px;}
audio{margin: 5px 0px 0px 0px;width: 80%;}

}

@media screen and (max-width:700px)
{
.music_left,.music_right{display: none;}
.music_center{top: 60px;width:100%;height:100vh;}
.music_center_group{top: 40%;left:50%;}
.closebtn{
  position:absolute;z-index: 1000;
  transform: translate(-50%,-50%);top:100px;left:50%;
  background: black;
  cursor: pointer;
  width: 40px;height:40px;}
/* DATAボタン close時「閉」の上左のアキと色 */
.btn_close{position:absolute;top:7px;left:11px;}

/*  DATAボタン 歌詞ボタン 大きさ　　*/
.btn_data,.btn_kasi{width: 50px;height:50px;}
.btn_data h3,.btn_kasi h3{width: 50px;height:50px;
                      font-size: 13px;padding: 15px 0 0 0;}
/*  DATAボタン 歌詞ボタン 位置　　*/
.btn_data{top: 10px;left:10px;}
.btn_kasi{top: 60px;left:10px;}

/*========= 「閉」の中のレイアウト ===============*/
/*リストの箱の大きさと位置*/
#data-nav ul {width: 450px;
    top:350px;left:50%;
    transform: translate(-50%,-50%);}
/*「閉」の中のリスト設定*/
#data-nav-list li{
  font-size: 15px;
  padding:0px;
  line-height: 1.8;
  letter-spacing: 0.1em;}
  /* DATAボタン close時「閉」の上左のアキと色 */
  .btn_close{position:absolute;top:9px;left:11px;}
.audio_group{margin-top: 50px;}
audio{margin: 5px 0px 0px 0px;width: 370px;}
.text_ver{font-size: 15px;margin-top: 5px;}/*「ver1 ver2」*/
}

@media screen and (max-width:450px)
{
.btn_data h3{font-size: 15px;padding: 14px 0 0 0;}
.btn_kasi h3{font-size: 15px;padding: 17px 0 0 0;}

/*========= music_center_group ===============*/
.music_center_group{top: 30%;left:50%;}
/*  貧弱アイコンの回転   */
.dtm_ikon img{width:50px;}
/*  文字 　　*/
.text_kyokumei{letter-spacing: 2px;font-size: 25px;
               margin-top: 30px;line-height:0.9;}/* 曲名 */
.text_kyokumei_sub{font-size: 15px;}/*「を打ち込んでみた」*/
.text_ver{font-size: 15px;margin-top: 3px;}/*「ver1 ver2」*/
.audio_group{margin-top: 60px;}
audio{margin-top: 5px;height: 40px;width: 270px;}

/*========= 「閉」の中のレイアウト ===============*/
/* DATAボタン close時「閉」の位置と色 */
.btn_close{position:absolute;top:10px;left:11px;}
/*リストの箱の大きさと位置*/
#data-nav ul {width: 450px;
    top:350px;left:50%;
    transform: translate(-50%,-50%);}
/*「閉」の中のリスト設定*/
#data-nav-list li{
  font-size: 12px;
  padding:0px;
  line-height: 1.8;
  letter-spacing: 0.1em;}
}

@media screen and (max-width:321px)
{
.music_center_group{top: 35%;left:50%;}
.text_kyokumei{letter-spacing: 2px;font-size: 20px;
               margin-top: 10px;line-height:0.9;}/* 曲名 */
.text_kyokumei_sub{font-size: 12px;}/*「を打ち込んでみた」*/
.text_ver{font-size: 15px;margin-top: 3px;}/*「ver1 ver2」*/
.audio_group{margin-top: 20px;}
audio{margin-top:-10px;height: 40px;width: 240px;}
/*========= 「閉」の中のレイアウト ===============*/
/*「閉」の位置*/
.closebtn{transform: translate(-50%,-50%);top:85px;left:50%;}
/*リストの箱の大きさと位置*/
#data-nav ul {width: 300px;
    top:245px;left:50%;
    transform: translate(-50%,-50%);}
/*「閉」の中のリスト設定*/
#data-nav-list li{
  font-size: 10px;
  padding:0px;
  line-height: 1.7;
  letter-spacing: 0.1em;}
}