@charset "UTF-8";

body,
html{
	/*webブラウザの使用領域の高さをすべて使用する*/
	height:100%;
}
body{
	/*表示領域に余白を作らない*/
	margin:0px;
	padding:0px;
	/*使用フォントを全ページで統一する*/
	font-family:"メイリオ","Meiryo";
}

/***********************************************
// 概 要：各グリッドの高さ・幅及びグリッド領域を設定する
// 備 考：高さ・幅の指定：「px」「auto」「vh」「fr」「%」で指定可能
         グリッド領域：任意の文字列で指定可能
***********************************************/
#container{
	/*最低限webブラウザの使用領域と同等の高さを取る*/
	min-height:100%;
	/*スクロールバーを非表示にする*/
	overflow:hidden;
	/*displayタイプをグリッドにする*/
	display:-ms-grid;
	display:-webkit-grid;
	display:grid;
	/*１行目の高さ、２行目の高さ・・・と指定する*/
	-ms-grid-rows:140px auto auto auto auto;
	-webkit-grid-rows:140px minmax(auto,50px) minmax(auto,100%) auto auto;
	grid-template-rows:140px minmax(auto,50px) minmax(auto,100%) auto auto;
	
	/*1列目の幅、2列目の幅・・・と指定する*/
	-ms-grid-columns: 1fr 4fr 1fr;
	-webkit-grid-columns: 1fr 4fr 1fr;
	grid-template-columns: 1fr 4fr 1fr;
	
	/*上で指定したグリッドに合わせてエリアに名前を付けることで、表示する場所を指定できる*/
	grid-template-areas:
		"header         header    header"
		"class          class     class"
		"contents-left  contents  contents-right"
		"list-left      list      list-right"
		"footer-left    footer    footer-right"
		;
}
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ヘッダーを調整している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：ヘッダー表示場所全体の設定
// 備 考：グリッド領域として「header」を使用
***********************************************/
#header{
	/*グリッド領域が使用できない場合*/
	-ms-grid-column:1;
	-ms-grid-row:1;
	-ms-grid-column-span:3;
	-webkit-grid-column:1;
	-webkit-grid-row:1;
	-webkit-grid-column-span:3;
	/*グリッド領域が使用できる場合*/
	grid-area:header;
	/*スクロールしても常に表示*/
	position:fixed;
	/*ヘッダーの幅と高さ*/
	width:100%;
	height:100px;
	/*ヘッダーの背景色*/
	background-color:white;
	/*最前面に表示する（ここの値が高いほど優先して表示される）*/
	z-index:9999;
}

/***********************************************
// 概 要：スクリプト実行不可時に表示する文章の設定
// 備 考：
***********************************************/
#header noscript>p{
	/*文字サイズ*/
	font-size:20px;
	/*文字配置を中央揃えにする*/
	text-align: center;
	/*下側の枠線をを設定*/
	border-bottom:10px solid black;
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ヘッダーを調整している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ロゴを表示している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：ロゴ表示場所設定
// 備 考：
***********************************************/
#logo{
	/*headerの表示領域の左上を基準として配置を行う*/
	position:absolute;
	/*webブラウザの左端から16.6%の位置に配置する*/
	left:16.6%;
	/*ロゴの上側の余白を設定*/
	padding-top:10px;
	/*他要素との間の余白を設定*/
	margin:auto;
}

/***********************************************
// 概 要：ロゴに使用する画像サイズの設定
// 備 考：
***********************************************/
#logo img{
	width:198px;
	height:50px;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ロゴを表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓メニューを表示している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：メニュー全体の設定
// 備 考：
***********************************************/
#menu{
	/*文字サイズ*/
	font-size:18px;
	/*表示する高さ*/
	height:60px;
	/*headerの表示領域の左上から50px分下に配置する*/
	top:50px;
	/*配置位置の変更を可能にする*/
	position:relative;
	/*メニュー帯の背景色*/
	background-color:rgb(41,56,85);
}

/***********************************************
// 概 要：メインメニュー全体の設定
// 備 考：「#menu ul li」「#menu ul li a」「#menu ul li:hover」が該当
***********************************************/
#menu ul li{
	/*メインメニューのボタンの幅・高さを指定する*/
	width:212px;
	height:58px;
	/*横並べ*/
	display: inline-block;
	/*文字の中央揃え*/
	text-align:center;
	/*メインメニューの背景色*/
	background-color:rgb(41,56,85);
	/*上側の枠線を設定*/
	border-top:1px solid rgb(41,56,85);
	/*webブラウザの左端から14.8%の位置に配置する*/
	left:14.8%;
	/*ボタンの右側の余白を設定*/
	padding-right:10px;
	/*サブメニューを表示する際の基準位置にする*/
	position:relative;
	/*リストの先頭につく記号を消す*/
	list-style-type: none;
}

#menu ul li a{
	/*メインメニューの文字を表示する高さ*/
	height:38px;
	/*メインメニューの文字色*/
	color:white;
	/*メインメニューの文字の下線を消す*/
	text-decoration: none;
	/*高さを指定できるようにする*/
	display:block;
	/*メインメニューの文字の上に余白を設定*/
	padding-top:19px;
}

#menu ul li:hover{
	/*背景色*/
	background-color:rgba(55,76,110,1.00);
}

/***********************************************
// 概 要：サブメニュー全体の設定
// 備 考：「#menu ul li ul」「#menu ul li:hover ul」「#menu ul li:first-child ul」「#menu ul li ul li」「#menu ul li ul li:hover」が該当
***********************************************/
#menu ul li ul{
	/*初期状態は非表示*/
	display:none;	
}
/*メインメニューにマウスカーソルが重なった時にサブメニューをどう表示するか*/

#menu ul li:hover ul{
	/*サブメニューの幅・高さ*/
	width:170px;
	height:531px;
	/*表示の優先度*/
	z-index:1;
	/*メニューボタンの背景色をDENCOMブルーに*/
	border:1px solid rgb(41,56,85);
	/*高さを指定できるようにする*/
	display:block;
	/*親要素（ここではメインメニューのこと）の左上を基準位置とする*/
	position:absolute;
}
#menu ul li:first-child ul{
	/*1番左側のメインメニューが持つサブメニュー表示用の高さ*/
	height:472px;
}
/*サブメニューの要素をどう表示するか*/
#menu ul li ul li{
	/*サブメニューの左側の余白を設定*/
	padding-left:18px;
	/*サブメニューの背景色*/
	background-color:rgb(41,56,85);
	/*サブメニューの幅*/
	width:113%;
	/*文字配置*/
	text-align: left;
	/*基準位置に対しての配置位置*/
	left:-40px;
}

#menu ul li ul li:hover{
	/*サブメニューにマウスカーソルを重ねた場合の背景色*/
	background-color:rgba(55,76,110,1.00);
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑メニューを表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

/***********************************************
// 概 要：コンテンツの余白設定
// 備 考：
***********************************************/
#contents{
	/*コンテンツの表示領域の下側に余白を入れる*/
	margin-bottom:30px;
}

/***********************************************
// 概 要：webブラウザの幅が3000px以上の場合の設定
// 備 考：
***********************************************/
@media screen and (min-width:3000px){
	/*比率を変更する*/
	#container{
		-ms-grid-columns: 1fr 2000px 1fr;
		-webkit-grid-columns: 1fr 2000px 1fr;
		grid-template-columns:1fr 2000px 1fr;
	}
}

/***********************************************
// 概 要：webブラウザの高さが3000px以上の場合の設定
// 備 考：
***********************************************/
@media screen and (min-height:3000px){
	/*比率を変更する*/
	#container{
		-ms-grid-rows:140px auto 100vh auto auto; 
		-webkit-grid-rows:140px auto 100vh auto auto; 
		grid-template-rows:140px auto 100vh auto auto; 
	}
}

/***********************************************
// 概 要：webブラウザの幅が1369px以上の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:1369px){
	/*ヘッダー表示方法の設定*/
	#header{
		/*高さを変更*/
		height:80px;
		/*下側の枠線をを設定*/
		border-bottom:30px solid rgb(41,56,85);
	}
	/*スクリプト実行不可時の設定*/
	#header noscript>p{
		/*下側の枠線を削除*/
		border-bottom:none;
	}
	/*ロゴの配置設定*/
	#logo{
		/*基準位置に対して左からの配置位置*/
		left:0%;
		/*文字を中央揃え*/
		text-align:center;
		/*中央に配置できるように設定を変える*/
		position:relative;
	}	
}

/***********************************************
// 概 要：webブラウザの幅が749px以上の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:749px){
	/*グリッド領域を変更する*/
	#container{
		grid-template-areas:
			"header        header      header"
			"class         class       class"
			"contents      contents    contents"
			"list          list        list-right"
			"footer        footer      footer-right"
		;
	}
	/*スクリプトを実行できない場合の表示文に対する装飾*/
	#header noscript>p{
		/*文字サイズ*/
		font-size:15px;
	}
}