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


/*
 about_us
==============================*/



/* though ------------------------------------------------------------*/
#though {}
#though #mvp h1 .cursive { top: 0.4em; left: 44%; width: 6.2em; }
#though #main .w { display: flex; flex-direction: row-reverse; }
#though #main .w.-all { display: block; }
#though #main .w.-r { flex-direction: row; margin-top: 10rem; align-items: self-start; }
#though #main .w .pw { position: relative; z-index: 1; width: 50%; }
#though #main .w .tw { position: relative; z-index: 2; width: 50%; margin-top: 12rem; margin-right: -10rem; padding: 5rem 6rem 4rem; background-color: #F2F5F8; }
#though #main .w.-all .tw { width: 100%; margin-top: 6rem; margin-right: 0; padding-bottom: 0; }
#though #main .w .tw.-kazari { position: relative; }
#though #main .w .tw.-kazari::before { position: absolute; top: 0; left: 0; content: url(../img/about_us/though_kazari.svg); }
#though #main .w .tw h3 { position: relative; margin-bottom: 2.5rem; font-size: 2.8rem; font-weight: 600; }
#though #main .w .tw h3 .cursive { bottom: -2rem; right: 0; }
#though #main .w .tw h2 { margin-bottom: 2rem; font-size: 3.4rem; font-weight: 700; }
#though #main .w .tw p { line-height: 2.3; }
#though #main .w .tw mark { color: #031C84; background: linear-gradient(transparent 40%, rgba(253, 236, 146, 0.78) 40%); font-weight: 700; }
#though #main .w.-r .tw { margin-right: auto; margin-left: -10rem; margin-top: -5rem; }
#though #main .fplw { position: relative; }
#though #main .fplw .cursive { top: -8rem; left: 4rem; }
@media screen and (max-width:1400px) {
	#though #main .w .tw { margin-right: -5rem; padding: 5rem; }
}
@media screen and (max-width:1200px) {
	#though #main .w { display: block; }
	#though #main .w .pw { width: 90%; margin-left: 10%; }
	#though #main .w .tw { width: 95%; margin-right: 0; margin-top: -5rem; }
	#though #main .w.-r { margin-top: 4rem; }
	#though #main .w.-r .pw { margin-left: 0; margin-right: 10%; }
	#though #main .w.-r .tw { margin-left: 5%; }
}
@media screen and (max-width:480px) { /* s */
	#though #main .w .tw { padding: 6rem 2rem 5rem 5rem; }
	#though #main .w .tw h3 { margin-bottom: 1rem; font-size: 2rem; }
	#though #main .w .tw h3 .cursive { bottom: -4rem; right: -7rem; transform: scale(0.6, 0.6); }
	#though #main .w .tw h2 { margin-bottom: 1.5rem; font-size: 3rem; }
	#though #main .w.-r .tw { padding-bottom: 0; }
	#though #main .fplw .cursive { left: -4rem; transform: scale(0.6, 0.6); }
}


/* about ----------*/
#about { max-width: 160rem; margin: auto; }


/* message ----------*/
#message {}
#message #mvp h1 .cursive { top: -3em; left: 44%; width: 6.2em; }
#message #mvp .pw { height: 65rem; }
#message #main .sec { padding-top: 4rem !important; }
#message #main .sub_text h2 { font-size: 3.6rem; }
#message #main .w { display: flex; flex-direction: row-reverse; }
#message #main .w.-all { display: block; }
#message #main .w.-r { flex-direction: row; margin-top: 10rem; align-items: self-start; }
#message #main .w .pw { position: relative; z-index: 1; width: 50%; }
#message #main .w .tw { position: relative; z-index: 2; width: 50%; margin-top: 12rem; margin-right: -10rem; padding: 5rem 6rem 4rem; background-color: #F2F5F8; }
#message #main .w.-all .tw { width: 100%; margin-top: 6rem; margin-right: 0; padding-bottom: 0; }
#message #main .w .tw.-kazari { position: relative; }
#message #main .w .tw.-kazari::before { position: absolute; top: 0; left: 0; content: url(../img/about_us/though_kazari.svg); }
#message #main .w .tw h3 { position: relative; margin-bottom: 2.5rem; font-size: 2.8rem; font-weight: 600; }
#message #main .w .tw h3 .cursive { bottom: -2rem; right: 0; }
#message #main .w .tw h2 { margin-bottom: 2rem; font-size: 3.4rem; font-weight: 700; }
#message #main .w .tw p { line-height: 2.3; }
#message #main .w .tw mark { color: #031C84; background: linear-gradient(transparent 40%, rgba(253, 236, 146, 0.78) 40%); font-weight: 700; }
#message #main .w.-r .tw { margin-right: auto; margin-left: -10rem; margin-top: -5rem; }
#message #main .fplw { position: relative; }
#message #main .fplw .cursive { top: -8rem; left: 4rem; }
#message .name { text-align: right; font-size: 1.8rem; vertical-align: baseline; margin-top: 3rem; line-height: 1.6 !important; }
#message .name span { font-size: 2.8rem; vertical-align: baseline; }
@media screen and (max-width:1400px) {
	#message #main .w .tw { margin-right: -5rem; padding: 5rem; }
}
@media screen and (max-width:1200px) {
	#message #main .w { display: block; }
	#message #main .w .pw { width: 90%; margin-left: 10%; }
	#message #main .w .tw { width: 95%; margin-right: 0; margin-top: -5rem; }
	#message #main .w.-r { margin-top: 4rem; }
	#message #main .w.-r .pw { margin-left: 0; margin-right: 10%; }
	#message #main .w.-r .tw { margin-left: 5%; }
}
@media screen and (max-width:1100px) {
	#message #mvp .pw { height: 57vw; }
}
@media screen and (max-width:480px) { /* s */
	#message #mvp .pw { height: 65vw; }
	#message #main .sec { padding-top: 0 !important; }
	#message #main .sub_text h2 { font-size: 2.6rem; }
	#message #main .w .tw { padding: 6rem 2rem 5rem 5rem; }
	#message #main .w .tw h3 { margin-bottom: 1rem; font-size: 2rem; }
	#message #main .w .tw h3 .cursive { bottom: -4rem; right: -7rem; transform: scale(0.6, 0.6); }
	#message #main .w .tw h2 { margin-bottom: 1.5rem; font-size: 3rem; }
	#message #main .w.-r .tw { padding-bottom: 0; }
	#message #main .fplw .cursive { left: -4rem; transform: scale(0.6, 0.6); }
	#message .name { font-size: 1.6rem; }
	#message .name span { font-size: 2rem; }
}

/* future ----------*/
#future {}



/* specializes ------------------------------------------------------------*/
#specializes {}
#specializes #mvp h1 .cursive { top: -2.6em; left: 14%; width: 7.4em; }

/* ourBusiness ----------*/
#ourBusiness { margin-top: 10rem; }
#ourBusiness h2 { position: relative; margin-bottom: 8rem; padding-bottom: 3rem; font-size: 3.4rem; font-weight: 700; }
#ourBusiness h2::before, #ourBusiness h2::after { position: absolute; content: ""; }
#ourBusiness h2::before { top: -15rem; left: -4rem; width: 0; height: 28rem; border-left: solid 1px #BCA317; }
#ourBusiness h2::after { bottom: 0; left: -19rem; width: 76rem; height: 0; border-top: solid 1px #BCA317; }
#ourBusiness h3 { position: relative; margin-bottom: 3rem; font-size: 3.4rem; font-weight: 700; }
#ourBusiness h3::before { position: absolute; top: 0; left: 0; content: ""; width: 7.5rem; height: 0; border-top: solid 1px #BCA317; }
#ourBusiness h3 .cursive { bottom: -4rem; left: 6em; width: 11.6em; }
#ourBusiness .t1 { max-width: 97.3rem; }
#ourBusiness .w { margin-top: 5rem; padding: 3rem 4rem 5rem; border: solid 1px #BCA317; }
#ourBusiness .w .ww { max-width: 92.7rem; margin: auto; }
#ourBusiness .w .ww .box { margin-top: 6rem; margin-bottom: 2rem; background-color: #FFF; }
#ourBusiness .w .ww .box p { color: #01175F; text-align: center; line-height: 1.4; font-size: 2.4rem; font-weight: 700; }
@media screen and (max-width:480px) { /* s */
	#ourBusiness .w { padding: 2rem; }
	#ourBusiness .w .ww .box { margin-top: 3rem; margin-bottom: 1rem; }
	#ourBusiness .w .ww .cap { font-size: 1.2rem; }
	#ourBusiness h3 .cursive { bottom: -7rem; left: 3em; transform: scale(0.6, 0.6); }
}

/* feature ----------*/
#feature {}
#feature h2 { margin-bottom: 3.5rem; text-align: center; }
#feature h2 span.t { position: relative; display: inline-block; padding-top: 0.5rem; border-top: solid 1px #BCA317; font-size: 3.4rem; font-weight: 700; }
#feature h2 .cursive { bottom: -4rem; left: 1em; width: 7.4em; }
#feature h3 { position: relative; margin-top: 8rem; margin-bottom: 3rem; font-size: 3.4rem; font-weight: 700; }
#feature h3::before { position: absolute; top: 0; left: 0; content: ""; width: 7.5rem; height: 0; border-top: solid 1px #BCA317; }
#feature h3 .cursive { bottom: -4rem; left: 8em; width: 11.6em; }
#feature .feature_list { margin-top: 6rem; }
#feature .feature_list span { display: block; }
#feature .feature_list .pw { margin-bottom: 2rem; text-align: center; }
#feature .feature_list .tw {}
#feature .feature_list .tw h4 { margin-bottom: 2rem; font-size: 2.4rem; font-weight: 700; }
#feature .feature_list .tw p {}
#feature .sw { margin-top: 10rem; }
#feature .sw .logo { position: relative; margin-bottom: 1rem; border: solid 1px #BCA317; }
#feature .sw .logo span { display: block; text-align: center; }
#feature .sw .logo::before, #feature .sw .logo::after, #feature .sw .logo span::before, #feature .sw .logo span::after { position: absolute; top: 0; content: ""; width: 0; height: 100%; border-right: solid 1px #BCA317; }
#feature .sw .logo::before { left: 5px; }
#feature .sw .logo::after { left: 10px; }
#feature .sw .logo span::before { right: 5px; }
#feature .sw .logo span::after { right: 10px; }
#feature .sw h4 { margin-bottom: 3rem; color: #031C84; text-align: center; font-size: 2.2rem; font-weight: 500; }
#feature .sw p { text-align: center; }
#feature .sw .imgs { display: grid; margin-top: 6rem; grid-template-columns: 1fr 1fr 1fr; }
#feature .sww {}
#feature .sww .logo { margin-right: 2rem; margin-left: 2rem; }
#feature .sww .logo img { transform: scale(0.8,0.8); }
#feature .sww .imgs { grid-template-columns: 1fr 1fr; }
@media screen and (max-width:480px) { /* s */
	#feature h2 .cursive { transform: scale(0.6, 0.6); }
	#feature .feature_list .pw { padding: 0 6rem; }
	#feature .sw .imgs { margin-top: 3rem; }
	#feature h3 .cursive { bottom: -8rem; left: 3em; transform: scale(0.6, 0.6); }
	#feature .sww { margin: 0 5rem; }
}



/* introduction ------------------------------------------------------------*/
#introduction {}
#introduction #mvp h1 .cursive { top: -5rem; left: 46%; width: 8em; }
#introduction .job {}
#introduction .job.-bb { color: #FFF; background-color: #01175F; }
#introduction .job h2 { position: absolute; display: inline-block; padding: 1.5rem 4rem; border-left: solid 1px #BCA317; color: #01175F; background-color: #F2F5F8; font-size: 2.6rem; font-weight: 700; }
#introduction .job.-bb h2 { color: #FFF; background-color: #01175F; }
#introduction .job h2::before, #introduction .job h2::after { position: absolute; content: ""; }
#introduction .job h2::before { top: 0; left: 0; width: 50%; height: 0; border-top: solid 1px #BCA317; }
#introduction .job h2::after { top: 0; left: calc(50% - 1.2rem); content: ""; width: 2.4rem; height: 0; border-top: solid 1px #BCA317; transform: rotate(-45deg); }
#introduction .job .w { margin-left: 20rem; padding: 2rem; border: solid 1px #BCA317; }
#introduction .job .w .pw {}
#introduction .job .w .tw { position: relative; z-index: 1; width: 70%; margin-left: 30%; margin-top: -8rem; padding: 4rem; background-color: #F2F5F8; }
#introduction .job.-bb .w .tw { background-color: #01175F; }
#introduction .job .w .tw h3 { margin-bottom: 3rem; font-size: 2.4rem; font-weight: 700; }
#introduction .job .w .tw p {}
#introduction .job .w2 { display: grid; margin-top: 10rem; grid-template-columns: 47rem 1fr; }
#introduction .job .w2 h3 { display: inline-block; padding: 0.6rem 6rem; border: solid 1px #01175F; color: #01175F; font-size: 2.6rem; font-weight: 700; }
#introduction .job.-bb .w2 h3 { border: solid 1px #FFF; color: #FFF; }
#introduction .job .w2 .outline_list { display: grid; gap: 6rem; grid-template-columns: 1fr 1fr; }
#introduction .job .w2 .outline_list li { position: relative; padding: 5rem 4rem; border: solid 1px #BCA317; }
#introduction .job .w2 .outline_list li::before, #introduction .job .w2 .outline_list li::after { position: absolute; top: 10%; content: ""; width: 2px; height: 80%; background-color: #F2F5F8; }
#introduction .job.-bb .w2 .outline_list li::before, #introduction .job.-bb .w2 .outline_list li::after { background-color: #01175F; }
#introduction .job .w2 .outline_list li::before { left: -1px; }
#introduction .job .w2 .outline_list li::after { right: -1px; }
#introduction .job .w2 .outline_list li h4 { margin-bottom: 2rem; font-size: 2rem; }
#introduction .job .w2 .outline_list li p {}
#introduction .job .w3 { margin-top: 10rem; }
#introduction .job .w3 h3 { display: inline-block; margin-bottom: 3rem; padding: 0.6rem 6rem; border: solid 1px #01175F; color: #01175F; font-size: 2.6rem; font-weight: 700; }
#introduction .job.-bb .w3 h3 { border: solid 1px #FFF; color: #FFF; }
#introduction .job .w3 .schedule_list {}
#introduction .job .w3 .schedule_list li {}
#introduction .job .w3 .schedule_list li span { display: block; }
#introduction .job .w3 .schedule_list li .t { position: relative; z-index: 2; display: grid; width: 10rem; height: 10rem; margin-left: calc(50% - 5rem); margin-bottom: -5rem; border-radius: 10rem; border: solid 1px #01175F; color: #01175F; background-color: #FFF; text-align: center; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; font-size: 2rem; place-items: center; }
#introduction .job.-bb .w3 .schedule_list li .t { border: solid 1px #FFF; color: #FFF; background-color: #01175F; }
#introduction .job .w3 .schedule_list li .tw { padding: 8rem 3rem 3rem; color: #FFF; background-color: #01175F; }
#introduction .job.-bb .w3 .schedule_list li .tw { color: #01175F; background-color: #FFF; }
#introduction .job .w3 .schedule_list li .tw h4 { margin-bottom: 2rem; font-size: 2rem; }
#introduction .job .w3 .schedule_list li .tw p { color: #FFF; font-weight: 500; }
#introduction .job.-bb .w3 .schedule_list li .tw p { color: #000; }
#introduction .job .w3 .schedule_list li.highlight .t { background-color: #D8D8D8; }
#introduction .job.-bb .w3 .schedule_list li.highlight .t { background-color: #4C8CED; }
#introduction .job .w3 .schedule_list li.highlight .tw { background-color: #4C8CED; }
#introduction .job.-bb .w3 .schedule_list li.highlight .tw { background-color: #FCF4CB; }
@media screen and (max-width:1200px) {
	#introduction .job .w2 { margin-top: 8rem; grid-template-columns: 30rem 1fr; }
	#introduction .job .w2 h3 { padding: 0.6rem 3rem; }
	#introduction .job .w2 .outline_list { gap: 4rem; }
	#introduction .job .w3 h3 { padding: 0.6rem 3rem; }

}
@media screen and (max-width:1024px) { /* l */
	#introduction .job .w { margin-left: 10rem; }
	#introduction .job .w .tw { width: 80%; margin-left: 20%; margin-top: -6rem; padding: 3rem; }
	#introduction .job .w2 { grid-template-columns: 1fr; }
	#introduction .job .w2 h3 { margin-bottom: 3rem; }
}
@media screen and (max-width:896px) { /* m */
	#introduction .job .w { margin-left: 5rem; }
	#introduction .job .w .tw { width: 90%; margin-left: 10%; margin-top: -4rem; padding: 2rem; }
	#introduction .job .w .tw h3 { margin-bottom: 1.5rem; }
}
@media screen and (max-width:480px) { /* s */
	#introduction .job h2 { padding: 1rem 2rem; font-size: 2.4rem; }
	#introduction .job .w { margin-left: 3rem; padding-top: 4rem; }
	#introduction .job .w .tw { width: 95%; margin-left: 5%; margin-top: -2rem; }
	#introduction .job .w2 .outline_list { gap: 3rem; grid-template-columns: 1fr; }
	#introduction .job .w2 .outline_list li { padding: 3rem 3rem; }
	#introduction .job .w3 .schedule_list li .t { width: 8rem; height: 8rem; margin-left: calc(50% - 4rem); margin-bottom: -4rem; font-size: 1.8rem; }
	#introduction .job .w2 .outline_list li h4 { margin-bottom: 1rem; }
	#introduction .job .w3 .schedule_list li .tw { padding: 6rem 2rem 2rem; }
	#introduction .job .w3 .schedule_list li .tw h4 { margin-bottom: 1rem; }
	#introduction .job .w3 .schedule_list li .tw p { line-height: 1.4; }
}

/* pageLink ----------*/
#pageLink { padding-top: 10rem; padding-bottom: 8rem; }
#pageLink .link_list { display: flex; flex-flow: wrap; gap: 4rem; justify-content: center; }
#pageLink .link_list li { position: relative; width: 24.6rem; background-color: #FFF; }
#pageLink .link_list li::before, #pageLink .link_list li::after { position: absolute; bottom: 0; right: 0; content: ""; }
#pageLink .link_list li::before { width: 80%; height: 0; border-top: solid 1px #01175F; }
#pageLink .link_list li::after { width: 0; height: 70%; border-right: solid 1px #01175F; }
#pageLink .link_list li a { position: relative; display: block; height: 100%; padding: 3rem 0.5rem; border-top: solid 1px #01175F; border-left: solid 1px #01175F; color: #01175F; text-align: center; text-decoration: none; font-size: 1.8rem; }
#pageLink .link_list li a::before { position: absolute; bottom: 0; left: calc(20% - 1.2rem); content: ""; width: 2.4rem; height: 0; border-top: solid 1px #01175F; transition: all 0.3s ease-out; transform: rotate(-45deg); transform-origin: center center; }
#pageLink .link_list li a i { position: absolute; bottom: 0.7rem; left: 0; right: 0; margin: auto; font-size: 1.2rem; transform: rotate(180deg); }
#pageLink .link_list li a:hover { opacity: 1; color: #FFF; background-color: #01175F; }
#pageLink .link_list li a:hover i { color: #BCA317; }
#pageLink .link_list li a:hover::before { left: calc(20% - 2.4rem); width: 4.8rem; border-color: #BCA317; }
@media screen and (max-width:480px) { /* s */
	#pageLink { padding-top: 4rem; padding-bottom: 6rem; }
	#pageLink .link_list { gap: 2rem; }
	#pageLink .link_list li { width: 100%;  }
}



/* works ------------------------------------------------------------*/
#works {}
#works #mvp h1 .cursive { top: -11rem; left: 30%; width: 4.28em; }
#works #main h2 { position: relative; margin-bottom: 6rem; padding-top: 1rem; padding-left: 1.5rem; border-left: solid 1px #BCA317; font-size: 3.4rem; font-weight: 700; }
#works #main h2::before { position: absolute; top: 0; left: 0; content: ""; width: 3rem; height: 0; border-top: solid 1px #BCA317; }
#works #main h2::after { position: absolute; top: 0; left: calc(3rem - 1.2rem); content: ""; width: 2.4rem; height: 0; border-top: solid 1px #BCA317; transform: rotate(-45deg); transform-origin: center center; }
#works #main .work_list { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }
#works #main .work_list li { padding: 3rem; background-color: #FFF; }
#works #main .work_list li span { display: block; }
#works #main .work_list li h3 { margin-bottom: 2rem; color: #01175F; text-align: center; font-size: 2.8rem; }
#works #main .work_list li .p { margin-bottom: 2rem; }
#works #main .work_list li .t { line-height: 1.8; font-size: 1.6rem; }
#works #main .welfare_list { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }
#works #main .welfare_list li { position: relative; }
#works #main .welfare_list li h3 { position: absolute; top: 0; left: 0; width: 100%; padding-top: 3%; color: #01175F; text-align: center; font-size: 2.5rem; }
#works #main .welfare_list li .p {}
#works #main .welfare_list li .p img { width: 100%; max-width: none;}