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

/* common.cssに依存するスタイル（カテゴリー別で背景、色のみを変更）
----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* グローバルナビゲーション*/
/*アクティブの場合*/
#gNavIn li.toSolution a {
	background:url("../images/btn_gnav02_solution_active.png") no-repeat left top;
	}

/*カテゴリータイトル*/
#categoryTitleOut {
	background:url("../images/bg_solution01.png") repeat-x center top;
	}

/*カテゴリートップのメニュー一覧（ボタン色）*/
#categoryMenuList li h2 {
	background:url("../images/btn_solution00_arrow.png") no-repeat right center;
	}

/* クリエイティブ・オフィス汎用スタイル
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.ftBold{
	font-weight:bold;
}
.fltR{
	float:right;
}


/* index
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreative{
	margin:0 -20px;
}

/* メインイメージ */
#contentsCreative h1{
	padding:0 270px 20px 442px;
}

/* マグネット・オフィス */
.creativeMagnetOut{
	height:555px;
	padding:45px 0 0 0;
	background:url(../images/bg_creative01.png) left top no-repeat;
}
.creativeMagnetIn{
	width:728px;
	padding:36px;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ffffff)";
	background-color:rgba(255,255,255,0.8);
	margin:0 auto;
}
.creativeMagnetIn h2{
	text-align:center;
	margin:0 0 20px 0;
}

/* 本質 */
.creativeEessenceOut{
	padding:40px;
}
.creativeEessenceInL{
	float:left;
	padding:150px 0 0 0;
}
.creativeEessenceInL h2{
	margin:0 0 10px 0;
}
.creativeEessenceInR{
	width:418px;
	height:410px;
	float:right;
	margin:60px 60px 30px 0;
	position:relative;
	background:url(../images/bg_creativeEessenceCircle.png) left top no-repeat;
}
/* 円の位置設定 */
.creativeEessenceInR a{
	display:block;
	position:absolute;
}
.creativeEessenceCircle05{
	display:block;
	position:absolute;
}
.creativeEessenceCircle01{
	top:0;
	left:122px;
}
.creativeEessenceCircle02{
	top:119px;
	right:1px;
}
.creativeEessenceCircle03{
	bottom:1px;
	left:123px;
}
.creativeEessenceCircle04{
	top:119px;
	left:0;
}
.creativeEessenceCircle05{
	top:139px;
	left:142px;
}

/* 円のimg変化時間 */
a.creativeEessenceCircle01 img,a.creativeEessenceCircle02 img,
a.creativeEessenceCircle03 img,a.creativeEessenceCircle04 img{
	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-ms-transition:opacity 0.5s;
	transition:opacity 0.5s;
}

/* 円のimg変化後の透過 */
a.creativeEessenceCircle01 img:hover,a.creativeEessenceCircle02 img:hover,
a.creativeEessenceCircle03 img:hover,a.creativeEessenceCircle04 img:hover{
	-ms-filter: "alpha( opacity=0 )";
	filter: alpha( opacity=0 );
	opacity:0;
}

/* 矢印のopacity相殺 */
.creativeEessenceInR a:hover{
	-ms-filter: "alpha( opacity=100 )";
	filter: alpha( opacity=100 );
	opacity:1;
}

/* 矢印の位置・変化時間 */
.creativeEessenceCircle01:after{
	content:url(../images/arrow_creative01.png);
	position:absolute;
	top:-48px;
	left:70px;
	transition:top 0.5s;
}
.creativeEessenceCircle02:after{
	content:url(../images/arrow_creative02.png);
	position:absolute;
	top:71px;
	right:-50px;
	transition:right 0.5s;
}
.creativeEessenceCircle03:after{
	content:url(../images/arrow_creative03.png);
	position:absolute;
	bottom:-51px;
	left:70px;
	transition:bottom 0.5s;
}
.creativeEessenceCircle04:after{
	content:url(../images/arrow_creative04.png);
	position:absolute;
	top:70px;
	left:-50px;
	transition:left 0.5s;
}

/* 矢印の変化後の位置 */
.creativeEessenceCircle01:hover:after{
	top:-20px;
}
.creativeEessenceCircle02:hover:after{
	right:-20px;
}
.creativeEessenceCircle03:hover:after{
	bottom:-22px;
}
.creativeEessenceCircle04:hover:after{
	left:-20px;
}


/* 下層ページ共通スタイル
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreativeS,#contentsCreativeE,
#contentsCreativeC,#contentsCreativeI{
	padding:0 0 50px 0;
}
#contentsCreativeS h1,#contentsCreativeE h1,
#contentsCreativeC h1,#contentsCreativeI h1{
	margin:21px -20px 60px -20px;
	padding:15px 25px;
}
#contentsCreativeS h2,#contentsCreativeE h2,
#contentsCreativeC h2,#contentsCreativeI h2{
	margin:20px 0;
	font-size:300%;
	font-weight:bold;
	line-height:125%;
}
#contentsCreativeS p,#contentsCreativeE p,
#contentsCreativeC p,#contentsCreativeI p{
	margin:0 0 30px 0;
}
.navCreative{
	width:772px;
	margin:0 auto 30px auto;
}
.navCreative li{
	list-style:none;
	float:left;
	margin:0 12px 0 0;
}
.navCreative li:last-of-type{
	margin:0;
}

/* 刺激しあう
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreativeS h1{
	background-color:#005DA8;
}
.secCreativeS01{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeS01.png) 450px 20px no-repeat;
}
.secCreativeS01 p{
	width:340px;
}
.secCreativeS02{
	padding:0 50px;
	margin:0;
	background:url(../images/bg_creativeS02.png) 370px 65px no-repeat;
}
.secCreativeS02 p{
	width:270px;
}

/* アイデアを表に出す
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreativeE h1{
	background-color:#E88100;
}
.secCreativeE01{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeE01.png) 470px 114px no-repeat;
	min-height:465px;
}
.secCreativeE01 p{
	width:380px;
}
.secCreativeE02{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeE02.png) 25px 195px no-repeat;
	min-height:485px;
}
.secCreativeE02 p{
	width:380px;
}
.secCreativeE02 .fltR img{
	margin:0 0 0 85px;
}
.secCreativeE03{
	padding:0 50px;
	margin:0;
	background:url(../images/bg_creativeE03.png) 430px 80px no-repeat;
	min-height:580px;
}
.secCreativeE03 p{
	width:270px;
}

/* まとめる
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreativeC h1{
	background-color:#00A433;
}
.secCreativeC01{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeC01.png) 25px 150px no-repeat;
	min-height:440px;
}
.secCreativeC01 .fltR{
	margin:-50px 0 0 0;
}
.imgCreativeC01{
	margin:0 0 0 56px;
}
.secCreativeC01 p{
	width:380px;
}
.secCreativeC02{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeC02.png) 585px 50px no-repeat;
	min-height:470px;
}
.secCreativeC02 p{
	width:450px;
}
.imgCreativeC02{
	margin:0 0 0 76px;
}
.secCreativeC03{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeC03.png) 570px 20px no-repeat;
	min-height:480px;
}
.secCreativeC03 p{
	width:420px;
}
.imgCreativeC03{
	margin:0 0 0 76px;
}
.secCreativeC04{
	padding:0 50px;
	margin:0;
	background:url(../images/bg_creativeC04.png) 50px 135px no-repeat;
	min-height:514px;
}
.secCreativeC04 .fltR{
	margin:30px 0 0 0;
}
.secCreativeC04 p{
	width:400px;
}
.imgCreativeC04{
	margin:0 0 0 53px;
}

/* 自分のものにする
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contentsCreativeI h1{
	background-color:#E4535D;
}
.secCreativeI01{
	padding:0 50px;
	margin:0 0 70px 0;
	background:url(../images/bg_creativeI01.png) 470px 114px no-repeat;
	min-height:465px;
}
.secCreativeI01 p{
	width:380px;
}
.imgCreativeI01{
	margin:0 0 0 65px;
}
.secCreativeI02{
	padding:0 50px;
	margin:0;
	background:url(../images/bg_creativeI02.png) 25px 135px no-repeat;
	min-height:518px;
}
.secCreativeI02 p{
	width:340px;
}
.imgCreativeI02{
	margin:0 0 0 40px;
}