@charset "utf-8";
/*--------------------------------------------
  shoptop.css
  ショップトップの共通CSS
--------------------------------------------*/
/* hedder */
body {
}

/* 差込HTML */
#insertHtml{
	width:100%;
}

a,
a:link {
	color: #282828;
	text-decoration: none;
}
a:hover {
	color: #acacac;
}

@media screen and (max-width: 641px) {
	.brandWrapper {
		background: none !important;
	}
}

/* 見出し */
.level_h1 {
}
.level_h1 span {
}
.level_h2 {
}

#contents {
	width: 100%;
	overflow: hidden;
}

/* バナー */
#topBannerArea1 ul li{
	width:100%;
	margin-bottom:10px;
}

#topBannerArea1 ul li img{
}

/* 2 */
#topBannerArea2 ul {
	margin: 0 -5px;
}
#topBannerArea2 ul li {
	width: 50%;
	margin: 0 0 10px 0;
	float: left;
	display: block;
	padding: 0 5px;
}
#topBannerArea2 ul li:first-child {
}

#topBannerArea3 ul li{
	width:233px;
	margin-bottom:10px;
	float:left;
	display:block;
	margin-left:10px;
}

#topBannerArea3 ul li:first-child {
	margin-left: 0;
}

@media screen and (max-width: 641px) {
	#topBannerArea2 ul {
		margin: 0 5px;
	}
	#topBannerArea2 ul li {
		width: 50%;
		margin: 0 0 10px 0;
		float: left;
		display: block;
		padding: 0 5px;
	}
}

/* flexslides共通 */
.flexslider {
	background: none;
}
.flex-control-nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 14px;
	z-index: 100;
/*	overflow: hidden;*/
}
.flex-control-nav li {
	display: inline-block;
	overflow: hidden;
	height: 12px;
	margin: 0;
	padding: 0 20px;
	text-indent: 100%;
	white-space: nowrap;
	text-align: center;
}
.flex-control-nav li a {
	display: block;
	width: 12px;
	height: 12px;
	box-shadow: none;
	border-radius: 6px;
	background: #cccccc;
}
.flex-control-nav li a.flex-active,
.flex-control-nav li a:hover {
	background: #282828;
}

.flex-direction-nav li {
	position: absolute;
	display: block;
}
.flex-direction-nav li a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(../images/top/btn_sp_pn_bnr.png) no-repeat 0 50%;
	background-size: 247px auto;
}
.flex-direction-nav li a.flex-prev {
	background-position: 0 50%;
}
.flex-direction-nav li a.flex-next {
	background-position: 100% 50%;
}

/* brandVisual */
#brandVisual {
	position: relative;
	width: 1150px;
	height: 487px;
	margin: 0 0 55px -95px;
	overflow: hidden;
}
#brandVisual > li a {
	background: #FFFFFF;
}
#brandVisual > li a:hover {
	filter: alpha(opacity=5);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

@media screen and (max-width: 641px) {
	/* flexslides共通 */
	.flex-control-nav {
		position: absolute;
		width: 100%;
		height: 16px;
		z-index: 100;
		overflow: hidden;
	}
	.flex-control-nav li {
		display: inline-block;
		overflow: hidden;
		height: 16px;
		margin: 0;
		padding: 0 15px;
		text-indent: 100%;
		white-space: nowrap;
		text-align: center;
	}
	.flex-control-nav li img {
		width: 100%;
	}
	.flex-control-nav li a {
		display: block;
		width: 16px;
		height: 16px;
		box-shadow: none;
		border-radius: 10px;
		background: #cccccc;
	}
	.flex-control-nav li a.flex-active {
		background: #282828;
	}
	.flex-direction-nav li a {
		width: 64px;
		height: 64px;
		background-size: 340px auto;
	}
	/* brandVisualSp */
	#brandVisualSp {
		display: block;
		overflow: hidden;
		position: relative;
		width: 100%;
		margin: 0 auto 38px;
		padding-bottom: 30px;
	}
}

@media screen and (max-width: 481px) {
	.flex-control-nav {
		height: 10px;
	}
	.flex-control-nav li {
		height: 12px;
	}
	.flex-control-nav li a {
		width: 10px;
		height: 10px;
	}
	.flex-direction-nav li a {
		width: 32px;
		height: 32px;
		background-size: 170px auto;
	}
	/* brandVisualSp */
	#brandVisualSp {
		padding-bottom: 20px;
	}
}

/* メインバナー */

/* bxslider */
.bx-wrapper {
	padding-bottom: 30px;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}
.bx-wrapper .bx-pager.bx-default-pager {
	bottom: 0;
	z-index: 100;
}
.bx-wrapper .bx-pager.bx-default-pager .bx-pager-item {
	display: inline-block;
	overflow: hidden;
	height: 12px;
	margin: 0;
	padding: 0 20px;
	text-indent: 100%;
	white-space: nowrap;
	text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background: #cccccc;
}
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
	background: #282828;
}
.bx-wrapper .bx-controls-direction a {
	top: 60px;
	display: block;
	width: 45px;
	height: 45px;
	margin: 0;
	background: url(../images/top/btn_sp_pn_bnr.png) no-repeat 0 50%;
	background-size: 247px auto;
}
.bx-wrapper .bx-controls-direction a.bx-prev {
	left: -25px;
	background-position: 0 50%;
}
.bx-wrapper .bx-controls-direction a.bx-next {
	right: -25px;
	background-position: 100% 50%;
}

/* メインバナー */
#mainBanner {
	position: relative;
	display: block;
	width: 1010px;
	margin: 0 0 15px -25px;
	overflow: hidden;
}
#mainBanner div.slidesWrapper {
	width: 960px;
	margin: 0 auto;
}
#mainBanner ul.slide > li {
	float: left;
	width: 300px !important;
	margin-right: 30px;
	list-style: none;
}
#mainBanner ul.slide > li:nth-child(3n),
#mainBanner ul.slide > li:last-child {
	margin-right: 0;
}
#mainBanner ul.slide > li span.img {
	display: block;
	background: #FFFFFF;
}
#mainBanner ul.slide > li a:hover img {
	filter: alpha(opacity=5);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#mainBanner ul.slide > li div.text {
	padding: 20px 0;
}
#mainBanner ul.bnrPager {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 14px;
	z-index: 100;
}
#mainBanner ul.bnrPager li {
	display: inline-block;
	overflow: hidden;
	height: 12px;
	margin: 0;
	padding: 0 20px;
	text-indent: 100%;
	white-space: nowrap;
	text-align: center;
}
#mainBanner ul.bnrPager li a {
	display: block;
	width: 12px;
	height: 12px;
	box-shadow: none;
	border-radius: 6px;
	background: #cccccc;
}
#mainBanner ul.bnrPager li a.flex-active,
#mainBanner ul.bnrPager li a:hover {
	background: #282828;
}

#mainBanner .flex-direction-nav li:last-child {
	top: 65px;
	right: 0;
}
#mainBanner .flex-direction-nav a {
	opacity: 1 !important;
}
#mainBanner .flex-direction-nav a:hover {
	opacity: 0.5 !important;
}
#mainBanner .flex-direction-nav .flex-prev {
	left: 0 !important;
}
#mainBanner .flex-direction-nav .flex-next {
	right: 0 !important;
}

@media screen and (max-width: 641px) {
	#mainBanner {
		display: block;
		position: absolute;
		width: 100%;
		height: 1px;
		overflow: hidden;
		opacity: 0;
	}
	#mainBannerSp {
		display: block !important;
	}
	#mainBannerSp ul.slides {
		padding: 0 0 25px;
		overflow: hidden;
	}
	#mainBannerSp ul.slides > li {
		float: left;
	}
	#mainBannerSp ul.slides > li span.img {
		display: inline;
	}
	#mainBannerSp ul.slides > li span.img img {
		width: 100%;
	}
	#mainBannerSp ul.slides > li div.text {
		padding: 8px 5% 16px;
	}
}

#infoBanner {
	margin-bottom: 38px;
}
#infoBanner ul {
	margin-left: 112px;
}
#infoBanner li {
	float: left;
	width: 360px;
	margin-right: 16px;
	list-style: none;
}
#infoBanner li a {
	display: block;
	background: #FFFFFF;
}
#infoBanner li a:hover img {
	filter: alpha(opacity=5);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

@media screen and (max-width: 641px) {
	#infoBannerSp {
		display: block !important;
		width: 84%;
		min-width: 270px;
		margin: 0 auto 10px;
		text-align: center;
	}
	#infoBannerSp li {
		margin-bottom: 15px;
		line-height: none;
	}

}

#promoBanner {
	margin-bottom: 70px;
}
#promoBanner ul {
	overflow: hidden;
}
#promoBanner ul li {
	float: left;
	width: 470px;
	height: 170px;
	margin-right: 20px;
	padding-bottom: 30px;
	list-style: none;
	overflow: hidden;
}
#promoBanner ul li:nth-child(even) {
	margin-right: 0;
}
#promoBanner ul li a:hover img {
	filter: alpha(opacity=5);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#promoBanner ul li span.img {
	display: block;
	float: left;
	width: 220px;
	background: #FFFFFF;
}
#promoBanner ul li div.text {
	float: right;
	width: 240px;
	padding-top: 10px;
}

@media screen and (max-width: 641px) {
	#promoBannerSp {
		display: block !important;
		padding-bottom: 35px;
		margin-bottom: 55px;
	}
	#promoBannerSp .flexslider {
		min-width: 272px;
		width: 84%;
		margin: 0 auto;
		border: 1px solid #dadada;
		background: #FFFFFF;
		overflow: visible;
	}
	#promoBannerSp ul.slides {
		width: 84.7%;
		margin: 0 auto;
		padding: 20px 0;
	}
	#promoBannerSp ul.slides > li {
		list-style: none;
	}
	#promoBannerSp ul.slides > li span.img {
		display: block;
		margin: 0 20px;
	}
	#promoBannerSp ul.slides > li div.text {
		padding-top: 10px;
		margin: 0 20px;
	}
	#promoBannerSp .flex-control-nav {
		bottom: -35px;
	}
	#promoBannerSp .flex-direction-nav li:first-child {
		top: 110px;
		left: -32px;
	}
	#promoBannerSp .flex-direction-nav li:last-child {
		top: 110px;
		right: -32px;
	}
	#promoBannerSp .flex-direction-nav a {
		opacity: 1 !important;
	}
	#promoBannerSp .flex-direction-nav .flex-prev {
		left: 0 !important;
	}
	#promoBannerSp .flex-direction-nav .flex-next {
		right: 0 !important;
	}
}
@media screen and (max-width: 481px) {
	#promoBannerSp {
		padding-bottom: 25px;
	}
	#promoBannerSp .flex-control-nav {
		bottom: -25px;
	}
	#promoBannerSp .flex-direction-nav li:first-child {
		left: -16px;
	}
	#promoBannerSp .flex-direction-nav li:last-child {
		right: -16px;
	}
}

/* ランキング */
#rankingIncludeArea {
	margin-bottom: 60px;
}

@media screen and (max-width: 641px) {
	#rankingIncludeArea {
		margin-bottom: 25px;
	}
	#rankingIncludeArea h2 {
		margin-bottom: 20px;
	}
	#rankingIncludeArea h2 img {
		width: 36.25%;
	}
}


#subBanner {
	margin-bottom: 46px;
	overflow: hidden;
}
#subBanner li {
	float: left;
	width: 228px;
	margin-right: 16px;
}
#subBanner li:last-child {
	margin-right: 0;
}
#subBanner li a {
	display: block;
	background-color: #fff;
}
#subBanner li a:hover img {
	filter: alpha(opacity=5);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

@media screen and (max-width: 641px) {
	#subBannerSp {
		display: block !important;
		min-width: 270px;
		width: 84%;
		margin: 0 auto 23px;
		text-align: center;
	}
	#subBannerSp li {
		margin-bottom: 10px;
	}
}


/* お知らせ */
#info {
	padding-bottom: 95px;
}
#info h2 {
	text-align: center;
}
#info ul {
	border-top: 2px solid #EEEEEE;
}
#info ul li {
	position: relative;
	width: 960px;
	padding: 22px 12px;
	border-bottom: 1px solid #dcdcdc;
	text-align: left;
	line-height: 170%;
}
#info ul li span.date {
	display: table-cell;
	width: 8em;
	text-align: left;
}
#info ul li a {
	display: table-cell;
}

@media screen and (max-width: 641px) {
	#info {
		min-width: 270px;
		width: 84%;
		margin: 0 auto;
		padding-bottom: 60px;
	}
	#info h2 img {
		/*width: 70px;*/
		width: 21.87%;
	}
	#info ul li {
		width: 100%;
		padding: 12px 6px;
		font-size: 120%;
	}
	#info ul li span.date {
		width: 6em;
	}
}

/* communication */
#communication {
	margin-bottom: 65px;
	text-align: center;
}
#communication div.communicationWrapper {
	position: relative;
	margin-top: -14px;
	padding: 64px 40px 40px;
	border: 2px solid #EEEEEE;
	background: #FFFFFF;
	overflow: hidden;
	z-index: 5;
}
#communication h2 {
	position: relative;
	display: inline-block;
	padding: 0 20px;
	background: #FFFFFF;
	z-index: 6;
}
#communication #comstd {
	margin-bottom: 45px;
	border-bottom: 2px solid #EEEEEE;
	overflow: hidden;
}
#communication #comstd h3 {
	margin-bottom: 48px;
}
#communication #comstd div.block {
	width: 420px;
	margin: 0 auto;
	padding-bottom: 30px;
	color: #787d82;
}
#communication #comstd div.block h4 {
	margin-bottom: 26px;
	padding: 8px;
	background: #787d82;
	color: #FFFFFF;
	font-size: 160%;
}
#communication #comstd div.block p {
	margin-bottom: 8px;
	line-height: 170%;
}
#communication #comstd #contactTel p.formBtn {
	display: none;
}
#communication #comstd div.block p.tel a {
	cursor: default;
}
#communication #comstd #contactTel .notice a {
	display: inline-block;
	margin-top: 0.5em;
	padding: 0.3em 2em;
	border: 2px solid #e65096;
	color: #e65096;
	text-align: center;
	font-weight: bold;
	background-color: #fff;
}
#communication div.snsBlock h3 {
	margin-bottom: 18px;
}
#communication #instagram {
	margin-bottom: 56px;
	clear: both;
}
#communication #instagram ul {
	overflow: hidden;
}
#communication #instagram ul li {
	float: left;
	width: 145px;
	list-style: none;
}
#communication #instagram ul li video {
	width: 100%;
	vertical-align: bottom;
}
#communication #facebook {
	display: none;
	float: left;
	width: 420px;
}
#communication #twitter {
	/*float: right*/
	width: 420px;
	margin: 0 auto;
}
#communication #twitter div.twTimeline {
	height: 440px;
	overflow-y: scroll;
}
#communication #twitter div.twTimeline iframe {
}


@media screen and (max-width: 641px) {
	#communication {
		min-width: 270px;
		width: 84%;
		margin: 0 auto 40px;
	}
	#communication div.communicationWrapper {
		margin-top: -5px;
		padding: 32px 3.7% 10px;
		border: 1px solid #EEEEEE;
	}
	#communication h2 {
		width: auto;
		width: 75.6%;
		padding: 0;
	}
	#communication h2 img {
		/*width: 169px;*/
		width: 94%;
	}
	#communication #comstd {
		margin-bottom: 26px;
		border-bottom: 1px solid #EEEEEE;
	}
	#communication #comstd h3 {
		margin-bottom: 25px;
	}
	#communication #comstd h3 img {
		/*width: 182px;*/
		width: 56.87%;
	}
	#communication #comstd div.block {
		width: auto;
		padding-bottom: 18px;
	}
	#communication #comstd #contactTel,
	#communication #comstd #orderTel {
		float: none;
	}
	#communication #comstd div.block h4 {
		margin-bottom: 13px;
		padding: 6px;
		font-size: 110%;
	}
	#communication #comstd div.block p.tel a {
		cursor: pointer;
	}
		#communication #comstd #contactTel p.tel img {
		/*width: 155px;*/
		width: 57.40%;
	}
	#communication #comstd #contactTel p.text {
		display: none;
	}
	#communication #comstd #contactTel .notice a {
		width: 87.99531%;
		margin-bottom: 0.5em;
		padding: 0.78125vw 0;
		font-size: 1.875vw;
	}
	#communication #comstd #contactTel p.formBtn {
		display: block;
	}
	#communication #comstd #contactTel p.formBtn img {
		width: 88%;
	}
	#communication #comstd #orderTel p.tel img {
		/*width: 142px;*/
		width: 52.59%;
	}
	#communication #comstd div.block p {
		line-height: 150%;
		font-size: 90%;
	}
	#communication #instagram h3 img {
		/*width: 98px;*/
		width: 36.29%;
	}
	#communication #instagram ul {
		display: inline-block;
		margin: 0 auto;
		overflow: hidden;
	}
	#communication #instagram ul li {
		float: none;
		display: inline-block;
		/*width: 83px;*/
		width: 33.33%;
	}
	#communication #instagram ul li video::-webkit-media-controls-start-playback-button { /* iPhone用設定 */
		transform: scale(0.5, 0.5);
	}
	#communication #facebook {
		float: none;
		width: auto;
		margin-bottom: 40px;
	}
	#communication #facebook h3 img {
		/*width: 95px;*/
		width: 35.18%;
	}
	#communication #facebook div.fb-page,
	#communication #facebook div.fb-page span:first-child,
	#communication #facebook div.fb-page iframe[style] {
		width: 100% !important;
	}
	#communication #facebook div.fb-page span:first-child {
		height: 300px !important;
	}
	#communication #facebook div.fb-page iframe[style] {
		height: 300px !important;
		border-bottom: 1px solid #EEEEEE;
	}
	#communication #twitter {
		float: none;
		width: auto !important;
	}
	#communication #twitter h3 img {
		/*width: 80px;*/
		width: 29.62%;
	}
	#communication #twitter div.twTimeline {
		height: 240px;
	}
}

/* 2カラム用レイアウト */
.twoColumns .topGroupName {
	width: 960px !important;
	height: 1%;
	margin: 0 auto;
}

@media screen and (max-width: 641px){
}

/*
 * レコメンド
 */
/* 売れすじランキング */
.itemRanking ul.scroll2 {
	overflow: hidden;
	border: 2px solid #EEEEEE;
	background: #FFFFFF url(../images/top/bg_ranking.gif) 50% 0 repeat-y;
}
.itemRanking ul.scroll2 li {
	width: 191px;
	margin: 0;
	padding: 15px 21px 15px 20px;
	line-height: 130%;
	font-size: 130%;
}
.itemRanking ul.scroll2 li a {
	display: block;
}
.itemRanking ul.scroll2 li strong {
	display: block;
	text-align: center;
	margin-bottom: 10px;
}
.itemRanking ul.scroll2 li strong img {
	display: inline;
	border: none;
}
.itemRanking ul.scroll2 li span {
	display: block;
	padding: 5px 0;
}
.itemRanking ul.scroll2 li span.separate_num {
	display: inline;
	padding: 0;
}
.itemRanking ul.bannerNav {
	display: none;
}
@media screen and (min-width: 642px){
	.itemRanking {
		width: 960px !important;
	}
	.itemRanking ul.scroll2 {
		width: 960px !important;
	}
}

@media screen and (max-width: 641px){
	.itemRanking div.listScroll {
		border: 1px solid #EEEEEE;
	}
	.itemRanking ul.scroll2 {
		width: 538px !important;
		border: none;
		background-size: 60% auto;
	}
	.itemRanking ul.scroll2 li {
		width: 107px;
		padding: 12px 8px;
	}
	.itemRanking ul.scroll2 li strong img {
		width: 50%;
	}
	.itemRanking .listScroll li.prev,
	.itemRanking .listScroll li.next {
	}
	.itemRanking ul.bannerNav {
		display: block;
	}
}
/* 商品リスト */
.itemList {
	margin-bottom: 60px;
}
.itemList h2 {
	margin-bottom: 24px;
	text-align: center;
}
.itemList ul {
	overflow: hidden;
}
.itemList li {
	list-style: none;
	float: left;
	line-height: 150%;
}
.itemList li:first-child {
	margin-left: 0;
}
.itemList li a {
	display: block;
}
.itemList li a span {
	display: block;
	background-color: #fff;
}
.itemList li img {
	display: block;
}
.itemList li a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

@media screen and (max-width: 641px){
	.itemList {
		width: 84%;
		margin: 0 auto 15px;
	}
	.itemList h2 {
	}
	.itemList h2 img {
		vertical-align: middle;
	}
	.itemList ul {
		overflow: hidden;
	}
	.itemList ul.scroll2 li {
		list-style: none;
		float: left;
		font-size: 110%;
		line-height: 140%;
	}
	.itemList li:first-child {
		margin-left: 0;
	}
	.itemList li a {
		display: block;
		padding-bottom: 3px;
	}
	.itemList li a span {
	}
	.itemList li img {
		display: block;
	}

	/* 左右スクロール */
	.listScroll {
		position: relative;
	}
	.listScroll > div {
		overflow: scroll;
		width: 100%;
	}
	.listScroll ul.scroll2 {
		overflow: hidden;
	}
	.listScroll ul.scroll2 li {
		list-style: none;
		float: left;
	}
	.listScroll li.prev,
	.listScroll li.next {
		overflow: hidden;
		position: absolute;
		z-index: 100;
		top: -52px;
		width: 20px;
		height: 40px;
		background: url(../images/top/btn_sp_pn_ranking.png) no-repeat 0 50%;
		background-size: 556px auto;
		text-indent: 100%;
		white-space: nowrap;
		cursor: pointer;
	}
	.listScroll li.prev {
		left: 5px;
	}
	.listScroll li.next {
		right: 5px;
		background-position: 100% 50%;
	}
	.listScroll li.stop {
		filter: alpha(opacity=3);
		-moz-opacity: 0.3;
		opacity: 0.3;
	}
}
@media screen and (max-width: 481px) {
	.listScroll li.prev,
	.listScroll li.next {
		top: -38px;
		width: 10px;
		height: 20px;
		background-size: 278px auto;
	}
}

@media screen and (max-width: 641px) {
	.topGroupName {
		padding: 0;
	}
}

/* colorLight */
.colorLight {
	display: block !important;
}

/* footer */
/*#footer div.sns {
	border-bottom: none;
}*/

/* OST */
#footer div.ost {
	display: block;
	padding: 0 130px 75px 110px;
	border-top: none;
	border-bottom: 2px solid #b2b2b2;
	overflow: hidden;
	font-size: 90%;
}
#footer div.ost p {
	float: left;
	position: relative;
	min-height: 45px;
	margin-bottom: 0;
	padding: 10px 145px 0 0;
}
#footer div.ost img {
	position: absolute;
	top: 0;
	right: 0;
}
#footer div.ost br {
	display: block;
}

@media screen and (max-width: 641px){
	#footer div.ost {
		display: block;
		margin: 0 auto;
		padding: 0 8%;
	}
	#footer div.ost p {
		padding: 0 29.62% 0 0;
		font-size: 120%;
	}
	#footer div.ost img {
		width: 25.92%;
		max-width: 140px;
	}
	#footer div.ost br {
		display: none;
	}
}

/*****
Instagram 動画ダウンロードボタン削除
*****/
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}