@charset "UTF-8";

/* ===================================
	File Name   : portfolio.css
	Description : Portfolio Page Layout CSS
	Editors     : Taz Sakurai
	Create Date : 2010/11/16

	Update Description :
		2011/04/19 Appended - Portfolio Detail Description
		2011/04/13 Modify - jQuery Navigation
		2010/11/16 File Create
====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Portfolio Introduction
	3. 
	4. 
	5. 
	6. 
	*. Clear Release
	
====================================== */





/*===== ■1. Individual Redefinition =====*/
#Header ul li a#BtnPortfolio {background-position: -547px -40px;}
#Footer ul li a#BtnFootPortfolio {background-position: -200px -34px;}







/*===== ■2. Portfolio Introduction =====*/
#PortfolioIntro {
	background: url(img/bg_visual.jpg) no-repeat;
	position: relative;
	margin: 0px auto 150px;
	width: 960px;
	height: 300px;
}

#PortfolioIntro p {
	width: 720px;
	margin: -50px 0px 40px 240px;
	padding: 10px;
	font-size: 93%;
}

#PortfolioIntro h2 {
	margin: 0px 0px 0px 30px;
}

#PortfolioIntro ul#InSessionGallery {
	display: table-cell;
	/display: inline;
	/zoom: 1;
	position: absolute;
	bottom: -40px;
	left: 8px;
	z-index: 6;
	height: 220px;
	vertical-align: bottom;
}

#PortfolioIntro ul#InSessionGallery li {
	position: relative;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	width: 160px;
	height: 200px;
}

#PortfolioIntro ul#InSessionGallery li img {
	position: absolute;
	bottom: 80px;
	padding: 0px 15px;
}

#PortfolioIntro ul#InSessionGallery li canvas { position: absolute; top: 120px;  left: 15px;}

#PortfolioIntro ul#InSessionGallery li a:hover img {
	display: inline;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

#PortfolioIntro ul#InSessionGalleryNavi {
	position: absolute;
	left: 0px;
	top: 20px;
	z-index: 7;
}

*:first-child+html #PortfolioIntro ul#InSessionGalleryNavi {
	left: -10px;
	top: -50px;
}

#PortfolioIntro ul#InSessionGalleryNavi li {
	position: absolute;
	width: 92px;
	height: 34px;
	left: -55px;
	top: 195px;
	z-index: 8;
}

#PortfolioIntro ul#InSessionGalleryNavi li#BtnNextArea {width: 93px; left: 935px;}
#PortfolioIntro ul#InSessionGalleryNavi li#BtnPauseArea {width: 44px; height: 49px;left: 500px; top: 70px;}
#PortfolioIntro ul#InSessionGalleryNavi li#BtnPlayArea {width: 34px; height: 49px; left: 430px; top: 70px;}



#PortfolioIntro ul#InSessionGalleryNavi li a {
	display: block;
	background: url(img/btn_slide-select.png) no-repeat 0px -15px;
	width: 92px;
	height: 34px;
}

#PortfolioIntro ul#InSessionGalleryNavi li a#BtnNext {width: 93px; background-position: -92px -15px;}
#PortfolioIntro ul#InSessionGalleryNavi li a#BtnPause {width: 44px; height: 49px; background-position: -185px 0px;}
#PortfolioIntro ul#InSessionGalleryNavi li a#BtnPlay {width: 34px; height: 49px; background-position: -229px 0px;}

#PortfolioIntro ul#InSessionGalleryNavi li a#BtnPrev:hover {background-position: 0px -49px;}
#PortfolioIntro ul#InSessionGalleryNavi li a#BtnNext:hover {background-position: -92px -49px;}
#PortfolioIntro ul#InSessionGalleryNavi li a#BtnPause:hover {background-position: -185px -49px;}
#PortfolioIntro ul#InSessionGalleryNavi li a#BtnPlay:hover {background-position: -229px -49px;}

#PortfolioIntro ul#InSessionGallery li p,
#PortfolioIntro ul#InSessionGallery li ul,
#PortfolioIntro ul#InSessionGallery li ol,
#PortfolioIntro ul#InSessionGallery li em {
	display: none;
}

#GlayLayer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #000000;
	filter: alpha(opacity=80);
	opacity: 0.80;
	z-index: 9;
}

*:first-child+html #GlayLayer {
	background: none;
}

#OverLayer{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -500px;
}

#PortfolioIntro #PortofolioWindow {
	display: none;
	position: absolute;
	padding: 30px;
	width: 1000px;
	height: 500px;
	top: -150px;
	left: -50px;
	z-index: 10;
}

*:first-child+html #PortfolioIntro #PortofolioWindow {
	background: url(img/bg_portfolio-detail.png);
}

#PortfolioIntro #PortofolioWindow span {
	display: block;
	float: left;
	width: 500px;
	height: 500px;
	padding: 0px 15px 0px 0px;
}

#PortfolioIntro #PortofolioWindow strong {
	display: block;
	background: url(../common/img/mark_circle-blue.gif) no-repeat left 5px;
	float: left;
	margin: 15px 0px 0px;
	padding: 0px 0px 10px 15px;
	width: 465px;
	font-size: 108%;
}

#PortfolioIntro #PortofolioWindow ul.BtnSiteLink {
	float: left;
	margin: 0px 0px 20px 15px;
	width: 465px;
}

#PortfolioIntro #PortofolioWindow ul.BtnSiteLink li em {
	display: block;
	padding: 0px 0px 10px;
	letter-spacing: 0.1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 93%;
}

#PortfolioIntro #PortofolioWindow ul.BtnSiteLink li a {
	background: url(../common/img/mark_arrow-right-blue.png) no-repeat 0px 5px;
	padding: 5px 0px 2px 18px;
	font-size: 93%;
}

#PortfolioIntro #PortofolioWindow p {
	display: block;
	float: left;
	width: 465px;
	padding: 0px 0px 30px 15px;
	margin: 0px;
	line-height: 1.8;
}

#PortfolioIntro #PortofolioWindow ul.BtnThumb {
	float: left;
	margin: 0px 0px 20px 15px;
	width: 465px;
}

#PortfolioIntro #PortofolioWindow ul.BtnThumb li {
	display: inline;
	padding: 0px 15px 0px 0px;
	float: left;
}

#PortfolioIntro #PortofolioWindow ol {
	display: block;
	float: left;
	width: 465px;
	margin: 0px;
	padding: 0px 0px 15px 15px;
}

#PortfolioIntro #PortofolioWindow ol li {
	float: left;
	padding-right: 10px;
	margin: 0px 0px 10px;
	background: url(img/mark_icon-menu.png) no-repeat;
	width: 65px;
	height: 20px;
	text-indent: -9999px;
}

#PortfolioIntro #PortofolioWindow ol li.IconPhoto {background-position: 0px -20px;}
#PortfolioIntro #PortofolioWindow ol li.IconDesign {background-position: 0px -40px;}
#PortfolioIntro #PortofolioWindow ol li.IconCording {background-position: 0px -60px;}
#PortfolioIntro #PortofolioWindow ol li.IconFLASH {background-position: 0px -80px;}
#PortfolioIntro #PortofolioWindow ol li.IconOrder {background-position: 0px -100px;}
#PortfolioIntro #PortofolioWindow ol li.IconBlog {background-position: 0px -120px;width: 100px;}
#PortfolioIntro #PortofolioWindow ol li.IconMT {background-position: 0px -140px;width: 85px;}
#PortfolioIntro #PortofolioWindow ol li.IconManage {background-position: 0px -160px;width: 85px;}
#PortfolioIntro #PortofolioWindow ol li.IconNameCard {background-position: 0px -180px;}
#PortfolioIntro #PortofolioWindow ol li.IconPrint {background-position: 0px -200px;}
#PortfolioIntro #PortofolioWindow ol li.IconDVD {background-position: 0px -220px;}
#PortfolioIntro #PortofolioWindow ol li.IconCD {background-position: 0px -240px;}
#PortfolioIntro #PortofolioWindow ol li.IconLogo {background-position: 0px -260px;}
#PortfolioIntro #PortofolioWindow ol li.IconIllust {background-position: 0px -280px;}

#PortfolioIntro #PortofolioWindow ul#BtnClose {
	position: absolute;
	right: -10px;
	top: -20px;
	width: 34px;
	height: 34px;
}

#PortfolioIntro #PortofolioWindow ul#BtnClose li a {
	display: block;
	background: url(../common/img/btn_close.png) no-repeat;
	width: 34px;
	height: 34px;
}

#PortfolioIntro #PortofolioWindow ul#BtnClose li a:hover {background-position: 0px -34px;}

#PortfolioIntro #PortofolioWindow ul#BtnClose li a span {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}






/*===== ■3.  =====*/






/*===== ■4.  =====*/






/*===== ■5.  =====*/





/*===== ■*.Clear Release  =====*/
#PortfolioIntro ul#InSessionGallery,
#PortfolioIntro #PortofolioWindow ul.BtnThumb,
#PortfolioIntro #PortofolioWindow ol {
	/zoom: 1;
}

#PortfolioIntro ul#InSessionGallery:after,
#PortfolioIntro #PortofolioWindow ul.BtnThumb:after,
#PortfolioIntro #PortofolioWindow ol:after {
	content: '';
	display: block;
	clear: both;
}