@charset "utf-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,main,figure{margin:0;padding:0}table{font-size:100%;font-family:inherit}fieldset,img{border:0}img,svg,video{vertical-align:middle}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0}select,input,textarea{font-size:100%}header,footer,nav,main,section,article,figure,aside,picture{display:block}.clearfix:after,.row:after{content:"";display:table;clear:both}.c-fl{float:left}.c-fr{float:right}@media screen and (min-width: 744px),print{.c-pc_fl{float:left}.c-pc_fr{float:right}}@media screen and (max-width: 743px){.c-sp_fl{float:left}.c-sp_fr{float:right}}.c-tal{text-align:left!important}.c-tac{text-align:center!important}.c-tar{text-align:right!important}@media screen and (min-width: 744px),print{.c-pc_tal{text-align:left!important}.c-pc_tac{text-align:center!important}.c-pc_tar{text-align:right!important}}@media screen and (max-width: 743px){.c-sp_tal{text-align:left!important}.c-sp_tac{text-align:center!important}.c-sp_tar{text-align:right!important}}


/* 変数
====================================================================== */
:root {
	--color-base: #000;
	--color-white: #fff;
	--color-blue: #4ABEF5;
	--color-blue-light: #7ccef4;
	--color-red: #FF6060;
	--color-red-light: #ff8888;
	--color-green: #5CB531;
	--color-green-light: #5cb531;
	--color-orange: #FF9D00;
	--bg-base: #f5f5f5;
	--border: #d9d9d9;
	--border2: #d0d0d0;
	--base-width: 120rem;
	--base-width-s: 90rem;
	--pc-min-window: 1400;
	--pc-base-padding: 4rem;
	--sp-base-padding: 2rem;
	--font-family-jp: "Zen Kaku Gothic Antique", sans-serif;
	--font-family-noto: "Noto Sans JP", sans-serif;
	--font-family-en: "Outfit", sans-serif;
	--font-weight-reg: 400;
	--font-weight-medium: 500;
	--font-weight-semi: 600;
	--font-weight-bold: 700;
	--font-weight: var(--font-weight-bold);
	--ls: .02em;
	--white-filter: brightness(0) invert(1);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--header-height: 9rem;
	--target-margin: 3rem;
	@media screen and (max-width: 743px) {
		--header-height: 6rem;
		--target-margin: 2rem;
	}
}


/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html {
	position: relative;
	font-size: 62.5%;
	scroll-behavior: smooth;
	@media screen and (min-width: 744px), print {
		font-size: min(calc(10px - ((var(--pc-min-window) * 1px) - 100vw) * (10 / var(--pc-min-window))), 10px);
	}
	@media screen and (max-width: 743px) {
		font-size: calc((10 / 390) * 100vw);
	}
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
body {
	background-color: var(--bg-base);
	font-size: 1.6rem;
	line-height: 1.8;
	color: var(--color-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: var(--font-family-jp);
	font-weight: var(--font-weight);
	font-optical-sizing: auto;
	/* font-feature-settings: "palt"; */
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	@media screen and (max-width: 743px) {
		font-size: 1.4rem;
	}
}
* {
	letter-spacing: var(--ls);
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(address,caption,cite,code,dfn,em,th,var) {
	font-style: normal;
	font-weight: var(--font-weight);
}
:where(h1,h2,h3,h4,h5,h6) {
	font-weight: var(--font-weight-bold);
}
:where(img) {
	max-width: 100%;
	width: 100%;
	height: auto;
	/* image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges; */
}
:where(iframe) {
	max-width: 100%;
	vertical-align: middle;
}
:where(sup) {
	vertical-align: super;
	font-size: 60%;
}
:where(table) {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: inherit;
}
:where(a[href], a[data-modal]) {
	--a-color: var(--color-base);
	color: var(--a-color);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--a-color);
	text-underline-offset: .3em;
	outline: none;
	cursor: pointer;
}
:where(a[href].u-a-reverse,.u-a-reverse a[href]) {
	text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
}
:where(a[href^="tel:"]) {
	@media screen and (min-width: 744px), print {
		text-decoration: none;
	}
}
@media (hover) {
	:where(a,button,.u-basic_trs,.-hl),
	:where(a,button,.u-basic_trs,.-hl)::before,
	:where(a,button,.u-basic_trs,.-hl)::after {
		transition: color var(--transition), background var(--transition), border var(--transition), opacity var(--transition), text-decoration-color .2s ease-in-out;
	}
	:where(a svg, button svg) {
		transition: fill var(--transition);
	}
	:where(a[href]:hover, a[data-modal]:hover) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
	:where(a[href].u-a-reverse, a[data-modal].u-a-reverse, .u-a-reverse a[href], .u-a-reverse a[data-modal]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href].u-a-reverse.-hvw),
	:where(.u-a-reverse.-hvw a[href]) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href].u-a-reverse.-hvw):hover,
	:where(.u-a-reverse.-hvw a[href]):hover {
		text-decoration-color: #fff;
	}
	:where(a[href].u-a-reverse.-hvbk),
	:where(.u-a-reverse.-hvbk a[href]) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
	:where(a[href].u-a-reverse.-hvbk):hover,
	:where(.u-a-reverse.-hvbk a[href]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] .u-a-reverse) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: 1px;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .3em;
	}
	:where(a[href] .u-a-reverse) {
		transition: text-decoration-color .2s ease-in-out;
	}
	:where(a[href]:hover .u-a-reverse) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] .-hl) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: 1px;
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
		text-underline-offset: .3em;
	}
	:where(a[href]:hover .-hl) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] .-hl.-hvw) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href]:hover .-hl.-hvw) {
		text-decoration-color: #fff;
	}
}

:where(label) {
	cursor: pointer;
}
:where(input, select, textarea, button) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	vertical-align: middle;
	font-family: inherit;
	font-weight: inherit;
	font-feature-settings: inherit;
	outline: none;
	font-size: 100%;
}
::placeholder {
	color: #ccc;
}
:where(button) {
	cursor: pointer;
}

.hidden {
	display: none;
}
.slick-slider * {
	outline: none;
}

#top {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

/* pc / sp
====================================================================== */
@media screen and (min-width: 744px), print {
	.u-only-sp {
		display: none !important;
	}
	.u-pc-break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
	.u-pc-hidden {
		position: relative;
		overflow: hidden;
		display: block;
		height: 0;
	}
}
@media screen and (max-width: 743px) {
	.u-only-pc {
		display: none !important;
	}
	.u-sp-break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

/* color
====================================================================== */
.u-c_base {
	color: var(--color-base) !important;
}

/* font
====================================================================== */
.u-ff_en {
	font-family: var(--font-family-en);
	font-weight: var(--font-weight-semi);
	font-style: normal;
	--ls: 0.1em;
}
.u-ff_noto {
	font-family: var(--font-family-noto);
	font-weight: var(--font-weight-reg);
	font-style: normal;
}
.u-fwn {
	font-weight: var(--font-weight);
}
.u-fwr {
	font-weight: var(--font-weight-reg);
}
.u-fwm {
	font-weight: var(--font-weight-medium);
}
.u-fwb {
	font-weight: var(--font-weight-bold);
}
.u-fzs {
	font-size: 1.4rem;
	line-height: calc(26 / 14);
	@media screen and (max-width: 743px) {
		font-size: 1.2rem;
		line-height: calc(25 / 12);
	}
}
.u-wsnw {
	white-space: nowrap;
}
@media screen and (min-width: 744px), print {
	.u-pc_wsnw {
		white-space: nowrap;
	}
}
@media screen and (max-width: 743px) {
	.u-sp_wsnw {
		white-space: nowrap;
	}
}

/* display
====================================================================== */
.u-db {
	display: block;
}
.u-dib {
	display: inline-block;
}
.u-dfcc {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width: 744px), print {
	.u-pc_dib {
		display: inline-block;
	}
	.u-pc_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 743px) {
	.u-sp_dib {
		display: inline-block;
	}
	.u-sp_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}

/* object-fit
====================================================================== */
img.u-of {
	width: 100%;
	height: 100%;
	object-fit: cover;
	&.-abs {
		position: absolute;
		top: 0;
		left: 0;
	}
	&.-bg {
		pointer-events: none;
		user-select: none;
		z-index: -1;
	}
	&.-top {
		object-position: 50% 0;
	}
	&.-bottom {
		object-position: 50% 100%;
	}
	&.-contain {
		object-fit: contain;
	}
	@media screen and (min-width: 744px), print {
		&.-pc_none {
			object-fit: none;
		}
		&.-pc_top {
			object-position: 50% 0;
		}
		&.-pc_bottom {
			object-position: 50% 100%;
		}
	}
	@media screen and (max-width: 743px) {
		&.-sp_top {
			object-position: 50% 0;
		}
		&.-sp_bottom {
			object-position: 50% 100%;
		}
	}
}
@media screen and (min-width: 744px), print {
	img.u-pc_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
		&.-abs {
			position: absolute;
			top: 0;
			left: 0;
		}
		&.-bg {
			pointer-events: none;
			user-select: none;
			z-index: -1;
		}
		&.-top {
			object-position: 50% 0;
		}
		&.-none {
			object-fit: none;
		}
	}
}
@media screen and (max-width: 743px) {
	img.u-sp_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
		&.-abs {
			position: absolute;
			top: 0;
			left: 0;
		}
		&.-bg {
			pointer-events: none;
			user-select: none;
			z-index: -1;
		}
		&.-top {
			object-position: 50% 0;
		}
	}
}

/* hover
====================================================================== */
@media (hover) {
	a[href] .u-hv-op {
		transition: opacity var(--transition);
	}
	a:is([href], [data-modal]).u-hv-op:hover,
	a[href]:hover .u-hv-op,
	button.u-hv-op:hover,
	.u-hv-op a[href]:hover {
		opacity: 0.7;
	}
	a[href].u-hv-op.-a50:hover,
	a[href]:hover .u-hv-op.-a50,
	.u-hv-op.-a50 a[href]:hover {
		opacity: 0.5;
	}
	a[href].u-hv-op.-a20:hover,
	a[href]:hover .u-hv-op.-a20,
	.u-hv-op.-a20 a[href]:hover {
		opacity: 0.8;
	}
	a[href].u-hv-op.-a10:hover,
	a[href]:hover .u-hv-op.-a10,
	.u-hv-op.-a10 a[href]:hover {
		opacity: 0.9;
	}
}

.u-hv-zoom {
	position: relative;
	display: block;
	overflow: hidden;
	& > * {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: cover;
	}
	&.-static > * {
		position: relative;
	}
}
@media (hover) {
	a[href].u-hv-zoom > *,
	a[href] .u-hv-zoom > * {
		transition: transform 0.5s, opacity .3s;
	}
	a[href]:hover .u-hv-zoom.-s > * {
		transform: scale(1.03);
	}
	a[href]:hover .u-hv-zoom.-l > * {
		transform: scale(1.1);
	}
	a[href]:hover.u-hv-zoom > *,
	a[href]:hover .u-hv-zoom > * {
		transform: scale(1.05);
	}
}


/* _target
====================================================================== */
.u-target {
	display: block;
	scroll-margin-top: calc(var(--header-height) + var(--target-margin));
}
:where([id]:not(style):not(script)) {
	scroll-margin-top: calc(var(--header-height) + var(--target-margin));
}
:where([id].u-scroll-margin-top0, #top) {
	scroll-margin-top: 0 !important;
}
:where([id].u-scroll-margin-top-fit) {
	scroll-margin-top: calc(var(--header-height));
}

/* w
====================================================================== */
.u-w {
	position: relative;
	@media screen and (min-width: 744px), print {
		width: var(--base-width);
		margin-inline: auto;
		&.-s {
			width: var(--base-width-s);
		}
	}
}
.u-pw {
	@media screen and (min-width: 744px), print {
		padding-inline: calc((100% - var(--base-width)) / 2);
	}
}

/* spパディング
====================================================================== */
@media screen and (max-width: 743px) {
	.u-sp-pd {
		padding-inline: var(--sp-base-padding) !important;
	}
	.u-sp-mg {
		margin-inline: var(--sp-base-padding) !important;
	}
	.u-sp-full {
		margin-inline: calc(var(--sp-base-padding) * -1) !important;
	}
	.u-sp-full_l {
		margin-left: calc(var(--sp-base-padding) * -1) !important;
	}
	.u-sp-full_r {
		margin-right: calc(var(--sp-base-padding) * -1) !important;
	}
	.u-sp-pd-l {
		padding-inline: 3rem !important;
	}
}

/* c-site-logo
====================================================================== */
.c-site-logo {
	display: flex;
	a {
		display: flex;
		align-items: center;
		gap: 4rem;
		height: var(--header-height);
		padding-left: var(--pc-base-padding);
		color: var(--color-base);
		text-decoration: none;
		.logo {
			width: 12rem;
			.recruit {
				position: relative;
				display: block;
				margin-top: 1rem;
				text-align: center;
				font-size: 1.4rem;
				line-height: 1;
				&::before,
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					width: 2rem;
					border-top: 1px solid;
				}
				&::before {
					left: 0;
				}
				&::after {
					right: 0;
				}
			}
		}
		.site_name {
			font-size: 1.2rem;
			font-weight: var(--font-weight-reg);
			line-height: calc(22 / 12);
		}
	}
	@media screen and (min-width: 744px), print {
		&.-large {
			a {
				.logo {
					width: 14.4rem;
					.recruit {
						font-size: 1.68rem;
						&::before,
						&::after {
							width: 2.4rem;
						}
					}
				}
				.site_name {
					font-size: 1.4rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		a {
			gap: 2rem;
			padding-left: 2rem;
			.logo {
				width: 9rem;
				.recruit {
					margin-top: 0.7rem;
					font-size: 1.05rem;
					&::before,
					&::after {
						width: 1.5rem;
						border-top: 1px solid;
					}
				}
			}
			.site_name {
				font-size: 1rem;
			}
		}
	}
}

/* l-header
====================================================================== */
.l-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: var(--header-height);
	background-color: #fff;
	z-index: 900;
	.menu-btn {
		position: relative;
		margin-left: auto;
		z-index: 990;
		button {
			position: relative;
			display: block;
			width: var(--header-height);
			height: var(--header-height);
			padding-top: 4.2rem;
			padding-left: var(--ls);
			font-size: 1.2rem;
			line-height: 1;
			text-align: center;
		}
		&::after,
		button::before,
		button::after {
			content: "";
			position: absolute;
			width: 3.6rem;
			left: calc(50% - 1.8rem);
			top: calc(50% - 1.1rem);
			height: 3px;
			background-color: var(--color-base);
			border-radius: 3px;
			pointer-events: none;
			transition: transform var(--transition), opacity var(--transition), clip-path var(--transition);
			z-index: 2;
		}
		button::before {
			transform: translateY(-1.2rem);
		}
		button::after {
			clip-path: inset(0 1rem 0 0);
			transform: translateY(1.2rem);
		}
	}
	&.is-open .menu-btn {
		&::after {
			opacity: 0;
		}
		button::before {
			transform: translateY(0rem) rotate(-45deg);
		}
		button::after {
			clip-path: inset(-1px);
			transform: translateY(0rem) rotate(45deg);
		}
	}
	.nav {
		position: fixed;
		inset: 0;
		padding: 3rem 2rem 4rem;
		background-color: var(--bg-base);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 920;
		/* .gnav {
			li:not(:last-child) {
				border-bottom: 1px solid var(--border);
			}
			a {
				display: block;
				padding-block: 1rem;
				text-decoration: none;
				font-size: 1.5rem;
				@media (hover) {
					&:hover {
						opacity: 0.5;
					}
				}
			}
		} */
		.bnr-area {
			display: flex;
			flex-direction: column;
			gap: 3rem;
			width: 35rem;
			.bnr a {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 12rem;
				border-radius: 1rem;
				border: .3rem solid #fff;
				font-size: 1.4rem;
				line-height: 1.5;
				box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
				text-decoration: none;
				text-align: center;
				.title {
					display: block;
					font-size: 2.4rem;
					line-height: 1.5;
				}
				.arrow {
					position: absolute;
					right: 1rem;
					bottom: 1rem;
					width: 1.5rem;
					height: 1.5rem;
					background-color: #000;
					border-radius: 100%;
					&::before {
						content: "";
						position: absolute;
						inset: 0 0 0 .2rem;
						width: .5rem;
						height: .7rem;
						margin: auto;
						background-color: #fff;
						clip-path: polygon(0 0, 100% 50%, 0 100%);
					}
				}
				.en {
					display: block;
					margin-top: 0.2rem;
					font-size: 1.6rem;
					line-height: 1.2;
					color: #fff;
					opacity: 0.6;
				}
				.ico-clip {
					position: absolute;
					top: -1.2rem;
					right: 1rem;
					width: 17.3rem;
					height: 6.5rem;
					font-size: 1.6rem;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 1.8rem;
					background: url(../img/top/ico-clip.svg) no-repeat 50%;
					background-size: 100%;
					--ls: .1em;
					transform-origin: 100% 0;
					transform: scale(.6) rotate(6.45deg);
				}
				.flag {
					position: absolute;
					left: 1rem;
					top: -3.4rem;
					width: 19.2rem;
					height: 7.4rem;
					text-align: center;
					padding-left: 1.8rem;
					padding-top: 2rem;
					background: url(../img/top/workplace-flg.svg) no-repeat 50%;
					background-size: 100%;
					font-size: 1.8rem;
					line-height: 1.4;
					transform-origin: 0;
					transform: scale(.6);
					&.-wide {
						width: 26.2rem;
						background-image: url(../img/top/workplace-flg-wide.svg);
					}
				}
				&.-diagnosis {
					background-color: #FF9D00;
					.title {
						color: #fff;
						font-size: 2.5rem;
					}
					.ico-check {
						position: absolute;
						top: -1.3rem;
						left: .7rem;
						width: 5rem;
					}
					&::before {
						content: "";
						position: absolute;
						top: 3.6rem;
						left: 1.6rem;
						width: 31rem;
						height: 5rem;
						background: url(../img/top/btn-diagnosis-ico.png) no-repeat 50%;
						background-size: 100%;
						pointer-events: none;
					}
				}
				&.-book {
					background: #F6A7A1;
					flex-direction: row;
					align-items: start;
					padding-top: 1rem;
					.column .title {
						width: 5.5em;
						font-size: 2.2rem;
						padding-top: 1.6rem;
					}
					.column + .column {
						position: relative;
						padding-left: 6rem;
						&::before {
							content: "&";
							position: absolute;
							left: 0;
							top: 0;
							width: 6rem;
							text-align: center;
							line-height: 1;
							font-size: 8rem;
							color: #fff;
							font-family: var(--font-family-en);
							font-weight: var(--font-weight-semi);
							font-style: normal;
						}
						& > * {
							position: relative;
							right: 1rem;
						}
					}
					.en {
						margin-top: 0.2rem;
					}
					.note {
						position: absolute;
						right: 0;
						left: 0;
						bottom: .5rem;
						text-align: center;
						font-size: 2rem;
					}
				}
				&.-challenge {
					background: #6FDDEB;
					.ico {
						position: absolute;
						width: 3rem;
						right: 2.6rem;
						top: -1.4rem;
					}
					.lead {
						margin-bottom: 0.2rem;
						font-size: 1.2rem;
						line-height: 1.6;
					}
				}
				@media (hover) {
					&:hover {
						opacity: 0.5;
					}
				}
			}
			.corporate-site {
				margin-top: -1rem;
				a {
					position: relative;
					display: inline-block;
					padding-left: 2.2rem;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						width: 1.6rem;
						height: 1.6rem;
						margin-block: auto;
						background: url(../img/ico-blank.svg) no-repeat 50%;
						background-size: 100%;
					}
				}
			}
		}
		.entry {
			display: flex;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				height: 9rem;
				border: .3rem solid #FFF;
				border-radius: 1rem;
				color: #000;
				font-size: 1.8rem;
				line-height: 1.6;
				box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
				box-sizing: content-box;
				.arrow {
					position: absolute;
					right: 0.7rem;
					bottom: 0.7rem;
					width: 1.5rem;
					height: 1.5rem;
					margin-block: auto;
					border-radius: 100%;
					background-color: var(--color-base);
					transform-origin: 100% 100%;
					z-index: 2;
					&::before {
						content: "";
						position: absolute;
						inset: 0 0 0 .2rem;
						width: .5rem;
						height: .6rem;
						margin: auto;
						background-color: #fff;
						clip-path: polygon(0 0, 100% 50%, 0 100%);
					}
				}
				&.-blue {
					background-color: #01A9EA;
					color: #000;
				}
				&.-green {
					background-color: #0ED3C9;
					color: #000;
				}
				@media (hover) {
					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
	}

	.nav {
		opacity: 0;
		pointer-events: none;
		transform: scale(1.1);
		transition: transform var(--transition), opacity var(--transition);
	}
	&.is-open {
		.nav {
			transform: scale(1);
			opacity: 1;
			pointer-events: auto;
		}
	}
	@media screen and (min-width: 744px), print {
		padding-right: 0.5rem;
		.pc-hnav {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 4rem;
			.sns {
				display: flex;
				gap: 3rem;
			}
			.entry-btn a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 16rem;
				height: 5rem;
				background-color: #01A9EA;
				border-radius: 2.5rem;
				font-size: 2rem;
				line-height: 1.8;
				color: #fff;
				text-decoration: none;
				@media (hover) {
					&:hover {
						background-color: var(--color-base);
					}
				}
			}
		}
		.menu-btn {
			margin-left: 2.5rem;
		}
		.nav {
			display: flex;
			justify-content: center;
		}
		.nav-wrap {
			flex-shrink: 0;
			width: 110rem;
			margin: auto;
			display: flex;
			flex-wrap: wrap;
		}
		.home {
			width: 100%;
			margin-bottom: 1rem;
		}
		.gnav {
			width: 68%;
			display: grid;
			grid-template-columns: 3fr 4fr 4fr;
			align-items: start;
			li:first-child {
				order: 1;
			}
			li {
				order: 4;
			}
			.interview {
				grid-row: span 10;
				order: 2;
			}
			.workplace {
				grid-row: span 10;
				order: 3;
			}
			ul {
				margin-left: 1em;
				a {
					padding-block: .5em;
					font-size: 1.6rem;
				}
			}
		}
		.home,
		.gnav {
			a {
				position: relative;
				display: block;
				padding-block: .8em;
				font-size: 1.8rem;
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					display: inline-block;
					width: 0.7rem;
					height: 0.7rem;
					margin-left: 1rem;
					border-right: 1px solid #444;
					border-top: 1px solid #444;
					transform-origin: 100% 0;
					transform: rotate(45deg);
				}
			}
		}
		.bnr-area {
			flex-shrink: 0;
			margin-left: auto;
		}
		.entry {
			width: 100%;
			margin-top: 6rem;
			justify-content: center;
			gap: 2rem;
			li {
				width: 100%;
			}
		}
		/*
		.nav-cover {
			position: fixed;
			inset: var(--header-height) 0 0;
			background-color: #000;
			opacity: 0;
			pointer-events: none;
			transition: opacity var(--transition);
			z-index: 890;
		}
		*/
	}
	@media print {
		position: relative;
	}
	@media screen and (max-width: 743px) {
		.menu-btn {
			button {
				padding-top: 3.2rem;
				font-size: 1rem;
			}
			&::after,
			button::before,
			button::after {
				width: 2.8rem;
				left: calc(50% - 1.4rem);
				top: calc(50% - .9rem);
				height: 2px;
			}
			button::before {
				transform: translateY(-.9rem);
			}
			button::after {
				clip-path: inset(0 .8rem 0 0);
				transform: translateY(.9rem);
			}
		}
		.nav {
			padding-top: 5rem;
			.home,
			.gnav {
				li {
					position: relative;
					border-top: 1px solid var(--border);
					&:last-child {
						border-bottom: 1px solid var(--border);
					}
					.sp-arrow {
						position: absolute;
						top: 0;
						right: 0;
						height: 4.8rem;
						aspect-ratio: 1;
						z-index: 2;
						.arrow {
							position: absolute;
							inset: 0;
							width: 2rem;
							height: 2rem;
							margin: auto;
							background-color: #000;
							border-radius: 100%;
							&::before,
							&::after {
								content: "";
								position: absolute;
								top: calc(50% - 1px);
								right: 0;
								left: 0;
								width: 0.9rem;
								margin-inline: auto;
								border-top: 1px solid #fff;
							}
							&::after {
								transform: rotate(90deg);
								transition: transform var(--transition);
							}
						}
						&.-open {
							.arrow::after {
								transform: rotate(0deg);
							}
						}
					}
				}
				a {
					position: relative;
					display: flex;
					align-items: center;
					height: 4.8rem;
					padding-inline: .6rem;
					text-decoration: none;
					font-size: 1.6rem;
					&::after {
						content: "";
						position: relative;
						top: calc(0.7rem / 2);
						display: inline-block;
						width: 0.7rem;
						height: 0.7rem;
						margin-left: 1rem;
						border-right: 1px solid #444;
						border-top: 1px solid #444;
						transform-origin: 100% 0;
						transform: rotate(45deg);
					}
				}
				.sp-acc {
					overflow: hidden;
					height: 0;
					transition: height var(--transition);
					ul {
						padding-bottom: 1rem;
						li {
							border: 0;
							a {
								height: auto;
								padding: 0.8rem 2rem;
								font-size: 1.4rem;
							}
						}
					}
				}
			}
		}
		.bnr-area {
			margin-top: 3rem;
			.corporate-site {
				a {
					font-size: 1.6rem;
				}
			}
		}
		.entry {
			margin-top: 3rem;
			flex-direction: column;
			gap: 1rem;
			a {
				height: 8rem;
			}
		}
	}
}


/* footer
====================================================================== */
.l-footer {
	position: relative;
	padding: 8rem var(--pc-base-padding) 2rem;
	background-color: #fff;
	z-index: 3;
	.inner {
		position: relative;
		max-width: 140rem;
		margin-inline: auto;
	}
	.c-site-logo a {
		padding-left: 0;
	}
	nav {
		a {
			display: block;
			font-size: 1.5rem;
		}
		ul {
			columns: 2;
			column-gap: 5rem;
			li {
				margin-bottom: 2.4rem;
			}
		}
		.corporate-site {
			margin-top: 2rem;
			a {
				position: relative;
				display: inline-block;
				padding-left: 2.2rem;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 1.6rem;
					height: 1.6rem;
					margin-block: auto;
					background: url(../img/ico-blank.svg) no-repeat 50%;
					background-size: 100%;
				}
			}
		}
	}
	.mynavi {
		img {
			width: 15.2rem;
		}
	}
	small {
		margin-top: 8rem;
		font-size: 1.2rem;
		font-weight: var(--font-weight-medium);
		line-height: 1.5;
	}
	@media screen and (min-width: 744px), print {
		.inner {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.mynavi {
			position: absolute;
			left: 0;
			top: 12.5rem;
			a {
				width: 26rem;
				height: 6rem;
				padding-right: 2rem;
			}
		}
		small {
			width: 100%;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 7rem 3rem 2rem;
		.c-site-logo {
			justify-content: center;
		}
		nav {
			margin-top: 3rem;
			a {
				font-size: 1.2rem;
			}
			ul {
				column-gap: 0;
				width: 90%;
				white-space: nowrap;
				li {
					margin-bottom: 0;
				}
				a {
					min-width: fit-content;
					padding-block: 1rem;
				}
			}
			.corporate-site {
				margin-top: 3rem;
				text-align: center;
				a {
					padding-left: 2rem;
					&::before {
						width: 1.4rem;
						height: 1.4rem;
					}
				}
			}
		}
		.mynavi {
			margin-top: 4rem;
			a {
				padding-right: 2rem;
			}
		}
		small {
			display: block;
			margin-top: 4rem;
			font-size: 1rem;
			text-align: center;
		}
	}
}


/* main
====================================================================== */
.l-main {
	position: relative;
	overflow: clip;
}


/* ===================================================================================================================

	パーツ

============================================================================= */

/* p-ico
====================================================================== */
.js-parallax {
	--base-transform: translate3d(0, 0, 0);
	--parallax-y: 0px;

	transform: var(--base-transform) translate3d(0, var(--parallax-y), 0);
	will-change: transform;
}

/* js-amine-wrap
====================================================================== */
.js-amine-wrap {
	img {
		opacity: 1 !important;
	}
	opacity: 0;
	transform: scale(.2);
	&.is-show {
		opacity: 1;
		transform: scale(1);
		transition: transform 0.4s cubic-bezier(0.22, 1.8, 0.36, 1), opacity .4s;
	}
}

/* p-ico
====================================================================== */
.p-ico {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: -1;
	img {
		display: block;
	}
	&.-cloud1 {
		width: calc(294 / 2 * .1rem);
	}
	&.-person1 {
		width: calc(104 / 2 * .1rem);
	}
	&.-person4 {
		width: calc(202 / 2 * .1rem);
	}
	&.-person5 {
		width: calc(116 / 2 * .1rem);
	}
	&.-person6 {
		width: calc(128 / 2 * .1rem);
	}
	&.-person7 {
		width: calc(216 / 2 * .1rem);
	}
	&.-person8 {
		width: calc(238 / 2 * .1rem);
	}
	&.-person9 {
		width: calc(206 / 2 * .1rem);
	}
	&.-person10 {
		width: calc(108 / 2 * .1rem);
	}
	&.-child1 {
		width: calc(166 / 2 * .1rem);
	}
	&.-tree1 {
		width: calc(144 / 2 * .1rem);
	}
	&.-tree2 {
		width: calc(256 / 2 * .1rem);
	}
	&.-building1 {
		width: calc(234 / 2 * .1rem);
	}
	&.-building2 {
		width: calc(316 / 2 * .1rem);
	}
	&.-building3 {
		width: calc(444 / 2 * .1rem);
	}
	&.-building4 {
		width: calc(370 / 2 * .1rem);
	}
	&.-school1 {
		width: calc(296 / 2 * .1rem);
	}
	&.-signal1 {
		width: calc(84 / 2 * .1rem);
	}
	&.-signal2 {
		width: calc(98 / 2 * .1rem);
	}
	&.-car1 {
		width: calc(160 / 2 * .1rem);
	}
	&.-car2 {
		width: calc(198 / 2 * .1rem);
	}
	&.-car3 {
		width: calc(258 / 2 * .1rem);
	}
	&.-equipment1 {
		width: calc(294 / 2 * .1rem);
	}
	&.-conveni1 {
		width: calc(234 / 2 * .1rem);
	}
	&.-megaphone1 {
		width: calc(138 / 2 * .1rem);
	}
	&.-tower1 {
		width: calc(128 / 2 * .1rem);
	}
	&.-tower2 {
		width: calc(96 / 2 * .1rem);
	}
	&.-bank1 {
		width: calc(282 / 2 * .1rem);
	}
	&.-desk1 {
		width: calc(376 / 2 * .1rem);
	}
	&.-balloon1 {
		width: calc(258 / 2 * .1rem);
	}
	&.-z2 {
		z-index: 2;
	}
	&.-mesh {
		width: 28rem;
		height: 28rem;
		background: url(../img/point-mesh.png) no-repeat 50%;
		background-size: 100%;
		&.-mesh-light {
			background-image: url(../img/point-mesh-light.png);
		}
		&.-l {
			right: min(calc(50% + 70rem), calc(100% - 5rem));
		}
		&.-r {
			left: min(calc(50% + 70rem), calc(100% - 5rem));
		}
	}
	&.-mesh-loop {
		width: 28rem;
		top: 0;
		bottom: 0;
		& > div {
			position: absolute;
			inset: 0;
			background: url(../img/point-mesh-loop.png) repeat-y 50%;
			background-size: 100%;
		}
		&.-l {
			right: min(calc(50% + 70rem), calc(100% - 5rem));
			& > div {
				background-position: 50% 80rem;
			}
		}
		&.-r {
			left: min(calc(50% + 70rem), calc(100% - 5rem));
			& > div {
				background-position: 50% 30rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		&:not(.-mesh):not(.-mesh-loop):not(.-cloud1) {
			transform: scale(.5);
		}
		&.-cloud1 {
			transform: scale(.6);
		}
		&.-mesh {
			--base-transform: scale(.5);
			&.-l {
				transform-origin: 100%;
				right: calc(100% - 4rem);
			}
			&.-r {
				transform-origin: 0%;
				left: calc(100% - 4rem);
			}
		}
		&.-mesh-loop {
			width: 14rem;
			&.-l {
				right: calc(100% - 4rem);
			}
			&.-r {
				left: calc(100% - 4rem);
			}
		}
	}

	&:not(.-mesh) img {
		opacity: 0;
	}
}

.p-ico-group-bird1 {
	position: absolute;
	width: 9.4rem;
	.-i1 {
		width: 4rem;
		top: 0;
		left: 0;
	}
	.-i2 {
		width: 4.3rem;
		right: 0;
		top: 1rem;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(9.4rem / 2);
		transform: scale(1.2);
		.-i1 {
			transform-origin: 0 0;
		}
		.-i2 {
			transform-origin: 100% 0;
			top: calc(1em / 2);
		}
	}
}
.p-ico-group-construction1 {
	position: absolute;
	width: 27rem;
	.-i1 {
		width: 6.5rem;
		top: 3.6rem;
		left: 0;
	}
	.-i2 {
		width: 18.9rem;
		right: 0;
		top: 0;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(27rem / 2);
		.-i1 {
			transform-origin: 0 0;
			top: calc(3.6rem / 2);
		}
		.-i2 {
			transform-origin: 100% 0;
		}
	}
}
.p-ico-group-construction2 {
	position: absolute;
	width: 24rem;
	.-i1 {
		width: 4.9rem;
		top: 10.4rem;
		left: 0;
	}
	.-i2 {
		width: 14.8rem;
		right: 0;
		top: 0;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(24rem / 2);
		.-i1 {
			transform-origin: 0 0;
			top: calc(10.4rem / 2);
		}
		.-i2 {
			transform-origin: 100% 0;
		}
	}
}
.p-ico-group-persons1 {
	position: absolute;
	width: 11.8rem;
	.-i1 {
		width: 5.8rem;
		top: 0;
		left: 0;
	}
	.-i2 {
		width: 5.8rem;
		right: 0;
		top: 1.4rem;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(11.8rem / 2);
		.-i1 {
			transform-origin: 0 0;
		}
		.-i2 {
			transform-origin: 100% 0;
			top: calc(1.4rem / 2);
		}
	}
}
.p-ico-group-tree1 {
	position: absolute;
	width: 12.4rem;
	.-i1 {
		width: 5.5rem;
		top: 4rem;
		left: 0;
	}
	.-i2 {
		width: 6.7rem;
		right: 0;
		top: 0;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(12.4rem / 2);
		.-i1 {
			transform-origin: 0 0;
			top: calc(4rem / 2);
		}
		.-i2 {
			transform-origin: 100% 0;
		}
	}
}
.p-ico-group-tree2 {
	position: absolute;
	width: 17rem;
	.-i1 {
		width: 5.5rem;
		top: 8.6rem;
		left: 0;
	}
	.-i2 {
		width: 6.7rem;
		right: 0;
		top: 6rem;
	}
	.-i3 {
		width: 4.6rem;
		right: 4rem;
		top: 0;
	}
	&.-z2 {
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		width: calc(12.4rem / 2);
		.-i1 {
			transform-origin: 0 0;
			top: calc(8.6rem / 2);
		}
		.-i2 {
			transform-origin: 100% 0;
			top: calc(6rem / 2);
		}
		.-i3 {
			transform-origin: 100% 0;
			right: calc(4rem / 2);
		}
	}
}

/* c-entry-nav
====================================================================== */
.c-entry-nav {
	position: relative;
	padding-block: 10rem;
	z-index: 1;
	.entry-heading {
		margin-bottom: 7rem;
		text-align: center;
		.logo {
			width: 16rem;
			margin-inline: auto;
			filter: var(--white-filter);
		}
		.title-en {
			margin-top: 3rem;
			font-size: 7rem;
			font-weight: var(--font-weight-medium);
			line-height: 1;
			--ls: .05em;
		}
	}
	.entry-box {
		position: relative;
		padding-block: 8rem;
		background-color: #fff;
		border-radius: 2rem;
		text-align: center;
		font-size: 1.6rem;
		.ico-check {
			position: absolute;
			left: 6rem;
			top: -2.6rem;
			width: 7rem;
		}
		header {
			margin-bottom: 3rem;
			font-size: 2.6rem;
			line-height: 1.5;
			h3 {
				margin-bottom: 1rem;
				font-size: 4rem;
			}
		}
		.btn-main {
			margin-bottom: 3rem;
		}
		.btn {
			margin-top: 3rem;
		}
	}
	@media screen and (min-width: 744px), print {
		background-color: #01A9EA;
		&::before {
			content: "";
			position: absolute;
			inset: 0 0 0 50%;
			background-color: #0ED3C9;
			z-index: -1;
		}
		.contents {
			display: flex;
			justify-content: center;
			gap: calc(var(--pc-base-padding) * 2);
			padding-inline: var(--pc-base-padding);
			.entry {
				flex-grow: 1;
				max-width: 70rem;
			}
		}
		.p-ico.-ico3 {
			top: -24.4rem;
			left: 30rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 7rem 0;
		background-color: #fff;
		.entry-heading {
			margin-bottom: 3rem;
			.logo {
				width: 9rem;
				filter: none;
			}
			.title-en {
				margin-top: 1rem;
				font-size: 3.6rem;
			}
		}
		.contents {
			.entry {
				padding: 6rem var(--sp-base-padding);
				&.-new {
					background-color: #01A9EA;
				}
				&.-career {
					background-color: #0ED3C9;
				}
			}
		}
		.entry-box {
			padding: 4rem 2.5rem;
			border-radius: 1.2rem;
			font-size: 1.2rem;
			.ico-check {
				left: 2rem;
				width: 5rem;
			}
			header {
				margin-bottom: 2.5rem;
				font-size: 1.5rem;
				h3 {
					margin-bottom: .6rem;
					font-size: 2.3rem;
				}
			}
			.btn-main {
				margin-bottom: 2rem;
			}
			.btn {
				margin-top: 2rem;
			}
		}
		.p-ico.-ico2 {
			top: -11.4rem;
			left: 8.8rem;
		}
		.p-ico.-ico3 {
			top: -10.8rem;
			left: auto;
			right: -3.2rem;
		}
	}
}

/* c-breadcrumbs
====================================================================== */
.c-breadcrumbs {
	position: absolute;
	top: 1rem;
	right: 0;
	left: 0;
	max-width: 140rem;
	width: calc(100% - var(--pc-base-padding) * 2);
	margin-inline: auto;
	font-size: 1.3rem;
	line-height: 1.8;
	font-weight: var(--font-weight-medium);
	z-index: 3;
	ol {
		display: flex;
		li {
			position: relative;
			padding-inline: 1.5rem;
			&:first-child {
				padding-left: 0;
			}
			&:last-child {
				padding-right: 0;
				a {
					color: #808080;
				}
			}
			& + li::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 0.6rem;
				height: 0.6rem;
				border-top: 1px solid #00A63C;
				border-right: 1px solid #00A63C;
				transform: translate(-50%, -50%) rotate(45deg);
			}
		}
	}
	@media screen and (max-width: 743px) {
		width: 100%;
		top: 0;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 1.1rem;
		ol {
			padding: 1rem var(--sp-base-padding);
			li:last-child {
				padding-right: var(--sp-base-padding);
			}
		}
	}
}


/* c-page-heading
====================================================================== */
.c-page-heading {
	margin-bottom: 8rem;
	padding-top: 9rem;
	text-align: center;
	&::before {
		content: "";
		display: block;
		width: 8rem;
		height: 3.8rem;
		margin-inline: auto;
		margin-bottom: 1rem;
		background: url(../img/point-title.svg) no-repeat 50%;
		background-size: 100%;
	}
	.title {
		--ls: .15em;
		font-size: 6rem;
		line-height: 1.4;
		padding-left: var(--ls);
		.u-ff_en {
			font-size: calc(70 / 60 * 100%);
			font-weight: var(--font-weight-medium);
			line-height: 1;
		}
	}
	.title-en {
		font-size: 7rem;
		line-height: 1.5;
		font-weight: var(--font-weight-medium);
		--ls: .05em;
	}
	.en {
		margin-top: 1.2rem;
		font-size: 2.6rem;
		line-height: 1.5;
		font-weight: var(--font-weight-medium);
		--ls: .05em;
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 5rem;
		padding-top: 8rem;
		&::before {
			width: 4rem;
			height: 1.9rem;
			margin-bottom: .8rem;
		}
		.title {
			margin-bottom: .5rem;
			font-size: 3rem;
		}
		.title-en {
			font-size: 3.6rem;
		}
		.en {
			margin-top: .6rem;
			font-size: 1.4rem;
		}
		.u-sp-ls0 {
			--ls: 0;
		}
	}
}

/* c-category-heading
====================================================================== */
.c-category-heading {
	display: flex;
	align-items: end;
	margin-bottom: 2rem;
	gap: 2rem;
	.title {
		font-size: 4rem;
		line-height: 1;
		--ls: .15em;
		.u-ff_en {
			font-size: calc(70 / 60 * 100%);
			font-weight: var(--font-weight-medium);
			line-height: 1;
		}
	}
	.en {
		font-size: 2rem;
		line-height: 1.2;
		font-weight: var(--font-weight-medium);
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 2rem;
		gap: 1rem;
		.title {
			font-size: 2.2rem;
		}
		.en {
			font-size: 1.6rem;
			line-height: 1;
		}
		&.-sp-block {
			display: block;
			.title {
				margin-bottom: 1rem;
			}
		}
	}
}

/* title
====================================================================== */
.p-title-m {
	margin-bottom: 4rem;
	text-align: center;
	font-size: 4rem;
	--ls: .05em;
	@media screen and (max-width: 743px) {
		margin-bottom: 2rem;
		font-size: 2.4rem;
	}
}

/* c-page-lead
====================================================================== */
.c-page-lead {
	max-width: 130rem;
	margin-inline: auto;
	text-align: center;
	font-size: 1.8rem;
	line-height: 2.5;
	--ls: .05em;
	@media screen and (max-width: 743px) {
		padding-inline: var(--sp-base-padding);
		font-size: 1.5rem;
	}
}

/* btn
====================================================================== */
.c-btn {
	--bg: #fff;
	--border: var(--color-base);
	--hover-bg: var(--color-base);
	--hover-color: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	max-width: 100%;
	width: 34rem;
	height: 7rem;
	margin-inline: auto;
	background: var(--bg);
	padding-right: 2rem;
	border: 1px solid var(--border);
	border-radius: 3.5rem;
	color: var(--color-base);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	font-size: 1.8rem;
	line-height: 1.5;
	--ls: .05em;
	.arrow {
		position: absolute;
		right: 2rem;
		top: 0;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		margin-block: auto;
		border-radius: 100%;
		background-color: var(--color-base);
		z-index: 2;
		&::before {
			content: "";
			position: absolute;
			inset: 0 0 0 .2rem;
			width: .6rem;
			height: .8rem;
			margin: auto;
			background-color: #fff;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
		}
		&.-b {
			transform: rotate(90deg);
		}
	}
	.open {
		position: absolute;
		right: 2rem;
		top: 0;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		margin-block: auto;
		border-radius: 100%;
		background-color: var(--color-base);
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			right: .5rem;
			left: .5rem;
			height: 2px;
			background-color: #fff;
		}
		&::after {
			transform: rotate(90deg);
		}
	}
	.close {
		position: absolute;
		right: 2rem;
		top: 0;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		margin-block: auto;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			right: 0rem;
			left: 0rem;
			height: 2px;
			background-color: #000;
			transform: rotate(45deg);
		}
		&::after {
			transform: rotate(-45deg);
		}
	}
	&.-green {
		--bg: #2FD5C2;
		--border: var(--bg);
	}
	&.-yellow {
		--bg: #FFD84D;
		--border: var(--bg);
	}
	&.-purple {
		--bg: #D6AEEA;
		--border: var(--bg);
	}
	&.-blue {
		--bg: #01A9EA;
		--border: var(--bg);
	}
	&.-pink {
		--bg: #FF8888;
		--border: var(--bg);
		color: #fff;
	}
	&.-orange {
		--bg: var(--color-orange);
		--border: var(--bg);
		&:not(.-c-black) {
			color: #fff;
		}
	}
	&.-gray {
		--bg: #96AEC4;
		--border: var(--bg);
	}
	&.-wide {
		width: 46rem;
	}
	&.-hv-gray {
		--hover-bg: #ddd;
		--hover-color: var(--color-base);
	}
	&:has(.mynavi) {
		flex-direction: column;
	}
	.mynavi {
		width: 14rem;
		margin-top: 0.3rem;
	}
	@media (hover) {
		a & {
			transition: background var(--transition), border var(--transition), color var(--transition);
		}
		.arrow,
		.arrow::before {
			transition: background var(--transition);
		}
		.open,
		.open::before,
		.open::after {
			transition: background var(--transition);
		}
		.close,
		.close::before,
		.close::after {
			transition: background var(--transition);
		}
		&:hover,
		a:hover & {
			background-color: var(--hover-bg);
			border-color: var(--hover-bg);
			color: var(--hover-color);
			.arrow {
				background-color: var(--hover-color);
				&::before {
					background-color: var(--hover-bg);
				}
			}
			.open {
				background-color: var(--hover-color);
				&::before,
				&::after {
					background-color: var(--hover-bg);
				}
			}
			.close {
				&::before,
				&::after {
					background-color: var(--hover-color);
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		&.-auto {
			--ls: 0;
			width: fit-content;
			min-width: 34rem;
			padding-inline: 4rem 6rem;
		}
		&.-min {
			width: 30rem;
		}
		&.-fzl {
			font-size: 2.2rem;
		}
	}
	@media screen and (max-width: 743px) {
		width: 22rem;
		height: 5rem;
		font-size: 1.4rem;
		.arrow {
			right: 1.5rem;
			transform-origin: 100%;
			transform: scale(.6);
			&.-b {
				right: 1rem;
				transform-origin: 50%;
				transform: rotate(90deg) scale(.8);
			}
		}
		.open,
		.close {
			right: 1.5rem;
			transform-origin: 100%;
			transform: scale(.8);
		}
		&.-auto {
			--ls: 0;
			width: fit-content;
			min-width: 22rem;
			padding-inline: 2rem 4rem;
		}
		.mynavi {
			width: 10rem;
			margin-bottom: 0.2rem;
		}
		&.-fzl {
			font-size: 1.6rem;
		}
	}
}
.c-back-btn {
	margin-top: 10rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
	}
}
.c-btn-txt {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 100%;
	width: 14rem;
	height: 4rem;
	margin-inline: auto;
	border-bottom: 1px solid;
	color: var(--color-base);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	font-size: 1.8rem;
	line-height: 1.5;
	--ls: .05em;
	.arrow {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		margin-block: auto;
		border-radius: 100%;
		background-color: var(--color-base);
		z-index: 2;
		&::before {
			content: "";
			position: absolute;
			inset: 0 0 0 .2rem;
			width: .6rem;
			height: .8rem;
			margin: auto;
			background-color: #fff;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
		}
		&.-b {
			transform: rotate(90deg);
		}
		&.-t {
			transform: rotate(-90deg);
		}
	}
	@media (hover) {
		&:hover {
			opacity: 0.5;
		}
	}
	@media screen and (max-width: 743px) {
		width: 10rem;
		font-size: 1.4rem;
		.arrow {
			transform: scale(.6);
			&.-b {
				transform-origin: 50%;
				transform: rotate(90deg) scale(.8);
			}
			&.-t {
				transform-origin: 50%;
				transform: rotate(-90deg) scale(.8);
			}
		}
		&:has(.mynavi) {
			font-size: 1.2rem;
		}
		.mynavi {
			width: 10rem;
			margin-right: 0.2rem;
		}
	}
}

/* c-page-nav
====================================================================== */
.c-page-nav {
	margin-bottom: 13rem;
	ul {
		display: flex;
		justify-content: center;
		gap: 2rem;
		a {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 28rem;
			height: 8rem;
			background-color: #fff;
			border-radius: 1rem;
			box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
			font-size: 1.8rem;
			text-decoration: none;
			line-height: 1.6;
			&::before {
				content: "";
				position: absolute;
				right: 1rem;
				bottom: 1rem;
				width: 1.5rem;
				height: 1.5rem;
				background-color: #000;
				border-radius: 100%;
			}
			&::after {
				content: "";
				position: absolute;
				right: 1.4rem;
				bottom: 1.5rem;
				width: .6rem;
				height: .4rem;
				background-color: #fff;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
			}
			@media (hover) {
				&:hover {
					opacity: 0.5;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 8rem;
		margin-inline: var(--sp-base-padding);
		ul {
			flex-wrap: wrap;
			gap: 1rem;
			li {
				width: calc(50% - 1rem / 2);
			}
			a {
				width: 100%;
				height: 6rem;
				box-shadow: 0 0 .5rem 0 rgba(0, 0, 0, 0.10);
				font-size: 1.3rem;
				&::before {
					right: 0.6rem;
					bottom: 0.6rem;
				}
				&::after {
					right: 1rem;
					bottom: 1.1rem;
				}
			}
		}
	}
}

/* c-fix-bnr
====================================================================== */
.c-fix-bnr {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 28rem;
	right: 1rem;
	top: calc(var(--header-height) + 2rem);
	z-index: 100;
	li {
		background-color: #fff;
		border-radius: 1rem;
	}
	a {
		overflow: hidden;
		position: relative;
		display: flex;
		text-decoration: none;
		height: 7.4rem;
		border: .3rem solid #FFF;
		border-radius: 1rem;
		background: #FE7D7D;
		color: #fff;
		font-size: 1.4rem;
		line-height: 1.6;
		box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
		box-sizing: content-box;
		--ls: 0;
		.img {
			flex-shrink: 0;
			width: 11.1rem;
			width: calc(111 / 274 * 100%);
			border-radius: 1rem 0 0 1rem;
		}
		.title {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
		.arrow {
			position: absolute;
			right: 0.7rem;
			bottom: 0.7rem;
			width: 1.5rem;
			height: 1.5rem;
			margin-block: auto;
			border-radius: 100%;
			background-color: var(--color-base);
			transform-origin: 100% 100%;
			z-index: 2;
			&::before {
				content: "";
				position: absolute;
				inset: 0 0 0 .2rem;
				width: .5rem;
				height: .6rem;
				margin: auto;
				background-color: #fff;
				clip-path: polygon(0 0, 100% 50%, 0 100%);
			}
		}
		&.-blue {
			background-color: #01A9EA;
			color: #000;
		}
		&.-green {
			background-color: #0ED3C9;
			color: #000;
		}
		@media (hover) {
			&:hover {
				opacity: 0.7;
			}
		}
	}
	transform: translateX(100%) translateX(2rem);
	transition: transform .5s ease-in-out;
	&.is-show {
		transform: translateX(0);
	}
	@media screen and (max-width: 743px) {
		width: calc(100% - 1rem);
		flex-direction: row;
		justify-content: end;
		gap: .4rem;
		top: calc(var(--header-height) + .5rem);
		right: .5rem;
		li {
			width: calc((100% - .4rem) / 2);
		}
		a {
			height: 6.4rem;
			font-size: 1.1rem;
			.arrow {
				right: 0.5rem;
				bottom: 0.5rem;
				transform: scale(.8);
			}
		}
	}
}


/* c-contents-box
====================================================================== */
.c-contents-box {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	padding: 13rem 10rem;
	background-color: #fff;
	border-radius: 10rem;
	z-index: 1;
	& + .c-contents-box {
		margin-top: 6rem;
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding: 4rem 2rem;
		border-radius: 4rem;
		& + .c-contents-box {
			margin-top: 3rem;
		}
	}
}


/* slide-arrow
====================================================================== */
.c-slide-arrow {
	--width: 6rem;
	position: absolute;
	width: var(--width);
	aspect-ratio: 1;
	background-color: #000;
	border-radius: 100%;
	cursor: pointer;
	z-index: 10;
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: calc(50% - 12%);
		width: 25%;
		height: 25%;
		border-top: .3rem solid #fff;
		border-right: .3rem solid #fff;
		transform-origin: 100% 0;
		transform: rotate(45deg);
	}
	&.-l {
		transform: scaleX(-1);
	}
	@media (hover) {
		transition: background var(--transition);
		&:hover {
			background-color: #666;
		}
	}
	@media screen and (max-width: 743px) {
		--width: 3rem;
	}
}

/* swiper-pagination
====================================================================== */
.swiper-pagination {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 2.5rem;
	display: flex;
	justify-content: center;
	gap: 2.4rem;
	z-index: 3;
	.swiper-pagination-bullet {
		margin: 0;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 100%;
		background-color: #E2E3E3;
		opacity: 1;
	}
	@media screen and (max-width: 743px) {
		bottom: .8rem !important;
		gap: 1.2rem;
		.swiper-pagination-bullet {
			width: 1rem;
			height: 1rem;
		}
	}
}

/* flag
====================================================================== */
.c-flag {
	position: relative;
	padding-left: calc(1.5rem + 1rem);
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: -1.2rem;
		width: 1.3rem;
		height: 7.4rem;
		background: url(../img/flag-pin.svg) no-repeat 50%;
		background-size: 100%;
	}
	.label {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		min-width: calc(17.6rem - 1rem * 2);
		height: 4.2rem;
		padding-inline: calc(2rem - 1rem);
		background: url(../img/flag-parts-bg.svg) repeat-x 50%;
		background-size: auto 100%;
		white-space: nowrap;
		font-size: 1.8rem;
		line-height: 1.2;
		--ls: .05em;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			width: 2rem;
			background-repeat: no-repeat;
			background-size: auto 100%;
			pointer-events: none;
		}
		&::before {
			left: -1rem;
			background-image: url(../img/flag-parts-left.svg);
			background-position: 0%;
		}
		&::after {
			right: -1rem;
			background-image: url(../img/flag-parts-right.svg);
			background-position: 100%;
		}
	}
	.-department1 & {
		.label::before {
			background-image: url(../img/flag-parts-left-blue.svg);
		}
	}
	.-department2 & {
		.label::before {
			background-image: url(../img/flag-parts-left-red.svg);
		}
	}
	.-department3 & {
		.label::before {
			background-image: url(../img/flag-parts-left-green.svg);
		}
	}
	@media screen and (max-width: 743px) {
		transform-origin: 0 0;
		transform: scale(.6);
	}
}

/* acc
====================================================================== */
.c-acc {
	overflow: hidden;
	height: 0;
	transition: height var(--transition);
}


/* marquee
====================================================================== */
.c-marquee {
	font-size: 14rem;
	line-height: 10rem;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	--ls: .05em;
	.c-marquee-inner {
		width: fit-content;
		display: flex;
		animation: marquee 10s linear infinite;
		p {
			padding-right: .3em;
		}
	}
	@media screen and (max-width: 743px) {
		font-size: 7rem;
		line-height: 5rem;
	}
}
@keyframes marquee {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ico-plus
====================================================================== */
.c-ico-plus {
	position: absolute;
	right: 3rem;
	bottom: 3rem;
	width: 3rem;
	height: 3rem;
	background-color: #000;
	border-radius: 100%;
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: calc(50% - 1px);
		right: 0.8rem;
		left: 0.8rem;
		border-top: 2px solid #fff;
	}
	&::after {
		transform: rotate(90deg);
	}
	&.-v-center {
		top: 0;
		bottom: 0;
		margin-block: auto;
	}
	@media screen and (max-width: 743px) {
		right: 1.4rem;
		bottom: 1.4rem;
		transform-origin: 100% 100%;
		transform: scale(.8);
		&.-v-center {
			transform-origin: 100%;
		}
	}
}

/* basic_dl_table
====================================================================== */
/*
.basic_dl_table {
	& > dl {
		display: flex;
		background-color: var(--bg-base);
		&:not(:last-child) {
			margin-bottom: 2px;
		}
		& > * {
			padding: 1.2rem 2.4rem;
		}
		& > dt {
			width: 24rem;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			background-color: var(--color-lightblue);
			border-right: 2px solid #fff;
		}
		@media screen and (max-width: 743px) {
			& > * {
				padding: 1rem 1.6rem;
			}
			& > dt {
				@media screen and (max-width: 743px) {
					width: 11rem;
				}
			}
		}
	}
	&.-sp-vertical {
		@media screen and (max-width: 743px) {
			& > dl {
				display: block;
				& > * {
					padding: 1rem 2rem;
				}
				& > dt {
					width: auto;
				}
			}
		}
	}
}
*/

/* paragraph
====================================================================== */
.paragraph > * + * {
	margin-top: 1lh;
}
.paragraph.-m > * + * {
	margin-top: .7lh;
}

/* wp-pagenavi
====================================================================== */
/*
.wp-pagenavi {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-block: 8rem;
	& > * {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 4.8rem;
		height: 4.8rem;
		background-color: #fff;
		font-size: 1.4rem;
		text-decoration: none;
		border-radius: 100%;
		box-shadow: 0 .2rem .4rem rgba(0, 0, 0, 0.1);
	}
	.current {
		background-color: var(--color-blue);
		color: #fff;
	}
	@media (hover) {
		a:hover {
			background-color: var(--color-blue);
			color: #fff;
		}
	}
	@media screen and (max-width: 743px) {
		gap: 1rem;
		margin-block: 4rem;
		& > * {
			width: 4rem;
			height: 4rem;
		}
	}
}
*/


/* ul / ol
====================================================================== */
.dot_li > li {
	position: relative;
	padding-left: 1em;
}
.dot_li > li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
	font-feature-settings: normal;
}

.circle_li > li {
	position: relative;
	padding-left: 1.1em;
}
.circle_li > li::before {
	content: "";
	position: absolute;
	top: calc(.5lh - .5rem);
	left: 0;
	width: 1rem;
	height: 1rem;
	background-color: var(--color-base);
	border-radius: 100%;
}

.parentheses_li > li {
	position: relative;
	padding-left: 2.8em;
}
.parentheses_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.parentheses_li_h > li {
	position: relative;
	padding-left: 1.6em;
}
.parentheses_li_h > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}
.parentheses_li_hh > li {
	position: relative;
	padding-left: 2.2em;
}
.parentheses_li_hh > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.point_li > li {
	position: relative;
	padding-left: 1.5em;
}
.point_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.square_li > li {
	position: relative;
	padding-left: 0.8em;
}
.square_li > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: 5px;
	height: 5px;
	background-color: #14143c;
}
@media screen and (max-width: 743px) {
	.square_li > li::before {
		top: 0.6em;
	}
}

.num_li {
	margin-left: 1.8em;
	list-style: decimal;
}
.alphabet_li {
	margin-left: 1.8em;
	list-style: lower-latin;
}

.mt_li > li + li {
	margin-top: .8lh;
}
.mt_li_s > li + li {
	margin-top: .5lh;
}
@media screen and (max-width: 743px) {
	.sp_mt_li > li + li {
		margin-top: 0.8em;
	}
}

.inline_li > li {
	display: inline-block;
	margin-right: 0.3em;
}

@media screen and (min-width: 744px), print {
	.column_li {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.column_li > li {
		width: 48%;
	}
	.column_li > li:nth-child(n + 3) {
		margin-top: 0.25em;
	}
}
@media screen and (max-width: 743px) {
	.column_li > li + li {
		margin-top: 0.25em;
	}
}

.dl_table {
	display: table;
}
.dl_table > * {
	display: table-row;
}
.dl_table > * > * {
	display: table-cell;
}
.dl_table dt {
	white-space: nowrap;
}
.dl_table.-dt_pr dt {
	padding-right: 1em;
}


/* modal
====================================================================== */
/* body.is-modal-open {
	overflow: hidden;
} */
.modal {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	z-index: 1000;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease, visibility .35s ease;
	.modal__bg {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .7);
	}
	&.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.modal-close {
		position: absolute;
		right: 2rem;
		top: -3rem;
		width: 6rem;
		height: 6rem;
		background-color: #000;
		border-radius: 100%;
		z-index: 2;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			left: 1.5rem;
			right: 1.5rem;
			border-top: 2px solid #fff;
			transform: rotate(45deg);
		}
		&::after {
			transform: rotate(-45deg);
		}
		@media (hover) {
			&:hover {
				background-color: #333;
			}
		}
	}
	.modal-close-bottom {
		margin-top: 5rem;
	}
	@media screen and (max-width: 743px) {
		padding: 4rem 1rem;
		.modal-close {
			right: 1rem;
			top: -2rem;
			width: 4rem;
			height: 4rem;
			&::before,
			&::after {
				left: 1rem;
				right: 1rem;
			}
		}
		.modal-close-bottom {
			margin-top: 3rem;
		}
	}
}

.simple-modal {
	--ls: .05em;
	position: relative;
	background-color: #fff;
	width: 100rem;
	border: .4rem solid var(--color);
	border-radius: 2rem;
	font-size: 1.8rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	margin: auto 0;
	header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 12rem;
		text-align: center;
		font-size: 3rem;
		line-height: 1.5;
		background-color: var(--color);
		border-radius: 1.5rem 1.5rem 0 0;
		color: var(--modal-title, var(--color-base));
		&::after {
			content: "";
			position: absolute;
			top: calc(100% - 1px);
			right: 0;
			left: 0;
			width: 1.8rem;
			height: 1.4rem;
			background-color: var(--color);
			margin-inline: auto;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
		}
	}
	.contents {
		padding: 6rem;
		.lead {
			text-align: center;
			font-size: 2.4rem;
			line-height: 1.6;
			font-weight: var(--font-weight-bold);
		}
	}
	@media screen and (max-width: 743px) {
		width: 100%;
		border-radius: 1.5rem;
		font-size: 1.4rem;
		header {
			min-height: 7rem;
			padding-block: 1rem;
			border-radius: 1rem 1rem 0 0;
			font-size: 2rem;
		}
		.contents {
			padding: 3rem 2rem;
			.lead {
				font-size: 1.8rem;
			}
		}
	}
}


/* ============================================================================

	会社紹介

============================================================================= */
.-telecom {
	--color: #00A29A;
}
.-step {
	--color: #01A9EA;
}
.p-company {
	.-ico-head1 {
		top: 8.5rem;
		right: calc(50% + 32.6rem);
	}
	.-ico-head2 {
		top: 20.5rem;
		right: calc(50% + 43.6rem);
	}
	.-ico-head3 {
		top: 13.3rem;
		right: calc(50% + 47.3rem);
	}
	.-ico-head4 {
		top: 8.5rem;
		left: calc(50% + 32.6rem);
	}
	.-ico-head-mesh1 {
		top: 15rem;
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 2.4rem;
			right: calc(50% + 5rem);
		}
		.-ico-head2 {
			top: 9.4rem;
			right: calc(50% + 11.5rem);
		}
		.-ico-head3 {
			top: 6.4rem;
			right: calc(50% + 12rem);
		}
		.-ico-head4 {
			top: 1.2rem;
			left: calc(50% + 6.6rem);
		}
		.-ico-head-mesh1 {
			top: 4rem;
		}
	}
}
.p-company-inner {
	max-width: 120rem;
	margin-inline: auto;
	margin-top: 6rem;
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		margin-top: 3rem;
	}
}
.p-company-business {
	--ls: .05em;
	position: relative;
	padding-bottom: 14rem;
	.business {
		text-align: center;
		a {
			display: block;
			position: relative;
			text-decoration: none;
			padding-block: 5rem;
			background-color: var(--color);
			border: .3rem solid var(--color);
			border-radius: 2rem;
			color: #fff;
			font-size: 2rem;
			line-height: 1.8;
			.ico-check {
				position: absolute;
				left: 2.6rem;
				top: -3.6rem;
				width: 7rem;
			}
			h3 {
				margin-bottom: 3rem;
				font-size: 3.6rem;
				line-height: 1.2;
			}
		}
		.service {
			padding-block: 4rem;
			dt {
				font-size: 1.6rem;
			}
			ul {
				font-size: 2.4rem;
				line-height: 1.6;
			}
		}
	}
	.new-business {
		--color: #F6AB00;
		background-color: #fff;
		border: .3rem solid var(--color);
		border-radius: 2rem;
		font-size: 1.8rem;
		line-height: 2;
		h3 {
			text-align: center;
			color: #fff;
			background-color: var(--color);
			font-size: 2.6rem;
		}
		.txt {
			padding-inline: 6rem;
		}
	}
	.p-ico.-mesh {
		bottom: 30rem;
	}
	@media screen and (min-width: 744px), print {
		.p-company-inner {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 8rem 4rem;
		}
		.business {
			width: 58rem;
			a {
				height: 100%;
			}
			.service {
				ul {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-top: 1rem;
					min-height: 13rem;
					&:not(:has(li:nth-child(3))) {
						line-height: 2;
					}
				}
			}
		}
		.new-business {
			width: 100%;
			display: flex;
			& > * {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 15rem;
			}
			h3 {
				position: relative;
				width: 28rem;
				flex-shrink: 0;
				border-radius: 1.5rem 0 0 1.5rem;
				&::after {
					content: "";
					position: absolute;
					left: calc(100% - 1px);
					top: 0;
					bottom: 0;
					width: 1.4rem;
					height: 1.8rem;
					background-color: var(--color);
					margin-block: auto;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-bottom: 8rem;
		.business {
			margin-bottom: 4rem;
			a {
				padding-block: 2rem 2.5rem;
				font-size: 1.4rem;
				.ico-check {
					position: absolute;
					left: 1rem;
					top: -2.6rem;
					width: 5rem;
				}
				h3 {
					margin-bottom: 1.5rem;
					font-size: 2.2rem;
				}
			}
			.service {
				padding-block: 3rem;
				dt {
					font-size: 1.2rem;
				}
				ul {
					font-size: 1.8rem;
					line-height: 1.6;
				}
			}
		}
		.new-business {
			font-size: 1.4rem;
			line-height: 1.8;
			h3 {
				padding-block: 1.5rem;
				border-radius: 1.5rem 1.5rem 0 0;
				font-size: 2.2rem;
			}
			.txt {
				padding: 2rem;
			}
		}
		.p-ico.-mesh {
			transform-origin: 100% 100%;
			bottom: 2rem;
		}
	}
}

.business-modal {
	--ls: .05em;
	position: relative;
	background-color: #fff;
	width: 134rem;
	border: .4rem solid var(--color);
	border-radius: 2rem;
	font-size: 1.8rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	margin: auto 0;
	header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 16rem;
		text-align: center;
		font-size: 3.6rem;
		line-height: 1.5;
		background-color: var(--color);
		border-radius: 1.5rem 1.5rem 0 0;
		color: #fff;
		.p-ico {
			z-index: 2;
		}
		&::after {
			content: "";
			position: absolute;
			top: calc(100% - 1px);
			right: 0;
			left: 0;
			width: 1.8rem;
			height: 1.4rem;
			background-color: var(--color);
			margin-inline: auto;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
		}
	}
	.contents {
		padding: 8rem;
		.service {
			display: flex;
			ul {
				display: flex;
				flex-wrap: wrap;
				li:not(:last-child)::after {
					content: "、";
				}
			}
		}
	}
	&.-telecom {
		.-ico1 {
			width: 9.2rem;
			bottom: -2.2rem;
			left: 23rem;
		}
		.-ico2 {
			width: 13rem;
			bottom: -2.3rem;
			right: 17rem;
		}
	}
	&.-step {
		.-ico1 {
			width: 10.1rem;
			bottom: -2rem;
			left: 22rem;
		}
		.-ico2 {
			width: 20.4rem;
			bottom: -1.6rem;
			right: 13.4rem;
		}
	}
	@media screen and (max-width: 743px) {
		width: 100%;
		font-size: 1.4rem;
		border-radius: 1.5rem;
		header {
			height: 10rem;
			border-radius: 1rem 1rem 0 0;
			font-size: 2.4rem;
		}
		.contents {
			padding: 3rem 2rem;
			.service {
				display: block;
			}
		}
		&.-telecom {
			.-ico1 {
				bottom: -4.2rem;
				left: 0rem;
			}
			.-ico2 {
				bottom: -3.3rem;
				right: -2rem;
			}
		}
		&.-step {
			.-ico1 {
				bottom: -4.2rem;
				left: 0rem;
			}
			.-ico2 {
				bottom: -4.3rem;
				right: -5rem;
			}
		}
	}
}

.p-company-message {
	--ls: .05em;
	position: relative;
	padding-block: 14rem;
	background-color: #fff;
	font-weight: var(--font-weight-medium);
	z-index: 1;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(../img/logo.svg) no-repeat 50% calc(100% + 2rem);
		background-size: 140rem;
		filter: brightness(0);
		opacity: 0.039;
		z-index: -1;
	}
	.ph {
		img {
			border-radius: 1rem;
		}
		figcaption {
			display: block;
			margin-top: 3rem;
			font-size: 1.6rem;
			line-height: 1.5;
			.name {
				margin-left: 0.5em;
				font-size: 2rem;
				font-weight: var(--font-weight-bold);
			}
		}
	}
	.contents {
		position: relative;
	}
	.lead {
		margin-bottom: 3rem;
		font-size: 3.6rem;
		line-height: 1.8;
		font-weight: var(--font-weight-bold);
		text-align: center;
	}
	.message-summary {
		position: absolute;
		width: 100%;
		text-align: center;
	}
	&:has(.read-btn.-open) .message-summary {
		display: none;
	}
	.message {
		font-size: 1.6rem;
		line-height: 2;
	}
	.read-btn {
		margin-top: 38rem;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 20rem;
		border-radius: 2rem;
		border: .4rem solid #FFF;
		background: #54C6F2;
		box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
		font-size: 3.6rem;
		line-height: 1.4;
		font-weight: var(--font-weight-bold);
		.c-flag {
			position: absolute;
			left: 2.6rem;
			top: -2.2rem;
		}
		.en {
			margin-top: 1rem;
			font-size: 2.6rem;
			color: #fff;
			opacity: 0.6;
			font-weight: var(--font-weight-medium);
			mix-blend-mode: overlay;
		}
		.ico {
			position: absolute;
			width: 5rem;
			top: -1.8rem;
			right: 5.6rem;
			line-height: 1;
		}
		.arrow {
			position: absolute;
			right: 2.6rem;
			bottom: 2.6rem;
			width: 2rem;
			height: 2rem;
			border-radius: 100%;
			background-color: var(--color-base);
			z-index: 2;
			transform: rotate(90deg);
			&::before {
				content: "";
				position: absolute;
				inset: 0 0 0 .2rem;
				width: .6rem;
				height: .8rem;
				margin: auto;
				background-color: #fff;
				clip-path: polygon(0 0, 100% 50%, 0 100%);
			}
		}
		&.-open {
			position: absolute;
			width: 100%;
			opacity: 0;
			transition: opacity var(--transition);
			pointer-events: none;
		}
	}
	.p-ico.-mesh {
		top: 16rem;
	}
	.message-ico1  {
		top: 7.5rem;
		right: calc(50% + 30.6rem);
	}
	.message-ico2  {
		top: 12.5rem;
		right: calc(50% + 48.6rem);
	}
	@media screen and (min-width: 744px), print {
		.p-company-inner {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
			margin-top: 10rem;
		}
		.ph {
			width: 44rem;
			flex-shrink: 0;
		}
		.contents {
			width: 66rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem 7rem;
		&::before {
			background-size: 100%;
			background-position: 50% calc(100% + 1rem);
		}
		.ph {
			width: 30rem;
			margin-inline: auto;
			margin-bottom: 4rem;
			text-align: center;
			figcaption {
				margin-top: 1.5rem;
				font-size: 1.3rem;
				.name {
					font-size: 1.6rem;
				}
			}
		}
		.lead {
			margin-bottom: 2rem;
			font-size: 2.4rem;
			line-height: 1.8;
			text-align: center;
		}
		.message {
			font-size: 1.5rem;
		}
		.read-btn {
			margin-top: 28rem;
			height: 16rem;
			border-radius: 1.6rem;
			font-size: 2.2rem;
			.c-flag {
				left: 1rem;
				top: -1.2rem;
			}
			.en {
				font-size: 2rem;
			}
			.ico {
				right: 2rem;
				transform: scale(.8);
			}
			.arrow {
				right: 1.3rem;
				bottom: 1.3rem;
			}
		}
		.p-ico.-mesh {
			top: 2rem;
		}
		.message-ico1  {
			top: 1.4rem;
			right: calc(50% + 1rem);
		}
		.message-ico2  {
			top: 4.5rem;
			right: calc(50% + 13rem);
		}
	}
}

.p-company-value {
	--ls: .05em;
	padding-top: 14rem;
	.contents-box {
		position: relative;
		max-width: 130rem;
		padding: 14rem 15rem;
		background-color: #fff;
		border-radius: 10rem;
		.lead {
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.8;
			strong {
				color: #00A29A;
			}
		}
		.img {
			max-width: 70rem;
			margin: 5rem auto;
		}
		.item {
			position: relative;
			padding-block: 4rem;
			border-bottom: 1px solid var(--border);
			font-size: 1.8rem;
			line-height: 2;
			h3 {
				font-size: 2.2rem;
				line-height: 1.6;
			}
			&.-item1 {
				--color: #01A9EA;
			}
			&.-item2 {
				--color: #F6AB00;
			}
			&.-item3 {
				--color: #00A29A;
			}
		}
	}

	.value-ico1 {
		top: 7rem;
		right: calc(50% + 40.6rem);
	}
	.value-ico2 {
		top: 6rem;
		left: calc(50% + 34rem);
	}
	.value-ico3 {
		top: 48.2rem;
		right: calc(50% + 36.4rem);
	}
	.value-ico4 {
		top: 93rem;
		right: calc(50% + 50rem);
	}
	.value-ico5 {
		top: 95rem;
		right: calc(50% + 43rem);
	}
	.value-ico6 {
		top: 48rem;
		left: calc(50% + 38rem);
	}
	.value-ico7 {
		top: 97rem;
		left: calc(50% + 35.8rem);
	}
	@media screen and (min-width: 744px), print {
		.item {
			display: flex;
			gap: 4rem;
			h3 {
				flex-shrink: 0;
				width: 20rem;
				border-right: 2px solid var(--color);
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-top: 6rem;
		.contents-box {
			padding: 5rem 2rem 4rem;
			border-radius: 4rem;
			.lead {
				font-size: 1.6rem;
			}
			.img {
				margin-block: 2rem;
			}
			.item {
				padding-left: 2rem;
				padding-block: 2rem;
				border-bottom: 1px solid var(--border);
				font-size: 1.4rem;
				h3 {
					margin-bottom: 0.5rem;
					font-size: 1.7rem;
				}
				&::before {
					content: "";
					position: absolute;
					inset: 2rem auto 2rem 0;
					border-left: 2px solid var(--color);
				}
			}
		}
		.value-ico1 {
			top: -4rem;
			right: calc(50% + 12rem);
		}
		.value-ico2 {
			top: -4rem;
			left: calc(50% + 7rem);
		}
		.value-ico3 {
			top: 22rem;
			right: calc(50% + 8rem);
		}
		.value-ico4 {
			top: 51rem;
			right: calc(50% + 12.4rem);
		}
		.value-ico5 {
			top: 52.8rem;
			right: calc(50% + 9rem);
		}
		.value-ico6 {
			top: 22rem;
			left: calc(50% + 6rem);
		}
		.value-ico7 {
			top: 54rem;
			left: calc(50% + 7rem);
		}
	}
}
.p-company-vision {
	--ls: .05em;
	position: relative;
	padding-block: 13rem 14rem;
	.lead {
		text-align: center;
		font-size: 2rem;
		line-height: 1.8;
	}
	.vision-contents {
		margin-top: 8rem;
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	.item {
		position: relative;
		padding: 5rem 4.6rem;
		background-color: #fff;
		border-radius: 2rem;
		border: .4rem solid var(--color);
		font-size: 1.8rem;
		line-height: 2;
		&.-item01 {
			--color: #75DB77;
		}
		&.-item02 {
			--color: #F7AB01;
		}
		&.-item03 {
			--color: #FFA9A9;
		}
		&.-item04 {
			--color: #7ECEF4;
		}
		header {
			position: relative;
			display: flex;
			gap: 3rem;
			align-items: center;
			margin-bottom: 3rem;
			font-size: 2.8rem;
			line-height: 1.6;
			.num {
				font-size: 3.6rem;
				line-height: 1;
				font-weight: var(--font-weight-medium);
			}
		}
	}
	.-mesh1 {
		top: 28rem;
	}
	.-mesh2 {
		bottom: 0;
	}
	.vision-ico1 {
		width: 22.6rem;
		top: 9rem;
		right: calc(50% + 35.6rem);
	}
	.vision-ico2 {
		width: 6.4rem;
		top: 8.6rem;
		left: calc(50% + 51.6rem);
	}
	@media screen and (min-width: 744px), print {
		.item {
			width: calc((100% - 4rem) / 2);
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem 8rem;
		.lead {
			font-size: 1.5rem;
			line-height: 1.8;
		}
		.vision-contents {
			margin-top: 4rem;
			flex-direction: column;
			gap: 2rem;
		}
		.item {
			padding: 2.5rem 2rem;
			font-size: 1.3rem;
			header {
				gap: 2rem;
				margin-bottom: 2rem;
				font-size: 1.8rem;
				.num {
					font-size: 2.4rem;
				}
			}
		}
		.-mesh1 {
			top: 16rem;
		}
		.-mesh2 {
			transform-origin: 0 100% !important;
		}
		.vision-ico1 {
			top: -4rem;
			right: calc(50% + 1rem);
			z-index: 3;
		}
		.vision-ico2 {
			top: -1.4rem;
			left: calc(50% + 11rem);
		}
	}
}



/* ============================================================================

	仕事を知る

============================================================================= */
.-work1 {
	--color: #7ECEF4;
}
.-work2 {
	--color: #FFA9A9;
}
.-work3 {
	--color: #75DB77;
}
.-work4 {
	--color: #F7AB01;
}
.p-work {
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}

	.-ico-head1 {
		top: 16.2rem;
		right: calc(50% + 47rem);
	}
	.-ico-head2 {
		top: 7.2rem;
		right: calc(50% + 28rem);
	}
	.-ico-head3 {
		top: 13.2rem;
		left: calc(50% + 41.6rem);
	}
	.-ico-mesh1 {
		top: 15rem;
	}
	.-ico-mesh2 {
		top: 56rem;
	}
	.-ico-mesh3 {
		top: 151.5rem;
	}
	.-ico-mesh4 {
		bottom: 4rem;
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 11.2rem;
			right: calc(50% + 12rem);
		}
		.-ico-head2 {
			top: 0.2rem;
			right: calc(50% + 4rem);
		}
		.-ico-head3 {
			top: 2.2rem;
			left: calc(50% + 6rem);
		}
		.-ico-mesh1 {
			top: 5rem;
		}
		.-ico-mesh2 {
			top: 45rem;
		}
		.-ico-mesh3 {
			top: 151.5rem;
		}
		.-ico-mesh4 {
			bottom: 2rem;
			transform-origin: 100% 100%;
		}
	}
}
.p-work-intro {
	max-width: 120rem;
	margin-inline: auto;
	margin-top: 11rem;
	.intro-btns {
		display: flex;
		justify-content: space-between;
		li {
			width: 28rem;
		}
		a {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 24rem;
			padding-bottom: 2rem;
			border: .4rem solid #FFF;
			background: var(--color);
			box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.20);
			border-radius: 1.6rem;
			font-size: 2.8rem;
			line-height: 1.5;
			text-decoration: none;
			.ico {
				position: absolute;
				inset: -2.4rem 0 auto;
				width: 7rem;
				margin-inline: auto;
				background-color: #fff;
				border-radius: 100%;
			}
			.en {
				margin-top: 1rem;
				font-size: 1.8rem;
				font-weight: var(--font-weight-medium);
			}
			.c-ico-plus {
				right: 0;
				left: 0;
				margin-inline: auto;
				bottom: 3.5rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		margin-top: 5rem;
		.intro-btns {
			flex-wrap: wrap;
			gap: 2rem 1.6rem;
			li {
				width: calc(50% - 1.6rem / 2);
			}
			a {
				height: 14rem;
				padding-bottom: 0;
				box-shadow: 0 0 .8rem 0 rgba(0, 0, 0, 0.20);
				border-radius: 1.2rem;
				font-size: 1.7rem;
				.ico {
					top: -1.6rem;
					width: 5rem;
				}
				.en {
					margin-top: 0.2rem;
					font-size: 1.2rem;
				}
				.c-ico-plus {
					bottom: 0.5rem;
					transform-origin: 50%;
				}
			}
		}
	}
}
.p-work-contents {
	max-width: 130rem;
	margin-inline: auto;
	.tab {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 4rem;
		z-index: 3;
		li {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 34rem;
			height: 8rem;
			background-color: var(--color);
			font-size: 2rem;
			line-height: 1.5;
			border-radius: 2rem 2rem 0 0;
			transition: opacity var(--transition);
			cursor: pointer;
			&::after {
				content: "";
				position: absolute;
				top: calc(100% - 1px);
				right: 0;
				left: 0;
				width: 1.8rem;
				height: 1.4rem;
				background-color: var(--color);
				margin-inline: auto;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				opacity: 0;
				transition: opacity var(--transition);
			}
			&.is-active {
				opacity: 1 !important;
				&::after {
					opacity: 1;
				}
			}
			@media (hover) {
				&:hover {
					opacity: .7;
				}
			}
		}
	}
	.contents-wrap {
		position: relative;
		overflow: hidden;
		border-radius: 2rem;
		background: #fff;
		border: .4rem solid #fff;
		box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.20);
		.contents {
			width: 100%;
			position: absolute;
			top: -9999em;
			left: -9999em;
			opacity: 0;
			&.is-active {
				position: static;
				opacity: 1;
				transition: opacity .3s;
			}
			header {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				height: 28rem;
				background-color: color-mix(in srgb, var(--color) 20%, transparent);
				font-size: 4rem;
				line-height: 1.2;
				.en {
					margin-top: 1.5rem;
					font-size: 1.8rem;
					font-weight: var(--font-weight-medium);
				}
				&::after {
					content: "";
					display: block;
					width: 3rem;
					margin-inline: auto;
					margin-top: 2.6rem;
					border-top: .4rem solid var(--color);
				}
			}
			.item-list {
				display: flex;
				flex-wrap: wrap;
				padding: 10rem 9.6rem;
				gap: 2.5rem;
			}
			.item {
				padding: 3rem 4rem;
				width: calc((100% - 2.5rem * 2) / 3);
				background-color: #F5F5F5;
				border-radius: 1rem;
				font-size: 1.5rem;
				line-height: 2;
				font-weight: var(--font-weight-medium);
				h3 {
					position: relative;
					margin-bottom: 2rem;
					padding-bottom: 1.5rem;
					border-bottom: 1px solid;
					font-size: 2.4rem;
					line-height: 1.5;
					--ls: .05em;
					.s {
						position: absolute;
						right: 0;
						bottom: 1.8rem;
						font-size: 1.6rem;
					}
				}
				.tag {
					display: flex;
					flex-wrap: wrap;
					gap: 0.9rem;
					li {
						width: 8.4rem;
						margin-bottom: 2rem;
						a {
							display: flex;
							justify-content: center;
							align-items: center;
							height: 3rem;
							background-color: var(--color);
							border-radius: 10rem;
							font-size: 1.3rem;
							line-height: 1.4;
							font-weight: var(--font-weight-bold);
							text-decoration: none;
						}
					}
				}
			}
			.-ico-cloud {
				top: 4rem;
				right: 14rem;
			}
			.-ico-bird {
				top: 7rem;
				right: 33rem;
			}
			&#technical {
				.-ico1 {
					bottom: -3rem;
					left: 15rem;
				}
				.-ico2 {
					bottom: 3rem;
					left: 27rem;
				}
				.-ico3 {
					bottom: -4rem;
					right: 16rem;
				}
			}
			&#sales {
				.-ico1 {
					bottom: -3rem;
					left: 16rem;
				}
				.-ico2 {
					bottom: 5rem;
					left: 26rem;
				}
				.-ico3 {
					bottom: -3rem;
					right: 14rem;
				}
			}
			&#administrative {
				.-ico1 {
					bottom: 10rem;
					left: 15rem;
				}
				.-ico2 {
					bottom: 17rem;
					left: 30rem;
				}
				.-ico3 {
					bottom: -4.6rem;
					right: 16.5rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		.tab {
			gap: 1rem;
			li {
				width: 10rem;
				height: 6rem;
				font-size: 1.6rem;
				line-height: 1.5;
				border-radius: 1rem 1rem 0 0;
			}
		}
		.contents-wrap {
			border-radius: 1.2rem;
			.contents {
				header {
					height: 14rem;
					font-size: 2.8rem;
					.en {
						margin-top: .8rem;
						font-size: 1.2rem;
					}
					&::after {
						margin-top: 2rem;
					}
				}
				.item-list {
					padding: 2rem;
					gap: 1.5rem;
				}
				.item {
					padding: 2rem;
					width: 100%;
					font-size: 1.3rem;
					h3 {
						margin-bottom: 1.5rem;
						padding-bottom: 1rem;
						font-size: 1.8rem;
						.s {
							bottom: 1rem;
							font-size: 1.2rem;
						}
					}
					.tag {
						gap: 0.5rem;
						li {
							width: calc((100% - .5rem * 2) / 3);
							height: 2.4rem;
							margin-bottom: 1rem;
							font-size: 1.1rem;
						}
					}
				}
				.-ico-cloud {
					top: 0rem;
					right: -2rem;
				}
				.-ico-bird {
					top: 2rem;
					right: 7rem;
				}
				&#technical {
					.-ico1 {
						bottom: -2rem;
						left: 1rem;
					}
					.-ico2 {
						bottom: 3rem;
						left: 1rem;
					}
					.-ico3 {
						bottom: -4rem;
						right: 0rem;
					}
				}
				&#sales {
					.-ico1 {
						bottom: -4rem;
						left: 1rem;
					}
					.-ico2 {
						bottom: 3rem;
						left: -1rem;
					}
					.-ico3 {
						bottom: -1rem;
						right: 0rem;
					}
				}
				&#administrative {
					.-ico1 {
						bottom: 5rem;
						left: 1rem;
					}
					.-ico2 {
						bottom: 13rem;
						left: 2rem;
					}
					.-ico3 {
						bottom: -4rem;
						right: -5rem;
					}
				}
			}
		}
	}
}

/* ============================================================================

	先輩を知る

============================================================================= */
.-department1 {
	--color: var(--color-blue);
	--color-light: var(--color-blue-light);
}
.-department2 {
	--color: var(--color-red);
	--color-light: var(--color-red-light);
}
.-department3 {
	--color: var(--color-green);
	--color-light: var(--color-green-light);
}

.p-interview {
	background-color: #ffd84d;
	.l-main {
		padding-bottom: 20rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 10rem;
		}
	}

	.-ico-head1 {
		top: 12.2rem;
		right: calc(50% + 29rem);
	}
	.-ico-head2 {
		top: 5rem;
		left: calc(50% + 28.6rem);
	}
	.-ico-head3 {
		top: 11rem;
		left: calc(50% + 45.6rem);
	}
	.-ico-head4 {
		top: 15rem;
		left: calc(50% + 25.6rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 12.2rem;
			right: calc(50% + 11rem);
		}
		.-ico-head2 {
			top: 2rem;
			left: calc(50% + 1.6rem);
		}
		.-ico-head3 {
			top: 6rem;
			left: calc(50% + 11.6rem);
		}
		.-ico-head4 {
			top: 10rem;
			left: calc(50% + 9.6rem);
		}
	}

	.-ico-head-mesh1 {
		top: 33.7rem;
	}
	.-ico-head-mesh2 {
		top: 8.8rem;
	}
	.-ico-b1 {
		bottom: 6rem;
	}
	.-ico-b2 {
		bottom: 0;
	}
	@media screen and (max-width: 743px) {
		.-ico-head-mesh1 {
			top: 7.7rem;
		}
		.-ico-head-mesh2 {
			top: -2.2rem;
		}
		.-ico-b1 {
			bottom: 0rem;
		}
		.-ico-b2 {
			bottom: -6rem;
		}
	}
}
.p-interview-wrap {
	overflow: hidden;
	position: relative;
	padding-top: 13rem;
	z-index: 2;
	&::before {
		content: "";
		position: absolute;
		inset: 4rem 0 0;
		background: url(../img/logo.svg) no-repeat 50%;
		background-size: 140rem;
		filter: var(--white-filter);
		opacity: 0.3;
		z-index: -1;
	}
	.p-contents-ico {
		position: absolute;
		width: 17rem;
		pointer-events: none;
		user-select: none;
		z-index: -1;
		&.-ico1 {
			top: -2rem;
			left: calc(50% + 37rem);
		}
		&.-ico2 {
			top: 34rem;
			right: calc(50% + 56rem);
		}
		&.-ico3 {
			top: 59.4rem;
			left: calc(50% + 54rem);
		}
		&.-ico4 {
			top: 130rem;
			right: calc(50% + 56rem);
		}
		&.-ico5 {
			top: 157rem;
			left: calc(50% + 55rem);
		}
		img {
			display: none;
		}
	}
	@media screen and (max-width: 743px) {
		padding-top: 8rem;
		&::before {
			inset: 4rem 0 0;
			background-size: 100vw;
		}
		.p-contents-ico {
			transform: scale(0.55);
			&.-ico1 {
				top: -3rem;
				left: calc(50% + 5rem);
			}
			&.-ico2 {
				top: 43rem;
				right: calc(50% + 7rem);
			}
			&.-ico3 {
				top: 71.4rem;
				left: calc(50% + 6rem);
			}
			&.-ico4 {
				top: 144rem;
				right: calc(50% + 8rem);
			}
			&.-ico5 {
				top: 173rem;
				left: calc(50% + 5rem);
			}
		}
	}
}
.p-interview-list {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	z-index: 2;
	.interview-item {
		--ls: .05em;
		width: calc(52rem + .6rem * 2);
		a {
			position: relative;
			display: block;
			height: calc(30rem + .6rem * 2);
			border-radius: 100rem;
			border: .6rem solid var(--color-light);
			text-decoration: none;
			.img {
				position: absolute;
				inset: auto 0 0;
				overflow: hidden;
				border-radius: 0 0 15rem 15rem;
				text-align: right;
				img {
					width: calc(400 / 520 * 100%);
					margin-right: -1rem;
				}
			}
			.c-flag {
				position: absolute;
				left: 1rem;
				top: -2.5rem;
			}
			.title {
				position: absolute;
				left: 6rem;
				top: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				z-index: 3;
				.job {
					font-size: 1.4rem;
					line-height: 1.6;
				}
				.name {
					margin-top: .5rem;
					font-size: 2.6rem;
					line-height: 1.2;
					font-weight: var(--font-weight-medium);
				}
			}
			.arrow {
				position: absolute;
				right: -.2rem;
				top: calc(50% - 3rem / 2);
				width: 4.2rem;
				height: 3rem;
				background-color: var(--color-light);
				border-radius: 1.5rem 0 0 1.5rem;
				&::before {
					content: "";
					position: absolute;
					top: 0.5rem;
					left: 0.5rem;
					bottom: 0.5rem;
					width: 2rem;
					height: 2rem;
					background-color: #000;
					border-radius: 100%;
				}
				&::after {
					content: "";
					position: absolute;
					top: calc(50% - .8rem / 2);
					left: calc(1.5rem - .8rem / 2 + .2rem);
					bottom: 0.5rem;
					width: .7rem;
					height: .8rem;
					background-color: #fff;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
			}
			.bg {
				position: absolute;
				inset: 0;
				border-radius: 100rem;
				overflow: hidden;
				background-color: var(--color-light);
				z-index: -1;
			}
			@media (hover) {
				.img img {
					transition: transform .3s ease-in-out;
				}
				&:hover .img img {
					transform: scale(1.05);
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		justify-content: space-between;
		gap: 6rem;
		.interview-item {
			&:nth-child(2n) {
				margin-top: 10rem;
			}
			&:nth-child(4n + 1) {
				margin-left: 10rem;
			}
			&:nth-child(4n) {
				margin-right: 10rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: 1rem;
		flex-direction: column;
		gap: 6rem;
		.interview-item {
			width: calc(32rem + .4rem * 2);
			&:nth-child(2n) {
				margin-left: auto;
			}
			a {
				height: calc(18rem + .6rem * 2);
				border-width: .4rem;
				.img {
					border-radius: 0 0 9rem 9rem;
				}
				.c-flag {
					top: -1.5rem;
				}
				.title {
					left: 3rem;
					.job {
						font-size: 1.1rem;
					}
					.name {
						font-size: 2rem;
					}
				}
				.arrow {
					transform-origin: 100%;
					transform: scale(.8);
				}
			}
		}
	}
}

.p-interview-detail {
	.l-main {
		padding-bottom: 12rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}

	.p-ico {
	}
	.-ico-head1 {
		top: 5rem;
		left: calc(50% + 31rem);
	}
	.-ico-head2 {
		top: 7.6rem;
		left: calc(50% + 51rem);
	}
	.-ico-head3 {
		top: 6rem;
		right: calc(50% + 10rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			display: none;
			top: 3rem;
			left: auto;
			right: calc(50% - 17rem);
		}
		.-ico-head2 {
			display: none;
		}
		.-ico-head3 {
			top: 4.6rem;
			left: auto;
			right: calc(50% - 18rem);
		}
	}

	.-ico-head-mesh1 {
		top: 10.8rem;
	}
	.-ico-b1 {
		bottom: 6rem;
	}
	.-ico-b2 {
		bottom: 53rem;
	}
	@media screen and (max-width: 743px) {
		.-ico-head-mesh1 {
			top: 7.7rem;
		}
		.-ico-head-mesh2 {
			top: -2.2rem;
		}
		.-ico-b1 {
			bottom: 0rem;
		}
		.-ico-b2 {
			bottom: -6rem;
		}
	}
	@media screen and (max-width: 743px) {
		.-ico-head-mesh1 {
			top: 3rem;
		}
		.-ico-b1 {
			bottom: 0;
		}
		.-ico-b2 {
			bottom: 100rem;
		}
	}
}
.p-interview-detail-heading {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	padding-top: 9rem;
	margin-bottom: 18rem;
	.image-wrap {
		position: relative;
		.image {
			position: relative;
			overflow: hidden;
			border-radius: 2rem;
			height: 60rem;
			&::before {
				content: "";
				position: absolute;
				inset: 0 auto 0 0;
				width: 20%;
				background-color: var(--color);
			}
		}
		.page-title {
			--ls: .05em;
			z-index: 2;
			.box {
				width: fit-content;
				display: block;
				padding: 0.3rem 3rem;
				background-color: #fff;
				border: 2px solid #000;
				font-size: 4rem;
				line-height: 1.5;
				& + .box {
					margin-top: -2px;
				}
				.color {
					color: var(--color);
				}
			}
			.department {
				display: flex;
				flex-wrap: wrap;
				gap: 0 1em;
				width: fit-content;
				padding: 1rem 3rem;
				background-color: #000;
				color: #fff;
				font-size: 1.8rem;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.image-wrap {
			.page-title {
				position: absolute;
				left: 6rem;
				bottom: 6rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding-top: 7rem;
		margin-bottom: 5rem;
		.image-wrap {
			.image {
				margin-inline: -1rem;
				border-radius: 1rem;
				height: 22rem;
				&::before {
					width: 15%;
				}
			}
			.page-title {
				position: relative;
				margin-top: -2rem;
				.box {
					--ls: 0;
					padding: 0.4rem 1rem;
					border-width: 1px;
					font-size: 1.4rem;
					line-height: 1.5;
					& + .box {
						margin-top: -1px;
					}
				}
				.department {
					padding: 0.5rem 1rem;
					font-size: 1.1rem;
					line-height: 1.5;
				}
			}
		}
	}
}

.p-interview-detail-point-wrapper {
	position: relative;
	padding-bottom: 14rem;
	.-ico-point1 {
		top: 20rem;
	}
	.-ico-point2 {
		bottom: 0;
	}
	@media screen and (max-width: 743px) {
		padding-bottom: 6rem;
		.-ico-point1 {
			top: 10rem;
		}
		.-ico-point2 {
			transform-origin: 0 100% !important;
		}
	}
}

.p-interview-detail-marquee1 {
	color: #dcdddd;
	p:nth-child(2n) {
		color: var(--color);
	}
}

.p-interview-detail-point {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	margin-top: 16rem;
	padding: 0 10rem 10rem;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	--ls: .03em;
	color: #fff;
	z-index: 2;
	&::before {
		content: "";
		position: absolute;
		inset: calc((57.7rem + .6rem * 2) / 2) 0 0;
		background-color: var(--color);
		border-radius: 10rem;
		z-index: -1;
	}
	.img-block {
		position: relative;
		width: calc(100rem + .6rem * 2);
		margin-inline: auto;
		margin-bottom: 6rem;
		.bg {
			height: calc(57.7rem + .6rem * 2);
			border: .6rem solid var(--color-light);
			border-radius: 100rem;
			overflow: hidden;
		}
		.img {
			position: absolute;
			overflow: hidden;
			inset: auto .6rem .6rem;
			border-radius: calc(57.7rem / 2);
			img {
				display: block;
				width: 68rem;
				margin-inline: auto;
			}
		}
	}
	.features {
		--ls: .05em;
		li {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 40rem;
			min-height: 14rem;
			padding: 1rem 2rem;
			background-color: #fff;
			border: 2px solid #000;
			border-radius: 1rem;
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.8;
			color: #000;
			font-weight: var(--font-weight-bold);
			strong {
				color: var(--color);
			}
		}
	}
	.header {
		position: relative;
		margin-bottom: 5rem;
		text-align: center;
		h2 {
			text-align: center;
			svg {
				width: 68rem;
				.text {
					font-size: 4rem;
					color: #fff;
					fill: #fff;
					--ls: .1em;
				}
			}
		}
		.en {
			margin-top: -3rem;
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.5;
			font-weight: var(--font-weight-medium);
		}
		.ico {
			position: absolute;
			width: 5.4rem;
			&.-l {
				transform: rotate(-29deg);
				right: calc(50% + 28rem);
				top: 3.2rem;
			}
			&.-r {
				transform: rotate(29deg);
				left: calc(50% + 27rem);
				top: 2.8rem;
			}
		}
	}
	.illust {
		width: 11.7rem;
		right: 15.6rem;
		bottom: -6rem;
	}
	@media screen and (min-width: 744px), print {
		.features {
			position: absolute;
			left: 0;
			right: 0;
			top: -6rem;
			width: 122rem;
			margin-inline: auto;
			display: grid;
			grid-template-columns: auto auto;
			justify-content: space-between;
			gap: 14rem 0;
			li {
				min-width: 40rem;
				min-height: 14rem;
				&::before {
					content: "";
					position: absolute;
					top: 100%;
					width: 2rem;
					height: 2rem;
					background-color: #000;
				}
				&:nth-child(2n + 1)::before {
					right: 3rem;
					clip-path: polygon(0 0, 100% 0, 100% 100%);
				}
				&:nth-child(2n)::before {
					left: 3rem;
					clip-path: polygon(0 0, 100% 0, 0 100%);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		margin-top: 8rem;
		padding: 0 2rem 4rem;
		font-size: 1.3rem;
		&::before {
			top: calc((57.7rem * .3 + .4rem * 2) / 2);
			border-radius: 4rem;
		}
		.img-block {
			width: calc(100rem * .3 + .4rem * 2);
			margin-inline: auto;
			margin-bottom: 2rem;
			.bg {
				height: calc(57.7rem * .3 + .4rem * 2);
			}
			.img {
				inset: auto .4rem .4rem;
				border-radius: calc(57.7rem * .3 / 2);
				img {
					width: 22rem;
				}
			}
		}
		.features {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 3rem;
			li {
				width: fit-content;
				min-width: 20rem;
				min-height: 7rem;
				padding: 1rem 2rem;
				font-size: 1.5rem;
				line-height: 1.6;
				color: #000;
				&:nth-child(2n) {
					margin-left: auto;
				}
			}
		}
		.header {
			margin-bottom: 2rem;
			h2 {
				text-align: center;
				svg {
					width: 100%;
					.text {
						font-size: 4.8rem;
					}
				}
			}
			.en {
				margin-top: -1.5rem;
				font-size: 1.6rem;
			}
			.ico {
				width: 2.8rem;
				&.-l {
					right: calc(50% + 14.3rem);
					top: 1.7rem;
				}
				&.-r {
					left: calc(50% + 14rem);
					top: 1.5rem;
				}
			}
		}
		.illust {
			right: 2.6rem;
			bottom: -7rem;
		}
	}
}

.p-interview-detail-interview-wrapper {
	position: relative;
	background-color: var(--color);
	padding-block: 14rem;
	@media screen and (max-width: 743px) {
		padding-block: 7rem;
	}
}
.p-interview-detail-marquee2 {
	color: #fff;
	p:nth-child(2n) {
		opacity: 0.3;
	}
}
.p-interview-detail-box {
	position: relative;
	max-width: 130rem;
	margin-top: 10rem;
	margin-inline: auto;
	padding: 14rem 10rem;
	background-color: #fff;
	border-radius: 10rem;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	--ls: .03em;
	display: flex;
	flex-direction: column;
	gap: 8rem;
	.txt {
		display: flex;
		flex-direction: column;
		gap: 6rem;
		h3 {
			font-size: 2.6rem;
			line-height: 1.5;
			--ls: .06em;
		}
		strong {
			color: var(--color);
		}
	}
	.ph {
		img {
			border-radius: 1rem;
		}
	}
	@media screen and (min-width: 744px), print {
		.ph-column {
			display: flex;
			gap: 8rem;
			.ph {
				width: 42rem;
				flex-shrink: 0;
			}
			&.-ph-left {
				flex-direction: row-reverse;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 5rem;
		margin-inline: var(--sp-base-padding);
		padding: 4rem var(--sp-base-padding);
		background-color: #fff;
		border-radius: 4rem;
		font-size: 1.3rem;
		gap: 4rem;
		.txt {
			gap: 4rem;
			h3 {
				font-size: 2rem;
			}
		}
		.ph {
			margin-top: 3rem;
		}
	}
}

.p-interview-detail-schedule-wrapper {
	position: relative;
	padding-top: 14rem;
	.c-marquee-inner {
		animation-duration: calc(1200 / 920 * 10s);
	}
	@media screen and (max-width: 743px) {
		padding-top: 7rem;
	}
}
.p-interview-detail-schedule {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 8rem;
	max-width: 130rem;
	margin-top: 13rem;
	margin-inline: auto;
	font-weight: var(--font-weight-medium);
	font-size: 1.6rem;
	line-height: 2;
	h2 {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 3rem;
		font-size: 2.6rem;
		line-height: 1.5;
		--ls: .1em;
		.ico {
			flex-shrink: 0;
			width: 6rem;
			border-radius: 100%;
			background-color: var(--color);
		}
	}
	.day-schedule {
		position: relative;
		margin-top: 7rem;
		dl {
			position: relative;
			display: flex;
			font-size: 1.8rem;
			line-height: 1.5;
			&::after {
				content: "";
				position: absolute;
				top: calc(.5lh - 1.8rem / 2);
				left: calc(8.6rem - 1.8rem / 2);
				width: 1.8rem;
				height: 1.8rem;
				background-color: #fff;
				border: .4rem solid var(--color);
				border-radius: 100%;
				box-shadow: 0 0 0 .6rem #dcdddd;
			}
			&:not(:last-child) {
				min-height: 8rem;
				padding-bottom: 3rem;
				&::before {
					content: "";
					position: absolute;
					top: 1rem;
					bottom: -1rem;
					left: calc(8.6rem - .2rem / 2);
					border-left: .2rem solid var(--color);
					z-index: -1;
				}
			}
			dt {
				width: 12rem;
				flex-shrink: 0;
				font-weight: var(--font-weight-medium);
			}
		}
	}
	.month-schedule {
		width: 100%;
		table-layout: fixed;
		border-spacing: 1px;
		border-collapse: separate;
		margin-top: 2rem;
		thead th {
			height: 5rem;
			text-align: center;
			font-size: 1.4rem;
		}
		tbody {
			td {
				height: 9rem;
				padding: 0.5em;
				background-color: #E5E5E5;
				text-align: center;
				font-size: 1.2rem;
				line-height: 1.6;
				font-weight: var(--font-weight-medium);
				&:nth-child(2n + 1) {
					background-color: #DCDDDD;
				}
				&:nth-child(1) {
					background-color: #FFA3A3;
				}
				&:nth-child(7) {
					background-color: #88D6FB;
				}
			}
			tr:first-child {
				td:first-child {
					border-top-left-radius: 1rem;
				}
				td:last-child {
					border-top-right-radius: 1rem;
				}
			}
			tr:last-child {
				td:first-child {
					border-bottom-left-radius: 1rem;
				}
				td:last-child {
					border-bottom-right-radius: 1rem;
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.month {
			width: 63rem;
			flex-shrink: 0;
		}
	}
	@media screen and (max-width: 743px) {
		flex-direction: column;
		gap: 4rem;
		margin-top: 6rem;
		margin-inline: var(--sp-base-padding);
		font-size: 1.3rem;
		h2 {
			margin-bottom: 2rem;
			font-size: 2rem;
			.ico {
				width: 4rem;
			}
		}
		.day-schedule {
			margin-top: 4rem;
			dl {
				font-size: 1.5rem;
				&::after {
					top: calc(.5lh - 1.6rem / 2);
					left: calc(7.6rem - 1.6rem / 2);
					width: 1.6rem;
					height: 1.6rem;
				}
				&:not(:last-child) {
					min-height: 6rem;
					padding-bottom: 2rem;
					&::before {
						left: calc(7.6rem - .2rem / 2);
					}
				}
				dt {
					width: 10rem;
				}
			}
		}
		.month-schedule {
			margin-top: 1rem;
			thead th {
				height: 4rem;
			}
			tbody {
				td {
					height: 5rem;
					font-size: 1rem;
				}
			}
		}
	}
}

.p-interview-detail-message {
	position: relative;
	max-width: 110rem;
	margin-top: 14rem;
	margin-inline: auto;
	padding: 6rem 9rem 9rem;
	background-color: #fff;
	border-radius: 100rem;
	text-align: center;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	--ls: .03em;
	.header {
		position: relative;
		margin-bottom: 5rem;
		text-align: center;
		h2 {
			text-align: center;
			svg {
				width: 68rem;
				.text {
					font-size: 4rem;
					--ls: .1em;
				}
			}
		}
		.en {
			margin-top: -3rem;
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.5;
			font-weight: var(--font-weight-medium);
		}
	}
	.p-ico {
		z-index: 2;
		&.ico1 {
			width: 11.7rem;
			left: 17rem;
			top: -5.5rem;
		}
		&.ico2 {
			width: 6.9rem;
			right: 22rem;
			top: 2rem;
		}
		&.ico3 {
			width: 15.8rem;
			right: -8rem;
			top: 100%;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 7rem;
		margin-inline: var(--sp-base-padding);
		padding: 3rem 2rem;
		border-radius: 4rem;
		font-size: 1.3rem;
		text-align: left;
		.header {
			margin-bottom: 2rem;
			h2 {
				svg {
					width: 100%;
				}
			}
			.en {
				margin-top: -2rem;
				font-size: 1.6rem;
			}
		}
		.p-ico {
			transform: scale(.6);
			&.ico1 {
				left: -1rem;
			}
			&.ico2 {
				right: 1rem;
				top: -2rem;
			}
			&.ico3 {
				right: -3rem;
				top: 80%;
			}
		}
	}
}


/* ============================================================================

	導入事例

============================================================================= */
.p-case {
	background-color: #2fd5c2;
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}

	.-ico-head1 {
		top: 16.4rem;
		right: calc(50% + 45.6rem);
	}
	.-ico-head2 {
		top: 7.4rem;
		right: calc(50% + 27.6rem);
	}
	.-ico-head3 {
		top: 6.4rem;
		left: calc(50% + 28rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 11.2rem;
			right: calc(50% + 13rem);
		}
		.-ico-head2 {
			top: 2.2rem;
			right: calc(50% + 5rem);
		}
		.-ico-head3 {
			top: 1.2rem;
			left: calc(50% + 8rem);
		}
	}
}
.p-case-wrap {
	display: flex;
	flex-direction: column;
	gap: 26.4rem;
	& > * {
		position: relative;
		max-width: 140rem;
		width: calc(100% - var(--pc-base-padding));
		margin-inline: auto;
		.-mesh {
			top: -18rem;
		}
	}
	@media screen and (max-width: 743px) {
		gap: 18rem;
		& > * {
			width: auto;
			margin-inline: var(--sp-base-padding);
		}
	}
}

.p-case-main {
	max-width: 136rem;
	margin-inline: auto;
	.image {
		overflow: hidden;
		position: relative;
		border-radius: 3rem;
		a {
			position: absolute;
			width: 15.3rem;
			height: 18rem;
			opacity: 0;
			transform: scale(0);
			z-index: 2;
			img {
				display: block;
				filter: drop-shadow(0 .6rem 1rem rgba(0, 0, 0, 0.30));
			}
			&.case01 {
				top: 57.5rem;
				left: 43.2rem;
			}
			&.case02 {
				top: 44rem;
				left: 17.8rem;
			}
			&.case03 {
				top: 53.5rem;
				left: 109.2rem;
			}
			&.case04 {
				top: 47.5rem;
				left: 69.8rem;
			}
			&.case05 {
				top: 33.5rem;
				left: 44.6rem;
			}
			@media (hover) {
				img {
					transition: transform var(--transition);
				}
				&:hover {
					img {
						transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
						transform: scale(1.1);
					}
				}
			}
		}
	}
	&.is-nav-show {
		a {
			--detay: .4s;
			opacity: 1;
			transform: scale(1);
			transition: opacity .3s linear, transform .6s cubic-bezier(0.22, 1.8, 0.36, 1);
			&.case01 {
				transition-delay: calc(var(--detay) * 0);
			}
			&.case02 {
				transition-delay: calc(var(--detay) * 1);
			}
			&.case03 {
				transition-delay: calc(var(--detay) * 2);
			}
			&.case04 {
				transition-delay: calc(var(--detay) * 3);
			}
			&.case05 {
				transition-delay: calc(var(--detay) * 4);
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: 0;
		.image {
			border-radius: 0;
			height: 29rem;
			.image-inner {
				width: 136rem;
				transform-origin: 0 0;
				transform: scale(.3) translateX(-3rem);
			}
			a {
				img {
					transform-origin: 50% 100%;
					transform: scale(1.5);
				}
			}
		}
	}
}
.p-case-contents {
	position: relative;
	padding: 16rem 10rem 12rem;
	background-color: #fff;
	border-radius: 10rem;
	scroll-margin-top: calc(var(--header-height) + var(--target-margin) + 15rem);
	font-size: 1.6rem;
	line-height: 2;
	font-weight: var(--font-weight-medium);
	--ls: .03em;
	.box-title {
		position: absolute;
		top: calc(12.6rem / -2);
		right: 0;
		left: 0;
		height: 12.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3.6rem;
		line-height: 1.6;
		--ls: .05em;
		border-radius: 1.6rem;
		border: .4rem solid #fff;
		background: var(--bg);
		box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.20);
		.case {
			position: absolute;
			right: 0;
			left: 0;
			top: -10.4rem;
			width: 20rem;
			height: 20rem;
			margin-inline: auto;
			padding-top: 4rem;
			background-color: #fff;
			border-radius: 100%;
			text-align: center;
			font-weight: var(--font-weight-medium);
			font-size: 2rem;
			line-height: 1;
			z-index: -1;
			.num {
				font-size: 200%;
				margin-left: 0.02em;
			}
		}
	}
	.content {
		section {
			padding-left: 6rem;
			h3 {
				position: relative;
				margin-bottom: 2rem;
				font-size: 2.4rem;
				line-height: 1.6;
				--ls: .05em;
				.q {
					position: absolute;
					left: -6rem;
					font-size: 2.6rem;
					font-weight: var(--font-weight-medium);
					color: var(--color);
					line-height: 1.5;
				}
			}
			& + section {
				margin-top: 4rem;
				padding-top: 4rem;
				border-top: 1px solid var(--border);
			}
		}
	}
	.job {
		position: relative;
		border-radius: 2rem;
		border: .4rem solid #fff;
		background: var(--bg);
		padding: 0.6rem;
		box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.20);
		font-size: 1.4rem;
		.title {
			position: absolute;
			top: -2.4rem;
			left: 1.5rem;
			width: 17.4rem;
			height: 6.6rem;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 1.6rem;
			background: url(../img/case/job-clip.svg) no-repeat 50%;
			background-size: 100%;
			font-size: 1.6rem;
			--ls: .1em;
			transform: rotate(-8.55deg);
		}
		.img {
			img {
				border-radius: 1rem;
			}
		}
		.txt {
			padding: 4rem 4.6rem;
			.service {
				margin-top: 1lh;
				ul {
					display: flex;
					flex-wrap: wrap;
					gap: 0 1em;
				}
			}
		}
	}
	.-ico {
		z-index: 2;
	}
	&.-case01 {
		--bg: #FDDA8D;
		--color: #F6AB00;
		.-ico {
			width: 9rem;
			left: 9rem;
			bottom: -10rem;
		}
	}
	&.-case02 {
		--bg: #FFF9B7;
		--color: #FAD250;
		.-ico {
			width: 12.2rem;
			right: 9rem;
			bottom: -10rem;
		}
	}
	&.-case03 {
		--bg: #B3E7FF;
		--color: #7ECEF4;
		.-ico {
			width: 7.6rem;
			left: 10rem;
			bottom: -9rem;
		}
	}
	&.-case04 {
		--bg: #FFD7D7;
		--color: #FAB4B4;
		.-ico {
			width: 8.7rem;
			right: 9rem;
			bottom: -11rem;
		}
	}
	&.-case05 {
		--bg: #C5FFDC;
		--color: #64B48C;
		.-ico {
			width: 7rem;
			left: 9rem;
			bottom: -10rem;
		}
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		align-items: start;
		gap: 8rem;
		padding-inline: min(10rem, calc((100% - var(--pc-base-padding) - 120rem) / 2));
		&:nth-child(2n + 1) {
			flex-direction: row-reverse;
		}
		.box-title {
			max-width: 120rem;
			margin-inline: auto;
			&.-m {
				--ls: 0;
				font-size: 3.4rem;
			}
		}
		.job {
			width: 48rem;
			flex-shrink: 0;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 8rem 2rem 2rem;
		border-radius: 3rem;
		scroll-margin-top: calc(var(--header-height) + var(--target-margin) + 11rem);
		font-size: 1.3rem;
		.box-title {
			top: calc(9rem / -2);
			right: 2rem;
			left: 2rem;
			min-height: 9rem;
			height: auto;
			padding-block: .6rem;
			font-size: 1.8rem;
			border-radius: 1rem;
			text-align: center;
			.case {
				top: -7.4rem;
				width: 15rem;
				height: 15rem;
				padding-top: 3rem;
				font-size: 1.5rem;
			}
			&.-m {
				--ls: 0;
				right: 1rem;
				left: 1rem;
				font-size: 1.7rem;
			}
		}
		.content {
			section {
				padding-left: 0;
				h3 {
					padding-left: 4rem;
					margin-bottom: 1.5rem;
					font-size: 1.8rem;
					.q {
						left:0;
						font-size: 2rem;
					}
				}
				& + section {
					margin-top: 3rem;
					padding-top: 3rem;
				}
			}
		}
		.job {
			margin-top: 4rem;
			box-shadow: 0 0 .8rem 0 rgba(0, 0, 0, 0.20);
			font-size: 1.1rem;
			.title {
				top: -3rem;
				left: -1rem;
				transform: scale(.8) rotate(-8.55deg);
			}
			.txt {
				padding: 1.2rem 1.2rem 2rem;
			}
		}
		&.-case01 {
			.-ico {
				left: 0;
				bottom: -11rem;
			}
		}
		&.-case02 {
			.-ico {
				right: 0;
			}
		}
		&.-case03 {
			.-ico {
				left: 0;
				bottom: -10rem;
			}
		}
		&.-case04 {
			.-ico {
				right: 1rem;
				bottom: -9rem;
			}
		}
		&.-case05 {
			.-ico {
				left: 0;
			}
		}
	}
}


/* ============================================================================

	3人で語るHOTnet

============================================================================= */
.p-workplace {
	background-color: #d6aeea;
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}

	.-ico-head1 {
		top: 7.2rem;
		right: calc(50% + 32.8rem);
	}
	.-ico-head2 {
		top: 17.2rem;
		right: calc(50% + 42.8rem);
	}
	.-ico-head3 {
		top: 11.5rem;
		left: calc(50% + 41rem);
	}
	.-ico-head4 {
		top: 8.5rem;
		left: calc(50% + 52rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 5.4rem;
			right: calc(50% + 4rem);
		}
		.-ico-head2 {
			top: 14.4rem;
			right: calc(50% + 1rem);
		}
		.-ico-head3 {
			top: 9rem;
			left: calc(50% + 13.4rem);
		}
		.-ico-head4 {
			top: 7rem;
			left: calc(50% + 11.4rem);
		}
	}
}

.c-workplace-number {
	--ls: .05em;
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
	padding-top: 1.4rem;
	font-size: 1.4rem;
	line-height: 1.4;
	font-weight: var(--font-weight-medium);
	.ico {
		position: relative;
		top: -1.4rem;
		width: 6rem;
		margin-right: 3rem;
	}
	.num {
		margin-left: 2rem;
		padding-left: 2rem;
		border-left: 2px solid var(--border);
		font-size: 4.2rem;
		line-height: 0.7;
	}
	@media screen and (max-width: 743px) {
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding-top: 0.8rem;
		font-size: 1.1rem;
		.ico {
			top: -0.8rem;
			width: 4.4rem;
			margin-right: 2rem;
		}
		.num {
			margin-left: 1.5rem;
			padding-left: 1rem;
			font-size: 3rem;
			line-height: 0.9;
		}
	}
}
.p-workplace-list {
	display: flex;
	flex-direction: column;
	gap: 8rem;
	margin-top: 11rem;
	article {
		position: relative;
		padding-block: 8rem;
		--ls: .05em;
		a {
			display: block;
			text-decoration: none;
			.ph {
				position: relative;
				aspect-ratio: 600 / 420;
				border-radius: 2rem;
				overflow: hidden;
			}
			h2 {
				font-size: 3.4rem;
				line-height: 1.6;
			}
			.c-btn {
				margin: 5rem 0 0;
			}
		}
		&:nth-child(5n + 1) .p-ico.-mesh {
			top: 30%;
		}
		&:nth-child(1) .p-ico.-mesh {
			top: -15rem;
		}
		&:nth-child(5n + 2) .p-ico.-mesh {
			top: 60%;
		}
		&:nth-child(5n + 3) .p-ico.-mesh {
			top: 55%;
		}
		&:nth-child(5n + 4) .p-ico.-mesh {
			top: 50%;
		}
		&:nth-child(5n) .p-ico.-mesh {
			top: 40%;
		}
		.p-ico:not(.-mesh) {
			z-index: 2;
		}
		.p-ico.-ico01 {
			width: 15.8rem;
			bottom: 10.2rem;
		}
		.p-ico.-ico03 {
			width: 11.9rem;
			bottom: -4.6rem;
		}
		.p-ico.-ico04 {
			width: 11.7rem;
			bottom: -4rem;
		}
		.p-ico.-ico05 {
			width: 11.7rem;
			bottom: -4.6rem;
		}
		&:nth-child(2n + 1) {
			.p-ico.-ico01 {
				left: calc(50% + 53.4rem);
			}
			.p-ico.-ico03 {
				left: calc(50% + 44.2rem);
			}
			.p-ico.-ico04 {
				left: calc(50% + 6.6rem);
			}
			.p-ico.-ico05 {
				left: calc(50% + 45.8rem);
			}
		}
		&:nth-child(2n) {
			.p-ico.-ico01 {
				right: calc(50% + 53.4rem);
				bottom: 4.2rem;
			}
			.p-ico.-ico03 {
				right: calc(50% + 44.2rem);
			}
			.p-ico.-ico04 {
				right: calc(50% + 6.6rem);
			}
			.p-ico.-ico05 {
				right: calc(50% + 45.8rem);
			}
		}
	}
	@media screen and (min-width: 744px), print {
		article {
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				width: calc(50% + 65rem);
				background-color: #fff;
				z-index: -1;
			}
			&:nth-child(2n + 1)::before {
				right: auto;
				border-radius: 0 10rem 10rem 0;
			}
			&:nth-child(2n)::before {
				left: auto;
				border-radius: 10rem 0 0 10rem;
			}
			a {
				display: flex;
				max-width: 130rem;
				margin-inline: auto;
				.ph {
					width: 60rem;
				}
				.txt {
					width: 70rem;
					padding-left: 10rem;
				}
			}
			&:nth-child(2n) a {
				flex-direction: row-reverse;
			}
		}
	}
	@media screen and (max-width: 743px) {
		gap: 4rem;
		margin-top: 6rem;
		article {
			position: relative;
			padding: 2rem 2rem 4rem;
			background-color: #fff;
			&:nth-child(2n + 1) {
				margin-right: 3rem;
				border-radius: 0 3rem 3rem 0;
			}
			&:nth-child(2n) {
				margin-left: 3rem;
				border-radius: 3rem 0 0 3rem;
			}
			a {
				h2 {
					font-size: 2.4rem;
				}
				.c-btn {
					margin-top: 3rem;
				}
			}
			.p-ico.-ico01 {
				bottom: 7.2rem;
			}
			.p-ico.-ico04 {
				bottom: -6.4rem;
			}
			.p-ico.-ico05 {
				bottom: -3.6rem;
			}
			&:nth-child(2n + 1) {
				.p-ico.-ico01 {
					left: calc(50% + 8rem);
				}
				.p-ico.-ico03 {
					left: calc(50% + 6rem);
				}
				.p-ico.-ico04 {
					left: calc(50% + 5rem);
					bottom: -4.4rem;
				}
				.p-ico.-ico05 {
					left: calc(50% + 8rem);
				}
			}
			&:nth-child(2n) {
				.p-ico.-ico01 {
					right: calc(50% + -19rem);
					bottom: -4.8rem;
				}
				.p-ico.-ico03 {
					right: calc(50% + 11.2rem);
					bottom: -5.6rem;
				}
				.p-ico.-ico04 {
					right: calc(50% - 14.4rem);
				}
				.p-ico.-ico05 {
					right: calc(50% - 17.2rem);
				}
			}
		}
	}
}


.p-workplace-detail {
	background-color: #d6aeea;
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}
	.p-ico {
		&.-ico-head1 {
			width: 31.9rem;
			top: 7.2rem;
			right: calc(50% + 32.8rem);
		}
		&.-ico-head2 {
			width: 21.1rem;
			top: 8.5rem;
			left: calc(50% + 41rem);
		}
		@media screen and (max-width: 743px) {
			&.-ico-head1 {
				top: -5.6rem;
				right: calc(50% + -7rem);
			}
			&.-ico-head2 {
				top: -6rem;
				left: calc(50% + 3.4rem);
			}
		}
	}
}
.p-workplace-detail-heading {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	padding-top: 9rem;
	margin-bottom: 8rem;
	.c-workplace-number {
		position: absolute;
		right: 0;
		top: 8rem;
	}
	.image-wrap {
		position: relative;
		margin-top: 4rem;
		.image {
			position: relative;
			overflow: hidden;
			border-radius: 2rem;
			height: 58rem;
		}
		.page-title {
			--ls: .05em;
			position: absolute;
			left: 6rem;
			bottom: 6rem;
			z-index: 2;
			padding: 0.2rem 3rem;
			background-color: #fff;
			border: 2px solid #000;
			font-size: 4rem;
			line-height: 1.5;
		}
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding-top: 7rem;
		margin-bottom: 3rem;
		.c-workplace-number {
			top: 7rem;
			transform-origin: 100%;
			transform: scale(.8);
			.ico {
				display: none;
			}
		}
		.image-wrap {
			margin-top: 0;
			.image {
				border-radius: 1rem;
				height: 22rem;
			}
			.page-title {
				left: 1.5rem;
				bottom: 1.5rem;
				padding: 0.15rem 1.5rem;
				border-width: 1px;
				font-size: 2.4rem;
				line-height: 1.5;
			}
		}
	}
}
.p-workplace-detail-contents {
	position: relative;
	max-width: 130rem;
	margin-top: 16rem;
	margin-inline: auto;
	padding: 2rem 15rem 16rem;
	background-color: #fff;
	border-radius: 10rem;
	&::before {
		content: "";
		position: absolute;
		inset: -9rem 0 auto;
		margin-inline: auto;
		width: 30rem;
		height: 30rem;
		border-radius: 100%;
		background-color: #fff;
		z-index: -1;
	}
	.point-ico {
		position: absolute;
		right: 0;
		left: 0;
		top: -5.4rem;
		width: 6rem;
		margin-inline: auto;
	}

	.staff {
		position: relative;
		padding-bottom: 8rem;
		text-align: center;
		border-bottom: 1px solid var(--border);
		h2 {
			text-align: center;
			svg {
				width: 68rem;
				.text {
					font-size: 4rem;
					--ls: .1em;
				}
			}
		}
		.en {
			margin-top: -3rem;
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.5;
			font-weight: var(--font-weight-medium);
		}
		.staff-list {
			display: flex;
			margin-top: 6rem;
			li {
				position: relative;
				padding-top: 5rem;
				.img {
					position: relative;
					aspect-ratio: 280 / 120;
					border-radius: 10rem;
					background-color: #f1f1f1;
					img {
						position: absolute;
						bottom: 0;
						right: 0;
						left: 0;
						width: calc(200 / 280 * 100%);
						margin-inline: auto;
					}
				}
				dl::after {
					content: "";
					display: block;
					width: 2rem;
					border-top: 2px solid var(--color);
					margin-inline: auto;
					margin-top: 2rem;
				}
				dt {
					margin-block: 1.5rem 1rem;
					font-size: 2.4rem;
					line-height: 1.6;
					font-weight: var(--font-weight-medium);
				}
				dd {
					font-weight: var(--font-weight-medium);
					font-size: 1.4rem;
					line-height: 1.8;
				}
				.profile {
					margin-top: 2rem;
					font-size: 1.3rem;
					line-height: 1.8;
					text-align: left;
					font-weight: var(--font-weight-medium);
				}
			}
		}
		.staff-list-fixed {
			position: fixed;
			top: var(--header-height);
			right: 0;
			left: 0;
			opacity: 0;
			pointer-events: none;
			max-width: 130rem;
			margin-inline: auto;
			padding: 0 15rem;
			background-color: #fff;
			transition: opacity .3s;
			z-index: 3;
			.staff-list {
				align-items: start;
				height: 16rem;
				margin-top: 0;
				border-bottom: 1px solid var(--border);
				li {
					padding-top: 4rem;
					.img {
						width: 18rem;
						margin-inline: auto;
						aspect-ratio: 280 / 100;
						img {
							height: auto;
							aspect-ratio: 10 / 8;
							object-fit: cover;
							object-position: 50% 0;
						}
					}
					dl::after {
						margin-top: 0rem;
					}
					dt {
						margin-block: 1rem 0;
						font-size: 1.8rem;
						line-height: 1.6;
						font-weight: var(--font-weight-medium);
					}
					dd,
					.profile {
						display: none;
					}
				}
			}
			&.is-show {
				opacity: 1;
				pointer-events: auto;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.staff {
			.staff-list {
				justify-content: center;
				gap: 8rem;
				li {
					position: relative;
					width: calc((100% - 8rem * 2) / 3);
					& + li::before {
						content: "";
						position: absolute;
						left: -4rem;
						top: 0;
						bottom: 0;
						border-left: 1px solid var(--border);
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		margin-inline: var(--sp-base-padding);
		padding: 2rem 2rem 5rem;
		border-radius: 4rem;
		&::before {
			top: -5rem;
			width: 15rem;
			height: 15rem;
		}
		.point-ico {
			top: -3rem;
			width: 4rem;
		}

		.staff {
			padding-bottom: 4rem;
			h2 {
				svg {
					width: 100%;
					.text {
						font-size: 5rem;
					}
				}
			}
			.en {
				margin-top: -2rem;
				font-size: 1.6rem;
			}
			.staff-list {
				flex-direction: column;
				gap: 2rem;
				margin-top: 0;
				li {
					display: flex;
					align-items: end;
					flex-wrap: wrap;
					padding-top: 0;
					.img {
						flex-shrink: 0;
						width: 40%;
						margin-right: 2rem;
						margin-top: 3rem;
					}
					dl {
						width: calc(60% - 2rem);
						text-align: left;
						&::after {
							content: none;
						}
						dt {
							width: fit-content;
							margin-block: 0 .5rem;
							font-size: 1.8rem;
							&::after {
								content: "";
								display: block;
								border-top: 2px solid var(--color);
							}
						}
						dd {
							font-size: 1rem;
						}
					}
					.profile {
						margin-top: .6rem;
						font-size: 1rem;
						width: calc(60% - 2rem);
						margin-left: auto;
					}
				}
			}
			.staff-list-fixed {
				padding: 0;
				margin-inline: var(--sp-base-padding);
				border-radius: 0;
				.staff-list {
					flex-direction: row;
					align-items: start;
					justify-content: center;
					gap: 1rem;
					height: 9.5rem;
					li {
						display: block;
						width: 25vw;
						padding-top: 0;
						.img {
							width: 100%;
							margin-top: 2rem;
						}
						dl {
							width: auto;
							&::after {
								content: "";
								margin-top: 0;
							}
							dt {
								width: auto;
								text-align: center;
								margin-block: .5rem 0;
								font-size: 1.4rem;
								&::after {
									content: none;
								}
							}
						}
					}
				}
			}
		}
	}
	.discussion {
		position: relative;
		margin-top: 14rem;
		font-weight: var(--font-weight-medium);
		font-size: 1.6rem;
		line-height: 2;
		.title {
			--ls: .05em;
		}
		.talk {
			--ls: .03em;
			display: flex;
			align-items: start;
			&:not(:last-child) {
				margin-bottom: 4.4rem;
			}
			.speaker {
				font-weight: var(--font-weight-medium);
				font-size: 2rem;
				line-height: 1.6;
				border-bottom: 2px solid var(--color);
			}
			strong, em {
				font-weight: var(--font-weight-bold);
				background: #ebd7f5;
			}
		}
	}
	.discussion_ph {
		margin-top: 10rem;
		margin-inline: -5rem;
		img {
			border-radius: 1rem;
		}
	}
	@media screen and (min-width: 744px), print {
		.discussion {
			display: grid;
			grid-template-columns: 21rem 1fr;
			align-items: start;
			.title {
				position: sticky;
				top: calc(var(--header-height) + 16rem + 2rem);
				display: flex;
				flex-direction: row-reverse;
				justify-content: start;
				align-items: start;
				& > * {
					writing-mode: vertical-rl;
					text-orientation: upright;
				}
				h2 {
					font-size: 3.2rem;
					line-height: 1.5;
				}
				.lead {
					position: relative;
					margin-left: 1rem;
					font-weight: var(--font-weight-bold);
					font-size: 2.2rem;
					&::after {
						content: "";
						position: absolute;
						top: calc(100% + 0.8em);
						left: 50%;
						border-left: 1px solid;
						height: 4rem;
					}
				}
			}
			.talk {
				justify-content: space-between;
				.body {
					width: calc(100% - 9rem);
				}
			}
			&.-even {
				grid-template-columns: 1fr 21rem;
				.title {
					order: 2;
					justify-content: end;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		.discussion {
			margin-top: 4rem;
			font-size: 1.3rem;
			.title {
				margin-bottom: 2rem;
				h2 {
					font-size: 1.8rem;
					line-height: 1.5;
				}
				.lead {
					position: relative;
					width: fit-content;
					font-weight: var(--font-weight-bold);
					font-size: 1.5rem;
					&::after {
						content: "";
						position: absolute;
						left: calc(100% + 0.8em);
						top: 50%;
						border-top: 1px solid;
						width: 2rem;
					}
				}
			}
			.talk {
				gap: 2rem;
				&:not(:last-child) {
					margin-bottom: 2rem;
				}
				.speaker {
					flex-shrink: 0;
					font-size: 1.6rem;
				}
				em {
					font-weight: inherit;
					background: linear-gradient(transparent 66%, #ebd7f5 66%);
				}
			}
		}
		.discussion_ph {
			margin-top: 4rem;
			margin-inline: -1rem;
			img {
				border-radius: .6rem;
			}
		}
	}
	.p-ico {
		z-index: 4;
		&.-ico-main {
			width: 11.7rem;
			top: -17rem;
			right: calc(50% + 46.4rem);
		}
		&.-ico1 {
			width: 22.6rem;
			top: calc(1630 / 9200 * 100%);
			left: -9rem;
		}
		&.-ico2 {
			width: 11.7rem;
			top: calc(3140 / 9200 * 100%);
			left: -4rem;
		}
		&.-ico3 {
			width: 11.7rem;
			top: calc(5200 / 9200 * 100%);
			left: -3rem;
		}
		&.-ico4 {
			width: 15.8rem;
			top: calc(8200 / 9200 * 100%);
			left: -6rem;
		}
		@media screen and (max-width: 743px) {
			&.-ico-main {
				top: -8rem;
				right: calc(50% + 7rem);
			}
			&.-ico1,
			&.-ico2,
			&.-ico3,
			&.-ico4 {
				display: none;
			}
		}
	}
}

.p-workplace-detail-other-nav {
	position: relative;
	max-width: 130rem;
	margin-top: 16rem;
	margin-inline: auto;
	padding: 13rem 15rem 8rem;
	background-color: #fff;
	border-radius: 10rem;
	z-index: 2;
	.other-nav {
		margin-top: 10rem;
		article:not(:last-child) {
			margin-bottom: 6rem;
			padding-bottom: 6rem;
			border-bottom: 1px solid var(--border);
		}
		a {
			--ls: .05em;
			position: relative;
			display: block;
			text-decoration: none;
			.ph-wrap {
				position: relative;
			}
			.ph {
				overflow: hidden;
				position: relative;
				aspect-ratio: 400 / 250;
				border-radius: 1rem;
			}
			h3 {
				font-size: 3rem;
				line-height: 1.6;
			}
			.arrow {
				position: absolute;
				width: 4rem;
				height: 3rem;
				right: 0;
				bottom: 2rem;
				background-color: #D6AEEA;
				border-radius: 1.5rem 0 0 1.5rem;
				z-index: 2;
				&::before {
					content: "";
					position: absolute;
					inset: .5rem;
					right: auto;
					width: 2rem;
					height: 2rem;
					background-color: #000;
					border-radius: 100%;
				}
				&::after {
					content: "";
					position: absolute;
					inset: 0 1rem 0 .2rem;
					width: .6rem;
					height: .8rem;
					margin: auto;
					background-color: #fff;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
			}
		}
	}
	.p-ico.-ico {
		width: 11.9rem;
		top: -4rem;
		left: calc(50% + 29rem);
	}
	@media screen and (min-width: 744px), print {
		&::before {
			content: "";
			position: absolute;
			inset: 0 auto 0 50%;
			width: 100%;
			background-color: #fff;
			z-index: -1;
		}
		.other-nav {
			a {
				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				.ph-wrap {
					width: 40rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		margin-inline: auto;
		padding: 5rem 2rem 8rem 2rem;
		margin-left: var(--sp-base-padding);
		border-radius: 4rem 0 0 4rem;
		.other-nav {
			margin-top: 5rem;
			article:not(:last-child) {
				margin-bottom: 4rem;
				padding-bottom: 4rem;
			}
			a {
				h3 {
					font-size: 2.2rem;
				}
			}
		}
		.p-ico.-ico {
			top: -5rem;
			left: calc(50% + 6rem);
		}
	}
}


/* ============================================================================

	入社後の成長支援とキャリア形成のしくみ

============================================================================= */
.p-career-development {
	background-color: #b8e0c8;
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}

	.-ico-head1 {
		top: 19.6rem;
		right: calc(50% + 59rem);
	}
	.-ico-head2 {
		top: 10.6rem;
		right: calc(50% + 41.8rem);
	}
	.-ico-head3 {
		top: 6.4rem;
		left: calc(50% + 44.8rem);
	}
	.-ico-head4 {
		top: 11.4rem;
		left: calc(50% + 34.8rem);
	}
	.-ico-head5 {
		top: 17.4rem;
		left: calc(50% + 48.8rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 11.6rem;
			right: calc(50% + 14rem);
		}
		.-ico-head2 {
			top: 2.6rem;
			right: calc(50% + 3.8rem);
		}
		.-ico-head3 {
			top: 4.4rem;
			left: calc(50% + 2.8rem);
		}
		.-ico-head4 {
			top: 7.4rem;
			left: calc(50% + 12.8rem);
		}
		.-ico-head5 {
			top: 11.4rem;
			left: calc(50% + 11.8rem);
		}
	}
}
.-flow-training {
	--color: #00A29A;
	--modal-title: #fff;
}
.-flow-career {
	--color: #3183B5;
	--modal-title: #fff;
}
.p-career-development-flow {
	--ls: .05em;
	position: relative;
	padding-bottom: 14rem;
	.lead {
		font-size: 2rem;
		line-height: 1.8;
		text-align: center;
	}
	.flow-ex {
		display: flex;
		justify-content: center;
		margin-top: 6rem;
		gap: 2rem;
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 32rem;
			height: 8rem;
			border-radius: 1rem;
			border: 2px solid #fff;
			background: var(--color);
			box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
			color: #fff;
			font-size: 2rem;
			line-height: 1.2;
			text-align: center;
		}
	}
	.flow-roadmap {
		position: relative;
		max-width: 96rem;
		margin-inline: auto;
		margin-top: 15rem;
		.item {
			a {
				display: block;
				text-decoration: none;
				color: #fff;
			}
			dl {
				position: relative;
			}
			dt {
				position: absolute;
				right: 0;
				left: 0;
				bottom: calc(100% + 1rem);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 12rem;
				height: 4rem;
				border-radius: 2rem;
				margin-inline: auto;
				background-color: #fff;
				font-size: 2rem;
				color: var(--color);
			}
			dd {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 18rem;
				border-radius: 9rem;
				border: 2px solid #fff;
				background: var(--color);
				box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
				color: #fff;
				font-size: 2rem;
				line-height: 1.4;
				text-align: center;
				aspect-ratio: 1;
				.s {
					margin-top: 0.2em;
					font-size: calc(16 / 20 * 100%);
				}
				.c-ico-plus {
					right: 0;
					left: 0;
					bottom: 1.8rem;
					margin-inline: auto;
				}
				&:has(.c-ico-plus) {
					padding-bottom: 2rem;
				}
			}
			&.next dd {
				flex-direction: row;
				background-color: #fff;
				color: #3183B5;
				font-size: 3rem;
				.u-ff_en {
					font-size: calc(40 / 30 * 100%);
					font-weight: var(--font-weight-medium);
				}
			}
			@media (hover) {
				a dd::after {
					content: "";
					position: absolute;
					inset: 0;
					background-color: #fff;
					border-radius: 100%;
					pointer-events: none;
					opacity: 0;
					z-index: 3;
					transition: opacity var(--transition);
				}
				a:hover dd::after {
					opacity: 0.3;
				}
			}
		}
	}

	.-ico1 {
		bottom: 8rem;
		left: calc(50% + 50.6rem);
	}
	.-ico2 {
		top: -9rem;
		left: calc(50% + 45rem);
	}
	.-ico3 {
		bottom: 92rem;
		right: calc(50% + 44rem);
	}
	.-ico4 {
		bottom: 27.6rem;
		right: calc(50% + 18rem);
	}
	.-ico5 {
		bottom: 63.8rem;
		left: calc(50% + 54rem);
	}
	.-ico6 {
		bottom: 66.8rem;
		left: calc(50% + 37rem);
	}
	@media screen and (min-width: 744px), print {
		.flow-roadmap {
			display: flex;
			flex-direction: column;
			gap: 12rem;
			ul {
				position: relative;
				display: flex;
				gap: 4rem;
				&:nth-child(2n + 1) {
					.item.-margin:not(:first-child) {
						margin-left: 12rem;
					}
				}
				&:nth-child(2n) {
					flex-direction: row-reverse;
					.item.-margin:not(:first-child) {
						margin-right: 12rem;
					}
				}
				&.line2 {
					padding-right: 10rem;
				}
				&.line4 {
					justify-content: space-between;
					.item.-margin:not(:first-child) {
						margin: 0;
					}
				}
				&:not(:last-child) {
					&::before {
						content: "";
						position: absolute;
						top: calc(50% - 1rem);
						left: calc(50% - 112rem / 2);
						width: 112rem;
						height: 32rem;
						border: 2rem solid #dbefe3;
						border-color: color-mix(in srgb, #b8e0c8 50%, white 50%);
						border-radius: 16rem;
						z-index: -1;
					}
					&:nth-child(2n + 1)::before {
						clip-path: inset(0 0 0 17rem);
					}
					&:nth-child(2n)::before {
						clip-path: inset(0 17rem 0 0);
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		padding-bottom: 8rem;
		.lead {
			font-size: 1.5rem;
		}
		.flow-ex {
			margin-top: 4rem;
			gap: 1rem;
			li {
				width: 14rem;
				height: 5.4rem;
				font-size: 1.4rem;
				&.-flow-career {
					--ls: 0;
				}
			}
		}
		.flow-roadmap {
			margin-top: 7rem;
			display: flex;
			flex-wrap: wrap;
			padding-inline: 1rem;
			gap: 7rem .5rem;
			ul {
				display: contents;
			}
			.item {
				dt {
					bottom: calc(100% + .2rem);
					width: 6rem;
					height: 2.6rem;
					font-size: 1.5rem;
				}
				dd {
					width: 10rem;
					font-size: 1.3rem;
					--ls: 0;
					.s {
						font-size: 1rem;
					}
					.c-ico-plus {
						bottom: 0.4rem;
						transform-origin: 50% 100%;
					}
					&:has(.c-ico-plus) {
						padding-bottom: 1.6rem;
					}
				}
				&.next dd {
					font-size: 1.8rem;
				}
				&.-item4 {
					order: 4;
					margin-left: 2rem;
				}
				&.-item5 {
					order: 3;

				}
				&.-item6 {
					order: 2;

				}
				&.-item7 {
					order: 5;
					margin-left: 4rem;

				}
				&.-item8 {
					order: 5;
					margin-left: 2rem;

				}
				&.-item9 {
					order: 8;

				}
				&.-item10 {
					order: 7;
					margin-left: 2rem;
				}
				&.-item11 {
					order: 6;
				}
				&.-item12 {
					order: 10;
					margin-left: 4rem;
				}
				&.-item13 {
					order: 10;
					margin-left: 4rem;
				}
				&.-item1,
				&.-item2,
				&.-item3,
				&.-item4 {
					&::before {
						content: "";
						position: absolute;
						left: -1rem;
						right: -1rem;
						height: calc(17rem + 1.6rem);
						border: 1.6rem solid #dbefe3;
						border-color: color-mix(in srgb, #b8e0c8 50%, white 50%);
						border-radius: 16rem;
						z-index: -1;
					}
				}
				&.-item1::before {
					top: calc(5rem - 1.6rem / 2);
					clip-path: inset(0 0 0 9rem);
				}
				&.-item2::before {
					top: calc(5rem - 1.6rem / 2 + (17rem));
					clip-path: inset(0 9rem 0 0);
				}
				&.-item3::before {
					top: calc(5rem - 1.6rem / 2 + (17rem * 2));
					clip-path: inset(0 0 0 9rem);
				}
				&.-item4::before {
					top: calc(5rem - 1.6rem / 2 + (17rem * 3));
					clip-path: inset(0 9rem 0 0);
				}
			}
		}
		.-ico1 {
			bottom: -0.4rem;
			left: calc(50% + 8rem);
		}
		.-ico2 {
			top: -7.2rem;
			left: calc(50% + 11rem);
		}
		.-ico3 {
			bottom: 35rem;
			right: calc(50% + 3rem);
		}
		.-ico4 {
			bottom: 13.4rem;
			right: calc(50% - 5rem);
		}
		.-ico5 {
			bottom: 48.8rem;
			left: calc(50% + 6rem);
		}
		.-ico6 {
			bottom: 53.8rem;
			left: calc(50% + 11rem);
		}
	}
}

.-step-management {
	--color: #3183B5;
	--border: #3183B5;
	--modal-title: #fff;
}
.-step-specialist {
	--color: #00A29A;
	--border: #00A29A;
	--modal-title: #fff;
}
.p-career-development-step {
	.step-contents {
		--ls: .05em;
		--color: #03B59A;
		position: relative;
		z-index: 1;
		ol {
			display: flex;
			flex-direction: column;
			gap: 4rem;
		}
		li:not(.-multi):not(.-first) {
			position: relative;
			width: 40rem;
			height: 8rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-inline: auto;
			font-size: 2rem;
			line-height: 1.5;
			text-align: center;
			&.-bg {
				background-color: var(--color);
				border-radius: 10rem;
				color: #fff;
			}
			&.-square {
				background-color: #fff;
				border: 2px solid var(--color);
				border-radius: 1rem;
			}
		}
		li.-first {
			margin-bottom: auto;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 13.4rem;
				text-decoration: none;
				background-color: color-mix(in srgb, var(--color) 20%, transparent);
				border: 2px solid var(--color);
				border-radius: 1rem;
				font-size: 1.8rem;
				line-height: 2;
				text-align: center;
				.c-ico-plus {
					right: 2rem;
					bottom: 2rem;
				}
			}
		}
		li.-multi {
			position: relative;
			display: flex;
			justify-content: center;
			gap: 8rem;
			padding-bottom: 4rem;
			&::before,
			&::after,
			ol::before {
				content: "";
				position: absolute;
				top: calc(100% - 1rem);
				left: calc(50% - 1rem);
				width: 29rem;
				height: 22rem;
				border: 2rem solid #5CB531;
				border-radius: 4rem;
				opacity: 0.2;
				z-index: -1;
				clip-path: polygon(0 calc(100% - 5rem), 25rem calc(100% - 5rem), 25rem 0, 0 0);
			}
			&::after {
				transform-origin: 1rem 100%;
				transform: scaleX(-1);
			}
			ol::before {
				top: auto;
				bottom: -1rem;
				clip-path: polygon(calc(100% - 4rem) 100%, 100% 100%, 100% calc(100% - 6rem), calc(100% - 4rem) calc(100% - 6rem));
			}
			ol + ol::before {
				transform-origin: 1rem 100%;
				transform: scaleX(-1);
			}
			ol {
				width: 46rem;
				gap: 3rem;
				li[class] {
					width: 100%;
					&:not(:first-child):not(:last-child) {
						&::before {
							content: "";
							position: absolute;
							top: 100%;
							right: 0;
							left: 0;
							height: 4rem;
							width: 2rem;
							margin-inline: auto;
							background-color: color-mix(in srgb, var(--border) 20%, white);
							z-index: -1;
						}
					}
					&:nth-child(2) {
						&::after {
							content: "";
							position: absolute;
							top: 100%;
							right: 0;
							left: 0;
							margin-inline: auto;
							width: 4rem;
							height: 2rem;
							background-color: color-mix(in srgb, var(--border) 20%, white);
							clip-path: polygon(50% 0, 100% 100%, 0 100%);
							z-index: -1;
						}
						&::before {
							top: calc(100% + 2rem - 2px) !important;
						}
					}
				}
			}
		}
	}
	.p-ico {
		z-index: 2;
		&.-ico1 {
			width: 10.8rem;
			top: 5.6rem;
			right: calc(50% + 36rem);
		}
		&.-ico2 {
			width: 22.6rem;
			top: 7rem;
			left: calc(50% + 34.4rem);
		}
	}
	@media screen and (max-width: 743px) {
		.step-contents {
			ol {
				display: flex;
				flex-direction: column;
				gap: 2rem;
			}
			li:not(.-multi):not(.-first) {
				width: 22rem;
				height: 6rem;
				font-size: 1.5rem;
				line-height: 1.3;
			}
			li.-first {
				a {
					height: 12rem;
					padding-bottom: 1rem;
					font-size: 1.2rem;
					line-height: 1.8;
					.c-ico-plus {
						right: 0.6rem;
						bottom: 0.6rem;
					}
				}
			}
			li.-multi {
				gap: 2rem;
				padding-bottom: 4rem;
				&::before,
				&::after,
				ol::before {
					top: calc(100% - 2rem);
					width: 10rem;
					border-radius: 3rem;
					clip-path: polygon(0 calc(100% - 5rem), 5rem calc(100% - 5rem), 5rem 0, 0 0);
				}
				ol::before {
					top: auto;
					bottom: 0;
					clip-path: polygon(calc(100% - 5rem) 100%, 100% 100%, 100% calc(100% - 6rem), calc(100% - 5rem) calc(100% - 6rem));
				}
				ol + ol::before {
					transform-origin: 1rem 100%;
					transform: scaleX(-1);
				}
				ol {
					width: 100%;
					gap: 1.5rem;
					li[class] {
						&:nth-child(2) {
							&::after {
								height: 1.2rem;
							}
							&::before {
								top: calc(100% + 1.2rem - 2px) !important;
							}
						}
					}
				}
			}
		}
		.p-ico {
			&.-ico1 {
				top: -5rem;
				right: calc(50% + 6rem);
			}
			&.-ico2 {
				top: -5rem;
				left: calc(50% + 1rem);
			}
		}
	}
}
.-education-system {
	--color: #03B59A;
	--modal-title: #fff;
}
.p-career-development-training {
	--ls: .05em;
	.lead {
		font-size: 2rem;
		line-height: 1.8;
		text-align: center;
	}
	.training-list {
		--ls: .03em;
		margin-top: 7rem;
		display: flex;
		flex-wrap: wrap;
		gap: 2.5rem;
		font-size: 1.6rem;
		line-height: 2;
		font-weight: var(--font-weight-medium);
		.training-item {
			a {
				position: relative;
				display: block;
				height: 100%;
				padding: 5rem 4rem 5rem;
				background-color: #fff;
				border: 2px solid var(--color);
				border-radius: 2rem;
				text-decoration: none;
				h3 {
					margin-bottom: 2.4rem;
					text-align: center;
					font-size: 2.8rem;
					line-height: 1.6;
					&::after {
						content: "";
						display: block;
						width: 2rem;
						margin-inline: auto;
						margin-top: 1rem;
						border-top: 2px solid var(--color);
					}
				}
				.c-ico-plus {
					right: 2rem;
					bottom: 2rem;
				}
			}
		}
	}
	.p-ico {
		&.-ico1 {
			width: 15.8rem;
			top: 13.2rem;
			right: calc(50% + 40rem);
		}
		&.-ico2 {
			width: 11.7rem;
			top: 13.2rem;
			left: calc(50% + 44.2rem);
		}
	}
	@media screen and (min-width: 744px), print {
		.training-list {
			.training-item {
				width: calc((100% - 2.5rem * 2) / 3);
				&.-wide {
					width: calc((100% - 2.5rem * 1) / 2);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
		.lead {
			font-size: 1.5rem;
		}
		.training-list {
			margin-top: 3rem;
			flex-direction: column;
			gap: 2rem;
			font-size: 1.3rem;
			.training-item {
				a {
					padding: 2rem 2rem 3rem;
					border-radius: 1.2rem;
					h3 {
						margin-bottom: 2rem;
						font-size: 2.2rem;
						&::after {
							margin-top: 1rem;
						}
					}
					.c-ico-plus {
						right: 1.2rem;
						bottom: 1.2rem;
					}
				}
			}
		}
		.p-ico {
			&.-ico1 {
				top: -1.2rem;
				right: calc(50% + 4rem);
			}
			&.-ico2 {
				top: -1.5rem;
				left: calc(50% + 6rem);
			}
		}
	}
}


/* ============================================================================

	採用FAQ

============================================================================= */
.p-faq {
	background-color: #ffb38a;
	.l-main {
		padding-bottom: 14rem;
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}
	.c-page-nav {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
		}
	}

	.-ico-head1 {
		top: 18rem;
		right: calc(50% + 59rem);
	}
	.-ico-head2 {
		top: 10rem;
		right: calc(50% + 40rem);
	}
	.-ico-head3 {
		top: 6.4rem;
		left: calc(50% + 44rem);
	}
	.-ico-head4 {
		top: 11.4rem;
		left: calc(50% + 33rem);
	}
	.-ico-head5 {
		top: 18.4rem;
		left: calc(50% + 45rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 10.4rem;
			right: calc(50% + 13rem);
		}
		.-ico-head2 {
			top: 2.4rem;
			right: calc(50% + 4rem);
		}
		.-ico-head3 {
			top: 3.5rem;
			left: calc(50% + 6.6rem);
		}
		.-ico-head4 {
			top: 6.5rem;
			left: calc(50% + 6.6rem);
		}
		.-ico-head5 {
			top: 8.5rem;
			left: calc(50% + 8.6rem);
		}
	}
}
.p-faq-wrap {
	margin-top: 14rem;
	max-width: 130rem;
	display: flex;
	flex-direction: column;
	gap: 6rem;
	margin-inline: auto;
	.faq-box {
		padding: 14rem 15rem;
		background-color: #fff;
		border-radius: 10rem;
		font-size: 1.6rem;
		line-height: 2;
		font-weight: var(--font-weight-medium);
		--ls: .03em;
		&.-internship {
			--color: #5CB531;
		}
		&.-graduate {
			--color: #01A9EA;
		}
		&.-career {
			--color: #03B59A;
		}
		.box-title {
			--ls: .05em;
			display: flex;
			align-items: center;
			gap: 2rem;
			margin-bottom: 4rem;
			font-size: 3.4rem;
			line-height: 1.6;
			.ico {
				width: 5.6rem;
			}
		}
		.message {
			margin-top: 7rem;
			h3 {
				margin-bottom: 3rem;
				border-left: .4rem solid var(--color);
				padding-left: 1.6rem;
				font-size: 2.8rem;
				line-height: 1;
				font-weight: var(--font-weight-bold);
			}
		}
	}
	.qa {
		overflow: hidden;
		border: 2px solid var(--color);
		border-radius: 1rem;
		margin-top: 3rem;
		.ico {
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 8rem;
			font-size: 2.8rem;
			line-height: 1;
			font-weight: var(--font-weight-medium);
		}
		.qa-title {
			--ls: .05em;
			display: flex;
			min-height: 8rem;
			cursor: pointer;
			transition: color var(--transition);
			.ico {
				background-color: var(--color);
				color: #fff;
			}
			h3 {
				flex-grow: 1;
				display: flex;
				align-items: center;
				padding: 1rem 3rem;
				font-size: 2rem;
				line-height: 1.6;
			}
			.ico-plus {
				position: relative;
				flex-shrink: 0;
				width: 8rem;
				&::before,
				&::after {
					content: "";
					position: absolute;
					inset: 0;
					width: 2.7rem;
					height: 0;
					margin: auto;
					border-top: .3rem solid var(--color);
				}
				&::after {
					transform: rotate(90deg);
					transition: transform var(--transition);
				}
			}
			&.-open {
				color: var(--color);
				.ico-plus {
					&::after {
						transform: rotate(0);
					}
				}
			}
			@media (hover) {
				&:hover {
					color: var(--color);
				}
			}
		}
		.qa-a {
			--ls: .03em;
			display: flex;
			min-height: 8rem;
			font-size: 1.6rem;
			line-height: 2;
			.ico {
				background-color: rgb(from var(--color) r g b / 10%);;
				color: var(--color);
			}
			.txt {
				flex-grow: 1;
				display: flex;
				align-items: center;
				padding: 2rem 3rem;
			}
		}
	}
	.more-btn {
		margin-top: 4rem;
		.c-btn {
			--bg: var(--color);
			--border: var(--bg);
			color: #fff;
		}
		.arrow {
			transition: background var(--transition), transform var(--transition);
		}
		.-open {
			.change-txt {
				display: none;
			}
			&::after {
				content: "閉じる";
			}
			.arrow {
				transform: rotate(270deg);
			}
		}
	}
	.internship-btn {
		margin-top: 4rem;
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		gap: 3rem;
		margin-inline: var(--sp-base-padding);
		.faq-box {
			padding: 3rem 2rem 4rem;
			border-radius: 3rem;
			font-size: 1.3rem;
			.box-title {
				margin-bottom: 2rem;
				font-size: 2.2rem;
				gap: 1rem;
				.ico {
					width: 4rem;
				}
			}
			.message {
				margin-top: 4rem;
				h3 {
					margin-bottom: 3rem;
					font-size: 1.8rem;
				}
			}
		}
		.qa {
			margin-top: 1.5rem;
			.ico {
				width: 4rem;
				font-size: 2rem;
			}
			.qa-title {
				min-height: 5rem;
				h3 {
					padding: .6rem 1.5rem;
					font-size: 1.4rem;
				}
				.ico-plus {
					width: 3rem;
					&::before,
					&::after {
						width: 1.4rem;
						border-top-width: 0.2em;
					}
				}
			}
			.qa-a {
				min-height: 5rem;
				font-size: 1.2rem;
				.txt {
					padding: 1rem 1.5rem;
				}
			}
		}
		.more-btn {
			margin-top: 2rem;
			.arrow {
				transform-origin: 50%;
				transform: rotate(90deg) scale(.8);
			}
			.-open {
				.arrow {
					transform: rotate(270deg) scale(.8);
				}
			}
		}
		.internship-btn {
			margin-top: 2rem;
		}
	}
}
.schedule-modal {
	--color: #5CB531;
	--modal-title: #fff;
	font-size: 1.6rem;
	line-height: 2;
	.img {
		margin-block: 4rem 6rem;
	}
	.internship-item {
		margin-top: 4rem;
		padding: 0 0 3rem 4rem;
		border-left: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		line-height: 2;
		font-weight: var(--font-weight-medium);
		h3 {
			font-size: 1.8rem;
			font-weight: var(--font-weight-bold);
			line-height: 1.8;
			.s {
				display: block;
				font-size: calc(16 / 18 * 100%);
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.lead {
			font-size: 1.8rem;
			line-height: 2;
		}
		.internship-item {
			display: grid;
			grid-template-columns: 29rem 1fr;
		}
	}
	@media screen and (max-width: 743px) {
		font-size: 1.3rem;
		header {
			line-height: 1.3;
		}
		.internship-title {
			margin-bottom: 2rem;
			h2 {
				font-size: 2.2rem;
			}
		}
		.img {
			margin-block: 4rem;
			margin-inline: -2rem;
			padding-inline: 2rem;
			padding-bottom: 1rem;
			overflow-x: auto;
			img {
				width: 70rem;
				max-width: none;
			}
		}
		.internship-item {
			padding: 0 0 2rem 2rem;
			h3 {
				margin-bottom: 1rem;
				font-size: 1.6rem;
			}
		}
	}
}



/* ============================================================================

	募集要項

============================================================================= */
.p-job {
	background-color: #96AEC4;

	.-ico-head1 {
		top: 18rem;
		right: calc(50% + 55rem);
	}
	.-ico-head2 {
		top: 9rem;
		right: calc(50% + 39rem);
	}
	.-ico-head3 {
		top: 6.4rem;
		left: calc(50% + 50rem);
	}
	.-ico-head4 {
		top: 9.4rem;
		left: calc(50% + 32rem);
	}
	.-ico-head5 {
		top: 18.4rem;
		left: calc(50% + 41rem);
	}
	@media screen and (max-width: 743px) {
		.-ico-head1 {
			top: 10.4rem;
			right: calc(50% + 8rem);
		}
		.-ico-head2 {
			top: 2.4rem;
			right: calc(50% + 4rem);
		}
		.-ico-head3 {
			top: 3.5rem;
			left: calc(50% + 6.6rem);
		}
		.-ico-head4 {
			top: 6.5rem;
			left: calc(50% + 6.6rem);
		}
		.-ico-head5 {
			top: 10.5rem;
			left: calc(50% + 7.6rem);
		}
	}
}
.p-job-index-nav {
	margin-top: 12rem;
	.entry-heading {
		display: none;
	}
	.p-ico.-ico3 {
		display: none;
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		padding-top: 0;
		.p-ico.-ico1 {
			display: none;
		}
		.p-ico.-ico2 {
			display: none;
		}
	}
}
.p-job-wrap {
	max-width: 130rem;
	display: flex;
	flex-direction: column;
	gap: 6rem;
	margin-inline: auto;
	padding-bottom: 16rem;
	.job-box {
		--ls: .05em;
		padding: 10rem 15rem;
		background-color: #fff;
		border-radius: 10rem;
		font-size: 1.6rem;
		line-height: 2;
	}
	.job-main {
		padding: 10rem 5rem;
		text-align: center;
		font-size: 2rem;
		line-height: 1.8;
		.link,
		.job {
			width: fit-content;
			min-width: 80rem;
			margin-top: 5rem;
			margin-inline: auto;
			padding: 2rem;
			background-color: #F5F5F5;
			border-radius: 100rem;
			font-size: 1.8rem;
			line-height: 2;
			font-weight: var(--font-weight-medium);
		}
		.link {
			padding: 3rem;
		}
	}
	.job-main-simple {
		padding-top: 4rem;
		text-align: center;
		font-size: 2rem;
		line-height: 1.8;
		.link {
			width: fit-content;
			min-width: 80rem;
			margin-top: 5rem;
			margin-inline: auto;
			padding: 2rem;
			background-color: #F5F5F5;
			border-radius: 100rem;
			font-size: 1.8rem;
			line-height: 2;
			font-weight: var(--font-weight-medium);
			padding: 3rem;
		}
	}
	@media screen and (max-width: 743px) {
		gap: 3rem;
		margin-inline: var(--sp-base-padding);
		padding-bottom: 8rem;
		.job-box {
			padding: 4rem 2rem 4rem;
			border-radius: 4rem;
			font-size: 1.3rem;
		}
		.job-main {
			padding-top: 3rem;
			font-size: 1.5rem;
			.link,
			.job {
				min-width: 0;
				width: auto;
				margin-top: 3rem;
				padding: 2rem 3rem;
				font-size: 1.4rem;
				line-height: 1.8;
				li + li {
					margin-top: 1em;
				}
			}
			.link {
				padding: 3rem 2rem;
				border-radius: 2rem;
			}
		}
		.job-main-simple {
			padding-top: 1rem;
			font-size: 1.5rem;
			.link {
				min-width: 0;
				width: auto;
				margin-top: 3rem;
				padding: 2rem;
				font-size: 1.4rem;
				border-radius: 2rem;
				line-height: 1.8;
				li + li {
					margin-top: .5em;
				}
			}
		}
	}

	.job-detail {
		.detail-title {
			margin-bottom: 4rem;
			.category {
				margin-bottom: 2rem;
				padding-left: 1.6rem;
				border-left: .4rem solid #5CB531;
				font-size: 2.6rem;
				line-height: 1.2;
			}
			h2 {
				font-size: 3.4rem;
				line-height: 1.6;
			}
		}
		.detail-main {
			.lead {
				font-size: 1.8rem;
				line-height: 2;
			}
			.point {
				margin-top: 4rem;
				font-size: 2rem;
				line-height: 1.6;
				li {
					position: relative;
					padding-left: 3.6rem;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: calc(.5lh - 2.2rem / 2);
						width: 2.2rem;
						height: 2.2rem;
						background: url(../img/job/ico-check.svg) no-repeat 50%;
						background-size: 100%;
					}
					& + li {
						margin-top: 0.6em;
					}
				}
			}
			.ex {
				margin-top: 4rem;
				font-weight: var(--font-weight-medium);
				font-size: 1.6rem;
				line-height: 2;
			}
		}
		.detail-footer {
			margin-top: 8rem;
			.more-btn {
				width: fit-content;
				margin-inline: auto;
				&.-open {
					.-acc-open {
						display: none;
					}
				}
				&:not(.-open) {
					.-acc-close {
						display: none;
					}
				}
			}
		}

		.detail-guide {
			--ls: .03em;
			font-weight: var(--font-weight-medium);
			font-size: 1.6rem;
			line-height: 2;
			.detail-guide-inner{
				padding-top: 8rem;
			}
			section {
				padding-block: 5rem;
				border-bottom: 1px solid var(--border);
				&:first-child {
					border-top: 1px solid var(--border);
				}
				h3 {
					font-size: 1.8rem;
					line-height: 1.8;
				}
				.txt {
					.notes {
						margin-top: 1em;
						font-size: 1.2rem;
						line-height: 2;
					}
					span.notes {
						display: block;
						margin-top: 0;
					}
				}
			}
			.btn-entry {
				margin-top: 8rem;
			}
		}
		@media screen and (min-width: 744px), print {
			.detail-main {
				.ex {
					display: flex;
					dt {
						flex-shrink: 0;
						padding-right: 3rem;
						margin-right: 3rem;
						border-right: 1px solid #4c4948;
					}
				}
			}
			.detail-guide {
				section {
					display: flex;
					flex-wrap: wrap;
					h3 {
						flex-shrink: 0;
						width: 22rem;
						padding-right: 2rem;
					}
					.txt {
						width: calc(100% - 22rem);
					}
					.btn {
						width: 100%;
						margin-top: 6rem;
						padding-bottom: 2rem;
					}
				}
				.flow {
					position: relative;
					width: fit-content;
					display: flex;
					gap: 6rem;
					&:has(li:nth-child(8)) {
						gap: 3rem;
					}
					z-index: 1;
					&::before {
						content: "";
						position: absolute;
						top: calc(50% - 1rem);
						left: 0;
						right: 5rem;
						height: 2rem;
						background-color: #96AEC4;
						clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
						z-index: -1;
					}
					li {
						width: 5rem;
						padding: 2.5rem 0;
						border: 2px solid var(--border2);
						border-radius: 1rem;
						display: flex;
						justify-content: center;
						background-color: #fff;
						div {
							writing-mode: vertical-rl;
							text-orientation: upright;
						}
						.m {
							font-size: 1.4rem;
						}
						.s {
							font-size: 1.2rem;
						}
						&:last-child {
							border-color: #96AEC4;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			.detail-title {
				margin-bottom: 2rem;
				.category {
					margin-bottom: 1rem;
					padding-left: 1.2rem;
					font-size: 1.6rem;
				}
				h2 {
					font-size: 2rem;
				}
			}
			.detail-main {
				.lead {
					font-size: 1.4rem;
				}
				.point {
					margin-top: 2rem;
					font-size: 1.4rem;
					li {
						position: relative;
						padding-left: 2.6rem;
						&::before {
							top: calc(.5lh - 1.8rem / 2);
							width: 1.8rem;
							height: 1.8rem;
						}
					}
				}
				.ex {
					margin-top: 2rem;
					font-size: 1.3rem;
					padding-left: 2rem;
					border-left: 1px solid #4c4948;
				}
			}
			.detail-footer {
				margin-top: 4rem;
			}
			.detail-guide {
				font-size: 1.2rem;
				.detail-guide-inner {
					padding-top: 4rem;
				}
				section {
					padding-block: 2rem;
					h3 {
						margin-bottom: 0.5em;
						font-size: 1.5rem;
						line-height: 1.8;
					}
					.txt {
						.notes {
							font-size: 1rem;
						}
					}
				}
				.btn-entry {
					margin-top: 4rem;
				}
				.flow {
					position: relative;
					display: flex;
					flex-direction: column;
					gap: 2rem;
					margin-top: 2rem;
					z-index: 1;
					&::before {
						content: "";
						position: absolute;
						top: 0;
						bottom: 5rem;
						left: calc(50% - 1rem);
						width: 2rem;
						background-color: #96AEC4;
						clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
						z-index: -1;
					}
					li {
						padding: 1rem 2rem;
						border: 2px solid var(--border2);
						border-radius: 1rem;
						text-align: center;
						background-color: #fff;
						.m {
							font-size: 1.1rem;
						}
						.s {
							font-size: 1rem;
						}
						&:last-child {
							border-color: #96AEC4;
						}
					}
				}
				.btn {
					margin-top: 3rem;
					padding-bottom: 1rem;
				}
			}
		}
	}
	.job-internship {
		.internship-title {
			margin-bottom: 4rem;
			h2 {
				font-size: 3.4rem;
				line-height: 1.6;
			}
		}
		.img {
			margin-block: 8rem;
		}
		.internship-item {
			margin-top: 4rem;
			padding: 0 0 3rem 4rem;
			border-left: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			line-height: 2;
			font-weight: var(--font-weight-medium);
			h3 {
				font-size: 1.8rem;
				font-weight: var(--font-weight-bold);
				line-height: 1.8;
				.s {
					display: block;
					font-size: calc(16 / 18 * 100%);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.lead {
				font-size: 1.8rem;
				line-height: 2;
			}
			.internship-item {
				display: grid;
				grid-template-columns: 29rem 1fr;
			}
		}
		@media screen and (max-width: 743px) {
			.internship-title {
				margin-bottom: 2rem;
				h2 {
					font-size: 2.2rem;
				}
			}
			.img {
				margin-block: 4rem;
				margin-inline: -2rem;
				padding-inline: 2rem;
				padding-bottom: 1rem;
				overflow-x: auto;
				img {
					width: 70rem;
					max-width: none;
				}
			}
			.internship-item {
				padding: 0 0 2rem 2rem;
				h3 {
					margin-bottom: 1rem;
					font-size: 1.6rem;
				}
			}
		}
	}
}


/* ============================================================================

	Challenge! HOTnet

============================================================================= */
.c-challenge-modal {
	--ls: .03em;
	position: relative;
	background-color: #fff;
	width: 130rem;
	border: .4rem solid #fff;
	border-radius: 2rem;
	font-weight: var(--font-weight-medium);
	margin: auto 0;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
	header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 9rem;
		text-align: center;
		font-size: 2.4rem;
		line-height: 1.5;
		background-color: #6fddeb;
		border-radius: 1.6rem 1.6rem 0 0;
		color: #fff;
		.flag {
			position: absolute;
			bottom: 0;
			left: 5.4rem;
			width: 19.2rem;
			height: 7.4rem;
			background: url(../img/challenge/flag.svg) no-repeat 50%;
			background-size: 100%;
			font-size: 1.8rem;
			font-weight: var(--font-weight-bold);
			color: var(--color-base);
			text-align: left;
			padding-top: 1.8rem;
			padding-left: 4.2rem;
		}
		h2 {
			opacity: 0.8;
		}
		.p-ico {
			width: 4.8rem;
			top: calc(50% - 4.8rem / 2);
			left: calc(50% + 16rem);
			z-index: 2;
		}
		.close {
			position: absolute;
			right: 3rem;
			top: 0;
			bottom: 0;
			margin-block: auto;
			width: 6rem;
			height: 6rem;
			z-index: 2;
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: calc(50% - 1px);
				left: 1rem;
				right: 1rem;
				border-top: 3px solid #000;
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
			@media (hover) {
				&:hover {
					opacity: 0.5;
				}
			}
		}
	}
	.challenge-item {
		padding: 8rem 9.5rem;
		.contents {
			position: relative;
		}
		.ico-check {
			position: absolute;
			right: -1.2rem;
			top: -5.6rem;
			width: 7rem;
		}
		.case {
			position: relative;
			margin-bottom: 1rem;
			padding-left: 3.6rem;
			color: #6FDDEB;
			font-size: 2rem;
			line-height: 1.5;
			font-weight: var(--font-weight-medium);
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				width: 2rem;
				border-top: 2px solid;
			}
		}
		h3 {
			margin-bottom: 2rem;
			font-size: 3.6rem;
			line-height: 1.6;
			--ls: .02em;
		}
		.tags {
			display: flex;
			gap: 1rem;
			flex-wrap: wrap;
			margin-top: 3rem;
			li {
				padding: 1rem 2.5rem;
				font-size: 1.4rem;
				line-height: 1.5;
				background-color: #6FDDEB;
				border-radius: 10rem;
			}
		}
		.ph {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			width: 34rem;
			img {
				border-radius: 1rem;
			}
		}
	}
	.challenge-nav {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 1rem;
		padding: 2rem;
		z-index: 3;
		.button-prev,
		.button-next {
			position: relative;
			cursor: pointer;
			width: 4rem;
			height: 4rem;
			background-color: var(--color-base);
			border-radius: 2rem;
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				right: calc(50% - .5rem);
				width: 1.2rem;
				height: 1.2rem;
				border-top: 2px solid #fff;
				border-right: 2px solid #fff;
				transform-origin: 100% 0;
				transform: rotate(45deg);
			}
			@media (hover) {
				transition: opacity var(--transition);
				&:hover {
					opacity: 0.5;
				}
			}
		}
		.button-prev {
			transform: scaleX(-1);
		}
		.swiper-pagination {
			position: static;
			width: auto;
			gap: 1rem;
			margin-right: 0.6rem;
			.swiper-pagination-bullet {
				margin: 0;
				width: 0.8rem;
				height: 0.8rem;
				border: 1px solid var(--color-base);
				background-color: #DCDDDD;
				opacity: 1;
			}
			.swiper-pagination-bullet-active {
				background-color: #FFF200;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.challenge-item {
			display: flex;
			flex-direction: row-reverse;
			.contents {
				width: calc(100% - 40rem);
				margin-left: auto;
			}
		}
	}
	@media screen and (max-width: 743px) {
		width: 100%;
		header {
			height: 8rem;
			font-size: 2rem;
			.flag {
				transform-origin: 0 100%;
				transform: scale(.6);
				bottom: 5rem;
				left: 1rem;
			}
			.p-ico {
				display: none;
			}
			.close {
				right: 1rem;
				transform-origin: 100%;
				transform: scale(.7);
			}
		}
		.challenge-item {
			padding: 3rem 2rem 8rem;
			height: calc(100dvh - 4rem * 2 - 8rem - 2rem);
			overflow-y: auto;
			.ico-check {
				right: -.5rem;
				top: -2rem;
				width: 5rem;
			}
			.case {
				font-size: 1.6rem;
			}
			h3 {
				margin-bottom: 1.5rem;
				font-size: 2.3rem;
			}
			.tags {
				gap: .5rem;
				margin-top: 2rem;
				li {
					padding: .5rem 1.5rem;
					font-size: 1.1rem;
				}
			}
			.ph {
				gap: 1rem;
				width: 24rem;
				margin-top: 3rem;
				margin-inline: auto;
			}
		}
		.challenge-nav {
			padding: 1rem;
			background-color: rgba(255,255,255,.7);
			border-radius: 0 0 1.6rem 1.6rem;
		}
	}
}