/* ==========================================================================
   footer.css - Ver 18.10 UD Flexible Edition
   - 見た目・フォントサイズ・配色はVer 18.4を完全継承
   - SP表示：2列グリッドにおいて、項目数が偶数・奇数どちらでも崩れない柔軟な設定に変更
   - 変更点：last-childの強制2カラム占有を「奇数の場合のみ」に自動化
   ========================================================================== */

#footer {
  width: 100%;
  background-color: #ffffff;
  border-top: 2px solid #e60012; 
}

/* --- 上段（ナビゲーションエリア） --- */
.footer-top {
  background-color: #ffffff;
  padding: 50px 0 30px; 
}

.footer-top .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-nav li {
  position: relative;
  display: flex;
  align-items: center;
}

/* PC時の縦ライン */
.footer-nav li:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 20px; 
  background: #e0e0e0; 
  margin: 0 30px; 
}

.footer-nav a {
  color: #1a1a1a;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
}

.footer-nav a span {
  font-size: 10px;
  color: #c5a059; 
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.footer-nav a:hover {
  color: #e60012;
}

/* --- 中段（ロゴエリア） --- */
.footer-middle {
  background-color: #ffffff;
  padding: 0 20px 50px; 
}

.footer-middle .container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid #f5f5f5; 
  padding-top: 30px;
}

.footer-middle h3 {
  font-weight: 800;
  font-size: 20px;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: 0.12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-middle h3 .sub-title {
  font-weight: 700;
  font-size: 11px;
  color: #c5a059; 
  letter-spacing: 0.2em;
}

/* --- 下段（コピーライト） --- */
.footer-bottom {
  background-color: #e60012; 
  color: #ffffff;
  text-align: center;
  padding: 16px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* -------------------------------------------
   レスポンシブ (SP) 768px以下
------------------------------------------- */
@media (max-width: 768px) {
  .footer-top {
    padding: 30px 0 10px;
  }

  .footer-nav ul {
    gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-nav li {
    justify-content: center;
    padding: 18px 10px; 
    border-bottom: 1px solid #f0f0f0; 
  }

  .footer-nav li:not(:last-child)::after {
    display: none;
  }

  /* 左側のカラム（1,3,5,7番目...）にのみ右線を引く */
  .footer-nav li:nth-child(odd) {
    border-right: 1px solid #f0f0f0;
  }

  /* 【重要：柔軟なグリッド設定】
     項目が奇数の場合、最後の項目だけを中央寄せ2列占有にする。
     偶数の場合は、そのまま2列で綺麗に並ぶ設定です。 */
  .footer-nav li:last-child:nth-child(odd) {
    grid-column: 1 / 3; 
    border-right: none;
  }

  /* 最後の列のボーダーを消す（スッキリ見せるため） */
  .footer-nav li:last-child,
  .footer-nav li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }

  .footer-nav a {
    font-size: 14px;
  }

  .footer-middle {
    padding: 20px 20px 40px;
  }
  
  .footer-middle .container {
    padding-top: 20px;
  }

  .footer-middle h3 {
    font-size: 18px;
  }
}