@charset "UTF-8";/**/

/*================================================
 *  タブレット向けデザイン （スクロールバーを考慮して20px大きいサイズで切り替え）
 = 画面の横幅が979pxまで
 ================================================*/

 @media screen and (max-width:979px) {
 body {
	background:#FFFFEE;
}
.inner {
	background:#FFFFDD;
	width:100%;
	margin:0px auto;
}

#contents {
	background:#FFFFCC;
	box-sizing:border-box;
	width:96%;
	padding:0 2%;
}

/* main sub */
	#main {
	float:none;
	width:100%;
	}

	#sub {
	float:none;
	width:100%;
	}
	
/*================================================
 *  コンテンツ
 ================================================*/
/**/
.mainmenu{
	background:#ffff00;
	width:96%;
column-count: 3;}

.submenu{
column-count: 3;}

}

/*================================================
 *  小型タブレット／スマートフォン向けデザイン=画面の横幅が767pxまで
 ================================================*/
@media screen and (max-width:767px) {
	#contents {
		width:90%;
		margin:0 25px 0 0;
	}
	.lock {
	overflow:hidden;
	}

	header {
	z-index:2;
	box-sizing:border-box;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:15px 10px;
	}
/* summary */
	.summary {
	position:relative;
	top:auto;
	right:auto;
	margin-top:-10px;
	padding:10px;
	}

	
	.bsummary {
	display:block; width:70%;  
	padding:10px;

}

/*================================================
 *  コンテンツ
 ================================================*/
/**/
.mainmenu{
column-count: 2;}

.submenu{
column-count: 2;}



/*================================================
 *  クラス
 ================================================*/
 
.col_two_one ul {
	margin-right:0;
	}
.col_two_one li {
	width:100%;
	}
.col_two_one li:nth-child(2n+1) {
	clear:both;
	}
.col_three_one ul {
	margin-right:0;
	}
	
.col_three_one li {
	width:100%;
	}
	
.col_three_one li:nth-child(2n+1) {
	clear:both;
	}	

/*========= 003から移植 =========*/

.photo {
	margin-right:0;
	}

.photo img {
	display:block;
	box-sizing:border-box;
	width:100%;
	float:none;
	margin-right:0;
	margin-bottom:10px;
	}   
	
.catalog {
	margin-right:-2%;
	}
	
.catalog li {
	float:left;
	width:23%;
	margin:0 2% 2% 0;
	}

.catalog li img {
	width:100%;
	}
 
/* モバイル時に拡大するためのオリジナル */ 
.service {
	margin-right:0;
	}
.service li {
	list-style:none;
	float:left;
	width:100%;
	margin:0 2% 10px 0;
	}
.service li img {
	display:block;
	box-sizing:border-box;
	width:100%;
	float:none;
	margin-right:0;
	margin-bottom:10px;
	}

.staff {
	margin:10px -3% 0 0;
}
.staff div {
	float:left;
	width:100%;
	margin-right:2%;
}
.staff div img {
	width:97%;
	margin-bottom:10px;
}

.staff2 {
	margin:10px -3% 0 0;
}
.staff2 div {
	float:left;
	width:100%;
	margin-right:2%;
}
.staff2 div img {
	width:97%;
	margin-bottom:10px;
}



.bnr2_left {
	float:left;
	margin-top:5px;
}
.bnr2_right {
	float:right;
		margin-top:-5px;
}	
.bnr2 img {
	width:49%;
}	

/*==========================================
 *  テーブル
 ==========================================*/
	table {
width:95%;
margin: 0 auto;
margin-bottom:1em;
border-collapse:collapse; /*隣接するセルのボーダーを重ねて表示（collapse）、間隔をあけて表示（separate）*/
border:0px solid black;/*borderはすべて1pxだが確認のため太くして色を付けた*/
background:;  /*whitesmoke*/
}

 	.mailform { /* ?????*/
width:100%;
margin: 0 auto;
background:;  /*whitesmoke*/
border:0px solid blue;
}
 /* セルのブロックが横から縦になる*/
	tr {
width:100%;
background:;
border:0px solid black;
background:;
}

	th{
width: 100%;
display: block;
border:1px solid gray;
background:gainsboro; /**/
}

	td {
width: 100%;
display: block;
border:1px solid gray;
background:whitesmoke; /**/
}

	table select{/* メールフォーム用*/
padding:5px;
font-size:1em;
width:50%;
}

	#demo01 table {
width: 90%; border:none; padding: 10px;}
	#demo01 thead {
display: none;}
	#demo01 tr {
display: block;
margin-bottom: 20px;
border-top: 1px solid #4f4d47;
}

	#demo01 td {
display: block;
text-align: center;
border-right: 1px solid #4f4d47;
border-bottom: none;
padding: 2px;
}

/* tdのデザイン */
	#demo01 td:nth-of-type(1) {
background-color: gray; 
text-align: center; 
color: #fff;
}
	#demo01 td:last-child {
border-bottom:1px solid #4f4d47;
}
	#demo01 td:before {
color:#4f4d47;
display: block;
background-color:#f5f3ec;
}

/* contentでタイトルを追加 */
	#demo01 td:nth-of-type(2):before { content: "データ容量";}
	#demo01 td:nth-of-type(3):before { content: "バージョン管理";}
	#demo01 td:nth-of-type(4):before { content: "料金";}

/*================================================
 *  メールフォーム／inqtable
 ================================================*/
	table {
margin-bottom:1em;
border-collapse:collapse; /*隣接するセルのボーダーを重ねて表示（collapse）、間隔をあけて表示（separate）*/
border:0px solid black;/*borderはすべて1pxだが確認のため太くして色を付けた*/
background:#f5f5f5;  /*whitesmoke*/
}

	.mailform {
width:100%;
margin: 0 auto;
background:#f5f5f5;  /*whitesmoke*/
border:0px solid gray;
}
 /* セルのブロックが横から縦になる*/
	tr {
width:100%;
background:#fff;	
border:0px solid black;
	}
	
	th{
width: 95%;
display: block;
background:#f5f5f5;
border:1px solid gray;
    }
    
	td {
width: 95%;
display: block;
border:1px solid gray;
    }
       
	table select{/* メールフォーム用*/
padding:5px;
font-size:1em;
width:50%;
}


	    .contact {/* これを入れることで問い合わせが右側へ移動する*/
        position:relative;
        float:left;
        padding:5px;
        margin-left:0px;
        margin-bottom:0px
    }
    
    	    .contactb {
    }


/*================================================
 *  トップナビ
 ================================================*/
.topNavi {
	margin-right:0;
}
.topNaviColumn {
	display:block;
box-sizing:border-box;
	width:100%;
	float:none;
	margin-right:0;
	margin-bottom:10px;
}
   
  /* トップナビ 1*/
  .topNavi1 {
	margin-right:0;
}

.topNaviColumn1 {
	display:block;
	box-sizing:border-box;
	width:100%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}
   
/* トップナビ 
.topNavi2 {
	margin-right:0;
}

.topNaviColumn2 {
	display:block;
	box-sizing:border-box;
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}
2*/
/* トップナビ 4*/
.topNavi4 {
	margin-right:0;
}

.topNaviColumn4 {
	display:block;
	box-sizing:border-box;
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}

.topNaviPhoto4 img {
	width:100%;
}

/* トップナビ 3*/
.topNavi3 {
	margin-right:0;
}

.topNaviColumn3 {
	display:block;
	box-sizing:border-box;
	width:48%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}

.topNaviPhoto3 img {
	width:100%;
}

/* トップナビ 5*/
.topNavi5 {
	margin-left:0%;
}

.topNaviColumn5 {
	margin: 0 auto;/* センタリング(効果は？)*/
	display:block;
	box-sizing:border-box;
	width:31%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}

.topNaviPhoto5 img {
	width:100%;
}



 /* トップナビ 6*/
  .topNavi6 {
	margin-right:0;
}

.topNaviColumn6 {
	display:block;
	box-sizing:border-box;
	width:100%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}


/* トップナビ 7*/
.topNavi7 {
	margin-right:0;
}

.topNaviColumn7 {
	display:block;
	box-sizing:border-box;
	width:31%;
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-bottom:10px;
}
}

@media screen and (max-width719px) {
.inner {
	margin-left:28px;
	}
	
.Search_Window{
width:50%;
margin-left:58px;
	}
}

/*===============================================
スマートフォン 横(ランドスケープ) =画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
#inner {
	width:80%;
	margin:0 30px;
}
/*================================================
 *  コンテンツ
 ================================================*/
/**/
.mainmenu{
column-count: 1;}

.submenu{
column-count: 1;}

/*==========================================
 *  テーブル
 ==========================================*/
 	table {
		width: 95%;
    }
 /* セルのブロックが横から縦になる*/
	table th,
	table td {
		width: 100%;
		display: block;
}
	table select{/* メールフォーム用*/
		padding:5px;
		font-size:1em;
		width:40%;
}

	td .cell {	  /* メールフォーム用*/
		padding:5px;
		font-size:1em;
		width:90%;
}

	 header img { /* ロゴとナビの衝突防止 */
width:90%;
}
/*================================================
 *  メールフォーム／inqtable
 ================================================*/
.mailform { /* これないけど？ */
	width:100%;
	margin: 0 auto;
}



/*===============================================
スマートフォン 縦(ポートレート)=画面の横幅が480pxまで
===============================================*/
@media screen and (max-width:480px){
	header {
	margin-bottom:-15px;
	}
	
.bsummary {
	display:block; width:90%;  
	padding:10px;

}
.logo{
	display:none;
}
	
.logo img{
	width:100%; 
}
	
.logosp{
	display:block;
	margin-bottom:20px;
}
	
.logosp img{
	width:100%; 
}	

#contents { /* sp時にヘッダーで隠れるのを防止。summaryがないときは不要*/
	padding-top:40px;
}
	
/*==============================================
 *  テーブル
 ==============================================*/
   table {
        width: 90%;
    }
 /* セルのブロックが横から縦になる*/
    table th, table td {
    width: 100%;
        display: block;
    }

        table select{/* メールフォーム用*/
        	padding:5px;
font-size:1em;
width:40%;
}

td .cell {	  /* メールフォーム用*/
padding:5px;
font-size:1em;
width:90%;
}
/*================================================
 *  バナー
 ================================================*/
/*================================================
 *  メールフォーム／inqtable
 ================================================*/

.mailform { /* これないけど？ */
	width:100%;
	margin: 0 auto;
}	
 /*================================================
 *  スライドショー
 ================================================*/
 .slide {
display: none;
}	
	}


@media screen and (max-width:479px) {
.inner {
	margin:0 20px;
	margin-left:38px;
	}
.box {
height:72px;
width:51px;
font-size:0.7em;
	}
.bo1 {
width:50px;
	}

.footmenu {
	margin-left:18px;
	width:100%;
	padding:20px 0;

	}
.footmenu li {
	padding:10px 12px;
	font-size:28px;
	}
.Search_Window{
	width:75%;
margin-left:48px;
	}
}


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

}