@charset "utf-8";
.br2 {display: none !important;}
/**/

#staff figure{
	overflow:hidden;
	position:relative
}

#staff figure>*{position:relative}

#staff figcaption{
	position:absolute;
	right:0;
	top:0;
	z-index:1
}

/**/


/*クリエイティブTOP
--------------------------------------*/
section#staffArea {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,010101+58,010101+100 */
background: #fff;

}
section#staffArea .top_header {
	padding: 40px 0 0px 0;
    width: 90%;
    overflow: hidden;
    margin: 0 auto 20px;
}

section#staffArea .top_header .cre_logo {
    width: 28%;
    float: left;
    margin: 6px 0 0 0;
}

section#staffArea .top_header p{
    color: #000;
    float: right;
    width: 72%;
    margin: 20px 0 0 0;
    font-size: 110%;
    letter-spacing: 3px;
    border-bottom: 1px solid #000;
    padding: 0 0 8px 0;
    text-align: right;
}


section#staffArea h1 {
    padding: 80px 0;
}

section#staffArea h1::before {
	height:auto;
}

section#workArea {
	background:#fff;
	padding:50px 0 300px 0;
}

section#workArea h1 {
    padding: 80px 0;
}

section#workArea h1::before {
	height:auto;
}


#staff{
	overflow: hidden;
	width: 91%;
	margin: 0 auto;
	padding:0;
}

#staff_sp {
	display:none;
}

#staff li {
    width: 33%;
    height: 603px;
    float: left;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

#staff li img {
	max-width:inherit;
	position:absolute;
}

#staff li a {
	display:block;
	width:100%;
	height:100%;
}

#staff li img.st_t {
	display:none;
}

/*01 ----------------------------*/
#staff li.nam01 a {
	background-position:right 10% top 55%;
}

#staff li.nam01 a:hover {
	background:url(../imgs/creative-team/top/pc/staff-1-t.png) no-repeat right 10% top 55%;
-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
}

#staff li.nam01 a img {
	left:-8%;
}

#staff li.nam01.active a img {
	left:-30%;
}

#staff li.nam01 a:hover span {
    background: url(../imgs/creative-team/top/pc/viewmore.png) no-repeat;
    padding: 5px 0;
    display: none;
    position: absolute;
    top: 60%;
    right: 22%;
    width: 208px;
    height: 45px;
    z-index: 0;
}


/*02 ----------------------------*/

#staff li.nam02 a {
	background-position:right 10% top 55%;
}

#staff li.nam02 a:hover {
	background:url(../imgs/creative-team/top/pc/staff-2-t.png) no-repeat right 10% top 55%;
-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
}

#staff li.nam02 a img {
	left:-8%;
}

#staff li.nam02.active a img {
	left:-20%;
}

#staff li.nam02 a span {
    background: url(../imgs/creative-team/top/pc/viewmore.png) no-repeat;
    padding: 5px 0;
    display: none;
    position: absolute;
    top: 60%;
    right: 18%;
    width: 208px;
    height: 45px;
    z-index: 0;
}
/*03 ----------------------------*/

#staff li.nam03 a {
	background-position:right 10% top 55%;
}

#staff li.nam03 a:hover {
	background:url(../imgs/creative-team/top/pc/staff-5-t.png) no-repeat right 10% top 55%;
-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
}

#staff li.nam03 a img {
	left:-8%;
}

#staff li.nam03.active a img {
	left:-20%;
}

#staff li.nam03 a span {
    background: url(../imgs/creative-team/top/pc/viewmore.png) no-repeat;
    padding: 5px 0;
    display: none;
    position: absolute;
    top: 60%;
    right: 18%;
    width: 208px;
    height: 45px;
    z-index: 0;
}

/*04 ----------------------------*/

#staff li.nam04 a {
	background-position:right 10% top 55%;
}

#staff li.nam04 a:hover {
	background:url(../imgs/creative-team/top/pc/staff-4-t.png) no-repeat right 10% top 55%;
-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
}

#staff li.nam04 a img {
	left:-8%;
}

#staff li.nam04.active a img {
	left:-35%;
}

#staff li.nam04 a span {
    background: url(../imgs/creative-team/top/pc/viewmore.png) no-repeat;
    padding: 5px 0;
    display: none;
    position: absolute;
    top: 60%;
    right: 18%;
    width: 208px;
    height: 45px;
    z-index: 0;
}

/*05 ----------------------------*/

#staff li.nam05 a {
	background-position:right 10% top 30%;
}

#staff li.nam05 a:hover {
	background:url(../imgs/creative-team/top/pc/staff-5-t.png) no-repeat right 10% top 30%;
-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
}

#staff li.nam05 a img {
	left:-8%;
}

#staff li.nam05.active a img {
	left:-20%;
}

#staff li.nam05 a span {
    background: url(../imgs/creative-team/top/pc/viewmore.png) no-repeat;
    padding: 5px 0;
    display: none;
    position: absolute;
    top: 60%;
    right: 18%;
    width: 208px;
    height: 45px;
    z-index: 0;
}

/*
	#staff>*{
		float:left;
		-webkit-transition:width 2s;
		transition:width 2s;
		width:20%
	}

	#staff:hover>*{width:12.5%}

	#staff>*:hover{width:50%}

	#staff img{max-width:none}

	#staff figcaption{
		opacity:0;
		padding:50px 25px 0 0;
		text-align:center;
		-webkit-transition:opacity .5s;
		transition:opacity .5s;
		z-index:1
	}

	#staff>*:hover figcaption{
		opacity:1;
		-webkit-transition:opacity .5s 1s;
		transition:opacity .5s 1s;
		z-index:2
	}

	#staff h2{margin-bottom:90px}

	#staff div+div{display:none}

	.color{
		left:0;
		opacity:0;
		position:absolute;
		-webkit-transition:opacity 1s;
		transition:opacity 1s;
		top:0
	}

	#staff>*:hover .color{opacity:1}

}




/**/


.ready {
    opacity: 0;
}
.loaded {
  opacity: 1;
    -webkit-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    -moz-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    -o-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
}


/**/

#work{}

#work>h2{text-align:center}

/**/

#select-all{
	margin:0 auto 0;
	position:relative
}

#select{
	overflow:hidden;
	width:50%;
	margin:0 auto;
}

#select-img{
	float:left;
	width:30%;
	padding:8px;
}

#member{
    float: right;
    position: relative;
    width: 60%;
	border:1px solid #ccc;
    border-radius: 5px;
	box-sizing:border-box;
}

#member>p{
	color:#333;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
	padding:5px 5px 5px 20px;
	cursor:pointer;
}

#select-button{
    border: 13px solid transparent;
    border-top-color: #ccc;
    border-top-width: 16px;
    cursor: pointer;
    position: absolute;
    right: 2%;
    top: 35%;
}

#select-menu{
    border: 1px solid #ccc;
    color: #333;
    font-family: sans-serif;
    position: absolute;
    right: 25%;
    width: 30%;
    border-radius: 0 0 10px 10px;
    background: #fff;
}

#select-menu>li{
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    margin: 5px;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
}

#select-menu>li:hover{
	background:#ccc;
	color:#fff;
}

.select-close{display:none}

.select-open{display:block}

/**/

#imgs{
	margin:auto;
	max-width:1560px;
	overflow:hidden
}

#imgs>*{
	float:left;
	margin-top:2%;
	text-align:center;
	width:25%
}

#imgs img{width:90%}

.none{display:none}

/**/


@media screen and (max-width: 1499px) {
/**/

#staff figure{
	overflow:hidden;
	position:relative
}

#staff figure>*{position:relative}

#staff figcaption{
	position:absolute;
	right:0;
	top:0;
	z-index:1;
}

section#staffArea .top_header {
	width:100%;
}

section#staffArea .top_header .cre_logo {
    width: 35%;
}

section#staffArea .top_header p{
	width: 63%;
    font-size: 80%;
    text-align: left;
}


/*クリエイティブTOP
--------------------------------------*/
section#staffArea {


}


section#staffArea h1 {
    padding: 80px 0;
}

section#staffArea h1::before {
	height:auto;
}

section#workArea {
	padding:0 0 100px 0;
}

section#workArea h1 {
    padding: 80px 0;
}

section#workArea h1::before {
	height:auto;
}


#staff{
	width: 100%;
}

#staff_sp {
	display:none;
}

#staff li {
    width: 20%;
    height: 603px;
    float: left;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

#staff li img {
	max-width:inherit;
	position:absolute;
}

#staff li a {
	display:block;
	width:100%;
	height:100%;
}

#staff li img.st_t {
	display:none;
}

/*01 ----------------------------*/

#staff li.nam01 a img {
	left: -20%;
}

#staff li.nam01.active a img {
	left:-30%;
}



/*02 ----------------------------*/

#staff li.nam02 a img {
	left: -20%;
}

#staff li.nam02.active a img {
	left:-20%;
}

/*03 ----------------------------*/


#staff li.nam03 a img {
	left: -20%;
}

#staff li.nam03.active a img {
	left:-20%;
}


/*04 ----------------------------*/


#staff li.nam04 a img {
	left: -20%;
}

#staff li.nam04.active a img {
	left:-35%;
}

/*05 ----------------------------*/


#staff li.nam05 a img {
	left: -55%;
}

#staff li.nam05.active a img {
	left:-20%;
}



/**/

#work{}

#work>h2{text-align:center}

/**/

#select-all{
	margin:0 auto 0;
	position:relative
}

#select{
	width:90%;
}

#select-img{
	width:40%;
}

#member {
	width:50%;
}

#member>p{
	color:#9b9b9b;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
	padding:5px 5px 5px 20px;
	cursor:pointer;
}

#select-button{
    border: 13px solid transparent;
    border-top-color: #fff;
    border-top-width: 16px;
    cursor: pointer;
    position: absolute;
    right: 2%;
    top: 35%;
}

#select-menu{
    padding: 0;
    border-top: none;
    width: 44.8%;
    right: 5%;
}

#select-menu>li{
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    margin: 5px;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
}

#select-menu>li:hover{background:#0b0b0b}

.select-close{display:none}

.select-open{display:block}

/**/

#imgs{
	margin:auto;
	max-width:1560px;
	overflow:hidden
}

#imgs>*{
	float:left;
	margin-top:2%;
	text-align:center;
	width:25%
}

#imgs img{width:90%}

.none{display:none}

/**/
}

@media screen and (max-width: 1023px) {
/**/

#staff figure{
	overflow:hidden;
	position:relative
}

#staff figure>*{position:relative}

#staff figcaption{
	position:absolute;
	right:0;
	top:0;
	z-index:1
}

section#staffArea .top_header {
	padding: 10px 0 0px 0;
	margin:0 auto 10px;
}

section#staffArea .top_header .cre_logo {
    width: 100%;
    float: none;
	text-align:center;
}

section#staffArea .top_header p{
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
    font-size: 90%;
    border-top: 1px solid #eee;
    border-bottom: none;
    padding: 10px 0 0 0;
    text-align: center;
}


/*クリエイティブTOP
--------------------------------------*/
section#staffArea {


}


section#staffArea h1 {
    padding: 80px 0;
}

section#workArea h1 {
    padding:50px 0;
}


#staff li {
    height: 300px;
}

#staff li img {
	width:430px;
	max-width:inherit;
	position:absolute;
}


/*01 ----------------------------*/

#staff li.nam01 a img {
	left:-8%;
}

#staff li.nam01.active a img {
	left:-30%;
}



/*02 ----------------------------*/


#staff li.nam02 a img {
	left:-8%;
}

#staff li.nam02.active a img {
	left:-20%;
}


/*03 ----------------------------*/


#staff li.nam03 a img {
	left:-8%;
}

#staff li.nam03.active a img {
	left:-20%;
}


/*04 ----------------------------*/

#staff li.nam04 a img {
	left:-8%;
}

#staff li.nam04.active a img {
	left:-35%;
}


/*05 ----------------------------*/


#staff li.nam05 a img {
	left:-8%;
}

#staff li.nam05.active a img {
	left:-20%;
}

/**/

#work{}

#work>h2{text-align:center}

/**/

#select-all{
	margin:0 auto 0;
	position:relative
}

#select{
	width:90%;
}

#select-img{
	width:40%;
}

#member {
	width:50%;
}


#member>p{
	color:#9b9b9b;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
	padding:5px 5px 5px 20px;
	cursor:pointer;
}

#select-button{
    border: 13px solid transparent;
    border-top-color: #fff;
    border-top-width: 16px;
    cursor: pointer;
    position: absolute;
    right: 2%;
    top: 35%;
}

#select-menu>li{
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    margin: 5px;
    font-size: 150%;
    letter-spacing: 5px;
    font-weight: bolder;
}

#select-menu>li:hover{background:#0b0b0b}

.select-close{display:none}

.select-open{display:block}

/**/

#imgs{
	margin:auto;
	max-width:1560px;
	overflow:hidden
}

#imgs>*{
	float:left;
	margin-top:2%;
	text-align:center;
	width:25%
}

#imgs img{width:90%}

.none{display:none}

/**/

}

@media screen and (max-width: 767px) {
	
.br2 {display: block!important;}	
	
#staff figure{
	overflow:hidden;
	position:relative
}

#staff figure>*{position:relative}

#staff figcaption{
	position:absolute;
	right:0;
	top:0;
	z-index:1
}

/**/

section#staffArea .top_header {
	padding: 30px 0 0px 0;
}

section#staffArea .top_header .cre_logo {
    width: 60%;
	margin:auto;
    float: none;
	text-align:center;
}

section#staffArea .top_header p{
    float: none;
    width: 100%;
    margin:5px 0 0 0;
    font-size: 70%;
    border-top: 1px solid #eee;
    border-bottom: none;
    padding: 10px 0 0 0;
    text-align: center;
}


/*クリエイティブTOP
--------------------------------------*/
section#staffArea {
	padding:0 10px;
}
section#staffArea h1 {
    padding: 30px 0;
    margin: 0;
}

section#staffArea h1::before {
	height:auto;
}


section#workArea h1 {
    padding: 30px 0;
    margin: 0;
}

section#workArea h1::before {
	height:auto;
}

section#workArea h1 img {
	width:35%;
}


#staff {
	display:none;
}

#staff_sp {
	display:block;
}

/
.ready {
    opacity: 0;
}
.loaded {
  opacity: 1;
    -webkit-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    -moz-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    -o-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
}


/**/

#work{
    padding: 0;
}

#work>h2{text-align:center}

/**/

#select-all{
	margin:0 auto 0;
	position:relative
}

#select{
	width: 100%;
	margin:0 auto;
	text-align: c;
}

#select-img{
    float: none;
    width: 60%;
    padding: 0 0 15px 0;
    text-align: center;
    margin: auto;
}

#member{
    float: none;
    width: 98%;
    margin: 0 auto;
}

#member>p{
	font-size: 100%;
}

#select-button{
    border: 13px solid transparent;
    border-top-color: #fff;
    border-top-width: 16px;
    cursor: pointer;
    position: absolute;
    right: 2%;
    top: 35%;
}

#select-menu{
	padding:15px 0;
	position:absolute;
	right:0;
	width: 100%;
	z-index:100;
}

#select-menu>li{
    margin:0 0 5px 0;
    font-size: 100%;
	padding: 0 0 0 15px;
}

#select-menu>li:hover{background:#0b0b0b}

.select-close{display:none}

.select-open{display:block}

/**/

#imgs{
	margin: 10px 0;
	/* max-width:1560px; */
	/* overflow:hidden; */
}

#imgs>*{
	float:left;
	margin-top:2%;
	text-align:center;
	width: 33%;
}

#imgs img{width:90%}

.none{display:none}
}