@charset "UTF-8";
@layer general {
	* {
		-webkit-tap-highlight-color: transparent;
	}
	img {
		vertical-align: top;
		border: 0;
		line-height: 1;
	}
	a {
		color: inherit;
		text-decoration: none;
		transition: opacity 300ms ease;
	}
	a, button, label {
		outline: none;
	}
	input, textarea, select, button {
		font-weight: inherit;
		font-style: inherit;
		font-family: inherit;
	}
	h1, h2, h3, b, strong {
		font-weight: 500;
	}
	body {
		-webkit-text-size-adjust: 100%;
		margin: 0;
	}
}

html, body {
	min-width: 1280px;
	background-color: #fff;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500; font-size: 16px; line-height: calc(40 / 16); letter-spacing: 0.1em;
	color: #333;
}

#header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9;
	display: flex; justify-content: space-between;
	min-width: 1280px; padding: 30px 0 0;
	h1 {
		margin: 0 0 0 3%;
		font-size: inherit;
		background: #fff; border-radius: 75px;
		a {
			display: block;
			&:hover {opacity: 0.6}
		}
	}
	nav {
		display: flex; align-items: center;
		width: fit-content; height: 75px; margin: 0 3% 0 0; padding: 0 24px 0 28px; border-radius: 75px;
		background: #fff;
		font-size: 15px; line-height: 1.2;
		p {
			margin: 0;
		}
		a {
			display: block;
			height: 75px; padding: 0 16px;
			line-height: 75px;
			&:hover {opacity: 0.6}
		}
		.has-separator {
			display: flex;
			&:before {
				content: '｜';
				display: block;
				margin: 0 3px;
				line-height: 75px;
			}
		}
	}
}
#footer {
	text-align: center;
	padding: 130px 0 142px;
	background: #fff;
	.link {
		margin: 0;
		a:hover {opacity: 0.6}
	}
	.title {
		margin: 11px 0 63px;
		font-size: 14px; letter-spacing: 0.15em; text-indent: 0.15em; line-height: 1.2;
	}
	#copyright {
		margin: 0;
		font-size: 15px; letter-spacing: 0.15em; text-indent: 0.15em; line-height: 1.2;
	}
}
@keyframes i-opacity {
	0% {opacity: 0}
	100% {opacity: 1}
}
.intersection.opacity {
	animation-name: i-opacity;
}
.intersection {
	opacity: 0;
	animation-delay: 0;
	animation-duration: 600ms;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
}

.for-sp {
	display: none !important;
}

#gotopagetop {
	transition:opacity 300ms ease, visibility 300ms ease;
	position: fixed; right: 40px; bottom: 40px; z-index: 8;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	font-size: 10px;
	white-space: nowrap;
	&.active {
		visibility: visible;
		opacity: 1;
	}
	a {
		box-sizing: border-box;
		display: block;
		width: 40px; height: 40px; border: 1px solid #333; border-radius: 40px;
	}
	img {
		transition: transform 300ms ease;
		position: absolute; left: 10px; top: 10px;
	}
	a:hover img {
		transform: translateY(-6px);
	}
}

#recruit {
	#section-1 {
		height: 914px;
		background: url('images/bg_gradient_1.svg') 0 0 no-repeat; background-size: 100% 100%;
		p {
			margin: 0; padding: 152px 0 0;
			text-align: center;
		}
		p img {
			animation-delay: 1000ms;
			animation-duration: 1000ms;
		}
	}
	#section-2 {
		padding: 14px 0 0;
		> h1 {
			margin: 0 0 49px;
			text-align: center;
			color: #20ae7c;
			font-size: 23px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		> div {
			display: flex; justify-content: center;
		}
		p {
			margin: 0;
			+ p {
				margin-left: 55px;
			}
			a:not(.disabled):hover {opacity: 0.6}
		}
	}
	#section-3 {
		margin-top: 59px;
		> h1 {
			margin: 0 0 47px;
			text-align: center;
			color: #20ae7c;
			font-size: 34px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		p {
			width: fit-content; margin: 0 auto;
			color: #20ae7c;
			font-size: 16px; line-height: 43px; letter-spacing: 0.15em;
			b, .spacer {
				font-size: 18px; font-weight: inherit;
			}
		}
	}
	#faq {
		padding: 146px 0 50px; margin: 22px 0 0;
		> h1 {
			margin: 0 0 58px;
			text-align: center;
			color: #20ae7c;
			font-size: 34px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		article {
			width: 1200px; margin: 0 auto; padding: 22px 0 23px 0; border-radius: 40px;
			background: #20ae7c;
			color: #fff;
			font-size: 15px; line-height: calc(32 / 15); letter-spacing: 0.15em;
			+ article {
				margin-top: 18px;
			}
			h1 {
				margin: 0 50px; padding-bottom: 7px; border-bottom: 1px solid #fff;
				font-size: 18px;
				> span:first-child {
					position: relative;	 top: -2px;	
					display: inline-block;
					box-sizing: border-box;
					width: 73px; padding-left: 4px;	
				}
			}
			p {
				position: relative;
				margin: 10px 50px 0 123px;	
				> span:first-child {
					position: absolute; left: -69px; top: -5px;
					font-size: 18px;
				}
			}
		}
		article.ready {
			display: none;
		}
		&.open article.ready {
			display: block;
		}
		&.open button {
			display: none;
		}
		button {
			position: relative;
			display: block;
			width: 320px; height: 60px; margin: 60px auto 0; padding: 0; border: 0; outline: 0; border-radius: 25px;
			background: #20ae7c;
			color: #fff;
			font-size: 15px; letter-spacing: 0.1em; text-indent: 0.1em;
			cursor: pointer;
			transition: opacity 600ms ease;
			&:hover {opacity: 0.6}
			&:after {
				position: absolute; right: 31px; top: 50%;
				transform: translateY(-50%);
				display: block;
				content: '';
				width: 11.625px; height: 7.2041px;
				clip-path: polygon(48.4% 90%, 0% 17.8%, 11.8% 0%, 48.6% 55.1%, 85.3% 2.3%, 96.8% 20.3%, 48.4% 90%);
				background: #fff;
			}
		}
	}
	#message {
		position: relative; z-index: 1;
		box-sizing: border-box;
		width: 100%;
		overflow-x: hidden;
		h1 {
			margin: 0 0 0 calc(50% - 560px); padding-top: 333px;
			color: #20ae7c;
			font-size: 23px; line-height: 1.2; letter-spacing: 0.2em;
		}
		h2 {
			position: relative; z-index: 1;
			margin: 84px 0 0 calc(50% - 560px); padding: 3px 0 3px 38px;
			color: #20ae7c;
			font-size: 34px; line-height: calc(62 / 34); letter-spacing: 0.2em;
			&:before {
				position: absolute; left: 0; top: 0; bottom: 0;
				display: block;
				content: '';
				width: 7px; border-radius: 3.5px;
				background: linear-gradient(0deg, #20ae7c 0%, #107b93 100%);
			}
		}
		h2 + img {
			position: absolute; top: 166px; left: calc(50% - 195px); z-index: 0;
		}
		.message {
			margin: 228px 0 0 calc(50% - 537px);
		}
		.sign {
			margin: 58px 0 0 calc(50% - 537px);
			img {
				margin: 6px 0 0 -1px;
			}
		}
		.link {
			margin: -50px 0 0 calc(50% + 157px);
			a {
				position: relative;
				display: block;
				box-sizing: border-box;
				width: 386px; height: 60px; padding: 0 0 0 46px; border-radius: 30px;
				background: #20ae7c;
				color: white;
				text-align: left;
				font-size: 16px; line-height: 60px;
				&:hover {opacity: 0.6}
				&:after {
					position: absolute; right: 52px; top: 50%;
					transform: translateY(-50%);
					display: block;
					content: '';
					width: 62px; height: 10px;
					clip-path: polygon(99.5% 97%, 2% 97%, 2% 86%, 96% 86%, 90% 23%, 91% 17%, 99.5% 97%);
					background: #fff;
				}
			}
		}
	}
	#footer-photo {
		position: relative; z-index: 0;
	}
	.section-a {
		position: relative;
		padding: 0 0 149px;
		background: linear-gradient(0deg, #ffffd2 0%, #ffffff 100%);
		.heading-1 {
			margin: 0 0 36px calc(50% - 600px); padding-top: 160px;
		}
		.text-2 {
			margin: 0 0 47px calc(50% - 561px);
			color: #20ae7c;
			font-size: 18px; letter-spacing: 0.2em;
		}
		.images-a {
			position: absolute; left: calc(50%); top: 139px;
			height: 0;
		}
		.images-b {
			position: absolute; left: calc(50%); top: 116px;
			img:first-child {
				margin-left: -24px;
			}
			img + img {
				margin-top: 26px; margin-left: -63px;
			}
		}
		.slideshow {
			position: relative;
			width: 700px; height: 550px; margin: 0 0 0 -100px;
			clip-path: path('M314.21,550C157.34,550,0,426.88,0,275S157.34,0,314.21,0c156.87,0,385.79,96,385.79,275s-228.91,275-385.79,275Z');
			img {
				position: absolute; left: 0; top: 0;
				opacity: 0;
				transition: opacity 1000ms ease;
				&:nth-of-type(1), &:nth-of-type(2) {
					opacity: 1;
				}
			}
		}
		.slideshow + img {
			margin: 40px 0 0 -63px;
		}
		.heading-3 {
			margin: 0 0 0 calc(50% - 561px);
			color: #20ae7c;
			font-size: 30px; line-height: calc(56 / 30); letter-spacing: 0.2em;
		}
		.text-4 {
			width: 437px; margin: 38px 0 0 calc(50% - 561px);
		}
		.section-5 {
			display: flex;
			margin-top: 190px; margin-left: calc(50% - 585px);
			+ .section-5 {
				margin-top: 57px;
			}
			.right {
				width: 582px; margin-left: 76px; padding-top: 45px;
				img {
					margin-left: 3px;
				}
			}
			p {
				font-size: 15px; line-height: calc(35 / 15);
			}
			p + p {
				margin-top: -6px;
				text-align: right;
				font-size: 13px; letter-spacing: 0.15em;
			}
		}
		.section-6 {
			margin-top: 37px; padding-bottom: 93px;
		}
		.heading-7 {
			margin: 0;
			text-align: center;
			font-size: 20px; letter-spacing: 0.15em; text-indent: 0.15em; line-height: 1.2;
			img {
				vertical-align: middle;
				margin-right: 40px;
			}
		}
		.type {
			box-sizing: border-box;
			display: flex; align-items: center; justify-content: space-between;
			width: 1100px; margin: 55px auto 0; padding: 0 0 0 43px; border-bottom: 1px solid #d4d4d4;
			background: #fff;
			+ .type {
				margin-top: 37px;
			}
			.left {
				padding: 12px 0 33px;
			}
			h1 {
				margin: 0 0 6px;
				color: #20ae7c;
				font-size: 23px; letter-spacing: 0.09em;
			}
			table {
				margin: 0 0 0 4px; border-collapse: collapse;
				th, td {
					margin: 0; padding: 0;
					text-align: left; vertical-align: top;
					font-weight: inherit;
					font-size: 15px; line-height: calc(32 / 15); letter-spacing: 0.15em;
				}
				th {
					width: 116px; min-width: 116px; max-width: 116px;
				}
				td {
					width: 550px; min-width: 550px; max-width: 550px;
				}
			}
			.link {
				width: 320px; margin: 0 37px 0 auto;
				a {
					position: relative;
					display: block;
					background: #20ae7c;
					color: #fff;
					width: 320px; height: 60px; border-radius: 25px;
					text-align: center; line-height: 60px;
					&:hover {opacity: 0.6}
					&:after {
						position: absolute; right: 31px; top: 50%;
						transform: translateY(-50%);
						display: block;
						content: '';
						width: 7.1216px; height: 11.4121px;
						clip-path: polygon(19.8% 100%, 0% 87.6%, 60.3% 50%, 0% 12.4%, 19.8% 0%, 100% 50%, 19.8% 100%);
						background: #fff;
					}
				}
			}
		}
		.wave {
			position: absolute; left: 0; bottom: 0;
			pointer-events: none;
		}
	}
	#toritotamago {
		margin-top: 41px;
		background: linear-gradient(0deg, #ffffd2 0%, #ffffff 100%);
	}
	#caprices {
		margin-top: 65px;
		background: linear-gradient(0deg, #ffdede 0%, #ffffff 100%);
	}
	#greenfarm {
		margin-top: 65px;
		background: linear-gradient(0deg, #daffda 0%, #ffffff 100%);
		.heading-1 {
			padding-top: 198px;
			margin-bottom: 46px;
		}
		.heading-7 {
			img {
				position: relative; top: -2px;
				margin-right: 27px;
			}
		}
	}
}
#details {
	#main {
		> h1 {
			margin: 0; padding: 196px 0 45px;
			text-align: center;
			color: #20ae7c;
			font-size: 34px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		svg {
			display: block;
			font-size: 0;
		}
	}
	#main section {
		> h1 {
			margin: 0;
			text-align: center;
		}
	}
	.bg1 {
		padding: 16px 0 86px;
		background-color: #ffffd2;
	}
	.bg2 {
		padding: 74px 0 86px;
		background-color: #fff2f2;
	}
	.bg3 {
		padding: 178px 0 190px;
		background-color: #efffef;
	}
	.type {
		padding-top: 100px;
		> div {
			width: 1200px; margin: 0 auto; padding: 43px 0 0; border-radius: 60px;
			background: #fff;
		}
		> div > h1 {
			width: 1000px; margin: 0 auto 9px;
			color: #20ae7c;
			font-size: 23px; letter-spacing: 0.09em;
		}
		table {
			box-sizing: border-box;
			width: 1000px; margin: 0 auto; border-collapse: collapse; border-spacing: 0;
			font-size: 15px; line-height: calc(25 / 15); letter-spacing: 0.15em;
			th, td {
				margin: 0; padding: 0; border: 1px solid #b4b4b4;
				vertical-align: middle;
				font-weight: inherit;
			}
			th {
				width: 106px; min-width: 106px; max-width: 106px; padding: 3px 0 5px;
				text-align: center;
				background: #ededed;
			}
			td {
				padding: 3px 20px 5px;
				text-align: left;
			}
		}
		.link {
			margin: 0; padding: 50px 0 78px;
			a {
				display: block;
				width: 303px; height: 66px; margin: 0 auto; border-radius: 26px;
				background: #20ae7c;
				color: white;
				text-align: center;
				font-size: 18px; line-height: 66px; letter-spacing: 0.2em; text-indent: 0.2em;
				&:hover {opacity: 0.6}
			}
		}
	}
	.message-a {
		margin: 91px 0 0;
		text-align: center;
		font-size: 20px; line-height: 2; letter-spacing: 0.15em; text-indent: 0.15em;
	}
}
#entry {
	#main {
		> h1 {
			margin: 0; padding: 196px 0 45px;
			text-align: center;
			color: #20ae7c;
			font-size: 34px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		svg {
			vertical-align: top;
			font-size: 0;
		}
	}
	form {
		display: block;
		padding: 0 0 106px;
		background: #ecf9ff;
		.lead {
			margin: 0 0 66px; padding: 14px 0 0;
			text-align: center;
			font-size: 16px; line-height: calc(40 / 15); letter-spacing: 0.1em;
		}
		.lead + .row {
			border-top: 1px solid #a6a6a6;
		}
		.row {
			width: 1000px; margin: 0 auto; border-bottom: 1px solid #a6a6a6;
			> label, > div {
				display: flex;
				color: #000;
				font-size: 16px; line-height: calc(26 / 16); letter-spacing: 0.1em;
				> span {
					display: block;
					box-sizing: border-box;
					width: 260px; padding: 33px 0 33px 17px;
				}
				> div {
					width: 712px;
				}
			}
			input, select {
				box-sizing: border-box;
				width: 100%; height: 46px; margin: 21px 0; padding: 0 17px; outline: 0;
				font-family: inherit; font-size: 16px; line-height: calc(26 / 16); letter-spacing: 0.1em;
			}
			select {
				cursor: pointer;
			}
			select[name="year"],
			select[name="month"],
			select[name="date"] {
				width: auto; padding: 0 10px;
			}
			textarea {
				box-sizing: border-box;
				width: 100%; height: 171px; margin: 21px 0; padding: 6px 17px; outline: 0;
				font-family: inherit; font-size: 16px; line-height: calc(26 / 16); letter-spacing: 0.1em;
			}
			.required {
				position: relative; top: -1px;
				color: #f00;
				font-size: 12px;
			}
			.notrequired {
				position: relative; top: -1px;
				font-size: 12px;
			}
		}
		.g-recaptcha {
			width: fit-content; margin: 68px auto 45px;
		}
		.policy {
			margin: 0;
			text-align: center;
			font-size: 16px; line-height: calc(26 / 16); letter-spacing: 0.1em; text-indent: 0.1em;
			a {text-decoration: underline}
			a:hover {opacity: 0.6}
		}
		button[type="submit"] {
			display: block;
			width: 303px; height: 66px; margin: 60px auto 0; padding: 0; border: 0; outline: 0; border-radius: 20px;
			background: #20ae7c;
			color: white;
			text-align: center;
			font-size: 18px; line-height: 66px; letter-spacing: 0.2em; text-indent: 0.2em;
			cursor: default;
			transition: opacity 300ms ease;
			opacity: 0.6;
			&.active {
				cursor: pointer;
				opacity: 1;
			}
			&.active:hover {opacity: 0.6}
		}
	}
}
#thanks {
	#main {
		> h1 {
			margin: 0; padding: 196px 0 45px;
			text-align: center;
			color: #20ae7c;
			font-size: 34px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em;
		}
		svg {
			vertical-align: top;
			font-size: 0;
		}
		.bg {
			padding: 11px 0 106px;
			background: #ecf9ff;
		}
		.text-1 {
			margin: 0;
			text-align: center;
			color: #20ae7c;
			font-size: 23px; line-height: calc(62 / 23); letter-spacing: 0.2em; text-indent: 0.2em;
		}
		.text-2 {
			margin: 24px 0 0;
			text-align: center;
			font-size: 16px; line-height: calc(40 / 16); letter-spacing: 0.1em;
		}
		.text-3 {
			margin: 116px 0 0;
			a {
				display: block;
				width: 303px; height: 66px; margin: 0 auto 0; padding: 0; border: 0; outline: 0; border-radius: 20px;
				background: #20ae7c;
				color: white;
				text-align: center;
				font-size: 18px; line-height: 66px; letter-spacing: 0.2em; text-indent: 0.2em;
				transition: opacity 300ms ease;
				&:hover {opacity: 0.6}
			}
		}
	}
}