@charset "utf-8";

:root {
  --letter-20: 2px;
  @media screen and (max-width: 767px) {
    --letter-20: 1px;
  }
}

.num_list--01 {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  & + .num_list--01 {margin-bottom: var(--space-65);}
  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}
.num_list--item {
  position: relative;
  width: calc(50% - 10px);
  border: 3px solid var(--blue-color);
  border-radius: 10px;
  padding-top: 100px;
  padding-bottom: var(--space-30);
  padding-inline: var(--space-30);
  overflow: hidden;
  &:has(.vertical) {
    padding-top: var(--space-45);
    padding-left: 100px;
    min-height: 420px;
  }
  p {
    font-weight: bold;
    color: var(--blue-color);
    font-size: var(--font-40);
    letter-spacing: var(--letter-20);
    .large-txt {
      display: inline-block;
      margin-bottom: -30px;
      font-size: 9.6rem;
    }
    .small-txt {
      display: block;
      text-align: center;
      font-size: var(--basic-txt);
      letter-spacing: var(--letter-12);
    }
  }
  p.small-txt {
    display: block;
    text-align: center;
    font-size: var(--basic-txt);
    letter-spacing: var(--letter-12);
  }
  @media screen and (max-width: 767px) {
    width: 100%;
    padding-top: 40px;
    &:has(img[src="img/num_fig01.webp"]) {
      padding-top: 70px;
      .num_list--ttl {
        font-size: min(2.2rem, 5.5vw);
      }
    }
    &:has(.vertical) {
      padding-left: 56px;
      min-height: initial;
    }
    &:has(img[src="img/num_fig02.svg"]) {min-height: 275px;}
    p:has(img[src="img/num_fig02.svg"]) {
      position: relative;
      transform: translateX(10px);
      top: 10px;
    }
    img[src="img/num_fig02.svg"] {
      height: 176px;
      aspect-ratio: 394 / 270;
    }

    p {
      .large-txt {font-size: 8rem;}
    }
  }
}

.num_list--item.c13 {

}
.num_list--item.c13 .num_list--dir p {
  transform: translateX(-10px);
  @media screen and (max-width: 767px) {
    transform: translateX(-15px);
    .large-txt {font-size: min(7rem, 18vw);}
  }
}

.num_list--basic {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  &:has(img[src="img/num_icon03.svg"]) {
    position: relative;
    transform: translateY(-20px);
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    &:has(img[src="img/num_icon03.svg"]) {
      transform: translateY(0);
    }
  }
}
.num_list--dir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  .large-txt {margin-top: -30px;}
  figure:has(img[src="img/num_icon02.svg"]) {
    position: relative;
    transform: translateX(-15px);
  }
  @media screen and (max-width: 767px) {
    figure:has(img[src="img/num_icon02.svg"]) {
      img {width: 160px;}
    }
  }
}
.num_list--ttl {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 10px 10px 10px;
  padding: 10px 20px;
  color: #fff;
  background: var(--blue-color);
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  &.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 20px 10px;
  }
}
.lane-abs01 {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  margin: auto;
  img {height: 100%;object-fit: cover;}
  @media screen and (max-width: 767px) {
    right: 15px;
  }
}
.lane-abs02 {
  position: absolute;
  bottom: 30px;
  right: 0;
  left: 0;
  margin: auto;
  img {width: 100%;}
  @media screen and (max-width: 767px) {
    bottom: 15px;
  }
}

.num_list--outer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}
.num_list--02,
.num_list--03 {
  width: calc(50% - 10px);
  .num_list--item {
    width: 100%;
    
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.num_list--03 .num_list--basic {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  justify-content: space-between;
  &:has(img[src="img/num_icon06.svg"]) {
    margin-top: var(--space-30);
    p {
      position: relative;
      transform: translateX(36px);
    }
  }
  @media screen and (max-width: 767px) {
    flex-wrap: initial;
    & > * {width: calc(50% - 0.5em)!important;}
    p {white-space: nowrap;}
    &:has(img[src="img/num_icon06.svg"]) {
      p {transform: translateX(8px);}
    }
    .large-txt {
      font-size: min(7.2rem, 13vw);
    }
  }
}


.num_list--02 .num_list--item {height: 365px;}
.num_list--02 .num_list--item:not(:last-child) {margin-bottom: 20px;}
.num_list--03 .num_list--item {
  min-height: 750px;
  &:has(img[src="img/num_icon06.svg"]) {
    padding-top: 140px;
  }
}
@media screen and (max-width: 767px) {
  .num_list--02 .num_list--item {height: auto;}
  .num_list--03 .num_list--item {
    min-height: initial;
    &:has(img[src="img/num_icon06.svg"]) {
      padding-top: 70px;
    }
  }
}