@charset "UTF-8";
/* 見出し写真のグラデ（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)); }
/* ===== 公共の事例リンク ===== */
.casePublic { position: absolute; top: calc(136 / var(--screen-w) * 100vw); right: calc(59 / var(--screen-w) * 100vw); z-index: 1; display: flex; flex-direction: column; width: calc(212 / var(--screen-w) * 100vw); padding-top: calc(16 / var(--screen-w) * 100vw); overflow: hidden; border-radius: calc(8 / var(--screen-w) * 100vw); background: linear-gradient(#fff 10%, #d4dde5); color: var(--txt); }
.casePublic img { align-self: flex-end; width: calc(66 / var(--screen-w) * 100vw); height: auto; border-radius: 0; margin-right: calc(15 / var(--screen-w) * 100vw); }
.casePublic strong { margin: calc(17 / var(--screen-w) * 100vw) 0 0 calc(16 / var(--screen-w) * 100vw); font-size: calc(20 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.casePublic p { margin: calc(13 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(35 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); letter-spacing: .05em; line-height: 1.96; }
.casePublic span { padding: calc(21 / var(--screen-w) * 100vw) calc(15 / var(--screen-w) * 100vw) calc(22 / var(--screen-w) * 100vw); background: #333 url(../img/common/chev.svg) right calc(15 / var(--screen-w) * 100vw) center / calc(6 / var(--screen-w) * 100vw) auto no-repeat; color: #fff; font-size: calc(15 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.6; white-space: nowrap; }

/* ===== 事例一覧 ===== */
.caseArchive { align-items: flex-start; padding: calc(130 / var(--screen-w) * 100vw) calc(108 / var(--screen-w) * 100vw) calc(234 / var(--screen-w) * 100vw); }
.caseSide { width: calc(239 / var(--screen-w) * 100vw); flex-shrink: 0; }
.caseSide { position: sticky; top: calc(160 / var(--screen-w) * 100vw); }
.caseSide h2 { margin-bottom: calc(44 / var(--screen-w) * 100vw); color: #414141; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.2; }
.caseCat { border-top: 1px solid #cbcbcb; }
.caseCat li { border-bottom: 1px solid #cbcbcb; }
.caseCat a { display: block; padding: calc(28 / var(--screen-w) * 100vw) calc(22 / var(--screen-w) * 100vw) calc(23 / var(--screen-w) * 100vw); color: #5d5d5d; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 600; letter-spacing: .05em; line-height: calc(34 / var(--screen-w) * 100vw); }
.caseCat .is-current, .caseCat a:hover { color: var(--btn); background: linear-gradient(#86afd8, #dde7f1 32%, #f9fafb 67%, #fff); opacity: 1; }
.caseVoice { align-items: center; margin-top: calc(64 / var(--screen-w) * 100vw); padding: calc(24 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(24 / var(--screen-w) * 100vw) calc(15 / var(--screen-w) * 100vw); border: 1px solid #b4b4b4; border-radius: calc(4 / var(--screen-w) * 100vw); color: #5d5d5d; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; letter-spacing: .05em; line-height: 1.6; cursor: pointer; }
.caseVoice input { flex-shrink: 0; width: calc(18 / var(--screen-w) * 100vw); height: calc(18 / var(--screen-w) * 100vw); margin-right: calc(18 / var(--screen-w) * 100vw); border: 1px solid #afafaf; appearance: none; cursor: pointer; }
.caseVoice input:checked { background: var(--btn) url(../img/common/chev.svg) center / 40% auto no-repeat; border-color: var(--btn); }
.caseVoice::after, .caseList .-voice::after { content: ""; flex-shrink: 0; width: calc(22 / var(--screen-w) * 100vw); height: calc(21 / var(--screen-w) * 100vw); margin-left: calc(5 / var(--screen-w) * 100vw); background: url(../img/case/voice.svg) center / contain no-repeat; }
.caseMain { width: calc(1166 / var(--screen-w) * 100vw); margin-top: calc(54 / var(--screen-w) * 100vw); }
.caseList > li { border-bottom: 1px solid #cbcbcb; }
.caseList > li + li { margin-top: calc(48.5 / var(--screen-w) * 100vw); }
.caseList a { align-items: flex-start; gap: calc(90 / var(--screen-w) * 100vw); padding-bottom: calc(55 / var(--screen-w) * 100vw); }
.caseList figure { position: relative; flex-shrink: 0; width: calc(215 / var(--screen-w) * 100vw); height: calc(130 / var(--screen-w) * 100vw); overflow: hidden; border-radius: calc(4 / var(--screen-w) * 100vw); }
.caseList figure img { width: 100%; height: 100%; object-fit: cover; }
.caseList figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 59, 119, .85) 5%, rgba(40, 90, 140, .3) 45%, rgba(226, 226, 226, 0) 75%); }
.caseList .-noimg { display: grid; place-items: center; border: 1px solid #d1d1d1; }
.caseList .-noimg img { width: calc(145 / var(--screen-w) * 100vw); height: auto; }
.caseList .-noimg::after { content: none; }
.caseList a > div { flex: 1; min-width: 0; padding-top: calc(4 / var(--screen-w) * 100vw); }
.caseList .tagList li { padding: calc(2 / var(--screen-w) * 100vw) calc(5 / var(--screen-w) * 100vw); line-height: 1.5; }
.caseList h3 { margin-top: calc(20 / var(--screen-w) * 100vw); font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.5; }
.caseList .-voice::after { display: inline-block; width: calc(27 / var(--screen-w) * 100vw); height: calc(26 / var(--screen-w) * 100vw); margin-left: calc(10 / var(--screen-w) * 100vw); vertical-align: calc(-5 / var(--screen-w) * 100vw); }
.caseList p { margin-top: calc(20 / var(--screen-w) * 100vw); color: #5d5d5d; font-size: calc(15 / var(--fs-w) * 100vw); font-weight: 500; letter-spacing: .05em; line-height: 1.53; }
.pager ul { justify-content: center; gap: calc(12.5 / var(--screen-w) * 100vw); padding-left: calc(15 / var(--screen-w) * 100vw); margin-top: calc(137 / var(--screen-w) * 100vw); }
.pager a { display: grid; place-items: center; width: calc(40 / var(--screen-w) * 100vw); height: calc(40 / var(--screen-w) * 100vw); border-radius: 50%; color: #414141; font-size: calc(16 / var(--fs-w) * 100vw); line-height: 1; }
.pager [aria-current] { background: var(--blue); color: #fff; }

@media (max-width: 1600px) {
  .caseVoice { letter-spacing: 0; }
  .caseVoice input { margin-right: calc(8 / var(--screen-w) * 100vw); }
}
@media (max-width: 1280px) {
  .casePublic { width: calc(270 / var(--screen-w) * 100vw); }
  .casePublic span { padding-right: calc(28 / var(--screen-w) * 100vw); }
}
@media (max-width: 1080px) {
  .casePublic { width: calc(310 / var(--screen-w) * 100vw); }
  .casePublic span { white-space: nowrap; }
  .casePublic p { display: none; }
  .caseSide { width: calc(300 / var(--screen-w) * 100vw); }
  .casePublic strong { margin-bottom: calc(20 / var(--screen-w) * 100vw); }
}

/* ===== SP ===== */
@media (max-width: 900px) {
  .caseSide { position: static; }
  .pageHead-ttl { top: calc(124 / var(--screen-w) * 100vw); bottom: auto; }
  .casePublic { position: relative; top: auto; right: auto; display: grid; grid-template-columns: 1fr auto; width: auto; margin-top: calc(12 / var(--screen-w) * 100vw); padding-top: 0; border-radius: calc(8 / var(--screen-w) * 100vw); background: #f2f5f8; }
  .casePublic img { grid-row: 1 / 3; grid-column: 2; align-self: center; width: calc(52 / var(--screen-w) * 100vw); margin: 0 calc(16 / var(--screen-w) * 100vw); }
  .casePublic strong { margin: calc(16 / var(--screen-w) * 100vw) 0 0 calc(16 / var(--screen-w) * 100vw); font-size: calc(17 / var(--fs-w) * 100vw); }
  .casePublic strong br { display: none; }
  .casePublic p { display: block; margin: calc(4 / var(--screen-w) * 100vw) 0 calc(14 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.7; }
  .casePublic span { grid-column: 1 / 3; padding: calc(12 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); background-position: right calc(16 / var(--screen-w) * 100vw) center; }
  .caseArchive { display: block; padding: calc(32 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(80 / var(--screen-w) * 100vw); }
  .caseSide { width: auto; }
  .casePublic span { white-space: nowrap; }
  .caseSide h2 { margin-bottom: calc(14 / var(--screen-w) * 100vw); font-size: calc(22 / var(--fs-w) * 100vw); }
  .caseCat { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(12 / var(--screen-w) * 100vw); border: 0; }
  .caseCat li:nth-child(-n+2) { border-top: 1px solid #cbcbcb; }
  .caseCat a { padding: calc(10 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.6; }
  .caseVoice { margin-top: calc(16 / var(--screen-w) * 100vw); padding: calc(12 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .caseVoice input { width: calc(16 / var(--screen-w) * 100vw); height: calc(16 / var(--screen-w) * 100vw); margin-right: calc(10 / var(--screen-w) * 100vw); }
  .caseVoice::after { width: calc(19 / var(--screen-w) * 100vw); height: calc(18 / var(--screen-w) * 100vw); }
  .caseMain { width: auto; margin-top: calc(32 / var(--screen-w) * 100vw); }
  .caseList > li + li { margin-top: calc(20 / var(--screen-w) * 100vw); }
  .caseList a { gap: calc(14 / var(--screen-w) * 100vw); padding-bottom: calc(20 / var(--screen-w) * 100vw); }
  .caseList figure { width: calc(120 / var(--screen-w) * 100vw); height: calc(80 / var(--screen-w) * 100vw); }
  .caseList .-noimg img { width: calc(86 / var(--screen-w) * 100vw); }
  .caseList a > div { padding-top: 0; }
  .caseList .tagList li { padding: calc(1 / var(--screen-w) * 100vw) calc(4 / var(--screen-w) * 100vw); }
  .caseList h3 { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); line-height: 1.6; }
  .caseList .-voice::after { width: calc(18 / var(--screen-w) * 100vw); height: calc(17 / var(--screen-w) * 100vw); margin-left: calc(6 / var(--screen-w) * 100vw); vertical-align: calc(-3 / var(--screen-w) * 100vw); }
  .caseList p { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(12 / var(--fs-w) * 100vw); letter-spacing: 0; word-break: auto-phrase; }
  .pager ul { gap: calc(8 / var(--screen-w) * 100vw); padding-left: 0; margin-top: calc(40 / var(--screen-w) * 100vw); }
  .pager a { width: calc(36 / var(--screen-w) * 100vw); height: calc(36 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); }
}

/* 改行位置: 語句の途中で切らない */
.caseVoice span { display: inline-block; white-space: nowrap; }