@charset "UTF-8";
.staff-index:after,
.oblique-yellow { transform: skewY(-15deg) translateX(50%); }
.staff-index:after { top: 310px; }
.staff-index:before { top: 38%; transform: skewY(15deg) translateX(-50%); }
.oblique-yellow { display: block; width: 100%; top: 62%; }
.flow-prj-wrap { width: calc(100% - 60px); margin-left: auto; margin-right: auto; padding-top: 38px; }
.flow-prj-wrap--index { padding-bottom: 50px; }
.ttl-staffs { display: flex; align-items: center; height: 32px; margin-bottom: 35px; padding-left: 10px; border-radius: 5px; font-size: 20px; font-weight: 400; line-height: 1; color: #fff; }
.flow-prj:not(:last-child) { margin-bottom: 54px; }
.flow-prj__case { margin-bottom: 13px; }
.flow-prj__case img { width: 90px; height: auto; }
.flow-prj__ttl { margin-bottom: 18px; padding: 14px 0; border-top: 2px solid #000; border-bottom: 2px solid #000; font-size: 20px; font-weight: 800; line-height: 1.4; }
.flow-prj__txt { margin-bottom: 22px; font-size: 16px; font-weight: 800; line-height: 1.32; color: #5ac8e6; }
.flow-prj__list--item { display: flex; align-items: center; margin-bottom: 28px; line-height: 1.3; }
.flow-prj__list--item:not(:last-child) { margin-bottom: 10px; }
.flow-prj__list--item--leader:after { width: 61px; height: 16px; background: url("../img/ico_leader.svg") no-repeat 0 0/100% auto; margin-left: 20px; content: ""; }


.flow-prj__img { position: relative; }
.btn-detail { position: absolute; bottom: -20px; right: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 170px; height: 40px; border-radius: 20px; overflow: hidden; }
.btn-detail:before { content: ""; background: #fff; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; top: 50%; left: 50%; border-radius: 19px; transform: translate(-50%,-50%); }
.btn-detail:after { content: ''; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 0; height: 100%; position: absolute; top: 0; left: -15%; transform: skew(160deg); transition-duration: .6s; transform-origin: top left; transition: all .6s ease; }
.btn-detail:hover:after { width: 135%; }
.btn-detail span { display: flex; justify-content: center; align-items: center; z-index: 2; font-size: 14px; line-height: 1; color: #000; transition: all .6s ease; }
.btn-detail span:before { width: 13px; height: 13px; background: url("../../common/img/ico_magnify.svg") no-repeat 0 0/100% auto; margin-right: 10px; content: ""; transition: all .6s ease; }
.btn-detail:hover span { color: #fff; }
.btn-detail:hover span:before { background-image: url("../../common/img/ico_magnify-white.svg"); }
.flow-prj__img-inner { margin-left: -30px; margin-right: -30px; }




@media print, screen and (min-width: 768px){
	
	.flow-prj-wrap--index { padding-bottom: 170px; }
	.staff::after { top: 410px; }
	.staff::before { top: 860px; }
	.oblique-yellow { top: 1340px; z-index: -2; }
	.flow-prj-wrap { max-width: 1000px; }
	.ttl-staffs { margin-bottom: 80px; }
	.flow-prj { display: flex; justify-content: space-between; }
	.flow-prj:nth-child(odd) { flex-direction: row-reverse; }
	.flow-prj:nth-child(odd) .flow-prj__img-inner { border-radius: 40px 40px 40px 0; }
	.flow-prj:nth-child(odd) .btn-detail { right: auto; left: -20px; }
	.flow-prj__exp { width: 255px; }
	
	.flow-prj:not(:last-child) { margin-bottom: 87px; }
	.flow-prj__case { margin-bottom: 25px; }
	.flow-prj__case img { width: 112px; }
	.flow-prj__ttl { margin-bottom: 18px; font-size: 18px; line-height: 1.4; }
	.flow-prj__txt { margin-bottom: 27px; line-height: 1.75; }
	
	.flow-prj__img { width: calc(100% - 300px); }
	.flow-prj__img-inner { position: relative; margin-left: 0; margin-right: 0; border-radius: 40px 40px 0 40px; overflow: hidden; transition: .3s ease-out;
z-index: 2; }
	.flow-prj__img-inner img { transition: .3s ease-out; }
	
	.flow-prj__img:hover .flow-prj__img-inner img { transform: scale(1.1); z-index: -1; }
	
	
	.btn-detail { right: -20px; z-index: 5; }
	
	.flow-prj__img:hover .btn-detail:after { width: 135%; }
	.flow-prj__img:hover .btn-detail span { color: #fff; }
	.flow-prj__img:hover .btn-detail span:before { background-image: url("../../common/img/ico_magnify-white.svg"); }









	
}

.staff-gal-wrap { width: calc(100% - 60px); margin-left: auto; margin-right: auto; padding-top: 10px; }
.staff__gallery { padding: 0 0 60px; }
.staff__list { margin-top: 0; }

@media print, screen and (min-width: 768px){
	
	.staff-gal-wrap { max-width: 1000px; padding-top: 0; }
	.ttl-staffs--itv { margin-bottom: 60px; }
	
	.staff__list--notpc { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: -70px; }
	.staff__list--notpc .staff__item { width: 180px; margin-right: 90px; margin-bottom: 70px; padding: 0; }
	.staff__list--notpc .staff__item:nth-child(4n) { margin-right: 0; }
	
}






.int-info__ttl span { display: block; margin-top: 0; margin-bottom: 30px; padding: 10px; font-size: 20px; font-weight: 400; text-align: left;}
@media print, screen and (min-width: 768px) {
	.int-info__ttl span{ padding: 8px; font-size: 20px;}
}
@media print, screen and (min-width: 1060px) {
	.int-info__ttl span { font-size: 16px; }
}


.int-info__ttl--thin span { padding: 6px; }