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

@import url(reset.css);
@import url(common.css);
@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
==============================*/


/* mv ----------*/
#mv { position: relative; text-align: center; margin: 0 -23.5%; background-image: url(../img/index/mv_bg_repeat.png); background-repeat: repeat-x; background-position: center bottom; background-size: 90rem; }
#mv h1 { position: absolute; top: 0; left: 0; width: 100%; text-align: center; }
#mv img { width: 100%; max-width: 212rem; }
@media screen and (max-width:1440px) { /* x */
	#mv { background-size: 42.5%; }
}
@media screen and (max-width:896px) { /* m */
	#mv { margin: 0 -80%; }
	#mv .bg.sp { width: 39%; }
}


/* info ----------*/
#info {}
#info .inner { position: relative; }
#info .inner::after { content: ""; position: absolute; z-index: -1; top: 0; left: 3rem; width: 1000%; height: 100%; background-color: #007BC7; }
#info .w { padding: 3rem 0 4rem 3.5rem; display: grid; grid-template-columns: 30rem 1fr; gap: 5rem; }
#info .w .tw { position: relative; padding-bottom: 2rem; }
#info .w .tw .h2i i {  left: calc(100% + 2rem); width: 4.08rem; }
#info .w .tw .btw { position: absolute; bottom: 0; right: 0; }
#info .w .lw {}
@media screen and (max-width:896px) { /* m */
	#info .w { grid-template-columns: 1fr; gap: 0; padding-bottom: 10rem; }
	#info .w .tw { display: contents; }
	#info .w .tw .h2i { margin-bottom: 2rem; }
	#info .w .tw .btw { bottom: 3rem; right: 2rem; }
}
@media screen and (max-width:480px) { /* s */
	#info .w { padding: 2rem 0 8rem 2rem; }
	#info .w .tw .h2i { margin-bottom: 1rem; }
	#info .w .tw .btw { bottom: 2rem; }
}


/* people ----------*/
#people {
	background-image: url(../img/index/people_bg_01.png), url(../img/index/people_bg_02.png), url(../img/index/people_bg_03.png);
	background-position: right top, left bottom, right bottom;
	background-size: 48rem auto;
	background-repeat: no-repeat;
}
#people .h2i.-border span { border-color: #E60012; }
#people .h2i i { width: 3.4rem; bottom: 90%; left: calc(50% - 1.7rem); }
#people .h3i { text-align: center; margin-bottom: 4rem; }
@media screen and (max-width:1440px) {
	#people .h2i i { width: 3rem; left: calc(50% - 1.5rem); }
}
@media screen and (max-width:480px) { /* s */
	#people { background-size: 50% auto; background-position: right top -3rem, left bottom, right bottom; padding-left: 10% !important; padding-right: 10% !important; }
}


/* about ----------*/
#about {}
#about .h2i.-border span { border-color: #FED93F; }
#about .h2i i { bottom: 0; right: calc(100% + 2rem); width: 6.7rem; }
#about .w { align-items: center; }
#about .w .pw { margin-right: -40%; }
#about .w .tw {}
#about .w .tw p { line-height: 2.3; }
#about .w .tw .btw { margin-top: 3.5rem; }
@media screen and (max-width:1260px) { /* x */
	#about .h2i { margin-left: 3rem; }
	#about .h2i i { right: calc(100% + 1rem); width: 4rem; }
	#about .w .pw { margin-right: -20%; }
}
@media screen and (max-width:896px) { /* m */
	#about .w .pw { margin-right: 0; text-align: center; }
	#about .w .tw .btw { text-align: right; }
}


/* type ----------*/
#type {
	background-image: url(../img/index/type_bg_01.png);
	background-position: right bottom;
	background-size: 48rem auto;
	background-repeat: no-repeat;
}
#type .h2i.-border span { border-color: #5BB531; }
#type .h2i i { bottom: 0; right: calc(100% + 2rem); width: 4.5rem; }
#type .w { align-items: center; }
#type .w .pw {}
#type .w .pw img { width: 100%; max-width: 31.6rem; }
#type .w .pw .btw { margin-top: 2rem; margin-right: 2rem; text-align: right; }
#type .w .tw {}
#type .w .tw p { line-height: 2.3; }
#type .w .tw .btw { margin-top: 3.5rem; display: none; }
@media screen and (max-width:1260px) { /* x */
	#type .h2i { margin-left: 3rem; }
	#type .h2i i { right: calc(100% + 1rem); width: 3rem; }
}
@media screen and (max-width:896px) { /* m */
	#type .w .pw { text-align: center; }
	#type .w .pw .btw { display: none; }
	#type .w .tw .btw { display: block; text-align: right; }
}

/* environment ----------*/
#environment {}
#environment .h2i.-border span { border-color: #FED93F; }
#environment .h2i i { bottom: 0; right: calc(100% + 1rem); width: 5rem; }
#environment .w { align-items: center; }
#environment .w .pw { text-align: right; }
#environment .w .pw img { width: 100%; max-width: 46.4rem; }
#environment .w .pw .btw { margin-top: 6rem; margin-right: 6rem; text-align: right; }
#environment .w .tw {}
#environment .w .tw p { line-height: 2.3; }
#environment .w .tw .btw { margin-top: 3.5rem; display: none; }
@media screen and (max-width:1260px) { /* x */
	#environment .h2i { margin-left: 3rem; }
	#environment .h2i i { right: calc(100% + 1rem); width: 4rem; }
}
@media screen and (max-width:896px) { /* m */
	#environment .w .pw { text-align: center; }
	#environment .w .pw .btw { display: none; }
	#environment .w .tw .btw { display: block; text-align: right; }
}


/* faq ----------*/
#faq {
	background-image: url(../img/index/faq_bg_01.png);
	background-position: right top;
	background-size: 48rem auto;
	background-repeat: no-repeat;
}
#faq .h2i.-border span { /*border-color: #5BB531;*/ border-color: #FED93F; }
#faq .h2i i { bottom: 0; right: calc(100% + 2rem); width: 4.5rem; }
#faq .w { align-items: center; }
#faq .w .pw {}
#faq .w .pw img { width: 100%; max-width: 34rem; }
#faq .w .pw .btw { margin-top: 2rem; margin-right: 2rem; text-align: right; }
#faq .w .tw {}
#faq .w .tw p { line-height: 2.3; }
#faq .w .tw .btw { margin-top: 3.5rem; display: none; }
@media screen and (max-width:1260px) { /* x */
	#faq .h2i { margin-left: 3rem; }
	#faq .h2i i { right: calc(100% + 1rem); width: 4rem; }
}
@media screen and (max-width:896px) { /* m */
	#faq .w .pw { text-align: center; }
	#faq .w .pw .btw { display: none; }
	#faq .w .tw .btw { display: block; text-align: right; }
}