@charset "utf-8";

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

/* ======================================================
	common
====================================================== */
body{
	font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	color: #333;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	background-image:url("../images/bg_2.jpg");
}

img{
	vertical-align: bottom;
	border-style:none;
}
li{list-style: none;}

.clearfix {}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
a{color: #ff5a00;}
a:hover{text-decoration: none;}


#mainCont{
	width: 800px;
	margin: 0 auto;
	padding-bottom: 10px;
	background-image:url("../images/bg_1.jpg");
}
.title {
	text-align: center;
	margin: 20px 0;
}

#tx {
	margin: 0 auto;
	text-align: center;
}


#tx p {
	text-align: center;
	margin-bottom: 20px;
}
ul#desc {
	display: inline-block;
}
ul#desc li {
	list-style: disc;
	font-size: 16px;
	margin-bottom: 5px;
	text-align: left;
}
.next_bt, .enq_back_next {
	display: block;
	margin: 5px auto 0 auto;
	height: 60px;
	cursor: default;
}
.next_bt, .next_bt_time {
	padding-top: 15px;
}
/* ======================================================
	game
====================================================== */
article{
    background-color: #ddd;
}
#mainContent{
	width:800px;
	height:900px;
	margin:0 auto;
	position:relative;
	overflow: hidden;
}

#startWrap{
	height:900px;
	width:800px;
	position:absolute;
	z-index:100;
	background-color:rgba(255,255,255,0.8);
	cursor:pointer;
}
#startWrap h3{
	font-size:6em;
	line-height:600px;
}

#clearWrap{
	height: 800px;
	position: absolute;
	top: 7%;
	left: -100%;
	z-index: 50;
	width:100%;
	text-align: center;
}
#backgroundWrap{
	background-image:url("../images/item/bg.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	height:1500px;
	width:100%;
	position:absolute;
	top: 0;
}
#gameWrap{
	width:100%;
	height:100%;
	overflow: hidden;
	position:relative;
	padding-top: 2700px;
}
#block{
	width:300px;
	margin:auto; 
	height:auto;
	position:relative;
	top:-7000px;
}
#finishChara{
	width:300px;
}
.blockBox{
	width:300px;
	height:150px;
	border-radius: 10px;
	text-align:center;
	position: relative;
}
.box1{
	background-color:#f00;
}
.box2{
	background-color:#00f;
}

#table{
	width:400px;
	position:absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	bottom:30px;
	z-index: 10;
}
#table img{
	width:100%;
}

#chara{
	position: absolute;
	bottom: 500px;
	left:0;
	z-index: 5;
}
#chara_wait,
#chara_attack,
#chara_miss,
#chara_clear{
	position:absolute;
	top: -40px;
	left: 0;
}
#chara_attack,
#chara_miss,
#chara_clear{
	display:none;
}

#buttonWrap{
	position:absolute;
	width: 100%;
	top:780px;
	display:flex;
	justify-content: space-around;
	opacity: 0;
	z-index: 100;
}
#buttonBlue,
#buttonRed{
	width:30%;
}
#buttonWrap img{
	width:100%;
}


/*-----------------------------------
sakura_block
-----------------------------------*/
#sakura_block{
	width: 100%;
	margin-top: 700px;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 13px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 15px;/*花びらのサイズ*/
}

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 93%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 3s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}