@charset "UTF-8";

/* ----------------------------------
 COMMON
---------------------------------- */
:root {
  --shop-font-mincho: "Shippori Mincho", 'Noto Serif JP',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#header { margin-bottom: 0;}
.pane-topic-path { display: none;}
/* font */
.serif { font-family: 'Noto Serif JP',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500;}
/* layout */
.for-sp { display: none;}
.block-category-list--header-freespace { display: none;}
.main-color { color: #976F11;}

/* ----------------------------------
 over write
---------------------------------- */
/* --- layout.css --- */
.block-genre-tree--items.block-genre-tree--level2 > li + li::before,
.block-genre-tree--items.block-genre-tree--level3 > li + li::before,
.block-genre-tree--items.block-genre-tree--level4 > li + li::before { border-top-style: solid; width: 100%; left: 0;}

/* 色変更 */
#block_of_categorytree .child-tree-header .switch::before, #block_of_categorytree .child-tree-header .switch::after,
#block_of_genretree .child-tree-header .switch::before,
#block_of_genretree .child-tree-header .switch::after { background-color: #CC0000;}
#block_of_categorytree .block-category-tree--item__open a:after, #block_of_categorytree .block-category-tree--item a:after { border-color: #CC0000;}

/* 目的から探す */
.block-genre-tree--items::after { display: none;}
#block_of_genretree.shop-genre-tree .block-genre-tree--level2 > li { background-color: transparent;}
.block-genre-tree--item__open a:after, .block-genre-tree--item a:after { border-color: #CC0000;}

/* 下層ページコンテンツ */
.page-event .pane-contents { margin-top: 30px;}

/* 左メニュー */
.block-ranking-r--goods-image figure,
.block-thumbnail-t--goods-image figure { border-radius: 8px; overflow: hidden;}
#block_of_categorytree .block-category-tree--items:not(.block-category-tree--level-1)::after { border-top: none;}

/* 右 */
.block-top-event--goods { font-display: 16px;}

/* もっと見る */
.more-button a { font-size: 16px; transition: 0.3s;}
.more-button a:after { border-color: #111;}
.more-button a:hover { color: #976F11;}
.more-button a:hover:after { border-color: #976F11;}

/* ----------------------------------
 SHOP LEFT
---------------------------------- */
#block_of_categorytree,
#block_of_genretree,
#block_of_searchbox  { background-color: #F8F8F8; border-radius: 5px;}
#block_of_categorytree .pane-block--title,
#block_of_genretree .pane-block--title { background: transparent; color: #000; font-size: 18px; border-bottom: 2px solid #976F11;}
#block_of_categorytree .pane-block--title .small,
#block_of_genretree .pane-block--title .small {font-size: 0.77em;}
#block_of_searchbox .pane-block--title { font-weight: normal; background: #F8F8F8;}
#block_of_searchbox .pane-block--title { background: #F8F8F8;}
#block_of_leftmenu_bottom .left_bottom_banners li { margin: 0 0 10px 0; text-align: center;}
#block_of_leftmenu_bottom .left_bottom_banners li img { vertical-align: top;}

/* ----------------------------------
 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: 100;
		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
---------------------------------- */
.bnr-footer { display: block;}
.bnr-footer img { width: 100%;}
#shop_footer { padding: 50px 0; background: #FFF;}
#shop_footer .shop-footer-inner { max-width: 1640px; padding: 0 20px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#shop_footer .shop-footer-logo { width: 260px; padding: 0 30px 0 0; margin: 0; border-right: #E0E0E0 1px solid;}
#shop_footer .shop-footer-logo img { width: 230px; vertical-align: top;}
#shop_footer .shop-footer-menu { width: calc(100% - 260px - 380px); padding: 0 0 0 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px;}
#shop_footer .shop-footer-menu li { font-size: 14px; font-weight: 700;}
#shop_footer .shop-footer-menu li a { padding: 0 0 0 20px; transition: 0.3s; position: relative; display: block;}
#shop_footer .shop-footer-menu li a::before { content: ""; width: 8px; height: 8px; border-right: 1px solid #111; border-top: 1px solid #111; display: inline-block; transform: rotate(45deg); position: absolute; top: calc(50% - 4px); left: 0;}
#shop_footer .shop-footer-menu li a:hover { text-decoration: underline;}
#shop_footer .line-bnr { width: 360px; margin: 0 0 0 20px;}

@media screen and (max-width: 1200px) {
	#shop_footer .shop-footer-inner { flex-wrap: wrap;}
	#shop_footer .shop-footer-menu { width: calc(100% - 260px);}
	#shop_footer .line-bnr { margin: 40px auto 0;}
}

/* ----------------------------------
 SHOP-TOP TOPICS
---------------------------------- */
.block-category-list--topic .block-top-common--header { font-family: 'Noto Serif JP',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-weight: 500;}
.block-category-list--topic .block-top-topic--next-page a:after { border-color: #CC0000;}

/* ----------------------------------
 SHOP-TOP BANNER
---------------------------------- */
.shoptop--bnr-guide--wrap { margin: 80px 0 0;}
.shoptop--bnr-guide--wrap a { border-radius: 10px; display: block; overflow: hidden;}
.shoptop--bnr-guide--wrap a img { vertical-align: bottom;}

/* ----------------------------------
 SHOP-TOP 初めての方へ
---------------------------------- */
#beginner_guide { margin: 80px 0 0; text-align: center;}
#beginner_guide,
#beginner_guide .beginner_guide_wrap { height: 500px;}
#beginner_guide .beginner_guide_wrap { background: url(../img/top/beginner_guide_202311.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center; width: 100%; position: absolute; right: 0;}
#beginner_guide .beginner_guide-inner { padding-top: 50px;}
#beginner_guide .beginner_guide-ttl { font-size: 25px; margin: 0 0 10px;}
#beginner_guide .beginner_guide-name { font-size: 16px; margin: 0 0 21px;}
#beginner_guide .beginner_guide-name .furigana { font-size: 12px;}
#beginner_guide .beginner_guide-name .name { font-size: 24px; font-weight: bold;}
#beginner_guide .beginner_guide-text { font-size: 20px; font-weight: bold;}
#beginner_guide .beginner_guide-btn-wrap { margin: 10px 0 0;}
#beginner_guide .beginner_guide-btn { font-size: 16px; color: #976F11; border-radius: 45px; border: 1px solid #976F11; width: fit-content; min-width: 210px; display: flex; align-items: center; justify-content: center; margin: auto; padding: 12px; font-weight: bold; background: #FFFFFF;}
#beginner_guide .beginner_guide-img .ttl { text-align: center; margin: 0 0 15px;}
#beginner_guide .beginner_guide-img .ttl img { width: 475px;}
#beginner_guide .beginner_guide-img .illust { text-align: center; margin: 0 0 10px;}
#beginner_guide .beginner_guide-img .illust img { width: 395px;}

/* ----------------------------------
 イベントページ
---------------------------------- */
/* contents */
#event-page--head-contents .mv-wrap { margin: 20px 0 50px; }
#event-page--head-contents .contents-text { text-align: center; font-size: 16px; 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: 30px;}
:where(#event-page--head-contents .contents-text) p:last-child { margin-bottom: 0;}
/* h1 */
h1.block-event-page--header, 
h1.block-category-list--header, 
h1.block-genre-page--header { font-size: 24px;}
/* img */
.block-thumbnail-t--goods-image .img-center img { width: 100%; height: 100%; object-fit: cover;}

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

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

/* ----------------------------------
 トップページ プレミアム配送
---------------------------------- */
.page-category .premium--contents .premium--main .mainview { margin: 0 0 40px; }
.page-category .premium--contents .premium--main .mainview-illust { text-align: center; margin: 0 0 30px; }
.page-category .premium--contents .premium--main .mainview-illust img { width: 504px;}
.page-category .premium--contents h2.headline-title { font-size: 24px; letter-spacing: 0.06em; line-height: 1.5;}

/* ----------------------------------
 イベントページ プレミアム配送
---------------------------------- */
.page-event .event--e3201 .mainview { margin: 0 0 60px; }
.page-event .event--e3201 .contents-text { margin: 0 0 40px; }
.page-event .event--e3201 .schedule { background-color: #fbf7ef; padding: 38px 0 17px; border-radius: 10px;}
.page-event .event--e3201 .schedule .schedule-ttl { text-align: center; margin: 0 0 7px; font-size: 24px;}
.page-event .event--e3201 .schedule .note { font-size: 13px; text-align: right; margin: 12px 11px 0 0;}