/* =========================================================
   Footer
   - must NOT overlap (no fixed/absolute)
   - same width + surface style as header-inner
   ========================================================= */


.site-footer{
  /* “他の領域とかぶらせない”：
     fixed/absolute を使わず通常フローに置く（これが正） */
  position: relative;
  z-index: 1;

  /* headerと同系の見た目 */
  background: transparent; /* 背景色は body 100% の上に “内側の箱”で作る */
  border-top: 0;

    /* じんわり表示（2000ms） */
  opacity: 0;
  animation: footerFadeIn 2000ms ease-out forwards;
  
}

@keyframes footerFadeIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-footer{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ヘッダーと同じ箱（= header-inner と同じ幅ルール） */
/* footer-inner は“縦積みコンテナ”にする（新しい上段を入れても崩れない） */
.footer-inner{
  width: var(--bgw);
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px 22px;

  display: block;
}

/* ① 太い水平線（10px / rgba(15,18,28,0.92)） */
.footer-rule{
  height: 10px;
  background: rgba(15,18,28,0.92);
  margin: 0 0 14px;
}

/* ② 左ロゴ / 右アイコン：同じ高さで揃える */
.footer-brandrow{
  display: flex;
  align-items: center;       /* 同じ高さ */
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.footer-logo
{
  display: block;
  height: 60px;              /* ←同じ高さ指定（ここだけ好みで調整） */
  width: auto;
}
.footer-icon{
  display: block;
  height: 60px;              /* ←同じ高さ指定（ここだけ好みで調整） */
  width: auto;
}


@media (max-width: 767px){
  .footer-logo  { height: 44px; }
  .footer-icon  { height: 44px; }
}



/* バナー領域は必ず全幅ブロック */
.footer-right{
  display: block;
  width: 100%;
}

/* バナー行も中央寄せ（見た目のブロック感が出る） */
.banner-grid{
  display: flex;
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}


/* more... */
.banner-more{
  display: block;
  margin-top: 0;
  text-align: right;
  font-family: var(--nav-font);
  font-weight: 700;
  text-decoration: none;
  color: rgba(15,18,28,0.92);
  padding-right:20px;
}
.banner-more:hover{ color: rgba(143,178,241,1); }

/* SP：3つを“1行固定”にする（縮小してでも収める） */
@media (max-width: 767px){
  .banner-grid{
    flex-wrap: nowrap;        /* ←折り返し禁止 */
    gap: 8px;
  }

  /* 3つを1行に収めるためにサイズを固定・縮小 */
  .banner-grid .banner{
    flex: 0 0 auto;
  }

  .banner-grid .banner img{
    width: 96px;   /* ここで調整：90〜110pxぐらいで好み */
    height: auto;
  }
}