@charset "utf-8";

html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

html, body {
line-height: 1;
min-height:100%;
font-family:Artial, Verdana, sans-serif;
}

body {background: url(../img/bg201709.jpg) no-repeat top center #060606 fixed;/* position: relative; */}

ol, ul {
list-style: none;
}

p {
margin:1em 0;
line-height:1.1em;
}

q {
font-style:italic;
color:#333;
}

h1 > small {
text-align:right;
display:inline-block;
font-size:.71em;
text-indent:15em;
color:#444;
}

h2 {
color:inherit;
font-size:1.91em;
margin:2em 0 1em 0;
}

h2:first-child {margin-top:0;}

h3 {
color:#333;
font-size:1.41em;
margin:1em 0;
}

h4 {
color:#444;
font-size:1.11em;
margin:1em 0;
}


#scrollbar {
position:fixed;
right:2px;
height:50px;
width:6px;
background:#444;
background:rgba(0,0,0,0.6);
border:1px solid rgba(255,255,255,0.6);
z-index:300;
border-radius:3px;
}

.skrollr-desktop #scrollbar {display:none;}

#bg1, #bg2, #bg3 {
z-index:50;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/bubbles.png) repeat 0 0;
}

#bg2 {
z-index:49;
background-image:url(images/bubbles2.png);
}

#bg3 {
z-index:48;
background-image:url(images/bubbles3.png);
}

#intro {width: 50%;height: 1400px;right: 50%;top: 0;margin-right: 60px;/*-webkit-transform: rotate(315deg);
transform: rotate(315deg);*/background:#fff;text-align:right;-webkit-transform-origin:100% 0px 0px;-moz-transform-origin:100% 0px 0px;-ms-transform-origin:100% 0px 0px;-o-transform-origin:100% 0px 0px;transform-origin:100% 0px 0px;position: absolute;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);z-index: 900;position: fixed;}

#intromenu {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);

transform-origin: 100% 0px 0px;
   -moz-transform-origin: 100% 0px 0px;
   -webkit-transform-origin: 100% 0px 0px;
   -o-transform-origin: 100% 0px 0px;

padding: 0;
text-align: center;
right: 198px;
position: absolute;
width: 490px;
}

#intromenu li {
display: inline-block;
width: 95px;
height: auto;
float: right;
margin: 228px 0 0;
position: relative;
top: 0;
vertical-align: middle;
}

#intromenu li:after {
content:"";
width: 1000px;
height: 120px;
position: absolute;
border:solid 1px #999999;

transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
   -moz-transform: rotate(-135deg);
   -o-transform: rotate(-135deg);

transform-origin: 0 0;
-moz-transform-origin:  0 0;
-webkit-transform-origin:  0 0;
-o-transform-origin:  0 0;

top: 96px;
left: 47%;
z-index: 0;
}

#intromenu li a:before {
content:"";
width: 1000px;
height: 84px;
background: rgba(0,0,0,0.0);
position: absolute;
border:solid 1px #999999;
transform: rotate(-180deg) skew(-45deg);
-webkit-transform:  rotate(-180deg) skew(-45deg);
-moz-transform:  rotate(-180deg) skew(-45deg);
-o-transform: rotate(-180deg) skew(-45deg);

transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;

top: 96px;
left: 47%;
z-index: 100;

	transition: all 0.9s cubic-bezier(0.190, 1, 0.220, 1.000);
    -webkit-transition: all 0.9s cubic-bezier(0.190, 1, 0.220, 1.000);
    -moz-transition: all 0.9s cubic-bezier(0.190, 1, 0.220, 1.000);
    -o-transition: all 0.9s cubic-bezier(0.190, 1, 0.220, 1.000);


}

#intromenu li a:hover:before {
	
	background: rgba(0,0,0,0.3);
	
}

#intromenu li a {display:inline-block;height: 30px;vertical-align: middle;line-height: 130%;padding: 30px 0 0;color: #000000;text-decoration: none;z-index: 900;position: relative;font-size: 18px;}

#intromenu li span {display:block;font-size: 16px;}

#intromenu li#makeupfx {

}

#intromenu li#prosthetics {
margin: 323px 0 0;
}

#intromenu li#costumes {
margin: 418px 0 0;
}

#transform {
width:70%;
left:50%;
top:20%;
margin-left:-35%;
text-align:center;
font-size:150%;
}

#properties {
width:100%;
height:100%;
padding-top:10%;
text-align:center;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#easing_wrapper {
width:100%;
height:100%;
}

#easing {
top:10%;
width:50%;
z-index:101;
}

.drop {
background:#09f;
font-weight:bold;
padding:1em;
}

#download {
width:80%;
left:10%;
height:80%;
padding:3em;
border:0 solid #222;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.twitter-share-button, .twitter-follow-button {
vertical-align:middle;
}

/*Customs */

#arrow01:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 37px solid rgba(255, 255, 255, 1);
	border-right: 42px solid transparent;
	border-left: 42px solid transparent;
	border-bottom: transparent;
	left: -15px;
	display: block;
	z-index: -1;
	top: -12px;
}

#arrow01:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 34px solid rgb(86, 86, 86);
	border-right: 38px solid transparent;
	border-left: 38px solid transparent;
	border-bottom: transparent;
	left: -11px;
	display: block;
	z-index: -1;
	top: -11px;
}

#arrow01 {
	width: 100px;
	height: 100px;
	/* border: solid 1px #FFFFFF; */
	/* transform: rotate(45deg); */
	/* -webkit-transform: rotate(45deg); */
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	bottom: 20px;
	left: 50%;
	margin-left: -60px;
	color: #000000;
	z-index: 600;
	text-align: center;
	animation: rumble 0.7s ease-in-out infinite;
}

#arrow01 a {
	text-decoration:none;
	color:#000000;
	display: inline-block;
	width: 120px;
	height: 65px;
}

@keyframes rumble{
	0%	{transform:translate(0,0);}
	50%	{transform:translate(0px,9px);}
	100%	{transform:translate(0,0);}
}

.pagenav {
	z-index: 800;
	left: 50%;
}

.pagenav .prev {
	display: block;
	font-size: 0;
	width: 38px;
	/* background-color: #FF0000; */
	height: 22px;
	position: absolute;
	/* margin-left: 50%; */
	z-index: 800;
}

.pagenav .prev:before {
	content:"";
	display: block;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-bottom: 18px solid  rgba(255,255,255,0.6);
	margin-left: 0;
	margin-top: -16px;
	position: absolute;
	z-index: -20;
}

.pagenav .next {
	display: block;
	font-size: 0;
	width: 38px;
	/* background-color: #FF0000; */
	height: 22px;
	margin: 12px 0 0;
	z-index: 800;
	/* position: fixed; */
	bottom: 20px;
}

.pagenav .next:before {
	content:"";
	display: block;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-top: 18px solid rgba(255,255,255,0.6);
	margin-left: 0;
	margin-top: 2px;
	position: absolute;
	z-index: -20;
}

#pagenav01,#pagenav02 {
	width: 32px;
	height: 70px;
	/* border: solid 1px #FFFFFF; */
	/* transform: rotate(45deg); */
	/* -webkit-transform: rotate(45deg); */
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	bottom: 20px;
	left: 50%;
	margin-left: -15px;
	color: #000000;
	z-index: 600;
	text-align: center;
	/* animation: rumble 1.2s ease-in-out infinite; */
}

#frames01 {
width: 1600px;
height: 1600px;
border:solid 1px #999999;

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: -800px;
left: 50%;
margin-left: -800px;
}

#frames02 {
width: 1600px;
height: 1600px;
border:solid 1px #999999;

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: 262px;
left: 50%;
margin-left: -800px;
}

#frames03 {
width: 1600px;
height: 1600px;
border:solid 1px #999999;


transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: 670px;
left: 50%;
margin-left: -800px;
}

#frames04 {
width: 900px;
height: 900px;
border:solid 1px #999999;
background:rgba(254,254,254,0.3);

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: -180px;
left: 50%;
margin-left: 600px;
}

#frames05 {
width: 900px;
height: 900px;
/* border:solid 1px #999999; */
background: rgba(0,0,0,0.3);

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: 458px;
left: 50%;
margin-left: -36px;
}

#frames051 {
width: 1200px;
height: 1200px;
/* border:solid 1px #999999; */
background: rgba(254,254,254,0.3);

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: 600px;
left: 0;
margin-left: -600px;
}


#frames06 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
background: rgba(254,254,254,0.3);
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -646px;
right: 50%;
margin-right: 344px;
}

#frames07 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
background: rgba(254,254,254,0.3);
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -300px;
left: 50%;
margin-left: 754px;
}

#frames08 {
width: 1600px;
height: 1600px;

/* border:solid 1px #999999; */
border: solid 1px #999999;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

top: -900px;
left: 50%;
margin-left: -754px;
}

frames09 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
background: rgba(254,254,254,0.3);
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -646px;
right: 50%;
margin-right: 344px;
}

#frames10 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
background: rgba(254,254,254,0.3);
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -300px;
left: 50%;
margin-left: 754px;
}

#frames11 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
border: solid 1px #999999;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: 750px;
left: 50%;
margin-left: -1397px;
}

#frames12 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
border: solid 1px #999999;

transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -296px;
left: 0;
margin-left: -1193px;
}

#frames13 {
width: 1600px;
height: 1600px;
/* border:solid 1px #999999; */
border: solid 1px #999999;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: -900px;
left: 50%;
margin-left: -754px;
}

#mov01 {
    width: 640px;
    height: 720px;
    /* position: absolute; */
    /* vertical-align: bottom; */
    bottom: 0;
    z-index: -20;
}

#mov02 {
    width: 800px;
    height: 739px;
    /* position: absolute; */
    /* vertical-align: bottom; */
    bottom: 0;
    z-index: -20;
}

#mov01 video {
width: 628px;
height: 480px;
}

#mov01:before,#mov02:before {
	content: "";
	display:block;
	width:100%;
	height:100%;
	background:url(../img/dotbg.png) repeat;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

#mov02 video {
width: 740px;
/* height: 800px; */
}


#header {position: fixed;top:0;width:100%;background:rgba(0,0,0,0.6);height: 76px;border-bottom:solid 1px #444444;z-index: 1000;}

h1#logo {
font-size: 0;
color: #FFFFFF;
margin: 6px 0 0 -475px;
position: absolute;
z-index: 600;
/* top: 0; */
left: 50%;
}

h1#logo:before {
content:"";
position: fixed;
width: 100%;
background: #FFFFFF;
display: inline-block;
height: 76px;
/* top: -6px; */
right: 50%;
margin: -6px 99px 0 0;
transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);  
-webkit-transform: skew(-45deg);
}

h1#logo a {

background: url(../img/jiyuro-logo.png) no-repeat;
display: block;
width: 357px;
   height: 60px;
}

#header ul {
float: right;
display: block;
width: 100%;
text-align: right;
}

#header li {
display: inline-block;

width: 8%;
text-align: center;
font-size: 18px;
}

#header a {
z-index:600;
display: block;
position: relative;
width: 90px;
height: 100%;
}

#header li a {
color: #FFFFFF;
text-decoration: none;
padding: 40px 0 0;
margin: 0 auto;
}

#header li a:hover {

}

#header li a span {
display: none;
font-size: 13px;
padding: 3px 0 0;
color: #8A8A8A;
}

#header li a:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 75px solid rgba(255,255,255,0.0);
border-right: 75px solid transparent;
border-left: 75px solid transparent;
margin: -60px 0 0 -75px;
left: 50%;
z-index: -100;}

#header li a:hover:before {
margin: -12px 0 0 -75px;
border-top: 75px solid rgba(255,255,255,0.2);
transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-webkit-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-moz-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
-o-transition: all 0.4s cubic-bezier(0.190, 1, 0.220, 1.000);
}

#maincopy {
position:absolute;
right: 10px;
margin:0;
top: 190px;
}

#maincopy h2 {
font-size: 30px;
font-weight: normal;
color: #ffffff;
margin: 0 0 0 180px;
}


#facebook {
position: absolute;
right: 10px;
margin: 0;
top: 260px;
z-index: 400;
}

#links {
/* position:absolute; */
/* top: 532px; */
/* right: 10px; */
/* text-align:right; */
/* z-index: 400; */
}

#links h4 {
margin:12px 0 -8px;
}

#fujiyuro {
/* display: inline-block; */
/* position: relative; */
/* text-align: center; */
/* clear: both; */
/* float: right; */
}

#kage6sha {
/* display: inline-block; */
 
/* position: relative; */
/* text-align: center; */
/* clear: both; */
/* float: right; */
}

#school {display: inline-block;position: absolute;left: 0;bottom: -52px;z-index: 200;}
#school h4 {font-size:0px;}
#text1 {display:block;position:absolute;bottom: 240px;width: 428px;font-size: 16px;right: 5%;color: #FFF;line-height: 255%;z-index: 200;position: fixed;}

#makeupfxarea {
position:absolute;
top: 95px;
width: 980px;
left: 50%;
margin-left: -490px;
}

#makeuptitle {
display:block;
width: 343px;
font-size: 14px;
color: #FFF;
line-height: 255%;
text-align: center;
background: url(../img/makeupfx_title_bg.png) no-repeat 0 26px;
height: 338px;
padding: 0 0 0 20px;
}

#makeuptitle h2 {
color: #FFFFFF;
font-weight: normal;
margin: 0;
}

#makeuptitle h3 {
color: #FFFFFF;
font-weight: normal;
font-size: 1.7em;
margin: 0;
letter-spacing: 12px;
}

#makeuptitle h3:after {
content:"";
display:block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #FFFFFF;
margin-left: 156px;
margin-top: 14px;
}

#makeuptitle p {
color: #000000;
position: relative;
margin: 18px 0 0;
line-height: 18px;
}

#makeuptitle p:before {
content:"";
display:block;
width: 0;
height: 0;
border: 80px solid transparent;
border-top: 66px solid #FFFFFF;
margin-left: 92px;
margin-top: -9px;
position: absolute;
z-index: -20;
}

#makeuptext {
width: 780px;
padding: 22px 0 0 286px;
color: #FFFFFF;
z-index: 300;
}

#makeuptext p {
font-size: 13px;

line-height: 180%;
}

#makeupmenu {
left: 50%;
margin-left: 240px;
width: 800px;
padding: 0;
margin-top: 186px;
}

#makeupmenu ul {
    /* display: none; */

}

#makeupmenu ul li {
text-align: left;
font-size: 13px;
padding: 0 26px 0 0;
color: #DCDCDC;
line-height: 145%;
}

.makeupmenu1 {
margin: 0;
}

.makeupmenu2 {
margin: 0;
}

.makeupmenu3 {
margin: 0;
}

.makeupmenu4 {
margin: 0;
}

#makeupmenu h4 {
border-bottom: solid 1px #999999;
margin: 18px 0 5px 0;
padding: 0 0 5px 0px;
font-size: 18px!important;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
}

#makeupmenu ul li h4 a:before {
content:"";
display:block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left: 7px solid #FFFFFF;
margin-left: 400px;
margin-top: 2px;
position: absolute;
opacity: 0;

	transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -webkit-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
}

#makeupmenu ul li h4 a:hover:before {
opacity:1;
margin-left: -15px;
}
#makeupmenu ul li a {
color:#FFFFFF;
text-decoration: none;
font-weight: normal;
}

#prostheticsarea {
position:absolute;
top: 120px;
width: 980px;
left: 50%;
margin-left: -490px;
}



#prostheticstitle {
display:block;

width: 343px;
font-size: 14px;
color: #FFF;
line-height: 255%;
text-align: center;
background: url(../img/prostheticsfx_title_bg.png) no-repeat 0 42px;
height: 338px;
padding: 0 0 0 150px;
}

#prostheticstitle h2 {
color: #FFFFFF;

font-weight: normal;
margin: 0;
}

#prostheticstitle h3 {
color: #FFFFFF;
font-weight: normal;
font-size: 1.7em;
margin: 0;
letter-spacing: 12px;
}

#prostheticstitle h3:after {
content:"";
display:block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #FFFFFF;
margin-left: 156px;
margin-top: 14px;
}

#prostheticstitle p {
color: #000000;
position: relative;
margin: 17px 0 0;
}

#prostheticstitle p:before {
content:"";
display:block;
width: 0;
height: 0;
border: 94px solid transparent;
border-top: 90px solid #FFFFFF;
margin-left: 75px;
margin-top: -17px;
position: absolute;
z-index: -20;
}

#prostheticstext {
width: 460px;
padding: 325px 0 0 121px;
color: #FFFFFF;
background: url(../img/from_zero_bg.png) no-repeat 0px 341px;
z-index: 300;
}

#prostheticstext h3 {
    color: #FFFFFF;
	
    font-weight: normal;
}

#prostheticstext p {
font-size: 14px;

line-height: 250%;
}

#prostheticsmenu {
right: 50%;
margin-left: 240px;

width: 50%;
padding: 12px 0 0;




z-index: 300;
}


#prostheticsmenu ul {
    z-index: 200;

    position: relative;
}

#prostheticsmenu ul li {
text-align: right;
font-size: 12px;
}

#prostheticsmenu ul li h4 a:before {
content:"";
display:block;
width: 0;
height: 0;
border: 5px solid transparent;
border-right: 7px solid #FFFFFF;
margin-left: 0px;
margin-bottom: -12px;
position: relative;
left: 60%;

	transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -webkit-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
opacity: 0;
}
#prostheticsmenu ul li h4 a:hover:before {
    left:100%;
	opacity: 1;
}

.prostheticsmenu1 {
margin: 0 326px 0 0;
}

.prostheticsmenu2 {
margin: 0 263px 0 0;
}

.prostheticsmenu3 {
margin: 0px 199px 0 0;
}

.prostheticsmenu4 {
margin: 0 263px 0 0;
}

#prostheticsmenu h4 {
border-bottom: solid 1px #999999;
margin: 22px 0 5px 0;
padding: 0 12px 5px 0;
font-size: 18px!important;
display: block;
}


#prostheticsmenu ul li a {
color:#FFFFFF;
text-decoration: none;
font-weight: normal;
z-index: 400;
position: relative;
display: inline-block;
width: 100%;
position: relative;
}

#costumearea {
position:absolute;
top: 120px;
width: 980px;
left: 50%;
margin-left: -490px;
}

#costumetitle {
display:block;

width: 343px;
font-size: 14px;
color: #FFF;
line-height: 255%;
text-align: center;
background: url(../img/costumefx_title_bg.png) no-repeat 0 42px;
height: 338px;
padding: 0 0 0 29px;
}

#costumetitle h2 {
color: #FFFFFF;

font-weight: normal;
margin: 0;
}

#costumetitle h3 {
color: #FFFFFF;
font-weight: normal;
font-size: 1.7em;
margin: 0;
letter-spacing: 12px;
}

#costumetitle h3:after {
content:"";
display:block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #FFFFFF;
margin-left: 156px;
margin-top: 14px;
}

#costumetitle p {
color: #000000;
position: relative;
margin: 17px 0 0;
}

#costumetitle p:before {
content:"";
display:block;
width: 0;
height: 0;
border: 94px solid transparent;
border-top: 90px solid #FFFFFF;

margin-left: 75px;
margin-top: -17px;
position: absolute;
z-index: -20;
}

#costumetext {
width: 680px;

padding: 60px 0 0 300px;
color: #FFFFFF;
}

#costumetext p {
font-size: 13px;

line-height: 250%;
}

#costumemenu {
left: 50%;
margin-left: 240px;
width: 50%;
padding: 240px 0 0;
}

#costumemenu ul {

}

#costumemenu ul li {
text-align: left;
font-size: 12px;
}

#costumemenu ul li h4 a:before {
content:"";
display:block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left: 7px solid #FFFFFF;
margin-left: 400px;
margin-top: 2px;
position: absolute;
transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
-webkit-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
-o-transition: all 0.2s cubic-bezier(0.190, 1, 0.220, 1.000);
opacity: 0;
}

#costumemenu ul li h4 a:hover:before {
margin-left: -14px;
opacity: 1;
}

.costumemenu1 {
margin: 0 0 0 326px;
}

.costumemenu2 {
margin: 0px 0 0 263px;
}

.costumemenu3 {
margin: 0px 0 0 199px;
}

.costumemenu4 {
margin: 0 0 0 135px;
}

#costumemenu h4 {
border-bottom: solid 1px #999999;
margin: 22px 0 5px 0;
padding: 0 0 5px 0px;
font-size: 18px!important;
}

#costumemenu ul li a {
color:#FFFFFF;
text-decoration: none;
font-weight: normal;
}

#footer {
	position:absolute;
	bottom: 38px;
	width: 100%;
}

#footertitle {
	display:block;
	/* background:rgba(254,254,254,0.4); */
	width:100%;
	border-top: solid 1px #4A4A4A;
	color: #FFFFFF;
	text-align: center;
	height: 38px;
	font-size: 13px;
	position: fixed;
	margin-left: 0;
}


/* ロールオーバーでのイメージ表示管理 */

.thumbs1 {
	display: none;
	position: absolute;
	left: -292px;
	/* top: 24px; */
	/* margin-top: -80px; */
}

.thumbs1 img {
	width: 280px;
}

.hoverimage1 {
	z-index:900;
}

/* NEW AREA */
#works-thumb {
	position:fixed;
	left: 0;
	bottom: 65px;
	width: 100%;
}

#works-thumb h2{
	color:#FFFFFF;
}

#works-thumb div.element-item {
	/* display:inline-block; */
	position: relative;
}

/* WORKS */

.isotope .labeling {
	position:absolute;
	top: 2px;
	right: 2px;
	font-size: 12px;
	list-style: none;
}

.isotope li {
	margin:0 0 2px;
}

.isotope li.label-make {
	background: rgba(158, 57, 57, 0.4);
	color: #FFFFFF
}

.isotope li.label-modeling {
	background: rgba(57, 102, 158, 0.4);
	color: #FFFFFF;
}

.isotope li.label-costume {
	background: rgba(158, 151, 57, 0.4);
	color: #FFFFFF;
}

.isotope li.label-design {
	background: rgba(62, 158, 57, 0.4);
	color: #FFFFFF;
}

.isotope li.label-digital_prototype {
	background: rgba(158, 57, 145, 0.4);
	color: #FFFFFF;
}

.isotope li.label-direction {
	background: rgba(158, 114, 57, 0.4);
	color: #FFFFFF;
}