/* ------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------- */
/*common.css　override*/
.gnavi {
	margin-bottom:0.5em;
}

.top-mainimage {
	padding:10vh 0 4vh;
	background-color:#F5E92A;
}
.mainimage-name {
	margin-bottom:2em;
	padding-bottom:2em;
	background-color:#F5E92A;
}


.item0 {
	width:50%;
	padding-top:4em;
	margin:0 auto;
}

.item0 img{
	width:100%;
}


.slideshow{
	position:relative;
	width:54%;
	margin:0 auto 3em;
}

.slideshow img{
	width:100%;
	
}
.photoframe {
	position:absolute;
	top:0;
	left:0;
	
	/*z-index:99;*//*ナビボタンがz-index20なので99だと上に表示されてしまう*/
	/*z-index10だとフレームもフェードしてしまう*/
	/*z-index:10;*/
	z-index:20;
	/*
	background-image: url(../item/images/photoframe.png); background-size: 100% auto;
	border:1px solid red;
	padding-top: 56.17%;*/
	/*border:1px solid blue;*/
}
.photoframe img{
	width:100%;
}

.bxslider {
	z-index:0;
}
.bxslider li {
	padding-top: 75%;	/*4:3の領域を確保*/
}
.bxslider li img{
	width:95%;
	position:absolute;
	top:0;
	left:0;
}
/*一瞬表示されるのを防ぐ方法2*/
/*CSSで最初から2番目以降を表示しないようにしておけばよい。*/
.bxslider li:not(:first-child){
	display: none;
}
.bxslider2 {
	text-align:center;
	font-size:1.2em;
	font-weight:600;
}

.bxslider2 li:not(:first-child){
	display: none;
}


@media screen and (max-width: 768px) {
	.top-mainimage{
		padding:5vh 0 4vh;
		margin-bottm:0;
	}
	
	.slideshow{
		position:relative;
		width:90%;
		margin:0 auto 1em;
	}
	.item0 {
		width:50%;
		padding-top:2em;
		margin:0 auto;
	}
	.bxslider{
		
	}

	.bxslider2 {
		
	}

}