@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$color-main:#50626D;

#header-img{
	background: url(../img/01header.jpg) center / cover no-repeat;
}

#vehicle{
	#business01,#business02{
		padding-top: 76px;
   		margin-top: -76px;
		@include md{
			padding-top: 65px;
   			margin-top: -65px;
		}
	}
	h4{
		position: relative;
		color: $color-main;
		font-size: 25px;
		font-size: 2.5rem;
		margin-bottom: 4rem;
		margin-top: 2rem;
		&::after{
			position: absolute;
			left: 0;
			bottom: -2rem;
			content: "";
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, rgba(80,98,109,1) 0%, rgba(80,98,109,1) 25%, rgba(219,220,220,1) 25%, rgba(219,220,220,1) 100%);
		}
	}
	.fluid-box-l{
		img{
			height:430px;
		}
		@include lg{
			img{height: 400px;}
		}
		@include md{
			img{height: 300px;}
		}
		@include sm{
			img{
				height: auto;
				min-height: 250px;
			}
		}
	}
	.vehicle-container{
		background-color: #fff;
		background-image:
		 radial-gradient(#DBDBDB 0.75px, transparent 0.75px);
		background-size: 3px 3px;
		margin: -10rem calc(50% - 50vw) 5rem;
		padding-bottom: 5rem;
		width: 100vw;
		@include sm{margin: 3rem calc(50% - 50vw) 5rem;}
		h5{
			padding-top: 15rem;
			margin-bottom: 3rem;
			text-align:center;
			font-size: 20px;
			font-size: 2rem;
			@include sm{padding-top: 4rem;}
		}
		.grid-container{
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 50px;
			grid-row-gap: 40px;
			@include md{
				column-gap: 20px;
				grid-row-gap: 20px;
			}
			@include sm{
				column-gap: 10px;
				grid-row-gap: 10px;
			}
			@include xs{
				grid-template-columns: 1fr;
			}
			figure{
				position: relative;
				&::before{
					position: absolute;
					content: "";
					width: 100%;
					height: 20%;
					bottom: 0;
					left: 0;
					background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(51,51,51,1) 100%);
					mix-blend-mode: multiply;
					@include sm{height: 30%;}
				}
				figcaption{
					color: #fff;
					position: absolute;
					bottom: 1rem;
					left: 2rem;
				}
			}
		}
	}
	.attention{
		font-size: 20px;
		font-size: 2rem;
		font-weight: 600;
		color: #fff;
		text-align: center;
		background-color: $color-main;
		margin-top: 4rem;
		padding: 2rem 0; 
		@include xs{
			font-size: 17px;
			font-size: 1.7rem;
		}
	}
}

#safety{
	padding-top: 76px;
   	margin-top: -76px;
	@include md{
		padding-top: 65px;
		margin-top: -65px;
	}
	.safety-title{
		height: 350px;
		background: url("../img/01safety.jpg") center / cover no-repeat;
		position: relative;
		margin-bottom: 5rem;
		@include md{
			height: 260px;
		}
		@include xs{
			height: 200px;
			margin-bottom: 2rem;
		}
		h3{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-family: "Oswald", sans-serif;
			font-optical-sizing: auto;
			font-weight: 600;
			font-style: normal;
			font-size: 55px;
			font-size: 5.5rem;
			color: #fff;
			text-align: center;
			span{
				display: block;
				font-size: 16px;
				font-size: 1.6rem;
				margin-left: 2rem;
			}
		}
	}
	.safety-contents{
		margin-bottom: 7rem;
		@include xs{margin-bottom: 4rem;}
		.row{
			position: relative;
			h4{
				position: relative;
				font-size: 22px;
				font-size: 2.2rem;
				font-weight: 600;
				margin: 1.5rem 0 6rem 0;
				@include sm{
					margin: 2rem 0 4rem 0;
				}
				&::after{
					position: absolute;
					left: 0;
					bottom: -3rem;
					content: "";
					width: 80px;
					height: 1px;
					background-color: #4D4D4D;
					@include sm{
						bottom: -2rem;
					}
				}
			}
			.safety-deco{
				position: absolute;
				top: -5rem;
				right: 0;
				z-index: -1;
				font-size: 100px;
				font-size: 10rem;
				font-family: "Oswald", sans-serif;
				font-optical-sizing: auto;
				font-weight: 600;
				font-style: normal;
				color: #EAEAEB;
				@include sm{
					top: -7rem;
					z-index: 2;
					color: lightgray;
					mix-blend-mode: multiply;
				}
				@include xs{
					font-size: 80px;
					font-size: 8rem;
					top: -6rem;
					right: 2rem;
				}
			}
		}
		.safety-sub{
			margin-top: 4rem;
			@include xs{margin-top: 2rem;}
			>div{
				margin-bottom: 1rem;
			}
			img{margin-bottom: 1rem;}
			dl{
				dt{
					margin-bottom: 0.5rem;
				}
				dd{
					@include xs{
						font-size: 13px;
						font-size: 1.3rem;
						line-height: 1.6em;
					}
				}
			}
		}
	}
}