@charset "UTF-8";
/* =====================
  募集要項
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  .inner {
    & > p {
      line-height: 2;
      margin-top: calc((100 / 750) * 75 * 1vw);
    }
    .tab {
      border-bottom: solid calc((100 / 750) * 4 * 1vw) #24845b;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-inline: calc((100 / 750) * 24 * 1vw);
      gap: calc((100 / 750) * 24 * 1vw);
      margin-top: calc((100 / 750) * 64 * 1vw);
      & > li {
        border: solid calc((100 / 750) * 4 * 1vw) #24845b;
        background-color: #fff;
        border-bottom: none;
        border-radius: calc((100 / 750) * 10 * 1vw) calc((100 / 750) * 10 * 1vw) 0 0;
        & > button {
          display: block;
          width: 100%;
          height: 100%;
          font-size: calc((100 / 750) * 30 * 1vw);
          font-weight: 500;
          line-height: 1;
          text-align: center;
          color: #24845b;
          padding-block: calc((100 / 750) * 28 * 1vw);
        }
        &.active {
          background-color: #24845b;
          & > button {
            color: #fff;
          }
        }
      }
    }
    .area {
      .line-block_wrap {
        margin-top: calc((100 / 750) * 64 * 1vw);
        display: grid;
        gap: calc((100 / 750) * 41 * 1vw);
        .line-block {
          padding-inline: calc((100 / 750) * 40 * 1vw);
          padding-block: calc((100 / 750) * 38 * 1vw) calc((100 / 750) * 40 * 1vw);
          border-radius: calc((100 / 750) * 20 * 1vw);
          &::before {
            border-radius: calc((100 / 750) * 18 * 1vw);
          }
          & h4 {
            position: relative;
            font-size: calc((100 / 750) * 32 * 1vw);
            font-weight: 500;
            line-height: 1.7;
            text-align: center;
            color: #1b1b1e;
          }
          & p {
            position: relative;
            line-height: 2;
            &:first-of-type {
              margin-top: calc((100 / 750) * 7 * 1vw);
            }
          }
          & ul {
            position: relative;
            line-height: 2;
          }
          .mgt-2 {
            margin-top: 2em;
          }
        }
      }
      .table-inline {
        padding-inline: 0;
        margin-top: calc((100 / 750) * 40 * 1vw);
        .line-table {
          & tr {
            & th,
            & td {
              line-height: 1.6;
              padding-block: calc((100 / 750) * 35.7 * 1vw);
            }
            & th {
              width: calc((100 / 750) * 200 * 1vw);
              padding-inline: calc((100 / 750) * 24 * 1vw);
            }
            & td {
              padding-inline: calc((100 / 750) * 20 * 1vw);
            }
          }
        }
      }
      .sub-tab_wrap {
        padding: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 24 * 1vw);
        border-radius: calc((100 / 750) * 20 * 1vw);
        background-color: #ededed;
        margin-inline: auto;
        margin-top: calc((100 / 750) * 64 * 1vw);
        .sub-tab {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: calc((100 / 750) * 24 * 1vw);
          & > li {
            border-radius: 50rem;
            border: solid 1px #24845b;
            background-color: #fff;
            & > button {
              display: block;
              width: 100%;
              height: 100%;
              font-size: calc((100 / 750) * 26 * 1vw);
              font-weight: 500;
              line-height: 1;
              text-align: center;
              color: #24845b;
              padding-inline: calc((100 / 750) * 24 * 1vw);
              padding-block: calc((100 / 750) * 24 * 1vw);
              .fs-24 {
                font-size: calc((100 / 750) * 24 * 1vw);
              }
            }
            &.active {
              background-color: #24845b;
              & > button {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
/*エリアの表示非表示と形状*/
.area,
.sub-area {
  display: none;
  /*はじめは非表示*/
  opacity: 0;
  /*透過0*/
  margin-top: calc((100 / 750) * 40 * 1vw);
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active,
.sub-area.is-active {
  display: block;
  /*表示*/
  animation-name: displayAnime;
  /*ふわっと表示させるためのアニメーション*/
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}