@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}._fl{float:left}._fr{float:right}@media screen and (min-width: 744px),print{._pc_fl{float:left}._pc_fr{float:right}}@media screen and (max-width: 743px){._sp_fl{float:left}._sp_fr{float:right}}._tal{text-align:left!important}._tac{text-align:center!important}._tar{text-align:right!important}@media screen and (min-width: 744px),print{._pc_tal{text-align:left!important}._pc_tac{text-align:center!important}._pc_tar{text-align:right!important}}@media screen and (max-width: 743px){._sp_tal{text-align:left!important}._sp_tac{text-align:center!important}._sp_tar{text-align:right!important}}

/* 変数
====================================================================== */
:root {
	--color-base: #313131;
	--color-blue: #38aae1;
	--color-red: #ff0000;
	--color-link: #38aae1;
	--color-pink1: #ffd2d1;
	--color-pink2: #ffb0ae;
	--bg-body: #fff6f6;
	--bg-pink1: #ffedec;
	--bg-pink2: #fff9f9;
	--bg-blue1: #e8f8ff;
	--base-width: 144rem;
	--sp-base-padding: calc(20 / 375 * 100vw);
	--font-family-jp: "Noto Sans JP", sans-serif;
	--font-family-en: "Roboto", var(--font-family-jp);
	--font-family-zenmaru: "Zen Maru Gothic", var(--font-family-jp);
	--font-weight-regular: 500;
	--font-weight-medium: 500;
	--font-weight-semi: 600;
	--font-weight-bold: 700;
	--font-weight: var(--font-weight-medium);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--box-shadow: 0 .3rem .6rem rgba(0,0,0,.16);
	--header-height: 10rem;
	@media screen and (max-width: 743px) {
		--header-height: 4rem;
	}
}

/*
====================================================================== */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
@media screen and (min-width: 744px), print {
	html {
		font-size: min(calc(10px - (1600px - 100vw) * (10 / 1600)), 10px);
	}
}
@media screen and (max-width: 743px) {
	html {
		font-size: calc((10 / 375) * 100vw);
	}
}
body {
	position: relative;
	background-color: var(--bg-body);
	font-size: 2rem;
	line-height: 2;
	color: var(--color-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
	letter-spacing: .2rem;

	font-family: var(--font-family-jp);
	font-weight: var(--font-weight);
	font-feature-settings: "palt";
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
@media screen and (max-width: 743px) {
	body {
		font-size: 1.8rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(address,caption,cite,code,dfn,em,th,var) {
	font-style: normal;
	font-weight: var(--font-weight);
}
:where(img) {
	max-width: 100%;
	height: auto;
}
: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]._a_reverse,._a_reverse a[href]) {
	text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
}
@media (hover) {
	:where(a,button,._basic_trs,._hl),
	:where(a,button,._basic_trs,._hl)::before,
	:where(a,button,._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) {
		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]._a_reverse, a[data-modal]._a_reverse, ._a_reverse a[href], ._a_reverse a[data-modal]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href]._a_reverse.-hvw),
	:where(._a_reverse.-hvw a[href]) {
		text-decoration-color: rgba(255,255,255,0);
	}
	:where(a[href]._a_reverse.-hvw):hover,
	:where(._a_reverse.-hvw a[href]):hover {
		text-decoration-color: #fff;
	}
	:where(a[href]._a_reverse.-hvbk),
	:where(._a_reverse.-hvbk a[href]) {
		text-decoration-color: color-mix(in srgb, var(--a-color) 0%, transparent);
	}
	:where(a[href]._a_reverse.-hvbk):hover,
	:where(._a_reverse.-hvbk a[href]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._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] ._a_reverse) {
		transition: text-decoration-color .2s ease-in-out;
	}
	:where(a[href]:hover ._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 {
	display: block;
}

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

/* color
====================================================================== */
._c_base {
	color: var(--color-base) !important;
}
:where(._bg_white) {
	position: relative;
	background-color: #fff;
	z-index: 3;
}

/* font
====================================================================== */
._ff_en {
	font-family: var(--font-family-en);
	font-weight: 700;
	font-style: normal;
}
._ff_zenmaru {
	font-family: var(--font-family-zenmaru);
	font-weight: 500;
	font-style: normal;
	font-feature-settings: normal;
}
@media screen and (max-width: 743px) {
	._fz_sp_s {
		font-size: 1.6rem;
		line-height: 2;
	}
	._fz_sp_ss {
		font-size: 1.4rem;
		line-height: calc(24 / 14);
	}
}
._fwn {
	font-weight: var(--font-weight);
}
._fwr {
	font-weight: 400;
}
._fwm {
	font-weight: 500;
}
._fws {
	font-weight: 600;
}
._fwb {
	font-weight: var(--font-weight);
}
._wsnw {
	white-space: nowrap;
}
@media screen and (min-width: 744px), print {
	._pc_wsnw {
		white-space: nowrap;
	}
}
@media screen and (max-width: 743px) {
	._sp_wsnw {
		white-space: nowrap;
	}
}

/* bg
====================================================================== */

/* display
====================================================================== */
._db {
	display: block;
}
._dib {
	display: inline-block;
}
._dfcc {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width: 744px), print {
	._pc_dib {
		display: inline-block;
	}
	._pc_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 743px) {
	._sp_dib {
		display: inline-block;
	}
	._sp_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}

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

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

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

/* _target
====================================================================== */
:where([id]:not(style):not(script)) {
	scroll-margin-top: var(--header-height);
}

/* w
====================================================================== */
._w {
	position: relative;
}
@media screen and (min-width: 744px), print {
	._w {
		width: var(--base-width);
		margin-inline: auto;
	}
}
@media screen and (max-width: 743px) {
}

/* spパディング
====================================================================== */
@media screen and (max-width: 743px) {
	._sp_pd {
		padding-inline: var(--sp-base-padding) !important;
	}
	._sp_mg {
		margin-inline: var(--sp-base-padding) !important;
	}
	._sp_full {
		margin-inline: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_l {
		margin-left: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_r {
		margin-right: calc(var(--sp-base-padding) * -1) !important;
	}
}

/* header
====================================================================== */
#header {
	letter-spacing: .1rem;
	.logo {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		@media screen and (max-width: 743px) {
			width: 100%;
		}
		a {
			display: flex;
			align-items: center;
			height: var(--header-height);
			padding: 0 5rem;
			background-color: #fff;
			border-bottom-right-radius: 4rem;
			text-decoration: none;
			@media screen and (max-width: 743px) {
				padding: 1rem;
			}
			img {
				width: 38rem;
				@media screen and (max-width: 743px) {
					width: 19rem;
				}
			}
			span {
				margin-left: 3rem;
				padding-top: 0.2rem;
				font-size: 2.4rem;
				font-weight: 700;
				@media screen and (max-width: 743px) {
					margin-left: 1.2rem;
					font-size: 1.2rem;
					letter-spacing: 0.05rem;
				}
			}
		}
	}
	.nav_btn {
		position: fixed;
		top: 0;
		right: 0;
		width: 14rem;
		height: var(--header-height);
		z-index: 950;
		@media screen and (max-width: 743px) {
			width: var(--header-height);
		}
		a {
			position: relative;
			display: block;
			overflow: hidden;
			height: 0;
			padding-top: var(--header-height);
			background-color: var(--color-red);
			border-bottom-left-radius: 4rem;
			text-decoration: none;
			font-size: 1rem;
			cursor: pointer;
			@media (hover) {
				&:hover {
					background-color: color-mix(in srgb, white 30%, var(--color-red) 70%);
				}
			}
			@media screen and (max-width: 743px) {
				border-bottom-left-radius: 1rem;
			}
		}
		&::before,
		a::before,
		a::after {
			content: "";
			position: absolute;
			width: 4.2rem;
			height: .5rem;
			left: calc(50% - 2.1rem);
			top: calc(50% - .3rem);
			border-radius: .5rem;
			background-color: #fff;
			pointer-events: none;
			transition: transform var(--transition), opacity var(--transition), border var(--transition);
			z-index: 2;
			@media screen and (max-width: 743px) {
				width: 1.6rem;
				height: .2rem;
				left: calc(50% - .8rem);
				top: calc(50% - .1rem);
			}
		}
		a::before {
			transform: translateY(-1.6rem);
			@media screen and (max-width: 743px) {
				transform: translateY(-0.6rem);
			}
		}
		a::after {
			transform: translateY(1.6rem);
			@media screen and (max-width: 743px) {
				transform: translateY(0.6rem);
			}
		}
	}
	&.-open .nav_btn::before {
		opacity: 0;
	}
	&.-open .nav_btn a::before {
		transform: translate(0) rotate(-45deg);
	}
	&.-open .nav_btn a::after {
		transform: translate(0) rotate(45deg);
	}
	nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 74rem;
		height: 100%;
		background-color: var(--color-red);
		line-height: 1.5;
		transition: transform .3s ease-in-out;
		transform: translateX(105%);
		z-index: 800;
		@media screen and (max-width: 743px) {
			top: var(--header-height);
			width: 100%;
			height: calc(100% - var(--header-height));
		}
		.-open & {
			transform: translateX(0);
		}
		.nav_wrap {
			overflow-y: auto;
			overscroll-behavior-y: contain;
			height: 100%;
			padding: 12rem 6rem 10rem;
			@media screen and (max-width: 743px) {
				padding: 3rem var(--sp-base-padding) 6rem;
			}
		}
		.simplebar-track {
			top: 10rem !important;
			bottom: 5rem;
			right: .5rem;
		}
		.simplebar-scrollbar.simplebar-visible:before {
			opacity: 0.2;
		}
		.gnav {
			a {
				position: relative;
				display: block;
				padding: 1.8rem;
				color: #fff;
				font-weight: var(--font-weight-bold);
				font-size: 2.4rem;
				text-decoration: none;
				@media screen and (max-width: 743px) {
					padding: 1.2rem 1rem;
					font-size: 1.3rem;
				}
				&[href]:not([target])::after {
					content: "";
					position: absolute;
					top: 50%;
					right: 1.6rem;
					width: 1rem;
					height: 1rem;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform-origin: 100% 0;
					transform: rotate(45deg);
					@media screen and (max-width: 743px) {
						right: 1.2rem;
						width: 0.9rem;
						height: 0.9rem;
					}
				}
				&[target]::after {
					content: "";
					position: absolute;
					top: calc(50% - .7rem);
					right: 1.4rem;
					width: 1.5rem;
					height: 1.3rem;
					background: url(../img/ico-blank.svg) no-repeat 50%;
					background-size: 100%;
					filter: brightness(0) invert(1);
					@media screen and (max-width: 743px) {
						right: 1rem;
					}
				}
				@media (hover) {
					& > span {
						display: block;
						transition: opacity var(--transition);
					}
					&:hover > span {
						opacity: 0.7;
					}
				}
			}
			& > li > a {
				border-bottom: .3rem solid #fff;
				@media screen and (max-width: 743px) {
					border-bottom-width: 0.2rem;
				}
				&[href] {
					margin-bottom: 2rem;
					@media screen and (max-width: 743px) {
						margin-bottom: 1rem;
					}
				}
				&.acc_title {
					cursor: pointer;
					.btn_arrow {
						--bg_hv: var(--bg);
						--color_hv: var(--color);
						right: 0;
						transform: rotate(90deg);
						transition: transform var(--transition);
						@media screen and (max-width: 743px) {
							--width: 2.4rem;
							right: 0.3rem;
						}
						&::after {
							@media screen and (max-width: 743px) {
								right: 0.8rem;
								width: 0.8rem;
								height: 0.8rem;
							}
						}
					}
					&.-open .btn_arrow {
						transform: rotate(270deg);
					}
				}
			}
			.acc_contents {
				margin-left: 4rem;
				@media screen and (max-width: 743px) {
					margin-left: 2rem;
				}
				ul {
					padding-bottom: 2rem;
					@media screen and (max-width: 743px) {
						padding-bottom: 1rem;
					}
					li {
						border-bottom: 2px solid #DF0000;
					}
				}
			}
		}
		.enav {
			margin-top: 4rem;
			@media screen and (max-width: 743px) {
				margin-top: 4rem;
			}
			a {
				position: relative;
				height: 14rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 2px solid #fff;
				border-radius: 7rem;
				text-decoration: none;
				color: #fff;
				font-size: 2.8rem;
				line-height: 1.8;
				font-weight: var(--font-weight-bold);
				box-shadow: var(--box-shadow);
				@media screen and (max-width: 743px) {
					height: 7.7rem;
					font-size: 1.8rem;
					line-height: 1.5;
				}
				.en {
					font-size: 5rem;
					line-height: 1;
					@media screen and (max-width: 743px) {
						font-size: 3.2rem;
					}
				}
				.btn_arrow {
					right: 4rem;
				}
				@media (hover) {
					&:hover {
						background-color: #fff;
						color: var(--color-red);
					}
				}
			}
		}
	}

	@media print {
		.logo {
			position: absolute;
		}
		.nav_btn,
		nav {
			display: none;
		}
	}
}

/* footer
====================================================================== */
#footer {
	letter-spacing: .1rem;
	position: relative;
	padding-block-start: 13rem;
	background-color: #fff;
	z-index: 3;
	@media screen and (max-width: 743px) {
		padding-block-start: 4rem;
	}
	nav {
		max-width: calc(100% - 5rem);
		width: 160rem;
		margin-inline: auto;
		padding-bottom: 11rem;
		font-weight: var(--font-weight-bold);
		font-size: 1.8rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			width: calc(100% - var(--sp-base-padding) * 2);
			padding-bottom: 4rem;
		}
		.logo {
			a {
				display: block;
				text-align: center;
				text-decoration: none;
				font-size: 3.6rem;
				line-height: 1.5;
				@media screen and (max-width: 743px) {
					text-align: center;
					font-size: 2.6rem;
				}
				img {
					width: 27.6rem;
					@media screen and (max-width: 743px) {
						width: 21rem;
					}
				}
				span {
					display: block;
				}
			}
		}
		.grav {
			display: flex;
			justify-content: space-between;
			dt {
				padding: 1.6rem 0 1rem;
				font-size: 2rem;
			}
			li {
				margin-top: 1rem;
			}
			@media screen and (max-width: 743px) {
				display: block;
				dl {
					display: none;
				}
			}
		}
		li a {
			text-decoration: none;
			&[target]::after {
				content: "";
				display: inline-block;
				width: 1.5rem;
				height: 1.3rem;
				background: url(../img/ico-blank.svg) no-repeat 50%;
				background-size: 100%;
				margin-left: 0.6rem;
			}
			@media (hover) {
				&:not(.entry):hover {
					opacity: 0.5;
				}
			}
			&.entry {
				position: relative;
				width: 28rem;
				height: 5.5rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 2rem;
				padding-bottom: 0.5rem;
				background-color: var(--color-red);
				border: .2rem solid var(--color-red);
				border-radius: 5.5rem;
				text-decoration: none;
				color: #fff;
				font-size: 2.2rem;
				line-height: 1;
				box-shadow: var(--box-shadow);
				font-weight: var(--font-weight-medium);
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					right: 2rem;
					width: 1rem;
					height: 1rem;
					border-top: 2px solid;
					border-right: 2px solid;
					transform-origin: 100% 0;
					transform: rotate(45deg);
					transition: none;
				}
				@media (hover) {
					&:hover {
						background-color: #fff;
						color: var(--color-red);
					}
				}
			}
		}
		.hnav {
			border-top: 2px solid #e6e6e6;
			@media screen and (min-width: 744px), print {
				display: flex;
				justify-content: center;
				gap: 7rem;
				margin-top: 7.5rem;
				padding-top: 6rem;
			}
			@media screen and (max-width: 743px) {
				margin-top: 4rem;
				li {
					border-bottom: 2px solid #e6e6e6;
				}
				a {
					position: relative;
					display: block;
					padding: 1.5rem 1rem;
					font-size: 1.8rem;
					&::after {
						position: absolute;
						top: calc(50% - .7rem);
						right: 1rem;
					}
				}
			}
		}
	}
	small {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 8rem;
		background-color: var(--color-base);
		color: #fff;
		font-size: 1.2rem;
		font-weight: var(--font-weight-bold);
	}
}

/* container
====================================================================== */
#container {
	overflow: hidden;
	@media screen and (max-width: 743px) {
		padding-top: var(--header-height);
	}
}

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

	パーツ

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

/* base_pd
====================================================================== */
.base_pd {
	padding-bottom: 20rem;
	@media screen and (max-width: 743px) {
		padding-bottom: 4rem;
	}
}

/* mt
====================================================================== */
._mt {
	margin-top: 4rem;
	@media screen and (max-width: 743px) {
		margin-top: 2rem;
	}
}

/* entry_bottom_bnr
====================================================================== */
.entry_bottom_bnr {
	position: relative;
	height: 94.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	padding-bottom: 10.5rem;
	color: #fff;
	text-align: center;
	z-index: 3;
	@media screen and (max-width: 743px) {
		height: 42rem;
		padding-bottom: 4rem;
	}
	& > .en {
		margin-bottom: 1rem;
		font-size: 6.7rem;
		line-height: 1.2;
		text-shadow: 0 0 2rem #CE2C29;
		@media screen and (max-width: 743px) {
			margin-bottom: .5rem;
			font-size: 3rem;
			text-shadow: 0 0 1rem #CE2C29;
		}
	}
	.lead {
		font-size: 4.6rem;
		letter-spacing: 0.5rem;
		line-height: 1.6;
		text-shadow: 0 0 2rem #CE2C29;
		@media screen and (max-width: 743px) {
			font-size: 2rem;
			letter-spacing: 0.2rem;
			line-height: 1.5;
			text-shadow: 0 0 1rem #CE2C29;
		}
		.s {
			display: block;
			font-size: 2.8rem;
			@media screen and (max-width: 743px) {
				font-size: 2rem;
			}
		}
		.jp-comma {
			margin-right: -0.3em;
		}
	}
	.btn {
		width: 100%;
		margin-top: 6rem;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
	}
}

/* point_character
====================================================================== */
.point_character {
	position: absolute;
	width: 12.6rem;
	@media screen and (max-width: 743px) {
		width: 5rem;
	}
}

/* point_circle
====================================================================== */
.point_circle {
	position: absolute;
	width: var(--width);
	height: var(--width);
	z-index: -3;
	&::before, &::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 100%;
	}
	&::after {
		background-color: #fff;
		z-index: 2;
	}

	&.-common_circle_1 {
		--width: 70.4rem;
		top: 85rem;
		right: calc(50% + 29rem);
		opacity: 0.3;
		@media screen and (max-width: 743px) {
			--width: 16rem;
			top: 56rem;
			right: calc(50% + 5rem);
		}
		&::before {
			background: radial-gradient(circle, #FF94B8 0%, rgba(255, 142, 0, 0) 70%);
			opacity: 0.8;
			transform-origin: 0 0;
			transform: scale(.6);
			@media screen and (max-width: 743px) {
				transform: translate(-2rem, -3rem) scale(.6);
			}
		}
	}
	&.-common_circle_2 {
		--width: 110rem;
		top: 216rem;
		right: calc(50% - 2rem);
		opacity: 0.3;
		@media screen and (max-width: 743px) {
			--width: 19.4rem;
			top: 94rem;
			right: calc(50% + 3rem);
		}
		&::before {
			background: radial-gradient(circle, #FF94B8 0%, rgba(255, 142, 0, 0) 70%);
			opacity: 0.8;
			transform-origin: 100% 0;
			transform: translate(7.5rem, 8.5rem) scale(.6);
			@media screen and (max-width: 743px) {
				transform: translate(5rem, -5rem);
			}
		}
	}
}

/* bg_semicircle
====================================================================== */
:where(*:has(>.bg_semicircle)) {
	position: relative;
	z-index: 1;
}
.bg_semicircle {
	position: absolute;
	aspect-ratio: 1;
	pointer-events: none;
	z-index: -2;
	& > div {
		width: 100%;
		height: 100%;
		background: url(../img/bg_semicircle.svg) no-repeat 50%;
		background-size: 100%;
		&.-white {
			background-image: url(../img/bg_semicircle-white.svg);
		}
	}

	&.-common_semicircle_1 {
		width: 35.7rem;
		left: calc(50% + 53rem);
		top: 64rem;
		& > div {
			transform: rotate(-129deg);
		}
		@media screen and (max-width: 743px) {
			width: 9rem;
			left: calc(50% + 8rem);
			top: 41rem;
			.-page-entry & {
				top: 34rem;
			}
			.-page-recruitment & {
				top: 39rem;
			}
		}
	}
	&.-common_semicircle_2 {
		width: 31rem;
		right: calc(50% + 53rem);
		top: 100rem;
		& > div {
			transform: rotate(-10deg);
		}
		@media screen and (max-width: 743px) {
			width: 7.8rem;
			right: calc(50% + 8.5rem);
			top: 47rem;
			.-page-entry & {
				top: 40rem;
			}
			.-page-recruitment & {
				top: 45rem;
			}
		}
	}
	&.-common_semicircle_3 {
		width: 81rem;
		left: calc(50% + 43rem);
		top: 199rem;
		& > div {
			transform: rotate(-10deg);
		}
		@media screen and (max-width: 743px) {
			width: 18.4rem;
			left: calc(50% + 11rem);
			top: 106rem;
		}
	}
}

/* point_semicircle
====================================================================== */
.point_semicircle {
	--width: 4.2rem;
	display: block;
	width: var(--width);
	height: var(--width);
	margin-inline: auto;
	transform: rotate(147deg);
	@media screen and (max-width: 743px) {
		--width: 2.1rem;
	}
	circle {
		fill: none;
		stroke: var(--color-blue);
		stroke-width: 16;
		--circumference: calc(3.1416 * 42);
		stroke-dasharray: var(--circumference) var(--circumference);
		transform-origin: 50% 50%;
	}
	@media screen {
		opacity: 0;
		transform: rotate(37deg);
		&.-show {
			opacity: 1;
			transform: rotate(147deg);
			transition: opacity .3s linear, transform .3s ease-out;
		}
	}
}
.has_point_semicircle {
	position: relative;
	padding-top: 8rem;
	.point_semicircle {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	&.-pc-lt {
		@media screen and (min-width: 744px), print {
			padding-top: 2rem;
			padding-left: 3.6rem;
			.point_semicircle {
				right: auto;
			}
		}
	}
	@media screen and (max-width: 743px) {
		width: fit-content;
		margin-inline: auto;
		padding-top: 1rem;
		padding-left: 2rem;
		.point_semicircle {
			right: auto;
		}
	}
}


/* page_header
====================================================================== */
.page_header {
	position: relative;
	height: 71rem;
	margin-bottom: 12rem;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, #fff 60%, rgba(255,255,255,0) 100%);
		z-index: -3;
	}
	.content {
		position: relative;
		height: 100%;
		padding-top: 40rem;
		z-index: 2;
		.category {
			color: var(--color-blue);
			font-weight: var(--font-weight-bold);
			font-size: 2.4rem;
			line-height: 1.5;
		}
		.title {
			font-size: 4.2rem;
			line-height: calc(65 / 42);
			.s {
				font-size: 2.4rem;
			}
		}
		.breadcrumbs {
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.img {
		position: absolute;
		top: 0;
		right: 0;
		left: calc(50% - 34rem);
		height: 100%;
		img {
			border-bottom-left-radius: 50rem;
		}
	}
	.bg_semicircle {
		width: 22.2rem;
		top: 31rem;
		right: calc(50% + 60rem);
		& > div {
			transform: rotate(-4deg);
		}
	}
	@media screen and (max-width: 743px) {
		height: auto;
		margin-bottom: 6rem;
		.content {
			padding-top: 8rem;
			text-align: center;
			.category {
				font-size: 1.6rem;
				line-height: 1.5;
			}
			.title {
				font-size: 2.4rem;
				.s {
					font-size: 2rem;
				}
			}
		}
		.img {
			position: static;
			margin-top: 2rem;
			aspect-ratio: 335 / 200;
			img {
				border-radius: 2rem;
			}
		}
		.bg_semicircle {
			width: 3.7rem;
			top: 4rem;
			right: calc(50% - 3.7rem / 2);
		}
	}
	@media screen {
		.bg_semicircle {
			opacity: 0;
			transform: rotate(-90deg);
			&.-show {
				transition: transform .5s ease-out, opacity .3s ease-out;
				opacity: 1;
				transform: rotate(0);
			}
		}
	}
}

/* breadcrumbs
====================================================================== */
.breadcrumbs {
	display: flex;
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.02em;
	li:not(:last-child) {
		position: relative;
		margin-right: 2.6rem;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: -1.6rem;
			width: 1rem;
			height: 1rem;
			margin-top: 0.1rem;
			border-right: .2rem solid;
			border-top: .2rem solid;
			transform-origin: 100% 0;
			transform: rotate(45deg);
		}
	}
	li:first-child {
		&::after {
			border-color: var(--color-red);
		}
		a {
			--a-color: var(--color-red);
		}
	}
	@media screen and (max-width: 743px) {
		display: none;
	}
}

/* btn_arrow
====================================================================== */
.btn_arrow {
	--width: 3.8rem;
	--bg: #fff;
	--color: var(--color-red);
	--bg_hv: var(--color);
	--color_hv: var(--bg);
	position: absolute;
	right: 6rem;
	top: calc(50% - var(--width) / 2);
	width: var(--width);
	height: var(--width);
	background-color: var(--bg);
	border-radius: 100%;
	color: var(--color);
	transition: background var(--transition), color var(--transition);
	@media screen and (max-width: 743px) {
		--width: 3rem;
		right: 2rem;
	}
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1.4rem;
		width: 1rem;
		height: 1rem;
		border-top: 2px solid;
		border-right: 2px solid;
		transform-origin: 100% 0;
		transform: rotate(45deg);
		transition: none;
		@media screen and (max-width: 743px) {
			right: 1rem;
			width: 0.9rem;
			height: 0.9rem;
		}
	}
	@media (hover) {
		a:hover & {
			background-color: var(--bg_hv);
			color: var(--color_hv);
		}
	}
}

/* entry_btn
====================================================================== */
.entry_btn {
	position: relative;
	width: 78rem;
	height: 18rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	background-color: var(--color-red);
	border-radius: 9rem;
	text-decoration: none;
	color: #fff;
	font-size: 3.2rem;
	line-height: 1.8;
	font-weight: var(--font-weight-bold);
	letter-spacing: .2rem;
	box-shadow: var(--box-shadow);
	@media screen and (max-width: 743px) {
		width: 100%;
		height: 7.7rem;
		font-size: 1.8rem;
		line-height: 1.5;
	}
	.en {
		font-size: 6.3rem;
		line-height: 1;
		@media screen and (max-width: 743px) {
			font-size: 3.2rem;
		}
	}
	@media (hover) {
		&:hover {
			background-color: #fff;
			color: var(--color-red);
		}
	}
}

/* box_btn
====================================================================== */
.box_btn {
	position: relative;
	display: block;
	width: 40rem;
	padding: 1.6rem;
	background-color: #fff;
	border-radius: 100rem;
	box-shadow: var(--box-shadow);
	font-size: 2.2rem;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	@media screen and (max-width: 743px) {
		width: 100%;
		padding: 1.4rem;
		font-size: 1.8rem;
	}
	&:not([target])::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 3rem;
		width: 1rem;
		height: 1rem;
		border-top: 2px solid var(--color-red);
		border-right: 2px solid var(--color-red);
		transform-origin: 100% 0;
		transform: rotate(45deg);
		@media screen and (max-width: 743px) {
			right: 2rem;
			width: 0.9rem;
			height: 0.9rem;
		}
	}
	&[target]::after {
		content: "";
		position: absolute;
		top: calc(50% - .7rem);
		right: 3rem;
		width: 1.5rem;
		height: 1.3rem;
		background: url(../img/ico-blank.svg) no-repeat 50%;
		background-size: 100%;
		@media screen and (max-width: 743px) {
			right: 2rem;
		}
	}
	@media (hover) {
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: .3rem solid var(--color-red);
			border-radius: 100rem;
			pointer-events: none;
			opacity: 0;
		}
		&:hover::before {
			opacity: 1;
		}
	}
}

.btn_group {
	margin-top: 5rem;
	@media screen and (max-width: 743px) {
		margin-top: 3rem;
	}
	li {
		margin-top: 1.5rem;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
	}
}

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

/* title
====================================================================== */
.l_title {
	margin-bottom: 4rem;
	font-size: 4.6rem;
	line-height: 1.5;
	letter-spacing: 0.3rem;
	@media screen and (max-width: 743px) {
		margin-bottom: 2rem;
		font-size: 2.4rem;
		letter-spacing: 0.2rem;
	}
}

.m_title {
	margin-bottom: 7rem;
	font-size: 4.2rem;
	line-height: 1.5;
	letter-spacing: 0.3rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
		font-size: 2.4rem;
		letter-spacing: 0.2rem;
	}
	.point_semicircle {
		margin-bottom: 3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
		}
	}
	.notes {
		margin-top: 4rem;
		font-size: 2rem;
		letter-spacing: 0.2rem;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
			font-size: 1.4rem;
		}
	}
	.lead {
		margin-top: 4rem;
		font-size: 2rem;
		letter-spacing: 0.2rem;
		line-height: 2;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
			font-size: 1.4rem;
			text-align: left;
		}
	}
}

.en_title {
	margin-bottom: 5rem;
	font-size: 10rem;
	line-height: 1;
	letter-spacing: 0.3rem;
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
		font-size: 4.2rem;
		text-align: center;
		letter-spacing: 0.2rem;
	}
	&.-blue {
		color: #cbe8f6;
	}
	&.-darkblue {
		color: #9ed5ef;
	}
	&.-pink {
		color: var(--color-pink1);
	}
	&.-center {
		text-align: center;
	}
}

.bg_title {
	margin-bottom: 6rem;
	padding: 0.95rem 0 1.1rem;
	background-color: var(--bg-pink1);
	border-radius: 10rem;
	font-size: 2.8rem;
	line-height: 1.4;
	letter-spacing: 0.3rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		margin-bottom: 3rem;
		padding: 0.5rem 0;
		border-radius: 2.1rem;
		font-size: 2.2rem;
		letter-spacing: 0.2rem;
	}
	&.-dark {
		background-color: var(--color-pink1);
	}
	&.-mbs {
		margin-bottom: 3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
		}
	}
}

/* page_lead
====================================================================== */
.page_lead {
	margin-bottom: 10rem;
	text-align: center;
	font-weight: var(--font-weight-bold);
	font-size: 3.2rem;
	line-height: calc(60 / 32);
	@media screen and (max-width: 743px) {
		margin-bottom: 5rem;
		font-weight: var(--font-weight-medium);
		font-size: 2.2rem;
		line-height: calc(36 / 22);
	}
	& > p + p {
		margin-top: 1em;
	}
	.point_semicircle {
		margin-bottom: 3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
		}
	}
	.page_header + & {
		margin-top: 14rem;
		@media screen and (max-width: 743px) {
			margin-top: 0;
		}
	}
}

/* page_tab
====================================================================== */
.page_tab {
	margin-top: 9rem;
	margin-bottom: 8rem;
	@media screen and (max-width: 743px) {
		margin-top: 2rem;
		margin-bottom: 4rem;
	}
	ul {
		display: flex;
		gap: 6rem;
		@media screen and (max-width: 743px) {
			gap: 1rem;
		}
		li {
			width: 100%;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				height: 20rem;
				background-color: #fff;
				border-radius: 4rem;
				box-shadow: var(--box-shadow);
				text-decoration: none;
				font-size: 3.2rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
				@media screen and (max-width: 743px) {
					height: 7rem;
					padding-bottom: .5rem;
					border-radius: 2rem;
					font-size: 1.2rem;
				}
				.en {
					font-size: 2.4rem;
					@media screen and (max-width: 743px) {
						font-size: .9rem;
						letter-spacing: .05em;
					}
				}
				&::after {
					content: "";
					position: absolute;
					top: calc(100% - 4rem);
					right: 3.4rem;
					width: 1rem;
					height: 1rem;
					border-top: 2px solid var(--color-red);
					border-right: 2px solid var(--color-red);
					transform-origin: 100% 0;
					transform: rotate(45deg);
					@media screen and (max-width: 743px) {
						top: auto;
						bottom: 0.8rem;
						right: calc(50% - .2rem);
						width: 0.6rem;
						border-width: 1px 1px 0 0;
						height: 0.6rem;
					}
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border: .3rem solid var(--color-red);
					border-radius: 4rem;
					pointer-events: none;
					opacity: 0;
				}
				&:hover::before {
					opacity: 1;
				}
				&.is-active {
					pointer-events: none;
					background-color: var(--bg-pink1);
					box-shadow: none;
					&::after {
						content: none;
					}
				}
			}
		}
	}
}

/* white_box
====================================================================== */
.white_box {
	margin-top: 6rem;
	padding: 6rem 14rem;
	background-color: #fff;
	border-radius: 4rem;
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
		padding: 3rem 1.5rem;
		border-radius: 2rem;
	}
	& + .white_box {
		@media screen and (min-width: 744px), print {
			margin-top: 8rem;
		}
	}
	&.-pd_l {
		@media screen and (min-width: 744px), print {
			padding-block: 10rem;
		}
	}
	&.-shadow {
		box-shadow: var(--box-shadow);
	}
}

/* accordion
====================================================================== */
.acc_contents {
	height: 0;
	overflow: hidden;
	transition: height .3s ease-in-out;
}


/* 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: 1em;
}
.circle_li > li::before {
	content: "";
	position: absolute;
	top: .6em;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: #005f8b;
	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: 0.8em;
}
@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;
	& > * {
		display: table-row;
		& > * {
			display: table-cell;
		}
	}
	dt {
		white-space: nowrap;
	}
	&.-dt_pr dt {
		padding-right: 1em;
	}
}



/* person_list
====================================================================== */
.person_list {
	position: relative;
	margin-top: 20rem;
	padding-block: 20rem 18rem;
	z-index: 2;
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
		padding-block: 4rem 4rem;
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #fff;
		z-index: -1;
	}
	&.index_person {
		margin-top: 0;
		padding-block: 9rem 4rem;
		@media screen and (max-width: 743px) {
			padding-block: 4rem 4rem;
		}
		&::before {
			left: auto;
			width: calc(50% + 80rem);
			max-width: calc(100% - 3rem);
			border-radius: 4rem 0 0 4rem;
			@media screen and (max-width: 743px) {
				left: var(--sp-base-padding);
				right: var(--sp-base-padding);
				width: auto;
				max-width: none;
				border-radius: 4rem;
			}
		}
	}
	header {
		.lead {
			@media screen and (max-width: 743px) {
				padding-inline: var(--sp-base-padding);
			}
		}
	}
	.list {
		section {
			padding-top: 3.5rem;
		}
		a {
			display: block;
			position: relative;
			.num {
				position: absolute;
				left: -3rem;
				top: -3rem;
				width: 13rem;
				height: 13rem;
				padding-top: 6rem;
				background: #fff url(../img/ico-smile.svg) no-repeat 50% 2.4rem;
				background-size: 3.2rem;
				border-radius: 100%;
				text-align: center;
				font-size: 4.5rem;
				line-height: 1;
				color: var(--color-blue);
				box-shadow: var(--box-shadow);
				z-index: 2;
			}
			.ph {
				position: relative;
				&::before {
					content: "";
					position: absolute;
					right: 0;
					left: 0;
					bottom: 0;
					height: calc(166 / 460 * 100%);
					background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
					opacity: 0.7;
				}
				img {
					border-radius: 4rem;
					aspect-ratio: 720 / 920;
					object-fit: cover;
				}
			}
			.content {
				position: absolute;
				left: 3rem;
				right: 3rem;
				bottom: 2.6rem;
				font-size: 1.8rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
				h3 {
					display: inline-block;
					span {
						font-size: 4rem;
					}
				}
				.join {
					display: inline-block;
					letter-spacing: 0.01rem;
					margin-left: 1rem;
				}
				.job {
					width: fit-content;
					margin-top: 0.5rem;
					padding: 0.2em 2.2rem;
					background-color: var(--color-base);
					border-radius: 100rem;
					color: #fff;
					font-size: 1.8rem;
					font-weight: var(--font-weight-medium);
				}
				.btn_arrow {
					right: 0;
					bottom: 0;
					top: auto;
				}
			}

			@media (hover) {
				.ph::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: var(--color-blue);
					mix-blend-mode: multiply;
					border-radius: 4rem;
					opacity: 0;
					transition: opacity var(--transition);
				}
				&:hover .ph::after {
					opacity: 0.5;
				}
			}
		}
		.navigation {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			margin-top: 3.5rem;
			.arrow {
				position: relative;
				width: 3rem;
				height: 5rem;
				cursor: pointer;
				&::before {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					width: 2.5rem;
					height: 2.5rem;
					border-top: .4rem solid var(--color-blue);
					border-right: .4rem solid var(--color-blue);
					transform-origin: 100% 0;
					transform: rotate(45deg);
					transition: border var(--transition);
				}
				&.l {
					transform: scaleX(-1);
				}
				&.swiper-button-disabled {
					pointer-events: none;
					&::before {
						border-color: #eeeeee;
					}
				}
			}
			.pagination {
				display: flex;
				align-items: center;
				gap: 1rem;
				width: auto;
				.swiper-pagination-bullet {
					margin: 0;
					width: 5rem;
					height: 0.5rem;
					border-radius: 0;
					background-color: #eeeeee;
					opacity: 1;
					transition: background var(--transition);
				}
				.swiper-pagination-bullet-active {
					background-color: var(--color-blue);
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		header {
			position: absolute;
			left: 0;
			right: 0;
			top: 11rem;
		}
		.list {
			margin-left: auto;
			width: calc(50% + 35rem);
			.swiper {
				padding-left: 6rem;
			}
			section {
				width: 36rem;
				margin-right: 6rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		.list {
			section {
				padding-top: 5rem;
			}
			a {
				width: 27.8rem;
				margin-inline: auto;
				.num {
					left: -2.3rem;
					top: -2.3rem;
					width: 10rem;
					height: 10rem;
					padding-top: 4.8rem;
					background-position: 50% 1.8rem;
					background-size: 2.6rem;
					font-size: 3.4rem;
				}
				.content {
					left: 2.5rem;
					right: 2.5rem;
					.job {
						margin-top: 0;
						padding: 0.2em 2.2rem;
						font-size: 1.3rem;
					}
				}
			}
			.navigation {
				justify-content: space-between;
				width: 27.8rem;
				margin-inline: auto;
				.pagination {
					.swiper-pagination-bullet {
						width: 3rem;
					}
				}
			}
		}
	}
	.plist_mt0 + & {
		margin-top: 0;
	}
}


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

	TOP

====================================================================================== */
.index_bg_white_block {
	position: relative;
	background-color: #fff;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -35rem;
		background-color: #fff;
		z-index: -1;
	}
}

.index_main {
	position: relative;
	height: 109rem;
	z-index: 2;
	@media screen and (max-width: 743px) {
		height: 51.4rem;
	}
	.ph {
		overflow: hidden;
		position: absolute;
		width: 126.4rem;
		top: -25.6rem;
		left: calc(50% - 19.8rem);
		aspect-ratio: 1;
		border-radius: 100%;
		display: flex;
		align-items: end;
		z-index: -1;
		@media screen and (max-width: 743px) {
			width: 33.1rem;
			top: -7.5rem;
			left: 7.2rem;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: 10rem solid #fff;
			border-radius: 100%;
			opacity: 0.4;
			@media screen and (max-width: 743px) {
				border-width: 2rem;
			}
		}
		@media screen and (min-width: 744px), print {
			img {
				width: calc(50vw + 19.8rem);
				height: calc(126.4rem - 25.6rem);
				object-fit: cover;
			}
		}
	}
	.title {
		position: absolute;
		top: 41.8rem;
		right: calc(50% + 19.5rem);
		width: 41.6rem;
		@media screen and (max-width: 743px) {
			top: 24.3rem;
			right: auto;
			left: 3.24rem;
			width: 21.5rem;
		}
	}
	.en {
		position: absolute;
		top: 77rem;
		right: 0;
		left: 0;
		padding-left: 4rem;
		text-align: center;
		font-size: 20rem;
		line-height: 1;
		letter-spacing: 0;
		background: linear-gradient(to bottom, #FF2722 40%, #FF8776 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		@media screen and (max-width: 743px) {
			top: 37rem;
			font-size: 4.8rem;
			padding-left: 0;
		}
	}

	.point_character {
		width: 16.4rem;
		top: 28rem;
		right: calc(50% + 60.5rem);
		@media screen and (max-width: 743px) {
			width: 6.2rem;
			top: 14.6rem;
			right: calc(50% + 11rem);
		}
	}

	.point_ph {
		position: absolute;
		top: 68.4rem;
		right: calc(50% + 62.4rem);
		width: 23.3rem;
		@media screen and (max-width: 743px) {
			top: 27.4rem;
			width: 10.2rem;
			right: 1.5rem;
		}
		img {
			border-radius: 100%;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 100%;
			width: 6rem;
			height: 6rem;
			background: url(../img/ico-smile.svg) no-repeat 50%;
			background-size: 100%;
			transform: rotate(12deg);
			@media screen and (max-width: 743px) {
				top: -1rem;
				left: -1rem;
				width: 2.4rem;
				height: 2.4rem;
				transform: rotate(-18deg);
			}
		}
	}

	.circle {
		position: absolute;
		aspect-ratio: 1;
		border-radius: 100%;
		z-index: -2;
		&.-circle_1 {
			top: -12rem;
			right: calc(50% + 47rem);
			width: 75.5rem;
			background: radial-gradient(circle, #ff94b8 0%, rgba(255, 148, 184, 0) 70%);
			opacity: 0.2;
			@media screen and (max-width: 743px) {
				top: 30rem;
				right: calc(50% + 8rem);
				width: 14.2rem;
			}
		}
		&.-circle_2 {
			top: -20rem;
			right: calc(50% + 12rem);
			width: 42.4rem;
			background: radial-gradient(circle, #ff8e00 0%, rgba(255, 142, 0, 0) 70%);
			opacity: 0.15;
			@media screen and (max-width: 743px) {
				top: -5rem;
				right: calc(50% + 8rem);
				width: 17.4rem;
			}
		}
	}

	.bg_semicircle.-index_main_semicircle_1 {
		width: 49rem;
		right: calc(50% + 31.5rem);
		top: 24.5rem;
		& > div {
			transform: rotate(-4deg);
		}
		@media screen and (max-width: 743px) {
			width: 10.4rem;
			right: calc(50% + 8rem);
			top: 17.5rem;
		}
	}
	.bg_semicircle.-index_main_semicircle_2 {
		width: 155.5rem;
		right: calc(50% - 40rem);
		top: -33.6rem;
		opacity: 0.13;
		& > div {
			transform: rotate(-180deg);
		}
		@media screen and (max-width: 743px) {
			display: none;
		}
	}

	@media screen {
		.ph {
			opacity: 0;
		}
		.title {
			opacity: 0;
			transform: translateY(3rem);
		}
		.en {
			opacity: 0;
		}
		.point_ph {
			opacity: 0;
		}
		.point_character {
			opacity: 0;
		}
		.bg_semicircle.-index_main_semicircle_1 {
			opacity: 0;
		}
		&.-show {
			.ph {
				transition: opacity 1s linear;
				opacity: 1;
			}
			.title {
				transition: opacity .3s .2s linear, transform .5s .2s cubic-bezier(0.34, 1.56, 0.64, 1);
				opacity: 1;
				transform: translateY(0);
			}
			.point_character {
				transition: opacity .5s .2s linear;
				opacity: 1;
			}
			.bg_semicircle.-index_main_semicircle_1 {
				transition: opacity .5s .2s linear;
				opacity: 1;
			}
			.en {
				transition: opacity .5s .5s linear;
				opacity: 1;
			}
			.point_ph {
				transition: opacity .5s 1s linear;
				opacity: 1;
			}
		}
	}
}

.index_lead_block {
	position: relative;
	padding-bottom: 90rem;
	text-align: center;
	font-size: 2.8rem;
	line-height: calc(60 / 28);
	@media screen and (max-width: 743px) {
		padding-bottom: 25rem;
		font-size: 1.6rem;
		line-height: calc(36 / 16);
		letter-spacing: .15rem;
	}
	.lead {
		margin-block: 3rem 5rem;
		font-size: 4.2rem;
		line-height: calc(65 / 42);
		font-weight: 700;
		letter-spacing: .5rem;
		@media screen and (max-width: 743px) {
			margin-block: 1rem 2rem;
			font-size: 2.4rem;
			line-height: calc(36 / 24);
			letter-spacing: .4rem;
		}
		.line {
			margin-right: 0.5rem;
			padding-left: 0.5rem;
			background: linear-gradient(to bottom, rgba(255,230,230,0) 60%, rgba(255,230,230,1) 60%);
		}
	}

	.point_ph {
		position: absolute;
		top: -2.5rem;
		left: calc(50% + 38.5rem);
		width: 47.5rem;
		@media screen and (max-width: 743px) {
			top: -8.6rem;
			width: 10.4rem;
			left: 2.8rem;
		}
		img {
			border-radius: 100%;
		}
		&::after {
			content: "";
			position: absolute;
			top: 3rem;
			left: -4rem;
			width: 6rem;
			height: 6rem;
			background: url(../img/ico-smile.svg) no-repeat 50%;
			background-size: 100%;
			transform: rotate(-14deg);
			@media screen and (max-width: 743px) {
				top: 0.2rem;
				left: 10.4rem;
				width: 2.4rem;
				height: 2.4rem;
				transform: rotate(18deg);
			}
		}
	}
	.img {
		position: absolute;
		bottom: 14rem;
		left: 50%;
		max-width: 183.1rem;
		width: 106%;
		transform: translateX(-50%);
		@media screen and (max-width: 743px) {
			bottom: 3rem;
			width: 34.6rem;
		}
	}

	.circle {
		position: absolute;
		aspect-ratio: 1;
		border-radius: 100%;
		z-index: -2;
		&.-circle_1 {
			top: 50rem;
			left: calc(50% + 34rem);
			width: 9rem;
			background-color: var(--bg-pink1);
			@media screen and (max-width: 743px) {
				top: 2rem;
				left: 2rem;
				width: 1.8rem;
			}
		}
		&.-circle_2 {
			bottom: 63.5rem;
			right: calc(50% + 16rem);
			width: 6.5rem;
			background-color: var(--bg-pink1);
			@media screen and (max-width: 743px) {
				bottom: 18.2rem;
				right: calc(50% - 2rem);
				width: 2rem;
			}
		}
		&.-circle_3 {
			bottom: 25rem;
			right: calc(50% + 51rem);
			width: 5.2rem;
			background-color: var(--bg-blue1);
			@media screen and (max-width: 743px) {
				bottom: 7rem;
				right: calc(50% + 6rem);
				width: 1.5rem;
			}
		}
		&.-circle_4 {
			bottom: 27.5rem;
			left: calc(50% + 58.4rem);
			width: 4.2rem;
			background-color: #fff2e2;
			@media screen and (max-width: 743px) {
				display: none;
			}
		}
	}

	.point_character {
		bottom: 51rem;
		left: calc(50% + 20rem);
		transform: rotate(-16deg);
		@media screen and (max-width: 743px) {
			top: 9rem;
			right: 2rem;
		}
	}

	.point_circle.-circle_1 {
		--width: 147rem;
		top: 47rem;
		right: calc(50% + 35rem);
		@media screen and (max-width: 743px) {
			--width: 33.2rem;
			top: 15rem;
			right: calc(50% + 1.5rem);
		}
		&::before {
			background: radial-gradient(circle, #ff8e00 0%, rgba(255, 142, 0, 0) 70%);
			opacity: 0.2;
			transform-origin: 100% 0;
			transform: translate(2rem, -20rem) scale(.6);
			@media screen and (max-width: 743px) {
				transform: translate(5rem, -5rem);
			}
		}
	}

	.point_circle.-circle_2 {
		--width: 90rem;
		top: 49rem;
		left: calc(50% + 39rem);
		@media screen and (max-width: 743px) {
			--width: 20.4rem;
			top: -20rem;
			left: calc(50% + 2rem);
		}
		&::before {
			background: radial-gradient(circle, #ff94b8 0%, rgba(255, 148, 184, 0) 70%);
			opacity: 0.3;
			transform: translate(-15.5rem, 12.5rem);
			@media screen and (max-width: 743px) {
				transform: translate(-1rem, 4rem);
			}
		}
	}

	.bg_semicircle.-index_lead_semicircle_1 {
		width: 23.5rem;
		right: calc(50% + 42rem);
		top: -2rem;
		& > div {
			transform: rotate(-97deg);
		}
		@media screen and (max-width: 743px) {
			width: 13.8rem;
			right: .5rem;
			top: -18rem;
			& > div {
				transform: rotate(-181deg);
			}
		}
	}
}

.index_about {
	position: relative;
	padding-bottom: 28rem;
	z-index: 1;
	@media screen and (max-width: 743px) {
		padding-bottom: 4rem;
	}
	.ph {
		@media screen and (min-width: 744px), print {
			position: absolute;
			top: 14rem;
			left: calc(50% - 2rem);
			width: 74rem;
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
		img {
			border-radius: 4rem;
			@media screen and (max-width: 743px) {
				border-radius: 1.8rem;
			}
		}
	}
	.point_circle {
		--width: 53.4rem;
		top: 22rem;
		left: calc(50% + 30rem);
		@media screen and (max-width: 743px) {
			--width: 26.8rem;
			top: -6.6rem;
			left: calc(50% + 5.5rem);
		}
		&::before {
			background: radial-gradient(circle, #ff8e00 0%, rgba(255, 142, 0, 0) 70%);
			opacity: 0.15;
			transform: translate(8rem, 7.5rem);
			@media screen and (max-width: 743px) {
				transform: translate(-4rem, 3.5rem);
			}
		}
	}
}

.index_data {
	position: relative;
	padding-block: 9rem 11rem;
	z-index: 1;
	@media screen and (min-width: 744px), print {
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: calc(50% + 80rem);
			max-width: calc(100% - 3rem);
			background-color: #f4f7f8;
			border-radius: 0 4rem 4rem 0;
			z-index: -1;
		}
		& > ._w {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: start;
		}
		.head {
			width: 56rem;
		}
		.contents {
			width: 76rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 4rem;
		background-color: #f4f7f8;
		border-radius: 4rem;
	}
	.more {
		margin-top: 4rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
	}
	.contents {
		section {
			height: 23rem;
			padding-top: 2.5rem;
			text-align: center;
			background-color: #fff;
			border-radius: 4rem;
			box-shadow: var(--box-shadow);
			font-size: 1.6rem;
			line-height: 1.8;
			h3 {
				margin-bottom: 1rem;
				font-size: 2.8rem;
				line-height: 1.2;
			}
			.number {
				margin-top: 1rem;
				font-size: 3.9rem;
				line-height: 1;
				color: var(--color-blue);
				.num {
					font-size: 5.6rem;
					margin-right: 0.5rem;
					vertical-align: -.05em;
					.l {
						font-size: 7.3rem;
					}
				}
			}
			&.data3,
			&.data4 {
				padding-top: 5rem;
				h3 {
					margin-bottom: 2rem;
				}
			}
			&.data2 {
				ul {
					display: flex;
					justify-content: space-between;
					margin: 2.5rem 3rem 0;
					font-size: 1.8rem;
					line-height: 1;
					.num {
						font-size: 2.4rem;
						margin-left: 0.3rem;
						vertical-align: -.05em;
						.l {
							font-size: 3.9rem;
						}
					}
					.male {
						color: var(--color-blue);
					}
					.female {
						color: var(--color-pink2);
					}
				}
				.graph {
					height: 2rem;
					margin: 1rem 2rem 0;
					background: linear-gradient(to left, #ffd3d2 0%, #9ed5ef 67.37%, #9ed5ef 100%);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			gap: 4rem;
			section {
				width: calc((100% - 4rem) / 2);
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			section {
				height: 19rem;
				margin-top: 2rem;
				padding-top: 1.5rem;
				border-radius: 2rem;
				line-height: 1.5;
				h3 {
					margin-bottom: 1rem;
					font-size: 2.4rem;
				}
				.number {
					font-size: 3rem;
					.num {
						font-size: 4.7rem;
						.l {
							font-size: 6.1rem;
						}
					}
				}
				&.data3,
				&.data4 {
					height: 16rem;
					padding-top: 3rem;
					h3 {
						margin-bottom: 1rem;
					}
				}
				&.data2 {
					padding-top: 2rem;
					ul {
						margin: 1.5rem 2rem 0;
						font-size: 1.5rem;
						.num {
							font-size: 2rem;
							.l {
								font-size: 3.3rem;
							}
						}
						.male {
							color: var(--color-blue);
						}
						.female {
							color: var(--color-pink2);
						}
					}
				}
			}
		}
	}
}

.index_job {
	position: relative;
	padding-block: 24rem 13rem;
	@media screen and (max-width: 743px) {
		padding-block: 13rem 0;
	}
	.contents {
		@media screen and (min-width: 744px), print {
			width: 50%;
			margin-left: auto;
			padding-left: 13rem;
		}
	}
	.ph {
		@media screen and (min-width: 744px), print {
			position: absolute;
			top: 46.5rem;
			right: calc(50% - 2rem);
			width: 74rem;
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
		img {
			border-radius: 4rem;
			@media screen and (max-width: 743px) {
				border-radius: 1.8rem;
			}
		}
	}
	.point_ph {
		position: absolute;
		top: -5rem;
		left: calc(50% + 38.5rem);
		width: 36.4rem;
		@media screen and (max-width: 743px) {
			top: 1.8rem;
			width: 13.4rem;
			left: calc(50% + 4rem);
		}
		img {
			border-radius: 100%;
		}
		&::after {
			content: "";
			position: absolute;
			top: 29rem;
			right: -4rem;
			width: 5rem;
			height: 5rem;
			background: url(../img/ico-smile.svg) no-repeat 50%;
			background-size: 100%;
			transform: rotate(14deg);
			@media screen and (max-width: 743px) {
				top: 14rem;
				right: 1rem;
				width: 2rem;
				height: 2rem;
			}
		}
	}
	.point_character {
		top: 7rem;
		right: calc(50% + 25rem);
		transform: rotate(21deg);
		@media screen and (max-width: 743px) {
			top: 5rem;
			right: calc(50% + 10rem);
		}
	}
	.point_circle {
		--width: 53.4rem;
		top: 32rem;
		right: calc(50% + 34.6rem);
		@media screen and (max-width: 743px) {
			--width: 29.2rem;
			top: 26rem;
			right: calc(50% + 5.5rem);
		}
		&::before {
			background: radial-gradient(circle, #ff94b8 0%, rgba(255, 148, 184, 0) 70%);
			opacity: 0.15;
			transform: translate(-23rem, -16rem);
			@media screen and (max-width: 743px) {
				transform: translate(6.8rem, -5.5rem);
			}
		}
	}
	.bg_semicircle.-index_job_semicircle_1 {
		width: 180rem;
		left: calc(50% - 40rem);
		top: -53rem;
		opacity: 0.6;
		& > div {
			transform: rotate(-180deg);
		}
		@media screen and (max-width: 743px) {
			width: 32.4rem;
			left: calc(50% - 8rem);
			top: auto;
			bottom: 21rem;
		}
	}
	.bg_semicircle.-index_job_semicircle_2 {
		width: 32.6rem;
		right: calc(50% + 16rem);
		top: 3rem;
		& > div {
			transform: rotate(-130deg);
		}
		@media screen and (max-width: 743px) {
			width: 10rem;
			right: calc(50% + 7rem);
			top: 3rem;
		}
	}
}

.index_person {
	@media screen and (min-width: 744px), print {
		&::after {
			content: "";
			position: absolute;
			left: -13rem;
			top: -15rem;
			width: 42rem;
			height: 42rem;
			background: radial-gradient(circle, #ff8e00 0%, rgba(255, 142, 0, 0) 75%);
			opacity: 0.15;
			z-index: -2;
		}
	}
}

.index_environment {
	position: relative;
	padding-block: 18rem 21rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		padding-block: 4rem;
	}
	header {
		.en {
			margin-bottom: 6rem;
			font-size: 19rem;
			line-height: 1;
			letter-spacing: 0.3rem;
			color: var(--color-pink1);
			@media screen and (max-width: 743px) {
				margin-bottom: 3rem;
				font-size: 4.2rem;
				letter-spacing: 0.2rem;
			}
		}
	}
	.lead {
		@media screen and (max-width: 743px) {
			text-align: left;
		}
	}
	.btn {
		margin-top: 9rem;
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			gap: 4rem;
			width: 152rem;
		}
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
		li {
			@media screen and (min-width: 744px), print {
				width: calc((100% - 4rem) / 2);
			}
			@media screen and (max-width: 743px) {
				& + li {
					margin-top: 2rem;
				}
			}
		}
		a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			overflow: hidden;
			height: 48rem;
			padding-top: 2rem;
			border-radius: 4rem;
			text-decoration: none;
			font-size: 4.6rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			color: #fff;
			@media screen and (max-width: 743px) {
				height: 21.8rem;
				padding-top: 1rem;
				border-radius: 1.8rem;
				font-size: 2rem;
			}
			.en {
				font-size: 3.2rem;
				@media screen and (max-width: 743px) {
					font-size: 1.4rem;
				}
			}
			.btn_arrow {
				top: auto;
				bottom: 4rem;
				@media screen and (max-width: 743px) {
					right: 1rem;
					bottom: 1rem;
				}
			}
			@media (hover) {
				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: #000;
					opacity: 0;
					z-index: -1;
				}
				&:hover::after {
					opacity: 0.5;
				}
			}
		}
	}
	.point_character {
		top: 31.6rem;
		right: calc(50% + 57.6rem);
		transform: rotate(-6deg);
		@media screen and (max-width: 743px) {
			top: 9rem;
			right: 2rem;
		}
	}
	.bg_semicircle.-index_environment_semicircle_1 {
		width: 59.8rem;
		left: calc(50% + 59.6rem);
		top: -36rem;
		& > div {
			transform: rotate(-129deg);
		}
		@media screen and (max-width: 743px) {
			width: 12.8rem;
			left: calc(50% + 14rem);
			top: -3rem;
		}
	}
	.bg_semicircle.-index_environment_semicircle_2 {
		width: 131.2rem;
		right: calc(50% + 25rem);
		top: 38rem;
		& > div {
			transform: rotate(-10deg);
		}
		@media screen and (max-width: 743px) {
			width: 12.8rem;
			right: calc(50% + 10rem);
			top: 10rem;
		}
	}
	.bg_semicircle.-index_environment_semicircle_3 {
		width: 131.2rem;
		left: calc(50% + 59.6rem);
		bottom: -63rem;
		@media screen and (max-width: 743px) {
			width: 32.4rem;
			left: calc(50% + 4rem);
			bottom: -15rem;
		}
	}
}

.index_recruitment {
	position: relative;
	padding-block: 20rem;
	text-align: center;
	@media screen and (max-width: 743px) {
		padding-block: 4rem;
	}
	header {
		.en {
			margin-bottom: 4rem;
			font-size: 6rem;
			line-height: 1.5;
			letter-spacing: 0.3rem;
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				font-size: 3.2rem;
				letter-spacing: 0.2rem;
			}
		}
	}
	.lead {
		@media screen and (max-width: 743px) {
			text-align: left;
		}
	}
	.btn {
		margin-top: 6rem;
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
		}
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
		li {
			@media screen and (min-width: 744px), print {
				width: 44rem;
			}
			@media screen and (max-width: 743px) {
				& + li {
					margin-top: 2rem;
				}
			}
		}
		a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 20rem;
			background-color: #fff;
			border-radius: 4rem;
			box-shadow: var(--box-shadow);
			text-decoration: none;
			font-size: 3.2rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			@media screen and (max-width: 743px) {
				height: 13rem;
				border-radius: 2rem;
				font-size: 2.2rem;
			}
			.en {
				font-size: 2.4rem;
				@media screen and (max-width: 743px) {
					font-size: 1.7rem;
				}
			}
			&::after {
				content: "";
				position: absolute;
				top: calc(100% - 4rem);
				right: 3.4rem;
				width: 1rem;
				height: 1rem;
				border-top: 2px solid var(--color-red);
				border-right: 2px solid var(--color-red);
				transform-origin: 100% 0;
				transform: rotate(45deg);
				@media screen and (max-width: 743px) {
					top: calc(100% - 3rem);
					right: 2rem;
					width: 0.9rem;
					height: 0.9rem;
				}
			}
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: .3rem solid var(--color-red);
				border-radius: 4rem;
				pointer-events: none;
				opacity: 0;
			}
			&:hover::before {
				opacity: 1;
			}
		}
	}
}

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

	データで見る桐灰小林製薬

====================================================================================== */
.data_contents {
	text-align: center;
	.en_title {
		margin-bottom: 8rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
		}
	}
	& > section + section {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
	.data_list {
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 4rem;
		}
		& > * {
			position: relative;
			padding: 2rem 0;
			border-radius: 4rem;
			text-align: center;
			box-shadow: var(--box-shadow);
			z-index: 2;
			@media screen and (min-width: 744px), print {
				width: 36rem;
			}
			@media screen and (max-width: 743px) {
				position: relative;
				padding: 2rem 0 1.5rem;
				border-radius: 2rem;
				& + * {
					margin-top: 2rem;
				}
			}
			dt {
				font-size: 2.8rem;
				font-weight: 700;
				@media screen and (max-width: 743px) {
					font-size: 2rem;
				}
				img {
					display: block;
					margin: 0 auto;
					width: 6.6rem;
				}
			}
		}
		.number {
			display: block;
			color: var(--color-blue);
			font-size: 3.9rem;
			line-height: 1;
			font-weight: var(--font-weight-medium);
			@media screen and (max-width: 743px) {
				margin-top: 0.5rem;
				font-size: 2.8rem;
			}
			.num {
				font-size: 5.6rem;
				@media screen and (max-width: 743px) {
					font-size: 4rem;
				}
				.l {
					font-size: 7.3rem;
					@media screen and (max-width: 743px) {
						font-size: 5.7rem;
					}
				}
			}
			&.-s {
				@media screen and (min-width: 744px), print {
					.num {
						font-size: 5rem;
						.l {
							font-size: 6.4rem;
						}
					}
				}
			}
			&.abs {
				position: absolute;
				font-size: 3.4rem;
				white-space: nowrap;
				.num {
					font-size: 4.5rem;
				}
				.title {
					display: block;
					color: var(--color-base);
					font-size: 2.4rem;
					font-weight: var(--font-weight-bold);
					@media screen and (max-width: 743px) {
						font-size: 1.8rem;
					}
				}
			}
			.number_notes {
				display: block;
				font-size: 2rem;
				margin-bottom: -1rem;
				@media screen and (max-width: 743px) {
					font-size: 1.6rem;
					margin-bottom: 0;
				}
			}
		}
		.graph {
			position: absolute;
			right: 0;
			left: 0;
			top: 10.8rem;
			margin-inline: auto;
			width: 11.2rem;
			z-index: -1;
			@media screen and (max-width: 743px) {
				top: 9rem;
			}
		}
		.data03 {
			@media screen and (max-width: 743px) {
				height: 22rem;
			}
			.abs.-male {
				text-align: right;
				top: calc(50% - 0.5rem);
				left: calc(50% + 1rem);
				@media screen and (max-width: 743px) {
					top: calc(50% - 1rem);
				}
			}
			.abs.-female {
				text-align: left;
				top: calc(50% + 2rem);
				right: calc(50% + 1rem);
				@media screen and (max-width: 743px) {
					right: calc(50%);
				}
			}
		}
		.data07 {
			@media screen and (max-width: 743px) {
				height: 22rem;
			}
			.abs {
				top: calc(50% + 2rem);
				left: calc(50% + 2rem);
				@media screen and (max-width: 743px) {
					top: calc(50% + 1rem);
					left: calc(50%);
				}
			}
		}
		&.-data1 {
			dl {
				@media screen and (min-width: 744px), print {
					width: 55rem;
				}
				dt {
					img {
						width: auto;
						margin-top: 1rem;
						height: 8.2rem;
						@media screen and (max-width: 743px) {
							height: 6.4rem;
						}
					}
				}
				dd {
					display: flex;
					align-items: end;
					justify-content: center;
					gap: 1.5rem;
					text-align: left;
					font-size: 1.6rem;
					line-height: calc(28 / 16);
					letter-spacing: .1rem;
					@media screen and (max-width: 743px) {
						gap: 1rem;
						font-size: 1.4rem;
						line-height: 1.5;
					}
					.note {
						padding-bottom: 0.2rem;
					}
				}
			}
			.number {
				@media screen and (min-width: 744px), print {
					font-size: 4.2rem;
					.num .l {
						font-size: 8rem;
					}
				}
			}
		}

		.holiday_working {
			padding: 2rem 2rem 3rem;
			@media screen and (min-width: 744px), print {
				width: 76rem;
			}
			@media screen and (max-width: 743px) {
				padding-bottom: 2rem;
			}
			dd {
				font-size: 1.8rem;
				line-height: calc(32 / 18);
				color: var(--color-blue);
			}
			.ph {
				margin-top: 2rem;
				@media screen and (min-width: 744px), print {
					display: flex;
					justify-content: center;
					gap: 3rem;
					li {
						width: 28rem;
					}
				}
				@media screen and (max-width: 743px) {
					li + li {
						margin-top: 2rem;
					}
				}
				img {
					border-radius: 2rem;
				}
			}
		}
	}
}

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

	仕事を知る

====================================================================================== */
.job_mission {
	position: relative;
	text-align: center;
	& > header {
		margin-bottom: 4rem;
		font-size: 4.2rem;
		line-height: 1.3;
		letter-spacing: 0.2em;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			font-size: 2.4rem;
		}
		.en {
			margin-bottom: 6rem;
			font-size: 10rem;
			line-height: 1;
			letter-spacing: 0.3rem;
			color: var(--color-pink1);
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				font-size: 4.2rem;
			}
		}
		.point_semicircle {
			margin-bottom: 4rem;
			@media screen and (max-width: 743px) {
				margin-bottom: 1.5rem;
			}
		}
	}
	.point_character {
		top: -6rem;
		right: calc(50% + 25rem);
		transform: rotate(-6deg);
		@media screen and (max-width: 743px) {
			top: -1rem;
			right: calc(50% + 10rem);
		}
	}
	.img {
		position: absolute;
		img {
			border-radius: 100%;
		}
		&.-img01 {
			width: 31.2rem;
			top: -6rem;
			left: calc(50% + 28rem);
			@media screen and (max-width: 743px) {
				width: 9.4rem;
				top: 4rem;
				left: calc(50% + 7.5rem);
			}
		}
		&.-img02 {
			width: 23.1rem;
			top: 7rem;
			right: calc(50% + 34rem);
			@media screen and (max-width: 743px) {
				width: 8rem;
				top: 7rem;
				right: calc(50% + 9rem);
			}
		}
	}

	.main_business {
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 4rem;
			&.-col1 {
				flex-direction: column;
			}
			&.-col2 {
				padding-inline: 10rem;
			}
		}
		li:not(:last-child) {
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
			}
		}
		dl:not(dl dl) {
			height: 100%;
			padding: 3rem 3rem 4rem;
			background-color: #fff;
			border-radius: 4rem;
			box-shadow: var(--box-shadow);
			@media screen and (min-width: 744px), print {
				width: 36rem;
				.-col1 & {
					width: 100%;
					display: flex;
					justify-content: space-between;
					& > dt {
						width: 27rem;
					}
					& > dd {
						width: 75rem;
						display: block;
					}
				}
			}
			@media screen and (max-width: 743px) {
				padding: 2rem 2rem;
				border-radius: 2rem;
			}
			& > dt {
				margin-bottom: 1rem;
				font-size: 2.8rem;
				line-height: 1.5;
				font-weight: 700;
				@media screen and (max-width: 743px) {
					font-size: 2rem;
				}
				.num {
					display: block;
					font-size: 5rem;
					line-height: 1;
					color: var(--color-pink2);
					@media screen and (max-width: 743px) {
						font-size: 4.6rem;
						line-height: 1.2;
					}
				}
			}
			& > dd {
				display: flex;
				justify-content: center;
				gap: 2.4rem;
				font-size: 1.6rem;
				line-height: 2;
				&.-sp_full {
					@media screen and (max-width: 743px) {
						margin-inline: -2rem;
					}
				}
			}
			ul {
				line-height: 1.5;
				text-align: left;
				li {
					position: relative;
					padding-left: 1.4em;
					&::before {
						content: "●";
						position: absolute;
						top: 0;
						left: 0;
						color: var(--color-pink2);
					}
					&:not(:last-child) {
						margin-bottom: 0.5em;
					}
				}
			}
			dl {
				text-align: left;
				dt {
					margin-bottom: 1rem;
					font-size: 2.4rem;
					line-height: 1.5;
					font-weight: var(--font-weight-bold);
					@media screen and (max-width: 743px) {
						margin-bottom: 0.5rem;
						font-size: 1.8rem;
					}
				}
			}
		}
	}
}


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

	社員を知る

====================================================================================== */
.person_header {
	position: relative;
	height: 80rem;
	margin-bottom: 24rem;
	&::before {
		content: "";
		position: absolute;
		top: -50rem;
		right: calc(50% - 10rem);
		width: 120rem;
		aspect-ratio: 1;
		background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%);
		z-index: -3;
	}
	&::after {
		content: "";
		position: absolute;
		top: 38rem;
		right: calc(50% + 34rem);
		width: 5rem;
		height: 5rem;
		background: url(../img/ico-smile.svg) no-repeat 50%;
		background-size: 100%;
		transform: rotate(14deg);
	}
	.content {
		position: relative;
		height: 100%;
		padding-top: 27rem;
		z-index: 2;
		.category {
			color: var(--color-blue);
			font-weight: var(--font-weight-bold);
			font-size: 2.4rem;
			line-height: 1.5;
		}
		.num {
			margin-top: 4rem;
			margin-bottom: 1rem;
			color: var(--color-blue);
			font-size: 7.3rem;
			line-height: 1;
		}
		.title {
			font-size: 3.6rem;
			line-height: calc(60 / 36);
		}
		.info {
			margin-top: 1.5rem;
			font-weight: var(--font-weight-bold);
			font-size: 1.8rem;
			line-height: 1.5;
			.alphabet {
				font-size: 4rem;
				line-height: 1;
			}
		}
		.group {
			margin-top: 1.5rem;
			display: inline-block;
			padding: 0em 1em;
			background-color: var(--color-base);
			border-radius: 10rem;
			color: #fff;
			font-size: 1.8rem;
		}
		.breadcrumbs {
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.bg_semicircle {
		width: 27.2rem;
		top: 17rem;
		right: calc(50% + 53rem);
		& > div {
			transform: rotate(-4deg);
		}
	}
	@media screen and (min-width: 744px), print {
		.img {
			position: absolute;
			top: 15rem;
			bottom: 0;
			right: 0;
			left: calc(50% - 26rem);
			border-radius: 10rem 0 0 10rem;
			overflow: hidden;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 34rem;
				background: linear-gradient(to right, #fff 40%, rgba(255,255,255,0) 100%);
				opacity: 0.5;
			}
		}
		.img2 {
			position: absolute;
			top: 15rem;
			bottom: 0;
			left: 0;
			right: calc(50% + 86rem);
			border-radius: 0 10rem 10rem 0;
			overflow: hidden;
		}
	}
	@media screen and (max-width: 743px) {
		height: auto;
		margin-bottom: 8rem;
		&::before {
			top: -30rem;
			right: calc(50% - 10rem);
			width: 60rem;
		}
		&::after {
			top: 34rem;
			right: 3rem;
			width: 4.5rem;
			height: 4.5rem;
		}
		.content {
			padding-top: 8rem;
			.category {
				font-size: 1.6rem;
				line-height: 1.5;
				text-align: center;
			}
			.num {
				margin-top: 2rem;
				margin-bottom: 1rem;
				font-size: 6rem;
				&::before {
					content: "";
					display: block;
					aspect-ratio: 335 / 200;
					margin-bottom: -.5lh;
				}
				span {
					display: block;
					margin-left: 2rem;
				}
			}
			.title {
				font-size: 2rem;
				line-height: 1.8;
			}
			.info {
				margin-top: 1rem;
				font-size: 1.6rem;
				.alphabet {
					font-size: 3.6rem;
				}
			}
			.group {
				margin-top: 0.5rem;
				font-size: 1.6rem;
			}
		}
		.img {
			position: absolute;
			top: 12.5rem;
			right: var(--sp-base-padding);
			left: var(--sp-base-padding);
			overflow: hidden;
			aspect-ratio: 335 / 200;
			img {
				border-radius: 2rem;
			}
		}
		.bg_semicircle {
			width: 3.7rem;
			top: 4rem;
			right: calc(50% - 3.7rem / 2);
		}
	}
	@media screen {
		.bg_semicircle {
			opacity: 0;
			transform: rotate(-90deg);
			&.-show {
				transition: transform .5s ease-out, opacity .3s ease-out;
				opacity: 1;
				transform: rotate(0);
			}
		}
	}
}

.interview_contents {
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 10%);
		z-index: -3;
	}
	.interview + .interview {
		margin-top: 14rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
	.interview {
		position: relative;
		font-size: 2rem;
		line-height: 2;
		@media screen and (max-width: 743px) {
			font-size: 1.8rem;
		}
		@media screen and (min-width: 744px), print {
			min-height: 48rem;
			.ph {
				position: absolute;
				top: 0;
				width: 68rem;
				img {
					border-radius: 4rem;
				}
			}
			&:nth-child(2n + 1) {
				padding-right: 76rem;
				.ph {
					right: 0;
				}
			}
			&:nth-child(2n) {
				padding-left: 76rem;
				.ph {
					left: 0;
				}
			}
		}
		@media screen and (max-width: 743px) {
			.ph {
				margin-bottom: 2rem;
				img {
					border-radius: 2rem;
				}
			}
		}
		h2 {
			margin-bottom: 5rem;
			font-size: 3.6rem;
			line-height: calc(60 / 36);
			@media screen and (max-width: 743px) {
				width: auto;
				margin-bottom: 3rem;
				font-size: 2.4rem;
				line-height: 1.5;
			}
		}
		.point_li {
			li::before {
				content: "●";
				position: absolute;
				top: 0;
				left: 0;
				color: var(--color-pink2);
			}
		}
	}
	.comment {
		margin-top: 10rem;
		padding: 6rem 14rem;
		background-color: #fff6f6;
		border-radius: 4rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			padding: 3rem 1.5rem;
			border-radius: 2rem;
		}
		.ph {
			margin-bottom: 3rem;
			img {
				border-radius: 4rem;
				@media screen and (max-width: 743px) {
					aspect-ratio: 305 / 180;
					object-fit: cover;
					border-radius: 2rem;
				}
			}
		}
	}
}

.interview_schedule {
	overflow: hidden;
	padding-block: 18rem 20rem;
	background-color: #f4f7f8;
	text-align: center;
	z-index: 1;
	@media screen and (max-width: 743px) {
		padding-block: 5rem 6rem;
	}
	h2 {
		margin-top: 4rem;
		margin-bottom: 7rem;
		font-size: 4.2rem;
		line-height: 1.5;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
			margin-bottom: 4rem;
			font-size: 2.4rem;
		}
	}
	.white_box {
		text-align: left;
		@media screen and (min-width: 744px), print {
			display: flex;
			gap: 6rem;
			padding: 6rem 8rem;
			& > * {
				width: 100%;
			}
		}
		@media screen and (max-width: 743px) {
			& > * + * {
				margin-top: 2rem;
				padding-top: 2rem;
				border-top: 2px solid #F4F7F8;
			}
		}
		dl {
			font-size: 1.6rem;
			line-height: 1.5;
			display: flex;
			@media screen and (max-width: 743px) {
				font-size: 1.4rem;
			}
			& + * {
				margin-top: 2rem;
				padding-top: 2rem;
				border-top: 2px solid #F4F7F8;
			}
			dt {
				width: 9rem;
				flex-shrink: 0;
				font-size: 2.2rem;
				color: var(--color-blue);
				@media screen and (max-width: 743px) {
					line-height: 1.3;
				}
			}
			.title {
				display: block;
				margin-bottom: 1rem;
				font-size: 2rem;
				font-weight: var(--font-weight-bold);
				@media screen and (max-width: 743px) {
					margin-bottom: 0.6rem;
					font-size: 1.7rem;
				}
			}
		}
	}
	.bg_semicircle {
		&.-schedule_semicircle_1 {
			width: 50rem;
			left: calc(50% + 64rem);
			top: -15rem;
			& > div {
				transform: rotate(-129deg);
			}
			@media screen and (max-width: 743px) {
				width: 9rem;
				left: calc(50% + 11rem);
				top: -2rem;
			}
		}
		&.-schedule_semicircle_2 {
			width: 77rem;
			right: calc(50% + 25rem);
			top: 35rem;
			& > div {
				transform: rotate(-10deg);
			}
			@media screen and (max-width: 743px) {
				width: 9rem;
				right: calc(50% + 8rem);
				top: 9rem;
			}
		}
	}
}

.bg_semicircle.-interview_semicircle_1 {
	width: 30.7rem;
	left: calc(50% + 50rem);
	top: 88rem;
	& > div {
		transform: rotate(-292deg);
	}
	@media screen and (max-width: 743px) {
		width: 9rem;
		left: calc(50% + 8rem);
		top: 60rem;
	}
}
.point_circle.-interview_circle_1 {
	--width: 126rem;
	top: 90rem;
	right: calc(50% - 10rem);
	@media screen and (max-width: 743px) {
		--width: 31.4rem;
		top: 103rem;
		right: calc(50% - 10rem);
	}
	&::before {
		background: radial-gradient(circle, #ff8e00 0%, rgba(255, 142, 0, 0) 70%);
		opacity: 0.2;
		transform-origin: 50% 0;
		transform: translate(-5rem, -10rem) scale(.6);
		@media screen and (max-width: 743px) {
			opacity: 0.3;
			transform: translate(-4rem, -4rem);
		}
	}
}
.point_circle.-interview_circle_2 {
	--width: 123rem;
	top: 160rem;
	left: calc(50% - 23rem);
	@media screen and (max-width: 743px) {
		--width: 31.4rem;
		top: 128rem;
		left: calc(50% - 10rem);
	}
	&::before {
		background: radial-gradient(circle, #FF94B8 0%, rgba(255, 142, 0, 0) 70%);
		opacity: 0.5;
		transform-origin: 50% 0;
		transform: translate(10rem, -10rem) scale(.6);
		@media screen and (max-width: 743px) {
			opacity: 0.3;
			transform: translate(2rem, -4rem);
		}
	}
}


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

	働き方改革の取り組み

====================================================================================== */
.ico_white_box {
	position: relative;
	@media screen and (min-width: 744px), print {
		min-height: calc(6rem * 2 + 16.5rem);
		padding-left: 40rem;
	}
	.ico {
		width: 16.5rem;
		margin-inline: auto;
		@media screen and (min-width: 744px), print {
			position: absolute;
			left: 0;
			right: calc(100% - 40rem);
		}
		@media screen and (max-width: 743px) {
			width: 11rem;
			margin-bottom: 2rem;
		}
	}
	h3 {
		margin-bottom: 2rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
		}
	}
	.system_item {
		padding-left: 1rem;
		@media screen and (min-width: 744px), print {
			display: flex;
			margin-top: 2.5rem;
		}
		dt {
			font-weight: var(--font-weight-bold);
			font-size: 2.4rem;
			line-height: calc(40 / 24);
			@media screen and (min-width: 744px), print {
				width: 25rem;
				flex-shrink: 0;
			}
			@media screen and (max-width: 743px) {
				margin-bottom: 1rem;
				font-size: 2rem;
			}
			.s {
				display: block;
				font-size: 1.8rem;
			}
		}
		& + .system_item {
			margin-top: 2rem;
			padding-top: 2rem;
			border-top: 2px solid var(--color-pink1);
		}
	}
}

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

	桐灰小林製薬で活躍する女性社員

====================================================================================== */
.successful-female-employee_list {
	@media screen and (min-width: 744px), print {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4rem;
	}
	&:has(+ .notes) {
		margin-bottom: 4rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 1rem;
		}
	}
	& > * {
		position: relative;
		padding: 2rem 0 4rem;
		border-radius: 4rem;
		text-align: center;
		box-shadow: var(--box-shadow);
		z-index: 2;
		@media screen and (min-width: 744px), print {
			width: 55rem;
		}
		@media screen and (max-width: 743px) {
			position: relative;
			padding: 2rem 0 1.5rem;
			border-radius: 2rem;
			& + * {
				margin-top: 2rem;
			}
		}
		dt {
			font-size: 2.8rem;
			font-weight: 700;
			@media screen and (max-width: 743px) {
				font-size: 2rem;
			}
			img {
				display: block;
				margin: 1rem auto 0;
				width: 7.4rem;
				@media screen and (max-width: 743px) {
					margin-top: 0.5rem;
				}
			}
		}
	}
	.number {
		display: block;
		margin-top: 1.5rem;
		color: var(--color-blue);
		font-size: 4.9rem;
		line-height: 1;
		@media screen and (max-width: 743px) {
			margin-top: 0.5rem;
			font-size: 2.8rem;
		}
		.num {
			font-size: 5.6rem;
			@media screen and (max-width: 743px) {
				font-size: 4rem;
			}
			.l {
				font-size: 7.3rem;
				@media screen and (max-width: 743px) {
					font-size: 5.7rem;
				}
			}
		}
	}
}


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

	研修評価制度・キャリア形成

====================================================================================== */
.training_contents {
	& > section:not(:last-child) {
		margin-bottom: 10rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 4rem;
		}
	}

	.ico {
		--width: 2.5rem;
		position: relative;
		@media screen and (max-width: 743px) {
			--width: 1.4rem;
		}
		&::before {
			content: "";
			position: absolute;
			top: calc(50% - var(--width) / 2);
			left: 0;
			width: var(--width);
			height: var(--width);
			border-radius: 100%;
		}
		&.-ico01::before {
			background-color: var(--color-red);
		}
		&.-ico02::before {
			background-color: var(--color-blue);
		}
		&.-ico03::before {
			background-color: #ffaa00;
		}
	}
	.training_table {
		padding: 5rem 2.6rem;
		border-radius: 4rem;
		border: .4rem solid var(--color-pink1);
		@media screen and (max-width: 743px) {
			padding: 3rem .6rem;
		}
		.ico_ex {
			display: flex;
			justify-content: end;
			gap: 2rem;
			margin-bottom: 2rem;
			font-weight: var(--font-weight-bold);
			@media screen and (max-width: 743px) {
				justify-content: center;
				gap: 1.2rem;
				font-size: 1rem;
				letter-spacing: .1rem;
			}
			li {
				position: relative;
				padding-left: 3.4rem;
				@media screen and (max-width: 743px) {
					padding-left: 2rem;
				}
			}
		}
		table {
			width: 100%;
			table-layout: fixed;
			border-collapse: separate;
			th, td {
				padding: 1.5rem;
				text-align: center;
				vertical-align: middle;
				line-height: 1.5;
				@media screen and (max-width: 743px) {
					padding: 0.5rem 0;
					font-size: 1.4rem;
					line-height: calc(20 / 14);
					letter-spacing: 0;
				}
			}
			thead {
				&::after {
					content: "";
					display: block;
					height: 2rem;
				}
				th {
					position: relative;
					background-color: var(--bg-blue1);
					font-weight: var(--font-weight-bold);
					@media screen and (max-width: 743px) {
						font-size: 1.2rem;
						line-height: 1.3;
					}
					&:first-child {
						border-radius: 10rem 0 0 10rem;
						@media screen and (max-width: 743px) {
							width: 22%;
						}
					}
					&:last-child {
						border-radius: 0 10rem 10rem 0;
					}
					& + th::before {
						content: "";
						position: absolute;
						top: 1rem;
						bottom: 1rem;
						left: 0;
						border-left: 1px solid #93c1d6;
					}
				}
			}
			tbody {
				tr + tr > * {
					border-top: 1px solid var(--color-pink1);
				}
				td {
					border-left: 1px solid var(--color-pink1);
					@media screen and (max-width: 743px) {
						height: 5rem;
					}
					ul {
						display: flex;
						justify-content: center;
						gap: 1rem;
						@media screen and (max-width: 743px) {
							gap: .5rem;
						}
					}
				}
			}
			.ico {
				display: block;
				width: var(--width);
				height: var(--width);
				margin-inline: auto;
				color: rgba(255,255,255,0);
				font-size: 1rem;
				line-height: 1;
				text-align: center;
			}
		}
	}

	.small-group {
		.ph {
			text-align: center;
			img {
				border-radius: 5rem;
				@media screen and (max-width: 743px) {
					border-radius: 2rem;
				}
			}
		}
	}

	.career-path_graph {
		display: flex;
		align-items: end;
		gap: 1.4rem;
		border-bottom: 2px solid var(--color-pink2);
		@media screen and (max-width: 743px) {
			gap: .2rem;
		}
		& > dl {
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 2rem 2rem 0 0;
			font-weight: var(--font-weight-bold);
			font-size: 1.8rem;
			line-height: calc(32 / 18);
			text-align: center;
			@media screen and (max-width: 743px) {
				border-radius: 1.5rem 1.5rem 0 0;
				font-size: 1.2rem;
				line-height: 1.3;
			}
			&.career1 {
				height: 12rem;
				background-color: var(--bg-blue1);
				@media screen and (max-width: 743px) {
					height: 7.7rem;
				}
			}
			&.career2 {
				height: 17rem;
				background-color: #def9e6;
				@media screen and (max-width: 743px) {
					height: 10.7rem;
				}
			}
			&.career3 {
				height: 22rem;
				background-color: var(--color-pink1);
				@media screen and (max-width: 743px) {
					height: 14.4rem;
				}
			}
			&.career4 {
				height: 28rem;
				background-color: #ff867f;
				color: #fff;
				@media screen and (max-width: 743px) {
					height: 18.2rem;
					justify-content: start;
					padding-top: 2rem;
				}
			}
			dt {
				margin-bottom: 0.5rem;
				font-size: 2.2rem;
				@media screen and (max-width: 743px) {
					margin-bottom: 1rem;
					font-size: 1.2rem;
				}
			}
			dd {
				@media screen and (max-width: 743px) {
					width: 100%;
					padding-left: .5rem;
				}
			}
			ul {
				text-align: left;
				@media screen and (max-width: 743px) {
					white-space: nowrap;
				}
			}
		}
	}
	.career-path_detail {
		margin-top: 8rem;
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			gap: 5rem 6rem;
		}
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
		section {
			line-height: 1.8;
			@media screen and (min-width: 744px), print {
				width: calc((100% - 6rem) / 2);
			}
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
			}
			h4 {
				margin-bottom: 2rem;
				padding-bottom: 1.5rem;
				font-size: 2.2rem;
				line-height: 1.5;
				border-bottom: 2px solid;
				@media screen and (max-width: 743px) {
					margin-bottom: 1.5rem;
					font-size: 1.8rem;
					line-height: 1.8;
				}
			}
			li {
				position: relative;
				padding-left: 1.5em;
				&::before {
					content: "●";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			dl + dl {
				margin-top: 0.5em;
			}
			&.career1 {
				h4 {
					border-color: var(--bg-blue1);
				}
				li::before {
					color: var(--bg-blue1);
				}
			}
			&.career2 {
				h4 {
					border-color: #def9e6;
				}
				li::before {
					color: #def9e6;
				}
			}
			&.career3 {
				h4 {
					border-color: var(--color-pink2);
				}
				li::before {
					color: var(--color-pink2);
				}
			}
			&.career4 {
				h4 {
					border-color: #ff867e;
				}
				li::before {
					color: #ff867e;
				}
			}
		}
	}
}

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

	採用情報

====================================================================================== */
.recruitment_contents {
	@media screen and (max-width: 743px) {
		margin-top: 10rem;
	}

	& > section + section {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}

}
.recruitment_table {
	a {
		--a-color: var(--color-link);
	}
	section {
		@media screen and (min-width: 744px), print {
			display: flex;
		}
		&:not(:last-child) {
			margin-bottom: 4rem;
			padding-bottom: 4rem;
			border-bottom: 2px solid var(--color-pink1);
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				padding-bottom: 2rem;
			}
		}
		h2 {
			font-size: 2.4rem;
			line-height: 1.6;
			@media screen and (min-width: 744px), print {
				width: 26rem;
				flex-shrink: 0;
			}
			@media screen and (max-width: 743px) {
				margin-bottom: 1rem;
				font-size: 2rem;
			}
		}
		.contents {
			& > * + * {
				margin-top: 0.5em;
			}
			dt {
				font-weight: var(--font-weight-bold);
			}
		}
	}
}
.recruitment_entry_btn {
	margin-top: 10rem;
	@media screen and (max-width: 743px) {
		margin-top: 4rem;
	}
}

.recruitment_flow {
	ol {
		margin-bottom: 3rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
		}
	}
	li {
		position: relative;
		background-color: var(--bg-blue1);
		padding-block: 1rem;
		padding-left: 11rem;
		border-radius: 10rem;
		font-size: 2.8rem;
		line-height: 1.5;
		font-weight: var(--font-weight-bold);
		@media screen and (max-width: 743px) {
			padding-left: 5.5rem;
			font-size: 1.6rem;
		}
		&:not(:last-child) {
			margin-bottom: 4.4rem;
			@media screen and (max-width: 743px) {
				margin-bottom: 3rem;
			}
			&::before {
				content: "";
				position: absolute;
				width: 0.6rem;
				height: 2.2rem;
				left: 6.2rem;
				top: calc(100% - 1rem);
				background-color: var(--color-pink2);
				@media screen and (max-width: 743px) {
					width: 0.3rem;
					height: 1.4rem;
					left: 3.1rem;
					top: calc(100% - .7rem);
				}
			}
			&::after {
				content: "";
				position: absolute;
				width: 2.8rem;
				height: 2.4rem;
				left: calc(6.2rem - 2.8rem / 2 + 0.6rem / 2);
				top: calc(100% + 1rem);
				background-color: var(--color-pink2);
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				@media screen and (max-width: 743px) {
					width: 1.6rem;
					height: 1.4rem;
					left: calc(3.1rem - 1.6rem / 2 + 0.3rem / 2);
					top: calc(100% + .5rem);
				}
			}
		}
		.num {
			position: absolute;
			left: 2rem;
			width: 9rem;
			text-align: center;
			color: var(--color-blue);
			@media screen and (max-width: 743px) {
				left: 1rem;
				width: 4.5rem;
			}
		}
	}
}

.recruitment_faq {
	a {
		--a-color: var(--color-link);
	}
	h3 {
		position: relative;
		margin-bottom: 2rem;
		padding: 0.95rem 7rem 1.1rem;
		background-color: var(--bg-blue1);
		border-radius: 10rem;
		font-size: 2.8rem;
		line-height: 1.4;
		letter-spacing: 0.3rem;
		cursor: pointer;
		@media screen and (max-width: 743px) {
			margin-bottom: 1rem;
			padding: 1rem 4rem 1rem 5rem;
			border-radius: 2.1rem;
			font-size: 1.4rem;
			line-height: 1.5;
			letter-spacing: 0.2rem;
		}
		&::before {
			content: "Q";
			position: absolute;
			top: 1.5rem;
			left: 3rem;
			font-family: var(--font-family-en);
			font-weight: 700;
			color: var(--color-blue);
			font-size: 3rem;
			line-height: 1;
			@media screen and (max-width: 743px) {
				top: 1rem;
				left: 2rem;
				font-size: 2rem;
			}
		}
		.arrow {
			position: absolute;
			right: 2rem;
			top: calc(50% - 3.8rem / 2);
			width: 3.8rem;
			height: 3.8rem;
			background-color: #fff;
			color: var(--color-blue);
			border-radius: 100%;
			transition: background var(--transition), color var(--transition), transform var(--transition);
			&::after {
				content: "";
				position: absolute;
				top: calc(50% - .7rem);
				right: calc(50% - .5rem);
				width: 1rem;
				height: 1rem;
				border-bottom: 2px solid;
				border-right: 2px solid;
				transform: rotate(45deg);
			}
			h3.-open & {
				transform: rotate(180deg);
			}
			@media screen and (max-width: 743px) {
				right: 0;
				transform: scale(calc(20 / 38));
				h3.-open & {
					transform: rotate(180deg) scale(calc(20 / 38));
				}
			}
		}
		@media (hover) {
			&:hover .arrow {
				background-color: var(--color-blue);
				color: #fff;
			}
		}
	}
	.a {
		position: relative;
		min-height: 3rem;
		margin-bottom: 4rem;
		padding: 1.4rem 3rem 1.4rem 9rem;
		background-color: var(--bg-pink2);
		border-radius: 3rem;
		font-size: 2rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			margin-bottom: 1rem;
			padding: 1rem 1rem 1rem 5rem;
			border-radius: 2.1rem;
			font-size: 1.4rem;
		}
		&::before {
			content: "A";
			position: absolute;
			top: 1.5rem;
			left: 5rem;
			font-family: var(--font-family-en);
			font-weight: 700;
			color: var(--color-pink2);
			font-size: 3rem;
			line-height: 1;
			@media screen and (max-width: 743px) {
				top: 1rem;
				left: 2rem;
				font-size: 2rem;
			}
		}
	}
	section:last-child .a {
		margin-bottom: 0;
	}
}



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

	エントリー

====================================================================================== */
.entry_header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	text-align: center;
	height: 71rem;
	margin-bottom: 3.5rem;
	padding-bottom: 10rem;
	color: #fff;
	text-shadow: 0 0 2rem #CE2C29;
	@media screen and (max-width: 743px) {
		height: 31rem;
		margin-bottom: 0;
		padding-bottom: 3rem;
		text-shadow: 0 0 1rem #CE2C29;
	}
	.en {
		margin-bottom: 1rem;
		font-size: 6.7rem;
		line-height: 1.2;
		@media screen and (max-width: 743px) {
			margin-bottom: .5rem;
			font-size: 3rem;
		}
	}
	.lead {
		font-size: 4.6rem;
		letter-spacing: 0.5rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			font-size: 2rem;
			letter-spacing: 0.2rem;
			line-height: 1.5;
		}
		.s {
			display: block;
			font-size: 2.8rem;
			@media screen and (max-width: 743px) {
				font-size: 2rem;
			}
		}
		.jp-comma {
			margin-right: -0.3em;
		}
	}
	img {
		border-radius: 0 0 10rem 10rem;
		@media screen and (max-width: 743px) {
			border-radius: 0 0 4rem 4rem;
		}
	}
}

.entry_contents {
	margin-top: 7rem;
	text-align: center;

	& > section {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
	.entry_box {
		padding: 0;
		font-size: 2.4rem;
		line-height: calc(46 / 24);
		font-weight: var(--font-weight-bold);
		overflow: hidden;
		@media screen and (max-width: 743px) {
			font-size: 1.4rem;
			line-height: 2;
			font-weight: var(--font-weight);
			text-align: left;
		}
		.txt {
			padding: 7.5rem;
			@media screen and (max-width: 743px) {
				padding: 3rem 1.5rem;
			}
		}
		.recruitment {
			max-width: 114rem;
			margin-inline: auto;
			margin-top: 4rem;
			padding: 4rem 6rem;
			background-color: var(--bg-pink2);
			border-radius: 4rem;
			text-align: left;
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
				padding: 2rem;
				border-radius: 2rem;
			}
			dl {
				dt {
					font-size: 2.4rem;
					font-weight: var(--font-weight-bold);
				}
				dd {
					font-size: 2rem;
					line-height: 2;
					font-weight: var(--font-weight);
				}
				@media screen and (min-width: 744px), print {
					display: flex;
					dt {
						width: 25rem;
						flex-shrink: 0;
					}
				}
				@media screen and (max-width: 743px) {
					dt {
						margin-bottom: 0.5rem;
						font-size: 1.6rem;
					}
					dd {
						font-size: 1.4rem;
					}
				}
			}
		}
		.btn {
			padding: 8rem;
			background-color: var(--bg-blue1);
			display: flex;
			justify-content: center;
			gap: 4rem;
			@media screen and (max-width: 743px) {
				flex-direction: column;
				gap: 2rem;
				padding: 3rem 1.5rem;
			}
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 55rem;
				height: 18rem;
				background-color: #fff;
				border-radius: 100rem;
				box-shadow: var(--box-shadow);
				line-height: 1;
				@media screen and (max-width: 743px) {
					width: 100%;
					height: 7rem;
				}
				.btn_arrow {
					--bg: var(--color-blue);
					--color: #fff;
					--bg_hv: var(--bg);
					--color_hv: var(--color);
				}
				&.-btn1 {
					padding: 0 2rem 1.4rem 0;
					img {
						width: 49.4rem;
					}
					@media screen and (max-width: 743px) {
						padding: 0 3rem .4rem 0;
						img {
							width: 19.4rem;
						}
					}
				}
				&.-btn2 {
					padding-bottom: 1rem;
					img {
						width: 23rem;
					}
					@media screen and (max-width: 743px) {
						padding: 0 3rem .4rem 0;
						img {
							width: 12rem;
						}
					}
				}
				&.-btn3 {
					padding-right: 5rem;
					img {
						width: 37rem;
					}
					@media screen and (max-width: 743px) {
						padding: 0 3rem 0 0;
						img {
							width: 22.4rem;
						}
					}
				}
				@media (hover) {
					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border: .4rem solid var(--color-blue);
						border-radius: 100rem;
						pointer-events: none;
						opacity: 0;
					}
					&:hover::before {
						opacity: 1;
					}
				}
			}
			@media screen and (min-width: 744px), print {
				li:only-child a {
					width: 78rem;
				}
			}
		}
	}
}