@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_bosses_and_subordinates
==============================*/

/* bossesAndSubordinates ----------*/
#bossesAndSubordinates {}
#bossesAndSubordinates #mvp { margin-bottom: 4rem; }
#bossesAndSubordinates #mvp h1 .j { padding-top: 3rem; color: #000; font-size: 2.8rem; font-weight: 600; }
#bossesAndSubordinates #mvp h1 .cursive { top: -11rem; left: 6em; width: 11.4em; }
#bossesAndSubordinates #mvp .pw { height: 65rem; }
#bossesAndSubordinates .pj { padding-top: 15rem; padding-bottom: 15rem; }
#bossesAndSubordinates .pj .tw { position: relative; }
#bossesAndSubordinates .pj .tw h2 { margin-bottom: 5rem; font-size: 2.5rem; font-weight: 700; }
#bossesAndSubordinates .pj .tw h2::before, #bossesAndSubordinates .pj .tw h2::after { position: absolute; left: 0; content: ""; height: 0; border-top: solid 1px #BCA317; }
#bossesAndSubordinates .pj .tw h2::before { width: 6rem; top: -3rem; }
#bossesAndSubordinates .pj .tw h2::after { width: 4rem; top: -2.6rem; }
#bossesAndSubordinates .pj .tw p {}
#bossesAndSubordinates .pj.-bg { position: relative; }
#bossesAndSubordinates .pj.-bg::before { position: absolute; z-index: 1; top: 0; left: calc((100vw - 100rem) / 2); content: ""; width: 100%; height: 100%; background-color: #DBE3EF; }
#bossesAndSubordinates .pj.-bg.-r::before { left: auto; right: calc((100vw - 100rem) / 2); }
#bossesAndSubordinates .pj.-bg .inner { position: relative; z-index: 2; }
#bossesAndSubordinates .pj.-p .w { display: flex; gap: 6rem; }
#bossesAndSubordinates .pj.-p.-r .w { flex-direction: row-reverse; }
#bossesAndSubordinates .pj.-p .w .pw { width: 46%; }
#bossesAndSubordinates .pj.-p .w .pw img { width: calc(100% + 24rem); max-width: none; margin-left: -24rem; }
#bossesAndSubordinates .pj.-p.-r .w .pw img { margin-left: 0; }
#bossesAndSubordinates .pj.-p .w .tw { width: 54%; }
#bossesAndSubordinates .pj.-t .tw { max-width: 122rem; }
#bossesAndSubordinates .pj.-t.-r .tw { margin-left: auto; }
#bossesAndSubordinates h3.q { margin-bottom: 4rem; font-size: 2.2rem; font-weight: 600; color: #01175F; margin-top: 6rem; position: relative; padding-left: 4.2rem; }
#bossesAndSubordinates 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; }
#bossesAndSubordinates .voice_list { display: grid; gap: 2.5rem; }
#bossesAndSubordinates .voice_list li { display: flex; gap: 2rem; }
#bossesAndSubordinates .voice_list li .n { white-space: nowrap; font-size: 2rem; font-weight: 700; }
#bossesAndSubordinates .voice_list li .t { font-size: 1.6rem; padding-top: 0.3em; }
#bossesAndSubordinates .voice_list .peple1::before { content: "後輩／渡辺"; color: #BC5C8F; white-space: nowrap; font-size: 2rem; font-weight: 700; }
#bossesAndSubordinates .voice_list .peple2::before { content: "先輩／村井"; color: #4C8CED; white-space: nowrap; font-size: 2rem; font-weight: 700; }
#Project1 .cursive { bottom: calc(100% + 1.5rem); left: -5rem; }
#Project2 .cursive { bottom: calc(100%); left: 6rem; }
#Project3 .cursive { bottom: calc(100% + 1.5rem); left: -10rem; }
#Project4 .cursive { bottom: calc(100% + 1.5rem); left: -8rem; }
#Project5 .cursive { bottom: calc(100%); left: 6rem; }
#Project6 .cursive { bottom: calc(100% + 1.5rem); left: -8rem; }
@media screen and (max-width:1500px) {
	#bossesAndSubordinates .pj.-bg::before { left: 20vw; }
	#bossesAndSubordinates .pj.-bg.-r::before { left: auto; right: 20vw; }
	#bossesAndSubordinates .pj.-p .w { gap: 3rem; }
	#bossesAndSubordinates .pj.-p .w .pw img { width: calc(100% + 2rem);  margin-left: -2rem; }
	#bossesAndSubordinates .pj.-p.-r .w .pw img { margin-left: 0; }
	#bossesAndSubordinates .pj .cursive { transform: scale(0.7,0.7); }
}
@media screen and (max-width:1160px) {
	#bossesAndSubordinates #mvp h1 .cursive { left: 1em; }
}
@media screen and (max-width:1100px) {
	#bossesAndSubordinates #mvp h1 .cursive { transform: scale(0.7,0.7); }
	#bossesAndSubordinates #mvp .pw { height: 57vw; }
}
@media screen and (max-width:896px) { /* m */
	#bossesAndSubordinates .pj.-bg::before { left: 5vw; }
	#bossesAndSubordinates .pj.-bg.-r::before { left: auto; right: 5vw; }
	#bossesAndSubordinates .pj { padding-top: 6rem; padding-bottom: 6rem; }
	#bossesAndSubordinates .pj.-p .w { display: block;}
	#bossesAndSubordinates .pj.-p .w .pw { width: 100%; margin-bottom: 12rem; }
	#bossesAndSubordinates .pj.-p .w .tw { width: 90%; margin-left: 10%; }
	#bossesAndSubordinates .pj.-p.-r .w .tw { margin-left: 0; }
	#bossesAndSubordinates .pj.-t { padding-top: 12rem; }
}
@media screen and (max-width:480px) { /* s */
	#bossesAndSubordinates #mvp h1 .j { font-size: 2.4rem; }
	#bossesAndSubordinates #mvp h1 .cursive { top: -6rem; }
	#bossesAndSubordinates #mvp .pw { height: 65vw; }
}

/* info ----------*/
#info { margin-top: 16rem; padding-top: 40%; padding-bottom: 12rem; background-image: url(../img/peple/bosses_and_subordinates/info_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
#info ul { display: grid; padding: 4rem; max-width: 120rem; margin: auto; background-color: #F2F5F8; grid-template-columns: 1fr 5% 1fr; gap: 6rem; }
#info ul li {}
#info ul li h3 { margin-bottom: 3rem; padding-top: 2rem; text-align: center; font-size: 2.4rem; font-weight: 500; }
#info ul li h3.n1 { color: #BC5C8F; }
#info ul li h3.n2 { color: #4C8CED; }
#info ul li p {}
@media screen and (max-width:896px) { /* m */
	#info { margin-top: 8rem; padding-bottom: 6rem; }
	#info ul { padding: 3rem; gap: 3rem; }
	#info ul li h3 { padding-top: 1rem;}
}
@media screen and (max-width:480px) { /* s */
	#info ul { grid-template-columns: 1fr; }
	#info ul li.times { text-align: center; }
	#info ul li.times img { width: 5rem; }
}