/*
 * recruit-inner.css
 * 採用サイトの内部ページ（採用TOP以外）共通のレイアウト。is_recruit_section() && ! 採用TOP
 * の場合に読み込む（functions.php）。
 * ルール: @layer は使わない。固有クラスは recruit-inner- 接頭辞。
 */
.entry-header.hero {
	--rec-in-height: clamp(230px, 8.625rem + 33vw, 600px);
	height: var(--rec-in-height);
	position: relative;
	display: grid;

	@media(768px > width) {
		align-content: start;
		padding-block-start: 3rem;
	}

	@media(768px <=width) {
		align-content: center;
	}

	.hero-inner {
		overflow-y: hidden;
		position: relative;
		z-index: 2;
	}

	.entry-title {
		position: relative;
		z-index: 2;
		transform: translateY(clamp(36px, -3.674rem + 12.34vw, 114px));
		font-size: clamp(16px, 0.392rem + 1.27vw, 1.5rem);
		max-width: 1480px;
		margin-inline: auto;
		overflow: hidden;
		transition: 0.6s ease-out;

		@media(1510px >=width) {
			padding-inline: 1rem;
		}

		.entry-title-en {
			margin-block-end: clamp(1.25rem, -0.269rem + 3.16vw, 2.5rem);
			font-size: clamp(36px, -3.674rem + 12.34vw, 114px);
			font-family: var(--font-en);
			line-height: 0.9;
			overflow: hidden;
			transform: translateY(-4em);
			transition: 0.8s ease-in-out 0.4s;
		}
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: clamp(46px, 2.65rem + 0.9vw, 3.438rem);
		left: 0;
		width: 100%;
		height: calc(100% - clamp(46px, 2.65rem + 0.9vw, 3.438rem));
		border-radius: 0 0 0 clamp(3rem, -4.861rem + 14.81vw, 6.25rem);
		background-color: var(--color-accent);
		display: block;
		z-index: 1;
	}

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		max-width: clamp(18.75rem, -1.25rem + 80vw, 68.75rem);
		height: calc(100% - clamp(55px, 9.3rem + -6.7vw, 122px));
		background-color: var(--color-accent);
		background-image: url(../images/recruit/recruit-inteviewsheader.webp);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: block;
		z-index: 1;
		-webkit-mask-image: url("../images/svg/recruit-hero-mask.svg");
		mask-image: url("../images/svg/recruit-hero-mask.svg");
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		mask-position: right bottom;
		opacity: 0;
		transition: 1s ease-in;

		@media(1920px <=width) {
			max-width: 60vw;
		}
	}
}

.entry-header.hero.is-in-view {
	.entry-title {
		transform: translateY(0);
	}

	.entry-title-en {
		transform: translateY(0);
	}

	&::after {
		opacity: 1;
	}
}

.l-main--interview01 {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-interview01.webp);
		}
	}
}

.l-main--interview02 {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-interview02.webp);
		}
	}
}

.l-main--interview03 {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-interview03.webp);
		}
	}
}

.l-main--tour {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-factory-tour.webp);
		}
	}
}

.l-main--job-entry {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-job-entory.webp);
		}
	}
}

.l-main--about {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-about.webp);
		}
	}
}

.l-main--about {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-about.webp);
		}
	}
}

.l-main--work {
	.hero {
		&::after {
			background-image: url(../images/recruit/header-works.webp);
		}
	}
}

/* インタービュー記事 */
.recruit-element-inner_lead {
	margin-block: clamp(16px, -2.281rem + 8.75vw, 86px) 5rem;
	padding-block: clamp(42px, -1.219rem + 10.25vw, 124px) 0;
	position: relative;
	overflow-y: hidden;

	&::before {
		position: absolute;
		content: "";
		background-color: var(--color-recruit-background);
		z-index: -1;
		width: 150px;
		height: 150px;
		/* max-height: 28.9rem; */
		border-radius: 50%;
		left: 50%;
		top: 0;
		transform: translate(-50%, 50%);
		transition: 1s ease-in;
		transform-origin: 50% 0;
		opacity: 0;
	}
}

.recruit-element-inner_lead.is-in-view {
	&::before {
		/*
		 * 最終静止状態（フォールバック／prefers-reduced-motion 用）。動きは下の @keyframes が担い、
		 * forwards でこの状態を保持する。
		 */
		top: 0;
		width: 100%;
		height: 100%;
		max-height: 28.9rem;
		border-radius: clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) 0 0;
		transform: translate(-50%, 0);
		animation: recruit-lead-reveal 1.4s ease-out both;
		opacity: 1;
	}
}
@media(600px > width){
	.recruit-element-inner_lead.is-in-view {
	&::before {
		max-height: 70%;
	}
	}
}
/*
 * 円のまま拡大してから、バナー形（上だけ丸い横長）へ広がる2段構え。0〜60% を「正円のまま拡大」
 * に充て、60〜100% で横幅を100%まで伸ばしつつ角を上だけ丸く落とす。正円を保つため 0〜60% は width
 * と height を同値（px→28.9rem）で動かす。
 */
@keyframes recruit-lead-reveal {
	0% {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		transform: translate(-50%, 50%);
		animation-timing-function: ease-out;
		opacity: 0;
	}

	50% {
		width: 28.9rem;
		height: 28.9rem;
		border-radius: 50%;
		transform: translate(-50%, -20％);
		animation-timing-function: ease-in-out;
		opacity: 1;
	}

	100% {
		width: 100%;
		height: 100%;
		border-radius: clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) 0 0;
		transform: translate(-50%, 0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.recruit-element-inner_lead.is-in-view::before {
		animation: none;
	}
}

.recruit-head.interview-headline {
	font-size: clamp(20px, -0.625rem + 4.17vw, 40px);
	margin-block-end: 3.375rem;
	line-height: 1;
	text-align: center;
	font-feature-settings: "palt";
}

.recruit-inner_image {
	position: relative;
	z-index: 1;
	margin-inline: auto;
	max-width: 724px;
	aspect-ratio: 724 / 408;
	display: grid;
	align-items: end;
	padding-block-end: clamp(1.5rem, -2.894rem + 7.59vw, 2.8rem);

	figure {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;

		img {
			width: 100%;
			max-width: 100%;
			display: block;
			border-radius: 2.5rem;
		}
	}
}

.interview-meta {
	display: grid;
	gap: 0.75rem;
	position: relative;
	z-index: 1;

	p {
		background-color: var(--color-white);
		width: fit-content;
		padding-inline: 2rem 2.5rem;
		border-radius: 0 3.3em 3.3em 0;
	}

	.interview-meta__1 {
		font-size: clamp(1.125rem, 0.973rem + 0.32vw, 1.25rem);
		line-height: 2;
	}

	.interview-meta__2 {
		font-size: clamp(12px, 0.598rem + 0.32vw, 0.875rem);
		line-height: 2.2;
	}

	@media(768px >=width) {
		.interview-meta__2 {
			font-size: clamp(12px, 0.598rem + 0.32vw, 0.875rem);
			line-height: 2;
		}
	}
}

.r_interview-content {

	color: var(--color-text);
	margin-block-end: 0;
	counter-reset: interview-question;

	h3 {
		color: var(--color-recruit-accent);
		text-align: justify;
		font-size: 0.975rem;
		font-style: normal;
		font-weight: 700;
		letter-spacing: 0.01688rem;
		margin-block: 3.5rem 0.8rem;
		counter-increment: interview-question;

		&::before {
			content: counter(interview-question, decimal-leading-zero) ". ";
		}
	}

	h4 {
		font-size: clamp(1.125rem, 0.014rem + 2.31vw, 28px);
		font-weight: 700;
		letter-spacing: 0.035rem;
		margin-block: 0.75em 0.875em;
		opacity: 0;
		scale: 0.95;
		transition: opacity 0.3s, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
		transition-delay: 0.35s;
		width: fit-content;

		&.is-in-view {
			opacity: 1;
			color: var(--color-text);
			scale: 1;
		}
	}

	p {
		font-weight: 600;
		line-height: 1.875;
		color: #eee;
		transition: 1s ease-in;

		&.is-in-view {
			color: var(--color-text);
		}
	}

	figure {
		display: block;
		margin-block: 3rem 3.5rem;

		img {
			width: 100%;
			max-width: 100%;
			height: auto;
			object-fit: contain;
			display: block;
			border-radius: 2.5rem;

		}
	}
}

/* インタビュー一覧に戻るリンク */
.r-in-interview-listLink {
	a {
		display: block;
		color: var(--color-white);
		background-color: var(--color-accent);
		font-size: 0.895rem;
		font-weight: 700;
		width: fit-content;
		text-decoration: none;
		padding: 0.75em 3.895em;
		margin-inline: auto;
		border-radius: 6.25em;
		border: 1px solid transparent;
		font-feature-settings: normal;
		transition: 0.3s linear;

		&:hover {
			background-color: var(--color-white);
			border-color: var(--color-accent);
			color: var(--color-accent);
		}
	}

	margin-block:4.95rem;
}

@media(768px >=width) {
	.recruit-inner_image {
		aspect-ratio: 4 / 3.5;

		figure img {
			aspect-ratio: 4 / 3.5;
			object-fit: cover;
		}
	}

	.r_interview-content {
		figure img {
			aspect-ratio: 212/135;
			object-fit: cover;
		}
	}
}

/* work */
.recruit-element-inner_lead.rec_inner-element-content.r-w-lead-top {
	&::before {
		height: 100%;
		max-height: unset;
	}
}

.r-w-lead-top {
	.r-inner_content-in {
		padding-block-end: 3rem;
	}

	.rec-inner_h3 {
		line-height: 2;
		padding-inline: 1rem;
		font-feature-settings: normal;
		text-align: justify;
		margin-block: clamp(1.375rem, -2.847rem + 8.8vw, 2.75rem) clamp(2.125rem, -3.208rem + 11.11vw, 4.125rem);
	}
}

.re-mission-dl {
	margin-block-start: clamp(2rem, 0.556rem + 3.01vw, 2.813rem);
	display: grid;
	gap: 1.7rem;
	padding-inline-start: unset;

	li {
		display: grid;
		border-radius: 1.06rem;
		color: var(--color-accent);
		background-color: var(--color-white);
		padding: clamp(2rem, 1.236rem + 1.85vw, 2.625rem) clamp(0.7rem, -1.344rem + 4.26vw, 1.85rem);
		gap: 16px clamp(2rem, -4.951rem + 14.48vw, 5.91rem);
		font-feature-settings: normal;

		.r-dt-type {
			font-size: clamp(1.125rem, -0.208rem + 2.78vw, 1.875rem);
			letter-spacing: 0.09375rem;
			display: flex;
			align-items: center;
			gap: clamp(0.5rem, -1.811rem + 4.81vw, 1.8rem);

			&:before {
				content: "";
				height: clamp(0.5rem, 0.056rem + 0.93vw, 0.75rem);
				width: clamp(0.5rem, 0.056rem + 0.93vw, 0.75rem);
				background-color: var(--color-recruit-accent-sub);
				display: block;
				border-radius: 50%;
			}
		}

		.r-dd-type {
			font-size: clamp(1rem, 0.111rem + 1.85vw, 1.5rem);
			letter-spacing: 0.075rem;
		}
	}
}

@media(600px < width) {
	.re-mission-dl {
		li {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			justify-content: center;
		}
	}
}

@media(768px <=width) {
	.r-w-lead-top {
		.rec-inner_h3 {
			text-align: center;
		}
	}
}

/* message */
.r-w-message {
	.rec-inner_h3 {
		line-height: 2;
		letter-spacing: 0.1125rem;
	}

	figure {
		max-width: 52.375rem;

		@media(768px <=width <=1300px) {
			margin-inline: auto;
		}

		img {
			width: 100%;
			height: auto;
			object-fit: contain;
			aspect-ratio: 29/19;
			margin-inline: auto;
		}
	}

	.r-w-about-message {
		display: grid;
		row-gap: 2rem;
		gap: 1rem;
	}

	.r-w-inner-content-message {
		max-width: 37.74869rem;
		margin-inline: auto;

		@media(1024px <=width <=1300px) {
			padding-inline-end: 1rem;
		}

		p {
			line-height: 2;
			margin-block-end: 1.5rem;
		}

		p:nth-last-of-type(1) {
			margin-block-end: unset;
			text-align: end;
			margin-block-start: clamp(0rem, -4.253rem + 8.86vw, 3.5rem);
		}
	}

	.r-w-inner-figure {
		max-width: calc(950px + 2rem);
		margin-block: 2rem 0;
		margin-inline: auto;
		gap: 1rem;
		padding-inline: 1rem;
		margin-block-start: clamp(3.48rem, -3.436rem + 14.41vw, 7.37rem);
	}
}

@media(768px > width) {
	.r-w-message {
		.r-w-about-message {
			row-gap: 1.5rem;

			figure {
				img {
					margin-inline: auto;
					width: 74vw;
				}
			}
		}

		.r-w-inner-content-message {
			padding-inline: 1rem;

			p {
				line-height: 2.125;
			}
		}
	}
}

@media(1024px <=width) {
	.r-w-message {
		.r-w-about-message {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.r-w-inner-content-message {
			margin-inline-start: 0;
			align-self: center;
		}
	}
}

@media(1920px < width) {
	.r-w-message {
		figure {
			max-width: 52.375rem;
			margin-inline: auto;

			img {
				width: 100%;
				height: auto;
				object-fit: contain;
				aspect-ratio: 29/19;
				margin-inline: auto;
			}
		}
	}
}

/*
 * 会社概要「データで見る」ブロック（.c-about-data-inner）。レイアウトだけの仮組みで、
 * 中身のデザインは未確定（本実装時に差し替える）。面積2枚だけ grid-column: span 2 を持たせ、
 * PC=3列/SP=2列で自動的に並ぶ。
 */
.c-about-data-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.125rem 10px;
	margin-block-end: clamp(3.938rem, 0.938rem + 6.25vw, 5.625rem);

	@media(768px <=width) {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem clamp(0.5rem, -0.389rem + 1.85vw, 1rem);
	}
}

.c-about-data-item {
	background-color: var(--color-recruit-bg);
	border-radius: 0.9rem;
	padding: 1.25rem clamp(0.375rem, -0.736rem + 2.31vw, 1rem) 1rem;
	text-align: center;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	justify-items: center;
	justify-content: center;
	gap: 1rem;

	h3 {
		font-size: clamp(1.125rem, -0.208rem + 2.78vw, 1.875rem);
		background-color: var(--color-white);
		color: var(--color-accent);
		border-radius: 1rem 1rem 0 0;
		padding: 3px clamp(0.313rem, -0.243rem + 1.16vw, 0.625rem);
	}

	img {
		display: block;
		align-self: center;
		width: 100%;
		height: auto;
		max-width: 100%;
		margin-inline: auto;
	}
}

.c-about-data-item--wide {
	grid-column: span 2;
}

/*募集要項*/
.r-job-inner {
	h2.r-j-headline {
		font-size: clamp(1.5rem, 0.167rem + 2.78vw, 2.25rem);
		border-bottom: 2px solid var(--color-recruit-accent);
	}

	/*
	 * 数字を2桁で自前採番（decimal-leading-zero）。<li> に display:flex を当てると ::marker
	 * が生成されなくなる（.not-recruiting の行だけ番号が消える）ため、ネイティブの list-style は使わず
	 * counter + ::before にしている。
	 */
	.wp-block-list {
		padding-inline-start: clamp(2.375rem, -0.069rem + 5.09vw, 3.75rem);
		list-style: none;
		counter-reset: job-item;
		font-size: clamp(1.25rem, -0.083rem + 2.78vw, 2rem);
		display: grid;
		gap: clamp(0.85rem, -0.839rem + 3.52vw, 1.8rem);
		margin-block: 3rem;

		li {
			counter-increment: job-item;
			column-gap: 1rem;
			transition: 0.3s ease-in;

			&:not(.not-recruiting) {
				&:hover {
					opacity: 0.6;
				}
			}

			@media(768px <=width) {
				display: flex;
				align-items: center;
			}

			a {
				text-decoration: none;
			}

			&::before {
				content: counter(job-item, decimal-leading-zero) ".";
			}
		}
	}

	&:nth-child(2) {
		background-color: var(--color-recruit-background);
	}
}

@media(768px >= width){
	.r-job-inner {
    .wp-block-list {
					margin-block: 2rem 0;
				}
			}
}
.not-recruiting {
	color: #D6D6D6;

	a {
		pointer-events: none;
	}

	&::after {
		content: "※現在は募集しておりません。";
		color: var(--color-corporate-accent);
		font-size: 0.875rem;
		display: block;
	}
}

@media(768px <=width) {
	.not-recruiting {
		&::after {
			content: "※現在は募集しておりません。";
			color: var(--color-corporate-accent);
			font-size: 0.875rem;
			display: inline-block;
		}
	}
}

/* マイクロインタラクティブ用 */
.r-j-headline {
	--r-j-headline: 0.75rem;
	position: relative;
	padding-inline-start: clamp(2.375rem, -0.069rem + 5.09vw, 3.75rem);
	padding-block-end: var(--r-j-headline);
	margin-block-end: var(--r-j-headline);

	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 40%;
		left: 0;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		transform: translateY(-50%);
	}

	&::before {
		background-color: var(--color-recruit-accent);
		z-index: 2;
	}

	&::after {
		background-color: var(--color-recruit-accent-sub);
		z-index: 1;
	}

	&.animate-on::after {
		transition: transform 0.3s cubic-bezier(.25, 0, .19, 1.1) 0.5s;
	}

	&.is-in-view::after {
		transform: translate(30%, -38%);
	}
}

@media (prefers-reduced-motion: reduce) {
	h2.r-j-headline.animate-on::after {
		transition: none;
	}
}

.r-j-guidelines-inner {
	counter-reset: guideline-item;

	>div {
		background-color: var(--color-white);
		border-radius: 20px;
		margin-block: 34px;
		padding-inline: clamp(1.25rem, -1.639rem + 6.02vw, 2.875rem);
		padding-block: 55px;
	}

	h3 {
		font-size: clamp(1.5rem, 0.892rem + 1.27vw, 2rem);
		counter-increment: guideline-item;
		margin-block: 2.938rem 2rem;

		&::before {
			content: counter(guideline-item, decimal-leading-zero) ".";
		}
	}

	h4 {
		color: var(--color-accent);
		font-size: clamp(1.25rem, 0.946rem + 0.63vw, 1.5rem);
	}
}

/*募集要項*/
.r_j-table {
	margin-block-start: 28px;

	tbody td:nth-child(1) {
		white-space: nowrap;
	}

	tr td {
		border-color: #d9d9d9;
		border-left: none;
		border-right: none;
		padding-block: clamp(1rem, -0.735rem + 3.61vw, 1.75rem) clamp(1rem, -0.157rem + 2.41vw, 1.5rem);
	}
}

@media(768px > width) {
	.r_j-table {
		tr {
			display: block;
		}

		tr td {
			display: block;
			/*padding-block:16px;*/
			padding-inline: 1rem;

			&:nth-child(1) {
				border-bottom: none;
				padding-block-end: 8px;
				padding-inline-start: 0.25rem;
			}

			&:nth-child(2) {
				padding-block-start: 8px;
				border: none;
				padding-inline: 1.25rem 0.75rem;
			}
		}

		tr:nth-last-child(1) {
			border-bottom: 1px solid #d9d9d9;
		}
	}
}

@media(768px <=width) {
	.r_j-table table {
		tbody tr td {
			&:nth-child(1) {
				padding-inline: 1.125rem clamp(1.25rem, -2.083rem + 6.94vw, 3.125rem);
			}

			&:nth-child(2) {
				padding-inline: clamp(1.25rem, -2.083rem + 6.94vw, 3.125rem) 1.125rem;
			}
		}
	}
}

.r-j-entory-link {
	a {
		display: block;
		max-width: 510px;
		text-align: center;
		text-decoration: none;
		color: var(--color-white);
		background-color: var(--color-recruit-accent);
		font-size: 20px;
		margin-inline: auto;
		margin-block-start: 64px;
		padding-block: 1rem;
		border-radius: 3.5rem;
		border: 1px solid transparent;
		transition: 0.3s linear;

		&:hover {
			background-color: var(--color-white);
			color: var(--color-recruit-accent);
			border-color: var(--color-recruit-accent);
		}
	}
}

.entry.recruit-section-case {
	.inner-element-content {
		max-width: 800px;
	}

	.from_front {
		p {
			margin-block-end: 1rem;
		}

		ul {
			margin-inline-start: 0;
			padding-inline-start: 0;
			margin-block: 2em 2.75em;
			list-style: none;
		}

		li::before {
			content: "※";
		}
	}

	.attention {
		ul {
			margin-inline-start: 0;
			padding-inline-start: 0;
			margin-block: 2em 2.75em;
			list-style: none;
		}

		p {
			font-weight: normal;
			font-size: 14px;
			margin-block-end: 0.25rem;

			&::before {
				content: "※";
				padding-inline-end: 0.25em;
			}
		}
	}
}

.cf7-form-table.recruit-entory-form {

	p:has(.send-message) {
		width: 100%;
		margin-block-start: 4.35rem;

		.send-message {
			width: 100%;
			display: block;
			max-width: 510px;
			margin-inline: auto;
		}

		.wpcf7-spinner {
			margin: 0.5em auto;
			display: block;
		}
	}

}

/* 職場ツアー */
:where(.r-tour-innner, .r-tour-workplace) {
	border-radius: clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) 0 0;
}

.recruit-section-case {
	/* padding-block-end: 0; */
}

.recruit-section-case.r-f-message {
	padding-block: clamp(5.063rem, 3.285rem + 3.7vw, 8.75rem) clamp(4.625rem, 3.958rem + 1.39vw, 5rem);
	overflow-x: clip;
}

.r-f-message {
	position: relative;

	.recruit-head[data-title] {
		margin-block-end: 0
	}
}

.r-tour-innner {
	background-color: var(--color-accent);
	padding-block: clamp(5.063rem, 3.285rem + 3.7vw, 6.063rem) 0;
	counter-reset: tour-headline;
}

.r-tour-workplace {
	margin-block-start: 2.85rem;
	padding-block: clamp(2.75rem, -7.917rem + 22.22vw, 8.75rem) clamp(3.75rem, -0.694rem + 9.26vw, 6.25rem);
	background-color: var(--color-recruit-background);

	h2.recruit-head {
		text-align: left;
		margin-block-end: unset;
	}
	h3.tour-headline_subh{
		margin-block:2.75rem clamp(2.5rem, 2.043rem + 1.95vw, 3.75rem);
	}
	p {
		line-height: 1.88;
		letter-spacing: 0.02em;
		font-feature-settings: normal;
	}

	.inner-element-content {
		max-width: calc(768px - 2rem);
		display: grid;
		p{line-height: 2.25;}
	}
}

@media(1580px >=width) {
	.r-tour-workplace {
		.inner-element-content {
			padding-inline: 1rem;
		}
	}
}

@media(1024px <=width) {
	.r-tour-workplace {
		.inner-element-content {
			max-width: 1560px;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 2rem;
		}
	}
}

.r-tour-fourimage {
	width: fit-content;
	margin-inline: auto;
	margin-block-start: 2rem;
	gap: 0;
}

@media(1024px <=width) {
	.r-tour-fourimage {
		margin-block-start: unset;
		margin-inline-end: 0;
		align-content: center;
	}

	.r-tour-workplace .inner-element-content>div:not(.r-tour-fourimage) {
		max-width: 39.625rem;
		justify-self: center;
	}
}

.r-tour-inner {
	display: grid;
	row-gap: 3.438rem;
}

.r-tour-inner-content {
	padding: clamp(2rem, 1.168rem + 2.48vw, 3.34rem) clamp(1rem, -0.368rem + 4.24vw, 3.34rem);
	border-radius: 1.88rem;
	background-color: var(--color-white);
}

.r-tour-inner-imgblock {
	display: flex;
	align-items: center;
	width: 100%;
	gap: clamp(0.938rem, -0.174rem + 2.31vw, 1.563rem);

	img {
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
}

@media(768px > width) {
	.r-tour-inner-imgblock {
		flex-direction: column;
	}
}

.tour-headline {
	font-size: clamp(24px, -0.75rem + 4.69vw, 2.25rem);
	letter-spacing: 0.05em;
	color: var(--color-recruit-accent-sub);
	counter-increment: tour-headline;

	&::before {
		content: counter(tour-headline, decimal-leading-zero) " ";
		font-family: var(--font-en);
	}
}

.tour-headline_sub {
	font-size: clamp(18px, 0.458rem + 1.39vw, 1.5rem);
	letter-spacing: 0.05em;
}

.tour-headline_subh {
	font-size: clamp(1.5rem, 0.167rem + 2.78vw, 2.25rem);
	letter-spacing: 0.05em;
	margin-block: clamp(1.5rem, 0.167rem + 2.78vw, 2.25rem);
}

.r-tour-innerBlock-inner {
	display: grid;
	gap: 1.5rem;
}

.r-tour-devide-block {
	position: relative;
	padding-block: 67px clamp(2.5rem, -66.5rem + 143.75vw, 25.5rem);

	@media(768px < width) {
		padding-block-end: 40px;
	}
}

.devide-list {
	position: relative;
	font-size: clamp(2rem, 0.5rem + 3.13vw, 2.5rem);
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--color-white);
	line-height: 2.5;
	border-top: 1px dashed var(--color-white);
	border-bottom: 1px dashed var(--color-white);
	max-width: 410px;
	margin-inline: auto;
}

.rec-tour-illust02 {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	img {
		width: clamp(8.938rem, -0.25rem + 19.14vw, 12rem);
		height: auto;
		object-fit: contain;
		scale: 0.75;
		transform-origin: center bottom;
		transition: scale 0.5s cubic-bezier(.81, .08, .52, 1.48);
		transition-delay: 0.3s;
	}
}

.rec-tour-illust02.is-in-view img {
	scale: 1;
}

@media(768px < width) {
	.rec-tour-illust02 {
		bottom: 0;
		left: unset;
		right: 0;
		transform: translateX(-50%);
	}
}

.r-tour-illust-top {
	position: absolute;
	left: 5vw;
	bottom: -2.5rem;
	width: 100%;

	img {
		scale: 0.7;
		rotate: 5deg;
		width: clamp(10rem, -2.292rem + 24.31vw, 15.938rem);
		height: auto;
		object-fit: contain;
		display: block;
		transform-origin: center bottom;
		transition: 0.2s steps(3) 0.2s;
	}
}

.r-tour-illust-top.is-in-view {
	img {
		scale: 1;
		rotate: 0deg;
	}
}

@media(1024px <=width) {
	.r-tour-illust-top {
		left: 15vw;
	}
}

.r-tour-workplace-img {
	max-width: 810px;
	margin-inline: auto;
	img{
		aspect-ratio: 398 / 254;
		object-fit: cover;
	}
}

@media(768px > width) {
	.r-tour-workplace-img {
		flex-direction: column
	}
}

@keyframes r-wp2-circle-pop {
	0% {
		scale: 0;
		opacity: 0;
	}

	100% {
		scale: 1;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.r-tour-workplace2::before,
	.r-tour-workplace2::after {
		scale: 1;
		animation: none;
	}
}

.r-tour-workplace2 {
	/* 装飾円の寸法の単位。数値はデザイン案(幅1920px)の実測px */
	--wp2-u: clamp(0.4px, 100vw / 1920, 1px);
	position: relative;
	isolation: isolate;
	padding-block-end: clamp(5.813rem, 4.368rem + 3.01vw, 6.625rem);

	/*
	 * 装飾円。::before=右上(緑が手前・青が奥)、::after=左下(青が手前・水色が奥)。
	 * セクションの外側は疑似要素の箱で切れる。出現は角を起点に拡大するので、
	 * オーバーシュート中も切れている辺(右上は上・右、左下は下・左)はずれない。
	 */
	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}

	&::before {
		transform-origin: right top;
		background-image:
			radial-gradient(circle at calc(100% - 70 * var(--wp2-u)) calc(48 * var(--wp2-u)), var(--color-recruit-accent-sub) calc(226 * var(--wp2-u) - 0.5px), transparent calc(226 * var(--wp2-u))),
			radial-gradient(circle at calc(100% - 228 * var(--wp2-u)) calc(-95 * var(--wp2-u)), var(--color-recruit-accent) calc(226 * var(--wp2-u) - 0.5px), transparent calc(226 * var(--wp2-u)));
	}

	&::after {
		transform-origin: left bottom;
		background-image:
			radial-gradient(circle at calc(64 * var(--wp2-u)) calc(100% - 36 * var(--wp2-u)), var(--color-recruit-accent) calc(281 * var(--wp2-u) - 0.5px), transparent calc(281 * var(--wp2-u))),
			radial-gradient(circle at calc(293 * var(--wp2-u)) calc(100% + 74 * var(--wp2-u)), var(--color-recruit-light-blue) calc(197 * var(--wp2-u) - 0.5px), transparent calc(197 * var(--wp2-u)));
	}

	/*
	 * 右上はセクション自身、左下は下側の写真ブロックが画面に入った時に出す(縦に長く、同時だと左下が画面外のため)。
	 * 合図のクラスが本文に無い時は隠さない(円が消えたままにならないように)。
	 */
	&.animation-once::before,
	&:has(.r-tour-workplace-img.animation-once-inner)::after {
		scale: 0;
	}

	&.is-in-view::before,
	&:has(.r-tour-workplace-img.is-in-view)::after {
		scale: 1;
		animation: r-wp2-circle-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
	}

	.inner-element-content {
		max-width: 960px;
		margin-inline: auto;
		margin-block-start: clamp(2.813rem, -1.076rem + 8.1vw, 5rem);
		display: grid;
		gap: clamp(2.188rem, 0.299rem + 3.94vw, 3.25rem);
	}

	h3 {
		text-align: center;
	}

	p {
		letter-spacing: 0.125rem;
		line-height: 1.8;
	}
}

/* work */
.l-main--work .recruit-section-case.r-w-lead-top {
	padding-block-start: clamp(44px, -1.25rem + 8.33vw, 7rem);
}

@media(1300px >=width) {
	.r-w-top_leadblock_inner {
		padding-inline: 1rem;
	}
}

.r-w-top_leadblock_inner {
	display: grid;
	justify-items: center;
	gap: 3.25rem 1rem;
	max-width: 660px;
	margin-block-start: 57px;
	margin-inline: auto;

	>div {
		max-width: 35em;
	}

	@media(1024px <=width) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 1276px;
		justify-content: space-between;
		align-items: center;
		margin-block-start: 90px;

		>div {
			margin-inline: 0 auto;
		}
	}

	p {
		line-height: 2;
		font-size: clamp(1rem, 0.556rem + 0.93vw, 1.25rem);
	}

	h3 {
		font-size: clamp(20px, -0.528rem + 3.7vw, 2.25rem);
		letter-spacing: 0.225rem;
		padding-block-end: 0.25rem;
		margin-block-end: 1em;
		border-bottom: 2px solid var(--color-recruit-accent-sub);
		width: fit-content;

		@media(768px >=width) {
			text-align: center;
			margin-inline: auto;
		}
	}
}


/* ourworks */
.r-w-describe {
	border-radius: clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) clamp(2.25rem, -2.611rem + 10.13vw, 6.25rem) 0 0;
	background-color: var(--color-accent);
	padding-block: clamp(3.438rem, 1.771rem + 3.47vw, 4.375rem) clamp(4.2rem, 3.333rem + 1.39vw, 4.375rem);
	padding-inline: 1rem;

	.recruit-head[data-title] {
		color: var(--color-white)
	}
}

.r-w-describe_inner {
	display: grid;
	gap: 2.5rem 2rem;
	list-style: none;
	padding-inline: unset;

	@media(1024px <=width) {
		display: flex;
		width: fit-content;

		/* a{max-width: 515px;} */
	}

	a {
		position: relative;
		display: grid;
		width: 100%;
		max-width: 515px;
		margin-inline: auto;
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
		align-items: center;
		gap: 1rem;
		text-decoration: none;
		background-color: var(--color-white);
		font-size: clamp(1.25rem, -0.083rem + 2.78vw, 2rem);
		overflow: hidden;

		@media(768px < width) {
			max-width: 516px;
			margin-inline: auto;
		}

		&::before {
			--transform-size-position: 90px;
			--transform-size-position-calc: calc(var(--transform-size-position) / 2);
			position: absolute;
			color: var(--color-crosspile-blue-1);
			right: 0;
			bottom: 0;
			display: block;
			content: "";
			width: var(--transform-size-position);
			height: var(--transform-size-position);
			background-color: #CCF0FB;
			z-index: 1;
			border-radius: 50%;
			transform: translate(var(--transform-size-position-calc), var(--transform-size-position-calc));
		}

		&::after {
			position: absolute;
			right: 4px;
			bottom: 6px;
			display: block;
			content: "";
			width: 1rem;
			height: 1rem;
			z-index: 1;
			background-image: url(../images/svg/arrow-img.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			transition: 0.2s ease-in;
		}

		transition: 0.2s ease-in;

		&:hover {
			&::after {
				transform-origin: center;
				transform: rotate(-45deg);
			}

			span:has(img) {
				&::before {
					transform: translate(-100%, -50%) scale(1.2);
					background-color: #ccf0fb83;
				}
			}
		}
	}

	img,
	span {
		display: block;
		z-index: 2;
	}

	span {
		position: relative;
	}

	img {
		width: clamp(8.438rem, -1.007rem + 19.68vw, 13.75rem);
		height: auto;
		display: block;
	}

	span:has(img) {
		padding-block: 0.25rem 0;
		position: relative;
		overflow: clip;

		&::before {
			position: absolute;
			top: 50%;
			left: calc(100% - 1.75rem);
			width: 200px;
			height: 200px;
			transform: translate(-100%, -50%) scale(1);
			transform-origin: center;
			display: block;
			content: "";
			background-color: #CCF0FB;
			z-index: -1;
			border-radius: 50%;
			transition: transform 0.3s ease-in, background-color 0.3s ease-in;
		}
	}
}

/* 共通バナー */
.l-main--work {

	.c-site-contact__block,
	.c-site-contact__lead {
		padding-block: 0;
	}

	.c-site-contact__lead {
		margin: 0;
	}
}

.r-work-content-bunner {
	font-weight: 700;
	background-color: var(--color-recruit-accent-sub);
	color: var(--color-white);
	padding-block: 2.25rem 2.75rem;
	display: grid;
	gap: 3rem 1.5rem;
	justify-content: center;

	p {
		font-size: clamp(1rem, -0.556rem + 3.24vw, 1.875rem);
		letter-spacing: 0.09375rem;
		text-align: center;
	}
}

.r-work-content-bunner_inner {
	display: grid;
	width: 100%;
	gap: 2rem 1em;

	a {
		text-align: left;
		display: block;
		color: var(--color-recruit-text);
		font-feature-settings: normal;
		text-decoration: none;
		background-color: var(--color-white);
		width: clamp(21.125rem, 14.681rem + 13.43vw, 24.75rem);
		border-radius: 2.52rem;
		padding-block: 1rem;
		padding-inline-start: 3rem;
		box-shadow: 4px 5px 0 0 var(--color-accent);
		position: relative;
		font-size: clamp(1.25rem, 0.806rem + 0.93vw, 1.5rem);
		transition: 0.3s ease-in;

		img {
			position: absolute;
			bottom: 0;
			right: 2rem;
			/* width: clamp(6.625rem, 4.069rem + 5.32vw, 8.063rem); */
			transition: 0.4s linear;
			transform-origin: center bottom;
			scale: 1;
		}

		&:hover {
			color: var(--color-accent);
			box-shadow: 0 0 0 2px var(--color-accent);

			img {
				animation: scales 0.3s ease;
				filter: drop-shadow(3px 02px var(--color-accent));
				scale: 1.1;
			}
		}
	}
}

@media(1024px <=width) {

	/* work */
	.r-work-content-bunner {
		.r-work-content-bunner_inner {
			display: grid;
			gap: 1rem 2rem;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@keyframes scales {
	0% {
		scale: 1;
	}

	50% {
		scale: 1.1;
	}

	65% {
		scale: 1.125;
	}

	100% {
		scale: 1.1;
	}
}

.r-w-work-type {
	padding-block: 0;

	h3[data-title] {
		margin-block-end: 0;
		line-height: 1;
		font-size: clamp(2.25rem, 1.546rem + 1.66vw, 3rem);

		&::before {
			content: attr(data-title);
			font-size: clamp(2.5rem, 1.326rem + 2.77vw, 3.75rem);
			letter-spacing: 0.05em;
			line-height: 0.9;
			text-align: center;
			margin-block-end: 0.5em;
			color: var(--color-recruit-light-blue);
		}
	}

	h4 {
		color: var(--color-recruit-accent);
		font-size: clamp(1.5rem, 0.796rem + 1.66vw, 2.25rem);

		&::before {
			line-height: 3;
			font-size: clamp(0.8rem, 0.706rem + 0.22vw, 0.9rem);
			/* color: var(--color-recruit-light-blue); */
		}
	}
}

.r-w-work_inner-tiltle {
	display: grid;
	place-content: center;
	position: relative;
	overflow: hidden;
	padding-block: 3rem;
	aspect-ratio: 1 / 0.752;
	view-timeline: --work-view;

	@media(1024px <=width) {
		aspect-ratio: 1 / 0.217;
	}

	&::before,
	&::after {
		display: block;
		inset: 0;
		content: "";
	}

	&::before {
		position: absolute;
		z-index: 1;
		background-image: url(../images/recruit/bg_03.webp);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		transform: translateY(calc((var(--work-progress, 0.5) - 0.5) * 80px));
		will-change: transform;

		@supports (animation-timeline: view()) {
			animation: seki-work-progress linear;
			animation-timeline: --work-view;
			animation-range: cover 0% cover 100%;
		}
	}

	&::after {
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: linear-gradient(87.38deg, #181717, #d9d9d9);
		mix-blend-mode: multiply;
	}

	h3 {
		color: var(--color-white);
		width: fit-content;
		margin-inline: auto;
		align-content: center;
		font-size: clamp(2.25rem, 0.917rem + 2.78vw, 3rem);
		line-height: 3;
		position: relative;
		z-index: 2;
	}

	@media (prefers-reduced-motion: reduce) {
		&::before {
			transform: none;
		}
	}
}

@property --work-progress {
	syntax: "<number>";
	inherits: true;
	initial-value: 0.5;
}

@keyframes seki-work-progress {
	from {
		--work-progress: 0;
	}

	to {
		--work-progress: 1;
	}
}

.r-w-describe-inner {
	background-color: var(--color-recruit-bg);
	padding-block-start: clamp(2.75rem, -0.537rem + 7.76vw, 6.25rem);
}

.r-w-kind-work {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1rem;
	display: grid;
	max-width: 600px;

	@media(1024px <=width) {
		max-width: 1340px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	p {
		font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
		letter-spacing: 0.1em;
		line-height: 2.25;
		text-align: left;
	}



}

.r-w-wotk-type-block {
	position: relative;

	&::after {
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 100%;
		height: 50%;
		background-color: var(--color-recruit-light-blue);
		z-index: 1;
	}
}

.r-w-kind-work_describe {
	position: relative;
	z-index: 2;
	display: grid;
	max-width: 600px;
	margin-inline: auto;
	justify-content: center;
	gap: 2.42rem clamp(0.75rem, -1.279rem + 4.23vw, 2.42rem);
	margin-block-start: clamp(3.5rem, -0.092rem + 6.96vw, 6rem);
	padding-block-end: clamp(3.5rem, -0.092rem + 6.96vw, 6rem);

	h5[data-title] {
		margin-block-end: 0.5rem;
		text-align: center;
		/* font-size: clamp(1.5rem, 1.044rem + 0.95vw, 1.875rem); */
		font-size: clamp(1.5rem, 0.479rem + 1.6vw, 1.875rem);
		color: var(--color-accent);


		&::before {
			font-family: var(--font-jp);
			color: var(--color-recruit-light-blue);
			margin-block-end: 1em;
		}
	}

	p {
		line-height: 2;
		letter-spacing: 0.1rem;
	}

	figure {
		display: block;
		margin-block-start: 1em;
	}

	img {
		width: auto;
		max-width: 100%;
		margin-inline: auto;
	}

	>div {
		background-color: var(--color-white);
		padding-inline: clamp(1.75rem, -1.229rem + 4.91vw, 3.063rem);
		padding-block: clamp(29px, 0.977rem + 1.74vw, 46px) clamp(30px, 1.191rem + 1.42vw, 39px);
		border-radius: 1.88rem;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: 0.45rem 1.5rem;
		/* max-width: clamp(21.25rem, 9.478rem + 24.53vw, 30.938rem); */
		justify-content: center;
		justify-items: center;
	}
}

@media(1024px <=width) {
	.r-w-kind-work_describe {
		display: grid;
		max-width: 1600px;
		grid-template-columns: auto auto auto;
		/* grid-template-columns: repeat(3, minmax(clamp(21.25rem, 9.478rem + 24.53vw, 30.938rem), 1fr)); */
		justify-content: center;
		justify-items: center;
		padding-inline: 1rem;
	}
}

.r-w-point {
	padding-block: 4rem 4.75rem;
	background-image: url(../images/recruit/bg_04.webp);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	text-align: center;

	counter-reset: work-point;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: linear-gradient(87.38deg, #181717, #d9d9d9);
		mix-blend-mode: multiply;
	}

	h4[data-title] {
		color: var(--color-white)
	}

	p {
		text-align: center;
		padding: 0.45em 1rem;
	}
}

.r-w-point-inner {
	display: grid;

	@media(1024px > width) {
		gap: 1.65rem;
	}

	@media(1024px <=width) {
		grid-template-columns: repeat(2, auto);
		gap: 1.5rem 1.25rem;
	}

}

.r-w-point-inner_list {
	background-color: var(--color-corporate-heading);
	counter-increment: work-point;

	border-radius: 1.125rem;

	p:nth-child(1) {
		padding-block: 0.75em;
		color: var(--color-recruit-light-blue);
		font-family: var(--font-en);
		letter-spacing: 0.0625rem;
		font-size: clamp(12px, -0.139rem + 1.85vw, 1.25rem);

		&::after {
			content: counter(work-point, decimal-leading-zero);
			display: inline-block;
			margin-inline-start: 0.5em;
		}
	}

	p:nth-child(2) {
		background-color: var(--color-white);
		font-size: clamp(13px, 0.257rem + 1.16vw, 1.125rem);
	}

	p:nth-child(3) {
		color: var(--color-white);
		font-size: clamp(20px, -0.083rem + 2.78vw, 2rem);
		padding-block: 0.75em;
	}
}

/* 仕事　FAQ */
.r-w-faq {
	h3[data-title] {
		text-align: center;
		font-size: clamp(1.5rem, 0.167rem + 2.78vw, 2.25rem);
		color: var(--color-recruit-accent);
		counter-reset: work-faq;

		&::before {
			letter-spacing: 0.04375rem;
			font-size: 14px;
			color: var(--color-recruit-accent-sub);
			font-family: var(--font-en);
			margin-block-end: 2em;
		}
	}

	.inner-element-content {
		margin-block-start: 2.75rem;


		p:nth-child(odd) {
			counter-increment: work-faq;
			background-color: #F1F9FF;
			font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
			font-weight: 700;
			line-height: 1.6;
			letter-spacing: 0.0625rem;
			color: var(--color-recruit-accent);
			margin-block: 1em;
			padding: 1rem;

			&::before {
				content: "Q" counter(work-faq) ".";
				display: inline-block;
				margin-inline-end: 0.5em;
				font-family: var(--font-en);
				color: var(--color-recruit-light-blue);
			}
		}

		p:nth-child(even) {
			font-weight: 500;
			line-height: 1.9;
			letter-spacing: 0.05rem;
		}
	}
}

#work-type02 {
	.r-w-work_inner-tiltle {
		&::before {
			background-image: url(../images/recruit/bg_05.webp);
		}
	}

	.r-w-point {
		background-image: url(../images/recruit/bg_06.webp);
	}
}


@media(768px >=width) {
	.r-w-kind-work_describe {
		padding-inline: 1rem;
	}

	.r-w-work-type {
		h4 {
			text-align: center;
		}
	}

	.r-w-point {
		background-position: left top;
		background-image: url(../images/recruit/bg_04sm.webp);
	}

	.r-w-point-inner {
		row-gap: 1.75rem;
	}

	#work-type02 {
		.r-w-point {
			background-position: 72% top;
		}
	}

	.r-work-content-bunner_inner {
		a {
			img {
				width: clamp(7.5rem, 4.069rem + 5.32vw, 8.063rem);
			}
		}
	}

	.interview-list {
		justify-content: center;
		gap: 2rem 1.5rem;
	}

	.r-tour-devide-block:has(.rec-tour-illust02) {
		padding-block-end: 0;

		.rec-tour-illust02 {
			position: relative;
			transform: unset;
			left: unset;
			margin-inline: auto;
			width: fit-content;
			margin-block-start: 0.75rem;
		}

	}

	.recruit-section-case.r-f-message{
		padding-block-start:clamp(2.75rem, 0.555rem + 9.37vw, 8.75rem);
		h2{
			line-height: 1.685;
		}
	}

	.c-site-contact__lead.tour-page {
    a {max-width: 90vw;}}
}