@charset "UTF-8";
/*トップページのみ*/

/*******TOP PAGE FACE********/
#page_top #sec_face{
	position:relative;
	width:100%;
	background:url(../images/index/face_bg.jpg) no-repeat;
	background-position:center top;
	background-size:auto;
	padding:76px 0;
	max-height:740px;
}
#page_top #sec_face .inner{
	position:relative;
	padding:10px 30px;
}
#page_top #sec_face .item img,
#page_top #sec_face .logo img{
	width:100%;
}
#page_top #sec_face h2{
	max-width:50%;
	margin:0 0 10px;
}
#page_top #sec_face em{
	color:#ed971b;
	font-weight:bold;
	line-height:1.2em;
	max-width:51%;
	font-size:28px;
	font-size: 2.8rem;
	margin:0 0 10px;
	display:block;
	font-family: 'Comfortaa', sans-serif;
}
#page_top #sec_face li{
	display:inline-block;
	vertical-align:middle;
	max-width:18%;
	height:100%;
	text-align:center;
}

/******* TOP EVERYWHERE ********/
#sec_everywhere{
	position:relative;
	width:100%;
	background:#7d9d7d url(../images/index/everywhere_bg.jpg) no-repeat;
	background-position:center bottom;
	background-size:auto;
	color:#fff;
}
#sec_everywhere .inner{
	position:relative;
	padding:10px 30px;
}
#sec_everywhere .tx_area{
	margin:54px 0px 379px;
	width:74%;
}
#sec_everywhere .tx_read,
#sec_everywhere .tx_l{
	display:block;
	margin-bottom:3%;
}
#sec_everywhere .anim_area{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#sec_everywhere li{
	font-size:12px;
	font-size:1.2rem;
	display:inline-block;
	white-space:nowrap;
	text-align:center;
}
#sec_everywhere li:before{
	display:block;
}
#car{
	position:absolute;
	top:46%;
	left:42%;
}
#car:before{
	content:url("../images/index/everywhere_obj_car.png");
}
#plane{
	position:absolute;
	top:52%;
	left:10%;
}
#plane:before{
	content:url("../images/index/everywhere_obj_plane.png");
}
#train{
	position:absolute;
	top:71%;
	left:0%;
}
#train:before{
	content:url("../images/index/everywhere_obj_train.png");
}
#house{
	position:absolute;
	top:45%;
	left:22%;
}
#house:before{
	content:url(../images/index/everywhere_obj_house.png);
}
#everywhere_bulloon{
	display:table;
	position:absolute;
	top:62%;
	left:20%;
	background:url(../images/index/everywhere_bulloon.png) no-repeat;
	background-size:100%;
	width:317px;
	height:229px;
	color:#000;

}
#everywhere_bulloon p{
	font-family:"Sniglet",sans-serif;
	font-size:26px;
	font-size:2.6rem;
	line-height:1.1em;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding:10%;
}

/*******TOP LIMITER*******/
#sec_limiter{
	position:relative;
	width:100%;
	background:#a6c8fd url(../images/index/limiter_bg.jpg) no-repeat;
	background-position:center bottom;
	background-size:auto;
}
#sec_limiter .inner{
	position:relative;
	padding:10px 30px;
}
#sec_limiter .tx_area{
	margin:80px 0px 398px;
	width:65%;
	float:right;
}
#sec_limiter .tx_read,
#sec_limiter .tx_l{
	display:block;
	margin-bottom:3%;
}
#sec_limiter .anim_area{
	position:absolute;
	top:50%;
	left:50%;
	margin:-26% 0px 0px -45%;
	display:inline-block;
}
#sec_limiter .anim_area img{
	display:block;
	margin:3% auto;
}
#sec_limiter .anim_area .wob{
	margin:10% auto;
}
/*******TOP STICKER********/
#sec_sticker{
	position:relative;
	width:100%;
	background:#f2f2fe url(../images/index/sticker_bg.jpg) no-repeat;
	background-position:center bottom;
	background-size:auto;
	overflow:hidden;
}
#sec_sticker .inner{
	padding:10px 30px;
}
#sec_sticker .tx_area{
	margin:91px 0px 445px;
	width:60%;

}
#sec_sticker .tx_read,
#sec_sticker .tx_l{
	display:block;
	margin-bottom:3%;
}
#sticker_headphone{
	position:absolute;
	top:50%;
	left:50%;
	margin:-517px 0px 0px -121px;
}

#sec_sticker #girl{
	position:absolute;
	top:45%;
	left:50%;
	margin:107px 0 0 60px;
	z-index:2;
}
#sec_sticker #ribon {
    position: absolute;
    top: 63%;
    left: 50%;
    margin: -37px 0px 0px 228px;
}

#sticker_bulloon{
	display:table;
	position:absolute;
	top:65%;
	left:42%;
	background:url(../images/index/sticker_bulloon.png) no-repeat;
	background-size:100%;
	width:274px;
	height:229px;
	color:#000;
	z-index:1;
}
#sticker_bulloon p{
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:26px;
	font-size:2.6rem;
	line-height:1.1em;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding:10%;
}

/*******TOP PAGE LINEUP********/
#sec_lineup{
	position:relative;
	background:#f0c61f url(../images/index/lineup_bg.png) no-repeat;
	background-position: top center;
	background-size:100% auto;
	text-align:center;
}
#sec_lineup .inner{
	padding:0 3% 6%;
}
#sec_lineup h2{
	padding:5% 0 2%;
	display:inline-block;
	max-width:60%;
}
#sec_lineup li{
	margin:0 0 3%;
}
#sec_lineup img{
	width:100%;
}




/* ========================= Media queries ========================= */ 
@media only screen and (max-width: 1024px){
	#page_top #sec_face{
		background-position:62% top;
	}

}

@media only screen and (max-width: 800px){
	/******* [800] HEADER NAVIGATION ********/
	header nav{
		float:right;
		margin:0;
	}
	header ul#navi_head {
		position:fixed;
		top:50px;
		right:0;
		margin:0;
		z-index:3050;
		display:none;
		padding:0;
		height:auto;
	}
	header ul#navi_head li {
		margin:0;
		display:block;
	}
	header ul#navi_head li a {
		display:block;
		min-width:200px;
		width:200px;
		height:48px;
		line-height:48px;
		border-bottom:1px solid #aaa;
		text-align:center;
		background:#fff;
		padding:0;
		margin:0;
	}
	header ul#navi_head li.current {
		border-bottom:2px solid #FC3;
	}
	div#navi_btn {
		display:block;
	}


	/******* [800] TOP PAGE FACE********/
	#page_top #sec_face em{
		font-size:24px;
		font-size: 2.4rem;
	}
	/******* [800] TOP PAGE EVERYWHERE********/
	#sec_everywhere{
		background-size:auto 80%;
	}
	#everywhere_bulloon{
		top: 68%;
		left: 15%;
	}
	/******* [800] TOP PAGE LIMITTER********/
	#sec_limiter .anim_area{
		top:auto;
		bottom:3%;
	}
	#sec_limiter .anim_area img{
		width:80%;
	}
	/******* [800] TOP PAGE STICKER********/
	#sec_sticker{
		background-position: 68% bottom;
	}
	#sec_sticker #ribon{
		margin: -15px 0px 0px 118px
	}
	#sticker_bulloon{
		left: 21%;
	}
	#sec_sticker #girl{
		margin: 120px 0px 0px -50px;
	}


}
@media only screen and (max-width: 600px){
	/******* [600] TOP PAGE FACE********/
	#page_top #sec_face{
		background-position: 82% top;
		background-size: 250%;
		padding:94% 0 0;
		max-height:none;
	}
	#page_top #sec_face h2{
		max-width:90%;
		margin:auto;
	}
	#page_top #sec_face em{
		max-width:100%;
		font-size: 1.8rem;
	}
	#page_top #sec_face ul{
		text-align:center;
	}
	#page_top #sec_face li{
		display:inline-block;
		vertical-align:middle;
		max-width:45%;
	}

	/******* [600] TOP PAGE EVERYWHERE********/
	#sec_everywhere{
		background-position: 72% bottom;
		background-size: 240% auto;
	}
	#sec_everywhere .inner{
		padding:11% 5%;
	}
	#sec_everywhere .tx_area {
		width:100%;
		padding: 0px 0px 125%;
		margin:0;
	}
	#sec_everywhere li{
		-webkit-transform:scale(.4);
		-moz-transform:scale(.4);
		-ms-transform:scale(.4);
		transform:scale(.4);
		color:transparent;
		text-shadow:none;
	}
	#car{
		top: 39%;
		left: auto;
		right: -5%;
	}
	#plane{
		top:42%;
		left:auto;
		right:25%;
	}
	#train{
		top:auto;
		left:auto;
		right:0;
		bottom:0;
	}
	#house{
		top:55%;
		left:-5%;
	}
	#everywhere_bulloon{
		background:url(../images/index/everywhere_bulloon_rev.png) no-repeat;
		background-size:100%;
		width:140px;
		height:100px;
		top: 48%;
		left: 8%;
	}
	#everywhere_bulloon p{
		font-size:1.2rem;
	}

	/******* [600] TOP PAGE LIMITER********/
	#sec_limiter{
		background-position: 55% bottom;
		background-size: 290% auto;
	}
	#sec_limiter .inner{
		padding:16% 5%;
	}
	#sec_limiter .tx_area {
		padding: 0px 0px 77%;
		margin:0;
		width:100%;
	}
	#sec_limiter .anim_area{
		margin:0;
		width: 31%;
		top:auto;
		bottom: 5%;
		left: 6%;
	}
	#sec_limiter .anim_area img{
		width:100%;
	}
	
	/******* [600] TOP PAGE STICKER********/
	#sec_sticker{
		background:#f2f2fe url(../images/index/sticker_bg_sm.jpg) no-repeat;
		background-position:center bottom;
		background-size: 100% auto;
	}
	#sec_sticker .inner{
		padding:18% 5%;
	}
	#sec_sticker .tx_area {
		margin:0;
		width:100%;
		padding: 0px 0px 77%;
	}

	#sec_sticker .anim_area{
		background-position:100% 60%;
		background-size:50%;
	}

	#sec_sticker #girl,
	#sec_sticker #ribon{
		display:none;
	}

	#sticker_bulloon{
		width:118px;
		height:100px;
		top: 71%;
		left: 46%;
	}
	#sticker_bulloon p{
		font-size:1.2rem;
	}
}