@charset "UTF-8";
/* Scss Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* ==========================================================================
   Top Page Styles
   ========================================================================== */
/* メインビジュアル
   -------------------------------------------------------------------------- */
#mainvisual,
#mainvisuals {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 900px) {
  #mainvisual,
  #mainvisuals {
    max-width: 980px;
  }
}
@media (max-width: 899px) {
  #mainvisual,
  #mainvisuals {
    margin: -30px auto 0;
  }
}
#mainvisual img,
#mainvisuals img {
  width: 100%;
}

/* インデックスナビ（右側・ボタンリスト）
   -------------------------------------------------------------------------- */
/* インデックスナビ（右側・ボタンリスト）
   -------------------------------------------------------------------------- */
#index-nav {
  flex: 1;
  margin: 0;
  padding: 0;
}

#index-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 0;
  list-style: none;
}
@media (max-width: 899px) {
  #index-nav-list {
    gap: 10px;
    justify-content: flex-start;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* 常に3列
   -------------------------------------------------------------------------- */
#index-nav-list > li {
  width: calc((100% - 60px) / 4);
  min-width: 140px; /* ← これが375pxで2列になる原因でした */
  max-width: 160px;
  box-sizing: border-box;
}
@media (max-width: 899px) {
  #index-nav-list > li {
    /* 【修正ポイント】min-width を解除して、狭い画面でも3等分を優先する */
    width: calc((100% - 20px) / 3);
    min-width: 0;
    max-width: 160px;
  }
}
#index-nav-list > li a {
  display: block;
  text-decoration: none;
}
#index-nav-list > li img {
  width: 100%;
  height: auto;
  display: block;
}

/* サブタイトルとナビの間隔（変更なし）
   -------------------------------------------------------------------------- */
.nav-section-wrapper {
  display: flex;
  max-width: 980px;
  margin-top: 60px;
  margin-inline: auto;
  padding: 0 16px;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 899px) {
  .nav-section-wrapper {
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    gap: 0;
  }
}

.nav-subtitle {
  flex: 0 0 160px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #333;
  margin: auto 0;
}
@media (max-width: 899px) {
  .nav-subtitle {
    flex: 0 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
  }
}

/* ==========================================================================
   旧レイアウト・未使用コード（バックアップとして保持）
   ========================================================================== */
/*
@media screen and (min-width:1601px) {
  .main-content {
    position: relative;
    #mainvisual, #mainvisuals {
      width: 100%; margin: 180px auto 120px;
      img { width: 100%; height: auto; }
    }
    .top-news {
      position: absolute;
      margin-left: calc((100% - 980px) / 2);
      bottom: -85px; left: 0; z-index: 1;
      background: #fff; max-width: 690px;
      a { display: block; padding: 30px; 
        .top-news-box { display: flex; dl { margin-left: 20px; dt { font-weight: bold; } } }
      }
    }
  }
}

#container {
  position:relative;
  #mainvisual, #mainvisuals {
    width:100vw; height:calc(100vh - 180px);
    position:absolute; top:0; left:0; margin:0 auto; text-align:center;
    img { object-fit:cover; width:100%; height:calc(100vh - 180px); margin: 0 auto; }
  }
}
*//*# sourceMappingURL=top.css.map */