@charset "utf-8";

/*============================================================
エリア　2
=============================================================*/
/*DATAボタン　　*/
.openbtn{
	position:absolute;z-index: 999;
	top:70px;left: 40px;background: yellow;color:red;
	cursor: pointer;
  width: 50px;height:50px;}
.btn_data{position:absolute;top:10px;left: 7px;}
.openbtn:hover{background: black;}
.closebtn{
	position:absolute;z-index: 1000;
	top:70px;left: 40px;background: black;color:yellow;
	cursor: pointer;
  width: 50px;height:50px;}
.btn_close{position:absolute;top:8px;left:16px;}
.closebtn:hover{background: red;}

/*歌詞ボタン　　*/
.kasi{display: block;}
.btn_kasi{position:absolute;background: darkorange;color:white;z-index: 9999;
  top:70px;left: 100px;width: 50px;height:50px;
  text-align: center;padding-top: 10px;}
.btn_kasi:hover{background-color: silver;color:black;}

/*DATAボタンの中身　　*/
#g-nav{
  position:fixed;z-index: 9999;
	top:0;left: 100%;
	width:100%;height: 100vh;
	background:#999;
	transition: all 0.6s;}
#g-nav.panelactive{left: 0;}
#g-nav.panelactive #g-nav-list{
  position: fixed;z-index: 999;
  width:100%;height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
#g-nav ul {
  position: absolute;z-index: 999;
  top:40%;left:40%;
  transform: translate(-50%,-50%);}
#g-nav li{
	list-style: none;text-align: left;
	font-size: 20px;color: white;
	text-decoration: none;
	padding:0px;
	display: block;
	text-transform: uppercase;
  line-height: 1.5;
	letter-spacing: 0.1em;
	font-weight: bold;}
#g-nav li span{color: dimgray;}

/*========= 貧弱アイコンの回転 ===============*/
img{max-width:100%;height: auto;}
.dtm_ikon{width:70px;text-align: center;margin: 10px auto;}
.maru{transform: translateY(-50%) translateX(-50%);}
.maru{animation: rotation-s2 10s linear infinite;
  	 right: calc(50% - 5px);top: calc(50% - 5px);}

/*XXXを打ち込んでみた*/
.text_kyokumei{font-size: 30px;line-height: 1.3;margin:20px auto 20px;}/*曲名*/
.text_kyokumei_sub{font-size: 20px;}
/*VER1 VER2 BGMの色*/
.text_ver{color:lightsteelblue;font-size: 20px;margin: -10px auto 10px;}/*VER1 VER2 BGM*/

audio{width: 70%;}

/*===========================================================*/
/*レスポンシブ*/
/*===========================================================*/
/*＝＝＝＝＝＝＝＝＝＝＝850px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:850px)
{
/*DATAボタン　　*/
.openbtn{top:50px;left: 20px;width: 50px;height:50px;}
/*歌詞ボタン　　*/
.btn_kasi{top:50px;left: 80px;width: 50px;height:50px;}

/*XXXを打ち込んでみた*/
.text_kyokumei{font-size: 20px;line-height: 1.3;margin:20px auto 20px;}/*曲名*/
.text_kyokumei_sub{font-size: 15px;}
/*VER1 VER2 BGMの色*/
.text_ver{font-size: 15px;margin: 5px auto 10px;}/*VER1 VER2 BGM*/
audio{width:300px;height: 40px;margin:1px auto -10px;}
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px)
{
/*DATAボタン　　*/
.openbtn{top:40px;left: 20px;width: 50px;height:50px;}
/*歌詞ボタン　　*/
.btn_kasi{top:40px;left: 80px;width: 50px;height:50px;}

.dtm_ikon{width:30px;margin-top:-100px;margin-bottom: -20px;}/*貧弱アイコンの回転*/
/*XXXを打ち込んでみた*/
.text_kyokumei{font-size: 20px;line-height: 1.3;margin:20px auto 20px;}/*曲名*/
.text_kyokumei_sub{font-size: 15px;}

/*VER1 VER2 BGMの色*/
.text_ver{font-size: 15px;margin: 5px auto 10px;}/*VER1 VER2 BGM*/
.text_ver{font-size: 15px;margin: 1px auto 5px;}/*VER1 VER2 BGM*/
audio{width:250px;height: 40px;margin:1px auto -10px;}
}

/*＝＝＝＝＝＝＝＝＝＝＝550px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:550px)
{
/*DATAボタン　　*/
.openbtn{top:50px;left: 20px;}
.closebtn{top:50px;left: 20px;}

/*歌詞ボタン　　*/
.btn_kasi{top:50px;left: 80px;}
.btn_kasi{top:50px;left: 80px;}

.dtm_ikon{width:60px;margin-top:-100px;}/*貧弱アイコンの回転*/

audio{width:300px;height: 40px;margin:1px auto -10px;}
}

/*＝＝＝＝＝＝＝＝＝＝＝401px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:401px)
{
/*ナビゲーション*/
#g-nav ul {top:40%;left:46%;transform: translate(-50%,-50%);}
#g-nav li{font-size:12px;padding:0px;
          line-height:2;letter-spacing: 0.1em;}

.dtm_ikon{width:60px;margin: 80px auto 10px;}/*貧弱アイコンの回転*/
/*XXXを打ち込んでみた*/
.text_kyokumei{font-size: 20px;line-height: 1.3;margin:15px auto 20px;}/*曲名*/
.text_kyokumei_sub{font-size: 15px;}

/*VER1 VER2 BGMの色*/
.text_ver{font-size: 15px;margin: 5px auto 10px;}/*VER1 VER2 BGM*/
audio{width:280px;height: 40px;margin:5px auto -10px;}
}

/*＝＝＝＝＝＝＝＝＝＝＝321px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:321px)
{
#g-nav ul {top:35%;left:46%;transform: translate(-50%,-50%);}
#g-nav li{font-size:11px;padding:0px;
          line-height: 1.5;letter-spacing: 0.1em;}
.dtm_ikon{width:30px;margin: 40px auto 10px;}/*貧弱アイコンの回転*/
/*XXXを打ち込んでみた*/
.text_kyokumei{font-size: 15px;line-height: 1.3;margin:15px auto 15px;}/*曲名*/
.text_kyokumei_sub{font-size: 12px;}

/*VER1 VER2 BGMの色*/
.text_ver{font-size: 13px;margin: 5px auto 10px;}/*VER1 VER2 BGM*/

audio{width:230px;height: 35px;margin:5px auto -10px;}
}