body{margin:0;font-family:"Noto Sans JP",sans-serif;background:#f5f3ef;}
.footer{padding:56px 0;background:linear-gradient(180deg,#4b372b,#2d211b);color:#f7f3ea;}
.footer__container{width:min(1200px,calc(100% - 40px));margin:auto;}
.footer__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:42px;}
.footer__logo{width:220px;height:70px;object-fit:contain;background:transparent;border:none;border-radius:0;filter:brightness(0) invert(1);}
.footer__subtitle{margin:0;color:#e8d8b4;}
.footer__navigation{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.footer__card{background:rgba(255,255,255,.06);border:1px solid rgba(226,194,122,.25);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.footer__header{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:#f8f3e8;font-weight:700;padding:0;cursor:pointer;}
.footer__body{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.footer__link{color:#efe2be;text-decoration:none;transition:color .2s,transform .2s;}
.footer__link:hover{color:#fff;transform:translateX(4px);}
.footer__copyright{display:flex;justify-content:center;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#d6c5a2;}
@media(max-width:767px){
.footer__navigation{grid-template-columns:1fr;}
}


/* ========================================
   STEP5-1 配色・世界観
   （旧Garage Memoフッター配色を移植）
======================================== */
:root{
  --gm-footer-bg-top:#52372a;
  --gm-footer-bg:#4a3124;
  --gm-footer-bg-bottom:#432c20;
  --gm-card:#624231;
  --footer-gold:#c89a4b;
  --footer-text:#fff;
  --footer-sub:#e8d8b4;
}

.footer{
  background:linear-gradient(to bottom,
    var(--gm-footer-bg-top) 0%,
    var(--gm-footer-bg) 42%,
    var(--gm-footer-bg-bottom) 100%);
  color:var(--footer-text);
}

.footer__card{
  background:var(--gm-card);
}

.footer__header,
.footer__link{
  color:var(--footer-text);
}

.footer__subtitle,
.footer__copyright{
  color:var(--footer-sub);
}

.footer__header{
  border-bottom:1px solid rgba(200,154,75,.75);
  padding-bottom:10px;
}

.footer__link:hover{
  color:#e2c27a;
}

.footer__copyright{
  border-top:1px solid rgba(200,154,75,.45);
}


/* ========================================
   STEP5-2 カード質感
   （旧Garage Memoフッターの質感を移植）
======================================== */

.footer__card{
  position:relative;
  border:1px solid rgba(200,154,75,.35);
  border-radius:18px;
  background:linear-gradient(
      to bottom,
      #694736 0%,
      #624231 45%,
      #593b2c 100%);
  box-shadow:
      0 2px 6px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

.footer__card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}

.footer__card:hover{
  background:linear-gradient(
      to bottom,
      #70503c 0%,
      #694736 45%,
      #604130 100%);
  border-color:rgba(200,154,75,.55);
}


/* ========================================
   STEP5-2 Strict Fix
   STEP1の責務逸脱を修正
======================================== */
.footer__header{
  padding-bottom:0;
}

/* ========================================
   STEP5-2 Card Finish
======================================== */
.footer__card{
  position:relative;
  border:1px solid rgba(200,154,75,.35);
  border-radius:18px;
  background:linear-gradient(to bottom,#694736 0%,#624231 45%,#593b2c 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.footer__card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
.footer__card:hover{
  background:linear-gradient(to bottom,#70503c 0%,#694736 45%,#604130 100%);
  border-color:rgba(200,154,75,.55);
}


/* ========================================
   STEP5-3 余白・タイポグラフィ（改訂版）
======================================== */

.footer__brand{
  gap:10px;
  margin-bottom:48px;
}

.footer__subtitle{
  font-size:.92rem;
  font-weight:500;
  line-height:1.7;
  letter-spacing:.04em;
}

.footer__navigation{
  gap:28px;
}

.footer__card{
  padding:22px;
}

.footer__header{
  padding-bottom:12px;
  margin-bottom:16px;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.03em;
}

.footer__body{
  gap:14px;
  margin-top:0;
}

.footer__link{
  display:block;
  position:relative;
  padding-left:24px;
  font-size:.95rem;
  font-weight:500;
  line-height:1.8;
  letter-spacing:.02em;
  text-indent:0;
}

.footer__link::before{
  content:"›";
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
}

.footer__copyright{
  margin-top:48px;
  padding-top:22px;
  font-size:.86rem;
  line-height:1.6;
  letter-spacing:.05em;
}


/* ========================================
   STEP3 Responsive（Header共通ブレークポイント）
======================================== */

/* Desktop */
.footer__navigation{
  grid-template-columns:repeat(4,minmax(220px,1fr));
  align-items:start;
}

/* Small PC / Tablet */
@media (max-width:1200px) and (min-width:769px){
  .footer__navigation{
    grid-template-columns:repeat(2,minmax(280px,1fr));
    align-items:start;
    justify-content:center;
    gap:28px;
  }
}

/* Smartphone */
@media (max-width:768px){
  .footer__navigation{
    grid-template-columns:1fr;
    align-items:start;
    gap:0;
  }

  .footer__card{
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
    overflow:visible;
  }

  .footer__card::before{
    display:none;
  }

  .footer__header{
    padding:22px 0;
    margin:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .footer__body{
    padding:8px 0 18px;
  }
}


/* ========================================
   STEP5-4 アクセント
======================================== */

/* Gold chevron */
.footer__header span:last-child{
  color:#c89a4b;
  font-size:.92rem;
}

/* Refined divider */
.footer__header{
  border-bottom:1px solid rgba(200,154,75,.75);
}

/* Gold markers */
.footer__link::before{
  color:#c89a4b;
}

/* Hover accent */
.footer__link:hover::before,
.footer__header:hover span:last-child{
  color:#e2c27a;
}


/* ========================================
   STEP5-5 仕上げ
======================================== */

/* Smooth interactions */
.footer__card,
.footer__header,
.footer__link,
.footer__logo{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    color .18s ease,
    background .18s ease;
}

/* Card hover */
.footer__card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Link hover */
.footer__link:hover{
  transform:translateX(3px);
}

/* Logo hover */
.footer__brand:hover .footer__logo{
  transform:translateY(1px) scale(.995);
}

/* Mobile: disable lift */
@media (max-width:768px){
  .footer__card:hover,
  .footer__link:hover,
  .footer__brand:hover .footer__logo{
    transform:none;
  }
}


/* STEP5-5.1 Icon refinement */
.footer__header>span:first-child{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer__header i{
  width:20px;
  text-align:center;
  color:#c89a4b;
  flex-shrink:0;
}


/* ========================================
   STEP6 Accordion
======================================== */
.footer__chevron{display:inline-flex;align-items:center;justify-content:center;width:18px;font-size:.85rem;color:#c89a4b;transition:transform .28s ease;}
.footer__body{overflow:hidden;max-height:0;opacity:0;margin-top:0;padding:0;transition:max-height .3s ease,opacity .25s ease,padding .25s ease;}
.footer__card.is-open .footer__body{opacity:1;margin-top:0;padding-top:14px;}
.footer__card.is-open .footer__chevron{transform:rotate(180deg);}