/* -----------------------------------------------
= main
----------------------------------------------- */
.main {
	padding-bottom: 40px;
	background: linear-gradient(90deg, #fff4d8, #fffff4);
}
@media print, screen and (min-width: 1024px) {/* PC */
.main {
	padding-bottom: 1px;
}
}/* @media */
/* -----------------------------------------------
= kv
----------------------------------------------- */
.kv .page-title {
	position: relative;
	height: 223px;
	margin-inline: 12px;
}
.kv .page-title img {
	height: 100%;
	object-fit: cover;
}
.kv .page-title h1 {
	position: absolute;
	left: 12px;
	bottom: 10px;
	color: #fff;
}
.kv .page-title h1 span {
	display: block;
}
.kv .page-title h1 span:first-child {
	font-family: var(--en);
	font-size: calc(1.2rem / 1.6);
	font-weight: 600;
}
.kv .page-title h1 span:last-child {
	font-family: var(--min);
	font-size: calc(1.8rem / 1.6);
	font-weight: 300;
	letter-spacing: .04em;
}
@media print, screen and (min-width: 768px) {/* PC */
.kv .page-title {
	height: 680px;
	max-height: calc(100vh - 80px);
	margin-inline: 40px;
}
.kv .page-title h1 {
	left: 40px;
	bottom: 40px;
}
.kv .page-title h1 span:first-child {
	font-size: calc(2.4rem / 1.6);
}
.kv .page-title h1 span:last-child {
	font-size: calc(3.6rem / 1.6);
	letter-spacing: .06em;
}
}/* @media */
/* -----------------------------------------------
= intro
----------------------------------------------- */
.intro {
	padding: 24px 12px 78px;
}
.intro h2 {
	margin-bottom: 5px;
	color: #007d46;
	font-size: calc(1.3rem / 1.6);
	font-weight: 700;
	letter-spacing: .25em;
}
.intro h3 {
	margin-bottom: 14px;
	font-family: var(--min);
	font-size: calc(1.8rem / 1.6);
	font-weight: 300;
}
.intro p {
	margin-bottom: 30px;
	font-size: calc(1.4rem / 1.6);
}
.intro img {
	display: block;
	max-width: 233px;
	margin-inline: auto;
}
@media print, screen and (min-width: 768px) {/* PC */
.intro {
	display: flex;
	align-items: center;
	gap: 0 60px;
	max-width: 1300px;
	margin-inline: auto;
	padding: 74px 40px 165px;
}
.intro h2 {
	margin-bottom: 8px;
	font-size: calc(2rem / 1.6);
}
.intro h3 {
	margin-bottom: 40px;
	font-size: calc(3.6rem / 1.6);
}
.intro p {
	margin-bottom: 0;
	font-size: calc(1.8rem / 1.6);
	line-height: calc(40 / 18);
}
.intro img {
	max-width: 288px;
	margin-inline: 0;
}
}/* @media */
/* -----------------------------------------------
= tab-list
----------------------------------------------- */
.tab-list {
	padding: 0 12px 55px;
}
.tab-list li + li {
	margin-top: 20px;
}
.tab-list li a {
	display: block;
	padding: 17px;
	color: #fff;
	border: 1px solid;
	border-radius: 6px;
	font-size: calc(1.8rem / 1.6);
	font-weight: 700;
	text-align: center;
	letter-spacing: .08em;
}
.tab-list li:nth-child(1) a {
	background: #3c75d1;
	border-color: #3c75d1;
}
.tab-list li:nth-child(2) a {
	background: #3c9c8e;
	border-color: #3c9c8e;
}
@media print, screen and (min-width: 768px) {/* PC */
.tab-list {
	max-width: 1380px;
	margin-inline: auto;
	padding: 0 40px 100px;
}
.tab-list ul {
	display: flex;
	justify-content: flex-end;
	gap: 0 35px;
}
.tab-list li {
	width: min(552px, calc(552 / 1500 * 100vw));
}
.tab-list li + li {
	margin-top: 0;
}
.tab-list li a {
	padding: 22px;
	border-radius: 8px;
	font-size: calc(2.4rem / 1.6);
}
}/* @media */
@media (hover:hover) {
.tab-list li a {
	transition: .3s;
}
.tab-list li a:hover {
	background: #fff;
}
.tab-list li:nth-child(1) a:hover {
	color: #3c75d1;
}
.tab-list li:nth-child(2) a:hover {
	color: #3c9c8e;
}
}/* @media */
/* -----------------------------------------------
= tab-cont
----------------------------------------------- */
.tab-cont {
	display: none;
}
.tab-cont.is-active {
	display: block;
}
/* -----------------------------------------------
= contents
----------------------------------------------- */
.contents {
	position: relative;
}
@media print, screen and (min-width: 1024px) {/* PC */
.contents {
	display: flex;
	gap: 0 calc(80 / 1360 * 100%);
	max-width: 1500px;
	margin-inline: auto;
	padding: 0 0 150px 40px;
}
.contents .index {
	width: 180px;
}
.contents .career,
.contents .benefits {
	flex: 1;
}
}/* @media */
@media print, screen and (max-width: 1023px) and (min-width: 768px) {/* TABLET */
.contents {
	padding: 0 0 150px 40px;
}
}/* @media */
/* -----------------------------------------------
= index
----------------------------------------------- */
.index {
	position: fixed;
	right: 0;
	bottom: 120px;
	z-index: 2;
}
.index .open {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 148px;
	padding: 5px 0;
	color: #fff;
	border-radius: 10px;
	font-size: calc(1.6rem / 1.6);
	text-align: center;
	letter-spacing: .08em;
}
#human-resource-development-and-career .index .open {
	background: #3c75d1;
}
#work-style-and-benefits .index .open {
	background: #3c9c8e;
}
.index .inner {
	position: relative;
	float: right;
	margin-right: 12px;
}
#human-resource-development-and-career .index .inner {
	width: 308px;
}
#work-style-and-benefits .index .inner {
	width: 252px;
}
.index .set {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	background: linear-gradient(90deg, #fff4d8, #fffff4);
	border: 1px solid #7a7a7a;
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .4s ease;
}
.index.is-open .set {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.index .close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
}
.index .close::before,
.index .close::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 100%;
	height: 1px;
	background: #7a7a7a;
}
.index .close::before {
	transform: rotate(-45deg);
}
.index .close::after {
	transform: rotate(45deg);
}
.index h2 {
	padding: 12px;
	font-size: calc(1.3rem / 1.6);
}
.index h3 {
	max-width: 180px;
	margin: 0 12px 16px;
	padding: 5px;
	color: #fff;
	border-radius: 10px;
	font-size: calc(1.3rem / 1.6);
}
#human-resource-development-and-career .index h3 {
	background: #3c75d1;
}
#work-style-and-benefits .index h3 {
	background: #3c9c8e;
}
.index ul {
	margin: 0 12px 32px;
}
#work-style-and-benefits .index ul {
	max-width: 190px;
}
.index li {
	margin-bottom: 16px;
}
.index a {
	display: block;
	padding: 5px;
	font-size: calc(1.4rem / 1.6);
	line-height: calc(18 / 14);
}
.index li a {
	color: #4d4d4d;
	background: #fff;
	border-radius: 10px;
	letter-spacing: .02em;
}
#human-resource-development-and-career .index li a.is-active {
	color: #004bc3;
	background: #e6edf9;
}
#work-style-and-benefits .index li a.is-active {
	color: #007d46;
	background: #e5f2f0;
}
.index p {
	max-width: 180px;
	margin: 0 12px 20px;
}
.index p a {
	color: #4d4d4d;
	background: #f3f3f3;
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: .04em;
}
@media print, screen and (min-width: 1024px) {/* PC */
.index {
	position: static;
	opacity: 1;
	pointer-events: auto;
}
.index .inner {
	position: sticky;
	top: 100px;
	z-index: 2;
	float: none;
	margin-right: 0;
}
#human-resource-development-and-career .index .inner {
	width: 180px;
}
#work-style-and-benefits .index .inner {
	width: 180px;
}
.index .set {
	position: static;
	background: transparent;
	border: none;
	border-radius: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.index h2 {
	margin-bottom: 12px;
	padding: 0;
	font-size: calc(1.6rem / 1.6);
}
.index h3 {
	margin: 0 0 16px;
	padding: 3px 8px;
	border-radius: 8px;
	font-size: calc(1.6rem / 1.6);
}
.index ul {
	margin: 0 0 32px;
}
.index a {
	padding: 6px 8px;
}
.index p {
	margin: 0;
}
.index p a {
	border-radius: 8px;
	font-size: calc(1.6rem / 1.6);
}
}/* @media */
@media print, screen and (max-width: 1023px) and (min-width: 768px) {/* TABLET */
.index {
	top: calc(100vh - 120px);
}
.index .is-sp {
	display: block;
}
}/* @media */
@media (hover:hover) {
.index a {
	transition: opacity .3s;
}
.index a:hover {
	opacity: .8;
}
.index li a.is-active:hover {
	color: #fff;
}
}/* @media */
/* -----------------------------------------------
= title
----------------------------------------------- */
.title {
	margin: 0 12px 30px;
}
.title span {
	display: block;
}
.title span:first-child {
	font-family: var(--en);
	font-size: calc(1.1rem / 1.6);
	font-weight: 600;
}
#human-resource-development-and-career .title span:first-child {
	color: #004bc3;
}
#work-style-and-benefits .title span:first-child {
	color: #007d46;
}
.title span:last-child {
	font-size: calc(2.6rem / 1.6);
	font-weight: 700;
}
@media print, screen and (min-width: 768px) {/* PC */
.title {
	margin: 0 0 100px;
}
.title span:first-child {
	font-size: calc(2rem / 1.6);
}
.title span:last-child {
	font-size: calc(5.2rem / 1.6);
}
}/* @media */
/* -----------------------------------------------
= block
----------------------------------------------- */
.block {
	margin-left: 12px;
}
.block + .block {
	margin-top: 50px;
}
.block .inner {
	padding: 30px 12px 50px;
	background: #fff;
}
#human-resource-development-and-career .block .inner {
	border-radius: 0 0 0 50px;
}
#work-style-and-benefits .block .inner {
	border-radius: 50px 0 0 50px;
}
.block .text {
	margin-bottom: 20px;
	font-size: calc(1.3rem / 1.6);
	letter-spacing: .04em;
}
@media print, screen and (min-width: 768px) {/* PC */
.block {
	margin-left: 0;
}
.block + .block {
	margin-top: 200px;
}
.block .inner {
	padding: 45px calc(80 / 1200 * 100%);
}
#human-resource-development-and-career .block .inner {
	border-radius: 0 0 0 200px;
}
#work-style-and-benefits .block .inner {
	padding-block: 70px;
	border-radius: 200px 0 0 200px;
}
.block .text {
	margin-bottom: 35px;
	font-size: calc(1.8rem / 1.6);
	letter-spacing: .06em;
}
}/* @media */
/* -----------------------------------------------
= career
----------------------------------------------- */
.career .sub-title {
	position: relative;
	min-height: 100px;
}
.career .sub-title span {
	display: flex;
	align-items: center;
	position: absolute;
	inset: 0;
	padding: 10px 25px 0;
	color: #fff;
	font-size: calc(2rem / 1.6);
	font-weight: 700;
	line-height: 1.3;
}
.career .sub-title img {
	height: 100%;
	min-height: 100px;
	object-fit: cover;
	border-radius: 50px 0 0 0;
}
.career #program .sub-title img {
	object-position: 0 50%;
}
.career .lead-title {
	margin-bottom: 20px;
	color: #004bc3;
	font-size: calc(1.6rem / 1.6);
	font-weight: 700;
	letter-spacing: .04em;
}
.career #program .img {
	margin-bottom: 20px;
	padding: 10px;
	background: #f3f3f3;
	border-radius: 8px;
}
.career #program .img figcaption {
	margin-bottom: 10px;
	font-size: calc(1rem / 1.6);
	font-weight: 700;
}
.career #career .img {
	margin-bottom: 20px;
}
.career #career .img figcaption {
	margin-bottom: 10px;
	font-size: calc(1.2rem / 1.6);
	font-weight: 700;
}
.career #support .img {
	margin-bottom: 20px;
	padding: 10px;
	background: #f3f3f3;
	border-radius: 10px;
}
.career #support .img h4 {
	margin-block: 30px 15px;
	color: #004bc3;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
	text-align: center;
}
.career #support .img ul {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(8, auto);
	margin: 0 -5px 20px;
}
.career #support .img li {
	position: relative;
	margin-block: 2px;
	padding-left: 10px;
	font-size: calc(1.25rem / 1.6);
	font-weight: 700;
	letter-spacing: 0;
}
.career #support .img ul li::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 8px;
	height: 8px;
	background: #3c75d1;
	border-radius: 50%;
}
.career .note {
	margin-block: 10px;
	font-size: calc(1rem / 1.6);
	text-align: right;
}
.career .list img {
	display: block;
	margin: 0 auto 20px;
}
.career #program .list img {
	max-width: 106px;
}
.career #career .list img {
	max-width: 126px;
}
.career #support .list img {
	max-width: 106px;
}
.career .list > ul > li,
.career .list > ol > li {
	padding: 10px;
	border: 1px solid #3c75d1;
	border-radius: 14px;
	box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.career .list > ul > li + li,
.career .list > ol > li + li {
	margin-top: 30px;
}
.career .list h5 {
	display: flex;
	gap: 0 8px;
	margin-bottom: 10px;
	color: #004bc3;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.career .list h5 span:first-child {
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	background: #eff4fb;
	border: 1px solid #004bc3;
	border-radius: 50%;
	font-family: var(--en);
	font-size: calc(1.2rem / 1.6);
	font-weight: 600;
}
.career .list h5 span:last-child {
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.career .list p {
	font-size: calc(1.3rem / 1.6);
	letter-spacing: .04em;
}
.career .list p + p {
	margin-top: 1em;
}
.career .list ul li ul li {
	position: relative;
	padding-left: 12px;
	font-size: calc(1.3rem / 1.6);
	letter-spacing: .04em;
}
.career .list ul li ul li::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 8px;
	height: 8px;
	background: #3c75d1;
	border-radius: 50%;
}
@media print, screen and (min-width: 768px) {/* PC */
.career .sub-title {
	min-height: 244px;
}
.career .sub-title span {
	padding: 20px calc(80 / 1200 * 100%) 0;
	font-size: calc(4.8rem / 1.6);
}
.career .sub-title img {
	min-height: 244px;
	border-radius: 200px 0 0 0;
}
.career .lead-title {
	margin-bottom: 25px;
	font-size: calc(2.8rem / 1.6);
}
.career #program .img {
	margin-bottom: 100px;
	padding: 20px 30px 40px;
	border-radius: 12px;
}
.career #program .img figcaption {
	margin-bottom: 30px;
	font-size: calc(1.8rem / 1.6);
}
.career #career .img {
	margin-bottom: 100px;
}
.career #career .img figcaption {
	font-size: calc(1.8rem / 1.6);
}
.career #support .img {
	display: flex;
	justify-content: center;
	gap: 0 calc(60 / 1060 * 100%);
	margin-bottom: 100px;
	padding: 45px 30px 50px;
	border-radius: 12px;
}
.career #support .img figure {
	width: calc(550 / 1060 * 100%);
}
.career #support .set {
	flex: 1;
}
.career #support .img h4 {
	margin-block: 0 25px;
	font-size: calc(1.8rem / 1.6);
	text-align: left;
}
.career #support .img ul {
	display: block;
	margin: 0;
}
.career #support .img li {
	margin-block: 4px;
	padding-left: 14px;
	font-size: calc(1.6rem / 1.6);
}
.career #support .img ul li::before {
	top: .4em;
	width: 10px;
	height: 10px;
}
.career .list {
	display: flex;
	align-items: start;
	gap: 0 35px;
	margin: 0;
}
.career #program .list img {
	max-width: 140px;
}
.career #career .list img {
	max-width: 146px;
}
.career #support .list img {
	max-width: 143px;
}
.career .list > ul > li,
.career .list > ol > li {
	padding: 20px 28px;
	border-radius: 16px;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.career .list > ul > li + li,
.career .list > ol > li + li {
	margin-top: 60px;
}
.career .list h5 {
	gap: 0 13px;
	margin-bottom: 10px;
	font-size: calc(2.4rem / 1.6);
}
.career .list h5 span:first-child {
	width: 38px;
	height: 38px;
	font-size: calc(2rem / 1.6);
}
.career .list h5 span:last-child {
	font-size: calc(2.4rem / 1.6);
}
.career .list p {
	font-size: calc(1.6rem / 1.6);
	letter-spacing: .06em;
}
.career .list ul li ul li {
	padding-left: 14px;
	font-size: calc(1.6rem / 1.6);
	letter-spacing: .06em;
}
.career .list ul li ul li::before {
	top: .4em;
	left: 0;
	width: 10px;
	height: 10px;
}
}/* @media */
/* -----------------------------------------------
= benefits
----------------------------------------------- */
.benefits .side h3 {
	margin-bottom: 15px;
	color: #007d46;
	font-size: calc(1.3rem / 1.6);
	font-weight: 700;
	letter-spacing: .04em;
}
.benefits .side h3 span {
	display: block;
	font-size: calc(2.6rem / 1.6);
	letter-spacing: .02em;
}
.benefits .img {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 25px;
	margin-bottom: 30px;
}
.benefits #balance .img div:first-child {
	max-width: 125px;
}
.benefits #balance .img div:last-child {
	max-width: 108px;
}
.benefits #event .img div:first-child {
	max-width: 90px;
}
.benefits #event .img div:last-child {
	max-width: 100px;
}
.benefits #other .img {
	max-width: 122px;
	margin-inline: auto;
}
.benefits .detail .list li {
	padding: 10px;
	border: 1px solid #3c9c8e;
	border-radius: 14px;
	box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.benefits .detail .list li + li {
	margin-top: 30px;
}
.benefits .detail .list h4 {
	margin-bottom: 10px;
	color: #ff8e00;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.benefits .detail p {
	font-size: calc(1.3rem / 1.6);
	letter-spacing: .04em;
}
.benefits .detail .lead {
	margin-bottom: 20px;
	color: #007d46;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.benefits .detail .item-wrap {
	margin-bottom: 60px;
}
.benefits .detail .item {
	position: relative;
	display: flex;
	align-items: start;
	gap: 0 12px;
}
.benefits .detail .item::before {
	content: "";
	position: absolute;
	top: 44px;
	left: 15px;
	width: 16px;
	height: 100%;
	background: url(../../img/system/index_item_arrow.svg) no-repeat 50% 100% / 100% auto;
}
.benefits .detail .item-wrap .item:last-child::before,
.benefits .detail .item:last-child::before {
	display: none;
}
.benefits .detail .item + .item {
	margin-top: 60px;
}
.benefits .detail .item .set {
	flex: 1;
}
.benefits .detail .item .box {
	flex: 1;
	padding: 10px;
	border: 1px solid #3c9c8e;
	border-radius: 14px;
	box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.benefits .detail .box + .box {
	margin-top: 30px;
}
.benefits .detail .item h4 {
	display: grid;
	place-content: center;
	width: 50px;
	min-height: 36px;
	color: #fff;
	background: linear-gradient(135deg, #00b058, #3db9ff);
	border-radius: 8px;
	box-shadow: 0 0 2px rgba(0,0,0,.4);
	font-size: calc(1.3rem / 1.6);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .04em;
}
.benefits .detail .item h5 {
	margin-bottom: 10px;
	color: #ff8e00;
	font-size: calc(1.4rem / 1.6);
	font-weight: 700;
}
.benefits .detail .item p + img {
	margin-top: 15px;
}
@media print, screen and (min-width: 768px) {/* PC */
.benefits .inner {
	display: flex;
	gap: 0 calc(60 / 1200 * 100%);
}
.benefits .side {
	width: calc(300 / 1080 * 100%);
}
.benefits .side-in {
	position: sticky;
	top: 100px;
}
.benefits .side h3 {
	margin-bottom: 35px;
	font-size: min(calc(2.4rem / 1.6), calc(24 / 1500 * 100vw));
	letter-spacing: .02em;
}
.benefits .side h3 span {
	font-size: min(calc(5.2rem / 1.6), calc(52 / 1500 * 100vw));
	line-height: calc(62 / 52);
}
.benefits .img {
	display: block;
	margin-bottom: 0;
	text-align: center;
}
.benefits .img > div {
	margin-bottom: 35px;
}
.benefits #balance .img div:first-child {
	max-width: 250px;
}
.benefits #balance .img div:last-child {
	max-width: 216px;
}
.benefits #event .img div:first-child {
	max-width: 180px;
}
.benefits #event .img div:last-child {
	max-width: 200px;
}
.benefits #other .img {
	max-width: 244px;
}
.benefits .detail {
	flex: 1;
}
.benefits .detail .list li {
	padding: 20px 28px;
	border-radius: 16px;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.benefits .detail .list li + li {
	margin-top: 60px;
}
.benefits .detail .list h4 {
	font-size: calc(2.4rem / 1.6);
}
.benefits .detail p {
	font-size: calc(1.6rem / 1.6);
	letter-spacing: .06em;
}
.benefits .detail .lead {
	margin-bottom: 80px;
	font-size: calc(1.8rem / 1.6);
}
.benefits .detail .item-wrap {
	margin-bottom: 60px;
}
.benefits .detail .item {
	gap: 0 23px;
}
.benefits .detail .item::before {
	top: 90px;
	left: 36px;
	width: 24px;
	height: calc(100% - 45px);
}
.benefits .detail .item + .item {
	margin-top: 83px;
}
.benefits .detail .item .box {
	padding: 20px 28px;
	border-radius: 16px;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.benefits .detail .item h4 {
	width: 98px;
	min-height: 73px;
	border-radius: 16px;
	box-shadow: 0 0 4px rgba(0,0,0,.4);
	font-size: calc(2rem / 1.6);
}
.benefits .detail .item h5 {
	margin-bottom: 10px;
	font-size: calc(2.4rem / 1.6);
}
.benefits .detail .item p + img {
	display: block;
	margin: 15px auto 0;
	max-width: 468px;
}
}/* @media */
