@charset "UTF-8";

/*-----------------------------------------------------------------------
COMMON
-----------------------------------------------------------------------*/

body { background:#f8f8f8; }
.slick-slider { background:#f8f8f8; }
	#pickupItem .slick-slider { background:#fff; }
	
#contents { background:#fff; margin:40px 0 0; padding-bottom:50px; }


h2 { text-align:center; font-size:18px; position:relative; }

.title_01 { margin:0 auto 50px; padding:0 100px; width:20em; font-weight:700; }
.title_01:before,
.title_01:after { content:""; position:absolute; top:50%; width:100px; height:1px; background:#000; }
.title_01:before { left:0; }
.title_01:after { right:0; }

	@media only screen and (max-width: 767px) {
		.title_01 { margin:0 auto 25px; padding:0 50px; width:18.5em; }
		#brand .title_01 {  }
		.title_01:before, .title_01:after {  }
		#pickupItem .title_01:before, #pickupItem .title_01:after { width:70px; }
	}


/*-----------------------------------------------------------------------
message
-----------------------------------------------------------------------*/

.message { background-image:url(../img/top/bg_message.png); background-repeat:no-repeat; background-size:cover; background-position:top center; padding:50px 0; margin:30px 0 90px; }
.message_inner { max-width:925px; margin:0 auto; text-align:center; padding:30px 50px; color:#454545; position:relative; z-index:1;background:url(../img/common/bg_grid.png) repeat top left; }
.message_inner:after { content:""; position:absolute; top:6px; left:6px; z-index:-1; width:calc(100% - 12px); height:calc(100% - 12px); background:#fff; }
.message_title { color:#c00210; font-weight:bold; font-size:24px; letter-spacing:0.1em; line-height:1.5; margin-bottom:10px; }


	@media only screen and (max-width: 1024px) {
		.message { margin:30px 0 50px; background-repeat:repeat; background-size:150% auto; }
		.message_inner { max-width:80%; }
	}
	@media only screen and (max-width: 767px) {
		.message { margin:20px 0 30px; }
		.message_inner { max-width:70%; padding:30px 25px; }
		.message_title { font-size:18px; }
	}




/*-----------------------------------------------------------------------
category
-----------------------------------------------------------------------*/

#category { margin:30px 0 100px; text-align:center; }
.category_inner { max-width:1150px; margin:0 auto; padding:0 20px; }

.category_list li { position:relative; width:calc(30.9% - 10px); margin:0 10px; }


.categoryName { position:relative; font-size:24px; line-height:1.25; border-radius:4px; }
.categoryName::after { content:attr(data-jp) ""; font-size:12px; text-align:center; display:block; text-align:center; font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;  }
.category_list a:hover p { color:#c00210; }


	@media only screen and (min-width: 768px) {
		.category_list { display:flex; justify-content:center; flex-wrap:wrap; }
		.category_list li:nth-child(n+4) { margin-top:50px; }
		.categoryName { position:absolute; background:#fff; z-index:1; left:calc(50% - 35%); bottom:-30px; width:70%; padding-top:20px; border-radius:4px; }
		.category_list li:hover .categoryName { transform: translateY(-25px); transition:0.3s; }
	}
	
	@media only screen and (max-width: 1024px) {
		.categoryName { font-size:20px; }
	}

	@media only screen and (max-width: 767px) {
		#category { margin:30px 0 30px; }
		.category_list { flex-wrap:wrap; }
		.category_list li { width:100%; border-bottom:1px dotted #233c5e; margin:0 0 10px; }
		.category_list li:after { content:""; position:absolute; top:40%; right:10px; background:url(../img/common/ico_chevron_black.png) no-repeat center right / contain; width:15px; height:15px; transform: rotate(-180deg); }
		.category_list li a { display:flex; justify-content:space-between; align-items:center; }
		.categoryName { position:relative; width:60%; order:2; text-align:left; padding:0 5%; }
		.categoryName::after { text-align:left; }
		.categoryImg { width:40%; order:1; }
		
	}

/*-----------------------------------------------------------------------
brands
-----------------------------------------------------------------------*/

#brand  { padding:30px 0; margin-bottom:50px; }
.brand_inner { max-width:1180px; position:relative; margin:0 auto; padding:0 40px; }
.brand_title { width:30%; display:table-cell; vertical-align:top; position:relative;top:70px; }
.brand_title h3 { font-size:44px; line-height:1.25; }
.brand_title h3::after { content:attr(data-jp) ""; font-size:12px; text-align:left; display:inline-block; margin-left:15px; font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; }
.brandTag_slider { margin-left:calc(50% - 550px); margin-top:20px; }
.brandTag { display:block; vertical-align:bottom; height:240px; width:70%; position:relative; top:80px; overflow:hidden; overflow:visible; width:auto; padding:80px 0 20px; }
.brandTag li { width:170px; height:140px; margin-right:20px; counter-increment:carousel-cell; transition:0.3s;  }

	.brandTag li:hover img { opacity:1; /*transform: translateY(-25px);*/ }


.flickity-viewport:hover li a { opacity:0.6; }
.flickity-viewport li a:hover { opacity:1; }/**/
.flickity-prev-next-button:hover a { border:1px solid red; }


.brandTag li img { border-radius:4px; }
.brandBg { background-size:cover; background-position:top center; background-repeat:no-repeat; min-height:339px; position:relative; margin:0 auto 100px; }
.bg_cosmetic { background-image:url(../img/top/bg_cosmetic.jpg); }
.bg_fragrance { background-image:url(../img/top/bg_fragrance.jpg); }
.bg_tobacco { background-image:url(../img/top/bg_tobacco.jpg); }
.bg_liquor { background-image:url(../img/top/bg_liquor.jpg); }
.bg_other { background-image:url(../img/top/bg_other.jpg); }
.flickity-viewport {position:absolute; bottom:0; }


	@media only screen and (max-width: 1024px) {
		.brandTag_slider { margin-left:40px; }
	}
	@media only screen and (max-width: 767px) {	
		#brand  { margin-bottom:0px; }
		.brand_inner { padding:0 30px; z-index:10; }
		.brandBg { margin:0 auto 50px; min-height:200px; max-height:200px; position:relative; }
			.brandBg:after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
			.brandBg.bg_fragrance:after,
			.brandBg.bg_tobacco:after,
			.brandBg.bg_other:after { background:rgba(255,255,255,0.3); }
		.brand_title { top:30px; }
		.brand_title h3 { font-size:24px; }
		.brandTag_slider { margin-top:0; margin-left:30px; position:relative; z-index:10; }
		.brandTag { height:200px; padding:60px 0 20px; top:50px; }
		.brandTag li { width:100px; height:70px; margin-right:10px; }
	}

/*-----------------------------------------------------------------------
pickupItem
-----------------------------------------------------------------------*/

.slick-slider-pickup { max-width:1100px;margin:0 auto; }
.slick-item-pickup { padding:0 20px; }

.item_pickup_price { color:#233c5e; font-size:22px; font-weight:bold; text-align:right; position:relative; margin:10px 0; }
.item_pickup_price em { color:#c00210; font-size:15px; font-weight:bold; position:absolute; top:25%; left:0; }
.item_pickup_tag { font-size:12px; font-weight:bold; position:absolute; top:25%; left:0; }
.item_pickup_tag span:nth-child(n+2) { position:relative; padding-left:10px; }
.item_pickup_tag span:nth-child(n+2):before { content:"/"; padding-right:10px; }

	@media only screen and (min-width: 768px) {	
		/* #pickupItem .slick-list { overflow:visible; } */
		#pickupItem .slick-slide { transition:0.3s; }
		#pickupItem .slick-current,
		/* #pickupItem .slick-slide:hover { transform:translateY(-10px); } */
		#pickupItem .slick-next {right: -35px !important;} 
		#pickupItem .slick-prev {left: -35px !important;}
	}

#pickupItem a:hover .overlay_text_title,
#pickupItem a:hover .overlay_text_ex { color:#c00210; }


/*-----------------------------------------------------------------------
campaign
-----------------------------------------------------------------------*/

#campaign { background-image:url(../img/common/bg_campaign.png); background-repeat:repeat; background-size:cover; background-position:top center; padding:50px 0; margin:30px 0 90px; text-align:center; width:100%; height:298px; position:relative; animation:bg-slider 100s linear infinite; transition:0.3s; }
.campaign_inner { max-width:980px; margin:0 auto; padding:0 20px; }
#campaign h2 { font-size:32px; line-height:1.6; }
#campaign h2::before { position:relative; content:attr(data-jp) ""; font-size:12px; text-align:center; display:block; color:#fff; text-align:center; font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; }


@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1560px 0; }
}

	@media only screen and (max-width: 767px) {
		#campaign { margin:10px 0 40px; }
		#campaign h2 { font-size:24px; }
	}


/*-----------------------------------------------------------------------
whatsNew
-----------------------------------------------------------------------*/

#whatsNew { background-image:url(../img/common/bg_dot.png); background-repeat:repeat; background-position:top center; padding:50px 20px; margin:30px 0 90px; text-align:center; }
.whatsNew_inner { max-width:1100px; background:#fff; margin:50px auto; padding:30px 40px; }
#whatsNew h2 { padding-bottom:10px; }
/*#whatsNew h2::after { content:attr(data-jp) ""; font-size:11px; text-align:center; display:block; color:#233c5e; text-align:center; font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; margin-top: -6px; margin-bottom: 8px; }
#whatsNew h2::before { content:""; position:absolute; bottom:0; left:50%; width:1px; height:35px; background:#233c5e; }*/
.whatsNew_list { margin-top:20px; }
.whatsNew_list li { display:flex; justify-content:flex-start;  border-top:1px dotted #233c5e; margin-bottom:10px; text-align:left; }
.whatsNew_list .date { padding:15px 20px 5px 10px;  border-right:1px dotted #233c5e; }
.whatsNew_list .detail { padding:15px 20px 5px; }
.whatsNew_list .detail a { padding-left:5px; }

	@media only screen and (max-width: 767px) {
		#whatsNew { margin:30px 0 45px; padding:15px 20px; }
		#whatsNew h2 { padding-bottom:0px; }
		.whatsNew_inner { margin:20px auto; padding:20px 20px; }
		.whatsNew_list li { flex-wrap:wrap; }
		.whatsNew_list .date { padding-left:0; }
		.whatsNew_list .detail { width:100%; padding:10px 0px 5px; }
		
	}


/*-----------------------------------------------------------------------
aboutUs
-----------------------------------------------------------------------*/

#aboutUs { padding:50px 20px; }
.aboutUs_inner { max-width:1100px;margin:0 auto; }
.aboutUs_title { font-size:20px; position:relative; padding-bottom:5px; margin-bottom:15px; }
.aboutUs_title:before,
.aboutUs_title:after { content:""; position:absolute; bottom:0; left:0; width:90%; height:3px; }
.aboutUs_title:before { background:#233c5e; }
.aboutUs_title:after { background:#c00210; width:3em; }


	@media only screen and (max-width: 767px) {
		#aboutUs {	margin-right: calc(50% - 50vw);	margin-left: calc(50% - 50vw); padding:0px; }
		.aboutUs_inner .col-xs-12.col-sm-6:last-child { padding:0 30px; }
		.aboutUs_title { margin-top:20px; }
		.aboutUs_title:before { width:100%; }
		.aboutUs_inner .btn { margin:0 auto; }
		.aboutUs_map { padding:0 30px; }
	}