@charset "utf-8";


/*=======================================================
	Common
=======================================================*/
body{
	font-feature-settings: "palt";
	letter-spacing: 1px;
}


/*=======================================================
	Helper
=======================================================*/

/* 画像痴漢 */
.ht {
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 0;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 100%;
}

/*=======================================================
Link
=======================================================*/
a,
a img{
	transition-duration: 500ms;
	transition-property: all;
	transition-timing-function: ease;
	
	&:hover{
		transition-duration: 500ms;
		transition-property: all;
		transition-timing-function: ease;
	}
}

@media only screen and (max-width: 767px) {
  & a,
  & img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }
}

/*=======================================================
	Header
=======================================================*/
#header{
	padding-bottom: 10px;
}
@media only screen and (min-width: 768px){
	#header{
		padding-bottom: 0;
	}
}

/* ロゴ */
.header_logo{
	max-width: 60px;
	background-color: #000;
	padding:6px;
	border-radius: 40px;
}
@media only screen and (min-width: 768px){
	.header_logo{
		max-width: 90px;
		padding:10px;
		border-radius: 60px;
	}
}

.header_logo > a{
	display: block;
	width: 100%;
	height: auto;
}
.header_logo > a:hover{
	transform: scale(1.1, 1.1);
}

.header_logo > a > .ht{
	background-image: url(../img/common/logo.png);
	padding-top:100%;
}

/* コピー */
@media only screen and (min-width: 768px){
	#header .copy {
		font-size: 1.2rem;
		text-align: center;
		padding-top: 5px;
	}
}

.header_logo_area > .postage{
	position: absolute;
	font-size: 12px;
	white-space: nowrap;
	top: 58px;
	left: 100px;
	font-weight: bold;
	margin: 0;
}
	@media only screen and (max-width: 991px){
		.header_logo_area > .postage{
			top: 0;
		}
	}
	@media only screen and (max-width: 767px){
		.header_logo_area > .postage{
			top: 14px;
			left: 70px;
		}
	}
	@media only screen and (max-width: 460px){
		.header_logo_area > .postage{
			position: static;
			padding-top:5px;
		}
	}
.header_logo_area > .postage > .text{
	display: block;
}
.header_logo_area > .postage > .text2{
	font-size: 10px;
}

/* 商品検索 */
#header #searchform{
	width: 232px;
}

#header .header_bottom_area{
	position: absolute;
	top: 52%;
	right: 18px;
	padding-top: 0;
}
#header #searchform select{
	display: none;
}


/* My 商品検索 */
#search.my-search {
	background: transparent;
	background: tramsp;
	padding: 0;
}
@media only screen and (min-width: 768px){
	#search.my-search {
		display: none;
	}
}
#search.my-search .input_search,
#search.my-search input[type="search"]{
	height: 40px;
}
#search.my-search .bt_search {
	margin-top: 0px;
}


/* ログイン */
#header .member{
	position: absolute;
	top:50px;
	right: 16px;
}

@media only screen and (min-width: 992px){
	#header .member{
		top:0;
		right: 290px;
	}
}

/* カテゴリ */
#header #category {
	padding-top:0;
	padding-right: 250px;
}
#header #category > .category-nav{
	border-top:none;
	border-bottom: none;
	text-align: left; /* メニュー左寄せ */
}
@media only screen and (min-width: 768px){
	.member_link a{
		padding: 0 2px;
	}
}

/* 送料について */
#header #member .member_link .postage a{
	position: relative;
	padding-left: 32px;
}
#header #member .member_link .postage a::before{
	content: "";
	display: block;
	width: 25.83px;
	height: 25.83px;
	background-image: url(../img/common/icon01.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: calc(-0.5*25.83px);
}

#drawer .member_link .postage a{
	position: relative;
	padding-left: 44px;
}
#drawer .member_link .postage a::before{
	content: "";
	display: block;
	width: 25.83px;
	height: 25.83px;
	background-image: url(../img/common/icon01.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	left: 11px;
	top: 50%;
	margin-top: calc(-0.5*25.83px);
}



/*=======================================================
	Footer
=======================================================*/
#footer{
	background-color: #fff;
	padding-bottom: 5px;
}
@media only screen and (min-width: 768px){
	#footer {
		padding-top: 16px;
		margin-top: 40px;
	}
}
.menu-footer{
	font-size: 1.4rem;
}
@media only screen and (min-width: 768px){
	.footer_logo_area {
		margin-top: 16px;
	}
}



/*=======================================================
	商品ブロック
=======================================================*/
/*#item_list .item_photo > img{
	width: auto;
	height: 144px;
}
@media only screen and (min-width: 375px){
	#item_list .item_photo > img{
		height: 171px;
	}
}
@media only screen and (min-width: 425px){
	#item_list .item_photo > img{
		height: 196.5px;
	}
}
@media only screen and (min-width: 568px){
	#item_list .item_photo > img{
		height: 268px;
	}
}
@media only screen and (min-width: 768px){
	#item_list .item_photo > img{
		height: 160px;
	}
}
@media only screen and (min-width: 1024px){
	#item_list .item_photo > img{
		height: 224px;
	}
}
@media only screen and (min-width: 1150px){
	#item_list .item_photo > img{
		height: 255.5px;
	}
}*/

/*=======================================================
	Category Page（一覧ページ）
=======================================================*/
@media only screen and (max-width: 767px){
	.front_page .product_item a ,
	.product_page .product_item a {
		max-width: 567px;
		margin: 0 auto;
	}
	.front_page .product_item a:after ,
	#page_product_list .product_item a:after {
		content: "";
		display: table;
		clear: both;
	}
	.front_page .item_photo,
	.front_page .item_detail,
	#page_product_list .item_photo,
	#page_product_list .item_detail{
		float: left;
	}

	.front_page .item_photo,
	#page_product_list .item_photo{
		width:30%;
	}
	
	.front_page .item_detail,
	#page_product_list .item_detail{
		width:67%;
		margin-left: 3%;
	}
	
	.front_page .item_price,
	.front_page .item_name ,
	#page_product_list .item_price,
	#page_product_list .item_name {
		font-size: 1.4rem;
	}
	
}

/* Sold Out */
.front_page .product_item .item_photo,
#page_product_list .product_item .item_photo{
	position: relative;
}
.front_page .product_item .item_photo .soldout,
#page_product_list .product_item .item_photo .soldout{
	position: absolute;
	top:50%;
	left: 50%;
	margin-left: -40px;
	margin-top: -8px;
	font-weight: bold;
	
}

/* Tag in List */
.list_tag_box {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	text-align: left;
	padding: 3px;
}
.list_tag_1 {
	background-color: #c11429;
	color: #fff;
}
.list_tag_1 {
	background-color: #c11429;
	color: #fff;
}
.list_tag_1 {
	background-color: #c11429;
	color: #fff;
}
.list_tag_1 {
	background-color: #e85526;
	border-color: #e85526;
	color: #fff;
}
.list_tag_2 {
	background-color: #000;
	border-color: #000;
	color: #fff;
}
.list_tag_3 {
	background-color: #fff;
	border-color: #000;
	color: #000;
}
.list_tag_4 {
	background-color: #c11429;
	border-color: #c11429;
	color: #fff;
}



#topicpath {
	border-top: none;
	border-bottom: none;
}
#topicpath ol{
	padding-bottom: 0;
}

@media only screen and (min-width: 768px){
	#topicpath {
		padding: 0px 16px 24px;
		border-top: none;
		border-bottom: none;
	}
	.item_price,
	.item_name {
		font-size: 1.6rem;
	}	
	
}






/*=======================================================
	Product Page（詳細ページ）
=======================================================*/
/* Slick Slider */
@media only screen and (min-width: 768px){
	body#page_product_detail #item_photo_area ul.slick-dots{
		margin-left: -3%;
		margin-right: 0;
		padding-left: 0;
		width: auto;
	}
	body#page_product_detail #item_photo_area ul.slick-dots::after{
		content: "";
    display: table;
    clear: both;
	}
	
	body#page_product_detail #item_photo_area .slick-dots li{
		width: 30.33333%;
		margin-left: 3%;
		padding-left:0;
		padding-right: 0;
	}
}


	
/* 商品コード */
#item_detail_area .item_detail .item_code {
	border-top: none;
}

/* 関連カテゴリ */
#item_detail_area .item_detail .relative_cat {
	border-top: none;
	border-bottom: none;
}
#relative_category_box.relative_cat{
	margin-bottom: 10px;
}
#relative_category_box.relative_cat ol+ol{
	margin-top: 4px;
}
#relative_category_box.relative_cat .btn-info-border{
	text-align: center;
	padding: 4px 10px 2px;
	font-size: 1.3rem;
	line-height: 1;
	border-width: 1px;
}

/* 詳細説明 価格〜重量 */
@media only screen and (max-width: 767px){
	body.product_page .item_detail{
		width: 100%;
		float: none;
		margin-left: 0;
	}
} 

/* 関連カテゴリ 複数行の最後だけ表示 */
#relative_category_box.relative_cat > ol:not(:last-child){
	display: none;
}

/* 再入荷のお知らせLINK */
#detail_cart_box__button_area .link-line{
	font-size: 0.8em;
	padding-bottom: 10px;
}
#detail_cart_box__button_area .link-line a{
	text-decoration: underline;
}


/* お気に入りボタン */
#detail_cart_box__favorite_button .btn-info-border{
	font-size: 1.3rem;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	width:auto;
	border-width: 1px;
}

/* ハートアイコン */
.cart_area .btn .cb {
	font-size: 3rem;
	fill: currentColor;
	margin-right: 5px;
	position: relative;
	top: -1px;
}

/* 商品タイトル */
@media only screen and (min-width: 768px){
	#item_detail_area .item_name {
		font-size: 2.75rem;
		margin-bottom: 10px;
	}
}

/* 画像 */
#item_photo_area .slick-slide img {
	display: inline-block;
	width: auto;
	height: 304px;
}
@media only screen and (min-width: 768px){
	#item_photo_area .slick-slide img {
		height: 352px;
	}
}
@media only screen and (min-width: 1024px){
	#item_photo_area .slick-slide img {
		height: 480px;
	}
}
@media only screen and (min-width: 1150px){
	#item_photo_area .slick-slide img {
		height: 543px;
	}
}

/* 商品拡大js */
.zoomContainer{
	z-index: 2;
}



/*=======================================================
	Cart
=======================================================*/

/* 注意事項 */
.box-shipping-notice{
	padding: 10px;
	background-color: #efefef;
	text-align: justify;
	font-size: 14px;
}
@media only screen and (min-width: 768px){
	.box-shipping-notice{
		padding: 20px;
		font-size: 16px;
	}
}
.box-shipping-notice ol{
	list-style: decimal;
	padding-left: 25px;
}

.box-shipping-notice ol > li+li{
	margin-top: 1em;
}
.box-shipping-notice ol ul{
	list-style: disc;
	padding-left: 25px;
	font-size: 12px;
}
@media only screen and (min-width: 768px){
	.box-shipping-notice ol ul{
		font-size: 14px;
	}
}


/*=======================================================
	商品画像（サイズ制限）
=======================================================*/
#cart_area .item_photo img ,
body#page_mypage .item_photo img ,
body#page_mypage_favorite .item_photo img ,
body#page_cart .item_photo img ,
body#page_shopping .item_photo img {
	width: auto;
	height: 110px;
}



/*=======================================================
	Button
=======================================================*/
/* btn-primary  */
.btn-primary {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #f0ad4e;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: #fff;
	background-color: #eea236;
	border-color: #eea236;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #f0ad4e;
	border-color: #f0ad4e;
}
.btn-primary .badge {
	color: #fff;
	background-color: #f0ad4e;
}

/* btn-primary-border  */
.btn-primary-border {
	color: #f0ad4e;
	background-color: #fff;
	border-color: #f0ad4e;
	border-width: 2px;
}
.btn-primary-border:hover,
.btn-primary-border:focus,
.btn-primary-border:active,
.btn-primary-border.active,
.open > .dropdown-toggle.btn-primary-border {
	color: #f0ad4e;
	background-color: #FDF6F6;
	border-color: #f0ad4e;
}
.btn-primary-border:active,
.btn-primary-border.active,
.open > .dropdown-toggle.btn-primary-border {
	background-image: none;
}
.btn-primary-border.disabled,
.btn-primary-border[disabled],
fieldset[disabled] .btn-primary-border,
.btn-primary-border.disabled:hover,
.btn-primary-border[disabled]:hover,
fieldset[disabled] .btn-primary-border:hover,
.btn-primary-border.disabled:focus,
.btn-primary-border[disabled]:focus,
fieldset[disabled] .btn-primary-border:focus,
.btn-primary-border.disabled:active,
.btn-primary-border[disabled]:active,
fieldset[disabled] .btn-primary-border:active,
.btn-primary-border.disabled.active,
.btn-primary-border[disabled].active,
fieldset[disabled] .btn-primary-border.active {
	background-color: #fff;
	border-color: #f0ad4e;
}


/* btn-info-border  */
.btn-info-border {
	color: #999;
	background-color: #fff;
	border-color: #ccc;
	border-width: 2px;
}
.btn-info-border:hover,
.btn-info-border:focus,
.btn-info-border:active,
.btn-info-border.active,
.open > .dropdown-toggle.btn-info-border {
	color: #666;
	background-color: #efefef;
	border-color: #999;
}
.btn-info-border:active,
.btn-info-border.active,
.open > .dropdown-toggle.btn-primary-border {
	background-image: none;
}
.btn-info-border.disabled,
.btn-info-border[disabled],
fieldset[disabled] .btn-info-border,
.btn-info-border.disabled:hover,
.btn-info-border[disabled]:hover,
fieldset[disabled] .btn-primary-border:hover,
.btn-info-border.disabled:focus,
.btn-info-border[disabled]:focus,
fieldset[disabled] .btn-primary-border:focus,
.btn-info-border.disabled:active,
.btn-info-border[disabled]:active,
fieldset[disabled] .btn-primary-border:active,
.btn-info-border.disabled.active,
.btn-info-border[disabled].active,
fieldset[disabled] .btn-primary-border.active {
	background-color: #efefef;
	border-color: #efefef;
}


/*=======================================================
	トップページ 新着一覧
=======================================================*/

body.front_page #contents_top .read .product_item{
	margin-bottom: 20px;
}
@media only screen and (max-width: 767px){
	body.front_page #contents_top .read .product_item{
		margin-bottom: 10px;
	}
}

/* もっと見る */
body.front_page #contents_top .btn{
	display: block;
	max-width: 200px;
	margin: 0 auto 50px;
}

/*=======================================================
	新規会員登録で必須項目以外は非表示にする
=======================================================*/
/* 入力ページ */
#page_entry form #top_box__birth > dl:not(:last-child),
#page_entry form #top_box__fax,
#page_entry form #top_box__company_name{
	display: none;
} 

/* 確認ページ */
#page_entry form #confirm_box__job,
#page_entry form #confirm_box__sex,
#page_entry form #confirm_box__birth,
#page_entry form #confirm_box__fax,
#page_entry form #confirm_box__company_name{
	display: none;
} 


/*=======================================================
	スマホ時 スライドメニュー
=======================================================*/

/* デフォルトで子カテゴリーを表示させる */
.drawer .category-nav ul{
	display: block;
}

.drawer .category-nav ul > li{
	position: relative;
}
.drawer .category-nav ul > li::before{
	position: absolute;
	top: 15px;
	font-family: monospace;
	letter-spacing: -2px;
	color: #CCCCCC;
}

/* 2階層目 */
.drawer ul.category-nav > li > ul > li::before{
	content: ">";
	left: 14px;
}
.drawer ul.category-nav > li > ul > li > a{
	padding-left: 28px;
}

/* 3階層目 */
.drawer ul.category-nav > li > ul > li > ul > li::before{
	content: ">>";
	left: 28px;
}
.drawer ul.category-nav > li > ul > li > ul > li > a{
	padding-left: 48px;
}

/* 4階層目 */
.drawer ul.category-nav > li > ul > li > ul > li > ul > li::before{
	content: ">>>";
	left: 38px;
}
.drawer ul.category-nav > li > ul > li > ul > li > ul > li > a{
	padding-left: 68px;
}


