/*css*/
html {
	scroll-behavior: smooth;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.8;
	font-feature-settings: "palt";
	scroll-padding-top: 80px;
	@media screen and (min-width:768px) { scroll-padding-top: 130px;}
}
body {
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}
a {
	display: inline-block;
	transition: 0.4s;
	text-decoration: underline;
}
a:hover { opacity: 0.7; }
a[href$=".pdf"]::before, a[href$=".xlsx"]::before, a[href$=".docx"]::before, a[href$=".pptx"]::before {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	margin-right: 5px;
}
a.external::after {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	margin-left: 5px;
}
a[href$=".pdf"]::before { content: url(../img/common/ico-pdf.svg); }
a[href$=".xlsx"]::before { content: url(../img/common/ico-xlsx.svg); }
a[href$=".docx"]::before { content: url(../img/common/ico-docx.svg); }
a[href$=".pptx"]::before { content: url(../img/common/ico-pptx.svg); }
a.external::after { content: url(../img/common/ico-outside.svg); }
img {
	width: 100%;
	height: auto;
}
.pc {
	display: none;
	@media screen and (min-width:768px) { display: initial;}
}
@media screen and (min-width:768px) {
	.sp { display: none; }
}
.gsc-control-cse-ja {
	.gsc-input, .gsc-control-cse, .gsib_a, td.gsc-search-button { padding: 0;}
	.gsc-input, .gsc-control-cse, .gsc-input-box, .gsc-search-button, tbody, tr, td { border: 0; }
	.gsc-input input {
	        color: #666666;
	        padding: 5px 1em !important;
	        border: 1px solid #cccccc !important;
	        border-radius: 20px !important;
	        background-position-x: 1em !important;
	        background: #transparent !important;
	}
	.gsib_b { display: none; }
	button.gsc-search-button {
		border-radius: 50%;
		background-color: #666666;
		width: 30px;
		height: 30px;
		padding: 9px;
	        svg {
			transform: scale(1.2);
	        }
	}
}
.gsc-control-cse {
    background-color: transparent !important;
    border: 0 !important;
}
.gsc-control-cse { padding: 0 !important;}
table.gsc-search-box td.gsc-input { padding-right: 5px !important;}
.gsc-input-box {background-color: transparent !important;}
.gsc-modal-background-image { background-color: rgba(0, 0, 0, 0.8) !important;}
.gsc-results-wrapper-visible { border-radius: 20px !important; }
/*header*/
header {
	background-color: #ffffff;
	position: fixed;
	width: 100%;
	height: 65px;
	line-height: 1.3;
	z-index: 10;
	@media screen and (min-width:768px) { height: 115px; }
	> div {
		position: fixed;
		padding: 15px 5%;
		height: 65px;
		width: 100%;
		@media screen and (min-width:768px) {
			height: 115px;
			padding: 35px 0 0;
			max-width: 1200px;
			display: grid;
			gap: 2em;
			grid-template-columns: 280px 1fr;
			margin: 0 auto;
            		position: relative;
		}
		.logo {
			width: 200px;
			height: fit-content;
			@media screen and (min-width:768px) { width: 280px; }
		}
		> button {
			width: 30px;
			height: 30px;
			position: fixed;
			top: 18px;
			right: 5%;
			@media screen and (min-width:768px) { display: none; }
			div {
				background-color: #669933;
				height: 2px;
				&::before, &::after {
					content: "";
					display: block;
					position: relative;
					background-color: #669933;
					height: 2px;
					transition: 0.5s;
				}
				&::before { top: -12px; }
				&::after { top: 10px; }
			}
		}
		nav {
			background-color: #e3f3cd;
			color: #666666;
			position: fixed;
			top: 65px;
			left: 0;
			width: 100vw;
			padding: 35px 5%;
			scrollbar-width: thin;
			height: calc(100vh - 70px);
			overflow-y: auto;
			display: none;
			@media screen and (min-width:768px) {
				display: block;
				background-color: transparent;
				color: #666666;
				padding: 0;
				position: relative;
				top: -5px;
				overflow-y: visible;
				height: auto;
				width: fit-content;
			}
		}
	}
}
header nav ul.global li a { text-decoration: none; }
header nav ul.global > li {
	font-weight: 700;
	font-size: 5vw;
	border-bottom: 1px solid #bbbbbb;
	> a { padding: 25px 0; }
	span {
		display: inline-block;
		width: 1em;
		transform: rotate(90deg);
		vertical-align: middle;
		margin-left: 0.5em;
		transition: 0.5s;
	}
	div > ul {
		padding-bottom: 15px;
		@media screen and (min-width:768px) { padding-bottom: 0;}
		> li {
			font-size: 4vw;
			margin-left: 1em;
			a {
				padding: 15px 0;
				text-decoration: underline;
				@media screen and (min-width:768px) { padding: 0; }
			}
			p {
				font-weight: 700;
				margin: 15px 0 10px 0;
				@media screen and (min-width:768px) { margin: 0 0 10px 0; }
			}
		 	ul {
				font-weight: 400;
				font-size: 3.5vw;
				@media screen and (min-width:768px) { font-size: 87.5%; }
				li a {
					padding: 5px 0;
					@media screen and (min-width:768px) { padding: 0;}
				}
			}
		}
	}
}
header nav ul.global > li div.survey > ul > li.accident {
	p, ul {
		margin-left: 1em;
		font-size: 3.5vw;
		@media screen and (min-width:768px) { font-size: 87.5%; }
	}
}
header nav ul.global > li div.survey > ul li.awareness ul li:last-child {margin-left: 1em; }
@media screen and (min-width:768px) {
	header nav ul.global {
		display: flex;
		align-items: center;
		position: relative;
		> li {
			font-size: 112.5%;
			font-weight: 400;
			position: relative;
			border-bottom: none;
			align-items: center;
			display: flex;
			text-align: center;
			&:hover {
				color: #669933;
				font-weight: 700;
			}
			> a {
				padding: 32px 1em;
				&:hover {
					color: #669933;
					opacity: 1;
					font-weight: 700;
				}
			}
			span { display: none; }
			div {
				background-color: #e3f3cd;
				color: #666666;
				position: absolute;
				top: 85px;
				border-radius: 30px;
				white-space: nowrap;
				display: none;
				align-items: center;
				text-align: left;
				width: 1200px;
				opacity: 0;
				visibility: hidden;
				&::before {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border-left: 10px solid transparent;
					border-right: 10px solid transparent;
					border-bottom: 30px solid #e3f3cd;
					position: absolute;
					top: -20px;
					z-index: -1;
				}
				> p {
					display: block;
					font-weight: 700;
					font-size: 150%;
					padding-bottom: 15px
				}
				> ul {
					display: flex;
					gap: 15px 40px;
					> li {
						font-size: 100%;
						padding-left: 0;
						font-weight: 600;
						margin-left: 0;
					}
				}
			}
		}
		> li::before, > li:last-child::after {
			content: "";
			display: inline-block;
			width: 1px;
			height: 2.5em;
			background-color: #cccccc;
			transform: rotate(15deg);
		}
		> li:hover div {
			visibility: visible;
			opacity: 1;
			display: block;
			padding: 40px;
		}
		> li:nth-child(2) > a { padding: 20px 1em; }
	}
	header nav ul.global > li div.about {
		left: -316px;
		&::before { left: 400px; }
		> ul { 
			grid-auto-flow: column;
		}
	}
	header nav ul.global > li div.survey {
		left: -470px;
		&::before { left: 550px; }
		> ul {
			flex-direction: column;
			flex-wrap: wrap;
			height: 220px;
		}
	}
	header nav ul.global > li div.original {
		left: -645px;
		&::before { left: 710px; }
	}
}
header nav ul.other {
	margin: 25px 0;
	display: grid;
	gap: 15px 10px;
	grid-template-columns: 6.5em auto 8.5em;
	grid-template-rows: 1em 1em 1em 2.7em 1.5em;
	width: fit-content;
	@media screen and (min-width:768px) {
	        position: absolute;
	        margin: 0;
	        top: -25px;
	        right: -420px;
	        display: flex;
	        width: 600px;
	}
	li { grid-column: 1 / 4;
		a { text-decoration: none; }
		form {
			display: flex;
			gap: 10px;
			padding: 5px 0;
			align-items: center;
			@media screen and (min-width:768px) {
				padding: 0;
				justify-content: right;
				width: 230px;
				font-size: 87.5%;
				grid-template-columns: 70% 1.5em;
			}
			input {
				background-color: #ffffff;
				color: #666666;
				padding: 5px 1em;
				border-radius: 20px;
				@media screen and (min-width:768px) {
					border: 1px solid #cccccc;
					width: 160px;
					padding: 5px 1em;
				}
			}
			button {
		                border-radius: 50%;
		                line-height: 1;
		                background-color: #666666;
		                display: block;
		                width: 2em;
		                height: 2em;
		                padding: 7px;
				@media screen and (min-width:768px) {
					padding: 4px;
				}
			}
		}
	}
	li.en { grid-column: 1 / 2; }
	li.member { 
		grid-column: 3 / 4;
	}
	li.en, li.member {
		a {
			padding: 5px 1.5em;
			color: #ffffff;
			background-color: #7db72a;
			border-radius: 20px;
			@media screen and (min-width:768px) {
				color: #ffffff;
				background-color: #7db72a;
				font-size: 75%;
				padding: 5px 1em;
				margin: 0;
			}
		}
	}
	li.member a {
		padding: 10px 1.5em;
		border-radius: 30px;
	}
	li.line {
		grid-column: 2 / 3;
		justify-self: left;
		align-content: center;
		a {
			width: 40px;
			height: 40px;
		}
	}
}
header nav ul.policy {
	font-size: 75%;
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0 20px;
	margin-top: auto;
	@media screen and (min-width:768px) { display: none}
	li a { text-decoration: none; }
}
header nav > ul.other li.home {display: none;}
@media screen and (min-width:768px) {
	header nav > ul.other li.news a {
		color: #ffffff;
		background-color: #7db72a;
		font-size: 75%;
		padding: 5px 1em;
		margin: 0;
		border-radius: 20px;
	}
	header nav > ul.other li.home {
		width: 1.5em;
		display: block;
		order: -1; 
	}
	header nav > ul.other {
		.recruit, .bid { display: none}
	}
	header nav > ul.other li.search { order: -1; }
}
/*スマホメニュー展開時*/
header.active button div { 
	transform: rotate(30deg);
	&::before { 
		top: 0px;
		transform: rotate(-60deg);
	}
	&::after { display:none; }
}
header.active nav {
	display: grid;
	grid-template-rows: min-content;
}
header.active nav ul.global li.active span,
header.active nav ul.global > li.active > div > ul > li > ul > li.active > span { transform: rotate(-90deg); }
header.active nav ul.global > li.active > div > ul > li span {
	transform: rotate(90deg);
	+ ul {display: none;}
}
/*main*/
main {
	margin-top: 65px;
	@media screen and (min-width:768px) { margin-top: 115px; }
	 > section {
		padding: 40px 5%;
		@media screen and (min-width:768px) { padding: 60px 0; }
		article {
			max-width: 1200px;
			margin: 0 auto;
		}
		&:last-child {
			padding-bottom: 80px;
			@media screen and (min-width:768px) { padding-bottom: 120px; }
		}
	}
}
main section article {
	color: #666666;
	h2 {
		font-size: 150%;
		color: #26466d;
		font-weight: 700;
		margin-bottom: 20px;
		line-height: 1.3;
		@media screen and (min-width:768px) {
			font-size: 175%;
			margin-bottom: 30px;
		}
	}
	.link {
		font-size: 88.9%;
	}
}
/*footer*/
footer section.bnr {
	background-image: linear-gradient(0, rgba(125,183,42,0.6), rgba(217,232,191,0.6));
	padding: 30px 5%;
	@media screen and (min-width:768px) { 
		padding: 45px 0;
	}
	> ul {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
		@media screen and (min-width:768px) {
			grid-template-columns: repeat(4, 1fr);
			max-width: 1200px;
			width: fit-content;
			margin: 0 auto;
		}
	       li {	display: grid;
	       	grid-template-rows: subgrid;
	       	width: 100%;
		       a {
				background-color: #ffffff;
				border-radius: 20px;
				width: 100%;
				padding: 10px 1em;
				place-content: center;
		        }
	       }
	}
}
footer section.bnr ul li:first-child a {
	padding: 10px 2em;
}
footer section.sitemap {
	background-color: #f5f5eb;
	& article {
		font-size: 87.5%;
		padding: 60px 5%;
		@media screen and (min-width:768px) { 
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 100px 0;
		}
		& div { color: #666666;
			align-items: start;
			&.nav {
				display: none;
				@media screen and (min-width:768px) {
					display: grid;
					grid-template-columns: repeat(2, auto);
					dl:nth-child(2) dd ul {
						column-count: 2;
						gap: 30px;
					}
				}
			}
			h2 {
				width: 260px;
				margin-bottom: 10px;
			}
			ul {
				display: grid;
				gap: 10px;
				grid-template-columns: repeat(3, auto);
				margin-top: 20px;
				width: fit-content;
				li {
					line-height: 1.5;
					margin-bottom: 10px;
					&:first-child {
						grid-column: 1 / 4;
						form {
							display: flex;
							input {
								background-color: #ffffff;
								padding: 5px 1em;
								border-radius: 20px;
								width: 15em;
							}
							button {
								border-radius: 50%;
								line-height: 1;
								background-color: #7db72a;
								display: block;
								margin-left: 5px;
							}
						}
					}
				}
			}
			dl dt {
				color: #669933;
				font-size: 112.5%;
				margin-bottom: 10px;
				a { text-decoration: none; }
			}
			dl dd.news {
				margin-top: 1em;
			}
			dl dd ul {
				margin-top: 0;
				display: block;
			}
		}
	}
}
footer section article div ul {
	li.en a, li.member a {
		background-color: #7db72a;
		color: #ffffff;
		text-decoration: none;
		padding: 0 1.5em;
		border-radius: 13px;
	}
}
footer section article div ul li.line a { width: 2em; }
footer section.copy{
	background-color: #666666;
	color: #ffffff;
	font-size: 75%;
	article {
		padding: 10px 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		@media screen and (min-width:768px) {
			max-width: 1000px;
			margin: 0 auto;
			padding: 10px 0;
		}
		ul {
			display: flex;
			li {
				margin-right: 0.5em;
				a { text-decoration: none; }
				&:not(:first-child) {
					border-left: 1px solid #ffffff;
					padding-left: 0.5em;
				}
			}
		}
	}
}
#cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxTitle {
	display: none !important;
}
#cboxMiddleLeft, #cboxMiddleRight { background: none; }
#cboxOverlay {
	background: none !important;
	background-color: rgba(0,0,0,0.8) !important;
}
#cboxContent { border-radius: 30px; }
#cboxLoadedContent {
	padding: 40px;
	p.dl_url {
		text-align: right;
		a::before {
			content: url(../img/common/ico-dl.svg);
			display: inline-block;
			margin-right: 0.5em;
			width: 1em;
			vertical-align: middle;
		}
	}
}
#cboxClose {
	background-color: rgba(0,0,0,0.5);
	background-image: none;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50%;
	top: 10px !important;
	right: 10px !important;
	&::before, &::after {
		content: "";
		width: 1px;
		height: 40px;
		background-color: #ffffff;
		display: block;
		position: absolute;
		right: 25px;
		top: 5px;
	}
	&::before { transform: rotate(45deg); }
	&::after { transform: rotate(-45deg); }
}