@charset "utf-8";
body {
	background: #f4f4f4;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
body.active {
	height: auto;
}
header::before {
	height: 885px;
}
header .headerWrap::before {
	height: 885px;
}
/* ====================================================
	小さいブラウザの場合はページを縮小表示
==================================================== */
/*html.smallBrowser {
	overflow-x: hidden;
}*/
html.smallBrowser body {
	zoom: 80%;
	height: 130vh;
}
html.smallBrowser body.active {
	height: auto;
}
html.smallBrowser body .fontWhite .introBtn {
	border: solid 1px #eee;
}
html.smallBrowser body .fontGreen .introBtn {
	border: solid 1px #3ec934;
}
html.smallBrowser body .fontBlack .introBtn {
	border: solid 1px #262626;
}
/* ====================================================
	ローディングアニメーション
==================================================== */
#container {
	display: none;
}
#loading {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}
#loading::before {
	content: "";
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform-origin: left;
	transform: translateX(-100%);
	transition: transform 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	z-index: 998;
}
#loading::after {
	content: "";
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(60deg, #25c037, #5ad230);
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	z-index: 997;
}
.loadingImg {
	position: fixed;
	top: 40%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	z-index: 999;
}
#loading.active::before,
#loading.active::after {
	transform: translateX(100%); 
}
/* ====================================================
	枠
==================================================== */
.commonBox .introText,
.commonBox .introPhoto {
	position: relative;
}
h1 {
	position: absolute;
	width: 100%;
	top: 214px;
}
h1 .ja {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 79px;
	line-height: 1.5;
	font-feature-settings: "palt";
}
h1 .en {
	font-family: futura-pt-bold, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0.1em;
}
/* 日本語テキスト */
h1 .mainVisualTitle.ja span[class^="text_"] {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 113px;
	display: block;
	top: 0;
	left: 0;
}
h1 .mainVisualTitle.ja span.text_second {
	top: 113px;
}
h1 .mainVisualTitle.ja span[class^="text_"] span {
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 0.05em;
	transform: translate(0, 100%);
}
h1 .mainVisualTitle.ja span.text_first span {
	position: absolute;
	top: 0;
	letter-spacing: 0.05em;
	transition: transform 0.6s 0.1s cubic-bezier(0.17, 0.84, 0.82, 1);
}
h1 .mainVisualTitle.ja span.text_second span {
	position: absolute;
	top: 0;
	letter-spacing: 0.1em;
	transition: transform 0.6s 0.2s cubic-bezier(0.17, 0.84, 0.82, 1);
}
#firstView.is-scroll-current h1 .mainVisualTitle.ja span[class^="text_"] span {
	transform: translate(0, 0);
}
/* 英語テキスト */
h1 .mainVisualTitle.en span[class^="text_"] {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 35px;
	display: block;
	top: 271px;
	left: 0;
}
h1 .mainVisualTitle.en span.text_second {
	top: 309px;
}
h1 .mainVisualTitle.en span[class^="text_"] span {
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.6s 0.3s cubic-bezier(0.17, 0.84, 0.82, 1);
	transform: translate(0, 100%);	
}
#firstView.is-scroll-current h1 .mainVisualTitle.en span[class^="text_"] span {
	transform: translate(0, 0);
}

h2 {
	position: relative;
}
h2 .ja {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 25px;
	font-feature-settings: "palt";
	letter-spacing: 0.09em;
	margin-bottom: 20px;
}
h2 .en {
	font-family: futura-pt-bold, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 72px;
	letter-spacing: 0.05em;
	margin-bottom: 55px;
}
.arrow {
	width: 110px;
	height: 3px;
	position: relative;
	overflow: hidden;
	margin-bottom: 49px;
}
.introBtn {
	width: 320px;
	height: 80px;
	box-sizing: border-box;
	border-radius: 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	-webkit-transition: .3s ease;
	transition: .3s ease;
	overflow: hidden;
}
.introBtn::before {
  position: absolute;
  content: '';
	top: 0;
  left: -120%;
  width: 110%;
  height: 100%;
  transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg); 
  -webkit-transition: .3s ease;
	transition: .3s ease;
}
.introBtn:hover::before {
  left: -5%;
}
.introBtn a {
	font-family: futura-pt-condensed, sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 22px;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 3.7;
	letter-spacing: 0.2em;
	position: relative;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}
p.introDescription {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 17px;
	line-height: 1.9;
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
	position: relative;
	margin-bottom: 55px;
}
/* ====================================================
	フォント白
==================================================== */
.fontWhite {
	color: #fff;
}
.fontWhite .arrow {
	background-color: #fff;
}
.fontWhite .introBtn {
	background-color: #eee;
	border: solid 2px #eee;
	position: relative;
}
.fontWhite .introBtn::before {
	background: linear-gradient(60deg, #25c037, #5ad230);
}
.fontWhite .introBtn a {
	color: #35c535;
}
/*.fontWhite .introBtn:hover {
	background-color: transparent;
} */
.fontWhite .introBtn:hover a {
	color: #fff;
} 

/* ====================================================
	フォント緑
==================================================== */
.fontGreen {
	color: #3ec934;
}
.fontGreen .arrow {
	background-color: #3ec934;
}
.fontGreen p.introDescription {
	color: #262626;
}
.fontGreen .introBtn {
	border: solid 2px #3ec934;
}
.fontGreen .introBtn:before {
	background: linear-gradient(60deg, #25c037, #5ad230);
}
.fontGreen .introBtn::before {
	left: -5%;
}
.fontGreen .introBtn:hover::before {
  left: 105%;
}
.fontGreen .introBtn a {
	color: #fff;
}
.fontGreen .introBtn:hover a {
	color: #3ec934;
} 
/* ====================================================
	フォント黒
==================================================== */
.fontBlack .arrow {
	background-color: #262626;
}
.fontBlack .introBtn {
	border: solid 2px #262626;
}
.fontBlack .introBtn a {
	color: #262626;
}
.fontBlack .introBtn::before {
	background-color: #262626;
}
.fontBlack .introBtn:hover a {
	color: #f8f8f8;
} 
/* ====================================================
	firstView
==================================================== */
#firstView {
	position: relative;
}
ul.mainVisual li p {
	position: absolute;
	top: 100px;
	color: #fff;
	font-size: 70px;
	font-weight: bold;
}
ul.mainVisual li p span {
	font-size: 16px;
}
.mainVisualVideo {
	position: relative;
	max-width: 1650px;
	min-width: 1000px;
	width: 100vw;
	height: 835px;
	overflow: hidden;
	margin-left: 230px;
	display: flex;
	justify-content: center;
}
.mainVisualVideo::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #16ab27;
	opacity: 0.2;
}
/*.mainVisualVideo video {
	margin-left: -271px;
	transform: scale(-1, 1);
}*/
.mainVisualLogo {
	position: absolute;
	top: 129px;
	left: 560px;
	opacity: .8;
}
/* ----------------------------------------------------
	bannerEnjoy
---------------------------------------------------- */
#bannerEnjoyGreen {
	height: 250px;
}
#bannerEnjoyWhite {
	height: 300px;
}
.loopSlider {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.loopSlider ul {
	height: 100%;
	display: flex;
	overflow: hidden;
}
.loopSlider ul li {
	width: 1904px;
	height: 184px;
	overflow: hidden;
}
/* ----------------------------------------------------
	policy
---------------------------------------------------- */
#policy .policyBlock {
	width: 100%;
	max-width: 2560px;
	margin: auto;
	overflow: hidden;
}
#policy .introText {
	width: 50%;
}
#policy .introText .introText_inner {
	width: 600px;
	margin-left: auto;
	padding-top: 110px;
}
#policy .introText::before {
	content: "";
	width: 107%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(60deg, #25c037, #5ad230);
}
#policy .introText .introText_inner::before {
	content: "";
	width: 107%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: #f4f4f4;
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#policy .introPhoto {
	width: 50%;
	height: 580px;
	max-height: 580px;
	margin-top: 70px;
	margin-bottom: 70px;
	z-index: 4;
	overflow: hidden;
}
#policy .introPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}
#policy .introPhoto::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;	
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.6s 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#policy .introPhoto::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #5ad230;
	transform-origin: left;
	transform: scaleX(0) translateX(0);
	transition: transform 0.6s 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#policy.is-scroll-current .introText .introText_inner::before,
#policy.is-scroll-current .introPhoto::before,
#policy.is-scroll-current .introPhoto::after {
	transform: scaleX(1) translateX(101%);
}
/* ----------------------------------------------------
	service
---------------------------------------------------- */
#service .commonBox {
	width: 1200px;
	height: 770px;
	margin: auto;
	position: relative;
	z-index: 2;
}
#service .introPhoto {
	width: 600px;
	margin-top: 370px;
/*	margin-top: 95px;*/
	padding-left: 70px;
}
#service .introText {
	width: 600px;
	margin-top: 155px;
	padding-left: 108px;
}
#service .serviceListWrap {
	margin-top: -56px;
}
#service h2 .en {
	letter-spacing: 0.03em;
	margin-bottom: 52px;
}
#service .arrow {
	margin-bottom: 42px;
}
#service p.introDescription {
	margin-bottom: 56px;
	letter-spacing: 0.07em;
}
#service ul.serviceList {
	display: flex;
	width: 100%;
	margin: auto;
	margin-top: 2px;
}
#service ul.serviceList:first-child {
	margin-top: 0;
}
#service ul.serviceList li {
	position: relative;
	z-index: 1;
	width: calc(100% / 3);
	height: 600px;
	background-color: #27c137;
	overflow: hidden;
	clip-path: circle(0 at 0 0);
	-webkit-clip-path: circle(0 at 0 0);
	margin: 0 1px;
}
@keyframes img_wrap_left {
	0% {
		clip-path: circle(0 at 30% 50%);
		-webkit-clip-path: circle(0 at 30% 50%);
	}
	100% {
		clip-path: circle(100% at 30% 50%);
		-webkit-clip-path: circle(100% at 30% 50%);
	}
}
@keyframes img_wrap_right {
	0% {
		clip-path: circle(0 at 70% 50%);
		-webkit-clip-path: circle(0 at 70% 50%);
	}
	100% {
		clip-path: circle(100% at 70% 50%);
		-webkit-clip-path: circle(100% at 70% 50%);
	}
}
#service ul.serviceList li.img_wrap_left {
	animation: img_wrap_left 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
#service ul.serviceList li.img_wrap_right {
	animation: img_wrap_right 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
#service ul.serviceList li img {
	width: 110%;
	height: 110%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(.43,.05,.17,1);
	transform: translateZ(0);
}
#service ul.serviceList li a:hover img {
	transform: translate3d(0,-20px,0) scale(1);
	transition: transform 1s cubic-bezier(.43,.05,.17,1);
}
#service ul.serviceList li .item_wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 24px 10px 32px;
	color: #fff;
	width: 100%;
}
#service ul.serviceList li .item_wrap figure {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(39, 193, 55, .85);/*#27c137*/
	transition: transform 1s cubic-bezier(.43,.05,.17,1);
	transform: translate3d(0,100%,0);
}
#service ul.serviceList li a:hover .item_wrap figure {
	transition: transform .7s cubic-bezier(.43,.05,.17,1);
	transform: translateZ(0);
}
#service ul.serviceList li .item_wrap .item_large {
	font-family: futura-pt-bold, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 23px;
	letter-spacing: 0.12em;
	position: relative;
}
#service ul.serviceList li .item_wrap .item_middle {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 15px;
	letter-spacing: 0.05em;
	position: relative;
	margin-top: 8px;
}

/* ----------------------------------------------------
	company
---------------------------------------------------- */
#company .companyBlock {
	width: 100%;
	max-width: 2560px;
	margin: auto;
	overflow: hidden;
}
#company #map {
	width: 53.6%;
	height: 607px;
	background-color: grey;
	margin-top: 78px;
 }
#company #map::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;	
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#company #map::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #22b433;	
	transform-origin: left;
	transform: scaleX(0) translateX(0);
	transition: transform 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#company .introText {
	width: 50%;
	margin-left: -93px;
}
#company .introText .introText_inner {
	padding-top: 129px;
	padding-left: 91px;
	position: relative;
	z-index: 2;
}
#company .introText::before {
	content: "";
	width: 108%;
	height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(60deg, #25c037,#5ad230);
	z-index: 1;
}
#company .introText .introText_inner::before {
	content: "";
	width: 108%;
	height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	background: #f4f4f4;
	z-index: 1;
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.6s 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#company .introText .introText_inner h2 {
	width: 600px;
}
#company h2 .en {
	letter-spacing: 0.02em;
	margin-bottom: 60px;
}
#company .arrow {
	margin-bottom: 80px;
}
#company .introBtn {
	margin-bottom: 81px;
}
#company.is-scroll-current #map::before,
#company.is-scroll-current #map::after,
#company.is-scroll-current .introText .introText_inner::before {
	transform: scaleX(1) translateX(101%);
}
/* ----------------------------------------------------
	news
---------------------------------------------------- */
#news	{
	height: 510px;
	color: #262626;
	background-color: #f8f8f8;
}
#news	.introText {
	margin-top: 106px;
}
#news	h2 .en {
	font-size: 58px;
	letter-spacing: 0.03em;
	margin-bottom: 37px;
}
#news	.arrow {
	width: 90px;
	margin-bottom: 100px;
}
#news	.introBtn {
	width: 210px;
	height: 62px;
}
#news	.introBtn a {
	font-size: 19px;
	line-height: 3.3;
	letter-spacing: 0.15em;
}
#news	ul.newsList {
	margin-top: 162px;
	margin-left: 124px;
	width: 800px;
	border-top: solid 1px #d2d2d2;
}
#news	ul.newsList li {
	border-bottom: solid 1px #d2d2d2;
}
#news	ul.newsList li a {
	padding: 30px 0 22px;
	display: flex;
	-webkit-transition: .3s ease;
	transition: .3s all ease;
}
#news	ul.newsList li a:hover {
	opacity: 0.5;
}
#news	ul.newsList li a .date {
	font-family: futura-pt, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	color: #262626;
	width: 144px;
	padding-left: 9px;
}
#news	ul.newsList li a .newsTitle {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 17px;
	color: #262626;
	line-height: 0.6;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
}
/* ----------------------------------------------------
	recruit
---------------------------------------------------- */
#recruit {
	height: 790px;
}
#recruit .recruitBlock {
	width: 100%;
	max-width: 2560px;
	margin: auto;
}
#recruit .introPhoto {
	width: 50%;
	height: 560px;
	max-height: 560px;
	margin-top: 100px;
	overflow: hidden;
}
#recruit .introPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}
#recruit .introPhoto::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;	
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#recruit .introPhoto::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(60deg, #25c037,#5ad230);
	transform-origin: left;
	transform: scaleX(0) translateX(0);
	transition: transform 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#recruit .introText {
	width: 50%;
	z-index: 1;
}
#recruit .introText .introText_inner {
	padding-top: 172px;
	padding-left: 92px;
	width: 535px;
	position: relative;
}
#recruit .introText .introText_inner::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f4f4f4;
	z-index: 1;
	transform-origin: left;
	transform: translateX(0);
	transition: transform 0.6s 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
#recruit h2 .en {
	letter-spacing: 0.025em;
	margin-bottom: 50px;
	margin-left: -5px;
}
#recruit .arrow {
	margin-bottom: 42px;
}
#recruit p.introDescription {
	margin-bottom: 88px;
	letter-spacing: 0.1em;
}

#recruit.is-scroll-current .introPhoto::before,
#recruit.is-scroll-current .introPhoto::after,
#recruit.is-scroll-current .introText .introText_inner::before {
	transform: scaleX(1) translateX(101%);
}
/* ====================================================
	contact
==================================================== */
#contact {
	height: 633px;
	background: linear-gradient(60deg, #25c037,#5ad230);
}
#contact .introText {
	margin-top: 176px;
}
#contact h2 .en {
	font-size: 58px;
	letter-spacing: 0.045em;
	margin-bottom: 38px;
}
#contact .arrow {
	width: 90px;
	margin-bottom: 90px;
}
#contact .introPhoto {
	margin-top: 900px;
	margin-left: 134px;
}