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


/* ************************************************ 
 *	
 *	トップページ
 *	
 * ************************************************ */
#contents_css,
.top_article{
	margin:0px;
	padding:0px;
}
.top_article section{
	padding:4em 0em;
}
@media only screen and  ( max-width : 896px ) {
	/* smp */
	.top_article section{
		padding:2em 0em;
	}
}

img{line-height:0 !important;}

/* ---------------------堤自動車のサービスメニュー--------------------- */
#top_service{
	padding-bottom:0px;
}
#top_service h2{
	padding-top:2em;
	padding-bottom:0.5em;
}

.top_service_ul li{
	position: relative;
	line-height:0;
}
.top_service_ul li a{
	color:#fff;
	font-weight:bold;
	display:block;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
}
.top_service_ul li img{
	width:100%;
	height:auto;

}
.top_service_title{
	position: absolute;
	bottom: 0px;
	left: 0%;
	width:100%;
	line-height:140%;
	font-size:100%;
	background-color: rgba(0,0,0,0.2);
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
}
.top_service_title .toumeiblack_bg{
	display:block;
	padding:3%;
	height:3em;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
}


@media print, screen and ( min-width : 896px ) {
	.top_service_ul li{
		float:left;
		width:33.3%;
	}
	.top_service_ul li a:hover .top_service_title{
		background-color: rgba(0,0,0,0.7);
	}
	.top_service_ul li a:hover .toumeiblack_bg{
		padding-bottom:3em;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_service_ul li .top_service_title{
		background-color: rgba(0,0,0,0.7);
	}
	.top_service_ul li{
		float:left;
		width:50%;
		font-size:80%;

	}
}
/* ---------------------堤自動車のご案内--------------------- */
#top_about{
	position: relative;
	min-height: 100%;
	-moz-background-size:cover;
	background-size:cover;
	background-image:url(images/top/top_about.jpg);
	position: relative;
}
.top_about_main{
	color:#fff;
	background-color: rgba(0,0,0,0.4);
	padding:5%;
}
.top_about_main p{
	font-size:90%;
	line-height:150%;
}
@media print, screen and ( min-width : 896px ) {
	#top_about{
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	.top_about_main{
		width:55%;
		margin-left:35%;
	}


}
@media only screen and  ( max-width : 896px ) {
	.top_about_main{
		font-size:90%;
		margin-top:35%;
	}
}
/* ---------------------施工事例--------------------- */
#top_jirei{
	background:#1f1511;
	color:#fff;
}
#top_jirei .inner_block{
	position: relative;
}
/* 施工事例一覧へ */
.top_jirei_link{
	color:#fff !important;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	display:block;
	background:#a17b0b url(images/top/top_jirei_link.png) 98% 50% no-repeat;
	padding:0.5em 2em 0.5em 0.5em;
	font-weight:bold;
	font-size:90%;
}
@media print, screen and ( min-width : 896px ) {
	.top_jirei_link{
		position: absolute;
		top: 5px;
		right: 0%;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_jirei_link{
		background:#a17b0b url(images/top/top_jirei_link.png) 98% 50% no-repeat;
		-moz-background-size:6px 8px;
		background-size:6px 8px;
		margin-top:1em;
	}
}



/* ---------------------堤自動車のコーティングポリシー--------------------- */
#top_poricy{
	position: relative;
	min-height: 100%;
	-moz-background-size:cover;
	background-size:cover;
	background-image:url(images/top/top_policy.jpg);
	position: relative;
}
.top_poricy_main{
	background-color: rgba(255,255,255,0.6);
	padding:5%;
}
.top_poricy_main p{
	font-size:90%;
	line-height:150%;
}
.top_poricy_span{
	font-size:110%;
	color:#a17b0b;
	font-weight:bold;
}
@media print, screen and ( min-width : 896px ) {
	#top_poricy{
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: left top;
	}
	.top_poricy_main{
		width:55%;
		margin-left:35%;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_poricy_main{
		font-size:90%;
		margin-top:35%;
	}
}
/* ---------------------お知らせー--------------------- */
@media print, screen and ( min-width : 896px ) {
	.top_news,
	.top_fb{
		width:32%;
	}
	.top_news{
		float:left;
		margin-right:2%;
	}
	.top_fb{
		float:left;
		overflow:hidden;
	}
	.top_banner{
		width:32.5%;
		float:right;
	}
	.top_fb .fb-page{
		width:100% !important;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_news,
	.top_fb{
		margin-bottom:1em;
	}
	.top_fb{
		width:90%;
		overflow:hidden;
		margin-left:auto;
		margin-right:auto;
	}
	.top_fb .fb-page{
		width:100% !important;
		margin-left:auto;
		margin-right:auto;
		height:300px !important;
	}
	.fb_iframe_widget,
	.fb_iframe_widget span,
	.fb_iframe_widget iframe[style]{
	    width: 100% !important;
	}
}




.top_news_title{
	border-top:2px solid #a17b0b;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:100%;
	padding:0.2em 0.5em;
}
.top_news_ul li{
	border-bottom:1px solid #ccc;
}
.top_news_ul li a{
	padding:0.5em;
	color:#000;
	display:block;
	line-height:140%;
}
@media only screen and  ( max-width : 896px ) {
	.top_news_ul li a{
		padding:1.5em 3em 0.5em 0.5em;
		background:#f5f5f5 url(images/common/icon.png) 98% 50% no-repeat;
		-moz-background-size:8px 8px;
		background-size:8px 8px;
	}
}
.top_news_ul li .title{
	display:block;
	color:#000;
	font-weight:bold;
	margin-bottom:0.2em;
	font-size:85%;
	line-height:140%;
}
.top_news_ul li .days{
	display:block;
	color:#666666;
	font-size:70%;
}

/* ---------------------top_banner--------------------- */
.top_banner_ul li{
	margin-bottom:0.8em;
}
@media print, screen and ( min-width : 896px ) {
	.top_campaign_banner_ul li{
		margin-bottom:1.5em;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_campaign_banner_ul li{
		margin-bottom:0.5em;
	}
}
.top_campaign_banner_ul li:last-child{
	margin-bottom:0em;
}
.top_banner_ul li img,
.top_campaign_banner_ul img{
	width:100%;
	height:auto;
}

/* ---------------------top_voice--------------------- */
#top_voice{
	position: relative;
	min-height: 100%;
	-moz-background-size:cover;
	background-size:cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-image:url(images/top/top_voice.jpg);
	position: relative;
	color:#fff;
}
.top_voice_ul{
	font-size:80%;
	line-height:160%;
}
.top_voice_name{
	font-size:110%;
	font-weight:bold;
	height:3em;
}

@media print, screen and ( min-width : 896px ) {
	.top_voice_ul li{
		width:32.0%;
		float:left;
		margin-right:2%;
	}
	.top_voice_ul li:last-child{
		float:right;
		margin-right:0%;
	}
	.top_voice_ul img{
		margin-bottom:1em;
	}
}
@media only screen and  ( max-width : 896px ) {
	.top_voice_ul img{
		width:35%;
		float:left;
	}
	.top_voice_name{
		width:60%;
		float:right;
	}
	.top_voice_ul p{
		padding-top:1.5em;
		clear:both;
		float:none;
	}

	.top_voice_ul li{
		border-bottom:1px solid #111111;
		padding:1.5em 0px;
	}
	.top_voice_ul li:last-child{
		border:none;
	}
}
/* ---------------------アクセス--------------------- */
@media only screen and  ( max-width : 896px ) {
	#top_access iframe{
		height:150px;
	}
}

/* ---------------------営業日カレンダー--------------------- */
.business-calendar{font-size:90%;}
	.business-calendar caption{
		font-weight:bold;
		background:#333;
		color:#fff;
		padding:1.5%;
	}
	.business-calendar-attribute{
		display:none;
	}
@media print, screen and ( min-width : 896px ) {
	.business-calendar-box div{
		width:30%;
		float:left;
		padding:1.5%;
		margin-bottom:1em;
	}
	.business-calendar-box table th,
	.business-calendar-box table td{
		padding:0.5em 0em;
		
	}
}
@media only screen and  ( max-width : 896px ) {
	.business-calendar-box div{
		margin-bottom:1em;
	}
}
.top_banner2 li img{
	width:100%;
}
.top_banner2 li{
	width:49%;
	float:left;
}
.top_banner2 li:nth-child(2n) {
	float:right;
}
/* ---------------------youtbe--------------------- */
.top_youtube{
	background:#f5f5f5;
}
.top_youtube_list{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-wrap: wrap;
	margin-left:-0.5%;
	margin-right:-0.5%;
}
.top_youtube_list li{
	width:24%;
	margin:0.5%;
}
@media only screen and ( max-width : 500px ) {
	.top_youtube_list li{
		width:49%;
	}
}
.top_youtube_list iframe{
	width: 100%;
	height: 100%;
	aspect-ratio: 9 / 16;
}