@charset "UTF-8";
/* CSS Document */

/*** #main***/
#main {
	background:url(../common/img/bg_main0.png);
}


/*** #top***/
#top {
	background:url(../img/bg_main.jpg) repeat-x center top;
}
#top .carousel {
	position:relative;
	height:370px;
}
#top .carousel_inner ol {
	position:relative;
}
#top .carousel_inner li {
	position:absolute;
	width:1000px;
	top:0;
	left:0;
}
#top .carousel_inner .sp {
	display:none;
}
#top .carousel_page {
	position:relative;
	top:360px;
	width:160px;
	margin:0 auto;
}
#top .prev { float:left; }
#top .next { float:right; }

#top .carousel_page img {
	cursor:pointer;
	transition:all ease-out .07s;
}
#top .carousel_page img:hover {
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	transform:scale(1.05);
}

#top .carousel .pos {
	position:absolute;
	width:100%;
	bottom:0;
	text-align:center;
	display:none;
}
#top .carousel .pos li {
	display:inline-block;
	margin:0 5px;
	width:10px;
	height:10px;
	background:url(../common/img/icon_pos.png) no-repeat center center;
	background-size:10px;
}
#top .carousel .pos li.act {
	background:url(../common/img/icon_pos_act.png) no-repeat center center;
	background-size:10px;
}

@media only screen and (max-width:580px) {
	#top {
		padding-top:15px;
		background:none;
	}
	#top .inner {
		width:320px;
		overflow:hidden;
	}
	#top .carousel {
		height:140px;
	}
	#top .carousel_inner li {
		width:320px;
	}
	#top .carousel_inner .pc {
		display:none;
	}
	#top .carousel_inner .sp {
		display:block;
	}
	#top .carousel .pos {
		display:block;
	}
	#top .carousel_page {
		display:none;
	}
}


/*** #news ***/
 #movie {
	position:relative;
	width:1020px;
	margin:50px auto 0;
 }
#banners {
	margin-top:5px;
}
#banners li {
	float:left;
	margin:0 5px 10px;
}
 #news {
	 margin-top:20px;
 }
#news .left {
	position:relative;
	width:1020px;
}
#news h2 {
	position:absolute;
	left:0;
	top:-10px;
}
#news .left .illust {
	position:absolute;
	left:0;
	top:110px;
}
#newsbox {
	width:900px;
	margin-left:80px;
	box-sizing:border-box;
	border-radius:20px;
	border:solid 3px #86cd53;
	background:url(../common/img/bg_glid.png);
	box-shadow:0 4px 0 0 rgba(134,205,83,.3);
}
#newsbox .boxinner {
	height:180px;
	margin:20px 15px 0 40px;
}
#newsbox li {
	margin-bottom:20px;
}
#newsbox li time {
	color:#83d349;
	font-size:14px;
}
#newsbox li .categ {
	display:inline-block;
	float:right;
	color:#fff;
	font-size:11px;
	border-radius:20px;
	padding:4px 10px;
}

.categ0 { background-color:#00a5e6; }
.categ1 { background-color:#f99c18; }
.categ2 { background-color:#ef5994; }

#newsbox li p {
	clear:both;
	margin-top:10px;
	font-size:16px;
	line-height:1.5;
}
#newsbox li a {
	color:#313131;
	text-decoration:none;
}
#newsbox li a:hover {
	text-decoration:underline;
}
#news .right {
	width:1020px;
	float:right;
}

@media only screen and (min-width:581px) {
	#newsbox .btns {
		text-align:right;
		padding:20px;
		margin:0;
	}
	#newsbox .btn_green {
		padding:5px 10px;
		margin:0;
	}
}
@media only screen and (max-width:580px) {
	#news {
		padding-bottom:40px;
	}
	#news h2 {
		position:absolute;
		left:0;
		top:-60px;
	}
	#news h2 img {
		width:80px;
		height:auto;
	}
	#news .left .illust {
		top:-80px;
		left:220px;
		width:57px;
		height:auto;
	}
	#news .left, #news .right {
		float:none;
		width:100%;
	}
	#newsbox {
		width:100%;
		height:auto;
		margin:80px 0 20px 0;
	}
	#newsbox .boxinner {
		margin:30px 10px 30px 20px;
	}
	#movie {
		width:100%;
		margin:0 auto;
 }
 #banners {
		margin:0 auto;
 }
	#banners li {
		float:left;
		margin-left:10px;
		margin-bottom:10px;
	}
	#banners li img {
		width:145px;
		height:auto;
	}
	#banners li:nth-child(2n+1) {
	margin-left:0;
}
}


/**
 * #reason
 */
#reason {
	background:url(../common/img/bg_main1.png);
	padding:50px 0;
}
#reason .inner {
	position:relative;
}
#reason h2 {
	position:relative;
	left:-115px;
}
#reason .box {
	width:590px;
	box-sizing:border-box;
	border-radius:20px;
	background:url(../common/img/bg_glid.png);
	box-shadow:0 3px 1px 0 rgba(136,136,136,.15);
	padding:30px;
}
#reason .box h3 {
	font-size:28px;
	line-height:1.5;
	margin-bottom:20px;
}
#reason .box p {
	font-size:18px;
	line-height:1.6;
}
#reason .box h3 span {
	background:url(../common/img/bg_h3_line.png) no-repeat left bottom;
	background-size:100% 15px;
} 

#reason_box0 { border:solid 6px #46cf6c; }
#reason_box0 h3 { color:#46cf6c; }
#reason_box1 { border:solid 6px #fb8700; }
#reason_box1 h3 { color:#fb8700; }
#reason_box2 { border:solid 6px #00abf1; }
#reason_box2 h3 { color:#00abf1; }

#reason_box0 {
	position:relative;
	top:-30px;
}
#reason_box1 {
	position:relative;
	top:-60px;
	left:390px;
	z-index:10;
}
#reason_box2 {
	position:relative;
	top:-80px;
	left:100px;
}

#reason_img0 .left {
	position:absolute;
	top:10px;
	left:540px;
}
#reason_img0 .pc {
	position:absolute;
	top:30px;
	right:50px;
}
#reason_img1 .right {
	position:absolute;
	top:255px;
	right:0px;
	z-index:20;
}
#reason_img1 .pc {
	position:absolute;
	top:580px;
	right:0px;
	z-index:20;
}
#reason_img2 .left {
	position:absolute;
	top:730px;
	right:150px;
}
#reason_img2 .pc {
	position:absolute;
	top:420px;
	left:0px;
}

#reason .sp { display:none; }

@media only screen and (max-width:580px) {
	#reason {
		padding:20px 0;
	}	
	#reason h2 {
		position:static;
		margin-bottom:20px;
	}
	#reason h2 img {
		width:300px;
		height:auto;
	}
	#reason .box {
		width:100%;
		position:static;
		padding:22px;
		border-radius:10px;
	}
	#reason_box0 { border:solid 3px #46cf6c; }
	#reason_box1 { border:solid 3px #fb8700; }
	#reason_box2 { border:solid 3px #00abf1; }
	#reason .box h3 {
		font-size:20px;
		margin-bottom:10px;
	}
	#reason .box p {
		font-size:15px;
	}
	.reason_img {
		margin:10px 0 30px 0;
	}
	.reason_img img {
		position:static !important;
		vertical-align:top;
	}
	.reason_img .ph {
		
		width:145px;
		height:auto;
	}
	.reason_img .left {
		float:left;
	}
	.reason_img .right {
		float:right;
	}
	
	#reason .sp { display:block; }
	#reason .pc { display:none; }
}


/**
 * #voice
 */
#voice {
	padding:50px 0 30px 0;
}
#voice h2 {
	position:relative;
	left:-115px;
}
#voice .btns.pc {
	position:relative;
	text-align:right;
	padding:10px 0;
	margin:0;
	top:-100px;
}
#voice .pc .btn_green {
	padding:5px 10px;
	margin:0;
}
#voice ul {
	position:relative;
	top:-100px;
}
#voice li {
	float:left;
	width:500px;
	height:220px;
	margin-left:20px;
	margin-bottom:20px;
}
#voice li:nth-child(2n+1) {
	margin-left:0;
}
#voice .sp { display:none; }


@media only screen and (max-width:580px) {
	#voice {
		padding:20px 0;
	}	
	#voice h2 {
		position:static;
		margin-bottom:20px;
	}
	#voice h2 img {
		width:300px;
		height:auto;
	}
	#voice ul {
		position:static;
	}
	#voice li {
		float:none;
		width:300px;
		height:200px;
		margin-left:0;
		margin-bottom:20px;
	}
	#voice .sp { display:block; }
	#voice .pc { display:none; }
}