@charset "UTF-8";
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ページ全体に適用するスタイル↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：サーバー上にあるフォント名を指定して使用する
// 備 考：
***********************************************/

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

/***********************************************
// 概 要：ページ全体を使用する
// 備 考：
***********************************************/

body, html {
	height: 100%;
}

#container {
	/*最低限webブラウザの使用領域と同等の高さを取る*/
	min-height: 100%;
	/* background: linear-gradient(white,rgb(130, 166, 228)); */
	/* background: linear-gradient(rgb(244,247,252),rgb(130, 166, 228)); */
	/*スクロールバーを非表示にする*/
	overflow: hidden;
	/*displayタイプをグリッドにする*/
	display: -ms-grid;
	display: -webkit-grid;
	display: grid;
	/*１行目の高さ、２行目の高さ・・・と指定する*/
	-ms-grid-rows: auto auto;
	-webkit-grid-rows: auto auto;
	grid-template-rows: 80px auto ;
	
	/* grid-template-rows: auto auto; */
	/*1列目の幅、2列目の幅・・・と指定する*/
	-ms-grid-columns: 1fr 12fr 1fr;
	-webkit-grid-columns: 1fr 12fr 1fr;
	grid-template-columns: 1fr 12fr 1fr;
/* 	-ms-grid-columns: 1fr;
	-webkit-grid-columns: 1fr;
	grid-template-columns: 1fr; */

	/*上で指定したグリッドに合わせてエリアに名前を付けることで、表示する場所を指定できる*/

 grid-template-areas: 
 "header		header	header	" 
 "download-left download download-right	" ;

 
	/* grid-template-areas: "header" "specification"; */

}


@media screen and (max-width:991px) {
	/***********************************************
	// 概 要：グリッドの変更
	// 備 考：
	***********************************************/
	#container {
		-ms-grid-columns: 1fr;
		-webkit-grid-columns: 1fr;
		grid-template-columns: 1fr;
		/*上で指定したグリッドに合わせてエリアに名前を付けることで、表示する場所を指定できる*/
		/* 		grid-template-areas: "header" "home" "d-introtop" "d-introbot" "specification" "specification" "pamp" "download" "buy" "q-and-a" "columnspace" "contact";
 */
		grid-template-areas: "header" "download";
	}

}

/***********************************************
// 概 要：3001px以上のときの表示方法
// 備 考：
***********************************************/