@charset "utf-8";



/*==================================================
INSTRUMENT の　ボタン　回転
===================================*/

.inst{color:darkorange;font-size: 40px;letter-spacing: 5px;}
.inst_enter{color:darkorange;}

.inst_btn{
position: relative;display: inline-block;
margin: 0 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;}
.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);}

/*==================================================
ボタン DTM for CUBASE ENTER
===================================*/
.kaiinsenyou{font-size: 15px;letter-spacing: 5px;color:gold;letter-spacing: 5px;margin-top:-13px;}/*会員専用*/

.dtm_for_cubase{color:tan;font-size: 40px;margin-top: 20px;}
.btn_cubase_enter span{color:tan;}

.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);}

.sp-bottom .idtopass{font-size: 12px;padding-top: -5px;color:gold;}/*ユーザーIDとパスワードが必要にゃ*/

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

@media screen and (max-width:1000px)
{
.inst{font-size: 35px;}
.dtm_for_cubase{font-size: 35px;margin-top: 20px;}
.kaiinsenyou{font-size: 15px;margin-top:-13px;}/*会員専用*/
.idtopass{font-size: 12px;padding-top: -5px;}/*ユーザーIDとパスワードが必要にゃ*/
.btn_cubase_enter span{color:tan;}
}

@media screen and (max-width:768px)
{
.inst{font-size: 25px;}
.inst_btn{margin: 0 0 0 0;
width:100%;max-width: 150px;height: 40px;
line-height: 35px;/*enterの上下のアキ*/}
.dtm_for_cubase{font-size: 25px;margin-top: 20px;}
.kaiinsenyou{font-size: 15px;margin-top:-10px;}/*会員専用*/
.idtopass{font-size: 10px;padding-top: -5px;}/*ユーザーIDとパスワードが必要にゃ*/

.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)
{
.inst{font-size: 25px;}
.inst_btn{margin: 0 0 0 0;
  width:100%;max-width: 180px;height: 40px;
  line-height: 35px;/*enterの上下のアキ*/}
.inst_btn span {width: 100%;height: 100%;}
.dtm_for_cubase{font-size: 25px;margin-top: 20px;}
.btn_cubase_enter{margin-top:5px;}
.kaiinsenyou{font-size: 10px;}
.dtm_for_cubase{font-size: 23px;margin-top: -20px;}
.kaiinsenyou{font-size: 15px;margin-top:-10px;}/*会員専用*/
.idtopass{font-size: 10px;padding-top: -5px;}/*ユーザーIDとパスワードが必要にゃ*/
}

@media screen and (max-width:401px)
{
.inst{font-size: 25px;}
.inst_btn{margin: 0 0 0 0;
    width:100%;max-width: 150px;height: 40px;
    line-height: 35px;/*enterの上下のアキ*/}
.inst_btn span {width: 100%;height: 100%;}
.dtm_for_cubase{font-size: 25px;margin-top: -30px;}
.btn_cubase_enter{margin-top:5px;}
.kaiinsenyou{font-size: 12px;margin-top:-10px;}/*会員専用*/
.idtopass{font-size: 10px;padding-top: -5px;}/*ユーザーIDとパスワードが必要にゃ*/
}

@media screen and (max-width:321px)
{
.inst{font-size: 20px;}
.inst_btn{margin: 0 0 0 0;
      width:100%;max-width: 130px;height: 31px;
    line-height: 26px;/*enterの上下のアキ*/}
.inst_btn span {width: 100%;height: 100%;}
.dtm_for_cubase{font-size: 20px;margin-top: -20px;}
.btn_cubase_enter{/*DTM for CUBASE ENTER*/
padding: 1px 10px;
margin: 5px 0 0 0;
border-radius:30px;}
}