@font-face {
  font-family: "DIN Alternate Bold";
  font-style: normal;
  font-weight: normal;
  src: local("DIN Alternate Bold"), url("../font/DINAlternate-Bold.woff") format("woff");
}
.l-pagetitle__inner::after {
  content: "STRENGTH";
}

.p-strength__index {
  display: grid;
  gap: var(--sGap);
  grid-template-columns: 40.833% 13.334% 40.833%;
}
.p-strength__index li {
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: all 0.5s;
}
.p-strength__index li.active {
  bottom: 0;
  opacity: 1;
}
.p-strength__index #str1 {
  grid-row: 1/2;
  grid-column: 1/4;
}
.p-strength__index #str1 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 15px, -3.2038834951px + 4.854368932vw,55px);
}
.p-strength__index #str2 {
  grid-row: 2/3;
  grid-column: 1/2;
}
.p-strength__index #str2 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 20px, -23.234223301px + 11.5291262136vw,115px);
}
.p-strength__index #str3 {
  grid-row: 2/3;
  grid-column: 2/4;
}
.p-strength__index #str3 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 40px, -35.0910194175px + 20.0242718447vw,205px);
}
.p-strength__index #str4 {
  grid-row: 3/4;
  grid-column: 1/4;
  background-color: #F0F0F0;
  padding-bottom: clamp( 40px, 35.4490291262px + 1.213592233vw,50px);
}
.p-strength__index #str4 .p-strength__index-btn {
  bottom: clamp( 20px, 15.4490291262px + 1.213592233vw,30px);
  left: clamp( 100px, -68.3859223301px + 44.9029126214vw,470px);
  color: #002855;
}
.p-strength__index #str4 .p-strength__index-btn::after {
  filter: invert(10%) sepia(67%) saturate(3212%) hue-rotate(199deg) brightness(92%) contrast(101%);
  background-image: url(../images/common/arr_bl.svg);
}
.p-strength__index #str5 {
  grid-row: 4/5;
  grid-column: 1/3;
}
.p-strength__index #str5 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 40px, -35.0910194175px + 20.0242718447vw,205px);
}
.p-strength__index #str6 {
  grid-row: 4/6;
  grid-column: 3/4;
}
.p-strength__index #str6 .p-strength__index-btn {
  bottom: clamp( 85px, -21.947815534px + 28.5194174757vw,320px);
  left: clamp( 20px, -23.234223301px + 11.5291262136vw,115px);
}
@media (min-width: 1199px) {
  .p-strength__index #str6 .p-strength__index-btn {
    bottom: clamp( 85px, -35.6007281553px + 32.1601941748vw,350px);
  }
}
.p-strength__index #str7 {
  grid-row: 5/7;
  grid-column: 1/3;
}
.p-strength__index #str7 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 40px, -35.0910194175px + 20.0242718447vw,205px);
  color: #002855;
}
.p-strength__index #str7 .p-strength__index-btn::after {
  filter: invert(10%) sepia(67%) saturate(3212%) hue-rotate(199deg) brightness(92%) contrast(101%);
  background-image: url(../images/common/arr_bl.svg);
}
.p-strength__index #str7 .p-strength__index-btn span {
  position: relative;
}
.p-strength__index #str7 .p-strength__index-btn span::after {
  content: "";
  width: 12px;
  height: 11px;
  left: 4px;
  top: 2px;
  background: url(../images/common/ico_newwindow.svg) 0 0 no-repeat;
  background-size: cover;
  margin-left: 0.5em;
  position: relative;
  display: inline-block;
  filter: invert(28%) sepia(14%) saturate(4965%) hue-rotate(180deg) brightness(93%) contrast(85%);
}
.p-strength__index #str8 {
  grid-row: 6/7;
  grid-column: 3/4;
}
.p-strength__index #str8 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 20px, -23.234223301px + 11.5291262136vw,115px);
}
.p-strength__index #str9 {
  grid-row: 7/8;
  grid-column: 1/4;
}
.p-strength__index #str9 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 20px, -5.0303398058px + 6.6747572816vw,75px);
  color: #002855;
}
.p-strength__index #str9 .p-strength__index-btn::after {
  filter: invert(10%) sepia(67%) saturate(3212%) hue-rotate(199deg) brightness(92%) contrast(101%);
  background-image: url(../images/common/arr_bl.svg);
}
.p-strength__index #str10 {
  grid-row: 8/9;
  grid-column: 1/4;
}
.p-strength__index #str10 .p-strength__index-btn {
  bottom: clamp( 4px, -16.9344660194px + 5.5825242718vw,50px);
  left: clamp( 20px, -5.0303398058px + 6.6747572816vw,75px);
}
.p-strength__index-btn {
  font-family: "Inter", system-ui;
  position: absolute;
  z-index: 10;
  color: #fff;
  font-weight: 700;
  font-size: clamp( 0.4375rem, 0.1815078883rem + 1.0922330097vw,1rem);
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.p-strength__index-btn::after {
  content: "";
  width: clamp( 100px, 27.1844660194px + 19.4174757282vw,260px);
  height: clamp( 6px, 5.0898058252px + 0.2427184466vw,8px);
  background: url(../images/common/arr_wh.svg) right bottom no-repeat;
  background-size: clamp( 222.75px, 188.9590412621px + 9.0109223301vw,297px) clamp( 6px, 5.0898058252px + 0.2427184466vw,8px);
  transition: 0.3s all;
  transform: translateY(-0.3em);
}
.p-strength__index li {
  position: relative;
}
.p-strength__index li a {
  transition: 0.3s all;
}
@media (any-hover: hover) {
  .p-strength__index li a:where(:-webkit-any-link, :enabled, summary):hover {
    opacity: 0.9;
  }
  .p-strength__index li a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.9;
  }
  .p-strength__index li a:where(:any-link, :enabled, summary):hover {
    opacity: 0.9;
  }
  .p-strength__index li a:where(:-webkit-any-link, :enabled, summary):hover .p-strength__index-btn::after {
    width: clamp( 90px, -1.0194174757px + 24.2718446602vw,290px);
  }
  .p-strength__index li a:where(:-moz-any-link, :enabled, summary):hover .p-strength__index-btn::after {
    width: clamp( 90px, -1.0194174757px + 24.2718446602vw,290px);
  }
  .p-strength__index li a:where(:any-link, :enabled, summary):hover .p-strength__index-btn::after {
    width: clamp( 90px, -1.0194174757px + 24.2718446602vw,290px);
  }
}
/*# sourceMappingURL=strength.css.map */