@charset "UTF-8";

/* ---------------------------------------
  ABOUT
-----------------------------------------*/

@media screen and (min-width: 768px) {
	#pagettl {
		background-image: url(../img/about/pagettl_pc.jpg);
	}
}

@media screen and (max-width: 767px) {
	#pagettl {
		background-image: url(../img/about/pagettl_sp.jpg);
	}
	
	#pagettl .ttl span.ja{
		letter-spacing: 0.05em;
	}
}


/* mv
--------------------------------*/
#sec_mv .inner {
	position: relative;
	align-items: center;
	justify-content: center;
}

#sec_mv .imgwrap {
	position: relative;
	width: 50%;
}

#sec_mv .imgwrap .img {
	width: 100%;
	height: 21.333vw;
	min-height: 384px;
	overflow: hidden;
}

#sec_mv .imgwrap .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity .3s ease .9s, transform .5s ease .5s;
	will-change: transform;
}

#sec_mv .imgwrap ._left .img img {
	object-position: right;
}

#sec_mv .imgwrap ._right .img img {
	object-position: left;
}

#sec_mv.is-show .imgwrap .img img {
	opacity: 1;
}

#sec_mv .txtwrap {
	width: 582px;
	padding: 45px 50px 40px;
	background-color: rgba(255, 255, 255, .9);
	position: absolute;
	z-index: 2;
}

#sec_mv .txtwrap .lead {
	position: relative;
	text-align: center;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.75;
	margin-bottom: .6em;
	z-index: 1;
}

#sec_mv .txtwrap .lead::before {
	content: "";
	width: 222px;
	height: 253px;
	background: url(../img/about/ico_drop.png) no-repeat center / contain;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: auto;
	transform: translateY(-52%);
	z-index: -1;
}

#sec_mv .txtwrap .txt {
	padding: 0 1.2em;
	text-align: justify;
}

@media screen and (min-width: 768px) {
	#sec_mv .imgwrap::before {
		content: '';
		display: inline-block;
		width: 0;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #0066cc;
		z-index: 1;
	}

	#sec_mv.is-show .imgwrap:before {
		-webkit-animation: passing-img 1s ease .5s 1 normal forwards;
		animation: passing-img 1s ease .5s 1 normal forwards;
	}
}

@media screen and (max-width: 767px) {
	#sec_mv .imgwrap {
		width: 100%;
	}

	#sec_mv .imgwrap .sp {
		display: flex;
	}

	#sec_mv .imgwrap .img {
		position: relative;
		width: 50%;
		height: 37.5rem;
		min-height: inherit;
	}

	#sec_mv .imgwrap .img::before {
		content: '';
		display: inline-block;
		width: 0;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #0066cc;
		z-index: 1;
	}

	#sec_mv.is-show .imgwrap .img:before {
		-webkit-animation: passing-img 1s ease .5s 1 normal forwards;
		animation: passing-img 1s ease .5s 1 normal forwards;
	}

	#sec_mv .txtwrap {
		width: 100%;
		padding: 7rem 3rem 5.5rem;
		position: static;
		transform: none;
	}

	#sec_mv .txtwrap .lead {
		font-size: 3.6em;
		letter-spacing: 0.05em;
	}

	#sec_mv .txtwrap .lead::before {
		width: 33.3rem;
		height: 38rem;
	}

	#sec_mv .txtwrap .txt {
		padding: 0 2rem;
		letter-spacing: 0.05em;
	}
}

@keyframes passing-img {
	0% {
		left: 0;
		width: 0;
	}

	50% {
		left: 0;
		width: calc(100% + 1px);
	}

	51% {
		left: 0;
		width: calc(100% + 1px);
	}

	100% {
		left: 100%;
		width: 0;
	}
}

/* service
--------------------------------*/
#sec_service {
	padding: 90px 0 0;
}

#sec_service .listwrap {
	width: 550px;
}

#sec_service .listwrap .btn_s {
	margin-top: 40px;
}

#sec_service .list {
	justify-content: flex-start;
}

#sec_service .list .item {
	width: 172px;
}

#sec_service .list .item > a {
	display: block;
	transition: .3s ease;
}

#sec_service .list .item .img {
	width: 100%;
	height: 114px;
	overflow: hidden;
}

#sec_service .list .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s ease;
}

#sec_service .list .item .ttl {
	text-align: center;
	color: #0066cc;
	font-weight: 500;
	font-size: 1.6rem;
	margin-top: .75em;
}

#sec_service .mainimg {
	width: 592px;
	margin-right: -83px;
	margin-top: -48px;
}

@media screen and (min-width: 768px) {
	#sec_service .list .item + .item:not(:nth-child(3n + 1)) {
		margin-left: 17px;
	}

	#sec_service .list .item:nth-child(n + 4) {
		margin-top: 30px;
	}

	#sec_service .list .item > a:hover .img img {
		transform: scale(1.1);
	}
}

@media screen and (max-width: 767px) {
	#sec_service {
		padding: 10rem 0 12rem;
	}

	#sec_service .listwrap {
		width: 100%;
	}

	#sec_service .listwrap .btn_s {
		margin-top: 7rem;
	}

	#sec_service .list {
		justify-content: space-between;
	}

	#sec_service .list .item {
		width: 30rem;
	}

	#sec_service .list .item:nth-child(n + 3) {
		margin-top: 6rem;
	}

	#sec_service .list .item .img {
		height: 19.9rem;
	}

	#sec_service .list .item .ttl {
		font-size: 2.4rem;
	}

	#sec_service .mainimg {
		width: 64.2rem;
		margin-right: -1.2rem;
		margin-top: 10rem;
	}
}


/* features
--------------------------------*/
#sec_features {
	padding: 190px 0 100px;
	background-color: #fff;
	z-index: 1;
}

#sec_features::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100px 50vw 0 50vw;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 1;
}

#sec_features .bg_wave {
	width: 100%;
	height: 690px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/about/features_bg_pc.png");
	background-position: center bottom;
	background-size: cover;
	z-index: -1;
}

#sec_features .bg_wave .water {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/about/features_bg_pc.png");
	background-position: center bottom;
	background-size: cover;
	filter: url("#wave-filter");
}

#sec_features .secttl {
	margin-bottom: 100px;
}

#sec_features .secttl .ja span {
	margin: 0 .25em;
}

#sec_features .block + .block {
	margin-top: 100px;
}

#sec_features .block .inner {
	width: calc(50% + 550px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#sec_features .block:nth-child(even) .inner {
	flex-direction: row-reverse;
	margin-left: auto;
}

#sec_features .block .imgwrap {
	width: calc(100% - 550px);
}

#sec_features .block .imgwrap .img {
	width: 550px;
}

#sec_features .block:nth-child(odd) .imgwrap .img {
	margin-left: auto;
}

#sec_features .block .imgwrap .bgimg {
	position: relative;
	padding-top: 117px;
}

#sec_features .block .imgwrap .bgimg::before {
	content: "";
	width: calc(100% - 104px);
	height: 100%;
	background-color: #0066cc;
	position: absolute;
	top: 0;
	z-index: -1;
	transition: 1s ease;
}

#sec_features .block:nth-child(odd) .imgwrap .bgimg::before {
	border-radius: 0px 30px 0px 0px;
	left: 0;
	transform: translateX(-100%);
}

#sec_features .block:nth-child(even) .imgwrap .bgimg::before {
	border-radius: 30px 0px 0px 0px;
	right: 0;
	transform: translateX(100%);
}

#sec_features .block.is-show:nth-child(odd) .imgwrap .bgimg::before,
#sec_features .block.is-show:nth-child(even) .imgwrap .bgimg::before {
	transform: translateX(0);
}

#sec_features .block .imgwrap .bgimg .img {
	border-radius: 30px 30px 0px 0px;
	overflow: hidden;
}

#sec_features .block .imgwrap .bgimg + .img {
	margin-top: 18px;
}

#sec_features .block .imgwrap .img.flex img {
	width: 266px;
}

#sec_features .block .txtwrap {
	width: 490px;
	min-height: 483px;
}

#sec_features .block .txtwrap .num {
	color: #0066cc;
	font-weight: 700;
	font-size: 8.8rem;
	line-height: .8;
	letter-spacing: 0;
	margin-bottom: .25em;
}

#sec_features .block .txtwrap .ttl {
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.75;
	letter-spacing: 0.15em;
	margin-bottom: 1em;
}

#sec_features .block .txtwrap .ttl span {
	position: relative;
	display: inline-block;
}

#sec_features .block .txtwrap .ttl span::before {
	content: "";
	width: 163px;
	height: 185px;
	background: url(../img/about/ico_drop.png) no-repeat center / contain;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -55%);
	z-index: -1;
}

#sec_features .block .txtwrap .txt {
	letter-spacing: 0.05em;
	text-align: justify;
}

#sec_features .block .imgslider {
	margin-top: 60px;
}

#sec_features .block .imgslider .img {
	width: auto;
	height: 138px;
	overflow: hidden;
	margin: 0 7.5px;
}

#sec_features .block .imgslider .img img {
	max-width: inherit;
	width: auto;
	height: 100%;
}

@media screen and (max-width: 767px) {
	#sec_features {
		padding: 20rem 0 14rem;
	}

	#sec_features::before {
		border-width: 4rem 50vw 0 50vw;
	}

	#sec_features .bg_wave {
		height: 73.8rem;
		background-image: url("../img/about/features_bg_sp.png");
	}

	#sec_features .bg_wave .water {
		background-image: url("../img/about/features_bg_sp.png");
	}

	#sec_features .secttl {
		margin-bottom: 10rem;
	}

	#sec_features .block + .block {
		margin-top: 15rem;
	}

	#sec_features .block .inner {
		width: 100%;
	}

	#sec_features .block .imgwrap {
		width: 69rem;
	}

	#sec_features .block .imgwrap .img {
		width: 63rem;
	}

	#sec_features .block .imgwrap .bgimg {
		padding-top: 7.5rem;
	}

	#sec_features .block .imgwrap .bgimg::before {
		width: 57.1rem;
	}

	#sec_features .block:nth-child(odd) .imgwrap .bgimg::before {
		border-radius: 0px 3.4rem 0px 0px;
	}

	#sec_features .block:nth-child(even) .imgwrap .bgimg::before {
		border-radius: 3.4rem 0px 0px 0px;
	}

	#sec_features .block .imgwrap .bgimg .img {
		border-radius: 3.4rem 3.4rem 0px 0px;
	}

	#sec_features .block .imgwrap .bgimg + .img {
		margin-top: 2rem;
	}

	#sec_features .block .imgwrap .img.flex img {
		width: 30.5rem;
	}

	#sec_features .block .txtwrap {
		width: 63rem;
		min-height: inherit;
		margin: 6rem auto 0;
	}

	#sec_features .block .txtwrap .num {
		font-size: 13.2rem;
		margin-bottom: .25em;
	}

	#sec_features .block .txtwrap .ttl {
		font-size: 3.6rem;
		letter-spacing: 0.075em;
	}

	#sec_features .block .txtwrap .ttl span {
		display: block;
	}

	#sec_features .block .txtwrap .ttl span::before {
		width: 29.4rem;
		height: 33.36rem;
		top: auto;
		bottom: -4rem;
		transform: translate(16%, 0);
	}

	#sec_features .block .imgslider {
		margin-top: 8rem;
	}

	#sec_features .block .imgslider .img {
		height: 20.7rem;
		margin: 0 1.125rem;
	}
}