/* =====================================================
   魚鉄／三重・尾鷲 専用スタイル
   Deep Sea Navy & Vermillion / White Base
   ===================================================== */

:root {
  --uo-navy: #0e2c3d;
  --uo-navy-2: #163b52;
  --uo-navy-soft: #24506b;
  --uo-vermillion: #c1502e;
  --uo-vermillion-deep: #a13f22;
  --uo-vermillion-light: #f0c8ae;
  --uo-ivory: #f9faf9;
  --uo-ivory-2: #eef3f2;
  --uo-ink: #23303a;
  --uo-muted: #5e6f78;
  --uo-line: #dce6e4;
}

.serif { font-family: 'Shippori Mincho', serif; }

.text-gold { color: var(--uo-vermillion-deep) !important; }
.bg-gold {
  background-color: var(--uo-vermillion) !important;
  background-image: linear-gradient(135deg, #d06a44 0%, #a13f22 100%) !important;
}
.border-gold { border-color: var(--uo-vermillion) !important; }

body { color: var(--uo-ink); background: #fff; }

/* Header */
header {
  border-bottom: 1px solid rgba(193,80,46,.25);
  box-shadow: 0 4px 18px rgba(14,44,61,.07) !important;
}
header > .bg-gray-100 {
  background: var(--uo-navy) !important;
  color: rgba(255,255,255,.78) !important;
  border-color: rgba(240,200,174,.16) !important;
}
header > .bg-gray-100 a { color: rgba(255,255,255,.82) !important; }
header > .bg-gray-100 a:hover { color: var(--uo-vermillion-light) !important; }
header > .bg-gray-100 .text-gray-300 { color: rgba(255,255,255,.22) !important; }
header > .bg-gray-100 .text-gray-700 { color: #fff !important; }
header .container > a .text-gray-800 { color: var(--uo-navy) !important; }
header .container > a .text-gray-500 { color: #5f7683 !important; }
header nav { color: #4a5c66 !important; }
header nav a { letter-spacing: .03em; position: relative; }
header nav a:hover { color: var(--uo-vermillion-deep) !important; }
header nav a.text-gold {
  color: var(--uo-navy) !important;
  border-color: var(--uo-vermillion) !important;
  font-weight: 700;
}
#mobile-menu { border-top-color: var(--uo-line) !important; box-shadow: 0 14px 28px rgba(14,44,61,.12) !important; }
#mobile-menu a:hover { background: var(--uo-ivory) !important; color: var(--uo-navy) !important; }
#mobile-menu-button { color: var(--uo-navy) !important; }

/* Hero / TOP */
.page-top .hero-gradient {
  background-color: var(--uo-navy);
  background-image:
    linear-gradient(115deg, rgba(6,20,29,.82) 0%, rgba(14,44,61,.62) 46%, rgba(6,16,24,.78) 100%),
    url('img/n_top1.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -1px 0 rgba(240,200,174,.28);
}
.page-top .hero-gradient::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 48%, transparent 100%);
}
.page-top .hero-gradient h1 { text-shadow: 0 2px 18px rgba(0,0,0,.34); }
.page-top .hero-gradient h1 span { color: #fbe7d9; }
.page-top .hero-gradient > div > p:first-child { color: var(--uo-vermillion-light); }
.page-top .hero-gradient .bg-gold {
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.18);
  font-weight: 700;
}
.page-top .hero-gradient .bg-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.page-top .animate-fade-in-up { animation: fadeInUp 1s ease-out forwards; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* Typography */
h1.text-gray-800, h2.text-gray-800, h3.text-gray-800,
.serif.text-gray-800, .font-bold.text-gray-800 { color: var(--uo-navy) !important; }
.bg-gray-50 { background-color: var(--uo-ivory) !important; }
.bg-gray-100 { background-color: var(--uo-ivory-2) !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--uo-line) !important; }

.page-top section[id="products"] { background: linear-gradient(180deg, var(--uo-ivory) 0%, #fff 100%) !important; }

/* Product/category cards on TOP */
.page-top #products .bg-white,
.cart-system-container { border-color: var(--uo-line) !important; }
.page-top #products .bg-white {
  border: 1px solid var(--uo-line);
  box-shadow: 0 7px 22px rgba(14,44,61,.055) !important;
}
.page-top #products .bg-white:hover {
  border-color: rgba(193,80,46,.55) !important;
  box-shadow: 0 15px 34px rgba(14,44,61,.11) !important;
}
.page-top #products a.border-gray-300,
main a.border-gray-300 {
  border-color: rgba(14,44,61,.22) !important;
  color: var(--uo-navy) !important;
}
.page-top #products a.border-gray-300:hover,
main a.border-gray-300:hover {
  border-color: var(--uo-vermillion) !important;
  background: var(--uo-ivory) !important;
  color: var(--uo-vermillion-deep) !important;
}


/* Product guide: quieter editorial layout */
.page-top #products .product-guide-grid {
  max-width: 980px;
  margin-inline: auto;
}
.page-top #products .product-guide-card {
  background: transparent;
  min-width: 0;
}
.page-top #products .product-guide-image {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14,44,61,.07);
}
.page-top #products .product-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-top #products .product-guide-body {
  padding: 1.15rem .25rem 0;
}
.page-top #products .product-guide-title {
  margin: 0 0 .45rem;
  line-height: 1.45;
}
.page-top #products .product-guide-copy {
  margin: 0 0 .9rem;
  line-height: 1.8;
  color: #65747c !important;
}
.page-top #products .product-guide-link {
  width: fit-content;
  gap: .45rem;
  color: var(--uo-navy) !important;
  font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(14,44,61,.22);
  padding-bottom: .2rem;
}
.page-top #products .product-guide-link:hover {
  color: var(--uo-vermillion-deep) !important;
  border-bottom-color: var(--uo-vermillion);
}
@media (max-width: 767px) {
  .page-top #products .product-guide-grid { row-gap: 2.6rem; }
  .page-top #products .product-guide-body { padding-top: .9rem; }
}

/* Breadcrumb bar */
body > header + .bg-white { border-bottom: 1px solid var(--uo-line); background: #fff !important; }
body > header + .bg-white a { color: var(--uo-vermillion-deep); }
body > header + .bg-white .text-gray-800 { color: var(--uo-navy) !important; }

main section:first-of-type img { box-shadow: 0 14px 34px rgba(14,44,61,.12) !important; }
main .border-l-4.border-gold {
  background: linear-gradient(90deg, var(--uo-ivory-2), #fff) !important;
  border-left-color: var(--uo-vermillion) !important;
  color: #4f5f68 !important;
}
main a.rounded-full.border-gold {
  background: #fff; color: var(--uo-navy) !important;
  border-color: var(--uo-vermillion-light) !important;
  box-shadow: 0 2px 8px rgba(14,44,61,.035);
}
main a.rounded-full.border-gold:hover {
  background: var(--uo-navy) !important; color: #fff !important; border-color: var(--uo-navy) !important;
}

/* Product summary panel (shared notes above product grid) */
.product-summary-panel {
  background: var(--uo-ivory);
  border: 1px solid var(--uo-line);
  border-left: 3px solid var(--uo-vermillion);
  border-radius: .4rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}
.product-summary-title {
  font-weight: 700; color: var(--uo-navy); font-size: .92rem; margin-bottom: .5rem;
}
.product-summary-list { margin: 0; padding: 0; list-style: none; }
.product-summary-list li {
  position: relative; padding-left: 1.1rem; margin-bottom: .35rem;
  color: var(--uo-muted); font-size: .87rem; line-height: 1.6;
}
.product-summary-list li::before {
  content: "・"; position: absolute; left: 0; color: var(--uo-vermillion);
}
.product-summary-common { font-size: .82rem; color: var(--uo-muted); margin-top: .6rem; }
@media (max-width: 640px) { .product-summary-panel { padding: 1rem; } }

/* Sold-out / on-hold notice cards */
.product-hold-notice {
  background: #f5f5f4;
  border: 1px dashed #c7c7c2;
  border-radius: .4rem;
  padding: 1rem 1.2rem;
  color: #6b6b64;
  font-size: .88rem;
  line-height: 1.7;
}
.product-hold-notice strong { color: #4b4b45; }

/* Purchase cards */
.cart-system-container {
  background: #fff !important;
  border: 1px solid var(--uo-line) !important;
  border-top: 3px solid var(--uo-vermillion-light) !important;
  box-shadow: 0 7px 20px rgba(14,44,61,.055) !important;
}
.cart-system-container:hover {
  border-top-color: var(--uo-vermillion) !important;
  box-shadow: 0 14px 30px rgba(14,44,61,.10) !important;
}
.cart-system-container .text-gold { color: var(--uo-vermillion-deep) !important; }

/* Purchase card spacing: てらミート基準に近い、ゆったりした縦間隔 */
.cart-system-container {
  padding: 1.55rem !important;
  line-height: 1.8 !important;
}
.cart-system-container > div:first-child {
  margin-bottom: .95rem !important;
}
.cart-system-container > div.mt-auto {
  padding-top: 1.15rem !important;
}
.cart-system-container .live-price-label {
  margin-bottom: .65rem !important;
}
.cart-system-container form {
  line-height: 1.9 !important;
}
.cart-system-container form p,
.cart-system-container form div,
.cart-system-container form td,
.cart-system-container form th {
  line-height: 1.85 !important;
}
.cart-system-container form select {
  margin-top: .35rem;
  margin-bottom: .35rem;
}
.cart-system-container .eshop-price-row {
  margin-bottom: .75rem !important;
}

/* e-shops cart controls */
.cart-system-container input[type="submit"],
.cart-system-container input[type="button"],
.cart-system-container button {
  background-color: var(--uo-vermillion) !important;
  background-image: linear-gradient(135deg, #d06a44 0%, #a13f22 100%) !important;
  color: #fff !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  letter-spacing: .03em;
  padding: .62rem 1.15rem !important;
  min-width: 118px !important;
  border-radius: .25rem !important;
  border: 1px solid rgba(120,52,26,.34) !important;
  cursor: pointer !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
  display: inline-block !important;
  appearance: none; -webkit-appearance: none;
  box-shadow: 0 4px 12px rgba(14,44,61,.12) !important;
}
.cart-system-container input[type="submit"]:hover,
.cart-system-container input[type="button"]:hover,
.cart-system-container button:hover {
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(14,44,61,.17) !important;
}
.cart-system-container select,
.cart-system-container input[type="text"] {
  font-size: .92rem !important;
  padding: .45rem !important;
  min-height: 40px;
  border: 1px solid #cfd9d7 !important;
  border-radius: .25rem !important;
  background: #fff !important;
  color: var(--uo-navy) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cart-system-container select:focus,
.cart-system-container input[type="text"]:focus {
  outline: 2px solid rgba(193,80,46,.22) !important;
  border-color: var(--uo-vermillion) !important;
}
.cart-system-container form {
  display: flex; flex-direction: row; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* e-shops price decoration */
.live-price-label {
  margin: 0 0 .35rem; color: #79665a; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
}
.eshop-live-price {
  color: var(--uo-vermillion-deep) !important; font-weight: 800 !important; font-size: 1.06em;
  letter-spacing: .015em; white-space: nowrap;
}
.eshop-live-price-suffix { font-size: .78rem; color: #79665a; margin-left: .3rem; font-weight: 500; }
.live-price-note { margin: .4rem 0 0; color: #79665a; font-size: .74rem; font-weight: 600; line-height: 1.5; }

.cart-system-container select.eshop-live-price-select {
  color: var(--uo-vermillion-deep) !important; font-weight: 700 !important;
  border-color: rgba(193,80,46,.42) !important; background-color: #fffaf7 !important;
}
.cart-system-container select.eshop-live-price-select option { color: var(--uo-ink); font-weight: 500; }

/* 数量とカゴボタンを横並びにする（魚清水産方式） */
.cart-system-container .eshop-controls-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: .75rem !important;
  row-gap: .7rem !important;
  width: 100% !important;
  margin-top: .85rem !important;
}
.cart-system-container .eshop-qty-label {
  font-size: .8rem; color: var(--uo-muted); font-weight: 600; white-space: nowrap;
}
.cart-system-container .eshop-controls-inline select,
.cart-system-container .eshop-controls-inline input[type="number"],
.cart-system-container .eshop-controls-inline input[type="text"] {
  flex: 0 0 auto;
}
.cart-system-container .eshop-controls-inline input[type="submit"],
.cart-system-container .eshop-controls-inline input[type="button"],
.cart-system-container .eshop-controls-inline button {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .eshop-live-price-suffix { font-size: .72rem; margin-left: .25rem; }
  .cart-system-container .eshop-controls-inline { column-gap: .55rem !important; row-gap: .6rem !important; }
}

/* Award / trust strip */
.award-strip img { max-height: 240px; object-fit: contain; background: #fff; border: 1px solid var(--uo-line); }

/* Footer */
footer.bg-gray-800 {
  background-color: var(--uo-navy) !important;
  background-image: linear-gradient(145deg, #081821 0%, #0f2b3c 100%) !important;
  border-top: 3px solid var(--uo-vermillion) !important;
}
footer .text-gray-300 { color: rgba(255,255,255,.78) !important; }
footer .text-gray-400 { color: rgba(255,255,255,.62) !important; }
footer .text-gray-500 { color: rgba(255,255,255,.40) !important; }
footer .border-gray-700 { border-color: rgba(240,200,174,.16) !important; }
footer .text-gold { color: var(--uo-vermillion-light) !important; }
footer h3 { color: #fff; }

img.rounded-lg, img.rounded, img.rounded-sm { outline: 1px solid rgba(14,44,61,.035); }
::selection { background: var(--uo-vermillion-light); color: var(--uo-navy); }

@media (max-width: 767px) {
  .page-top .hero-gradient { background-position: center; }
  header .container > a .text-xl, header .container > a .text-2xl { letter-spacing: .03em !important; }
}

/* Product/detail page title band */
body:not(.page-top) main > .container > section:first-of-type h1 { color: var(--uo-navy) !important; }


/* =====================================================
   e-shops 購入UI 修正版
   - 商品オプションと数量を分離
   - e-shops生成テーブルをカード幅いっぱいに
   - 商品オプションは元位置のまま
   - 数量＋カゴボタンのみ横並び
   ===================================================== */

.cart-system-container form {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.8 !important;
}

.cart-system-container .eshop-generated-table,
.cart-system-container form table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .2rem !important;
  table-layout: auto !important;
}

.cart-system-container .eshop-generated-table td,
.cart-system-container .eshop-generated-table th,
.cart-system-container form td,
.cart-system-container form th {
  padding: .18rem 0 !important;
  vertical-align: middle !important;
  text-align: left !important;
  line-height: 1.75 !important;
}

.cart-system-container .eshop-price-row {
  padding-bottom: .7rem !important;
}

.cart-system-container .eshop-live-price {
  color: var(--uo-vermillion-deep) !important;
  font-size: 1.12em !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.cart-system-container .eshop-live-price-suffix {
  display: inline-block !important;
  margin-left: .4rem !important;
  color: #79665a !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* 商品オプション：元位置のまま、数量とは別スタイル */
.cart-system-container select.eshop-product-option-select {
  display: block !important;
  width: min(100%, 360px) !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: .55rem 0 .3rem !important;
  padding: .5rem .7rem !important;
  color: var(--uo-vermillion-deep) !important;
  font-weight: 700 !important;
  background: #fffaf7 !important;
  border: 1px solid rgba(193,80,46,.42) !important;
  border-radius: .28rem !important;
}

.cart-system-container select.eshop-product-option-select option {
  color: var(--uo-ink) !important;
  font-weight: 500 !important;
}

/* 数量：小さく固定 */
.cart-system-container select.eshop-qty-select,
.cart-system-container .eshop-controls-inline select.eshop-qty-select {
  display: inline-block !important;
  width: auto !important;
  min-width: 54px !important;
  max-width: 82px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: .45rem .55rem !important;
  color: var(--uo-navy) !important;
  font-weight: 600 !important;
  background: #fff !important;
  border: 1px solid rgba(193,80,46,.42) !important;
}

/* 数量 + カゴボタン */
.cart-system-container .eshop-controls-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: .75rem !important;
  row-gap: .65rem !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

.cart-system-container .eshop-controls-inline input[type="submit"],
.cart-system-container .eshop-controls-inline input[type="button"],
.cart-system-container .eshop-controls-inline button {
  width: auto !important;
  min-width: 180px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* e-shops側の不要な中央寄せ・固定幅を抑える */
.cart-system-container center,
.cart-system-container form > div,
.cart-system-container form > p {
  max-width: 100% !important;
}

@media (max-width: 640px) {
  .cart-system-container {
    padding: 1.15rem !important;
  }

  .cart-system-container select.eshop-product-option-select {
    width: 100% !important;
  }

  .cart-system-container .eshop-controls-inline input[type="submit"],
  .cart-system-container .eshop-controls-inline input[type="button"],
  .cart-system-container .eshop-controls-inline button {
    min-width: 160px !important;
  }
}