@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);


/*-------------------------------------------------------------------
	#maintitle
-------------------------------------------------------------------*/

#maintitle.driver {
	background: url("../image/products/driver/driver.jpg") center center no-repeat;
	background-size: cover;
}

#maintitle.driver .inwrap{
	text-align: left;
	padding: 10px 0 200px;
}


#maintitle.driver .inwrap .mainbox{
	width: 32%;
}



#maintitle.driver .inwrap .no01{
	font-size: 7.0em;
	line-height: 1.0;
	margin: 100px 0;
	color: #fff;
}

#maintitle.driver .inwrap .driverbox{
	display: flex;
	flex-wrap: wrap;
	gap: 35px 2%;
}

#maintitle.driver .inwrap .mainbox dl{
	line-height: 1.0;
	position: relative;
}
	
#maintitle.driver .inwrap .mainbox dl dt{
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 99;
	pointer-events: none;
}

#maintitle.driver .inwrap .mainbox dl dt.bishop {
	bottom: 0;
}


#maintitle.driver .inwrap .mainbox dl dd{
	position: relative;
	overflow: hidden;
}

#maintitle.driver .inwrap .mainbox .bg {
	transition-duration: 0.4s;
}

#maintitle.driver .inwrap .mainbox .bg:hover {
	transform: scale(1.2);
	transition-duration: 0.3s;
}


#maintitle.driver .inwrap .mainbox .lead{
	font-size: 2.0em;
	line-height: 1.8;
}

#maintitle.driver .inwrap #bread,
#maintitle.driver .inwrap #bread a,
#maintitle.driver .inwrap #bread li{
	color: #fff;
}

#maintitle #pagetop {
	text-align: right;
	width: 1200px;
	margin: 0 auto;
}


@media screen and (max-width: 1280px){

	#maintitle.erook2 .inwrap {
		padding: 150px 0;
	}
	#maintitle #pagetop {
		width: 90%;
	}

}



/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	#maintitle #pagetop{
		width: 100%;
		text-align: center;
	}
}


/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 767px){
	
	
	#maintitle.driver {
		background: url("../image/products/driver/driver.jpg") bottom center no-repeat;
		background-size: cover;
	}
	
	#maintitle.driver .inwrap {
		text-align: left;
		padding: 15px 0 50px;
	}
	
	#maintitle.driver .inwrap .driverbox{
		display: block;
	}

	

	#maintitle.driver .inwrap .mainbox{
		display: block;
		text-align: left;
		color: #fff;
		font-weight: 600;
		width: 100%;
	}

	#maintitle.driver .inwrap .no01{
		font-size: 2.4rem;
		line-height: 1.0;
		margin: 100px 0;
	}
	
	#maintitle.driver .inwrap .mainbox{
		margin: 0 0 80px; 
	}

	#maintitle.driver .inwrap .mainbox dl{
		line-height: 1.0;
		position: relative;
	}
	
	#maintitle.driver .inwrap .mainbox dl dt{
		position: absolute;
	    bottom: 20px;
	    left: 20px;
	    z-index: 99;
	}

	#maintitle.driver .inwrap .mainbox dl dd{
		position: relative;
	    overflow: hidden;
	}

	#maintitle.driver .inwrap .mainbox .lead{
		font-size: 1.4em;
		line-height: 1.6;
	}
	
	#maintitle.driver .inwrap .mainbox .bg {
		transition-duration: 0.4s;
		width: 100%;
	}
	
}


@media print{
	
	#maintitle #pagetop {
		width: 90%;
	}


}