@charset "UTF-8";
/***********************************************
// 概 要：共通化したcssファイルを読み込む
// 備 考：
***********************************************/
@import url('../css/header.css');
@import url('../css/class.css');
@import url('../css/footer.css');
@import url("../css/hammenu.css");
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓コンテンツを表示している場所↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：contentsの左側の領域を表示する際の設定
// 備 考：グリッド領域として「contents-left」を使用
***********************************************/
#contents-left{
	-ms-grid-column:1;
	-ms-grid-row:3;
	grid-area:contents-left;
}

/***********************************************
// 概 要：contentsの右側の領域を表示する際の設定
// 備 考：グリッド領域として「contents-right」を使用
***********************************************/
#contents-right{
	-ms-grid-column:3;
	-ms-grid-row:3;
	grid-area:contents-right;
}

/***********************************************
// 概 要：contents部分全体の領域を表示する際の設定
// 備 考：グリッド領域として「contents」を使用
***********************************************/
#contents{
	-ms-grid-column:2;
	-ms-grid-row:3;
	grid-area:contents;
	position:relative;
	width:100%;
}

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

/***********************************************
// 概 要：リンクの装飾を設定
// 備 考：「#contents a」「#contents a:visited」「#contents a:hover」が該当
***********************************************/
#contents a,
#contents a:visited{
	text-decoration: none;
	color:black;
}
#contents a:hover{
	text-decoration: underline;
}

/***********************************************
// 概 要：ページタイトルを表示する際の設定
// 備 考：
***********************************************/
#contents h1{
	padding-left:20px;
	border-left:5px solid rgb(41,56,85);
}

/***********************************************
// 概 要：大枠でのまとまりに対する設定
// 備 考：「m_list」「m_list ul」「m_list ul li」「m_list p > a」が該当
***********************************************/
#contents .m_list{
	width:100%;
	display:inline-block;
}
#contents .m_list ul{
	border:2px solid black;
	width:100%;
	max-width:240px;
	height:240px;
	display:inline-block;
}
#contents .m_list ul li{
	width:100%;
	max-width:240px;
}
#contents .m_list p > a{
	color:red;
}

/***********************************************
// 概 要：会社情報・製品情報以外のまとまりに対する設定
// 備 考：「m_list .toppage」「m_list .toppage li」「m_list .toppage a」が該当
***********************************************/
#contents .m_list .toppage{
	border:none;
	margin-right:4px;
}
#contents .m_list .toppage li{
	width:100%;
	max-width:250px;
	margin-bottom:20px;
}
#contents .m_list .toppage a{
	position:relative;
	width:100%;
	max-width:240px;
	right:40px;
	border-left:5px solid rgb(41,56,85);
}

/***********************************************
// 概 要：会社情報のまとまりに対する設定
// 備 考：
***********************************************/
#contents .m_list .company{
	width:100%;
	max-width:240px;
	height:280px;
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑コンテンツを表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

/***********************************************
// 概 要：webブラウザ幅が749px以下の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:749px){
	/*IEでのグリッド設定*/
	#contents{
		-ms-grid-column:1;
		-ms-grid-row:3;
		-ms-grid-column-span:3;
	}
}

/***********************************************
// 概 要：webブラウザ幅が320px以下の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:320px){
	/*表示領域を設定*/
	#contents .m_list,
	#contents .company{
		width:90%;
	}
	#contents .m_list ul{
		height:250px;
	}
}