/* Default Options */
/* Media Query */
/* Transform Font Size */
/* --------------------------------- */
.l-contents {
  margin-block-start: 0;
}
.l-hero__en {
  padding-block-start: clamp(20px, 3vw, 40px);
}

/* --------------------------------- */
.p-number-header {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.p-number-header .title {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
}
.p-number-header .title .pc {
  display: none;
}
.p-number-header .title .sp {
  width: 100%;
  max-width: 480px;
}
.p-number-header .title .sp img {
  width: 100%;
}
.p-number-header .image {
  min-width: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}
.p-number-header .image .pc {
  display: none;
}
.p-number-list {
  max-width: 400px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.p-number-list .item {
  padding: 20px;
  display: flex;
  justify-content: start;
  align-items: start;
  background-color: var(--bg-color);
  border: 4px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  position: relative;
  box-sizing: border-box;
}
.p-number-list .item .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
}
.p-number-list .item .title:before {
  content: "";
  width: clamp(40px, 3vw, 50px);
  height: 3px;
  display: block;
  background-color: var(--text-color);
  order: 1;
}
.p-number-list .item .title .jp {
  writing-mode: vertical-rl;
  font-feature-settings: normal;
  order: 0;
  font-size: clamp(1.5rem, 1.2610619469rem + 0.6637168142vw, 1.875rem);
  font-weight: 600;
  line-height: 1;
}
.p-number-list .item .title .en {
  order: 2;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}
.p-number-list .item .image .pc {
  display: none;
}
.p-number-list .item .image img {
  width: 100%;
}
.p-number-list .item.n01, .p-number-list .item.n02, .p-number-list .item.n03, .p-number-list .item.n05, .p-number-list .item.n07, .p-number-list .item.n08, .p-number-list .item.n09, .p-number-list .item.n10, .p-number-list .item.n11, .p-number-list .item.n12, .p-number-list .item.n13 {
  aspect-ratio: 1/1;
}
.p-number-list .item.n01 .image, .p-number-list .item.n02 .image, .p-number-list .item.n03 .image, .p-number-list .item.n05 .image, .p-number-list .item.n07 .image, .p-number-list .item.n08 .image, .p-number-list .item.n09 .image, .p-number-list .item.n10 .image, .p-number-list .item.n11 .image, .p-number-list .item.n12 .image, .p-number-list .item.n13 .image {
  position: absolute;
}
.p-number-list .item.n10 .title .jp, .p-number-list .item.n11 .title .jp, .p-number-list .item.n12 .title .jp, .p-number-list .item.n13 .title .jp {
  font-size: 1.25rem;
}
.p-number-list .item.n01 .image {
  width: 85%;
  right: var(--space-xxs);
  bottom: var(--space-xs);
}
.p-number-list .item.n02 .image {
  width: 60%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n03 .image {
  width: 70%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n05 .image {
  width: 70%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n06 .image {
  width: 70%;
  margin-inline-start: auto;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n07 .image {
  width: 60%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n08 .image {
  width: 75%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n09 .image {
  width: 78%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n10 .image {
  width: 60%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n11 .image {
  width: 70%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n12 .image {
  width: 50%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
.p-number-list .item.n13 .image {
  width: 60%;
  right: var(--space-xs);
  bottom: var(--space-xs);
}
@media screen and (min-width: 768px) {
  .p-number-header {
    max-height: 602px;
  }
  .p-number-header .title {
    width: 60%;
  }
  .p-number-header .title .sp {
    display: none;
  }
  .p-number-header .title .pc {
    display: block;
  }
  .p-number-header .image .sp {
    display: none;
  }
  .p-number-header .image .pc {
    display: block;
  }
}
@media screen and (min-width: 1028px) {
  .p-number-list {
    max-width: none;
    display: grid;
    grid-template-columns: var(--grid-column-guide);
    gap: 40px;
  }
  .p-number-list .item .image .pc {
    display: block;
  }
  .p-number-list .item .image .sp {
    display: none;
  }
  .p-number-list .item.n01, .p-number-list .item.n02, .p-number-list .item.n03, .p-number-list .item.n07, .p-number-list .item.n08, .p-number-list .item.n09 {
    min-height: 280px;
    aspect-ratio: auto;
  }
  .p-number-list .item.n05, .p-number-list .item.n06 {
    height: clamp(280px, 20vw, 360px);
    aspect-ratio: auto;
  }
  .p-number-list .item.n10, .p-number-list .item.n11, .p-number-list .item.n12, .p-number-list .item.n13 {
    min-height: 320px;
    padding: var(--space-xxs);
    aspect-ratio: auto;
  }
  .p-number-list .item.n10 .image, .p-number-list .item.n11 .image, .p-number-list .item.n12 .image, .p-number-list .item.n13 .image {
    right: var(--space-xxs);
    bottom: var(--space-xxs);
  }
  .p-number-list .item.n01 {
    grid-area: 1/1/2/5;
  }
  .p-number-list .item.n01 .image {
    width: 75%;
  }
  .p-number-list .item.n02 {
    grid-area: 1/5/2/9;
  }
  .p-number-list .item.n02 .image {
    width: 55%;
  }
  .p-number-list .item.n03 {
    grid-area: 1/9/2/13;
  }
  .p-number-list .item.n03 .image {
    width: 60%;
  }
  .p-number-list .item.n04 {
    grid-area: 2/1/3/13;
  }
  .p-number-list .item.n05 {
    grid-area: 3/1/4/7;
  }
  .p-number-list .item.n05 .image {
    width: 75%;
  }
  .p-number-list .item.n06 {
    grid-area: 3/7/4/13;
  }
  .p-number-list .item.n06 .image {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .p-number-list .item.n07 {
    grid-area: 4/1/5/5;
  }
  .p-number-list .item.n07 .image {
    width: 50%;
  }
  .p-number-list .item.n08 {
    grid-area: 4/5/5/9;
  }
  .p-number-list .item.n08 .image {
    width: 68%;
  }
  .p-number-list .item.n09 {
    grid-area: 4/9/5/13;
  }
  .p-number-list .item.n09 .image {
    width: 68%;
  }
  .p-number-list .item.n10 {
    grid-area: 5/1/6/4;
  }
  .p-number-list .item.n11 {
    grid-area: 5/4/6/7;
  }
  .p-number-list .item.n11 .image {
    width: 65%;
  }
  .p-number-list .item.n12 {
    grid-area: 5/7/6/10;
  }
  .p-number-list .item.n13 {
    grid-area: 5/10/6/13;
  }
}
@media screen and (min-width: 1280px) {
  .p-number-list .item.n01, .p-number-list .item.n02, .p-number-list .item.n03, .p-number-list .item.n07, .p-number-list .item.n08, .p-number-list .item.n09 {
    aspect-ratio: 6/5;
  }
}
@media screen and (min-width: 1480px) {
  .p-number-list .item.n10 .image, .p-number-list .item.n11 .image, .p-number-list .item.n12 .image, .p-number-list .item.n13 .image {
    right: var(--space-xs);
    bottom: var(--space-xs);
  }
}

/* --------------------------------- */