@charset "utf-8";

/* base上書き ---------------------------------------------------*/
footer{border-top:1px solid #b4b4b4;}

/* 共通 ---------------------------------------------------*/
#main{}

/* スライダー ---------------------------------------------------*/
.slider{width:70%;height:auto;padding:52% 0px 0px;margin:0px auto;position:relative;z-index:1;background-color:#FFF;}

.itemSample{position:absolute;left:0px;top:0px;width:100%;height:auto;background-color:#FFF;z-index:1;}
.itemSample img{width:100%;height:auto;display:block;}

.itemGroup{position:absolute;left:0px;top:0px;width:1380px;display:none;z-index:2;}
.itemGroup ul{width:100%;}
.itemGroup ul:after{content:'';display:block;width:100%;height:0px;clear:both;}
.itemGroup li{width:1380px;height:auto;background-color:#FFF;}
.itemGroup img{width:100%;height:auto;display:block;}

.slideClone img{width:100%;height:auto;display:block;}
.slideClone1{width:1380px;height:auto;position:absolute;top:0px;right:100%;}
.slideClone2{width:1380px;height:auto;position:absolute;top:0px;left:100%;}

/* スクリプト有効時 */
.scriptOn .itemGroup{display:block;}
.scriptOn .itemGroup li{display:block;float:left;}
.scriptOn .itemSample{visibility:hidden;}

.scriptOn .privilegeMarker{display:block;width:100%;height:10px;text-align:center;position:absolute;bottom:18px;left:0px;z-index:3;}
/* 特典 */
.privilegeBox{position:absolute;top:95px;width:322px;height:400px;background:url(../img/privilegeBox.png) repeat center top;z-index:3;}

.privilegeText{padding:30px;}
.privilegeText p{color:#000;font-size:16px;line-height:24px;}
.privilegeText p.notes{font-size:13px;line-height:24px;}

.privilegeMarker{display:none;text-align:center;}
.privilegeMarker ul{display:inline-block;margin:0px auto;}
.privilegeMarker li{display:inline-block;width:18px;height:18px;border:1px solid #565656;background-color:#FFF;border-radius:50%;margin:0px 5px; box-sizing:border-box; cursor:pointer;}

/* スライダー1 */
#visualSlider{position:relative; height:auto;overflow:hidden;margin:0px auto 1px;}
#visualSlider .liquidBox{position:relative;z-index:1;}
#visualSlider .itemSample,
#visualSlider .itemGroup{}

#mainvisual .privilegeBox{}
#mainvisual .privilegeMarker li{}
#mainvisual .privilegeMarker li.selected{border:2px solid #6cb132;}/*sliderpos*/
#mainvisual.scriptOn{height:auto;}

/* トピックス ---------------------------------------------------*/
#mainContent{padding-top: 40px;}
#mainContent h2 #contentTitle{width:100%; max-width:207px; height:auto;}
#mainContent h2 #contentBar{width:100%; height:auto; padding-bottom:60px;}
#mainContent h2 .sp{display:none;}

#mainContent h2{margin-bottom: 20px;}

#tppix{padding-bottom:100px;}
#tppix p{position:relative; padding:15px 0 15px 6em; font-size:16px; background:url(../img/border.png) repeat-x bottom left;}
#tppix p span{position:absolute; left:0;font-size:14px;font-weight: bold;}
#tppix .new:after{content:"New"; display:inline-block; padding:3px 10px 2px; line-height:1em; font-size:14px; color:#FFF; background:#4accc7;}

/* バナーエリア ---------------------------------------------------*/
#banner{padding:60px 0; background:#ffffff;}
#banner .Box{
	display:-webkit-box; 
	display:-ms-flexbox; 
	display: -webkit-flex;
		display:flex;
	-webkit-box-pack:justify; 
		-ms-flex-pack:justify; 
		-webkit-justify-content:space-between; 
		justify-content:space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;
}
#banner p{padding:10px 0;}
#banner p a{display:block; width:240px; height:70px; background:#FFF; opacity:1;
	o-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
}
#banner p a:hover{opacity:0.7;}
#banner p span{display:block; width:240px; height:70px; background:#FFF;}


@media screen and (max-width: 667px){
	
	/* スライダー ---------------------------------------------------*/
	.itemGroup ul{margin:0px;}
	.itemGroup li{margin:0;}
	#visualSlider{padding-bottom:35px; background:#FFF;}
	.privilegeMarker li{width:13px;height:13px;}
	.scriptOn .privilegeMarker{bottom:20px;}
	
	/* トピックス ---------------------------------------------------*/
	#mainContent{padding-top:20px;}
	#mainContent h2 #contentTitle{width:37%;}
	#mainContent h2 #contentBar-sp{width:100%; height:auto; padding-top:5px; padding-bottom:10px;}
	#mainContent h2 .pc{display:none;}
	#mainContent h2 .sp{display:block;}
	
	#mainContent h2{margin-bottom: 10px;}
	
	#tppix{padding-bottom:60px;}
	#tppix p{position:static; padding:15px 0 20px 0; font-size:12px;}
	#tppix p span{position:static; display:block; font-size:12px;}
	#tppix .new:after{font-size:12px;}
	
	/* バナーエリア ---------------------------------------------------*/
	#banner{padding:40px 0;}
	#banner .Box{
		display:-webkit-block; 
		display:-ms-block; 
		display: -webkit-block;
		display:block;
	}
	#banner p{padding:10px 0;}
	#banner p a,
	#banner p span{display:block; width:240px; height:70px; margin:0 auto; background:#FFF;}
	#banner p a:hover{opacity:1;}
}