@charset "UTF-8";
/* ----------------------------------
 COMMON
---------------------------------- */
/* font */
.serif { font-family: 'Noto Serif JP',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500;}
/* layout */
.container { margin: 0 15px;}
.for-pc { display: none;}
.main-color {color: #976F11;}

#shop_top .shop-top-banner { padding: 0; margin: 0; text-align: center;}
#shop_top .shop-top-banner img { width: 100%;}

/* ----------------------------------
 SHOP CATEGORY/GENRE TREE
---------------------------------- */
#footer_js-tree .list-item--chevron > div.list-item__center .level0:after  { background-color: #CC0000;}
:not(.list-item--chevron) > div.list-item__center.level1 span { border-color: #CC0000;}
#footer_js-tree .list-item__center.level0 { background: #F8F8F8; color: #000; border-bottom: 2px solid #976F11;}
#footer_js-tree .list-item__center.level0 { font-family: 'Noto Serif JP',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500; display: flex; align-items: flex-end;}
#footer_js-tree .block-goods-list__navi .list-item__center.level0 {font-size: 0; height: 50px; }
#footer_js-tree .block-goods-list__navi .list-item__center.level0::after { font-size: 18px;}
#footer_js-tree .block-goods-list__navi .list-item__center.level0 span::before,
#footer_js-tree .block-goods-list__navi .list-item__center.level0 span::after{ background: #111;}
#footer_js-tree .block-goods-list__navi #js_navi_cateogry_tree .list-item__center.level0:after {content: 'ショップカテゴリから探す';}
#footer_js-tree .block-goods-list__navi #js_navi_genre_tree .list-item__center.level0:after {content: '目的から探す';}
#footer_js-tree .block-goods-list__navi-slideside .list { background: #F8F8F8; font-size: 12px;}
#footer_js-tree .block-goods-list__navi--menu > ul { border-top: 1px solid #CCCCCC;}

/* ----------------------------------
 SHOP HEADER
---------------------------------- */
#shop_header { height: 100px; border-bottom: #CCCCCC 2px solid; margin-bottom: 15px; background: #FFF;}
body:has(#sora_visual) #shop_header { border: none; margin-bottom: 0;}
#shop_header .shop-header-inner {
	width: 100%;
  max-width: 1640px;
  height: 100%;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF;
}
#shop_header .shop-header-inner .shop-logo { width: 220px;}
#shop_header .shop-header-inner .shop-menu-box { width: calc(100% - 260px); position: relative; z-index: 9;}
#shop_header .shop-header-inner ul.shop-menu-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 60px;}
#shop_header .shop-header-inner ul.shop-menu-list li a { 
	font-family: var(--shop-font-mincho);
	font-size: 16px;
	text-decoration: none;
	line-height: 1.0;
	color: #000;
	display: flex;
	align-items: center;
	position: relative;
}
#shop_header .shop-header-inner ul.shop-menu-list li a:hover { color: #CC0000;}
#shop_header .shop-header-inner ul.shop-menu-list li a::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 8px;
  border-right: #212121 1px solid;
  border-top: #212121 1px solid;
  display: inline-block;
  transform: rotate(45deg);
}

#shop_header .shop-menu-list-wrap form { width: 100%; min-width: 100%; margin: 0 0 15px;}
#shop_header .shop-menu-list-wrap form::before { content: 'ショップ内検索'; margin: 15px 0 5px; font-family: var(--shop-font-mincho); font-size: 14px; display: block;}
#shop_header .shop-menu-list-wrap form .block-search-box--form { width: 100%; border: #D5D1C0 2px solid; background: #F4F5F6;}
#shop_header .shop-menu-list-wrap form .block-search-box--form input.block-search-box--keyword { width: calc(100% - 42px); padding: 0 0 0 15px; border: none; outline: none; font-family: var(--shop-font-mincho); background: transparent;}
#shop_header .shop-menu-list-wrap form .block-search-box--form input.block-search-box--keyword::placeholder { opacity: 0;}
#shop_header .shop-menu-list-wrap form .block-search-box--form .block-search-box--search-submit { width: 42px; height: 42px; background: #F4F5F6 url("../img/common/ico_search.png") center center no-repeat; -webkit-background-size: 16px 16px; background-size: 16px 16px;}

@media screen and (max-width: 1200px) {
	#shop_header .shop-header-inner ul.shop-menu-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 30px;}
	#shop_header .shop-header-inner ul.shop-menu-list li a { font-size: 14px;}
}
@media screen and (max-width: 1000px) {
	#shop_header { height: 76px;}
	#shop_header .shop-header-inner .shop-logo { width: 160px;}
	#shop_header .shop-header-inner .shop-menu-box { width: calc(100% - 200px); position: relative; z-index: 9;}
	#shop_header .shop-header-inner .shop-menu-switch {
		width: 100px;
		height: 44px;
		margin: 0 0 0 auto;
		border: #DEDEDE 1px solid;
		border-radius: 4px;
		font-family: var(--shop-font-mincho);
		font-size: 14px;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	#shop_header .shop-header-inner .shop-menu-switch::after {
		content: '';
		width: 6px;
		height: 6px;
		margin: 0 0 0 6px;
		border-right: #212121 1px solid;
		border-top: #212121 1px solid;
		display: inline-block;
		transform: rotate(135deg);
		transition: 0.3s;
	}
	#shop_header .shop-header-inner .shop-menu-switch.active::after { transform: rotate(-45deg); position: relative; top: 2px;}
	#shop_header .shop-header-inner .shop-menu-list-wrap {
	  width: 50vw;
	  padding: 10px 24px;
	  border-radius: 8px;
	  display: none;
	  background: #FFF;
	  position: absolute;
	  top: 54px;
	  right: 0;
	  z-index: 99999;
		box-shadow: 0 3px 6px 0 rgb(0,0,0,0.1);
	}
	#shop_header .shop-header-inner ul.shop-menu-list { display: block;}
	#shop_header .shop-header-inner ul.shop-menu-list li { width: 100%;}
	#shop_header .shop-header-inner ul.shop-menu-list li + li { border-top: #EEE 1px solid;}
	#shop_header .shop-header-inner ul.shop-menu-list li a {
		min-height: 56px;
		font-family: var(--shop-font-mincho);
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		display: flex;
		align-items: center;
		position: relative;
	}
	#shop_header .shop-header-inner ul.shop-menu-list li a::after { position: absolute; top: calc(50% - 3px); right: 10px;}
}

@media screen and (min-width: 1001px) {
	#shop_header .shop-header-inner .shop-menu-switch { display: none !important;}
	#shop_header .shop-header-inner .shop-menu-list-wrap { display: flex !important; justify-content: flex-end; align-items: center; gap: 0 50px;}
	#shop_header .shop-header-inner .shop-menu-list-wrap form { width: 250px; min-width: 250px; margin: 0;}
	#shop_header .shop-header-inner .shop-menu-list-wrap form::before { display: none;}
	#shop_header .shop-header-inner .shop-menu-list-wrap form .block-search-box--form input.block-search-box--keyword::placeholder { opacity: 1.0;}
}

/* ----------------------------------
 SHOP SEARCHBOX
---------------------------------- */
#block_of_searchbox.block-search-box { padding: 0; background: none;}

/* ----------------------------------
 SHOP FOOTER BANNER
---------------------------------- */
#shop_footer_banners { margin: 40px 15px;}
#shop_footer_banners ul li + li { margin: 15px 0 0 0;}

/* ----------------------------------
 SHOP FOOTER
---------------------------------- */
#shop_footer { margin: 40px 0; background: none;}
#shop_footer .shop-footer-logo { padding: 0; margin: 40px 0 0; text-align: center;}
#shop_footer .shop-footer-logo img { width: 220px; vertical-align: top;}
#shop_footer .shop-footer-menu { display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#shop_footer .shop-footer-menu li { width: 50%;}
#shop_footer .shop-footer-menu li:nth-child(odd) { border-right: 1px solid #ccc; }
#shop_footer .shop-footer-menu li:nth-child(odd)::before { content: ""; display: block; width: 100vw; height: 1px; background: #ccc;}
#shop_footer .shop-footer-menu li:nth-child(1)::before { display: none;}
#shop_footer .shop-footer-menu a { display: block; position: relative; padding: 14.5px; height: 100%; display: flex; align-items: center;}
#shop_footer .shop-footer-menu a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #111; border-top: 2px solid #111; position: absolute; right: 15px; top: calc(50% - 4px); display: block; transform: rotate(45deg);}

/* ----------------------------------
 SHOP-TOP TOPICS
---------------------------------- */
.block-category-list--topic .block-top-common--header { display: none;}

/* ----------------------------------
 SHOP-TOP VISUAL
---------------------------------- */
.block-category-list--topic { margin: 20px 0 0;}
#shop_mainvisual h1 img { border-radius: 8px;}
#shop_mainvisual .slider-wrap ul li a { border-radius: 8px; display: flex; overflow: hidden; width: fit-content;}
/* #shop_mainvisual .slider-wrap ul li+li { margin-top: 20px;} */
#shop_mainvisual .bx-wrapper .bx-controls-direction { position: relative;}
#shop_mainvisual .bx-wrapper .bx-controls-direction a { width: 32px; height: 32px; margin: 10px 0 0 0; position: absolute; top: 100%; outline: 0; text-indent: -9999px; z-index: 10 !important; background: none;}
#shop_mainvisual .bx-wrapper .bx-controls-direction a::after { content: ""; width: 14px; height: 14px; border-right: 2px solid #111; border-top: 2px solid #111; position: absolute; right: 10px; top: calc(50% - 7px); display: block; transform: rotate(45deg);}
#shop_mainvisual .bx-wrapper .bx-controls-direction a.bx-prev::after { transform: rotate(-135deg);}
#shop_mainvisual .bx-wrapper .bx-controls-direction a.bx-next { right: 0;}
#shop_mainvisual .bx-wrapper .bx-pager { padding-top: 20px; text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #E0E0E0;}
#shop_mainvisual .bx-wrapper .bx-pager.bx-default-pager a { width: 12px; height: 12px; margin: 0 10px; outline: 0; border-radius: 12px; background: #E0E0E0; text-indent: -9999px; display: block;}
#shop_mainvisual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#shop_mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active,
#shop_mainvisual .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #111111;}
#shop_mainvisual .bx-wrapper .bx-pager-item,
#shop_mainvisual .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; vertical-align: bottom;}
#shop_mainvisual .bx-wrapper .bx-pager-item { font-size: 0; line-height: 0;}

/* 特集 */
#shop_mainvisual .headline { margin: 0 0 28px;} 
#shop_mainvisual h2.headline-title { font-size: 30px; font-weight: 600; text-align: center; line-height: 1.2; margin: 0;} 
#shop_mainvisual h2.headline-title > .en { font-size: 12px; color: #976F11; display: block; margin: 10px 0 0;} 

/* ----------------------------------
 SHOP-TOP SEARCH
---------------------------------- */
#block_of_searchbox { margin: 0 15px 40px; background: #F8F8F8;}
#block_of_searchbox .pane-block--title { font-weight: normal; background: #F8F8F8;}

/* ----------------------------------
 SHOP FEATURE
---------------------------------- */
#shop_features h2.image-title { margin: 0; text-align: center;}
#shop_features h2.image-title img { width: 80px; vertical-align: top;}
#shop_features { padding: 0; margin: 0 15px 30px; box-sizing: border-box;}
#shop_features .headline { margin: 0 0 25px 0; text-align: center;}
#shop_features .banners { display: flex; justify-content: space-between; flex-wrap: wrap;}
#shop_features .banners li { width: calc(50% - 7.5px); margin-bottom: 15px;}
#shop_features .banners li img { vertical-align: top;}
#shop_features .banners li .image { margin: 0 0 10px 0;}
#shop_features .banners li .text  { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

/* ----------------------------------
 SHOP-TOP EVENT
---------------------------------- */
.block-category-list--event > div:nth-child(odd) {background-color: #F8F8F8; padding: 30px 0 0;}
/* headline-title */
.block-category-list--event h2.headline-title { font-size: 30px; font-weight: 600; text-align: center; line-height: 1.2;} 
.block-category-list--event h2.headline-title > .en { font-size: 12px; color: #976F11;} 
.block-category-list--event .headline .note  { font-size: 12px; text-align: center; margin: 10px auto 0; width: 60%;} 

/* ----------------------------------
 SHOP-TOP 初めての方へ
---------------------------------- */
#beginner_guide { margin: 60px 0 0; text-align: center; background: url(../img/top/beginner_guide_sp_202311.jpg) no-repeat center/cover; height: 133.33vw; display: flex; align-items: center; justify-content: center;}
#beginner_guide .beginner_guide-inner { margin-top: -10px;}
#beginner_guide .beginner_guide-ttl { font-size: 20px; margin: 0 0 10px;}
#beginner_guide .beginner_guide-name { font-size: 14px; margin: 0 0 21px;}
#beginner_guide .beginner_guide-name .furigana { font-size: 12px;}
#beginner_guide .beginner_guide-name .name { font-size: 16px; font-weight: bold;}
#beginner_guide .beginner_guide-text { font-size: 16px; font-weight: bold;}
#beginner_guide .beginner_guide-btn-wrap { margin: 20px 0 0;}
#beginner_guide .beginner_guide-btn { font-size: 14px; color: #976F11; border-radius: 45px; border: 1px solid #976F11; width: fit-content; width: 63.6%; display: flex; align-items: center; justify-content: center; margin: auto; padding: 17px; font-weight: bold; background: #FFFFFF;}
#beginner_guide .beginner_guide-img .ttl { text-align: center; margin: 0 0 10px;}
#beginner_guide .beginner_guide-img .ttl img { width: 84.8%;}
#beginner_guide .beginner_guide-img .illust { text-align: center; margin: 0 0 15px;}
#beginner_guide .beginner_guide-img .illust img { width: 79.86%;}
@media (max-width:374px) {
  #beginner_guide .beginner_guide-inner { margin-top: 0px;}
}

/* ----------------------------------
 イベントページ
---------------------------------- */
#shop_header { height: 80px; display: flex; align-items: center; justify-content: center;}
#shop_header a { display: flex; max-width: 220px;}

#event-page--head-contents { margin: 0 20px 30px;}
#event-page--head-contents .mv-wrap { margin: 20px 0 30px; }
#event-page--head-contents .contents-text { font-size: 14px; line-height: 1.6; letter-spacing: 0.09em;}
#event-page--head-contents .contents-text .text_red { color: #ff0000;}
:where(#event-page--head-contents .contents-text) p { margin-bottom: 20px;}
:where(#event-page--head-contents .contents-text) p:last-child { margin-bottom: 0;}
h1.block-event-page--header, h1.block-category-list--header, h1.block-genre-page--header { font-size: 18px;}
/* img */
.block-thumbnail-t--goods-image .img-center img { width: 100%; height: 100%; object-fit: cover;}
.block-thumbnail-t--items li.nostock .block-thumbnail-t--goods-image::after { border-radius: 8px; }
.block-thumbnail-t--goods-image figure { width: 100%;}
/* ----------------------------------
 プレミアム配送
---------------------------------- */
.block-top-event--goods .block-thumbnail-t--goods-image figure{ border-radius: 8px; overflow: hidden; }
.block-top-event--goods .block-icon { margin: 10px 0 0;}

/* ----------------------------------
 フリーページ 共通
---------------------------------- */
#shop_footer { border-top: 1px solid #E0E0E0;}
.page-category #shop_footer { border-top:none}

/* ----------------------------------
 バリエーションのデザイン適用
---------------------------------- */
.page-goods .block-variation.block-size { margin: 0 15px 5px;}
.page-goods .block-variation .block-variation--item-list { background-color: #F8F8F8; gap: 10px 5px; padding: 10px;}
.page-goods .block-variation .block-variation--item { width: calc((100% - (5px * 2)) / 3); margin: 0;}
.page-goods .block-variation--item .block-variation--item-term { padding: 4px 0; border-radius: 5px;}
.page-goods .block-variation--item .block-variation--item-term span { font-size: 14px;}
.page-goods .block-variation--item.active .block-variation--item-term { background-color: #FFEFEF;}

/* ----------------------------------
 トップページ プレミアム配送
---------------------------------- */
.block-category-list--event > #E_32pre { padding: 15px 0 0;}
.page-category .premium--contents { margin: 0 15px;}
.page-category .premium--contents .premium--main .mainview { margin: 0 0 20px; }
.page-category .premium--contents .premium--main .mainview-illust { text-align: center; margin: 0 0 20px; }
.page-category .premium--contents .premium--main .mainview-illust img { width: 88.26%;}
.page-category .premium--contents h2.headline-title { font-size: 21px; letter-spacing: 0.06em; line-height: 1.5;}
@media (max-width:374px) {
  .headline-title br { display: none;}
}

/* ----------------------------------
 イベントページ プレミアム配送
---------------------------------- */
.page-event #event-page--head-contents.event--e3201 { margin-right: 0; margin-left: 0; }
.page-event #event-page--head-contents.event--e3201 .mainview,
.page-event #event-page--head-contents.event--e3201 .contents-text { margin-right: 20px; margin-left: 20px;}
.page-event .event--e3201 .mainview { margin: 0 0 30px; }
.page-event .event--e3201 .contents-text { margin: 0 0 40px; }
.page-event .event--e3201 .schedule { background-color: #fbf7ef; padding: 30px 0;}
.page-event .event--e3201 .schedule .schedule-ttl { text-align: center; margin: 0 0 20px; font-size: 19px;}
.page-event .event--e3201 .schedule .schedule-img { text-align: center;}
.page-event .event--e3201 .schedule .schedule-img img { width: 89.33%;}
.page-event .event--e3201 .schedule .note { font-size: 10px; text-align: center; margin: 30px 0 0;}