@charset "UTF-8";

/* KV */
#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
	#kv:before {
		opacity: 0;
		position: absolute;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: url(../images/top/kv_bg_sp.png) center / cover no-repeat;
		top: 0;
		left: 0;
	}
		#kv.scrollin:before {
			-webkit-animation: bottomIn 0.2s ease-out 0s 1 forwards;
			animation: bottomIn 0.2s ease-out 0s 1 forwards;
		}
	#kv div.txt_slide {
		position: absolute;
		opacity: 0;
		margin: 0;
		padding: 0;
		display: flex;
		top: 4em;
		left: 0;
	}
		#kv div.txt_slide.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.3s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.3s 1 forwards;
		}
		#kv div.txt_slide p {
			margin: 0;
			padding: 0 0 0 0.6em;
			font-size: 34vw;
			line-height: 100%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			white-space: nowrap;
			color: rgba(244,245,249,0.8);
		}
		#kv div.txt_slide p:nth-of-type(odd) {
			padding-top: 0.3em;
			padding-right: 1.2em;
			animation: loop 88s -44s linear infinite;
		}
		#kv div.txt_slide p:nth-of-type(even) {
			padding-top: 1.2em;
			padding-right: 1.2em;
			animation: loop2 88s linear infinite;
		}
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}
	#kv div.kv_in {
		width: 100%;
		margin: 0 auto;
		padding: 20em 3.5% 3em;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		position: relative;
		z-index: 2;
	}
		#kv div.kv_in h2 {
			opacity: 0;
			margin: 0;
			padding: 0.2em;
			font-size: 7.4vw;
			line-height: 150%;
			font-weight: var(--weight-bold2);
			background: rgba(255,255,255,0.25);
		}
			#kv div.kv_in h2 small {
				display: block;
				margin: 0.2em 0 0;
				padding: 0;
				font-size: 4.0vw;
				line-height: 160%;
				font-weight: var(--weight-nomal);
			}
		#kv div.kv_in h3 {
			opacity: 0;
			margin: 1em 0 0;
			padding: 0.2em;
			font-size: 3.3vw;
			line-height: 160%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			color: #0D3383;
			background: rgba(255,255,255,0.25);
		}
		#kv div.kv_in h2.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
		}
		#kv div.kv_in h3.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
		}

/* information */
#information {
	margin: 0 auto;
	padding: 10% 3.5%;
	background: linear-gradient(to right, #0F3381, #0E6D4D);
}
	#information div.info_in {
		margin: 0 auto;
		padding: 0;
	}
		#information div.info_in div.info_cont {
			width: 100%;
			margin: 0;
			padding: 3% 5% 5%;
			color: #fff;
			text-align: left;
			background: rgba(7,152,131,0.2);
			border-radius: 1.0em;
		}
			#information div.info_in div.info_cont h2 {
				margin: 0;
				padding: 0;
				font-size: 6.4vw;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
			}
			#information div.info_in div.info_cont ul {
				margin: 0;
				padding: 0 0 0 0.5em;
				list-style: none;
			}
				#information div.info_in div.info_cont ul li {
					margin: 0.8em 0 0;
					padding: 0;
				}
					#information div.info_in div.info_cont ul li a {
						display: inline-block;
						margin: 0;
						padding: 0;
						font-size: 3.8vw;
						line-height: 180%;
						color: #fff;
						text-decoration: none;
						position: relative;
					}
						#information div.info_in div.info_cont ul li a:after {
							position: absolute;
							content: '';
							display: block;
							width: 1em;
							height: 0.8em;
							margin: 0;
							padding: 0;
							background: url(../images/icon/link_ico.png) center / contain no-repeat;
							bottom: 0.5em;
							right: -1.5em;
						}
						#information div.info_in div.info_cont ul li em span,
						#information div.info_in div.info_cont ul li a span {
							display: block;
							margin: 0;
							padding: 0;
							font-size: 3.7vw;
							line-height: 160%;
							font-family: "Cairo", sans-serif;
							font-optical-sizing: auto;
							font-weight: var(--weight-bold1);
							font-style: italic;
						}
		#information div.info_in a.service {
			display: block;
			width: 100%;
			margin: 8% 0 0;
			padding: 3% 5% 5%;
			text-align: left;
			text-decoration: none;
			border-radius: 1.0em;
			background: url(../images/top/service_bg.png) bottom right / auto 90% no-repeat ,#fff;
		}
			#information div.info_in a.service h2 {
				margin: 0;
				padding: 0;
				font-size: 6.4vw;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				color: #0D3383;
			}
			#information div.info_in a.service p {
				margin: 0.5em 0 0;
				padding: 0;
				font-size: 3.8vw;
				line-height: 200%;
				color: #000;
			}

/* About */
#about {
	margin: 1.5em 3.5% 0;
	padding: 5% 0 0;
	background: #F4F4F5;
	border-radius: 1em;
	position: relative;
}
	#about:before,
	#about:after {
		position: absolute;
		content: '';
		display: block;
		margin: 0;
		padding: 0;
	}
	#about:before {
		width: 71.41%;
		height: 8em;
		background: url(../images/top/about_bg1.png) center / contain no-repeat;
		top: -3px;
		right: 5%;
		z-index: 1;
	}
	#about:after {
		width: 20%;
		height: 4em;
		background: url(../images/top/about_bg2.png) center / contain no-repeat;
		bottom: 0;
		left: 5%;
		z-index: 1;
	}
	#about div.about_in {
		width: 100%;
		margin: 0 auto;
		padding: 0 3.5% 9em;
		text-align: left;
		position: relative;
		z-index: 2;
	}
		#about div.about_in h3 {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
			#about div.about_in h3 p {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				position: relative;
				overflow: hidden;
			}
				#about div.about_in h3 p.scrollin {
					-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
					animation: FadeIN 0.2s ease-out 0s 1 forwards;
				}
				#about div.about_in h3 p span {
					opacity: 0;
					display: inline-block;
					margin: 0;
					padding: 0;
					font-size: 8.2vw;
					line-height: 130%;
					font-family: "Cairo", sans-serif;
					font-optical-sizing: auto;
					font-weight: var(--weight-bold1);
					font-style: normal;
					background: linear-gradient(to right, #0E3383, #13823B);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}
				#about div.about_in h3 p:first-of-type span {
					background: linear-gradient(to right, #0E3383, #104670);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
					#about div.about_in h3 p span.scrollin {
						-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
						animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
					}
				#about div.about_in h3 p:after {
					opacity: 0;
					position: absolute;
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background: linear-gradient(to right, #0E3383, #13823B);
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
				}
				#about div.about_in h3 p:after {
					opacity: 0;
					position: absolute;
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background: linear-gradient(to right, #0E3383, #13823B);
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
				}
					#about div.about_in h3 p:first-of-type:after {
						background: linear-gradient(to right, #0E3383, #104670);
					}
					#about div.about_in h3 p.scrollin:after {
						animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
					}
		#about div.about_in h2 {
			margin: 0.2em 0 0;
			padding: 0;
			font-size: 4.0vw;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
		}
		#about div.about_in div.txt {
			margin: 0;
			padding: 0.5em 0 0;
		}
			#about div.about_in div.txt p {
				margin: 0.5em 0 0;
				padding: 0;
				font-size: 3.8vw;
				line-height: 200%;
			}
			#about div.about_in div.txt h4 {
				margin: 2em 0 0;
				padding: 0;
				font-size: 4.0vw;
				line-height: 180%;
				font-weight: var(--weight-bold2);
			}
		#about div.about_in h5 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 8.2vw;
			line-height: 160%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			text-align: right;
			color: #fff;
			bottom: 0.5em;
			right: 5%;
		}

/* Our Service */
#service {
	width: 100%;
	margin: 0 auto;
	padding: 10% 3.5% 15%;
}
	#service div.ttl {
		margin: 0 auto;
		padding: 0;
		text-align: left;
		position: relative;
	}
		#service div.ttl h3 {
			opacity: 0;
			display: inline-block;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
		}
			#service div.ttl h3.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
				animation: FadeIN 0.2s ease-out 0s 1 forwards;
			}
			#service div.ttl h3 span {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 9.2vw;
				line-height: 130%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#service div.ttl h3 span.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
				animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
			}
		#service div.ttl h3:after {
			opacity: 0;
			position: absolute;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, #0E3383, #13823B);
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
		}
			#service div.ttl h3.scrollin:after {
				animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
			}
		#service div.ttl h2 {
			display: inline-block;
			margin: 0 0 0 1.5em;
			padding: 0;
			font-size: 4.0vw;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
			text-align: left;
			vertical-align: 0.7em;
		}
		#service div.ttl h4 {
			position: absolute;
			margin: auto;
			padding: 0;
			font-size: 30vw;
			line-height: 100%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			color: #FAFAFA;
			white-space: nowrap;
			top: -0.1em;
			left: 50%;
			transform: translateX(-50%);
			-webkit- transform: translateX(-50%);
			z-index: -1;
		}
	#service ul.service_slick {
		width: 94%;
		margin: 10% auto 0;
		padding: 0;
		list-style: none;
		display: flex;
	}
		#service ul.service_slick li.slick-slide {
			width: 20em;
			margin: 0 0.5em;
			padding: 2em 1em 2em;
			border: 3px solid #F3F3F3;
			border-radius: 1em;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
			#service ul.service_slick li.slick-slide img {
				width: 50%;
				height: auto;
			}
			#service ul.service_slick li.slick-slide h5 {
				margin: 1em auto 0;
				padding: 0;
				font-size: 4.6vw;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
				#service ul.service_slick li.slick-slide h5 small {
					display: block;
					margin: 0.2em auto 0;
					padding: 0;
					font-size: 3.6vw;
					line-height: 160%;
				}
			#service ul.service_slick li.slick-slide p {
				margin: 1em auto 0;
				padding: 0;
				font-size: 3.6vw;
				line-height: 200%;
				text-align: left;
			}

/* Blog */
#blog {
	width: 100%;
	margin: 0 auto;
	padding: 25% 3.5% 15%;
	background: #F4F4F5;
	overflow: hidden;
	position: relative;
}
	#blog:before,
	#blog:after {
		position: absolute;
		content: '';
		display: block;
		margin: 0;
		padding: 0;
	}
		#blog:before {
			width: 200%;
			height: 60em;
			background: url(../images/top/blog_bg1.png) top left / contain no-repeat;
			top: 0;
			left: 0;
		}
		#blog:after {
			width: 30%;
			height: 5em;
			background: url(../images/top/blog_bg2.png) center / contain no-repeat;
			bottom: 0;
			right: 5%;
		}
	#blog div.ttl {
		margin: 0 auto;
		padding: 0;
		text-align: left;
	}
		#blog div.ttl h3 {
			opacity: 0;
			display: inline-block;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
		}
			#blog div.ttl h3.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
				animation: FadeIN 0.2s ease-out 0s 1 forwards;
			}
			#blog div.ttl h3 span {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 9.2vw;
				line-height: 130%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#blog div.ttl h3 span.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
				animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
			}
		#blog div.ttl h3:after {
			opacity: 0;
			position: absolute;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, #0E3383, #13823B);
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
		}
			#blog div.ttl h3.scrollin:after {
				animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
			}
		#blog div.ttl h2 {
			display: inline-block;
			margin: 0 0 0 1.5em;
			padding: 0;
			font-size: 4.0vw;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
			text-align: left;
			vertical-align: 0.8em;
		}
	#blog div.blog_cont {
		width: 100%;
		margin: 8% auto 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}
		#blog div.blog_cont ul {
			width: 100%;
			margin: 8% 0 0;
			padding: 2em 1em 2em;
			text-align: left;
			background: rgba(255,255,255,0.9);
			border-radius: 1em;
			list-style: none;
		}
			#blog div.blog_cont ul:first-of-type {
				margin-top: 0;
			}
			#blog div.blog_cont ul h4 {
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 6.4vw;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: italic;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#blog div.blog_cont ul li {
				display: block;
				margin: 0;
				padding: 0;
				border-bottom: 1px solid #E9E9E9;
				position: relative;
			}
				#blog div.blog_cont ul li:first-of-type {
					margin-top: 1em;
					border-top: 1px solid #E9E9E9;
				}
				#blog div.blog_cont ul li:before {
					position: absolute;
					content: '';
					display: block;
					width: 1.8em;
					height: 2.0em;
					background: url(../images/icon/pdf_ico.png) center / contain no-repeat;
					top: 1.2em;
					left: 0;
				}
				#blog div.blog_cont ul li a {
					display: block;
					margin: 0;
					padding: 1.5em 3% 1.5em 3em;
					font-size: 3.6vw;
					line-height: 180%;
					color: #000;
					text-decoration: none;
				}
	#blog div.blog_more {
		width: 100%;
		margin: 8% auto 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}
		#blog div.blog_more a {
			width: 100%;
			height: 4em;
			margin: 0;
			padding: 0;
			font-size: 3.6vw;
			line-height: 120%;
			font-weight: var(--weight-bold2);
			color: #fff;
			text-decoration: none;
			background: #0E3383;
			border-radius: 2em;
			display: flex;
			justify-content: center;
			align-items: center;
		}