@charset "utf-8";
/* CSS Document */
@import "clear.css";

#f_type_1,#f_type_2 {
	color: #ff0;
	font-weight: 800;
}

#f_type_3 {
	background: #ff0;
	display: inline-block;
	font-weight: 800;
}

header h1 {
	color: #fff;
	font-weight: 900;
}

header h2 {
	color: #fff;
	font-weight: 600;
	display: inline-block;
}

#search_area ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#search_area li {
	background: url("../images/btn_bg.png") no-repeat center center;
	text-align: center;
	height: 60px;
	line-height: 50px;
}

#search_area li a {
	display: block;
	height: 100%;
}

#search_area h3 {
	background: #ff0;
	margin: auto;
	text-align: center;
	font-weight: 800;
}

#recommand {
	background: #ff0;
}

#recommand h2 {
	background: url("../images/reccomand_bg.png") no-repeat center bottom;
	text-align: center;
	font-weight: 800;
}

#recoomend_wrap h3 {
	background: #fff;
	font-weight: 800;
}

#point h2 {
	background: url("../images/point_bg.png") no-repeat center bottom;
	text-align: center;
	font-weight: 800;
}

#point h3 {
	font-weight: 800;
}

#point h4 {
	font-weight: 800;
	text-align: center;
}

#point h4#pt_1 {
	background: url("../images/point_1.png") no-repeat center center;
}

#point h4#pt_2 {
	background: url("../images/point_2.png") no-repeat center center;
}

#point h4#pt_3 {
	background: url("../images/point_3.png") no-repeat center center;
}

#point h4#pt_4 {
	background: url("../images/point_4.png") no-repeat center center;
}

#approach h2 {
	color: #fff;
	font-weight: 800;
	text-align: center;
}

footer {
	padding-bottom: 60px;
	text-align: center;
}

@media (min-width: 1025px) {
	.pc_none {
		display: none;
	}
	
	header {
		background: url("../images/main_img.png") no-repeat;
		background-size: cover;
		padding: 240px 18%;
	}
	
	header h2 {
		border-bottom: solid #ff0 3px;
	}
	
	#f_type_1 {
		font-size: 1.8rem;
	}
	
	#f_type_2 {
		font-size: 3.4rem;
	}
	
	#f_type_3 {
		font-size: 1.4rem;
		padding: 5px 10px;
		margin: 10px 0;
	}
	
	header h1 {
		font-size: 5.2rem;
		line-height: 5.8rem;
	}
	
	header h2 {
		margin-top: 25px;
		padding-bottom: 10px;
		font-size: 1.5rem;
	}
	
	#search_area {
		padding: 60px 0;
		width: 725px;
		margin: auto;
	}
	
	#search_area ul {
		margin: 25px 0 45px;
	}
	
	#search_area li {
		width: 25%;
	}
	
	#search_area h3 {
		font-size: 1.4rem;
		padding: 10px;
		width: 495px;
	}
	
	#recommand {
		background: #ff0 url("../images/bg_img.png") no-repeat bottom;
		background-size: contain;
		padding: 60px 0 150px;
	}
	
	#recommand h2 {
		font-size: 2rem;
		padding-bottom: 5px;
	}
	
	#recoomend_wrap {
		margin: 30px auto;
		width: 1000px;
	}
	
	#recoomend_wrap dl {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	
	#recoomend_wrap dt {
		width: 390px;
	}
	
	#recoomend_wrap dd {
		width: 585px;
	}
	
	#recoomend_wrap h3 {
		font-size: 1.2rem;
		padding: 10px 15px;
		margin-bottom: 15px;
	}
	
	#point {
		padding: 60px 0;
	}
	
	#point h2 {
		font-size: 2rem;
		padding-bottom: 5px;
		margin-bottom: 15px;
	}
	
	#point ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 1000px;
		margin: auto;
	}
	
	#point h4 {
		font-size: 1.6rem;
		padding: 35px 0;
		margin: 15px 0;
	}
	
	#point li {
		margin-bottom: 15px;
		width: 455px;
	}
	
	#point li p {
		margin-bottom: 10px;
	}
	
	#point h3 {
		text-align: center;
	}
	
	#approach h2 {
		background: url("../images/footer_bg.png") no-repeat;
		background-size: cover;
		padding: 200px 0;
	}
	
	#approach h2 {
		font-size: 2rem;
	}
	
	#approach p {
		margin: 60px auto;
		width: 1000px;
	}
}

@media screen and (max-width: 1024px) {
	.sp_none {
		display: none;
	}
	
	header {
		background: url("../images/sp_main_img.png") no-repeat;
		background-size: cover;
		padding: 90px 5%;
	}

	#f_type_1 {
		font-size: 1.4rem;
	}
	
	#f_type_2 {
		font-size: 2.6rem;
	}
	
	#f_type_3 {
		font-size: 1.25rem;
		padding: 10px;
		margin: 15px 0;
	}
	
	header h1 {
		font-size: 3rem;
		line-height: 3.6rem;
		margin: 10px 0;
		letter-spacing: -1px;
	}
	
	header h2 span {
		font-size: 1.1rem;
		display: inline-block;
		border-bottom: solid #ff0 3px;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	
	#search_area {
		padding: 45px 5%;
	}
	
	#search_area h3 {
		padding: 15px 0;
		font-size: 1.2rem;
	}
	
	#search_area ul {
		margin: 15px 0;
	}
	
	#search_area li {
		margin-bottom: 5px;
		width: 48%;
	}
	
	#recommand {
		background: #ff0 url("../images/sp_bg_img.png") no-repeat bottom;
		background-size: contain;
		padding: 45px 5% 90px;
	}
	
	#recommand h2 {
		font-size: 1.6rem;
		background-size: 90%;
		margin-bottom: 15px;
	}
	
	#recoomend_wrap h3 {
		font-size: 1.2rem;
		padding: 10px;
		margin-bottom: 10px;
	}
	
	#recoomend_wrap dl {
		margin-bottom: 30px;
	}
	
	#point {
		padding: 45px 5%;
	}
	
	#point h2 {
		font-size: 1.6rem;
		background-size: 90%;
		margin-bottom: 10px;
	}
	
	#point h3 {
		margin-bottom: 15px;
	}
	
	#point h4 {
		font-size: 1.5rem;
		padding: 35px 0;
		margin-bottom: 10px;
	}
	
	#point li p {
		margin-bottom: 10px;
	}
	
	#approach h2 {
		background: url("../images/sp_footer_bg.png") no-repeat;
		background-size: cover;
		font-size: 1.2rem;
		padding: 60px 0;
	}
	
	#approach p {
		padding: 15px 5%;
	}
}