@charset "UTF-8";

#wrapper {
	background: #EEEEEE;
	transition: 0.2s linear;
	&.scroll1 {
		background: #fff;
	}
	&.scroll2 {
		background: #222222;
	}
}

/* KV */
#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: #222222;
	transition: 0.8s linear;
	ul.member {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		transition: 0.8s linear;
		li {
			width: calc(100% / 5);
			margin: 0;
			padding: 0;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	div.kv_main {
		width: 100%;
		margin: 0;
		padding: 5% 3% 5%;
		position: relative;
		div {
			width: 100%;
			margin: 0;
			padding: 10% 3% 18%;
			background: #999999;
			border-radius: 1.5em;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			h3 {
				width: 35%;
				margin: 0;
				padding: 0;
				img {
					width: 100%;
					height: auto;
				}
			}
			ul {
				width: 100%;
				margin: 15% 0 0;
				padding: 0;
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;
				li {
					height: 1.8em;
					margin: 0 0.5em;
					padding: 0.2em 0.5em 0 0.3em;
					font-size: 3.1vw;
					line-height: 160%;
					font-weight: var(--weight-bold2);
					font-style: italic;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 1;
					&:before {
						position: absolute;
						content: '';
						display: block;
						margin: 0;
						padding: 0;
						background: #fff;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border-radius: 0.2em;
						transform: skewX(-10deg);
						z-index: -1;
					}
				}
			}
			h2 {
				margin: 8% 0 0;
				padding: 0;
				font-size: 9.2vw;
				line-height: 170%;
				font-weight: var(--weight-bold1);
				letter-spacing: 0.15em;
				strong {
					display: block;
					margin: 0 auto;
					padding: 0;
					font-weight: var(--weight-bold1);
					background: linear-gradient(transparent 55%, #F0FE07 55%, #F0FE07 90%, transparent 90%);
				}
			}
			img.msg {
				opacity: 0;
				position: absolute;
				display: block;
				width: 95%;
				height: auto;
				margin: auto;
				padding: 0;
				top: 26em;
				left: 50%;
				z-index: 5;
			}
			img.msg.scrollin {
				-webkit-animation: ZoomIn_KV 0.2s ease-out 0.5s 1 forwards;
				animation: ZoomIn_KV 0.2s ease-out 0.5s 1 forwards;
			}
		}
	}
	&.scroll {
		background: #EEEEEE;
	}
}

/* OUR VISION */
#index_vision {
	margin: 0 auto;
	padding: 8% 0 10%;
	background: #EEEEEE;
	position: relative;
	z-index: 2;
	div.b_circle1 {
		position: absolute;
		content: '';
		display: none;
		width: 80px;
		height: 200px;
		background: #fff;
		border-radius: 50%;
		top: 320em;
		left: calc(50% - 40px);
		z-index: -1;
		&.on {
			display: block;
		}
		&.none {
			display: none;
		}
	}
	div.slide_img {
		width: 100%;
		overflow: hidden;
		display: flex;
		ul.slider {
			margin: 0;
			padding: 0;
			display: flex;
			animation: scroll-left 30s infinite linear .5s both;
			list-style: none;
			li {
				width: 12em;
				margin: 0;
				padding: 0 5px;
				&:nth-of-type(even) {
					margin-top: 2em;
				}
				img {
					width: 100%;
					height: auto;
					border-radius: 0.5em;
				}
			}
		}
	}
	div.vision_cont {
		margin: 0 auto;
		padding: 15% 3% 0;
		div.txt_cont {
			width: 100%;
			margin: 15% auto 0;
			padding: 0;
			text-align: left;
			color: #1F1F1F;
			div.txt_l {
				width: 100%;
				margin: 0;
				padding: 0;
				font-family: var(--font-Shippori-min);
				position: relative;
				p {
					margin: 1em 0 0;
					padding: 0;
					font-size: 4.6vw;
					line-height: 160%;
					font-weight: var(--weight-nomal);
					&:first-of-type {
						margin-top: 0;
					}
				}
				h3 {
					margin: 0.5em 0 0;
					padding: 0;
					font-size: 5.8vw;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				.vision_img {
					display: block;
					width: 100%;
					height: auto;
					margin: 8% 0 0;
					padding: 0;
					border-radius: 0.5em;
				}
			}
			div.txt_r {
				width: 100%;
				margin: 0;
				padding: 10% 0 0 2%;
				position: relative;
				ul {
					margin: 0;
					padding: 0;
					list-style: none;
					li {
						margin: 0;
						padding: 0 0 0 1.5em;
						font-size: 5.2vw;
						line-height: 200%;
						font-weight: var(--weight-bold1);
						font-family: var(--font-Shippori-min);
						position: relative;
						&:before {
							position: absolute;
							content: '';
							display: block;
							width: 1em;
							height: 2px;
							margin: auto;
							padding: 0;
							background: #999999;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							-webkit- transform: translateY(-50%);
						}
					}
				}
				p {
					margin: 2em 0 0;
					padding: 0;
					font-size: 3.8vw;
					line-height: 200%;
					font-weight: var(--weight-nomal);
					font-family: var(--font-Shippori-min);
				}
				h4 {
					margin: 15% auto 0;
					padding: 0;
					strong {
						display: block;
						margin: 0;
						padding: 0;
						font-size: 8.8vw;
						line-height: 150%;
						font-weight: var(--weight-bold1);
						font-family: var(--font-rock-salt);
						text-shadow: 0.1em 0.1em 0 #F0FE07;
						white-space: nowrap;
					}
					span {
						display: block;
						margin: 0.8em 0 0;
						padding: 0 0 0 0.5em;
						font-size: 8.0vw;
						line-height: 150%;
						font-weight: var(--weight-bold2);
						font-family: var(--font-biz-udpg);
						font-style: italic;
						text-shadow: 0.1em 0.1em 0 #F0FE07;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

/* SERVICE */
#index_service {
	margin: 0 auto;
	padding: 15% 0 15%;
	div.service_cont {
		margin: 0 auto;
		padding: 0 3%;
		position: relative;
		z-index: 2;
		div.txt_img1 {
			margin: 0 auto;
			padding: 10% 0 0;
			text-align: left;
			div.txt {
				margin: 0;
				padding: 0;
				h4 {
					margin: 0;
					padding: 0;
					font-size: 4.8vw;
					line-height: 160%;
					font-weight: var(--weight-bold2);
					color: #CCCCCC;
					strong {
						display: block;
						margin: 0;
						padding: 0;
						font-weight: var(--weight-extrabold1);
						color: #F0FE06;
					}
				}
				h3 {
					margin: 8% 0 0;
					padding: 0;
					font-size: 5.6vw;
					line-height: 200%;
					font-weight: var(--weight-bold2);
					strong {
						display: inline-block;
						padding: 0 5px;
						font-weight: var(--weight-bold2);
						background: linear-gradient(transparent 55%, #F0FE07 55%, #F0FE07 80%, transparent 80%);
					}
				}
				p {
					margin: 5% 0 0;
					padding: 0;
					font-size: 3.8vw;
					line-height: 200%;
				}
			}
			div.img {
				display: inline-block;
				margin: 10% 0 0;
				padding: 0;
				img {
					width: 100%;
					height: auto;
					border-radius: 0.5em;
				}
			}
		}
		div.txt_img2 {
			margin: 15% auto 0;
			padding: 0;
			text-align: left;
			div.txt {
				margin: 0;
				padding: 0;
				h3 {
					margin: 0;
					padding: 0;
					font-size: 5.0vw;
					line-height: 200%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 8% 0 0;
					padding: 0;
					font-size: 3.8vw;
					line-height: 200%;
				}
				div.cont_btn {
					width: 100%;
					margin: 5% 0 0;
					display: flex;
					justify-content: flex-end;
				}
				&.scroll {
					color: #fff;
					div.cont_btn {
						a.cont_btn_in {
						color: #fff;
						&:after {
							background: #fff;
						}
							span {
								background: url(../images/icon/arrow_ico_w.png) center / contain no-repeat;
							}
						}
					}
				}

			}
			div.img {
				margin: 15% 0 0;
				padding: 0;
				position: relative;
				img {
					display: block;
					margin: 0 auto;
					width: 90%;
					height: auto;
				}
				span {
					position: absolute;
					width: 7em;
					height: 7em;
					margin: 0;
					padding: 0;
					font-size: 3.6vw;
					line-height: 160%;
					text-align: center;
					color: #fff;
					background: #222222;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					p {
						margin: 0.4em auto 0;
						padding: 0;
						&:first-of-type {
							margin-top: 0;
						}
					}
					&.circle1 {
						top: 0.3em;
						left: 2%;
					}
					&.circle2 {
						top: -1.5em;
						left: 45%;
					}
					&.circle3 {
						top: 4.5em;
						left: 75%;
					}
					&.circle4 {
						top: 12em;
						left: 48%;
					}
					&.circle5 {
						top: 10em;
						left: 5%;
					}
				}
			}
		}
	}
}

/* MEMBER */
#index_member {
	margin: 0 auto;
	padding: 15% 0 20%;
	position: relative;
	div.member_cont {
		margin: 0 auto;
		padding: 0 0 0 3%;
		position: relative;
		z-index: 2;
		h2.cont_ttl {
			&.scroll {
				strong, span {
					color: #fff;
				}
			}
		}
		img.bg_logo {
			position: absolute;
			display: inline-block;
			width: 70%;
			height: auto;
			top: -4em;
			right: 0;
		}
		div.member_slide {
			margin: 15% 0 0 8%;
			padding: 0;
			ul.slide_cont {
				width: 100%;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					width: 16em;
					margin: 0 1em 0 0;
					position: relative;
					img {
						width: 100%;
						height: auto;
						filter: grayscale(100%);
						border-radius: 15px;
						transition: 0.2s linear;
					}
					/*&.slick-current {
						img {
							filter: grayscale(0%);
						}
					}*/
					p {
						position: absolute;
						margin: 0;
						padding: 0 0.8em 1.2em 0;
						font-size: 3.8vw;
						line-height: 140%;
						text-align: right;
						color: #fff;
						bottom: 0;
						right: 0;
						small {
							display: block;
							margin: 0;
							padding: 0;
							font-size: 3.3vw;
							line-height: 140%;
						}
					}
				}
			}
		}
		div.cont_btn {
			margin: 15% 0 0;
			padding-right: 5%;
			display: flex;
			justify-content: flex-end;
			position: relative;
			z-index: 3;
			a.cont_btn_in {
				color: #fff;
				&:after {
					background: #fff;
				}
				span {
					background: url(../images/icon/arrow_ico_w.png) center / contain no-repeat;
				}
			}
		}

	}
	h3.member_btm {
		/*position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 300px;
		line-height: 120%;
		font-weight: var(--weight-bold2);
		font-family: var(--font-montserrat);
		color: rgba(255,255,255,0.03);
		white-space: nowrap;
		bottom: 0;
		right: 3000px;
		z-index: 2;*/

		position: absolute;
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		overflow: hidden;
		bottom: 1.5em;
		left: 0;
		z-index: 1;
		span {
			display: inline-block;
			margin: 0;
			padding: 0 0 0 1em;
			font-size: 45vw;
			line-height: 120%;
			font-weight: var(--weight-bold2);
			font-family: var(--font-montserrat);
			color: rgba(255,255,255,0.03);
			white-space: nowrap;
			&:nth-child(odd) {
				animation: loop1 50s -25s linear infinite;
			}
			&:nth-child(even) {
				animation: loop2 50s linear infinite;
			}
		}
	}
}
@keyframes loop1 {
    0% {
      transform: translateX(103%);
    }
    to {
      transform: translateX(-103%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-206%);
    }
}

/* CLIENT VOICE */
#index_voice {
	margin: 0 auto;
	padding: 20% 5% 10% 0;
	background: #fff;
	text-align: left;
	position: relative;
	z-index: 4;
	div.voice_cont {
		margin: 0 auto;
		padding: 15% 3% 10% 3%;
		background: #EEEEEE;
		border-radius: 0 0.5em 0.5em 0;
		position: relative;
		div.voice_read {
			margin: 10% 0 0;
			padding: 0;
			p {
				margin: 1em 0 0;
				padding: 0;
				font-size: 3.8vw;
				line-height: 200%;
			}
		}
		h3 {
			margin: 1.5em 0 0;
			padding: 0 0 0 1.5em;
			font-size: 5.4vw;
			line-height: 200%;
			font-weight: var(--weight-bold2);
			position: relative;
			&:before {
				position: absolute;
				content: '';
				display: block;
				width: 1em;
				height: 3px;
				margin: auto;
				padding: 0;
				background: #1F1F1F;
				top: 1em;
				left: 0;
			}
		}
		div.cont_btn {
			margin: 10% 0 0;
			display: flex;
			justify-content: flex-end;
			&.pc {
				display: none;
			}
		}
		div.voice_main {
			margin: 0;
			padding: 0;
			color: #fff;
			div.box {
				width: 98%;
				margin: 10% -10% 0 10%;
				padding: 8%;
				background: #222222;
				border-radius: 2em;
				position: relative;
				&:before {
					position: absolute;
					content: '';
					display: block;
					width: 1em;
					height: 1.5em;
					margin: 0;
					padding: 0;
					background: url(../images/icon/triangle_01.png) center / contain no-repeat;
					transform: rotate(90deg);
					top: -1em;
					left: 10%;
				}
				&:nth-of-type(2) {
					margin-left: 0;
				}
				span {
					position: absolute;
					display: inline-block;
					margin: 0;
					padding: 0;
					font-size: 14.4vw;
					line-height: 100%;
					font-family: var(--font-montserrat-alter);
					font-weight: var(--weight-bold2);
					font-style: italic;
					color: transparent;
					-webkit-text-stroke: 1px #666666;
					top: -0.5em;
					left: 80%;
					z-index: 1;
				}
				h4 {
					margin: 0;
					padding: 0 0 15px;
					font-size: 4.6vw;
					line-height: 200%;
					font-weight: var(--weight-bold1);
				}
				p {
					margin: 1em 0 0;
					padding: 0;
					font-size: 3.6vw;
					line-height: 200%;
				}
				.company {
					margin: 1em 0 0;
					padding: 0;
					text-align: right;
					div {
						display: inline-block;
						margin: 0;
						padding: 0;
						text-align: left;
						h5 {
							display: inline-block;
							margin: 0;
							padding: 0;
							font-size: 3.6vw;
							line-height: 200%;
							font-weight: var(--weight-bold1);
							a {
								display: block;
								margin: 0;
								font-size: 3.3vw;
								line-height: 200%;
								font-weight: var(--weight-bold1);
								word-break: break-all;
							}
						}
						h6 {
							display: inline-block;
							margin: 0;
							padding: 0;
							font-size: 3.4vw;
							line-height: 200%;
							font-weight: var(--weight-nomal);
							small {
								display: inline-block;
								margin: 0 1em 0 0;
								padding: 0.2em 0.5em;
								font-size: 3.4vw;
								line-height: 100%;
								background: #666666;
								border-radius: 0.2em;
							}
						}
					}
				}
			}
		}
	}
}

/* NEWS & COLUMN */
#index_news {
	margin: 0 auto;
	padding: 15% 0 15%;
	background: #fff;
	position: relative;
	z-index: 3;
	div.news_cont {
		margin: 0 auto;
		padding: 0 3%;
		ul.news_slide {
			width: 100%;
			margin: 10% auto 0;
			padding: 0;
			list-style: none;
			li {
				width: 18em;
				margin: 0 1em 0 0;
				padding: 0;
				border-radius: 0.5em;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.img {
					width: 100%;
					height: 10em;
					margin: 0;
					padding: 0;
					overflow: hidden;
					img {
						width: 100%;
						height: 10em;
						object-fit: cover;
					}
				}
				.txt {
					margin: 0;
					padding: 8% 4%;
					text-align: left;
					background: #EEEEEE;
					position: relative;
					flex-grow: 1;
					div.cat {
						position: absolute;
						display: inline-block;
						margin: 0;
						z-index: 1;
						top: -1em;
						left: 3%;
						span {
							display: inline-block;
							margin: 0;
							padding: 0;
							padding: 0.2em 1.2em;
							font-size: 3.4vw;
							line-height: 140%;
							color: #fff;
							position: relative;
							&:before {
								position: absolute;
								content: '';
								display: block;
								margin: 0;
								padding: 0;
								background: #333333;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								border-radius: 5px;
								transform: skewX(-10deg);
								z-index: -1;
							}
						}
					}
					span.date {
						display: block;
						margin: 0;
						padding: 0;
						font-size: 3.6vw;
						line-height: 200%;
						font-weight: var(--weight-extrabold1);
						font-family: var(--font-montserrat);
					}
					div.txt {
						margin: 1em 0 0;
						padding: 0;
						font-size: 3.8vw;
						line-height: 200%;
						p {
							margin: 0;
							padding: 0;
							a {
								color: #333;
							}
						}
					}
					div.tag {
						margin: 1.2em 0 0;
						padding: 0;
						font-size: 3.4vw;
						line-height: 200%;
						span {
							display: inline-block;
							margin: 0 2em 0 0;
							padding: 0;
						}
					}
				}
			}
		}
		div.cont_btn {
			margin: 10% 0 0;
			display: flex;
			justify-content: flex-end;
		}
	}
}