.breadcrumb {
  display: flex;
  line-height: 1.2;
}
  @media screen and (max-width: 576px) {
  .breadcrumb {
    font-size: 12px;
  }
}
  .breadcrumb-slash {
    padding: 0 4px;
  }
  .breadcrumb-item > a {
      color: #232323;
    }
  .breadcrumb-item.is-active > a {
        color: var(--main-color);
      }

.article-wrapper {
    padding: 0 0 130px 0;
  }

@media screen and (max-width: 576px) {
  .article-wrapper {
      padding: 0 0 110px 0;
  }
}

.article-content {
    display: flex;
    justify-content: space-between;
  }

@media screen and (max-width: 992px) {
  .article-content {
      flex-wrap: wrap;
  }
}

aside.article-side {
    padding: 100px 0 0;
    flex: 0 0 300px;
  }

@media screen and (max-width: 992px) {
  aside.article-side {
      order: 2;
      margin: 0 auto;
      flex: 0 0 auto;
      max-width: 600px;
      width: 100%;
  }
}

@media screen and (max-width: 576px) {
  aside.article-side {
      padding: 50px 0 0;
  }
}

main.article-main {
    flex: 1 1 780px;
    max-width: 780px;
    width: 100%;
    padding: 28px 0 0 30px;
  }

@media screen and (max-width: 992px) {
  main.article-main {
      order: 1;
      padding: 28px 0 0 0;
      max-width: 600px;
      margin: 0 auto;
  }
}

@media screen and (max-width: 576px) {
  main.article-main {
      padding: 34px 0 0 0;
  }
}

.article-origin {
    margin: 30px 0 11px;
    font-size: 16px;
    color: #646464;
    line-height: 1.2;
  }

.article-title {
    color: var(--main-color);
    font-size: 36px;
    font-weight: bold;
    line-height: 1.4;
    margin: 42px 0 0;
  }

@media screen and (max-width: 576px) {
  .article-title {
      font-size: 24px;
      margin: 10px 0 0;
  }
}

.article-time {
    font-size: 14px;
    color: #646464;
    margin: 9px 0 0;
  }

@media screen and (max-width: 576px) {
  .article-time {
      font-size: 12px;
  }
}

.article-box {
    margin: 8px 0 60px 0;
    letter-spacing: 0.2px;
    line-height: 1.5;
    color: #232323;
  }

@media screen and (max-width: 576px) {
  .article-box {
      margin: 8px 0 50px 0;
  }
}

.article-box > div > p:not(:first-child) {
        margin: 30px 0 0;
      }

.article-box > div > p > a {
        text-decoration: underline;
        color: #915499;
      }

.job-title {
    color: #000;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    margin: 40px 0 0;
  }

@media screen and (max-width: 576px) {
  .job-title {
      font-size: 24px;
      margin: 8px 0 0;
  }
}

.job-time {
    color: #646464;
    font-size: 14px;
    margin: 6px 0 0;
  }

@media screen and (max-width: 576px) {
  .job-time {
      font-size: 12px;
  }
}

.job-box {
    margin: 32px 0 60px;
  }

@media screen and (max-width: 576px) {
  .job-box {
      margin: 15px 0 0;
  }
}

.job-item {
    margin: 20px 0;
  }

.job-item-head {
      color: #8A623C;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      margin: 0 0 2px;
    }

.job-item-body {
      color: #232323;
      line-height: 1.5;
    }

.job-item-body > ul {
        padding: 0 0 0 20px;
        list-style: disc;
      }

.job-item-body > ul.style-order {
          list-style: order;
        }

.job-item-body > p > a {
        color: #E54545;
        text-decoration: underline;
      }

.tag-title > span {
      display: inline-block;
      vertical-align: middle;
      line-height: 1.33;
    }

.tag-title > span:nth-of-type(1) {
      font-size: 24px;
      font-weight: bold;
      padding: 4px 9px 2px;
      color: #fff;
      background: #915499;
    }

.tag-title > span:nth-of-type(2) {
      font-weight: bold;
      color: #fff;
      background: #58BDC2;
      padding: 7px 12px;
    }

.tag-content {
    border-top: 3px solid var(--main-color);
    background: #fff;
    font-size: 16px;
    padding: 16px;
    line-height: 1.5;
  }

.social {
  display: flex;
}

.social > li + li {
    margin: 0 0 0 8px;
  }

.social-item:hover .social-item-background {
        fill: #915499;
      }

.links {
  margin: 20px 0 0;
}

.links-title {
    font-size: 14px;
    color: #646464;
    margin: 0 0 11px 0;
  }

.links-list > a + a {
      margin: 0 0 0 6px;
    }

.more {
  margin: 30px 0 0;
  border-top: 3px solid var(--main-color);
}

.more-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--main-color);
    margin: 11px 0 0;
  }

.more-list {
    margin: 8px 0;
  }

.more-item {
    border-bottom: 1px solid #646464;
    padding: 12px 0;
    line-height: 1.8;
    font-size: 16px;
  }

.more-item a {
      display: inline-block;
      color: #232323;
    }

.more-item a:hover {
        color: #915499;
      }

.pic {
  margin: 50px 0;
}

.pic > figure > picture {
      display: block;
      max-width: var(--pic-width, 100%);
      width: 100%;
      margin: 0 auto;
    }

.pic > figure > picture > img {
        max-width: initial;
        width: 100%;
      }

.pic > figure > figcaption {
      position: relative;
      color: #4D4A4A;
      font-size: 14px;
      padding: 0 16px 5px 0;
      letter-spacing: 0.5px;
      max-width: var(--pic-width, 100%);
      margin: 12px auto 0;
      width: 100%;
      line-height: 1.5;
    }

.pic > figure > figcaption:after {
        content: '';
        display: block;
        margin: 5px 0 0;
        width: 75px;
        height: 2px;
        background: var(--main-color);
      }

.related {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 576px) {
  .related {
    flex-wrap: wrap;
  }
}

.related-title {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 24px;
    color: var(--main-color);
    font-weight: bold;
    line-height: 1.35;
  }

@media screen and (max-width: 576px) {
  .related-title {
      font-size: 18px;
  }
}

.related-title:before {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background: var(--main-color);
      margin: 0 0 11px;
    }

.related-links {
    flex: 1 1 auto;
    padding: 0 0 0 60px;
    list-style: disc;
  }

@media screen and (max-width: 576px) {
  .related-links {
      padding: 0 0 0 20px;
  }
}

.related-item {
    position: relative;
    font-size: 16px;
    color: #646464;
    line-height: 1.4;
  }

.related-item:after {
      content: '';
      position: absolute;
      left: -20px;
      bottom: 0px;
      width: calc(100% + 20px);
      height: 1px;
      background: #646464;
    }

.related-item:hover {
      color: #915499;
    }

.related-item > a {
      display: block;
      padding: 15px 0;
      color: #646464;
    }

.related-item > a:hover {
        color: #915499;
      }

.youtube {
  margin: 40px 0;
}

.youtube-des {
    color: #4D4A4A;
    font-size: 14px;
    margin: 14px 0 0;
  }

@media print {
  header,
  .article-side,
  footer,
  .gdpr {
    display: none;
  }
  .article-content {
    width: 100%;
  }
  img {
    max-width: 100%;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
}

@page {
  size: A4 portrait;
}