/* マイページ・お電話でのお申し込み・解約 */
.p-magazine-procedure-apply {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: #eee;
  border-radius: 6px;
  color: #000;
  word-break: break-word;

  @media screen and (min-width: 769px) {
    padding: 40px 48px;
  }

  & > .block {
    display: flex;
    flex-direction: column;
  }

  & .ttl {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.63;
    letter-spacing: 0.1em;

    @media screen and (min-width: 769px) {
      font-size: 18px;
    }
  }

  & .txt {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.63;
    letter-spacing: 0.06em;

    @media screen and (min-width: 769px) {
      font-size: 16px;
    }
  }
}

/* マイページログインボタン */
.p-magazine-procedure-apply + .p-magazine-procedure-mypage-link {
  margin-top: 40px;
}

.p-magazine-procedure-link + .p-magazine-procedure-mypage-link {
  margin-top: 36px;
}

.p-magazine-procedure-flow + .p-magazine-procedure-link {
  margin-top: 64px;
}

/* より詳細なお手続き方法・解約はこちら */
.p-magazine-procedure-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  word-break: break-word;

  & .ttl {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.055em;

    @media screen and (min-width: 769px) {
      font-size: 18px;
    }
  }

  & .link {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.0625em;

    @media screen and (min-width: 769px) {
      font-size: 16px;
    }
  }
}

/* マイページでの操作方法（手順フロー） */
.p-magazine-procedure-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 24px;
  background-color: #eceef4;
  color: #000;
  word-break: break-word;

  @media screen and (min-width: 769px) {
    gap: 48px;
    padding: 56px;
  }

  & > .item {
    display: flex;
    flex-direction: column;
    width: 100%;

    @media screen and (min-width: 769px) {
      width: calc(50% - 24px);
    }

    &.is-full {
      width: 100%;
    }
  }

  & .head {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  & .num {
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    margin-top: 3px;
    background-color: #0c4892;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 23px;
    letter-spacing: 0.06em;
    text-align: center;
  }

  & .ttl {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.055em;
    font-feature-settings: "palt" 1;

    @media screen and (min-width: 769px) {
      font-size: 18px;
    }
  }

  & .note {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.07em;

    @media screen and (min-width: 769px) {
      font-size: 14px;
    }
  }

  & .img {
    margin: auto 0 0;
    padding-top: 12px;

    @media screen and (min-width: 769px) {
      padding-top: 16px;
    }

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}