/*
 * Easing
 * https://easings.net/
 */
.case-single {
  padding-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 150 / 768 * 100, 112.5px);
}

.case-single__breadcrumb {
  margin: 0 calc(50% - var(--vw, 1vw) * 50);
}

.case-single__article {
  margin-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 28 / 768 * 100, 21px);
  padding: 0 calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 20 / 768 * 100) min(min(var(--vw, 1vw), var(--svh, 1vh)) * 120 / 768 * 100, 90px);
}

.case-single__data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 25 / 768 * 100, 18.75px);
  gap: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 768 * 100, 12px);
}
.case-single__data::before, .case-single__data::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
}
.case-single__data::before {
  background: #ddd;
  width: 100%;
  z-index: 0;
}
.case-single__data::after {
  background: #00bf7d;
  width: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 120 / 768 * 100, 90px);
  z-index: 1;
}

.case-single-tax-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 8 / 768 * 100, 6px);
}

.case-single-tax {
  font-size: clamp(1rem, 1.2rem + (min(var(--vw, 1vw), var(--svh, 1vh)) * 100 - 384px) * 0.03125, 1.8rem);
  display: inline-block;
  background: #fff;
  width: -moz-fit-content;
  width: fit-content;
  padding: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 8 / 768 * 100, 6px) min(min(var(--vw, 1vw), var(--svh, 1vh)) * 32 / 768 * 100, 24px);
  border: 1px solid #ddd;
  border-radius: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 26 / 768 * 100, 19.5px);
  line-height: 1.5;
}
.case-single-tax--1 {
  color: #f7843c;
}
.case-single-tax--2 {
  color: #f53cbc;
}
.case-single-tax--3 {
  color: #1dc4eb;
}
.case-single-tax--4 {
  color: #1dd824;
}
.case-single-tax--5 {
  color: #ff2121;
}

.case-single__title {
  margin-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 48 / 768 * 100, 36px);
}

.case-single__eyecatch {
  display: grid;
  margin-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 64 / 768 * 100, 48px);
  gap: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 24 / 768 * 100, 18px);
}

.case-single__body {
  margin-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 64 / 768 * 100, 48px);
  padding-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 64 / 768 * 100, 48px);
  border-top: 1px solid #ddd;
}

.case-single__foot {
  margin-top: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 120 / 768 * 100, 90px);
}

.case-single-eyecatch {
  overflow: hidden;
  border-radius: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 10 / 768 * 100, 7.5px);
}

.case-single-sustainable-list {
  display: inline-flex;
  background: #fff;
  padding: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 8 / 768 * 100, 6px);
  border-radius: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 10 / 768 * 100, 7.5px);
  gap: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 8 / 768 * 100, 6px);
}

.case-single-sustainable-list__item {
  width: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 80 / 768 * 100, 60px);
}

.case-single-btn-area {
  display: grid;
  gap: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 24 / 768 * 100, 18px) min(min(var(--vw, 1vw), var(--svh, 1vh)) * 164 / 768 * 100, 123px);
  grid-template-columns: repeat(2, 1fr);
}

.case-single-page-btn--prev {
  justify-content: flex-end;
  padding-right: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 32 / 768 * 100, 24px);
  grid-column: 1/2;
  grid-row: 1/2;
}
.case-single-page-btn--prev .circle-arrow {
  left: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 768 * 100, 12px);
  right: auto;
  transform: translateY(-50%) scale(-1);
}

.case-single-page-btn--next {
  justify-content: flex-start;
  padding-left: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 32 / 768 * 100, 24px);
  grid-column: 2/3;
  grid-row: 1/2;
}

.case-single-index-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  min-height: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 80 / 768 * 100, 60px);
  padding: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 22 / 768 * 100, 16.5px) 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 40 / 768 * 100, 30px);
  grid-column: 1/3;
  grid-row: 2/3;
  isolation: isolate;
}
.case-single-index-btn::before {
  content: "";
  background: linear-gradient(to right, #00dba8 0%, #00bf7d 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
}

.case-single-index-btn__txt {
  position: relative;
  color: #fff;
  z-index: 1;
}

@media screen and (min-width: 960px) {
  .case-single {
    padding-top: min(var(--vw, 1vw) * 106 / 1360 * 100, 132.5px);
  }
  .case-single__article {
    max-width: min(var(--vw, 1vw) * 960 / 1360 * 100, 1200px);
    margin: min(var(--vw, 1vw) * 60 / 1360 * 100, 75px) auto 0;
    padding: 0 0 min(min(var(--vw, 1vw), var(--svh, 1vh)) * 80 / 768 * 100, 60px);
  }
  .case-single__data {
    padding-bottom: min(var(--vw, 1vw) * 18 / 1360 * 100, 22.5px);
  }
  .case-single__data::after {
    width: min(var(--vw, 1vw) * 40 / 1360 * 100, 50px);
  }
  .case-single-tax-list {
    gap: min(var(--vw, 1vw) * 8 / 1360 * 100, 10px);
  }
  .case-single-tax {
    font-size: min(1.2rem + 1.5 * (var(--vw, 1vw) * 100 - 1360px) / 340, 1.35rem);
    padding: min(var(--vw, 1vw) * 4 / 1360 * 100, 5px) min(var(--vw, 1vw) * 16 / 1360 * 100, 20px);
    letter-spacing: 0.1em;
  }
  .case-single__title {
    margin-top: min(var(--vw, 1vw) * 40 / 1360 * 100, 50px);
  }
  .case-single__eyecatch {
    justify-content: space-between;
    gap: 0;
    grid-template-columns: min(var(--vw, 1vw) * 840 / 1360 * 100, 1050px) min(var(--vw, 1vw) * 96 / 1360 * 100, 120px);
  }
  .case-single__body {
    margin-top: min(var(--vw, 1vw) * 56 / 1360 * 100, 70px);
    padding-top: min(var(--vw, 1vw) * 56 / 1360 * 100, 70px);
  }
  .case-single__foot {
    margin-top: min(var(--vw, 1vw) * 80 / 1360 * 100, 100px);
  }
  .case-single-eyecatch {
    border-radius: min(var(--vw, 1vw) * 10 / 1360 * 100, 12.5px);
  }
  .case-single-sustainable-list {
    flex-direction: column;
    padding: min(var(--vw, 1vw) * 8 / 1360 * 100, 10px);
    border-radius: min(var(--vw, 1vw) * 10 / 1360 * 100, 12.5px);
    gap: min(var(--vw, 1vw) * 8 / 1360 * 100, 10px);
  }
  .case-single-sustainable-list__item {
    width: 100%;
  }
  .case-single-btn-area {
    justify-content: center;
    gap: min(var(--vw, 1vw) * 24 / 1360 * 100, 30px);
    grid-template-columns: min(var(--vw, 1vw) * 200 / 1360 * 100, 250px) min(var(--vw, 1vw) * 320 / 1360 * 100, 400px) min(var(--vw, 1vw) * 200 / 1360 * 100, 250px);
  }
  .case-single-page-btn--prev {
    padding-right: min(var(--vw, 1vw) * 32 / 1360 * 100, 40px);
    grid-column: 1/2;
  }
  .case-single-page-btn--prev .circle-arrow {
    left: min(var(--vw, 1vw) * 32 / 1360 * 100, 40px);
  }
  .case-single-page-btn--next {
    padding-left: min(var(--vw, 1vw) * 32 / 1360 * 100, 40px);
    grid-column: 3/4;
  }
  .case-single-page-btn--next .circle-arrow {
    right: min(var(--vw, 1vw) * 32 / 1360 * 100, 40px);
  }
  .case-single-index-btn {
    height: min(var(--vw, 1vw) * 56 / 1360 * 100, 70px);
    min-height: auto;
    padding: 0;
    border-radius: min(var(--vw, 1vw) * 28 / 1360 * 100, 35px);
    grid-column: 2/3;
    grid-row: 1/2;
  }
}

@media (any-hover: hover) {
  .case-single-index-btn:hover {
    border-color: #ddd;
  }
  .case-single-index-btn:hover::before {
    opacity: 0;
  }
  .case-single-index-btn:hover .case-single-index-btn__txt {
    background: linear-gradient(to right, #00dba8 50%, #00bf7d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}