@charset "UTF-8";
/*==================================================

** compensation
==================================================*/
#compensationRisk .risk-list {
  max-width: 960px;
  margin: 48px auto 0;
  gap: 64px 2.6%; }
  #compensationRisk .risk-list li {
    width: 31.6%; }
  #compensationRisk .risk-list .phtbox {
    width: 92.1%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    background: #f4f5f5;
    border-radius: 1000px;
    position: relative; }
    #compensationRisk .risk-list .phtbox:before {
      content: counter(number);
      background: #043160;
      font: normal normal 700 2.4rem/1.6 "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
      color: #fff;
      line-height: 64px;
      width: 64px;
      border-radius: 1000px;
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0; }
    #compensationRisk .risk-list .phtbox .pht {
      width: 67.8%; }
  #compensationRisk .risk-list .txtbox p {
    margin-top: 16px;
    font-weight: 700; }
  #compensationRisk .risk-list .txtbox .fs-l {
    font-size: 2.0rem; }
  #compensationRisk .risk-list .txtbox .ruby {
    position: relative; }
    #compensationRisk .risk-list .txtbox .ruby:before {
      content: attr(data-ruby);
      font-size: 0.8rem;
      font-weight: 700;
      position: absolute;
      top: -8px;
      left: 0;
      white-space: nowrap; }

@media screen and (max-width: 767px) {
  #compensationRisk .risk-list {
    gap: 32px 0;
    flex-direction: column;
    align-items: center; }
    #compensationRisk .risk-list li {
      max-width: 280px;
      width: 100%; }
    #compensationRisk .risk-list .phtbox {
      width: 100%; } }