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


/*
 works
==============================*/

body { background-color: #FBFAF0; }

/* common ----------*/
#contentsWrap .sec_inner { max-width: 93rem; margin: auto; padding: 0 4rem; }
.detail {}
.detail h2 { position: relative; font-size: 2.4rem; text-align: center; font-weight: bold; margin-bottom: 1.33em; margin-top: 3.1em; display: flex; flex-direction: column; gap: 0.6em; }
.detail h2::before { content: ""; width: 100%; height: 2.1rem; display: block; background-image: url(../img/common/h2_bg_03.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
.detail h3 { position: relative; margin: 1.78em 0 1em; color: #4D70AE; font-size: 2.4rem; line-height: 1.75; }
.detail h3::before, .detail h3::after { content: ""; display: block; width: 100%; height: 0.6rem; background-image: url(../img/common/blog_line.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.detail h3::before { margin-bottom: 1rem; }
.detail h3::after { margin-top: 1rem; }
.detail .card_tx_ph { position: relative; z-index: 5; display: flex; gap: 3.5%; }
.detail .card_tx_ph.-r { flex-direction: row-reverse; }
.detail .card_tx_ph .pw { width: 39.5%;}
.detail .card_tx_ph .tw { width: 57%; }
@media screen and (max-width:1100px) {
	.detail { padding: 0 6rem; }
}
@media screen and (max-width:896px) { /* m */
	.detail .card_tx_ph { flex-flow: column !important; gap: 4rem; }
	.detail .card_tx_ph .pw, .detail .card_tx_ph .tw { width: 100%; }
}
@media screen and (max-width:480px) { /* s */
	.detail { padding: 0 1rem; }
	.detail h2 { font-size: 2.2rem; }
	.detail h3 { font-size: 2rem; }
}


/* mvp ----------*/
#mvp { width: 100%; aspect-ratio: 1 / 0.42; max-height: 62rem; }


/* worksDetail ----------*/
#worksDetail {}
#worksDetail .pw { text-align: center; container-type: inline-size; }
#worksDetail .pw img { border-radius: 5.4cqw; }
#worksDetail .pw img.br2 { border-radius: 10.8cqw; }
#worksDetail .inner { padding-top: 1px; }
#worksDetail .sec_inner { position: relative; z-index: 2; margin-top: -10%; padding-bottom: 10rem; }
#worksDetail .mpw { position: relative; }
#worksDetail .mpw h2 { position: absolute; z-index: 2; top: 0; left: -1.2rem; display: inline-block; padding: 1.5rem 2.5rem; border-radius: 10rem; color: #FFF; background: rgba(121, 134, 208, 0.80); font-size: 2.9rem; line-height: 1; }
#worksDetail .mpw .info { position: absolute; z-index: 2; bottom: -3rem; right: -2rem; padding: 2rem 3rem; border-radius: 5.4cqw; color: #FFF; background: var(--23, rgba(169, 176, 218, 0.69)); }
#worksDetail .mpw .info h3 { margin-bottom: 0.5em; font-size: 2rem; font-weight: 500; text-align: left; line-height: 1.4; }
#worksDetail .mpw .info p { font-size: 1.4rem; line-height: 1.4; }
#worksDetail .mpw img { position: relative; z-index: 1; }
#worksDetail .job_content { display: grid; grid-template-columns: 1fr 1fr; row-gap: 4rem; column-gap: 6.7rem; }
#worksDetail .job_content li {}
#worksDetail .job_content li h4 { margin-bottom: 1.5rem; padding: 1rem; color: #FFF; background-color: #97B0DB; font-size: 1.8rem; text-align: center; line-height: 1.4; }
#worksDetail .job_content li p {}
#worksDetail .schedule_list { margin: 0 2rem; }
#worksDetail .schedule_list li { position: relative; margin-top: 3.6rem; padding: 2rem 4rem; border: solid 1px #F9A49C; border-radius: 2rem; background-color: #FFF; }
#worksDetail .schedule_list li::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: -3.6rem; margin: auto; width: 3.9rem; height: 2.6rem; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='27' viewBox='0 0 39 27' fill='none'%3E%3Cpath d='M17.9394 25.636C18.7401 26.6344 20.2594 26.6344 21.0601 25.636L38.5433 3.83296C39.5931 2.5238 38.6611 0.581787 36.983 0.581787H2.01645C0.338376 0.581787 -0.593636 2.5238 0.456146 3.83296L17.9394 25.636Z' fill='%23F2786D'/%3E%3C/svg%3E"); }
#worksDetail .schedule_list li:last-child:after { display: none; }
#worksDetail .schedule_list li .time { position: absolute; top: 1rem; left: -3.5rem; display: inline-block; padding: 0.8rem 1.2rem; border-radius: 5rem; color: #FFF; background-color: #F2786D; font-size: 1.5rem; font-weight: bold; }
#worksDetail .schedule_list li h4 { color: #F2786D; font-size: 1.8rem; line-height: 1.4; }
@media screen and (max-width:1024px) { /* l */
	#worksDetail .sec_inner { margin-top: -6%; }
}
@media screen and (max-width:896px) { /* m */
	#worksDetail .sec_inner { margin-top: -4%; }
	#worksDetail .mpw h2 { left: -1.2rem; padding: 1.2rem 2rem; font-size: 2.2rem; }
	#worksDetail .mpw .info { padding: 1.5rem 2rem; }
	#worksDetail .mpw .info h3 { font-size: 1.8rem; }
}
@media screen and (max-width:640px) {
	#worksDetail .job_content { grid-template-columns: 1fr; }
}
@media screen and (max-width:480px) { /* s */
	#worksDetail .sec_inner { margin-top: 5rem; padding-bottom: 5rem; }
	#worksDetail .mpw h2 { top: -2rem; left: -2rem; font-size: 1.8rem; }
	#worksDetail .mpw .info { bottom: -5rem; right: -3rem; }
}


/* otherWorks ----------*/
#otherWorks { background-color: #FFF; }
#otherWorks .sec_inner {  padding: 7rem 4rem; }
#otherWorks .works_list { position: relative; z-index: 2; display: flex; gap: 2.8rem; }
#otherWorks .detail h2 { margin-top: 0; }
#otherWorks .btw { text-align: center; margin-top: 6rem; }
#otherWorks .ov_01 { top: 0; right: calc(100% - 26%); width: 39.3%; }
#otherWorks .ov_02 { bottom: 0; left: calc(100% - 26%); width: 39.3%; }
@media screen and (max-width:640px) {
	#otherWorks .works_list { flex-flow: wrap; gap: 2rem; justify-content: center; }
	#otherWorks .works_list li { width: calc((100% - (2rem * 1)) / 2); }
}
@media screen and (max-width:480px) { /* s */
	#otherWorks .sec_inner {  padding: 4rem 4rem; }
}