@charset "UTF-8";






/* ================================================================================
kv
================================================================================ */
#kv
{
	overflow: hidden;
}
#kv .sectionInner
{
	position: relative;
	height: 100%;
}

#kv .video
{
	z-index: 10;
	position: absolute;
	top: 50%;	left: 50%;
	transform: translate(-50%, -50%);
}
#kv .video video{	width: 100%;	height: 100%;	}

#kv .scroll
{
	z-index: 11;
	position: absolute;
	bottom: 0;	left: 50%;
	height: 100px;
	transform: translate(-50%, 0%);
}
#kv .scroll p
{
	color: white;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.1rem;
}
#kv .scroll hr
{
	position: absolute;
	top: 30px;	left: 50%;

	width: 2px;	height: 70px;
	background-color: rgba(255, 255, 255, 1.0);
	border: none;
}
#kv .scroll hr:nth-child(2){	opacity: 0.2;	}
#kv .scroll hr:last-child{	animation: scrollDirection 2.0s cubic-bezier(0.6, 0, 0, 0.6) 0.0s infinite both;	}

@keyframes scrollDirection
{
	0%{	transform: scale(1, 0);	transform-origin: 0 0;	}
	45%{	transform: scale(1, 1);	transform-origin: 0 0;	}
	65.1%{	transform: scale(1, 1);	transform-origin: 0 100%;	}
	100%{	transform: scale(1, 0);	transform-origin: 0 100%;	}
}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#kv .scroll{	height: 20vw;	}
#kv .scroll p{	font-size: 3vw;	}
#kv .scroll hr
{
	top: 5vw;
	height: 15vw;
}

}



/* ================================================================================
info
================================================================================ */
#info{	}
#info .sectionInner
{
	width: 1180px;

	padding: 130px 40px;
	margin: 0 auto;
}

#info .boxes
{
	display: flex;
	justify-content: space-between;
}
#info .box{	width: 50%;	}


#info .text
{
	font-size: 20px;
	font-weight: bold;
	line-height: 2.2;
}
#info .text span
{
	color: #0ab6f3;
}
#info .thumb
{
	width: 520px;
	margin: 0 0 0 auto;
}






/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{

#info .sectionInner{	width: 100%;	}
#info .box:nth-child(1){	width: auto;	padding: 0 2rem 0 0;	}
#info .box:nth-child(2){	width: auto;}
#info .text
{
	font-size: 20px;
	font-weight: bold;
	line-height: 2.2;
}
#info .text span
{
	color: #0ab6f3;
}
#info .thumb
{
	width: 45vw;
	margin: 0 0 0 auto;
}

}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#info .sectionInner
{
	width: 100vw;
	padding: 7vw 5vw;
}
#info .boxes{	flex-wrap: wrap;	}
#info .box:nth-child(1){	width: 100%;	margin: 0 0 5vw;	}
#info .box:nth-child(2){	width: 100%;	min-width: 100%;	}

#info .text{	font-size: 3.5vw;	line-height: 2.5;	}
#info .thumb{	width: 100%;	}

}




/* ================================================================================
massage
================================================================================ */
#message{	overflow: hidden;	}
#message .sectionInner
{
	position: relative;
	display: block;
	width: 100%;	height: 540px;
	padding: 5rem 0;
}
#message .background
{
	z-index: 5;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	background: url("../image/index/message_bg2000_PC.jpg") bottom center/cover;

	transition: transform 1.0s;
}
/* #message .MH .background{	animation: fadeZoomUp 2.0s cubic-bezier(0.0, 0.0, 0.7, 1.0) 0.0s both;	} */
/* #message .MO .background{	animation: fadeZoomDown 2.0s cubic-bezier(0.0, 0.0, 0.7, 1.0) 0.0s both;	} */
#message .MH .background{	transform: scale(1.10);	}
#message .MO .background{	transform: scale(1.00);	}

#message .inner
{
	width: 1180px;
	margin: 0 auto;
}

#message .box
{
	z-index: 10;
	position: relative;

	width: 480px;
	margin: 0 0 0 auto;
}

#message h2
{
	font-size: 18px;
	font-weight: bold;
	color: #0ab6f3;
	margin: 0 0 20px;
}
#message .text1
{
	position: relative;
	font-size: 32px;
	font-weight: bold;
	line-height: 55px;
	text-indent: -9px;
	margin: 0 0 20px;
	padding: 0 0 0 20px;
}

#message .text2
{
	font-size: 26px;
	font-weight: bold;
	text-align: right;
	margin: 0 0 50px;
}

#message .text1 span
{
	display: inline-block;
	font-weight: bold;

	transform: scale(1.5, 1.5);
}

#message .text1 span:last-child
{
	line-height: -15px;
	transform:
		scale(1.5, 1.5)
		translate(15px, -10px);
}

#message .readmore{	margin: 0 1rem 0 auto;	}



/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{

#message{}
#message .background{	background: url("../image/index/message_bg_PC.jpg") bottom center/cover;	}
#message .inner{	width: 100%;	}
#message .box{	width: 400px;	}
#message .text2
{
	font-size: 30px;
	font-weight: bold;
	text-align: left	;
	margin: 0 0 40px 150px;
}

#message .readmore{	margin: 0 6rem 0 auto;	}

}



/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#message{}
#message  .sectionInner
{
	width: 100vw;	height: 72vw;
	padding: 8vw;
}
#message .background
{
	background: url("../image/index/message_bg_SP.jpg") bottom center/cover;
	transition: unset;
}
#message .MH .background{	transform: unset;	}
#message .MO .background{	transform: unset;	}

#message .inner{	width: 100%;	}
#message .box
{
	width: 50vw;
	margin: 0 0 0 auto;
}

#message h2
{
	font-size: 4vw;
	margin: 0 0 4vw;
}
#message .text1
{
	font-size: 5vw;
	font-weight: bold;
	line-height: 7vw;
	text-indent: -1.4vw;

	margin: 0 0 1vw;
	padding: 0 0 0 5vw;
}

#message .text2
{
	font-size: 4vw;
	font-weight: bold;
	text-align: right;
	margin: 0 0 8vw;
}


}



/* ================================================================================
project
================================================================================ */
#project{	overflow: hidden;		}
#project .sectionInner
{
	position: relative;
	display: block;
	width: 100%;
	padding: 8rem 0;
}
#project .background
{
	z-index: 5;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	background: url("../image/index/project_bg2000_PC.jpg") bottom center/cover;

	transition: transform 1.0s;
}
/* #project .MH .background{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #project .MO .background{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#project .MH .background{	transform: scale(1.10);	}
#project .MO .background{	transform: scale(1.00);	}


#project .box
{
	z-index: 10;
	position: relative;
	width: 450px;
	padding: 75px 0 50px;
	margin: 0 auto;
	border: solid 1px #a6d1f0;
	background: rgba(0,0,0,0);
	/* background: linear-gradient(90deg, rgba(3,71,153,0.95), rgba(89,213,237,0.95) ); */
}

#project h2
{
	font-size: 18px;
	font-weight: bold;
	color: white;
	margin: 0 0 20px;
	text-align: center;

}
#project .text1
{
	font-size: 32px;
	font-weight: bold;
	line-height: 55px;
	color: white;
	margin: 0 0 50px;
	text-align: center;
}

#project .readmore{	margin: 0 auto;	}


/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#project{}
#project .sectionInner
{
	width: 100vw;
	padding: 10vw 0;
}
#project .background
{
	background: url("../image/index/project_bg_SP.jpg") bottom center/cover;
	transition: unset;
}
#project .MH .background{	transform: unset;	}
#project .MO .background{	transform: unset;	}

#project .box
{
	width: 70vw;
	padding: 10vw 0 7vw;
}

#project h2
{
	font-size: 5vw;
	margin: 0 0 3vw;
}
#project .text1
{
	font-size: 5vw;
	line-height: 8vw;
	margin: 0 0 10vw;
}

#project .img1
{
	width: 40vw;
}

}



/* ================================================================================
movie1
================================================================================ */

#movie1
{
	text-align: center;
}

#movie1 .moviebox
{
	width: 1000px;
	height: 600px;
	margin: 0 auto 20px;
	background-color: black;
padding: 60px;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1rem 0px;
color: white;
}


#movie1 p
{
	letter-spacing: 2px;
}

#movie1 iframe
{
	margin: 0 auto;
width: 880px;
height: 480px;
}



@media screen and (max-width: 767px)
{

#movie1
{
	text-align: center;
}

#movie1 .moviebox
{
	background-color: black;
	width: 90vw;
	height: 50vw;
	margin: 0 auto 4vw;
	background-color: white;
padding: 0;
border: 0px solid rgba(255, 255, 255, 0.3);
box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1rem 0px;
color: white;
}


#movie1 p
{
	letter-spacing: 2px;
}

#movie1 iframe
{
width: 90vw;
height: 50vw;
}

}
/* ================================================================================
introduce
================================================================================ */
#introduce{}
#introduce .sectionInner{	padding: 100px 5vw 50px;	}

#introduce h2
{
	font-size: 18px;
	font-weight: bold;
	color: #0ab6f3;
	margin: 0 0 20px;
	text-align: center;
}
#introduce .text1
{
	font-size: 24px;
	line-height: 55px;
	margin: 0 0 30px;
	font-weight: bold;
	text-align: center;
}

#introduce ul
{
	width: 90vw;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#introduce li{	margin: 0 2vw 50px;	}
#introduce li .img
{
	overflow: hidden;
	width: 40vw;
	margin: 0 auto;
}
#introduce li .img img{	transition: transform 1.0s;	}
/* #introduce li .MH .img img{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #introduce li .MO .img img{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#introduce li .MH .img img{	transform: scale(1.10);	}
#introduce li .MO .img img{	transform: scale(1.00);	}

#introduce li .box
{
	margin: -35px auto 0;
	width: 35vw;
	height: 100px;
	padding: 1rem 0 0 1rem;
	background:linear-gradient(to right,#004097, #60e8ff);
	/* transform: translateY(-35px); */
}

#introduce li .box p
{
	font-size: 20px;
	color: white;
	margin: 0 0 30px;

	transition: opacity 0.5s;
}
#introduce li:hover .box p{	opacity: 0.7;	}
#introduce li .box .readmore{	margin: 0 0 0 auto;	}


/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#introduce{}
#introduce .sectionInner{	padding: 3rem 0 0;	}
#introduce h2
{
	font-size: 4vw;
	margin: 0 0 5vw;
}
#introduce .text1
{
	font-size: 4.5vw;
	line-height: 6vw;
	margin: 0 0 10vw;
}

#introduce li{	margin: 0 0 10vw;	}

#introduce li .img img{	transition: unset;	}
#introduce li .MH .img img{	transform: unset;	}
#introduce li .MO .img img{	transform: unset;	}

#introduce li .box
{
	width: 80vw;	height: 18vw;
	padding: 3vw;
	transform: translateY(-7vw);
}

#introduce li .box p
{
	font-size: 5vw;
	color: white;
	margin: 0 0 4vw;

	transition: unset;
}
#introduce li:hover .box p{	opacity: 1.0;	}

#introduce li .img
{
	width: 90vw;
	margin: 0 auto;
}


}




/* ================================================================================
member
================================================================================ */
#member{	overflow: hidden;	}
#member .sectionInner
{
	padding: 4rem 0 5rem;
	background: linear-gradient(90deg,
		rgba(75, 207, 84, 1.0) 0%,
		rgba(101, 234, 254, 1.0) 100%
	);
}

#member h2
{
	margin: 0 0 2rem;

	color: white;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

#member .member
{
	position: relative;
	overflow: hidden;

	display: block;
	width: 430px;	height: 490px;
}
#member .member a::before
{
	content: "";

	z-index: 6;
	position: absolute;
	bottom: 0;	left: 0;

	display: block;
	width: 100%;	height: 50%;

	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

#member .member .thumb
{
	z-index: 5;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;
}

#member .member .num
{
	z-index: 10;
	position: absolute;
	top: 340px;	left: 30px;

	color: white;
	font-size: 14px;
	font-weight: bold;
}
#member .member .message
{
	z-index: 10;
	position: absolute;
	top: 370px;	left: 30px;

	color: white;
	font-size: 20px;
	line-height: 1.5;
}
#member .member .readmore
{
	z-index: 10;
	position: absolute;
	bottom: 30px;	right: 30px;
}

#member .member .thumb img{	transition: transform 1.0s;	}
/* #member .member .MH .thumb img{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #member .member .MO .thumb img{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#member .member .MH .thumb img{	transform: scale(1.10);	}
#member .member .MO .thumb img{	transform: scale(1.00);	}

#member .members .swiper-button-next
{
	top: 40%;	right: 0;
	background-color: white;
	width: 100px;	height: 100px;

	outline: none;
	transition: opacity 0.5s;
}
#member .members .swiper-button-next::after
{
	content: "";
	width: 60%;	height: 60%;
	background: url("../image/common/readmore_rmg_arrow.png") no-repeat center center/contain;
}
#member .members .swiper-button-next:hover{	opacity: 0.7	}

#member .members .swiper-button-prev
{
	top: 40%;	left: 0;
	background-color: white;
	width: 100px;	height: 100px;

	outline: none;
	transition: opacity 0.5s;
}
#member .members .swiper-button-prev::after
{
	content: "";
	width: 60%;	height: 60%;
	background: url("../image/common/readmore_rmg_arrow.png") no-repeat center center/contain;
	transform: rotate(180deg);
}

#member .members .swiper-button-prev:hover{	opacity: 0.7	}


/* ========================================
-430 x 5 = 2150
======================================== */
@media screen and (min-width: 2150px)
{

#member .members
{
	width: 2150px;
	margin: 0 auto;
}

}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#member .sectionInner{	padding: 10vw 0 15vw;	}
#member h2{	font-size: 4vw;	}
#member .member{	width: 60vw;	height: calc(60vw/430*490);	}
#member .member .num
{
	top: 45vw;	left: 5vw;
	font-size: 2.8vw;
}
#member .member .message
{
	top: 50vw;	left: 5vw;
	font-size: 3.2vw;
}
#member .member .readmore
{
	bottom: 4vw;	right: 5vw;
}

#member .member .thumb img{	transition: unset;	}
#member .member .MH .thumb img{	transform: unset;	}
#member .member .MO .thumb img{	transform: unset;	}

#member .members .swiper-button-next,
#member .members .swiper-button-prev
{
	width: 15vw;	height: 15vw;
	transition: unset;
}
#member .members .swiper-button-next:hover,
#member .members .swiper-button-prev:hover
{	opacity: 1;	}

}




/* ================================================================================
cher
================================================================================ */
#cher h2
{
	font-size: 18px;
	font-weight: bold;
	color: #0ab6f3;
	margin: 0 0 40px;
	text-align: center;

}

#cher{	padding: 3rem;	}
#cher .sectionInner
{
	width: 90%;
	height: 25vw;
	position: relative;
display: block;
	margin: 0 auto;

}

#cher .bbox
{
display: flex;
align-items: center;
width: 100%;
height: 100%;
	overflow: hidden;
}

#cher .background
{
	z-index: 0;
	position: absolute;
	top: 0vw;	left: 0vw;
	width: 90vw;	height: 100%;
	background: url("../image/index/cher_bg_PC.jpg") bottom center/cover;

	transition: transform 1.0s;
}

/* #cher .MH .background{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #cher .MO .background{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#cher .MH .background{	transform: scale(1.10);	}
#cher .MO .background{	transform: scale(1.00);	}

#cher .inner
{
	width: 1180px;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}

#cher .box
{
	z-index: 10;
	position: relative;

	width: 490px;
	margin: 0 0 0 400px;
}


#cher .text1
{
	font-size: 26px;
	font-weight:bold;
	line-height: 55px;
	margin: 0 0 20px;
}


#cher .readmore{	margin: 0 0 0 270px;	}


@media screen and (min-width: 768px) and (max-width: 1180px)
{

#cher .inner{	width: 100%;	}
#cher .box{	margin: 0 0 0 25vw;	}
#cher .readmore{	margin: 0 0vw 0 25vw;	}


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#cher h2
{
	font-size: 4vw;
		margin: 0 0 8vw;
}

#cher{	padding: 3rem 0 0;	}
#cher .sectionInner
{
	width: 90vw;	height: 68vw;
	margin: 0 auto;
	padding: 0rem 0;
}

#cher .bbox
{
height: 68vw;
}

#cher .background
{
	background: url("../image/index/cher_bg_SP.jpg") bottom center/cover;
	transition: unset;
}
#cher .MH .background{	transform: unset;	}
#cher .MO .background{	transform: unset;	}

#cher .inner{	width: 100%;	}
#cher .box
{
	width: 80vw;
	margin: 0 auto;
}



#cher .text1
{
	font-size: 4.5vw;
	line-height: 8vw;
	margin: 0 0 0 38vw;
}
#cher .readmore
{
	position: absolute;
	top :20vw;
	right: 0vw;
}

}




/* ================================================================================
organization
================================================================================ */
#organization{}
#organization .sectionInner{	padding: 100px 5vw;	}

#organization h2
{
	font-size: 18px;
	font-weight: bold;
	color: #0ab6f3;
	margin: 0 0 40px;
	text-align: center;

}

#organization ul
{
	width: 90vw;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#organization li
{
	position: relative;
	margin: 0 2vw;
}

#organization li .img
{
	overflow: hidden;
	width: 40vw;
	margin: 0 auto 3vw;
}

#organization li .img img{	transition: transform 1.0s;	}
/* #organization li .MH .img img{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #organization li .MO .img img{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#organization li .MH .img img{	transform: scale(1.10);	}
#organization li .MO .img img{	transform: scale(1.00);	}

#organization li .box
{
	display: flex;
	justify-content: space-between;
	padding: 0 0 0 0.5rem;
}
#organization li .box p
{
	font-size: 16px;
	font-weight: bold;
	transition: opacity 0.5s;
}

#organization li .MH .box p{	opacity: 0.7;	}

/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 800px)
{
	#organization li .box p
	{
		font-size: 1.8vw;
	}

}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#organization{}
#organization .sectionInner{	padding: 3rem 0;	}

#organization h2
{
	font-size: 4vw;
	margin: 0 0 8vw;
}

#organization li{	margin: 0 auto 10vw;	}
#organization li .img
{
	width: 90vw;
	margin: 0 0 4vw;
}
#organization li .img img{	transition: unset;	}
#organization li .MH .img img{	transform: unset;	}
#organization li .MO .img img{	transform: unset;	}

#organization li .box p
{
	font-size: 3.5vw;
	transition: unset;
}
#organization li .MH .box p{	opacity: 1;	}

}




/* ================================================================================
buttons
================================================================================ */
#buttons{	background-color: #e6eeee;	}
#buttons .sectionInner{	padding: 80px 5vw;	}

#buttons ul
{
	width: 90vw;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#buttons li
{
	margin: 0 2vw;
	background-color: white;
	width: 40vw;
}
#buttons li a{	width: 100%;	height: 100%;	}
#buttons li .box
{
	display: flex;	justify-content: space-between;	align-items: center;
	width: 100%;	height: 100%;
	padding: 3rem 0 3rem 1rem;
}

#buttons li p
{
	font-size: 16px;
	font-weight: bold;
	transition: opacity 0.5s;
}

#buttons li .MH p{	opacity: 0.7;	}


/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{

}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#buttons .sectionInner{	padding: 3rem 0;	}

#buttons li
{
	margin: 0 auto 8vw;
	width: 90vw;;
}
#buttons li .box{	padding: 10vw 5vw;	}
#buttons li p
{
	font-size: 4vw;
	transition: unset;
}
#buttons li .MH p{	opacity: 1;	}

}





/* ======================================== end ======================================== */