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


/* ----------------------------------------------------------------------
    レイアウト
-----------------------------------------------------------------------*/
#Contents {
	margin-top:20px;
}
#MainContainer {
	width:630px;
	float:left;
}
#TopColumn {
	width:630px;
	float:none;
}
#FirstColumn {
	width:305px;
	float:left;
}
#SecondColumn {
	width:305px;
	float:right;
}
#SubContainer {
	width:290px;
	float:right;
}
#Crumb {
	background:url(/images/IconWhatsNew.png) no-repeat 10px 13px;
	padding-left:80px;
}
/* ----------------------------------------------------------------------
    共通
-----------------------------------------------------------------------*/
#MainContainer .container {
	width:305px;
	margin-bottom:24px;
}
#MainContainer #TopColumn .container {
	width:630px;
	height:209px;
	margin-bottom:24px;
	background:url(/images/TopColumnBg.png) no-repeat left top;
	overflow:hidden;
	position:relative;
}
.ContentsTitle {
	position:relative;
	width:100%;
	margin-bottom:5px;
}
#CaseStudyContainer .ContentsTitle {
	margin-bottom:10px;
}
#MainContainer .ContentsTitle a {
	display:block;
	width:305px;
	height:0px;
	padding-top:29px;
	background-position:0 0;
	overflow:hidden;
}
#MainContainer .ContentsTitle a:hover {
	background-position:0 -29px;
}
#CaseStudyContainer .ContentsTitle a {
	background-image:url(/images/StudyHeader.png);
}
#MoviesContainer .ContentsTitle a {
	background-image:url(/images/MoviesHeader.png);
}
#PenTabletTopicsContainer .ContentsTitle a {
	background-image:url(/images/TopicsHeader.png);
}
#SubContainer .ContentsTitle {
	background-image:none;
}
#SubContainer .container {
	border:1px solid #CCCCCC;
	padding:5px;
	margin-bottom:10px;
}
#SubContainer .container ul {
	width:268px;
	padding:0 5px;
}
#SubContainer .container ul li {
	padding:5px 0;
}
.ContainerContentsWrapper {
	position:relative;
	width:279px;
	padding:3px 2px 3px 4px;
	background-image:url(/images/new/SubConBgMid.png);
	background-repeat:repeat-y;
	background-position:0 0;
	margin:0 6px 0 5px;
}
.ContainerContentsWrapperTop {
	position:absolute;
	top:0;
	left:0;
}
.ContainerContentsWrapperBottom {
	position:absolute;
	bottom:0;
	left:0;
}
/* ----------------------------------------------------------------------
    メイン
-----------------------------------------------------------------------*/
div#MainImages {
	width: 940px;
	height: 320px;
	overflow: hidden;
	position: relative;
	background:url(/images/MainImagesBg.png) no-repeat;
	margin-bottom:20px;
}
div#MainImages ul {
	position: absolute;
	list-style: none;
	padding: 0;
	margin: 0;
}
ul#tabs {
	left: 10px;
	bottom:10px;
	z-index: 2;
	width: 630px;
	height:70px;
}
ul#tabs li {
	float:left;
	width:145px;
	margin-right:10px;
}
ul#tabs li a {
	text-decoration: none;
	display: block;
	width:145px;
	height: 60px;
	padding-top:10px;
	outline: none;
	text-align:center;
	overflow:hidden;
}
ul#tabs li a:hover {
	text-decoration: underline;
}
ul#tabs li a.current {
	background:url(/images/MainThumbsOver.png) no-repeat;
	background-position:0 2px;
	color: #FFF;
}
ul#tabs li#Tab1 a.current {
	background-position:0 2px;
}
ul#tabs li#Tab2 a.current {
	background-position:-155px 2px;
}
ul#tabs li#Tab3 a.current {
	background-position:-310px 2px;
}
ul#tabs li#Tab4 a.current {
	background-position:-465px 2px;
}
ul#tabs li a.current:hover {
	text-decoration: none;
	cursor: default;
}
ul#output {
	left:10px;
	top:10px;
	width: 610px;
	height: 230px;
	position: relative;
	overflow:hidden;
}
ul#output li {
	position: absolute;
	width: 610px;
	height: 230px;
}
#topBanner {
	width:300px;
	height:300px;
	position:absolute;
	top:10px;
	right:10px;
}
/* ----------------------------------------------------------------------
    ケーススタディー
-----------------------------------------------------------------------*/
#CaseStudyContainer {
	width:305px;
}
#CaseStudyList li {
	background-position:right bottom;
	background-repeat:no-repeat;
	margin-bottom:10px;
	width:305px;
	height:74px;
	overflow:hidden;
	background-image:url(/images/CaseStudyBg.png);
}
#CaseStudyList a, #CaseStudyList a:visited {
	text-decoration:none !important;
	color:#4593ba;
}
#CaseStudyList a:hover {
	text-decoration:underline;
	color:#33CCFF !important;
}
#CaseStudyList li a {
	text-decoration:none;
}
#CaseStudyList .CaseStudyThumb {
	width:74px;
	float:left;
}
#CaseStudyList .CreatorName {
	font-size:100%;
	font-weight:bold;
	display:block;
	margin-bottom:0px;
}
#CaseStudyList .Job {
	font-size:77%;
	color:#999999;
	display:block;
	line-height:140%;
}
#CaseStudyList .CompanyName {
	font-size:77%;
	color:#666666;
	display:block;
	line-height:100%;
	margin-bottom:5px;
}
.CreatorProfile .Date {
	font-size:77%;
	color:#FFFFFF;
	background-color:#000000;
	line-height:130%;
	padding:0 3px;
}
/* ----------------------------------------------------------------------
    ムービー
-----------------------------------------------------------------------*/
#MoviesContainer {
	position:relative;
}
#MoviesContainer .MovieTitle {
	font-weight:bold;
	font-size:108%;
	padding:5px 0;
}
#MoviesContainer .MovieLead {
	font-size:12px;
	line-height:150%;
}
#MoviesContainer .Date {
	font-size:77%;
	color:#FFFFFF;
	line-height:100%;
	vertical-align:middle;
}
#MovieThumbFirst .Date {
	float:right;
	padding:5px 0;
	height:20px
}
#MoviesContainer .Date span {
	background-color:#000000;
	line-height:20px;
	vertical-align:middle;
	padding:0 3px;
}
#MovieThumbFirst {
	margin-bottom:15px;
}
#MovieThumbSecond, #MovieThumbThird {
	width:144px;
}
#MovieThumbSecond .MovieThumb, #MovieThumbThird .MovieThumb {
	width:144px;
	height:87px;
	margin-bottom:5px;
	background-image:url(/images/new/MovieThumbBg.png);
}
#MovieThumbSecond .MovieThumb a, #MovieThumbThird .MovieThumb a {
	display:block;
	width:130px;
	height:73px;
	padding:7px;
	text-align:center;
}
#MovieThumbSecond .MovieThumb a img, #MovieThumbThird .MovieThumb a img {
	vertical-align:middle;
}
#MovieThumbSecond {
	float:left;
}
#MovieThumbThird {
	float:right;
}
/* ----------------------------------------------------------------------
    トピックス
-----------------------------------------------------------------------*/
#PenTabletTopicsContainer {
	margin-bottom:20px;
}
#PenTabletTopicsContainer li {
	padding:10px 0 10px 0;
}
#PenTabletTopicsContainer li {
	background:url(/images/DottedLineThin.png) no-repeat left bottom;
}
.TopicsDate {
	font-size:77%;
	color:#999999;
	margin-bottom:10px;
}
.TopicsDate span {
	color:#FFFFFF;
	background-color:#000000;
	padding:0 3px;
}
.TopicsTitle {
	font-weight:bold;
	font-size:108%;
	margin-bottom:10px;
}
.TopicsThumb {
	float:right;
}
#SubContainer #CreativeNewsContainer ul li {
	width:268px;
	padding:5px 0;
	background:url(/images/DottedLineThin.png) no-repeat left bottom;
	font-size:12px;
	line-height:150%;
}
#SubContainer #CreativeNewsContainer ul li a {
	text-decoration:none;
}
.NewsTitle a {
	font-weight:bold;
}
#NewsMore {
	text-align:right;
}
#NewsMore a {
	padding-right:10px;
	font-size:10px;
	line-height:150%;
}
#SubContainer #CreativeNewsContainer ul li#NewsMore {
	background:url(/images/IconMore.png) no-repeat right;
}
/* ----------------------------------------------------------------------
    バナー
-----------------------------------------------------------------------*/
#SubContainer #SeminarMore {
	background:url(/images/DottedLineThin.png) no-repeat left top;
	padding:10px 0 5px 0;
	text-align:center;
}
#SubContainer #BannerContainer {
	border: 0 none;
	padding: 0;
}
#SubContainer #BannerContainer ul {
	width:290px;
	padding:0;
}
#SubContainer #BannerContainer li {
	text-align:center;
}
#BannerContainer li img {
	vertical-align:bottom;
}
.MiniBannerLeft {
	margin-right:20px;
}
#SeminarContainer li a,
#FeatureContainer li a {
	text-decoration:none;
	line-height:150%;
}
/*
twitter
*/
#TwitterHeader {
	position:absolute;
	top:20px;
	left:20px;
	width:178px;
	height:33px;
}
#TwitterFollowMe {
	position:absolute;
	top:20px;
	right:20px;
	width:332px;
	height:33px;
}
#TwitterBox {
	position:absolute;
	top:60px;
	left:20px;
	width:590px;
	height:130px;
	overflow:hidden;
}
#TwitterBox ul {
	list-style:none;
}
#TwitterBox ul li {
	height:46px;
	background:url(/images/DottedLineThin.png) no-repeat left bottom;
}
#TwitterContainer p {
	text-align:center;
	margin:10px 0;
}
#TwitterContainer ul li {
	background:url(/images/DottedLineThin.png) repeat-x left bottom;
	padding:0 5px 5px 5px;
	margin-bottom:5px;
	width:269px;
	overflow:hidden;
}