@charset "utf-8";
/* CSS Document */


/* #page_ttl
----------------------------------------- */
#page_ttl .page_ttl_wrap {
    background-image: url(../images/staff/staff_top.jpg);
}



/* #staff_wrap
----------------------------------------- */

#conWrap #staff_wrap {
}

#conWrap #staff_wrap .inner {
	padding-top: 0;
	z-index: 1;
}

#staff_wrap .staff_detail01,
#staff_wrap .staff_detail02 {
	position: relative;
	margin-top: 120px;
}

#staff_wrap .staff_detail01 li.img {
	width : -webkit-calc(620 / 1160 * 100%) ;
	width : calc(620 / 1160 * 100%) ;
    max-width: 1100px;
	padding-top: 0px;
	padding-bottom: 60px;
	z-index: 1;
}

#staff_wrap .staff_detail01 li.txt {
	position: absolute;
	bottom: 0;
	right: 0;
	width : -webkit-calc(630 / 1160 * 100%) ;
	width : calc(630 / 1160 * 100%) ;
	padding: 3em 2em;
	background: #FFFFFF;
	z-index: 2;
}

#staff_wrap .staff_detail02 li.txt {
	position: absolute;
	bottom: 0;
	left: 0;
	width : -webkit-calc(630 / 1160 * 100%) ;
	width : calc(630 / 1160 * 100%) ;
	padding: 3em 2em;
	background: #FFFFFF;
	z-index: 2;
}

#staff_wrap .staff_detail02 li.img {
	width : -webkit-calc(620 / 1160 * 100%);
	width : calc(620 / 1160 * 100%);
	margin-left : -webkit-calc(540 / 1160 * 100%);
	margin-left : calc(540 / 1160 * 100%);
    max-width: 1100px;
	padding-top: 0px;
	padding-bottom: 60px;
	z-index: 1;
}

#conWrap #staff_wrap .title {
    display: inline-block;
    padding: 0.3em 0.5em;
    line-height: 1em;
    color: #ffffff;
    background: #82ab64;
    font-size: 1.4em;
    margin-bottom: 0.3em;
}
#conWrap #staff_wrap .title.col_1 {
    background: #82ab64;
}
#conWrap #staff_wrap .title.col_2 {
    background: #ef820c;
}
#conWrap #staff_wrap .title.col_3 {
    background: #EE3984;
}
#conWrap #staff_wrap .title.col_4 {
    background: #d084e2;
}


#conWrap #staff_wrap h3 .col_1 {
    color: #82ab64;
}
#conWrap #staff_wrap h3 .col_2 {
	color: #ef820c;
}
#conWrap #staff_wrap h3 .col_3 {
    color: #EE3984;
}
#conWrap #staff_wrap h3 .col_4 {
    color: #d084e2;
}

/* 基本のスタイル */
#staff_wrap .staff_detail01.delighter li.img {
transition: all .8s ease-out;
transform: translateX(-30%);
opacity: 0;
}
#staff_wrap .staff_detail01.delighter li.txt {
transition: all .8s ease-out;
transform: translateX(30%);
opacity: 0;
}
#staff_wrap .staff_detail02.delighter li.txt {
transition: all .8s ease-out;
transform: translateX(-30%);
opacity: 0;
}
#staff_wrap .staff_detail02.delighter li.img {
transition: all .8s ease-out;
transform: translateX(30%);
opacity: 0;
}

/* スタート時のスタイル */
#staff_wrap .staff_detail01.delighter.started li.img, 
#staff_wrap .staff_detail01.delighter.started li.txt, 
#staff_wrap .staff_detail02.delighter.started li.txt, 
#staff_wrap .staff_detail02.delighter.started li.img {
transform: none;
opacity: 1;
}


@media screen and (max-width: 768px) {
    
    #staff_wrap .staff_detail01,
#staff_wrap .staff_detail02 {
	position: relative;
	margin-top: 60px;
}
    
    #staff_wrap .staff_detail01 li.img {
	width : 100%;
    max-width: 1100px;
	padding-top: 0px;
	padding-bottom: 10px;
	z-index: 1;
}

#staff_wrap .staff_detail01 li.txt {
	position: relative;
	bottom: 0;
	right: 0;
	width : 100%;
	padding: 1em 1.5em;
	background: #FFFFFF;
	z-index: 2;
}

#staff_wrap .staff_detail02 {
	flex-flow: column-reverse;
}
	
#staff_wrap .staff_detail02 li.txt {
	position: relative;
	bottom: 0;
	right: 0;
	width : 100%;
	padding: 1em 1.5em;
	background: #FFFFFF;
	z-index: 2;
}

#staff_wrap .staff_detail02 li.img {
	width : 100%;
	margin-left : 0;
    max-width: 1100px;
	padding-top: 0px;
	padding-bottom: 10px;
	z-index: 1;
}

}