.swiper { overflow: inherit; }
  .swiper-slide { width: 30%; }
  @media only screen and (max-width: 767px) { .swiper-slide { width: 40%; } }
  @media only screen and (max-width: 576px) { .swiper-slide { width: 60%; } }

  /* News Section Custom Styles */
  #news { padding-top: 40px !important; padding-bottom: 80px; }
  .news-list { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; }
  .news-item { display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid #e0e0e0; }
  .news-item:first-child { border-top: 1px solid #e0e0e0; }
  .news-meta { display: flex; align-items: center; min-width: 240px; }
  .news-date { font-family: "Helvetica Neue", Arial, sans-serif; color: #666; margin-right: 20px; font-size: 1.5rem; letter-spacing: 0.05em; }
  .news-category { display: inline-block; padding: 5px 16px; border-radius: 50px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; }
  .news-category{ background: rgba(20,26,109,.08); color: #141A6D; }
  .news-link { color: #333; text-decoration: none; flex: 1; transition: color 0.3s; font-size: 1.6rem; line-height: 1.6; font-weight: 500; }
  .news-link:hover { color: #001f3f; text-decoration: underline; }
  @media (max-width: 768px) {
    .news-item { flex-direction: column; align-items: flex-start; }
    .news-meta { margin-bottom: 10px; width: 100%; }
  }

  /* =========================================
   HOME / NEWS BAR (tuned)
========================================= */

/* Visionセクションの背景に寄せる（必要なら値だけ調整） */
:root{
  --wh-vision-gray: #e9e9e9; /* ← Visionの背景に近い色。違うならここを変更 */
  --wh-navy: #141A6D;
}

/* 帯：清潔感そのまま。背景は半透明で馴染ませる */
.home-newsbar{
  position: relative;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(20,26,109,.10);
  border-bottom: 1px solid rgba(20,26,109,.08);
}

/* 内側 */
.home-newsbar__inner{
  display: flex;
  align-items: center;         /* PCはこれでOK */
  gap: 18px;
  padding: 18px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* NEWSラベル */
.home-newsbar__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 100px;
  background: rgba(20,26,109,.08);
  color: #141A6D;
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 1.15rem;
  flex: 0 0 auto;
  margin-right: 10px; /* ← 8〜14pxで好みに調整 */
}

/* リスト */
.home-newsbar__list{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.home-newsbar__item{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-newsbar__item + .home-newsbar__item{
  position: relative;
  padding-left: 18px;
}
.home-newsbar__item + .home-newsbar__item::before{
  content:"";
  position:absolute;
  left: 6px;
  top:50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(20,26,109,.12);
}

/* 日付 */
.home-newsbar__date{
  color: rgba(20,26,109,.55);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 1.15rem;
  flex: 0 0 auto;
}

/* タイトル：2行になる場合も見やすく（PCは1行維持） */
.home-newsbar__link{
  color: rgba(20,26,109,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .2s ease;
}
.home-newsbar__link:hover{ opacity: .72; }

/* VIEW ALL：PCで大きい→小さく。下線は初期なし */
.home-newsbar__all{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 0;
  color: rgba(20,26,109,.72);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 1.15rem;          /* ★小さく */
  text-decoration: none;
  position: relative;
}

/* 下線：初期は“消す”→ hoverで出す */
.home-newsbar__all::after{
  content:"";
  position:absolute;
  left:0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: rgba(6, 10, 63, 0.22);
  opacity: 0;                  /* ★最初は無し */
  transform: scaleX(.6);
  transform-origin: left;
  transition: opacity .18s ease, transform .22s ease;
}
.home-newsbar__all:hover{ color: rgba(20,26,109,.92); }
.home-newsbar__all:hover::after{
  opacity: 1;                   /* ★hoverで出る */
  transform: scaleX(1);
}

/* ---------------------------
   Mobile (max-width: 576px)
   - 並び：NEWS → 記事1 → 記事2 → VIEW ALL
   - NEWSは小さめピル（前のサイズ感）
   - タイトルは1行省略＆左寄せ
   - VIEW ALL は2行目の下で右寄せ
--------------------------- */
@media (max-width: 576px){

  .home-newsbar{
    position: relative;
  }

  /* ここは縦積みにする（grid/flexのPC設定を上書き） */
  .home-newsbar__inner{
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    box-sizing: border-box;
  }

  /* NEWS（前のサイズ感） */
  .home-newsbar__label{
    align-self: flex-start;   /* 左に小さく置く */
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* リスト：縦並び */
  .home-newsbar__list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;

  }

  .home-newsbar__item{
    display: flex;
    align-items: flex-start;  /* 日付とタイトルは上揃え */
    width: 100%;
  }

  /* 区切り線は不要 */
  .home-newsbar__item + .home-newsbar__item{
    padding-left: 0;
  }
  .home-newsbar__item + .home-newsbar__item::before{
    display: none;
  }

  /* 日付は幅固定（2行目でも揃う） */
  .home-newsbar__date{
    width: 92px;
    flex: 0 0 92px;
    font-size: 1.05rem;
    line-height: 1.4;
    padding-top: 2px;         /* 微調整（0〜3px） */
    box-sizing: border-box;
  }

  /* タイトル：1行省略＆左寄せ */
  .home-newsbar__link{
    flex: 1 1 auto;
    min-width: 0;             /* ★ellipsis必須 */
    display: block;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 1.12rem;
    line-height: 1.4;
    text-align: left;
  }

  /* VIEW ALL：リストの“下”に、右寄せ */
  .home-newsbar__all{
    align-self: flex-end;     /* ★右寄せ */
    margin-top: 2px;          /* 記事2との間の余白 */
    padding: 6px 0;
    font-size: 1.00rem;
    line-height: 1;
    white-space: nowrap;
  }

  /* 下線はホバー時だけ（任意） */
  .home-newsbar__all::after{
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: left;
    transition: opacity .2s ease, transform .2s ease;
  }
  .home-newsbar__all:hover::after{
    opacity: 1;
    transform: scaleX(1);
  }
}