@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/bg2.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;
}
#mainCont>section{
	background-image:url("../images/bg1.jpg");
}
.title {
	text-align: center;
	margin-bottom: 20px;
}

#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;
}

header{
	background-color: #fff;
}

/* ======================================================
	game
====================================================== */
article{
    background-color: #ddd;
}
#mainContent{
	width:800px;
	height:900px;
	margin:0 auto;
	background-image:url("../images/item/bg.png");
	background-size:cover;
	background-position: bottom;
	position:relative;
	overflow: hidden;
}

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

#clearWrap{
	height: 800px;
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 50;
	width:80%;
	text-align: center;
}
#clearWrap img{
	width:100%;
}
#gameWrap{
	margin:auto;
	width:100%;
	height:6000px;
	background-size:contain;
	background-repeat: repeat-y;
	position:relative;
	bottom: 0;
	z-index:4;
/*
	padding-top: 180px;
*/
}
#fieldWrap{
	width:100%;
	height:2000px;
	background-image:url("../images/item/bg.jpg");
	background-size:contain;
	background-repeat: repeat-y;
	position:absolute;
	z-index:1;
}
#cloudWrap{
	width:100%;
	height:6000px;
	background-image:url("../images/item/cloud.png");
	background-size:contain;
	background-repeat: repeat-y;
	position:absolute;
	z-index:1;
	top: -5300px;
;
}


#blockWrap{
	display:flex;
	justify-content: space-around;
	position: relative;
	top: 250px;
	z-index: 5;
}
#blockWallLeft,
#blockWallCenter,
#blockWallRight{
	width:25%;
}
.blockWall{
	width:100%;
	height:210px;

}
.block{
	background-image:url("../images/item/block_1.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}


#chara{
	position: absolute;
	top: 250px;
	left:350px;
	z-index:6;
}
#chara_back,
#chara_center,
#chara_leftMove,
#chara_rightMove,
#chara_miss,
#chara_clear{
	position:absolute;
	top: 0;
	left: 0;
}
#chara_back,
#chara_leftMove,
#chara_rightMove,
#chara_miss,
#chara_clear{
	display:none;
}

#chara_miss{
	position: absolute;
	top: 0;
}
#miss1{
	position: absolute;
	top: 0;
}
#miss2{
	position: absolute;
	top: 0;
}

#buttonWrap{
	position: absolute;
	width: 800px;
	height: 270px;
	bottom: 0;
	background-image:url("../images/item/btn_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index:6;
}
#buttonLeft,
#buttonTop,
#buttonBottom,
#buttonRight{
	width:120px;
	height:120px;
	font-size: 5em;
	line-height: 120px;
	cursor: pointer;
	position:absolute;
}
#buttonLeft{
	top:85px;
	left:235px;
}
#buttonTop{
	top:20px;
	left:345px;
}
#buttonBottom{
	bottom:5px;
	left:345px;
}
#buttonRight{
	top:85px;
	right:224px;
}

#buttonWrap img{
	width:100%;
}

.moveLeft1,
.moveLeft2,
.moveRight1,
.moveRight2,
.moveCenter,
.moveBack,
.moveGoal {
	animation-fill-mode:forwards;
	animation-duration:0.3s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	animation-delay: 0s;
	animation-direction:normal;
}

.moveLeft1 {animation-name: leftAnim1;}
.moveLeft2 {animation-name: leftAnim2;}
.moveRight1 {animation-name: rightAnim1;}
.moveRight2 {animation-name: rightAnim2;}
.moveCenter {animation-name: centerAnim;}
.moveBack {animation-name: backAnim;}
.moveGoal {animation-name: goalAnim;}

@keyframes leftAnim2{
	0% {left: 625px;top:250px;}
	50% {top:200px;}
	100% {top:250px;left: 350px;}
}
@keyframes leftAnim1{
	0% {left: 350px;top:250px;}
	50% {top:200px;}
	100% {top:250px;left: 75px;}
}

@keyframes rightAnim1{
	0% {left: 75px;top:250px;}
	50% {top:200px;}
	100% {top:250px;left: 350px;}
}
@keyframes rightAnim2{
	0% {left: 350px;top:250px;}
	50% {top:200px;}
	100% {top:250px;left: 625px;}
}

@keyframes centerAnim{
	0% {top:250px;}
	50% {top:200px;}
	100% {top:250px;}
}

@keyframes backAnim{
	0% {top:250px;}
	50% {top:200px;}
	100% {top:250px;}
}

@keyframes goalAnim{
	0% {top:250px;}
	50% {top:200px;}
	100% {top:430px;left:350px;}
}

#startGameWrap{
	position:relative;
	top: 250px;
	left: 10px;
	width: 275px;
	height: 200px;
	background-image:url("../images/item/block_start.png");
	background-size:contain;
	background-repeat: no-repeat;
	margin:auto;
}
#goalWrap{
	position: relative;
	margin-top: 434px;
	width: 100%;
	height: 1000px;
	background-image:url("../images/item/goal_1.png");
}
#goalFamily{
	position: absolute;
	top: 0px;
}
#goalVoice{
	position: absolute;
	top: -50px;
}
.goalVoice1{transform: rotateZ(-6deg);}
.goalVoice2{transform: rotateZ(6deg);}