/*top.css*/

#container { margin-top: 0px } /*中ページ用にフロートヘッダー分上を空けているのを詰める*/
#top .l-border { border-top: 1px solid #eee; margin-bottom: 2rem }
#top .border-nami { width: 100%; margin-bottom: 4rem }
#top .sp-hidden { display: block !important }
@media screen and (max-width:480px) { #top .sp-hidden { display: none !important } }
#top .sp-display { display: none !important }
@media screen and (max-width:480px) { #top .sp-display { display: block !important } }

/*------------------------------
リード*/
#top .lead { margin-bottom: 3rem }
#top .lead h2 {
	font-weight: bold;
	font-size: 1.4rem;
	letter-spacing: .1rem;
	text-align: center;
	margin-bottom: 1rem }
#top .lead p {
	/*font-weight: bold;*/
	letter-spacing: .1rem;
	line-height: 1.8rem;
	text-align: center }

/*------------------------------
リスト*/

/*見出し*/
#top .section { margin-bottom: 2rem }
@media screen and (max-width:480px) { #top .section { margin-bottom: 1rem } }
#top .section .section-title { margin-bottom: 2rem }
#top .section .section-title h2 {
	font-weight: bold;
	font-size: 1.3rem;
	text-align:center }
#top .section .sub-title {
	font-weight: bold;
	font-size: .8rem;
	text-align: center }

/*もっと見るボタン*/
#top .section .more-btn {
	font-size: .8rem;
	text-decoration: underline;
	text-align: center }

/*カラム*/
#top .l-clm {
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-box-pack: justify;
	flex-wrap: wrap; -webkit-flex-wrap:wrap }
#top .l-clm img { margin-bottom: .5rem }
#top .l-clm-title {
	font-size: .9rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: .5rem }
@media screen and (max-width:480px) {
	#top .l-clm-title {
		margin-bottom: .2rem; font-size: 1rem !important } }
#top .l-clm-body { font-size: .8rem }

/*1カラム*/
#top .l-clm .l-1clm-body { font-size: .8rem; text-align: center }

/*2カラム*/
#top .l-clm .l-2clm-item { width: 48.5%; margin-bottom: 2rem }

/*3カラム*/
#top .l-clm .l-3clm-item { width: 32%; margin-bottom: 2rem }

/*4カラム*/
#top .l-clm .l-4clm-item { width: 24%; margin-bottom: 2rem }

@media screen and (max-width:480px) {
	/*SPは全て2カラムに*/
	#top .l-clm .l-3clm-item,
	#top .l-clm .l-4clm-item { width: 48.5%; margin-bottom: 1rem }
}

/*おすすめ商品用カラム*/
#top .osusume {
	justify-content: start; -webkit-box-pack: start;
	column-gap: 1.3%;
}
@media screen and (max-width:480px) {
	#top .osusume { column-gap: 3% }
}

/*------------------------------
カルーセル*/

/*#top .carousel { margin-bottom: 4rem }*/
/*#top .carousel a { display: block; width: 100% }*/
/*#top .carousel img { width: 100%; margin-bottom: .5rem }*/

#top .carousel img { margin-bottom: .5rem }
#top .carousel .l-clm-title {
	font-size: .9rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: .5rem }

/*3カラム*/
#top .car-3clm .car-item { width: 32%; margin:0 2% 2rem 0 }
#top .car-3clm .flickity-prev-next-button { top: 100px } /* flickity.cssの修正 */

/*4カラム*/
#top .car-4clm .car-item { width: 24%; margin:0 1.3333% 2rem 0 }
#top .car-4clm .flickity-prev-next-button { top: 80px } /* flickity.cssの修正 */

/*SPは全て2カラムに*/
@media screen and (max-width:480px) {
	#top .carousel .car-item {
		width: 44%;
		padding: 0 5px;
		margin-right: 0;
	}
	/*#top .carousel .flickity-slider { width: 95%; left: 5% !important }*/
}

/*------------------------------
お知らせ*/

#news {
	font-size: .9rem;
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width:480px) {
	#news { width: 100% }
}	
#news li {
	display: flex; display: -webkit-flex;
}
#news .date { width: 10% }
#news .message { width: 90% }
@media screen and (max-width:480px) {
	#news .date { width: 18% }
	#news .message { width: 82% }
}

/*------------------------------
取扱ブランド*/

#top .bland-logos {
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-box-pack: justify;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
}
#top .bland-logos img {
	width: 15%;
	margin: 1rem;
}
@media screen and (max-width:480px) {
	#top .bland-logos img { width: 23% }
}
#top .unga-original {
	display: flex; display: -webkit-flex;
	justify-content: center; -webkit-box-pack: center;
	align-items: center; -webkit-box-align: center; -webkit-align-items: center;
	margin-bottom: 3rem;
}
#top .unga-original a {
	color: #9b8e6c;
}
#top .unga-original img {
	width: 15%;
	margin: 0 4rem;
}

/*------------------------------
バナー*/

#top .bnr-area h2 {
	font-weight: bold;
	font-size: 1.2rem;
	text-align:center;
	margin-bottom:1rem }

/*SPはカラム解除*/
@media screen and (max-width:480px) {
	#top .bnr-area .l-clm { display: block }	
	#top .bnr-area .l-2clm-item { width: 100% } }

/*top.css*/