@charset "UTF-8";

:root {
  --usr-scrollbar-width: 0;
		
  --color-base:   #333333;
  --color-main:   #303068;
  --color-sub:    #BC8B2A;
  --color-bg:     #F2F2F2;
  --color-sale:   #E62019;
			
  --button-bg1:   #BC8B2A;
  --button-bg2:   #303068;
  --button-bg3:   #C9C9C9;
  --button-bg4:   #333333;
  --button-bg5:   #BC8B2A;
	
	--ttl-image1: url("../../img/usr/common/ico_title_bg_go.png");
	
	/* 米澤商店ヘッダー */
  --category-header-height: 90px;
  --category-header-bg: #080033;
	
	/* 商品一覧 カートボタン */
	--goods-list-cart-icon-image: url("../../img/usr/common/ico_cart_w.png");
	--goods-list-cart-icon-image-hover: url("../../img/usr/common/ico_cart_go.png");
	
}

/* ----------------------------------
 Header
---------------------------------- */
.pane-header { background-color: var(--category-header-bg);}
#header_box .block-headermenu-list { display: none !important;}
.pane-globalnav { display: none !important;}

/* ----------------------------------
 米澤商店ヘッダー
---------------------------------- */
body.category-menu-on { overflow: hidden;}
body.category-header-fixed .pane-header { opacity: 0;}
body.category-header-fixed #yonezawa_header_wrap { position: fixed; top: 0; left: 0; z-index: 105;}

.pane-category-header-frame { padding-top: var(--category-header-height); position: relative;}
#yonezawa_header_wrap { width: 100%; height: var(--category-header-height); position: absolute; top: 0; left: 0;}
#yonezawa_header { background-color: var(--category-header-bg); position: relative; z-index: 102;}
#yonezawa_header .yonezawa-header-inner {
	height: var(--category-header-height);
  max-width: var(--layout-max-width);
  padding: var(--layout-base-padding);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
	position: relative;
}
#yonezawa_header .yonezawa-header-inner .yonezawa-logo {
	padding: 0;
	margin: 0;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size: var(--font-size-H2);
	font-weight: 700;
	line-height: 1.0;
	color: #FFF;
	position: absolute;
	left: calc(50% - 2em);
	top: calc(50% - 0.5em);
}
#yonezawa_header .yonezawa-header-inner .yonezawa-logo a {
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size: var(--font-size-H2);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.0;
	color: #FFF;
}
#yonezawa_header .yonezawa-headermenu-list { padding-right: 40px; display: flex; align-items: center; column-gap: 32px;}
#yonezawa_header .yonezawa-headermenu-list li {
  height: 64px;
  font-size: var(--font-size-main);
  font-weight: 700;
  color: #FFF;
  word-break: keep-all;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#yonezawa_header .yonezawa-headermenu-list li::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: #FFF 1px solid;
  border-top: #FFF 1px solid;
  position: relative;
	top: -2px;
  display: inline-block;
  transform: rotate(135deg);
	transition: var(--transition); 
}
#yonezawa_header .yonezawa-headermenu-list li:hover { color: var(--color-sub);}
#yonezawa_header .yonezawa-headermenu-list li:hover::after { border-color: var(--color-sub);}
#yonezawa_header .yonezawa-headermenu-list li.active { color: var(--color-sub);}
#yonezawa_header .yonezawa-headermenu-list li.active::after { border-color: var(--color-sub); top: 2px; transform: rotate(-45deg);}

.yonezawa-globalnav { width: 100%; padding: 48px 0; background: #FFF; position: absolute; top: 90px; left: 0; z-index: 102; display: none;}
.yonezawa-globalnav .yonezawa-globalnav-inner { max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
.yonezawa-globalnav .yonezawa-globalnav-inner .design-close { width: 44px; position: absolute; left: calc(50% - 22px); bottom: -64px;}
.yonezawa-globalnav .yonezawa-globalnav-inner .design-close .design-close-btn { box-shadow: var(--box-shadow);}
.yonezawa-globalnav .yonezawa-globalnav-inner .yonezawa-globalnav-inner-category-list { margin: 0 0 24px;}
.yonezawa-globalnav .yonezawa-globalnav-inner .list { display: flex; flex-wrap: wrap;}
.yonezawa-globalnav .yonezawa-globalnav-inner .list li { width: 20%; margin: 0 0 35px 0; font-size: var(--font-size-main);}
.yonezawa-globalnav .yonezawa-globalnav-inner .list li a {
	padding: 0 55px 0 0;
  font-size: var(--font-size-main);
  text-decoration: none;
  color: var(--color-base);
  display: block;
	position: relative;
}
.yonezawa-globalnav .yonezawa-globalnav-inner .list li a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
  right: 50px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.yonezawa-globalnav .yonezawa-globalnav-inner .list li a:hover { text-decoration: none; color: var(--color-sub);}
.yonezawa-globalnav .yonezawa-globalnav-inner .list li a:hover::after { border-right: var(--color-sub) 2px solid; border-top: var(--color-sub) 2px solid;}

@media screen and (max-width: 1200px) {
	.yonezawa-globalnav .yonezawa-globalnav-inner .list li { width: 25%;}
}

/* ----------------------------------
  米澤商店 重要なお知らせピックアップ表示
---------------------------------- */
#header_pickup_important_news { padding: 1px 0 !important;}

/* ----------------------------------
 米澤商店フッター上 注意書き
---------------------------------- */
#yonezawa_common_footer { max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto; position: relative; top: -40px;}
#yonezawa_common_footer .attention-stop-drink { display: flex; align-items: center; column-gap: 20px;}
#yonezawa_common_footer .attention-stop-drink .icon { width: 50px; min-width: 50px;}
#yonezawa_common_footer .attention-stop-drink .indent-list {}
#yonezawa_common_footer .attention-stop-drink .indent-list li { list-style: none; padding-left: 1em; text-indent: -1em; color: var(--color-gray);}

/* ----------------------------------
 Footer
---------------------------------- */
.pane-footer .block-footer-inner { background-color: var(--color-main);}
.pane-footer:has(.block-footer-box-frame) .block-footer-inner::before { background-image: url("../../img/usr/footer/footer_bg_yonezawa.png");}

.pane-footer .block-footer-box.head .logo a { background: url("../../img/usr/common/logo_kantenpapa_w.png") no-repeat left top / 228px auto;}
.pane-footer .block-footer-box.head .logo a img { opacity: 0 !important;}
.pane-footer .block-footer-box.head .logo a:hover { opacity: var(--opacity);}

.pane-footer .block-footer-sns--list li img { opacity: 0 !important;}
.pane-footer .block-footer-sns--list li.sns-x a { background: url("../../img/usr/common/ico_x_w.png") no-repeat center center / 40px auto;}
.pane-footer .block-footer-sns--list li.sns-instagram a { background: url("../../img/usr/common/ico_instagram_w.png") no-repeat center center / 40px auto;}
.pane-footer .block-footer-sns--list li.sns-youtube a { background: url("../../img/usr/common/ico_youtube_w.png") no-repeat center center / 40px auto;}

.pane-footer .block-footernav--item-list li a { color: #FFF;}
.pane-footer .block-copyright { color: #FFF;}
.pane-footer .block-page-top a { border: #FFF 1px solid;}

/* ----------------------------------
 LeftFrame Contents
---------------------------------- */
/* ツリーパーツ */
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener span { background: var(--button-bg2);}
.pane-left-menu ul.block-category-tree--items > li > a:hover,
.pane-left-menu ul.block-genre-tree--items > li > a:hover { background-image: var(--image-arrow-go);}

/* ボタン */
.pane-left-menu .design-button-frame .design-button { border: var(--button-bg2) 2px solid; background-color: var(--button-bg2);}
.pane-left-menu .design-button-frame .design-button:hover { color: var(--button-bg2); background-color: #FFF;}
.pane-left-menu .design-button-frame .design-button:hover::after { border-color: var(--button-bg2);}

/* キーワードで探す */
.pane-left-menu #block_of_searchbox .block-search-box--form .block-search-box--search-submit { border-color: var(--button-bg1); background-color: var(--button-bg1);}
.pane-left-menu #block_of_genretree    { display: none !important;} /* ジャンルで探す */
.pane-left-menu #block_of_categorytree { display: none !important;} /* カテゴリで探す */
.pane-left-menu #block_of_filter       { display: block !important;} /* 絞り込み */

.pane-left-menu #block_of_filter #div_filter15.js-filter-box > div[class^="block-filter--"][class*="-inner"]::before { display: none !important;}
.pane-left-menu #block_of_filter #div_filter15.js-filter-box .pane-block--subtitle + div { border-bottom: none !important;}
.pane-left-menu #block_of_filter #div_filter15 span.block-filter--treeitem-dir > div.block-icon-image--angle-right-bold { display: none !important;}
.pane-left-menu #block_of_filter #div_filter15 .block-filter--treelist-inner-accordion { display: block !important;}
.pane-left-menu #block_of_filter #div_filter15 .block-filter--treelist-inner-accordion ul.js-filter-tree { display: block !important;}
.pane-left-menu #block_of_filter #div_filter15 .block-filter--treeitem-name:hover { background-image: var(--image-arrow-go);}

/* ----------------------------------
 汎用クラス
---------------------------------- */
.design-block-title .ttl { font-family: "Yu Mincho", "YuMincho", serif;}

/* ----------------------------------
 Swiper パーツ
---------------------------------- */
.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next { border: var(--button-bg1) 2px solid; background: var(--button-bg1);}
.swiper-controls .swiper-button-prev:hover::after,
.swiper-controls .swiper-button-next:hover::after { border-right: var(--button-bg1) 2px solid; border-top: var(--button-bg1) 2px solid;}

/* ----------------------------------
 GoodsList
---------------------------------- */
.btn-cart { border: var(--button-bg5) 2px solid; color: #FFF; background-color: var(--button-bg5);}
.btn-cart:hover { background-color: #FFF; color: var(--button-bg5);}
.block-pickup-list-p .block-goods-favorite .block-goods-list--favorite-registed--btn { background-image: url("../../img/usr/common/ico_goodslist_bookmark_reg_btn_go.png");}

/* ----------------------------------
 Category
---------------------------------- */
.page-category #category_top_contents_frame { margin: 0 0 100px;}
.page-category #category_top_contents_frame h2.design-headline { color: #FFF;}
.page-category #category_top_contents_frame .block-category-freespace1 { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important;}
.page-category #category_top_contents_frame .block-category-list--sub  { padding: 60px 0; margin: 0; background: #303068;}
.page-category #category_top_contents_frame .block-category-list--sub .design-block-title { margin: 0 0 50px;}
.page-category #category_top_contents_frame .block-category-list--sub .design-block-title .ttl { color: #FFF;}
.page-category #category_top_contents_frame .block-category-list--sub .design-block-title .eng { color: #707070;}
.page-category #category_top_contents_frame .block-category-list--sub .block-category-style-d .block-category-style-d--item,
.page-category #category_top_contents_frame .block-category-list--sub .block-category-style-t .block-category-style-t--item,
.page-category #category_top_contents_frame .block-category-list--sub .block-category-style-p .block-category-style-p--item,
.page-category #category_top_contents_frame .block-category-list--sub .block-category-style-g .block-category-style-g--item,
.page-category #category_top_contents_frame .block-category-list--sub .block-category-style-l .block-category-style-l--item-name { width: calc((100% - (24px * 3))/4);}

/* ----------------------------------
 GoodsDetail
---------------------------------- */
/* 購入グループマスタ 商品詳細コメント */
body.page-goods.goods-rules-fixed #block_goods_rules_frame { top: var(--category-header-height);}
body.page-goods.goods-rules-fixed #header::before { height: var(--category-header-height);}

/* 左フレーム */
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-prev,
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-next { border-color: var(--button-bg1); background: var(--button-bg1);}
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-prev:hover::after,
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-next:hover::after { border-color: var(--button-bg1);}

/* 右フレーム */
.page-goods .pane-goods-right-side .block-goods-name--text { color: var(--color-base);}
.page-goods .pane-goods-right-side .block-add-cart-qty .spin { background-repeat: no-repeat; background-position: center; -webkit-background-size: 32px 32px; background-size: 32px 32px;}
.page-goods .pane-goods-right-side .block-add-cart-qty .spin.spinminus { background-image: url("../../img/sys/spinminus_yonezawa.png");}
.page-goods .pane-goods-right-side .block-add-cart-qty .spin.spinplus  { background-image: url("../../img/sys/spinplus_yonezawa.png");}

/* カートボタン */
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart-qty .spin.spinminus:hover { background-image: url("../../img/sys/spinminus_yonezawa_on.png");}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart-qty .spin.spinplus:hover  { background-image: url("../../img/sys/spinplus_yonezawa_on.png");}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart-qty .spin img { opacity: 0 !important;}

.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart--btn { color: #FFF;}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart--btn::before { background-image: url("../../img/usr/common/ico_cart_w.png");}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart--btn:hover { color: var(--color-sub);}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-add-cart--btn:hover::before { background-image: url("../../img/usr/common/ico_cart_go.png");}

.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-custom-order--btn { color: #FFF;}
.page-goods .pane-goods-right-side .block-add-cart-button-frame .block-custom-order--btn:hover { color: var(--color-sub);}

/* お気に入り・入荷通知 */
.page-goods .pane-goods-right-side .block-goods-favorite--btn,
.page-goods .pane-goods-right-side .block-goods-favorite-registed--btn,
.page-goods .pane-goods-right-side .block-goods-arrival-notice--btn,
.page-goods .pane-goods-right-side .block-variation-arrival-notice--btn { border: var(--color-main) 2px solid; color: var(--color-main);}
.page-goods .pane-goods-right-side .block-goods-arrival-notice--btn,
.page-goods .pane-goods-right-side .block-variation-arrival-notice--btn { background-image: url(../../img/usr/common/ico_arrival_notice_yonezawa.png);}
.page-goods .pane-goods-right-side .block-goods-arrival-notice-registed--btn { background-image: url(../../img/usr/common/ico_arrival_notice_yonezawa2_on.png);}
.page-goods .pane-goods-right-side .block-goods-arrival-notice--btn:hover,
.page-goods .pane-goods-right-side .block-variation-arrival-notice--btn:hover { border-color: var(--color-sub); color: var(--color-sub); background-image: url(../../img/usr/common/ico_arrival_notice_yonezawa_on.png);}
.page-goods .pane-goods-right-side .block-goods-arrival-notice-registed--btn:hover { background-image: url(../../img/usr/common/ico_arrival_notice_yonezawa2.png);}

.page-goods .pane-goods-right-side .block-goods-favorite--btn::before { background-image: var(--goods-bookmark-icon-blue-solid);}
.page-goods .pane-goods-right-side .block-goods-favorite--btn:hover { border-color: var(--color-sub); color: var(--color-sub);}
.page-goods .pane-goods-right-side .block-goods-favorite--btn:hover::before { background-image: var(--goods-bookmark-icon-gold-solid);}

.page-goods .pane-goods-right-side .block-goods-favorite-registed--btn { border-color: var(--color-sub); color: var(--color-sub);}
.page-goods .pane-goods-right-side .block-goods-favorite-registed--btn::before { background-image: var(--goods-bookmark-icon-gold);}
.page-goods .pane-goods-right-side .block-goods-favorite-registed--btn:hover { color: var(--color-base);}
.page-goods .pane-goods-right-side .block-goods-favorite-registed--btn:hover::before { background-image: var(--goods-bookmark-icon-gray);}

/* バリエーション用ボタン */
.page-goods .pane-goods-right-side .block-goods-variation-arrival-notice--btn:hover { background-image: url(../../img/usr/common/ico_arrival_notice_yonezawa_on.png);}

.page-goods .pane-goods-right-side .block-variation-add-cart--btn { color: #FFF;}
.page-goods .pane-goods-right-side .block-variation-add-cart--btn::before { background-image: url("../../img/usr/common/ico_cart_w.png");}
.page-goods .pane-goods-right-side .block-variation-add-cart--btn:hover { color: var(--color-sub);}
.page-goods .pane-goods-right-side .block-variation-add-cart--btn:hover::before { background-image: url("../../img/usr/common/ico_cart_go.png");}

.page-goods .pane-goods-right-side .block-variation-favorite .block-variation-favorite--btn:hover { border-color: var(--button-bg1); background-color: #FFF;}
.page-goods .pane-goods-right-side .block-variation-favorite .block-variation-favorite--btn:hover::before { background-image: var(--goods-bookmark-icon-gold-solid);}
.page-goods .pane-goods-right-side .block-variation-favorite .block-variation-favorite-registed--btn::before { background-image: var(--goods-bookmark-icon-gold);}
.page-goods .pane-goods-right-side .block-variation-favorite .block-variation-favorite-registed--btn:hover   { border-color: var(--button-bg3);}

/* 追従カート（js）*/
.page-goods #block_add_cart_fixed_frame { background: rgba(48,48,104,0.15);}
.page-goods #block_add_cart_fixed_frame .cart-btn-frame a { color: #FFF;}
.page-goods #block_add_cart_fixed_frame .cart-btn-frame a:hover { color: var(--color-sub);}

/* タブコンテンツ */
.page-goods #goods_detail_tab_contents_frame #goods_detail_contents_frame::before { background: #F4F4F8;}

/* 左フレーム */
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-prev,
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-next { border-color: var(--button-bg1); background: var(--button-bg1);}
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-prev:hover::after,
.page-goods .pane-goods-left-side .block-goods-main-gallery .swiper-button-next:hover::after { border-color: var(--button-bg1);}
.page-goods .lb-nav a.lb-prev::before,
.page-goods .lb-nav a.lb-next::before { border-color: var(--button-bg1); background: var(--button-bg1);}
.page-goods .lb-nav a.lb-prev:hover::after,
.page-goods .lb-nav a.lb-next:hover::after { border-color: var(--button-bg1);}