/*--------------------------------------------------------------
# EDIT ONT
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=M+PLUS+1+Code:wght@600;700&display=swap');

.joblist .title {
	border-top: none;
}

#landing,
#landing * {
	box-sizing: border-box;
}

#main_image,
#landing {
	background: #fff;
}

#landing p {
	color: #666;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	line-height: 2em;
}

#landing .container {
	width: 1200px;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8rem 0 3.25rem 0;
}

#landing .grid-wrapper {
	display: grid;
	gap: 2.75rem;
}

#landing .grid-wrapper .grid-item {
	background: #fff;
	width: 100%;
	border-radius: 24px;
}

#landing .grid-img {
	background: #666;
	min-height: 160px;
	aspect-ratio: 4 / 3;
}

#landing #points .grid-item:first-child .grid-img {
	background: url(images/landing_webp/points-1.webp) center center / cover no-repeat;
}

#landing #points .grid-item:nth-child(2) .grid-img {
	background: url(images/landing_webp/points-2.webp) center center / cover no-repeat;
}

#landing #base #kodaira-kenseien.grid-item:first-child .grid-img {
	background: url(images/landing_webp/kodaira-kenseien.webp) center center / cover no-repeat;
}

#landing #base #kenseien-hanakoganei.grid-item .grid-img {
	background: url(images/landing_webp/kenseien-hanakoganei.webp) center center / cover no-repeat;
}

#landing #director-message .grid-img {
	background: url(images/landing_webp/director.webp) center center / cover no-repeat;
	border-radius: 24px;
}

@media screen and (max-width: 767px) {
	#landing .container {
		padding: 6.25rem 0 3.25rem 0;
	}

	#landing p {
		font-size: 1rem;
	}
}

/*--------------------------------------------------------------
# 見出し
--------------------------------------------------------------*/
/* H2
---------------------------------------------*/
#landing h2 {
	font-family: 'M PLUS 1 Code', sans-serif;
	font-weight: 700;
	color: #7bb507;
	background: initial;
	text-align: left;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
	text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.9),
		-1px 1px 6px rgba(255, 255, 255, 0.9), 1px -1px 6px rgba(255, 255, 255, 0.9),
		-1px -1px 6px rgba(255, 255, 255, 0.9), 1px 1px 6px rgba(255, 255, 255, 0.9),
		-1px 1px 6px rgba(255, 255, 255, 0.9), 1px -1px 6px rgba(255, 255, 255, 0.9),
		-1px -1px 6px rgba(255, 255, 255, 0.9);
}

#landing h2 span,
#landing .title-wrapper span {
	color: #ff9924;
}

#landing .title-wrapper {
	position: relative;
	background: #fff;
	width: fit-content;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
	padding: 2rem min(50vw, 300px) 2rem 2rem;
	border: #404040 solid 4px;
    border-radius: initial;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	background-image: radial-gradient(#e7f3b9 33%, transparent 36%),radial-gradient(#e7f3b9 33%, transparent 36%);
	background-position: 0 0, 11px 11px;
	background-size: 22px 22px;
}

#landing .title-wrapper.title-wrapper-left {
	padding: 2rem 2rem 2rem min(50vw, 300px);
}

#landing .title-wrapper::before {
  display: block;
  content: "";
  position: absolute;
  background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01));
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#landing .title-wrapper.title-wrapper-left::before {
	background: linear-gradient(315deg, #ffffff, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01));
}

#landing .title-wrapper h2,
#landing .title-wrapper p {
	position: relative;
	z-index: 2;
}

#landing .title-wrapper p {
	color: #7bb507;
	margin-top: .75rem;
	text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.9),
		-1px 1px 6px rgba(255, 255, 255, 0.9), 1px -1px 6px rgba(255, 255, 255, 0.9),
		-1px -1px 6px rgba(255, 255, 255, 0.9), 1px 1px 6px rgba(255, 255, 255, 0.9),
		-1px 1px 6px rgba(255, 255, 255, 0.9), 1px -1px 6px rgba(255, 255, 255, 0.9),
		-1px -1px 6px rgba(255, 255, 255, 0.9);
}

#landing .title-wrapper .img-right {
	position: absolute;
	width: 45%;
	height: auto;
	right: 0;
	bottom: 0;
	z-index: 1;
}

#landing .title-wrapper .img-left {
	position: absolute;
	width: 45%;
	height: auto;
	left: 0;
	bottom: 0;
	z-index: 1;
}

#landing #statistics .title-wrapper .img-right {
	width: 35%;
	margin-right: 5%;
}

@media screen and (min-width: 768px) {
	#landing h2 {
		font-size: 4rem;
	}
}

@media screen and (max-width: 991px) {
	#landing .title-wrapper h2 {
		font-size: 8vw;
	}

	#landing .title-wrapper.title-wrapper {
		padding: 1.5rem min(40%, 30vw) 1.5rem 1.5rem;
	}

	#landing .title-wrapper.title-wrapper-left {
		padding: 1.5rem 1.5rem 1.5rem min(40%, 30vw);
	}

	#landing .title-wrapper.title-wrapper-left h2,
	#landing .title-wrapper.title-wrapper-left p {
		text-align: right;
	}
}

/* H3
---------------------------------------------*/
#landing h3 {
	font-family: 'Kanit', 'M PLUS 1 Code', sans-serif;
	font-size: 2.25rem;
	font-weight: 600;
	color: #119907;
	background: initial;
	border: none;
	padding: 0;
}

#landing #staff-voice h3 {
	font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
	#landing h3 {
		font-size: 1.75rem;
	}
}

/*--------------------------------------------------------------
# 動画プレイヤー
--------------------------------------------------------------*/
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
	background: #7cb508 !important;
}

#landing #staff-voice .video-interview {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 160px;
	aspect-ratio: 16 / 9;
	text-align: center;
}

#landing #staff-voice .video-interview::before {
	content: '';
	position: absolute;
	background: #000;
	width: 100%;
	min-height: 100%;
	top: 0;
	left: 0;
	opacity: .5;
	transition: .2s;
}

#landing #staff-voice .video-interview:hover::before {
	opacity: .2;
}

#landing #staff-voice a {
	text-decoration: none;
}

#landing #staff-voice .video-interview i {
	color: #FFBD6F;
	font-size: 120px;
	transition: .2s;
}

#landing #staff-voice .video-interview:hover i {
	font-size: 80px;
}

#landing #staff-voice .grid-item:first-child .video-interview {
	background: url(images/landing_webp/video-poster_1.webp) center center / cover no-repeat;
}

#landing #staff-voice .grid-item:nth-child(2) .video-interview {
	background: url(images/landing_webp/video-poster_2.webp) center center / cover no-repeat;
}

/* #landing #staff-voice .grid-item:nth-child(3) .video-interview {
	background: url(images/landing_webp/video-poster_3.webp) center center / cover no-repeat;
} */

#landing #staff-voice .grid-item:nth-child(3) .video-interview {
	background: url(images/landing_webp/video-poster_4.webp) center center / cover no-repeat;
}

/*--------------------------------------------------------------
# 背景色
--------------------------------------------------------------*/
#landing #points,
#landing #staff-voice {
	background: #d0eb68;
}

#landing #statistics,
#landing #base {
	background: #f0ee69;
}

/*--------------------------------------------------------------
# ドット背景
--------------------------------------------------------------*/
#landing .bg-dot {
	position: relative;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}

#landing .bg-dot > * {
	position: relative;
	z-index: 2;
}

#landing .bg-dot::after {
	content: '';
	position: absolute;
	display: block;
	background-image: radial-gradient(#e7f3b9 33%, transparent 36%), radial-gradient(#e7f3b9 33%, transparent 36%);
	background-position: 0 0, 11px 11px;
	background-size: 22px 22px;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	right: -.75rem;
	bottom: -.75rem;
	opacity: .8;
	z-index: 0;
}

#landing #base .bg-dot::after {
	background-image: radial-gradient(#afcb3d 33%, transparent 36%), radial-gradient(#afcb3d 33%, transparent 36%);
}

/*--------------------------------------------------------------
# グリッド系
--------------------------------------------------------------*/
#landing .grid-item {
	height: fit-content;
}

#landing #points .text-wrapper,
#landing #statistics .grid-item,
#landing #base .text-wrapper,
#landing #staff-voice .text-wrapper {
	background: #fff;
	padding: 2.25rem;
}

#landing #statistics .grid-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
}

#landing #points .grid-item > *:first-child,
#landing #staff-voice .grid-item > *:first-child,
#landing #base .grid-item > *:first-child {
	border-radius: 24px 24px 0 0;
	overflow: hidden;
}

#landing #points .grid-item > *:nth-child(2),
#landing #staff-voice .grid-item > *:nth-child(2),
#landing #base .grid-item > *:nth-child(2) {
	border-radius: 0 0 24px 24px;
	overflow: hidden;
}

#landing #statistics .grid-wrapper {
	justify-content: center;
	text-align: center;
}

@media screen and (min-width: 768px) {
	#landing #statistics .grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 992px) {
	#landing #points .grid-item {
		display: flex;
	}

	#landing #points .grid-item > *:first-child {
		width: 50%;
		border-radius: 0 24px 24px 0 ;
		order: 2;
	}

	#landing #points .grid-item > *:nth-child(2) {
		width: 50%;
		border-radius: 24px 0 0 24px;
		order: 1;
	}

	#landing #staff-voice .grid-wrapper,
	#landing #base .grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
# メインビジュアル
--------------------------------------------------------------*/
#main_image {
	content: '';
	position: relative;
	display: block;
	width: 100%;
}

#main_image img {
	width: 100%;
}

@media screen and (min-width: 992px) and (max-width: 1400px) {
	#main_image img {
		margin-top: 2vh;
	}
}

/*--------------------------------------------------------------
# 求職者の皆さんへ
--------------------------------------------------------------*/
#landing #message {
	overflow: hidden;
}

#landing #message .inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1700px;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 3rem 0;
}

#landing #message .container {
	position: relative;
	width: 640px;
	max-width: 50%;
	margin: auto;
	padding: 1.25rem;
	order: 2;
	z-index: 1;
}

#landing #message .container > div {
	width: 80%;
	margin: auto;
}

#landing #message .photo-wrapper {
	position: relative;
	flex: 1;
	width: 80%;
	max-width: 400px;
	height: 480px;
}

#landing #message .photo-img {
	position: absolute;
	background: #fff;
	width: 100%;
	padding: .75rem;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
	z-index: 0;
}

#landing #message .photo-img > div {
	background: #666;
	width: 100%;
	aspect-ratio: 3 / 2;
}

#landing #message .photo-wrapper:nth-child(2) {
	order: 1;
}

#landing #message .photo-wrapper:nth-child(3) {
	order: 3;
}

#landing #message .photo-wrapper:nth-child(2) .photo-img {
	top: 50%;
	right: 20%;
	transform: rotate(15deg) translateY(-75%);
}

#landing #message .photo-wrapper:nth-child(3) .photo-img {
	top: 50%;
	left: 20%;
	transform: rotate(345deg) translateY(-50%);
}

#landing #message .photo-wrapper:nth-child(2) .photo-img > div {
	background: url(images/landing_webp/message-1.webp) center center / cover no-repeat;
}

#landing #message .photo-wrapper:nth-child(3) .photo-img > div {
	background: url(images/landing_webp/message-2.webp) center center / cover no-repeat;
}

#landing #message h2,
#landing #director-message h2 {
	font-size: 2rem;
	margin-bottom: 1.75rem;
	line-height: 1.5em;
}

/* アニメーション */
#landing #message .photo-wrapper.animate {
	animation-delay: .8s;
}

@media screen and (max-width: 500px) {
	#landing #message .inner {
		padding-bottom: 0;
	}
}

@media screen and (max-width: 991px) {
	#landing #message .inner {
		flex-direction: column;
		padding-top: 0;
	}

	#landing #message .container > div {
		width: 100%;
	}	

	#landing #message h2 {
		font-size: 1.75rem;
	}

	#landing #message .photo-wrapper {
		width: 100%;
		max-width: 100%;
		min-height: 400px;
	}

	#landing #message .container {
		width: 90%;
		max-width: 90%;
		padding-bottom: 3.75rem;
		order: 1;
	}

	#landing #message .photo-wrapper:nth-child(2) {
		order: 2;
		min-height: auto;
	}

	#landing #message .photo-img {
		width: 60%;
		max-width: 480px;
	}

	#landing #message .photo-wrapper:nth-child(2) .photo-img {
		right: initial;
		left: 0;
		transform: rotate(15deg);
	}
	
	#landing #message .photo-wrapper:nth-child(3) .photo-img {
		left: initial;
		right: -5%;
	}
}

@media screen and (max-width: 767px) {
	#landing #message .photo-wrapper {
		min-height: 320px;
	}

	#landing #message .photo-wrapper:nth-child(2) .photo-img {
		left: -10%;
	}
	
	#landing #message .photo-wrapper:nth-child(3) .photo-img {
		right: -10%;
	}
}

/*--------------------------------------------------------------
# 数字で見る平心会
--------------------------------------------------------------*/
#landing #statistics h3 {
	font-size: 1.75rem;
	color: #404040;
	text-align: center;
}

#landing #statistics .grid-item:not(.share-grid) h3:before,
#landing #statistics .grid-item.share-grid > .share-grid-item h4::before {
	content: '\f0c8';
	font-family: 'Font Awesome 6 Pro';
	font-weight: 700;
	color: #d0eb68;
	padding-right: .25em;
}

#landing #statistics .number {
	font-family: 'Kanit', 'M PLUS 1 Code', sans-serif;
	font-size: 4rem;
	font-weight: 700;
	color: #000000;
	line-height: 1em;
}

#statistics .number small {
	font-size: .5em;
	padding-left: .5rem;
}

#landing #landing #statistics .number small:not(:last-child) {
	padding-right: .5rem;
}

#landing #statistics i {
	font-size: 5rem;
	color: #d0eb68;
	margin-top: 1.75rem;
}

/* シェア率 */
#landing #statistics h3 {
	margin-bottom: 0;
}

#landing #statistics .grid-item.share-grid {
	display: grid;
}

#landing #statistics .grid-item.share-grid > .share-grid-item {
	width: 100%;
	padding: 2.25rem 0;
}

#landing #statistics .grid-item.share-grid > .share-grid-item:first-child,
#landing #statistics .grid-item.share-grid > .share-grid-item:nth-child(2) {
	padding-top: 0;
}

#landing #statistics .grid-item.share-grid > .share-grid-item:last-child {
	padding-bottom: 0;
}

#landing #statistics .grid-item.share-grid > .share-grid-item h4 {
	background: initial;
	color: #404040;
	font-size: 1.75rem;
	line-height: 1em;
	text-align: center;
	box-shadow: none;
}

#landing #statistics .grid-item.share-grid > .share-grid-item:not(:first-child):not(:nth-child(2)) {
	border-top: 1px solid #d0eb68;
}

@media screen and (max-width: 767px) {
	#landing #statistics .grid-item.share-grid > .share-grid-item h4 {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 768px) {
	#landing #statistics .grid-item.share-grid > .share-grid-item:first-child {
		grid-column: span 2;
	}

	#landing #statistics .grid-item.share-grid {
		grid-column: span 2;
		grid-template-columns: repeat(2, 1fr);
	}

	#landing #statistics .grid-item.share-grid > .share-grid-item:nth-child(3) {
		padding-top: 0;
	}

	#landing #statistics .grid-item.share-grid > .share-grid-item:nth-last-child(2) {
		padding-bottom: 0;
	}

	#landing #statistics .grid-item.share-grid > .share-grid-item:nth-child(even) {
		border-right: 1px solid #d0eb68;
	}

	#landing #statistics .grid-item.share-grid > .share-grid-item:nth-child(3) {
		border-top: none !important;
	}
}

@media screen and (max-width: 991px) {
	#landing #statistics h3 {
		font-size: 1.5rem;
	}

	#statistics .number small {
		font-size: .35em;
	}

	#landing #statistics .grid-item.share-grid > .share-grid-item h4 {
		font-size: 1.5rem;
	}
}

/*--------------------------------------------------------------
# 募集中のお仕事
--------------------------------------------------------------*/
#landing #job {
	padding-top: 5rem;
}

#landing #job .inner {
	background: #d0eb6a;
}

#landing #job .inner > div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 960px;
	max-width: 90%;
	margin: 0 auto;
}

#landing #job .container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3rem 0;
	z-index: 2;
}

#landing #job .img-left {
	position: absolute;
	width: auto;
	height: 105%;
	bottom: 0;
	left: 0;
}

#landing #job .img-right {
	position: absolute;
	width: auto;
	height: 105%;
	bottom: 0;
	right: 0;
}

#landing #job i {
	color: #7BB507;
	font-size: 3rem;
	font-weight: 400;
	margin-top: 1.25rem;
	animation: arrowmove 1.25s ease-in-out infinite;
}

@keyframes arrowmove {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(.5rem);
	}
	100% {
		transform: translateY(0);
	}
}

@media screen and (max-width: 991px) {
	#landing #job {
		padding-top: 0;
	}

	#landing #job h2 {
		font-size: 8vw;
	}

	#landing #job .container {
		width: fit-content;
		align-items: center;
		margin: 0 0 0 auto;
	}

	#landing #job .img-right {
		display: none;
	}
}

/*--------------------------------------------------------------
# 理事長からご挨拶
--------------------------------------------------------------*/
#landing #director-message .text-right {
	color: #7bb507;
	text-align: right;
	margin-top: .75rem;
}

@media screen and (max-width: 767px) {
	#landing #director-message .grid-wrapper > div:first-child {
		order: 2;
	}

	#landing #director-message .grid-wrapper > div:nth-child(2) {
		order: 1;
	}
}

@media screen and (min-width: 768px) {
	#landing #director-message .grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 3.75rem;
	}
}

/*--------------------------------------------------------------
# 固定エリア
--------------------------------------------------------------*/
#header.fixed-area {
	position: fixed;
	width: 100%;
	top: 0;
	transition: all .2s ease-out;
}

#header.fixed-area.scrolled {
	background: #fff;
	box-shadow:	0px 0px 8px 0px rgba(4,0,0,0.38);
}

.footer_fixed.fixed-area {
	bottom: -100px;
	transition: bottom .2s ease-out;
}

.footer_fixed.fixed-area.scrolled {
	bottom: 0;
}

/*--------------------------------------------------------------
# アニメーション
--------------------------------------------------------------*/
@media screen {
	.animate {
		opacity: 0;
		animation-delay: .2s;
	}
}

.animate.animate__animated {
	opacity: 1;
}

/*--------------------------------------------------------------
# メディアクエリ
--------------------------------------------------------------*/
.sp {
	display: none;
}

@media screen and (max-width: 991px) {
	.sp {
		display: block;
	}

	.pc {
		display: none;
	}
}