@charset "utf-8";
:root {
	--text: #666666;
	--green: #40a09d;
/*	--green: #73b6b2; 案1*/
	/*--green: #6ab4a8; 案2*/
	/* --green: #7fb4a2;案3*/
	--txtgreen: #148467;
	--pink: #d3919d;
	--gray: #f8f8f8;
	--jp: "Noto Sans JP", sans-serif;
	--en: "Montserrat", sans-serif;
	--grayline: #999999;
	--midline: #cccccc;
}
html {
	scroll-behavior: smooth;
	scroll-margin-top: 60px; 
	@media screen and (min-width:769px) {
		scroll-margin-top: 120px; 
	}
}
body {
	font-family: var(--jp);
	color: var(--text);
/*	overflow-x: hidden;*/
/*	font-feature-settings: "palt";*/
}
img {
	width: 100%;
}
ol {
	list-style: decimal;
	> li {
		margin-left: 1.5em;
		padding-left: 0.25em;
	}
	> li::marker {
		color: var(--txtgreen);
	}
}
ul.disc {
	li {
		margin-left: 1em;
		text-indent: -1em;
	}
	& > li::before {
		content: "";
		display: inline-block;
		width: 0.6em;
		height: 0.6em;
		background-color: var(--txtgreen);
		border-radius: 50%;
		margin-right: 0.25em;
	}
}
ol > li:nth-child(n+2){
	margin-top: 0.25em;
}
.sp {
	display: block;
	@media screen and (min-width:769px) {
		display: none;
	}
}
.pc {
	display: none;
	@media screen and (min-width:769px) {
		display: block;
	}
}
.caution {
	color: var(--pink);
	font-size: 3.733vw;
	font-weight: bold;
	line-height: 1.7;
	margin-top: 10px;
	@media screen and (min-width:769px) {
		font-size: 87.5%;
		margin-top: 30px;
	}
}
.note {
	font-size: 3.2vw;
	@media screen and (min-width:769px) {
		font-size: 75%;
	}
}
ul.section li a,
a.btn,
p.btn a {
	background-color: var(--green);
	padding: 10px;
	display: block;
	border-radius: 20px;
	text-align: center;
	font-weight: bold;
	border: 1px solid var(--green);
	transition: background-color 0.5s ease, color 0.5s ease;
	position: relative;
	overflow: hidden;
	@media screen and (min-width:769px) {
		border-radius: 25px;
		font-size: 112.5%;
	}
	& > span {
		color: #ffffff;
		position: relative;
	}
}
ul.section li a::before,
a.btn::before,
p.btn a::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s ease;
	transition-property: transform;
	border: 1px solid var(--green);
	color: var(--txtgreen);
	border-radius: inherit;
	z-index: 0;
}
ul.section li a::after,
a.btn::after,
p.btn a::after {
	content: "";
	display: inline-block;
	background: url("../img/common/arrow_w.png") no-repeat;
	background-size: contain;
	height: 9px;
	width: 24px;
	position: absolute;
	bottom: 5px;
	transform: translateY(-50%);
	z-index: 2;
	@media screen and (min-width:769px) {
		height: 10px;
		width: 25px;
	}
}

ul.section li a:hover::after,
a.btn:hover::after,
p.btn a:hover::after {
	@media screen and (min-width:769px) {
	content: "";
	display: inline-block;
	background: url("../img/common/arrow_g.png") no-repeat;
	background-size: contain;
	height: 9px;
	width: 24px;
	margin-left: 5px;
	
		height: 10px;
		width: 25px;
	}
}
ul.section li a:hover span,
a.btn:hover span,
p.btn a:hover span {
	@media screen and (min-width:769px) {
		background-color: #ffffff;
		color: var(--txtgreen);
		transition: background-color 0.5s ease, color 0.5s ease;
	}
}

ul.section li a:hover::before,
a.btn:hover::before,
p.btn a:hover::before {
	@media screen and (min-width:769px) {
		transform: scaleX(1);
	}
}
ul.section li a span,
a.btn span,
p.btn a span {
	position: relative;
	z-index: 2;
	transition: color 0.5s ease;
	left: -12px;
	font-feature-settings: "palt";
}
ul.section {
	display: block grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 5px;
	@media screen and (min-width:769px) {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	& li {
		& a {
			line-height: 1;
			@media screen and (min-width:769px) {
				font-size: 125%;
			}
		}
	}
}
a.pdf {
	position: relative;
	border: 1px solid var(--grayline);
	border-radius: 30px;
	padding: 2px 40px 2px 30px !important;
	font-size: 3.73vw;
	display: block;
	width: fit-content;
	@media screen and (min-width:769px) {
		font-size: 87.5%;
		padding: 2px 46px 2px 36px !important;
		border-radius: 15px;
	}
}
a.pdf::after {
	content: "";
	display: inline-block;
	background: url("../img/common/ico_pdf.svg") no-repeat;
	background-size: contain;
	height: 20px;
	width: 18px;
	margin-left: 8px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: 16px;
	@media screen and (min-width:769px) {
		right: 20px;
	}
}

header > article,
section article {
	width: 100%;
	margin-inline: auto;
	@media screen and (min-width:769px) {
		max-width: 1000px;
	}
}
/*section:not(:first-of-type) {*/
section {
	padding: 60px 5% 0;
	scroll-margin-top: 60px;
	@media screen and (min-width:769px) {
		padding: 100px 0 0;
	}
	& article {
		position: relative;
		& h2 {
			font-size: 6.4vw;
			font-weight: bold;
			margin-bottom: 30px;
			@media screen and (min-width:769px) {
				font-size: 187.5%;
				font-weight: bold;
				margin-bottom: 40px;
			}
		}
		& p,
		& dl,
		& ol,
		& ul {
			line-height: 1.7;
		}
		& a:hover {
			opacity: 0.7;
			transition: 0.6s ease;
		}
		& h2 + p,
/*		> p:not(.map),*/
		& p.intro {
			font-size: 4.8vw;
			margin-bottom: 10px;
			@media screen and (min-width:769px) {
				font-size: 112.5%;
				margin-bottom: 20px;
			}
		}
		& .wrapper_dl {
/*
			@media screen and (min-width:769px) {
				width: 64%;
				max-width: 640px;
			}
*/
			& dl {
				border-top: 1px solid var(--grayline);
				border-bottom: 1px solid var(--grayline);
				padding: 1em;
				@media screen and (min-width:769px) {
					padding-left: 0;
					padding-right: 0;
					display: flex;
				}
				& dt {
					font-weight: normal;
					@media screen and (min-width:769px) {
						min-width: fit-content
					}
					& span {
						font-size: 3.733vw;
						padding: 2px 15px;
						color: #ffffff;
						border-radius: 32px;
						margin-left: 0.5em;
						@media screen and (min-width:769px) {
							font-size: 87.5%;
						}
					}
					& .notice {
						background-color: var(--green);
					}
					& .closing_info {
						background-color: var(--pink);
					}
				}
				& dd {
					line-height: 1.3;
					margin-top: 10px;
					@media screen and (min-width:769px) {
						margin-top: 0;
						margin-left: 10px;
					}
					& a {
						text-decoration: underline;
						line-height: 1.7;
						&:hover {
							text-decoration: none;
							opacity: 1.0;
							color: var(--txtgreen);
							font-weight: bold;
						}
					}
				}
			}
			& dl:nth-of-type(n+2) {
				border-top: none;
			}
		}
		& .btn_2 {
			position: absolute;
			top: -42px;
			right: 0;
			& a {
				border: 1px solid var(--grayline);
				border-radius: 16px;
				padding: 2px 15px;
				&::after {
					content: "";
					display: inline-block;
					background: url("../img/common/arrow_g.png") no-repeat;
					background-size: contain;
					height: 8px;
					width: 21px;
					margin-left: 8px;
				}
				&:hover {
					opacity: 1.0;
					color: var(--txtgreen);
					font-weight: bold;
				}
			}
		}
	}/* article */
}
header {
	height: 60px;
	box-sizing: border-box;
	position: relative;
	border-bottom: 1px solid #cccccc;
	position: fixed;
	z-index: 100;
	height: 60px;
	background-color: #ffffff;
	width: 100%;
	@media screen and (min-width:769px) {
		height: 120px;
	}
	& .logo {
		width: 150px;
		margin-left: 5%;
		padding: 8px 0;
		height: 60px;
		@media screen and (min-width:769px) {
			width: 23%;
			max-width: 210px;
			margin-left: 0;
			padding: 25px 0 0 0;
		}
	}
	& #nav {
		cursor: pointer;
		width: 30px;
		height: 60px;
		padding: 20px 15px;
		z-index: 200;
		height: 24px;
		position: absolute;
		top: 10px;
		right: 5%;
		transition: 0.6s ease;
		@media screen and (min-width:769px) {
			display: none;
		}
	}
	& span,
	& span::before,
	& span::after {
		display: block;
		height: 1px;
		width: 30px;
		transition: 0.6s ease;
		background-color: var(--green);
	}
	& span {
		position: absolute;
		top: 20px;
		right: 5%;
	}
	& span::before {
		margin-top: -10px;
		position: absolute;
		content: "";
	}
	& span::after {
		margin-top: 10px;
		content: "";
	}
	& #nav.open span {
		background-color: transparent !important;
	}
	& #nav.open span::before {
		transform: rotate(36deg);
	}
	& #nav.open span::after{
		transform: rotate(-36deg);
	}
	& #nav.open span::before,
	& #nav.open span::after {
		margin-top: 0;
	}
	& nav {
		display: none;
		@media screen and (min-width:769px) {
			display: block;
			position: relative;
		}
		& > ul:not(.sub) {
			@media screen and (min-width:769px) {
				display: flex;
				justify-content: space-between;
				width: 70%;
				margin-left: 27%;
				margin-top: 0;
			}
			& > li {
				@media screen and (min-width:769px) {
					font-size: 112.5%;
					font-weight: bold;
				}
				& > ul {
					& > li {
						@media screen and (min-width:769px) {
							color: var(--text);
							font-size: 100%;
							display: none;
						}
						& > a::before {
							content: "";
							display: inline-block;
							background: url(../img/common/ico_navi.png) no-repeat;
							height: 20px;
							width: 20px;
							background-size: contain;
							vertical-align: middle;
							margin-right: 10px;
						}
					}
				}
			}
			& > li {
				@media screen and (min-width:769px) {
					& a {
						padding-bottom: 1em;
					}
				}
			}
		}
		& > ul:first-of-type {
			@media screen and (min-width:769px) {
				margin-right: 3%;
				margin-top: 1.5em;
			}
			& > li:nth-child(n+2) {
				@media screen and (min-width:769px) {
					margin: 0;
				}
			}
			@media screen and (min-width:769px) {
				& > li:hover {
					font-weight: bold;
					& > ul {
						@media screen and (min-width:769px) {
							background: var(--gray);
							padding: 15px;
							display: block !important;
							margin-top: 12px;
							position: absolute;
						}
						& > li {
							display: block;
							color: var(--text);
							font-weight: normal;
							a {
								padding-bottom: 1em;
							}
						}
						& > li:nth-child(n+2) {
							margin-top: 1em;
							margin-left: 0;
						}
						& li:hover {
							color: var(--txtgreen);
							font-weight: bold;
						}
					}
				}
				& > li:last-child:hover {
					& ul {
						width: 240px;
						right: 0;
					}
				}
			}
		}
		& .sub {
			@media screen and (min-width:769px) {
				display: flex;
				align-items: flex-end;
				top: -70px;
				right: 0;
				position: absolute;
				width: 77%;
/*				width: 56%;*/
/*				width: 73%; contact*/
/*				min-width: 580px; contact*/
/*				min-width: 685px;*/
				justify-content: space-between;
			}
			@media screen and (min-width:901px) {
				width: 73%;
				min-width: 655px;
			}
			& li {
				position: relative;
			}
/*
			li:nth-child(2),
			li:nth-child(3),
*/
			& li.contact {
				@media screen and (min-width:769px) {
					font-size: 87.5%;
					display: block;
				}
			}
			& li.access a::before {
				@media screen and (min-width:769px) {
					content: "";
					display: inline-block;
					background: url("../img/common/ico_access_gray.png") no-repeat;
					height: 20px;
					width: 20px;
					background-size: contain;
					vertical-align: middle;
/*					margin-right: 5px;*/
				}
			}
			& li.recruit a::before {
				@media screen and (min-width:769px) {
					content: "";
					display: inline-block;
					background: url("../img/common/ico_recruit_gray.png") no-repeat;
					height: 20px;
					width: 20px;
					background-size: contain;
					vertical-align: middle;
					margin-right: 5px;
				}
			}
			& li.faq a::before {
				@media screen and (min-width:769px) {
					content: "";
					display: inline-block;
					background: url("../img/common/ico_faq_gray.png") no-repeat;
					height: 20px;
					width: 20px;
					background-size: contain;
					vertical-align: middle;
					margin-right: 5px;
				}
			}
			& li.panorama a::before {
				@media screen and (min-width:769px) {
					content: "";
					display: inline-block;
					background: url("../img/common/ico_panorama_gray.png") no-repeat;
					height: 20px;
					width: 20px;
					background-size: contain;
					vertical-align: middle;
					margin-right: 5px;
				}
			}
			& li:nth-child(n+2) {
				@media screen and (min-width:769px) {
					font-size: 75%;
				}
				@media screen and (min-width:901px) {
					font-size: 93.75%;
				}
			}
/*
			li.insta {
				display: none;
			}
*/
		}
	} /* nav */
	& #nav.open + nav {
		display: block;
		background-color: var(--gray);
		position: absolute;
		height: calc(100vh - 60px);
		width: 100%;
		z-index: 5;
		overflow: auto;
		padding: 15px 5%;
		& ul {
			& li {
				& a {
					display: block;
				}
			}
		}
		& > ul:not(.sub) {
			& > li {
				font-size: 4.8vw;
				& > a {
					padding: 15px 0 10px;
				}
				& > ul {
					margin-left: 15px;
					& > li {
						font-size: 4.266vw;
						& > a {
							padding: 0.5em 0.75em 0.5em 0;
						}
						& > a::before {
							content: "";
							display: inline-block;
							background: url(../img/common/ico_navi.png) no-repeat;
							height: 20px;
							width: 20px;
							background-size: contain;
							vertical-align: middle;
							margin-right: 10px;
						}
					}
				}
			}
		}
		& > ul:first-of-type {
			& > li:first-child {
				& > ul {
					grid-template-columns: 1.5fr 2fr;
					display: grid;
					& > li:nth-last-child(-n+2) {
						grid-column: 1 / 3;
					}
				}
			}
			& > li:nth-child(2),
			& > li:nth-child(3) {
				& > ul {
					grid-template-columns: 1.5fr 2fr;
					display: grid;
				}
			}
			& > li:nth-child(n+2) {
				padding-top: 0.5em;
			}
		}
		& .sub {
			margin-top: 35px;
			position: relative;
			& li {
				position: relative;
			}
			& li:nth-child(n+2) {
				font-size: 3.73vw;
				display: inline-block;
			}
			& li:nth-child(3),
			& li:nth-child(4) {
				margin-left: 5px;
			}
			& li:not(.contact):not(.insta) {
				& a {
					padding: 5px 0;
				}
			}
			& .contact {
				position: absolute;
				top: 74px;
				left: 0;
				& a {
					display: inline;
				}
			}
			& li.insta {
				position: absolute;
				top: 68px;
				left: 42.6%;;
				margin-top: 0;
			}
			& li.access a::before {
				content: "";
				display: inline-block;
				background: url("../img/common/ico_access_green.png") no-repeat;
				height: 20px;
				width: 20px;
				background-size: contain;
				vertical-align: middle;
				margin-right: 5px;
			}
			& li.recruit a::before {
				content: "";
				display: inline-block;
				background: url("../img/common/ico_recruit_green.png") no-repeat;
				height: 20px;
				width: 20px;
				background-size: contain;
				vertical-align: middle;
				margin-right: 5px;
			}
			& li.faq a::before {
				content: "";
				display: inline-block;
				background: url("../img/common/ico_faq_green.png") no-repeat;
				height: 20px;
				width: 20px;
				background-size: contain;
				vertical-align: middle;
				margin-right: 5px;
			}
			& li.panorama a::before {
				content: "";
				display: inline-block;
				background: url("../img/common/ico_panorama_green.png") no-repeat;
				height: 20px;
				width: 20px;
				background-size: contain;
				vertical-align: middle;
				margin-right: 5px;
			}
		}
	}
	& .footer_menu {
		display: flex;
		margin-top: 55px;
		color: var(--grayline);
		& li {
			font-size: 3.2vw !important; 
			@media screen and (min-width:769px) {
				display: none;
			}
		}
		& li:nth-child(2) {
			margin-left: 1em;
		}
	}
	& ul li:not(.tel):hover {
		@media screen and (min-width:769px) {
			color: var(--txtgreen);
			font-weight: bold;
		}
	}
}
ul {
	& .tel {
		color: var(--txtgreen);
		font-size: 5.33vw;
		@media screen and (min-width:769px) {
			font-size: 137.5%;
		}
	}
	& .contact {
		& a {
			padding: 2px 15px;
			border: 1px solid var(--grayline);
			border-radius: 13px;
			@media screen and (min-width:769px) {
				padding: 4px 15px;
				border-radius: 15px;
			}
			&:hover {
				color: var(--txtgreen);
				font-weight: bold;
			}
		}
	}
	& .contact a::before {
		content: "";
		display: inline-block;
		background: url("../img/common/ico_mail_gray.png") no-repeat;
		height: 20px;
		width: 20px;
		background-size: contain;
		vertical-align: middle;
		margin-right: 5px;
	}
	& li.insta a::before {
		content: "";
		display: inline-block;
		background: url("../img/common/ico_insta.png") no-repeat;
		height: 30px;
		width: 30px;
		background-size: contain;
		vertical-align: middle;
		@media screen and (min-width:769px) {
			height: 22px;
			width: 22px;
		}
	}
}
/* footer */
footer {
	& section.footer {
		border-top: 1px solid var(--grayline);
		padding: 40px 5% 5px;
		position: relative;
		@media screen and (min-width:769px) {
			padding: 60px 0 5px;
		}
		& article {
			@media screen and (min-width:769px) {
				position: relative;
			}
			& .logo {
				width: 195px;
				margin-bottom: 30px;
				@media screen and (min-width:769px) {
					margin-bottom: 0;
				}
			}
			& > div {
				position: relative;
				@media screen and (min-width:769px) {
					position: absolute;
					top: 0;
					left: 235px;
					display: flex;
					justify-content: space-between;
					width: calc(100% - 235px);
/*					align-items: center;*/
				}
				& ul {
					@media screen and (min-width:769px) {
						margin-top: -8px;
					}
					& li:first-child {
						font-size: 3.733vw;
						@media screen and (min-width:769px) {
							font-size: 112.5%;
						}
					}
					& .tel {
						@media screen and (min-width:769px) {
							font-size: 137.5%;
							display: inline-block;
						}
					}
					& .contact {
						font-size: 3.733vw;
						margin-top: 1em;
						@media screen and (min-width:769px) {
							font-size: 100%;
							margin-top: 0;
						}
					}
					& .contact a::before {
						background: url("../img/common/ico_mail_green.png") no-repeat;
						height: 18px;
						width: 18px;
						background-size: contain;
						background-position: 0 1px;
						@media screen and (min-width:769px) {
							height: 18px;
							width: 24px;
							background-position: 0 0;
						}
					}
					& .insta a::before {
						@media screen and (min-width:769px) {
							height: 30px;
							width: 30px;
						}
					}
					& .contact,
					& .insta {
						display: inline-block;
						@media screen and (min-width:769px) {
							margin-left: 10px;
						}
					}
				}
				& > p {
					width: 45%;
					position: absolute;
					right: 0;
					top: 30px;
					max-width: 200px;
					@media screen and (min-width:769px) {
						width: 32%;
						max-width: 240px;
						position: static;
					}
/*
					img {
						border: 1px solid #00872e;
					}
*/
				}
			}
			& .footer_menu {
				display: none;
				@media screen and (min-width:769px) {
					display: flex;
					font-size: 87.5%;
					margin-top: 117px;
					& li:hover {
						color: var(--txtgreen);
						font-weight: bold;
					}
					& li:nth-child(2) {
						margin-left: 1em;
					}
				}
			}
		}
		& small {
			margin-top: 80px;
			display: block;
			text-align: right;
			@media screen and (min-width:769px) {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
	& .bnrs {
		border-top: none;
/*		padding: 40px 5% 40px;*/
		padding: 0 5% 40px;
		@media screen and (min-width:769px) {
/*			padding: 60px 0 60px;*/
			padding: 0 0 60px;
		}
		& article {
			& p {
				margin-bottom: 20px;
				@media screen and (min-width:769px) {
					margin-bottom: 30px;
				}
			}
			& ul {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
				@media screen and (min-width:769px) {
					grid-template-columns: repeat(4, 1fr);
					gap: 15px;
				}
			}
		}
	}
	
	& .pagetop {
		margin: 0 auto;
		text-align: right;
		position: fixed;
		right: 5%;
		bottom: 3%;
		@media screen and (min-width:769px) {
			right: 30px;
			bottom: 30px;
		}
		& a {
			display: inline-block;
			width: 60px;
			height: 60px;
			text-align: center;
			background-color: var(--green);
			border-radius: 0 10px 0 10px;
			img {
				width: 60%;
				margin-top: 18px;
			}
		}
	}
}
 /* アクセス */
section.access {
	padding: 60px 0 0;
	& article {
		@media screen and (min-width:769px) {
			display: flex;
			max-width: none;
		}
		& .map {
			@media screen and (min-width:769px) {
				width: 50%;
			}
			& iframe {
				width: 100%;
				height: 240px;
				@media screen and (min-width:769px) {
					width: 100%;
					height: -webkit-fill-available;
					height: 100%;
				}
			}
		}
		& div {
			background-color: var(--gray);
			padding: 40px 5%;
			@media screen and (min-width:769px) {
				padding: 60px;
				width: 50%;
			}
			& dl {
				& dt {
					color: var(--green);
				}
				& dt:nth-of-type(n+2) {
					margin-top: 2em;
				}
				& dd {
					margin-top: 10px;
				}
			}
		}
	}
}

/* モーダル */
.mfp-wrap {
	max-width: 800px;
	right: 0;
	left: 0;
	margin: auto;
	& .mfp-content {
		& p,
		& ul {
			color: #ffffff;
			margin-top: 0.5em;
			margin-left: 0.5em;
			line-height: 1.7;
		}
	}
}

/* pager */
section {
	& article {
		& .pager {
			text-align: center;
			& .current {
				font-weight: bold;
				color: rgba(255, 255, 255, 1.00);
				padding: 4px 10px;
				text-decoration: none;
				border: 1px solid var(--green);
				background-color: var(--green);
			}
			& .page-numbers {
				font-size: 4.266vw;
				@media screen and (min-width:769px) {
					font-size: 100%;
				}
			}
			& .page-numbers:nth-of-type(n+2),
			& a.page-numbers + span.page-numbers,
			& span.page-numbers + a.page-numbers{
				margin-left: 10px;
			}
			& a.page-numbers {
				color: var(--text);
				padding: 3px 10px;
				border: 1px solid var(--text);
			}
			& a.page-numbers:hover {
				color: #ffffff;
				border: 1px solid var(--green);
				background-color: var(--green);
				opacity: 1.0;
				font-weight: bold;
			}
		}
	}
}

/* 採用情報バナー */
section {
	& article {
		& ul.bnr_recruit {
			margin-top: 30px;
			@media screen and (min-width: 769px) {
				margin-top: 40px;
				display: flex;
				justify-content: space-between;
			}
			& li {
				@media screen and (min-width: 769px) {
					width: 48%;
/*					max-width: 470px;*/
				}
			}
			& li:nth-child(n+2) {
				margin-top: 1em;
				@media screen and (min-width: 769px) {
					margin-top: 0;
				}
			}
			& + p {
				margin-top: 1em;
				@media screen and (min-width: 769px) {
					margin-top: 40px !important;
				}
			}
		}
	}
}