/* =========================
   お知らせ
========================= */
.info-section {
  background: linear-gradient(
    to bottom,
    #f8fafc 0%,
    #f4f7fa 55%,
    #f9fbfd 100%
  );

  position: relative;
}

.info-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -60px;
  height: 60px;

  background: linear-gradient(
    to bottom,
    #f9fbfd 0%,
    #ffffff 100%
  );

  pointer-events: none;
}


/* =========================
   NEWS UI Version5
========================= */

.news-item{
    display:block;

    padding:12px 18px;
    padding-right:34px;

    color:#1f2937;
    text-decoration:none;
    position:relative;

    background:transparent;

    border-radius:0;

    border-bottom:1px solid #eef0f2;

    transition:
        background .25s ease,
        padding-left .25s ease;
}

.news-item:hover{

    background:transparent;

    padding-left:18px;

    box-shadow:none;

}

.news-item:hover .news-title{

    color:#2563eb;

    font-weight:600;

}

.news-item:hover::after{

    right:12px;

    border-color:#2563eb;

}


.news-date {

    display:inline-block;

    min-width:90px;

    color:#6b7280;

    font-size:1.05rem;

    font-weight:500;

}


.news-title{

    display:inline;

    font-weight:500;

    color:#111827;

    transition:color .3s ease;

}


.news-category{

    display:inline-flex;

    margin:0 8px;

    padding:3px 10px;

    border-radius:0;

    font-size:0.95rem;

    font-weight:700;

    background:#f3f4f6;

}


.news-category.update{						/* 更新情報 */

    background:var(--news-update-bg);

    color:var(--news-update-color);

}


.news-category.info{						/* お知らせ */

    background:var(--news-info-bg);

    color:var(--news-info-color);

}


.news-badge {								/* バッジ */
    display:inline-block;

    margin-right:10px;

    padding:2px 8px;

    border-radius:999px;

    background:#ef4444;

    color:#fff;

    font-size:0.95rem;

    font-weight:700;

}


.news-item::after{							/* 矢印 */

    content:"";

    position:absolute;

    right:16px;

    top:50%;

    width:7px;

    height:7px;

    border-top:2px solid #cbd5e1;

    border-right:2px solid #cbd5e1;

    transform:translateY(-50%) rotate(45deg);

    transition:all .25s ease;

}



/* ==========================================================
   Vertical News Carousel
   News System Version 5.0
========================================================== */

.news-viewport{

    position: relative;

    overflow: hidden;

    height: 210px;

    background: transparent;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.info-box {
    overflow: hidden;
    height: 320px;

    background: var(--bg-card);

    padding: 24px 24px 0;
    box-sizing: border-box;

}


.info-box h3 {
  font-size: 1.6rem;
  margin: 0 0 15px;
}


.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
    display:block;
  height: 210px; 
  overflow: hidden;
  position: relative;

}

.info-box ul::before {
  top: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.95),
      transparent
    );
}

.info-box ul::after {
  bottom: 0;
  background:
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.95),
      transparent
    );
}


/* グラデーション */
.info-box ul::before,
.info-box ul::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 28px;
  z-index: 5;
  pointer-events: none;
}


.info-box li { 							/* 1件固定 */
  height: 70px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  opacity: 0.45;						/* 初期状態 */

  transition:
    opacity .45s ease,					/* アニメーション */
    transform .55s cubic-bezier(.22,.61,.36,1);

}


.info-box li.center{					/* 中央 */

    opacity:1;

    font-weight:600;

}

.info-box li.center .news-title{
    font-weight:700;
}


/* 上下 */
.info-box li.side{
    opacity:.55;
}


.info-box a {
  text-decoration: none;
  color: #1f2937;
  font-size: 1.3rem;
}


.info-box .news-viewport {
  width: 100%;
}


/* =========================
   一覧を見る
========================= */

.info-box .more {
  display: block;
  margin-top: 10px;

  text-align: right;

  color: #2563eb;
  font-size: 0.95rem;
  font-weight: 500;

  text-decoration: none;

  transition:
    color 0.25s ease,
    letter-spacing 0.25s ease;
}

.info-box .more::after {
  content: " →";
  display: inline-block;

  transition: transform 0.25s ease;
}

.info-box .more:hover {
  color: #1d4ed8;
}

.info-box .more:hover::after {
  transform: translateX(4px);
}


/*#info-list li {
  opacity: 0.9;
}*/



/* =========================
   Alert Category
   News System Version 5.0
========================= */

/* ▼表示領域 */
.alert-wrapper {
  overflow: hidden;
  flex: 1;
}

.info-alert-bar {
  display: flex;
  align-items: center;
  height: 36px;
  gap: 12px;

  width: 85%;
  margin: 0 auto;

  background: #fff;                 /* ★白にする */
  border: 1px solid #dc2626;        /* 赤枠 */
  border-left: 5px solid #dc2626;
  padding: 4px 12px;               /* ★高さを削る */
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.alert-label {
  color: #dc2626;
  font-size: 0.9rem;
  font-weight: 700;

  padding-right: 10px;
  border-right: 1px solid #e5e7eb;

  white-space: nowrap;
}


/* ▼横スクロール */
#alert-list {
  display: flex;
  gap: 24px;
  white-space: nowrap;
  align-items: center;
}

#alert-list::after {
  display: none !important;
}

/* ▼1件だけ1行 */
#alert-list li {
  display: inline-block;

  padding-right: 20px;
  border-right: 1px solid #f3f4f6;

  margin-right: 0;
}

#alert-list li::after {
  display: none;
}


#alert-list li,
#alert-list li::before,
#alert-list li::after {
  border: none !important;
  background: none !important;
}


#alert-list .news-item {
    display:inline-flex;
    align-items:center;
    font-size: 1.1rem;
    font-weight: 500;
    color: #111827;
}

#alert-list .news-item:hover {
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 4px;
}

#alert-list .news-item:hover .alert-priority {
  transform: scale(1.05);
}

#alert-list a,
#alert-list a:visited,
#alert-list a:hover {
  text-decoration: none !important;
}


.alert-date {
  font-size: 1rem;
  color: #6b7280;
  margin-right: 8px;
}


.alert-category {
  display:inline-block;

    margin:0 8px;

    padding:3px 6px;

    border-radius:0;

    font-size:0.85rem;

    font-weight:700;

}

/* メンテナンス */

.alert-category[data-cat="maintenance"] {

    background:var(--news-maintenance-bg);

    color:var(--news-maintenance-color);

}


/* 障害 */
.alert-category[data-cat="trouble"] {

    background:var(--news-trouble-bg);

    color:var(--news-trouble-color);

}


.alert-title {
  color: #111827;
  margin-right: 8px;
  letter-spacing: 0.02em;
}

.alert-priority {
  background:var(--news-important-color);
  color: #fff;
  font-size: 1.05rem;       /* ←さらに少し上げる */
  padding: 3px 8px;       /* ←しっかり横幅 */
  border-radius: 999px;

  font-weight: 700;

  display: inline-flex;    /* ←追加 */
  align-items: center;
  gap: 4px;
  flex-shrink:0;
}

.alert-priority::before {
  content: "\26A0";
  margin-right: 4px;
  font-size: 1.2rem;
}


/* =========================
   News 詳細ページ
========================= */
.news-detail {
  padding: 60px 20px;
}

/* タイトル */
.detail-title {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

/* メタ */
.detail-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}


/* 本文 */
.detail-body {
  line-height: 1.9;
  font-size: 1rem;
}

.detail-body h2 {
  margin-top: 24px;
  font-size: 1.2rem;
}


/* =========================
   前後記事
========================= */
.detail-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.detail-nav a {
  color: #2563eb;
  text-decoration: none;
}

.detail-nav a:hover {
  text-decoration: underline;
}