@charset "UTF-8";



/* slider */
#slider {background:#f4f6f1;}



/* index */
#index {background:url("../images/index/bg_sp.png") center top / 100% auto no-repeat;}


@media screen and (min-width:1024px) {
	#index {background:url("../images/index/bg_pc.png") center top / 100% auto no-repeat;}
}



/* news */
#news {padding: 48px 16px 0px 16px;}

#news .inner {
	padding:24px;
	background: url("../images/index/hachi_right.png") right 59px bottom 16px / 40px auto no-repeat, rgba(255,255,255,0.8);
}


@media screen and (min-width:1024px) {
	#news {padding:80px 48px 30px 48px;}

	#news .inner {
		padding:48px;
		background: url("../images/index/hachi_right.png") right 0px bottom 0px / 64px auto no-repeat, rgba(255,255,255,0.8);
	}
}



/* pickup_twitter */
#pickup_twitter {
	padding:0 16px 48px;
	background:url("../images/index/hachi_left.png") left 16px bottom / 40px auto no-repeat;
}


@media screen and (min-width:1024px) {
	#pickup_twitter {
		padding:0 48px 80px;
		display:flex;
		justify-content:space-between;
		flex-flow:row-reverse;
		background:url("../images/index/hachi_left.png") left 48px bottom / 64px auto no-repeat;
	}
}



/* pickup */
#pickup .inner {
	display:flex;
	justify-content:center;
}

.pickup_girl {width:calc(50% - 8px);}

.pickup_girl h3 a {
	top:0;
	left:0;
	z-index:0;
	position:relative;
	overflow:hidden;
	transition:none;
}

.pickup_girl h3 a:hover {opacity:1;}

.pickup_girl h3 a img {
	top:0;
	left:0;
	position:absolute;
}

.pickup_girl h3 a img.frame {z-index:2;}

.pickup_girl h3 a img:nth-of-type(2) {
	width:88.9%;
	margin:auto;
	right:0;
	bottom:0;
	z-index:1;
	transition:all 0.3s ease-in-out;
}

.pickup_girl h3 a:hover img:nth-of-type(2) {opacity:0.3;}


@media screen and (min-width:1024px) {
	#pickup {width:calc(50% - 24px);}

	#pickup .inner {
		display:block;
		justify-content:flex-start;
	}

	.pickup_girl {width:100%;}

	.pickup_girl:nth-of-type(2) {display:none;}
}



/* twitter */
#twitter {margin-top:48px;}

#twitter .inner {overflow-y:scroll;}


@media screen and (min-width:1024px) {
	#twitter {
		width:calc(50% - 24px);
		margin-top:0;
	}
}

/* banner-sp */
#banner-sp {display:block; text-align: center;}

#banner-sp img{
	width: 90%;
}


@media screen and (min-width:1024px) {
	#banner-sp {display:none;}
}

/* banner-pc */
#banner-pc {display: block; text-align: center;}

#banner-pc img{
	width: 100%;
}

@media screen and (min-width:1024px) {
	#banner-pc {
		display:block;
		padding:0 16px;
	}
}


/* concept */
#concept {
	padding:0 16px 48px;
	text-align:center;
	background:url("../images/index/hachi_left.png") left 16px bottom / 40px auto no-repeat, url("../images/concept/top_bg_sp.jpg") 16px top / calc(100% - 32px) no-repeat, url("../images/concept/bottom_bg_sp.jpg") right 16px bottom 48px / calc(100% - 32px) no-repeat;
}

#concept .inner {
	padding:48px 0;
	border:2px solid #F1DC79;
	background:rgba(255,255,255,0.8);
}

.concept_ttl {
	margin-bottom:24px;
	padding-top:32px;
	background:url("../images/concept/ttl_bg.png") center top / 49px 23px no-repeat;
}

.concept_ttl img {
	width:50%;
	max-width:280px;
}

#concept .inner .text .mg {margin-top:16px;}


@media screen and (min-width:1024px) {
	#concept {
		padding:0 48px 80px;
		background:url("../images/index/hachi_left.png") left 48px bottom / 64px auto no-repeat, url("../images/concept/top_bg_sp.jpg") 48px top / calc(100% - 96px) no-repeat, url("../images/concept/bottom_bg_sp.jpg") right 48px bottom 80px / calc(100% - 96px) no-repeat;
	}

	#concept .inner {padding:80px 48px;}

	.concept_ttl {	
		margin-bottom:48px;
		padding-top:64px;
		background:url("../images/concept/ttl_bg.png") center top / 98px 46px no-repeat;
	}

	#concept .inner .text .mg {margin-top:24px;}
}



/* menu */
.menu_top img {display:block;}

#menu ul {
	padding: 48px 16px 80px 16px;
	display:flex;
	flex-wrap:wrap;
	background:url("../images/index/menu_ul_bg_sp.png") center bottom / 100% auto no-repeat, #e8e8e8;
}

#menu ul li {
	width:calc(33.3% - 4px);
	margin:6px 6px 0 0;
}

#menu ul li:nth-of-type(-n+3) {margin-top:0;}
#menu ul li:nth-of-type(3n) {margin-right:0;}

#menu ul li a {
	color:#FFF;
	display:flex;
	justify-content:center;
	align-items:center;
}

#menu ul li a span {display:block;}

#menu ul li a span span {
	height:12px;
	margin-top:4px;
	line-height:12px;
	text-align:center;
}

#menu ul li a span span:first-of-type {font-size:109%;}

#menu ul li a span span:last-of-type {
	font-size:84%;
	line-height:1.4;
}


@media screen and (min-width:1024px) {
	#menu ul {
		padding:80px 48px;
		background:url("../images/index/menu_ul_bg_pc.png") center bottom / 100% auto no-repeat, #e8e8e8;
	}

	#menu ul li {
		width:calc(33.3% - 8px);
		margin:12px 12px 0 0;
	}

	#menu ul li a span span {
		height:14px;
		margin-top:8px;
		line-height:14px;
	}

	#menu ul li a span span:first-of-type {font-size:100%;}

	#menu ul li a span span:last-of-type {
		font-size:100%;
		line-height:14px;
	}

	#menu ul li a span span:last-of-type br {display:none;}
}