/******************************************************************************/
/* リトリート・イン浦富メインページ iconmenu_style.css	                      */
/* Ver.1.0 2025.03.01                                                         */
/******************************************************************************/

/* 使用するプログラム一覧が横に4個以上並ぶ際の折り返し時に2段目のバランスが   */
/* 崩れるのを防止                                                             */


/********************************************************************************/
/* アイコンメニュー							                                    */
/*                                                                              */
/********************************************************************************/

.IconMenuWrapper {
	width:100%;
	text-align: center;

}

.IconMenu {
/*	width:90%; */
	display:inline-block;
	text-align: center;
/*	margin-left: 6vw; */
	margin: 0px 5vw 20px 5vw;

}

.IconMenu ul {
	list-style:none;
	padding-left:0;

}


.IconMenu li {

	float:left;
	width:20vw;							/* liの幅を指定(画像高265px+解説105px) */
	height:19vw;						/* liの高さを指定(画像高265px+解説105px) */
	display:inline-block;				/* アイコンメニュー li の横並び中央寄せ設定 */
	margin:12px 10px 12px 10px;						/* liとliの間隔設定 */
	box-shadow: 1px 0px 5px 1px #999;	/* li要素の周辺をぼかす 左右の位置 上下の位置 ぼかし 広がり 色; */
	position: relative;					/* サイト全体がリンク対象となるので必ず指定すること  */

}

.IconMenu li a img {					/* li内のリンクイメージの設定            */
	width:20vw;
	height:auto;

}


/* 解説欄のエリア設定 */
.exp_area {
	padding:0px 5px 3px 5px;
	height:auto;
	text-align: left;
	font-size:1.0vw;

}

@media screen and (max-width: 1280px) {

	.IconMenu li {
		width:19vw;
		heigh:20vw;
	}

	.IconMenu li a img {					/* li内のリンクイメージの設定            */
		width:19vw;
		height:auto;

	}

	.exp_area {
		font-size:0.78em;
	}


}


@media screen and (max-width: 900px) {

	.IconMenu li {
		width:25vw;
		height:26vw;
	}

	.IconMenu li a img {					/* li内のリンクイメージの設定            */
		width:25vw;
		height:auto;

	}

	.exp_area {
		font-size:0.8em;
	}


}


@media screen and (max-width: 600px) {

	.IconMenu {
		width:100%;
		text-align: center;
		margin-left: 3vw;

	}

	.IconMenu li {

		float:center;
		box-shadow: 1px 0 5px 1px #999;		/* li要素の周辺をぼかす */
		width:42vw;
		height:42vw;

	}

	.IconMenu li a img {
		width:42vw;
		height:auto;
	}

	.exp_area {
		padding:0px 5px 3px 5px;
		height:auto;
		text-align: left;
		font-size:0.8em;

	}


}


/* li要素の疑似要素設定 マウスが乗る前の設定 */
.IconMenu li a:before {
	content: "";
	display: block;
	background-color: rgba(0,0,0,0.5);		/* 黒の透明設定 rgba( R , G , B , 透明度)  */
	opacity: 0.0;							/* 透明設定  */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;

}

/* liにマウスが乗った時 黒の透明度を半分に設定 */
.IconMenu li a:hover:before {
	opacity: 0.2;

}

.exp_area span {
	font-weight:900;
	font-size:1.2em;
	color:#00489d;

}