a:hover.main {
	color: #F60;
}

a:hover img.imgborder{
opacity:0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

/* --- ボックス1 --- */
div.box1 {
	width: 510px;
	font-size: 100%;
	line-height: 1.4;
	border-width: 2px;
	border-style: solid;
	border-color: #444;
	padding: 10px;
	margin-top: 10px;
}

/* --- 画像に枠を表示 --- */
img.waku01 {
	border: 1px solid #B8B8B8;
	padding: 3px;
}

/* --- コンテナの設定1 --- */
.flex-c1 {
	display: flex;
	flex-wrap: wrap;
}

/* --- アイテムの設定1 ヨコ5列 矢印付き --- */
/* --- テキスト左右左寄せ、上下中央寄せ --- */
.flex-i1{
	background-image : url(arrow03.gif);
	background-repeat: no-repeat;
	background-position: left center;
	background-color: #FEEBCB;
	justify-items: left;
	align-content: center;
	width: calc((90% - 100px) / 5);
	border: 1px solid #B8B8B8;
	margin: 5px;
	padding: 10px;
	padding-left: 16px;
}

/* --- アイテムの設定2 ヨコ5列 画像付き --- */
/* --- 画像の下に名前、background-positionで矢印の位置調整 --- */
.flex-i2{
	background-image : url(arrow03.gif);
	background-repeat: no-repeat;
	background-position: left bottom 1em;
	background-color: #FEEBCB;
	text-align: left;
	width: calc((90% - 100px) / 5);
	border: 1px solid #B8B8B8;
	margin: 5px;
	padding: 10px;
	padding-left: 16px;
}

/* --- アイテムの設定3 ヨコ2列 --- */
/* --- コンテナ中身を中央寄せ フォント小さめ 余白上下20px左右10px --- */
.flex-i3{
	background-color: #FEEBCB;
	text-align: center;
	font-size: 80%;
	width: calc((100% - 40px) / 2);
	border: 1px solid #B8B8B8;
	margin: 5px;
	padding: 20px 10px;
}

/* --- アイテムの設定4 ヨコ4列 padding:なし --- */
/* --- コンテナ中身を中央寄せ フォント小さめ 余白上下20px左右10px --- */
.flex-i4{
	text-align: center;
	font-size: 80%;
	width: calc((96% - 40px) / 4);
	margin: 2px 2px 14px;
	padding: 0 3px;
}