/*
 * recruit-base.css
 * 採用サイト（body.site-recruit の全ページ）共通のベーススタイル。個別ページは recruit-top.css /
 * recruit-inner.css。
 * ルール: @layer は使わない。既存コンポーネントを再利用し、固有クラスは recruit- 接頭辞。
 * トークンは style.css の :root。
 */

.entry-content {
	font-weight: 700;
	color:var(--color-recruit-text);
}
.inner-element-content{
	margin-block: unset;
}

.c-arrow-circle {
	border-width: 2px;
}
.recruit-section-case {
	padding-block: clamp(2.75rem, -1.25rem + 8.33vw, 6rem);
}
.recruit-section-case.lead_block {
	padding-block: unset;
	margin-block: clamp(5.125rem, -0.419rem + 11.55vw, 150px);
}


/* re-section-in-case {
	margin-block: clamp(2.75rem, -1.25rem + 8.33vw, 5rem);
} */

h2.recruit-head {
	color: var(--color-accent);
	font-size: 38px;
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.875;
	font-feature-settings: normal;
}

.r-lead_Copy {
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.875;
	margin-block: 2.875rem 5.825rem;
	font-size: 1.125rem;
	font-feature-settings: normal;
	@media(768px >= width){
		text-align: left;
	}
}

/* footer Meaage Block */
.site-footer-contact-heading {
	font-size: clamp(3.75rem, 0.234rem + 11.25vw, 7.125rem);
	line-height: 0.9;
	font-weight: 700;
}

:where(.site-footer-copy, .site-footer-entry) {
	font-size: clamp(1.125rem, 0.458rem + 1.39vw, 1.5rem);
}

.site-footer-copy {
	line-height: 2.5;
	font-feature-settings: normal;
	margin-block: 22px 28px;
}

.site-footer-entry {
	font-weight: 700;
	max-width: 44.41044rem;
	margin-inline: auto;

	@media(45rem >=width) {
		padding-inline: 1rem;
		min-width: 20rem;
	}

	a {
		text-decoration: none;
		display: block;
		width: 100%;
		background-color: var(--color-white);
		color: var(--color-accent);
		line-height: 2;
		padding-block: clamp(1.2rem, -0.157rem + 2.41vw, 1.5rem);
		border-radius: 3.26rem
	}
}

.c-arrow-circle.c-arrow-circle--recruit-current {
	--circle-size: clamp(1.75rem, 1.22rem + 2.26vw, 3.6rem);
	--arrow-width: clamp(0.5rem, 0.39rem + 0.47vw, 0.8rem);
	grid-column: 2/3;
	grid-row: 1/3;
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	--border-color: var(--color-ivory);
	--arrow-color: currentColor;
	--hover-border-color: currentColor;
	--hover-bg-color: transparent;
	--hover-arrow-color: currentColor;
}

.site-footer-entry .c-arrow-circle.c-arrow-circle--recruit-current {
	color: var(--color-white);
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	--border-color: var(--color-ivory);
	--hover-border-color: var(--color-accent) --hover-arrow-color: var(--color-accent)
}

.site-footer-entry a {
	display: grid;
	grid-template-columns: 1fr auto;
	padding-inline: 1em;
	align-items: center;

	span,
	.c-arrow-circle {
		grid-row: 1/3;
	}
}

.c-site-contact__inner {
	--find__position: clamp(43rem, -1.25rem + 92.19vw, 57.75rem);
	padding-block: 88px;
	height: 100%;
	position: relative;
	z-index: 2;
	overflow: hidden;
	transition: all 0.2s ease-out 0s;

	&.is-in-view {
		&::before {
			top: 15%;
			width: 100%;
			max-width: var(--find__position);
			min-width: 43rem;
		}

		.r-site-contact__inner-text {

			&::before,
			&::after {
				opacity: 1;
				scale: 1;
			}
		}
	}

	&::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		max-width: 2%;
		border-radius: 50%;
		left: 50%;
		top: 120%;
		transform: translateX(-50%);
		aspect-ratio: 1/1;
		background-image: url(../images/recruit_pattern01.webp);
		z-index: 1;
		transition: 1.2s cubic-bezier(.87, .22, .15, 1.27) 0.6s;
	}
}

@media(768px > width){
	.r-site-contact__inner-text {
	margin-block: 154px;
	}
}

.r-site-contact__inner-text {
	position: relative;
	z-index: 2;
	margin-block-start: 154px;

	--find__in_position: clamp(20.2rem, -22.644rem + 89.26vw, 44.3rem);
	--find__position_bottom: -88px;

	&::before,
	&::after {
		opacity: 0;
		scale: 0.6;
		transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55), transform 0.2s ease-in;
		transition-delay: 1.6s, 1.6s, 0s;
	}

	&::before {
		content: "";
		display: block;
		position: absolute;
		width: 221px;
		height: 340px;
		background: url(../images/recruit/illust01.webp) no-repeat left bottom / contain;
		z-index: 5;

		right: calc(50vw + (var(--find__in_position) / 2) + clamp(0rem, -13.091rem + 20.45vw, 2.25rem));

		@media(768px<=width) {
			bottom: var(--find__position_bottom)
		}
	}

	&::after {
		content: "";
		display: block;
		position: absolute;
		width: 208px;
		height: 340px;
		left: calc(50vw + (var(--find__in_position) / 2) + clamp(0rem, -21.818rem + 34.09vw, 3.75rem));
		bottom: var(--find__position_bottom);
		background: url(../images/recruit/illust02.webp) no-repeat left bottom / contain;
		z-index: 5;

		@media(768px<=width) {
			bottom: var(--find__position_bottom)
		}

		;
	}
	/* 「募集要項・ご応募はこちら」リンクにマウスが乗った時だけillustを反応させる */
		&:has(.site-footer-entry a:hover)::after,&:has(.site-footer-entry a:hover)::before{
		transition: transform 0s steps(2);
	}
	&:has(.site-footer-entry a:hover)::after {
		transform: translateY(0) rotate(2deg);
	}

	&:has(.site-footer-entry a:hover)::before {
		transform: translateY(-0.5rem) rotate(-2deg);
	}
}
@media(768px > width){
	.c-site-contact__inner {
		padding-block-start: 74px;
	}
	.r-site-contact__inner-text {
	margin-block:80px 150px;
	}
	.r-site-contact__inner-text::before,
	.r-site-contact__inner-text::after{
opacity: 1;
scale: 1;
transition: unset;
left:18vw;
bottom:-220px;
width:120px;
	}
		.r-site-contact__inner-text::after{
			left:unset;
right:19vw;
	}
}



:where(.l-main--tour, .l-main--work) {
	.c-site-contact {
		.c-site-contact__block {
			padding-block-start: 3rem;
			background-image: url(../images/recruit_pattern01.webp);
		}
	}
}

.c-site-contact__lead {
	/*background-color: var(--color-white);*/
	margin-block-end: 3rem;
	color: var(--color-white);
}

.c-site-contact__block {
	position: relative;

}

@media(1200px >=width) {
	.site-footer-entry {
		a {
			max-width: clamp(20.2rem, -5.361rem + 53.25vw, 31.25rem);
			margin-inline: auto;
		}
	}
}

/*
 * グローバルナビ hover 時の暗幕（採用ゾーン限定）。body::before + :has() のCSSのみ。
 * トリガーは .c-site-header__bar と .c-site-header__nav a の OR 条件（nav はリンク以外が
 * pointer-events:none で、リンクの上では nav 側がヒットテストを奪うため、bar
 * 単体だと「リンクに乗っている間だけ暗幕が消える」）。z-index:400
 * はヘッダーの3レイヤー(500/501)より低く、All menu(2000)・スキップリンク(3000)と衝突しない。
 * 採用ゾーンのヘッダーは常に不透明で、企業サイトの mix-blend-mode
 * と干渉しないため採用限定にしている。
 */
body.site-recruit::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(2px);
	z-index: 400;
	opacity: 0;
	pointer-events: none;
	transition: 0.4s ease;
}

body.site-recruit:has(.c-site-header__bar:hover, .c-site-header__nav a:hover, .c-site-header__logo:hover)::before {
	opacity: 1;
}

/*
 * a.interview-card::before のグラデーション位置（--interview-gradient-stop）を @property
 * で登録している。グラデーションの色停止位置(%)は通常の transition で補間されず hover
 * 時に瞬時に切り替わるため、型登録してブラウザに補間させる。
 */
@property --interview-gradient-stop {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 65.87%;
}

.interview-list {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fit, 304px);
	justify-content: center;
	gap:2rem;
}
@media(1024px <= width){
	.interview-list {
	justify-content: space-between;
	}
}

a.interview-card {
	display: block;
	max-width: 304px;
	position: relative;
	overflow: hidden;
	background-color: var(--color-white);
	z-index: 1;

	&::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(67, 67, 67, 0) var(--interview-gradient-stop), #1f1f1f);
		transition: --interview-gradient-stop 0.3s ease;
		z-index: 2;
	}

	img {
		display: block;
		transition: 1s linear;
	}

	div {
		width: 100%;
		position: absolute;
		display: grid;
		align-items: center;
		column-gap: 0.25em;
		row-gap: 0.125rem;
		padding-inline: 1rem;
		padding-block-end: 1rem;
		grid-template-columns: minmax(0, 1fr) auto;
		bottom: 0;
		color: var(--color-white);
		z-index: 3;
	}

	p {
		margin-block: 0;
		font-size: 0.875rem;
	}

	.interview-card__category {
		font-size: clamp(18px, 0.669rem + 0.95vw, 1.5rem);
	}

	&:hover {
		img {
			scale: 1.05;
		}
	}

	&:hover::before {
		--interview-gradient-stop: 83%;
	}
}

.interview-card__data {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 0.5em;
}

/*
 * 社員インタビュー一覧のカードを時間差でふわっと出す。.interview-list に animation-once-inner
 * を足すと scroll-observer.js が .is-in-view を付ける。遅延は sibling-index() で並び順ぶんずらす。
 * reduced-motion では常時表示。
 */
@media (prefers-reduced-motion: no-preference) {
	.interview-list.animation-once-inner .interview-card {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s ease, transform 0.6s ease;
		transition-delay: calc((sibling-index() - 1) * 0.12s);
	}

	.interview-list.animation-once-inner.is-in-view .interview-card {
		opacity: 1;
		transform: translateY(0);
	}
}

.recruit-head[data-title]{
	position: relative;
	font-size: clamp(24px, 0.167rem + 2.78vw, 2.25rem);
	margin-block-end: clamp(32px, -5.058rem + 14.7vw, 2.97rem);
	&:before{
		content: attr(data-title);
		display: block;
		font-family: var(--font-en);
		font-size:0.875rem;
		color:var(--color-recruit-accent-sub);
	}
}

.rec-inner_h3{
	font-size:clamp(18px, -0.875rem + 4.17vw, 2.25rem);
	text-align: center;
}

/* :where(.l-main--about){
.recruit-section-case:not(.recruit-element-inner_lead):nth-child(odd){
	background-color: var(--color-recruit-background);
	border-radius: clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) 0 0;
}
} */

.r-about-table table {
	& tbody {
		tr td:nth-child(1) {
			background-color: var(--color-recruit-accent);
		}
	}
}

.recruit-section-case.r-w-outline {
	position: relative;
	isolation: isolate;
}

.recruit-section-case.r-w-outline::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-white);
	z-index: -1;
	clip-path: inset(calc(50% - 75px) round 50%);
	opacity: 0;
}

.recruit-section-case.r-w-outline.is-in-view::before {
	background-color: var(--color-recruit-background);
	animation: recruit-case-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes recruit-case-reveal {
	0% {
		clip-path: inset(calc(50% - 75px) round 50%);
		opacity: 0;
	}
	100% {
		clip-path: inset(0 round clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) 0 0);
		opacity: 1;
	}
}

.c-site-contact__lead.tour-page{
	display: grid;
	gap:1.25rem;
	font-weight: 700;
	h2{
		font-size: clamp(22px, 1.055rem + 1.37vw, 2.25rem);
		letter-spacing: 0.1em;
		text-align: center;
	}
	p{
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	}
	a{
		margin-block-start: 1rem;
		font-size: 1.25rem;
		letter-spacing: 0.1em;
		display: block;
		width: 100%;
		max-width: 412px;
		margin-inline: auto;
		text-decoration: none;
		background-color: var(--color-recruit-accent);
		padding-block: 1rem;
		border-radius: 3.5rem;
		transition: 0.3s linear;
		border:1px solid transparent;
		&:hover{
			color:var(--color-recruit-accent);
			background-color: var(--color-white);
			border-color: var(--color-recruit-accent);
		}
	}
}