@charset "utf-8";

.mb15 {
	margin-bottom: 15px;
}

/*紹介ボックスの設定
---------------------------------------------------------------------------*/
/*ボックス内の段落タグ設定*/
#main section.itemlist article p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
#main section.itemlist article figure img {
	width: 30%; /* 元々は40% */
	height: auto;
	margin-right: 5px;
}

/*紹介ボックスの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.itemlist article {
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ*/
	margin-bottom: 15px;	/*ボックス間のスペース*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#FFF, #e3e3e3);	/*同上*/
	background-image: linear-gradient(#FFF, #e3e3e3);			/*同上*/
	-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 0px 1px #FFF inset;	/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・距離・色を設定*/
	box-shadow: 0px 2px 5px #CCC, 0px 0px 0px 1px #FFF inset;			/*同上*/
	position: relative;
	overflow: hidden;
}
#main section.itemlist article a {
	padding: 10px;	/*ボックス内の余白*/
	text-decoration: none;
	display: block;
	overflow: hidden;
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
/*マウスオン時*/
#main section.itemlist article a:hover {
	background-color: #f6f1b2;	/*背景色*/
	color: #333;				/*文字色*/
}
/*ボックス内の段落タグ設定*/
#main section.itemlist article p {
	padding: 0px;
	margin-left: 220px;	/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.itemlist article figure img {
	float: left;			/*画像を左へ回り込み*/
	background-color: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 5px;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}
/*ボックス内のh4タグ設定*/
#main section.itemlist article h4 {
	padding: 2px 0px 2px 10px;	/*上、右、下、左側への余白*/
	font-size: 100%;
	border-bottom: 1px solid #CCC;	/*下側の線の幅、線種、色*/
	border-left: 3px solid #000;	/*左側の線の幅、線種、色*/
	margin-bottom: 0.5em;
	color: #000;	/*文字色*/
}
/*simpleタイプ（※ボックス内の部分的な箇所にリンクを設定する場合）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.itemlist.simple article {
	padding: 10px;
	overflow: hidden;
}
#main section.itemlist.simple article a {
	padding: 0px;
	display: inline;
	text-decoration: underline;
}
/*マウスオン時*/
#main section.itemlist.simple article a:hover {
	background-color: transparent;
	color: #f28900;
}
/*ボックス内の写真設定*/
#main section.itemlist.simple article figure a:hover img {
	background-color: #f6f1b2;
	border: 1px solid #999;
}

/*ここからPC以外の環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width:768px){

/*紹介ボックスの設定
---------------------------------------------------------------------------*/
/*ボックス内の段落タグ設定*/
#main section.itemlist article p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
#main section.itemlist article figure img {
	width: 30%; /* 元々は40% */
	height: auto;
	margin-right: 5px;
}
/*紹介ボックスの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
/*ボックス内の段落タグ設定*/
#main section.itemlist article p {
	padding: 0px;
	margin-left: 31%;	/*左の写真とのバランスをとって設定*/
}

}