@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); */


/*
essential
==============================*/

/* mvp ----------*/
#mvp { background-image: url(../img/common/page_kv.jpg); }


/* reBoot ----------*/
#reBoot {}
#reBoot .w { width: 100%; max-width: 74rem; margin: auto; }
#reBoot h2 { text-align: center; }
#reBoot h3 { text-align: center; font-size: 4.1rem; font-weight: 500; margin-top: 5rem; }
#reBoot h3 strong { font-weight: 500; color: #FFFF8B; }
#reBoot p { margin-top: 6rem; }
@media screen and (max-width:480px) { /* s */
	#reBoot h3 { font-size: 8vw; margin-top: 6vw; }
	#reBoot p { margin-top: 6vw; }
}


/* essential ----------*/
.essential {}
.essential p.w9 { max-width: 90rem; margin: auto; }
.essential_list { margin-top: 6rem; }
.essential_list li { padding: 2.5rem 2rem; background-color: #FFF; box-shadow: 3px 4px 10px 0 rgba(154, 215, 250, 0.20); }
.essential_list li h4 { display: grid; place-items: center; }
.essential_list li h4 span { color: #73B6DA; font-size: 2.2rem; font-weight: 500; text-align: center; }
.essential_list li .p { display: block; margin-top: 2rem; text-align: center; }
.essential_list li p { margin-top: 2rem; line-height: 1.86; }
.essential_list2 { margin-top: 6rem; }
.essential_list2 li { padding: 2rem; background-color: #5478AB; text-align: center; box-shadow: 2px 2px 8px 0 rgba(6, 102, 158, 0.38); }
.essential_list2 li h4 { display: inline-block; padding: 0.3rem 0.8rem; border: solid 1px #9AD7FA; font-size: 1.3rem; font-weight: 500; }
.essential_list2 li p { display: block; text-align: center; line-height: 2; }
.essential_list2 li h3 { color: #FFFF8B; font-size: 3.8rem; font-weight: 500; }
.essential_list2 li .p { display: block; margin-top: 3rem; }
.essential .type { margin-top: 20rem; }
.essential .type .w1 { display: flex; flex-direction: row-reverse; gap: 6rem; align-items: start; }
.essential .type .w1 .pw,
.essential .type .w1 .tw { width: calc((100% - 6rem) / 2); }
.essential .type .w1 .pw { position: relative; z-index: 3; padding-top: 4rem; }
.essential .type .w1 .pw img { width: 140%; max-width: none; }
.essential .type .w1 .tw { position: relative; padding-bottom: 5rem; }
.essential .type .w1 .tw::before { content: ""; position: absolute; z-index: 2; top: -5rem; left: -5rem; width: calc(100% + 30rem); height: calc(100% + 5rem); background-color: #5478AB; }
.essential .type .w1 .tw h2 { position: relative; z-index: 3; font-size: 3.3rem; font-weight: 500; }
.essential .type .w1 .tw h3 { position: relative; z-index: 3; margin-top: 2rem; font-size: 3rem; font-weight: 500; }
.essential .type .w1 .tw h2 strong,
.essential .type .w1 .tw h3 strong { color: #FFFF8B; font-weight: 500; }
.essential .type .w1 .tw p { position: relative; z-index: 3; margin-top: 3rem; }
.essential .type .w2 { position: relative; padding: 0 10rem; }
.essential .type .w2::before,
.essential .type .w2::after { content: ""; position: absolute; width: 0; border-left: solid 2px #E4F0F7; left: 5.2rem; }
.essential .type .w2::before { height: 20rem; bottom: calc(100% + 1.5rem); }
.essential .type .w2::after { height: calc(100% - 8rem); top: 8rem; }
.essential .type .w2 h4 { font-size: 2.4rem; color: #FFFF8B; font-weight: 500; margin-top: 5rem; }
.essential .type .w2 > h4 { position: relative; }
.essential .type .w2 > h4:first-child:before { content: ""; position: absolute; display: block; top: 0; left: -6.9rem; width: 4.4rem; aspect-ratio: 44 / 63; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/essential/icon_light.svg); }
.essential_list3 { margin-top: 2.5rem; }
.essential_list3 li { list-style: disc; color: #FFFF8B; list-style-position: outside; margin-left: 2rem; }
.essential_list3 li strong { font-weight: 500; }
.essential_list3 li span { color: #FFF; }
.essential_list4 { margin-top: 2.5rem; }
.essential_list4 h5 { font-size: 2rem; color: #FFFFBA; font-weight: 500; }
.essential_list4 > div > li { padding: 2rem; background-color: #5478AB; display: flex; align-items: center; }
.essential_list4 > div > li .tw { width: 70%; }
.essential_list4 > div > li .tw ul { margin-top: 1rem; }
.essential_list4 > div > li .tw ul li { list-style: disc; list-style-position: outside; margin-left: 2rem; }
.essential_list4 > div > li .p { width: 30%; }
@media screen and (max-width:1440px) {
	.essential .type .w1 .pw img { width: 50vw; }
}
@media screen and (max-width:896px) { /* m */
	.essential_list_wrap { max-width: 50rem; margin-left: auto !important; margin-right: auto !important; }
	.essential .type .w1 { flex-direction: column; gap: 4rem;  }
	.essential .type .w1 .pw { width: 100%; }
	.essential .type .w1 .pw img { width: calc(100% + 3rem); }
	.essential .type .w1 .tw { width: 85%; }
	.essential .type .w1 .tw::before { top: -10rem; left: -5rem; width: calc(100% + 10rem); height: calc(100% + 10rem); }
}
@media screen and (max-width:480px) { /* s */
	.essential .type { margin-top: 6rem; }
	.essential .type .w2 { padding: 0 0 0 5rem; }
	.essential .type .w2::before,
	.essential .type .w2::after { left: 0.2rem; }
}


/* essential1 ----------*/
#essential1 { overflow: hidden; }


/* essential2 ----------*/
#essential2 { overflow: hidden; margin-bottom: -7.1rem; padding-bottom: 10rem !important; }