@charset "UTF-8";
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓メニューの内容をすべて表示している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：listの左側の領域を表示する際の設定
// 備 考：グリッド領域として「list-left」を使用
***********************************************/
#list-left{
	/*IEでのグリッド設定*/
	-ms-grid-column:1;
	-ms-grid-row:4;
	/*グリッド領域を使用できる場合*/
	grid-area:list-left;
	/*上側の枠線を設定*/
	border-top:1px solid grey;
	/*背景色*/
	background-color:rgb(41,56,85);
	/*下側の枠線を設定*/
	border-bottom:1px solid grey;
}

/***********************************************
// 概 要：listの右側の領域を表示する際の設定
// 備 考：グリッド領域として「list-right」を使用
***********************************************/
#list-right{
	/*IEでのグリッド設定*/
	-ms-grid-column:3;
	-ms-grid-row:4;
	/*グリッド領域を使用できる場合*/
	grid-area:list-right;
	/*上側の枠線を設定*/
	border-top:1px solid grey;
	/*背景色*/
	background-color:rgb(41,56,85);
	/*下側の枠線を設定*/
	border-bottom:1px solid grey;
}

/***********************************************
// 概 要：list部分全体の領域を表示する際の設定
// 備 考：グリッド領域として「list」を使用
***********************************************/
#list{
	/*IEでのグリッド設定*/
	-ms-grid-column:2;
	-ms-grid-row:4;
	/*グリッド領域を使用できる場合*/
	grid-area:list;
	/*表示幅*/
	width:100%;
	/*上側の枠線を設定*/
	border-top:1px solid grey;
	/*背景色*/
	background-color:rgb(41,56,85);
	/*下側の枠線を設定*/
	border-bottom:1px solid grey;	
}

/***********************************************
// 概 要：リストの先頭につける記号を削除
// 備 考：
***********************************************/
#list ul li{
	list-style-type:none;
}

/***********************************************
// 概 要：listが持つリンクの設定
// 備 考：「#list a」「#list a:visited」が対象
***********************************************/
#list a{
	/*リンクの下線を非表示*/
	text-decoration:none;
	color:white;
}
/*リンク先に移動後のリンク名の表示色*/
#list a:visited{
	color:white;
}

/***********************************************
// 概 要：listの配置設定
// 備 考：製品情報リスト、会社情報リスト、その他リストの3つに同じ設定を行う
***********************************************/
#productlist,
#companylist,
#otherlist{
	/*配置位置の変更を可能にする*/
	position:relative;
	/*リスト部分を横に並べる*/
	display: inline-block;
	/*配置位置の上端を揃える*/
	vertical-align: top;
	width:32%;
	/*配置を左寄せにする*/
	float:left;
}

/***********************************************
// 概 要：listの各項目と他の要素との間の余白を設定
// 備 考：
***********************************************/
#productlist ul li,
#companylist ul li,
#otherlist ul li{
	margin-bottom:10px;
}

/***********************************************
// 概 要：listの文字サイズを設定
// 備 考：製品情報リスト・会社情報リストは最初の項目のみ、その他リストは全ての文字サイズを変更している
***********************************************/
#productlist ul li:first-child,
#companylist ul li:first-child,
#otherlist ul li{
	/*文字サイズ*/
	font-size:20px;
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑メニューの内容をすべて表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓footer(サイト情報　個人情報保護方針等)を表示している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：footerの左側の領域を表示する際の設定
// 備 考：グリッド領域として「footer-left」を使用
***********************************************/
#footer-left{
	/*IEでのグリッド設定*/
	-ms-grid-column:1;
	-ms-grid-row:5;
	/*グリッド領域を使用できる場合*/
	grid-area:footer-left;
	/*背景色*/
	background-color:rgb(41,56,85);
}

/***********************************************
// 概 要：footerの右側の領域を表示する際の設定
// 備 考：グリッド領域として「footer-right」を使用
***********************************************/
#footer-right{
	/*IEでのグリッド設定*/
	-ms-grid-column:3;
	-ms-grid-row:5;
	/*グリッド領域を使用できる場合*/
	grid-area:footer-right;
	/*背景色*/
	background-color:rgb(41,56,85);
}

/***********************************************
// 概 要：footer表示場所全体の設定
// 備 考：グリッド領域として「footer」を使用
***********************************************/
#footer{
	/*IEでのグリッド設定*/
	-ms-grid-column:2;
	-ms-grid-row:5;
	/*グリッド領域を使用できる場合*/
	grid-area:footer;
	/*幅の設定*/
	width:100%;
	/*背景色*/
	background-color:rgb(41,56,85);
}

/***********************************************
// 概 要：個人情報保護保護方針・サイトマップを表示する際の設定
// 備 考：「#footer span」「#footer span a」「#footer span a:hover」が該当
***********************************************/
#footer span{
	/*文字色*/
	color:white;
}

/*リンクの表示設定*/
#footer span a{
	color:white;
	text-decoration: none;
}

/*リンクに下線を表示する*/
#footer span a:hover{	
	text-decoration: underline;
}

/***********************************************
// 概 要：Copyright部分を表示する際の設定
// 備 考：
***********************************************/
#footer div div{
	color:white;
	float:right;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑footer(サイト情報　個人情報保護方針等)を表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓これ以下の部分はフッターの中でもリスト表示部分の動きを定める部分である↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：webブラウザ幅が1300px以下の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:1300px){
	/*表示幅の設定*/
	#productlist,
	#companylist,
	#otherlist{
		width:300px;
	}
	
}

/***********************************************
// 概 要：webブラウザ幅が749px以下の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:749px){
	/*IEでのグリッド設定*/
	#list{
		-ms-grid-column:1;
		-ms-grid-row:4;
		-ms-grid-column-span:2;
	}
	/*表示幅の設定*/
	#productlist,
	#companylist,
	#otherlist{
		left:-35px;
	}
	/*IEでのグリッド設定*/
	#footer{
		-ms-grid-column:1;
		-ms-grid-row:5;
		-ms-grid-column-span:2;
	}
}