@charset "utf-8";
/* =========================================================================================
nalsok_bubble
=========================================================================================*/
/* 2か所ある「ALwayS OK」の文言スライドで使用 */
@property --fv_slide_text_h {
	syntax:"<length>";
	inherits:false;
	initial-value:0px;
}


/* ニャルソック */
.nalsok_bubble {
	position:fixed;
	inset:auto 1rem 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1rem 0.75rem;
	pointer-events:none;
	opacity:0;
	transition:opacity var(--trans);
	z-index:1;
}
.nalsok_bubble a {
	position:relative;
	display:block;
	padding:1rem;
	background-color:var(--color-main);
	border-radius:1.25rem;
	font-weight:bold;
	text-align:center;

	& .en { font-family:var(--kanit); font-weight:900; color:var(--color-sub); font-size:0.875rem;}
	& .jp {
		font-size:clamp(1.25rem, calc(1.092rem + 0.674vw), 1.438rem);/* viewport:375-820px 20-23px; */
		color:#fff;
	}
	&:after {
		--w:1.25rem;

		content:"";
		position:absolute;
		inset:100% auto auto 50%;
		translate:-50% 0;
		display:block;
		width:var(--w);
		height:calc(tan(60deg) * var(--w) / 2);
		clip-path:polygon(0 0, 100% 0, 50% 100%);
		background-color:inherit;
	}
}
.nalsok_bubble img { margin-left:0.75rem;}
.nalsok_bubble.active { opacity:1; pointer-events:auto;}

@media(any-hover:hover){
	.nalsok_bubble:has(a:hover) { opacity:0.8;}
}
@media(any-hover:none){
	.nalsok_bubble:has(a:active) { opacity:0.8;}
}
@media only screen and (max-width:468px) {
	.nalsok_bubble {
		inset-block:auto 1rem;
		flex-direction:row;
		align-items:end;

		& a { display:flex; align-items:center; gap:1rem; padding-block:0.5rem;}
		& a .en { line-height:1;}
		& a:after { inset:50% auto auto 100%; rotate:-90deg; translate:-25% -50%;}
		& img { width:44px; margin-left:auto;}
	}
}

/* =========================================================================================
MAIN VISUAL
=========================================================================================*/
.main-visual {
	--slide-text:slide_text 30s linear infinite;
	--mcw-margin:calc((100% - var(--main-contents-width)) / 2); /* コンテンツ幅の左右にある余白（片方分） */
	--mv-z-index:0;

	position:relative;
	z-index:var(--mv-z-index);

	& .fv_human {
		position:absolute;
		inset:clamp(2.813rem, calc(0.902rem + 3.727vw), 5.375rem) auto auto 0;/* viewport:820-1920px 45-86px */
		width:clamp(34.375rem, calc(-13.334rem + 93.091vw), 98.375rem);/* viewport:820-1920px 550-1574px */
		z-index:-1;

		& img { width:100%;}
	}

	/* fv_slide_text */
	& .fv_slide_text {
		--fv_slide_text_h:335px;
		--w:calc(var(--fv_slide_text_h) / 335 * 2427);

		position:absolute;
		inset-inline:0 auto;
		display:block;
		width:100%;
		height:335px;
		background:url(../images/top/fv_slide_text.svg) repeat-x top 0px left 0px / auto 100%;
		animation:slide_text 30s linear infinite;
		will-change:animation, background-position;
	}
	& .fv_slide_text1 {
		--fv_slide_text:clamp(10.375rem, calc(-0.061rem + 20.364vw), 24.375rem);/* viewport:820-1920px 166-390px */
		inset-block:0 auto;
		z-index:-10;
	}
	& .fv_slide_text2 {
		--fv_slide_text:clamp(10.375rem, calc(0.591rem + 19.091vw), 23.5rem);/* viewport:820-1920px 166-376px */
		inset-block:calc(100% + 3rem) auto;
		z-index:-2;
	}

	/* fv_triangle */
	& .fv_triangle {
		position:absolute;
		background-color:var(--color-main);
		width:915px;
		height:auto;
		aspect-ratio:915/680;
		clip-path:var(--logo-clip);
		scale:-1 1;
		inset:0 auto auto calc(var(--mcw-margin) + var(--main-contents-width) + 170px);
		z-index:calc(var(--mv-z-index) - 1);
	}

	/* fv_intro */
	& .fv_intro {
		display:flex;
		flex-direction:column;
		align-items:end;
		width:var(--large-contents-width);
		margin-inline:auto;
		padding-top:clamp(13.125rem, calc(-0.386rem + 26.364vw), 31.25rem);/* viewport:820-1920px 210-500px */

		& .mid-m {
			text-align:end;
			font-size:clamp(2.313rem, calc(1.063rem + 5.333vw), 5.063rem);/* viewport:375-1200px 37-81px */
			font-size:clamp(2.875rem, calc(1.244rem + 3.182vw), 5.063rem);/* viewport:820-1920px 46-81px */
			font-weight:900;
			line-height:1.4;
			font-feature-settings:"palt";

			& .jp small { font-size:0.7778em;}
			& .en { margin-top:1em; font-size:0.2593em; font-weight:var(--bold-font-weight); letter-spacing:0.2em;}
		}
	}
	& .fv_intro_news {
		display:grid;
		grid-template-columns:auto auto 1fr auto;
		align-items:center;
		padding-block:0.5rem;
		width:min(50rem, 100%);
		background-color:#fff;

		& > div:nth-of-type(1) {
			padding-inline:1em;
			font-size:1.5625em;
			font-weight:600;
			font-family:var(--kanit);
			color:var(--color-main);
		}
		& > div:nth-of-type(2) { padding-inline:0.8667em; font-size:0.9375em; font-weight:bold;}
		& > div:nth-of-type(3) {
			padding-inline:1em;
			font-weight:bold;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
		& > a {
			display:flex;
			align-items:center;
			gap:1em;
			border-left:solid 1px;
			padding-inline:2em 1.75em;

		}
		& > a:after {
			content:"";
			display:block;
			width:1em;
			height:1em;
			background-color:currentColor;
			mask:url(../images/common/arrow.svg) no-repeat center / contain;
			-webkit-mask:url(../images/common/arrow.svg) no-repeat center / contain;
		}
	}
}
@keyframes slide_text {
	0% { background-position:top 0px left 0px;}
	100% { background-position:top 0px left calc(var(--w) * -1);}
}


@media only screen and (max-width:820px) {
	.main-visual {

		& .fv_human { width:100%; top:0px;}
		& :is(.fv_slide_text1, .fv_slide_text2) { height:30.9333vw;}
		& .fv_slide_text2 { inset-block-start:calc(100% + 5rem);}
		& .fv_intro { padding-top:92.5vw;}
		& .fv_intro .mid-m { font-size:clamp(2.313rem, calc(1.837rem + 2.027vw), 2.875rem);/* viewport:375-819px 37-46px */}
		& .fv_intro .mid-m .jp { text-stroke:7px var(--color-sub); -webkit-text-stroke:7px var(--color-sub); paint-order:stroke;}
		& .fv_intro_news {
			grid-template:
				"label link" auto
				"day day" auto
				"title title" 1fr / auto auto;
			width:21rem;
			padding:0.75rem;
			font-size:0.9375rem;
			
			& div:nth-of-type(1) { grid-area:label; justify-self:start; padding:0;}
			& div:nth-of-type(2) { grid-area:day; padding:0;}
			& div:nth-of-type(3) { grid-area:title; padding:0;}
			& > a { grid-area:link; justify-self:end; padding:0; border:none; font-size:0.8666em;}
		}
	}
}
@media only screen and (max-width:468px) {
}

/* =========================================================================================
About
=========================================================================================*/
section.about {
	margin-top:clamp(5rem, calc(-3.666rem + 16.909vw), 16.625rem);/* viewport:820-1920px 80-266px */
	padding-block:0;
	z-index:-1;

	&:before {
		--clip-block-range:10px;

		content:"";
		position:absolute;
		inset:50% auto auto 50%;
		translate:-50% -50%;
		display:block;
		width:100%;
		min-height:2374px;
		aspect-ratio:1920/2374;
		background:url(../images/top/about_bg.svg) no-repeat center / cover;
		z-index:-1;
	}
	& .catch {
		word-break:keep-all;
		text-align:center;
		font-size:clamp(1.563rem, calc(0.246rem + 5.618vw), 3.125rem);/* viewport:375-820px 25-50px */
		font-weight:900;
	}
	& .text {
		margin-top:2em;
		text-align:center;
		font-size:clamp(0.938rem, calc(0.779rem + 0.674vw), 1.125rem);/* viewport:375-820px 15-18px */
		font-weight:bold;
		line-height:2.4444;
	}
	& .btn {
		width:fit-content;
		margin:clamp(2rem, calc(0.525rem + 6.292vw), 3.75rem);/* vierport:375-820px 32-60px */
		margin-inline:auto;
	}
}

@media only screen and (max-width:820px) {
	section.about {
		--pseudo-w-aspect:375;	/* 疑似要素のサイズ計算時に使用 */
		--pseudo-h-aspect:220;	/* 疑似要素のサイズ計算時に使用 */

		margin-top:36px;
		background-color:var(--color-sub);

		&:before {
			--add-h:100px;
			--add-h-reverse:clamp(-6.25rem, calc(-16.784rem + 44.944vw), 6.25rem); /* viewport:375-820px -100-100px */
			--add:calc(var(--add-h) - var(--add-h-reverse));
			--h:calc(100vw / var(--pseudo-w-aspect) * var(--pseudo-h-aspect));

			width:100%;
			background-color:inherit;
			height: calc(var(--h) + var(--add));
			min-height: unset;
			translate: unset;
			aspect-ratio: unset;
			inset:auto auto 93% -1px;
			clip-path:polygon(
				0% var(--h),
				100% 0,
				100% 100%,
				0 100%
			);
		}
		&:after {
			content:"";
			position:absolute;
			display:block;
			width:100%;
			aspect-ratio:var(--pseudo-w-aspect) / var(--pseudo-h-aspect);
			background-color:inherit;
			inset:100% auto auto 0;
			clip-path:var(--logo-clip)
		}
		& :is(.mid-l .jp, .btn) { margin-inline:0 auto;}
		& :is(.catch, .text) { text-align:start;}
	}
}


/* =========================================================================================
Service
=========================================================================================*/
section.service {
	--item-margin:calc((100% - var(--large-contents-width)) / 2);
	--item-w:calc(var(--item-margin) + var(--large-contents-width));

	counter-reset:service_no 0;
	padding-block-start:clamp(14.688rem, calc(2.31rem + 52.809vw), 29.375rem);/* viewport:375-820px 235-470px */
	padding-bottom:100px;

	& .mid-l {
		align-items:end;
		width:var(--item-w);
		margin-inline:0 auto;
	} 
	& .item {
		counter-increment:service_no;
		display:flex;
		align-items:end;
		gap:40px;
		width:var(--item-w);
	}
	& .item + .item { margin-top:clamp(3.75rem, calc(-1.306rem + 21.573vw), 9.75rem);/* viewport:375-820px 60-156px */}
	& .item .image img { max-height:700px; min-height:550px; object-fit:cover;}
	& :nth-child(1 of .item) .image img { object-position:top 50% left 35%;}
	& :nth-child(2 of .item) .image img { object-position:top 50% right 0%;}
	& :nth-child(3 of .item) .image img { object-position:top 50% left 50%;}
	& :nth-child(4 of .item) .image img { object-position:top 50% right 25%;}
	& :nth-child(5 of .item) .image img { object-position:top 50% right 0%;}
	& .item .text { width:280px; flex-shrink:0;}
	& .item .text:before {
		content:counter(service_no, decimal-leading-zero);
		display:block;
		font-family:var(--kanit);
		font-style:italic;
		font-size:clamp(3.125rem, calc(2.072rem + 4.494vw), 4.375rem);/* viewport:375-820px 50-70px */
	}
	& .item .text p {
		font-size:clamp(0.938rem, calc(0.832rem + 0.449vw), 1.063rem);/* viewport:375-820px 15-17px */
		line-height:2;
	}
	& .item .text .btn { margin-top:1.5em; margin-inline:0 auto; width:fit-content;}
	
	/* 偶数 */
	& :nth-child(even of .item) { margin-inline:0 auto;}
	/* 奇数 */
	& :nth-child(odd of .item) { flex-direction:row-reverse; margin-inline:auto 0;}
}
@media only screen and (max-width:820px) {
	section.service {
		padding-bottom:10rem;

		& .item { gap:0;}
		& .item,
		& :nth-child(odd of .item) { flex-direction:column; align-items:start;}
		& .item { width:100%;}
		& .item .image { width:calc(100% - var(--item-margin));}
		& .item .image img { width:100%; max-height:unset; min-height:unset;}
		& .item .text { width:calc(100% - var(--item-margin) - var(--item-margin)); margin-inline:auto;}

		/* 偶数 */
		& :nth-child(even of .item) .image { margin-inline:o auto;}
		/* 奇数 */
		& :nth-child(odd of .item) .image { margin-inline:auto 0;}
	}
}
@media only screen and (max-width:468px) {
	section.service .box {
		display:flex;
		flex-direction:column;
		gap:40px;
	}
}



/* =========================================================================================
Recruit
=========================================================================================*/
.bg_wrap {	
	position:relative;
	z-index:0;

	& > picture {
		--w:275vw;

		position:absolute;
		inset:-50vw auto auto 0%;
		width:var(--w);
		max-width:unset;
		aspect-ratio:5346/2509;
		animation:120s linear bg_slide infinite;
		pointer-events:none;
		z-index:-2;
	}
	& > picture img { width:100%;}
	&:after {
		content:"";
		position:absolute;
		inset:auto auto -1px 0;
		width:auto;
		height:100%;
		aspect-ratio:2300/1711;
		background-color:var(--color-main);
		clip-path:polygon(0 0, 100% 100%, 0 100%);
		z-index:-1;
	}
}
@keyframes bg_slide {
	0% { inset-inline:0vw auto; translate:0vw 0%;}
	100% { inset-inline:calc(var(--w) * -1) auto; translate:100vw 0%;}
}
@media only screen and (max-width:820px) {
	.bg_wrap { 
		&:after { height:97.5%;}
		& > picture { --w:310vw; inset-block:-62.5vw auto;}
	}
}

section.recruit {
	color:#fff;
	padding-top:clamp(22.188rem, calc(14.551rem + 32.584vw), 31.25rem);/* viewport:375-820px 355-500px */
	padding-top:clamp(12rem, calc(-3.906rem + 67.865vw), 30.875rem);/* viewport:375-820px 192-494px */
	padding-bottom:clamp(3.25rem, calc(-3.492rem + 28.764vw), 11.25rem);/* viewport:375-820px 52-180px */

	& .inner { width:var(--large-contents-width); max-width:unset;}
	& .mid-l { align-items:start;}
	& .mid-l .jp:before { background-color:var(--color-sub);}
	& dl { font-weight:bold;}
	& dl dt { font-size:clamp(1.25rem, calc(0.197rem + 4.494vw), 2.5rem);/* viewport:375-820px 20-40px */}
	& dl dd {
		margin-block:2em;
		font-size:clamp(0.938rem, calc(0.779rem + 0.674vw), 1.125rem);/* viewport:375-820px 15-18px */
		line-height:2;
	}
	& .btn_wrap {
		display:flex;
		align-items:center;
		justify-content:start;
		flex-wrap:wrap;
		gap:0.9375rem 1.625rem;
		margin-bottom:1.6667em;
	}
	& .btn.square { width:fit-content; margin-inline:0 auto;}
}



/* =========================================================================================
News
=========================================================================================*/
section.news {
	--inset-space:1rem;	/* 疑似要素の余白 */

	position:relative;
	width:var(--large-contents-width);
	margin-inline:auto;
	padding-block:90px;
	background-color:#fff;

	&:before, &:after {
		content:"";
		position:absolute;
		display:block;
		width:clamp(3.5rem, calc(2.236rem + 5.393vw), 5rem);/* viewport:375-820px 56-80px */
		aspect-ratio:var(--logo-aspect);
	}
	&:before {
		inset:var(--inset-space) auto auto var(--inset-space);
		background-color:var(--color-main);
		clip-path:var(--logo-clip);
	}
	&:after {
		inset:auto var(--inset-space) var(--inset-space) auto;
		background-color:var(--color-sub);
		clip-path:var(--logo-clip-reverse);
	}

	& .nalsok {
		position:absolute;
		inset:auto 2.75rem calc(100% - 0.75rem) auto;
		max-width:50%;
	}
	& .inner { display:flex; align-items:center; justify-content:space-evenly; gap:0 2rem;}
	& .inner .mid_wrap { flex-shrink:0;}
	& .inner > .btn.square { display:none;}

	/* ..mid-l */
	& .mid-l {
		align-items:start;
		margin-bottom:1.75em;
		font-size:1.1875em;
		font-size:clamp(0.938rem, calc(0.727rem + 0.899vw), 1.188rem);/* viewport:375-820px  15-19px */

		& .jp:before { content:none;}
		& .en { font-size:clamp(3.125rem, calc(2.072rem + 4.494vw), 4.375rem);/* viewport:375-820px 50-70px */}
	}
	/* .post-list */
	& .post-list { max-width:820px; flex-shrink:1;}
}

@media only screen and (max-width:820px) {
	section.news {
		padding-block:55px 80px;

		& .nalsok { inset-inline:auto 0;}
		& .inner { flex-direction:column; align-items:center;}
		& .inner > .btn.square { display:inherit;}
		& .mid-l .jp { margin-inline:auto;}
		& .mid_wrap .btn.square { display:none;}
		& .post-list.column ul li:last-child { border-bottom:solid 1px var(--color-gray);}
	}
}