/*@charset ‘UTF-8′;*/
/* @group Base */
/*mayer.css上書き*/
/*html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-size: 12px;
}*/
tbody, tfoot, thead, tr, th, td {
	vertical-align: top;
}
img {
	vertical-align: bottom;
}
.hidden {
	display: none;
}
.clear {
	clear: both;
}
::selection {
	background: #333;
	color: #fff;
}
::-moz-selection {
	background: #333;
	color: #fff;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: .4em; -webkit-border-top-left-radius: .4em; }
.ui-corner-tr { -moz-border-radius-topright: .4em; -webkit-border-top-right-radius: .4em; }
.ui-corner-bl { -moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; }
.ui-corner-br { -moz-border-radius-bottomright: .4em; -webkit-border-bottom-right-radius: .4em; }
.ui-corner-top { -moz-border-radius-topleft: .4em; -webkit-border-top-left-radius: .4em; -moz-border-radius-topright: .4em; -webkit-border-top-right-radius: .4em; }
.ui-corner-bottom { -moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; -moz-border-radius-bottomright: .4em; -webkit-border-bottom-right-radius: .4em; }
.ui-corner-right {  -moz-border-radius-topright: .4em; -webkit-border-top-right-radius: .4em; -moz-border-radius-bottomright: .4em; -webkit-border-bottom-right-radius: .4em; }
.ui-corner-left { -moz-border-radius-topleft: .4em; -webkit-border-top-left-radius: .4em; -moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; }
.ui-corner-all { -moz-border-radius: .4em; -webkit-border-radius: .4em; }
/* @end */

/* @group Layout */
/* @group body & wrapper */
body {
	margin: 0 auto;
	width: 1000px;
	font-size: 12px;
	line-height: 140%;
	color: #fff;
	background: #333;
	font-family: Georgia,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
}
div.container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}
/* @end */
/* @group Header & Footer */
/*Header*/
div#bar {
	display: none;
	z-index: 1000;
	position: fixed;
	top: 0;
	right: 0;
	height: 28px;
	background: #fff;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
div#bar a {
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.3em;	
	text-decoration: none;
	cursor: pointer;
}
div#bar li.goHello a {
	color: #4ca7c4;
}
div#bar li.goAbout a {
	color: #40831e;
}
div#bar li.goCase a {
	color: #d9381e;
}
div#bar li.goContact a {
	color: #333;
}
div#bar ul {
	/*position: absolute;
	top: 0;
	right: 12px;
	height: 28px;*/
	margin: 0 12px 0 0;
}
div#bar ul li {
	position: relative;
	display: block;
	float: left;
	margin: 0 0 0 12px;
	height: 28px;
	line-height: 28px;
	padding: 0 0 0 14px;
	vertical-align: super;
	color: #eee;
	font-size: 12px;
	background: transparent url(../images/arrow_nav.gif) no-repeat 0 50%;
}
/*Footer*/
div#footer {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 42px;
	background: #333;	
}
div#footer a {
	color: #fff;
}
div#footer p.copyright {
	position: absolute;
	bottom: 12px;
	left: 60px;
	margin: 12px 0 0 12px;
	font-size: 10px;
	font-weight: bold;
	color: #ccc;
}
div#footer p.illustration {
	display: none;
	position: absolute;
	bottom: 0;
	right: 80px;
	background: transparent url(../images/footer_ptn01.png) no-repeat 0 0;
}
div#footer p.illustration span {
	display: block;
	width: 551px;
	height: 185px;
	text-indent: -9999px;
}
div#footer p.btt {
	position: absolute;
	bottom: 0px;
	right: 0px;
}
div#footer p.btt span {
	display: block;
	width: 52px;
	height: 28px;
	text-indent: -9999px;
	background: #e62e2e url(../images/icon_btt.png) no-repeat 50% 50%;
}
/* @end */

/* @group Main */

div.panel {
	position: relative;
	width: 100%;
	background-color: #eee;
	border: 0px solid #333;
}
div#hello {
	height: 950px;
	background: #4ca7c4 url(../images/bg_blank01.png) repeat-x 20px 100%;
}
div#about {
	height: 1300px;
	background: #40831e url(../images/bg_blank02.png) repeat-x 40px 100%;
}
div#case01 {
	/*margin-bottom: 48px;*/
	height: 900px;
	background: #d9381e url(../images/bg_blank03.png) repeat-x 10px 100%;
}
div#case02 {
	/*margin-bottom: 48px;*/
	height: 1100px;
	background: #eee;
	color: #000;
	background: #eee url(../images/bg_blank04.png) repeat-x 10px 100%;
}
div#case03 {
	/*margin-bottom: 48px;*/
	height: 900px;
	background: #6cc629;
	color: #000;
}
div.panel div.panelContainer {
	margin: 0 auto;
	width: 960px;
}
div#hello div.blank {
	position: relative;
	bottom: 0;
	left: 0;
	width: 1000px;
	height: 46px;
}
div.panel div.blank hr {
	display: none;
}
/*intro*/
div.panel div.panelContainer div.intro {
	position: relative;
	/*margin-top: 12px;*/
	padding-top: 12px;
	background: transparent url(../images/bg_trans.png) repeat 0 0;
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
}
/*そのHight調整を*/
div#case02 div.panelContainer div.intro {
	/*padding-bottom: 160px;*/
}
div#welcome {
	display: none;
}
/*main*/
div.panel div.panelContainer div.main {
	margin-top: 62px;
	position: relative;
}
/* @end */
/* @end */
/* @group Flip */
.to-flips {
	height: 250px;
	width: 300px;
	float: left;
	margin-right: 20px;
}
.to-flips .content {
	height: 150px;
	position: relative;
	overflow: hidden;
}
.to-flips .content .block {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	display: none;
	overflow: hidden;
}
.to-flips .navigation {
	margin-top: 10px;
	margin-left: 130px;
}
.to-flips .navigation .btn-left, 
.to-flips .navigation .btn-right,
.to-flips .navigation .btn-left-dis, 
.to-flips .navigation .btn-right-dis {
	width: 20px;
	height: 20px;
	background-color: #eee;
	color: black;
	float: left;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}
.to-flips .navigation .btn-left-dis, .to-flips .navigation .btn-right-dis {
	background-color: #444;
	color: #888;
	cursor: default;
}
.to-flips h3 {
	margin: 0px;
	padding: 10px;
	border-bottom: 1px solid black;
}
.to-flips h2 {
	text-align: center;
	color: white;
}
.to-flips p {
	margin: 10px;
}
.color1 {
	background-color: #7B805E;
}
.color2 {
	background-color: #C4C475;
}
.color3 {
	background-color: #FAE078;
}
.color4 {
	background-color: #E86557;
}
.color5 {
	background-color: #A13F38;
}
/* @end */
/*--------------------------------------------*/
/* @group 共通*/
a {
	color: #fc0;
	text-decoration: none;
}
div#case02 a {
	color: #e62e2e;
}
div#case03 a {
	color: #e50012;
}

a:active {
	position: relative;
	top: 1px;
}
em.sName {
	margin: 0 0.3em;
	font-weight: bold;
	font-size: 1.2em;
	font-style: normal;
}
div#hello em.sName {
	color: #fff;	
}
div#hello div.intro div.news em.sName {
	color: #e62e2e;
}
div#about em.sName {
	color: #fff;	
}
div#case01 em.sName {
	color: #fff;	
}
em.sName.first {
	margin: 0 0.3em 0 0;
}
div.line {
	margin: 0 auto;
	width: 70%;
	height: 4px;
	background: transparent url(../images/line_emboss.png) no-repeat 0 0;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}
div.line hr {
	display: none;
}
/* @end*/
/* @group 01. CPOSとは */
h1, 
div.CPOS { /*CPOSロゴ*/
	margin: 18px 0 28px 12px;
	background: transparent url(../images/logo_cpos.png) no-repeat 0 0;
}
h1 span, 
div.CPOS span {
	display: block;
	width: 280px;
	height: 137px;
	text-indent: -9999px;
}
div#hello div.intro p.description {
	margin: 0 12px 24px 12px;
	font-size: 14px;
	line-height: 145%;
}
div#hello div.intro div.news {
	margin-top: 0px;
	padding: 12px;
	font-size: 14px;
	line-height: 125%;
	color: #333;
	background: #fff;
	/*-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.25);*/
}
div#hello div.intro div.news div.line {
	width: 100%;
	margin: 6px 0;
}
div#hello div.intro div.news a {
	color: #666;
}
div#hello div.intro div.news a.new {
 	color: #e62e2e;   
}
div#hello div.intro div.news span {
	display: block;
	margin: 0 0 4px 0;
	padding-left: 24px;
	font-size: 12px;
	background: transparent url(../images/icon_news.png) no-repeat 0 50%;
}
div#hello div.intro div.news span em {
    margin-right: 4px;
    padding: 1px 4px;
    font-weight: bold;
    font-size: 11px;
    font-style: normal;
    color: #f5fc89;
    background: #e62e2e;
}
div.contact {
	margin: 24px 12px 28px 12px;
}
div.contact p.title {
	font-size: 18px;
	font-weight: bold;
}
div.contact p.companyName {
	margin-top: 16px;
	font-size: 14px;
	font-weight: bold;
}
div.contact p.companyName em {
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
}
div.contact p.companyAddress {
	margin-top: 6px;
	font-size: 12px;
}
div.contact p.companyAddress em {
	font-size: 10px;
}
div.contact p.logo {
	margin: 28px 0 48px 92px;
	background: transparent url(../images/logo_ioix.png) no-repeat 0 0;
}
div.contact p.logo span {
	display: block;
	width: 117px;
	height: 49px;
	text-indent: -9999px;
}
/*-------------------------------------*/

/* @group Feature */
div#feature_list {
	display: none;
	width: 580px;
	height: 200px;
	overflow: hidden;
	position: relative;
	background: #333;
}
div#feature_list ul {
	position: absolute;
	top: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}
ul#tabs {
	left: 0;
	z-index: 2;
	width: 420px;
}
ul#tabs li {
	font-size: 12px;
}
ul#tabs li img {
	padding: 5px;
	border: none;
	float: left;
	margin: 10px 10px 0 0;
}
ul#tabs li a {
	display: block;
	visibility: hidden;
	color: #222;
	text-decoration: none;
	padding: 6px;
	height: 32px;
	outline: none;
	background: #333;
	opacity: 0.6;
}
ul#tabs li a:hover {
	text-decoration: underline;
}
ul#tabs li a.current {
	visibility: visible;
	background: url('feature-tab-current.png');
	color: #FFF;
	background: #222;
	opacity: 0.85;
}
ul#tabs li a.current:hover {
	text-decoration: none;
	cursor: default;
}
ul#output {
	position: absolute;
	top: 0;
	left: 0;
	width: 580px;
	height: 500px;
}
ul#output li {
	position: absolute;
	width: 580px;
	height: 500px;
	overflow: hidden;
}
/*ul#output li a {
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding: 8px 12px;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	background: #000;
}
ul#output li a:hover {
	background: #D33431;
}*/
/* @end */

div#hello h2 { /*タイトルキャッチ*/
	margin-top: 12px;
	background: transparent url(../images/txt_hello_title.png) no-repeat 0 0;
}
div#hello h2 span {
	display: block;
	width: 499px;
	height: 97px;
	text-indent: -9999px;
}
div.welcome {
	margin-top: 12px;
	position:relative; 
	width:580px; 
	height:207px;
	overflow: hidden;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
}
div.welcome img {
	position: absolute;
	top: 0;
	left: 0;
}
div#hello h3 {
	margin-top: 12px;
	/*width: 580px;
	height: 500px;
	overflow: hidden;*/
}
div#hello ul.icons {
	margin-top: 12px;
	height: 60px;
}
div#hello ul.icons p.iconMiddle {
	float: left;
	margin-right: 12px;
	width: 48px;
	height: 48px;
	/*background: #fc0;*/
}
div#hello ul.icons p.iconMiddle span {
	display: block;
	margin: 0;
	width: 48px;
	height: 48px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

div#hello div.main p.description {
	font-size: 14px;
	font-weight: normal;
	line-height: 160%;
}
/* @end */
/* @group 02. 機能概要 */

div#about div.intro p.description {
	margin: 0 12px 24px 12px;
	font-size: 14px;
	line-height: 145%;
}
/*-------------------------------------*/
div#about h2 { /*タイトルキャッチ*/
	margin-top: 12px;
	background: transparent url(../images/txt_about_title.png) no-repeat 0 0;
}
div#about h2 span {
	display: block;
	width: 318px;
	height: 38px;
	text-indent: -9999px;
}
div.serviceGuide {
	margin-top: 24px;
}
div.serviceGuide ul {
	margin: 12px 12px;
}
div.serviceGuide ul li {
	margin-bottom: 24px;
	overflow: hidden;
	_zoom: 1; 
}
div.serviceGuide ul p.iconMiddle {
	float: left;
	margin-right: 12px;
	margin-bottom: 6px;
	width: 48px;
	height: 48px;
	/*background: #fc0;*/
}
div.serviceGuide ul p.iconMiddle span {
	display: block;
	margin: 0;
	width: 48px;
	height: 48px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

p.iconMiddle span.signIn {
	background-image: url(../images/signIn_forGuide.png);
}
p.iconMiddle span.schedule {
	background-image: url(../images/schedule_forGuide.png);
}
p.iconMiddle span.user {
	background-image: url(../images/user_forGuide.png);
}
p.iconMiddle span.action {
	background-image: url(../images/action_forGuide.png);
}
p.iconMiddle span.search {
	background-image: url(../images/search_forGuide.png);
}
p.iconMiddle span.mobile {
	background-image: url(../images/mobile_forGuide.png);
}
p.iconMiddle span.news {
	background-image: url(../images/news_forGuide.png);
}
p.iconMiddle span.qAndA {
	background-image: url(../images/qAndA_forGuide.png);
}
p.iconMiddle span.nameCard {
	background-image: url(../images/nameCard_forGuide.png);
}
p.iconMiddle span.dm {
	background-image: url(../images/dm_forGuide.png);
}
div.serviceGuide ul p.title {
	font-size: 14px;
	font-weight: bold;
}
div.serviceGuide ul p.description {
	margin-top: 12px;
	margin-left: 0px;
	font-size: 12px;
	overflow: hidden;
	_zoom: 1;
}
div.serviceGuide p.notice {
	margin-top: 24px;
	border: 0 !important;
	margin: 0 0 0 320px;
	padding: 6px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background: #333;
}
/*Castures*/
div.serviceGuide img.cap01thumb, 
div.serviceGuide img.cap03thumb, 
div.serviceGuide img.cap04thumb {
	float: right;
	margin: 0 0 6px 6px;
	border: 2px #333 solid;
	cursor: pointer;
}
div.serviceGuide img.cap02thumb, 
div.serviceGuide img.cap05thumb, 
div.serviceGuide img.cap06thumb {
	float: left;
	margin: 0 6px 6px 0;
	border: 2px #333 solid;
	cursor: pointer;
}
/* @group jQuery Tools */
/* @group Overlay */
/* the overlayed element */
.simple_overlay {
	
/* must be initially hidden */ 
    display: none;
	
/* place overlay on top of other elements */ 
    z-index: 10000;
	
/* styling */ 
    background-color: #333;
	width: 700px;
	height: 312px;
	overflow: hidden;
	border: 1px solid #666;
	
/* CSS3 styling for latest browsers */
	-moz-box-shadow: 0 0 28px 2px #000;
	-webkit-box-shadow: 0 0 28px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image: url(../images/close.png);
	position: absolute;
	left: 666px;
	top: 6px;
	cursor: pointer;
	height: 28px;
	width: 28px;
}
/* styling for elements inside overlay */
.simple_overlay .details {
	position: absolute;
	top: 48px;
	right: 12px;
	font-size: 12px;
	color: #fff;
	width: 170px;
}
.simple_overlay .details h3 {
	color: #aba;
	font-size: 12px;
	margin: 0 0 -10px 0;
}
.simple_overlay .details p {
	margin-top: 24px;
	font-size: 11px;
	color: #fff;
}
/* @end */
/* @end */

/* @end */

/* @group 03. 導入事例 */
div.case p.goNextCase {
	position: absolute;
	top: 40px;
	right: -52px;
	/*margin-right: -58px;*/
	width: 52px;
	height: 28px;
	background: #fc0;
	z-index: 2;
}
div.case div.intro p.description {
	margin: 0 12px 28px 12px;
	font-size: 14px;
	line-height: 145%;
}
div.close {
	position: absolute;
	top: 28px;
	left: 18px;
	display: block;
	width: 298px;
	height: 54px;
	background: transparent url(../images/banner_seeYou.png) no-repeat 0 0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
div.close p {
	text-indent: -9999px;
}
/* @group LOGOs */
div.ECT2010 { /*ECTロゴ*/
	margin: 18px 0 28px 12px;
	background: transparent url(../images/logo_ect2010.png) no-repeat 0 0;
}
div.ECT2010 span {
	display: block;
	width: 279px;
	height: 232px;
	text-indent: -9999px;
}
div.WSF2010 { /*WorldShift*/
	margin: 18px 0 28px 12px;
	background: transparent url(../images/logo_wsf2010.png) no-repeat 0 0;
}
div.WSF2010 span {
	display: block;
	width: 320px;
	height: 62px;
	text-indent: -9999px;
}
div.DataHiroba { /*データセンター活用広場*/
	margin: 18px 12px 28px 12px;
	/*padding: 6px;*/
	background: #fff url(../images/logo_DataHiroba.png) no-repeat 0 0;
}
div.DataHiroba span {
	display: block;
	text-align: center;
	padding: 6px;
	width: 300px;
	height: 172px;
	text-indent: -9999px;
}
/* @end */
div.aboutPartner {
	margin: 24px 12px 48px 12px;
}
div.aboutPartner p.title {
	font-size: 14px;
	font-weight: bold;
}
div.aboutPartner p.about {
	margin: 12px 0 12px 0;
	font-size: 12px;
}
div.aboutPartner p.about img {
	float: left;
	margin: 0 12px 12px 0;
}
div#case03 div.aboutPartner p.about img {
	float: right;
	margin: 0 0 6px 12px;
	padding: 6px;
	background: #fff;
}
div.aboutPartner ul {
	margin: 6px 0;
}
div.aboutPartner ul li {
	list-style-position: inside;
	list-style-type: square;
}
div.aboutPartner p.uri {
	font-size: 12px;
	font-weight: normal;
}
/*-------------------------------------*/
div.case div.main p.description {
	font-size: 14px;
	line-height: 160%;
}
div.case div.main p.description img {
	float: right;
	margin: 0 0 12px 12px;
	padding: 1px;
}
div#case01 div.main p.description img {
	float: right;
	margin: 0 0 12px 12px;
	padding: 1px;
	background: #fff;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
div.case div.main p.uri {
	margin-top: 12px;
}
div.case div div.main .detail {
	margin-top: 36px;
	padding: 12px;
	font-size: 11px;
	line-height: 135%;
	background: #cdcdcd;
}
div.case div div.main .detail table tr {
	padding-bottom: 6px;
}
div.case div div.main .detail table td:first-child {
	padding-right: 12px;
	white-space: nowrap;
}
div#case01 div.main .detail {
	background: #92220f;
}
div#case02 div.main .detail {
	background: #cdcdcd;
}
div#case03 div.main .detail {
	background: #fff;
}
div.case div.main .detail.more {
	margin-top: 6px;
}
/* @end */