/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 16 2026 | 02:08:21 */
/* DisplayPostsが書き出すリストの初期スタイル */
.notice-list-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 5件目以降（5番目の要素以降）のお知らせを最初は非表示にする */
.notice-list-container .listing-item:nth-child(n+5) {
  display: none;
}

/* 「もっと見る」ボタンが押されて親にクラスがついたら、5件目以降をふわっと表示 */
.notice-list-active .notice-list-container .listing-item:nth-child(n+5) {
  display: block; /* 投稿のスタイルに合わせて flex 等にしてもOK */
  animation: noticeFadeIn 0.4s ease forwards;
}

@keyframes noticeFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 「もっと見る」ボタンのデザイン（お好みで調整してください） */
/* ボタンを包む外枠：左右の余白をなくし、横幅いっぱいに広げます */
.notice-more-btn-wrap {
  text-align: center;
  margin-top: 25px;
  width: 100%;
}

/* ★修正：横幅いっぱいの洗練されたボタンデザイン */
.notice-more-btn {
  display: block;          /* ブロック要素にして横いっぱいに広げる */
  width: 100%;             /* 横幅100% */
  box-sizing: border-box;  /* はみ出し防止 */
  
  padding: 8px 20px;       /* ← 14px→8pxに変更。薄めのボタンに */
  background-color: #5c8da8; /* ご指定のアクセントカラー */
  color: #ffffff;
  
  border-radius: 6px;      /* ← 高さが薄くなった分、角丸も少し控えめに */
  
  font-size: 13px;         /* ← 14px→13pxで文字も少しコンパクトに */
  font-weight: 700;        /* 文字を少し太くして視認性をアップ */
  letter-spacing: 0.1em;   /* 文字の間隔を少しあけて上品に */
  text-align: center;
  border: none;
  cursor: pointer;
  
  box-shadow: 0 2px 6px rgba(92, 141, 168, 0.2); 
  transition: all 0.2s ease;
}

/* マウスを乗せたとき（ホバー時）の演出 */
.notice-more-btn:hover {
  background-color: #3a6f8f; /* 少し濃い青に */
  box-shadow: 0 4px 12px rgba(58, 111, 143, 0.3); /* 影を強くして浮き上がらせる */
  transform: translateY(-1px); /* 1pxだけ上に持ち上げる */
}

.notice-more-btn-wrap {
    display: none;
}