/*
	TITLE : 僕だけがいない街
	DISTRIBUTER : ワーナーブラザーズ
	AUTHER : GAIE.inc
	DATE: 2016.2.23
	DEVICE: SMARTPHONE
------------------------------------------------------------------------*/

a:focus{outline: none;}
img{vertical-align: bottom;}


body{
	position: relative;
	width: 100%; height: 100%;
	background: #fff;
}

/*
	HEADER
----------------------------------------------------------------------*/
header{
	width: 100%;
	padding: 12.5% 0 0;
}

/*
	Staff BLOCK
----------------------------------------------------------------------*/
.charaBlock{
	width: 100%;
	font-size: 0; line-height: 0;
}
	.box01{
		position: relative;
		width: 100%;
		padding: 6.3% 0 5.5%;
		background: url(../img/chara/bg01.jpg) center bottom no-repeat #ebf5f7;
		background-size: 100%;
	}
	.box02{
		position: relative;
		width: 100%;
		padding: 0 0 10%;
		background: url(../img/chara/bg02.jpg) center top no-repeat #ebf5f7;
		background-size: 100%;
	}
	.boxWrapp{
		width: 100%;
		margin: 0 auto;
	}
		.row01,
		.row02,
		.row03,
		.row04,
		.row05,
		.row06,
		.row07,
		.row08,
		.row09
		{
			width: 100%;
			margin: 0 auto;
		}
		.boxWrapp > article > p{
			display: inline-block;
			font-size: 0; line-height: 0;
		}

			.row01-01,
			.row01-03{
				width: 40%;
			}
			.row01-02{
				width: 20%;
			}

			.row02-01{
				width: 60%;
			}
			.row02-02{
				width: 40%;
			}

			.row03-01,
			.row03-04{
				width: 10%;
			}
			.row03-02,
			.row03-03{
				width: 40%;
			}

			.row04-01{
				width: 100%;
			}

			.row05-01,
			.row05-03,
			.row05-04{
				width: 20%;
			}
			.row05-02{
				width: 30%;
			}
			.row05-05{
				width: 10%;
			}

			.row06-01{
				width: 100%;
			}

			.row07-01{
				width: 50%;
			}
			.row07-02{
				width: 40%;
			}
			.row07-03{
				width: 10%;
			}


			.row08-01,
			.row08-03{
				width: 40%;
			}
			.row08-02{
				width: 20%;
			}

			.row09-01{
				width: 100%;
			}

			.row10-01,
			.row10-04{
				width: 10%;
			}
			.row10-02,
			.row10-03{
				width: 40%;
			}

			.row11-01{
				width: 100%;
			}

			.row12-01,
			.row12-03,
			.row12-05,
			.row12-07{
				width: 10%;
			}
			.row12-02,
			.row12-04,
			.row12-06{
				width: 20%;
			}

			.row13-01{
				width: 100%;
			}

			.row14-01,
			.row14-05{
				width: 10%;
			}
			.row14-02,
			.row14-04{
				width: 20%;
			}
			.row14-03{
				width: 40%;
			}

			.row15-01{
				width: 60%;
			}
			.row15-02{
				width: 40%;
			}


	.tip01{
		position: absolute;
		display: none;
		width: 100%;
		top: 31%; left: 0;
		z-index: 5;
	}
	.tip02,
	.tip03{
		position: absolute;
		display: none;
		width: 100%;
		top: 55%; left: 0;
		z-index: 5;
	}
	.tip04,
	.tip05{
		position: absolute;
		display: none;
		width: 100%;
		top: 22%; left: 0;
		z-index: 5;
	}
	.tip06,
	.tip07{
		position: absolute;
		display: none;
		width: 100%;
		top: 77%; left: 0;
		z-index: 5;
	}
	.tip08{
		position: absolute;
		display: none;
		width: 100%;
		top: 90%; left: 0;
		z-index: 5;
	}

	.tip09{
		position: absolute;
		display: none;
		width: 100%;
		top: 8%; left: 0;
		z-index: 5;
	}
	.tip10,
	.tip11{
		position: absolute;
		display: none;
		width: 100%;
		top: 50%; left: 0;
		z-index: 5;
	}
	.tip12,
	.tip13{
		position: absolute;
		display: none;
		width: 100%;
		top: 24%; left: 0;
		z-index: 5;
	}
	.tip14,
	.tip15,
	.tip16{
		position: absolute;
		display: none;
		width: 100%;
		top: 72%; left: 0;
		z-index: 5;
	}
	.tip17{
		position: absolute;
		display: none;
		width: 100%;
		top: 89%; left: 0;
		z-index: 5;
	}
	.tip18{
		position: absolute;
		display: none;
		width: 100%;
		top: 92%; left: 0;
		z-index: 5;
	}