@charset "utf-8";

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/*
* layout.css
* date---YYYY/MM/DD
*/


/*===============================================
	layout.css 画面の横幅が641px以上
===============================================*/

/* ----------------------------------------------
 Basic-Design
---------------------------------------------- */
html {
	overflow-y: scroll;
}
body {
	background: #FFF;
	color: #333;
	font-size: 1.7em;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, Osaka, Arial, Helvetica, Verdana, sans-serif;
	line-height: 1.8;
}

p, dl {line-height:1.8em;}
a { text-decoration: none; }
a:link { color: #FFF; }
a:visited { color: #FFF; }

#wrapper{
	width:100%;
	height:100%;
}
.soudan{
	display: block;
	width:500px;
	height:80px;
	margin: 0 auto;
	padding: 50px 0 0 0 !important;
}
.soudan img{
	width: 100%;
}
.link{
	display: inline-block;
	width:600px;
	height:100px;
	padding: 50px 0 0 0 !important;
}
a.alpha:hover img{
	filter:alpha(opacity=75);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=75)"; /* IE8用 */
	-moz-opacity:0.75; /* Firefox 1.5未満, Netscape用 */
	-khtml-opacity: 0.75;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */
	opacity: 0.75; /* Firefox 1.5以上, Opera, Safari用 */
}


/*-----------------------------------------------------------------
header
-----------------------------------------------------------------*/
#header{
	position: fixed;
	z-index: 10000;
	width: 100%;
	height:170px;
	left: 0;
	top: 0;	
	background: #FFF;
}
#header_in{
	width:980px;
	height:90px;
	margin:0 auto;
	padding-top:30px;
}
	#header_in img{
		width:100%;
	}
#header_logo{
	float:left;
}
	#header_logo h1{
		float: left;
		width:292px;
	}
	#header_logo p{
		float: left;
		padding-left:20px;
		font-size:14px;
		line-height:1.3em;
	}
	#header_logo p span{
		display: block;
	}
#header_soudan{
	float:right;
	padding-top:6px;
	width:300px;
	height:48px;
}



/*-----------------------------------------------------------------
globalnavi
-----------------------------------------------------------------*/
#glovalnavi{
	width:100%;
	height:50px;
	background:#FF8300;
	color:#FFF;
	font-size:90%;
	font-weight:100;
}
#glovalnavi ul{
	height:50px;
	margin: 0 auto;
	text-align:center;
}
#glovalnavi li{
	display: inline-block;
	margin: 15px 0;
	padding:0 22px;
	line-height: 20px;
}
#glovalnavi li a:hover{
	opacity: 0.6;
}
#glovalnavi li + li{
	border-left:1px solid #FFF;
}
.fixed {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
}
.js .nav-collapse {
	position: relative;
}
.js .nav-collapse.closed {
	max-height: none;
}
.nav-toggle {
	display: none;
}


/*-----------------------------------------------------------------
contents
-----------------------------------------------------------------*/
#contents{
	width:100%;
	margin: 0 auto;
	padding-top: 170px;
}
.bg_orange{
	width:100%;
	background-color:#FFF6ED;
}
#contents h1{	
	color:#FF8300;
	font-size: 50px;
	text-align:center;
	padding-bottom:50px;
	line-height: 1.4;
}
#contents h3{
	padding:25px 0 30px 0;
	color: #003366;
	font-size: 30px;
	text-align:center;
	font-weight: 500;
	line-height: 1.4;
}

/*-----------------------------------------------------------------
	main
-----------------------------------------------------------------*/
.main{
	position:relative;
	width:980px;
	margin: 0 auto;
	padding:50px 0 50px;
	text-align:center;
}
.main h2{
	padding-bottom: 20px;
	color:#333;
	font-size:165%;
	font-weight:bold;
	line-height: 1.4;
}
.main p{
	margin-bottom: 1em;
	font-size: 18px;
}
.main p.main_txt{
	margin-bottom: 0;
	color:#003366;
	font-size:129%;
	font-weight: 600;
	line-height:1.6em;
	background:url(img/bg_line.png) no-repeat center bottom;
}
.main .kian_bosyu{
	position:absolute;
	top:10px;
	right:0;
	width:140px;
}
.main .kian_bosyu img{
	width: 100%;
}
.main .img_r{
	float: right;
	width: 410px;
	padding-left: 35px;
}
.main .text_r{
	float:right;
	width: 400px;
}
.main .text_r h3{
	color:#FF8300 !important;
	font-size: 28px !important;
	font-weight: bold !important;
	text-align: right !important;
}
.main .text_r p{
	padding-bottom: 1em;
	font-size: 18px !important;
	text-align: right !important;
}
.main .text_r p.p_big{
	padding-bottom: 0;
	font-size: 26px !important;
	font-weight: 500;
}


/*-----------------------------------------------------------------
about
-----------------------------------------------------------------*/
#about{
	width: 980px;
	margin: 0 auto;
	padding:50px 0;
	text-align:center;
}
#about .box_area{
	width: 980px;
	margin: 0 auto;
}
	#about .box_area ul{
		overflow: hidden;
		width: 996px;
		margin-right: -17px;
		list-style: none;
	}
		#about .box_area li{
			float:left;
			display: inline;
			width:314px;
			margin: 0 16px 25px 0;
		}
			#about .box_area li img{
				width: 100%;
			}

/* team
------------------------------*/
#about div.team{
	width: 100%;
	height:auto;
	background-color:#F8F8F8;
	margin: 0 auto;
	text-align:left;
}
.team img{
	width:200px;
}
.team div{
	width:930px;
	margin: 0 auto 15px auto;
	padding-bottom:15px;
	border-bottom:solid 1px #CCC;
}
	.team div p{
		float:left;
		display: inline;
		width: 200px;
		margin: 0 20px 0 5px;
		padding: 4px;
		background: #FFF;
		border: 1px solid #DDD;
	}
	.team dl{
		width:685px;
		margin-left:235px;
	}
		.team dt{
			padding-bottom:3px;
			font-size: 20px;
			font-weight:bold;
		}
		.team dd{
			text-align: justify;
		}


/*-----------------------------------------------------------------
system
-----------------------------------------------------------------*/
#system{
	width:980px;
	margin: 0 auto;
	padding:50px 0 50px;
	text-align:center;
}
#system h3{
	padding:0 0 30px 0;
}
#system p span{
	display: block;
}
.system_img{
	width: 702px;
	margin: 0 auto;
	padding:50px 0;
}
.system_img img{
	width: 100%;
}


/* step
------------------------------*/
#system div.step{
	width:980px;
	height:auto;
	background-color:#FFF;
	margin: 0 auto;
	text-align:left;
}
.step h3{
	padding:20px 0 20px 0 !important;
	font-size: 26px;
}
.step dl{
	width:930px;
	margin: 0 auto 15px auto;
	padding-bottom:15px;
	border-bottom:dotted 1px #CCC;
}
	.step dt{
		float:left;
		height:70px;
		vertical-align: middle;
	}
	.step dd{
		height:70px;
		padding:0 0 0 35px;
		display: table-cell;
		vertical-align: middle;
	}
		.step dd span{
			display: block;
			margin-top: 5px;
			font-size: 15px;
		}
	.step img{
		width:54px;
		margin-top: 8px;
	}




/*-----------------------------------------------------------------
	support
-----------------------------------------------------------------*/
#support{
	width:980px;
	margin: 0 auto;
	padding:50px 0;
	text-align:center;
}
#support h3{
	padding: 50px 0 10px;
	font-size: 26px;
	line-height: 1.4;
}
/*エリア*/
.content {
	clear: both;
	overflow: hidden;
	width: 980px;
}
.area {
	display: none;
	width:930px;
	text-align:center;
}

.sptab3{
	width:980px;
	height:410px;
}
#sptab3_l1,#sptab3_l2,#sptab3_l3,#sptab3_l4,#sptab3_l5{
	float:left;
	width:540px;
	height:410px;
	padding-right: 25px;
}
.sptab3_r{
	float:right;
	width:390px;
	height:370px;
	padding-top: 30px;
}
.text_results{
	width: 340px;
	margin: 20px auto 0;
	background-color:#F8F8F8;
	border-radius: 20px;        /* CSS3草案 */  
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 20px;   /* Firefox用 */  
	padding: 10px 20px 20px;
}
#sptab3_l2 .text_results{
	width: 500px;
}
	.text_results dt{
		padding-left: 1em;
		font-weight: bold;
		text-align: center;
		letter-spacing: 1em;
	}
	.text_results dd{
		padding:0;
		line-height: 1.6;
	}
	#sptab3_l2 .text_results dd{
		text-align: left;
	}
	.text_results ul{
		list-style: none;
	}
	.text_results li{
		padding-left: 1em;
		background: url(img/ico_list.png) no-repeat 0.2em center;
	}

.circle{
	width: 270px;
	height: 270px;
	margin: 70px auto 0 auto;
	background-image:url(img/support_stab_bg.png);
	position:relative;
}
.book{
	width: 128px;
	height: 128px;
	background-image:url(img/support_stab_off.png);
	position:absolute;
	left:71px;
	top:-59px;
}
.event{
	width: 128px;
	height: 128px;
	background-image:url(img/support_stab_off.png);
	position:absolute;
	left:-56px;
	top:31px;
}
.web{
	width: 128px;
	height: 128px;
	background-image:url(img/support_stab_off.png);
	position:absolute;
	left:-9px;
	top:181px;
}
.movie{
	width: 128px;
	height: 128px;
	background-image:url(img/support_stab_off.png);
	position:absolute;
	left:149px;
	top:181px;
}
.cloud{
	display:block;
	width: 128px;
	height: 128px;
	background-image:url(img/support_stab_off.png);
	position:absolute;
	left:200px;
	top:31px;
}
.cloud span{
	display: inline-block;
	margin-top:35px;
	line-height: 1.8;
}



/*	tab
----------------------------------*/
.tab,
.tab li a {
	color:#333;
}
ul.tab {
	position:relative;
	width:930px;
	height:75px;
}
.tab li{
	font-size: 24px;
	line-height:58px;
}
/*active a */
.tab li.active a{
	color:#fff;
}
li.tab2 a, li.tab3 a {
	padding-left:30px;
}
li.tab2.active a, li.tab3.active a {
	padding-left:30px;
}

/*起案から掲載まで*/
.tab li.tab1 {
	position:absolute;
	z-index:3;
	width: 310px;
	height: 60px;
	background-image:url(img/tab_support_01_off.png);
}
.tab li.tab1.active {
	position:absolute;
	z-index:3;
	height:75px;
	background-image:url(img/tab_support_01_on.png);
}

/*プロジェクト周知*/
.tab li.tab2 {
	position:absolute;
	left:250px;
	z-index:2;
	width: 370px;
	height: 60px;
	background-image:url(img/tab_support_02_off.png);
}
.tab li.tab2.active {
	position:absolute;
	left:250px;
	z-index:2;
	width: 370px;
	height: 75px;
	background-image:url(img/tab_support_02_on.png);
}

/*達成後のサポート*/
.tab li.tab3 {
	position:absolute;
	left:560px;
	z-index:1;
	width: 370px;
	height: 60px;
	background-image:url(img/tab_support_02_off.png);
}
.tab li.tab3.active {
	position:absolute;
	left:560px;
	z-index:1;
	width: 370px;
	height: 75px;
	background-image:url(img/tab_support_02_on.png);
}

/*　達成後のサポート中身
------------------------------------------------*/
.support_tab, .support_tab li a {
	position:relative;
	color:#333;
}
.support_tab li{
	line-height:128px;
}
.support_content {
    clear: both;
    overflow: hidden;
    width: 930px;
    height:610px;
	background:#FFF;
}
.support_area {
    display: none;
	width:590px;
	text-align:center;
}
.support_tab li.active {
	height: 128px;
}
.support_tab li.active a{
    color:#fff;
}
ul.support_tab li.active{
	background-image:url(img/support_stab_on.png);
}


/*-----------------------------------------------------------------
	success
-----------------------------------------------------------------*/
#success{
	width:980px;
	margin: 0 auto;
	padding:50px 0 50px;
	text-align:center;
}
/*#success div.comment{
	height:auto;
	background-color:#F8F8F8;
	margin: 0 auto 25px;
	padding:25px 25px;
	text-align:left;
}*/
#success div.comment{
	margin-bottom:40px;
	padding:15px 25px;
	border: solid 5px #EEE;
}
	#success h3{
		padding:0 0 10px 0;
		font-size:153%;
	}
	#success dt{
		font-size:124%
	}
	#success ul.result{
		list-style-type:disc;
		margin-left:2em;
	}
	#success p{
		margin-bottom:10px;
	}
	.project_page_link{
		display: block;
		width:300px;
		height:auto;
		margin: 25px auto 0;
	}
	.project_page_link img{
		width: 100%;
	}



/*-----------------------------------------------------------------
	flow
-----------------------------------------------------------------*/
#flow{
	width:980px;
	margin: 0 auto;
	padding:50px 0 50px;
	text-align:center;
}
#flow div.flow{
	position:relative;
	clear: both;
	height:auto;
	padding: 30px 0;
	margin: 0 auto ;
	text-align:left;
	border-bottom:solid 1px #CCC;
}
	.flow:before {
	  border-top-width: 15px;
	  border-right-width: 20px;
	  border-bottom-width: 0;
	  border-left-width: 20px;
	  border-color: #CCC transparent;
	  border-style: solid;
	  display: block;
	  position: absolute;
	  bottom: -16px;
	  left: 50%;
	  width: 0;
	  height: 0;
	  margin-left: -20px;
	  content: "";
	}
	.flow:after {
	  border-top-width: 15px;
	  border-right-width: 20px;
	  border-bottom-width: 0;
	  border-left-width: 20px;
	  border-color: #FFF transparent;
	  border-style: solid;
	  display: block;
	  position: absolute;
	  bottom: -15px;
	  left: 50%;
	  width: 0;
	  height: 0;
	  margin-left: -20px;
	  content: "";
	}
.flow img{
	position:absolute;
	width:120px;
	top:50%;
	margin-top:-55px;
	padding:0 30px 0 5px;
	vertical-align:bottom;
}
.flow dl{
	width:780px;
	margin-left:155px;
}
	.flow dt{
		padding-bottom:10px;
		color:#FF8300;
		font-size: 26px;
	}


/*-----------------------------------------------------------------
	link
-----------------------------------------------------------------*/
#link{
	width:980px;
	margin: 0 auto;
	padding: 50px 0;
	text-align:center;
}

/*-----------------------------------------------------------------
footer
-----------------------------------------------------------------*/

#footer{
	width:100%;
}
#footer p{
	font-size:60%;
	font-weight:bold;
	padding: 40px 0;
	text-align:center;
}