/**
* セブンイレブン
*/
.main-seven-eleven {
  padding-top: 60px;
  padding-bottom: 16px;
  @media screen and (min-width: 769px) {
    padding-top: 120px;
  }
  .section-seven-eleven {
    h2 {
      margin-bottom: 24px;
      @media screen and (min-width: 769px) {
        margin-bottom: 40px;
      }
    }
    .note {
      margin-bottom: 56px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      line-height: 2;
      @media screen and (min-width: 769px) {
        font-size: 20px;
      }
    }
    .seven-photo {
      margin-bottom: 64px;
      text-align: center;
      img {
        margin-inline: auto;
      }
    }

    /* 業務の流れ */
    .work-flow-wrap {
      position: relative;
      margin-bottom: 96px;
      padding: 40px 20px 24px 20px;
      background-color: var(--color-white);
      border-radius: 32px;
      @media screen and (min-width:769px) {
        padding: 96px 9% 56px 9%;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: -24px;
        right: 4%;
        width: 30%;
        height: 255px;
        background-image: url(../../images/seven-eleven/cashier.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .work-flow {
        position: relative;
        margin: 3em auto 0 auto;
        &::before {
          position: absolute;
          content: "";
          top: 50px;
          bottom: 0;
          left: 28px;
          width: 4px;
          height: calc(100% - 56px);
          background-color: var(--color-orange);
        }
        .timeline_group {
          position: relative;
          /* padding-top: 55px; */
        }
        .timeline_group:not(:first-of-type) {
          margin-top: 32px;
        }
        .timeline_item {
          margin-bottom: 1em;
          position: relative;
          padding-left: 64px;
          display: flex;
          align-items: center;
        }
        .timeline_item:not(:last-of-type) {
          margin-bottom: 2em;
        }
        .number {
          position: absolute;
          top: 50%;
          left: 0;
          min-width: 58px;
          min-height: 58px;
          padding: 0.5em 0.5em;
          margin-top: -33px;
          font-size: 30px;
          font-weight: 900;
          text-align: center;
          color: var(--color-white);
          background-color: var(--color-orange);
          border-radius: 50%;
          line-height: 1.0;
        }
        .desc {
          padding: 0.5em 1em;
          width: 100%;
          h3 {
            font-size: 18px;
            font-weight: 900;
            color: var(--color-orange);
          }
        }
        @media only screen and (max-width: 768px) {
          &::before {
            left: 26px;
          }
          .number {
            top: 40px;
          }
          .desc {
            font-size: 0.8em;
          }
        }
      }
    }

    /* 募集要項 */
    .application-detail-wrap {
      margin-bottom: 96px;
      padding: 96px 3% 56px 3%;
      background-color: var(--color-white);
      border-radius: 32px;
      dl {
        padding: 20px 0;
        font-size: 16px;
        @media screen and (max-width:768px) {
          padding-inline: 20px;
        }
        @media screen and (min-width: 769px) {
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          align-items: center;
        }
        &:nth-of-type(odd) {
          background-color: rgba(236, 143, 11, 0.15);
        }
        dt {
          font-size: 18px;
          font-weight: 900;
          color: var(--color-orange);
          @media screen and (min-width: 769px) {
            width: 18%;
            text-align: center;
          }
        }
        dd {
          @media screen and (min-width: 769px) {
            flex: 1;
          }
        }
      }
      .map-wrap {
        margin-top: 64px;
        margin-inline: auto;
        max-width: 800px;
        padding-top: 50%;
      }
    }
    /* 応募フォーム */
    .application-form-wrap {
      padding: 72px 10% 56px 10%;
      background-color: var(--color-white);
      border-radius: 32px;
      dl {
        dd {
          color: var(--color-orange);
        }
      }
    }
  }
}