@charset "UTF-8";

/* KV */
#kv {
	width: 100%;
	height: 100vh;
	min-height: 15em;
	max-height: 40em;
	margin: 0 auto;
	padding: 0;
	background: url(../images/contents/kv_bg_sp.jpg) right bottom / cover no-repeat;
	div.kv_in {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: left;
		position: relative;
		h1 {
			margin: 0;
			padding: 0;
			a {
				display: inline-block;
				width: 28%;
				margin: 0;
				padding: 0;
				img {
					width: 100%;
					height: auto;
				}
			}
		}
		h2 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 6.0vw;
			line-height: 200%;
			font-weight: var(--weight-extrathin);
			font-family: var(--font-min);
			font-style: italic;
			color: #fff;
			bottom: 4em;
			right: 0;
			z-index: 1;
		}
		h3 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 12.8vw;
			line-height: 160%;
			font-weight: var(--weight-extrathin);
			font-family: var(--font-allura);
			white-space: nowrap;
			color: rgba(255,255,255,0.16);
			bottom: 0.5em;
			right: 5%;
			transform: rotate(-5deg);
		}
	}
}

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

/* Introduction */
#introduction {
	margin: 0 auto;
	padding: 10% 3.5% 15%;
	background: url(../images/contents/intro_bg.gif) top left repeat;
	border-top: 1px solid #7e878e;
	h2 {
		margin: 0;
		padding: 0;
		text-align: left;
		span {
			display: inline-block;
			margin: 0;
			padding: 0;
			font-size: 8.4vw;
			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: 5% 0 0;
		padding: 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		h3 {
			margin: 0;
			padding: 0.6em 0.8em 0.6em 1.2em;
			font-size: 5.0vw;
			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: 1.0em 0 0;
			padding: 0 0.75em 0;
			font-size: 3.6vw;
			line-height: 200%;
		}
	}
}


/* Business Content */
#business {
	margin: 0 auto;
	padding: 10% 3.5% 15%;
	background: #041943;
	overflow: hidden;
	position: relative;
	&:before {
		position: absolute;
		content: '';
		display: block;
		width: 160%;
		height: 40em;
		margin: 0;
		padding: 0;
		background: url(../images/contents/business_bg.png) center / contain no-repeat;
		top: 10px;
		left: -30%;
	}
	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: 8.4vw;
				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: 110%;
		margin: 0 -10% 0 0;
		padding: 2% 0 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		li {
			display: inline-block;
			width: 85%;
			margin: 9% 0 0;
			padding: 0;
			text-align: left;
			position: relative;
			z-index: 1;
			&:nth-of-type(even) {
				margin-left: 20%;
			}
			&:nth-of-type(5) {
				width: 95%;
			}
			span {
				position: absolute;
				width: 4.8em;
				height: 2em;
				margin: 0;
				padding: 0;
				font-size: 3.0vw;
				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: -0.5em;
				left: -3em;
				z-index: -1;
			}
			h3 {
				display: inline-block;
				width: 11.5em;
				margin: 0;
				padding: 0 0 0.3em;
				font-size: 4.6vw;
				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: 0.5em 0 0;
				font-size: 3.6vw;
				line-height: 180%;
				color: #fff;
			}
		}
	}
}


/* 会社概要 */
#company {
	margin: 0 auto;
	padding: 10% 3.5% 15%;
	h2 {
		margin: 0 auto;
		padding: 0;
		img {
			display: inline-block;
			width: 30%;
			height: auto;
			margin: 0 auto;
			padding: 0;
		}
	}
	dl.company_prof {
		width: 100%;
		margin: 10% auto;
		padding: 0;
		font-size: 3.6vw;
		line-height: 180%;
		text-align: left;
		border-bottom: 1px solid #dbdbdb;
		dt {
			width: 100%;
			margin: 0;
			padding: 3% 0 0;
			border-top: 1px solid #dbdbdb;
			&:first-of-type {
				border-top: none;
			}
		}
		dd {
			width: 100%;
			margin: 0;
			padding: 0 0 3% 0.5em;
			white-space: nowrap;
			.prof_box {
				margin: 0.5em 0 0;
				padding: 3% 5%;
				font-size: 3.4vw;
				line-height: 160%;
				background: #eff3fb;
				border-radius: 0.5em;
				white-space: wrap;
				h3 {
					margin: 0;
					padding: 0 0 0.4em;
					font-size: 3.4vw;
					line-height: 160%;
					font-weight: var(--weight-nomal);
					font-family: var(--font-min);
					font-style: italic;
					color: #8f6215;
				}
			}
		}
	}
	div.gmap {
		width: 100%;
		height: 30em;
		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 {
		margin: 15% auto 0;
		padding: 0;
		.group_logo {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			h3 {
				margin: 0;
				padding: 0 0 1em;
				font-size: 5.6vw;
				line-height: 160%;
				font-weight: var(--weight-nomal);
				font-family: var(--font-min);
				font-style: italic;
				color: #081d46;
				white-space: nowrap;
			}
			img {
				display: inline-block;
				width: 30%;
				height: auto;
				margin: 0 auto;
				padding: 0;
			}
		}
		dl {
			width: 100%;
			margin: 10% auto 0;
			padding: 0;
			font-size: 3.6vw;
			line-height: 180%;
			text-align: left;
			border-bottom: 1px solid #dbdbdb;
			dt {
				width: 100%;
				margin: 0;
				padding: 3% 0 0;
				border-top: 1px solid #dbdbdb;
				&:first-of-type {
					border-top: none;
				}
			}
			dd {
				width: 100%;
				margin: 0;
				padding: 0 0 3% 0.5em;
				white-space: nowrap;
			}
		}
	}
}

/* Contact */
#contact {
	margin: 0 auto;
	padding: 10% 3.5%;
	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: 8.4vw;
				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 {
		margin: 10% auto 0;
		padding: 0;
		div {
			width: 90%;
			margin: 0 auto 0;
			padding: 8% 5%;
			color: #fff;
			border: 1px solid #8e9bb6;
			&:nth-of-type(2) {
				margin-top: 5%;
			}
			h3 {
				font-size: 3.8vw;
				line-height: 180%;
				font-weight: var(--weight-bold1);
			}
			h4 {
				margin: 0.2em auto 0;
				padding: 0;
				a {
					display: inline-block;
					margin: 0 auto;
					padding: 0;
					font-size: 6.2vw;
					line-height: 160%;
					color: #fff;
					text-decoration: none;
					font-weight: var(--weight-bold1);
					&.tel {
						font-family: var(--font-roboto);
						font-variation-settings: "wdth" 100;
						letter-spacing: 0.1em;
					}
				}
			}
			p {
				margin: 0 auto 0;
				padding: 0;
				font-size: 3.2vw;
				line-height: 180%;
			}
		}
	}
}