/* =========================================================
   Shop Footer (Vermicular-like) — token-sized (final)
   ========================================================= */

.shop-footer{
  background: var(--c-bg, #fff);
  border-top: 1px solid var(--c-border, #e5e7eb);
  color: var(--c-fg, #1a1a1a);
  font-family: var(--font-sans-jp);
  font-size: var(--fs-14);                 /* ベース14px */
  line-height: var(--lh-base);
  margin-top: var(--space-16);
}
.shop-footer__inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: var(--space-8) var(--container-gutter, 16px) var(--space-6);
}

/* ---------- Top row: brand + CTA ---------- */
.shop-footer__top{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-4);
  padding-block: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.shop-footer__brand{ display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.shop-footer__brand img{ height:24px; width:auto; }
.shop-footer__brand .brand-text{ font-weight:var(--fw-bold); letter-spacing:.02em; font-size:var(--fs-base); }

/* CTA */
.btn.btn--contact{
  display:inline-flex; align-items:center; gap:10px;
  border-radius: var(--radius-full);
  padding:20px 26px;
  background:#111; color:#fff; text-decoration:none;
  box-shadow: var(--shadow-sm);
  line-height:1; font-size:var(--fs-sm); font-weight:var(--fw-regular);
}
.btn--contact:hover{ opacity:.92; }
.btn--contact:focus-visible{ outline:2px solid #111; outline-offset:3px; }
.btn--contact .i-mail{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

/* ---------- Category grid ---------- */
.shop-footer__nav{
  display:grid; gap:20px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  padding-top: var(--space-6);
}
.cat-col{ min-width:0; }
.cat-acc{}
.cat-acc__hd{ cursor:default; list-style:none; }
.cat-acc__title{ display:block; font-weight:var(--fw-semibold); margin-bottom:10px; font-size:var(--fs-14); }
.cat-acc__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cat-acc__item a{ color:var(--c-fg-muted, #6b7280); text-decoration:none; font-size:var(--fs-14); }
.cat-acc__item a:hover{ color:var(--c-fg, #1a1a1a); text-decoration:underline; }

/* ---------- Utilities (ご利用ガイド行) ---------- */
.shop-footer__utils{
  margin-top: var(--space-12);             /* ベース余白 */
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border, #e5e7eb);
}
.shop-footer__utils .utils-list{
  display:flex; flex-wrap:wrap; justify-content:flex-start !important;
  align-items:center; gap:0 40px;           /* 横の間隔は調整可 */
  margin:0; padding:0; list-style:none; text-align:left;
}
.shop-footer__utils .utils-item{ margin:0; padding:0; }
.shop-footer__utils .utils-item a{ display:inline-block; padding:8px 0; color:var(--c-fg-muted); text-decoration:none; font-size:var(--fs-14); }
.shop-footer__utils .utils-item a:hover{ color:var(--c-fg); text-decoration:underline; }

/* ---------- Large brand & SNS ---------- */
/* 大ロゴの直前に1本だけ区切り線 */
.shop-footer__brand-large{
  border-top: 1px solid var(--c-border, #e5e7eb);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.shop-footer__brand-large img{ max-height:38px; width:auto; opacity:.9; }
.brand-large-text{
  font-family:var(--font-latin); font-weight:var(--fw-bold);
  font-size: clamp(24px, 5vw, 40px);
  letter-spacing:.12em; text-transform:uppercase; opacity:.9;
}

/* SNS：大ロゴの真下センタリング */
.shop-footer__sns{
  margin-top: var(--space-3);               /* 大ロゴとの距離 */
  display:flex; justify-content:center; border:0;
}
.sns-list{
  display:inline-flex; align-items:center; gap:18px;
  margin:0; padding:0; list-style:none;
}
.sns-list a{
  display:inline-flex; width:30px; height:30px;
  align-items:center; justify-content:center;
  border-radius:50%; color:var(--c-fg); text-decoration:none;
}
.sns-list a:hover{ opacity:.85; }

/* ---------- Legal ---------- */
.shop-footer__legal{
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top:1px solid var(--c-border, #e5e7eb);
  color:var(--c-fg-muted, #6b7280);
  font-size:var(--fs-xs);                   /* 12px */
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .shop-footer__nav{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:900px){
  .shop-footer__top{ flex-direction:column; align-items:flex-start; gap:12px; }
  .btn.btn--contact{ width:100%; justify-content:center; }

  /* SP: 1列アコーディオン（初期クローズ） */
  .shop-footer__nav{ grid-template-columns:1fr; gap:12px; }
  .cat-acc > summary{
    display:flex; align-items:center; justify-content:space-between;
    padding:3px 0 12px; cursor:pointer; user-select:none;
    border-bottom:1px solid var(--c-border, #e5e7eb);
    list-style:none; font-size:var(--fs-14); font-weight:var(--fw-semibold);
  }
  .cat-acc[open] > summary{ border-bottom-color:transparent; }
  .cat-acc__title{ margin:0; }
  .cat-acc__list{ padding:8px 0 12px; }
  .cat-acc > summary::after{
    content:""; width:10px; height:10px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform var(--dur);
  }
  .cat-acc[open] > summary::after{ transform:rotate(-135deg); }

  /* Utilities / logo spacing on SP */
  .shop-footer__brand-large{ margin-top:var(--space-4); padding-top:var(--space-4); }
}

/* Desktop: headings look open without marker */
@media (min-width:901px){
  .cat-acc{ display:block; }
  .cat-acc > summary{
    display:block; padding:0 0 10px; border:0; cursor:default;
    font-weight:var(--fw-semibold); font-size:var(--fs-14);
  }
  .cat-acc > summary::after,
  .cat-acc > summary::-webkit-details-marker{ display:none; }

  /* PCだけ ご利用ガイド上の余白を増量 */
  .shop-footer__utils{
    margin-top: var(--space-16);            /* 大きめ余白 */
    padding-top: var(--space-6);
  }
}

/* ---------- Optional dark-ish scheme ---------- */
@media (prefers-color-scheme: dark){
  .shop-footer{ background:var(--c-bg, #111315); color:var(--c-fg, #f3f4f6); }
  .shop-footer__top, .shop-footer__utils, .shop-footer__brand-large, .shop-footer__legal{
    border-color: rgba(255,255,255,.1);
  }
  .cat-acc__item a{ color:var(--c-fg-muted, #9ca3af); }
  .cat-acc__item a:hover{ color:var(--c-fg, #f3f4f6); }
  .btn--contact{ background:#f3f4f6; color:#111; }
  .btn--contact:focus-visible{ outline-color:#f3f4f6; }
}