@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css?id=9);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 index
==============================*/

/* common ----------*/
.road { position: absolute; pointer-events: none; }
@media screen and (max-width:768px) {
	.road .rd1 { stroke-width: 30; }
	.road .rd2 { stroke-width: 4; }
}
@media screen and (max-width:480px) { /* s */
	.road .rd1 { stroke-width: 20; }
	.road .rd2 { stroke-width: 3; }
}

/* bodyWrap ----------*/
#bodyWrap .inner { position: relative; max-width: 116.7rem; margin: 0 auto; padding: 0 2rem; }

/* mv ----------*/
#mv { position: relative; z-index: 10; }
#mv ul {}
#mv ul li { width: 100%; aspect-ratio: 145 / 67; background-repeat: no-repeat; background-position: center; background-size: cover; }
#mv .owl-dots { display: none !important; }
#mv h2 { position: absolute; z-index: 5; width: 100%; text-align: center; top: 60%; transform: translateY(-50%); }
@media screen and (max-width:880px) {
	#mv h2 img { width: 40vw; }
}
@media screen and (max-width:480px) { /* s */
	#mv { padding-top: 6rem; transform: scale(1.2,1.2);  transform-origin: center top; }
}

/* about ----------*/
#about {
	background-image: url(../img/index/about_bg_01.png), url(../img/common/cloud_01.svg);
	background-repeat: no-repeat;
	background-position: center top, center bottom;
	background-size: 1440px auto, 100vw 20rem;
	margin-top: -10rem;
}
#about .inner {
	background-image: url(../img/index/about_bg_02.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	padding-bottom: 25rem;
}
#about .img_01 { position: relative; z-index: 10; }
#about .txt_01 { position: relative; z-index: 10; /*max-width: 86rem;*/ max-width: 70rem; margin: auto; margin-top: 4rem; padding: 0 8rem; }
#about .txt_01 p { color: #5F5049; font-size: 1.8rem; font-weight: bold; line-height: 2.27; }
#about .ov_bg { z-index: 11; width: 38%; top: -10rem; }
#about .ov_01 { left: -13rem; }
#about .ov_02 { right: -13rem; }
#about .road { z-index: 1; top: -3rem; left: 1rem; width: 82%; height: calc(100% + 12rem); }
@media screen and (max-width:1440px) {
	#about { background-size: contain; }
}
@media screen and (max-width:1260px) { /* x */
	#about .txt_01 { max-width: 50rem; }
	#about .ov_bg { top: -4vw; }
	#about .ov_01 { left: -4vw; }
	#about .ov_02 { right: -6vw; }
}
@media screen and (max-width:1024px) { /* l */
	#about .ov_bg { width: 30%; }
}
@media screen and (max-width:480px) { /* s */
	#about { margin-top: 0; background-size: 130% auto, 100vw 10rem; }
	#about .inner { padding-bottom: 17rem; }
	#about .img_01 { transform: scale(1.2,1.2); }
	#about .txt_01 p { font-size: 1.6rem; line-height: 2; }
	#about .ov_01 { top: 8vw; }
	#about .ov_02 { top: 17vw; }
}


/* greeting ----------*/
#greeting { background-color: #FFF; }
#greeting .inner { padding-bottom: 16rem; padding-top: 1rem; }
#greeting .w { position: relative; display: flex; align-items: center; margin-top: -6rem; }
#greeting .w::after { content: ""; width: 70%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #E2F1F6; top: 0; left: 0; border-radius: 8rem 0 0 8rem; }
#greeting .w .tw { position: relative; width: 45%; z-index: 2; padding: 1.5rem 0 4rem 0; text-align: center; }
#greeting .w .tw h2 img { max-width: 19rem; }
#greeting .w .tw .btw { text-align: center; margin-top: 4.6rem; }
#greeting .w .pw { position: absolute; right: 0; z-index: 2; width: 50%; }
#greeting .w .pw img { position: relative; left: -10rem; max-width: 56.7rem; margin-top: 5rem; }
#greeting .ov_bg { z-index: 11; }
#greeting .ov_01, #greeting .ov_02 { width: 16%; top: -10rem; }
#greeting .ov_01 { left: -13rem; }
#greeting .ov_02 { right: -16rem; }
#greeting .ov_03 { width: 7.2%; left: 0; bottom: 15rem; }
#greeting .ov_04 { width: 8.2%; left: 33%; top: -1rem; }
#greeting .ov_05 { width: 10%; left: 18%; bottom: 5rem; }
#greeting .road { z-index: 1; top: 8rem; right: 16%; width: 61.5%; height: 48rem; }
@media screen and (max-width:1260px) { /* x */
	#greeting .ov_01, #greeting .ov_02 { top: -4vw; }
	#greeting .ov_01 { left: 0rem; }
	#greeting .ov_02 { right: -3rem; }
}
@media screen and (max-width:896px) { /* m */
	#greeting .inner { padding-bottom: 16vw; }
	#greeting .w .tw { padding: 1.5rem 0; }
	#greeting .w .tw .btw { margin-top: 1rem; }
	#greeting .w .pw img { left: 0; max-width: 100%; margin-top: 0; }
	#greeting .road { height: calc(100% + 6rem); }
}
@media screen and (max-width:768px) {
	#greeting .w .tw { width: 40%; }
	#greeting .w .pw { width: 60%; }
	#greeting .ov_01 { top: -10vw; }
	#greeting .ov_05 { bottom: 9rem; }
}
@media screen and (max-width:480px) { /* s */
	#greeting .w .tw h2 img { max-width: 12rem; }
	#greeting .w .tw .btw { transform: scale(0.9,0.9); }
	#greeting .ov_05 { bottom: 2rem; }
}

/* business ----------*/
#business { background-color: #FFF; }
#business .inner { padding-top: 15rem; }
#business .w { position: relative; display: flex; flex-direction: row-reverse; align-items: center; }
#business .w::after { content: ""; width: 70%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #FFF5FB; top: 0; right: 0; border-radius: 0 8rem 8rem 0; }
#business .w .tw { position: relative; width: 45%; z-index: 2; padding: 1.5rem 0 4rem 0; text-align: center; }
#business .w .tw h2 img { max-width: 19rem; }
#business .w .tw .btw { text-align: center; margin-top: 4.6rem; }
#business .w .pw { position: absolute; left: 0; z-index: 2; width: 50%; }
#business .w .pw img { position: relative; right: -10rem; }
#business .ov_bg { z-index: 11; }
#business .ov_01 { width: 19.8%; top: 4rem; left: -18rem; }
#business .ov_02 { width: 12.6%; top: 2rem; right: -6rem; }
#business .ov_03 { width: 6.6%; top: 2rem; left: 55%; }
#business .ov_04 { width: 39.4%; bottom: -17rem; right: 6rem; }
#business .road { z-index: 1; top: 16rem; left: 9rem; width: 73.2%; height: 81.3rem; }
@media screen and (max-width:1260px) { /* x */
	#business .ov_01 { top: 4vw; left: -12rem; }
	#business .ov_02 { top: 2vw; right: -3rem; }
}
@media screen and (max-width:896px) { /* m */
	#business .inner { padding-top: 15vw; }
	#business .w .tw { padding: 1.5rem 0; }
	#business .w .tw .btw { margin-top: 1rem; }
	#business .w .pw img { left: 0; max-width: 100%; margin-top: 0; }
	#business .road { height: calc(100% + 25vw); }
}
@media screen and (max-width:768px) {
	#business .w .tw { width: 40%; }
	#business .w .pw { width: 60%; }
	#business .ov_01 { top: 4vw; left: -5rem; }
	#business .ov_02 { top: 2vw; right: -3rem; }
	#business .ov_04 {bottom: -7rem; }
}
@media screen and (max-width:480px) { /* s */
	#business .w .tw h2 img { max-width: 12rem; }
	#business .w .tw .btw { transform: scale(0.9,0.9); }
	#business .road { height: calc(100% + 18vw); }
}

/* ourValues ----------*/
#ourValues {
	background-image: url(../img/common/cloud_02.svg), url(../img/common/cloud_01.svg);
	background-repeat: no-repeat;
	background-position: center top, center bottom;
	background-size: 100vw 20rem;
}
#ourValues .inner { padding-top: 33rem; padding-bottom: 8.5rem; }
#ourValues .w { position: relative; display: flex; align-items: center; }
#ourValues .w::after { content: ""; width: 80%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #E5F8E0; top: 0; left: 0; border-radius: 8rem 0 0 8rem; }
#ourValues .w .tw { position: relative; width: 45%; z-index: 2; padding: 1.5rem 0 4rem 0; text-align: center; }
#ourValues .w .tw h2 img { max-width: 29rem; }
#ourValues .w .tw .btw { text-align: center; margin-top: 4.6rem; }
#ourValues .w .pw { position: absolute; right: 0; z-index: 3; width: 60%; }
#ourValues .w .pw img { position: relative; max-width: 67rem; margin-top: -5rem; }
#ourValues .ov_bg { z-index: 11; }
#ourValues .ov_01 { width: 7.5%; top: 40%; left: -8rem; }
#ourValues .ov_02 { width: 10%; bottom: 11rem; left: -2rem; }
#ourValues .ov_03 { width: 7.4%; top: 34%; right: -11rem; }
#ourValues .road { z-index: 2; width: 73.3%; top: 70%; left: 15%; }
@media screen and (max-width:1260px) { /* x */
	#ourValues .ov_01 { left: -1rem; }
	#ourValues .ov_02 { left: 3rem; }
	#ourValues .ov_03 { right: 2rem; }
	#ourValues .road { height: calc(100% - 18rem); }
}
@media screen and (max-width:896px) { /* m */
	#ourValues .inner { padding-top: 33vw; padding-bottom: 8.5vw; }
	#ourValues .w .tw { padding: 1.5rem 0; }
	#ourValues .w .tw .btw { margin-top: 1rem; }
	#ourValues .w .pw img { left: 0; max-width: 100%; margin-top: 0; }
	#ourValues .ov_02 { bottom: 1rem; left: 3rem; }
	#ourValues .ov_03 { bottom: 6rem; right: 2rem; }
}
@media screen and (max-width:768px) {
	#ourValues .w .tw { width: 40%; }
	#ourValues .w .pw { width: 60%; }
}
@media screen and (max-width:480px) { /* s */
	#ourValues .road { height: calc(100% - 10rem); }
}
@media screen and (max-width:480px) { /* s */
	#ourValues { background-size: 100vw 10rem; }
	#ourValues .w .tw h2 img { max-width: 12rem; }
	#ourValues .w .tw .btw { transform: scale(0.9,0.9); }
}

/* valuesEnvironment ----------*/
#valuesEnvironment { background-color: #FFF; }
#valuesEnvironment .inner { padding-top: 15rem; }
#valuesEnvironment .w { position: relative; display: flex; flex-direction: row-reverse; align-items: center; }
#valuesEnvironment .w::after { content: ""; width: 70%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #FAE9E9; top: 0; right: 0; border-radius: 0 8rem 8rem 0; }
#valuesEnvironment .w .tw { position: relative; width: 45%; z-index: 2; padding: 1.5rem 0 4rem 0; text-align: center; }
#valuesEnvironment .w .tw h2 img { max-width: 25rem; }
#valuesEnvironment .w .tw .btw { text-align: center; margin-top: 4.6rem; }
#valuesEnvironment .w .pw { position: absolute; left: 0; z-index: 2; width: 50%; }
#valuesEnvironment .w .pw img { position: relative; right: -10rem; }
#valuesEnvironment .ov_bg { z-index: 11; }
#valuesEnvironment .ov_01 { width: 10%; top: 50%; left: -10rem; }
#valuesEnvironment .ov_02 { width: 16%; bottom: 2rem; right: -4rem; }
#valuesEnvironment .road { z-index: 1; top: 20rem; left: 9rem; width: 73.2%; height: 81.3rem; }
@media screen and (max-width:1260px) { /* x */
	#valuesEnvironment .ov_01 { left: 0; }
	#valuesEnvironment .ov_02 { right: 0; bottom: -2rem; }
}
@media screen and (max-width:896px) { /* m */
	#valuesEnvironment .inner { padding-top: 15vw; }
	#valuesEnvironment .w .tw { padding: 1.5rem 0; }
	#valuesEnvironment .w .tw .btw { margin-top: 1rem; }
	#valuesEnvironment .w .pw img { left: 0; max-width: 100%; margin-top: 0; }
	#valuesEnvironment .road { height: calc(100% + 25vw); }
}
@media screen and (max-width:768px) {
	#valuesEnvironment .w .tw { width: 40%; }
	#valuesEnvironment .w .pw { width: 60%; }
}
@media screen and (max-width:480px) { /* s */
	#valuesEnvironment .w .tw h2 img { max-width: 12rem; }
	#valuesEnvironment .w .tw .btw { transform: scale(0.9,0.9); }
	#valuesEnvironment .road { height: calc(100% + 18vw); }
}

/* overview ----------*/
#overview {
	background-image: url(../img/common/cloud_02.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100vw 20rem;
}
#overview .inner { padding-top: 33rem; padding-bottom: 8.5rem; }
#overview .w { position: relative; display: flex; align-items: center; }
#overview .w::after { content: ""; width: 80%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #ECEBF7; top: 0; left: 0; border-radius: 8rem 0 0 8rem; }
#overview .w .tw { position: relative; width: 45%; z-index: 2; padding: 1.5rem 0 4rem 0; text-align: center; }
#overview .w .tw h2 img { max-width: 19rem; }
#overview .w .tw .btw { text-align: center; margin-top: 4.6rem; }
#overview .w .pw { position: absolute; right: 0; z-index: 3; width: 60%; }
#overview .w .pw img { position: relative; max-width: 67rem; margin-top: -5rem; }
#overview .ov_bg { z-index: 11; }
#overview .ov_01 { width: 5.8%; top: 50%; left: -10rem; }
#overview .ov_02 { width: 11.4%; bottom: 1rem; left: 0; }
#overview .ov_03 { width: 22.3%; bottom: 2rem; right: -11rem; }
#overview .road { z-index: 2; width: 73.3%; top: 70%; left: 10%; }
@media screen and (max-width:1260px) { /* x */
	#overview .ov_01 { left: -1rem; }
	#overview .ov_02 { left: 3rem; }
	#overview .ov_03 { right: 2rem; }
}
@media screen and (max-width:896px) { /* m */
	#overview .inner { padding-top: 33vw; padding-bottom: 8.5vw; }
	#overview .w .tw { padding: 1.5rem 0; }
	#overview .w .tw .btw { margin-top: 1rem; }
	#overview .w .pw img { left: 0; max-width: 100%; margin-top: 0; }
	#overview .ov_02 { bottom: 1rem; left: 3rem; }
	#overview .ov_03 { bottom: 6rem; right: 2rem; }
}
@media screen and (max-width:768px) {
	#overview .w .tw { width: 40%; }
	#overview .w .pw { width: 60%; }
}
@media screen and (max-width:480px) { /* s */
	#overview .road { height: calc(100% + 100vw); }
}
@media screen and (max-width:480px) { /* s */
	#overview { background-size: 100vw 10rem; }
	#overview .w .tw h2 img { max-width: 12rem; }
	#overview .w .tw .btw { transform: scale(0.9,0.9); }
}

/* faq ----------*/
#faq { background-color: #FFF; padding: 8rem 0; }
#faq .w { position: relative;  }
#faq .w::after { content: ""; width: 100%; height: 100%; position: absolute; display: block; z-index: 1; background-color: #FFF696; top: 0; left: 0; border-radius: 8rem; }
#faq .w .tw { position: relative; width: 100%; z-index: 3; padding: 3rem 0 3rem 0; text-align: center; }
#faq .w .tw h2 img { max-width: 30rem; }
#faq .w .tw .btw { text-align: center; margin-top: 8rem; }
#faq .ov_bg { z-index: 11; width: 40%; }
#faq .ov_01 { top: -6rem; left: -1rem; }
#faq .ov_02 { bottom: -6rem; right: -1rem; }
@media screen and (max-width:480px) { /* s */
	#faq .w .tw h2 img { max-width: 20rem; }
	#faq .w .tw .btw { margin-top: 2rem; }
	#faq .ov_01 { top: -2rem; left: 0; }
	#faq .ov_02 { bottom: -10rem; right: 0; }
}