/* モールで足した分。今のお店の CSS（theme.css）のあとに読む。 */

/* どのお店のカートか（カート）・どのお店の表記か（特定商取引法に基づく表記） */
.vv-cartShop{width:100%;margin:24px 0 8px;font-family:var(--vv-serif);font-size:18px;font-weight:600;color:var(--vv-heading);text-align:left;}
@media (min-width:768px){.vv-cartShop{width:80%;margin:24px 10% 8px;}}
.vv-lawShop{margin:32px 0 12px;font-family:var(--vv-serif);font-size:20px;font-weight:600;color:var(--vv-heading);}
.vv-lawShop:first-of-type{margin-top:8px;}
.vv-cartShop::before,.vv-lawShop::before{content:"";display:inline-block;width:26px;height:16px;margin-right:8px;vertical-align:-2px;background:var(--vv-fish) center/contain no-repeat;}
.vv-cartShop a{color:inherit;}

/* お店のページの頭（看板・ひとこと・お店のレビュー） */
.vv-shopIntro{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;}
.vv-shopIntro__banner{width:100%;max-height:280px;object-fit:cover;border-radius:6px;}
.vv-shopIntro__text{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.vv-shopIntro__logo{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.vv-shopIntro__catch{margin:0;font-family:var(--vv-serif);font-size:18px;font-weight:600;color:var(--vv-heading);}
.vv-shopIntro__rating{margin:0 0 0 auto;font-size:14px;color:var(--vv-muted);}
.vv-shopRating{font-size:13px;color:var(--vv-muted);margin:0 0 6px;}
@media (max-width:767px){.vv-shopIntro__rating{margin-left:0;}}

/* お知らせ（レビューを受け付けました など） */
.vv-flash{margin:12px 0;padding:10px 14px;border-left:3px solid var(--vv-accent);border-radius:4px;background:var(--vv-sand);color:var(--vv-ink);font-size:14px;}
.vv-flash--error,.vv-flash--warning{border-left-color:#b42318;background:#fff4f2;}

/* 星（レビュー） */
.vv-stars{color:#f59e0b;letter-spacing:2px;white-space:nowrap;}
.vv-reviewRole{margin-top:40px;}
.vv-reviewRole__summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px;font-size:15px;}
.vv-reviewRole__summary .vv-stars{font-size:20px;}
.vv-reviewRole__item{padding:14px 0;border-bottom:1px dotted #ccc;}
.vv-reviewRole__itemHead{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;}
.vv-reviewRole__itemTitle{font-weight:700;color:var(--vv-ink);}
.vv-reviewRole__itemMeta{font-size:12px;color:var(--vv-muted);}
.vv-reviewRole__itemBody{margin:6px 0 0;white-space:pre-line;font-size:14px;}
.vv-reviewRole__actions{margin-top:16px;}
.vv-score{display:flex;gap:16px;flex-wrap:wrap;}
.vv-score label{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}

/* 合計の箱の「カートに戻る」「ご注文手続きに戻る」。EC-CUBE の CSS が文字を白にするので、白地で読めるようにする。 */
.ec-totalBox .ec-totalBox__btn a.ec-blockBtn--cancel{color:var(--vv-primary);}
.ec-totalBox .ec-totalBox__btn a.ec-blockBtn--cancel:hover{color:var(--vv-primary-2);}

/* 商品ページの動画（スライダーの先頭）。写真と同じ正方形に収める */
.vv-videoSlide video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #000; }
.vv-videoThumb { position: relative; }
.vv-videoThumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vv-videoThumb__play::before { content: ""; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.vv-videoThumb__play::after { content: ""; position: absolute; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }

/* 販売の設定（予約・数量限定・タイムセール） */
.ec-productRole .ec-productRole__tag.vv-tag--sale { border-color: #DE5D50; color: #DE5D50; }
.vv-sale .price01-default { text-decoration: line-through; }
.vv-planNote { margin: 4px 0 8px; font-size: 14px; color: #525263; }
.vv-planNote--sale { color: #DE5D50; font-weight: bold; }
.vv-cardTags { margin: 4px 0 0; }
.vv-cardTags span { display: inline-block; margin-right: 4px; padding: 0 6px; border: 1px solid #ccc; border-radius: 2px; font-size: 12px; color: #525263; }
.vv-cardTags span.vv-tag--sale { border-color: #DE5D50; color: #DE5D50; }
.vv-cardRegular { margin: 0; font-size: 13px; color: #888; }

/* 商品の種類（重さ・サイズ違い） */
.vv-variants .ec-select { margin-bottom: 8px; }
.vv-variants .ec-select label { display: block; margin-bottom: 4px; font-weight: bold; }
.vv-variants select { width: 100%; max-width: 360px; }

/* 注文履歴の「領収書を発行する」 */
.vv-receiptBtn { margin-bottom: 16px; }

/* 再入荷のお知らせ */
.vv-restock { margin: 8px 0 16px; }
.vv-restock__row { margin-bottom: 8px; }
.vv-restock__row p { margin: 0 0 4px; font-size: 14px; }
/* おすすめ・最近チェックした商品（横に流す小さな棚） */
.vv-miniShelf { margin-top: 24px; }
.vv-miniShelf__list { display: flex; gap: 12px; overflow-x: auto; margin: 0; padding: 0 0 8px; list-style: none; -webkit-overflow-scrolling: touch; }
.vv-miniShelf__item { flex: 0 0 160px; }
.vv-miniShelf__item a { color: inherit; text-decoration: none; }
.vv-miniShelf__item img { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 4px; background: #f3efe9; }
.vv-miniShelf__title { margin: 6px 0 2px; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vv-miniShelf__price { margin: 0; font-weight: bold; color: #c8471b; }
@media (max-width: 767px) { .vv-miniShelf__item { flex-basis: 128px; } .vv-miniShelf__item img { width: 128px; height: 128px; } }

/* 商品Q&A */
.vv-qaRole { margin-top: 24px; }
.vv-qa { padding: 12px 0; border-bottom: 1px dotted #ccc; }
.vv-qa p { margin: 0 0 6px; line-height: 1.7; }
.vv-qa__mark { display: inline-block; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #525263; color: #fff; font-size: 12px; font-weight: bold; line-height: 22px; text-align: center; }
.vv-qa__mark--a { background: #c8471b; }
.vv-qa__meta { display: block; margin-left: 30px; color: #888; font-size: 12px; }
.vv-qa__ask { margin-top: 12px; }
.vv-qa__ask summary { cursor: pointer; list-style: none; }
.vv-qa__ask summary::-webkit-details-marker { display: none; }
.vv-qa__ask form { margin-top: 12px; }
.vv-qa__ask .ec-input { margin-bottom: 8px; }
.vv-qa__ask textarea, .vv-qa__ask input { width: 100%; }
/* 注文のメッセージ */
.vv-thread { margin: 16px 0; }
.vv-thread__item { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; }
.vv-thread__item--customer { margin-left: 15%; background: #fdf1ea; }
.vv-thread__item--shop { margin-right: 15%; background: #f3f3f3; }
.vv-thread__who { margin: 0 0 4px; color: #888; font-size: 12px; }
.vv-thread__text { margin: 0; }

/* 商品一覧の絞り込み・ランキング */
.vv-filter { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid #e5ddd5; border-radius: 6px; background: #fffaf6; }
.vv-filter summary { cursor: pointer; font-weight: bold; }
.vv-filter__form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.vv-filter__item { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vv-filter__item select { width: auto; min-width: 140px; }
.vv-filter__item input[type=number] { width: 96px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.vv-filter__check { display: inline-flex; align-items: center; gap: 4px; }
.vv-filter__form .ec-inlineBtn--action, .vv-filter__form .ec-inlineBtn { margin: 0; }
.vv-rankingLink { margin: 0 0 8px; text-align: right; font-size: 14px; }
.vv-rankingTabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vv-rankingTabs a { display: inline-block; padding: 4px 14px; border: 1px solid #e5ddd5; border-radius: 999px; color: #525263; text-decoration: none; }
.vv-rankingTabs a.is-active { border-color: #c8471b; background: #c8471b; color: #fff; }
.vv-ranked { position: relative; }
.vv-rank { position: absolute; top: 8px; left: 18px; z-index: 1; padding: 2px 8px; border-radius: 4px; background: #525263; color: #fff; font-size: 13px; font-weight: bold; }
.vv-rank--1 { background: #c9a227; }
.vv-rank--2 { background: #9aa0a6; }
.vv-rank--3 { background: #b06a36; }
@media (max-width: 767px) { .vv-rankingLink { text-align: left; } }

/* 魚のボタン（カートに入れる・レジに進むなど）。ボタンそのものを魚の形に切ると、ミサイルのように見えたり、
   狭いカードで文字が窮屈になったりするので、角の丸いふつうのボタンにして、文字の前に白い魚のしるしを置く。
   しるしの目はくり抜いてあるので、ボタンの色（マウスを乗せたときの濃い色も）がそのまま目になる。
   マウスを乗せると、魚が海から跳ねて出て、また海に入る（--vv-fish-leap の中の SVG アニメーション）。
   跳ねる分だけしるしの枠を上下左右に広げるが、左右は負のマージンで打ち消し、文字の位置は変えない。 */
:root {
  --vv-fish-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath fill-rule='evenodd' d='M2 16C10 5 26 2 40 8l10-6-3 14 3 14-10-6C26 30 10 27 2 16zM9.8 14a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0z'/%3E%3C/svg%3E");
  --vv-fish-leap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='88' height='67'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg%3E%3CanimateMotion dur='1.6s' repeatCount='indefinite' rotate='auto-reverse' calcMode='linear' keyPoints='0;1;1' keyTimes='0;.8;1' path='M74 104C66 66 56 24 44 24C32 24 22 66 14 104'/%3E%3Cpath fill-rule='evenodd' transform='scale(1.15) translate(-26 -16)' d='M2 16C10 5 26 2 40 8l10-6-3 14 3 14-10-6C26 30 10 27 2 16zM9.8 14a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0z'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M-16 70q8-5 16 0t16 0t16 0t16 0t16 0t16 0t16 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='translate' from='0 0' to='16 0' dur='1.6s' repeatCount='indefinite'/%3E%3C/path%3E%3Cg opacity='0'%3E%3Ccircle cx='61' cy='61' r='2.2'/%3E%3Ccircle cx='68' cy='56' r='2.6'/%3E%3Ccircle cx='75' cy='61' r='2.2'/%3E%3Canimate attributeName='opacity' values='0;0;1;0;0' keyTimes='0;0.04;0.1;0.22;1' dur='1.6s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg opacity='0'%3E%3Ccircle cx='13' cy='61' r='2.2'/%3E%3Ccircle cx='20' cy='56' r='2.6'/%3E%3Ccircle cx='27' cy='61' r='2.2'/%3E%3Canimate attributeName='opacity' values='0;0;1;0;0' keyTimes='0;0.62;0.68;0.8;1' dur='1.6s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
}
.ec-blockBtn--action,.ec-blockBtn--top,.ec-inlineBtn--top {
  border-radius: 10px;
  padding-left: 16px;
  padding-right: 16px;
  clip-path: none;
}
.ec-blockBtn--action::before,.ec-blockBtn--top::before,.ec-inlineBtn--top::before {
  position: static; display: inline-block; width: 44px; height: 44px; margin: 0 3px 0 -7px;
  vertical-align: middle; border-radius: 0; background: #fff;
  -webkit-mask: var(--vv-fish-mask) center/30px 18px no-repeat;
  mask: var(--vv-fish-mask) center/30px 18px no-repeat;
}
.ec-blockBtn--action::after,.ec-blockBtn--top::after,.ec-inlineBtn--top::after { content: none; }
/* 一覧のカードの中は style.css の「.ec-shelfGrid a { color: inherit }」が勝ち、リンクで作った「種類を選ぶ」の文字が灰色になるので白に戻す */
.ec-shelfGrid a.ec-blockBtn--action,.ec-shelfGrid a.ec-blockBtn--action:hover { color: #fff; }
.ec-blockBtn--action:hover,.ec-blockBtn--top:hover,.ec-inlineBtn--top:hover { animation: none; }
.ec-blockBtn--action:hover::before,.ec-blockBtn--top:hover::before,.ec-inlineBtn--top:hover::before {
  -webkit-mask: var(--vv-fish-leap) center/100% 100% no-repeat;
  mask: var(--vv-fish-leap) center/100% 100% no-repeat;
}
@media (max-width: 767px) {
  /* 一覧の狭いカードでも「カートに入れる」が1行に収まるよう、余白としるしを小さくする */
  .ec-blockBtn--action,.ec-blockBtn--top,.ec-inlineBtn--top { padding-left: 8px; padding-right: 8px; }
  .ec-blockBtn--action::before,.ec-blockBtn--top::before,.ec-inlineBtn--top::before {
    width: 34px; height: 34px; margin: 0 1px 0 -5px;
    -webkit-mask-size: 24px 15px; mask-size: 24px 15px;
  }
  .ec-blockBtn--action:hover::before,.ec-blockBtn--top:hover::before,.ec-inlineBtn--top:hover::before {
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ec-blockBtn--action:hover::before,.ec-blockBtn--top:hover::before,.ec-inlineBtn--top:hover::before {
    -webkit-mask-image: var(--vv-fish-mask); mask-image: var(--vv-fish-mask);
  }
}

/* 商品一覧のカードを段ごとにそろえる。商品名の行数・タイムセールの印・カートに入れたあとの表示がカードごとに違っても、
   写真・商品名・店名・印・通常価格・値段・数量・ボタンが、横に並んだ商品と同じ高さにくる（CSS の subgrid）。
   subgrid のないブラウザでは今までの並び（EC-CUBE の flex）のまま。 */
@supports (grid-template-rows: subgrid) {
  .ec-shelfGrid.vv-cardGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item { width: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: 1 / span 6; grid-template-rows: subgrid; row-gap: 0; }
  .ec-shelfGrid.vv-cardGrid .ec-shelfGrid__item-image img { max-width: 100%; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > * { align-self: start; min-width: 0; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .ec-shelfGrid__item-image { grid-row: 1; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .ec-shelfGrid__item-image + p { grid-row: 2; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .ec-shelfGrid__item-image + p + p:not([class]) { grid-row: 3; justify-self: start; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .vv-cardTags { grid-row: 4; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .vv-cardRegular { grid-row: 5; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > a > .price02-default { grid-row: 6; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > form { grid-row: 7; }
  .ec-shelfGrid.vv-cardGrid > .ec-shelfGrid__item > .ec-productRole__btn { grid-row: 8; margin-top: 0; }
  @media only screen and (min-width: 768px) {
    .ec-shelfGrid.vv-cardGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* 売り場のタブ（海の幸・リサイクル）。ロゴの下、カテゴリの上。いまの売り場に下線 */
.vv-sectionTabs { display: flex; justify-content: center; gap: 4px; margin: 14px 0 0; border-bottom: 1px solid var(--vv-line, #eadfd6); }
.vv-sectionTab { padding: 10px 26px; font-size: 16px; font-weight: 700; color: #6b5d52; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.vv-sectionTab:hover { color: var(--vv-primary, #c8471b); text-decoration: none; }
.vv-sectionTab.is-active { color: var(--vv-primary, #c8471b); border-bottom-color: var(--vv-primary, #c8471b); }
.ec-drawerRole .vv-sectionTabs { margin: 12px 0; }
.ec-drawerRole .vv-sectionTab { flex: 1; text-align: center; padding: 10px 8px; color: #fff; }
.ec-drawerRole .vv-sectionTab.is-active { color: #fff; border-bottom-color: #fff; }
.vv-sectionTabs + .ec-categoryNaviRole { margin-top: 0; border-top: 0; }

/* 中古品の状態の表（商品ページ）と、古物営業法の表示 */
.vv-usedTable { width: 100%; margin: 12px 0 16px; border-collapse: collapse; font-size: 14px; }
.vv-usedTable caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 6px; }
.vv-usedTable th, .vv-usedTable td { border: 1px solid var(--vv-line, #e5ddd5); padding: 6px 10px; text-align: left; vertical-align: top; }
.vv-usedTable th { width: 34%; background: var(--vv-sand, #faf6f2); font-weight: 700; white-space: nowrap; }
.vv-kobutsuNote { font-size: 13px; color: var(--vv-muted, #6b5d52); }
.vv-kobutsu { margin: 0 0 12px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .85); }
.vv-kobutsu p { margin: 2px 0; }

/* ===== リサイクルの売り場のデザイン（<html class="vv-recycle">。リサイクルの一覧・中古品の商品ページ・リサイクルのお店のページ） =====
   海の幸のオレンジと魚をやめて、緑と生成り（段ボール・値札の色）にする。魚の印は「循環の矢印と葉っぱ」に、
   ボタンの魚は「値札」に替える（マウスを乗せると値札が揺れる）。見出しは明朝をやめてゴシックに。 */
:root {
  /* 売り場のタブの印（どちらの売り場の画面でも同じ形。色は文字の色） */
  --vv-fish-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath fill-rule='evenodd' d='M2 16C10 5 26 2 40 8l10-6-3 14 3 14-10-6C26 30 10 27 2 16zM9.8 14a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0z'/%3E%3C/svg%3E");
  --vv-loop-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12.6A10 10 0 0 1 25.4 12.6M26.9 8.4L25.4 12.6L21.5 10.3M25.4 19.4A10 10 0 0 1 6.6 19.4M5.1 23.6L6.6 19.4L10.5 21.7'/%3E%3C/g%3E%3Cpath d='M12.5 19.5C12.5 15 15 12.5 19.5 12.5C19.5 17 17 19.5 12.5 19.5z'/%3E%3C/svg%3E");
}
html.vv-recycle {
  --vv-ink: #24302a;
  --vv-primary: #2e7d5b;
  --vv-primary-2: #1f5f44;
  --vv-heading: #1d4a37;
  --vv-accent: #d9a521;
  --vv-tint: #edf5ef;
  --vv-tint-line: #cbe2d3;
  --vv-sand: #f7f2e7;
  --vv-dark: #1b3428;
  --vv-line: #e1e3da;
  --vv-muted: #5b675f;
  --vv-wave: linear-gradient(90deg, #2e7d5b 0%, #8bbf4a 55%, #d9a521 100%);
  --vv-serif: var(--vv-sans);
  --vv-kraft: #f1e6cf;
  --vv-kraft-line: #dcc7a0;
  --vv-kraft-ink: #5a4322;
  /* 魚の印の代わりの、循環の矢印と葉っぱ（緑・フッター用の白） */
  --vv-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%232e7d5b' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12.6A10 10 0 0 1 25.4 12.6M26.9 8.4L25.4 12.6L21.5 10.3M25.4 19.4A10 10 0 0 1 6.6 19.4M5.1 23.6L6.6 19.4L10.5 21.7'/%3E%3C/g%3E%3Cpath fill='%238bbf4a' d='M12.5 19.5C12.5 15 15 12.5 19.5 12.5C19.5 17 17 19.5 12.5 19.5z'/%3E%3C/svg%3E");
  --vv-fish-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12.6A10 10 0 0 1 25.4 12.6M26.9 8.4L25.4 12.6L21.5 10.3M25.4 19.4A10 10 0 0 1 6.6 19.4M5.1 23.6L6.6 19.4L10.5 21.7'/%3E%3C/g%3E%3Cpath fill='%23fff' d='M12.5 19.5C12.5 15 15 12.5 19.5 12.5C19.5 17 17 19.5 12.5 19.5z'/%3E%3C/svg%3E");
  /* ボタンの魚の代わりの値札（左がとがって穴があいている。穴はくり抜き） */
  --vv-fish-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath fill-rule='evenodd' d='M11 1H29a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H11L2 10zM8 10a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0z'/%3E%3C/svg%3E");
  --vv-fish-leap: var(--vv-fish-mask);
}
html.vv-recycle .ec-headerTitle .ec-headerTitle__title h1 a::after { content: "NAGASAKI RECYCLE"; color: #8a6a12; }
html.vv-recycle .vv-hs-icon--truck { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13v11H1zM14 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
html.vv-recycle .vv-hs-icon--clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
html.vv-recycle .vv-hs-fish { flex-basis: 18px; height: 18px; }
html.vv-recycle [data-vaivai-shipping] { background-size: 16px 16px !important; }

/* カテゴリは、生成りの値札の形（左に穴） */
html.vv-recycle .ec-categoryNaviRole .ec-itemNav__nav > li > a { position: relative; padding: 8px 20px 8px 32px; border-radius: 4px 10px 10px 4px; border-color: var(--vv-kraft-line); background: var(--vv-kraft); color: var(--vv-kraft-ink); letter-spacing: .1em; }
html.vv-recycle .ec-categoryNaviRole .ec-itemNav__nav > li > a::before { content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--vv-kraft-line); }
html.vv-recycle .ec-categoryNaviRole .ec-itemNav__nav > li > a:hover { background: var(--vv-primary); border-color: var(--vv-primary); color: #fff; }

/* 一覧のカード: 写真は生成りの台に載せる */
html.vv-recycle .ec-shelfGrid__item-image { background: var(--vv-sand); border: 1px solid var(--vv-line); }
html.vv-recycle .ec-shelfGrid__item a > .price02-default { color: var(--vv-heading); }

/* ボタンの値札は、マウスを乗せると穴を軸に揺れる */
html.vv-recycle .ec-blockBtn--action:hover::before, html.vv-recycle .ec-blockBtn--top:hover::before, html.vv-recycle .ec-inlineBtn--top:hover::before {
  -webkit-mask-size: 30px 18px; mask-size: 30px 18px; transform-origin: 38% 50%; animation: vv-tag-swing 1s ease-in-out infinite;
}
@keyframes vv-tag-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(8deg); } }
@media (max-width: 767px) {
  html.vv-recycle .ec-blockBtn--action:hover::before, html.vv-recycle .ec-blockBtn--top:hover::before, html.vv-recycle .ec-inlineBtn--top:hover::before { -webkit-mask-size: 24px 15px; mask-size: 24px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html.vv-recycle .ec-blockBtn--action:hover::before, html.vv-recycle .ec-blockBtn--top:hover::before, html.vv-recycle .ec-inlineBtn--top:hover::before { animation: none; }
}

/* そのほかの色（オレンジを決め打ちしているところ） */
html.vv-recycle .ec-footerNavi .ec-footerNavi__link a:hover { color: #f3d27a; }
html.vv-recycle .ec-footerRole::after { background-size: 64px 18px; height: 18px; }
html.vv-recycle .ec-blockTopBtn { background: rgba(27, 52, 40, .9); }
html.vv-recycle [data-vaivai-chat] [data-open] { box-shadow: 0 6px 18px rgba(31, 95, 68, .32); }
html.vv-recycle .vv-filter { border-color: var(--vv-line); background: var(--vv-sand); }
html.vv-recycle .vv-miniShelf__price { color: var(--vv-heading); }
html.vv-recycle .vv-qa__mark--a { background: var(--vv-primary); }
html.vv-recycle .vv-thread__item--customer { background: var(--vv-tint); }
html.vv-recycle .vv-flash { border-left-color: var(--vv-primary); }

/* 売り場のタブに印（海の幸は魚、リサイクルは循環の矢印）。色は文字と同じ */
.vv-sectionTab::before { content: ""; display: inline-block; width: 20px; height: 16px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--vv-tab-icon) center/contain no-repeat; mask: var(--vv-tab-icon) center/contain no-repeat; }
.vv-sectionTab--seafood { --vv-tab-icon: var(--vv-fish-shape); }
.vv-sectionTab--recycle { --vv-tab-icon: var(--vv-loop-shape); }

/* 中古品の状態の目盛り（6段階。良いほど多く点く）と、カードの状態の印 */
.vv-meter { display: inline-flex; gap: 2px; margin-right: 8px; vertical-align: -1px; }
.vv-meter i { display: block; width: 6px; height: 11px; border-radius: 1px; background: #d9d6cc; }
.vv-meter i.is-on { background: var(--vv-primary); }
.vv-cardTags span.vv-tag--condition { display: inline-flex; align-items: center; padding: 1px 8px; border-color: var(--vv-kraft-line, #dcc7a0); border-radius: 3px; background: var(--vv-kraft, #f1e6cf); color: var(--vv-kraft-ink, #5a4322); font-weight: 700; }
.vv-cardTags span.vv-tag--condition .vv-meter { display: inline-flex; margin: 0 6px 0 0; padding: 0; border: 0; }
.vv-cardTags span.vv-tag--condition .vv-meter i { width: 4px; height: 9px; }

/* リサイクルの一覧の頭 */
.vv-recycleHero { position: relative; overflow: hidden; margin: 8px 0 4px; padding: 26px 168px 24px 28px; border: 1px solid var(--vv-kraft-line, #dcc7a0); border-radius: 12px; background: linear-gradient(135deg, #f7f0e1 0%, #efe2c6 100%); }
.vv-recycleHero::after { content: ""; position: absolute; right: 36px; top: 50%; width: 104px; height: 104px; margin-top: -52px; border-radius: 50%; background: #fff var(--vv-fish) center/62px 62px no-repeat; box-shadow: 0 0 0 10px rgba(255, 255, 255, .45); }
.vv-recycleHero__en { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .3em; color: var(--vv-primary); }
.vv-recycleHero__title { margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.4; letter-spacing: .04em; color: var(--vv-heading); }
.vv-recycleHero__text { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--vv-ink); }
.vv-recycleHero__points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vv-recycleHero__points li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border: 1px solid var(--vv-tint-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--vv-heading); }
.vv-recycleHero__points li::before { content: ""; flex: 0 0 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232e7d5b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width: 767px) {
  .vv-recycleHero { padding: 18px 16px; }
  .vv-recycleHero::after { display: none; }
  .vv-recycleHero__title { font-size: 19px; }
}

/* 商品ページの「一覧に戻る」。色は売り場の色（海の幸はオレンジ、リサイクルは緑） */
.vv-backRole { margin-top: 4px; margin-bottom: 14px; }
.vv-backToList { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px 7px 14px; border: 1px solid var(--vv-tint-line); border-radius: 999px; background: var(--vv-tint); color: var(--vv-heading); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: background .2s, color .2s; }
.vv-backToList::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.vv-backToList:hover, .vv-backToList:focus-visible { background: var(--vv-primary); border-color: var(--vv-primary); color: #fff; text-decoration: none; }
@media (max-width: 767px) { .vv-backRole { margin-top: 12px; margin-bottom: 10px; } .vv-backToList { padding: 6px 14px 6px 12px; font-size: 13px; } }