@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;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$main-color: #289c4c;
$sub-color: #fabe00;


#news h3,#recruit h3{
	&::first-letter{
		color: $sub-color;
	}
}
h4{
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5em;
	margin-bottom: 3rem;
	@include xs{
		font-size: 25px;
		font-size: 2.5rem;
		margin-bottom: 2rem;
	}
	span{
		color: $main-color;
	}
}
#recruit h4 span{
	color: $sub-color;
}

//top-slide------------------------------------------------------------------ここから
#hero-img{
	margin-bottom: 7rem;
	position: relative;
	@include xs{
		margin-bottom: 5rem;
	}
	#mainimage {
		position: relative;
		&::after{
			position: absolute;
			right: 7rem;
			bottom: -0.5rem;
			content: "SHIMIZU LOGISTICS";
			font-family: "Oswald", sans-serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size: 90px;
			font-size: 9rem;
			line-height: 90px;
			letter-spacing: 0.04em;
			color: #fff;
			opacity: 0.3;
			z-index: 1;
			@include xs{
				font-size: 75px;
				font-size: 7.5rem;
				line-height: 75px;
			}
		}
		.swiper-img {
			position: relative;
			max-width: 100%;
			height: 100vh;
			background-position: center;
			&::before{
			  content: "";
			  position: absolute;
			  inset: 0;
			  background-image: linear-gradient(45deg, #dbdbdb 25%, transparent 25%, transparent 75%, #dbdbdb 75%),
			  linear-gradient(45deg, #dbdbdb 25%, transparent 25%, transparent 75%, #dbdbdb 75%); 
			  background-position: 0 0, 2px 2px;  /* 「0 0」と1マス（1色）の大きさ「30px 30px」をそれぞれ指定 */
			  background-size: 4px 4px;           /* 1マス分の倍の大きさを指定「60px 60px」 */
			  background-color: #FFF;  
			  mix-blend-mode: multiply; /* ←乗算 */
			  pointer-events: none;
			}
		}
		.img1 {
			background-image: url("../img/top-hero1.jpg");
			background-size: cover;
			@include xs{
				background-image: url("../img/top-hero1-s.jpg");
			}
		}
		.img2 {
			background-image: url("../img/top-hero2.jpg");
			background-size: cover;
			@include xs{
				background-image: url("../img/top-hero2-s.jpg");
			}
		}
		.img3 {
			background-image: url("../img/top-hero3.jpg");
			background-size: cover;
			@include xs{
				background-image: url("../img/top-hero3-s.jpg");
			}
		}
		.swiper-pagination-bullet {
			width: 5.5rem;
			height: 3px;
			@include sm {
				width: 4rem;
			}
			@include xs {
				width: 3rem;
				bottom: 5px;
			}
		}
		.swiper-pagination-bullets {
			bottom: 10px;
			width: 100%;
			right: 1.5rem;
			@include xs {
				bottom: 5px;
				right: 1rem;
			}
		}
	}
	.swiper-caption{
		position: absolute;
		bottom: 8%;
		left: 8%;
		z-index: 999;
		h2,p{
			color: #fff;
			font-weight: 600;
		}
		h2{
			font-size: 55px;
			font-size: 5.5rem;
			margin-bottom: 1rem;
			@include xs{
				font-size: 40px;
				font-size: 4rem;
			}
		}
		p{
			font-size: 24px;
			font-size: 2.4rem;
			line-height: 1.75em;
			@include xs{
				font-size: 20px;
				font-size: 2rem;
			}
		}
	}
	a {
		  display: inline-block;
		  position: absolute;
		  right: 22px;
		  bottom: 0;
		  z-index: 2;
		  padding: 10px 10px 110px;
		  color: #fff;
		  font-size: 14px;
		  font-family: "Montserrat", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: 600;
		  font-style: normal;
		  line-height: 1;
		  letter-spacing: .2em;
		  text-decoration: none;
		  writing-mode: vertical-lr;
		  transition: .2s;
		  overflow: hidden;
		  &::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 1px;
			height: 100px;
			background: #fff;
			animation: sdl03 2s cubic-bezier(1, 0, 0, 1) infinite;
		  }
		@keyframes sdl03 {
		  0% {
			transform: scale(1, 0);
			transform-origin: 0 0;
		  }
		  30% {
			transform: scale(1, 1);
			transform-origin: 0 0;
		  }
		  70% {
			transform: scale(1, 1);
			transform-origin: 0 100%;
		  }
		  100% {
			transform: scale(1, 0);
			transform-origin: 0 100%;
		  }
		}
		  &:hover {
			opacity: .5;
		  }
	}
}

//news------------------------------------------------------------------ここから
#news{
	margin-bottom: 10rem;
	@include xs{
		margin-bottom: 8rem;
	}
	ul{
		li{
			border-bottom: 1px solid #c7c7c7;
			padding: 1rem;
			dl{
				display: flex;
				gap: 3rem;
				@include xs{
					flex-direction: column;
					gap: 0;
				}
			}
		}
	}
}

//intro------------------------------------------------------------------ここから
#intro {
	margin-bottom: 7rem;
	position: relative;
	padding: 100px 0 0;
	@include md{
		padding: 60px 0 0;
	}
	@include sm{
		padding: 0;
	}
	&::before{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 60%;
		height: 100%;
		background: url("../img/top-track.jpg") center/cover no-repeat;
		z-index: 1;
		@include md{
			width: 65%;
		}
		@include sm {
			position: relative;
			width: 100%;
			height: 300px;
			display: block;
		}
	}
	.container {
		position: relative;
		z-index: 2;
		.intro-message {
			background: #fff;
			padding: 6rem 6rem 0 0;
			width: 55%;
			position: relative;
			&::after{
				position: absolute;
				right: 2rem;
				top: -4rem;
				content: "since 1977";
				font-family: "Barlow Condensed", sans-serif;
				font-weight: 500;
				font-style: normal;
				font-size: 70px;
				font-size: 7rem;
				line-height: 70px;
				letter-spacing: 0.04em;
				color: $main-color;
				opacity: 0.15;
				z-index: 1;
				@include sm{
					right: 0;
					top: -1.85rem;
				}
				@include xs{
					top: -1.5rem;
				}
			}
			@include md{
				width: 60%;
			}
			@include sm{
				width: 100%;
				padding: 4rem 0 0;
			}
			p{margin-bottom: 3rem;}
		}
	}
}
//mark------------------------------------------------------------------ここから
#mark{
	margin-bottom: 10rem;
	@include xs{
		margin-bottom: 5rem;
	}
	.marks{
		display: flex;
		gap: 2rem;
		justify-content: center;
		@include md{
			flex-direction: column;
			align-items: center;
		}
		.mark-container{
			display: flex;
			width: 50%;
			padding: 2rem 3rem 2.5rem;
			background: #fff;
			box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
			align-items: center;
			gap: 2rem;
			@include md{
				width: 100%;
        		max-width: 500px;
			}
			@include xs{
				flex-direction: column;
			}
			.mark-img{
				min-width: 90px;
				display: grid;
				place-content: center;
				@include xs{
					max-width: 100px;
				}
			}
			.mark-text{
				line-height: 1.65em;
				dl{margin-bottom: 0.75rem;}
				.mark-link a{
					display: inline-block;
					background: #a7a7a7;
					border-radius: 9999px;
					color: #fff;
					font-size: 12px;
					font-size: 1.2rem;
					padding: 0.2rem 1.5rem;
					&:hover{
						background: #808080;
					}
				}
			}
		}
	}
}
//service------------------------------------------------------------------ここから
#service{
	background: url("../img/top-service-bg.jpg") no-repeat center/cover;
	padding: 8rem 0;
	@include xs{
		padding: 5rem 0;
	}
	.container{
		display: flex;
		gap: 5rem;
		@include md{
			flex-direction: column;
			gap: 3rem;
		}
		.service-text{
			width: 50%;
			@include md{width: 100%;}
			p{margin-bottom: 3rem;}
		}
		.service-img{
			width: 50%;
			@include md{
				width: 100%;
				max-width: 500px;
				margin: 0 auto;
			}
		}
	}
}
//safety------------------------------------------------------------------ここから
#safety{
	margin-bottom: 10rem;
	position: relative;
	padding: 100px 0 0;
	@include md{
		padding: 60px 0 0;
	}
	@include sm{
		padding: 0;
	}
	&::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 65%;
		height: 100%;
		background: url("../img/top-safety.jpg") center/cover no-repeat;
		z-index: 1;
		@include md{
			width: 65%;
		}
		@include sm {
			position: relative;
			width: 100%;
			height: 300px;
			display: block;
		}
		
	}
	.container {
		position: relative;
		z-index: 2;
		.safety-message {
			background: #fff;
			padding: 6rem 0 0 6rem;
			width: 50%;
			margin: 0 0 0 auto;
			position: relative;
			&::after{
				position: absolute;
				right: 2rem;
				top: -4rem;
				content: "SAFETY";
				font-family: "Barlow Condensed", sans-serif;
				font-weight: 500;
				font-style: normal;
				font-size: 70px;
				font-size: 7rem;
				line-height: 70px;
				letter-spacing: 0.04em;
				color: $main-color;
				opacity: 0.15;
				z-index: 1;
				@include sm{
					right: 0;
					top: -1.85rem;
				}
				@include xs{
					top: -1.5rem;
				}
			}
			@include md{
				width: 60%;
			}
			@include sm{
				width: 100%;
				padding: 4rem 0 0;
			}
			p{margin-bottom: 3rem;}
			ul{
				display: flex;
				gap: 0 3rem;
				flex-wrap: wrap;
				background: #f0f0ee;
				border-radius: 5px;
				padding: 1.5rem 2rem;
				margin-bottom: 3rem;
				li{
					i{
						color: $main-color;
						margin-right: 0.5rem;
					}
				}
			}
		}
	}
}
//recruit------------------------------------------------------------------ここから
#recruit{
	position: relative;
	&::after{
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 55%;
    	height: 87%;
		background: url("../img/top-recruit.png") bottom/contain no-repeat;
		@include md{
			display: block;
			position: relative;
			width: 100%;
			height: 300px;
			background: url("../img/top-recruit-s.png") center center/cover no-repeat;
		}
		@include xs{
			height: 200px;
		}
	}
	.recruit-text{
		p{margin-bottom: 3rem;}
		@include md{
			margin-bottom: 7rem;
		}
		.link-box a{
			background: $sub-color;
			border: 1px solid $sub-color;
			&:hover{
				background: #fff;
				border: 1px solid $sub-color;
				color: $sub-color;
			}
		}
	}
}
//トラックアニメーション------------------------------------------------------------------ここから
.truck-scene {
	position: relative;
	width: 100%;
	height: 150px; /* 好きな高さに調整 */
	overflow: hidden;
	margin-bottom: 10rem;
	.city {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%; /* 横に広くしてアニメーションで流す */
  		height: 60%;
		background: url("../img/city.svg") repeat-x;
		background-size: 1000px;
  		animation: moveCity 10s linear infinite;
	}
	.truck {
		position: absolute;
		bottom: 0;
		right: 10%;
		width: 200px;
		z-index: 2;
		animation: truckShake 1s ease-in-out infinite alternate;
		@include sm{
			width: 170px;
		}
	}
}
@keyframes moveCity {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000px 0; 
  }
}
@keyframes truckShake {
	0%   { transform: translateY(0); }
	20%  { transform: translateY(-1px); }
	30%  { transform: translateY(0px); }
	80%  { transform: translateY(0px); }
	90%  { transform: translateY(-1px); }
	100% { transform: translateY(0); }
}
//access------------------------------------------------------------------ここから
#access{
	margin-bottom: 10rem;
	.grid{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		justify-content: space-between;
		@include md{
			grid-template-columns: repeat(2, 1fr);
			gap: 4rem 1.5rem;
		}
		@include xs{
			grid-template-columns: repeat(1, 1fr);
		}
		.map{
			aspect-ratio: 16 / 9;
			max-width: 1000px;
			width: 100%;
			height: auto;
			margin-bottom: 1rem;
		}
		dl{
			text-align: center;
		}
	}
}