@charset "UTF-8";
/* CSS Document */

/*==========
main
==========*/
.ly_main {
	
}


/*==========
topImage
==========*/
.bl_topImage {
	display: block;
	width: 100%;
	height: 100vh;
	max-height: 830px;
	min-height: 667px;
	min-height: 100dvh;
	background-color: #DFDFDF;
	position: relative;
	overflow: hidden;
	background-color: #dfdfdf;
}


/* slide start */
/*=== 画像の表示エリア ================================= */
.slide {
	position   : relative;
	overflow   : hidden;
	/* 画像のサイズに合わせて変更ください */
	width      : 100%;
	height     : 100%;
	margin     : auto;
	background : #fff;
}
 
/*=== 画像の設定 ======================================= */
.slide img {
	display    : block;
	position   : absolute;
	/* 画像のサイズを表示エリアに合せる */
	width      : inherit;
	height     : inherit;
	object-fit: cover;
	opacity    : 0;
	/*時間 s: 1スライドあたりの表示時間xスライド数*/
	animation  : slideAnime 18s ease infinite;
	/*初期一時停止の場合*/
	animation-play-state: paused;
	/*開始するには animation-play-state: running*/
}
 
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
 
/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
	0%{  opacity: 0; filter: blur(12px);width: 115%;height: 115%;}
	16%{ opacity: 1; filter: none;width: 100%;height: 100%;}
	33%{ opacity: 1; filter: none;}
	49%{ opacity: 0; filter: blur(12px);}
	100{ opacity: 0; filter: blur(12px);}
}
/* /slide end */

/*キャッチブロック*/
.el_top_catch {
	display: block;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	left: 10vw;
	width: calc( 100% - 11vw );
}

/*キャッチ*/
.el_top_catch .line,
body.js_firstLoaded .el_top_catch .line {
	display: block;
	width: 90vw;
	color:#FFF;
	font-family: 'Hind', sans-serif;
	font-size: 130px;
	font-size: min(130px,22vw);
	line-height: 100%;
	/**/
	transition: all 2s;
	letter-spacing: -10px;
	margin-left: -15px;
	opacity: 0;
}
body.js_firstLoaded .el_top_catch .line,
body.js_scrolled .el_top_catch .line {
	letter-spacing: 2px;
	margin-left: 0;
	opacity: 1;
}
/*wrap + 動き*/
.el_top_catch .lineWrap {
	margin-bottom: 10px;
	height: auto;
	width: 0%;
	overflow: hidden;
}
body.js_firstLoaded .el_top_catch .lineWrap,
body.js_scrolled .el_top_catch .lineWrap{
	opacity: 0;
	animation: anime_catch 1s ease 0.5s forwards;
}
@keyframes anime_catch {
	0% {
		opacity: 0;
		width: 0%;
	}
	100% {
		opacity: 1;
		width:100%;
	}
}

/*改行*/
.el_top_catch .line br.is-narrow {
	display: none;
}
@media screen and (max-width: 926px) {
	.el_top_catch .line br.is-narrow {
		display: block;
	}
}

/*キャッチsub*/
.el_top_catch .lineSub,
body.js_firstLoaded .el_top_catch .lineSub {
	display: block;
	font-size:2.2rem;
	color:#FFF;
	width: 90vw;
	/**/
	transition: opacity 2.5s, letter-spacing 2.5s, margin-left 2.5s;
	letter-spacing:-0.25rem;
	margin-left: -15px;
	opacity: 0;
}
body.js_firstLoaded .el_top_catch .lineSub,
body.js_scrolled .el_top_catch .lineSub {
	letter-spacing: 0.25rem;
	margin-left: 0;
	opacity: 1;
}
/*wrap + 動き*/
.el_top_catch .lineSubWrap {
	width: 0;
	height: auto;
	overflow: hidden;
	opacity: 0;
}
body.js_firstLoaded .el_top_catch .lineSubWrap,
body.js_scrolled .el_top_catch .lineSubWrap {
	opacity: 0;
	animation: anime_catch 1s ease 1s forwards;
}
@media screen and (max-width: 800px) {
	.el_top_catch .lineSub {
		letter-spacing: 0.15rem;
	}
}
@media screen and (max-width: 400px) {
	body.js_firstLoaded .el_top_catch .lineSub {
		font-size:2rem;
		letter-spacing: 0.1rem;
	}
}
/*改行*/
.el_top_catch .lineSub br.is-narrow {
	display: none;
}
@media screen and (max-width: 726px) {
	.el_top_catch .lineSub br.is-narrow {
		display: block;
	}
}

/*scroll_arrow*/
.scrollDown {
	position: absolute;
	bottom:40px;
	left:0;right:0;
	margin: auto;
	z-index: 20;
	opacity: 0;
}
body.js_transition-end .scrollDown {
	opacity: 1;
}
body.js_transition-end .scrollDown.is-animated{
	animation-name:anime_scrollDown;
	animation-duration:2s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
}
@keyframes anime_scrollDown {
	0%{
	opacity: 0;
	transform: translate(0, 0);
	}
	50%{
	opacity: 1;
	}
	100%{
	opacity: 0;
	transform: translate(0, 15px);
	}
}


/*==========
column　汎用
==========*/
.bl_column {
	
}
.bl_marginBox {
	display: block;
	padding: 0 2rem;
	max-width: calc(1528px - 4rem);
	text-align: center;
	margin: auto;
}
.bl_columnTitle {
	text-align: center;
	font-family: 'Antonio', sans-serif;
	letter-spacing: 0.25em;
	font-size: 3.5rem;
	line-height: 1.25;
	margin-top: 100px;
}
.bl_columnTitle::after {
	content: "";
	display: block;
	width: 82px;
	height: 6px;
	background: linear-gradient(to right, #8fc322, #00a0e9);
	margin: auto;
	margin: 1.5rem auto 5rem;
}
.bl_columnTitleSub {
	font-size: 1.9rem;
	line-height: 1.8;
	letter-spacing: 0.2em;
	margin-bottom: 2em;
	font-feature-settings: "palt";
}
@media screen and (max-width: 480px) {
	.bl_columnTitleSub {
		font-size: 1.8rem;
		letter-spacing: 0.15em;
	}
}
.bl_marginBox p {
	font-size: 1.5rem;
	line-height: 2.5em;
	letter-spacing: 0.15em;
}
.bl_column .bl_topBgImage {
	
}
.bl_column .bl_bottomImage {
	
}


/*==========
about
==========*/
.bl_about {
}
.bl_bottomImage {
	margin: 100px 0 0 0;
	width: 100%;
}
.bl_about .bl_text br {
	display: block;
}
@media screen and (max-width: 750px) {
	.bl_about .bl_text {
		text-align: justify;
	}
	.bl_about .bl_text br {
		display: none;
	}
}

/*==========
service
==========*/
.bl_service {
	
}
/*3コラム*/
.bl_col3 {
	margin-top: 80px;
	display: flex;
	flex-direction: row;/*横*/
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
}
.bl_col3 .bl_box {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10rem;
	max-width: 436px;
}
.bl_box .el_image {
	display: block;
	margin-bottom: 4rem;
}
.bl_box .el_title {
	display: block;
	font-size: 1.8rem;
	line-height: 1.25;
	letter-spacing: 0.1em;
}
.bl_box .el_title::after {
	content: "";
	display: block;
	width: 7rem;
	height: 6px;
	background: linear-gradient(to right, #8fc322, #00a0e9);
	margin: auto;
	margin: 1.5rem 0 3rem 0;
}
.bl_box .el_text p {
	line-height: 2em;
	letter-spacing: 0;
}
@media screen and (max-width: 1279px) {
	.bl_col3 {
		flex-direction: column;/*縦*/
	}
	.bl_box .el_image {
		display: block;
		margin-bottom: 2rem;
	}
	.bl_box .el_title::after {
		margin-bottom: 2rem;
	}
}


/*==========
company
==========*/
.bl_company {
	position: relative;
	display: block;
	overflow: hidden;
	text-align: center;
}
.bl_topBgImage {
	position: absolute;
	top:0;
	z-index: -1;
	width: 100%;
	height: 280px;
	background-image: url("../images/company01.jpg");
	background-size: cover;
	background-position: center;
}
.bl_company .bl_columnTitle {
	display: block;
	color:#FFF;
	margin-top: 80px;
}
.bl_narrowBoxWrap {
	display: block;
	max-width: 820px;
	margin: 0 auto 0;
}
.bl_narrowBox {
	display: block;
	background-color: #FFF;
	margin: 0 2rem;
	text-align: center;
	overflow: hidden;
}
.bl_company table {
	margin: 5em auto 140px;
	width: 80%;
	line-height: 2.5em;
	font-size: 1.4rem;
}
.bl_company table tr {
	border-bottom: solid #c6c6c6 1px;
}
.bl_company table th {
	border-bottom: solid #c6c6c6 1px;
	width: auto;
	text-align: left;
	padding: 2em;
	letter-spacing: 0.5em;
	vertical-align: top;
	white-space:nowrap;
}
.bl_company table td {
	border-bottom: solid #c6c6c6 1px;
	width: auto;
	text-align: left;
	padding: 2em;
	letter-spacing: 0.2em;
}
@media screen and (max-width: 480px) {
	.bl_company table th {
		padding-left: 0;
		padding-right: 0;
		letter-spacing: 0;
		width: 4em;
	}
	.bl_company table td {
		letter-spacing: 0;
	}
}