/*===============================================

min-width	ブラウザの幅がクエリに定義された値より広い場合にルールが適用されます。
max-width	ブラウザの幅がクエリに定義された値より狭い場合にルールが適用されます。
min-height	ブラウザの高さがクエリに定義された値より高い場合にルールが適用されます。
max-height	ブラウザの高さがクエリに定義された値より低い場合にルールが適用されます。
orientation=portrait	ブラウザの高さが、幅と同じかそれ以上の場合にルールが適用されます。
orientation=landscape	ブラウザの幅の値が、高さよりも大きい場合にルールが適用されます。

*-device-width に基づくクエリを作成することもできますが、この方法は使用しないことを強くおすすめします。
前出の方法とこの方法の間には、わずかではあるものの極めて重要な違いがあります。min-width はブラウザ ウィンドウのサイズに基づきますが、min-device-width は画面のサイズに基づいています。一部のブラウザ（古い Android ブラウザを含む）ではデバイスの幅が正しく通知されず、画面の幅が、予期されるビューポートの幅ではなくデバイス ピクセルで通知される場合があります。
さらに、*-device-width を使用すると、ウィンドウのサイズ変更が可能なパソコンや他のデバイスでコンテンツが対応できないことがあります。これは、クエリがブラウザ ウィンドウのサイズではなく実際のデバイスのサイズに基づいているためです。

相対的な単位を使用する

レスポンシブ デザインを支える主なコンセプトとして、固定幅のレイアウトとは対照的な流動性と比例性が挙げられます。サイズに相対的な単位を使用すると、レイアウトをシンプルにできるほか、誤ってビューポートに収まらないコンポーネントを作成することを防止できます。
たとえば、トップレベルの div に width: 100% と設定すれば、その div の幅は確実にビューポートの幅になるため、ビューポートより大きすぎる（または小さすぎる）ということは生じません。この div は、幅が 320px の iPhone、342px の BlackBerry Z10、360px の Nexus 5 のどの端末でも適切に表示されます。
また、相対的な単位を使用することで、ブラウザがページに横スクロールバーを追加することなく、ユーザーのズームレベルに基づいてコンテンツを表示できます。

div.fullWidth {
  width: 100%;
}

優先順は以下に準ずる

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/title.css">
<link rel="stylesheet" type="text/css" href="css/titledeco.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/color.css">
<link rel="stylesheet" type="text/css" href="css/totop.css">
<link rel="stylesheet" type="text/css" href="css/inqtable.css">
<link rel="stylesheet" type="text/css" href="css/bnr.css">
<link rel="stylesheet" type="text/css" href="css/slide.css">
<link rel="stylesheet" type="text/css" href="css/table.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/topNav.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/list.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
===============================================*/
/*================================================
 *  グローバルナビゲーション style.cssで設定
 ================================================
@media print, screen and (min-width:768px) {
	nav {
		background:#9b0f0f;
		border-bottom:5px solid #710000;
		box-shadow:0 1px 3px #999;
		z-index:3;
	}

	/* 1段目 
	nav ul {
		margin:0;
		padding:0;
	}

	nav ul li {
		position:relative;
		width:17%;
		float:left;
		margin:0;
		padding:0;
		text-align:center;
		list-style:none;
	}

	nav ul li:first-child {
		width:15%;
	}

	nav ul li a {
		display:block;
		margin:0;
		padding:16px 0;
		background:#9b0f0f;
		color:#fff;
		font-size:14px;
		font-weight:bold;
		line-height:1;
		text-decoration:none;
	}

	nav ul > li:hover > a {
		color:#fff;
		background:#710000;
	}

	nav ul .subnav > a:after {
		position:absolute;
		content:"";
		top:20px;
		width:0;
		height:0;
		margin-left:10px;
		border:5px solid transparent;
		border-top-color:#fff;
	}

	nav ul .subnav .subnav > a:after {
		content:"";
		border:none;
	}

	/* 2段目 
	nav ul li ul {
		list-style:none;
		position:absolute;
		z-index:3;
		top:100%;
		left:0;
		width:100%;
		margin:0;
		padding:0;
	}

	nav ul li ul li {
		overflow:hidden;
		width:150%;
		height:0;
		color:#fff;
		transition:.2s;
	}

	nav ul li ul li:first-child {
		width:150%;
	}

	nav ul li ul li a {
		padding:13px 15px;
		text-align:left;
		background:#7c0c0c;
		font-weight:normal;
	}

	nav ul li:hover > ul > li {
		overflow:visible;
		height:40px;
		border-bottom:1px solid #8c0e0e;
	}

	nav ul li:hover ul li:last-child {
		border-bottom:none;
	}

	nav ul li:last-child ul {
		left:-50%;
	}

	nav ul li ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:-20px;
		width:0;
		height:0;
		border:5px solid transparent;
		border-left-color:#fff;
	}

	nav ul li:last-child ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:200%;
		margin-left:-20px;
		border:5px solid transparent;
		border-right-color:#fff;
	}

	/* 3段目 
	nav ul li ul li ul {
		top:0;
		left:100%;
	}

	nav ul li ul li ul li {
		width:100%;
	}

	nav ul li ul li ul li:first-child {
		width:100%;
	}

	nav ul li ul li:hover ul li {
		border-bottom:1px solid #6d0c0c;
	}

	nav ul li:last-child ul li ul {
		left:-100%;
	}

	nav ul li ul li ul li a {
		background:#590000;
	}

	nav ul li ul li ul li a:hover {
		background:#420404;
	}

	.gnav {
		display:block !important;
	}

	#spMenu {
		display:none;
	}

	.fixed {
		position:fixed;
		top:0;
		left:0;
	}
}



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

 @media screen and (max-width:979px) {
  /*================================================
 *  一般・共通設定
 ================================================*/
	#inner {
		width:100%;
	}

	#contents {/* シャープでなくドットだと反応しなくなる？*/
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}

	footer {
		width:100%;
	}
		 header img {
width:95%;
margin-left:auto;
margin-right:auto;
}
}

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



/*===============================================
大型タブレット= 画面の横幅が959px以上（または960px）@media screen and (min-width: 959px){｝
===============================================*/


/*===============================================
小型タブレット／スマートフォン向けデザイン=画面の横幅が767pxまで
===============================================*/
@media screen and (max-width: 767px){
/*================================================
 *  一般・共通設定
 ================================================*/
 	.lock {
	overflow:hidden;
	/*height:100%;*/
	}
/*=======*  ヘッダー　オリジナルでは(max-width:779px) 変更しても大丈夫？========*/
 	header {
z-index:2;
box-sizing:border-box;
position:fixed;
top:0;
left:0;
width:100%;
padding:15px 10px;

	}

	header logo {
font-size:50%;
margin-bottom:0;
    }  
    
	 header img {
	 margin-top:10px;/*アイコンが重なるため;*/
	width:95%;
}

	.summary {
position:relative;
top:auto;
right:auto;
margin-top:15px;
padding:10px;
	}

	#main {
	float:none;
	width:100%;
	}
	
	
	
	#onepage {
	float:none;
	width:100%;
	}

	#sub {
	float:none;
	width:100%;
	}
/*=======*  nav========*/
	nav {
		background:#000;
	}
	nav ul {
		margin:0;
		padding:0;
		}

	nav .inner > ul {
		z-index:2;
		overflow:auto;
		position:fixed;
		top:53px;
		right:0;
		width:100%;
		height:88%;
		height:-webkit-calc(100% - 53px);
		height:calc(100% - 53px);
	}
	nav li {
		position:relative;
		width:100%;
		float:none;
		margin:0;
		text-align:left;
		list-style:none;
		border-bottom:1px solid #fff;
		background:#9b0f0f;/*=???=*/
	}

	nav li:first-child {
		border-top:0;
	}
	nav li:last-child {
		border-bottom:0;
	}

	nav li a {
		display:block;
		padding:10px 30px;
		color:#fff;
		text-decoration:none;
		background:navy;
	}
	nav li a:hover {
		color:#fff;
		background:blue;
	}
	nav ul ul {
		display:none;
		position:relative;
	}
	nav li li a {
		box-sizing:border-box;
		width:100%;
		padding:10px 30px 10px 50px;
		text-align:left;
	}

	nav li li li a {
		padding:10px 30px 10px 70px;
	}

	.subnav > a:before {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-5px;
		background:#f1f1f1;
	}
	.subnav > a:after {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-10px;
		background:yellow;
	}
	.subnav a:hover:after {
	  background:pink;
	}

	.active > a:before {
		margin-top:0;
	}
	.active > a:after {
		margin-top:5px;
	}

	.gnav {
		display:none;
	}

	#spMenu {
		display:block;
		z-index:2;
		position:fixed;
		top:10px;
		left:10px;/*アイコンの位置　デフォルトright:10px*/
	}
	#spMenu:hover {
		cursor:pointer;
	}

	#navBtn {
		display:inline-block;
		position:relative;
		width:40px;/*アイコンのサイズ　デフォルト30px*/
		height:30px;/*アイコンのサイズ　デフォルト30px*/
		border-radius:5%;
		background:navy;
	}
	#navBtnIcon {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:14px;
		height:2px;
		margin:-1px 0 0 -7px;
		background:#f1f1f1;
		transition:.2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display:block;
		content:'';
		position:absolute;
		top:50%;
		left:0;
		width:14px;
		height:2px;
		background:#fff;
		transition:0.5s;
	}
	#navBtnIcon:before {
		margin-top:-6px;
	}
	#navBtnIcon:after {
		margin-top:4px;
	}
	#navBtn .close {
		background:transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top:0;
	}
	#navBtn .close:before {
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	}
	#navBtn .close:after {
		transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
	}
*/	
/*================================================
 *  クラス
 ================================================*/
 .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;
    }
   
    /* トップナビ 2*/
    .topNavi2 {
        margin-right:0;
    }

    .topNaviColumn2 {
        display:block;
        box-sizing:border-box;
        width:48%;
        float:left;
        margin-right:1%;
        margin-left:1%;
        margin-bottom:10px;
    }
    
    /* トップナビ 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%;
}


#label img{margin-bottom:10px;
width:10px;
 }

img#label {margin-bottom:10px;
width:10px;
 }

}
 /*================================================
 *  ナビ　については課題ありnav.cssにて調整
 ================================================*/

 /* これを入れることで上段のロゴがセンターに
@media screen and (max-width:779px) {

    header {
        width:100%;
    }

    header logo {        font-size:50%;
        margin-bottom:0;
    }  
    header img {
    width:95%;
}
    
      }*/



/*===============================================
スマートフォン 横(ランドスケープ) =画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
/*==========================================
 *  テーブル
 ==========================================*/
 	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 {
	 margin-left:-10px;
width:100%;
}

/*================================================
 *  バナー
 ================================================*/
/*================================================
 *  メールフォーム／inqtable
 ================================================*/
.mailform { /* これないけど？ */
	width:100%;
	margin: 0 auto;
}


/*================================================
 *  ヘッダー
 ================================================*/
/*================================================
 *  一般・共通設定　common
 ================================================*/
 /*================================================
 *  トップナビ
 ================================================*/

}


/*===============================================
スマートフォン 縦(ポートレート)=画面の横幅が480pxまで
===============================================*/
@media screen and (max-width:480px){

	 header img {width:100%;
	 margin-top:30px;/*アイコンが重なるため;*/



/*==============================================
 *  テーブル
 ==============================================*/
   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;
}
/*================================================
 *  ヘッダー
 ================================================*/
 /*================================================
 *  フッター
 ================================================*/
 /*================================================
 *  一般・共通設定　common
 ================================================*/
  /*================================================
 *  トップナビ
 ================================================*/
 /*================================================
 *  スライドショー
 ================================================*/
 .slide {
display: none;
}

}