@charset "UTF-8";
main{background:#fcece9;}
h2{font-size: clamp(2.6rem, calc(2.6rem + (3.0 - 2.6) * ((100vw - 740px) / (1200 - 740))), 3.0rem); color:#d20037;}
h2.page{margin-bottom:20px; display:flex; gap:12px; justify-content:center; align-items:center; font-family: "Montserrat", sans-serif; font-weight: 400; font-style: normal; font-size: clamp(2.7rem, 3vw, 4rem); line-height: 1.2; font-weight: 600; color:#d20037;}
h2.page:before{display:block; content:""; background:url(../lib/title-line.webp) center center no-repeat; width:61px; height:18px; background-size:cover;}
h2.page:after{display:block; content:""; background:url(../lib/title-line.webp) center center no-repeat; width:61px; height:18px; background-size:cover; background-position: center; transform: rotate(180deg); transform-origin: center;}
.h3jp{margin-bottom:20px; font-size: clamp(1.3rem, 1vw + 1rem, 1.4rem); font-weight:400; color:#d20037; margin-top:4px;}

h3{display:flex; gap:12px; justify-content:start; align-items:center; margin-bottom:8px; font-family: "Montserrat", sans-serif; font-weight: 400; font-style: normal; font-size: clamp(2.7rem, 3vw, 4rem); line-height: 1.2; font-weight: 600; color:#d20037;}
h3:before{display:block; content:""; background:url(../lib/title-line.webp) center center no-repeat; width:61px; height:18px; background-size:cover;}
@media only screen and (min-width:740px) {
h3{margin-left:-20px;}
}


#contents{text-align:center; padding:80px 20px 60px;}
#contents table{margin-bottom:20px;}

.company-filter-wrap ul.company-filter{display:flex; flex-wrap:wrap;}
.company-filter-wrap ul.company-filter li{width:calc(100% / 4); border:1px solid #d20037; font-size: 1.4rem;}
.company-filter-wrap ul.company-filter li:not(:nth-child(5n)) {border-right: none;}
.company-filter-wrap ul.company-filter li:first-child{width:100%; border-right:1px solid #d20037; border-bottom:none;}
.company-filter-wrap ul.company-filter li a{display:block; padding:20px 0;}
.company-filter-wrap ul.company-filter li a:hover{background:rgba(210, 0, 55, 0.155);}
.company-filter-wrap ul.company-filter li.active a{background:#d20037; color:#fff;}
@media only screen and (min-width:740px) {
.company-filter-wrap ul.company-filter li,.company-filter-wrap ul.company-filter li:first-child{flex:1; width:calc(100% / 5);}
.company-filter-wrap ul.company-filter li:first-child{width:100%; border-right:none; border-bottom:1px solid #d20037;}
}

.titles-filter{margin:10px auto; max-width:1000px;}
.titles-cat-filter fieldset{border:none; margin:16px auto;}
.titles-cat-filter .cat-checkboxes{text-align:left;}
.titles-cat-filter input[type="checkbox"],
.titles-cat-filter input[type="text"] {
  background-color: #fff;
}
/* === テキストボックス === */
.titles-cat-filter input[type="text"] {
  color: #000;                /* テキスト黒 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 1.4rem;
  width: 240px;
  max-width: 100%;
  box-sizing: border-box;
}

/* === チェックボックスのチェック色を赤に === */
/* ブラウザによって見え方が異なるため、appearance指定で統一 */
.titles-cat-filter input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #888;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

/* チェック時の赤マーク */
.titles-cat-filter input[type="checkbox"]:checked {
  background-color: #fff; /* 背景白のまま */
  border-color: #c00;    /* 赤枠 */
}

.titles-cat-filter input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 9px;
  border-right: 2px solid #c00; /* チェックマーク赤 */
  border-bottom: 2px solid #c00;
  transform: rotate(45deg);
}

/* === ラベルの整え === */
.cat-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 1rem;
  font-size: 1.4rem;
  color: #000;
}

/* === 検索ボックス === */
.search-box{text-align:left;}
.search-box label {
  margin-right: 0.5rem;
  font-weight: 500;
  color: #000;
}
/* === 絞り込みボタン === */
.titles-cat-filter button[type="submit"] {
  margin-top:16px;
  background-color: #c00; /* 赤背景 */
  color: #fff;            /* 白文字 */
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
}

/* hover・focus時のアクション */
.titles-cat-filter button[type="submit"]:hover,
.titles-cat-filter button[type="submit"]:focus {
  background-color: #e60033; /* 少し明るい赤 */
  outline: none;
  transform: translateY(-1px);
}

/* 押下時 */
.titles-cat-filter button[type="submit"]:active {
  background-color: #a00000;
  transform: translateY(0);
}

.titles-count{max-width:1000px; margin:16px auto 8px; font-size:1.7rem; font-weight:600; text-align:left;}

/* .titles-list {
  display: flex;
  max-width:1000px; margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
}
.titles-list::after {
display: block;
content:"";
width:calc(100% / 2 - 20px);
}
.titles-list li {
  width:calc(100% / 2 - 20px);
  max-width:300px;
  text-align:left;
} */
.titles-list {
  max-width:1000px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.titles-list li {
text-align:left;
}
.titles-list img{border-radius:10px; aspect-ratio:16 / 9; overflow:hidden; object-fit:cover;}

.load-more-wrap { margin-top: 30px; }

/* === ページネーション全体 === */
.pagination {
  margin-top:30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2rem;
}

/* === リンク（通常） === */
.pagination a,
.pagination span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #c00;  /* 赤い丸線 */
  color: #c00;             /* 赤文字 */
  text-decoration: none;
  font-weight: 500;
  transition: all 0.25s ease;
}

/* === hover時 === */
.pagination a:hover {
  background-color: #c00;  /* 背景赤 */
  color: #fff;             /* 文字白 */
}

/* === 現在のページ（active） === */
.pagination .current {
  background-color: #c00;  /* 赤背景 */
  color: #fff;             /* 白文字 */
  border-color: #c00;      /* 枠線も赤 */
  font-weight: 700;
  pointer-events: none;
}

/* === 前へ・次へボタン調整 === */
.pagination .prev,
.pagination .next {
  width: auto;
  padding: 0 1rem;
  border-radius: 20px;
}

@media only screen and (min-width:740px) {
.titles-list {
  grid-template-columns: repeat(4, 1fr);
}
.titles-list li {
width:100%;
}
}


//ニュース
#news{position:relative; padding:40px 0 80vh;}
#news .box{max-width:800px; margin: 0 auto; padding:0 20px; text-align:center;}
#news .btn3{position:absolute; top:15px; right:20px;}
#news ul{margin-top:10px;}
#news li{margin-bottom:8px;}
#news .date{display:inline-block;font-family: "Montserrat", sans-serif; font-style: normal; font-size: 1.3rem; font-weight:400;}
#news .cat{display:inline-block; margin-left:10px; vertical-align:middle; font-family: "Montserrat", sans-serif; font-style: normal; font-size: 1.1rem; font-weight:400; color:#fff; background:#d20037; padding:1px 0; width:110px; min-width:110px; height:20px; line-height:20px;text-align:center; border-radius:50px;}
#news ul {display: inline-block; text-align: left; margin: 10px auto 0;}
#news ul li{text-align:left;}
#news ul li a{text-decoration:underline;}
#news ul li a,#news ul li .no-link{display:block; width:100%;}
@media only screen and (min-width:740px) {
#news ul{margin-left:4px;}
#news ul li{display:flex; gap:10px; align-items:baseline;}
#news ul li a{line-height:1.6;}
#news ul li .date{width:60px;}
#news ul li a,#news ul li .no-link{display:inline-block; width:auto;}
}