@charset "utf-8";

/*////////////////////////////////////////////////////////////////////////////////////////*/
/* 各スクロール */

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "メイリオ" ;

}

/* 全体 */
.box_all{
	margin-top:-10%;
	background:url(../img/bg_index.jpg) no-repeat;
	background-size: 100% auto;
	background-attachment:fixed;
	overflow: hidden;
}



/*////////////////////////////////////////////////////////////////////////////////////////*/

/* 告知 */
.box_main{
	background-repeat: repeat;
	z-index:50;
	margin-top: 0%;
	position: relative;
}


#main{
	width:65%;
	height:100%;
	margin-top:-4%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	padding-top:6%;
	padding-bottom:10%;
	position: relative;
	z-index:100;

}


.image01{
	border: 1px solid #777777;
}

.image02{
	border: 1px solid #777777;
}



/*///////////////////*/

/* ボタン */
.box_btn{
	background-size: 100% auto;
	z-index:50;
	margin-top: 0%;
	position: relative;
}

.btn-all{
	width:68%;
	height:100%;
	margin-top:0%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	padding-top:0%;
	padding-bottom:0%;
}

.btnarea{
	width:65%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	padding-top:6%;
	padding-bottom:1%;
	z-index:10000;
	background:rgba(255,255,0,0.0);
}

.change-btn{
	width:78%;
	height:auto;
	margin-left: 0%;
	margin-right: auto;
	text-align:center;
	padding-top:12%;
	padding-bottom:1%;
	z-index:10000;
	background:rgba(0,255,0,0.0);
}


.onoffbtn{
	width:30%;
	height:auto;
	margin-top:0%;
	margin-right:auto;
	margin-left:1%;
	z-index:50;
	position:relative;
	background:rgba(255,0,0,0.0);
	float: left;
}



.leftinfo{
	width:67%;
	height:auto;
	margin-top:0%;
	margin-right:0%;
	margin-left:auto;
	z-index:50;
	position:relative;
	background:rgba(255,0,255,0.0);
	float: none;
}

button{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;    
}




/*////////////////////////////////////////////////////////////////////////////////////////*/
/* ボタン反応 */


/* Float メニュー */
.float_menu {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float_menu:hover {
  transform: translateY(-20%);
}


/* Float メニュー */
.float_chara {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float_chara:hover {
  transform: translateY(-5%);
}

/* Float 横 右 */
.float_right {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float_right:hover {
  transform: translateX(15%);
}

/* Float 横 左 */
.float_left {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float_left:hover {
  transform: translateX(-15%);
}


/* Float スペシャル */
.float_sp {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float_sp:hover {
  transform: translateY(-10%);
}


/* Scale キャラ */
.scale_chara {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.scale_chara:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
}

/* Scale パッケージ */
.scale_pak {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.scale_pak:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}




/*////////////////////////////////////////////////////////////////////////////////////////*/