@charset "utf-8";
body {
  background-color: #F4F8FF;
}
/* ↓↓↓ fv ↓↓↓ */
.fv {
  padding: min(13.359375000000002vw,171px) 20px 0;
  margin: 0 auto;

  @media (max-width: 768px) {
    padding-top: 112px;
  }
}
.fv .inner {
  max-width: 1056px;
  container-type: inline-size;
  margin: 0 auto;
}
.fv .inner .ttl {
  .en {
    font-size: 6.0606060606060606cqw;
    font-family: var(--text-poppins);
    font-weight: 600;
    line-height: 1.0476190476190477;
    letter-spacing: 0;
    color: #103585;

    @media (max-width: 768px) {
      font-size: 4.2rem;
    }
  }

  .ja {
    position: relative;
    font-size: 1.893939393939394cqw;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    padding-left: 1.5151515151515151cqw;
    margin-top: 1.7045454545454544cqw;

    @media (max-width: 768px) {
      font-size: 1.5rem;
      padding-left: 14px;
      margin-top: 0;
    }

    &::before {
      content: '';
      position: absolute;
      width: 0.7575757575757576cqw;
      height: auto;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background-color: #103585;
      top: 1.1363636363636365cqw;
      left: 0;

      @media (max-width: 768px) {
        width: 8px;
        top: 8px;
      }
    }
  }
}
.fv .inner .breadcrumbs {
  margin-top: 11.363636363636363cqw;

  @media (max-width: 768px) {
    margin-top: 64px;
  }

  .list {
    display: flex;
    gap: 3.0303030303030303cqw;

    @media (max-width: 768px) {
      gap: 24px;
    }

    .item {
      position: relative;
      font-size: 1.231060606060606cqw;
      font-weight: 500;
      letter-spacing: 0.05em;

      @media (max-width: 768px) {
        font-size: 1.2rem;
      }

      +.item::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: rgba(16, 53, 133,.5);
        translate: -100% 0;
        top: 0;
        left: -1.5151515151515151cqw;
        
        @media (max-width: 768px) {
          left: -12px;
        }
      }

      .link {
        color: rgba(16, 53, 133,.5);
        transition: color ease .3s;

        @media (min-width: 769px) {
          &:hover {
            color: rgba(16, 53, 133);
          }
        }
      }
    }
  }
}
/* ↑↑↑ fv ↑↑↑ */
/* ↓↓↓ article ↓↓↓ */
.article {
  background-color: #fff;
  border-radius: min(1.5625vw,20px) min(1.5625vw,20px) 0 0;
  padding: 0 20px;
  margin: min(1.875vw,24px) auto 0;

  @media (max-width: 768px) {
    border-radius: 14px 14px 0 0;
    margin-top: 16px;
  }
}
.article .inner {
  max-width: 876px;
  container-type: inline-size;
  padding-block: min(6.25vw,80px) min(15.625vw,200px);
  margin: 0 auto;

  @media (max-width: 768px) {
    padding-block: 56px 100px;
  }
}
.article .inner .date {
  font-size: max(1.7123287671232876cqw,1rem);
  font-family: var(--text-poppins);
  font-weight: 500;
  letter-spacing: 0;
  color: #103585;
  text-align: end;

  @media (max-width: 768px) {
    font-size: 1.2rem;
  }
}
.article .inner .ttl {
  font-size: 3.65296803652968cqw;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.05em;
  color: #103585;
  margin-top: 1.82648401826484cqw;

  @media (max-width: 768px) {
    font-size: 2rem;
    line-height: 1.6;
    margin-top: 32px;
  }
}
.article .inner .main_conts {
  margin-top: 9.1324200913242cqw;

  @media (max-width: 768px) {
    margin-top: 40px;
  }

  .txt {
    font-size: max(1.7123287671232876cqw,1rem);
    font-weight: 500;
    line-height: 2.2666666666666666;
    letter-spacing: 0.04em;
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;

    @media (max-width: 768px) {
      font-size: 1.5rem;
      line-height: 2;
    }

    &:not(:first-of-type) {
      margin-top: 11.415525114155251cqw;

      @media (max-width: 768px) {
        margin-top: 100px;
      }
    }
  }

  .txt_link {
    color: #103585;
    transition: opacity ease .3s;

    &:hover {
      opacity: .7;
      text-decoration: underline;
    }
  }

  .flex_block {
    display: flex;
    justify-content: center;
    gap: 40px 4.680365296803653cqw;
    margin-top: 11.415525114155251cqw;

    @media (max-width: 768px) {
      flex-direction: column;
      margin-top: 100px;
    }

    .caption {
      font-size: max(1.7123287671232876cqw,1rem);
      font-weight: 500;
      line-height: 1.7333333333333334;
      letter-spacing: 0.04em;
      text-align: center;
      margin-top: 2.73972602739726cqw;

      @media (max-width: 768px) {
        font-size: 1.5rem;
        margin-top: 16px;
      }
    }

    .img {
      max-width: 100%;
    }

    .img a {
      display: block;
      transition: opacity ease .3s;

      .caption {
        color: #103585;
      }

      @media (min-width: 769px) {
        &:hover {
          opacity: .7;
          text-decoration: underline;
        }
      }
    }

    .txt_group {
      flex: 1;
    }
  }

  .inner_box {
    max-width: 94.74885844748859cqw;
    display: block;
    margin-left: auto;

    @media (max-width: 768px) {
      max-width: calc(100% - 25px);
    }
  }

  .list {
    display: flex;
    flex-direction: column;

    .item {
      display: flex;

      .list_head {
        width: 7.4200913242009126cqw;
        text-align-last: justify;
        flex-shrink: 0;

        @media (max-width: 768px) {
          width: 60px;
        }
      }
      .list_conts {
        flex: 1;
      }
    }
  }

  .icon {
    width: 1.141552511415525cqw;
    height: 100%;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    margin-left: 0.684931506849315cqw;

    @media (max-width: 768px) {
      width: 10px;
      margin-left: 6px;
    }
  }

  .indent {
    display: block;
    text-indent: -1em;
    padding-left: 1em;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-color: #AEBDDF;

    &:not(:first-child) {
      margin-top: 11.415525114155251cqw;

      @media (max-width: 768px) {
        margin-top: 100px;
      }
    }
    thead th {
      font-size: max(1.7123287671232876cqw,1rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-align: center;
      color: #103585;
      background-color: #D5E2FD;
      text-align: center;
      padding: 1.141552511415525cqw;

      @media (max-width: 768px) {
        font-size: 1.5rem;
        padding: 10px;
      }
    }
    tbody th,td {
      font-size: max(1.7123287671232876cqw,1rem);
      font-weight: 500;
      letter-spacing: 0.04em;
      padding: 1.141552511415525cqw;

      @media (max-width: 768px) {
        font-size: 1.5rem;
        padding: 10px;
      }
    }
    td {
      text-align: center;
    }
  }
}
.article .inner .backlink {
  width: 38.35616438356164cqw;
  font-size: max(1.7123287671232876cqw,1rem);
  font-weight: 500;
  letter-spacing: 0;
  color: #103585;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 2.73972602739726cqw;
  border: 1px solid #103585;
  border-radius: 0.45662100456621cqw;
  transition: background-color ease .3s, color ease .3s;
  margin: min(9.375vw,120px) auto 0;
  
  @media (max-width: 768px) {
    width: min(100% ,236px);
    font-size: 1.5rem;
    border-radius: 4px;
    padding: 17px 16px 18px 24px;
    margin-top: 80px;
  }

  .icon {
    position: relative;
    width: 2.28310502283105cqw;
    height: fit-content;
    aspect-ratio: 1/1;
    border: 1px solid #103585;
    background-color: #103585;
    border-radius: 0.228310502283105cqw;
    overflow: clip;
    transition: background-color ease .3s;

    @media (max-width: 768px) {
      width: 20px;
      border-radius: 2px;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.0273972602739725cqw;
      height: auto;
      aspect-ratio: 9/8;
      mask-image: url(../img/news/iocn_arrow.svg);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      background-color: #fff;
      transition: background-color ease .3s, left ease .3s;
      translate: -50% -50%;
      top: 50%;
      left: 50%;

      @media (max-width: 768px) {
        width: 9px;
      }
    }
    &::after {
      left: -50%;
    }
  }

  @media (min-width: 769px) {
    &:hover {
      color: #fff;
      background-color: #103585;

      .icon {
        background-color: #fff;

        &::before,
        &::after {
          background-color: #103585;
        }
        &::before {
          left: 150%;
        }
        &::after {
          left: 50%;
        }
      }
    }
  }
}
/* ↑↑↑ article ↑↑↑ */