@charset "UTF-8";

/*
	kv
-----------------------------------------------------------------------------------------------*/
#kv{
	.ctsArea{
		width: var(--width-base);
		margin: 0 auto;
		padding: 0 30px;
		position: relative;
	}
}
.kvArea{
	height: 700px;
	position: relative;

	/* キャッチコピー */
	.catch{
		font-size: 4.0rem;
		letter-spacing: 0.3rem;
		position: absolute;
		top: 50%;
		left: 80px;
		transform: translateY(-50%);
		filter: drop-shadow(0 0 10px rgba(255,255,255,1));
		text-shadow: 0 0 1.0em rgb(255,255,255,1);
		z-index: 10;
		&::before{
			content: "";
			width: 70px;
			height: 70px;
			background: var(--gd-orange);
			border-radius: 50%;
			position: absolute;
			top: -12px;
			left: -30px;
			z-index: -1;
		}

		/* テキストsmall */
		.small{
			font-size: 3.5rem;
		}

		/* テキストorange */
		.orange{
			font-size: 4.5rem;
			color: var(--c-orange);
		}
	}
}


/* kv_swiper
============================== */
#kvSwiper{
	border-radius: 40px;
	overflow: hidden;
	.list{
		li{
			img{
				width: 100%;
			}
		}
	}
}

/* kv_お知らせ
============================== */
.kvNews{
	min-width: 650px;
	max-width: 800px;
	padding: 30px 30px 0 30px;
	background-color: #fff;
	border-radius: 0 20px 0 0;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;

	.item{
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;

		/* 日付 */
		.date{
			width: 100px;
			font-family: var(--ff-en-lato);
			font-size: 1.6rem;
			font-weight: var(--fw-black);
			color: var(--c-orange);
			letter-spacing: 0.1rem;
		}

		/* テキスト */
		.txt{
			width: calc(100% - 220px);
			transition: color 0.3s;
			
			/* 別窓 */
			&.window{
				display: inline-block;
				padding-right: 18px;
				position: relative;
				&::after{
					content: "";
					width: 14px;
					height: 14px;
					background: url("/images/ico_window_black.svg") no-repeat center center / cover;
					position: absolute;
					right: 0;
					bottom: 50%;
					transform: translateY(50%);
				}
			}
		}

		/* リンクテキスト */
		@media (hover: hover){
			&:hover{
				color: var(--c-orange);
			}
		}
	}
}


/*
	トップバナー
-----------------------------------------------------------------------------------------------*/
.topBnrSwiperWrapper{
	position: relative;

	/* ページネーション */
	.swiper-pagination{
		position: absolute;
		bottom: -40px;
		.swiper-pagination-bullet {
			width: 10px;
			height: 10px;
			margin: 0 5px;
			background-color: #848484;
		}
		.swiper-pagination-bullet-active {
			background-color: var(--c-orange) ;
		}
	}
}
#topBnrSwiper{
	margin-top: 60px;
	margin-bottom: 120px;
	position: relative;
}

#listTopBnr{
	li{
		width: 400px;
		border-radius: var(--br-20);
		overflow: hidden;

		a{
			display: block;
			transition: opacity 0.3s;
		}

		@media (hover: hover){
			&:hover{
				a{
					opacity: 0.7;
				}
			}
		}
	}
}


/*
	採用情報
-----------------------------------------------------------------------------------------------*/
#topRrecruit{
	width: var(--width-base);
	margin: 100px auto 120px;
	padding: 0 30px;

	/* ボタン */
	.btnBase{
		margin-top: 30px;
	}
}
.recruitBox{
	display: flex;
	flex-direction: row-reverse;

	/* テキストエリア */
	.txtArea{
		width: 500px;
		padding: 50px 60px;
		background-color: var(--c-orange);
		border-radius: 40px 0 0 40px;

		/* キャッチコピー */
		.catch{
			margin-bottom: 20px;
			font-size: 3.8rem;
			font-weight: var(--fw-bold);
			color: #fff;
			line-height: 1.3;

			span{
				font-size: 2.8rem;
			}
		}

		/* テキスト */
		.txt{
			color: #fff;
		}
	}

	/* kv */
	.photoArea{
		width: calc(100% - 500px);
		border-radius: 0 40px 40px 0;
		overflow: hidden;

		img{
			width: 100%;
		}
	}
}


/*
	選ばれるトライズの福祉サービス
-----------------------------------------------------------------------------------------------*/
#service{
	margin-bottom: 120px;

	.ctsArea{
		display: flex;
		flex-direction: column;
		gap: 120px;
		margin-top: 50px;
	}
}

/* 福祉サービス
============================== */
.serviceBoxOut{
	background: linear-gradient(180deg, #fff 0%, #fff 150px, #ff7800 150px, #ffa606 90%);
	position: relative;
	z-index: 0;
	&::before{
		content: "";
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url("/images/bg_noise.png") repeat center center / contain;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.serviceBox{
	position: relative;
	z-index: 0;
	&::before,
	&::after{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		z-index: -1;
	}
	&::before{
		background: url("/images/item_wave_white.svg") no-repeat top 149px center / contain;
		top: 0;
		transform: scale(-1,1);
	}
	&::after{
		background: linear-gradient(0deg, #fff 5%, rgba(255, 255, 255, 0) 80%);
		bottom: -1px;
	}

	/* テキスト左・画像右 */
	[class^="inner"]{
		display: flex;
		align-items: flex-start;
		width: var(--width-base);
		margin: 0 auto;
		padding: 0 30px;

		/* テキストエリア */
		.txtArea{
			width: 720px;
			min-height: 550px;
			padding: 100px 240px 80px 60px;
			background-color: var(--bgc-beige);
			border-radius: 0 40px 40px 0;
			position: relative;
			> ::before{
				content: "";
				width: 100%;
				height: 100%;
				background-color: var(--bgc-beige);
				position: absolute;
				top: 0;
				left: -100%;
			}

			/* タイトル */
			.tit{
				margin-top: 5px;
				font-size: 2.8rem;
				font-weight: var(--fw-bold);
			}

			/* テキスト */
			.txt{
				margin-top: 20px;
				text-align: justify;
				line-height: 2.0;
			}

			/* 施設場所 */
			.place{
				margin-top: 20px;

				.placeTit{
					font-weight: var(--fw-bold);
					color: var(--c-orange);
				}
			}

			/* ボタン */
			.btnBase{
				margin-top: 30px;
			}
		}

		/* 画像 */
		.photoArea{
			width: 600px;
			margin-top: 60px;
			margin-left: -180px;
			border-radius: 40px;
			overflow: hidden;
			position: relative;
			z-index: 1;
		}
	}

	/* 画像左・テキスト右 */
	.inner__reverse{
		flex-direction: row-reverse;

		/* テキストエリア */
		.txtArea{
			padding: 100px 60px 80px 240px;
			border-radius: 40px 0 0 40px;
			> ::before{
				left: 100%;
			}
		}

		/* 画像 */
		.photoArea{
			margin-left: 0;
			margin-right: -180px;
		}
	}

	/* ループテキスト */
	.loopTxt{
		display: flex;
		gap: 100px;
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		margin-top: -60px;
		opacity: 0.5;
		overflow: hidden;

		li{
			flex-shrink: 0;
			width: fit-content;
			font-family: var(--ff-en-lato);
			font-weight: var(--fw-light);
			font-size: 20.0rem;
			color: var(--c-orange);
			line-height: 1.0;
			white-space: nowrap;
			animation: textloop var(--tick-duration, 50s) infinite linear;
		}
	}
}

/* アニメーション */
@keyframes textloop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}


/*
	施設・事業所紹介
-----------------------------------------------------------------------------------------------*/
#facility{
	margin: 0 auto;
	padding-bottom: 120px;
	position: relative;

	/* テキストエリア */
	.titArea{
		display: flex;
		justify-content: space-between;
		align-items: start;
		width: var(--width-base);
		margin: 0 auto;
		padding: 0 30px 50px;
	}
}

/* swiper
============================== */
#facilitySwiper{
	.swiper-slide{
		width: 600px;
		transform: scale(0.85);
		transition: transform 0.5s;
		&.swiper-slide-active{
			transform: scale(1);
		}
	}

	/* リスト */
	.list{
		li{
			a.item{
				display: flex;
				flex-direction: column;
				align-items: end;
				position: relative;

				/* 画像 */
				.photo{
					border-radius: 20px;
					overflow: hidden;
					transition: opacity 0.2s;
				}

				/* テキストエリア */
				.txtArea{
					display: inline-block;
					background-color: #fff;
					padding: 20px 0 0 30px;
					border-radius: 20px 0 0 0;
					position: absolute;
					right: -1px;
					bottom: -1px;
					::before,
					::after{
						content: "";
						width: 20px;
						height: 20px;
						background-color: #fff;
						clip-path: path("M0,20C0,9,9,0,20,0H0v20Z");
						position: absolute;
						transform: rotate(180deg);
					}
					::before{
						top: -19px;
						right: 0;
					}
					::after{
						left: -19px;
						bottom: 0;
					}
					
					/* 施設名 */
					.facilityName{
						font-size: 1.8rem;
						font-weight: var(--fw-bold);
						transition: color 0.2s;
					}

					/* サービス名 */
					.serviceName{
						font-size: 1.4rem;
						color: var(--c-orange);
					}
				}
				@media (hover: hover){
					&:hover{
						.photo{
							opacity: 0.85;
						}
						.facilityName{
							color: var(--c-orange);
						}
					}
				}
			}
		}
	}

	/* swiper-button */
	.swiper-button-prev,
	.swiper-button-next{
		display: flex;
		justify-content: center;
		align-items: center;
		width:70px;
		height:70px;
		margin: 0;
		background: url("/images/btn_arrow_orange.svg") #fff no-repeat center center / 25%;
		border: 2px solid var(--c-orange);
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
		transition: left 0.2s, right 0.3s;
		&::after{
			display: none;
		}
	}
	.swiper-button-prev{
		left: calc(50% - 335px);
		transform: translateY(-50%) scale(-1, 1);
		@media (hover: hover){
			&:hover{
				left: calc(50% - 340px);
				cursor: pointer;
			}
		}
	}
	.swiper-button-next{
		right: calc(50% - 335px);
		@media (hover: hover){
			&:hover{
				right: calc(50% - 340px);
				cursor: pointer;
			}
		}
	}
}


/*
	私たちの想い
-----------------------------------------------------------------------------------------------*/
#topMessage{
	position: relative;
	z-index: 0;
	&::before{
		content: "";
		width: 100%;
		height: 100%;
		background: url("/images/item_wave_white.svg") no-repeat top -1px center / contain;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	&::after{
		content: "";
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, #fff 5%, rgba(255, 255, 255, 0) 80%);
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: -1;
	}

	.ctsArea{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 60px;
		width: var(--width-base);
		margin: 0 auto;
		padding: 0 30px 120px;
	}

	/* 画像 */
	.photoArea{
		width: 500px;

		.list{
			display: flex;
			flex-direction: column;
			gap: 30px;

			li{
				border-radius: 20px;
				overflow: hidden;
				&:first-of-type{
					width: calc((100% - 100px));
					margin-left: 100px;
				}
				&:last-of-type{
					width: calc((100% - 200px));
				}

				img{
					width: 100%;
				}
			}
		}
	}

	/* ボタン */
	.btnBase{
		margin-top: 30px;
	}
}


/*
	iPhone13ランドスケープ セーフエリア
	（SafeLandLeft：47　/　SafeLandRight：47）
	844 - 94 = 750　※750px以上でPC表示
-----------------------------------------------------------------------------------------------*/
@media screen and (width < 750px){
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kv{
		.ctsArea{
			height: auto;
			padding: 0 20px;
		}
	}
	.kvArea{
		max-width: 400px;
		height: auto;
		margin: 0 auto;

		/* キャッチコピー */
		.catch{
			font-size: 2.5rem;
			line-height: 1.3;
			top: auto;
			left: 30px;
			bottom: 30px;
			transform: none;
			&::before{
				width: 40px;
				height: 40px;
				top: -5px;
				left: -15px;
			}

			/* テキストsmall */
			.small{
				font-size: 2.0rem;
			}

			/* テキストorange */
			.orange{
				font-size: 2.8rem;
			}
		}
	}

	/* kv_swiper
	============================== */
	#kvSwiper{
		border-radius: 20px;
		overflow: hidden;
		.list{
			li{
				img{
					width: 100%;
				}
			}
		}
	}

	/* kv_お知らせ
	============================== */
	.kvNews{
		min-width: 100%;
		max-width: 500px;
		margin: 0 auto;
		padding: 20px 15px 0;
		border-radius: 0;
		position: static;

		.item{
			display: flex;

			.date{
				width: auto;
				font-size: 1.3rem;
			}

			/* カテゴリー */
			[class^="category"]{
				min-width: 80px;
				font-size: 1.0rem;
			}

			/* テキスト */
			.txt{
				width: 100%;
				font-size: 1.4rem;

				/* 別窓 */
				&.window{
					display: inline-block;
					padding-right: 18px;
					position: relative;
					&::after{
						content: "";
						width: 14px;
						height: 14px;
						background: url("/images/ico_window_black.svg") no-repeat center center / cover;
						position: absolute;
						right: 0;
						bottom: 50%;
						transform: translateY(50%);
					}
				}
			}
		}
	}


	/*
	トップバナー
	-----------------------------------------------------------------------------------------------*/
	.topBnrSwiperWrapper{
		/* ページネーション */
		.swiper-pagination{
			bottom: -30px;
		}
	}
	#topBnrSwiper{
		margin-top: 30px;
		position: relative;
	}

	#listTopBnr{
		li{
			width: 100%;
			max-width: 500px;
			border-radius: 0;
		}
	}
	

	/*
		採用情報
	-----------------------------------------------------------------------------------------------*/
	#topRrecruit{
		max-width: 500px;
		margin: 60px auto;
		padding: 0 20px;

		/* ボタン */
		.btnBase{
			margin-top: 20px;
			justify-content: center;
		}
	}
	.recruitBox{
		flex-direction: column;

		/* テキストエリア */
		.txtArea{
			width: 100%;
			padding: 30px;
			border-radius: 0 0 20px 20px;

			/* キャッチコピー */
			.catch{
				margin-bottom: 10px;
				font-size: 2.8rem;

				span{
					font-size: 2.0rem;
				}
			}

			/* テキスト */
			.txt{
				font-size: 1.4rem;
			}
		}

		/* kv */
		.photoArea{
			width: 100%;
			border-radius: 20px 20px 0 0;
		}
	}


	/*
		選ばれるトライズの福祉サービス
	-----------------------------------------------------------------------------------------------*/
	#service{
		margin-bottom: 60px;

		.ctsArea{
			gap: 60px;
			margin-top: 50px;
		}
	}

	/* 福祉サービス
	============================== */
	.serviceBoxOut{
		background: linear-gradient(180deg, #fff 0%, #fff 200px, #ff7800 200px, #ffa606 90%);
	}
	.serviceBox{
		&::before{
			background: url("/images/item_wave_white.svg") no-repeat top 199px center / contain;
		}

		/* テキスト左・画像右 */
		[class^="inner"]{
			flex-direction: column-reverse;
			padding: 0 20px;
			
			/* テキストエリア */
			.txtArea{
				width: calc(100% - 20px);
				max-width: 500px;
				min-height: auto;
				padding: 80px 40px 40px 20px;
				border-radius: 0 20px 20px 0;

				/* カテゴリー */
				[class^="category"]{
					min-width: 80px;
					font-size: 1.1rem;
				}

				/* タイトル */
				.tit{
					font-size: 2.1rem;
				}

				/* テキスト */
				.txt{
					margin-top: 15px;
				}

				/* 施設場所 */
				.place{
					margin-top: 15px;
				}

				/* ボタン */
				.btnBase{
					margin-top: 20px;
				}
			}

			/* 画像 */
			.photoArea{
				width: 230px;
				margin: 0 0 -60px auto;
				border-radius: 20px;
			}
		}

		/* 画像左・テキスト右 */
		.inner__reverse{
			flex-direction: column-reverse;
			align-items: end;

			/* テキストエリア */
			.txtArea{
				padding: 80px 20px 40px 40px;
				border-radius: 20px 0 0 20px;
			}

			/* 画像 */
			.photoArea{
				margin: 0 auto -60px 0;
			}
		}

		/* ループテキスト */
		.loopTxt{
			gap: 50px;
			margin-top: -40px;

			li{
				font-size: 10.0rem;
			}
		}
	}


	/*
		施設・事業所紹介
	-----------------------------------------------------------------------------------------------*/
	#facility{
		padding-bottom: 60px;

		/* テキストエリア */
		.titArea{
			flex-direction: column;
			align-items: center;
			gap: 20px;
			padding: 0 20px 40px;
		}
	}

	/* swiper
	============================== */
	#facilitySwiper{
		.swiper-slide{
			width: 300px;
		}

		/* リスト */
		.list{
			li{
				a.item{

					/* テキストエリア */
					.txtArea{
						display: inline-block;
						background-color: #fff;
						padding: 15px 0 0 20px;

						/* 施設名 */
						.facilityName{
							font-size: 1.5rem;
						}

						/* サービス名 */
						.serviceName{
							font-size: 1.2rem;
						}
					}
				}
			}
		}

		/* swiper-button */
		.swiper-button-prev,
		.swiper-button-next{
			width:50px;
			height:50px;
			border: 1px solid var(--c-orange);
		}
		.swiper-button-prev{
			left: calc(50% - 175px);
		}
		.swiper-button-next{
			right: calc(50% - 175px);
		}
	}


	/*
		私たちの想い
	-----------------------------------------------------------------------------------------------*/
	#topMessage{
		.ctsArea{
			max-width: 500px;
			flex-direction: column;
			gap: 30px;
			padding: 80px 20px 60px;
		}

		/* 画像 */
		.photoArea{
			width: 100%;
			max-width: 400px;

			.list{
				gap: 15px;

				li{
					border-radius: 10px;
				}
			}
		}

		/* ボタン */
		.btnBase{
			margin-top: 20px;
			justify-content: center;
		}
	}
}