@charset "UTF-8";
:root {
  --color_black: #2C2A29;
  --color_white: #ffffff;
  --color_gray_100: #697180;
  --color_blue_100: #3064D5;
  --color_blue_200: #10069f;
  --font-size_base: 16;
  --font-family_line-seed-jp: 'LINE Seed JP', sans-serif;
}

@media screen and (width < 1280px) {
  .pc-only {
    display: none;
  }
}

@media screen and (width >= 1280px) {
  .sp-only {
    display: none;
  }
}

body {
  line-height: 1.5;
  color: var(--color_black);
  margin: 0;
}

.figures-container {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  gap: 24px;
}
@media screen and (width >= 1280px) {
  .figures-container {
    padding: 120px 80px;
  }
}
@media screen and (768px < width < 1280px) {
  .figures-container {
    max-width: 728px;
    padding: 80px 80px;
  }
}
@media screen and (width <= 768px) {
  .figures-container {
    padding: 80px 0;
  }
}

.figures-list {
  display: grid;
  list-style: none;
}
@media screen and (width >= 1280px) {
  .figures-list {
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }
}
@media screen and (width < 1280px) {
  .figures-list {
    gap: 24px;
  }
}

.figure-card {
  display: flex;
  position: relative;
  background-color: var(--color_white);
  box-shadow: 0 5px 10px 0 #C9D0E8;
  container-type: inline-size;
}
@media screen and (width >= 1280px) {
  .figure-card {
    grid-column: span var(--grid);
    min-height: 190px;
  }
}
@media screen and (width < 1280px) {
  .figure-card {
    min-height: 158px;
  }
}
.figure-card__inner {
  display: flex;
  width: 100%;
  padding: 16px 16px 16px 32px;
}
@media screen and (width >= 1280px) {
  .figure-card__inner {
    align-items: center;
    gap: 16cqi;
  }
}
@media screen and (width < 1280px) {
  .figure-card__inner {
    flex-direction: column;
    gap: 32px;
  }
}
.figure-card__section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  position: relative;
  width: 100%;
  height: 100%;
}
.figure-card__section--detail .figure-card__title {
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (width >= 1280px) {
  .figure-card__section--detail .figure-card__title {
    font-size: calc(16 / var(--font-size_base) * 1rem);
  }
}
@media screen and (width < 1280px) {
  .figure-card__section--detail .figure-card__title {
    font-size: calc(14 / var(--font-size_base) * 1rem);
  }
}
.figure-card__section--detail .figure-card__value {
  margin-top: 0;
}
.figure-card__section--detail::before {
  content: "";
  position: absolute;
  background-image: radial-gradient(circle, #C0C5CC 2px, transparent 2px);
}
@media screen and (width >= 1280px) {
  .figure-card__section--detail::before {
    top: 0;
    left: calc(-8cqi - 2px);
    width: 4px;
    height: 100%;
    background-size: 4px 14px;
    background-repeat: repeat-y;
    background-position: center top;
  }
}
@media screen and (width < 1280px) {
  .figure-card__section--detail::before {
    top: -18px;
    left: -4px;
    width: calc(100% - 12px);
    height: 4px;
    background-size: 12px 4px;
    background-repeat: repeat-x;
    background-position: left center;
  }
}
@media screen and (width < 1280px) {
  .figure-card:has(.figure-card__section--detail) .figure-card__inner {
    padding-bottom: 32px;
  }
}
.figure-card:has(.figure-card__section--detail) .figure-card__section {
  width: auto;
}
@media screen and (width >= 1280px) {
  .figure-card:has(.figure-card__section--detail) .figure-card__image {
    left: calc(100cqi - 172px);
    right: auto;
  }
}
.figure-card__content {
  flex: 1 1 auto;
}
@media screen and (width < 1280px) {
  .figure-card__content--image-bottom {
    padding-bottom: 132px;
  }
}
@media screen and (width < 1280px) {
  .figure-card__content--image-bottom .figure-card__content-inner {
    width: fit-content;
    min-height: auto;
  }
}
@media screen and (width < 1280px) {
  .figure-card__content--image-bottom .figure-card__image {
    top: auto;
    left: 50%;
    bottom: -132px;
    transform: translate(-50%, 0);
  }
}
@media screen and (width >= 1280px) {
  .figure-card__content:has(.figure-card__details) {
    margin-bottom: -24px;
  }
}
.figure-card__content-inner {
  display: grid;
  align-content: center;
  position: relative;
  min-height: 125px;
}
@media screen and (width < 1280px) {
  .figure-card__content-inner:not(:has(.figure-card__image)) {
    min-height: auto;
  }
}
.figure-card__title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (width >= 1280px) {
  .figure-card__title {
    font-size: calc(18 / var(--font-size_base) * 1rem);
  }
}
@media screen and (width < 1280px) {
  .figure-card__title {
    font-size: calc(16 / var(--font-size_base) * 1rem);
  }
}
@media screen and (width >= 1280px) {
  .figure-card__values {
    display: flex;
  }
}
.figure-card__value {
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-weight: 700;
  color: var(--color_blue_200);
}
@media screen and (width >= 1280px) {
  .figure-card__value + .figure-card__value::before {
    content: "・";
    font-size: calc(18 / var(--font-size_base) * 1rem);
  }

/* .before-none クラスがついている場合は中黒（・）を打ち消す */
  .figure-card__value.before-none + .figure-card__value::before,
  .figure-card__value + .figure-card__value.before-none::before {
    content: none;
  }
}
@media screen and (width >= 1280px) {
  .figure-card__content:not(:has(.figure-card__title)) .figure-card__value {
    margin-top: 35px;
  }
}
@media screen and (width < 1280px) {
  .figure-card__content:not(:has(.figure-card__title)) .figure-card__value {
    margin-top: 32px;
  }
}
.figure-card__number {
  /* font-family: var(--font-family_line-seed-jp) !important; */
  font-family: 'LINE Seed JP', sans-serif !important;
  font-weight: 700;
  line-height: 0.9;
  padding-bottom: 4px;
}
@media screen and (width >= 1280px) {
  .figure-card__number {
    font-size: calc(64 / var(--font-size_base) * 1rem);
  }
}
@media screen and (width < 1280px) {
  .figure-card__number {
    font-size: calc(48 / var(--font-size_base) * 1rem);
  }
}
.figure-card__unit {
  font-size: calc(18 / var(--font-size_base) * 1rem);
}
.figure-card__category {
  font-size: calc(16 / var(--font-size_base) * 1rem);
  color: var(--color_blue_100);
}
@media screen and (width >= 1280px) {
  .figure-card__category {
    padding-right: 8px;
  }
}
@media screen and (width < 1280px) {
  .figure-card__category {
    padding-right: 4px;
  }
}
.figure-card__details {
  display: flex;
  column-gap: 4px;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (width >= 1280px) {
  .figure-card__details {
    transform: translateY(-8px);
  }
}
@media screen and (width < 1280px) {
  .figure-card__details {
    flex-wrap: wrap;
  }
}
.figure-card__additional-text {
  min-width: 30%;
  font-size: calc(16 / var(--font-size_base) * 1rem);
  font-weight: 700;
  color: var(--color_blue_100);
}
.figure-card__note-text {
  min-width: 30%;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: right;
  margin-left: auto;
  color: var(--color_gray_100);
}
@media screen and (width >= 1280px) {
  .figure-card__note-text {
    font-size: calc(14 / var(--font-size_base) * 1rem);
  }
}
@media screen and (width < 1280px) {
  .figure-card__note-text {
    font-size: calc(12 / var(--font-size_base) * 1rem);
  }
}
.figure-card__image {
  width: 125px;
  height: 125px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.figure-card__image img {
  width: 100%;
  height: auto;
}
.figure-card__button {
  position: absolute;
  right: 8px;
  width: 44px;
  height: 44px;
  background-color: var(--color_blue_200);
  /* box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15); */
  border-radius: 100px;
  transition: background-color 0.3s;
}
@media screen and (width >= 1280px) {
  .figure-card__button {
    bottom: 12px;
  }
}
@media screen and (width < 1280px) {
  .figure-card__button {
    bottom: 8px;
  }
}
.figure-card__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-image: url("/images/common/icon_arrow_right2.svg");
}
@media (any-hover: hover) {
  .figure-card__button:hover {
    background-color: #140D77;
  }
}

.figures-note {
  font-size: calc(14 / var(--font-size_base) * 1rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color_gray_100);
}
@media screen and (width >= 1280px) {
  .figures-note {
    text-align: right;
  }
}