@charset "UTF-8";

:root {
	--fs: 16;
	--font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
	--color-body-1: #333333;
	--color-theme-1: #40a324;
	--color-theme-2: #e5f0e3;
	--color-theme-3: #886239;
	--container: 1020px;
	--container-narrow: 985px;
	--gutter: 20px;
	--yohaku: 120px;
}

@media(max-width: 991px) { 
	:root { 
		--yohaku: 70px; 
	} 
}

::after,
::before,
* {
	--font-size: calc((var(--fs)/16) * 1rem);
	font-size: var(--font-size);
}

h1, h2, h3, h4, h5, h6 {
	font-size: var(--font-size);
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--color-body-1);
	font-family: var(--font-family);
	font-weight: 400;
}

body.no-scroll {
	overflow: hidden;
}

html.translated-ltr body {
	top: 40px !important;
}

p {
	line-height: calc(28/16);
}

img {
	max-width: 100%;
	height: auto;
	transition: .2s;
}

a:hover img {
	opacity: .6;
}

a:hover,
a {
	color: var(--color-body-1);
}

a {
	text-decoration: none;
	transition: .2s;
}

a:hover {
	text-decoration: underline;
}

.container {
	padding-right: var(--gutter);
	padding-left: var(--gutter);
	max-width: calc(var(--container) + var(--gutter) * 2);
}

.container-narrow {
	max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.yohaku {
	padding-top: var(--yohaku);
	padding-bottom: var(--yohaku);
}

.text-green {
	color: var(--color-theme-1);
}

.button {
	--fs: 14;
	align-items: center;
	background-color: var(--color-theme-1);
	border-radius: 50px;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	min-width: min(148px, 100%);
	min-height: 38px;
	position: relative;
	text-align: center;
	transition: .2s;
	padding: 5px 30px;

	&.brown{
		background-color: var(--color-theme-3);
	}

	&::after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	&:hover {
		color: #fff;
		text-decoration: none;
		opacity: .6;
	}
}

.link-line {
	text-decoration: underline;
}

.link-line:hover {
	opacity: .6;
}


/* ------- header ------- */

.header {
	align-items: center;
	display: flex;
	justify-content: end;
	/*justify-content: space-between;*/
	padding-left: 30px;
}

.header-logo-page {
	position: absolute;
	left: 15px;
	top: 35px;
	width: 146px;
}

.header-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-menu-link {
	--fs: 17;
	display: inline-block;
	font-size: var(--font-size);
	color: var(--color-body-1);
	text-align: center;
	font-weight: 500;
}

.menu-icon {
	display: grid;
	gap: 8px;
}

.menu-icon span {
	display: block;
	height: 2px;
	background: #fff;
	width: 30px;
	transition: 0.3s;
}

.menu-icon span:nth-child(3) {
	width: 15px;
}

body.noscroll .menu-icon span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
	width: 30px;
}

body.noscroll .menu-icon span:nth-child(2) {
	opacity: 0;
}

body.noscroll .menu-icon span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
	width: 30px;
}

.header-drawer-toggle {
	display: grid;
	place-items: center;
	gap: 10px;
}

.sns-menu div {
	display: flex;
	justify-content: center;
	gap: 15px;
}

@media (min-width: 992px) {
	.header {
		max-width: 1030px;
		margin: auto;
		height: 95px;
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
	}
	.header-menu {
		align-items: center;
		display: flex;
		gap: 30px;
	}
	.js-drawer,
	.header-drawer {
		display: contents;
	}
	.header-drawer-toggle,
	.header-logo-sp {
		display: none;
	}
	.header-menu-link.contact{
		background-color: var(--color-theme-1);
		color: #fff;
		border-bottom-right-radius: 17px;
		border-bottom-left-radius: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
		padding: 0 20px;
		position: relative;
		top: -18px;

		&:hover {
			text-decoration: none;
			opacity: .6;
		}
	}
}

@media (max-width: 991px) {
	body.noscroll {
		overflow: hidden;
		touch-action: pinch-zoom;
	}
	.header {
		padding-left: var(--padding);
	}
	.header-logo-page {
		left: 25px;
		top: 28px;
		width: 108px;
	}
	.header-drawer-toggle {
		--fs: 10;
		aspect-ratio: 1;
		background: var(--color-theme-1);
		color: #fff;
		border: 0;
		display: inline-grid;
		font-weight: 400;
		line-height: 1;
		place-content: center;
		place-items: center;
		width: 72px;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 11;
	}
	.header-drawer {
		background: #fff;
		inset: 0;
		overflow: auto;
		position: fixed;
		transition: opacity 0.6s;
		z-index: 10;

		&:is(body:not(.noscroll) *) {
			opacity: 0;
			visibility: hidden;
			transition: 0s;
		}
	}
	.header-menu {
		padding: 50px var(--padding);
		display: grid;
		gap: 30px;
		justify-content: center;
		text-align: center;
		margin-top: 30px;
	}
	.header-menu-link {
		--fs: 15;
	}
	.header-logo-sp {
		width: 108px;
		margin-left: 20px;
		margin-top: 28px;
	}
	.sns-menu {
		grid-row: 7;
	}
}


/* ------- footer ------- */

.footer {
	position: relative;
	padding-top: 35px;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;
		background: url(img/wave-footer.png) center top / auto 35px repeat-x;
	}
}

.footer-inner {
	background-color: var(--color-theme-1);
	padding: 80px 0px 30px;
	color: #fff;
}

.footer-inner a {
	color: #fff;
	text-decoration: underline;

	&:hover {
		opacity: .6;
	}
}

.footer-inner .container {
	max-width: 750px;
}

.footer-company {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: 30px;

	p {
		margin-bottom: 0px;
		--fs: 13;
		line-height: calc(22/13);
	}
}

.footer-links {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: 37px;
}

.footer-links-banner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.footer-links-sns {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.footer-links-sns-inner {
	display: grid;
	grid-template-columns: auto auto;
	gap: 7px;
	align-items: center;

	div {
		display: flex;
		gap: 7px;
		justify-content: center;
	}
}

.footer-copyright {
	--fs: 10;
	text-align: center;
	margin-bottom: 0px;
}

@media (max-width: 991px) {
	.footer-company {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.footer-links {
		grid-template-columns: auto;
		justify-content: center;
	}
	.footer-links-banner {
		order: 2;
	}
	.footer-links-sns {
		order: 1;
		text-align: center;
	}
	.footer-links-sns-inner {
		grid-template-columns: 1fr;
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.footer {
		padding-top: 15px;

		&::before {
			height: 15px;
			background-size: auto 15px;
		}
	}
	.footer-inner {
		padding: 60px 0px 15px;
	}
}

@media (max-width: 575px) {
	.footer-links-banner {
		gap: 10px;
	}
}


/* ------- 共通 ------- */

.page-body {
	padding-top: 60px;
}

.main-title {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: 55px;

	h1,h2 {
		order: 2;
		--fs: 32;
		font-weight: 700;
		line-height: calc(41/32);
		margin-bottom: 0px;
	}

	p {
		order: 1;
		color: var(--color-theme-1);
		font-weight: 500;
	}
}

.main-title.page-title {
	margin-bottom: 110px;
}

.content-wave {
	position: relative;
	padding-top: 35px;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;
		background: url(img/wave-content.png) center top / auto 35px repeat-x;
	}
}

.content-wave-inner {
	background-color: var(--color-theme-2);
	padding: 80px 0 85px;
}

.home .content-wave-inner {
	padding: 50px 0 85px;
}

.page-title--green {
	--fs: 20;
	color: var(--color-theme-1);
	font-weight: 700;
	margin-bottom: 18px;
	line-height: calc(35/20);
}

.page-title--bg {
	--fs: 28;
	color: #fff;
	font-weight: 700;
	border-radius: 50px;
	padding: 10px;
	text-align: center;

	&.green {
		background-color: var(--color-theme-1);
	}

	&.brown {
		background-color: var(--color-theme-3);
	}
}

.staff .page-title--bg {
	--fs: 21;
}

.media-group {
	img {
		border-radius: 30px;
	}

	.submedia {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		margin-top: 20px;

		img {
			border-radius: 15px;
		}
	}
}

@media (max-width: 991px) {
	.page-body {
		padding-top: 175px;
	}
	.main-title {
		margin-bottom: 35px;

		h1,h2 {
			--fs: 24;
			line-height: calc(38/24);
		}
	}
	.main-title.page-title {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	.content-wave {
		padding-top: 15px;

		&::before {
			height: 15px;
			background-size: auto 15px;
		}
	}
}


/* ------- トップページ ------- */

body.home .header-logo-page {
	display: none;
}

.bottom-mountain {
	overflow: hidden;
	position: relative;
}

.bottom-mountain::after{
	content:"";
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0;
	width:124%;
	aspect-ratio: 3262 / 554;
	background:url(img/hero-mountain.png) center bottom / cover no-repeat;
	max-width: 1631px;
}

@media (min-width:1631px){
	.bottom-mountain::after{
		width:100%;
		max-width:1920px;
	}
}

@media (max-width: 767px) {
	.bottom-mountain::after{
		width:200%;
		transform: translateX(-40%);
	}
}

/*  hero  */
.hero {
	padding: 0 50px;
	margin-bottom: 100px;
	position: relative;
	max-width: 1920px;
	margin-inline: auto;

	h1 {
		width: 178px;
		background-color: #fff;
		padding-top: 27px;
		padding-bottom: 20px;
		border-bottom-right-radius: 20px;
		margin-bottom: 0px;
	}
}

.hero .credit {
	margin-bottom: 0px;
	position: absolute;
	bottom: 25px;
	right: 5%;
	z-index: 1;
	--fs: 10;
	letter-spacing: 0.05em;
	color: #fff;
	text-shadow:
		1px 0 0 var(--color-theme-1),
		-1px 0 0 var(--color-theme-1),
		0 1px 0 var(--color-theme-1),
		0 -1px 0 var(--color-theme-1),
		2px 2px 0 var(--color-theme-1),
		-2px 2px 0 var(--color-theme-1),
		2px -2px 0 var(--color-theme-1),
		-2px -2px 0 var(--color-theme-1);
}

.hero-inner {
	background: #d3f3f6 url(img/hero-cloud-pc_v2.png) center top 17% / contain no-repeat;
	max-width: 1400px;
	min-height: 694px;
	margin-inline: auto;
	border-radius: 40px;
}

.hero-text {
	--fs: 41;
	color: var(--color-theme-1);
	font-weight: 700;
	line-height: 1em;
	text-align: right;
	margin-right: -38px;
	margin-top: -95px;

	span {
		background-color: #fff;
		padding: 14px 20px;
		display: inline-block;
		margin-bottom: 12px;
	}
}

@media (max-width: 991px) {
	.hero {
		padding: 0 20px;
		padding-top: 28px;

		h1 {
			width: 135px;
			padding-top: 0px;
			padding-bottom: 14px;
			border-bottom-right-radius: 12px;
		}

		img {
			width: 108px;
		}
	}
	.hero-text {
		--fs: 26;
		letter-spacing: 0.13em;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: flex-start;
		margin-right: 0;
		margin-top: -59px;
		margin-left: -30px;
		width: 100%;

		span {
			writing-mode: vertical-rl;
			display: inline-block;
			margin-bottom: 0;
			margin-left: 12px;
			display: block;
			padding: 20px 14px;
			text-align: left;
			align-self: flex-start;
		}
	}
	.hero .credit {
		bottom: 10px;
		right: 7px;
	}
}

@media (max-width: 575px) {
	.hero-inner {
		background: #d3f3f6 url(img/hero-cloud-sp.png) center top 61% / contain no-repeat;
		min-height: 586px;
	}
}

/*  top-activity  */
.top-activity {
	padding: 0 50px;
	margin: 110px auto;
}

.top-activity-inner {
	max-width: 1012px;
	margin-inline: auto;
	border-radius: 40px;
	background-color: #fff;
	padding: 100px 10px 280px;
	text-align: center;
	position: relative;
}

.top-activity h3 {
	text-align: center;
	margin-bottom: -30px;
	position: relative;
	z-index: 1;
	padding: 0 40px;
}

.top-activity-inner ul {
	list-style: none;
	padding-left: 0px;
	text-align: left;
}

@media (min-width: 992px) {
	.top-activity-inner ul {
		position: absolute;
		top: 11%;
		left: 6%;
	}
	.top-activity-inner ul li {
		margin-bottom: 5px;
	}
}

@media (min-width:1631px){
	.top-activity-inner {
		padding: 6% 10px 326px;
	}
}

@media (max-width: 991px) {
	.top-activity {
		padding: 0 20px;
		margin: 70px auto;
	}
	.top-activity-inner ul {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		gap: 5px 25px;
		justify-content: center;
		margin-top: 45px;
	}
}

@media (max-width: 575px) {
	.top-activity-inner {
		padding: 28% 10px 47%;
		border-radius: 10px;
	}
}

/*  top-updates  */
.top-updates {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-bottom: 70px;

	h2 {
		color: var(--color-theme-1);
		--fs: 16;
		font-weight: 500;
		margin-bottom: 15px;
	}
}

.cal-wrapper,
.fb-wrapper {
	max-width: 500px;
	aspect-ratio: 490/500;
	margin: auto;
	display: flex;
}

.fb-wrapper > .fb-page,
.fb-wrapper > .fb-page > span,
.fb-wrapper iframe {
	width: 100% !important;
	height: 100% !important;
}

@media (max-width: 767px) {
	.top-updates {
		grid-template-columns: 1fr;
	}
}

/*  top-banner  */
.top-banner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 80px;
}

.top-banner a {
	color: #fff;
	padding: 40px;
	border-radius: 30px;
}

.top-banner a:hover {
	text-decoration: none;
	opacity: .6!important;
}

.bg-aguri-school {
	background: url(img/bg-top-aguri-school.jpg) center / cover no-repeat;
}

.bg-fruit-sales {
	background: url(img/bg-top-fruit-sales.jpg) center / cover no-repeat;
}

.top-banner-title {
	margin-bottom: 30px;
	display: grid;

	h2 {
		order: 2;
		--fs: 32;
		font-weight: 700;
		margin-bottom: 0px;
	}

	p {
		order: 1;
		--fs: 16;
		font-weight: 500;
		margin-bottom: 15px;
	}
}

.top-banner-text {
	margin-bottom: 0px;
}

@media (max-width: 991px) {
	.top-banner a {
		padding: 30px 20px;
		border-radius: 20px;
	}
	.top-banner-title {
		margin-bottom: 15px;

		h2 {
			--fs: 23;
		}

		p {
			--fs: 13;
		}
	}
}

@media (max-width: 767px) {
	.top-banner {
		grid-template-columns: auto;
		justify-content: center;
	}
}

/*  top-about  */
.top-about .main-title {
	margin-bottom: 30px;
}

.top-about .button {
	margin-top: 60px;
}

.top-about .about-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;

	img {
		border-radius: 30px;
		margin-bottom: 15px;
	}
}

.top-about .about-links p {
	font-weight: 700;
	margin-bottom: 0px;
	display: flex;
	align-items: center;
	gap: 13px;

	&::after {
		content: "";
		background: url(img/icon-arrow.svg) 0 0 / 24px no-repeat;
		width: 24px;
		height: 24px;
	}
}

@media (max-width: 767px) {
	.top-about .about-links p {
		justify-content: center;
	}
	.top-about .about-links {
		grid-template-columns: auto;
		justify-content: center;
		gap: 30px;
	}
}

/*  top-department  */
.top-department .department-title {
	margin-bottom: 35px;

	.main-title {
		margin-bottom: 0px;
	}

	p {
		font-weight: 500;
	}
}

.top-department .department-item {
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;

	li {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.12);
		display: flex;
		flex-direction: column;
		max-width: 350px;
	}

	img {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
}

.top-department .department-item-body {
	padding: 35px 15px;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;

	h3 {
		--fs: 20;
		font-weight: 700;
		margin-bottom: 20px;
		text-align: center;
	}

	p {
		margin-bottom: 25px;
	}

	a {
		margin-top: auto;
		align-self: center;
	}
}

@media (min-width: 768px) {
	.top-department .department-title {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.top-department .department-title {
		justify-content: center;
	}
	.top-department .department-item {
		grid-template-columns: auto;
		justify-content: center;
		gap: 40px;
	}
}

/*  top-access  */
.top-access {
	margin-bottom: 65px;
}

.top-access .top-access-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.top-access .top-access-item .address {
	h3 {
		--fs: 16;
		color: var(--color-theme-1);
		font-weight: 400;
	}
}

.top-access .ggmap {
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 60px;
	aspect-ratio: 16 / 9;

	iframe {
		width: 100%;
		height: 100%;
		border: 0;
		display: block;
		border-radius: 30px;
	}
}

.top-access .top-access-item .address {
	padding-left: 15px;
	padding-right: 15px;

	p {
		margin-bottom: 0px;
	}
}

@media (min-width: 768px) {
	.top-access-item:first-child .address {
		padding-right: 65px;
		padding-left: 20px;
		position: relative;
		display: flex;
		justify-content: end;
	}
	.top-access-item:first-child .address::after {
		content: "";
		position: absolute;
		top: 0;
		right: -10px;
		width: 0.5px;
		height: 100%;
		background: var(--color-body-1);
	}
	.top-access-item:last-child .address {
		padding-left: 65px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.top-access .top-access-list {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.top-access .ggmap {
		margin-bottom: 20px;
		padding: 0 20px;
	}
	.top-access .top-access-item .address {
		h3 {
			--fs: 19;
		}
	}
}


/* ------- あぐりスクール ------- */

.aguri-school {
	padding-bottom: var(--yohaku);
}

.aguri-school-inner {
	display: grid;
	grid-template-columns: 47% auto;
	gap: 45px;
}

.aguri-school-buttons {
	margin-top: 45px;

	a{
		display: flex;
		max-width: 252px;
		margin-bottom: 15px;
	}
}

.aguri-school-contact {
	margin-top: 30px;

	p {
		margin-bottom: 0px;
	}
}

@media (min-width: 992px) {
	.aguri-school-contact {
		display: flex;
		gap: 30px;
		flex-wrap: wrap;
	}
}

@media (max-width: 991px) {
	.aguri-school-inner {
		grid-template-columns: 1fr;
	}
	.aguri-school-buttons {
		a{
			margin-inline: auto;
		}
	}
	.aguri-school-contact {
		margin-top: 55px;
	}
	.aguri-school-contact .tel {
		width: fit-content;
	    margin-inline: auto;
	    text-align: left;
	}
}

@media (max-width: 575px) {
	.aguri-school-contact {
		display: block;
	}
}


/* ------- FSCについて ------- */

.about-fsc {
	padding-bottom: var(--yohaku);
}

.about-fsc-inner {
	display: grid;
	grid-template-columns: auto 41%;
	gap: 45px;
}

.about-fsc-media,
.activities-img {
	img {
		border-radius: 30px;
	}
}

.activities-item{
	display: grid;
	grid-template-columns: 45% auto;
	gap: 45px;
	margin-bottom: 45px;
}

.field {
	.page-title--bg {
		margin-bottom: 50px;
	}
}

.field-content {
	max-width: 930px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto auto;
	gap: 30px;
}

.field-map {
	margin-bottom: 120px;
}

.hover-area:hover * {
  opacity: 0.6;
}

.link-area {
  scroll-margin-top: 60px;
}

.produced {
	padding-bottom: var(--yohaku);
}

.table-produced tr {
	&:nth-child(odd) {
		background-color: var(--color-theme-2);
	}

	&:nth-child(even) {
		background-color: #fff;
	}
}

.table-produced th,
.table-produced td:first-of-type {
	color: var(--color-theme-1);
	text-align: center;
	font-weight: 400;
	white-space: nowrap;
}

.table-produced th,
.table-produced td {
	padding: 8px;
}

@media (max-width: 991px) {
	.about-fsc-inner {
		grid-template-columns: 1fr;
	}
	.about-fsc-content {
		order: 2;
	}
	.about-fsc-media {
		order: 1;
	}
	.activities-item {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	.field-content {
		grid-template-columns: 1fr;
	}
	.activities-item.last-item {
		margin-bottom: 0px;
	}
	.field {
	.page-title--bg {
			margin-bottom: 30px;
		}
	}
}

/*  farm-wrapper  */
.farm-wrapper {
	position: relative;
	max-width: 933px;
	margin-inline: auto;
	margin-bottom: 90px;
}

.koyama-map,
.ootuka-map,
.forest-map {
	text-align: center;
}

.koyama-map img {
	width: 698px;
}

.ootuka-map img {
	width: 587px;
}

.forest-map img {
	width: 797px;
}

.field-title {
	background-color: var(--color-theme-1);
	border-radius: 50%;
	color: #fff;
	--fs: 27;
	font-weight: 500;
	width: 135px;
	height: 135px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0px;
	position: absolute;
	top: -40px;
	left: 48px;
	text-align: center;
}

.farm-wrapper.color-brown .field-title {
	background-color: var(--color-theme-3);
}

.forest-wrapper .field-title {
	background-color: var(--color-theme-3);
	--fs: 23;
	width: 117px;
	height: 117px;
	top: -67px;
	left: 10px;
}

.farm-img {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-bottom: 50px;

	img {
		border-radius: 40px;
		width: 100%;
	}
}

.forest-wrapper {
	img {
		border-radius: 40px;
		width: 100%;
	}

	p {
		text-align: center;
		font-weight: 500;
		margin-top: 10px;
		margin-bottom: 0px;
	}
}

.forest-img-area {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 100px;
	margin-bottom: 100px;
}

.forest-img-item {
	position: relative;
}

@media (min-width: 768px) {
	.farm-wrapper {
		border: solid 2px var(--color-theme-1);
		border-radius: 30px;
		padding: 30px 30px 50px 30px;

		&.color-brown {
			border: solid 2px var(--color-theme-3);
		}
	}
}

@media (max-width: 767px) {
	.field-title,
	.forest-wrapper .field-title {
		--fs: 22;
		width: 110px;
		height: 110px;
		top: -40px;
		left: -10px;
	}
	.farm-img {
		grid-template-columns: 1fr;
		gap: 20px;

		img {
			border-radius: 30px;
		}
	}
	.forest-img-area {
		grid-template-columns: 1fr;
		gap: 70px;
		margin-bottom: 120px;
	}
}


/* ------- 部門紹介 ------- */

.department .footer {
	margin-top: -35px;
}

.department-nav {
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding-bottom: var(--yohaku);
}

.department-nav li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;

	h2 {
		margin-bottom: 40px;
		--fs: 20;
		color: var(--color-theme-1);
		border: 1px solid currentColor;
		border-radius: 50px;
		text-align: center;
		padding: 10px;
		font-weight: 700;
	}

	p {
		margin-bottom: 40px;
	}

	a {
		margin-top: auto;
		align-self: center;
	}
}

/*  department-section  */
.department-section {
	margin-bottom: 110px;

	h2 {
		margin-bottom: 40px;
	}
}

.department-section__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 45px;
}

.department-section__image {
	img {
		border-radius: 30px;
	}

	a {
		margin-top: 55px;
	}
}

.department-section__staff {
	margin-top: 40px;
	display: flex;
    gap: 25px;
    flex-wrap: wrap;

    p {
    	margin-bottom: 0px;
    }
}

@media (max-width: 991px) {
	.department-nav {
		grid-template-columns: 1fr;
	}
	.department-nav li {
		h2,p {
			margin-bottom: 30px;
		}
	}
	.department-section {
		margin-bottom: 65px;
	}
	.department-section__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.department-section__staff {
		margin-top: 30px;
	}
}

@media (max-width: 575px) {
	.department-section__staff {
		display: block;
	}
}

/*  staff  */
.box-white {
	background-color: #fff;
	border-radius: 30px;
	padding: 60px 12% 100px;
}

.staff {
	.content-wave-inner {
		padding-bottom: 160px;
	}

	h3 {
		margin-bottom: 30px;
	}

	h4 {
		--fs: 16;
		color: var(--color-theme-1);
		margin-bottom: 7px;
		font-weight: 400;
	}
}

.staff-list {
	list-style: none;
	padding-left: 0px;
	margin-bottom: 00px;
	display: flex;
	flex-wrap: wrap;
	gap: 0px 25px;

	li {
		white-space: nowrap;
	}
}

.table-staff th {
	color: var(--color-theme-1);
	font-weight: 400;
	white-space: nowrap;
	vertical-align: sub;
	padding-right: 20px;
}

@media (min-width: 992px) {
	.table-staff,
	.ml-1em {
		margin-left: 1em;
	}
}

@media (max-width: 767px) {
	.box-white {
		background-color: #fff;
		border-radius: 10px;
		padding: 50px 20px 80px;
	}
}


/* ------- サイトポリシー ------- */

.site-policy {
	padding-bottom: 100px;
}

.site-policy h3 {
	font-weight: 700;
}


/* ------- スクロールヒント　スクロール中央配置 ------- */

.media-scroll{
	margin-inline:auto;
	max-width:100%;
}

.media-inner{
	position:relative;
	z-index:2;
}

.scroll-hint-icon-wrap{
	top:auto;
	bottom:0;
	left:calc((var(--scroll-width) - 100%) / 2);
	z-index:3;
}

@media(max-width:767px){
	.js-scroll{
		overflow:auto;
	}
	.js-scroll img{
		min-width:var(--scroll-width);
	}
}


/* ------- アニメーション ------- */

.wow[class*="animate__"]:not(.animate__animated) {
	animation-name: none;
	visibility: hidden;
}

.wow {
	animation-delay: 0.2s;
}

.wow[data-wow-delay] {
	animation-delay: unset;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}