@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      team.css
 Update:         2017.2.10
 Style Info:     チームCSSファイル
----------------------------------------------------------- */
/********************************************
モバイルファースト
*********************************************/
/***タイトル***/
#page_title {
	position:relative;
	width:100%;
	height:250px;
}
#page_title p{
	width:250px;
	height:50px;
	overflow:hidden;
	color:#FFF;
	font-size:30px;
	position:absolute;
	left:0;
	right:0;
	bottom:10px;
	margin:auto;
	text-align:center;
	z-index:56;
}
#page_title p:before {
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	margin:auto;
	content: '';
	width: 100%;
	height: 0;
	border-top: 1px solid #FFF;
}
#page_title p:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right:0;
	margin:auto;
	content: '';
	width: 100%;
	height: 0;
	border-top: 1px solid #FFF;
}
/*スライダー*/
.title_slider {
	width:100%;
	height:250px;
	background:#FFF;
	overflow:hidden;
	text-align:center;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*部署毎のタイトル画像*/
.title_slider li#team_headquarters {
	background:url(../img/ourteam/title_headquarters.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_izumisano {
	background:url(../img/ourteam/title_izumisano.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_sakai {
	background:url(../img/ourteam/title_sakai.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_shinsaibashi {
	background:url(../img/ourteam/title_shinsaibashi.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_yawata {
	background:url(../img/ourteam/title_yawata.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}

/*
.title_slider li#team_wakayama {
	background:url(../img/ourteam/title_wakayama.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
*/

.title_slider li#team_amagasaki {
	background:url(../img/ourteam/title_amagasaki.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_itdept {
	background:url(../img/ourteam/title_itdept.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_marketing {
	background:url(../img/ourteam/title_marketing.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_logistics {
	background:url(../img/ourteam/title_logistics.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_kankan {
	background:url(../img/ourteam/title_kankan.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_lalaportsakai {
	background:url(../img/ourteam/title_lalaportsakai.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}
.title_slider li#team_machida {
	background:url(../img/ourteam/title_machida.png) no-repeat;
	background-position:center 30%;
	background-size:100% auto;
}

.title_slider li .focal_point {
    width: 100%;
    height: 250px;
    overflow: hidden;
}  
.title_slider li .focal_point img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
} 
.title_slider li .focal_point div {
    position: relative;
    max-width: none;
    height: auto;
	margin:4.8em -6em 0 -6em;
}

/***タブ***/
#tab_container {
    width: 100%;
}
#tab_container ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#tab_container ul li {
    width: 20%;
    text-align: center;
    padding: 10px 8px;
    box-sizing: border-box;
    cursor: pointer;
}
#tab_container ul li#tab_kemari {
    background: #0b6334;
}
#tab_container ul li#tab_originals {
    background: #0071bf;
}
#tab_container ul li#tab_on {
    background: #000000;
}
#tab_container ul li#tab_others {
    background: #c4c4c4;
}
#tab_container ul li#tab_kemari_run {
    background: #eea07a;
}
#tab_container ul li img {
    max-width: 100%;
}

/***フィルター***/
.team_filter {
    display: none;
}
.team_filter.show {
    display: block;
    animation: filter-show .5s ease-in-out forwards;
}
@keyframes filter-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.team_filter ul li a {
	display:block;
	width:100%;
	padding:5px 0;
	text-align:center;
    /*font-weight: bold;*/
}
/*kemari87*/
.team_filter#kemari87 {
	overflow-x: scroll;
}
.team_filter#kemari87::-webkit-scrollbar {
    height: 5px;
}
.team_filter#kemari87::-webkit-scrollbar-thumb {
    background: #9eafa3;
    border-radius: 4px;
}
 
.team_filter#kemari87::-webkit-scrollbar-track {
    background: #c4d7ca;
    border-radius: 4px;
}
.team_filter#kemari87 ul  {
    width:670px;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;
    background: #0b6334;
    box-sizing: border-box;
}
.team_filter#kemari87 ul li {
	width:80px;
    text-align: center;
}
.team_filter#kemari87 ul li.long {
	width:110px;
}
.team_filter#kemari87 ul li a {
	color:#FFFFFF;
    transition: color 0.5s;
}
.team_filter#kemari87 ul li a:hover {
	color:#90c31f;
}

/*originals*/
.team_filter#originals ul  {
    width:100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;
    background: #0071bf;
    box-sizing: border-box;
}
.team_filter#originals ul li {
    width: 25%;
    text-align: center;
}
.team_filter#originals ul li a {
	color:#FFF;
    transition: color 0.5s;
}
.team_filter#originals ul li a:hover {
	color:#2e2967;
}

/*on*/
.team_filter#on ul  {
    width:100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;
    background: #000000;
    box-sizing: border-box;
}
.team_filter#on ul li {
    width: 100%;
    text-align: center;
}
.team_filter#on ul li a {
	color:#FFF;
    transition: color 0.5s;
}
.team_filter#on ul li a:hover {
	color:#6e6e6e;
}

/*others*/
.team_filter#others ul  {
    width:100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;
    background: #c4c4c4;
    box-sizing: border-box;
}
.team_filter#others ul li {
    width: 100%;
    text-align: center;
}
.team_filter#others ul li a {
	color:#000;
    transition: color 0.5s;
}
.team_filter#others ul li a:hover {
	color:#ffffff;
}

/*kemari run*/
.team_filter#kemari_run ul  {
    width:100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-around;
    background: #eea07a;
    box-sizing: border-box;
}
.team_filter#kemari_run ul li {
    width: 100%;
    text-align: center;
}
.team_filter#kemari_run ul li a {
	color:#000;
    font-weight: bold;
    transition: color 0.5s;
}
.team_filter#kemari_run ul li a:hover {
	color:#FFF;
}

/*
.team_filter ul li#filter_all:hover, .team_filter ul li#filter_all.selected {
	background:#333;
}
.team_filter ul li#filter_izumisano:hover, .team_filter ul li#filter_izumisano.selected {
	background:#0063CE;
}
.team_filter ul li#filter_sakai:hover, .team_filter ul li#filter_sakai.selected {
	background:#EACE26;
}
.team_filter ul li#filter_shinsaibashi:hover, .team_filter ul li#filter_shinsaibashi.selected {
	background:#ED1C24;
}
.team_filter ul li#filter_yawata:hover, .team_filter ul li#filter_yawata.selected {
	background:#9F14C1;
}


.team_filter ul li#filter_wakayama:hover, .team_filter ul li#filter_wakayama.selected {
	background:#FF3C00;
}


.team_filter ul li#filter_amagasaki:hover, .team_filter ul li#filter_amagasaki.selected {
	background:#F94380;
}
.team_filter ul li#filter_kankan:hover, .team_filter ul li#filter_kankan.selected {
	background:#1e6300;
}
.team_filter ul li#filter_lalaportsakai:hover, .team_filter ul li#filter_kankan.selected {
	background:#00225C;
}
.team_filter ul li#filter_machida:hover, .team_filter ul li#filter_machida.selected {
	background:#c187cb;
}
.team_filter ul li#filter_headquarters:hover, .team_filter ul li#filter_headquarters.selected {
	background:#19C406;
}
.team_filter ul li#filter_marketing:hover, .team_filter ul li#filter_marketing.selected {
	background:#825BD8;
}
.team_filter ul li#filter_logistics:hover, .team_filter ul li#filter_logistics.selected {
	background:#F7AC08;
}
.team_filter ul li#filter_itdept:hover, .team_filter ul li#filter_itdept.selected {
	background:#1ACDE5;
}*/

/***STAFF***/
#staff {
	margin-top:20px;
	padding-bottom:60px;
}
#staff ul {
	margin:15px 5px;
}
#staff ul li {
	float:left;
	width:50%;
	padding:5px;
	text-align:left;
	overflow:hidden;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	-ms-box-sizing: border-box;
  	box-sizing: border-box;
	position:relative;
	cursor:pointer;
}

#staff ul li .profile_staff {
	position: relative;
    width: 100%;
    height: auto;
	overflow:hidden;
	background:url(../img/ourteam/bg_staff.jpg) no-repeat;
	background-size:cover;
}
#staff ul li .profile_staff:before {
	content: "";
    display: block;
    padding-top: 100%;
}
#staff ul li .profile_staff .img_staff {
	position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
#staff ul li .profile_staff .img_staff img{
	width: 100%;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
}
#staff ul li .profile_staff .img_staff p{
	position: relative;
    max-width: none;
    height: auto;
	margin:-1em -3em;
}
#staff ul li .profile_staff .txt_staff{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:10px;
	color:#FFF;
	background-color:rgba(0,0,0,0.7);
	z-index:5;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	-ms-box-sizing: border-box;
  	box-sizing: border-box;
	transition:all 0.5s;
	overflow:hidden !important;
}
#staff ul li.selected .profile_staff .txt_staff{
	opacity:1;
}
#staff ul li .profile_staff .txt_staff:before {
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:95%;
	height:95%;
	z-index:6;
	border:1px solid #FFF;
	overflow:hidden !important;
}
#staff ul li .profile_staff .txt_staff:after {
	content:'X';
	position:absolute;
	bottom:5px;
	right:10px;
	color:#3C0;
}

#staff ul li .profile_staff .txt_staff .name_staff {
	font-size:16px;
	font-weight:bold;
	margin-bottom:5px;
}
#staff ul li .profile_staff .txt_staff .msg_staff {
	height:80%;
	overflow:hidden;
}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){
	
	/***TITLE***/
	#page_title p{
		bottom:20px;
	}
	/*部署毎のタイトル画像*/
	.title_slider li#team_headquarters {
		background-position:center 10%;
	}
	.title_slider li#team_izumisano {
		background-position:center 10%;
	}
	.title_slider li#team_sakai {
		background-position:center 10%;
	}
	.title_slider li#team_shinsaibashi {
		background-position:center 10%;
	}
	.title_slider li#team_yawata {
		background-position:center 10%;
	}

/*
	.title_slider li#team_wakayama {
		background-position:center 10%;
	}
*/

	.title_slider li#team_amagasaki {
		background-position:center 10%;
	}
	.title_slider li#team_itdept {
		background-position:center 10%;
	}
	.title_slider li#team_marketing {
		background-position:center 10%;
	}
	.title_slider li#team_logistics {
		background-position:center 10%;
	}
	
	.title_slider li .focal_point div {
		margin:0em -7.5em 0 -7.5em;
	}
	
	
	/***STAFF***/
	#staff {
		margin-top:30px;
		padding-bottom:80px;
	}
	#staff ul li .profile_staff .txt_staff:before {
		width:90%;
		height:90%;
	}
	#staff ul li .profile_staff .txt_staff:after {
		font-size:16px;
		right:20px;
		bottom:15px;
	}
	#staff ul li .profile_staff .txt_staff{
		padding:20px;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		height:auto;
		position:absolute;
		padding-right:15px;
		bottom:28px;
		line-height:1.2;
	}

}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:640px){
	/***タイトル***/
	#page_title {
		height:350px;
	}
	#page_title p{
		width:450px;
		height:70px;
		bottom:30px;
		font-size:52px;
	}
	/*スライダー*/
	.title_slider {
		height:350px;
	}
	.title_slider li .focal_point {
		height: 350px;
	}
	.title_slider li .focal_point div {
		margin:2em -8em 0 -8em;
	}
	
    /***タブ***/
    #tab_container ul li {
        padding: 10px 20px;
    }

    /***フィルター***/
    .team_filter ul li a {
        display:block;
        width:100%;
        padding:8px 0;
        text-align:center;
        /*font-weight: bold;*/
    }
    /*kemari87*/
    .team_filter#kemari87 {
        overflow-x:inherit;
    }
    .team_filter#kemari87 ul  {
        width:100%;
    }
    .team_filter#kemari87 ul li {
        width:12%;
        text-align: center;
    }
    .team_filter#kemari87 ul li.long {
        width:16%;
    }

    /*originals*/
    .team_filter#originals ul li a br {
        display: none;
    }
	
	/***STAFF***/
	#staff {
		margin-top:40px;
	}
	#staff ul li {
		width:33.3%;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff span {
		display:none;
	}
}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:680px){
}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){
	/***タイトル***/
	/*スライダー*/
	.title_slider li .focal_point div {
		margin:1em -6em 0 -6em;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff span {
		display:inline;
	}
    
    /***タブ***/
    #tab_container img {
        width: 132px;
        height: auto;
    }
    #tab_container ul li {
        padding: 10px 30px;
    }

	
}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:980px){
	/***タイトル***/
	#page_title {
		height:400px;
	}
	/*スライダー*/
	.title_slider {
		height:400px;
	}
	.title_slider li .focal_point {
		height: 400px;
	}
	.title_slider li .focal_point div {
		margin:1em -4em 0 -4em;
	}
    
    /***フィルター***/
    /*kemari87*/
    .team_filter#kemari87 ul  {
        justify-content:center;
    }
    .team_filter#kemari87 ul li {
        width:110px;
        text-align: center;
    }
    .team_filter#kemari87 ul li.long {
        width:150px;
    }
    /*originals*/
    .team_filter#originals ul  {
        justify-content:center;
    }
    .team_filter#originals ul li {
        width: 147px;
        text-align: center;
    }
    /*others*/
    .team_filter#others ul  {
        width:100%;
        padding: 5px 0;
        display: flex;
        justify-content: center;
        background: #c4c4c4;
        box-sizing: border-box;
    }
    .team_filter#others ul li {
        width: 98px;
        text-align: center;
    }
    .team_filter#others ul li a {
        color:#000;
    }
	
	/***STAFF***/
	#staff ul li .profile_staff .txt_staff{
		padding:20px 25px;
	}
	#staff ul li .profile_staff .txt_staff .name_staff {
		font-size:24px;
		font-weight:normal;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		padding-right:25px;
		line-height:1.5;
	}
	
}

/********************************************
タブレット　ランドスケープ
*********************************************/
@media only screen and (min-width: 1024px) {
	
	/***STAFF***/
	#staff ul li {
		width:25%;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		padding-right:20px;
		line-height:1.2;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1051px) {
	/***タイトル***/
	.title_slider li .focal_point div {
		margin:2em -4em 0 -4em;
	}
		
	/***STAFF***/
	#staff ul {
		margin:20px 30px;
	}
	#staff ul li {
		width:33.3%;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		padding-right:25px;
		line-height:1.5;
	}
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1280px) {
	/***タイトル***/
	#page_title {
		height:450px;
	}
	/*部署毎のタイトル画像*/
	.title_slider li#team_headquarters {
		background-size:1000px auto;
	}
	.title_slider li#team_izumisano {
		background-size:1000px auto;
	}
	.title_slider li#team_sakai {
		background-size:1000px auto;
	}
	.title_slider li#team_shinsaibashi {
		background-size:1000px auto;
	}
	.title_slider li#team_yawata {
		background-size:1000px auto;
	}

/*
	.title_slider li#team_wakayama {
		background-size:1000px auto;
	}
*/

	.title_slider li#team_amagasaki {
		background-size:1000px auto;
	}
	.title_slider li#team_itdept {
		background-size:1000px auto;
	}
	.title_slider li#team_marketing {
		background-size:1000px auto;
	}
	.title_slider li#team_logistics {
		background-size:1000px auto;
	}
	
	/***フィルター***/
	.team_filter ul {
		width:1010px;
		margin:0 auto;
	}
	
	
	/*スライダー*/
	.title_slider {
		height:450px;
	}
	.title_slider li .focal_point {
		width:1100px;
		margin:0 auto;
		height: 450px;
	}
	.title_slider li .focal_point div {
		margin:2em -1em 0 -1em;
	}

	
	/***STAFF***/
	#staff ul {
		margin:30px 50px;
	}
	/***STAFF***/
	#staff ul li {
		width:25%;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		padding-right:20px;
		line-height:1.2;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1368px) {	
	/***STAFF***/
	#staff ul {
		text-align:left;
	}
	#staff ul li {
		width:265px;
		height:265px;
		float:none;
		display:inline-block;
	}
	#staff ul li .profile_staff .txt_staff .msg_staff {
		padding-right:25px;
		line-height:1.3;
	}
}


/********************************************
PC
*********************************************/
@media only screen and (min-width: 1370px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1500px) {	
	/***STAFF***/
	#staff ul {
		width:85%;
		margin:0 auto;
		margin-top:30px;
		text-align:center;
	}
}



/********************************************
PC
*********************************************/
@media only screen and (min-width: 1680px) {
}