@charset "utf-8";
@import url(common.css);

/* mainimage */
.slideshow-wrapper {
	display: flex;
	height: 51.8rem;
	overflow: hidden;
	/* & .slideshow {
		display: flex;
		padding-right: 6rem;
	}
	& .slideshow:nth-child(1) {
		animation: loop 160s -80s linear infinite;
	}
	& .slideshow:nth-child(2) {
		animation: loop2 160s linear infinite;
	} */
	& .slideshow-img {
		padding-right: 6rem;
		width: 164.6rem;
		height: 51.8rem;
	}
}
@media screen and (max-width: 767px) {
	.slideshow-wrapper {
		height: 100vw;
		/* & .slideshow:nth-child(1) {
			animation: loop 160s -80s linear infinite;
		}
		& .slideshow:nth-child(2) {
			animation: loop2 160s linear infinite;
		} */
		& .slideshow-img {
			width: auto;
			height: 100%;
			aspect-ratio: 1646 / 518;
			& img {
				width: 100%;
				max-width: 100%;
				height: 100%;
				aspect-ratio: 1646 / 518;
			}
		}
	}
}
@keyframes loop {
	0% {
	  transform: translateZ(0) translateX(100%);
	}
	to {
	  transform: translateZ(0) translateX(-100%);
	}
  }
  @keyframes loop2 {
	0% {
	  transform: translateZ(0) translateX(0);
	}
	to {
	  transform: translateZ(0) translateX(-200%);
	}
  }
.mainimage-wrapper {
	margin-top: 0;
	position: relative;
	& h1 {
		padding: 8rem 0 0 12rem;
		@media screen and (max-width: 767px) {
			padding: min(calc(80 / 750 * 100vw), 8rem) 0 0 min(calc(120 / 750 * 100vw), 12rem);
		}
	}
}

/* scroll-item */
.scroll-item {
	position: absolute;
	bottom: 0;
	left: 4.1rem;
	padding-bottom: 13rem;
	z-index: 1;
	& span {
		writing-mode: vertical-rl;
		line-height: 1;
		position: relative;
		left: -0.4rem;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		-webkit-text-stroke: 0.1rem #ffffff;
	}
	&::before {
		content: "";
		position: absolute;
		bottom: 10rem;
		left: -0.4rem;
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		background-color: var(--t-black);
		animation: scrollBar 3s infinite linear normal;
	}
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0.1rem;
		height: 12rem;
		background-color: var(--t-black);
	}
	@media screen and (max-width: 767px) {
		padding-bottom: 9rem;
		& span {
			font-size: min(calc(36 / 750 * 100vw), 2rem);
		}
		&::before {
			bottom: 8rem;
		}
		&::after {
			width: 0.05rem;
			height: 8rem;
		}
	}
}
@keyframes scrollBar {
  0% {
	opacity: 1;
	transform: translateY(0) translateX(0);
  }
  60% {
	transform: translateY(10rem) translateX(0);
  }
  100% {
	opacity: 0;
	transform: translateY(10rem) translateX(0);
  }
}
@media screen and (max-width: 767px) {
	@keyframes scrollBar {
	  0% {
		opacity: 1;
		transform: translateY(0) translateX(0);
	  }
	  60% {
		transform: translateY(8rem) translateX(0);
	  }
	  100% {
		opacity: 0;
		transform: translateY(8rem) translateX(0);
	  }
	}
}

/* section */
section:not(.footer-navs) {
	margin-top: 20rem;
	padding-left: 12rem;
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: var(--grey);
		top: -3rem;
		left: 0;
	}
	&::after {
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 3rem;
		background-color: var(--grey);
		top: -3rem;
		left: 4.1rem;
	}
	@media screen and (max-width: 767px) {
		&::before {
			top: -2rem;
		}
		&::after {
			height: 2rem;
			background-color: var(--grey);
			top: -2rem;
			left: calc(5% + 1rem);
		}
	}
	& h2 {
		writing-mode: vertical-rl;
		line-height: 1;
		font-size: 2.2rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		white-space: nowrap;
		position: absolute;
		left: 3rem;
		top: 0;
		&::before {
			content: "";
			display: inline-block;
			width: 2rem;
			aspect-ratio: 1;
			background-color: var(--green);
			margin-bottom: 0.5em;
		}
	}
}
@media screen and (max-width: 767px) {
	section:not(.footer-navs) {
		margin-top: min(calc(200 / 750 * 100vw), 20rem);
		padding-left: 0;
		position: relative;
		& h2 {
			width: var(--inner-width);
			margin-inline: auto;
			writing-mode: horizontal-tb;
			line-height: 1;
			font-size: min(calc(44 / 750 * 100vw), 4.4rem);
			white-space: initial;
			position: relative;
			left: 0;
			&::before {
				content: "";
				display: inline-block;
				width: min(calc(40 / 750 * 100vw), 4rem);
				margin-bottom: 0;
				margin-right: 0.5em;
			}
		}
	}
}

/* btn */
.btn {
	display: grid;
	place-items: center;
	background-color: var(--green);
	border: 0.1rem solid var(--green);
	color: #ffffff;
	font-size: var(--t-middle);
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: 0.5s ease;
	&:hover {
		background-color: #ffffff;
		color: var(--green);
	}
}
@media screen and (max-width: 767px) {
	.btn {
		font-size: min(calc(36 / 750 * 100vw), 1.8rem);
		letter-spacing: 0.06em;
	}
}

/* link */
.link {
	display: block;
	width: max-content;
	border-bottom: 0.1rem solid var(--green);
	color: var(--green);
	font-size: var(--t-middle);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	transition: 0.5s ease;
	&:hover {
		border-bottom: 0.1rem solid transparent;
		opacity: 0.6;
	}
	&::before {
		content: "→";
	}
}
@media screen and (max-width: 767px) {
	.link {
		font-size: min(calc(36 / 750 * 100vw), 1.8rem);
		letter-spacing: 0.06em;
	}
}


/* flex-wrapper */
.flex-wrapper-col2 {
	display: flex;
	justify-content: center;
	gap: 4rem;
}
@media screen and (max-width: 767px) {
	.flex-wrapper-col2 {
		flex-direction: column;
		gap: min(calc(80 / 750 * 100vw), 8rem);
	}
}

/* info */
.info {
	width: var(--inner-width);
	margin: 0 auto;
	.c-important-info {
		border: 0.1rem solid var(--red);
		border-radius: 0.8rem;
		background-color: #ffffff;
		overflow: hidden;
		@media screen and (max-width: 767px) {
			margin-top: 3rem;
		}
	}
	.c-important-info__ttl {
		background: var(--red);
		color: #ffffff;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.45;
		padding: 2.5rem 3rem;
		@media screen and (max-width: 767px) {
			padding: 1.5rem 2rem;
		}
	}
	.c-important-info__list {
		margin: 2.5rem 3rem;
		@media screen and (max-width: 767px) {
			margin: 2rem;
		}
	}
	.c-important-info__link {
		display: flex;
		gap: 2rem;
		color: var(--t-black);
		text-decoration: none;
		@media screen and (max-width: 767px) {
			flex-wrap: wrap;
			.c-important-info__txt {
				width: 100%;
			}
		}
	}
	.e-label {
		background: #ffffff;
		border: 1px solid var(--t-black);
		border-radius: 50px;
		font-size: 1.4rem;
		line-height: 1.7;
		padding: 0.5rem 1.5rem;
		transition: background-color .3s ease, color .3s ease;
		white-space: nowrap;
	}
	.e-label._important_ {
		border-color: var(--red);
		color: var(--red);
	}
	& .info-title {
		margin-top: 6rem;
		font-size: 2.4rem;
		font-weight: 500;
	}
	& .tab-list {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		@media screen and (max-width: 767px) {
			flex-wrap: wrap;
		}
		& .tab-list-item {
			@media screen and (max-width: 767px) {
				width: calc(50% - 2rem);
			}
			& .tab-toggle {
				width: 100%;
				height: 100%;
				display: grid;
				place-items: center;
				color: var(--t-black);
				background: #ffffff;
				border: 1px solid var(--green);
				border-radius: 50px;
				font-size: 1.4rem;
				line-height: 1.7;
				padding: 0.5rem 1.5rem;
				transition: background-color .5s ease, color .5s ease;
				white-space: nowrap;
				&.tab-on {
					background: var(--green);
					color: #ffffff;
					pointer-events: none;
				}
				&:not(.tab-on):hover {
					background: var(--green);
					color: #ffffff;
				}
			}
		}
	}
	& .tab {
		margin-top: 4rem;
		& ul {
			border-top: 0.1rem solid #eaeaea;
		}
		& li {
			margin: 0;
			font-size: var(--t-middle);
			font-weight: 400;
			border-bottom: 0.1rem solid #eaeaea;
			transition: 0.5s ease;
			opacity: 1;
			/* &:nth-child(n+6) {
				display: none;
			} */
			&.is-hidden {
				opacity: 0;
				height: 0;
			}
			& a {
				display: flex;
				align-items: center;
				gap: 2rem;
				width: 100%;
				height: 100%;
				padding: 2rem;
				transition: opacity 0.5s ease;
				&:hover {
					opacity: 0.6;
				}
			}
		}
		& .date-wrapper {
			display: flex;
			align-items: center;
			gap: 2rem;
			& .category {
				min-width: calc(4em + 3rem);
				background: #ffffff;
				border: 1px solid var(--grey);
				border-radius: 50px;
				color: var(--grey);
				font-size: 1.4rem;
				line-height: 1.7;
				padding: 0.5rem 1.5rem;
				transition: background-color .3s ease, color .3s ease;
				white-space: nowrap;
			}
		}
		& p {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	& .btn {
		width: 20rem;
		height: 5rem;
		margin: 4rem auto 0;
	}
	& .more-btn {
		margin: 4rem 0 0;
	}
	& .link {
		margin: 4rem 0 0;
	}
	& .tab-news-list:not(:has(li:nth-child(5))) + .more-btn {
		display: none;
	}
	& svg:nth-of-type(1) {
		position: absolute;
		top: 17rem;
		left: 10rem;
		width: 32vw;
		height: auto;
		z-index: -1;
		@media screen and (max-width: 767px) {
			left: -20vw;
		}
	}
	& svg:nth-of-type(2) {
		position: absolute;
		bottom: 0;
		right: 20rem;
		width: 16.8vw;
		height: auto;
		z-index: -1;
		@media screen and (max-width: 767px) {
			right: -20vw;
		}
	}
}
@media screen and (max-width: 767px) {
	.info {
		width: var(--inner-width);
		& .tab {
			& li {
				font-size: 1.6rem;
				& a {
					flex-wrap: wrap;
					gap: 1rem;
					padding: 1rem;
				}
			}
			& .date-wrapper {
				gap: 1rem;
			}
			& p {
				width: 100%;
			}
		}
		& .btn {
			width: min(calc(400 / 750 * 100vw), 20rem);
			height: min(calc(100 / 750 * 100vw), 5rem);
		}
		& .link {
			margin: 4rem auto 0;
		}
	}
}

/* philosophy */
#philosophy {
	background-color: var(--l-green);
	padding-block: min(calc(40 / 750 * 100vw), 4rem)  min(calc(120 / 750 * 100vw), 12rem);
	width: 100%;
	position: relative;
	overflow: hidden;
	& h2 {
		top: 3rem;
		@media screen and (max-width: 767px) {
			top: 0;
		}
	}
	& .flex-wrapper-col2 {
		width: var(--inner-width);
		margin-inline: auto;
		flex-direction: row-reverse;
		@media screen and (max-width: 767px) {
			flex-direction: column;
			margin-top: 2rem;
			gap: min(calc(60 / 750* 100vw), 6rem);
		}
	}
	& .philosophy-img {
		width: 60%;
		& img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
		}
	}
	& .philosophy-desc {
		width: calc(40% - 4rem);
		@media screen and (max-width: 767px) {
			width: 100%;
		}
	}
	& .philosophy-box {
		width: 100%;
		position: relative;
		font-family: var(--serif);
		padding-bottom: 8rem;
		& h3 {
			margin-top: 0.5em;
			position: relative;
			font-size: 3.6rem;
			font-weight: 700;
			letter-spacing: 0.09em;
			z-index: 1;
			& span {
				color: rgba(15, 147, 64, 0.4);
				font-size: 5.2rem;
				font-weight: 500;
				letter-spacing: 0.04em;
				position: absolute;
				z-index: 0;
				left: 0.2em;
				top: -0.5em;
			}
		}
		& p {
			font-size: var(--t-middle);
			font-weight: 700;
			letter-spacing: 0.06em;
			line-height: 2;
			margin-top: 1rem;
			padding: 0 0.5em;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1320px) {
		& .philosophy-box {
			padding-bottom: 8rem;
		}
	}
	@media screen and (max-width: 767px) {
		& .philosophy-box {
			width: 100%;
			padding-bottom: 8rem;
		}
	}
	& .btn {
		width: min(calc(600 / 750 * 100vw), 30rem);
		height: min(calc(120 / 750 * 100vw), 6rem);
		margin: min(calc(100 / 750 * 100vw), 10rem) auto 0;
		@media screen and (max-width: 767px) {
			margin-top: 0;
		}
	}
}

/* organization */
#organization {
	& ul {
		width: var(--inner-width);
		margin-inline: auto;
		display: flex;
	}
	& li {
		width: calc(100% / 6);
		aspect-ratio: 1;
		& a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: url(../img/org_top.png) no-repeat;
			background-size: 10rem;
			background-position: center;
			&::before {
				content: "";
				display: block;
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				background-color: var(--green);
				border-radius: 50%;
				top: 1rem;
				left: 0;
				transform: scale(0);
				transition: 0.5s ease;
			}
			&:hover {
				background: url(../img/org_top_on.png) no-repeat;
				background-size: 10rem;
				background-position: center;
			}
			&:hover::before {
				transform: scale(1);
			}
			& p {
				color: var(--green);
				text-align: center;
				position: relative;
				top: 7rem;
			}
			&:hover p {
				color: #ffffff;
			}
		}
	}
	& li:nth-child(2) a {
		background: url(../img/org_philosophy.png) no-repeat;
		background-size: 10rem;
		background-position: center;
		&:hover {
			background: url(../img/org_philosophy_on.png) no-repeat;
			background-size: 10rem;
			background-position: center;
		}
	}
	& li:nth-child(3) a {
		background: url(../img/org_chart.png) no-repeat;
		background-size: 10rem;
		background-position: center;
		&:hover {
			background: url(../img/org_chart_on.png) no-repeat;
			background-size: 10rem;
			background-position: center;
		}
	}
	& li:nth-child(4) a {
		background: url(../img/org_overview.png) no-repeat;
		background-size: 10rem;
		background-position: center;
		&:hover {
			background: url(../img/org_overview_on.png) no-repeat;
			background-size: 10rem;
			background-position: center;
		}
	}
	& li:nth-child(5) a {
		background: url(../img/org_history.png) no-repeat;
		background-size: 10rem;
		background-position: center;
		&:hover {
			background: url(../img/org_history_on.png) no-repeat;
			background-size: 10rem;
			background-position: center;
		}
	}
	& li:nth-child(6) a {
		background: url(../img/org_governance.png) no-repeat;
		background-size: 10rem;
		background-position: center;
		&:hover {
			background: url(../img/org_governance_on.png) no-repeat;
			background-size: 10rem;
			background-position: center;
		}
	}
	@media screen and (max-width: 1320px) {
		& ul {
			flex-wrap: wrap;
		}
		& li {
			width: calc(100% / 3);
			& a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: url(../img/org_top.png) no-repeat;
				background-size: 50%;
				background-position: center;
				&::before {
					content: "";
					display: block;
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					background-color: var(--green);
					border-radius: 50%;
					top: 0;
					left: 0;
					transform: scale(0);
					transition: 0.5s ease;
				}
				&:hover {
					background: url(../img/org_top_on.png) no-repeat;
					background-size: 50%;
					background-position: center;
				}
				&:hover::before {
					transform: scale(1);
				}
				& p {
					color: var(--green);
					text-align: center;
					position: relative;
					top: 4.5rem;
					font-size: 1.4rem;
				}
				&:hover p {
					opacity: 0;
				}
			}
		}
		& li:nth-child(2) a {
			background: url(../img/org_philosophy.png) no-repeat;
			background-size: 50%;
			background-position: center;
			&:hover {
				background: url(../img/org_philosophy_on.png) no-repeat;
				background-size: 50%;
				background-position: center;
			}
		}
		& li:nth-child(3) a {
			background: url(../img/org_chart.png) no-repeat;
			background-size: 50%;
			background-position: center;
			&:hover {
				background: url(../img/org_chart_on.png) no-repeat;
				background-size: 50%;
				background-position: center;
			}
		}
		& li:nth-child(4) a {
			background: url(../img/org_overview.png) no-repeat;
			background-size: 50%;
			background-position: center;
			&:hover {
				background: url(../img/org_overview_on.png) no-repeat;
				background-size: 50%;
				background-position: center;
			}
		}
		& li:nth-child(5) a {
			background: url(../img/org_history.png) no-repeat;
			background-size: 50%;
			background-position: center;
			&:hover {
				background: url(../img/org_history_on.png) no-repeat;
				background-size: 50%;
				background-position: center;
			}
		}
		& li:nth-child(6) a {
			background: url(../img/org_governance.png) no-repeat;
			background-size: 50%;
			background-position: center;
			&:hover {
				background: url(../img/org_governance_on.png) no-repeat;
				background-size: 50%;
				background-position: center;
			}
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1320px) {
		& li {
			& a {
				& p {
					top: 7.5rem;
					font-size: 1.6rem;
				}
				&:hover p {
					opacity: 0;
				}
			}
		}
	}
}

/* recruit */
#recruit {
	@media screen and (max-width: 767px) {
		overflow-x: hidden;
	}
	& svg:nth-of-type(1) {
		position: absolute;
		top: 25rem;
		left: 10rem;
		z-index: -1;
		width: 32vw;
		height: auto;
		@media screen and (max-width: 1320px) {
			left: -20vw;
		}
	}
	& svg:nth-of-type(2) {
		position: absolute;
		bottom: -7rem;
		right: 6rem;
		z-index: -1;
		width: 16.8vw;
		height: auto;
		@media screen and (max-width: 1320px) {
			right: -20vw;
		}
	}
	& .recruit-list {
		width: var(--inner-width);
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
		padding-top: 8rem;
		position: relative;
		@media screen and (max-width: 1320px) {
			gap: 2rem;
		}
		@media screen and (max-width: 767px) {
			padding-top: 0;
		}
		&::before {
			content: "RECRUIT";
			display: block;
			position: absolute;
			font-size: 8rem;
			font-family: 'Noto Serif JP';
			font-weight: 500;
			top: -3.8rem;
			color: #000000;
			letter-spacing: 0.04em;
		}
		@media screen and (max-width: 767px) {
			&::before {
				content: "";
				display: none;
			}
		}
		& li {
			width: calc((100% - 4.5rem) / 4);
			& a {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				border: 0.1rem solid var(--t-black);
				border-radius: 2rem;
				position: relative;
				overflow: hidden;
				transition: 0.5s ease;
			}
			@media screen and (max-width: 1320px) {
				width: 100%;
			}
		}
		& img {
			flex-shrink: 0;
			width: 100%;
			height: auto;
		}
		& h3, & p {
			width: calc(100% - 4.4rem);
		}
		& h3 {
			margin: 3.2rem auto 0;
			font-size: 2.4rem;
			font-weight: 700;
		}
		& p {
			margin: 1.2rem auto 3.2rem;
			font-size: 1.6rem;
			font-weight: 400;
			line-height: 1.75;
		}
		& a:hover {
			border-color: var(--green);
			background-color: var(--l-green);
		}
		& li:nth-child(1) {
			& h3 {
				color: var(--blue);
			}
			& a:hover {
				border-color: var(--blue);
				background-color: var(--l-blue);
			}
		}
		& li:nth-child(2) {
			& h3 {
				color: var(--pink);
			}
			& a:hover {
				border-color: var(--pink);
				background-color: var(--l-pink);
			}
		}
		& li:nth-child(3) {
			& h3 {
				color: var(--orange);
			}
			& a:hover {
				border-color: var(--orange);
				background-color: var(--l-orange);
			}
		}
		& li:nth-child(4) {
			& h3 {
				color: var(--green2);
			}
			& a:hover {
				border-color: var(--green2);
				background-color: var(--l-green2);
			}
		}
	}
	& .recruit-list + h2 {
		margin-top: 8rem;
	}
	& .event-wrapper {
		width: var(--inner-width);
		margin-inline: auto;
		margin-top: 16rem;
		position: relative;
		@media screen and (max-width: 1320px) {
			margin-top: 8rem;
			position: relative;
		}
		&::before {
			content: "EVENT";
			display: block;
			position: absolute;
			font-size: 8rem;
			font-family: 'Noto Serif JP';
			font-weight: 500;
			top: -11.8rem;
			color: #000000;
			letter-spacing: 0.04em;
		}
		@media screen and (max-width: 767px) {
			margin-top: 1.8rem;
			&::before {
				content: "";
				display: block;
				position: absolute;
				width: calc(100vw - 2px);
				height: 1px;
				background-color: var(--grey);
				top: -6.2rem;
				left: -5%;
			}
			&::after {
				content: "";
				display: block;
				position: absolute;
				width: 1px;
				height: 2rem;
				background-color: var(--grey);
				top: -6.2rem;
				left: 1rem;
			}
		}
	}
	& .event-list {
		margin: 0;
		display: flex;
		& li.event-list-item {
			border-top: 1px solid var(--grey);
			border-bottom: 1px solid var(--grey);
			width: 50%;
			height: auto!important;
			border-left: 1px solid var(--grey);
			@media screen and (max-width: 1320px) {
				width: 100%;
			}
			&:last-child {
				border-right: 1px solid var(--grey);
			}
		}
		& a {
			display: flex;
			flex-wrap: wrap;
			padding: 2rem 3rem 3rem 2rem;
			height: 100%;
			background-color: #ffffff;
			transition: 0.5s ease;
			position: relative;
			@media screen and (max-width: 1320px) {
				padding: 2rem 0;
			}
			&:hover {
				background-color: var(--l-green);
				color: var(--green);
				opacity: 1;
			}
			&::before {
				content: "→";
				display: inline-block;
				position: absolute;
				font-size: 2rem;
				right: 2rem;
				bottom: 1rem;
				transition: 0.5s ease;
			}
			@media screen and (max-width: 1320px) {
				&::before {
					right: 0;
					bottom: 0;
				}
			}
			&:hover::before {
				color: var(--green);
				transform: translateX(0.5em);
			}
		}
		& .event-list-img {
			position: relative;
			overflow: hidden;
			width: 17rem;
			height: 17rem;
			@media screen and (max-width: 1320px) {
				width: 9.5rem;
				height: 9.5rem;
			}
			& img {
				height: 100%;
				width: 100%;
				object-fit: contain;
				object-position: center;
			}
		}
		& .event-list-text {
			width: calc(100% - 17rem);
			padding: 0 0 0 2rem;
			@media screen and (max-width: 1320px) {
				width: calc(100% - 9.5rem);
				padding: 0 0 0 1.5rem;
			}
		}
		& .event-category {
			& time {
					display: block;
					font-size: 1.6rem;
					font-weight: 500;
			}
		}
		& .event-list-text-title {
			margin-top: 1.5rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1.8;
			@media screen and (max-width: 1320px) {
				margin-top: 0.7rem;
				line-height: 1.6;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
		& .event-list-text-detail {
			margin-top: 1.5rem;
			font-size: 1.8rem;
			font-weight: 400;
			line-height: 1.6;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			@media screen and (max-width: 1320px) {
				display: none;
			}
		}
	}
	& .event-list-button-next,
	& .event-list-button-prev {
		position: absolute;
		top: -78px;
		width: 60px;
		height: 60px;
		background-color: var(--green);
		border: 0.1rem solid var(--green);
		border-radius: 50%;
		color: #ffffff;
		font-weight: 700;
		display: grid;
		place-items: center;
		cursor: pointer;
		transition: 0.5s ease;
		z-index: 1;
		@media screen and (max-width: 767px) {
			top: 50%;
			transform: translateY(-50%);
			width: 4rem;
			height: 4rem;
		}
		&:hover {
			opacity: 0.8;
		}
		&.swiper-button-disabled,
		&.swiper-button-disabled:hover {
			opacity: 0.4;
			@media screen and (max-width: 767px) {
				opacity: 0;
			}
		}
		&.swiper-button-lock {
			display: none;
		}
	}
	& .event-list-button-prev {
		left: 360px;
		@media screen and (max-width: 767px) {
			left: -2rem;
		}
		&.swiper-button-disabled {
			left: 360px;
			@media screen and (max-width: 767px) {
				left: -6rem;
			}
		}
	}
	& .event-list-button-next {
		left: 450px;
		@media screen and (max-width: 767px) {
			left: auto;
			right: -2rem;
		}
		&.swiper-button-disabled {
			left: 450px;
			@media screen and (max-width: 767px) {
				left: auto;
				right: -6rem;
			}
		}
	}
}

/* business */
#business {
	& svg:nth-of-type(1) {
		position: absolute;
		top: -8rem;
		left: 10rem;
		z-index: -1;
		width: 32vw;
		height: auto;
		@media screen and (max-width: 767px) {
			left: -20vw;
		}
	}
	& svg:nth-of-type(2) {
		position: absolute;
		bottom: -5rem;
		right: 1rem;
		z-index: -1;
		width: 16.8vw;
		height: auto;
		@media screen and (max-width: 767px) {
			right: -20vw;
		}
	}
	& .business-list {
		width: var(--inner-width);
		margin-inline: auto;
		grid-gap: 4rem 4rem;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		@media screen and (min-width: 768px) and (max-width: 1320px) {
			grid-gap: 2rem 2rem;
		}
		@media screen and (max-width: 767px) {
			margin-top: 3rem;
			grid-gap: 2rem 0;
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: auto;
		}
		& li {
			display: flex;
			width: 100%;
			& a {
				background: #fff;
				border-radius: 1rem;
				box-shadow: 0 1.4rem 2rem rgba(25, 78, 25, .08);
				display: flex;
				flex-direction: column;
				min-height: 10.2rem;
				text-decoration: none;
				transition: 0.5s ease;
				width: 100%;
				@media screen and (max-width: 767px) {
					min-height: 9.6rem;
				}
				&:hover {
					box-shadow: 0 0.7rem 1rem rgba(25, 78, 25, .2);
					& img {
						transform: scale(1.1);
						filter: brightness(60%);
					}
					& .caption-wrap {
						color: var(--green);
					}
				}
			}
		}
		& .img-wrap {
			display: block;
			overflow: hidden;
			position: relative;
			border-radius: 1rem 1rem 0 0;
			flex: 0 0 auto;
			height: 13.875rem;
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.5s ease;
			}
		}
		& .caption-wrap {
			display: flex;
			flex: 1 0 auto;
			justify-content: center;
			align-items: center;
			min-height: 100px;
			padding: 0 4.5rem;
			position: relative;
			z-index: 1;
			font-size: 2rem;
			line-height: 1.45;
			text-align: center;
			transition: 0.5s ease;
			@media screen and (min-width: 768px) and (max-width: 1320px) {
				padding: 0 2rem;
			}
			&::before {
				content: "";
				display: block;
				position: absolute;
				width: 0;
				height: 0.4rem;
				border-radius: 0.2rem;
				bottom: -1rem;
				left: calc(50% - 3.5rem);
				background-color: var(--green);
				transition: width 0.3s linear;
			}
		}
	}
	& .recruit-list {
		& h3, & p {
			width: calc(100% - 4.4rem);
		}
		& h3 {
			margin: 3.2rem auto 0;
		}
		& p {
			margin: 1.2rem auto 3.2rem;
		}
		& a:hover {
			border-color: var(--green);
			background-color: var(--l-green);
		}
	}
	& .event-list {
		margin-top: 12rem;
		& li {
			min-height: 27.5rem;
		}
		& h3, & p {
			width: calc(100% - 4.4rem);
		}
		& h3 {
			margin: 2.2rem auto 0;
		}
		& p.date {
			margin: 1.2rem auto 0;
		}
		& p.more {
			margin: 0;
			position: absolute;
			bottom: 2.2rem;
			right: 2.2rem;
			width: max-content;
			color: #808080;
			font-size: 2.6rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			transition: 0.5s ease;
			&::before {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 0.1rem;
				background-color: transparent;
				bottom: -0.2rem;
				transition: 0.5s ease;
			}
		}
		& a {
			position: relative;
			padding-bottom: 4.6rem;
		}
		& a:hover {
			border-color: var(--green);
			background-color: var(--l-green);
			& p.more {
				color: var(--green);
				&::before {
					background-color: var(--green);
				}
			}
		}
	}
}

/* esg */
#esg {
	& .esg-slider {
		display: flex;
		overflow: hidden;
		position: relative;
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 10rem;
			aspect-ratio: 1;
			background: url(../img/swipe_icon.png) no-repeat;
			background-size: contain;
			bottom: 0;
			left: calc(50% - 5rem);
			transition: opacity 1s ease;
			z-index: 2;
			filter: drop-shadow(0px 0px 16px rgba(255,255,255,0.8));
		}
		&.onClick::before {
			opacity: 0;
		}
	}
	@media screen and (max-width: 767px) {
		& .esg-slider {
			margin-top: 3rem;
			&::before {
				content: "";
				display: block;
				position: absolute;
				width: 5rem;
				aspect-ratio: 1;
				background: url(../img/swipe_icon.png) no-repeat;
				background-size: contain;
				bottom: 0;
				left: calc(50% - 2.5rem);
			}
		}
	}
	& .slideshow {
		display: flex;
		padding-right: 3rem;
		@media screen and (max-width: 767px) {
			padding-right: 2rem;
		}
	}
	/* & .slideshow:nth-child(1) {
		animation: loop 120s -60s linear infinite;
	}
	& .slideshow:nth-child(2) {
		animation: loop2 120s linear infinite;
	} */
	& .slideshow-content {
		width: 30rem;
		padding-right: 3rem;
		@media screen and (max-width: 767px) {
			width: 27rem;
			padding-right: 2rem;
		}
		& a {
			display: grid;
			place-items: center;
			width: 100%;
			aspect-ratio: 621 / 388;
			transform: 0.5s ease;
			font-size: 2rem;
			font-weight: 700;
			font-family: var(--kakugo);
			padding: 1rem 4rem;
			&:hover {
				opacity: 0.6;
			}
			@media screen and (max-width: 767px) {
				font-size: 1.8rem;
			}
		}
		&.yellow a {
			color: var(--t-black);
			background-image: url(../img/figure_01.svg);
			background-repeat: no-repeat;
			background-size: contain;
			padding: 1rem 2rem 1rem 6rem;
		}
		&.blue a {
			color: #ffffff;
			background-image: url(../img/figure_02.svg);
			background-repeat: no-repeat;
			background-size: contain;
		}
		&.green a {
			color: #ffffff;
			background-image: url(../img/figure_03.svg);
			background-repeat: no-repeat;
			background-size: contain;
		}
	}

	.swiper-wrapper{
		transition-timing-function: linear !important;
	  }
	  .swiper-slide img{
		width: 100%;
	  }

	  
	& .esg-list {
		width: var(--inner-width);
		margin-inline: auto;
		margin-top: 16rem;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid var(--grey);
		position: relative;
		@media screen and (max-width: 1320px) {
			margin-top: 8rem;
			position: relative;
		}
		@media screen and (max-width: 767px) {
			margin-top: 1.8rem;
			border-top: none;
			&::before {
				content: "";
				display: block;
				position: absolute;
				width: calc(100vw - 2px);
				height: 1px;
				background-color: var(--grey);
				top: -6.2rem;
				left: -5%;
			}
			&::after {
				content: "";
				display: block;
				position: absolute;
				width: 1px;
				height: 2rem;
				background-color: var(--grey);
				top: -6.2rem;
				left: 1rem;
			}
		}
		& li {
			border-bottom: 1px solid var(--grey);
			width: 50%;
			@media screen and (max-width: 1320px) {
				width: 100%;
			}
			@media screen and (max-width: 767px) {
				&:last-child {
					border-bottom: none;
				}
			}
			&:nth-child(2n) {
				border-left: 1px solid var(--grey);
				@media screen and (max-width: 1320px) {
					border-left: none;
				}
			}
		}
		& a {
			display: flex;
			flex-wrap: wrap;
			padding: 2rem 3rem 3rem 2rem;
			height: 100%;
			background-color: #ffffff;
			transition: 0.5s ease;
			position: relative;
			@media screen and (max-width: 1320px) {
				padding: 2rem 0;
			}
			&:hover {
				background-color: var(--l-green);
				color: var(--green);
				opacity: 1;
			}
			&::before {
				content: "→";
				display: inline-block;
				position: absolute;
				font-size: 2rem;
				right: 2rem;
				bottom: calc(50% - 2rem);
				transition: 0.5s ease;
			}
			@media screen and (max-width: 1320px) {
				&::before {
					right: 0;
					bottom: calc(50% - 2rem);
				}
			}
			&:hover::before {
				color: var(--green);
				transform: translateX(0.5em);
			}
		}
		& .esg-list-text {
			width: 100%;
			padding: 0;
		}
		& .esg-list-text-title {
			margin-top: 1.5rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1.8;
			@media screen and (max-width: 1320px) {
				margin-top: 0.7rem;
				line-height: 1.6;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
		& .esg-list-text-detail {
			display: none;
			margin-top: 1.5rem;
			font-size: 1.8rem;
			font-weight: 400;
			line-height: 1.6;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			@media screen and (max-width: 1320px) {
				display: none;
			}
		}
	}
}

/* public */
#public {
	& .public-banner-wrapper {
		width: var(--inner-width);
		aspect-ratio: 12 / 5;
		margin-inline: auto;
		position: relative;
		overflow: hidden;
		@media screen and (max-width: 767px) {
			margin-top: 3rem;
			aspect-ratio: auto;
		}
		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background-color: var(--yellow);
			z-index: 3;
		}
	}
	& .public-banner {
		display: flex;
		width: 100%;
		height: 100%;
		transition: filter 0.5s ease;
		@media screen and (max-width: 767px) {
			flex-direction: column;
		}
		&:hover {
			filter: brightness(80%);
			transform: translateZ(0);
		}
		& h3,
		& p {
			width: 50%;
			height: 100%;
			display: grid;
			place-items: center;
			color: #ffffff;
			font-weight: normal;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}
		& h3 {
			position: relative;
			font-size: 3.6rem;
			font-weight: 700;
			text-align: center;
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
			transition: background 0.5s ease;
			@media screen and (min-width: 768px) and (max-width: 1320px) {
				font-size: 2.4rem;
			}
			@media screen and (max-width: 767px) {
				font-size: 2.2rem;
				aspect-ratio: 16 / 9;
				/* aspect-ratio: 12 / 6; */
			}
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				z-index: -1;
				position: absolute;
				background: url(../img/public_01.jpg) no-repeat;
				background-size: cover;
				transition: transform 0.5s ease;
			}
		}
		&:hover {
			& h3::before {
				transform: scale(1.12);
			}
		}
		& p {
			background-color: #dacc6b;
			font-size: 2.2rem;
			font-weight: 500;
			text-align: left;
			text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
			padding: 6rem;
			@media screen and (min-width: 768px) and (max-width: 1320px) {
				font-size: 1.6rem;
				padding: 2rem;
			}
			@media screen and (max-width: 767px) {
				display: none;
				/* font-size: 1.6rem;
				padding: 1rem;
				-webkit-text-fill-color: #ffffff;
				position: relative;
				z-index: 2; */
			}
		}
	}
}

/* animate */
.first-fadein {
	opacity: 0;
	transition: 0.8s 0.2s ease;
}
.fadein {
	opacity: 0;
	transition: 0.8s 0.2s ease;
}
.from-left {
	opacity: 0;
	transform: translateX(-4rem);
	transition: 0.5s 0.2s ease;
}
.from-right {
	opacity: 0;
	transform: translateX(4rem);
	transition: 0.5s 0.2s ease;
}
.from-bottom {
	opacity: 0;
	transform: translateY(4rem);
	transition: 0.5s 0.2s ease;
}
.scale {
	transform: scale(0);
	transition: 0.5s ease;
}

.width100::before {
	width: 100%;
	transform: scaleX(1);
	transform-origin: 100%;
	transition: 0.7s 0.4s ease-in-out;
}
.width100.on::before {
	transform: scaleX(0);
}

.delay1 {
	transition-delay: 0.4s;
}
.delay2 {
	transition-delay: 0.8s;
}
.delay3 {
	transition-delay: 1.2s;
}
.delay4 {
	transition-delay: 1.6s;
}
.delay5 {
	transition-delay: 2s;
}

.on {
	transform: none;
	opacity: 1;
}

/* keyv */
.keyv-list {
	width: 100%;
	aspect-ratio: 4000 / 2667;
	max-height: calc(100vh - var(--header-hight));
	position: relative;
	margin: 0;
	@media screen and (max-width: 767px) {
		aspect-ratio: 860 / 1864;
	}
	& .keyv-img {
		position: relative;
		overflow: hidden;
		& img {
			object-fit: cover;
			object-position: center;
		}
	}
}

.keyv-wrapper {
	position: relative;
	overflow: hidden;
	& .bar-wrap {
		position: absolute;
		overflow: hidden;
		width: 20%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		&:nth-child(2) {
			left: 20%;
		}
		&:nth-child(3) {
			left: 40%;
		}
		&:nth-child(4) {
			left: 60%;
		}
		&:nth-child(5) {
			left: 80%;
		}
	}
	& .bar {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		transform-origin: left;
		transform: translateX(0);
	}
}
.swiper-slide-active .bar {
	animation: slide01 4s ease forwards;
}
@keyframes slide01 {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(101%);
	}
}
@media screen and (max-width: 767px) {
	.keyv-wrapper {
		& .bar-wrap {
			width: 100%;
			height: 20%;
			top: 0;
			left: 0;
			z-index: 2;
			&:nth-child(2) {
				top: 20%;
				left: 0;
			}
			&:nth-child(3) {
				top: 40%;
				left: 0;
			}
			&:nth-child(4) {
				top: 60%;
				left: 0;
			}
			&:nth-child(5) {
				top: 80%;
				left: 0;
			}
		}
		& .bar {
			transform-origin: top;
			transform: translateY(0);
		}
	}
	.swiper-slide-active .bar {
		animation: slide02 4s ease forwards;
	}
}
@keyframes slide02 {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(101%);
	}
}
.keyv-catch {
	position: absolute;
	top: calc(100vh - 40rem);
	right: 6rem;
	color: #ffffff;
	font-size: 5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.26;
	text-shadow: 0px 0px 20px rgba(255, 131, 115, 1);
	@media screen and (max-width: 767px) {
		top: calc(100vh - 22rem);
		right: 3rem;
		font-size: 3rem;
		text-align: right;
	}
}
/*テーブル枠線なし*/
.culture-table {
    border: none;
    border-collapse: collapse; /* これは罫線の間隔をなくすため */
}
.culture-table td, .culture-table th {
    border: none;
}