@charset "utf-8";

/* ////////////////////////////////////////////////////////////
	File Name	top.css
*/

/*============================================================
	メイン
*/
.main {
	position: relative;
	height: 440px;
}
.main .carousel {
	position: relative;
	margin: 0 auto;
}
.main .carousel div {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.main .slick-arrow {
	overflow: hidden;
	position: absolute;
	z-index: 100;
	top: 50%;
	margin-top: -24px;
	width: 48px; height: 48px;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 2px solid #ffffff;
	text-indent: -999em;
}
.main .slick-prev {
	right: 50%;
	margin-right: 532px;
	background-image: url(../images/common/slick_arrow_prev.png);
}
.main .slick-next {
	left: 50%;
	margin-left: 532px;
	background-image: url(../images/common/slick_arrow_next.png);
}
.main .heading {
	position: absolute;
	left: 50%; top: 0;
	margin-left: -480px;
	width: 960px; height: 100%;
	background: transparent url(../images/top/heading.png) 0 50% no-repeat;
}
.main .heading * {
	overflow: hidden;
	height: 0;
}

/*============================================================
	サービス
*/
.service .list {
	padding: 40px;
	background: transparent url(../images/top/service_bg.jpg) 50% 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.service .list ul {
	margin: 0 -7px;
}
.service .list ul li {
	float: left;
	margin: 10px 0;
	padding: 0 7px;
	width: 20%;
}
.service .list ul li .block {
	padding: 5px;
	height: 100%;
	background-color: #ffffff;
}
.service .list ul li .block img {
	width: 100%;
}
.service .list ul li .block .text {
	padding: 12px 5px;
	font-size: 13px;
	line-height: 1.7;
}
.service .list ul li .block .text .h {
	margin-bottom: 6px;
	font-weight: bold;
	font-size: 15px;
	line-height: 1.4;
}

/*============================================================
	選ばれる理由
*/
.reason {
}

/*============================================================
	カーコーティングについて / 事例紹介
*/
.article {
	position: relative;
	padding: 0 0 50px 0;
	background-color: #003399;
	color: #ffffff;
}
.article:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%; top: 0;
	width: 100%; height: 100%;
	background-color: #6a7eb2;
}
.article .row {
	margin: 0 -26px;
}
.article .about,
.article .case {
	position: relative;
	z-index: 1;
	float: left;
	padding: 0 26px;
	width: 50%;
}
.article .unit-head .h {
	font-size: 26px;
}
.article .unit-head p {
	margin-top: 6px;
}
.article ul.list {
	margin: 0 -10px;
}
.article ul.list li {
	float: left;
	margin: 0 0 40px 0;
	padding: 0 13px;
	width: 50%;
	font-size: 16px;
	line-height: 1.5;
}
.article ul.list li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	-webkit-transition: opacity 0.4s ease;
	   -moz-transition: opacity 0.4s ease;
	    -ms-transition: opacity 0.4s ease;
	        transition: opacity 0.4s ease;
}
.article ul.list li a:hover {
	opacity: 0.7;
}
.article ul.list li img {
	width: 100%;
	height:auto;
}
.article ul.list li p {
	margin-top: 10px;
}
.article a.btn {
	padding: 12px 8px;
	max-width: 240px;
	background-color: #ffffff;
	border-color: #999999;
	font-size: 16px;
	line-height: 1.5;
	color: #333333;
}

/* ////////////////////////////////////////////////////////////
	ブレイクポイント
*/
@media screen and (max-width: 680px) {

	/*============================================================
		メイン
	*/
	.main {
		position: relative;
		padding-top: 59.375%;
		width: 100%; height: 0;
	}
	.main .carousel {
		position: absolute;
		left: 0; top: 0;
		width: 100%; height: 100%;
	}
	.main .carousel div {
		height: 100%;
	}
	.main .carousel div img {
		display: none;
	}
	.main .slick-arrow {
		margin-top: -13px;
		width: 26px; height: 26px;
		border-width: 1px;
		-webkit-background-size: 14px 14px;
		background-size: 14px 14px;
	}
	.main .slick-prev {
		right: auto;
		left: 0;
		margin-right: 0;
	}
	.main .slick-next {
		left: auto;
		right: 0;
		margin-left: 0;
	}
	.main .heading {
		position: absolute;
		left: 0; top: 0;
		margin-left: 0;
		width: 100%; height: 100%;
		background-image: url(../images/top/heading_sp.png);
		-webkit-background-size: cover;
		background-size: cover;
	}

	/*============================================================
		サービス
	*/
	.service .list {
		padding: 20px 0;
	}
	.service .list ul {
		margin: 0 -5px;
	}
	.service .list ul li {
		margin: 5px 0;
		padding: 0 5px;
		width: 50%;
	}
	.service .list ul li .block .text {
		padding: 10px 5px;
		font-size: 10px;
		line-height: 1.7;
	}
	.service .list ul li .block .text .h {
		margin-bottom: 6px;
		font-size: 12px;
		line-height: 1.4;
	}

	/*============================================================
		選ばれる理由
	*/
	.reason {
	}

	/*============================================================
		カーコーティングについて / 事例紹介
	*/
	.article {
		padding: 0;
	}
	.article:after {
		display: none;
	}
	.article .container {
		padding: 0;
	}
	.article .row {
		margin: 0;
	}
	.article .about,
	.article .case {
		float: none;
		padding: 0 0 20px 0;
		width: 100%;
	}
	.article .case {
		background-color: #6a7eb2;
	}
	.article .unit-head .h {
		font-size: 15px;
	}
	.article .unit-head p {
		margin-top: 4px;
	}
	.article ul.list {
		margin: 0 5px;
	}
	.article ul.list li {
		margin: 0 0 20px 0;
		padding: 0 5px;
		font-size: 10px;
		line-height: 1.5;
	}
	.article a.btn {
		padding: 12px 5px;
		max-width: 200px;
		font-size: 12px;
		line-height: 1.5;
		border-width: 2px;
	}

}