@charset "utf-8";
/********************
実績ページ用CSS
  /products/case/
 ********************/
.cmn-pageHeader_ttl._case {
  color: #173055;
}

.case-search {
  & > div {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
}
@media (width <= 760px) {
  .case-search {
    & > div {
      padding-inline: 2.67vw;
    }
  }
}

.case-searchBox {
  padding-block: min(2.92vw, 40px);
  border-bottom: 1px solid #E0E0E0;
}
@media (width <= 760px) {
  .case-searchBox {
    padding-block: 4vw;
  }
}

.case-searchBox_select {
  display: flex;
  align-items: center;
  gap: min(1.97vw, 27px);
}
@media (width <= 760px) {
  .case-searchBox_select {
    flex-flow: column;
    align-items: start;
    gap: 3vw;
  }
}

.case-searchBox_ttl {
  line-height: 1.5;
}
@media (width <= 760px) {
  .case-searchBox_ttl br {
    display: none;
  }
}

.case-searchBox_cate {
  width: min(23.42vw, 320px);
  height: auto;
  aspect-ratio: 320/40;
  margin-block: auto;
  padding-inline: min(0.88vw,12px);
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: #FFF;
}
@media (width <= 760px) {
  .case-searchBox_cate {
    width: 100%;
    padding-inline: 3.2vw;
  }
}

.case-numberBox {
  display: flex;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-block: min(3.91vw,50px);
  padding-inline: 60px;
  &.top {
    justify-content: space-between;
  }
  &.bottom {
    position: relative;
    justify-content: center;
  }
}
@media (width <= 760px) {
  .case-numberBox {
    align-items: center;
    flex-direction: column;
    padding-block: 13.33vw;
    padding-inline: 2.67vw;
    &.top {
      gap: 2.66vw 0;
    }
    &.bottom {
      gap: 5.33vw 0;
    }
  }
}

.case-numberBox_number {
  font-size: min(1.46vw,20px);
  font-weight: 500;
}
@media (width <= 760px) {
  .case-numberBox_number {
    font-size: 5.33vw;
  }
}

.case-numberBox_pagination {
  &.prevNext {
    & .page-numbers:not(.prev):not(.next) {
      display: none;
    }
  }
  .bottom & {
    &.number {
      position: absolute;
      top: 50%;
      right: 60px;
      translate: 0 -50%;
    }
  }
}
@media (width <= 760px) {
  .case-numberBox_pagination {
    .bottom & {
      &.number {
        position: static;
        translate: 0;
      }
    }
  }
}

.nav-links {
  display: flex;
  .prevNext & {
    gap: 0 min(3.66vw,50px);
  }
  .number & {
    gap: 0 1em;
  }
}

.page-numbers {
  font-size: min(1.17vw,16px);
  font-weight: 500;
  p& {
    color: #E0E0E0;
  }
  &.prev,&.next {
    position: relative;
    &::before {
      position: absolute;
      top: calc(50% + 1px);
      translate: 0 -50%;
      display: block;
      width: min(0.59vw,8px);
      height: auto;
      aspect-ratio: 8/12;
      background: url(../img/search/icn_pagination_arrow.svg) no-repeat center/cover;
      content: "";
    }
  }
  &.prev {
    padding-inline-start: min(1.02vw,14px);
    &::before {
      left: 0;
      rotate: 180deg;
    }
  }
  &.next {
    padding-inline-end: min(1.02vw,14px);
    &::before {
      right: 0;
    }
  }
  &.current {
    color: #2B4E76;
  }
}
@media (width <= 760px) {
  .page-numbers {
    font-size: 4.27vw;
    &.prev,&.next {
      &::before {
        width: 2.13vw;
      }
    }
    &.prev {
      padding-inline-start: 3.73vw;
    }
    &.next {
      padding-inline-end: 3.73vw;
    }
  }
}

.screen-reader-text {
  display: none;
}

.case-resultWrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 60px;
}
@media (width <= 760px) {
  .case-resultWrap {
    padding-inline: 2.67vw;
  }
}

.case-list {
  display: grid;
  gap: min(6.58vw, 90px) min(5.12vw, 70px);
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}
@media (width <= 760px) {
  .case-list {
    grid-template-columns: 100%;
    gap: 21.33vw;
  }
}

.case-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.case-ttl {
  position: relative;
  font-size: min(2.05vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  border-bottom: 1px solid #f3f3f3;
  padding-block-end: .3em;
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #036EB8 0%, #036EB8 20px, #E0E0E0 20px, #E0E0E0 100%);
    content: "";
  }
}
@media (width <= 760px) {
  .case-ttl {
    font-size: 6.4vw;
  }
}

.case-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: min(2.19vw, 30px);
}
@media (width <= 760px) {
  .case-cat {
    padding-block: 4vw;
    flex-flow: column;
    align-items: start;
    /* gap: 2.66vw; */
  }
}

.case-cat_inner {
  display: flex;
  gap: min(1.10vw, 15px);
  align-items: center;
  & img {
    width: min(4.39vw, 60px);
    aspect-ratio: 1;
    object-fit: contain;
  }
  & p {
    font-size: min(1.46vw, 20px);
    font-weight: 400;
  }
  a& {
    transition: color 0.3s ease-out;
    &:hover {
      color: var(--hover-color);
    }
  }
}
@media (width <= 760px) {
  .case-cat_inner {
    gap: 2.66vw;
    & img {
      width: 16vw;
    }
    & p {
      font-size: 4.8vw;
    }
  }
}

.case-area {
  font-size: min(1.17vw, 16px);
  color: #fff;
  padding-inline: 1em;
  border-radius: 99px;
  background-color: #2B764B;
  &.casearea01 {
    background-color: #2B4E76;
  }
  &.casearea02 {
    background-color: #2B764B;
  }
  &.casearea03 {
    background-color: #762b54;
  }
}
@media (width <= 760px) {
  .case-area {
    font-size: 3.73vw;
    margin: 0 0 0 auto;
  }
}

.case-img {
  width: 100%;
  & img {
    width: 100%;
    aspect-ratio: 585 / 390;
    object-fit: cover;
  }
}

.case-note {
  margin-top: min(0.43vw, 6px);
  font-size: min(0.88vw,12px);
  text-align: right;
}
@media (width <= 760px) {
  .case-note {
    margin-top: .5em;
    font-size: 3.2vw;
  }
}

.case-info {
  margin-top: min(0.43vw, 6px);
  border-collapse: collapse;
  & th,td {
    border-top: solid 1px #E0E0E0;
    font-size: min(1.17vw, 16px);
  }
  & th:last-of-type,td:last-of-type {
    border-bottom: solid 1px #E0E0E0;
  }
  & th {
    padding: min(1.10vw, 15px) min(1.46vw,20px);
    background-color: #F8F8F8;
    width: calc(164 / 585 * 100%);
    font-weight: 400;
    text-align: left;
  }
  & td {
    padding: min(1.10vw, 15px) 0 min(1.10vw, 15px) min(1.46vw,20px);
  }
}
@media (width <= 760px) {
  .case-info {
    margin-top: 1.6vw;
    & tr {
      display: flex;
      flex-wrap: wrap;
    }
    & tr:last-of-type td {
      border-bottom: solid 1px #E0E0E0;
    }
    & th,td {
      font-size: 3.73vw;
      width: 100%;
      padding: .5em 1em;
    }
    & td {
      border-top: none;
    }
    & th:last-of-type,td:last-of-type {
      border-bottom: none;
    }
  }
}

.case-firelink {
  margin-block: min(8.78vw,120px) min(4.39vw,60px);
  margin-inline: auto;
}
@media (width <= 760px) {
  .case-firelink {
    margin-block: 21.33vw 10.66vw;
  }
}

.case-linkPanel {
  position: relative;
  width: min(465px,34vw);
  z-index: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min(7.32vw,100px);
  height: 100%;
  padding: min(2.56vw,35px) min(2.19vw,30px);
  margin-inline: auto;
  border-radius: min(0.44vw,6px);
  background-color: #F4F7F8;
  & p {
    display: inline-block;
    font-size: min(1.46vw,20px);
    font-weight: 500;
    line-height: 1.45;
    & span {
      position: relative;
      padding-inline-end: min(2.49vw,34px);
      &::before,&::after {
        position: absolute;
        top: 50%;
        right: 0;
        translate: 0 -50%;
        width: min(1.76vw,24px);
        height: auto;
        aspect-ratio: 1;
        content: "";
      }
      &::before {
        border-radius: 50%;
        background-color: #FFF;
        transition: background 0.3s ease-out;
      }
      &::after {
        background: #202020;
        mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: background 0.3s ease-out, mask 0.3s ease-out;
      }
    }
  }
}
@media (width <= 760px) {
  .case-linkPanel {
    width: 100%;
    grid-template-columns: 1fr 20.00vw;
    min-height: 24.53vw;
    padding: 4.60vw 3.94vw;
    & p {
      font-size: 4.27vw;
      & span {
        padding-inline-end: 9.07vw;
        &::before {
          width: 5.33vw;
        }
        &::after {
          width: 5.33vw;
        }
      }
    }
    & > div {
      & img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
  }
}
@media (hover: hover) {
  .case-linkPanel:hover {
    & p {
      & span {
        &::before {
          background-color: var(--hover-color);
        }
        &::after {
          background-color: #FFF;
          mask-position: 0 0;
        }
      }
    }
  }
}


.cmn-breadcrumbs {
  margin-block-start: min(3.66vw, 50px);
}
@media (width <= 760px) {
  .cmn-breadcrumbs {
    margin-block-start: 8vw;
  }
}