/*
 * recruit-top.css
 * 採用サイトのトップページ（採用情報ページ本体）専用レイアウト。is_page( SEKI_RECRUIT_ROOT_SLUG )
 * の場合に読み込む（functions.php）。
 * ルール: @layer は使わない。固有クラスは recruit-top- 接頭辞。
 */
.interview-list {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(15.25rem, 1fr));
	gap: 2rem clamp(0.5rem, -0.715rem + 2.53vw, 1.5rem);
	padding-inline: 1rem;
}

.r-top-interview_inner,
.interview-list {
	max-width: 996px;
	margin-inline: auto;
}

@media(823px >=width) {
	.interview-list {
		grid-template-columns: 1fr;
		justify-content: center;

		a {
			margin-inline: auto;
		}
	}
}

/*
 * 採用TOP スライドショー（画像3枚、クロスフェード）。
 * Groupブロック(.recruit-top-slideshow)の直下にImageブロックを3つ並べ、各Imageに
 * .recruit-top-slideshow__slide を付ける（初期表示の1枚に .is-active。無ければ JS が先頭を採用）。
 * 切り替えは recruit-top-slideshow.js が .is-active を付け替えるだけで、
 * フェードはCSSのtransition。reduced-motion では先頭固定。
 * 以下は重ねる・フェードするための最小限の配置ルール。
 */
/*
 * .l-main--recruit に overflow-x: clip を持たせるのは、.hero::before/::after（装飾円）
 * が画面幅いっぱいにはみ出すため。クリップの基準を max-width:1920px の .hero 自身にすると、
 * 2K/4Kでは余白の途中で円が切れて見える。ビューポート幅まで伸びる #main に上げて解消している。
 */
.l-main--recruit .entry-content {
	overflow-x: clip;
}

.hero {
	margin-block-start: clamp(3.5rem, -1.816rem + 11.08vw, 130px);
	padding-block-end: clamp(1.5rem, -0.627rem + 4.43vw, 3.25rem);
	display: grid;
	justify-content: center;
	justify-items: center;
	gap: clamp(1.375rem, -0.752rem + 4.43vw, 3.125rem);
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
}

/*
 * .hero::before/::after の「ポップに出現」演出。バウンス系イージング cubic-bezier(0.34, 1.56,
 * 0.64, 1)（forms.css の seki-radio-pop と同じ曲線）で scale(0)→1 が一瞬100%を超えて収まる。::
 * after を0.15s遅らせて「ポン、ポン」と出す。
 * トリガーは .hero の追加CSSクラスに付けた animation-once（scroll-observer.js）。
 * 擬似要素にはクラスを付けられないので、.hero.is-in-view::before のように親のクラスで書く。
 * ポップ後は translate の上下浮遊ループ（r-hero-circle-float、infinite）。scale/opacity と
 * translate は別プロパティなので2本の animation が干渉しない。delay はポップ完了後、2つの円は
 * duration をずらして同期させない。
 */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	display: block;
	z-index: -1;
	border-radius: 50%;
	scale: 0;
	opacity: 0;
	translate: 0 0;
	transform-origin: center;
	animation-fill-mode: both, both;
	animation-play-state: paused, paused;
}

.hero::before {
	--r-top-h-l: clamp(200px, 2.5rem + 40vw, 50.5rem);
	width: var(--r-top-h-l);
	height: var(--r-top-h-l);
	top: clamp(170px, 9rem + 9.33vw, 312px);
	left: calc((var(--r-top-h-l) / 4) * -1);

	@media(768px >=width) {
		left: calc((var(--r-top-h-l) / 2) * -1)
	}

	aspect-ratio: 1 / 1;
	background-color: var(--color-recruit-accent);
	animation-name: r-hero-circle-pop,
	r-hero-circle-float;
	animation-duration: 0.6s,
	5s;
	animation-delay: 0.3s,
	0.9s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1),
	ease-in-out;
	animation-iteration-count: 1,
	infinite;
}

.hero::after {
	--r-top-h-r: clamp(12.5rem, -1.719rem + 45.5vw, 40.938rem);
	width: var(--r-top-h-r);
	height: var(--r-top-h-r);
	bottom: 0;
	right: calc((var(--r-top-h-r) / 4) * -1);
	aspect-ratio: 1 / 1;
	background-color: var(--color-recruit-accent-sub);
	animation-name: r-hero-circle-pop, r-hero-circle-float;
	animation-duration: 0.6s, 6.4s;
	animation-delay: 0.45s, 1.05s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
	animation-iteration-count: 1, infinite;
}

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

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

@keyframes r-hero-circle-float {

	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 calc(clamp(0.5rem, 0.125rem + 1.2vw, 1.25rem) * -1);
	}
}

.hero.is-in-view::before,
.hero.is-in-view::after {
	animation-play-state: running, running;
}

@media (prefers-reduced-motion: reduce) {

	.hero::before,
	.hero::after {
		animation: none;
		scale: 1;
		opacity: 1;
		translate: 0 0;
	}
}

.recruit-top-slideshow {
	margin-block-start: calc(clamp(3.375rem, -1.106rem + 9.34vw, 6.25rem) - clamp(1.375rem, -0.752rem + 4.43vw, 3.125rem));
	position: relative;
	overflow: hidden;
	width: 80.5vw;
	max-width: 1542px;
	background-color: var(--color-white);
	margin-inline: auto;
	border-radius: clamp(4.375rem, -13.093rem + 36.39vw, 18.75rem) clamp(4.375rem, -13.093rem + 36.39vw, 18.75rem) 0 0;
}

@media(1024px > width) {
	.recruit-top-slideshow {
		min-width: 345px;
		aspect-ratio: 1 / 0.638;
	}
}

@media(1024px <=width) {
	.recruit-top-slideshow {
		aspect-ratio: 1 / 0.483;
	}
}

.recruit-top-slideshow__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s linear;
}

.recruit-top-slideshow__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-top-slideshow__slide.is-active {
	opacity: 1;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.recruit-top-slideshow__slide {
		transition: none;
	}
}

@media(680x > width) {
	.r_hero_svg-blok {
		padding-inline: 1rem;
	}
}

/*
 * .r-hero01img のフェード+スケール登場演出。専用JSは不要で、Imageブロックの「追加CSSクラス」に
 * r-hero01img animation-once の2つを付けると scroll-observer.js が .is-in-view
 * を付ける（animation-once を付け忘れると透明・縮小のまま固まる）。
 * ヒーロー内の画像は読み込み時点でビューポート内なので、一度きりの発火がイントロ演出になる。
 */
.r-hero01img {
	width: clamp(250px, 8.702rem + 31.67vw, 40.375rem);
	opacity: 1;
	scale: 0;
	rotate: 20deg;
	transform: translateY(-4rem);
	transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	/* transition: opacity 0.45s ease, scale 0.45s cubic-bezier(.55, .16, .47, 1.55), transform 0.2s cubic-bezier(.55, .16, .47, 1.55); */
	/*transition:
		opacity 0.45s ease 1.8s,
		scale 0.45s cubic-bezier(.55, .16, .47, 1.55) 1.8s,
		transform 0.45s cubic-bezier(.55, .16, .47, 1.55) 1.8s,
		rotate 0.35s ease 1.8s;*/
		transition:
			opacity 0.45s ease 0.1s,
			scale 0.45s cubic-bezier(.55, .16, .47, 1.55) 0.1s,
			transform 0.45s cubic-bezier(.55, .16, .47, 1.55) 0.1s,
			rotate 0.35s ease 0s;
}

.r-hero01img.is-in-view {
	opacity: 1;
	scale: 1;
	rotate: 0deg;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.r-hero01img {
		transition: none;
	}
}

/*
 * .r-hero02img「熱処理」演出（4段階）: ①「熱処理」だけが viewBox(571×102) の水平中央に出現 →
 * ②赤熱色から最終色（青 #0072D5）へ変化 → ③残りの文章がフェードインしつつ「熱処理」
 * が定位置（左端）へ水平移動 → ④下線が左から右へワイプ。
 * 水平中央の基準は SVG の viewBox 座標系。「熱処理」の bbox 中心(104.43)と viewBox
 * 中心(285.5)の差 181.07px を --r-hero02-heat-offset-x に持たせ、③で0へ戻す（文言を差し替えたら
 * getBBox() で再計測）。下線のワイプは clip-path: inset() の px 値（下線の bbox x:285.478, w:
 * 270.847 から算出）。
 * transform は translate:/scale: の個別プロパティで統一する（ショートハンドと混在すると、
 * transition/animation の対象から外れて無音で効かなくなる）。@keyframes は要素ごとに別々にして
 * delay で直列化し（0.6→1.1→1.6→2.1→2.5s）、フェーズごとに調整しやすくしている。@keyframes
 * はセレクタ内にネストしない（無効化される）。
 * <use> の子孫セレクタは描画専用インスタンスツリーの内部に届かない（貫通するのは color
 * 等の継承プロパティのみ）ため、heat / base / underline を別々の <symbol>（insert-svg.php）
 * に分け、本文側で3つの <use> を並べる。色は <use> の color を fill="currentColor" が継承する。
 * マークアップ契約（カスタムHTMLブロック）: <div class="r-hero02img animation-once"><svg
 * viewBox="0 0 571 102" ...><use class="r-hero02-word r-hero02-word--heat"
 * href="#r-hero02Icn-heat"></use>（--base / --underline も同様）</svg></div>
 */
:root {
	--r-hero02-heat-offset-x: 181.07px;
}

@keyframes r-hero02-heat-appear {
	0% {
		opacity: 0;
		scale: 1;
	}

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

@keyframes r-hero02-fill-heat {
	0% {
		color: #0072D5;
	}

	40% {
		color: #d9480f;
	}

	100% {
		color: #0072D5;
	}
}

@keyframes r-hero02-heat-move {
	0% {
		translate: var(--r-hero02-heat-offset-x) 0;
	}

	100% {
		translate: 0 0;
	}
}

@keyframes r-hero02-base-fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes r-hero02-underline-sweep {
	0% {
		clip-path: inset(0 285.522px 0 0);
	}

	100% {
		clip-path: inset(0 14.675px 0 0);
	}
}

.r-hero02img svg {
	display: block;
	width: 100%;
	height: auto;
}

.r-hero02-word--heat {
	transform-box: fill-box;
	transform-origin: center;
	translate: var(--r-hero02-heat-offset-x) 0;
	scale: 0.85;
	opacity: 0;
	color: #0072D5;
	/*animation:
		r-hero02-heat-appear 0.2s ease-out 0s both,
		r-hero02-fill-heat 4s ease-in-out 0.3s both,
		r-hero02-heat-move 0.2s linear 1.65s both;
	animation-play-state: paused, paused, paused;*/
	animation:
		r-hero02-heat-appear 0.2s ease-out 0.3s both,
		r-hero02-fill-heat 3s ease-in-out 0.8s both,
		r-hero02-heat-move 0.2s linear 1.65s both;
	animation-play-state: paused, paused, paused;
}

.r-hero02-word--base {
	color: #0072D5;
	opacity: 0;
	/*animation: r-hero02-base-fade 0.5s ease-out 1.6s both;*/
	animation: r-hero02-base-fade 0.5s ease-out 1.6s both;
	animation-play-state: paused;
}

.r-hero02-word--underline {
	color: #0072D5;
	clip-path: inset(0 285.522px 0 0);
	animation: r-hero02-underline-sweep 0.4s ease-out 1.85s both;
	animation-play-state: paused;
}

.r-hero02img {
	width: clamp(210px, 5.74rem + 31.51vw, 37.25rem);
}

.r-hero02img.is-in-view .r-hero02-word--heat {
	animation-play-state: running, running, running;
}

.r-hero02img.is-in-view .r-hero02-word--base,
.r-hero02img.is-in-view .r-hero02-word--underline {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {

	.r-hero02-word--heat,
	.r-hero02-word--base,
	.r-hero02-word--underline {
		animation: none;
	}

	.r-hero02-word--heat {
		translate: 0 0;
		scale: 1;
		opacity: 1;
		color: var(--color-accent);
	}

	.r-hero02-word--base {
		opacity: 1;
	}

	.r-hero02-word--underline {
		clip-path: none;
	}
}

/*横スクロール画像処理　インタビューブロック*/
.r-marquee {
	gap: 0;
	padding-block-end: 0.5rem;
}

.r-marquee__group {
	gap: 0;

	.c-marquee__card {
		aspect-ratio: 1 / 1.217;
		width: clamp(20.75rem, 11.864rem + 18.51vw, 28.063rem);
	}
}

.imgSlide_img_Marquee {
	background-color: var(--color-white);
	position: relative;

	&::after {
		content: "";
		display: block;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90%;
		background: linear-gradient(0deg, #fff 5%, #ffffff00 88.5%);
		z-index: 1;
		position: absolute;
	}
}

.recruit-head.r-top-header[data-title] {
	font-size: clamp(1rem, 0.392rem + 1.27vw, 1.5rem);

	&:before {
		font-size: clamp(36px, -3.674rem + 12.34vw, 114px);
		color: var(--color-accent);
		line-height: 1;
		margin-block-end: 1.45rem;
	}
}

/* .recruit-top-know-people {} */

.r-top-interview {
	h2 {
		text-align: left;
	}

	h3 {
		font-size: clamp(1.5rem, 0.133rem + 2.85vw, 2.625rem);
		letter-spacing: 0.1em;
	}

	/*
	.recruit-head[data-title] {
		font-size: clamp(1rem, 0.392rem + 1.27vw, 1.5rem);

		&:before {
			font-size: clamp(36px, -3.674rem + 12.34vw, 114px);
			color: var(--color-accent);
			line-height: 1;
		}
	} */
}

.r-top-interview_inner {
	margin-block: clamp(2.25rem, -0.292rem + 5.3vw, 6.063rem) clamp(2.625rem, 0.792rem + 3.82vw, 5.375rem);

	p {
		line-height: 2.5;
		font-feature-settings: normal;
	}

	.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);
	}
}

.recruit-section-case.lead_block.r-top-interview {
	position: relative;
	z-index: 2;
	margin-block: -4.5rem 82px;
}

.hero_under-text {
	padding-block-end: clamp(0rem, 1.274rem + 8.54vw, 7.55rem);
}

@media(768px >width) {
	.interview-list {
		.c-arrow-circle.c-arrow-circle--recruit-current {
			--circle-size: 51px;
		}
	}
}

.recruit-top_Under_hero {
	padding-block-start: clamp(4rem, 1.472rem + 7.87vw, 7rem);
	max-width: 100%;
	margin-inline: auto;
}

.hero_under-col_img_inner {
	align-items: flex-end;
	figure:nth-child(2){
		padding-block-end: clamp(2.063rem, -1.507rem + 7.44vw, 5rem);
	}
}

@media(1024px > width) {
	.recruit-top_Under_hero {
		padding-inline: 1rem;
	}
	.hero_under-text {
		>div{
			width: fit-content;
			margin-inline: auto;
		}
	}
	.hero_under-col_img_inner{
		justify-content: center;
		gap:2rem;
		margin-block-start: 47px;
	}

}

@media(1024px <=width) {
	.hero_under-text {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-inline: auto;
		align-items: center;
		position: relative;
		max-width: 1780px;
		column-gap: 2rem;
	}

	.hero_under-text_inner {
		width: 100%;
		max-width: 42.2em;
		margin-inline: auto;
		position: relative;

		> div {
			width: 100%;
			max-width: 42.2em;
		}
	}

	.hero_under-col_img_inner {
		width: fit-content;
		justify-self: end;
		gap: 48px clamp(1rem, -2.556rem + 7.41vw, 3rem);
	}

	.recruit-top_Under_hero {
		max-width: 96vw;
		margin-inline: auto;
	}
}

.hero_under-text_inner {
	h1 {
		font-size: clamp(18px, -0.208rem + 2.78vw, 1.875rem);
		letter-spacing: 0.1em;
		color: var(--color-accent);
		line-height: 1;
	}

	h2 {
		font-size: clamp(30px, -0.125rem + 4.17vw, 3rem);
		color: var(--color-accent);
		letter-spacing: 0.1em;
		margin-block: clamp(24px, 0.285rem + 2.53vw, 2rem) 60px;
	}

	p {
		font-size: clamp(15px, 0.382rem + 1.16vw, 1.25rem);
		letter-spacing: 0.1em;
		line-height: 2.125;
		max-width: 40.25em;
		@media(1024px <= width){
			line-height: 3;
		}
	}
}

.r-mask-reveal {
	opacity: 0;
	mask-image: linear-gradient(to right, transparent 0, transparent 45%, #000 55%, #000 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 45%, #000 55%, #000 100%);
	mask-size: 225% 100%;
	-webkit-mask-size: 225% 100%;
	mask-position: 0% 0%;
	-webkit-mask-position: 0% 0%;
	transition:
		opacity 0.9s ease,
		mask-position 1.3s ease,
		-webkit-mask-position 1.3s ease;
}

.r-mask-reveal.is-in-view {
	opacity: 1;
	mask-position: -80% 0%;
	-webkit-mask-position: -80% 0%;
}

@media (prefers-reduced-motion: reduce) {
	.r-mask-reveal {
		transition: none;
		opacity: 1;
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* we do */
.recruit-top_wedo {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);

	p.en-type:nth-child(1) {
		color: var(--color-accent);
		line-height: 0.9;
		font-size: clamp(36px, -6.417rem + 18.06vw, 7.125rem);
		text-align: center;
		padding-block: clamp(2.5rem, 1.667rem + 1.74vw, 3.75rem) clamp(18px, -3.542rem + 9.72vw, 2.75rem);
	}

	h2 {
		font-size: clamp(1rem, 0.111rem + 1.85vw, 1.5rem);
		line-height: 1;
		color: var(--color-accent);

		/*@media(768px < width) {
			line-height: 2.5;
		}*/
	}

	h3 {
		letter-spacing: 0.125rem;
		font-size: clamp(22px, -0.847rem + 4.63vw, 2.625rem);
		line-height: 1.45;
		margin-block: 0.75rem 0;

		@media(768px < width) {
			letter-spacing: 0.2625rem;
		}
		@media(768px >= width) {
			margin-block-end: 1rem;
		}
	}

	h3 + p {
		font-feature-settings: normal;
		line-height: 2;

		@media(768 <=width) {
			line-height: 2.25;
		}

	}

	.inner-wedo-content_inner {
		position: relative;
		background-color: var(--color-recruit-background);
		border-radius: clamp(1.88rem, 0.823rem + 4.52vw, 6.25rem) clamp(1.88rem, 0.823rem + 4.52vw, 6.25rem) 0 0;
		padding-block: clamp(3.563rem, 1.771rem + 3.73vw, 6.25rem) clamp(4.813rem, 4.676rem + 0.58vw, 5.375rem);
		overflow-y: clip;
		z-index: 1;
		/*
		 * 参考サイト（ga-tech）の .spread-rotating のうち「入ると回転しながら定位置に収まる」
		 * 動きだけを踏襲（形状は変えない）。.recruit-top_wedo の is-in-view で発火する。
		 */
		rotate: -6deg;
		scale: 0.92;
		opacity: 0;
		transition:
			rotate 0.6s cubic-bezier(.55, .16, .47, 1.55) 0.2s,
			scale 0.6s cubic-bezier(.55, .16, .47, 1.55) 0.2s,
			opacity 0.6s ease 0.2s;

		/*
		 * スマホ幅（768px未満）は回転させない。カードが全幅に近く縦に長いため、傾けると横ずれで
		 * .entry-content の overflow-x:clip に角丸が切られて見えるおそれがある。scale/opacity は残す。
		 */
		@media(768px > width) {
			rotate: 0deg;
		}
	}

	.inner-element-content {
		display: grid;
		gap: clamp(1em, -0.278rem + 3.7vw, 2rem);
		/*
		 * 親 .inner-wedo-content_inner が -6deg 回転するため、中身は逆に +6deg
		 * 回転させて水平を保つ（打ち消すのは rotate のみ）。
		 */
		rotate: 6deg;
		transition: rotate 0.6s cubic-bezier(.55, .16, .47, 1.55) 0.2s;

		/* 親が768px未満で回転しなくなるため、打ち消し用の逆回転も一緒に0degへ */
		@media(768px > width) {
			rotate: 0deg;
		}
	}
}

/*
 * 「わたしたちの事業」背景円（.recruit-top_wedo::before / .inner-wedo-content_inner::after）
 * のポップ＋浮遊演出。仕組みは .hero::before/::after と同じ（@keyframes を流用）。
 * 2つの円は別要素なので、子孫セレクタ `.recruit-top_wedo.is-in-view .inner-wedo-content_inner::
 * after` で参照し、外側の .recruit-top_wedo にだけ animation-once を付ければ両方が動く。
 */
.recruit-top_wedo::before,
.inner-wedo-content_inner::after {
	scale: 0;
	opacity: 0;
	translate: 0 0;
	transform-origin: center;
	animation-fill-mode: both, both;
	animation-play-state: paused, paused;
}

.recruit-top_wedo::before {
	content: "";
	width: clamp(12.5rem, 5.621rem + 29.43vw, 40.938rem);
	aspect-ratio: 1/1;
	position: absolute;
	background-color: var(--color-recruit-accent-sub);
	z-index: -1;
	border-radius: 50%;
	top: 3.75rem;
	margin-inline-start: calc((clamp(12.5rem, 5.621rem + 29.43vw, 40.938rem) / 3) * -1);
	animation-name: r-hero-circle-pop, r-hero-circle-float;
	animation-duration: 0.6s, 5s;
	animation-delay: 0.3s, 0.9s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
	animation-iteration-count: 1, infinite;
}

.inner-wedo-content_inner::after {
	content: "";
	width: clamp(12.5rem, 5.621rem + 29.43vw, 40.938rem);
	aspect-ratio: 1/1;
	position: absolute;
	background-color: var(--color-recruit-accent);
	z-index: -1;
	border-radius: 50%;
	bottom: calc((clamp(12.5rem, 5.621rem + 29.43vw, 40.938rem) / 2) * -1);
	right: calc((clamp(12.5rem, 5.621rem + 29.43vw, 40.938rem) / 2) * -1);
	animation-name: r-hero-circle-pop, r-hero-circle-float;
	animation-duration: 0.6s, 6.4s;
	animation-delay: 0.45s, 1.05s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
	animation-iteration-count: 1, infinite;
}

@media(600px >=width) {
	.inner-wedo-content_inner::after {
		bottom: -132px
	}
}

.recruit-top_wedo.is-in-view::before,
.recruit-top_wedo.is-in-view .inner-wedo-content_inner::after {
	animation-play-state: running, running;
}

.recruit-top_wedo.is-in-view .inner-wedo-content_inner {
	rotate: 0deg;
	scale: 1;
	opacity: 1;
}

.recruit-top_wedo.is-in-view .inner-element-content {
	rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {

	.recruit-top_wedo::before,
	.inner-wedo-content_inner::after {
		animation: none;
		scale: 1;
		opacity: 1;
		translate: 0 0;
	}

	.inner-wedo-content_inner {
		transition: none;
		rotate: 0deg;
		scale: 1;
		opacity: 1;
	}

	.inner-element-content {
		transition: none;
		rotate: 0deg;
	}
}

/*
 * 「わたしたちの事業」内 .c-tech-inner_r（illust01/02 + 矢印アイコン）
 */
.c-tech-inner_r {
	display: grid;
	justify-content: center;
	gap: 2rem clamp(1.35rem, 0.56rem + 1.65vw, 2rem);
	position: relative;
	grid-template-columns: 1fr;
	justify-items: center;
	width: fit-content;
	margin-inline: auto;
	margin-block-start: 1.25rem;

	figure,
	img {
		display: block;
		/* background-color: var(--color-white); */
		position: relative;
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 448 / 433;
		max-width: 448px;
		object-fit: cover;
		object-position: top;
	}

	.arrowIcnw {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		@media(768px >=width) {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}
}

@media(768px <=width) {
	.c-tech-inner_r {
		grid-template-columns: repeat(2, auto);

		img {
			display: block;
			width: clamp(20.625rem, 7.514rem + 27.31vw, 28rem);
		}
	}
}

@keyframes r-top-works-underline-grow {
	0% {
		scale: 0 1;
	}

	100% {
		scale: 1 1;
	}
}

/* 仕事を知る */
.r-top-works {
	position: relative;
	margin-block-start: calc(clamp(3.5rem, -3.5rem + 14.58vw, 7.438rem) * -1);
}

@keyframes r-top-works-inner-reveal {
	0% {
		clip-path: circle(100px at 50% 50%);
	}

	100% {
		clip-path: circle(100% at 50% 50%);
	}
}

.r-top-works_inner {
	position: relative;
	overflow: hidden;
	padding-block-start: clamp(3.5rem, -3.5rem + 14.58vw, 6.25rem);
	padding-block-end: clamp(12px, 0.083rem + 1.39vw, 1.125rem);
	border-radius: clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) clamp(1.88rem, -5.889rem + 16.19vw, 6.25rem) 0 0;
	background-color: var(--color-white);
	z-index: 1;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		display: block;
		background-color: var(--color-recruit-background);
		z-index: -1;
		clip-path: circle(100px at 50% 50%);
	}

	&.is-in-view::before {
		animation: r-top-works-inner-reveal 4s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s;
	}

	@media (prefers-reduced-motion: reduce) {
		&::before {
			animation: none;
			clip-path: circle(100% at 50% 50%);
		}
	}
}

.r-top-works_inner_in {
	.inner-element-content {
		display: flex;
		gap: clamp(32px, -0.688rem + 6.25vw, 4rem) clamp(1rem, -0.358rem + 5.81vw, 4rem);
		margin-block: clamp(1.875rem, -3.125rem + 10.42vw, 4.688rem) clamp(49px, -1.493rem + 9.49vw, 5.625rem);

		a {
			text-decoration: none;
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			transition: .3s linear;
			position: relative;
			overflow: clip;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2px;
				background: linear-gradient(to right, var(--color-recruit-text), var(--color-recruit-text));
				scale: 1 1;
				transform-origin: left center;
			}

			&:hover {
				img {
					opacity: 0.7;
				}

				&::after {
					animation: r-top-works-underline-grow 0.5s ease-out;
				}
			}
		}

		img {
			grid-column: 1/3;
			grid-row: 1/2;
			padding-block-end: clamp(12px, 0.083rem + 1.39vw, 1.125rem);
			transition: .3s linear;
		}

		.r-top-span-a {
			margin-block-end: clamp(12px, 0.083rem + 1.39vw, 1.125rem);
		}

		span {
			grid-row: 2/3;
			font-size: clamp(1.25rem, 0.91rem + 1.45vw, 2rem);
		}

		span:nth-child(1) {
			grid-column: 1/2;
		}

		span.c-arrow-circle {
			color: var(--color-white);
			grid-column: 2/3;
			border-color: var(--color-accent);
			background-color: var(--color-accent);
		}
	}
}

@media(600px >=width) {
	.r-top-works_inner_in {
		.inner-element-content {
			flex-direction: column;
		}

		span.c-arrow-circle {
			--circle-size: 32px;
		}
	}
}

@media(768px >=width) {
	.hero_under-text_inner {

		h1,
		h2 {
			text-align: center;
		}

		h2 {
			margin-block-end: 1.5em;
		}
	}

	.hero_under-col_img_inner {
		margin-block-start: 2.25rem;
		gap: 1.5rem
	}

	.c-tech-inner_r {
		margin-block-start: 1.5em;
	}
}

/*
 * about us: 背景固定（background-attachment: fixed）で見せるセクション。iOS Safari
 * 等のタッチ環境では fixed が効かず、position:fixed の疑似要素方式も祖先の transform
 * で基準がずれる罠があるため、プログレッシブ・エンハンスメントにしている。
 * 既定は img をそのまま表示。マウス操作可能なデスクトップ（@media (hover:hover) and (pointer:
 * fine)）でだけ、figure に background-attachment:fixed の背景画像を敷き img を opacity:0
 * にする（img はレイアウト上残るので高さは aspect-ratio が決める）。
 */
.r-top-about_us {
	background-color: var(--color-white);
	position: relative;
	figure{
		position: relative;
		display: block;
	}
	img {
		position: relative;
		display: block;
		width: 100vw;
		height: auto;
		aspect-ratio: 1 / 0.388;
		object-fit: cover;
		object-position: center;
	}
}

@media (hover: hover) and (pointer: fine) {
	.r-top-about_us {
		figure{
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
		}
		/*
		 * URLはCSSファイル位置基準の相対パス（../ を4つ遡ると wp-content/）。絶対URLと違い、
		 * ドメイン移行で壊れない。
		 */
		figure:nth-of-type(1){
			background-image: url(../../../../uploads/2026/09/r_top_bg_01.webp);
		}
		figure:nth-of-type(2){
			background-image: url(../../../../uploads/2026/09/r_top_bg_02.webp);
		}
		img {
			opacity: 0;
		}
	}
}

.r-top-about_us-inner {
	position: relative;
	height: clamp(603px, 78.66rem + -54.63vw, 839px);
	z-index: 1;
	overflow-x: clip;
}
@media(768px < width){
	.r-top-about_us-inner {
		margin-block-start: calc(clamp(3.125rem, -10.322rem + 21.01vw, 8.063rem) * -1);
	}
}

.r-top-about_us-inner_in01 {
	position: relative;
	isolation: isolate;
	padding-block-start: clamp(3.125rem, -10.322rem + 21.01vw, 120px);
	padding-inline: 1rem;
	height: 100%;
	max-width: 1526px;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--color-accent);
		-webkit-mask-image: url("../images/svg/about-us-mask.svg");
		mask-image: url("../images/svg/about-us-mask.svg");
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
.r-top-about_us-inner_in01_in{
	padding-block-end:1rem;
	padding-inline-start: clamp(1rem, -20.25rem + 28.33vw, 13.75rem);
}
	.recruit-head.r-top-header[data-title] {
		color: var(--color-white);
		text-align: left;
		margin-block-end: 3.55em;
		&::before {
			color: var(--color-recruit-light-blue);
			margin-block-end: 1.25rem;
		}
	}

	p {
		color: var(--color-white);
		line-height: 2.1;
		font-weight: 600;
		max-width: 35em;
		font-feature-settings: normal;
	}
}

/*
 * .r-top-about_us-inner_in02 のビューポート交差登場演出。リンクを含む可読性重視のカードなので、
 * バウンスではなく素直なフェード+軽い拡大にしている（位置が揺れて見えないように）。
 * トリガーは scroll-observer.js。対象グループブロックの「追加CSSクラス」に animation-once
 * を付けること（無いと透明・縮小のまま固まる）。
 */
.r-top-about_us-inner_in02 {
	background-color: var(--color-white);
	width: clamp(20.938rem, -49.84rem + 147.45vw, 60.75rem);
	position: absolute;
	right: 0;
	
	padding-block: 44px;
	opacity: 0;
	scale: 0.94;
	transition: opacity 0.6s ease, scale 0.6s ease;

	h3 {
		font-size: clamp(1rem, 0.556rem + 0.93vw, 1.25rem);
		color: var(--color-recruit-light-blue);
		margin-block-end: 30px;
		font-family: var(--font-en);
		font-weight: 700;
	}

	> div {
		margin-inline: auto;
		width: 216px;
	}

	.r-top-about_us_menu {
		padding-inline-start: unset;
		list-style: none;
		display: grid;
		row-gap: 53px;
		margin-block: 0;

		a {
			text-decoration: none;
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			font-size: 20px;
			width: 216px;
			align-items: center;
			padding-block-end: 1rem;
			position: relative;
			overflow: clip;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2px;
				background: linear-gradient(to right, var(--color-recruit-text), var(--color-recruit-text));
				scale: 1 1;
				transform-origin: left center;
			}

			&:hover {
				.c-arrow-circle {
					color: var(--color-accent)
				}

				&::after {
					animation: r-top-works-underline-grow 0.5s ease-out;
				}
			}
		}

		li a .c-arrow-circle {
			--circle-size: 38px;
			color: var(--color-white);
			--hover-arrow-color: var(--color-accent);
			--hover-border-color: var(--color-accent);
		}
	}
}

.r-top-about_us-inner_in02.is-in-view {
	opacity: 1;
	scale: 1;
}

@media (prefers-reduced-motion: reduce) {
	.r-top-about_us-inner_in02 {
		transition: none;
	}
}
@media(768px >=width) {
	.r-top-about_us-inner_in02{bottom: -85px;}
}

@media(768px < width) {
	.r-top-about_us-inner_in02{bottom: -55px;}
}

@media(768px >=width) {
	.r-top-about_us {
		img {
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1.158;
		}
	}

	/*
	 * 768px以下では .r-top-about_us-inner_in01::before の斜めカット（about-us-mask.svg）を無効化する。
	 * パネルが全幅になる幅では、切れ込みが本文にかかり、白文字が白背景に重なって読めなくなるため。
	 */
	.r-top-about_us-inner_in01::before {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media(768px < width) {
	.r-top-about_us-inner_in02 {
		width: max(600px, 50vw);

		> div {
			width: 100%;
			padding-inline-start: clamp(3.25rem, 0.364rem + 6.01vw, 5.625rem);

			.r-top-about_us_menu {
				grid-template-columns: repeat(2, auto);
				max-width: 495px;
				justify-content: space-between;
			}
		}

	}

}