@charset "utf-8";

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

.dtm_left{margin-top: 60px;width:25%;height:100vh;}
    .dtm_1{height: 40%;} /* 画像の高さ */
    .dtm_2_3{display: flex;height: 20%;
             border-top: 10px solid black;border-bottom: 10px solid black;}
    .dtm_2,.dtm_3{width: 50%;} /* 画像の高さ */
    .dtm_4{height: 40%;} /* 画像の高さ */
.dtm_right{margin-top: 60px;width:25%;height:100vh;}
    .dtm_5{height: 40%;} /* 画像の高さ */
    .dtm_6_7{display: flex;height: 20%;
             border-top: 10px solid black;border-bottom: 10px solid black;}
    .dtm_6,.dtm_7{width: 50%;} /* 画像の高さ */
    .dtm_8{height: 40%;} /* 画像の高さ */
.dtm_center{position: relative;top: 60px;width:50%;height:100vh;}

/*======  幾何学模様 ※パターンは　index_kikagaku.js で指定===========*/
#particles-js{position:relative;top:0px;width: 100%;height: 100vh;}
/*imgではなく背景色にする場合
#particles-js{background-color:#35004D;}*/ 

    .dtm_center_group{position: absolute;transform: translate(-50%,-50%);
                      width: 100%;text-align: center;z-index: 99;
                      top: 46%;left:50%;}

    /* -----スライドショー-------------------------------------------- */
    .slide_box{width: 200px;height: 160px;margin: 0px auto 10px;}
    .slide img {position:absolute;margin-top: 0px;margin-left: -100px;
                opacity:0;transition:all 1s ease-in-out;
                width:200px;height: 160px;
                object-fit:cover;}
    #slide_speed {display: none;
                transform:rotateY(180deg);
                width: 180px;margin: 155px 0px 0px 10px;}

    /*===============  INSTRUMENT の　ボタン　回転 ============================*/
    .inst{/* INSTRUMENT */
    font-family: 'Oswald', sans-serif;color:darkorange;
    font-size: 30px;letter-spacing: 5px;}
    .inst_enter{color:darkorange;}
    .inst_btn{
    position: relative;display: inline-block;
    margin: 5px 0 0 0;
    width:100%;max-width: 200px;height: 40px;
    line-height: 35px;/*enterの上下のアキ*/
    font-family: 'Oswald', sans-serif;
    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  =======================*/
    .dtm_for_cubase{/* DTM for CUBASE */
    font-family: 'Oswald', sans-serif;color:tan;
    font-size: 30px;letter-spacing: 1px;margin-top: 20px;}
    .idtopass{font-size: 10px;letter-spacing: 1px;
              margin:2px auto 8px;color:gold;}/*ユーザーIDとパスワードが必要にゃ*/
    .btn_cubase_enter span{color:tan;}

    .btn_cubase_enter{/*表示するテキストが切り替わる*/
    	position: relative;/*テキストの基点とするためrelativeを指定*/
    	border: 1px solid tan;border-radius:25px;   /*ボタンの形状　線の色 */
      min-width:210px;/*ボタンの幅*/
      font-family: 'Oswald', sans-serif;
    	padding: 20px;text-align: center;
    	display: inline-block;text-decoration: none;
      margin-top: 5px;color: tan;                             /*文字の色*/
      outline: none;transition: all 0.4s;/*アニメーションの指定*/}

    /*hoverした際の変化*/
    .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)}

    .btn_cubase_enter span{
      /*絶対配置でテキストの位置を決める*/
    	position: absolute;left: 50%;top:50%;
      transform:translate(-50%,-50%);transition: all .5s;}

    /*差し替わるテキスト「会員専用」の設定  色は　color:darkred　に変わる　*/
    .btn_cubase_enter span:nth-child(2){opacity:0;color:darkred;/*透過0に*/}
    /*hoverするとテキストが入れ替わる設定*/
    .btn_cubase_enter:hover span:nth-child(1){opacity:0;/*透過0に*/}
    .btn_cubase_enter:hover span:nth-child(2){opacity:1;/*不透明に*/}

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

@media screen and (max-width:1540px)
{
}
@media screen and (max-width:700px)/*===================  max-width:700px ====*/
{
.dtm_left,.dtm_right{display: none;}
.dtm_center{top: 60px;width:100%;height:100vh;}
}

@media screen and (max-width:450px)/*===================  max-width:450px ====*/
{
.dtm_center_group{top: 35%;left:50%;}
/* -----スライドショー-------------------------------------------- */
.slide_box{width: 170px;height: 140px;margin: 0px auto 10px;}
.slide img {margin-top: 0px;margin-left: -85px;
            width:170px;height: 140px;}

/*===============  ボタン INSTRUMENT ============================*/
.inst{font-size: 25px;letter-spacing: 5px;margin-top: 10px;}/* INSTRUMENT */
.inst_btn{margin: 5px 0 0 0;width:100%;max-width: 170px;height: 40px;
          line-height: 35px;/*enterの上下のアキ*/}
/*===============  ボタン DTM for CUBASE ENTER  =================*/
.dtm_for_cubase{font-size: 25px;letter-spacing: 1px;margin-top: 20px;}
.btn_cubase_enter{/*表示するテキストが切り替わる*/
          margin-top: 5px;min-width:170px;/*ボタンの幅*/
      	  padding: 18px;}
.idtopass{font-size: 10px;letter-spacing: 1px;
          margin:5px auto 0px;}/*ユーザーIDとパスワードが必要にゃ*/
}

@media screen and (max-width:321px)/*===================  max-width:321px ====*/
{
.dtm_center_group{top: 35%;left:50%;}
/* -----スライドショー-------------------------------------------- */
.slide_box{width: 150px;height: 120px;margin: 0px auto 10px;}
.slide img {margin-top: 0px;margin-left: -75px;
            width:150px;height: 120px;}
/*===============  ボタン INSTRUMENT ============================*/
.inst{font-size: 20px;letter-spacing: 5px;margin-top: 10px;}/* INSTRUMENT */
.inst_btn{margin: 5px 0 0 0;width:100%;max-width: 150px;height: 40px;
          line-height: 35px;/*enterの上下のアキ*/}
/*===============  ボタン DTM for CUBASE ENTER  =================*/
.dtm_for_cubase{font-size: 20px;letter-spacing: 1px;margin-top: 20px;}
.btn_cubase_enter{/*表示するテキストが切り替わる*/
          margin-top: 5px;min-width:150px;/*ボタンの幅*/
        	padding: 18px;}
.idtopass{font-size: 10px;letter-spacing: 1px;
          margin:5px auto 0px;}/*ユーザーIDとパスワードが必要にゃ*/
}