@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: #ff9632;
$color-mainhalf: #ffca98;
$color-sub: #f1f2ed;
$color-font: #42210b;

#wrapper{
	overflow: hidden;
}

//-------------------- 共通 --------------------
section.title-img{
	background: url("../img/header-traffic.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#service {
	margin-bottom: 8rem;
	@include md {
		margin-bottom: 6rem;
	}
	@include xs {
		margin-bottom: 4rem;
	}
	.title {
		text-align: center;
		h2{
			position: relative;
			display: inline-block;
			margin: 7rem auto;
			padding-bottom: 4rem;
			font-size: 30px;
			font-size: 3rem;
			font-weight: 400;
			letter-spacing: 0.1em;
			@include sm {
				padding-bottom: 3rem;
			}
			@include xs {
				font-size: 26px;
				font-size: 2.6rem;
				padding-bottom: 2rem;
				margin: 5rem auto;
			}
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;/*線の上下位置*/
				display: inline-block;
				width: 135px;/*線の長さ*/
				height: 1px;/*線の太さ*/
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);/*位置調整*/
				background-color: rgba(0,0,0,0.5);/*線の色*/
			}
		}
		& + div{
			width: 80%;
			margin: auto;
			margin-bottom: 10rem;
			@include sm {
				width: 90%;
			}
			@include xs {
				width: 95%;
				margin-bottom: 5rem;
			}
		}
	}
} 
//-------------------- traffic --------------------
.traffic {
	h2 {
		font-size: 30px;
		font-size: 3rem;
		font-weight: 700;
		color: #7A9A43;
		margin-bottom: 3rem;
		@include md {
			font-size: 28px;
			font-size: 2.8rem;
		}
		@include sm {
			font-size: 26px;
			font-size: 2.6rem;
		}
		@include xs {
			font-size: 24px;
			font-size: 2.4rem;
		}
		span {
			display: block;
			font-size: 50px;
			font-size: 5rem;
			margin-top: 3rem;
			@include md {
				font-size: 46px;
				font-size: 4.6rem;
			}
			@include sm {
				font-size: 42px;
				font-size: 4.2rem;
			}
			@include xs {
				font-size: 36px;
				font-size: 3.6rem;
			}
		}
	} 
	ul {
		justify-content: center;
		width: 90%;
		margin: 0 auto 3rem;
		li {

		}
	}
	p {
		text-align: justify;
	}
}
.improvement {
	.list-bg {
		position: relative;
		img {
			position: absolute;
			z-index: -1;
			height: 120%;
			right: -10%;
		}
		ul {
			padding: 10rem 0;
			@include md {
				padding: 8rem 0;
			}
			@include sm {
				padding: 6rem 0;
			}
			@include xs {
				padding: 4rem 0;
			}
			li {
				display: flex;
				align-items: center;
				margin-bottom: 4rem;
				&:last-child {
					margin-bottom: 0;
				}
				p {
					font-size: 30px;
					font-size: 3rem;
					font-weight: 600;
					border-bottom: solid 3px $color-main;
					padding-bottom: 1rem;
					@include md {
						font-size: 28px;
						font-size: 2.8rem;
					}
					@include sm {
						font-size: 26px;
						font-size: 2.6rem;
					}
					@include xs {
						font-size: 24px;
						font-size: 2.4rem;
						text-indent: -1.5em;
						padding-left: 1em;
					}
					span {
						color: $color-main;
					}
					&::before {
						font-family: "Font Awesome 5 Free";
						content: "\f00c";
						padding-right : 0.5em;
						color: $color-main;
						font-weight: 900;
					}
				}
			}
		}
	}
	.imp-title {
		margin-bottom: 4rem;
		img {
			filter:  drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
		}
	}
	.list-02 {
		li {
			@include xs {
				margin-bottom: 3rem;
			}
		}
		h4 {
			font-size: 30px;
			font-size: 3rem;
			font-weight: 600;
			color: $color-main;
			line-height: 1.35;
			@include md {
				font-size: 28px;
				font-size: 2.8rem;
			}
			@include sm {
				font-size: 26px;
				font-size: 2.6rem;
			}
			@include xs {
				font-size: 24px;
				font-size: 2.4rem;
			}
			span {
				display: block;
				color: #333;
				font-weight: 300;
				font-size: 16px;
				font-size: 1.6rem;
				@include sm {
					font-size: 14px;
					font-size: 1.4rem;
				}
			}
		}
	}
	& + div{
		a{
			&:hover{
				opacity: 0.5;
			}
		}
	}
}
.safety {
	padding: 4rem 0 2rem;
	@include sm {
		padding: 2rem 0 2rem;
	}
	ul {
		li {
			display: flex;
			align-items: center;
			margin-bottom: 6rem;
			@include sm {
				display: block;
				text-align: center;
			}
			@include xs {
				margin-bottom: 4rem;
			}
			img {
				margin-right: 3rem;
				width: 150px;
				@include md {
					width: 130px;
				}
				@include sm {
					width: 115px;
					margin-bottom: 2rem;
					margin-right: 0;
				}
				@include xs {
					width: 100px;
				}
			}
			dl {
				margin-bottom: 0;
				dt {
					font-size: 30px;
					font-size: 3rem;
					margin-bottom: 1.5rem;
					@include md {
						font-size: 28px;
						font-size: 2.8rem;
					}
					@include sm {
						font-size: 26px;
						font-size: 2.6rem;
						margin-bottom: 1rem;
					}
					@include xs {
						font-size: 24px;
						font-size: 2.4rem;
					}
					span {
						color: $color-main;
					}
				}
				dd {
					text-align: justify;
					margin-bottom: 0;
				}
			}
		}
	}
}