/* 今のお店（EC-CUBE）の StorefrontThemeSubscriber が <head> に足している CSS。そのまま使う。 */
/* VAIVAI: オレンジ基調。基本色は白い文字が読める濃さのオレンジ、明るいオレンジは帯や線の飾りにだけ使う。 */
:root{
  --vv-ink:#2b2118;
  --vv-primary:#c2410c;
  --vv-primary-2:#9a3412;
  --vv-heading:#7c2d12;
  --vv-accent:#f97316;
  --vv-tint:#fff1e6;
  --vv-tint-line:#fbd5b5;
  --vv-sand:#fff8f2;
  --vv-dark:#431407;
  --vv-line:#eee4dc;
  --vv-muted:#6b5d52;
  --vv-wave:linear-gradient(90deg,#f59e0b 0%,#f97316 50%,#dc2626 100%);
  --vv-serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --vv-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
body{font-family:var(--vv-sans);color:var(--vv-ink);-webkit-font-smoothing:antialiased;}
/* ページの一番上の、琥珀色から朱色への帯 */
body::before{content:"";display:block;height:4px;background:var(--vv-wave);}
a{color:var(--vv-primary);}
a:hover{color:var(--vv-primary-2);}

/* ヘッダー */
.ec-headerNaviRole{border-bottom:1px solid var(--vv-line);}
.ec-headerNav__itemLink,.ec-headerNav__itemIcon{color:var(--vv-ink);}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search select{background:var(--vv-primary);color:#fff;}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before{border-top-color:#fff;}
.ec-headerRole__cart .ec-cartNavi .ec-cartNavi__badge,.ec-headerNavSP .ec-cartNavi__badge{background:var(--vv-primary);}
.ec-headerRole{padding-top:28px;padding-bottom:10px;}
.ec-headerTitle .ec-headerTitle__title h1 a{font-family:var(--vv-sans);font-weight:800;letter-spacing:.42em;padding-left:.42em;color:var(--vv-primary);font-size:38px;}
.ec-headerTitle .ec-headerTitle__title h1 a::after{content:"NAGASAKI SEAFOOD";display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.38em;color:#b45309;}
.ec-categoryNaviRole{border-top:1px solid var(--vv-line);border-bottom:1px solid var(--vv-line);margin-top:18px;margin-bottom:28px;}
.ec-categoryNaviRole .ec-itemNav__nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 0;}
.ec-categoryNaviRole .ec-itemNav__nav > li{float:none;width:auto;}
.ec-categoryNaviRole .ec-itemNav__nav > li > a{display:inline-block;padding:8px 22px;border-radius:999px;border:1px solid var(--vv-tint-line);background:var(--vv-tint);color:var(--vv-heading);font-weight:600;letter-spacing:.14em;transition:background .2s,color .2s;}
.ec-categoryNaviRole .ec-itemNav__nav > li > a:hover{background:var(--vv-primary);border-color:var(--vv-primary);color:#fff;}

/* ボタン */
.ec-blockBtn--action,.ec-inlineBtn--action{background:var(--vv-primary);border-color:var(--vv-primary);border-radius:4px;letter-spacing:.08em;}
.ec-blockBtn--action:hover,.ec-blockBtn--action:focus,.ec-inlineBtn--action:hover,.ec-inlineBtn--action:focus{background:var(--vv-primary-2);border-color:var(--vv-primary-2);}
.ec-blockBtn--cancel,.ec-inlineBtn--cancel{background:#fff;color:var(--vv-primary);border:1px solid var(--vv-primary);border-radius:4px;}
.ec-blockBtn--cancel:hover,.ec-inlineBtn--cancel:hover{background:var(--vv-tint);color:var(--vv-primary-2);border-color:var(--vv-primary-2);}
.ec-blockBtn--top{background:var(--vv-primary);border-color:var(--vv-primary);border-radius:4px;letter-spacing:.12em;}
.ec-blockBtn--top::after{content:"→";margin-left:.8em;}
.ec-blockBtn--top:hover{background:var(--vv-primary-2);border-color:var(--vv-primary-2);}
.ec-inlineBtn--top{background:var(--vv-primary);border-color:var(--vv-primary);color:#fff;border-radius:4px;letter-spacing:.08em;}
.ec-inlineBtn--top:hover,.ec-inlineBtn--top:focus{background:var(--vv-primary-2);border-color:var(--vv-primary-2);color:#fff;}

/* トップの写真と文 */
.ec-eyecatchRole{background:linear-gradient(135deg,#fff4e8 0%,#ffe6d6 100%);border-radius:12px;padding:32px;}
.ec-eyecatchRole__image img{border-radius:6px;}
.ec-eyecatchRole__introEnTitle{color:var(--vv-primary);font-weight:700;letter-spacing:.3em;font-size:12px;}
.ec-eyecatchRole__introEnTitle::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px;}
.ec-eyecatchRole__introTitle{font-family:var(--vv-serif);font-weight:600;color:var(--vv-heading);line-height:1.5;letter-spacing:.04em;}
.ec-eyecatchRole__introDescription{color:var(--vv-muted);}

/* 見出しと各欄 */
.ec-secHeading .ec-secHeading__en{color:var(--vv-heading);letter-spacing:.3em;}
.ec-secHeading .ec-secHeading__line{background:var(--vv-wave);}
.ec-secHeading .ec-secHeading__ja{color:var(--vv-muted);}
.ec-topicRole{background:var(--vv-tint);}
.ec-topicRole__listItem img,.ec-newItemRole__listItem img{border-radius:6px;}
.ec-topicRole__listItemTitle{font-family:var(--vv-serif);font-weight:600;color:var(--vv-primary-2);font-size:17px;}
.ec-newItemRole__listItemTitle{font-weight:700;color:var(--vv-ink);}
.ec-newItemRole__listItemPrice{font-weight:700;color:var(--vv-primary);font-size:17px;}
.ec-categoryRole:has(img[src*="fpo_"]){display:none;}
.ec-newsRole .ec-newsRole__news{border:1px solid var(--vv-line);border-top:3px solid var(--vv-accent);border-radius:6px;background:#fff;}
.ec-newsRole .ec-newsRole__newsDate{color:var(--vv-primary);}
.ec-newsRole .ec-newsRole__newsTitle{color:var(--vv-ink);}

/* ページ見出し・カート・手続き */
.ec-pageHeader h1{font-family:var(--vv-serif);font-weight:600;color:var(--vv-heading);letter-spacing:.05em;border-bottom:1px solid var(--vv-line);}
.ec-cartRole .ec-cartRole__totalAmount,.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel{color:var(--vv-primary);}
.ec-cartRole .ec-cartHeader .ec-cartHeader__label{background:var(--vv-tint);color:var(--vv-heading);}
.ec-progress .ec-progress__number{background:#a8958a;}
.ec-progress .is-complete .ec-progress__number{background:var(--vv-primary);}
.ec-progress .is-complete .ec-progress__label{color:var(--vv-primary);}
.ec-progress .ec-progress__item::after{background:#e6d9cf;}

/* 商品一覧 */
.ec-shelfGrid__item-image{overflow:hidden;border-radius:6px;}
.ec-shelfGrid__item-image img{transition:transform .35s ease;}
.ec-shelfGrid__item a:hover .ec-shelfGrid__item-image img{transform:scale(1.04);}
.ec-shelfGrid .ec-shelfGrid__item a > .price02-default{color:var(--vv-primary);}
.ec-shelfGrid .ec-shelfGrid__item a > .ec-shelfGrid__item-image + p + p:not([class]){display:inline-block;padding:2px 10px;border-radius:999px;background:var(--vv-tint);color:var(--vv-primary-2);font-size:12px;font-weight:700;margin:2px 0 6px;}
.ec-searchnavRole__topicpath .ec-topicpath__item a{color:var(--vv-primary);}

/* 商品詳細 */
.ec-productRole .ec-headingTitle{font-family:var(--vv-serif);font-weight:600;color:var(--vv-heading);letter-spacing:.03em;}
.ec-productRole .ec-price .ec-price__price{color:var(--vv-primary);}
.ec-productRole .ec-price .ec-price__tax{color:var(--vv-muted);}
.ec-productRole .ec-productRole__category a{display:inline-block;padding:2px 12px;border-radius:999px;background:var(--vv-tint);color:var(--vv-primary-2);}
.ec-sliderItemRole .main_visual img,.ec-sliderItemRole .item_nav img{border-radius:6px;}

/* カートに入っている商品は「カートに入れる」「今すぐ購入」と数量を隠し、「カートから削除」だけにする。消すと戻る。 */
.ec-productRole__btn:has([data-vaivai-incart]) > .add-cart,.ec-productRole__btn:has([data-vaivai-incart]) > [data-buy-now]{display:none;}
.ec-shelfGrid__item:has([data-vaivai-incart]) .ec-numberInput,.ec-productRole:has([data-vaivai-incart]) .ec-numberInput{display:none;}
.ec-productRole__btn [data-vaivai-incart]{margin-top:0;}

/* お店からのお知らせ（送料など） */
[data-vaivai-shipping]{background:var(--vv-sand)!important;border:0!important;border-left:3px solid var(--vv-accent)!important;color:var(--vv-ink)!important;border-radius:4px;}

/* フッター */
.ec-footerRole{position:relative;background:var(--vv-dark);border-top:0;}
.ec-footerRole::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--vv-wave);}
.ec-footerNavi .ec-footerNavi__link a{color:rgba(255,255,255,.85);letter-spacing:.06em;}
.ec-footerNavi .ec-footerNavi__link a:hover{color:#fdba74;}
.ec-footerTitle .ec-footerTitle__logo a{color:#fff;letter-spacing:.42em;font-weight:800;}
.ec-footerTitle .ec-footerTitle__copyright{color:rgba(255,255,255,.62);}

/* ページトップへ（質問するボタンと重ならない高さに） */
.ec-blockTopBtn{bottom:84px;right:16px;border-radius:4px;background:rgba(67,20,7,.9);border:1px solid rgba(255,255,255,.35);}

/* 質問するボタン */
body [data-vaivai-chat] [data-open]{background:var(--vv-primary);box-shadow:0 6px 18px rgba(154,52,18,.32);}
body [data-vaivai-chat] form button{background:var(--vv-primary);}

@media (min-width:768px){
  .ec-headerRole__cart .ec-cartNavi{background:var(--vv-tint);}
}
@media (max-width:767px){
  .ec-headerRole{padding-top:8px;}
  .ec-headerTitle .ec-headerTitle__title h1 a{font-size:24px;letter-spacing:.32em;padding-left:.32em;}
  .ec-headerTitle .ec-headerTitle__title h1 a::after{font-size:9px;letter-spacing:.32em;margin-top:4px;}
  .ec-categoryNaviRole{margin-top:10px;margin-bottom:16px;}
  .ec-eyecatchRole{padding:20px;}
}

/* 魚のデザイン。魚の絵は左が頭、右が尾びれ。 */
:root{
  --vv-fish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath fill='%23c2410c' d='M2 16C10 5 26 2 40 8l10-6-3 14 3 14-10-6C26 30 10 27 2 16z'/%3E%3Ccircle cx='12' cy='14' r='2.2' fill='%23fff'/%3E%3C/svg%3E");
  --vv-fish-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath fill='%23ffffff' d='M2 16C10 5 26 2 40 8l10-6-3 14 3 14-10-6C26 30 10 27 2 16z'/%3E%3Ccircle cx='12' cy='14' r='2.2' fill='%23431407'/%3E%3C/svg%3E");
}

/* 魚の形のボタン: 左が丸い頭と目、右が二股の尾びれ。文字は胴に収める。 */
.ec-blockBtn--action,.ec-blockBtn--top,.ec-inlineBtn--top{--vv-tail:44px;position:relative;border-radius:999px 0 0 999px;padding-left:40px;padding-right:calc(var(--vv-tail) + 4px);clip-path:polygon(0 0,calc(100% - var(--vv-tail)) 0,calc(100% - var(--vv-tail) / 2) 36%,100% 0,calc(100% - var(--vv-tail) / 5) 50%,100% 100%,calc(100% - var(--vv-tail) / 2) 64%,calc(100% - var(--vv-tail)) 100%,0 100%);}
.ec-blockBtn--action::before,.ec-blockBtn--top::before,.ec-inlineBtn--top::before{content:"";position:absolute;left:20px;top:50%;width:7px;height:7px;margin-top:-7px;border-radius:50%;background:#fff;}
.ec-blockBtn--top::after{content:none;}
.ec-blockBtn--action:hover,.ec-blockBtn--top:hover,.ec-inlineBtn--top:hover{animation:vv-swim .7s ease-in-out infinite;}
.ec-blockBtn--action:focus-visible,.ec-blockBtn--top:focus-visible,.ec-inlineBtn--top:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);}
@keyframes vv-swim{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* ロゴの上の魚 */
.ec-headerTitle .ec-headerTitle__title h1 a::before{content:"";display:block;width:46px;height:28px;margin:0 auto 6px;background:var(--vv-fish) center/contain no-repeat;}

/* 見出しの線を小さな魚に */
.ec-secHeading .ec-secHeading__line{width:26px;height:16px;margin:0 16px;background:var(--vv-fish) center/contain no-repeat;vertical-align:middle;}
.ec-secHeading--tandem .ec-secHeading__line{width:26px;height:16px;margin:10px auto;background:var(--vv-fish) center/contain no-repeat;}

/* トップの写真の欄に、うろこ模様 */
.ec-eyecatchRole{background-image:radial-gradient(circle at 50% 100%,transparent 60%,rgba(194,65,12,.07) 61%,rgba(194,65,12,.07) 66%,transparent 67%),radial-gradient(circle at 50% 100%,transparent 60%,rgba(194,65,12,.07) 61%,rgba(194,65,12,.07) 66%,transparent 67%),linear-gradient(135deg,#fff4e8 0%,#ffe6d6 100%);background-size:36px 18px,36px 18px,auto;background-position:0 0,18px 9px,0 0;}

/* 「FISH」の欄の魚の名前に、小さな魚 */
.ec-topicRole__listItemTitle::before{content:"";display:inline-block;width:24px;height:15px;margin-right:8px;vertical-align:-1px;background:var(--vv-fish) center/contain no-repeat;}

/* 送料などのお知らせの頭に、小さな魚 */
[data-vaivai-shipping]{padding-left:42px!important;background-image:var(--vv-fish)!important;background-repeat:no-repeat!important;background-position:14px center!important;background-size:20px 12px!important;}

/* フッターの上を、魚の群れがゆっくり泳ぐ */
.ec-footerRole::after{content:"";position:absolute;top:16px;left:0;right:0;height:16px;background:var(--vv-fish-light) 0 0/72px 16px repeat-x;opacity:.22;animation:vv-school 60s linear infinite;pointer-events:none;}
@keyframes vv-school{from{background-position:0 0;}to{background-position:-1440px 0;}}

/* スマホの狭いカードでは、尾びれと余白を小さくして文字を胴に収める。 */
@media (max-width:767px){
  .ec-blockBtn--action,.ec-blockBtn--top,.ec-inlineBtn--top{--vv-tail:28px;padding-left:24px;letter-spacing:.02em;font-size:14px;}
  .ec-blockBtn--action::before,.ec-blockBtn--top::before,.ec-inlineBtn--top::before{left:11px;width:6px;height:6px;margin-top:-6px;}
}
@media (prefers-reduced-motion:reduce){
  .ec-blockBtn--action:hover,.ec-blockBtn--top:hover,.ec-inlineBtn--top:hover,.ec-footerRole::after{animation:none;}
}

/* ロゴの左右: 左にお店の紹介、右に送料とお届けの目安。パソコンの幅だけ。 */
.ec-headerRole{position:relative;}
.vv-header-side{display:none;}
@media (min-width:1024px){
  .vv-header-side{display:flex;flex-direction:column;justify-content:center;gap:8px;position:absolute;top:28px;bottom:10px;max-width:330px;}
  .vv-header-side--left{left:20px;}
  .vv-header-side--right{right:20px;align-items:flex-end;}
  .vv-header-side p{margin:0;}
  .vv-hs-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--vv-primary);}
  .vv-hs-fish{flex:0 0 26px;height:16px;background:var(--vv-fish) center/contain no-repeat;}
  .vv-hs-title{padding-left:12px;border-left:3px solid var(--vv-accent);font-family:var(--vv-serif);font-size:18px;font-weight:600;line-height:1.55;letter-spacing:.04em;color:var(--vv-heading);}
  .vv-hs-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--vv-tint-line);border-radius:999px;background:var(--vv-tint);font-size:13px;color:var(--vv-ink);white-space:nowrap;}
  .vv-hs-chip strong{font-weight:800;color:var(--vv-primary);}
  .vv-hs-icon{flex:0 0 18px;height:18px;background:center/contain no-repeat;}
  .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='%23c2410c' 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");}
  .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='%23c2410c' 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");}
}