@charset "UTF-8";

html {
	font-size:62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 108px;
}
html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
body {
	font-size:1.4rem;
	background-color:#FFF;
}
*, *::before, *::after {
	box-sizing:border-box;
}
.clearfix::after {
	content:'';
	display:block;
	clear:both;
}


header {
	z-index: 10;
	position: fixed;
	top: -108px;
	width:100%;
	height:108px;
	background-color:#ffffffe8;
	transition: .5s;
	.inner {
		max-width:1280px;
		margin:0 auto;
		padding:24px 64px;
		display:flex;
		justify-content: space-between;
		align-items: center;
		h1 img {
			width:267px;
		}
		.head_menu {
			ul {
				display:flex;
				gap: 40px;
				li {
					font-size:16px;
					font-weight:500;
				}
			}
		}
	}
}
header.is-show {
	top: 0;
}


#Hero{
	margin: 0 auto;
	max-width: 100vw;
	position: relative;
	overflow: hidden;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom 10s linear 0s 1 normal both;  
}
@media (max-width: 767px) {
	.swiper-slide img.img1 {
	  object-position: 72% 50%;
	}
	.swiper-slide img.img2 {
	  object-position: 20% 50%;
	}
}

.slide-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	.slide_logo {
		width:330px;
		margin-bottom:32px;
	}
	p {
		text-indent:1rem;
		font-size: 24px;
		font-family: serif;
		font-weight: normal;
		text-shadow: 2px 2px 8px #fff;
		color: #000;
	}
}
.slide-img img{
	object-fit: cover;
	height: 100vh;
  width: 100vw;
}

#Biz_content {
	.content_box {
		padding:120px 0;
		overflow: hidden;
		.inner {
			width:100%;
			max-width:1280px;
			margin:0 auto;
			padding:0px 64px;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.text_box {
				width:61%;
				h2 {
					font-family: "Noto Serif JP", "Yu Mincho","Hiragino Mincho ProN", "MS Mincho", serif;
					font-size:3.2rem;
					font-weight:bold;
					line-height:1.2em;
					letter-spacing: -0.02em;
					margin-bottom:24px;
				}
				p {
					font-size:1.8rem;
					line-height:1.45em;
					letter-spacing: -0.05em;
					color: #565656;
				}
				.link_box {
					text-align: right;
					padding-right: 20px;
					a {
						img {
							width:135px;
							opacity: 0.3;
						}
					}
					a:hover {
						img {
							opacity: 1;
						}
					}
				}
			}
			.img_box {
				width:33%;
				img {
					border-radius: 15px;
				}
			}
		}
		.slidein{
			margin: 50px auto;
			transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
		}
		.slide_left{
			transform: translateX(calc(-50vw - 50%));
		}
		.slide_right{
			transform: translateX(calc(50vw + 50%));
		}
		.show{
			transform: translateX(0);
		}

	}
	.biz_02 {
		background-image:
			linear-gradient(rgba(255, 255, 255,0.8), rgba(255, 255, 255,0.8)),
			url("./../img/biz/bk_02.jpg");
		background-size: cover;
		background-position: center;
		.inner {
			flex-direction: row-reverse;
		}
	}
}

#Company {
	background-image:
		linear-gradient(rgba(255, 255, 255,0.75), rgba(255, 255, 255,0.75)),
		url("./../img/company/bk.jpg");
	background-size: cover;
	background-position: center;
	.inner {
		width:100%;
		max-width:1280px;
		margin:0 auto;
		padding:0px 64px;
	}
	.ttl{
		text-align:center;
		h2 {
			font-size:4rem;
			font-weight:bold;
			line-height:1.2em;
			letter-spacing: -0.02em;
			margin:34px auto;
			display: inline-block;
			text-indent: 51px;
		}
		h2:before {
			content: '';
			display: block;
			width: 51px; 
			height: 48px;
			background-image: url("./../img/logo_mark.png");
			background-size: contain;
			background-repeat:no-repeat;
			position:absolute;
		}
	}
	
	table {
		margin:64px 0 40px 0;
		width:100%;
		font-size:2.4rem;
		line-height:1.96em;
		letter-spacing: -0.05em;
		color: #565656;
		border-top:1px solid #B9B9B9;
		border-right:1px solid #B9B9B9;
		border-left:1px solid #B9B9B9;
		th {
			background-color:#f7dbdb;
			border-bottom:1px solid #B9B9B9;
			text-align:center;
			padding:10px;
		}
		td {
			background-color:#FFFFFF;
			border-bottom:1px solid #B9B9B9;
			padding:10px;
		}
	}
	
	.access_lst {
		padding-bottom:120px;
		.access_box{
			padding:20px 0 40px;
			display:flex;
			justify-content: space-between;
			.map_box {
				width:48%
			}
			.white_box {
				width:48%;
				background-color:#FFFFFF9c;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.text_box {
					text-align:left;
					margin-bottom:48px;
					width:88%;
					h3 {
						font-size:3.2rem;
						font-weight:bold;
						line-height:1.2em;
						letter-spacing: -0.02em;
						margin-bottom:24px;
					}
					p {
						font-size:1.8rem;
						line-height:1.45em;
						letter-spacing: -0.05em;
					}
				}
				.link_box {
					width:100%;
					text-align: center;
					a {
						background-color:#000;
						color:#FFF;
						font-size:1.8rem;
						line-height:1.45em;
						letter-spacing: -0.05em;
						padding:12px 16px;
						border-radius: 12px;
					}
					a:hover {
						opacity: 0.7;
					}
				}
			}
		}
	}
}

#Contact {
	.contact_info_block {
		width: 100%;
		height: 440px;
		position: relative;
		overflow: hidden;
		
		#contact_info_back_img {
			position: absolute;
			top: -1260px;
			width: -webkit-fill-available;
		}
		.contact_info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #ffffffbd;
			text-align:center;
			width:75%;
			max-width:1075px;
			padding-bottom: 20px;
			h2 {
				display:block;
				font-size:4rem;
				font-weight:bold;
				line-height:1.2em;
				letter-spacing: -0.02em;
				margin:20px auto;
				display: inline-block;
				text-indent: 51px;
			}
			h2:before {
				content: '';
				display: block;
				width: 51px; 
				height: 48px;
				background-image: url("./../img/logo_mark.png");
				background-size: contain;
				background-repeat:no-repeat;
				position:absolute;
			}
			p {
				font-size:2.0rem;
				line-height:1.96em;
				letter-spacing: -0.05em;
			}
		}
	}
	
	.contact_form_block {
		padding:60px 0 150px;
		.ok_message {
			width:100%;
			max-width:1152px;
			margin: 20px auto;
			border: 1px solid #0064ff;
			padding: 15px;
			border-radius: 6px;
			color: #0064ff;
			.ttl {
				font-size:18px;
				margin-bottom:5px;
			}
			p {
				line-height: 20px;
			}
		}
		.contact_form {
			width:100%;
			max-width:1280px;
			margin:15px auto 0;
			padding:0px 64px;
			
			.form_item_box {
				border-top:1px solid #B9B9B9;
				display:flex;
				padding:10px 12px;
				.item_ttl {
					width:29%;
					color: #565656;
					font-size:2.4rem;
					line-height:1.96em;
					letter-spacing: -0.05em;
					.batch_required {
						float: right;
						background-color:#EA4335;
						padding:0 1em;
						font-size:2.0rem;
						color:#FFF;
					}
				}
				.item_con {
					width:71%;
					padding-left:10px;
					.zip {
						font-size:2.4rem;
						margin-right:10px;
					}
					input {
						border:1px solid rgba(0, 0, 0, 0.55);
						background-color:rgba(0, 0, 0, 0.05);
						font-size:2.0rem;
						line-height:1.96em;
						letter-spacing: -0.05em;
						color:rgba(0, 0, 0, 0.55);
						padding: 3px 15px;
						margin-right:25px;
					}
					.inp_txt30 {
						width:30%;
					}
					.inp_txt20 {
						width:20%;
					}
					.inp_txt70 {
						width:70%;
					}
					.red {
						font-size:2.0rem;
						line-height:1.96em;
						letter-spacing: -0.05em;
						color:#EA4335;
					}
					select {
						border:1px solid rgba(0, 0, 0, 0.55);
						background-color:rgba(0, 0, 0, 0.05);
						font-size:2.0rem;
						line-height:1.96em;
						letter-spacing: -0.05em;
						color:rgba(0, 0, 0, 0.55);
						padding: 3px 15px;
						margin-bottom:20px;
						width:30%;
					}
					textarea {
						width:85%;
						height:260px;
						border:1px solid rgba(0, 0, 0, 0.55);
						background-color:rgba(0, 0, 0, 0.05);
						font-size:2.0rem;
						line-height:1.96em;
						letter-spacing: -0.05em;
						color:rgba(0, 0, 0, 0.55);
						padding: 3px 15px;
					}
				}
				.rows input {
					margin-bottom:20px;
				}
				.rows .last {
					margin-bottom:0px;
				}
			}
			.form_btn_box {
				margin:20px;
				text-align:center;
				button {
					border:1px solid rgba(0, 0, 0, 0.55);
					border-radius:5px;
					width:330px;
					padding:24px 0;
					.btn_text {
						font-size:2.0rem;
						line-height:1.96em;
						letter-spacing: -0.05em;
						color:rgba(0, 0, 0, 0.55);
					}
					.btn_text:after {
						content: '▶';
						padding-left: 20px;
						color:#EA4335;
					}
				}
				button:hover {
					background-color: #ffeded;
				}
			}
		}
	}
}


footer {
	background-color:#000;
	color:#FFFFFF;
	padding:60px 0 15px;
	.inner {
		width:100%;
		max-width:1280px;
		margin:0 auto;
		padding:0px 64px;
		display:flex;
		align-items: center;
		ul {
			margin-left:20px;
			display:flex;
			gap:25px;
			li a{
				font-size:1.6rem;
				line-height:1.45em;
				letter-spacing: -0.05em;
			}
			li a:hover {
				text-decoration:underline;
			}
		}
	}
	address {
		text-align:center;
		font-size:1.2rem;
		line-height:1.45em;
		letter-spacing: -0.05em;
	}
}


.error {
	color: #d60000;
	font-size: 13px;
	margin-top: 5px;
}

.is-error {
	border: 1px solid #d60000;
	background-color: #fff5f5;
}


@media (max-width: 767px) {
	header {
		top: -120px;
		height:120px;
		.inner {
			flex-direction: column;
			.head_menu {
				ul {
					gap: 20px;
					margin-top: 10px;
				}
			}
		}
	}
	
	#Biz_content {
		.content_box {
			padding:120px 0;
			.inner {
				max-width:767px;
				padding:0px 24px;
				display:flex;
				align-items: center;
				flex-direction: column-reverse;
				.text_box {
					width:100%;
					h2 {
						font-size:1.9rem;
						font-weight:bold;
						line-height:1.2em;
						letter-spacing: -0.02em;
						margin-bottom:24px;
					}
				}
				.img_box {
					width:100%;
				}
			}
		}
		.biz_02 {
			.inner {
				flex-direction: column-reverse;
			}
		}
	}

	#Company {
		.inner {
			padding:0px 24px;
		}
		.ttl{
			h2 {
				font-size:2.8rem;
				font-weight:bold;
				line-height:1.2em;
				letter-spacing: -0.02em;
				margin:34px auto;
				text-indent: 37px;
			}
			h2:before {
				content: '';
				display: block;
				width: 37px; 
				height: 34px;
			}
		}
		
		table {
			tr{
				display: flex;
				flex-direction: column;
			}
		}
		
		.access_lst {
			padding-bottom:120px;
			.access_box{
				padding:20px 0 40px;
				flex-direction: column;
				gap: 32px;
				.map_box {
					width:100%
				}
				.white_box {
					width:100%;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding:25px 0;
					.text_box {
						margin-bottom:40px;
						width:100%;
						padding:0 15px;
						h3 {
							font-size:3.2rem;
							font-weight:bold;
							line-height:1.2em;
							letter-spacing: -0.02em;
							margin-bottom:24px;
						}
					}
					.link_box {
						padding:0 12px;
						a {
							display: block;
							width:100%;
						}
					}
				}
			}
		}
	
	}

#Contact {
	.contact_info_block {
		width: 100%;
		height: 600px;
		position: relative;
		overflow: hidden;
		
		#contact_info_back_img {
			position: absolute;
			top: -573px;
			width: 100%;
		}
		.contact_info {
			width:88%;
			margin:0 auto;
			padding:20px 22px 10px;
			h2 {
				display:block;
				font-size:2.8rem;
				font-weight:bold;
				line-height:1.2em;
				letter-spacing: -0.02em;
				margin:20px auto;
				display: inline-block;
				text-indent: 36px;
			}
			h2:before {
				width: 36px; 
				height: 34px;
			}
			p {
				text-align:left;
				font-size:2.0rem;
				line-height:1.96em;
				letter-spacing: -0.05em;
			}
		}
	}
	.contact_form_block {
		padding:60px 24px 150px;
		.contact_form {
			padding:0px 0px;
			
			.form_item_box {
				flex-direction: column;
				.item_ttl {
					width:100%;
					border-bottom: 1px solid #B9B9B9;
					margin-bottom: 10px;
				}
				.item_con {
					width:100%;
					padding-left:0px;
					display: flex;
					flex-direction: column;
					gap: 12px;
					.inp_txt30 {
						width:70%;
					}
					.inp_txt20 {
						width:70%;
					}
					.inp_txt70 {
						width:100%;
					}
					.red {
						margin-top: -14px;
					}
					textarea {
						width:100%;
					}
				}
				.rows input {
					margin-bottom:20px;
				}
				.rows .last {
					margin-bottom:0px;
				}
			}
		}
	}
}