@charset "UTF-8";

/* KV */
#kv {
	width: 100%;
	margin: 3.8em auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
	#kv .kv_l {
		width: 100%;
		height: calc(50vh - 1.9em);
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
		#kv .kv_l img {
			width: 100%;
			height: 50vh;
			object-fit: cover;
		}
	#kv .kv_r {
		width: 100%;
		height: calc(50vh - 1.9em);
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
		div.video-wrapper {
			aspect-ratio: 1 / 1;
			overflow: hidden;
			position: relative;
			width: 100%;
			height: calc(50vh - 2em);
		}
			div.video-wrapper video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
				div.video-wrapper video .video-content {
					margin: 0;
					position: absolute;
					top: 43%;
					left: 50%;
					margin-right: -50%;
					transform: translate(-50%, -50%);
					color: #fff;
					text-align: center;
					z-index: -1;
				}
	
				div.video-wrapper-pc video .video-content p {
					max-width: 600px;
					padding: 0 2rem;
				}
	#kv h2 {
		position: absolute;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 9.2vw;
		line-height: 120%;
		font-weight: var(--weight-nomal);
		color: #fff;
		text-align: left;
		top: 44%;
		left: 3%;
	}
		#kv h2 span {
			display: block;
			margin: 0;
			padding: 0;
			font-size: 6.0vw;
			line-height: 160%;
			font-weight: var(--weight-nomal);
		}
	#kv h3 {
		position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 4.6vw;
		line-height: 108%;
		font-weight: var(--weight-bold2);
		color: #fff;
		text-align: left;
		letter-spacing: 0.1em;
		background: #8a93c8;
		top: 56%;
		left: 3%;
	}
	#kv .scroll {
		position: absolute;
		margin: 0;
		padding: 25px 0;
		bottom: 40px;
		right: 3%;
		z-index: 1;
	}
		#kv .scroll span {
			display: inline-block;
			margin: 0;
			padding: 10px 0;
			font-size: 3.2vw;
			line-height: 120%;
			font-weight: var(--weight-nomal);
			color: #fff;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			position: relative;
		}
		#kv .scroll :before {
			position: absolute;
			content: '';
			width: 1px;
			height: 145px;
			margin: 0;
			padding: 0;
			background: #777fbd;
			top: 0;
			left: -7px;
			z-index: 1;
		}
		#kv .scroll :after {
			position: absolute;
			content: '';
			width: 1px;
			height: 145px;
			margin: 0;
			padding: 0;
			background: #fff;
			top: 0;
			left: -7px;
			z-index: 1;
			-webkit-animation: kv_scroll 4s linear 0s infinite;
			animation: kv_scroll 4s linear 0s infinite;
		}

/* 共通 */
div.cont_ttl {
	margin: 0;
	padding: 0;
	text-align: left;
}
	div.cont_ttl h2 {
		margin: 0;
		padding: 0 0 0 1em;
		font-size: 7.2vw;
		line-height: 120%;
		font-weight: var(--weight-bold2);
		letter-spacing: 0.05em;
		display: flex;
		align-items: flex-end;
		position: relative;
	}
		div.cont_ttl h2:before {
			position: absolute;
			content: '';
			display: block;
			width: 10%;
			height: 1px;
			margin: 0;
			padding: 0;
			background: #8a93c8;
			top: 0.7em;
			left: -5%;
		}
		div.cont_ttl h2 small {
			margin: 0 0 0 0.8em;
			padding: 0 0 0.2em;
			font-size: 3.6vw;
			line-height: 120%;
			font-weight: var(--weight-bold2);
			display: flex;
			align-items: flex-end;
		}
div.cont_txt_jp {
	padding: 0;
	font-size: 3.8vw;
	line-height: 200%;
	font-weight: var(--weight-bold2);
}
div.cont_txt_en {
	padding: 0;
	font-size: 3.5vw;
	line-height: 200%;
	font-weight: var(--weight-bold2);
}
div.contents_in {
	margin: 0 auto;
	padding: 0;
}

/* 企業理念 */
#philosophy {
	margin: 0 auto;
	padding: 20% 3% 0;
	text-align: left;
}
	#philosophy div.philosophy_cont {
		margin: 0 auto;
		padding: 8% 0 0;
	}
	#philosophy div.cont_txt_en {
		margin: 0;
	}
	#philosophy div.cont_txt_en {
		margin: 2em 0 0;
	}
	#philosophy div.img {
		margin: 10% 0 0;
		padding: 0;
	}
		#philosophy div.img img {
			width: 105%;
			height: auto;
		}

/* 事業概要 */
#business {
	margin: 15% auto 0;
	padding: 10% 0 20%;
	text-align: left;
}
	#business div.business_cont {
		margin: 15% auto 0;
		padding: 0;
		text-align: left;
	}
		#business div.business_cont div.cont_box {
			width: 95%;
			margin: 0;
			padding: 0 3% 2em 3%;
			background: #fff;
			position: relative;
			z-index: 1;
		}
			#business div.business_cont div.cont_box .ttl {
				margin: 0;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
				#business div.business_cont div.cont_box .ttl span {
					width: 3em;
					height: 3em;
					margin: 0;
					padding: 0;
					font-size: 3.8vw;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
					#business div.business_cont:nth-of-type(2) div.cont_box .ttl span {
						background: #8a93c8;
						border-radius: 50%;
					}
					#business div.business_cont:nth-of-type(3) div.cont_box .ttl span {
						background: #e5b905;
						border-radius: 50%;
					}
					#business div.business_cont:nth-of-type(4) div.cont_box .ttl span {
						background: #eb5d34;
						border-radius: 50%;
					}
				#business div.business_cont div.cont_box .ttl .sub_ttl {
					width: 84%;
					margin: 0;
					padding: 0;
				}
					#business div.business_cont div.cont_box .ttl .sub_ttl h3 {
						margin: 0;
						padding: 0;
						font-size: 4.4vw;
						line-height: 140%;
						font-weight: var(--weight-bold2);
						white-space: nowrap;
					}
						#business div.business_cont div.cont_box .ttl .sub_ttl h3 small {
							display: block;
							margin: 0;
							padding: 0;
							font-size: 3.4vw;
							line-height: 140%;
							font-weight: var(--weight-bold2);
							white-space: nowrap;
						}
			#business div.business_cont div.cont_box div.cont_txt_jp {
				margin: 2em 0 0;
			}
			#business div.business_cont div.cont_box div.cont_txt_en {
				margin: 1.5em 0 0;
			}
		#business div.business_cont div.cont_img {
			width: 100%;
			margin: -15% 0 0;
			padding: 0;
			text-align: right;
		}
			#business div.business_cont div.cont_img img {
				width: 100%;
				height: auto;
			}

/* 会社概要 */
#company {
	margin: 0 auto;
	padding: 20% 3%;
	text-align: left;
	background: rgba(216,216,216,0.28);
}
	#company dl {
		margin: 10% auto 0;
		padding: 0;
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}
		#company dl dt {
			width: 100%;
			margin: 0;
			padding: 1.5em 0 0.1em;
			font-size: 4.4vw;
			line-height: 160%;
			font-weight: var(--weight-bold2);
			border-top: 1px solid rgba(0,0,0,0.3);
			display: flex;
			align-items: center
		}
			#company dl dt:first-of-type {
				border-top: none;
			}
			#company dl dt p {
				display: inline-block;
				margin: 0;
				padding: 0;
			}
			#company dl dt small {
				display: inline-block;
				margin: 0;
				padding: 0 0 0 1em;
				font-size: 3.4vw;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
		#company dl dd {
			width: 100%;
			margin: 0;
			padding: 0.1em 0 1.5em 1em;
			font-size: 3.6vw;
			line-height: 160%;
			font-weight: var(--weight-bold2);
		}
			#company dl dd small {
				display: block;
				margin: 0;
				font-size: 3.4vw;
				line-height: 160%;
				font-weight: var(--weight-bold2);
				&.side {
					display: inline-block;
					margin-left: 1.5em;
				}
			}
			#company dl dd img {
				width: 90%;
				height: auto;
			}
			#company dl dd ul {
				display: block;
				width: 100%;
				margin: 0;
				padding: 0;
				list-style: none;
			}
				#company dl dd ul li {
					width: 100%;
					margin: 1em 0 0;
					padding: 0 0 0 1.2em;
					position: relative;
				}
					#company dl dd ul li:before {
						position: absolute;
						content: '・';
						display: inline-block;
						margin: 0;
						padding: 0;
						top: 0;
						left: 0;
					}
					#company dl dd ul li:first-of-type {
						margin-top: 0;
					}

/* お問い合わせ */
#contact {
	margin: 0 auto;
	padding: 20% 3% 20%;
}
	div.cont_tbl {
		margin: 15% auto 0;
		padding: 0;
	}
		p.form_top {
			margin: 0;
			padding: 0;
			font-size: 4.0vw;
			line-height: 160%;
			font-weight: var(--weight-bold2);
			text-align: left;
		}
			p.form_top small {
				display: block;
				margin: 1em 0 0;
				font-size: 3.4vw;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
		div.form_cont {
			width: 100%;
			margin: 0 auto;
			padding: 0;
		}
			div.form_cont dl {
				width: 100%;
				margin: 0 auto;
				padding: 5% 0 0;
				font-size: 4.4vw;
				line-height: 180%;
				font-weight: var(--weight-bold1);
			}
				div.form_cont dl dt {
					width: 100%;
					margin: 8% auto 0;
					padding: 0;
					font-weight: var(--weight-bold2);
				}
					div.form_cont dl dt small {
						display: inline-block;
						margin: 0;
						padding: 0 0 0 1em;
						font-size: 3.4vw;
						line-height: 160%;
						font-weight: var(--weight-bold2);
					}
				div.form_cont dl dd {
					width: 100%;
					margin: 3% auto 0;
					padding: 0;
				}
					div.form_cont dl dd input[type=text],
					div.form_cont dl dd input[type=tel],
					div.form_cont dl dd input[type=email] {
						width: 100%;
						height: 3.5em;
						padding: 5% 8%;
						font-size: 3.8vw;
						line-height: 180%;
						font-weight: var(--weight-noaml);
						font-family	: inherit;
						border: 1px solid #b2b2b2;
						border-radius: 1.75em;
					}
					div.form_cont dl dd textarea {
						width: 100%;
						height: 15em;
						padding: 5% 8%;
						font-size: 3.8vw;
						line-height: 180%;
						font-weight: var(--weight-noaml);
						font-family	: inherit;
						border: 1px solid #b2b2b2;
						border-radius: 1.75em;
					}
					div.form_cont input[type=radio] {
						margin: 0 1em 0 0;
						width: 2em;
						height: 2em;
						vertical-align: -1.8em;
					}
					div.form_cont input[type=checkbox] {
						margin: 0 1em 0 0;
						width: 2.4em;
						height: 2.4em;
						border: none;
						background: #e6e6e6;
						vertical-align: -1.5em;
						position: relative;
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
					}
						div.form_cont input[type=checkbox]:checked:before {
							position: absolute;
							content: '';
							top: 0.5em;
							left: 0.8em;
							transform: rotate(50deg);
							width: 8px;
							height: 16px;
							border-right: 2px solid #000;
							border-bottom: 2px solid #000;
						}
					div.form_cont div.privacy_link {
						margin: 5% auto 0;
						padding: 0;
						display: flex;
					}
						div.form_cont div.privacy_link label {
							margin: 0;
							padding: 0;
						}
						div.form_cont div.privacy_link p {
							display: inline-block;
							font-size: 3.9vw;
							line-height: 160%;
							font-weight: var(--weight-bold2);
							text-align: left;
						}
							div.form_cont div.privacy_link p .openModal {
								display: inline-block;
								margin: 0;
								color: #3c51cb;
								text-decoration: underline;
								cursor: pointer;
							}
							div.form_cont div.privacy_link p small {
								display: block;
								margin: 0;
								font-size: 3.4vw;
								line-height: 160%;
								font-weight: var(--weight-bold2);
							}
			#contact_btn {
				width: 100%;
				margin: 0 auto;
				padding: 10% 0 0;
			}
				#contact_btn div.form_btn1,
				#contact_btn div.form_btn2 {
					display: block;
					width: 90%;
					margin: 5px auto;
					transition: 0.2s linear;
				}
					#contact_btn div.form_btn1 button {
						display: block;
						width: 100%;
						height: 4em;
						font-size: 4.0vw;
						line-height: 180%;
						margin: 0 auto;
						padding: 0;
						font-family	: inherit;
						color: #1F1F1F;
						font-weight: var(--weight-bold2);
						background: #fff;
						border: 1px solid #232323;
						border-radius: 2em;
						cursor: pointer;
					}
					#contact_btn div.form_btn2 button {
						display: block;
						width: 100%;
						height: 4em;
						font-size: 4.0vw;
						line-height: 180%;
						margin: 0 auto;
						padding: 0;
						font-family	: inherit;
						color: #1F1F1F;
						font-weight: var(--weight-bold2);
						background: #eee;
						border: 1px solid #232323;
						border-radius: 2em;
						cursor: pointer;
					}
	

#copy {
	width: 100%;
	margin: 0 auto;
	padding: 0 3% 5% 0;
	font-size: 3.4vw;
	line-height: 180%;
	font-family: "Roboto", sans-serif;
	text-align: right;
	font-style: italic;
}