@charset "UTF-8";

/* mainv
----------------------------------------*/
.l-loading {
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999999;
	overflow: hidden;
}
.is-load .l-loading {
	width: 0;
	-webkit-transition: 1.6s cubic-bezier(.86,0,.07,1);
	transition: 1.6s cubic-bezier(.86,0,.07,1);
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
	-webkit-transition-property: width;
	transition-property: width;
}
.l-loading__bg {
	width: 400%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #fff;
	-webkit-transform: skewX(-30deg);
	transform: skewX(-30deg);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.is-load .l-loading__bg {
	-webkit-transition: width 1.6s cubic-bezier(.86,0,.07,1);
	transition: width 1.6s cubic-bezier(.86,0,.07,1);
	width: 0!important;
}
.l-loading__bg::after, .l-loading__bg::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.l-loading__bg::before {
	background-color: rgba(255,255,255,.6);
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	opacity: 1;
}
.is-load .l-loading__bg::before {
	opacity: 0;
	-webkit-transition: opacity .6s 1s linear;
	transition: opacity .6s 1s linear;
}

.mainv_block {
	height: 920px;
}
.mainv_block img {
	display: block;
}
.mainv_bg_left {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.mainv_block h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 428px;
	margin: 0 0 0 -560px;
	z-index: 10;
}
.mainv_block h2 img {
	width: 100%;
}
.mainv_block figure img {
	position: absolute;
	max-width: inherit;
	left: 50%;
	transform: translateX(-50%);
}
.mainv_scroll a:hover {
	opacity: .6;
}
.mainv_scroll {
	position: absolute;
	left: 50%;
	top: 75%;
	letter-spacing: .1em;
	text-align: center;
	color: #6CC6CE;
	font-size: 1.1rem;
	font-weight: normal;
	z-index: 10;
	margin-left: -13.2%;
}
.mainv_scroll::after {
	content: "";
	position: absolute;
	display: block;
	background: -moz-linear-gradient(180deg, #6CC6CE, #FFFFFF);
	background: -webkit-linear-gradient(180deg, #6CC6CE, #FFFFFF);
	background: linear-gradient(180deg, #6CC6CE, #FFFFFF);
	width: 1px;
	height: 203px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	margin-top: 18px;
}
.mainv_scroll:hover::after {
	animation-name:expansion;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-fill-mode: backwords;
	animation-play-state: running;
}

@keyframes expansion{
	0%{
		height: 203px;
	}
	100%{
		height: 0;
	}
}

@media only screen and (max-width: 768px) {
	.mainv_block {
		height: auto;
		margin-top: 73px;
	}
	.mainv_block h2 {
		width: 73.875%;
		margin: 0;
		top: 47.7%;
		left: .75%;
	}

	.mainv_block figure img {
		position: relative;
		left: inherit;
		transform: inherit;
		width: 100%;
	}

	.mainv_scroll {
		display: none;
	}
}



/* TOP 共通
----------------------------------------*/
.contents .ttl_h2 {
	font-size: 2rem;
	color: #6CC6CE;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .1em;
	opacity: 0;
	text-align: center;
	margin-bottom: 50px;
	z-index: 10;
}
.contents .ttl_h2 .en {
	font-size: 4rem;
	color: #444444;
	display: block;
}
.contents .show .ttl_h2 {
	animation-fill-mode: forwards;
	animation-duration: 1000ms;
	animation-name: fadeUp;
}

.contents .ttl_h3 {
	font-size: 3.5rem;
	font-weight: 500;
	letter-spacing: .14em;
	color: #ffffff;
	line-height: 1.3;
}
.contents .ttl_h3 + p {
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.8;
	color: #ffffff;
	margin-top: 15px;
}

.contents .img_box {
	overflow: hidden;
	margin-bottom: 60px;
}
.contents .img_box::after,
.contents .img_box::before {
	content: '';
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	position: absolute;
	top: -1px;
	right: -1px;
	left: auto;
	-webkit-transition: width .9s cubic-bezier(.77,0,.175,1);
	transition: width .9s cubic-bezier(.77,0,.175,1);
}
.contents .img_box::after {
	background-color: rgba(255,255,255,.8);
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	z-index: 1;
}
.contents .img_box::before {
	background-color: #fff;
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
	z-index: 2;
}
.contents .show.img_box::after,
.contents .show.img_box::before {
	width: 0;
}
.contents .img_box img {
	max-width: none;
}

.contents .txt_box {
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 2.3;
	letter-spacing: .1em;
}
.contents .txt_box p {
	opacity: 0;
}
.contents .show .txt_box p {
	animation-fill-mode: forwards;
	animation-duration: 1000ms;
	animation-delay: 500ms;
	animation-name: fadeUp;
}
.contents .btn_more {
	max-width: 286px;
	margin: 0 auto;
	opacity: 0;
}
.contents .show .btn_more {
	animation-fill-mode: forwards;
	animation-duration: 1000ms;
	animation-delay: 500ms;
	animation-name: fadeUp;
}
.contents .btn_more a {
	color: #ffffff;
	display: block;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: 2.3px;
	transition: opacity 300ms;
	border: 1px solid #ffffff;
	padding: 15px 0;
	position: relative;
}
.contents .btn_more a::before {
	content: "";
	position: absolute;
	background: url("../img/common/ico-arrow.svg") no-repeat;
	width: 16px;
	height: 4px;
	right: 15px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: right 300ms;
}
.contents .btn_more a:hover {
	opacity: .6;
}
.contents .btn_more a:hover::before {
	right: 10px;
}

.contents .bg_box {
	position: relative;
	padding-bottom: 100px;
}
.contents .bg_box::before {
	content: "";
	position: absolute;
	width: 100%;
	height: calc(100% - 61px);
	background: #6CC6CE;
	bottom: 0;
}

@media only screen and (max-width: 768px) {
	.contents .ttl_h2 {
		font-size: 1.2rem;
		margin-bottom: 22px;
	}

	.contents .ttl_h2 .en {
		font-size: 3.2rem;
		letter-spacing: .07em;
		margin-bottom: 2px;
	}

	.contents .ttl_h3 {
		font-size: 1.8rem;
		line-height: 1.65;
	}

	.contents .ttl_h3 + p {
		font-size: 1.2rem;
		line-height: 1.6;
		margin-top: 20px;
	}

	.contents .img_box {
		margin: 0;
		width: 100%;
	}

	.contents .img_box img {
		width: 100%;
	}

	.contents .btn_more {
		width: 200px;
		max-width: inherit;
	}

	.contents .btn_more a {
		font-size: .9rem;
		padding: 14px 0;
	}

	.contents .btn_more a:hover {
		background-color: #000;
		color: #fff;
	}

	.contents .btn_more a::before {
		background-size: 100% auto;
		width: 12px;
		height: 3px;
		right: 10px;
	}

	.contents .bg_box {
		padding-bottom: 40px;
	}

}


@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


/* mission_block
----------------------------------------*/
.mission_block {
	padding: 80px 0 0;
	position: relative;
}
.mission_block::before {
	content: "";
	position: absolute;
	background: url("../img/index/bg_contents.png") no-repeat;
	width: 1695px;
	height: 3006px;
	left: 46%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	top: 295px;
}

.mission_inner {
	max-width: 1000px;
	margin: 0 auto;
	z-index: 10;
}

.mission_inner .txt_box {
	position: absolute;
	bottom: 0;
	padding: 25px 40px;
}

@media only screen and (max-width: 768px) {
	.mission_block {
		margin-top: -145px;
		padding: 0;
	}
	.mission_block::before {
		display: none;
	}
	.mission_block figure {
		margin: 0 6.25%;
	}
	.mission_inner .txt_box {
		position: relative;
		padding: 15px 6.25% 21px;
	}
}



/* message_block
----------------------------------------*/
.message_block {
	padding: 90px 0 0;
}
.message_inner {
	max-width: 1000px;
	margin: 0 auto;
	z-index: 10;
}


@media only screen and (max-width: 768px) {
	.message_block {
		padding: 58px 0 0;
	}
	.message_block::before {
		content: '';
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 56.625%;
		background: url(../img/index/bg_message.svg) no-repeat left top / 100% auto;
	}
	.message_block figure {
		margin: 0 6.25%;
	}
}



/* people_block
----------------------------------------*/
.people_block {
	padding: 150px 0 40px;
}
.people_block::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 530px;
	background: #E9F7F8;
	bottom: 0;
}
.people_block h2.ttl_h2 {
	margin-bottom: 0;
}
.people_inner {
	max-width: 1120px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	z-index: 100;
}
.people_inner [class*="people_item0"] {
	margin: 0 -30px;
	padding: 0 20px;
	opacity: 0;
	max-width: 430px;
}
.people_inner.show [class*="people_item0"] {
	animation-fill-mode: forwards;
	animation-duration: 1000ms;
	animation-name: fadeUp;
}

.people_inner .people_item02 {
	margin-top: 85px;
}

.people_inner .people_item03 {
	margin-top: 175px;
}

.people_inner [class*="people_item0"] a {
	display: block;
	cursor: pointer;
	height: 45%;
	width: 45%;
	position: absolute;
	transform: skew(-45deg,45deg);
	z-index: 1;
	margin: 0 auto;
	right: 120px;
	top: 115px;
}
.people_inner [class*="people_item0"] a:hover + .img {
	opacity: .6;
}

.people_inner [class*="people_item0"] .img {
	position: relative;
	display: block;
	transition: opacity 300ms;
}
.people_inner [class*="people_item0"] .img .txt_box {
	position: absolute;
	right: 55px;;
	top: 160px;
	color: #ffffff;
	width: 135px;
	letter-spacing: .2em;
}
.people_inner [class*="people_item0"] .img .txt_box .sttl {
	font-size: .9rem;
	border-bottom: 2px solid #FFFFFF;
	padding-bottom: 6px;
}
.people_inner [class*="people_item0"] .img .txt_box h3 {
	font-size: 2.3rem;
}
.people_inner [class*="people_item0"] .img .txt_box .en {
	display: block;
	font-size: .6rem;
}


@media only screen and (max-width: 768px) {
	.people_block {
		padding: 50px 0 115px;
	}
	.people_block::before {
		width: 93.75%;
		height: auto;
		position: absolute;
		top: 75px;
		left: 0;
		bottom: 60px;
	}
	.people_block::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 195.5%;
		background: url(../img/index/bg_people.svg) no-repeat left top / 100% auto;
	}
	
	.people_block h2.ttl_h2 {
		margin-bottom: 32px;
	}

	.people_inner {
		display: block;
		padding: 0;
		z-index: 10;
	}

	.people_inner .slick-list,
	.people_inner .slick-track {
		overflow: hidden;
	}
	
	.people_item01,
	.people_item02,
	.people_item03 {
		float: left;
	}

	.people_inner [class*="people_item0"] {
		margin: 0;
		padding: 0 9.35vw;
		max-width: inherit;
	}

	.people_inner [class*="people_item0"] a {
		top: calc(70 / 375 * 100vw);
		right: calc(70 / 375 * 100vw);
		width: 50%;
		height: 50%;
	}

	.people_inner [class*="people_item0"] .img .txt_box {
		top: calc(130 / 375 * 100vw);
		width: calc(100 / 375 * 100vw);
		right: calc(47 / 375 * 100vw);
		line-height: 2;
	}
	.people_inner [class*="people_item0"] .img .txt_box .sttl {
		font-size: calc(7 / 375 * 100vw);
		letter-spacing: .1em;
	}

	.people_inner [class*="people_item0"] .img .txt_box h3 {
		font-size: calc(17 / 375 * 100vw);
		letter-spacing: .25em;
	}

	.people_inner [class*="people_item0"] .img .txt_box .en {
		font-size: calc(5 / 375 * 100vw);
		line-height: 1;
		letter-spacing: .06em;
	}

	.people_inner .slick-next,
	.people_inner .slick-prev {
		-webkit-appearance: none;
		appearance: none;
		width: 37px;
		height: 10px;
		position: absolute;
		top: 0;
		right: 6.25%;
		margin-top: 62%;
		overflow: hidden;
		text-indent: -999px;
		border: 0;
		background: url(../img/index/icon_people_arrow.svg) no-repeat left top / 37px auto;
		z-index: 1200;
	}

	.people_inner .slick-prev {
		left: 6.25%;
		right: auto;
		transform: scale(-1, 1);
	}

	.people_inner .slick-next:focus,
	.people_inner .slick-prev:focus {
		outline: none;
	}

	.people_inner .slick-dots {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		margin: 10px 0 0;
	}

	.people_inner .slick-dots li {
		width: 8px;
		height: 8px;
		margin: 0 4px;
	}

	.people_inner .slick-dots li button {
		-webkit-appearance: none;
		appearance: none;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: none;
		border: 1px solid #87C1C7;
		overflow: hidden;
		text-indent: -999px;
	}

	.people_inner .slick-dots li.slick-active button {
		background: #87C1C7;
	}
}



/* contents_block
----------------------------------------*/
.contents_block {
	padding: 114px 0 0;
	position: relative;
}
.contents_block::before {
	content: "";
	position: absolute;
	background: url("../img/index/bg_contents02.png") no-repeat;
	width: 1432px;
	height: 1106px;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	top: 510px;
}

.contents_inner {
	max-width: 1160px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	z-index: 10;
}
.contents_item .txt {
	background: #ffffff;
	max-width: 398px;
	margin: -110px auto 0;
	text-align: center;
	padding: 30px 0 35px;
}

.contents_item .txt h2.ttl_h2 {
	font-size: 1.3rem;
	font-weight: 100;
	margin-bottom: 20px;
}

.contents_item .txt h2.ttl_h2 .en {
	font-size: 2.8rem;
	font-weight: bold;
}
.contents_item .txt .btn_more {
	max-width: 183px;
}
.contents_item .txt .btn_more a {
	color: #6CC6CE;
	border: 1px solid #6CC6CE;
	padding: 10px 0;
	font-size: 1rem;
}
.contents_item .txt .btn_more a::before {
	background: url("../img/common/ico-arrow02.svg") no-repeat;
	width: 11px;
	height: 3px;
	right: 8px;
}
.contents_item .txt .btn_more a:hover::before {
	right: 4px;
}


@media only screen and (max-width: 768px) {
	.contents_block {
		padding: 0;
	}
	.contents_block::before {
		display: none;
	}
	.contents_item .txt h2.ttl_h2 {
		font-size: 1.2rem;
		margin-bottom: 26px;
	}
	.contents_item .txt h2.ttl_h2 .en {
		font-size: 3.1rem;
		letter-spacing: 0;
	}
	.contents_inner {
		display: block;
	}
	.contents_item figure {
		margin: 0 0 0 6.25%;
	}
	.contents_item:nth-child(2n) figure {
		margin: 0 6.25% 0 auto;
	}
	.contents_item .txt {
		margin: -45px auto 80px 0;
		width: 93.75%;
		padding: 30px 0 40px;
		max-width: inherit;
	}
	.contents_item:nth-child(2n) .txt {
		margin: -45px 0 80px auto;
	}
	.contents_item:last-child .txt {
		margin-bottom: 10px;
	}
	.contents_item .txt .btn_more {
		max-width: 200px;
	}
	.contents_item .txt .btn_more a {
		padding: 14px 0;
		font-size: .9rem;
	}
	.contents_item .txt .btn_more a::before {
		right: 10px;
	}
}



/* crosstalk_block
----------------------------------------*/
.crosstalk_block {
	padding: 70px 0 0;
	background: rgba(108,198,206,.15);
}

.crosstalk_inner {
	max-width: 1280px;
	margin: 0 auto;
	z-index: 10;
}

.crosstalk_inner .img_box {
	max-width: 1022px;
	margin: 0;
	line-height: 0;
}


.crosstalk_inner .txt {
	background: #ffffff;
	width: 398px;
	margin: 0 auto;
	text-align: center;
	padding: 60px 0 65px;
	position: absolute;
	right: 60px;
	top: 80px;
}

.crosstalk_inner .txt h2.ttl_h2 {
	font-size: 1.3rem;
	font-weight: 100;
	margin-bottom: 20px;
}

.crosstalk_inner .txt h2.ttl_h2 .en {
	font-size: 2.8rem;
	font-weight: bold;
}
.crosstalk_inner .txt .btn_more {
	max-width: 183px;
}
.crosstalk_inner .txt .btn_more a {
	color: #6CC6CE;
	border: 1px solid #6CC6CE;
	padding: 10px 0;
	font-size: 1rem;
}
.crosstalk_inner .txt .btn_more a::before {
	background: url("../img/common/ico-arrow02.svg") no-repeat;
	width: 11px;
	height: 3px;
	right: 8px;
}
.crosstalk_inner .txt .btn_more a:hover::before {
	right: 4px;
}


@media only screen and (max-width: 768px) {
	.crosstalk_block {
		padding: 60px 0 20px;
	}
	.crosstalk_block figure {
		width: 93.75%;
		margin: 0 0 0 auto;
	}
	.crosstalk_block::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 90.125%;
		margin-top: -44%;
		width: 100%;
		background: url(../img/index/bg_contents02-sp.svg) no-repeat left top / 100% auto;
		display: block;
	}
	
	.crosstalk_inner .txt {
		position: relative;
		width: 100%;
		right: 6.25%;
		top: -40px;
		padding: 30px 0 40px 6.25%;
	}

	.crosstalk_inner .txt h2.ttl_h2 {
		font-size: 1.2rem;
		margin-bottom: 26px;
	}
	
	.crosstalk_inner .txt h2.ttl_h2 .en {
		font-size: 3.1rem;
		letter-spacing: 0;
	}
	.crosstalk_inner .txt .btn_more {
		max-width: 200px;
	}
	.crosstalk_inner .txt .btn_more a {
		padding: 14px 0;
		font-size: .9rem;
	}
}


/* contents02_block
----------------------------------------*/
.contents02_block {
	padding: 75px 0;
	position: relative;
}
.contents02_block::before {
	content: "";
	position: absolute;
	background: url("../img/index/bg_contents03.png") no-repeat;
	width: 1770px;
	height: 887px;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	top: 235px;
}

.contents02_block .contents_item .txt {
	background: #6CC6CE;
}

.contents02_block .contents_item .txt h2.ttl_h2,
.contents02_block .contents_item .txt h2.ttl_h2 .en {
	color: #ffffff;
}
.contents02_block .contents_item .txt .btn_more a {
	color: #ffffff;
	border: 1px solid #ffffff;
}
.contents02_block .contents_item .txt .btn_more a::before {
	background: url("../img/common/ico-arrow-s.svg") no-repeat;
}

@media only screen and (max-width: 768px) {
	.contents02_block {
		padding: 60px 0 50px;
	}
	.contents02_block::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin-top: -20.5%;
		width: 100%;
		height: auto;
		transform: none;
		padding-top: 340.125%;
		background: url(../img/index/bg_contents03-sp.svg) no-repeat left top / 100% auto;
	}
	.contents02_block .contents_item .txt {
		margin-bottom: 40px;
	}
}