@charset "UTF-8";

/* --- ヒーローエリア --- */
section.hero_front {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 570px;
	background: url(../img/hero_front.jpg) no-repeat center center;
	background-size: cover;
}

section.hero_front span.pc img {
	width: 520px;
	height: auto;
}

/* --- About --- */
section.front_about div.container {
	margin: 50px 30px 40px;
}

section.front_about div.container h2 {
	margin-bottom: 20px;
}

section.front_about div.container div.image {
	margin-bottom: 30px;
}

section.front_about div.container div.image img {
	width: 100%;
	height: auto;
}

section.front_about div.container div.text p {
	margin-bottom: 20px;
	font-size: 14px;
}

section.front_about div.container div.text p:last-child {
	margin-bottom: 0px;
}

section.front_about div.container div.text p.catch span.top {
	font-size: 18px;
}

section.front_about div.container div.text p.catch strong {
	font-family: "Noto Serif JP", serif;
	font-size: 20px;
	color: #f39800;
	line-height: 2em;
}

section.front_about div.container div.text p.catch span.notes {
	font-weight: 500;
	font-size: 14px;
}

/* --- Performance --- */
section.front_performance div.container div.image {
	background: url(../img/front_bg1.png) repeat-x bottom center;
}

section.front_performance div.container div.image img {
	display: block;
	width: 100%;
	height: auto;
}

section.front_performance div.container div.text {
	background: #eeeeee;
}

section.front_performance div.container div.text div.box {
	margin: 0px 30px 0px;
	padding: 60px 0px 40px;
}

section.front_performance div.container div.text p.icon img {
	display: block;
	width: 116px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

section.front_performance div.container div.text div.ttl {
	display: flex;
	flex-direction: column-reverse;
}

section.front_performance div.container div.text h2 {
	margin-bottom: 20px;
}

section.front_performance div.container div.text h3 {
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 30px;
}

section.front_performance div.container div.text p {
	font-size: 14px;
	margin-bottom: 30px;
}

section.front_performance div.container div.text ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.front_performance div.container div.text ul li {
	padding: 0 20px;
	font-size: 14px;
	color: #a0a0a0;
	text-align: center;
}

section.front_performance div.container div.text ul li img {
	display: block;
	margin-bottom: 10px;
	width: 100%;
	height: auto;
}

/* --- Categories --- */
section.front_categories div.container {
	margin: 50px 30px;
}

section.front_categories div.container p.icon img {
	display: block;
	width: 115px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}

section.front_categories div.container h2 {
	margin-bottom: 18px;
}

section.front_categories div.container h3 {
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 15px;
}

section.front_categories div.container p {
	font-size: 14px;
	margin-bottom: 30px;
}

section.front_categories div.container ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

section.front_categories div.container ul li {
	flex: 0 0 50%;
}

section.front_categories div.container ul li a {
	display: block;
	margin: 5px;
}

section.front_categories div.container ul li a img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Contact --- */
section.front_contact {
	background: #eeeeee;
}

section.front_contact div.container {
	padding: 40px 0px;
}

section.front_contact div.container h2 {
	margin: 0px 30px 25px;
}

section.front_contact div.container h3 {
	font-weight: 400;
	font-size: 16px;
	margin: 0px 30px 25px;
}

section.front_contact div.container div.sp img {
	width: 100%;
	height: auto;
	margin-bottom: 25px;
}

section.front_contact div.container div.content {
	padding: 0px 30px;
}

section.front_contact div.container div.content p {
	font-size: 14px;
	margin-bottom: 30px;
}

section.front_contact div.container div.content dl {
	margin-bottom: 10px;
}

section.front_contact div.container div.content dl span.item {
	font-size: 14px;
}

section.front_contact div.container div.content dl span.req,
section.front_contact div.container div.content div.submit-area input.submit-btn {
	font-size: 14px;
}

section.front_contact div.container div.content div.submit-area small {
	display: block;
	font-size: 14px;
	margin-bottom: 10px;
}

section.front_contact div.container div.content dl span {
	display: block;
}

section.front_contact div.container div.content dl dt {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

section.front_contact div.container div.content dl span.item {
	margin-right: 10px;
}

section.front_contact div.container div.content dl span.req {
	background: #f39800;
	color: #ffffff;
	padding: 3px 10px;
	white-space: nowrap;
}

section.front_contact div.container div.content dl input,
section.front_contact div.container div.content dl textarea {
	background: #ffffff;
	border: 0;
	width: 100%;
}

section.front_contact div.container div.content dl input {
	font-size: 16px;
	height: 30px;
}

section.front_contact div.container div.content dl textarea {
	font-size: 16px;
	height: 120px;
}

section.front_contact div.container div.content div.submit-area div.btn {
	display: flex;
	justify-content: flex-end;
}

section.front_contact div.container div.content div.submit-area input.submit-btn {
	background: #f39800;
	color: #ffffff;
	border: none;
	padding: 6px 30px;
	cursor: pointer;
}

img.add {
	display: block;
	width: 100%;
	max-width: 219px;
	height: auto;
}

/* --- Sale --- */
section.front_sale div.container {
	margin: 60px 30px;
}

section.front_sale div.container p.icon img {
	display: block;
	width: 92px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

section.front_sale div.container div.ttl {
	display: flex;
	flex-direction: column-reverse;
}

section.front_sale div.container div.ttl h2 {
	margin-bottom: 20px;
}

section.front_sale div.container div.ttl h3 {
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 10px;
}

section.front_sale div.container div.image img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}

section.front_sale div.container div.text p {
	font-size: 14px;
	margin-bottom: 20px;
}

section.front_sale div.container div.text p:last-child {
	margin-bottom: 0px;
}

/* --- Access --- */
section.front_access {
	background: #eeeeee;
}

section.front_access div.container div.text {
	padding: 30px 0;
	margin: 0px 30px;
}

section.front_access div.container div.text h2 {
	margin-bottom: 10px;
}

section.front_access div.container div.text p {
	font-size: 14px;
	margin-bottom: 1em;
}

section.front_access div.container div.text p:last-child {
	margin-bottom: 0px;
}

section.front_access div.container div.content iframe {
	border: 0;
	width: 100%;
	height: 360px;
	margin-bottom: 30px;
	border-top: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
}

/* デスクトップ用 */
@media(min-width:1200px) {
	/* --- ヒーローエリア --- */
	section.hero_front {
	height: 750px;
	}
	
	/* --- About --- */
	section.front_about div.container {
	max-width: 1200px;
	margin: 100px auto;
	}
	section.front_about div.container h2 {
	margin-bottom: 30px;
	}
	section.front_about div.container h2 span.pc img {
	width: 700px;
	height: auto;
	}
	section.front_about div.container div.box {
	display: flex;
	}
	section.front_about div.container div.box div.image {
	flex: 0 0 594px;
	margin-bottom: 0px;
	}
	section.front_about div.container div.box div.text {
	padding-left: 25px;
	}
	section.front_about div.container div.text p {
	font-size: 14px;
	}
	section.front_about div.container div.text p.catch span.top {
	font-size: 18px;
	}
	section.front_about div.container div.text p.catch strong {
	font-size: 22px;
	}
	
	/* --- Performance --- */
	section.front_performance div.container div.image img {
	max-width: 1200px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	}
	section.front_performance div.container div.text div.box {
	max-width: 1200px;
	height: auto;
	margin: 0 auto 0;
	padding: 30px 0px 70px;
	}
	section.front_performance div.container div.text h2 {
	margin-bottom: 20px;
	}
	section.front_performance div.container div.text h2 span.pc img {
	width: 1020px;
	height: auto;
	}
	section.front_performance div.container div.text h3 {
	font-size: 18px;
	}
	section.front_performance div.container div.text p {
	font-size: 14px;
	margin-bottom: 30px;
	}
	section.front_performance div.container div.text ul li {
	font-size: 14px;
	}
	section.front_performance div.container div.text ul {
	justify-content: space-between;
	width: 930px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	}
	
	/* --- Categories --- */
	section.front_categories div.container {
	max-width: 1200px;
	margin: 100px auto;
	}
	section.front_categories div.container h2 span.pc img {
	width: 417px;
	height: auto;
	}
	section.front_categories div.container p.icon img {
	margin-bottom: 10px;
	}
	section.front_categories div.container h3 {
	font-size: 18px;
	margin-bottom: 10px;
	}
	section.front_categories div.container p {
	font-size: 14px;
	margin-bottom: 30px;
	}
	section.front_categories div.container ul li {
	flex: 0 0 300px;
	}
	
	/* --- Contact --- */
	section.front_contact div.container {
	max-width: 1200px;
	margin: 0px auto 0px;
	padding: 100px 0px 80px;
	display: flex;
	justify-content: space-between;
	}
	section.front_contact div.container div.text {
	flex: 0 0 386px;
	}
	section.front_contact div.container div.content {
	flex: 0 0 744px;
	}
	section.front_contact div.container h2 {
	margin: 0px 0px 35px;
	}
	section.front_contact div.container h2 img {
	width: 241px;
	height: auto;
	}
	section.front_contact div.container h3 {
	font-size: 18px;
	margin: 0px 0px 25px;
	}
	section.front_contact div.container div.pc img {
	width: 386px;
	height: auto;
	}
	section.front_contact div.container div.content {
	padding: 0px;
	}
	section.front_contact div.container div.content p,
	section.front_contact div.container div.content dl span.item {
	font-size: 14px;
	}
	section.front_contact div.container div.content dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	section.front_contact div.container div.content dl.last {
	margin-bottom: 25px;
	}
	section.front_contact div.container div.content dl dt {
	justify-content: space-between;
	flex: 0 0 220px;
	}
	section.front_contact div.container div.content dl dd {
	flex: 0 0 500px;
	}
	
	/* --- Sale --- */
	section.front_sale div.container {
	max-width: 1200px;
	margin: 60px auto 80px;
	}
	section.front_sale div.container p.icon img {
	margin-bottom: 15px;
	}
	section.front_sale div.container div.ttl {
	flex-direction: column;
	}
	section.front_sale div.container div.ttl h2 {
	margin-bottom: 30px;
	}
	section.front_sale div.container div.ttl h2 span.pc img {
	width: 490px;
	height: auto;
	}
	section.front_sale div.container div.ttl h3 {
	font-size: 18px;
	margin-bottom: 30px;
	}
	section.front_sale div.container div.ttl h3 span.pc {
	font-weight: 400;
	font-size: 14px;
	}
	section.front_sale div.container div.image img {
	margin-bottom: 0px;
	}
	section.front_sale div.container div.text p {
	font-size: 14px;
	}
	section.front_sale div.container div.box {
	display: flex;
	align-items: flex-start;
	flex-direction: row-reverse;
	}
	section.front_sale div.container div.image {
	flex: 0 0 592px;
	}
	section.front_sale div.container div.text {
	flex: 1;
	padding-right: 20px;
	}
	
	/* --- Access --- */
	section.front_access div.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 100px;
	padding-bottom: 70px;
	display: flex;
	}
	section.front_access div.container div.text {
	flex: 0 0 400px;
	}
	section.front_access div.container div.content {
	flex: 1
	}
	section.front_access div.container div.text {
	padding: 0px;
	margin: 0px;
	}
	section.front_access div.container div.text h2 {
	margin-bottom: 20px;
	}
	section.front_access div.container div.text h2 img {
	width: 207px;
	height: auto;
	}
	section.front_access div.container div.text p {
	font-size: 14px;
	margin-bottom: 20px;
	}
	section.front_access div.container div.content iframe {
	margin-bottom: 0px;
	border-left: 5px solid #ffffff;
	border-right: 5px solid #ffffff;
	}
}

/* スマートフォン用 */
@media(max-width:641px) {
	section.front_about div.container h2 span.sp img,
	section.front_performance div.container h2 span.sp img,
	section.front_categories div.container h2 span.sp img,
	section.front_sale div.container h2 img {
	width: 100%;
	height: auto;
	}
}
@media(max-width:500px) {
	h1 img {
	width: 310px;
	height: auto;
	}
}