/*-------------------------------------------
carousel
-------------------------------------------*/
/* wrap
---------------------------------*/
#wrap{
	overflow-x: hidden;
	min-width:1200px;
}

/* carouselBlock
---------------------------------*/
#carouselBlock{
	background:#f4f4f4;
	margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
}

@media screen and (max-width:1200px){
	#carouselBlock{
		margin-left: calc(((1200px - 100%) / 2) * -1);
		margin-right: calc(((1200px - 100%) / 2) * -1);
	}

}


/* mainVisual
---------------------------------*/
#mainVisual{
	width:1200px;
	margin:0 auto;
}

/* mainVisualInner
---------------------------------*/
#mainVisualInner{
	position:relative;
	font-size:0px;
	width:850px;
}

#mainVisualInner img{
	width:850px;
}

#mainVisualInner .jCarouselNavi{
	box-sizing:border-box;
	width:220px;
	height:360px;
	background:#f0f0f0;
	padding:25px 15px 20px;
	position:absolute;
	left:850px;
	top:0;
}

#mainVisualInner .jCarouselNavi a{
	box-sizing:border-box;
	display:block;
	width:190px;
	height:50px;
	margin:10px 0;
	padding:0px;
	background-position:center center;
	background-repeat:no-repeat;
	border:2px solid #fff;
	cursor:pointer;
}

#mainVisualInner .jCarouselNavi a.selected{
	border:2px solid #fe6253
}

#mainVisualInner .carouselArrowL,
#mainVisualInner .carouselArrowR{
	position:absolute;
	cursor:pointer;
}

#mainVisualInner .carouselArrowL{
	left:940px;
	top:0;
	background: url(/sites/default/files/inline-images/common/images/co_carouselMainArrowT.gif) no-repeat left top;
	width:43px;
	height:21px;
}

#mainVisualInner .carouselArrowR{
	right:-130px;
	bottom:0;
	background: url(/sites/default/files/inline-images/common/images/co_carouselMainArrowB.gif) no-repeat left top;
	width:43px;
	height:21px;
}

@media screen and (max-width:640px){
	/* wrap
	---------------------------------*/
	#wrap{
		min-width:320px;
	}
	
	/* mainVisual
	---------------------------------*/
	#mainVisual{
		width:100%;
		margin:0;
	}
	
	/* mainVisualInner
	---------------------------------*/
	#mainVisualInner{
		position:relative;
		font-size:0px;
		width:100%;
	}
	#carouselBlock{
		margin-left: 0;
		margin-right: 0;
	}
	
	#mainVisualInner img{
		width:100%;
	}

	#mainVisualInner .jCarouselNavi{
		display:none;
	}
	
	#mainVisualInner .jCarouselNavi a{
		box-sizing:border-box;
		display:block;
		width:190px;
		height:50px;
		margin:10px 0;
		padding:0px;
		background-position:center center;
		background-repeat:no-repeat;
		border:2px solid #fff;
		cursor:pointer;
	}
	
	#mainVisualInner .jCarouselNavi a.selected{
		border:2px solid #fe6253
	}
	
	#mainVisualInner .carouselArrowL,
	#mainVisualInner .carouselArrowR{
		top:40%;
	}
	
	#mainVisualInner .carouselArrowL{
		background:url(/sites/default/files/inline-images/common/images/co_carouselMainArrowL.png) no-repeat left center;
		background-size:21px 43px;
		-webkit-background-size:21px 43px;
		width:30px;
		height:43px;
		left:0;
	}
	
	#mainVisualInner .carouselArrowR{
		background:url(/sites/default/files/inline-images/common/images/co_carouselMainArrowR.png) no-repeat right center;
		background-size:21px 43px;
		-webkit-background-size:21px 43px;
		width:30px;
		height:43px;
		right:0;
	}
	
	.ie8 #mainVisualInner .carouselArrowL{
		background:url(/sites/default/files/inline-images/common/images/co_carouselMainArrowL_ie8.png) no-repeat left center;
		width:20px;
		height:48px;
		left:0;
	}
	
	.ie8 #mainVisualInner .carouselArrowR{
		background:url(/sites/default/files/inline-images/common/images/co_carouselMainArrowR_ie8.png) no-repeat right center;
		width:20px;
		height:48px;
		right:0;
	}
}

/*  サイドバナー  */

.sideBannerWrap{
		margin-bottom: 20px;
    padding: 10px;
    border: #dedede 2px solid;
    height: 217px;
    padding-bottom: 0px;
}
#asideContents aside.typeL{ height:207px; padding-bottom:0px;}
#sideBanner{ 
	display: block;
	width: 198px;
	height: 200px;
	position: relative;
	background: url(/sites/default/files/inline-images/common/images/sideBannerBack.jpg) left top no-repeat;
	padding-top: 37px;
	overflow: hidden;  
}
#sideBanner_sp{ display:none}
#sideBanner ul.jCarousel{ width:151px;}
#sideBanner ul.jCarousel li{ }
#sideBanner .jCarouselWrapper0,
#sideBanner .jCarouselWrapper1{ width:151px!important; min-height:168px;  overflow:visible!important;padding-left:23px!important;}
#sideBanner .jCarouselWrapper0 ul.jCarousel,
#sideBanner .jCarouselWrapper1 ul.jCarousel{ padding-left:4px!important; }
#sideBanner .jCarouselWrapper0 ul.jCarousel li,
#sideBanner .jCarouselWrapper1 ul.jCarousel li{width:151px!important;}

#sideBanner .jCarouselNavi{
	padding-top: 3px;
	bottom: -6px;
	left: 45px;
	position: absolute;
}
#sideBanner .jCarouselNavi a{display:inline-block;width:8px;height:8px;margin:0px 2px;padding:0px;background:url(/sites/default/files/inline-images/common/images/carouselSideNavi.png) left top no-repeat!important;border:0!important;cursor:pointer;	}
#sideBanner .jCarouselNavi a.selected{ background-image:url(/sites/default/files/inline-images/common/images/carouselSideNaviCurrent.png)!important}
#sideBanner .carouselArrowL,
#sideBanner .carouselArrowR{ 
	width:27px; 
	height:27px; 
	bottom:89px;
	position: absolute;
}
#sideBanner .carouselArrowL{ left:1px;  background-image:url(/sites/default/files/inline-images/common/images/carouselSideArrowL.png);}
#sideBanner .carouselArrowR{ right:1px; background-image:url(/sites/default/files/inline-images/common/images/carouselSideArrowR.png);}
@media screen and (min-width:940px){
	#asideContents aside.typeL{ width:198px;}
}
@media (max-width:700px){
	.sideBannerWrap{display: none;}
	#sideBanner{ display:none;}
	#sideBanner_sp{ display: block;padding:0 20px;}
}
