@charset "utf-8";

.btn{
  position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
  border: 1px solid #fff;
  padding: 10px 30px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}
.btn span {
	position: relative;
	z-index: 3;
	color:#fff;
}
.efect:before {
 	content: '';
 	position: absolute;
 	top: 0;left: 0;z-index: 2;
 	background:#333;
 	width: 100%;height: 100%;
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;}
.efect:hover:before{
	transform-origin:left top;transform:scale(1, 1);
}
/*===========================================================*/
/*INDEX ボタン*/
/*===========================================================*/
.change_btn_data{margin-left:10px;margin-top: 0px;}
.change_btn{
	position:absolute;
  z-index: 999;
	top:25px;
	left: 220px;
	cursor: pointer;
  width: 90px;background: #1a1a1a;
  height:30px;}
.change_btn:hover{background: yellow;}

.change_btn_data{position:absolute;color:tan;top:1px;left: 15px;}

/*==================================================
JYULIYAN.com 2022 の ENTERボタン　回転
===================================*/
.jyuliyancom_btn{
position: relative;display: inline-block;
margin: 7vh 0 0 0;
width:100%;max-width: 200px;
height: 40px;
line-height: 35px;/*enterの上下のアキ*/
text-align: center;outline: none;}
.jyuliyancom_btn span {
display: block;position: absolute;
width: 100%;height: 100%;
border: 2px solid limegreen;
transform-style: preserve-3d;transition: 0.5s;}
.rotatefront .span:nth-child(1) {
color: silver;
transform: rotateX(0deg);
transform-origin: 0 50%  -25px;}
.rotatefront:hover span:nth-child(1) {
transform: rotateX(-90deg);}
.rotatefront span:nth-child(2) {
background: darkred;
color: yellow;
transform: rotateX(90deg);
transform-origin: 0 50%  -25px;}
.rotatefront:hover span:nth-child(2) {
transform: rotateX(0deg);}

/*==================================================
INSTRUMENT の　ボタン　回転
===================================*/
.inst_btn{
position: relative;display: inline-block;
margin: 7vh 0 0 0;
width:100%;max-width: 200px;
height: 40px;
line-height: 35px;/*enterの上下のアキ*/
text-align: center;outline: none;}
.inst_btn span {
display: block;position: absolute;
width: 100%;height: 100%;
border: 2px solid darkorange;
transform-style: preserve-3d;transition: 0.5s;}

/*==================================================
ボタン DTM for CUBASE ENTER
===================================*/
.btn_cubase_enter{/*DTM for CUBASE ENTER*/
display: inline-block;
padding: 10px 60px;
margin: 5px 0 0 0;
border-radius:30px;text-decoration: none;
border:1px solid tan;color: tan;
transition: all 0.4s ease-out;}
.btn_cubase_enter:hover{
border-color:transparent;color: #fff;
background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);
background-size: 200% auto;
background-position: right center;
box-shadow: 0 5px 10px rgb(250,108,159,0.4);}

/*==================================================
ボタン　CLOCK CALENDER
===================================*/
.btn_clock{/*CLOCK*/
position: relative;z-index: 999;
overflow: hidden;
width:150px;border-radius: 20px 20px;
top:-30px;
text-decoration: none;
display: inline-block;
border: 1px solid #fff;
padding: 5px 30px;
text-align: center;outline: none;transition: ease .2s;}

.btn_calender{/*CALENDER*/
position: relative;z-index: 999;
overflow: hidden;
width:150px;border-radius: 20px 20px;
top:-30px;
text-decoration: none;
display: inline-block;
border: 1px solid #fff;
padding: 5px 30px;
text-align: center;outline: none;transition: ease .2s;}

.efect:before {
content: '';
position: absolute;
top: 0;left: 0;z-index: -2;
background:darkred;
width: 100%;height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;}
.efect:hover:before{
transform-origin:left top;transform:scale(1, 1);}

/*===========================================================*/
      /*レスポンシブ*/
/*===========================================================*/
@media screen and (max-width:768px)
{
.btn_cubase_enter{/*DTM for CUBASE ENTER*/
  width:150px;border-radius: 20px 20px;
  margin-top:10px;padding: 5px 20px;}
}

@media screen and (max-width:550px)
{

.change_btn{
    	position:absolute;
      z-index: 999;
    	top:5px;
    	left: 220px;
    	cursor: pointer;
      width: 90px;background: #1a1a1a;
      height:30px;}

.jyuliyancom_btn{
  position: relative;display: inline-block;
  margin: 4vh 0 0 0;
  width:100%;max-width: 200px;
  height: 30px;
  line-height: 25px;/*enterの上下のアキ*/
}
.jyuliyancom_btn span {
  display: block;position: absolute;
  width: 100%;height: 100%;
  border: 0.1px solid limegreen;
}
.inst_btn{
  position: relative;display: inline-block;
  margin: 4vh 0 0 0;
  width:100%;max-width: 200px;
  height: 30px;
  line-height: 25px;/*enterの上下のアキ*/
}
.inst_btn span {
  display: block;position: absolute;
  width: 100%;height: 100%;
  border: 0.1px solid darkorange;}
}

@media screen and (max-width:401px)
{
.change_btn_data{margin-left:10px;margin-top: -1px;}  
.jyuliyancom_btn{
  position: relative;display: inline-block;
  margin: 4vh 0 0 0;
  width:100%;max-width: 150px;
  height: 25px;
  line-height: 22px;/*enterの上下のアキ*/
}
.jyuliyancom_btn span {
  display: block;position: absolute;
  width: 100%;height: 100%;
  border: 0.1px solid limegreen;
}
.inst_btn{
  position: relative;display: inline-block;
  margin: 4vh 0 0 0;
  width:100%;max-width: 150px;
  height: 25px;
  line-height: 22px;/*enterの上下のアキ*/
}
.inst_btn span {
  display: block;position: absolute;
  width: 100%;height: 100%;
  border: 0.1px solid darkorange;
}
.btn_clock,.btn_calender{/*CLOCK*/
  width:150px;border-radius: 20px 20px;
  top:-30px;padding: 3px 30px;
}
}

@media screen and (max-width:321px)
{
.btn_clock,.btn_calender{/*CLOCK*/
　width:150px;border-radius: 20px 20px;
　top:-25px;padding: 3px 30px;
}
.jyuliyan_enter,.inst_enter{margin-top: 5px;}
}