@charset "utf-8";
/********************
NDCを動かす力用CSS
  /strengths/
 ********************/

.strength-pageHeader {
  width: 100%;
  background-color: #FFF;
  & > div {
    position: relative;
    width: 100%;
    max-width: 1360px;
    height: min(26.87vw,367px);
    margin-inline: auto;
    padding-inline: 60px;
  }
  & hgroup {
    position: absolute;
    top: 50%;
    left: 60px;
    translate: 0 -50%;
  }
}
@media (width <= 760px) {
  .strength-pageHeader {
    & > div {
      height: auto;
      aspect-ratio: 375/153;
      padding-inline: 2.67vw;
    }
    & hgroup {
      left: 2.67vw;
    }
  }
}

.strength-pageHeader_ttl {
  position: relative;
  display: block;
  padding-inline-start: min(4.83vw,66px);
  line-height: 0;
  & span {
    display: inline-block;
    width: min(42.31vw,578px);
    height: auto;
    aspect-ratio: 578/57;
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 -50%;
      display: block;
      width: min(3.29vw,45px);
      height: auto;
      aspect-ratio: 45/18;
      background: url(../img/strength/img_strength_mark.webp) no-repeat center/cover;
      content: "";
    }
  }
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-pageHeader_ttl {
    /* left: 2.67vw; */
    padding-inline-start: 8.8vw;
    & span {
      width: 77.33vw;
      &::before {
        width: 6.13vw;
      }
    }
  }
}

.strength-pageHeader_jp {
  margin-block-start: min(1.1vw,15px);
  padding-inline-start: min(4.83vw,66px);
  color: var(--txt-black-color);
  font-size: min(1.76vw,24px);
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (width <= 760px) {
  .strength-pageHeader_jp {
    margin-block-start: 2.67vw;
    padding-inline-start: 8.8vw;
    font-size: 4.8vw;
  }
}

.strength-pageHeadrImg {
  position: relative;
  width: 100%;
  height: min(14.35vw,196px);
  &::before {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/563;
    background: url(../img/strength/img_strength_bg.webp) no-repeat center bottom/cover;
    content: "";
  }
}
@media (width <= 1000px) {
  .strength-pageHeadrImg {
    &::before {
      top: 7vw;
    }
  }
}
@media (width <= 760px) {
  .strength-pageHeadrImg {
    &::before {
      top: 16vw;
      height: 55.7333vw;
    }
  }
}

.strength-section {
  padding-block: min(10.25vw,140px) min(11.71vw,160px);
  background-color: #FFF;
}
@media (width <= 760px) {
  .strength-section {
    padding-block: 21.33vw;
  }
}

.cmn-section_inner {
  position: relative;
}

.strength-section_ttl {
  position: absolute;
  top: 0;
  left: 60px;
  display: inline-block;
  width: min(38.36vw,524px);
  height: auto;
  aspect-ratio: 524/211;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-section_ttl {
    position: static;
    width: 80vw;
  }
}

.strength-box_number {
  width: min(6.73vw,92px);
  height: auto;
  aspect-ratio: 92/65;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-box_number {
    width: 17.6vw;
  }
}

.strength-box_ttl {
  height: auto;
  margin-block-start: min(2.2vw,30px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-box_ttl {
    margin-block-start: 8vw;
  }
}

.strength-box_txt {
  margin-block-start: min(3.66vw,50px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
  line-height: 1.88;
}
@media (width <= 760px) {
  .strength-box_txt {
    margin-block-start: 13.33vw;
    font-size: 4.27vw;
  }
}

.strength-moreBox {
  display: grid;
  grid-template-columns: min(7.61vw,104px) minmax(0,1fr);
  margin-block-start: min(5.12vw,70px);
  & ul {
    display: grid;
    gap: 0 min(2.56vw,35px);
    padding-inline-start: min(2.56vw,35px);
    border-inline-start: 1px solid var(--hover-color);
  }
}
@media (width <= 760px) {
  .strength-moreBox {
    grid-template-columns: 100%;
    margin-block-start: 16vw;
    & ul {
      gap: 8vw 0;
      margin-block-start: 5.33vw;
      padding-block-start: 5.33vw;
      padding-inline-start: 0;
      border-block-start: 1px solid var(--hover-color);
      border-inline-start: none;
    }
  }
}

.strength-morebox_img {
  width: min(5.05vw,69px);
  height: auto;
  aspect-ratio: 69/85;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-morebox_img {
    width: 18.4vw;
    margin-inline: auto;
  }
}

.strength-more_link {
  font-size: min(1.39vw,19px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  & span {
    position: relative;
    padding-inline-end: min(1.98vw,27px);
    &::before, &::after {
      position: absolute;
      top: calc(50% + 1px);
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.46vw,20px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background: #FFF;
      mask: url(../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) {
  .strength-more_link {
    font-size: 5.07vw;
    & span {
      padding-inline-end: 7.2vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .strength-more_link:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}

.strength-more_txt {
  margin-block-start: min(1.1vw,15px);
  font-size: min(1.02vw,14px);
  letter-spacing: 0.025em;
  line-height: 1.86;
}
@media (width <= 760px) {
  .strength-more_txt {
    margin-block-start: 2.67vw;
    font-size: 3.73vw;
  }
}

@media (width <= 760px) {
  .strength-box1Wrap {
    margin-block-start: 21.33vw;
  }
}

.strength-box1Wrap .strength-box {
  width: min(32.21vw,440px);
  margin-inline-start: auto;
}
@media (width <= 760px) {
  .strength-box1Wrap .strength-box {
    width: 100%;
  }
}

.strength-box1Wrap .strength-box_ttl {
  width: min(30.45vw,416px);
  aspect-ratio: 416/93;
}
@media (width <= 760px) {
  .strength-box1Wrap .strength-box_ttl {
    width: 74.67vw;
  }
}

.strength-box1Wrap .strength-moreBox ul {
  grid-template-columns: min(10.61vw,145px) minmax(0,1fr);
}
@media (width <= 760px) {
  .strength-box1Wrap .strength-moreBox ul {
    grid-template-columns: 100%;
  }
}

.strength-img01 {
  width: min(64.42vw,880px);
  height: auto;
  aspect-ratio: 880/727;
  margin-block-start: calc(min(15.37vw,210px) * -1);
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-img01 {
    width: 100%;
    margin-block-start: 18.67vw;
  }
}

.strength-box2Wrap {
  display: grid;
  gap: 0 min(8.42vw,115px);
  grid-template-columns: min(40.78vw,557px) minmax(0,1fr);
  padding-block-start: min(8.78vw,120px);
}
@media (width <= 760px) {
  .strength-box2Wrap {
    gap: 18.67vw 0;
    grid-template-columns: 100%;
    padding-block-start: 21.33vw;
  }
}

.strength-box2Wrap .strength-box_ttl {
  width: min(40.63vw,555px);
  aspect-ratio: 555/93;
}
@media (width <= 760px) {
  .strength-box2Wrap .strength-box_ttl {
    width: 90.67vw;
  }
}

.strength-box2Wrap .strength-moreBox ul {
  grid-template-columns: min(11.86vw,162px) minmax(0,1fr);
}
@media (width <= 760px) {
  .strength-box2Wrap .strength-moreBox ul {
    grid-template-columns: 100%;
  }
}

.strength-img02 {
  width: 100%;
  height: auto;
  aspect-ratio: 568/500;
  margin-block-start: min(2.56vw,35px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-img02 {
    margin-block-start: 0;
  }
}

.strength-box3Wrap {
  display: grid;
  gap: 0 min(5.86vw,80px);
  grid-template-areas: "itemB itemA";
  grid-template-columns: minmax(0,1fr) min(32.21vw,440px);
  padding-block-start: min(10.98vw,150px);
}
@media (width <= 760px) {
  .strength-box3Wrap {
    gap: 18.67vw 0;
    grid-template-areas: "itemA""itemB";
    grid-template-columns: 100%;
    margin-block-start: 21.33vw;
  }
}

.strength-box3Wrap .strength-box {
  grid-area: itemA;
}

.strength-box3Wrap .strength-box_ttl {
  width: min(30.01vw,410px);
  aspect-ratio: 410/93;
}
@media (width <= 760px) {
  .strength-box3Wrap .strength-box_ttl {
    width: 69.07vw;
  }
}

.strength-box3Wrap .strength-moreBox ul {
  grid-template-columns: 100%
}

.strength-img03 {
  width: 100%;
  height: auto;
  aspect-ratio: 748/685;
  & img {
    width: 100%;
    height: 100%;
  }
}

.strength-box3Wrap .strength-img03 {
  grid-area: itemB;
}

.strength-section2 {
  padding-block: min(8.78vw,120px);
  background-color: #FFF;
}
@media (width <= 760px) {
  .strength-section2 {
    padding-block: 16vw;
  }
}

.strength-section2 .cmn-heading2-icon {
  margin-block-start: 0;
}

.strength-data {
  display: grid;
  gap: clamp(10px, -21.353px + 4.125vw, 35px);
  grid-template-columns: repeat(3,minmax(0,1fr));
  & > div {
    display: grid;
    align-items: center;
    gap: 0 min(1.54vw,21px);
    grid-template-columns: min(7.83vw,107px) minmax(0,1fr);
    height: min(10.4vw,142px);
    padding-inline: clamp(15px, -16.353px + 4.125vw, 40px) min(0.73vw,10px);
    border-radius: min(0.44vw,6px);
    background-color: #F4F7F8;
  }
  & dt {
    position: relative;
    color: var(--txt-black-color);
    font-size: min(1.32vw,18px);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
    &::after {
      position: absolute;
      top: 50%;
      right: calc(min(1.54vw,21px) * -1);
      width: min(1.54vw,21px);
      height: 1px;
      background-color: #202020;
      content: "";
    }
  }
  & dd {
    padding-inline-start: min(1.76vw,24px);
    color: #2B4E76;
    font-size: min(1.46vw,20px);
    font-weight: 600;
    line-height: 1.6;
  }
  .strength-data_txt1 {
    font-size: min(1.02vw,14px);
  }
  .strength-data_txt2 {
    font-size: min(0.73vw,10px);
  }
}
@media (width <= 760px) {
  .strength-data {
    gap: 5.33vw 0;
    grid-template-columns: 100%;
    & > div {
      gap: 0 5.6vw;
      grid-template-columns: 26.67vw minmax(0,1fr);
      height: 37.87vw;
      padding-inline: 5.33vw 2.67vw;
      border-radius: 1.6vw;
    }
    & dt {
      font-size: 4.27vw;
      &::after {
        right: -5.6vw;
        width: 5.6vw;
      }
    }
    & dd {
      padding-inline-start: 5.33vw;
      font-size: 4.8vw;
    }
    .strength-data_txt1 {
      font-size: 3.73vw;
    }
    .strength-data_txt2 {
      font-size: 2.67vw;
    }
  }
}

.strength-data_number1 {
  width: min(11.2vw,153px);
  height: auto;
  aspect-ratio: 153/32;
  margin-block-end: min(0.73vw,10px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-data_number1 {
    width: 29.33vw;
    margin-block-end: 2.67vw;
  }
}

.strength-data_number2 {
  width: min(12.59vw,172px);
  height: auto;
  aspect-ratio: 172/32;
  margin-block: min(0.73vw,10px) min(0.37vw,5px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-data_number2 {
    width: 37.33vw;
    margin-block: 1.33vw;
  }
}

.strength-data_number3 {
  width: min(9vw,123px);
  height: auto;
  aspect-ratio: 123/38;
  margin-block: min(0.73vw,10px) min(0.37vw,5px);
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .strength-data_number3 {
    width: 23.73vw;
    margin-block: 2.67vw 1.33vw;
  }
}