@charset "UTF-8";
/* CSS Document ---top page menu 3D Box---*/

.w25{width:25em;}
.h10{height:10em;}
.w5{width:10em;}
.h5{height:10em;}
.top{background-color:#333;top:-5em;
		opacity:0.7;
		-webkit-transform:rotateX(90deg);
		-webkit-transform:rotateX(90deg);
		-o-transform:rotateX(90deg);
		-ms-transform:rotateX(90deg);
		transform:rotateX(90deg);
}

.bottom{background-color:#333;bottom:-5em;
		opacity:0.7;
		-webkit-transform:rotateX(-90deg);
		-webkit-transform:rotateX(-90deg);
		-o-transform:rotateX(-90deg);
		-ms-transform:rotateX(-90deg);
		transform:rotateX(-90deg);
		}

.left{background-color:#333;left:-5em;
		
		-webkit-transform:rotateY(90deg);
		-webkit-transform:rotateY(90deg);
		-o-transform:rotateY(90deg);
		-ms-transform:rotateY(90deg);
		transform:rotateY(90deg);
		}

.right{background-color:#333;right:-20em;
		
		-webkit-transform:rotateY(90deg);
		-webkit-transform:rotateY(90deg);
		-o-transform:rotateY(90deg);
		-ms-transform:rotateY(90deg);
		transform:rotateY(90deg);
		}

.front{z-index:10;color:#fff;
		-webkit-transform:translateZ(5em);
		-webkit-transform:translateZ(5em);
		-o-transform:translateZ(5em);
		-ms-transform:translateZ(5em);
		transform:translateZ(5em);
		}
.front span a{
	display:block;
	height:100%;
    font-size:3.6em;
    padding:0.5em 0.2em;
	text-decoration:none;
	color:#fff;
}

.back{color:#fff;
		-webkit-transform:translateZ(-5em) rotateX(180deg);
		-webkit-transform:translateZ(-5em) rotateX(180deg);
		-o-transform:translateZ(-5em) rotateX(180deg);
		-ms-transform:translateZ(-5em) rotateX(180deg);
		transform:translateZ(-5em) rotateX(180deg);
		}

.red{background-color:#b40000;}
.yellow{background-color:#ffc100;}
.green{background-color:#11b600;}
.purple{background-color:#6b0090;}

.face1{
background-image:url(../img/index/nobu001.png);
background-repeat:no-repeat;
background-position:right;
}
.face2{
background-image:url(../img/index/nobu004.png);
background-repeat:no-repeat;
background-position:right;
}
.face3{
background-image:url(../img/index/nobu003.png);
background-repeat:no-repeat;
background-position:right;
}
.face4{
background-image:url(../img/index/nobu002.png);
background-repeat:no-repeat;
background-position:right;
}

.container{height:10em;width:25em;position:relative;margin:5em auto;font-size:12px;
		-webkit-perspective:300px;
		-o-perspective:300px;
		-ms-perspective:300px;
		perspective:300px;
		}

.content{height:10em;width:10em;position:absolute;
		
		-webkit-transform-style:preserve-3d;
		-webkit-transform-style:preserve-3d;
		-o-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		transform-style:preserve-3d;
　　　　　　　　　　　
		-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		-o-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		-ms-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		}

.content div{position:absolute;}
/*要素を半透明にしたい場合は、.content div:opacity:0.5; */

.container:hover .content{
		-webkit-transform:rotateY(0deg) rotateX(-0.5turn) rotateZ(0deg);
		-webkit-transform:rotateY(0deg) rotateX(-0.5turn) rotateZ(0deg);
		-o-transform:rotateY(0deg) rotateX(-0.5turn) rotateZ(0deg);
		-ms-transform:rotateY(0deg) rotateX(-0.5turn) rotateZ(0deg);
		transform:rotateY(0deg) rotateX(-0.5turn) rotateZ(0deg);
		}

div{
	-moz-transform:0.8s;
	-webkit-transform:0.8s;
	-o-transform:0.8s;
	-ms-transform:0.8s;
	transition:0.8s;
	}

.back a{
	color: #FFF;
    display: block;
    font-size: 3em;
    height: 100%;
    line-height: 1.1em;
    text-decoration: none;
	text-shadow: 0 1px 2px #666;
	padding-top: 1.2em;
    text-align: center;
}