@charset "utf-8";

.mainimage img { width: 100%; }

.slick-slide img { /* 画像下の隙間削除 */
	vertical-align: bottom;
	display: inline!important;
}



.sectionTitle{
	margin-bottom: 50px;
	position: relative;
	.square{
		width: 50px;
		height: 45px;
		background-color: var(--sub-color-orange);
		position: absolute;
		z-index: 2;
	}
	h2{
		font-family: 'Roboto', sans-serif;
		color: #fff;
		font-size: 8rem;
		letter-spacing: .07em;
		text-transform: uppercase;
		font-weight: 800;
		line-height: 1;
		margin-bottom: 10px;
		position: relative;
		z-index: 3;
		padding-top: 10px;
		padding-left: 15px;


	}
	.stroke{
		/* text-stroke:2px #fff;
		-webkit-text-stroke: 2px #fff; */
		display: inline-block;
		text-shadow    : 
			2px  2px 0px #ffffff,
			-2px  2px 0px #ffffff,
			2px -2px 0px #ffffff,
			-2px -2px 0px #ffffff,
			2px  0px 0px #ffffff,
			0px  2px 0px #ffffff,
			-2px  0px 0px #ffffff,
			0px -2px 0px #ffffff;        /* 文字の影 */
		}

	span{
		font-size: 1.6rem;
		color: #fff;
		letter-spacing: 0.04em;
		display: flex;
		align-items: center;
		gap: 15px;
		&::before{
			content: '';
			width: 25px;
			height: 2px;
			background-color: #fff;
			display: block;
			line-height: 1;
		}
	}
}

.sectionSubTitle{
	margin-bottom: 50px;
	text-align: center;
	h2{
		font-size: 4rem;
		letter-spacing: 0.1em;
		color: #333;
		margin-bottom: 25px;
		font-weight: bold;
		line-height: 1;
		font-weight: bold;
	}
	span{
		font-size: 3.6rem;
	}
	.bar{
		width: 60px;
		height: 6px;
		background-color: #f6622e;
		margin: 0 auto;
	}
}

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

	.sectionTitle{
		margin-bottom: 30px;
		.square{
			width: 30px;
			height: 30px;
		}
		.stroke{
			padding-left: 15px;
        	padding-top: 10px;
		}
		h2{
			font-size: 5rem;
			margin-bottom: 5px;
		}
	}
	.sectionSubTitle{
		margin-bottom: 30px;
		h2{
			font-size: 2.8rem;
			margin-bottom: 20px;
			span{
				font-size: 2.6rem;
			}
		}
	}
}

@media screen and (max-width:374px) {
	.sectionTitle{
		h2{
			font-size: 4.4rem;
		}
		span{
			font-size: 1.5rem;
		}
	}
}

/* ------------------------
mainvisual メインビジュアル
--------------------------*/
#mainvisual{
	position: relative;
	margin-top: 110px;
}
.mvImage{
	width: 100%;
	/* slick用 */
	>div{
		overflow: hidden;
	}
	img{
		width: 100%;
		display: block;
		height: 650px;
		object-fit: cover;
	}
}
.mvTxt{
	position: absolute;
	left: 50%;
	top: 65px;
	transform: translateX(-50%);
	z-index: 2;
	/* pointer-events: none; */
	width: 953px;
	img{
		width: 100%;
	}
}
.slide-dots{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding-top: 25px;
	
	/* 作りたい図形 */
	li {
		width: 15px;
		height: 15px;
		background: #ccc;
		cursor: pointer;
		transition: 0.2s;
	}
	/* 押した時、アクティブ時の設定 */
	li:hover,
	li.slick-active{
		background-color: var(--sub-color);
	}
	/* ボタン非表示 */
	li button {
		display: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		padding: 0;
		border: none;
		background-color: transparent;
	}
}
@media screen and (max-width:999px) {
	#mainvisual{
		margin-top: 80px;
	}
	.mvTxt{
		/* width: 140px; */
		width: clamp(24rem, 10rem + 30.45vw, 42rem);
		top: 25px;
		
	}
	.slide-dots{
		padding-top: 20px;
		gap: 10px;
		li{
			width: 10px;
			height: 10px;
		}
	}
}
@media screen and (max-width:650px) {
	#mainvisual{
		.mvImage {
			img {
				height: auto;
			}
		}
		.slick-dotted.slick-slider{
			margin-bottom: 0;
		}
	}

}

/* ------------------------
recruit 採用情報
--------------------------*/
section#recruit{
	padding: 120px 0;
	background: url(../images/contents/index/recruitBg.webp) bottom no-repeat;
	position: relative;
	.sectionTitle{
		h2{
			color: var(--main-color);
		}
		span{
			color: #333;
			font-weight: bold;
			font-size: 1.6rem;
			&::before{
				background-color: #333;
			}
		}
	}
	.recruitBg01{
		pointer-events: none;
		position: absolute;
		right: 0;
		bottom: -75px;
		z-index: 5;
	}
}
.recruitContent{
	display: flex;
	gap: 75px;
	.img{
		width: 49%;
		height: auto;
		img{
			width: 100%;
			height: auto;
		}
	}
	.txt{
		width: calc(100% - 49% - 75px);
	}
	.recruitTitle{
		h3{
			font-size: 3rem;
			letter-spacing: .004em;
			font-weight: bold;
			margin-bottom: 40px;
			span{
				display: inline-block;
				line-height: 1;
				padding: 15px 15px;
				color: #fff;
				background: var(--sub-color);
				margin-bottom: 10px;
				&:last-child{
					line-height: 1.3;
				}
			}
		}
	}
	p{
		color: #333;
		font-size: 2rem;
		font-weight: 500;
		line-height: 2;
	}
}

@media screen and (max-width:1400x) {
	.recruitContent{
		gap:50px
	}
}

@media screen and (max-width:999px) {
	section#recruit{
		padding: 50px 0 60px;

		.recruitBg01{
			bottom: -20px;
			width: 80px;
		}
	}

	.recruitContent{
		gap: 25px;
		flex-direction: column-reverse;
		.txt{
			width: 100%;
			.recruitTitle{
				h3{
					font-size: 2rem;
					margin-bottom: 15px;
				}
			}
		}
		.img{
			width: 100%;
		}
		p{
			font-size: 1.6rem;
		}
	}


}
/* ------------------------
occupation 職種と資格
--------------------------*/
section#occupation{
	padding: 120px 0;
	background-color: #f2f8f6;
	.content{
		display: flex;
		>div{
			width: 50%;
			background-color: var(--main-color);
		}
		>div.contentBlue{
			background-color: var(--sub-color);
		}
		.thum{
			width: 100%;
			/* height: 400px; */
			img{
				width: 100%;
				height: 400px;
				object-fit: cover;
			}
		}
		.txtBox{
			padding: 40px;
			.ttl{
				color: #fff;
				font-size: 2.8rem;
				font-weight: bold;
				border-left: 5px solid #baead6;
				line-height: 1.3;
				margin-bottom: 25px;
				padding-left: 10px;
			}
			.summary{
				background: #fff;
				padding: 20px;
				margin-bottom: 30px;
				.summaryTitle{	
					font-size: 1.7rem;
					color: #666;
					margin-bottom: 15px;
					display: block;
					line-height: 1;
					font-weight: 500;
				}
				ul{
                    display: flex;
                    gap: 25px;
					flex-wrap: wrap;
					li{
						font-size: 1.8rem;
						font-weight: 500;
						color: #333;
						display: flex;
                        align-items: center;
					}
					li::before{
                        content: '';
                        background-color: var(--main-color);
                        width: 7px;
                        height: 7px;
                        margin-right: 10px;
                        display: block;
                        border-radius: 50%;
                        line-height: 1;
					}
				}
			}
			.btn{
				a{
					font-size: 1.6rem;
					letter-spacing: 0.04em;
					color: var(--main-color);
					background: #fff;
					border: 2px solid #fff;
					width: 215px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					text-decoration: none;
					margin: 0 auto; 
					font-weight: 500;
					position: relative;
					transition: 0.2s;
					padding: 10px 40px 10px 25px;
				}
				a::after{
					font-family: 'Font Awesome 5 Free';
					position: absolute;
					content: '\f054';
					font-weight: bold;
					right: 15px;
					font-size: 1.5rem;
					line-height: 1;
				}
				a:hover{
					background: var(--main-color);
					color: #fff;
				}
			}
		}
		.contentBlue{
			.ttl{
				border-left: 5px solid #9db0d9;
			}
			.summary{
				ul{
					li::before{
						background-color: var(--sub-color);
					}
				}
			}
			.btn{
				a{
					color: var(--sub-color);
				}
				a:hover{
					background: var(--sub-color);
					color: #fff;
				}
			}
		}
	}
}

@media screen and (max-width:999px) {
	section#occupation{
		padding: 60px 0;
		.content{
			flex-direction: column;
			gap: 40px;
			>div {
				width: 100%;
			}
			.thum{
				height: auto;
				img{
					height: 250px;
				}
			}
			.txtBox{
				padding: 20px;
                .ttl {
                    font-size: 2.2rem;
                    margin-bottom: 20px;
				}
				.summary{
					margin-bottom: 20px;
					.summaryTitle{
						font-size: 1.6rem;
						margin-bottom: 5px;
					}
					ul{
						gap: 5px 15px;
					}
				}
			}
		}
	}
}

/* ------------------------
強み
--------------------------*/
section#strength{
	padding: 120px 0;
	background-color: var(--main-color);
	background-image: url('../images/contents/index/strengthBg.webp');
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	position: relative;
	
	.bg01{
        position: absolute;
        top: 1660px;
        left: 0;
        width: 326px;
        height: 538px;
	}
	.bg02{
		position: absolute;
		right: 0;
		bottom: 400px;
	}
}

.strengthContent{
	display: flex;
	gap: 50px;
	flex-direction: column;
	position: relative;

	.contentTxtRight,
	.contentTxtLeft	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		
		.img{
			height: 500px;
			max-width: 830px;
			width: 100%;
			background-color: #ddd;
			img{
				width: 100%;
                object-fit: cover;
                height: 500px;
			}
		}
		.txt{
			position: absolute;
			right: 0;
			padding: 60px 70px;
			max-width: 640px;
			width: 100%;
			background: #fff;
			.ttl{
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 15px;
				text-align: center;
				font-size: 2.8rem;
				letter-spacing: 0.02em;
				border-bottom: 2px solid var(--sub-color-orange);
				margin-bottom: 25px;
				line-height: 1;
				padding-bottom: 15px;
				color: #333;
				font-weight: bold;
				span{
					font-family: 'Roboto';
					font-size: 5rem;
					color: var(--sub-color-orange);
					line-height: 1;
					font-weight: bold;
				}
			}
			p{
				font-size: 1.8rem;
				color: #333;
			}
		}
	}
	.contentTxtLeft{
		justify-content: right;
		.txt{
			right: auto;
			left: 0;
		}
	}

}

@media screen and (max-width:1400px) {
	.strengthContent {
		& .contentTxtRight, & .contentTxtLeft {
			.txt {
				padding: 40px 50px;
				max-width: 550px;
			}
			.img{
				height: auto;
				img{
					height: auto;
				}
			}
		}
	}
}

@media screen and (max-width:999px) {
	section#strength{
		padding: 60px 0;

		.bg01{
			top: 1550px;
			width: 170px;
		}
		.bg02{
			width: 230px;
			bottom: 350px;
		}
	}
	.strengthContent {
		gap: 40px;
		& .contentTxtRight, & .contentTxtLeft {
			flex-direction: column;
			.txt {
				position: static;
				padding: 20px 25px;
				max-width: 100%;
				width: 100%;
				.ttl {
						font-size: 2rem;
						line-height: 1.4;
						gap: 10px;
						padding-bottom: 10px;
						margin-bottom: 15px;
						justify-content: left;
						span{
							font-size: 4rem;
						}
				}
				p{
					font-size: 1.6rem;
				}
			}
			.img{
				max-width: 90%;
			}
		}
	}
}
@media screen and (max-width:374px) {
	section#strength{
		padding: 50px 0;
	}
	.strengthContent {
		gap: 30px;
        & .contentTxtRight, & .contentTxtLeft {
            & .txt {
                & .ttl {
					font-size: 1.7rem;
					padding-bottom: 5px;
                    span {
                        font-size: 3.6rem;
					}
				}
			}
		}
	}
}





/* ------------------------
workplace
--------------------------*/

#workplace{
	padding: 120px 0;
	background: url(../images/contents/index/workplaceBg.webp) bottom no-repeat;
	p.leadTxt{
		margin-bottom: 50px;
		text-align: center;
		font-size: 1.8rem;
		color: #333;
		font-weight: 500;
	}
}

.workplaceContent{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
	margin-bottom: 40px;

	>a{
		position: relative;
		width: calc((100% - 80px) / 3);
		text-decoration: none;
		transition: 0.25s;
		.txt{
			position: absolute;
			bottom: 0;
			width: 100%;
			background: color-mix(in srgb, transparent, var(--main-color) 90%);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
		}
		.title{
            color: #fff;
            border-left: 6px solid #fff;
            line-height: 1.1;
            padding-left: 8px;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 1.8rem;
		}
		span{
			font-size: 1.5rem;
			line-height: 1;
			letter-spacing: 0.04em;
			color: #fff;
		}

		.mapBtn{
			div{
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				transition: 0.25s;
				border: 2px solid #fff;
				&::before{
				   font-family: 'Font Awesome 5 Free';
				   content: '\f3c5';
				   font-weight: bold;
				   color: var(--sub-color-orange);
				   line-height: 1;
				   font-size: 2rem;
				 }
			}
		}
		&:hover{
			.mapBtn{
				div{
					background: var(--sub-color-orange);
					color: #fff;
					&::before{
						color: #fff;
					}
				}
			}
		}
	}

}

.workplaceNotice{
	background-color: var(--main-color);
	width: 100%;
	color: #fff;

	text-align: center;
	padding: 20px 0;
	font-weight: 500;
	font-size: 2rem;
	letter-spacing: .04em;
}


@media screen and (max-width:999px) {
	#workplace{
		padding: 60px 0;
		p.leadTxt{
			margin-bottom: 30px;
		}
	}
	.workplaceContent{
		gap: 20px 15px;
		margin-bottom: 30px;
		>a{
			width: calc((100% - 25px) / 2);
			.txt{
				padding: 10px 15px;
				address{
					line-height: 1;
				}
			}
			.title{
				font-size: 1.5rem;
				margin-bottom: 2px;
			}
			span{
				font-size: 1.2rem;
			}
			.mapBtn{
				div{
					width: 40px;
					height: 40px;
					&::before {
						font-size: 1.4rem;
					}
				}
			}
		}
	}
	.workplaceNotice{
		font-size: 1.6rem;
		padding: 20px 30px;
	}
}

@media screen and (max-width:768px) {
	.workplaceContent {
			>a {
				width: 100%;
		}
	}
}

@media screen and (max-width:374px) {
	#workplace{
		padding: 50px 0;
		padding-top: 45px;
		p.leadTxt{
			margin-bottom: 25px;
		}
	}
}
/* ------------------------
voice 先輩の声
--------------------------*/
#voice{
	padding: 120px 0;
	
	.sectionTitle{
		h2{
			color: var(--main-color);
		}
		span{
			color: #333;
			font-weight: 500;
			&::before{
				background-color: #333;
			}
		}
	}


	.voiceContent{
		position: relative;
		.voiceCardWrap{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.card{
            width: clamp(36rem, -18rem + 37.41vw, ((100% - 80px) /3));
            margin-right: 30px;
			
			a{
				text-decoration: none;
				position: relative;
				display: flex;
				transition: 0.2s;
				display: flex;
				position: relative;
			}
			a:hover{
				opacity: 0.7;
			}
			.img{
				width: calc(100% - 35px);
				img{
					width: 100%;
					/* height: clamp(35rem, 13.391rem + 34.61vw, 48rem);
					min-height: 0;
					object-fit: cover; */
				}
			}
			.verticalTxt{
				font-size: clamp(1rem, 1vw, 1.5rem);
				letter-spacing: 0.3em;
				color: var(--sub-color-orange);
				writing-mode: vertical-rl;
				width: clamp(1.5rem, 2vw, 3.5rem);
				font-weight: bold;
			}

			.txt{
				position: absolute;
				bottom: clamp(20px, 2vw, 45px);
				right: 0;
				color: #fff;
				letter-spacing: 0.1em;
				font-weight: bold;
				text-align: right;
				.job{
					font-size: clamp(1.6rem, 1vw ,2rem);
					background-color: var(--sub-color);
					margin-bottom: 10px;
					padding: 10px 15px;
					line-height: 1;
					display: flex;
					align-items: center;
					gap: 10px;
					span{
						font-size: clamp(1.5rem, 1vw ,1.6rem);
					}
				}
				.name{
					font-size: clamp(3rem, 2vw ,5rem);
					background-color: var(--main-color);
					padding: 10px 15px 15px;
					line-height: 1;
					display: inline-block;
				}
			}
		}
	}
}

.voiceArrowBox {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* margin: 20px 0 0; */

	.prev-arrow,
	.next-arrow {
		display: block;
		width: 80px;
		height: 79px;
		background: color-mix(in srgb, transparent, #4f4f4f 60%);
		transition: all .3s ease;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		&:hover{
			opacity: 0.6;
		}
	}

	.prev-arrow {
		position: absolute;
        transform: translateY(-50%) rotate(180deg);
		left: -120px;
		top: 50%;
	}
	.next-arrow {
		position: absolute;
		right: -120px;
		top: 50%;
		transform: translateY(-50%);
	}
	.prev-arrow::before,
	.next-arrow::before{
		position:absolute;
		font-family: 'Font Awesome 5 Free';
		content: '\f054';
		font-weight: bold;
		font-size: 2rem;
		margin:auto;
		color: #fff;
	}

}

@media screen and (max-width:999px) {
	#voice {
		padding: 60px 0;
    & .voiceContent {
        .card {
            margin-right: 25px;
            width: clamp(25rem, -18rem + 37.41vw, 100%);
			a{
				gap: 10px;
			}
			& .txt {
                .job {
					padding: 5px 10px;
				}
				.name{
					font-size: clamp(2rem, 2vw, 3rem);
					padding: 5px 15px 9px;
				}
			}
        }
    }
}
	.voiceArrowBox {
		.prev-arrow::before, .next-arrow::before {
			font-size: 1.5rem;
		}
		.prev-arrow,
		.next-arrow {
			width: 40px;
			height: 40px;
		}
		.prev-arrow{
			left: 15px;
		}

		.next-arrow {
			right: 15px;
		}

	}
}

@media screen and (max-width:768px) {
	#voice {
		& .voiceContent {
			.card {
				& .txt {
					.job {
						margin-bottom: 5px;
					}
				}
			}
		}
	}
}

@media screen and (max-width:374px) {
	#voice {
		padding: 50px 0;
		& .voiceContent {
			& .card {
				.verticalTxt {
					font-size: clamp(1rem, 1vw, 1.5rem);
				}
			}
		}
	}
	
	.voiceArrowBox {
        .prev-arrow {
			left: 0;
		}
		.next-arrow {
			right: 0;
		}
	}
	
	#voice {
		& .voiceContent {
			.card {
				& .txt {
					.job {
						margin-bottom: 5px;
					}
				}
			}
		}
	}

}
/* ------------------------
ENTRY
--------------------------*/
section#entry{
	background: var(--main-color);
	padding: 125px 0;
	.entryBg{
		background: #fff;
		padding: 75px 100px;
	}
	.entryTitle{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 80px;
		
		margin-bottom: 50px;
		.sectionSubTitle{
			margin-bottom: 0;
			font-size: 5rem;
			.bar{
				background-color: var(--main-color);
			}
		}
	}

}
@media screen and (max-width:999px) {
	section#entry{
		padding: 60px 0;
		.entryTitle{
			gap: 25px;
			margin-bottom: 40px;
		}
		.entryBg{
			padding: 40px 25px 25px;
		}
		.entryImage{
			max-width: 80px;
		}
	}
}