@charset "utf-8";

:root {
  --achieve-bg-color: #F6F7F9;
  --text-color: #1B1B20;
  --accent-color: #193CB4;
  --achieve-font: YuGothic, sans-serif;
  --achieve-emphasize-font: Helvetica Neue, sans-serif;
}

/* 
 * コンテナクエリ：
 * 親コンテナを設定 
 * 必ずcontainer-nameで親コンテナを明示すること
 * （さもないと明示されていないコンテナボックスに紐づいてしまう恐れがある。）
 */
.achieve {
  container-type: inline-size;
  container-name: achieve;
}

.achieve__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4vw;
}
/* 
 * コンテナクエリ：
 * 内容の長さで折り返しが起こるのでカラム調整 
 * 必ず@containerでコンテナ名を指定すること。
 * （さもないと明示されていないコンテナボックスに紐づいてしまう恐れがある。）
 */
@container achieve (min-width: 1050px) {
  .achieve__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 33px;
  }
}

.achieve__list__item {
  background-color: var(--achieve-bg-color);
  padding: 2.4vw;
  text-align: center;
}
@media (min-width: 768px), print {
  .achieve__list__item {
    padding: 20px 15px;
  }
}

.achieve__list__img {
  object-fit: contain;
  width: 11.5vw;
  height: 13vw;
  margin: 3vw 0;
}
@media (min-width: 768px), print {
  .achieve__list__img {
    width: 70px;
    height: 90px;
    margin: 20px 0;
  }
}

.achieve__list__name {
  font-size: 1.6rem;
  font-family: var(--achieve-font);
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 768px), print {
  .achieve__list__name {
    font-size: 2rem;
  }
}

.achieve__list__appeal {
  font-size: 1.8rem;
  font-family: var(--achieve-font);
  font-weight: 700;
}
/* スマホ表示のときは２行になる可能性を考慮する */
@media (max-width: 767px) {
  .achieve__list__appeal {
    line-height: 1.2;
  }
}
@media (min-width: 768px), print {
  .achieve__list__appeal {
    font-size: 3rem;
  }
}

.achieve__list__appeal__emphasize {
  font-family: var(--achieve-emphasize-font);
  font-size: 3.8rem;
  line-height: 1.4;
  color: var(--accent-color);
}
/* スマホ表示のときは２行になる可能性を考慮する */
@media (max-width: 767px) {
  .achieve__list__appeal__emphasize {
    line-height: 1.2;
  }
}
@media (min-width: 768px), print {
  .achieve__list__appeal__emphasize {
    font-size: 6.4rem;
  }
}

/* 数値と単位の間の余白 */
.achieve__list__appeal__emphasize + span {
  padding-left: 0.2em;
}

/*
 * スマホ表示のみ
 * ２行になるときは単位にクラスを付与すること
 */
@media (max-width: 767px) {
  .achieve__list__appeal__emphasize + .achieve__list__appeal__emphasize__below {
    padding-left: 0;
    display: block;
  }
}

/*
 * 強調数字のカンマ大きさを調整
 */
.achieve__list__appeal__emphasize__comma {
  font-size: 60%;
}
/*
 * ドットはカンマより少し大きく
 */
.achieve__list__appeal__emphasize__dot {
  font-size: 70%;
}

/* データの注釈 */
@media (max-width: 767px) {
  .achieve__list__appeal__note {
    margin-top: 10px;
  }
}