@layer utilities {
  .site-background {
    min-height: 100vh;
    position: relative;
    padding-top: 72px; /* ヘッダーの高さ分のパディング */
    background-image: linear-gradient(
      to bottom,
    #040404 0%,      /* 黒スタート */
    #040404 15%,     /* 10%まで黒 */
    #093b5a 40%,     /* 30%まで黒→青にグラデーション */
    #093b5a 60%,     /* 60%まで青 */
    #040404 90%,     /* 90%まで青→黒にグラデーション */
    #040404 100%     /* 100%まで黒 */
    );
  }
    /* 格子オーバーレイ */
  .site-background::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    /* 斜め格子（ダイヤ形）を1枚のSVGで作り、タイル状にリピート */
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'>\
        <g stroke='%23ffffff' stroke-opacity='0.15' stroke-width='1' stroke-linecap='round' fill='none'>\
          <!-- ダイヤ1個。破線: 約3セグメント見えるくらいに調整 -->\
          <path d='M20 0 L40 20 L20 40 L0 20 Z' stroke-dasharray='4 6'/>\
        </g>\
        <g fill='%23ffffff' fill-opacity='0.12'>\
          <!-- 交点の ●（四隅が次タイルと交差するのでここに置けば全交点に現れる）-->\
          <circle cx='20' cy='0'  r='2'/>\
          <circle cx='40' cy='20' r='2'/>\
          <circle cx='20' cy='40' r='2'/>\
          <circle cx='0'  cy='20' r='2'/>\
        </g>\
      </svg>"
    );

    background-repeat: repeat;
    background-size: 40px 40px;  /* 1マスのサイズ（ダイヤ1個） */

    /* 全体の濃さ（必要ならここでも調整可） */
    opacity: 0.3;

      /* ===== 斜め帯マスク =====
      角度・帯の開始/終了・フェード幅を変数で調整可能
    */
    --grid-angle: 135deg;   /* 右上↘左下方向。90→横、0→縦 */
    --band-start: 30%;      /* 帯の開始位置（斜め方向の30%） */
    --band-end:   80%;      /* 帯の終了位置（斜め方向の80%） */
    --feather:     4%;      /* 両端フェード幅 */

    /* 長辺の端だけをフェードさせる（斜め帯） */
    -webkit-mask-image: linear-gradient(
        var(--grid-angle),
        transparent calc(var(--band-start) - var(--feather)),
        #000       calc(var(--band-start) + var(--feather)),
        #000       calc(var(--band-end)   - var(--feather)),
        transparent calc(var(--band-end)   + var(--feather))
    );
    mask-image: linear-gradient(
        var(--grid-angle),
        transparent calc(var(--band-start) - var(--feather)),
        #000       calc(var(--band-start) + var(--feather)),
        #000       calc(var(--band-end)   - var(--feather)),
        transparent calc(var(--band-end)   + var(--feather))
    );
  }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 600ms ease,
      transform 600ms ease;
    will-change: transform, opacity;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }
  .gb-red {
    color: #e52226 !important;
  }
  .gb-navy {
    color: #1e2847 !important;
  }
  .gb-font {
    font-family: system-ui;
  }
  .border-gb-red {
    border-color: #e52226 !important;
  }
}

.active-tab {
  @apply bg-pink-400 font-bold;
  color: #e52226 !important;
  border-bottom: 2px solid #e52226 !important;
}
.site-header {
  background: #fff;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.site-header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.site-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  flex: 0 0 auto;
}
.logo-link {
  display: block;
}
.logo-image {
  height: 28px;
  width: auto;
}

.main-nav {
  flex: 1;
}
.main-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__item {
  margin: 0 0 0 16px;
}
.main-nav__link {
  text-decoration: none;
  color: #3490dc;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.main-nav__link:hover {
  color: rgba(52, 144, 220, 0.8);
}

.language-selector {
  flex: 0 0 auto;
  font-size: 14px;
}
.language-selector__link {
  text-decoration: none;
  color: #3490dc;
  transition: all 0.3s ease;
}
.language-selector__link:hover {
  opacity: 0.8;
}
.language-selector__link--active {
  font-weight: 500;
  color: rgb(36, 130.6285714286, 208.8);
}

.news-section {
  margin: 60px 0;
}
.news-section__title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}
.news-section__list {
  border-top: 1px solid #eee;
}
.news-section__more {
  text-align: center;
  margin-top: 30px;
}
.news-section__more .more-link {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #3490dc;
  color: #3490dc;
  text-decoration: none;
  transition: all 0.3s ease;
}
.news-section__more .more-link:hover {
  background: #3490dc;
  color: #fff;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}
.news-item:hover {
  background: rgba(52, 144, 220, 0.05);
}
.news-item__date {
  flex: 0 0 100px;
  text-align: center;
}
.news-item__date .year {
  display: block;
  font-size: 14px;
  color: #333;
}
.news-item__date .day {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.news-item__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-item__category {
  font-size: 12px;
  color: #3490dc;
  padding: 4px 12px;
  border: 1px solid #3490dc;
  border-radius: 4px;
}
.news-item__title {
  font-size: 14px;
  margin: 0;
}
.news-item__badge {
  font-size: 12px;
  color: #ff4444;
  font-weight: 500;
}
.news-item__arrow {
  flex: 0 0 40px;
  font-size: 24px;
  color: #3490dc;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .site-background {
    padding-top: 64px; /* モバイル用のヘッダー高さ分のパディング */
  }
  .site-header__content {
    flex-direction: column;
    align-items: center;
  }
  .main-nav {
    margin: 20px 0;
    width: 100%;
  }
  .main-nav__list {
    flex-wrap: wrap;
    justify-content: center;
  }
  .main-nav__item {
    margin: 5px 16px;
  }
  .language-selector {
    margin-top: 10px;
  }
  .news-item {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
  .news-item__date {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
  .news-item__date .year, .news-item__date .day {
    display: inline;
  }
  .news-item__content {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/*# sourceMappingURL=greeminBigwell.css.map */