@charset "utf-8";

@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* --------------------------------------------------- */
/* Base */
/* --------------------------------------------------- */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 62.5%;
}
body {
	color: #333;
	font-family: "Noto Sans JP", "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background-color: #fff;
	font-size: 1.6em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.7;
	letter-spacing: 0.02em;
	-webkit-text-size-adjust: 100%;
}

img { width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
span {
	display: inline-block;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* --------------------------------------------------- */
/* ローディング */
/* --------------------------------------------------- */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	z-index: 999;
}

@media screen and (max-width: 420px) {
	#loading::before { width: 192px; height: 192px; }
}


/* --------------------------------------------------- */
/* レイアウト */
/* --------------------------------------------------- */
.wrap {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-width: 320px;
	min-height: 100vh;
	background: #fff;
	overflow-x: hidden;
}
.wrap.fixed { position: fixed; }
main {
	flex: 1 0 auto;
	background-color: #fff;
}
.content {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	max-width: 1040px;
}




/* --------------------------------------------------- */
/* ヘッダー */
/* --------------------------------------------------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 1.5em 3%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 777;
}
header h1 {
	position: relative;
	display: inline-block;
	line-height: 1.0;
	z-index: 100;
}
header h1 img {
	width: auto;
	height: 32px;
}
header nav {
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
}
header nav ul {
	display: flex;
	justify-content: flex-end;
	gap: 0 1.5em ;
	font-size: 1.6rem;
}
header nav ul li a { color: #fff; }

@media screen and (max-width: 1024px) {
	header h1 img { height: 26px; }
	header nav ul {
		gap: 0 1.0em ;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
	header nav ul li:first-child { display: none; }
}
@media screen and (max-width: 767px) {
	header { padding: 1.25em 4%; }
	header h1 img { height: 24px; }
	header nav {
		display: flex;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #000;
		transition: all .5s;
		transform: translateY(-102%);
		opacity: 0.0;
	}
	header.onnav nav {
		position: absolute;
		transform: translateY(0);
		opacity: 1.0;
	}
	header nav ul {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.0em 0 ;
		font-size: 1.6rem;
	}
	header nav ul li a { color: #fff; }

}
@media screen and (max-width: 420px) {
	header { padding: 1.0em 4%; }
	header h1 img { height: 21px; }
}


/* --------------------------------------------------- */
/* ナビボタン */
/* --------------------------------------------------- */
#btn-nav {
	position: absolute;
	top: 1.0em;
	right: 3%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	z-index: 888;
}
#btn-nav a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
#btn-nav a span {
	position: absolute;
	top: 15px;
	left: 2px;
	width: 24px;
	height: 2px;
	background-color: rgba(255, 255, 255, 1.0);
}
#btn-nav a::before,
#btn-nav a::after {
	content: '';
	position: absolute;
	left: 2px;
	width: 24px;
	height: 2px;
	background-color: #fff;
	transition: all .5s;
}
#btn-nav a::before { top: 7px; }
#btn-nav a::after { top: 23px; }

.onnav #btn-nav a span { background-color: rgba(255, 255, 255, 0.0); }
.onnav #btn-nav a::before { top: 15px; transform: rotate(135deg); }
.onnav #btn-nav a::after { top: 15px; transform: rotate(-135deg); }
#btn-nav { display: none; }

@media screen and (max-width: 767px) {
	#btn-nav { display: block; }
}
@media screen and (max-width: 420px) {
	#btn-nav { top: 0.85em; }
}


/* --------------------------------------------------- */
/* フッター */
/* --------------------------------------------------- */
footer {
	padding: 4.0em 5% 2.0em;
	background-color: #fff;
}
footer h2 {
	margin: 0 auto 2.0em;
	width: 84%;
	max-width: 420px;
}
footer p {
	color: #999;
	font-size: 1.2rem;
	text-align: center;
}
footer .btns {
	display: flex;
	margin: 0 auto 4.0em;
	width: 100%;
	max-width: 640px;
}
footer .btns a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 50%;
	color: #fff;
	text-align: center;
	transition: all .5s;
}
footer .btns a:hover { opacity: 0.5; }
footer .btns span {
	box-sizing: border-box;
	padding: 4% 2% 4% 54px;
	background-repeat: no-repeat;
	background-size: 48px auto;
	background-position: 0 50%;
	font-size: 2.0rem;
	font-weight: 600;
	line-height: 1.2;
}
footer .btns span em {
	display: block;
	font-size: 150%;
	font-weight: inherit;
}
footer .btns a.btn-line {
	border-radius: 8px 0 0 8px;
	background-color: #06c755;
}
footer .btns a.btn-line span { background-image: url('../image/ic-line.png'); }
footer .btns a.btn-tel {
	border-radius: 0 8px 8px 0;
	background-color: #f7931e;
}
footer .btns a.btn-tel span { background-image: url('../image/ic-tel.png'); }

@media screen and (max-width: 767px) {
	footer { padding: 3.0em 5% 2.0em; }
	footer p { font-size: 1.1rem; }
}
@media screen and (max-width: 640px) {
	footer .btns {
		flex-direction: column;
		gap: 1.0em 0;
		margin: 0 auto 3.0em;
		width: 100%;
		max-width: 420px;
	}
	footer .btns a {
		width: 100%;
		height: 88px;
	}
	footer .btns span { font-size: 1.8rem; }
	footer .btns a.btn-line,
	footer .btns a.btn-tel { border-radius: 8px; }

}
@media screen and (max-width: 420px) {
	footer { padding: 2.0em 5% 1.0em; }
	footer p { font-size: 1.0rem; }
	footer .btns {
		gap: 0.5em 0;
		margin: 0 auto 2.5em;
	}
	footer .btns a {
		height: 80px;
	}
	footer .btns a.btn-line,
	footer .btns a.btn-tel { border-radius: 5px; }
}

/* --------------------------------------------------- */
/* 動画*/
/* --------------------------------------------------- */
#visual {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#visual .mv {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
#visual .video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 105%;
	min-width: 105%;
	min-height: 105%;
	transform: translate(-50%, -50%);
}


#visual.horizon .video { width: 100%; height:auto; }
#visual.portlate .video { width: auto; height:105%; }




/* --------------------------------------------------- */
/* 冒頭 */
/* --------------------------------------------------- */
#intro { padding: 5.0em 0 4.0em; }
#intro h1 {
	margin: 0 auto;
	width: 160px;
	font-size: 1.6rem;
	font-weight: 500;
	text-align: center;
}
#intro h1 span {
	display: block;
	margin-top: 0.3em;
	padding-top: 0.2em;
	border-top: 1px solid #111;
}
#intro h2 {
	margin: 2.0em 0 1.0em ;
	color: #00913a;
	font-size: 3.6rem;
	font-weight: 600;
	letter-spacing: 0.15em;
}
#intro p {
	color: #00913a;
	font-size: 1.6rem;
	line-height: 2.0;
}
#intro p + p { margin-top: 1.5em; }

@media screen and (max-width: 767px) {
	#intro h2 { font-size: 2.6rem; }
}
@media screen and (max-width: 420px) {
	#intro h2 { font-size: 6.5vw; }
}


/* --------------------------------------------------- */
/* 職種 */
/* --------------------------------------------------- */
.job {
	margin: 0 auto;
	padding: 6.0em 0 4.0em;
	width: 100%;
	max-width: 1440px;
}
.job .employment {
	display: flex;
	justify-content: space-between;
}
.job .employment dt {
	position: relative;
	width: 46%;
}
.job .employment dd {
	position: relative;
	width: 50%;
}
.job .employment figure {
	padding-top:400px;
	background-repeat: no-repeat;
	
	background-size: cover;
}
.job .employment h2 span {
	padding-bottom: 0.25em;
	border-bottom: 1px solid #00913a;
	color: #00913a;
	font-size: 2.0rem;
	font-weight: 500;
}
.job .employment h3 {
	margin-top: 0.5em;
	color: #00913a;
	font-size: 3.6rem;
	font-weight: 500;
	letter-spacing: 0.15em;
}
.job .employment h3 span { display: block; }
.job .employment h4 {
	margin: 2.0em 0 1.0em;
	padding: 0.25em 1.0em;
	background-color: #00913a;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
}
.job .employment p {
	padding-left: 1.0em;
	text-indent: -1.0em;
}

@media screen and (max-width: 960px) {
	.job .employment dt { width: 40%; }
	.job .employment dd { width: 56%; }
}
@media screen and (max-width: 767px) {
	.job {
		padding: 4.0em 0 3.0em;
		width: 90%;
	}
	.job .employment {
		flex-direction: column;
		gap: 2.0em 0;
	}
	.job .employment dt,
	.job .employment dd { width: 100%; }
	.job .employment figure { padding-top: 57%; }
	.job .employment h2 { text-align: center; }
	.job .employment h2 span { font-size: 1.8rem; }
	.job .employment h3 {
		margin-top: 1.5em;
		font-size: 2.6rem;
		text-align: center;
	}
	.job .employment h3 span { display: inline-block; }
}
@media screen and (max-width: 420px) {
	.job {
		padding: 2.0em 0 2.0em;
		width: 100%;
	}
	.job .employment {
		flex-direction: column;
		align-items: center;
		gap: 2.0em 0;
	}
	.job .employment dd { width: 90%; }
	.job .employment figure { padding-top: 66.6%; }
	.job .employment h2 { text-align: center; }
	.job .employment h2 span { font-size: 1.8rem; }
	.job .employment h3 {
		margin-top: 1.25em;
		font-size: 6.5vw;
	}
}


/* --------------------------------------------------- */
/* 要項 */
/* --------------------------------------------------- */
.detail {
	padding: 4.0em 0;
	background-color: #fafaf5;
}
.detail h4 {
	font-size: 1.8rem;
	font-weight: 500;
}
.detail h4::before {
	content: '●';
	color: #00913a;
}
.detail h5 { font-weight: 500; }
.detail  dl {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.0em;
	border-top: 1px solid #ddd;
}
.detail  dl dt {
	padding: 1.0em 0;
	width: 180px;
	border-bottom: 1px solid #ddd;
}
.detail  dl dd {
	padding: 1.0em 0;
	width: calc(100% - 180px);
	border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 640px) {
	.detail { padding: 3.0em 0; }
	.detail  dl dt {
		padding: 1.0em 0;
		width: 104px;
	}
	.detail  dl dd {
		padding: 1.0em 0;
		width: calc(100% - 104px);
	}
}
@media screen and (max-width: 420px) {
	.detail { padding: 2.0em 0 3.0em; }
	.detail  dl {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0;
		border-top: none;
	}
	.detail  dl dt {
		padding: 1.0em 0 0.25em;
		width: 100%;
		border-bottom: none;
	}
	.detail  dl dd {
		padding: 0 0 1.0em;
		width: 100%;
	}
	.detail h4 {
		padding: 0.25em 1.0em;
		background-color: #00913a;
		color: #fff;
		font-size: 1.6rem;
	}
	.detail h4::before { display: none; }

}


/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 420px) {
}