/* 公共の事例一覧 */
/* 見出し写真のグラデ（Figma の Rectangle 180 と同じ見え方）: CSS は透明側の色を無視して補間するため中間色を足して再現。common.css の .pageHead::after に移してよい */
.pageHead::after { background: linear-gradient(to top, rgba(0, 59, 119, .82) 8.65%, rgba(14, 70, 126, .748) 20.79%, rgba(28, 80, 132, .676) 32.93%, rgba(43, 90, 139, .605) 45.06%, rgba(57, 101, 146, .533) 57.2%, rgba(99, 132, 166, .4) 67.9%, rgba(142, 164, 186, .267) 78.6%, rgba(184, 195, 206, .133) 89.3%, rgba(226, 226, 226, 0)); }
.casePub { width: calc(1274 / var(--screen-w) * 100vw); margin: calc(143 / var(--screen-w) * 100vw) auto calc(181 / var(--screen-w) * 100vw); }

/* 絞り込み */
.casePubFilter { grid-template-columns: repeat(3, 1fr); gap: calc(19 / var(--screen-w) * 100vw); margin-bottom: calc(43 / var(--screen-w) * 100vw); }
.casePubFilter label { position: relative; display: block; overflow: hidden; border: 2px solid var(--btn); background: #fff; }
.casePubFilter label::after { content: ""; position: absolute; top: 50%; right: calc(-80 / var(--screen-w) * 100vw); width: calc(154 / var(--screen-w) * 100vw); height: calc(154 / var(--screen-w) * 100vw); border-radius: 50%; background: var(--btn) url(../img/case-public/chev-down.svg) left calc(35 / var(--screen-w) * 100vw) center / calc(18 / var(--screen-w) * 100vw) auto no-repeat; transform: translateY(-50%); pointer-events: none; }
.casePubFilter select { width: 100%; min-height: calc(77 / var(--screen-w) * 100vw); padding: 0 calc(90 / var(--screen-w) * 100vw) 0 calc(93 / var(--screen-w) * 100vw); background: url(../img/case-public/ic-year.svg) left calc(45 / var(--screen-w) * 100vw) center / calc(36 / var(--screen-w) * 100vw) auto no-repeat; color: var(--btn); font-size: calc(15 / var(--fs-w) * 100vw); font-weight: 600; cursor: pointer; }
.casePubFilter .-org select { padding-left: calc(87 / var(--screen-w) * 100vw); background-image: url(../img/case-public/ic-org.svg); background-size: calc(31 / var(--screen-w) * 100vw) auto; }
.casePubFilter .-field select { padding-left: calc(90 / var(--screen-w) * 100vw); background-image: url(../img/case-public/ic-field.svg); background-position-x: calc(46 / var(--screen-w) * 100vw); background-size: calc(33 / var(--screen-w) * 100vw) auto; }
.casePubFilter select:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }

/* 一覧表 */
.casePub-box { overflow: hidden; border: 1px solid #aaa; border-radius: calc(10 / var(--screen-w) * 100vw); }
.casePub-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
.casePub-tbl th { vertical-align: middle; height: calc(60 / var(--screen-w) * 100vw); padding: 0 0 0 calc(26 / var(--screen-w) * 100vw); background: var(--btn); color: #fff; font-size: calc(18 / var(--fs-w) * 100vw); font-weight: 500; text-align: left; }
.casePub-tbl th:nth-child(1) { width: calc(172 / var(--screen-w) * 100vw); }
.casePub-tbl th:nth-child(2) { width: calc(270 / var(--screen-w) * 100vw); }
.casePub-tbl th:nth-child(3) { width: calc(540 / var(--screen-w) * 100vw); }
.casePub-tbl th + th { border-left: 1px dashed rgba(255, 255, 255, .45); }
.casePub-tbl td { vertical-align: middle; position: relative; height: calc(79.6 / var(--screen-w) * 100vw); padding: calc(10 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(26 / var(--screen-w) * 100vw); border-top: 1px solid #bbb; color: #404040; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.casePub-tbl td + td { border-left: 1px dashed #d3d3d3; }
.casePub-tbl :is(th, td):first-child { padding-left: calc(52 / var(--screen-w) * 100vw); }
.casePub-tbl :is(th, td):nth-child(2) { padding-left: calc(21 / var(--screen-w) * 100vw); }
.casePub-tbl td:nth-child(3) { font-size: calc(17 / var(--fs-w) * 100vw); }
.casePub-tbl td:first-child { white-space: nowrap; }
/* 支援分野は長い名前（例: 業務改革・システム構想策定支援）があるので、「・」の後ろ（<wbr>）でだけ折り返す */
.casePub-tbl td:last-child { word-break: keep-all; }
.casePub-tbl td:last-child { padding-right: calc(80 / var(--screen-w) * 100vw); }
.casePub-tbl td a { position: absolute; top: 50%; right: calc(21 / var(--screen-w) * 100vw); width: calc(47 / var(--screen-w) * 100vw); height: calc(26 / var(--screen-w) * 100vw); background: url(../img/case-public/pill.svg) center / contain no-repeat; transform: translateY(-50%); }
.casePub-tbl tr[data-link] { cursor: pointer; }
.casePub-tbl tr[data-link] td { transition: background-color .3s; }
@media (hover: hover) { .casePub-tbl tr[data-link]:hover td { background: #f3f6fb; } }
.casePub-none { padding: calc(40 / var(--screen-w) * 100vw) 0; border-top: 1px solid #bbb; text-align: center; }
.casePub-more { display: flex; justify-content: center; align-items: center; min-height: calc(100 / var(--screen-w) * 100vw); border-top: 1px solid #bbb; background: radial-gradient(circle, #d2d6db calc(1.3 / var(--screen-w) * 100vw), transparent calc(1.5 / var(--screen-w) * 100vw)) left calc(1 / var(--screen-w) * 100vw) top calc(-1 / var(--screen-w) * 100vw) / calc(9 / var(--screen-w) * 100vw) calc(9 / var(--screen-w) * 100vw); }
.casePub-more[hidden] { display: none; }
.casePub-more button { display: inline-flex; align-items: center; gap: calc(22 / var(--screen-w) * 100vw); min-height: calc(32.5 / var(--screen-w) * 100vw); padding: 0 calc(4 / var(--screen-w) * 100vw); background: #fff; color: var(--btn); font-size: calc(20 / var(--fs-w) * 100vw); line-height: 1.2; }
.casePub-more button::before, .casePub-more button::after { content: ""; width: calc(13 / var(--screen-w) * 100vw); height: calc(20 / var(--screen-w) * 100vw); background: url(../img/case-public/arrow-down.svg) center / contain no-repeat; }

@media (max-width: 1280px) {
  .casePub { width: calc(1700 / var(--screen-w) * 100vw); }
  .casePub-tbl th:nth-child(1) { width: calc(150 / var(--screen-w) * 100vw); }
  .casePub-tbl th:nth-child(2) { width: calc(330 / var(--screen-w) * 100vw); }
  .casePub-tbl th:nth-child(3) { width: auto; }
  .casePub-tbl th:nth-child(4) { width: calc(400 / var(--screen-w) * 100vw); }
  .casePub-tbl :is(th, td):first-child { padding-left: calc(24 / var(--screen-w) * 100vw); }
}
@media (max-width: 900px) {
  .casePub { width: auto; margin: calc(40 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(70 / var(--screen-w) * 100vw); }
  .casePubFilter { grid-template-columns: 1fr; gap: calc(10 / var(--screen-w) * 100vw); margin-bottom: calc(24 / var(--screen-w) * 100vw); }
  .casePubFilter label::after { right: calc(-52 / var(--screen-w) * 100vw); width: calc(100 / var(--screen-w) * 100vw); height: calc(100 / var(--screen-w) * 100vw); background-position-x: calc(17 / var(--screen-w) * 100vw); background-size: calc(14 / var(--screen-w) * 100vw) auto; }
  .casePubFilter select, .casePubFilter :is(.-org, .-field) select { min-height: calc(52 / var(--screen-w) * 100vw); padding: 0 calc(60 / var(--screen-w) * 100vw) 0 calc(54 / var(--screen-w) * 100vw); background-position-x: calc(18 / var(--screen-w) * 100vw); background-size: calc(24 / var(--screen-w) * 100vw) auto; font-size: calc(14 / var(--fs-w) * 100vw); }
  .casePub-box { border-radius: calc(8 / var(--screen-w) * 100vw); }
  .casePub-tbl, .casePub-tbl tbody { display: block; }
  .casePub-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .casePub-tbl tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw); padding: calc(16 / var(--screen-w) * 100vw) calc(60 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); }
  .casePub-tbl tr + tr { border-top: 1px solid #ccc; }
  .casePub-tbl tr[hidden] { display: none; }
  .casePub-tbl td, .casePub-tbl td + td, .casePub-tbl :is(th, td):is(:first-child, :nth-child(2)), .casePub-tbl td:last-child { position: static; height: auto; padding: 0; border: 0; font-size: calc(13 / var(--fs-w) * 100vw); }
  .casePub-tbl td:first-child { color: var(--btn); font-weight: 600; }
  .casePub-tbl td:last-child { order: 1; white-space: normal; padding: 0 calc(6 / var(--screen-w) * 100vw); border: 1px solid #adadad; color: #5d5d5d; font-size: calc(12 / var(--fs-w) * 100vw); }
  .casePub-tbl td:nth-child(2) { order: 2; width: 100%; }
  .casePub-tbl td:nth-child(3) { order: 3; width: 100%; color: var(--txt); font-size: calc(15 / var(--fs-w) * 100vw); font-weight: 600; }
  .casePub-tbl td a { inset: 0; width: auto; height: auto; background: url(../img/case-public/pill.svg) right calc(14 / var(--screen-w) * 100vw) center / calc(38 / var(--screen-w) * 100vw) auto no-repeat; transform: none; }
  .casePub-more { min-height: calc(64 / var(--screen-w) * 100vw); background-size: calc(8 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw); }
  .casePub-more button { gap: calc(14 / var(--screen-w) * 100vw); font-size: calc(17 / var(--fs-w) * 100vw); }
}