@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 h1{
	padding-left:20px;
	border-left:5px solid rgb(41,56,85);
}

/***********************************************
// 概 要：章タイトルを表示する際の設定
// 備 考：
***********************************************/
#contents h2{
	max-width:500px;
	border-bottom:5px solid rgb(40,40,40);
}
/***********************************************
// 概 要：コンテンツで使用する画像サイズの設定
// 備 考：
***********************************************/
#contents img{
	width:100%;
	height:auto;
	max-width:600px;
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑コンテンツを表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

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