@charset "UTF-8";

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

/* ヘッダー処理 */
header#top_header {
	top: -100px;
	transition: 0.2s linear;
	&.scroll {
		top: 0;
	}
}

/* KV */
#kv {
	width: 100%;
	height: 940px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	background: #222222;
	transition: 0.2s linear;
	overflow: hidden;
	ul.member {
		width: 300px;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;
		z-index: 1;
		transition: 0.2s linear;
		li {
			width: 300px;
			height: calc(100% / 5);
			margin: 0;
			padding: 0;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&:after {
			position: absolute;
			content: '';
			display: block;
			width: 300px;
			height: 441px;
			margin: 0;
			padding: 0;
			background: url(../images/top/kv_logo_bg.jpg) center / contain no-repeat;
			bottom: -350px;
			left: 0;
			z-index: -1;
		}
	}
	div.kv_main {
		width: calc(100% - (300px * 2));
		height: 940px;
		margin: 0;
		padding: 40px 20px 80px;
		position: relative;
		transition: 0.2s linear;
		div.kv_bg_change {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 60px 10px;
			background: #999999;
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			transition: background .4s ease-out;
			h3 {
				margin: 0;
				padding: 0;
			}
			ul {
				width: 100%;
				margin: 75px 0 0;
				padding: 0;
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;
				li {
					height: 40px;
					margin: 0 5px;
					padding: 0 25px;
					font-size: 17px;
					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: 5px;
						transform: skewX(-10deg);
						z-index: -1;
					}
				}
			}
			h2 {
				margin: 30px 0 0;
				padding: 0;
				font-size: 64px;
				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;
				margin: auto;
				padding: 0;
				top: 610px;
				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: 25px 0 100px;
	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: 6000px;
		left: calc(50% - 40px);
		z-index: -1;
		&.on {
			display: block;
		}
		&.scroll {
			background: #222222;
		}
		&.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: calc((100% / 5) - 10px);
				margin: 0;
				padding: 0 5px;
				&:nth-of-type(even) {
					margin-top: 30px;
				}
				img {
					border-radius: 15px;
				}
			}
		}
	}
	div.vision_cont {
		max-width: 1320px;
		margin: 0 auto;
		padding: 120px 10px 0;
		div.txt_cont {
			width: 100%;
			margin: 100px auto 0;
			padding: 0;
			text-align: left;
			color: #1F1F1F;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			div.txt_l {
				width: 620px;
				margin: 0;
				padding: 0 0 710px;
				font-family: var(--font-Shippori-min);
				position: relative;
				p {
					margin: 30px 0 0;
					padding: 0;
					font-size: 28px;
					line-height: 160%;
					font-weight: var(--weight-nomal);
					&:first-of-type {
						margin-top: 0;
					}
				}
				h3 {
					margin: 10px 0 0;
					padding: 0;
					font-size: 35px;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				.vision_img {
					position: absolute;
					margin: 0;
					padding: 0;
					border-radius: 15px;
					bottom: 0;
					right: 80px;
				}
			}
			div.txt_r {
				width: 590px;
				margin: 0;
				padding: 125px 0 0;
				position: relative;
				ul {
					margin: 0;
					padding: 0;
					list-style: none;
					li {
						margin: 0;
						padding: 0 0 0 65px;
						font-size: 32px;
						line-height: 200%;
						font-weight: var(--weight-bold1);
						font-family: var(--font-Shippori-min);
						position: relative;
						&:before {
							position: absolute;
							content: '';
							display: block;
							width: 35px;
							height: 2px;
							margin: auto;
							padding: 0;
							background: #999999;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							-webkit- transform: translateY(-50%);
						}
					}
				}
				p {
					margin: 50px 0 0;
					padding: 0;
					font-size: 24px;
					line-height: 200%;
					font-weight: var(--weight-nomal);
					font-family: var(--font-Shippori-min);
				}
				h4 {
					margin: 120px -85px 0 -75px;
					padding: 0;
					strong {
						display: block;
						margin: 0;
						padding: 0;
						font-size: 60px;
						line-height: 150%;
						font-weight: var(--weight-bold1);
						font-family: var(--font-rock-salt);
						text-shadow: 5px 5px 0 #F0FE07;
						white-space: nowrap;
					}
					span {
						display: block;
						margin: 25px 0 0;
						padding: 0 0 0 50px;
						font-size: 60px;
						line-height: 150%;
						font-weight: var(--weight-bold2);
						font-family: var(--font-biz-udpg);
						font-style: italic;
						text-shadow: 5px 5px 0 #F0FE07;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

/* SERVICE */
#index_service {
	margin: 0 auto;
	padding: 60px 0 160px;
	div.service_cont {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 10px;
		position: relative;
		z-index: 3;
		div.txt_img1 {
			margin: 20px auto 0;
			padding: 135px 0 0;
			text-align: left;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;
			div.txt {
				width: 710px;
				margin: 0;
				padding: 0;
				h4 {
					margin: 0;
					padding: 0;
					font-size: 28px;
					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: 40px 0 0;
					padding: 0;
					font-size: 40px;
					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 {
					width: 600px;
					margin: 35px 0 0;
					padding: 0;
					font-size: 17px;
					line-height: 200%;
				}
			}
			div.img {
				position: absolute;
				display: inline-block;
				margin: 0;
				padding: 0;
				top: 0;
				left: calc(50% + 100px);
				img {
					border-radius: 15px;
				}
			}
		}
		div.txt_img2 {
			margin: 160px auto 0;
			padding: 0;
			text-align: left;
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: flex-start;
			div.txt {
				width: 610px;
				margin: 0;
				padding: 0;
				h3 {
					margin: 0;
					padding: 0;
					font-size: 30px;
					line-height: 200%;
					font-weight: var(--weight-bold2);
				}
				p {
					width: 600px;
					margin: 60px 0 0;
					padding: 0;
					font-size: 17px;
					line-height: 200%;
				}
				div.cont_btn {
					width: 600px;
					margin: 85px 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, url(../images/icon/arrow_ico_b.png) center / contain no-repeat;
							}
							&:hover {
								color: #202020;
								span {
									background: url(../images/icon/arrow_ico_b.png) center / contain no-repeat;
								}
							}
						}
					}
				}
			}
			div.img {
				width: 600px;
				margin: 0 0 0 -10px;
				padding: 15px 0 0;
				position: relative;
				span {
					position: absolute;
					width: 140px;
					height: 140px;
					margin: 0;
					padding: 0;
					font-size: 17px;
					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: 9px auto 0;
						padding: 0;
						&:first-of-type {
							margin-top: 0;
						}
					}
					&.circle1 {
						top: 25px;
						left: 55px;
					}
					&.circle2 {
						top: -10px;
						left: 305px;
					}
					&.circle3 {
						top: 170px;
						left: 415px;
					}
					&.circle4 {
						top: 300px;
						left: 220px;
					}
					&.circle5 {
						top: 210px;
						left: -20px;
					}
				}
			}
		}
	}
}

/* MEMBER */
#index_member {
	margin: 0 auto;
	padding: 160px 0 150px;
	position: relative;
	div.member_cont {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 10px;
		position: relative;
		z-index: 2;
		h2.cont_ttl {
			&.scroll {
				strong, span {
					color: #fff;
				}
			}
		}
		img.bg_logo {
			position: absolute;
			display: inline-block;
			top: -420px;
			left: calc(50% + 215px);
		}
		div.member_slide {
			width: 1500px;
			margin: 100px -280px 0 0;
			padding: 0 0 0 100px;
			ul.slide_cont {
				width: 1500px;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					width: 340px;
					margin: 0 40px 0 0;
					position: relative;
					img {
						width: 100%;
						height: auto;
						filter: grayscale(100%);
						border-radius: 15px;
						transition: 0.2s linear;
					}
					&:hover {
						img {
							filter: grayscale(0%);
						}
					}
					/*&.slick-current {
						img {
							filter: grayscale(0%);
						}
					}*/
					p {
						position: absolute;
						margin: 0;
						padding: 0 1.5em 1.2em 0;
						font-size: 20px;
						line-height: 140%;
						text-align: right;
						color: #fff;
						bottom: 0;
						right: 0;
						small {
							display: block;
							margin: 0;
							padding: 0;
							font-size: 16px;
							line-height: 140%;
						}
					}
				}
			}
		}
		div.cont_btn {
			width: 100%;
			margin: 110px 0 0;
			display: flex;
			justify-content: flex-end;
			a.cont_btn_in {
				color: #fff;
				&:after {
					background: #fff;
				}
				span {
					background: url(../images/icon/arrow_ico_w.png) center / contain no-repeat, url(../images/icon/arrow_ico_b.png) center / contain no-repeat;
				}
				&:hover {
					color: #202020;
					span {
						background: url(../images/icon/arrow_ico_b.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: 60px;
		left: 0;
		z-index: 1;
		span {
			display: inline-block;
			margin: 0;
			padding: 0 0 0 1em;
			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;
			&: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(-206%);
    }
    to {
      transform: translateX(0);
    }
}

/* CLIENT VOICE */
#index_voice {
	margin: 0 auto;
	padding: 150px 20px 60px 0;
	background: #fff;
	text-align: left;
	position: relative;
	z-index: 3;
	div.voice_cont {
		max-width: 1240px;
		margin: 0 auto;
		padding: 110px 10px 200px;
		background: #EEEEEE;
		border-radius: 0 20px 20px 0;
		position: relative;
		&:before {
			position: absolute;
			content: '';
			display: block;
			width: 1000px;
			height: 100%;
			margin: 0;
			padding: 0;
			background: #EEEEEE;
			top: 0;
			left: -1000px;
			z-index: -1;
		}
		h2.cont_ttl {
			margin-left: -80px;
		}
@media screen and (max-width:1440px) {
		h2.cont_ttl {
			margin-left: 0;
		}
}
		div.voice_read {
			width: 460px;
			margin: 80px 0 0;
			padding: 0;
			p {
				margin: 15px 0 0;
				padding: 0;
				font-size: 17px;
				line-height: 200%;
			}
		}
		h3 {
			margin: 55px 0 0;
			padding: 0 0 0 75px;
			font-size: 30px;
			line-height: 200%;
			font-weight: var(--weight-bold2);
			position: relative;
			&:before {
				position: absolute;
				content: '';
				display: block;
				width: 30px;
				height: 3px;
				margin: auto;
				padding: 0;
				background: #1F1F1F;
				top: 28px;
				left: 30px;
			}
		}
		div.cont_btn {
			width: 460px;
			margin: 100px 0 0;
			display: flex;
			justify-content: flex-end;
			&.sp {
				display: none;
			}			
		}
		&.scroll {
			color: #fff;
		}
		div.voice_main {
			position: absolute;
			display: inline-block;
			margin: 0;
			padding: 0;
			color: #fff;
			top: 200px;
			left: calc(50% - 50px);
			transition: 0.2s linear;
			div.box {
				width: 725px;
				margin: 0;
				padding: 60px 10px 40px 95px;
				background: #222222;
				border-radius: 90px 0 0 90px;
				position: relative;
				transition: 0.2s linear;
				&:before {
					position: absolute;
					content: '';
					display: block;
					width: 14px;
					height: 21px;
					margin: 0;
					padding: 0;
					background: url(../images/icon/triangle_01.png) center / contain no-repeat;
					top: calc(50% - 10px);
					left: -14px;
				}
				&:nth-of-type(2) {
					margin-top: 75px;
					margin-left: 100px;
				}
				&:after {
					position: absolute;
					content: '';
					display: block;
					width: 1000px;
					height: 100%;
					margin: 0;
					padding: 0;
					background: #222222;
					top: 0;
					right: -1000px;
				}
				span {
					position: absolute;
					display: inline-block;
					margin: 0;
					padding: 0 35px;
					font-size: 74px;
					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: -35px;
					left: 605px;
					z-index: 1;
				}
				h4 {
					margin: 0;
					padding: 0 0 15px;
					font-size: 22px;
					line-height: 200%;
					font-weight: var(--weight-bold1);
				}
				p {
					width: 99%;
					margin: 15px 0 0;
					padding: 0;
					font-size: 15px;
					line-height: 200%;
				}
				.company {
					margin: 8px 0 0;
					padding: 0 10px 0 0;
					text-align: right;
					div {
						display: inline-block;
						margin: 0;
						padding: 0;
						text-align: right;
						h5 {
							display: inline-block;
							margin: 0;
							padding: 0;
							font-size: 17px;
							line-height: 200%;
							font-weight: var(--weight-bold1);
							a {
								display: inline-block;
								margin: 0 0 0 1.2em;
								font-size: 14px;
								line-height: 200%;
								font-weight: var(--weight-bold1);
							}
						}
						h6 {
							display: inline-block;
							margin: 0;
							padding: 0;
							font-size: 14px;
							line-height: 200%;
							font-weight: var(--weight-nomal);
							small {
								display: inline-block;
								margin: 0 10px 0 0;
								padding: 0.2em 0.5em;
								font-size: 14px;
								line-height: 100%;
								background: #666666;
								border-radius: 4px;
							}
						}
					}
				}
			}
		}
@media screen and (max-width:1560px) {
		div.voice_main {
			left: calc(50% - 100px);
			div.box {
				&:nth-of-type(2) {
					margin-left: 5px;
				}
			}
		}
}
	}
}

/* NEWS & COLUMN */
#index_news {
	margin: 0 auto;
	padding: 200px 0 150px;
	background: #fff;
	position: relative;
	z-index: 1;
	div.news_cont {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 10px;
		ul.news_slide {
			width: 100%;
			margin: 80px auto 0;
			padding: 0;
			list-style: none;
			display: flex;
			li {
				width: 30.5%;
				margin: 0;
				padding: 0;
				border-radius: 15px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				&:nth-of-type(2) {
					margin: 0 4.25%;
				}
				.img {
					width: 100%;
					height: 247px;
					margin: 0;
					padding: 0;
					overflow: hidden;
					img {
						width: 100%;
						height: 247px;
						object-fit: cover;
					}
				}
				.txt {
					margin: 0;
					padding: 40px 35px;
					text-align: left;
					background: #EEEEEE;
					position: relative;
					flex-grow: 1;
					div.cat {
						position: absolute;
						display: inline-block;
						margin: 0;
						z-index: 1;
						top: -15px;
						left: 30px;
						span {
							display: inline-block;
							margin: 0;
							padding: 0;
							padding: 5px 20px;
							font-size: 15px;
							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: 18px;
						line-height: 200%;
						font-weight: var(--weight-extrabold1);
						font-family: var(--font-montserrat);
					}
					div.txt {
						margin: 25px 0 0;
						padding: 0;
						font-size: 16px;
						line-height: 200%;
						p {
							margin: 0;
							padding: 0;
							a {
								color: #333;
							}
						}
					}
					div.tag {
						margin: 25px 0 0;
						padding: 0;
						font-size: 14px;
						line-height: 200%;
						span {
							display: inline-block;
							margin: 0 2em 0 0;
							padding: 0;
						}
					}
				}
			}
		}
		div.cont_btn {
			width: 100%;
			margin: 65px 0 0;
			display: flex;
			justify-content: flex-end;
		}
	}
}