/* --------------------------------------*/
/* 背景設定                               */
/* --------------------------------------*/

    .top_main_bg {
      background-position: center top, right top;
      background-repeat: no-repeat, repeat;
      text-align: center
    }
    


/* --------------------------------------*/
/* 全体配置                               */
/* --------------------------------------*/

 .resizeimage img { 
 max-width: 100%;
 max-height: auto; }
 
   

/* --------------------------------------*/
/* バナー類レイアウト                      */
/* --------------------------------------*/

    .top_main_box {position: relative
    max-width:980px; /* 幅px */
    }
    

/* デモ画面 */

    .top_main_box_video_demo1 {position: absolute;
    top: 15%;
    left: 0%;
    max-width: 18%; /* 幅px */
    }

    .top_main_box_video_demo2 {position: absolute;
    top: 26%;
    left: 22%;
    max-width: 12%; /* 幅px */
    } 

    .top_main_box_video_demo3 {position: absolute;
    top: 12%;
    left: 10%;
    max-width: 20%; /* 幅px */
    }

    .top_main_box_medal_demo1 {position: absolute;
    bottom: 8%;
    left: 2%;
    max-width: 16%; /* 幅px */
    }

    .top_main_box_medal_demo2 {position: absolute;
    bottom: 18%;
    left: 22%;
    max-width: 10%; /* 幅px */
    }

    .top_main_box_medal_demo3 {position: absolute;
    bottom: 6%;
    left: 12%;
    max-width: 15%; /* 幅px */
    }


 /* ビデオゲーム */     

    .top_main_box_video {position: absolute;
    /*background-color: #ffffee;*/
    top: 22%;
    left: 0%;
    max-width: 34%; /* 幅px */
    }

    .top_main_box_video_ef {position: absolute;
    top: 22%;
    left: 0%;
    max-width: 34%; /* 幅px */
    }


/* メダルゲーム */   

    .top_main_box_medal {position: absolute;
    bottom: 14%;
    left: 0%;
    max-width: 34%; /* 幅px */
    }

    .top_main_box_medal_ef {position: absolute;
    bottom: 14%;
    left: 0%;
    max-width: 34%; /* 幅px */
    }


/* 購買部 */ 

    .top_main_box_shop {position: absolute;
    bottom: 18%;
    right: 18%;
    max-width: 22%; /* 幅px */
    }
 
    .top_main_box_shop_ef {position: absolute;
    bottom: 18%;
    right: 18%;
    max-width: 22%; /* 幅px */
    }


 /* PASELI */ 

    .top_main_box_paseli_bg {position: absolute;
    bottom: 0%;
    right: 0%;
    max-width: 20%; /* 幅px */
    }

    .top_main_box_paseli {position: absolute;
    bottom: 1%;
    right: 4%;
    max-width: 15%; /* 幅px */
    }


/* メインバナー関連 */
    
   .top_main_box_test {position: absolute;
    top: 6%;
    right: 1%;
    max-width: 42%; /* 幅px */
    }



    /* メインバナー切替用 */
    .StopImage{
    position: relative;
    width : 530px;  /* バナー画像の横幅サイズ */
    max-width: 100%; /* 幅px これを指定することで3D変形に対応できます*/
    height : 100%;
    }

    .StopImage img{
    position: absolute;
    top: 0;
    left: 0;
    }
    
   .top_main_box_test2 {position: absolute;
    top: 6%;
    right: 1%;
    max-width: 42%; /* 幅px */
    }



/* --------------------------------------*/
/* バナー立体配置                         */
/* --------------------------------------*/

/* デモ画面 */

 .wrap-transform-demo1 {
    perspective: 300px;      /* 奥行を設定 */
    
    transform-style: preserve-3d; /*3Dにする*/
    perspective-origin: bottom left; /*消失点を調整する*/
  }
  
  .transform-demo1 {
    transform: rotateX(5deg) rotateY(40deg) rotateZ(10deg); /*数値で角度を調整する*/
  }

 .wrap-transform-demo2 {
    perspective: 300px;      /* 奥行を設定 */
    
    transform-style: preserve-3d; /*3Dにする*/
    perspective-origin: bottom left; /*消失点を調整する*/
  }
  
  .transform-demo2 {
    transform: rotateX(-20deg) rotateY(40deg) rotateZ(-15deg); /*数値で角度を調整する*/
  }






/* --------------------------------------*/
/* 影の設定                      */
/* --------------------------------------*/

.shadow {
        filter: drop-shadow(0px 0px 5px #00eeff); /*(左右の位置px 上下の位置px ぼかし具合px 色);*/
}



/* --------------------------------------*/
/* 画像の切替アニメ                      */
/* --------------------------------------*/

.myChangeImage{
    position: relative;
    width : 530px;  /* バナー画像の横幅サイズ */
    max-width: 100%; /* 幅px これを指定することで3D変形に対応できます*/
    height : 100%;
}

.myChangeImage img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* フェード効果を追加 */
}

.myChangeImage img.active {
    opacity: 1;
}

@keyframes ChangeImage {
    from { opacity: 0; }
    to { opacity: 1; }
}