@charset "UTF-8";

/*中田商会 website styleguide css
-----------------------------------*/
html{
	min-width: 320px;
	font-size: 62.5%;	/*ほとんどのブラウザでフォントサイズは16pxなので62.5%は10px。ルート要素のフォントサイズ*/
}
body{
	margin: 0;
	line-height: 1.5;
	color: #4D4D4D;
	fort-size: 16px;	/*rem非サポートブラウザ用*/
	font-size: 1.6rem;	/*remサポートブラウザ用*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","MS Pゴシック",sans-serif;
	box-sizing : border-box;
}
#main{
	margin 0px auto;
}
/*-------------------見出し---------------------*/
h1{
	margin: 0.67em 0;
	font-size: 48px;
	font-size: 4.8rem;
}
h2{
	margin: 0.83em 0;
	font-size: 32px;
	font-size: 3.2rem;
}
h3{
	margin: 0.91em 0;
	font-size: 24px;
	font-size: 2.4rem;
}
h4{
	margin: 0.99em 0;
	font-size: 16px;
	font-size: 1.6rem;
}
h5{
	margin: 1.01em 0;
	font-size: 14px;
	font-size: 1.4rem;
}
h6{
	margin: 1.03em 0;
	font-size: 12px;
	font-size: 1.2rem;
}
/*---------------ボタン---------------------*/
#btnBlue{
	padding: 10px 100px;
	border: 1px #ffffff solid;
	border-radius: 45px;
	background: #3D21B1;
	background: -webkit-linear-gradient(left, #3D21B1, #99E8FF);
	background: -moz-linear-gradient(left, #3D21B1, #99E8FF);
	background: -o-linear-gradient(left, #3D21B1, #99E8FF);
	background: linear-gradient(to right, #3D21B1, #99E8FF);
	color: #ffffff;
	text-decoration: none;
}
#btnBlue:hover{
	background: #2C1B89;
	background: -webkit-linear-gradient(left, #2C1B89, #56D8D5);
	background: -moz-linear-gradient(left, #2C1B89, #56D8D5);
	background: -o-linear-gradient(left, #2C1B89, #56D8D5);
	background: linear-gradient(to right, #2C1B89, #56D8D5);
	color: #ffffff;
}
#btnGray{
	padding: 10px 100px;
	border: 1px #ffffff solid;
	border-radius: 45px;
	background: #afafaf;
	color: #ffffff;
	text-decoration: none;
}
#btnGray:hover{
	background: #333;
	color: #ffffff;
}
/*-------------太字----------------*/
.bold {
	font-weight: bold;
}

/*-------------------layout--------------------------*/
#wrapper{
	position: relative;
	margin: 0 10px;
}
/*--------navigation---------------*/
ul#globalNav{
	margin: auto;
	padding: 10em 0 0 0;
	background-color: rgba(255,255,255,0.5);
}
ul#globalNav li a{
	display: block;
	padding: 10px;			/*モバイルでタッチしやすいように幅をとる*/
	color: #4D4D4D;
	text-decoration: none;
	text-align: center;
}
/*---------footer---------------*/
footer{
	text-align: center;
	background: #4747C9;
	color: #fff;
	margin 0;
}
/*-----------footerMenu--------------*/
ul#footerMenu{
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}
ul#footerMenu li a{
	display: block;
	padding: 10px;			/*モバイルでタッチしやすいように幅をとる*/
	color: #fff;
	text-decoration: none;
}
/*----------clearfix------------*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}
/*-------------------layout---------------------------*/

/*-------------ヘッダー------------------*/
header{
	background: url(../img/pic_main.png) no-repeat right top;
	background-size: cover;
	width: 100%;
	margin-bottom: 30px;
	position: relative;
}
header h1#logo{
	position: absolute;
	padding: 5px 0px 0px 30px;
	margin: 0px;
}
ul#h_main {
	padding: auto;
}
ul#h_main li{
	display: block;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
ul#h_main img{
	padding: 5px;
	text-align: center;
	max-width: 76.9230%;
}

/*-------------システム概要-------------*/
#overView{
	text-align: center;
}
 p{
	padding: 20px 0px;
}
/*----------------機能------------------*/
#function{
	margin-bottom: 30px;
	text-align: center;
}
#function section{
	background: #fff;
	padding: 5px;
	margin: 10px;
}
#function .pic{
	margin: 5px;
	text-align: center;
}
/*--------------会社概要---------------*/
.company{
	background: url(../img/about_bk.jpg) no-repeat 0 bottom;
	text-align: center;
	margin: 0 auto;
}
.detail{
	margin: 0px 15px 120px;
	padding: 0px 0px 120px;
}
.company table{
	margin: auto;
	width: 100%;
}
.company table th{
	border-right: 1px #B5B5B6 solid;
	border-bottom: 1px #B5B5B6 solid;
	padding : 10px 50px;
	text-align: left;
	color: #4D4D4D;
}
.company table th#last{
	border-bottom: none;
}
.company table td{
	border-bottom: 1px #B5B5B6 solid;
	padding : 10px 10px 10px 30px;
	text-align: left;
}
.company table td#last{
	border-bottom: none;
}
/*--------------お問い合わせ------------*/
.contact{
	margin: 30px 0px;
	padding: 30px 10px;
	text-align: center;
	background: url(../img/contact_bk.jpg) repeat;
}
.contact p{
	text-align: left;
}
.formarea{
	text-align: left;
	margin: 20px;
}
form #button{
	text-align: center;
	margin: 20px auto;
}
form .container label{
	padding: 0;
	margin: 0;
}
form .container input{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 1.6em;
	background-color: #DCDDDD;
}
form .container textarea{
	width: 100%;
	background-color: #DCDDDD;
}
/*----------タイルレイアウト-------------*/
.item{
	background-color: rgba(255,255,255,0);
	padding: 0px;
	text-align: left;
	margin: 0px;
}

.item p{
	text-align: left;
	margin: 0;
	padding: 0;
}
/*----------------------------------------------------------*/
@media only screen and (min-width: 670px){
	#wrapper{
		margin: 0 20px;
	}
	/*navigation*/
	ul#globalNav{
		display: block !important;
		padding: 0 0 0 16.6666%;
	}
	ul#globalNav li{
		float: left;
		width: 20%;
		text-align: center;
	}
	ul#globalNav li:last-child{
		margin-right: 0;
	}
	/*-----header------*/
	.title_head{
		margin: 50px auto;
	}
	ul#h_main{
		display: block !important;
		margin: 0px 10% 0px 20%;
	}
	ul#h_main li{
		float: left;
		width: 47.0085%;
		display: block;
		padding: 30px 10px;
		text-decoration: none;
	}
	
	ul#h_main li:last-child{
		margin-right: 0;
	}
	
	/*-----footerMenu-----*/
	ul#footerMenu{
		display: block !important;
	}
	ul#footerMenu li{
		float: left;
		width: 20%;
		text-align: center;
	}
	ul#footerMenu li:last-child{
		margin-right: 0;
	}
	ul#footerMenu li a{
		display: block;
		padding: 20px;
		text-decoration: none;
	}
	/*----function----*/
	#function section{
		float: left;
		width: 28.8888%;
		/*338px(4cols)÷1170px*/
		margin: 0 2.3931% 0 0;
		/*30px÷1170px*/
		padding: 10px;
	}
	#function section:last-child{
		margin-right: 0;
	}
	#function h3{
		padding-bottom: 0px;
		padding-left: 10px;
	}
	.detail{
		margin: 0px 4.2735%;
	}
	.contact p{
		padding: 10px 50px;
	}
}
@media(min-width: 960px){
	.container{
		width: 100%;
		margin: 0px;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		-ms-grid-rows: 1fr 1fr 1fr auto;
		grid-template-rows: 1fr 1fr 1fr auto;
		grid-gap: 0px;
	}
	.big-box1{			/*labelお名前*/
		grid-row: 1/2;
		-ms-grid-column-start:1;
		-ms-grid-column-span:1;
		-ms-grid-row:1;
		-ms-grid-row-span:1;
		grid-area: .big-box1;
	}
	.big-box2{			/*textお名前*/
		grid-row: 1/2;
		grid-column: 2/3;
		-ms-grid-column:3;
		-ms-grid-column-span:1;
		-ms-grid-row:1;
		-ms-grid-row-span:1;
		grid-area: .big-box2;
	}
	.big-box3{			/*labeふりがな*/
		grid-row: 1/2;
		grid-column: 3/4;
		-ms-grid-column:5;
		-ms-grid-column-span:1;
		-ms-grid-row:1;
		-ms-grid-row-span:1;
		grid-area: .big-box3;
	}
	.big-box4{			/*textふりがな*/
		grid-row: 1/2;
		grid-column: 4/5;
		-ms-grid-column:7;
		-ms-grid-column-span:1;
		-ms-grid-row:1;
		-ms-grid-row-span:1;
		grid-area: .big-box4;
	}
	.big-box5{			/*labelメアド*/
		grid-row: 2/3;
		grid-column: 1/2;
		-ms-grid-column:1;
		-ms-grid-column-span:1;
		-ms-grid-row:2;
		-ms-grid-row-span:1;
		grid-area: .big-box5;
	}
	.big-box6{			/*textメアド*/
		grid-row: 2/3;
		grid-column: 2/3;
		-ms-grid-column:3;
		-ms-grid-column-span:1;
		-ms-grid-row:2;
		-ms-grid-rwo-span:1;
		grid-area: .big-box6;
	}
	.big-box7{			/*label電話番号*/
		grid-row: 2/3;
		grid-column: 3/4;
		-ms-grid-column:5;
		-ms-grid-column-span:1;
		-ms-grid-row:2;
		-ms-grid-rwo-span:1;
		grid-area: .big-box7;
	}
	.big-box8{			/*text電話番号*/
		grid-row: 2/3;
		grid-column: 4/5;
		-ms-grid-column:7;
		-ms-grid-column-span:1;
		-ms-grid-row:2;
		-ms-grid-row-span:1;
		grid-area: .big-box8;
	}

	.big-box9{			/*label件名*/
		grid-row: 3/4;
		grid-column: 1/2;
		-ms-grid-column:1;
		-ms-grid-column-span:1;
		-ms-grid-row:3;
		-ms-grid-row-span:1;
		grid-area: .big-box9;
	}
	.big-box10{			/*text件名*/
		grid-row: 3/4;
		grid-column: 2/5;
		-ms-grid-column:3;
		-ms-grid-column-span:5;
		-ms-grid-row:3;
		-ms-grid-row-span:1;
		grid-area: .big-box10;
	}
	.big-box13{			/*labelお問い合わせ内容*/
		grid-row: 4/5;
		grid-column: 1/2;
		-ms-grid-column:1;
		-ms-grid-column-span:1;
		-ms-grid-row:4;
		-ms-grid-row-span:1;
		grid-area: .big-box9;
	}
	.big-box14{			/*textお問い合わせ内容*/
		grid-row: 4/5;
		grid-column: 2/5;
		-ms-grid-column:3;
		-ms-grid-column-span:5;
		-ms-grid-row:4;
		-ms-grid-row-span:1;
		grid-area: .big-box10;
	}
	.company table th{
		white-space: nowrap;
	}

/* ポップアップウインドウの設定 */
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 70vw;
  height: 55vw;
  overflow-y: scroll;
}
/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* 閉じるアイコン（右上） */
.icon-close{
  background: #000;
  color: #fff;
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}

/* 閉じるボタン */
.btn-close{
  background: #000;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 95%;
  text-align: center;
}

/* 開くボタン */
.btn-open{
  background: #fff;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 95%;
  text-align: center;
}

/* ポップアップの内容 */
.popup-content{
  margin: 40px auto 40px auto;
  width: 90%;
}



}
/*-----------------------------------------------------------------------*/
/*----------------------------------------------------------*/
@media only screen and (min-width: 75.625em) {
  #wrapper {
    /*width: 83.5714em;*/	/*1170px*/
    width: 73.125em; 
    margin: 0 auto;
  }
	footer{
   	 /*width: 83.5714em;*/	/*1170px*/
     width: 73.125em;
   	 margin: 0 auto;
  }
	/*----function----*/
	#function section{
		float: left;
		width: 29.0598%;
		/*340px(4cols)÷1170px*/
		margin: 0 2.3931% 0 0;
		/*30px÷1170px*/
		padding: 10px;
	}
	#function .pic{
		width: auto;
	}
	#function .pic img{
		max-width: 100%;
	}
	/*-----footerMenu-----*/
	ul#footerMenu{
		width:68.3760%;
		margin: 0px 15.8119%;
	}
}