@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{
	width:auto;
	border-bottom:2px solid rgba(184,245,229,1.00);
}

/***********************************************
// 概 要：コンテンツで使用する画像サイズの設定
// 備 考：
***********************************************/
#contents img{
	width:100%;
	height:auto;
	max-width:500px;
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑コンテンツを表示している場所↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

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

/***********************************************
// 概 要：webブラウザ幅が360px以下の場合の設定
// 備 考：
***********************************************/
@media screen and (max-width:360px){
	/*章タイトルを表示する際の設定*/
	#contents h2{
		max-width:210px;
	}
}