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


/*
 peple_wrk_sync
==============================*/

/* pepleWorkSync ----------*/
#pepleWorkSync {}
#pepleWorkSync #mvp { margin-bottom: 4rem; }
#pepleWorkSync #mvp h1 .j { padding-top: 3rem; color: #000; font-size: 2.8rem; font-weight: 600; }
#pepleWorkSync.work_sync #mvp h1 .cursive { top: -11rem; left: 6em; width: 9em; }
#pepleWorkSync.new_graduate #mvp h1 .cursive { top: -9rem; left: 4.5em; width: 10em; }
#pepleWorkSync #mvp h1 .ill { position: absolute; top: 2rem; left: -18rem; }
#pepleWorkSync #mvp .pw { height: 65rem; }
#pepleWorkSync #main .sub_text h2 { margin-bottom: 3rem; font-size: 2.8rem; font-weight: 700; }
#pepleWorkSync #main .sub_text p { font-size: 2rem; }
#pepleWorkSync .sec.-bg { background-color: #DCE3EF; }
#pepleWorkSync .voice {}
#pepleWorkSync .voice .w { display: flex; gap: 2rem; }
#pepleWorkSync .voice.-r .w { flex-direction: row-reverse; }
#pepleWorkSync .voice .w .pw { width: 50%; position: relative; }
#pepleWorkSync .voice .w > .pw img { position: absolute; }
#pepleWorkSync .voice .w .tw { width: 50%; }
#pepleWorkSync .voice h2 { position: relative; font-size: 2.8rem; font-weight: 700; }
#pepleWorkSync.work_sync .voice h2::before, #pepleWorkSync.work_sync .voice h2::after { left: 0; position: absolute; }
#pepleWorkSync.work_sync .voice h2::before { content: url(../img/peple/work_sync/hbg_top.svg); bottom: 100%; }
#pepleWorkSync.work_sync .voice h2::after { content: url(../img/peple/work_sync/hbg_botm.svg); top: 100%; }
#pepleWorkSync.new_graduate .voice h2 { display: flex; color: #031C84; align-items: center; gap: 1rem; word-break: break-all; }
#pepleWorkSync.new_graduate .voice h2::before, #pepleWorkSync.new_graduate .voice h2::after {}
#pepleWorkSync.new_graduate .voice h2::before { content: url(../img/peple/new_graduate/hbg_top.svg); }
#pepleWorkSync.new_graduate .voice h2::after { content: url(../img/peple/new_graduate/hbg_botm.svg); }
#pepleWorkSync .voice .peples { margin-top: 6rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5rem; }
#pepleWorkSync .voice .peples .pw { display: block; width: 100%; border-radius: 100rem; overflow: hidden; aspect-ratio: 1 / 1; }
#pepleWorkSync .voice .peples h3 { text-align: center; font-size: 1.5rem; padding-top: 0.5rem; }
#pepleWorkSync .voice h3.q { margin-bottom: 4rem; font-size: 2.2rem; font-weight: 600; color: #01175F; margin-top: 6rem; position: relative; padding-left: 4.2rem; }
#pepleWorkSync .voice h3.q::before { content: "Q."; font-size: 2.5rem; width: 4.2rem; line-height: 2.9rem; display: inline-block; position: absolute; top: 0; left: 0; }
#pepleWorkSync .voice .voice_list { display: grid; gap: 2.5rem; }
#pepleWorkSync .voice .voice_list li { display: flex; gap: 2rem; }
#pepleWorkSync .voice .voice_list li .n { white-space: nowrap; font-size: 2rem; font-weight: 700; }
#pepleWorkSync .voice .voice_list li .t { font-size: 1.6rem; padding-top: 0.3em; }
.work_sync #voice1 .w .pw img { left: 20%; top: 0; }
.work_sync #voice2 .w .pw img, .work_sync #voice4 .w .pw img { right: 20%; top: 20%; }
.work_sync #voice3 .w .pw img { left: 20%; bottom: 30%; }
.work_sync #voice5 .w .pw img { left: 20%; bottom: 10%; }
.work_sync .peple1 .n, .p1.n { color: #4C8CED; }
.work_sync .peple2 .n, .p2.n { color: #5D34E6; }
.work_sync .peple3 .n, .p3.n { color: #08A83F; }
.work_sync .peple4 .n, .p4.n { color: #D64593; }
.work_sync .voice_list .peple1::before { content: "門林："; color: #4C8CED; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.work_sync .voice_list .peple2::before { content: "齋藤："; color: #5D34E6; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.work_sync .voice_list .peple3::before { content: "横田："; color: #08A83F; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.work_sync .voice_list .peple4::before { content: "伊東："; color: #D64593; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.new_graduate #voice1 .w .pw img { left: 20%; top: 0; }
.new_graduate #voice2 .w .pw img { right: 20%; top: 10%; }
.new_graduate #voice3 .w .pw img { right: 10%; top: 5%; }
.new_graduate #voice3_2 .w .pw img { bottom: 10%; }
.new_graduate #voice4 .w .pw img { left: 20%; bottom: 10%; }
.new_graduate #voice5 .w .pw img { top: 10%; }
.new_graduate .peple1 .n, .p1.n { color: #4C8CED; }
.new_graduate .peple2 .n, .p2.n { color: #E88716; }
.new_graduate .peple3 .n, .p3.n { color: #D64593; }
.new_graduate .peple4 .n, .p4.n { color: #08A83F; }
.new_graduate .voice_list .peple1::before { content: "瀬戸："; color: #4C8CED; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.new_graduate .voice_list .peple2::before { content: "藤原："; color: #E88716; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.new_graduate .voice_list .peple3::before { content: "味村："; color: #D64593; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.new_graduate .voice_list .peple4::before { content: "佐分："; color: #08A83F; white-space: nowrap; font-size: 2rem; font-weight: 700; }
.new_graduate .ps { margin-top: 10rem; }
@media screen and (max-width:1700px) {
	#pepleWorkSync .voice .w { gap: 6rem; }
	.work_sync #voice1 .w .pw img { left: 0;}
	.work_sync #voice2 .w .pw img, .work_sync #voice4 .w .pw img { right: 0; }
	.work_sync #voice3 .w .pw img, .work_sync #voice5 .w .pw img { left: 0; }
	.new_graduate #voice1 .w .pw img { left: 0; }
	.new_graduate #voice2 .w .pw img { right: 0; }
	.new_graduate #voice3 .w .pw img { right: 0; }
	.new_graduate #voice4 .w .pw img { left: 0 }
}
@media screen and (max-width:1360px) {
	#pepleWorkSync #mvp .pw { height: 48vw; }
	#pepleWorkSync #mvp h1 .cursive { transform: scale(0.7,0.7); transform-origin: left center; }
	#pepleWorkSync #mvp h1 .ill { top: 2rem; left: -18rem; transform: scale(0.7,0.7); transform-origin: right center; }
}
@media screen and (max-width:1024px) { /* l */
	#pepleWorkSync .voice .w { flex-flow: wrap; }
	#pepleWorkSync .voice .w .pw, #pepleWorkSync .voice .w .tw { width: 100%; }
	#pepleWorkSync .voice .w > .pw { text-align: center; }
	#pepleWorkSync .voice .w > .pw img { width: 60%; position: relative; height: auto; top: auto !important; left: auto !important; right: auto !important;  bottom: auto !important; }
}
@media screen and (max-width:740px) {
	#pepleWorkSync #mvp h1 .cursive { transform: scale(0.6,0.6); }
	#pepleWorkSync #mvp h1 .ill { transform: scale(0.5,0.5); }
	#pepleWorkSync .voice .peples { gap: 2rem; }
}
@media screen and (max-width:480px) { /* s */
	#pepleWorkSync #mvp h1 .j { padding-top: 2rem; font-size: 2.2rem; }
	#pepleWorkSync #main .sub_text h2 { margin-bottom: 3rem; font-size: 3rem; }
	#pepleWorkSync .voice .peples { margin-top: 3rem; }
	.new_graduate .ps { margin-top: 6rem; }
}


/* info ----------*/
#info {}
#info ul { display: grid; grid-template-columns: 1fr 5% 1fr 5% 1fr; gap: 6rem; }
.new_graduate #info ul { display: grid; grid-template-columns: 1fr 5% 1fr 5% 1fr 5% 1fr; gap: 6rem; }
#info ul li {}
#info ul li span { display: block; }
#info ul li .pw { margin-bottom: 3rem; text-align: center; }
#info ul li .tw { display: grid; gap: 0.8rem; }
#info ul li .tw h3 { text-align: center; font-size: 2.4rem; font-weight: 600; }
#info ul li .tw h3.n { font-weight: 700; }
#info ul li .tw p { text-align: left; line-height: 1.4; font-size: 1.9rem; }
#info ul li .tw p.s { text-align: left; line-height: 1.4; font-size: 1.5rem; }
#info ul li.times { position: relative; text-align: center; }
#info ul li.times img { position: absolute; left: 0; bottom: 10rem; }
@media screen and (max-width:896px) { /* m */
	#info ul, .new_graduate #info ul { display: grid; max-width: 90%; margin: auto; grid-template-columns: 1fr; gap: 3rem; }
	#info ul li { display: grid; grid-template-columns: 40% 60%; gap: 2rem; align-items: center; }
	#info ul li.times  { display: block; }
	#info ul li.times img { position: relative; bottom: auto; width: 6rem; }
	#info ul li .tw h3 { font-size: 2rem; }
	#info ul li .tw p { font-size: 1.8rem; }
	#info ul li .tw p.s { font-size: 1.4rem; }
}

/* other ----------*/
#other { max-width: 165rem; margin: auto; padding: 0 2rem; }