@charset "UTF-8";

/************************************************************
RESET & DEFAULT
************************************************************/

/***************************RESET & DEFAULT*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input, button, textarea, select {
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: normal;
  font-size: 100%;
  text-decoration: none;
  vertical-align: baseline;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img	{
  border-width: 0;
  border-style: none;
  vertical-align: bottom;
}

a{
	color:#0000ff;
	font-weight:inherit;
}


/************************************************************
COMMON TOOL
************************************************************/

/***************************TOOL*/

.clear{
	clear:both;
}


/***************************MARGIN*/

.mt10{
	margin-top:10px;
}

.mt20{
	margin-top:20px;
}

.mt30{
	margin-top:30px;
}

.mt40{
	margin-top:40px;
}

.mt50{
	margin-top:50px;
}

.mb10{
	margin-bottom:10px;
}

.mb20{
	margin-bottom:20px;
}

.mb30{
	margin-bottom:30px;
}

.mb40{
	margin-bottom:40px;
}

.mb50{
	margin-bottom:50px;
}

.ml10{
	margin-left:10px;
}

.ml20{
	margin-left:20px;
}

.ml30{
	margin-left:30px;
}

.ml40{
	margin-left:40px;
}

.ml50{
	margin-left:50px;
}

.mr10{
	margin-right:10px;
}

.mr20{
	margin-right:20px;
}

.mr30{
	margin-right:30px;
}

.mr40{
	margin-right:40px;
}

.mr50{
	margin-right:50px;
}

/***************************PADDING*/


/***************************SPACER*/

.spacer_h10{
	width:0;
	height:10px;
}

.spacer_h20{
	width:0;
	height:20px;
}


/***************************ALIGN*/

.ta_left{
	text-align:left;
}

.ta_right{
	text-align:right;
}

.ta_center{
	text-align:center;
}


/***************************2 COLUMN*/

.column2{
	width:100%;
	font-size:0;
	line-height:0;
}

.column2 .left{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	width:48%;
	vertical-align:top;
}

.column2 .right{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin-left:4%;
	width:48%;
	vertical-align:top;
}


/***************************PIC_LIST*/

.pic_list4{
	list-style:none;
	font-size:0;
	line-height:0;
}

.pic_list4 li{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin:3% 1% 0 0;
	width:24%;
	vertical-align:top;
}

.pic_list5{
	list-style:none;
	font-size:0;
	line-height:0;
}

.pic_list5 li{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin:3% 1% 0 0;
	width:19%;
	vertical-align:top;
}

.pic_list6{
	list-style:none;
	font-size:0;
	line-height:0;
}

.pic_list6 li{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin:3% 1% 0 0;
	width:15.6666%;
	vertical-align:top;
}

/***************************PIC*/

.left_pic{
	margin: 0 10px 10px 0;
	float:left;
}

.right_pic{
	margin: 0 0 10px 10px;
	float:right;
}


/************************************************************
TEXT
************************************************************/

h2{
	width:100%;
	height:50px;
	color:#ffffff;
	border-radius:25px;
	background:#bf9000;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
}

h3{
	width:100%;
	height:40px;
	color:#ffffff;
	border-radius:20px;
	background:#00b0f0;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:40px;
}

em{
	font-weight:bold;
	font-style: normal;
}

.tx12{
	font-size:12px;
	line-height:1.4;
}

.tx14{
	font-size:14px;
	line-height:1.4;
}

.tx16{
	font-size:16px;
	line-height:1.4;
}

.tx18{
	font-size:18px;
	line-height:1.4;
}

.tx24{
	font-size:24px;
	line-height:1.4;
}


/***************************COLOR*/

.red{
	color:#ff0000;
	font-weight:inherit;
}

.yellow{
	color:#ffff00;
	font-weight:inherit;
}

/************************************************************
HEADER
************************************************************/

header{
	width:100%;
	height:70px;
	background:#679944;
}

header .header_inner{
	margin:auto;
	padding:10px 0;
	width:960px;
	height:70px;
	background:#679944;
}

header .header_inner #logo_zucc-type{
	margin:0 0 10px 10px;
}


/************************************************************
FOOTER
************************************************************/

footer{
	width:100%;
	height:50px;
	background:#679944;
}


/************************************************************
CONTENTS
************************************************************/

/***************************CONTACT*/

article.contact .contact_area{
	margin:0 auto;
	width:960px;
	border:1px solid #ff0000;
	border-radius:20px;
	background:#fbe5d6;
}

article.contact .contact_area .ttl{
	width:100%;
	height:50px;
	color:#ffffff;
	border-radius:19px 19px 0 0 / 19px 19px 0 0;
	background:#ff0000;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
}

article.contact .contact_area .inner{
	padding:2%;
	text-align:center;
}

article.contact .contact_area .inner .date{
	color:#ff0000;
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:1;
}

article.contact .contact_area .inner #logo_zucc-mark_s{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin-right:5px;
	vertical-align:middle;
}

article.contact .contact_area .inner .address{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	text-align:left;
	vertical-align:middle;
}

article.contact .contact_area .form_ttl{
	width:100%;
	height:36px;
	color:#ffffff;
	border-radius:18px;
	background:#00b0f0;
	font-size:16px;
	font-weight:bold;
	line-height:36px;
	text-align:center;
}

article.contact .contact_area .telephone_ttl{
	width:100%;
	height:36px;
	color:#ffffff;
	border-radius:18px;
	background:#00b0f0;
	font-size:16px;
	font-weight:bold;
	line-height:36px;
	text-align:center;
}

article.contact .contact_area .btn_contact_form{
	display:block;
	width:100%;
	height:36px;
	color:#ffffff;
	border-radius:9px;
	background:#0070c0;
	font-size:16px;
	font-weight:bold;
	line-height:36px;
	text-align:center;
}

article.contact .contact_area #btn_contact_form:hover{
	background:#0083e1
}


/***************************TITLE*/

section.title{
	position:relative;
	width:100%;
	height:400px;
	background:url('../../assets/img/bg_title.png') center center repeat-x;
}

section.title #text_title{
	position:absolute;
	top:80px;
	left:50%;
	margin-left:-423px;	
}

section.title .sns_area{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-46px;	
	width:92px;
	height:48px;
	background:url('../../assets/img/bg_sns_area.png') no-repeat;
}

section.title .sns_area #btn_tw{
	position:absolute;
	top:4px;
	left:4px;
}

section.title .sns_area #btn_fb{
	position:absolute;
	top:4px;
	right:4px;
}


/***************************SECTION*/

section.concept,
section.spec,
section.system,
section.demonstration,
section.environment,
section.team,
section.result{
	margin:auto;
	width:960px;
}


/***************************CONCEPT*/

section.concept .column2 .left .mark,
section.concept .column2 .right .mark{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	width:26%;
	vertical-align:top;
}

section.concept .column2 .left .text,
section.concept .column2 .right .text{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin-left:4%;
	width:70%;
	vertical-align:top;
}

section.concept .column2 .left .text .ttl,
section.concept .column2 .right .text .ttl{
	color:#000000;
	font-size:16px;
	font-weight:bold;
	line-height:1;
}

section.concept .column2 .left .text .ttl span,
section.concept .column2 .right .text .ttl span{
	color:#000000;
	font-size:12px;
	font-weight:bold;
}

section.concept .column2 .left .description,
section.concept .column2 .right .description{
	color:#000000;
	font-size:14px;
	line-height:1.4;
}

section.concept .column2 .left .description a,
section.concept .column2 .right .description a{
	color:#0000ff;
	font-size:14px;
	line-height:1.4;
}

section.concept .tag_w{
	list-style:none;
	width:500px;
	margin:auto;
	text-align:center;
}

section.concept .tag_w li{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin:0 5px 5px 0;
	padding:5px;
	color:#0070c0;
	border:1px solid #0070c0;
	font-size:14px;
	line-height:1;
}

section.concept .flow_a{
	width:100%;
	background:#0070c0;
}

section.concept .flow_a .catch{
	color:#ffffff;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}

section.concept .flow_b{
	width:0;
	height:0;
	border-left: 480px solid transparent;
	border-right: 480px solid transparent;
	border-top: 60px solid #0070c0;
}

section.concept .tag_b{
	list-style:none;
	width:500px;
	margin:auto;
	text-align:center;
}

section.concept .tag_b li{
  display:	inline-block;
	*display:	inline;
	*zoom:	1;
	margin:0 5px 5px 0;
	padding:5px;
	color:#ffffff;
	border:1px solid #ffffff;
	font-size:14px;
	line-height:1;
}

/***************************SPEC*/

section.spec .column2 .ttl{
	padding-bottom:5px;
	border-bottom:2px solid #999999;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:1;
}

/***************************MODEL FIELD*/

article.model-field .model-field_area{
	padding:20px;
	width:960px;
	border:1px solid #ffcc99;
	border-radius:20px;
	background:#ffffee;
}