@charset 'utf-8';

/* common
------------------------------------------------ */
#main { padding-top: 100vh; }

/* top_visual
------------------------------------------------ */
#top_visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; }
.top_visual__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.top_visual__move { position: relative; width: 100%; height: 100%; }
.top_visual--item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.top_visual--item--1 {}
.top_visual--title{ position: absolute; top: 14%; left: 50%; transform: translateX(-50%); margin:10px; width: 80%; text-align: center; }
.top_visual--txt{ position: absolute; bottom: 20.6%; left: 0; width: 100%; font-size: 1.8rem; text-align: center; color:#fff; }
.top_visual--scroll { position: absolute; bottom: 8%; left: 50%; margin-left: -20px; width: 40px; height: 20px; }
.top_visual--scroll { -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite; -moz-animation: ca3_fade_move_down 2s ease-in-out infinite; animation: ca3_fade_move_down 2s ease-in-out infinite; }
.top_visual--scroll a { display: block; width: 100%; height: 100%; background: url(../../img/top/arrow.png) no-repeat center; background-size: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
/*animated scroll arrow animation*/
@-webkit-keyframes ca3_fade_move_down {
	0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes ca3_fade_move_down {
	0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes ca3_fade_move_down {
	0%   { transform:translate(0,-20px); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { transform:translate(0,20px); opacity: 0; }
}

/* top_service
------------------------------------------------ */
.top_service { margin-bottom: 104px; }
.top_service--box { position: relative; margin-bottom: -45px; padding: 46px 48px 52px 122px; width: calc(100% - 20px); max-width: 864px; z-index: 2; }
.top_service--box:after { content: ' '; position: absolute; top: 0; left: 0; transition: ease-in 1s; transform: translateX(-100%); width: 100%; height: 100%; background: url(../../img/top/top_service.jpg) no-repeat left top; background-size: cover; z-index: 1; }
.top_service--box .frame { position: relative; transition: ease-in 1s; z-index: 2; opacity: 0; }
.top_service--box.lazy-item--end:after { transform: translateX(0); }
.top_service--box.lazy-item--end .frame { opacity: 1; }
.top_service--items { position: relative; top: 100px; transition: ease-in 1s; padding: 93px 13px 0; background: var(--color-gray); z-index: 1; opacity: 0; }
.top_service--items.lazy-item--end { top: 0; opacity: 1; }
.top_service--list{
	margin-bottom: 34px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}
.top_service--list li{
	margin:0 35px;
	width: calc(33.33% - 70px);
	text-align: center;
	box-sizing: border-box;
	border: 4px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: linear-gradient(#fff, #fff), linear-gradient(#68E0CF, #209CFF);
}
.top_service--list a{
	display: block;
	width: 100%;
	height: 100%;
    padding: 46px 10px;
	text-decoration: none;
}
.top_service--icon{
	display: block;
	margin-bottom: 30px;
}
.top_service--title-3{
	margin-bottom: 20px;
	font-size: 1.8rem;
	font-weight: bold;
}
.top_service--txt-2{
	font-size: 1.6rem;
}
.top_service--title-1{
	margin-bottom: 30px;
	font-size: 4.8rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.04em;
	color:#fff;
}
.top_service--title-1:after{
	margin-top: 18px;
	display: block;
	content:'';
	height: 4px;
	width: 120px;
	background: #fff;
}
.top_service--title-2{
	margin-bottom: 15px;
	font-size: 2.8rem;
	font-weight: bold;
	color:#fff;
}
.top_service--txt-1{
	font-size: 1.8rem;
	line-height: 1.66;
	color:#fff;
}
.top_btn {
	display: table;
	position: relative;
	margin: 0 auto;
	padding: 21px 0;
	width: 300px;
	background-color: var(--color-primary);
	/*
	background: #209cff;
	background-image: -moz-linear-gradient(45deg, #209cff 0%, #68e0cf 51%, #209cff 100%);
	background-image: -webkit-linear-gradient(45deg, #209cff 0%, #68e0cf 51%, #209cff 100%);
	background-image: linear-gradient(45deg, #209cff 0%, #68e0cf 51%, #209cff 100%);
	background-size: 200% auto;
	*/
	border:none;
	border-radius: 36px;
	text-align: center;
	text-decoration: none;
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	font-weight: bold;
	color:#fff;
	outline: none;
	cursor: pointer;
}
.top_btn:after {
	content: ' ';
	position: absolute;
	top: 50%;
	right: 18px;
	margin-top: -20px;
	width: 36px;
	height: 36px;
	background: url(../../img/share/arrow8.png) no-repeat center center;
	background-size: 12px;
	border: solid #fff 2px;
	border-radius: 50%;
}
.device_click .top_btn:hover { /*background-position: right center;*/ opacity: 1; }

.top_service--btn{
	bottom: -30px;
}

/* top_news
------------------------------------------------ */
.top_news { margin-bottom: 155px; padding: 60px 0 0 0; background: #F2F2F2; }
.top_news--title-1{ position: relative; display: table; margin: 0 auto 40px; padding-bottom: 18px; font-size: 4.8rem; font-weight: bold; line-height: 1; color: #292929; border-bottom: 4px solid #292929; }
.top_news--list { position: relative; padding: 0 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }
.top_news--list li{ margin: 0 10px 20px; width: calc(33.33% - 20px); border:1px solid #A2A2A2; background: #fff; }
.top_news--list a{padding: 18px 11% 25px;text-decoration: none;display: block;}
.top_news--date{ display: inline-block; font-size: 1.6rem; letter-spacing: 0.02em; vertical-align: middle; color: #292929; }
.top_news--cat{ margin-left: 20px; display: inline-block; vertical-align: middle; width: 123px; font-size: 1.6rem; color:#fff; background: var(--color-primary); text-align: center; }
.top_news--title-2{ margin-top: 8px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.02em; line-height: 1.5; color: #292929; }
.top_news--txt{ font-size: 1.6rem; line-height: 1.5; color:#292929; }
.top_news--btn{ bottom: -30px; }

.top_news--title-1{ top: 100px; transition: ease-in 1s; opacity: 0; }
.top_news--list { top: 100px; transition-duration: 1s; transition-delay: .6s; opacity: 0; }

.top_news.lazy-item--end .top_news--title-1 { top: 0; opacity: 1; }
.top_news.lazy-item--end .top_news--list { top: 0; opacity: 1; }

/* top_about-us
------------------------------------------------ */
.top_about-us{position: relative;margin-bottom: 114px;}
.top_about-us--box{ position: relative; float: right; padding: 80px 90px 80px 60px; width: 52%; }
.top_about-us--box::after { content: ''; position: absolute; top: 0; right: 0; width: calc(100% + 60px); height: 100%; background-color: var(--color-primary); z-index: -1; }
.top_about-us--img{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48%; -webkit-box-shadow: 3px 10px 15px 0px rgba(0,0,0,0.16); -moz-box-shadow: 3px 10px 15px 0px rgba(0,0,0,0.16); box-shadow: 3px 10px 15px 0px rgba(0,0,0,0.16); }
.top_about-us--img img { width: 100%; max-width: inherit; }
.top_about-us--title-1{ margin-bottom: 30px; padding-bottom: 20px; position: relative; font-size: 4.8rem; text-align: right; line-height: 1; color: #fff; }
.top_about-us--title-1:after{ width: 120px; position: absolute; right: 0; bottom: 0; content:''; display: block; border-bottom:4px solid #fff; }
.top_about-us--title-2{ margin-bottom: 34px; position: relative; font-size: 36px; font-weight: bold; line-height: 1.61; color:#fff; z-index: 1; }
.top_about-us--txt{ margin-bottom: 42px; float: right; font-size: 1.8rem; line-height: 1.61; width: 89.2%; color:#fff; }
.top_btn_about-us{ float: right; }

.top_about-us--title-1,
.top_about-us--title-2,
.top_about-us--txt,
.top_btn_about-us { transition: ease-in 1s; opacity: 0; }
.top_about-us--img { margin-top: 100px; transition-duration: 1s; transition-delay: .6s; opacity: 0; }

.top_about-us.lazy-item--end .top_about-us--title-1,
.top_about-us.lazy-item--end .top_about-us--title-2,
.top_about-us.lazy-item--end .top_about-us--txt,
.top_about-us.lazy-item--end .top_btn_about-us { opacity: 1; }
.top_about-us.lazy-item--end .top_about-us--img { margin-top: 0; opacity: 1; }

@media screen and (min-width: 769px) {
	.top_btn_about-us { background-color: #fff; color: var(--color-primary); }
	.top_btn_about-us::after { background-image: url(../../img/share/arrow9.png); border-color: var(--color-primary); }
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
	.top_about-us--box { padding-right: 20px; }
}

/* top_clients
------------------------------------------------ */
.top_clients--content .wp-block-list,
.top_clients--list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	margin-bottom: 60px;
}
.top_clients--content .wp-block-list li,
.top_clients--list li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-bottom: 40px;
	text-align: center;
	padding: 16px 10px;
	border: 1px solid #000;
	font-size: 2rem;
}
.top_clients--title-1{
	display: table;
	margin: 0 auto 45px;
	font-size: 4.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	color: #292929;
}
.top_clients--title-1:after{
	content:'';
	display: block;
	width: 120px;
	margin: 15px auto 0;
	border-bottom: 4px solid #292929;
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
	.top_news--cat{
		width: auto;
		min-width: 70px;
		margin-left: 5px;
	}
}

@media screen and (min-width: 769px) {
	.top_visual--item--1 { background-image: url(../../img/top/visual1.jpg); }
	.top_clients--content .wp-block-list li,
	.top_clients--list li { margin: 20px 20px 0 0; width: calc(25% - (20px / (4 / 3))); }
	.top_clients--content .wp-block-list li:nth-of-type(-n+4),
	.top_clients--list li:nth-of-type(-n+4) { margin-top: 0; }
	.top_clients--content .wp-block-list li:nth-of-type(4n),
	.top_clients--list li:nth-of-type(4n) { margin-right: 0; }
}

@media screen and (max-width: 768px) {
	.top_visual--item--1 { background-image: url(../../img/top/visual1-sp.jpg); }
	.top_btn { padding: 15px 0; width: 100%; max-width: 200px; font-size: 1.2rem; 	}
	.top_btn:after { right: 12px; margin-top: -12px; width: 20px; height: 20px; background-size: 6px; border-width: 1px; }
	.top_service{margin-bottom: 60px;}
	.top_service--title-1{
		margin-bottom: 10px;
		font-size: 2.4rem;
	}
	.top_service--list a{
		padding: 25px 10px 10px;
	}
	.top_service--icon{margin-bottom: 15px;}
	.top_service--title-1:after{
		margin-top: 10px;
		width: 60px;
		height: 2px;
	}
	.top_service--title-2{
		margin-bottom: 8px;
		font-size: 1.4rem;
	}
	.top_service--txt-1{
		font-size: 1.2rem;
	}
	.top_service--box{
		padding-top: 32px;
	    padding-bottom: 26px;
	    padding-right: 24px;
	    padding-left: 20px !important;	
	    margin-bottom: -118px;
	}
	.top_service--items{
		padding-top: 135px;
		margin:0 20px;
	}
	.top_service--list{
		margin-bottom: -25px;
		display: block;
	}
	.top_service--list li{
		display: block;
		margin: 0 auto 20px;
		width: 62.5%;
		min-width: 200px;
	}
	.top_service--title-3{margin-bottom: 10px;font-size: 1.2rem;}
	.top_service--txt-2{font-size: 1.1rem;}
	.top_news{
		margin-bottom: 80px;
		padding: 32px 20px 0;
	}
	.top_news--title-1{
		margin-bottom: 21px;
		padding-bottom: 10px;
		font-size: 2.4rem;
		border-bottom: 2px solid #292929;
	}
	.top_news--list{
		display: block;
		padding: 0;
		margin-bottom: -10px;
	}
	.top_news--list li{
		margin: 0 0 10px;
		width: 100%;
	}
	.top_news--list a{
		padding: 15px 17px;
	}
	.top_news--title-2{margin-top: 10px;margin-bottom: 8px;}
	.top_news--date{font-size: 1rem;}
	.top_news--cat{font-size: 1rem;margin-left: 10px;width: auto;min-width:60px;}
	.top_news--txt{font-size: 1rem;}
	.top_news--btn{bottom:-24px;}
	.top_about-us{padding-bottom: 62px;}
	.top_about-us--box{
		padding-top: 35px;
		padding-left: 20px;
		padding-right: 15px;
		padding-bottom: 68px;
		width: calc(100% - 30px);
		position: unset;
		background-color: var(--color-primary);
	}
	.top_about-us--box::after { display: none; }
	.top_about-us--img{
		margin-bottom: -48px;
		position: relative;
		top:-48px;
		transform: none;
		float: left;
		width: calc(100% - 20px);
	}
	.top_about-us--title-1{
		margin-bottom: 19px;
		padding-bottom: 8px;
		font-size: 2.4rem;
	}
	.top_about-us--title-1:after{
		width: 60px;
		border-width: 2px;
	}
	.top_about-us--title-2{
		margin-bottom: 20px;
		float: right;
		width: 70%;
		font-size: 1.4rem;
	}
	.top_about-us--txt{
		margin-bottom: 0;
		width: calc(100% - 5px);
		font-size: 1.2rem;
	}
	.top_btn_about-us{
		position: absolute;
		bottom: 0;
		right: 20px;
		z-index: 1;
	}

	.top_clients--title-1{
		margin-bottom: 35px;
		font-size: 2.4rem;	
	}
	.top_clients--title-1:after{
		margin-top: 8px;
		border-bottom: 2px solid #292929;
	}
	.top_clients--content .wp-block-list,
	.top_clients--list{
		margin: 0 16px 40px;
	}
	.top_clients--content .wp-block-list li,
	.top_clients--list li{
		padding: 10px;
		width: 33.33%;
		font-size: 1.4rem;
	}
	.top_clients--content .wp-block-list li,
	.top_clients--list li { margin: 16px 16px 0 0; width: calc(33.33% - (20px / (3 / 2))); }
	.top_clients--content .wp-block-list li:nth-of-type(-n+3),
	.top_clients--list li:nth-of-type(-n+3) { margin-top: 0; }
	.top_clients--content .wp-block-list li:nth-of-type(3n),
	.top_clients--list li:nth-of-type(3n) { margin-right: 0; }
	.top_clients--content .wp-block-list a,
	.top_clients--list a{
		display: block;
		padding: 0 17.5px;
	}
	.top_visual--txt{
		text-shadow: 0 0 9px #fff;
		/* color: transparent; */
	}
	.top_visual--title{
		width: 90%;
		top: 43%;
		transform: translateY(-50%);
		left: 10px;
	}
	.top_visual--item--1:after{
		width: 12px;
		height: 92px;
		right: 7px;
		bottom: 21px;
		background: url(../../img/top/arrow2.png) no-repeat center;
		-webkit-background-size: contain;
		background-size: contain;
	}
}