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


/*全ページ共通 タイトル＆ナビゲーション設定*/

#navigation {
	z-index:10;
	margin:40px;
	padding:15px 12px;
	width:200px;
	overflow:hidden;
background-color: transparent;
    background-color: rgba(255, 255, 255,0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
	
}

.page_title {
	color:#222;
	font-size:46px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700; 
	margin:5px 0px;
}

#navigation ul {
	color:#222;
	margin:0px;
	padding:0px;
}
#navigation li {
	font-size:16px;
	letter-spacing:.1em;
	line-height:27px;
	font-family: 'Montserrat', sans-serif;
	font-weight:500; 
	margin:0px 2px;
	padding:0px 2px;
	list-style:none;
}
#navigation li a:link { text-decoration: none; color: #111; }
#navigation li a:visited { text-decoration: none; color: #111; }
#navigation li a:hover { text-decoration: underline;  color: #FFE600; }
#navigation li a:active { text-decoration: none; color: #111; }




/*works共通設定*/
#works_content{
	background-color: #FFF;
}




/*外枠設定*/
#box_out {
	width:100%;
	height:90%;
	overflow:hidden;
	position:fixed;
	z-index:-9999;
	top:0;
	left:0;
	min-width:100%;
	min-height:100%


}
.box_inner {
	width:200%;
	height:250%;
	overflow:hidden;
	position:absolute;
	background-color:#FFF;
	top: -100%;
	left:-30%;
	
	transform:
        rotate(-20deg)
        scale(1, 1);
 
/* for firefox, safari, chrome, etc. */
    -webkit-transform:
        rotate(-20deg)
        scale(1, 1);
    -moz-transform:
        rotate(-20deg)
        scale(1, 1);
 
		/* IE9 */
	-ms-transform: 
		rotate(-20deg)
		scale(0.9, 0.9)
	    translate(-750px); 
		
		/* opera */
	-o-transform:
 		rotate(-20deg)
		scale(1, 1);
				
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5)";
 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); /* IE5.5+ */
}


		.touch .box_inner {
				top: -20%;
				left:-10%;
			 transform:
        	 rotate(-20deg)
        	 scale(1.5, 1.5);
 
		/* for firefox, safari, chrome, etc. */
		    -webkit-transform:
        	 rotate(-20deg)
       		 scale(1.5, 1.5);
		    -moz-transform:
       		 rotate(-20deg)
       		 scale(1.5, 1.5);
			}



.box_inner2 {
	width:200%;
	height:200%;
	overflow:hidden;
	position:absolute;
	background-color:#FFF;
	top: -45%;
	left:-10%;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}


/*ツールチップ設定*/	
.tooltips{
	text-align:center;
	margin: 3px;
    text-align:center;

}
/*スライド・ボックス設定*/
.bx{
	float: left;
	width:133px;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
	display:table-cell;
}

.bx_web{
	float: left;
	width:180px;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
	display:table-cell;
}
.bx_web img {
	margin:2px;
}

.bx img {
	margin: 3px auto;

/*  -webkit-box-shadow: 1px 2px 5px 1px #BBB; 
	-moz-box-shadow: 1px 2px 5px 1px #BBB; 
	box-shadow: 1px 2px 5px 1px #BBB; 
	position:relative;
	behavior: url(http://sql.iger.jp/web_test/matsudo_h/js/PIE.htc);*/
}
/*スライド・オプション設定
.bx-next {
	position:absolute;
	top:40%;
	right:-50px;
	z-index:999;
	width: 30px;
	height: 30px;
	text-indent: -999999px;
	background: url(gray_next.png) no-repeat 0 -30px;
}

.bx-prev {
	position:absolute;
	top:40%;
	left:-50px;
	z-index:999;
	width: 30px;
	height: 30px;
	text-indent: -999999px;
	background: url(gray_prev.png) no-repeat 0 -30px;
}

.bx-pager a {
	margin-right: 5px;
	color: #fff;
	padding: 3px 8px 3px 6px;
	font-size: 12px;
	zoom:1;
	background: url(gray_pager.png) no-repeat 0 -20px;
}

.bx-auto .start {
	background: url(gray_auto.png) no-repeat 0 2px;
	padding-left: 13px;
}

.bx-auto .stop {
	background: url(gray_auto.png) no-repeat 0 -14px;
	padding-left: 13px;
}

.bx-next:hover,
.bx-prev:hover {
	background-position: 0 0;
}

.bx-pager .pager-active,
.bx-pager a:hover {
	background-position: 0 0;
}


.bx-pager {
	text-align:center;
	padding-top: 7px;
	font-size:12px;
	color:#666;
}

.bx-captions {
	text-align:center;
	font-size: 12px;
	padding: 7px 0;
	color: #666;
}

.bx-auto {
	text-align: center;
	padding-top: 15px;
}

.bx-auto a {
	color: #666;
	font-size: 12px;
}

*/


.mov_box {
	float:left;
	width:400px;
	margin:1px;
}