html {
	overflow-y: scroll;
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
	line-height: 160%;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}
hr, legend {
	display: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {
	list-style-type: none;
}


/* = Selected Text
----------------------------------------------- */
::selection {
	background:#f14c44; /* Safari */
	color: #FFF;
}

::-moz-selection {
	background:#f14c44; /* Firefox */
	color: #FFF;
}

/* ------ Body ------ */

body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color: #222;
	font-size: 100%;
	line-height: 160%;
	text-align: left;
	letter-spacing: -0.001em;		/* iOS4でのテキストの隙間への対応 */
	-webkit-text-size-adjust: 100%;		/* 文字サイズの自動調整機能のキャンセル */
}
.win body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}


/* ------ Anchor ------ */

a {
	outline: none;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

/*-----------------------------------------------------	*/
/*	共通					*/
/*-----------------------------------------------------	*/

/* ------ General Settings ------ */

/* フルードイメージ対応 */
img {
	max-width: 100%;
	height: auto;
}
.ie8 img {
	width: auto;
}

p {

}
.img {
	text-align: center;
}

.text-center {
	text-align: center;
}

body {
	background-color: #fff;
}

#container {
	position: relative;
	width: 100%;
	margin: 0 auto;
}


/* ------ Font ------ */

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ------ Column ------ */

.row {
	max-width: 960px;
	margin: 0 auto;
}
.row:after {
	content: "";
	display: block;
	clear: both;
}

/* 各カラムを横並びにし、左マージンを設定 */
.col {
	float: left;
	margin-left: 1%;
}
.col2 {
	float: left;
	margin-right: 1%;

}

.col.leftmargn {
	float: left;
	margin-left: 2.9%;
}
/* 左端のカラムの左マージンを削除 */
.col:first,
.col.left {margin-left: 0;}

/* カラムの左右を入れ替えるための設定 */
.col.right {
	float: right;
	margin-left: 2%;
}

/* 各カラムの幅を％で設定 */
.one-second {width: 48.387096%;}
.one-third {width: 31.18279%;}
.two-third {width: 65.591397%;}
.one-fourth {width: 24%;}
.third-fourth {width: 73.5%;}


/* 
==================================================
トップ　main
==================================================
 */
#container #top-main {
	margin:0 auto;
}
#container #top-main img{
	width: 100%;
	height: auto;
}

/* ------ ファボック紹介文 (赤)------ */
#contents-in{
	padding:60px 0px;
	text-align:center;
	color:#FFF;
	background:#d70c19;
}
#content-title h2{
	font-size:190%;
	font-weight:bold;
}
#contents-in .text{
	width: 100%;
	margin: 10px auto 0 auto;
	font-size:95%;
	line-height:165%;
	text-align:center;
}






/* 
==================================================
特 徴
==================================================
 */
#topcontents {
	width: 100%;
	padding:80px 0px 50px 0;
	margin: 0px auto;
	background:#ececec;
}
#top-submidashi{
	width: 100%;
	margin: 0px auto;
	padding:0 0 15px 0;
	font-size:100%;
	text-align:center;
}
#top-submidashi img{
	width: auto;
	height:40px;
	padding-bottom:10px;
}

#topcontents ul.contents-box {
	width: 88%;
	margin: 30px auto 40px auto;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#topcontents ul.contents-box li.top{
	width:24.0%;
	margin-right:1.2%;
	display:inline-block;
	vertical-align:top;
	padding:0px 0 20px 0;
	font-size:100%;
	background:#FFF;
}
#topcontents ul.contents-box li.fin{
	width:24.0%;
	display:inline-block;
	vertical-align:top;
	padding:0px 0 20px 0;
	font-size:100%;
	background:#FFF;
}

#topcontents ul.contents-box li .innr{
	line-height:170%;
	padding:0 15px 10px 15px;
	font-size:95%;
	line-height:155%;
}

#topcontents ul.contents-box li .innr p{
	font-size:90%;
	margin:0 0 10px 0;
	font-weight:bold;
	color:#d70c19;
}

#topcontents ul.contents-box .midashi01{
	font-size:135%;
	line-height:130%;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	margin:0px 0 15px 0;
	padding:50px 0 70px 0;
	background-image:url(../images/tokucho01_back.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
#topcontents ul.contents-box .midashi02{
	font-size:135%;
	line-height:130%;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	margin:0px 0 15px 0;
	padding:50px 0 70px 0;
	background-image:url(../images/tokucho02_back.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
#topcontents ul.contents-box .midashi03{
	font-size:135%;
	line-height:130%;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	margin:0px 0 15px 0;
	padding:50px 0 70px 0;
	background-image:url(../images/tokucho03_back.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
#topcontents ul.contents-box .midashi04{
	font-size:135%;
	line-height:130%;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	margin:0px 0 15px 0;
	padding:50px 0 70px 0;
	background-image:url(../images/tokucho04_back.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}

.conte_icon01:before {/*　雲　*/
 	content: "\e920";
	font-family: 'icomoon';
	padding-bottom:15px;
	vertical-align:middle;
	line-height:120px;
	font-size: 100px;
	font-weight: normal;
	text-align:center;
	color: #ee2626;
}
.conte_icon02:before {/*　盾　*/
 	content: "\e91f";
	font-family: 'icomoon';
	padding-bottom:15px;
	vertical-align:middle;
	line-height:120px;
	font-size: 90px;
	font-weight: normal;
	text-align:center;
	color: #ee2626;
}
.conte_icon03:before {/*　パソコン　*/
 	content: "\e900";
	font-family: 'icomoon';
	padding-bottom:15px;
	vertical-align:middle;
	line-height:120px;
	font-size: 120px;
	font-weight: normal;
	text-align:center;
	color: #ee2626;
}
.conte_icon04:before {/*　工具　*/
 	content: "\e91e";
	font-family: 'icomoon';
	padding-bottom:15px;
	vertical-align:middle;
	line-height:120px;
	font-size: 78px;
	font-weight: normal;
	text-align:center;
	color: #ee2626;
}



/* FadeThis */
.first {
	background:#FFCCCC;
	padding: 20px;
}
.slide-top {
}
.slide-bottom {
	font-size:35px;
	width:800px;
	height:200px;
	text-align:center;
	margin:100px auto;
	padding:100px 0 0;
	background:#fff;
	color:#999999;
}
.box-wrap {
	width:800px;
	margin:100px auto;
}
.box-wrap p {
	display:inline-block;
	width:215px;
	margin:0 10px 0 0;
	padding:50px 20px;
	background:#fff;
	color:#666666;
}
.box-wrap p:last-child {
	margin:0;
}




/* 
==================================================
製品・サービス
==================================================
 */
#topcontents2 {
	width: 100%;
	margin: 0px auto;
	padding: 20px 0 100px 0;
	background-image:url(../images/topcontents-back3.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	background-size: cover;
}







/* 
==================================================
NEWS
==================================================
 */
#topcontents3 {
	width: 100%;
	height:auto;
	padding:0px 0px 70px 0;
	margin: 0px auto 0px auto;
	background-image:url(../images/topcontents-back2.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
#topcontents3 #top-submidashi{
	width: 100%;
	margin: 0px auto;
	padding:0 0 10px 0;
	font-size:90%;
	text-align:center;
}
#topcontents3 #top-submidashi img{
	width: auto;
	height:40px;
	padding-bottom:8px;
}


.right{
	float:right;
	padding-top:10px;
}




/* 一覧ボタン */
.newslist{
	color:#333;
	padding:5px 20px;
	font-size:90%;
	border:2px solid #444;
	overflow:hidden;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
}
.newslist a{
	color:#333;
}
.newslist:hover{
	color:#FFF;
	background:#444;
}

.newslist::before,
.newslist::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.newslist,
.newslist::before,
.newslist:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .5s;
  transition: all .5s;
}



/* 
==================================================
リクエスト
==================================================
 */
#topcontents4 {
	width: 100%;
	height:auto;
	color:#FFF;
	text-align:center;
	padding:100px 0px 130px 0px;
	margin: 0px auto;
	background-image:url(../images/topcontents-back4.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
}
#topcontents4 .main_midashi{
	font-size:230%;
	font-weight:bold;
	letter-spacing:0.05em;
}
#topcontents4 p{
	width: 60%;
	margin:30px auto 70px auto;
	font-size:98%;
	line-height:200%;
	letter-spacing:0.01em;
}
.line80{
	width: 80px;
	margin:30px auto;
	border-bottom:2px solid #FFF;
	text-align:center;
}











/*-----------------------------------------------------	*/
/*	画面幅が768px〜1280px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 768px) and (max-width: 980px) {


	/* 左右に25pxの余白を設定 */
	.row {
		margin: 0;
		padding: 0 25px;
	}
	/* ------ content ------ */

	#content {
		float: none;
		max-width: 100%;
		margin: 0;
	}


	/* ------ システム紹介文 ------ */
	#contents-in{
		padding:30px 0px 40px 0px;
		text-align:center;
		color:#FFF;
		background:#d70c19;
	}
	#content-title h2{
		font-size:130%;
		font-weight:bold;
	}
	#contents-in .text{
		width: 90%;
		font-size:90%;
		line-height:165%;
		text-align:left;

	}

	/* ------ topcontents ------ */
	#topcontents {
		width: 100%;
		height: auto;
		padding:50px 0px 40px 0;
		margin: 0px auto;
	}

	#top-submidashi img{
		height:35px;
		padding-bottom:8px;
	}
	#topcontents ul.contents-box {
		width: 90%;
		font-size:95%;
	}
	#topcontents ul.contents-box li.top{
		width:48.0%;
		margin:0 1.3% 15px 0.5%;
	}
	#topcontents ul.contents-box li.fin{
		width:48.0%;
		margin:0 1.3% 15px 0.5%;
	}

	#topcontents ul.contents-box .midashi01{
		font-size:120%;
		padding:20px 0 40px 0;
	}
	#topcontents ul.contents-box .midashi02{
		font-size:120%;
		padding:20px 0 40px 0;
	}
	#topcontents ul.contents-box .midashi03{
		font-size:120%;
		padding:20px 0 40px 0;
	}
	#topcontents ul.contents-box .midashi04{
		font-size:120%;
		padding:20px 0 40px 0;
	}
	.conte_icon01:before {/*　雲　*/
		font-size: 80px;
	}
	.conte_icon02:before {/*　盾　*/
		font-size: 70px;
	}
	.conte_icon03:before {/*　パソコン　*/
		font-size: 90px;
	}
	.conte_icon04:before {/*　工具　*/
		font-size: 60px;
	}


	/* ------ 製品・サービス ------ */
	#topcontents2 {
		width: 100%;
		margin: 0px auto;
		padding: 10px 0 60px 0;
	}




	/* ------ リクエスト ------ */
	#topcontents4 {
		padding:80px 0px 110px 0px;
	}
	#topcontents4 .main_midashi{
		font-size:200%;
	}
	#topcontents4 p{
		width: 90%;
		margin:30px auto 70px auto;
		font-size:90%;
		line-height:180%;
	}



	/* ------ NEWS ------ */
	#topcontents3 #top-submidashi img{
		height:35px;
		padding-bottom:8px;
	}


}





/*-----------------------------------------------------	*/
/*	画面幅が767px以下（スマートフォン専用スタイル）	*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 767px) {
	/* ------ Column ------ */

	/* 各カラムの横並びを解除し、縦１列に並べる */
	.col,
	.col.left,
	.col.right {
		float: none;
		width: auto;
		margin-left: 0;
	}

	.row {
		max-width: 98%;
		margin: 0 auto;
	}

	#global-nav {
		display: none;
	}

	#container {
		top:60px;
		width: 100%;
		height:100px;
	}

	/* ------ Article ------ */

	article {
		padding-bottom: 0;
	}

	article p {
		font-size: 90%;
	}


	#container #topmain{
	}

	/* ------ システム紹介文 ------ */
	#content-title h2{
		font-size:110%;
	}
	#contents-in{
		padding:30px 0px 40px 0px;
	}
	#contents-in .text{
		width: 90%;
		margin: 10px auto 0 auto;
		font-size:85%;
		line-height:160%;
		text-align:left;
	}

	/* ------ topcontents ------ */
	#topcontents {
		width: 100%;
		height: auto;
		padding:40px 0px 40px 0;
		margin: 0px auto;
	}
	#top-submidashi img{
		height:35px;
	}


	#topcontents ul.contents-box {
		width: 80%;
		font-size:95%;
	}
	#topcontents ul.contents-box li.top{
		width: 100%;
		margin:0 0 15px 0;
	}
	#topcontents ul.contents-box li.fin{
		width: 100%;
		margin:0 0 15px 0;
	}

	#topcontents ul.contents-box .midashi01{
		font-size:120%;
		padding:20px 0 30px 0;
	}
	#topcontents ul.contents-box .midashi02{
		font-size:120%;
		padding:20px 0 30px 0;
	}
	#topcontents ul.contents-box .midashi03{
		font-size:120%;
		padding:20px 0 30px 0;
	}
	#topcontents ul.contents-box .midashi04{
		font-size:120%;
		padding:20px 0 30px 0;
	}
	.conte_icon01:before {/*　雲　*/
		font-size: 70px;
		line-height:140%;
	}
	.conte_icon02:before {/*　盾　*/
		font-size: 70px;
		line-height:140%;
	}
	.conte_icon03:before {/*　パソコン　*/
		font-size: 85px;
		line-height:110%;
	}
	.conte_icon04:before {/*　工具　*/
		font-size: 60px;
		line-height:140%;
	}



	/* 
	==================================================
	製品・サービス
	==================================================
	 */
	#topcontents2 {
		width: 100%;
		margin: 0px auto;
		padding: 10px 0 60px 0;
	}


	/* 
	==================================================
	リクエスト
	==================================================
	 */
	#topcontents4 {
		padding:60px 0px 70px 0px;
	}
	#topcontents4 .main_midashi{
		width: 90%;
		margin: 0px auto;
		font-size:140%;
		line-height:150%;
	}
	#topcontents4 p{
		width: 90%;
		margin:30px auto 40px auto;
		font-size:80%;
		line-height:180%;
		text-align:left;
	}




	/* 
	==================================================
	NEWS
	==================================================
	 */
	#topcontents3 {
		background-image:url(../images/topcontents-back2.jpg);
		background-repeat:no-repeat;
		background-position:center top;
		background-size: cover;
	}
	#topcontents3 #top-submidashi img{
		width: auto;
		height:35px;
		padding-bottom:8px;

	/* ------ .text の前で改行させる------ */
	#topcontents3 .news-area .text:before{
		content: "\A" ;
		white-space: pre ;
	}


}


/*-----------------------------------------------------	*/
/*	for - 639px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 639px) {

	/* ------ mainimg ------ */
	#mainimg-button {
		padding: 15px 0;
	}


}