@charset "UTF-8";

/* -----------------------------------------------

	#mainImageArea

----------------------------------------------- */

/* #mainImgArea
----------------------------------------------- */
div#mainImgArea {
	margin-top: 44px;
	margin-bottom: 14px;
	position: relative;
	height: 270px;
}
div#mainImageList div.mainImage .imageAreaLarge {
		display: block;
	}
	div#mainImageList div.mainImage .imageAreaSmall {
		display: none;
	}
div#mainImgArea.rotationBannerArea {
	margin-top: 0;
	margin-bottom: 39px;
	position: relative;
	height: 422px;
}
div#mainImageList {
	overflow: hidden;
}
div#mainImageList,
div#mainImageList div.mainImage {
	width: 1028px;
	height: 240px;
}
div#mainImgArea.rotationBannerArea div#mainImageList,
div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage {
	width: 754px;
	height: 422px;
}
div#mainImageList div.mainImage .imageArea {
	width: 767px;
	height: 240px;
	float: left;
}
div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage .imageArea {
	width: 754px;
	height: 422px;
}
div#mainImageList div.mainImage .bannerArea {
	width: 245px;
	height: 240px;
	float: right;
}
div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1  .imageArea .imageAreaLarge {
	background-image: url(../top_images/sli_days1.jpg);
    background-size: 754px 422px;
	width: 754px;
	height: 422px;
}
div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1all_in  .imageArea .imageAreaLarge {
	background-image: url(../top_images/sli_days1all_in.jpg);
    background-size: 754px 422px;
	width: 754px;
	height: 422px;
}
div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1plus  .imageArea .imageAreaLarge {
	background-image: url(../top_images/sli_days1plus.jpg);
    background-size: 754px 422px;
	width: 754px;
	height: 422px;
}


/* #mainImageListNav
----------------------------------------------- */
div#mainImageListNav {
	position: absolute;
	bottom:-28px;
	left: 0;
	width: 767px;
	text-align: center;
}
div#mainImageListNav ul{
	display: block;
	text-align: center;
}
div#mainImageListNav ul li {
	display: inline-block;
	margin: 0 13px;
	vertical-align: bottom;
}
div#mainImageListNav ul li a {
	display: block;
	width: 40px;
	height: 8px;
	overflow: hidden;
}
div#mainImageListNav ul li a span {
	display: block;
	border-top: solid 5px #C6D6E6;
	height: 1px;
	overflow: hidden;
}
div#mainImageListNav ul li a:hover span {
	border-top: solid 5px #0095D5;
}
/*- active -*/
div#mainImageListNav ul li.active a span {
	border-top: solid 5px #0095D5;
}
/*- miaTips（jquery.mainimageeffecter.js） -*/
p#miaTips {
	background: url(../top_images/mia_tips.png) no-repeat bottom center;
	padding: 0 0 8px;
	margin-top: -5px;
	width: 220px;
}
p#miaTips .miaTipsInner {
	margin: 0;
	padding: 4px;
	text-align: center;
	font-size:93%;
	background: #FFFFFF;
	border: solid 2px #16a7ea;
	border-bottom: none;
	display: block;
}
/* -----------------------------------------------

	各バナー設定
	@media screen 指定必須

----------------------------------------------- */
@media screen {
	div#mainImageList div.mainImage .imageArea img.mia_bnr_soudan {
		background: url(../top_images/mia_bnr_soudan_main.jpg) no-repeat;
		background-size: 100% auto;
	}
}




@media screen and (max-width: 1382px) {
	
	/* -----------------------------------------------
	
		#mainImageArea
	
	----------------------------------------------- */
	
	/* #mainImgArea
	----------------------------------------------- */
	div#mainImgArea {
		height: 200px;
		margin-top: 34px;
	}
	div#mainImgArea.rotationBannerArea,
	div#mainImgArea.rotationBannerArea div.mainImage {
		width: 774px;
		height: 242px;
	}
	div#mainImageList div.mainImage .imageAreaLarge {
		display: none;
	}
	div#mainImageList div.mainImage .imageAreaSmall {
		display: block;
	}
	div#mainImageList,
	div#mainImageList div.mainImage {
		width: 742px;
		height: 172px;
	}
	div#mainImageList div.mainImage .imageArea {
		width: 551px;
		height: 172px;
	}
	div#mainImageList div.mainImage .bannerArea {
		width: 176px;
		height: 172px;
	}
	div#mainImageList div.mainImage .imageArea img,
	div#mainImageList div.mainImage .bannerArea img{
		max-width: 100%;
		max-height: 100%;
		height: auto;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList,
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage,
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage .imageArea{
		width: 774px;
		height: 242px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1_large.jpg);
	    background-size: 774px 242px;
		width: 774px;
		height: 242px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1all_in  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1all_in_large.jpg);
	    background-size: 774px 242px;
		width: 774px;
		height: 242px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1plus  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1plus_large.jpg);
	    background-size: 774px 242px;
		width: 774px;
		height: 242px;
	}

	/* #mainImageListNav
	----------------------------------------------- */
	div#mainImageListNav {
		width: 551px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageListNav {
		width: 774px;
		bottom: -20px;
	}
	/*- active -*/
	
	/*- miaTips（jquery.mainimageeffecter.js） -*/
	p#miaTips {
		width: 220px;
	}	
}

@media screen and (max-width: 1096px) {
	
	/* -----------------------------------------------
	
		#mainImageArea
	
	----------------------------------------------- */
	
	/* #mainImgArea
	----------------------------------------------- */
	div#mainImgArea {
		height: 180px;
	}
	div#mainImgArea.rotationBannerArea,
	div#mainImgArea.rotationBannerArea div.mainImage {
		width: 674px;
		height: 211px;
	}
	div#mainImageList div.mainImage .imageAreaLarge {
		display: none;
	}
	div#mainImageList div.mainImage .imageAreaSmall {
		display: block;
	}
	div#mainImageList,
	div#mainImageList div.mainImage {
		width: 642px;
		height: 172px;
	}
	div#mainImageList div.mainImage .imageArea {
		width: 476px;
		height: 149px;
	}
	div#mainImageList div.mainImage .bannerArea {
		width: 152px;
		height: 149px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList,
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage,
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage .imageArea{
		width: 674px;
		height: 211px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1_large.jpg);
	    background-size: 674px 211px;
		width: 674px;
		height: 211px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1all_in  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1all_in_large.jpg);
	    background-size: 674px 211px;
		width: 674px;
		height: 211px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageList div.mainImage.days1plus  .imageArea .imageAreaSmall {
		background-image: url(../top_images/sli_days1plus_large.jpg);
	    background-size: 674px 211px;
		width: 674px;
		height: 211px;
	}

	/* #mainImageListNav
	----------------------------------------------- */
	div#mainImageListNav {
		width: 476px;
	}
	div#mainImgArea.rotationBannerArea div#mainImageListNav {
		width: 674px;
		bottom: -20px;
	}
	/*- miaTips（jquery.mainimageeffecter.js） -*/
	p#miaTips {
		width: 190px;
	}	
}