@charset "UTF-8";

/* ---------------------------------------
  about
-----------------------------------------*/

/* common
--------------------------------*/
.secttl {
	font-weight: 700;
	font-size: 3.6rem;
	margin-bottom: 70px;
}

.ttl_line {
	color: #fff;
	font-weight: 700;
	font-size: 2.2rem;
	padding-bottom: .5em;
	border-bottom: 1px solid #fff;
	margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
	.secttl {
		font-size: 5.6vw;
		margin-bottom: 10vw;
	}

	.ttl_line {
		font-size: 4vw;
		margin-bottom: 7vw;
	}
}

/* sec_intro
--------------------------------*/
#sec_intro {
	padding-top: 30px;
}

#sec_intro .block {
	position: relative;
	width: calc(50% + 550px);
	display: flex;
	align-items: center;
}

#sec_intro .block .img {
	width: calc(100% - 374px);
	height: 650px;
	border-radius: 4px;
	overflow: hidden;
}

#sec_intro .block .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#sec_intro .block .txtwrap {
	position: relative;
	width: 470px;
	padding: 45px 0 40px 50px;
	border-radius: 4px;
	margin-left: -96px;
	z-index: 1;
}

#sec_intro .block .txtwrap .ttl {
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.8;
	margin-bottom: 45px;
}

#sec_intro .block .txtwrap .txt {
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-align: justify;
}

@media screen and (max-width: 767px) {
	#sec_intro {
		padding: 10vw 0 0;
	}

	#sec_intro .block {
		width: 100%;
		display: block;
	}

	#sec_intro .block .img {
		width: 100%;
		height: 60.53vw;
		border-radius: 0;
	}

	#sec_intro .block .txtwrap {
		width: 84%;
		padding: 6vw;
		border-radius: 1.07vw;
		margin: -4.7vw auto 0;
	}

	#sec_intro .block .txtwrap .ttl {
		font-size: 3.73vw;
		margin-bottom: 5vw;
	}

	#sec_intro .block .txtwrap .txt {
		font-size: 3.2vw;
		letter-spacing: 0.02em;
	}
}

/* sec_products
--------------------------------*/
#sec_products {
	padding: 100px 0 130px;
	background-color: #127b4c;
}

#sec_products .about .block {
	position: relative;
	width: calc(50% + 550px);
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin-left: auto;
}

#sec_products .about .block .img {
	width: calc(100% - 374px);
	height: 650px;
	border-radius: 4px;
	overflow: hidden;
}

#sec_products .about .block .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#sec_products .about .block .txtwrap {
	position: relative;
	width: 470px;
	padding: 45px 50px 55px 0;
	border-radius: 4px;
	background-color: #127b4c;
	margin-right: -96px;
	z-index: 1;
}

#sec_products .about .block .txtwrap .ttl {
	color: #fff;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.8;
	margin-bottom: 45px;
}

#sec_products .about .block .txtwrap .txt {
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-align: justify;
}

#sec_products .about .btn {
	margin-top: 40px;
}

#sec_products .import {
	margin-top: 100px;
}

#sec_products .import .map {
	position: relative;
	width: 843px;
	margin: 0 auto;
}

#sec_products .import .map .arw {
	width: 490px;
	position: absolute;
	top: 72px;
	right: 38px;
	opacity: 0;
	transition: 1s ease;
	transition-delay: 1s;
}

#sec_products .import .map.is-show .arw {
	opacity: 1;
}

#sec_products .import .list {
	width: 728px;
	margin: 60px auto 0;
}

#sec_products .import .list .item {
	width: 124px;
}

#sec_products .import .list .item .txt {
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 1.4rem;
	margin-top: .5em;
}

#sec_products .flow {
	margin-top: 100px;
}

#sec_products .flow .list .item {
	width: 165px;
}

#sec_products .flow .list .item .box {
	position: relative;
	width: 100%;
	height: 167px;
	background-color: #fff;
	border-radius: 4px;
	padding: 25px 20px;
}

#sec_products .flow .list .item:not(:last-of-type) .box::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	right: -12px;
	top: 50%;
	margin-top: -8px;
}

#sec_products .flow .list .item .box .num {
	color: #127b4c;
	font-size: 2.7rem;
	line-height: 1;
	letter-spacing: 0;
	width: 52px;
	height: 52px;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: -26px;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#sec_products .flow .list .item .box .ico {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#sec_products .flow .list .item .txt {
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 1.8rem;
	margin-top: .5em;
}

@media screen and (max-width: 767px) {
	#sec_products {
		padding: 16vw 0;
	}

	#sec_products .about .block {
		width: 100%;
		display: block;
	}

	#sec_products .about .block .img {
		width: 100%;
		height: 60.53vw;
		border-radius: 0;
	}

	#sec_products .about .block .txtwrap {
		width: 84%;
		padding: 6vw;
		border-radius: 1.07vw;
		margin: -4.7vw auto 0;
	}

	#sec_products .about .block .txtwrap .ttl {
		font-size: 3.73vw;
		margin-bottom: 5vw;
	}

	#sec_products .about .block .txtwrap .txt {
		font-size: 3.2vw;
		letter-spacing: 0.02em;
	}

	#sec_products .about .btn {
		min-width: inherit;
		width: 70vw;
		margin: 8vw auto;
	}

	#sec_products .about .btn a {
		width: 100%;
		margin-left: 0;
	}

	#sec_products .import {
		margin-top: 13vw;
	}

	#sec_products .import .map {
		width: 100vw;
		margin: 0 -8vw;
	}

	#sec_products .import .map .arw {
		width: 58vw;
		top: 8.3vw;
		right: 4.5vw;
	}

	#sec_products .import .list {
		width: 86.6vw;
		justify-content: center;
		margin: 10vw -1.3vw 0;
	}

	#sec_products .import .list .item {
		width: 26.26vw;
		margin: 0 1.3vw;
	}

	#sec_products .import .list .item:nth-child(n + 4) {
		margin-top: 5vw;
	}

	#sec_products .import .list .item .txt {
		font-size: 2.93vw;
	}

	#sec_products .flow {
		margin-top: 12vw;
	}

	#sec_products .flow .list .item {
		width: 38.67vw;
		padding-top: 6.1vw;
	}

	#sec_products .flow .list .item:nth-child(n + 3) {
		margin-top: 5vw;
	}

	#sec_products .flow .list .item .box {
		height: 39.2vw;
		border-radius: 1.07vw;
		padding: 3.4vw 4vw 5vw;
	}

	#sec_products .flow .list .item:not(:last-of-type) .box::after {
		width: 1.6vw;
		height: 1.6vw;
		right: -3.6vw;
		margin-top: -1.6vw;
	}

	#sec_products .flow .list .item .box .num {
		font-size: 6.33vw;
		width: 12.2vw;
		height: 12.2vw;
		top: -6.1vw;
	}

	#sec_products .flow .list .item .txt {
		font-size: 3.73vw;
	}

	#sec_products .flow .list .item:nth-child(1) .ico img {
		width: 25.47vw;
	}

	#sec_products .flow .list .item:nth-child(2) .ico img {
		width: 27.07vw;
	}

	#sec_products .flow .list .item:nth-child(3) .ico img {
		width: 27.2vw;
	}

	#sec_products .flow .list .item:nth-child(4) .ico img {
		width: 28.27vw;
	}

	#sec_products .flow .list .item:nth-child(5) .ico img {
		width: 20.93vw;
	}

	#sec_products .flow .list .item:nth-child(6) .ico img {
		width: 23.47vw;
	}
}


/* sec_area
--------------------------------*/
#sec_area {
	background-color: #fff;
	padding: 150px 0 100px;
}

#sec_area .inner {
	position: relative;
	width: 1081px;
	margin: 0 auto;
}

#sec_area .inner .txtwrap {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#sec_area .inner .txtwrap .ttl {
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.8;
	margin-bottom: 30px;
}

#sec_area .inner .txtwrap .quantity dt,
#sec_area .inner .txtwrap .quantity dd {
	color: #127b4c;
}

#sec_area .inner .txtwrap .quantity dt {
	font-weight: 700;
	font-size: 2.9rem;
}

#sec_area .inner .txtwrap .quantity dd {
	font-size: 6.6rem;
	line-height: 1;
	letter-spacing: 0.06em;
}

#sec_area .inner .txtwrap .quantity dd .num {
	display: inline-block;
	min-width: 5.5em;
	text-align: right;
	margin-left: -.1em;
}

#sec_area .inner .mapimg {
	padding-top: 22px;
}

@media screen and (max-width: 767px) {
	#sec_area {
		padding: 15vw 0 16vw;
	}

	#sec_area .inner {
		width: 100%;
		overflow-x: scroll;
	}

	#sec_area .inner .txtwrap .ttl {
		font-size: 4.11vw;
		margin-bottom: 6vw;
	}

	#sec_area .inner .txtwrap .quantity dt {
		font-size: 5.41vw;
	}

	#sec_area .inner .txtwrap .quantity dd {
		font-size: 12.32vw;
	}

	#sec_area .inner .mapimg {
		width: 205.6vw;
		padding-top: 3vw;
	}

	.scrollWrap {
		position: relative;
	}

	.scrollWrap::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: url(../img/about/iconScroll.png) no-repeat center center / 32vw auto;
		transition: all 0.2s ease-out 0.2s;
		animation: scrollAnimation 1s linear infinite;
		z-index: 10;
		pointer-events: none;
	}

	.scrollWrap.scrolled::before {
		opacity: 0;
	}

	@keyframes scrollAnimation {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(2.4vw)
		}

		50% {
			transform: translateX(0);
		}

		75% {
			transform: translateX(-2.4vw);
		}

		100% {
			transform: translateX(0);
		}
	}
}


/* sec_location
--------------------------------*/
#sec_location {
	padding: 150px 0 0;
}

#sec_location .block {
	position: relative;
	z-index: 1;
}

#sec_location .block + .block {
	margin-top: 150px;
}

#sec_location .block .imgwrap {
	margin-bottom: 75px;
}

#sec_location .block .imgwrap .img {
	width: 356px;
	margin: 0 8px;
}

#sec_location .block .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#sec_location .block .inner .txtwrap {
	max-width: calc(100% - 450px);
}

#sec_location .block .txtwrap .ttl {
	color: #127b4c;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.8;
	margin-bottom: .5em;
}

#sec_location .block .txtwrap dl {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

#sec_location .block .txtwrap dl dt,
#sec_location .block .txtwrap dl dd {
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
}

#sec_location .block .txtwrap dl dt {
	width: 10em;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
}

#sec_location .block .txtwrap dl dd {
	width: calc(100% - 10.5em);
}

#sec_location .block .txtwrap .box {
	display: inline-block;
	background-color: #fff;
	padding: 17px 30px 17px 20px;
	border-radius: 4px;
	margin-top: 10px;
}

#sec_location .block .txtwrap .box .txt {
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.875;
	letter-spacing: 0.15em;
}

#sec_location .block .inner .img {
	width: 431px;
	text-align: center;
}

#sec_location .block .gmap {
	width: 100%;
	height: 350px;
	position: relative;
	overflow: hidden;
	margin: 80px auto 0;
}

#sec_location .block .gmap iframe {
	width: 100%;
	height: 100%;
}

#sec_location .block.location01 .inner .img img {
	width: 362px;
}

#sec_location .block.location02 .inner .img img {
	width: 361px;
}

#sec_location .block.location03 .inner .img img {
	width: 431px;
}

#sec_location .btnwrap {
	position: relative;
	padding: 100px 0;
	background-color: #fff;
	/*	z-index: 1;*/
}

#sec_location .btnwrap::before {
	content: "";
	width: 100%;
	height: 175px;
	background-color: #fff;
	position: absolute;
	top: -175px;
	left: 0;
}

#sec_location .btnwrap .btn {
	width: 341px;
}

#sec_location .btnwrap .btn a {
	width: 100%;
}

@media screen and (max-width: 767px) {
	#sec_location {
		padding: 16vw 0 0;
	}

	#sec_location .block + .block {
		margin-top: 16vw;
	}

	#sec_location .block .imgwrap {
		margin-bottom: 9vw;
	}

	#sec_location .block .imgwrap .img {
		width: 47.47vw;
		margin: 0 1.07vw;
	}

	#sec_location .block .inner {
		display: block;
	}

	#sec_location .block .inner .txtwrap {
		max-width: inherit;
		width: 100%;
	}

	#sec_location .block .txtwrap .ttl {
		font-size: 4.8vw;
	}

	#sec_location .block .txtwrap dl {
		display: block;
		margin-bottom: 6vw;
	}

	#sec_location .block .txtwrap dl dt,
	#sec_location .block .txtwrap dl dd {
		font-size: 3.2vw;
		line-height: 1.8;
	}

	#sec_location .block .txtwrap dl dt {
		width: 100%;
		text-align: initial;
		text-align-last: initial;
		text-justify: initial;
		margin-left: -.5em
	}

	#sec_location .block .txtwrap dl dd {
		width: 100%;
		letter-spacing: 0;
	}

	#sec_location .block .txtwrap dl dd + dt {
		margin-top: .5em;
	}

	#sec_location .block .txtwrap .box {
		display: block;
		padding: 3.8vw 3vw 3.8vw 2vw;
		border-radius: 1.07vw;
		margin-top: 2vw;
	}

	#sec_location .block .txtwrap .box .txt {
		font-size: 3.2vw;
		line-height: 1.66;
		letter-spacing: 0.12em;
	}

	#sec_location .block .txtwrap .box .txt.address {
		display: flex;
	}

	#sec_location .block .txtwrap .box .txt.address span {
		flex: 0 0 auto;
	}

	#sec_location .block .inner .img {
		width: 100%;
		text-align: center;
		margin-top: 12vw;
	}

	#sec_location .block .gmap {
		height: 46.66vw;
		margin: 13vw auto 0;
	}

	#sec_location .block.location01 .inner .img img {
		width: 67.07vw;
	}

	#sec_location .block.location02 .inner .img img {
		width: 67.07vw;
	}

	#sec_location .block.location03 .inner .img img {
		width: 80.24vw;
	}

	#sec_location .btnwrap {
		width: 100%;
		padding: 18vw 0;
	}

	#sec_location .btnwrap::before {
		height: 23.33vw;
		top: -23.33vw;
	}

	#sec_location .btnwrap .btn {
		width: 58.8vw;
		margin: 0 auto;
	}

	#sec_location .btnwrap .btn + .btn {
		margin-top: 5.3vw;
	}

	#sec_location .btnwrap .btn a {
		margin-left: 0;
		padding: 0 1.5em;
	}
}