@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;


//mainimage
#mainimage {
	position: relative;
	.swiper-img {
		max-width: 100%;
		height: 100vh;
		background-position: center;
//		@include xl {
//			height: 650px;
//		}
//		@include lg {
//			height: 550px;
//		}
//		@include md {
//			height: 450px;
//		}
//		@include sm {
//			height: 400px;
//		}
//		@include xs {
//			height: 300px;
//		}
	}
	.img1 {
		background-image: url("../img/hero1-2.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/hero1-2.jpg")
		}
	}
	.img2 {
		background-image: url("../img/hero2.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/hero2.jpg")
		}
	}
	.img3 {
		background-image: url("../img/hero3.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/hero3.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;
		}
	}
	.copy{
		color: #fff;
		position: absolute;
		top: 50%;
		left: 5%;
		z-index: 10;
		letter-spacing: 0.2em;
		@include sm{
			top: inherit;
			bottom: 15%;
		}
		.en{
			font-size: 80px;
			font-size: 8rem;
			line-height: 1em;
			@include sm{
				font-size: 70px;
				font-size: 7rem;
			}
			@include xs{
				font-size: 50px;
				font-size: 5rem;
			}
		}
		.jp{
			font-size: 17px;
			font-size: 1.7rem;
			font-weight: bold;
			@include xs{
				font-size: 15px;
				font-size: 1.5rem;
			}
		}
	}
}

.flowing {
	width: 0;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 1s forwards linear;
	animation-delay: 1s;
}
.flowing:nth-child(2) {
	animation-delay: 1.5s;
}
.flowing:nth-child(3) {
	animation-delay: 2s;
}
@keyframes flowing-anim {
 0%{
	 width: 0%;
   }
100%{
	 width: 100%;
   }
}

.right-col{
	position: absolute;
	right: 0;
	top: 0;
	width: 76px;
	height: 100%;
	background: rgb(164,179,185);
	background: linear-gradient(180deg, rgba(164,179,185,1) 20%, rgba(80,98,109,1) 100%);
	z-index: 101;
	@include md{width: 65px;}
	@include sm{display: none;}
	.type {
	  position: relative;
	  width: 100%;
	  height: 100vh;
	  &::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80%;
	  }
	}
	.type 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;
	  }
	  &:hover {
		opacity: .5;
	  }
	}
	#type03 a::after {
	  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%;
	  }
	}
}

#news{
	padding: 4rem 0 5rem;
	.news-title{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		@include sm{
			.link-box{margin-bottom: 2rem;}
		}
	}
	ul{
		margin-bottom: 0;
		li{
			border-bottom: 1px solid #C8C8C8;
			dl{
				display: flex;
				padding: 1rem;
				margin: 0;
				align-items: center;
				a{
					display: flex;
					color: inherit;
					transition: 0.3s;
					@include xs{
						display: block;
					}
					&:hover{
						opacity: 0.5;
					}
				}
				dt{
					margin-right: 1.5em;
					font-weight: normal;
				}
				dd{margin-bottom: 0;}
			}
		}
	}
}

#message{
	position: relative;
	background-image: url("../img/message-back.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	padding-bottom: 5rem;
	margin-bottom: 7rem;
	z-index: 1;
	.message-box{
		margin-top: 8rem;
		margin-bottom: 3rem;
		@include xs{margin-top: 6rem;}
		h3{
			font-size: 28px;
			font-size: 2.8rem;
			margin-bottom: 2rem;
			line-height: 1.5em;
		}
	}
	.message-img{
		margin-right: -9rem;
		@include md{margin-right: -11vw;}
		@include sm{margin-right: 0;}
	}
	.message-deco{
		position: absolute;
		top: -6rem;
 		left: 5rem;
		color: transparent;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size: 70px;
		font-size: 7rem;
		letter-spacing: 0.05em;
		opacity: 0.5;
	 	-webkit-text-stroke-width: 1px;
	 	-webkit-text-stroke-color: #B4B4B4;
		@include xs{
			top: -3rem;
			left: inherit;
			right: 3rem;
			font-size: 60px;
			font-size: 6rem;
			text-align: right;
			line-height: 1em;
		}
	}
}

#business-menu{
	margin-bottom: 7rem;
	h2{
		text-align: center;
	}
	.business-menu-container{
		width: 90%;
		margin: 0 auto;
		display: flex;
		@include sm{
			display: block;
		}
		.business-1,.business-2{
			width: 100%;
			border: 1px solid #fff;
			a{
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 280px;
				background-color:#A0B1BF;
				background-blend-mode: multiply;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				transition: 0.3s;
				@include md{height: 230px;}
				@include sm{height: 180px}
				@include xs{height: 160px}
				&:hover{
					background-color:#fff;
				}
				&:hover dd::after{
					transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
				}
				dl{
					text-align: center;
					dt{
						font-size: 27px;
						font-size: 2.7rem;
						font-weight: 600;
					}
					dd{
						font-size: 12px;
						font-size: 1.2rem;
						display: inline-block;
						position: relative;
						&::after{
							position: absolute;
							left: 0;
							content: '';
							width: 100%;
							height: 1px;
							background: #fff;
							bottom: -2px;
							transform: scale(0, 1);
							transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
							transition: transform 0.3s;   /*変形の時間*/
						}
					}
				}
			}
		}
		.business-1 a{
			background-image: url("../img/top-business-1.jpg");
		}
		.business-2 a{
			background-image: url("../img/top-business-2.jpg");
		}
		
	}
}

#safety-menu{
	margin-bottom: 7rem;
	p{margin-bottom: 3rem;}
	overflow: hidden;
	@include sm{
		.link-box{margin-bottom: 4rem;}
	}
	.fluid-box-r{
		position: relative;
		img{
			max-height: 350px;
			min-height: 270px;
		}
	}
	.fluid-box-r::after{
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		border-bottom: 180px solid transparent;
		border-right: 70px solid transparent;
		border-left: 70px solid #fff;
		border-top: 180px solid #fff;
		box-sizing: border-box;
		@include sm{
			display: none;
		}
	}
}

#recruit-menu{
	position: relative;
	background: rgb(164,179,185);
	background: linear-gradient(270deg, rgba(164,179,185,1) 20%, rgba(80,98,109,1) 100%);
	color: #fff;
	z-index: 1;
	overflow: hidden;
	.recruit-left{
		position: relative;
		padding:5rem 4rem 6rem 0;
		h2{color: #fff;}
		@include sm{padding: 5rem 15px 6rem 15px;}
		&::after{
			position: absolute;
			top: -4%;
			left: 10vw;
			content: "";
			display: inline-block;
			width: 450px;
			height: 190px;
			background-image: url('../img/symbol-white.svg');
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 100;
			@include md{
				left: 8vw;
				width: 300px;
			}
			@include sm{
				left: inherit;
				right: 0rem;
			}
		}
		.recruit-box{
			margin-bottom: 3rem;
			h3{
				font-size: 28px;
				font-size: 2.8rem;
				margin-bottom: 2rem;
				line-height: 1.5em;
			}
		}
		.link-box a::before{
			background-image: none;
			background-color: $color-main;
			border: 1px solid #fff;
		}
		.link-box a{
			color:#fff;
			&:hover{
				color:$color-main;
			}
		}
		.link-box a::after{
			background-image: none;
			background-color: #fff;
			border: 1px solid #fff;
		}
	}
	.recruit-right{
		padding-left: inherit;
		.recruit-img{
			margin-right: calc(570px - 50vw - 15px);
			overflow: hidden;
			@include lg{margin-right: calc(480px - 50vw - 15px);}
			@include md{margin-right: calc(360px - 50vw - 15px);}
			@include sm{margin-right: 0;}
			img{
				object-fit: cover;
				width: 100%;
				max-height: 550px;
				min-height: 480px;
				@include sm{
					max-height: inherit;
					min-height: inherit;
				}
			}
		}
	}
	.recruit-img-sp{border-top: 1px solid #fff;}
	
}