/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

/* 全体 */
div.category-all { flex-direction:column; gap:40px; margin-bottom:100px; }

/* タブリスト */
ul.tab-list { justify-content:space-around; gap:5px; margin-bottom:24px; }
ul.tab-list li { align-items:center; border-radius:10px; background-color:var(--wh); border:1px solid var(--ye); box-sizing:border-box; cursor:pointer; color:var(--ye); font-size:14px; font-weight:800; flex:1; justify-content:center; text-align:center; line-height:100%; letter-spacing:-2px; }
ul.tab-list li a { display:block; padding:4px 10px; height:100%; width:100%; }
ul.tab-list li.active { background-color:var(--ye); color:var(--wh); }


/* 新着リスト */
ul.news-list { flex-direction:column; gap:16px; }
ul.news-list li div.news-txt p { font-size:16px; font-weight:400; line-height:200%; letter-spacing:-0.8px; }
ul.news-list li a { align-items:center; border-radius:10px; border:1px solid var(--bk); box-sizing:border-box; gap:10px; justify-content:flex-start; padding:16px; }

/* お知らせサムネイル */
div.news-ph { aspect-ratio:1/1; overflow:hidden; height:90px; width:90px; }
div.news-ph img { object-fit:cover; object-position:center; height:90px; width:90px; }

/* お知らせテキスト */
div.news-txt div.flex { align-items:center; justify-content:space-between; }
ul.news-list time { font-size:12px; font-weight:400; line-height:160%; }
ul.news-list div.news-txt { max-width:calc( 100% - 100px ); }
ul.news-list div.news-txt p.category { align-items:center; background-color:var(--gren); color:var(--wh); border-radius:40px; font-size:12px; font-weight:400; display:flex; justify-content:center; line-height:160%; padding:4px 10px; }
p.title-text { display:-webkit-box; text-overflow: ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/* ページャー */
#pagenation {
  text-align: center;
  margin-top:40px;
}

#pagenation #pagenation-list {
  display: inline-block;
}

#pagenation:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

#pagenation #pagenation-list li {
  float: left;
  background: none;
  list-style: none;
  padding: 0;
  margin: 0 10px 5px 0;
}

#pagenation #pagenation-list li:last-child {
  margin-left: 0;
}

/* リンクを円形にする */
#pagenation #pagenation-list a,
#pagenation #pagenation-list span {
  display: block;
  width: 32px;           /* 横幅を固定 */
  height: 32px;          /* 高さを固定 */
  line-height: 30px;     /* 文字を縦中央に */
  font-size: 16px;
  text-align: center;
  border-radius: 50%;    /* 完全な円形 */
  background: #FFFFFF;
  color: #E95464;
  border: 1px solid #E95464;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#pagenation #pagenation-list a:hover {
  background: #E95464;
  color: #FFFFFF;
  border: 1px solid #E95464;
}

/* 現在のページ */
#pagenation #pagenation-list .current {
  background: #E95464;
  color: #FFFFFF;
  border: 1px solid #E95464;
}

/* 省略表示 */
#pagenation #pagenation-list .omit {
  padding: 6px 2px;
  color: #777777;
}

@container(max-width:370px) {

/* お知らせテキスト */
ul.news-list div.news-txt p.category { font-size:8px; }

}

@container(min-width:960px) {

/* タブリスト */
ul.tab-list { gap:24px; margin:auto; margin-bottom:40px; max-width:800px; width:100%; }
ul.tab-list li { font-size:20px; line-height:160%; letter-spacing:0; }
ul.tab-list li a { padding:5px 10px; }

/* 新着リスト */
ul.news-list { align-items:stretch; flex-direction:row; flex-wrap:wrap; gap:24px; width:100%; }
ul.news-list li { box-sizing:border-box; flex:1 1 calc( 25% - 24px ); max-width:calc( 25% - 24px ); }
ul.news-list li a { flex-direction:column; height:100%; width:100%; }

/* お知らせサムネイル */
div.news-ph { aspect-ratio:3/2; height:auto; width:100%; }
div.news-ph img { height:100%; width:100%; }

/* お知らせテキスト */
ul.news-list div.news-txt { max-width:100%; width:100%; }

}