@charset "UTF-8";
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: foreign*/


.foreign .kv-slider{
	background-color: #bde6cb;
	position: relative;
	--aside-width: 42%;
	--slider-gap: 0px;
	/* メイン／サムネで同じ見かけの傾きにする（clip-path の % は縦横比で角度が変わるため、cqh/cqi で補正） */
	--kv-slant-from-horizontal: 72deg;
}
.foreign .kv-slider::before,
.foreign .kv-slider::after{
	content: '';
	position: absolute;
	pointer-events: none;
	z-index: 0;
	background-repeat: no-repeat;
}
.foreign .kv-slider::before{
	top: 0;
	left: 0;
	width: 30%;
	height: 55%;
	background-image: url(../img/foreign/decoration01.png);
	background-position: left top;
	background-size: contain;
}
.foreign .kv-slider::after{
	z-index: 1;
	right: 0;
	bottom: 0;
	width: 60%;
	height: 30%;
	background-image: url(../img/foreign/decoration02.png);
	background-position: right bottom;
	background-size: contain;
}
.foreign .kv-slider-inner{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--slider-gap);
	width: 100%;
	box-sizing: border-box;
}
.foreign .kv-slider-aside{
	flex: 0 0 var(--aside-width);
	max-width: var(--aside-width);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.foreign .kv-slider .text{
	position: absolute;
	z-index: 2;
	width: 80%;
	top: 30%;
	left: 3%;
}
.foreign .kv-slider .text p{
	margin: 0;
}
.foreign .kv-slider .text img{
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.foreign .kv-slider .slider{
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: none;
}
.foreign .kv-slider .slider-img p{
	margin: 0;
	container-type: size;
}
.foreign .kv-slider .slider-img img{
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
	clip-path: polygon(
		25% 0%,
		100% 0%,
		100% 100%,
		0% 100%
	);
}
@supports (width: 1cqh) {
	.foreign .kv-slider .slider-img p,
	.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img{
		--kv-clip-slant: min(35%, calc(100cqh / 100cqi / tan(var(--kv-slant-from-horizontal)) * 100%));
	}
	.foreign .kv-slider .slider-img img{
		clip-path: polygon(
			var(--kv-clip-slant) 0%,
			100% 0%,
			100% 100%,
			0% 100%
		);
	}
}
.foreign .kv-slider-aside .slider-thumbnail{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 100%;
	min-height: clamp(33%, 13vw, 128px);
	margin-top: 0;
	overflow: hidden;
	opacity: 1;
}
.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img{
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	/* clip の cqi は各サムネ幅（親 .slider-thumbnail の 50cqi とは別） */
	container-type: size;
}
.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img:nth-child(1){
	z-index: 0;
}
.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img:nth-child(2){
	margin-left: -15%;
	z-index: 1;
}
.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img img{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	clip-path: polygon(
		25% 0%,
		100% 0%,
		75% 100%,
		0% 100%
	);
}
@supports (width: 1cqh) {
	/* 重なり margin 用（clip は各 .thumbnail-img の 100cqi を使用） */
	.foreign .kv-slider-aside .slider-thumbnail{
		container-type: size;
	}
	.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img img{
		clip-path: polygon(
			var(--kv-clip-slant) 0%,
			100% 0%,
			calc(100% - var(--kv-clip-slant)) 100%,
			0% 100%
		);
	}
	.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img:nth-child(2),
	.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img:nth-child(3){
		margin-left: calc(-1 * min(17.5%, calc(100cqh / 50cqi / tan(var(--kv-slant-from-horizontal)) * 50%)) - 15px);
	}
}
.foreign .kv-slider .logo{
	position: absolute;
	left: 29%;
	top: 5%;
	width: 20%;
}
.foreign .kv-slider .slider .slider-img{
	width: 100%;
	max-width: 100%;
}
@media only screen and (min-width: 641px) {
	/* 左カラムをやや狭めてメインスライダーを広げる（SP は --aside-width を別指定のため影響しない） */
	.foreign .kv-slider{
		--aside-width: 39%;
	}
	.foreign .kv-slider-inner{
		min-height: min(76vw, 550px);
		align-items: stretch;
	}
	.foreign .kv-slider-aside{
		justify-content: flex-end;
	}
	.foreign .kv-slider .text{
		width: 46%;
		max-width: 520px;
	}
	.foreign .kv-slider .slider{
		display: flex;
		flex-direction: column;
		align-self: stretch;
		min-height: 0;
	}
	.foreign .kv-slider .slider .slider-img{
		flex: 1;
		min-height: 0;
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-list,
	.foreign .kv-slider .slider .slider-img .slick-track,
	.foreign .kv-slider .slider .slider-img .slick-slide{
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-slide > div{
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-slide p{
		height: 100%;
		margin: 0;
		container-type: size;
	}
	.foreign .kv-slider .slider .slider-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}
@media only screen and (max-width: 640px) {
	.foreign .kv-slider .text{
		top: 50%;
		transform: translateY(-70%);
	}
	.foreign .kv-slider-inner{
		display: block;
		min-height: min(75vw, 380px);
	}
	.foreign .kv-slider-aside{
		flex: none;
		max-width: 100%;
		width: 100%;
		display: block;
	}
	.foreign .kv-slider .slider{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 71%;
		z-index: 1;
		flex: none;
		display: flex;
		flex-direction: column;
	}
	.foreign .kv-slider .slider .slider-img{
		max-width: 100%;
		flex: 1;
		min-height: 0;
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-list,
	.foreign .kv-slider .slider .slider-img .slick-track,
	.foreign .kv-slider .slider .slider-img .slick-slide{
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-slide > div{
		height: 100%;
	}
	.foreign .kv-slider .slider .slider-img .slick-slide p{
		height: 100%;
		margin: 0;
		container-type: size;
	}
	.foreign .kv-slider .slider .slider-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	.foreign .kv-slider-aside .slider-thumbnail{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 65%;
		max-width: 65%;
		z-index: 2;
		margin-top: 0;
		box-sizing: border-box;
		/* 高さを確定させて container の cqh を有効にし、メインと同じ tan 式の clip が使えるようにする */
		height: clamp(72px, 18vw, 128px);
		min-height: clamp(72px, 18vw, 128px);
	}
	.foreign .kv-slider-aside .slider-thumbnail .thumbnail-img{
		flex: 1 1 0;
		min-width: 0;
	}
}





#sec01, #sec02, #sec03, #sec04, #sec05 {
	padding-top: 125px;
	margin-top: -125px;
}
.nomargin {
	margin-bottom: 0;
}
.anchor {
	margin-bottom: 40px;
}
@media only screen and (max-width: 640px) {
	.anchor {
		margin-bottom: 20px;
	}
}
.anchor .button a.btn {
	margin-bottom: 0.75rem;
}
@media only screen and (max-width: 640px) {
	.anchor .button a.btn {
		margin-bottom: 0;
	}
}
.block {
	padding: 40px 0;
}
@media only screen and (max-width: 640px) {
		.block {
			padding: 10px 0;
	}
}
@media only screen and (max-width: 640px) {
	.foreign .farm {
		margin-bottom: 30px;
	}
	.foreign .farm > h2	{
		margin-bottom: 1rem;
	}
	.foreign .farm > h3 {
		margin-bottom: 0.25rem;
		padding-right: 15%;
	}
	.foreign .farm p {
		margin-bottom: 0;
	}
}
.foreign .card-list a {
	text-decoration: none;
}
.foreign .card-list a p {
	text-align: center;
	font-weight: bold;
	margin-top: 0.5rem;
}
@media only screen and (max-width: 640px) {
	.foreign .card-list a p {
		font-size: 12px;
	}
}
.foreign .box {
	width: 48%;
}
@media only screen and (max-width: 640px) {
	.foreign .box {
		width: 47.5%;
		margin: 1rem 0;
	}
	.foreign .box p img {
		margin-bottom: 0.5rem;
	}
}
.foreign .speech-bubble {
	text-align: center;
	margin-bottom: 0.5rem;
}
.foreign .speech-bubble span {
	position: relative;
	font-size: 1.5em;
	color: #006c54;
	font-weight: bold;
}
.foreign .speech-bubble span::before {
	position: absolute;
	content: "";
	background-color: #006c54;
	width: 2px;
	height: 35px;
	transform: rotate(-30deg);
	top: 0;
	bottom: 0;
	left: -10%;
	margin: auto;
}
.foreign .speech-bubble span::after {
	position: absolute;
	content: "";
	background-color: #006c54;
	width: 2px;
	height: 35px;
	transform: rotate(30deg);
	top: 0;
	bottom: 0;
	right: -10%;
	margin: auto;
}
.foreign .role {
	margin:	1rem 0 2rem!important;
}
.foreign .button {
	text-align: center;
}
.foreign .button a.btn {
	margin: 0.5rem 0;
}
@media only screen and (max-width: 640px) {
	.foreign .card-list {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px;
		margin-bottom: 2rem;
	}
	.foreign figure {
		margin-top: 10px;
	}
	.foreign .flex {
		gap: 15px;
	}
	.foreign .flex p img {
		margin-bottom: 1rem;
	}
	.foreign .international-center p img {
		margin: 1rem 0;
	}
	.foreign .button.select_lang {
		flex-wrap: wrap;
		gap: 10px;
	}
	.foreign .button.select_lang a {
		width: 48%;
	}
}
@media only screen and (max-width: 640px) {
	.farm.ma40 {
		margin-bottom: 40px;
	}
	.farm.ma30 {
		margin-bottom: 30px;
	}
	.foreign .farm > h3 {
		margin-bottom: 0.25rem;
		padding-right: 15%;
	}

	.foreign .container_2025re .center-section .block-text_left {
		width: 100%;
		padding-bottom: 20px;
	}
}
.foreign .container_2025re .center-section .image-section {
	text-align: center;
}
.foreign .company-list ul li {
	flex: 0 0 calc(8% - 8.33px);
}
@media only screen and (max-width: 640px) {
	.foreign .container_2025re .center-flow {
		overflow-x: auto;
		flex-wrap: nowrap;
		width: 100%;
	}
		.foreign .company-list ul li {
		flex: 0 0 calc(25% - 8.33px);
	}
	.foreign .container_2025re .int-job_list .department-item .image-section.actual-figures .block-text p {
		display: block;
	}
	.foreign .date-box-white .lead {
		font-size: 4vw !important;
	}
	.foreign .container_2025re .support-section .image-section {
		width: 100%;
	}
}
.foreign .btnbox ul {
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
}




/*support*/

.support .service .flex-service{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.support .service .flex-service .text{
	width: 55%;
}
.support .service .flex-service .text .font01{
	color: #54c2f0;
	margin: auto;
}
.support .service .flex-service .text .font02{
	color: #54c2f0;
	font-size: 25px;
	margin: auto;
}
.support .service .flex-service .text .line{
	width: 100%;
	height: 1px;
	background-color: #54c2f0;
	margin: 10px auto;
}
.support .service .flex-service .img{
	width: 40%;
}
.support .service .point{
	max-width: 900px;
	margin: 40px auto;
}
.support .service .box{
	background-color: #f3feff;
	border-radius: 20px;
	padding: 5% 2%;
	box-sizing: border-box;
	margin-bottom: 40px;
}
.support .service .box h2{
	color: #54c2f0;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.2em;
}
.support .service .box h2 span{
	background: linear-gradient(transparent 60%, #ffff00 60%);
}
.support .service .box h2 span.mini{
	font-size: 18px;
}

.support .service .block01{
	width: 100%;
}
.support .service .flex-step{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.support .service .flex-step .box01{
	width: 55%;
}
.support .service .flex-step .box02{
	width: 40%;
}
.support .service .flex-step .box02 .img{
	width: 80%;
	margin: auto;
}

.support .service .bg{
	background: linear-gradient(180deg, #fff 0%, #fff 10%, #f3feff 10%, #f3feff 100%);
	padding: 0 3% 5%;
	box-sizing: border-box;
}
.support .service .info h2{
	color: #54c2f0;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
	margin-bottom: 20px;
}
.support .service .info h2 span{
	background: linear-gradient(transparent 60%, #ffff00 60%);
}
.support .service .info .mini{
	text-align: center;
	margin: auto auto 10px;
	font-size: 14px;
	font-weight: bold;
}
.support .service .info .btn{
	margin: auto;
	display: block;
	max-width: 200px;
	padding: 0;
	border: none;
}
.support .service .info .btn:hover{
	background: none;
}
.support .service .info .btn::after{
	border-color: transparent transparent transparent #fff;
}
.support .service .info .btn a{
	text-decoration: none;
	color: #fff;
	padding: 10px 3em;
	display: block;
	background-color: #54c2f0;
	border-radius: 999px;
}
.support .service .info .btn a:hover{
	background-color: #3594bc;
}
.support .service .info .white{
	background-color: #fff;
	margin-top: 40px;
	padding: 20px;
	box-sizing: border-box;
}
.support .service .info .flex-info{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 900px;
	margin: auto;
	align-items: center;
}
.support .service .info .flex-info .text{
	width: 40%;
	font-weight: bold;
}
.support .service .info .flex-info .btn{
	width: 28%;
	min-width: 0;
	margin: 0;
	max-width: 350px;
}
.support .service .info .flex-info .btn::after{
	border-color: transparent transparent transparent #54c2f0;
}
.support .service .info .flex-info .btn a{
	background-color: #fff;
	border: 2px solid #54c2f0;
	padding: 10px 2em;
}


@media only screen and (max-width: 640px) {
	.support .service .flex-service .text{
		width: 100%;
	}
	.support .service .flex-service .img{
		width: 100%;
	}
	.support .service .box{
		margin-bottom: 20px;
	}
	.support .service .flex-step .box01{
		width: 100%;
	}
	.support .service .flex-step .box02{
		width: 100%;
	}
	.support .service .info .flex-info .text{
		width: 100%;
		font-size: 12px;
		text-align: center;
	}
	.support .service .info .flex-info .btn{
		width: 90%;
		margin: 10px auto auto;
	}
}