@charset "UTF-8";

/* KV */
#kv {
	width: 100%;
	height: 100vh;
	min-height: 550px;
	max-height: 770px;
	margin: 0 auto;
	padding: 0;
	background: url(../images/contents/kv_bg.jpg) center bottom / cover no-repeat;
	div.kv_in {
		max-width: 1200px;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: left;
		position: relative;
		h1 {
			margin: 0;
			padding: 0;
			a {
				display: inline-block;
				margin: 0;
				padding: 0;
				&:hover {
					opacity: 0.7;
				}
			}
		}
		h2 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 38px;
			line-height: 200%;
			font-weight: var(--weight-extrathin);
			font-family: var(--font-min);
			font-style: italic;
			color: #fff;
			bottom: 130px;
			right: 0;
			z-index: 1;
		}
		h3 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 110px;
			line-height: 160%;
			font-weight: var(--weight-extrathin);
			font-family: var(--font-allura);
			white-space: nowrap;
			color: rgba(255,255,255,0.16);
			bottom: 15px;
			right: 0;
			transform: rotate(-5deg);
		}
	}
}

/* 共通 */
div.contents_in {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Introduction */
#introduction {
	margin: 0 auto;
	padding: 90px 0 120px;
	background: url(../images/contents/intro_bg.gif) top left repeat;
	border-top: 1px solid #7e878e;
	h2 {
		margin: 0;
		padding: 0 4%;
		text-align: left;
		span {
			display: inline-block;
			margin: 0;
			padding: 0;
			font-size: 84px;
			line-height: 160%;
			font-weight: var(--weight-bold1);
			font-family: var(--font-min);
			font-style: italic;
			background: linear-gradient(98deg, #825d1e 0%, #825d1e 7.5%, #d0b277 25%, #986d25 42.5%, #986d25 50%, #825d1e 57.5%, #d0b277 75%, #986d25 92.5%, #986d25 100%);
			background-size: 200% auto;
			background-position: right center;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			filter:
				drop-shadow(0 0 5px rgba(255,255,255,1.0))
				drop-shadow(0 0 8px rgba(255,255,255,.9));
			transition: 0.8s linear;
		}
		&.scrollin span {
			background-position: left center;
		}
	}
	div.future {
		margin: 35px 0 0;
		padding: 0 8% 0 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		h3 {
			margin: 0;
			padding: 0.6em 0.8em 0.6em 1.2em;
			font-size: 38px;
			line-height: 160%;
			font-weight: var(--weight-nomal);
			font-family: var(--font-min);
			font-style: italic;
			color: #041943;
			border-top: 1px solid #041943;
			border-bottom: 1px solid #041943;
		}
		p {
			margin: 20px 0 0;
			padding: 0;
			font-size: 16px;
			line-height: 200%;
		}
	}
}


/* Business Content */
#business {
	margin: 0 auto;
	padding: 90px 0 110px;
	background: #041943;
	overflow: hidden;
	position: relative;
	&:before {
		position: absolute;
		content: '';
		display: block;
		width: 865px;
		height: 779px;
		margin: 0;
		padding: 0;
		background: url(../images/contents/business_bg.png) center / contain no-repeat;
		top: 10px;
		right: calc(50% - 100px);
	}
	div.ttl {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 1;
		h2 {
			margin: 0;
			padding: 0;
			span {
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 84px;
				line-height: 160%;
				font-weight: var(--weight-bold1);
				font-family: var(--font-min);
				font-style: italic;
				background: linear-gradient(98deg, #485570 0%, #485570 7.5%, #a1b0cf 25%, #485570 42.5%, #485570 50%, #485570 57.5%, #a1b0cf 75%, #485570 92.5%, #485570 100%);
				background-size: 200% auto;
				background-position: right center;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				transition: 0.8s linear;
			}
			&.scrollin span {
				background-position: left center;
			}
		}
	}
	ul {
		width: 100%;
		margin: 0;
		padding: 20px 0 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-start;
@media screen and (max-width:1160px) { 
		justify-content: center;
}
		li {
			display: inline-block;
			max-width: 390px;
			margin: 95px 0 0 120px;
			padding: 0;
			text-align: left;
			position: relative;
			z-index: 1;
			transition: 0.2s linear;
			&:nth-of-type(1), &:nth-of-type(4) {
				margin-left: 0;
			}
			&:nth-of-type(5) {
				margin-right: 58px;
			}
@media screen and (max-width:1160px) { 
			margin-left: 80px;
			&:nth-of-type(4) {
				margin-left: 80px;
			}
			&:nth-of-type(5) {
				margin-right: 0;
			}
}
@media screen and (max-width:1075px) { 
			margin-left: 40px;
			&:nth-of-type(4) {
				margin-left: 40px;
			}
			&:nth-of-type(5) {
				margin-right: 0;
			}
}
			span {
				position: absolute;
				width: 59px;
				height: 32px;
				margin: 0;
				padding: 0;
				font-size: 14px;
				line-height: 120%;
				color: #f9d8a2;
				font-family: var(--font-min);
				background: url(../images/contents/business_number.png) center / contain no-repeat;
				display: flex;
				justify-content: center;
				align-items: center;
				top: -8px;
				left: -40px;
				z-index: -1;
			}
			h3 {
				display: inline-block;
				width: 287px;
				margin: 0;
				padding: 0 0 10px;
				font-size: 26px;
				line-height: 160%;
				font-weight: var(--weight-nomal);
				font-family: var(--font-min);
				font-style: italic;
				color: #fff;
				border-bottom: 1px solid #fff;
			}
			p {
				margin: 0;
				padding: 8px 0 0 3px;
				font-size: 14px;
				line-height: 180%;
				color: #fff;
			}
		}
	}
}


/* 会社概要 */
#company {
	margin: 0 auto;
	padding: 95px 0 115px;
	h2 {
		margin: 0 auto;
		padding: 0;
		img {
			display: inline-block;
			width: 215px;
			height: auto;
			margin: 0 auto;
			padding: 0;
		}
	}
	dl.company_prof {
		width: 740px;
		margin: 65px auto 45px;
		padding: 0;
		font-size: 16px;
		line-height: 180%;
		text-align: left;
		border-bottom: 1px solid #dbdbdb;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		dt {
			width: 230px;
			margin: 0;
			padding: 20px 55px;
			border-top: 1px solid #dbdbdb;
			&:first-of-type {
				border-top: none;
			}
		}
		dd {
			width: calc(100% - 230px);
			margin: 0;
			padding: 20px 58px 20px 0;
			border-top: 1px solid #dbdbdb;
			&:first-of-type {
				border-top: none;
			}
			.prof_box {
				margin: 15px 0 0;
				padding: 15px 20px 20px;
				font-size: 14px;
				line-height: 160%;
				background: #eff3fb;
				border-radius: 10px;
				h3 {
					margin: 0;
					padding: 0 0 8px;
					font-size: 14px;
					line-height: 160%;
					font-weight: var(--weight-nomal);
					font-family: var(--font-min);
					font-style: italic;
					color: #8f6215;
				}
			}
		}
	}
	div.gmap {
		width: 100%;
		height: 565px;
		margin: 0 auto;
		padding: 0;
		position: relative;
		iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
		}
	}
	div.group_cont {
		max-width: 1140px;
		margin: 135px auto 0;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		transition: 0.2s linear;
		.group_logo {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: 0.2s linear;
			h3 {
				margin: 0;
				padding: 0 0 50px;
				font-size: 37px;
				line-height: 160%;
				font-weight: var(--weight-nomal);
				font-family: var(--font-min);
				font-style: italic;
				color: #081d46;
				white-space: nowrap;
			}
		}
		dl {
			max-width: 740px;
			margin: 0;
			padding: 0;
			font-size: 16px;
			line-height: 180%;
			text-align: left;
			border-bottom: 1px solid #dbdbdb;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			transition: 0.2s linear;
			dt {
				width: 230px;
				margin: 0;
				padding: 20px 55px;
				border-top: 1px solid #dbdbdb;
				&:first-of-type {
					padding-top: 15px;
					border-top: none;
				}
			}
			dd {
				width: calc(100% - 230px);
				margin: 0;
				padding: 20px 15px 20px 0;
				border-top: 1px solid #dbdbdb;
				&:first-of-type {
					padding-top: 15px;
					border-top: none;
				}
				span {
					display: inline-block;
				}
			}
		}
@media screen and (max-width:960px) { 
		flex-direction: column;
		justify-content: center;
		align-items: center;
		dl {
			margin-top: 80px;
		}
}
	}
}

/* Contact */
#contact {
	margin: 0 auto;
	padding: 105px 0 95px;
	background: #041943;
	div.ttl {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		h2 {
			margin: 0;
			padding: 0;
			span {
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 84px;
				line-height: 160%;
				font-weight: var(--weight-bold1);
				font-family: var(--font-min);
				font-style: italic;
				background: linear-gradient(98deg, #485570 0%, #485570 7.5%, #a1b0cf 25%, #485570 42.5%, #485570 50%, #485570 57.5%, #a1b0cf 75%, #485570 92.5%, #485570 100%);
				background-size: 200% auto;
				background-position: right center;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				transition: 0.8s linear;
			}
			&.scrollin span {
				background-position: left center;
			}
		}
	}
	div.contact_cont {
		max-width: 790px;
		margin: 40px auto 0;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		div {
			width: 346px;
			margin: 0;
			padding: 25px 15px 20px;
			color: #fff;
			border: 1px solid #8e9bb6;
			h3 {
				font-size: 16px;
				line-height: 180%;
				font-weight: var(--weight-bold1);
			}
			h4 {
				margin: 5px auto 0;
				padding: 0;
				a {
					display: inline-block;
					margin: 0 auto;
					padding: 0;
					font-size: 32px;
					line-height: 160%;
					color: #fff;
					text-decoration: none;
					font-weight: var(--weight-bold1);
					&.tel {
						pointer-events: none;
						font-family: var(--font-roboto);
						font-variation-settings: "wdth" 100;
						letter-spacing: 0.1em;
					}
				}
			}
			p {
				margin: 0 auto 0;
				padding: 0;
				font-size: 12px;
				line-height: 180%;
			}
		}
	}
}