:root {
  --serif-ja: "Noto Serif JP", serif;
  --serif-en: "Helvetica", "Arial", sans-serif;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dark-red: #b0272d;
}

/** =========================================
  * 共通コンポーネント
  * ========================================= */
/* 茶色背景見出し */
.subtitle-centered {
  font-feature-settings: "palt" 1;
  line-height: 1.2;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  padding: 0.25em 0;
  color: var(--color-white);
  background-color: #be9772;
  br.spbr {
    display: none;
  }
  @media screen and (max-width: 1050px) {
    font-size: 24px;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    padding: 0.5em 0;
    br.spbr {
      display: block;
    }
  }
  @media screen and (max-width: 768px) {
    font-size: 20px;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.4em 0;
  }
}

/* 黒色背景矢印アイコン付きボタン */
.btn-more-centered {
  font-feature-settings: "palt" 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
  font-size: inherit;
  line-height: 1;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  padding: 0.3em 2em 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  color: var(--color-white);
  background-color: #1b1b1b;
  @media (max-width: 1050px) {
    font-size: 17px;
    padding: 0.3em 2.5em;
  }
  @media (max-width: 768px) {
    font-size: 16px;
    padding: 0.25em 2.5em;
  }
  &::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    aspect-ratio: 1;
    margin-left: 6px;
    background: url("../images/common/ico_more_red.svg") no-repeat center / contain;
    position: absolute;
    top: 50%;
    right: 0.3em;
    transform: translateY(-50%);
  }
}

/** =========================================
  * 二級建築士通信講座一覧ページ
  * ========================================= */
.course-header {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 150px auto 30px;
  @media (max-width: 768px) {
    padding: 0 2rem;
    margin: 120px auto 20px;
  }
}

.course-intro {
  font-feature-settings: "palt" 1;
  margin-top: 60px;
  margin-bottom: 60px;
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    > p {
      font-size: 16px;
      line-height: 1.9;
      text-align: justify;
      letter-spacing: 0.06em;
    }
  }
  @media (max-width: 768px) {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.course-select {
  font-feature-settings: "palt" 1;
  padding: 60px 0;
  background-color: #e8e8e8;
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .flex {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    > * {
      flex: 1;
    }
    @media (max-width: 768px) {
      max-width: 600px;
      flex-direction: column;
      margin: 0 auto;
      > * {
        width: 100%;
        & + * {
          margin-top: 25px;
        }
      }
    }
  }
  h2 {
    width: 100%;
    position: relative;
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.06em;
    padding: 0.35em 0;
    border: 2px solid var(--color-black);
    color: var(--color-black);
    background-color: var(--color-white);
    &::after {
      content: "";
      display: block;
      width: 13px;
      height: 12px;
      aspect-ratio: 13 / 12;
      background: url("../images/common/parts_card_heading_arrow.png") no-repeat center / contain;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    > span {
      display: inline-block;
      color: var(--color-dark-red);
    }
    @media (max-width: 768px) {
      font-size: 20px;
    }
  }
  .list {
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-top: 50px;
    > * {
      flex: 1;
      max-width: 280px;
    }
    @media (max-width: 768px) {
      gap: 10px;
      margin-top: 25px;
      > * {
        max-width: 168px;
      }
    }
  }
}

.course-select .list a {
  display: block;
  position: relative;
}
.course-select .list a .c_fukidashi {
  position: absolute;
  top: -41px;
  right: -101px;
  z-index: 2;
}
@media (max-width: 768px) {
  .course-select .list {
    margin-top: 80px;
  }
  .course-select .list a .c_fukidashi {
    top: -53px;
    left: 50%;
    right: auto;
    margin-left: -68px;
  }
}

.card-course {
  font-feature-settings: "palt" 1;
  position: relative;
  background-color: var(--color-white);
  padding: 20px 0;
  border-radius: 15px;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.15);
  h3 {
    position: relative;
    display: table;
    font-family: var(--serif-ja);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    border-radius: 20px;
    padding: 0.35em 1.2em;
    margin: 0 auto;
    color: var(--color-white);
    background-color: #000;
    @media (max-width: 1050px) {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
  p {
    font-feature-settings: "palt" 1;
    font-family: var(--serif-ja);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    margin-top: 0.2em;
    > strong {
      display: block;
      font-size: 50px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
    }
    @media (max-width: 1050px) {
      font-size: 24px;
      > strong {
        font-size: 38px;
      }
    }
    @media (max-width: 768px) {
      font-size: 18px;
      > strong {
        font-size: 30px;
      }
    }
  }

  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--color-dark-red);
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
    @media (max-width: 768px) {
      width: 15px;
      height: 15px;
    }
  }
  &::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent var(--color-white);
    position: absolute;
    bottom: 9px;
    right: 8px;
    z-index: 2;
    @media (max-width: 768px) {
      border-width: 4px 0 4px 7px;
      bottom: 7px;
      right: 7px;
    }
  }
}

.voice {
  font-feature-settings: "palt" 1;
  padding: 80px 0;
  @media (max-width: 768px) {
    padding: 60px 0 0;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    width: 100%;
    display: block;
    margin: 0 auto;
    @media (max-width: 768px) {
      max-width: 400px;
    }
  }
  h3 {
    position: relative;
    display: table;
    max-width: fit-content;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin: 3.4rem auto 0;
    color: var(--color-dark-red);
    @media (max-width: 1050px) {
      font-size: 30px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
      margin: 20px auto 0;
    }
    &::before {
      content: "";
      display: block;
      width: 50px;
      height: 4px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: 50%;
      right: calc(100% - 20px);
      transform: translateX(-50%) rotate(70deg);
      transform-origin: center center;
      @media (max-width: 768px) {
        height: 2px;
      }
    }
    &::after {
      content: "";
      display: block;
      width: 50px;
      height: 4px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: 50%;
      left: calc(100% + 20px);
      transform: translateX(-50%) rotate(-70deg);
      transform-origin: center center;
      @media (max-width: 768px) {
        height: 2px;
      }
    }
    > span {
      display: inline-block;
      @media (max-width: 1050px) {
        display: block;
        font-size: 20px;
        margin-bottom: 0.2em;
      }
      @media (max-width: 768px) {
        font-size: 16px;
      }
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 60px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
    @media (max-width: 1050px) {
      gap: 50px 40px;
      margin-top: 35px;
    }
    @media (max-width: 768px) {
      gap: 40px 25px;
      margin-top: 25px;
    }

    > * {
      flex: 33.3333%;
      max-width: 280px;
      @media (max-width: 1050px) {
        flex: calc(50% - 25px);
      }
      @media (max-width: 768px) {
        flex: calc(50% - 50px);
      }
    }

    figure {
      img {
        width: 100%;
        border-radius: 10px;
        border: 2px solid #646464;
      }
      .name {
        font-size: 21px;
        line-height: 1.4;
        font-weight: 400;
        text-align: center;
        margin-top: 10px;
        @media (max-width: 768px) {
          font-size: 18px;
        }
      }
      .more {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 500;
        text-align: center;
        margin-top: 10px;
        color: #646464;
        &::after {
          content: "";
          display: block;
          width: 16px;
          height: 16px;
          margin-left: 6px;
          background: url("../images/common/ico_more_gray.svg") no-repeat center / contain;
        }
      }
    }
  }
  .button {
    margin-top: 60px;
  }
}

.certification {
  font-feature-settings: "palt" 1;
  padding: 80px 0;
  background-color: var(--color-white);
  @media (max-width: 768px) {
    padding: 60px 0;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    width: 100%;
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    text-align: center;
    margin: 0 auto;
    @media (max-width: 768px) {
      max-width: 400px;
    }
  }
  .thumb {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 25px auto 0;
    border: 2px solid var(--color-black);
    img {
      width: 100%;
      height: auto;
    }
    @media (max-width: 768px) {
      margin: 15px auto 0;
    }
  }
  .button {
    margin-top: 60px;
    @media (max-width: 768px) {
      margin-top: 30px;
    }
  }
}

/** =========================================
  * style.css のFAQセクションをオーバーライド
  * ========================================= */
.faq {
  &.bg-lightgray {
    background-color: #e8e8e8;
    .ttl02 {
      position: static;
    }
    ul.flex3 {
      margin-top: 60px;
    }
    .btn01 {
      font-size: 16px;
      margin-top: 60px;
    }
  }
}

.drafting-header {
  font-feature-settings: "palt" 1;
  margin: 165px auto 30px;
  @media (max-width: 768px) {
    margin: 120px auto 20px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    text-align: center;
  }
  .lead {
    display: flex;
    justify-content: center;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.06em;
    span {
      color: var(--color-dark-red);
    }
    .mess_campaign {
      margin-left: 10px;
      padding: 1px 3px 5px;
      background-color: #b0272d;
      font-size: 36px;
      line-height: 1.2;
      font-weight: 700;
      color: #fff;
      @media (max-width: 768px) {
        margin-left: 0;
        margin-top: 10px;
        font-size: 22px;
      }
    }
    @media (max-width: 1050px) {
      display: block;
    }
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  h2 {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    padding: 0.75em 0;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    color: var(--color-white);
    background-color: #081266;
    > strong {
      display: block;
      font-size: 54px;
      font-weight: 900;
      margin-top: 0.25em;
    }
    @media (max-width: 1050px) {
      font-size: 24px;
      padding: 0.5em 0;
      margin-top: 20px;
      border-radius: 15px;
      > strong {
        font-size: 40px;
      }
    }
    @media (max-width: 768px) {
      font-size: 18px;
      margin-top: 15px;
      > strong {
        font-size: 30px;
      }
    }
  }
  .price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
    font-feature-settings: "palt";
    font-family: var(--serif-ja);
    font-size: 90px;
    font-weight: 700;
    margin-top: 0.3em;
    color: var(--color-dark-red);
    span {
      color: var(--color-black);
      &.prefix {
        display: block;
        font-size: 28px;
        margin-bottom: 0.2em;
      }
      &.suffix {
        display: inline-flex;
        flex-direction: column-reverse;
        font-size: 50px;
        margin-bottom: 0.2em;
        i {
          font-style: normal;
          font-size: 16px;
          margin: 0 auto;
          color: #5f5f5f;
        }
      }
    }
    @media (max-width: 1050px) {
      font-size: 72px;
      margin-top: 0.1em;
      span {
        &.prefix {
          font-size: 20px;
        }
        &.suffix {
          font-size: 40px;
          i {
            font-size: 14px;
          }
        }
      }
    }
    @media (max-width: 768px) {
      font-size: 54px;
      span {
        &.prefix {
          font-size: 14px;
        }
        &.suffix {
          font-size: 30px;
          i {
            font-size: 11px;
          }
        }
      }
    }
  }
}

.campaign-banner {
  font-feature-settings: "palt" 1;
  margin-top: 40px;
  @media (max-width: 768px) {
    margin-top: 20px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .card {
    max-width: 700px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    margin: 0 auto;
    border: 2px solid var(--color-dark-red);
    .label {
      font-size: 27px;
      text-align: center;
      padding: 0.45em 0;
      background-color: var(--color-dark-red);
      color: var(--color-white);
      @media (max-width: 1050px) {
        font-size: 22px;
      }
      @media (max-width: 768px) {
        font-size: 18px;
      }
    }
    .card-content {
      font-feature-settings: "palt" 1;
      padding: 22px 26px 30px;
      @media (max-width: 1050px) {
        padding: 18px 22px 25px;
      }
      @media (max-width: 768px) {
        padding: 15px 20px 20px;
      }
    }
    .title {
      font-size: 36px;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      color: var(--color-black);
      background-color: var(--color-white);
      span {
        color: var(--color-dark-red);
      }
      @media (max-width: 1050px) {
        font-size: 30px;
      }
      @media (max-width: 768px) {
        font-size: 24px;
      }
    }
    dl {
      margin-top: 12px;
      dt {
        width: 100%;
        position: relative;
        z-index: 1;
        font-size: 27px;
        line-height: 1;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.04em;
        text-indent: 0.04em;
        margin: 0 auto;
        color: var(--color-dark-red);
        span {
          padding: 0 10px;
          background-color: var(--color-white);
        }
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 3px;
          background-color: var(--color-dark-red);
          position: absolute;
          top: calc(50% - 1.5px);
          left: 0;
          z-index: -1;
        }
        @media (max-width: 1050px) {
          font-size: 22px;
        }
        @media (max-width: 768px) {
          font-size: 18px;
        }
      }
      dd {
        line-height: 1;
        font-size: 81px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0;
        color: var(--color-dark-red);
        strong {
          font-family: var(--serif-en);
        }
        .suffix {
          font-size: 40px;
          margin-left: 0.1em;
          i {
            font-size: 30px;
            font-style: normal;
          }
        }
        @media (max-width: 1050px) {
          font-size: 64px;
          .suffix {
            font-size: 32px;
            i {
              font-size: 24px;
            }
          }
        }
        @media (max-width: 768px) {
          font-size: 54px;
          .suffix {
            font-size: 24px;
            i {
              font-size: 22px;
            }
          }
        }
      }
    }
    .price {
      font-size: 31px;
      font-weight: 700;
      margin-top: 0.6em;
      color: #4d4d4d;
      strong {
        font-family: var(--serif-en);
        font-size: 35px;
        color: var(--color-dark-red);
      }
      i {
        font-size: 16px;
        font-style: normal;
      }
      @media (max-width: 1050px) {
        font-size: 24px;
        strong {
          font-size: 28px;
        }
        i {
          font-size: 14px;
        }
      }
      @media (max-width: 768px) {
        font-size: 21px;
        strong {
          font-size: 24px;
        }
        i {
          font-size: 12px;
        }
      }
    }
    .schedule {
      font-size: 27px;
      line-height: 1.2;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      margin-top: 1.3em;
      color: var(--color-dark-red);
      @media (max-width: 1050px) {
        font-size: 20px;
      }
      @media (max-width: 768px) {
        font-size: 16px;
      }
    }
    .button {
      display: inline-block;
      font-size: 22px;
      padding: 0.3em 5em;
      margin-top: 25px;
      border-radius: 35px;
      color: var(--color-white);
      background-color: #1b1b1b;
      @media (max-width: 1050px) {
        margin-top: 22px;
      }
      @media (max-width: 768px) {
        margin-top: 20px;
        padding: 0.3em 3em;
        font-size: 18px;
      }
    }
  }
}

.reccomend {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 80px;
  background-color: #e6e7f0;
  &.bg-light-red { /* 宅建士講座ページで使用 */
    background-color: #f7e9ea;
  }
  @media (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    @media (max-width: 1050px) {
      max-width: 600px;
    }
  }
  h2 {
    line-height: 1;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    color: #1b1b1b;
    @media (max-width: 1050px) {
      font-size: 30px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
    }
    span {
      color: var(--color-dark-red);
    }
  }
  ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2.5%;
    margin-top: 40px;
    @media (max-width: 1050px) {
      flex-direction: column;
      gap: 30px;
      margin-top: 35px;
    }
    @media (max-width: 768px) {
      gap: 15px;
      margin-top: 30px;
    }
    li {
      flex: 1;
      line-height: 1.5;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-indent: 0.02em;
      text-align: center;
      padding: 1em 0;
      border-radius: 20px;
      background-color: var(--color-white);
      box-shadow: 0 5px 3px rgba(0, 0, 0, 0.15);
      span {
        display: inline;
        color: var(--color-dark-red);
      }
      @media (max-width: 1050px) {
        font-size: 22px;
        padding: 0.8em 0;
      }
      @media (max-width: 768px) {
        font-size: 18px;
        padding: 0.6em 0;
        border-radius: 7px;
        br.pcbr {
          display: none;
        }
      }
    }
  }
}

.correction {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    max-width: fit-content;
    display: flex;
    line-height: 1.2;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.45em 1em;
    margin: 0 auto 80px;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    @media (max-width: 1050px) {
      font-size: 30px;
      margin-bottom: 60px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
      margin-bottom: 40px;
    }
  }
  h3 {
    position: relative;
    line-height: 1.2;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.45em 0;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    br {
      display: none;
    }
    &::after {
      content: "";
      display: block;
      width: 27px;
      height: 32px;
      aspect-ratio: 13 / 32;
      background: url("../images/common/parts_correction_heading_arrow.svg") no-repeat center / contain;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    @media (max-width: 1050px) {
      font-size: 30px;
      padding: 0.6em 0.8em;
    }
    @media (max-width: 768px) {
      font-size: 20px;
      padding: 1.3em 0;
      br {
        display: block;
      }
    }
  }
  p {
    line-height: 2;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin-top: 50px;
    @media (max-width: 768px) {
      line-height: 1.875;
      font-size: 16px;
      margin-top: 30px;
    }
  }
}

.youtube {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  &.secondary {
    background-color: #e6e7f0;
    p.subtitle {
      width: 100%;
      max-width: 700px;
      display: table;
      position: relative;
      z-index: 1;
      line-height: 1;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      margin: 0 auto;
      span {
        padding: 0 10px;
        background-color: #e6e7f0;
      }
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-black);
        position: absolute;
        top: calc(50% - 1.5px);
        left: 0;
        z-index: -1;
      } 
    }
    h2 {
      @media (max-width: 1050px) {
        margin-top: 0.2em;
      }
      strong {
        display: inline-block;
        line-height: 1;
        aspect-ratio: 1 / 1;
        font-family: var(--serif-ja);
        font-size: 41px;
        padding: 0.12em;
        margin: 0 0.1em;
        color: var(--color-dark-red);
        border-radius: 100%;
        border: 5px solid var(--color-dark-red);
        background-color: var(--color-white);
        transform: rotate(-10deg);
        @media (max-width: 1050px) {
          font-size: 35px;
        }
        @media (max-width: 768px) {
          font-size:  30px;
        }
      }
    }
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    line-height: 1;
    font-feature-settings: "palt" 1;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    color: var(--color-black);
    span {
      color: var(--color-dark-red);
    }
    br {
      display: none;
    }
    @media (max-width: 1050px) {
      font-size: 30px;
      br {
        display: block;
      }
    }
    @media (max-width: 768px) {
      line-height: 1.4;
      font-size: 24px;
    }
  }
  .video-wrapper {
    width: 100%;
    max-width: 700px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    @media (max-width: 768px) {
      margin-top: 15px;
    }
  }
}

.examination {
  font-feature-settings: "palt" 1;
  padding-top: 0;
  padding-bottom: 80px;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-bottom: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    width: 100%;
    max-width: 800px;
    line-height: 1.2;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.2em 0;
    margin: 0 auto;
    color: var(--color-dark-red);
    border: 2px solid var(--color-dark-red);
    border-left-width: 5px;
    @media (max-width: 1050px) {
      font-size: 30px;
      text-align: left;
      padding: 0.6em 0.8em;
    }
    @media (max-width: 768px) {
      font-size: 20px;
    }
  }
  ul {
    width: calc(100% - 16px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 46px;
    margin-top: 80px;
    li {
      flex: 1;
    }
    @media (max-width: 1050px) {
      width: 100%;
      flex-direction: column;
      gap: 30px;
      margin-top: 50px;
    }
    @media (max-width: 768px) {
      gap: 20px;
      margin-top: 30px;
    }
  }
  figure {
    display: flex;
    flex-direction: column-reverse;
    img {
      border: 1px solid var(--color-black);
      box-shadow: 16px 16px 0 #e6e7f0;
    }
    figcaption {
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      color: #081266;
      transform: translateX(-5px);
      &::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 1px;
        background-color: #081266;
        transform: translate(-7px, 4px) rotate(70deg);
        transform-origin: bottom right;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 1px;
        background-color: #081266;
        transform: translate(7px, 4px) rotate(-70deg);
        transform-origin: left bottom;
      }
    }
  }
  .explanation {
    margin-top: 25px;
    dl {
      dt {
        line-height: 1.2;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.04em;
        text-indent: 0.04em;
        color: #081266;
        @media (max-width: 1050px) {
          letter-spacing: 0.02em;
          text-indent: 0;
          text-align: left;
        }
      }
      dd {
        margin-top: 2px;
        line-height: 1.5;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
        text-indent: 0.06em;
        color: var(--color-black);
        @media (max-width: 1050px) {
          letter-spacing: 0.04em;
          text-indent: 0;
          text-align: left;
          br {
            display: none;
          }
        }
      }
    }
    p {
      line-height: 1.9;
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      padding-top: 10px;
      margin-top: 10px;
      border-top: 2px solid var(--color-black);
    }
  }
}

.veteran {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media screen and (max-width: 1050px) {
    padding-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .image-main {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 40px auto 0;
    @media screen and (max-width: 1050px) {
      margin: 30px auto 0;
    }
    @media screen and (max-width: 768px) {
      margin: 20px auto 0;
    }
  }
  p {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    margin-top: 22px;
    @media screen and (max-width: 1050px) {
      margin-top: 15px;
      text-align: justify;
    }
  }
}

.materials {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media screen and (max-width: 1050px) {
    padding-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .content {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 40px;
    > * {
      flex: 1;
      max-width: 336px;
    }
    @media screen and (max-width: 1050px) {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      max-width: 336px;
      margin: 30px auto 0;
      > * {
        max-width: 100%;
      }
    }
  }
  .thumb {
    img {
      width: 100%;
      border: 1px solid #4d4d4d;
    }
  }
  .list {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding-left: 12px;
    border-left: 2px solid var(--color-black);
    li {
      list-style: none;
    }
  }
}

.support {
  font-feature-settings: "palt" 1;
  padding-top: 70px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media screen and (max-width: 1050px) {
    padding-top: 50px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    width: 100%;
    max-width: 700px;
    display: table;
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin: 0 auto;
    span {
      display: inline-block;
      padding: 0 10px;
      color: var(--color-dark-red);
      background-color: var(--color-white);
    }
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: calc(50% - 1.5px);
      left: 0;
      z-index: -1;
    } 
  }
  p {
    max-width: 700px;
    line-height: 1;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding-bottom: 20px;
    margin: 0 auto;
    border-bottom: 2px solid var(--color-dark-red);
    @media screen and (max-width: 1050px) {
      font-size: 24px;
      padding-bottom: 15px;
    }
  }
}

.sales {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media screen and (max-width: 1050px) {
    padding-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    @media screen and (max-width: 1050px) {
      margin-top: 30px;
    }
    .text {
      margin-top: 1.6em;
      @media screen and (max-width: 1050px) {
        margin-top: 1em;
      }
    }
    h3 {
      line-height: 1.5;
      font-size: 21px;
      @media screen and (max-width: 1050px) {
        font-size: 18px;
      }
    }
    p {
      line-height: 1;
      font-size: 16px;
      font-weight: 400;
      margin-top: 1.8em;
      &.price {
        font-size: 18px;
        margin-top: 0.8em;
      }
    }
    .button {
      margin-top: 40px;
      @media screen and (max-width: 1050px) {
        margin-top: 30px;
      }
    }
  }
}

.entry-card {
  font-feature-settings: "palt" 1;
  padding: 80px 0 0;
  @media screen and (max-width: 1050px) {
    padding: 60px 0 0;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .card {
    display: block;
    width: 100%;
    max-width: 585px;
    margin: 0 auto;
    border: 1px solid var(--color-black);
    border-radius: 5px;
    overflow: hidden;
    h3 {
      line-height: 1.3;
      font-family: var(--serif-ja);
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      padding: 7px 0;
      color: #1b1b1b;
      span {
        display: block;
        font-size: 30px;
      }
    }
    p {
      line-height: 1.2;
      font-family: var(--serif-ja);
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.02em;
      text-indent: 0.02em;
      padding: 6px 0;
      color: var(--color-white);
      background-color: var(--color-dark-red);
      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        margin-left: 5px;
        background: url(../images/common/ico_more_red.svg) no-repeat center / contain;
      }
    }
  }
}

.banner-list {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--color-white);
  @media screen and (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  ul {
    display: flex;
    gap: 30px;
    justify-content: center;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 30px;
    }
    li {
      flex: 1;
      max-width: 585px;
      img {
        width: 100%;
      }
      @media screen and (max-width: 768px) {
        max-width: none;
      }
    }
  }
}

/** =========================================
  * 二級建築士 学科+製図
  * ========================================= */
.academic-course {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2 {
    max-width: fit-content;
    display: flex;
    line-height: 1.2;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.45em 1em;
    margin: 0 auto 80px;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    @media (max-width: 1050px) {
      font-size: 30px;
      margin-bottom: 60px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
      margin-bottom: 40px;
    }
  }
  .columns {
    > * + * {
      margin-top: 80px;
    }
    @media (max-width: 768px) {
      > * + * {
        margin-top: 60px;
      }
    }
  }
  .content {
    display: flex;
    gap: 0;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    @media (max-width: 1050px) {
      flex-direction: column;
      align-items: stretch;
      margin-top: 30px;
    }
    figure {
      flex: 58.3333%;
      img {
        width: 100%;
        border: 1px solid #4d4d4d;
      }
      @media (max-width: 1050px) {
        flex: auto;
      }
    }
    .text {
      flex: 41.6667%;
      @media (max-width: 1050px) {
        flex: auto;
        margin-top: 20px;
      }
      > p {
        line-height: 1.6;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
        text-indent: 0.06em;
        @media (max-width: 1050px) {
          font-size: 22px;
          letter-spacing: 0.04em;
          text-indent: 0.04em;
        }
        @media (max-width: 768px) {
          font-size: 20px;
          letter-spacing: 0.02em;
          text-indent: 0.02em;
        }
        span {
          display: block;
          line-height: 1.8;
          font-size: 16px;
          font-weight: 400;
          margin-top: 0.5em;
        }
        strong {
          color: var(--color-dark-red);
          font-weight: 700;
        }
        &:first-child {
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 20px 30.5px 0 30.5px;
            border-color: #081266 transparent transparent transparent;
            margin: 30px auto;
          }
        }
      }
    }
    .card {
      flex: 41.6667%;
      max-width: 440px;
      border: 4px solid #081266;
      border-radius: 10px;
      padding: 40px 0;
      margin-left: 60px;
      &.border-red { /* 宅建士講座ページで使用 */
        border-color: var(--color-dark-red);
      }
      @media (max-width: 1050px) {
        flex: auto;
        max-width: none;
        padding: 20px 0;
        margin-left: 0;
        margin-top: 30px;
      }
      > p {
        line-height: 1.6;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
        text-indent: 0.06em;
        color: var(---color-black);
        strong {
          display: block;
          line-height: 1.8;
          font-size: 16px;
          font-weight: 400;
          margin-top: 2em;
          color: var(--color-dark-red);
        }
        @media (max-width: 1050px) {
          font-size: 22px;
          strong {
            font-size: 14px;
            margin-top: 1em;
          }
        }
        @media (max-width: 768px) {
          font-size: 21px;
          strong {
            font-size: 14px;
            margin-top: 0.5em;
          }
        }
      }
    }
  }
}

.assignments {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #e6e7f0;
  @media (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  h2{
    line-height: 1.2;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    color: var(--color-black);
    span {
      color: var(--color-dark-red);
    }
    @media (max-width: 1050px) {
      font-size: 26px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
    }
    span {
      color: var(--color-dark-red);
    }
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    @media (max-width: 1050px) {
      gap: 10px;
      margin-top: 15px;
    }
    li {
      max-width: 160px;
      line-height: 1;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.5em;
      white-space: nowrap;
      padding: 0.6em 1em;
      border-radius: 10px;
      color: var(--color-white);
      background-color: #081266;
      @media (max-width: 1050px) {
        font-size: 30px;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
        padding: 0.4em 0.3em;
      }
      @media (max-width: 768px) {
        font-size: 24px;
      }
    }
  }
  .text-wrapper-1 {
    > p {
      line-height: 1.8;
      font-feature-settings: "palt" 1;
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      margin-top: 15px;
      color: var(--color-black);
      @media (max-width: 1050px) {
        font-size: 26px;
      }
      @media (max-width: 768px) {
        font-size: 21px;
      }
      strong {
        font-weight: 700;
        color: var(--color-dark-red);
        @media (max-width: 1050px) {
        }
      }
      .icon-chevron-right {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        width: 0.9em;
        height: 0.9em;
        font-style: normal;
        border: 0.2em solid var(--color-dark-red);
        border-left: 0;
        border-bottom: 0;
        margin: 0 0.4em;
        transform: translateX(-75%) rotate(45deg);
        transform-origin: right bottom;
      }
      &:nth-child(2) {
        margin-top: 40px;
        &::after {
          content: "";
          display: block;
          width: 0px;
          height: 0px;
          border-style: solid;
          border-width: 20px 59.5px 0 59.5px;
          border-color: #081266 transparent transparent transparent;
          margin: 20px auto;
        }
        @media (max-width: 1050px) {
          margin-top: 20px;
          &::after {
            border-width: 20px 30px 0 30px;
          }
        }
      }
      &:nth-child(3) {
        margin-top: 0;
      }
    }
  }
  .text-wrapper-2 {
    max-width: 700px;
    margin: 50px auto 0;
    @media (max-width: 1050px) {
      margin: 30px auto 0;
    }
    > p {
      line-height: 1.5;
      font-feature-settings: "palt" 1;
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      padding: 0.5em 1em;
      border-radius: 10px;
      border: 4px solid var(--color-dark-red);
      color: var(--color-dark-red);
      background-color: var(--color-white);
      @media (max-width: 1050px) {
        font-size: 26px;
      }
      @media (max-width: 768px) {
        font-size: 21px;
      }
    }
  }
  h3 {
    line-height: 1.2;
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin-top: 40px;
    color: var(--color-black);
    @media (max-width: 768px) {
      font-size: 20px;
    }
  }
  .video-wrapper {
    width: 100%;
    max-width: 700px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.flow {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-top: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    margin-top: 40px;
    > * + * {
      margin-top: 60px;
    }
    @media (max-width: 1050px) {
      margin-top: 30px;
      > * + * {
        margin-top: 30px;
      }
    }
  }

  .flow-list {
    .thumb {
      display: block;
      width: 100%;
      img {
        width: 100%;
        display: inline-block;
        border: 1px solid #4d4d4d;
      }
    }
    ul {
      display: flex;
      gap: 20px;
      justify-content: center;
      @media (max-width: 1050px) {
        flex-direction: column;
        gap: 30px;
      }
      li {
        flex: 1;
        position: relative;
        @media (max-width: 1050px) {
          display: flex;
          flex-direction: column-reverse;
        }
      }
    }
    h3 {
      line-height: 1.45;
      font-feature-settings: "palt" 1;
      font-size: 23px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      white-space: nowrap;
      margin: 0.5em auto 0;
      @media (max-width: 1050px) {
        font-size: 21px;
        text-align: left;
        margin: 0 0 0.5em 40px;
      }
      @media (max-width: 768px) {
        margin: 0 0 0.5em 30px;
      }
      .number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: 27px;
        font-weight: 700;
        width: 36px;
        height: 36px;
        aspect-ratio: 1;
        color: var(--color-white);
        background-color: #081266;
        position: absolute;
        top: 0;
        left: 0;
        &.bg-red { /* 宅建士講座ページで使用 */
          background-color: var(--color-dark-red);
        }
        @media (max-width: 1050px) {
          font-size: 24px;
          width: 30px;
          height: 30px;
          top: 5px;
        }
        @media (max-width: 768px) {
          font-size: 20px;
          width: 24px;
          height: 24px;
        }
      }
    }
    p {
      line-height: 1.875;
      font-feature-settings: "palt" 1;
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      margin-top: 0.5em;
      @media (max-width: 1050px) {
        margin-top: 0;
        margin-bottom: 1em;
      }
    }

  }

  .benefits-list,.flow-list {
    .thumb {
      display: block;
      width: 100%;
      &:has(figcaption) {
        margin-top: 35px;
      }
      img {
        width: 100%;
        height: 179px;
        display: inline-block;
        border: 1px solid #4d4d4d;
      }
    }
    figure {
      position: relative;
      figcaption {
        width: calc(100% - 20px);
        height: 75px;
        position: absolute;
        top: -1.4em;
        left: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-align: center;
        white-space: nowrap;
        color: #081266;
        border: 3px solid #081266;
        background-color: var(--color-white);
        transform: translateX(-50%);
        &.color-red { /* 宅建士講座ページで使用 */
          color: var(--color-dark-red);
          border-color: var(--color-dark-red);
        }
        @media (max-width: 1050px) {
          height: auto;
          padding: 0.4em 0.8em;
          br {
            display: none;
          }
        }
      } 
    }
    ul {
      display: flex;
      gap: 20px;
      justify-content: center;
      @media (max-width: 1050px) {
        flex-direction: column;
        gap: 30px;
      }
      li {
        flex: 1;
        position: relative;
      }
    }
    h3 {
      line-height: 1.45;
      font-feature-settings: "palt" 1;
      font-size: 23px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      white-space: nowrap;
      margin: 0.5em auto 0;
      @media (max-width: 1050px) {
        font-size: 21px;
        text-align: left;
        margin: 0 0 0.5em 40px;
      }
      @media (max-width: 768px) {
        margin: 0 0 0.5em 30px;
      }
    }
    p {
      line-height: 1.875;
      font-feature-settings: "palt" 1;
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      margin-top: 0.5em;
    }
    .button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: fit-content;
      font-size: 16px;
      line-height: 1;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      padding: 0.3em 1.5em;
      margin: 30px auto 0;
      border-radius: 20px;
      color: var(--color-white);
      background-color: #1b1b1b;
      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        margin-left: 5px;
        background: url("../images/common/ico_more_red.svg") no-repeat center / contain;
        position: absolute;
        top: 50%;
        right: 0.3em;
        transform: translateY(-50%);
      }
    }
    .note {
      > p {
        line-height: 1.5;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.04em;
        padding: 15px 0;
        margin-top: 15px;
        border: 2px solid var(--color-dark-red);
        color: var(--color-black);
        span {
          color: var(--color-dark-red);
        }
      }
    }
  }
}

/** =========================================
  * 二級建築士 学科
  * ========================================= */
.department-detail {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 0;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding-top: 60px;
  }
  @media (max-width: 768px) {
    padding-top: 30px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    @media (max-width: 1050px) {
      max-width: 600px;
    }
  }
  h2 {
    max-width: fit-content;
    display: flex;
    line-height: 1.2;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin: 0 auto;
    margin-bottom: 40px;
    color: var(--color-black);
    @media (max-width: 1050px) {
      font-size: 30px;
      margin-bottom: 30px;
    }
    @media (max-width: 768px) {
      font-size: 24px;
      margin-bottom: 20px;
    }
  }
  ul {
    display: flex;
    gap: 22px;
    justify-content: center;
    align-items: stretch;
    @media (max-width: 1050px) {
      flex-direction: column;
      gap: 15px;
    }
    @media (max-width: 768px) {
      gap: 12px;
    }
    li {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 4px solid var(--color-dark-red);
      border-radius: 10px;
      padding: 20px 0;
      box-shadow: 0 5px 3px rgba(0, 0, 0, 0.15);
      @media (max-width: 1050px) {
        padding: 15px 0;
        border: 2px solid var(--color-dark-red);
      }
      @media (max-width: 768px) {
        padding: 10px 0;
      }
      > p {
        display: inline;
        line-height: 1.5;
        font-size: 21px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
        text-indent: 0.06em;
        margin: 0 auto;
        color: var(--color-black);
        span {
          color: var(--color-dark-red);
        }
        br.pcbr {
          display: block;
        }
        @media (max-width: 1050px) {
          font-size: 18px;
          br.pcbr {
            display: none;
          }
        }
      }
    }
  }
  dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    @media (max-width: 1050px) {
      margin-top: 30px;
    }
    @media (max-width: 768px) {
      margin-top: 20px;
    }
    > div {
      display: flex;
      align-items: center;
      dt, dd {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.06em;
        @media (max-width: 768px) {
          font-size: 16px;
        }
      }
    }
  }
  p {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-align: justify;
    margin: 30px auto 0;
    strong {
      font-size: 24px;
      font-weight: 700;
      color: var(--color-dark-red);
    }
    @media (max-width: 1050px) {
      margin-top: 20px;
      strong {
        font-size: 20px;
      }
    }
    @media (max-width: 768px) {
      font-size: 14px;
      margin: 10px auto 0;
      strong {
        font-size: 16px;
      }
    }
  }
  .button {
    margin-top: 30px;
  }
}

/** =========================================
  * 解答速報 共通
  * ========================================= */
.department-report-header,
.drafting-report-header,
.takuken-report-header {
  font-feature-settings: "palt" 1;
  margin: 165px auto 30px;
  @media (max-width: 768px) {
    margin: 120px auto 20px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    @media (max-width: 768px) {
      padding: 0 1.5rem;
    }
    .content {
      background: #fcee21 url("../images/common/bg_report_header.png") no-repeat right bottom / 260px auto;
      padding: 32px 40px;
      @media (max-width: 1050px) {
        background-size: 180px auto;
        padding: 20px 20px;
      }
      @media (max-width: 768px) {
        min-height: 150px;
        background-size: 120px auto;
        padding: 10px 10px;
      }
    }
  }
  .lead {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    span {
      color: var(--color-dark-red);
    }
    @media (max-width: 1050px) {
      font-size: 25px;
    }
    @media (max-width: 768px) {
      font-size: 14px;
    }
  }
  h2 {
    font-size: 70px;
    line-height: 1.285;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 5px;
    color: var(--color-black);
    span {
      display: block;
      &.spbr {
        display: inline;
      }
    }
    @media (max-width: 1050px) {
      font-size: 40px;
      margin-top: 15px;
      span {
        &.spbr {
          display: block;
        }
      }
    }
    @media (max-width: 768px) {
      line-height: 1.4;
      font-size: 24px;
      margin-top: 10px;
    }
  }
}

/** =========================================
  * 二級建築士設計 学科試験 解答速報
  * ========================================= */
.department-report {
  font-feature-settings: "palt" 1;
  padding-bottom: 80px;
  @media (max-width: 768px) {
    padding-top: 10px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    .content {
      margin-top: 0;
      & + & {
        margin-top: 80px;
        &:nth-child(2) {
          margin-top: 60px;
        }
        @media (max-width: 768px) {
          margin-top: 60px;
          &:nth-child(2) {
            margin-top: 30px;
          }
        }
      }
      > p {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 30px;
        strong {
          font-weight: 700;
          color: var(--color-dark-red);
        }
        &.centered {
          text-align: center;
          text-indent: 0.04em;
        }
        @media (max-width: 768px) {
          margin-top: 20px;
          &.centered {
            text-align: left;
          }
        }
      }
      > ul.list-bullets {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 30px;
        li {
          position: relative;
          padding-left: 1em;
          &::before {
            content: "●";
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        @media (max-width: 768px) {
          margin-top: 20px;
          &.centered {
            text-align: left;
          }
        }
      }
    }
  }
  .update-date {
    line-height: 1;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-dark-red);
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  .list-cards {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 60px;
    > * {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: auto;
    }
    @media (max-width: 1050px) {
      gap: 30px;
    }
    @media (max-width: 768px) {
      gap: 15px;
    }
  }
  .card {
    width: 100%;
    max-width: 570px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--serif-ja);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    align-items: center;
    letter-spacing: 0.08em;
    text-align: center;
    text-indent: 0.08em;
    padding: 45px 20px;
    border-radius: 15px;
    border: 1px solid #1b1b1b;
    margin-top: 37.5px;
    br {
      display: none;
    }
    &.icon-compass {
      &::before {
        background: url("../images/common/ico_compass.svg") no-repeat center / cover;
      }
    }
    &.icon-challenge {
      &::before {
        background: url("../images/common/ico_callenge.svg") no-repeat center / cover;
      }
    }
    &::before {
      content: "";
      display: block;
      width: 75px;
      height: 75px;
      position: absolute;
      top: -37.5px;
      left: 50%;
      transform: translateX(-50%);
    }
    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: url("../images/common/ico_more_red2.svg") no-repeat center / contain;
    }
    @media (max-width: 1050px) {
      line-height: 1.4;
      font-size: 24px;
      letter-spacing: 0;
      padding: 35px 0px 20px;
      br {
        display: block;
      }
    }
    @media (max-width: 768px) {
      font-size: 18px;
      padding: 30px 0 10px;
      &::after {
        width: 12px;
        height: 12px;
      }
    }
  }
  .comment {
    position: relative;
    display: table;
    line-height: 1;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    margin: 0 auto;
    color: var(--color-black);
    span {
      color: var(--color-dark-red);
    }
    &::before, &::after {
      content: "";
      display: block;
      width: 50px;
      height: 2px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: 50%;
    }
    &::before {
      right: 100%;
      transform: rotate(70deg) translateY(-50%);
      transform-origin: center;
    }
    &::after {
      left: 100%;
      transform-origin: center;
      transform: rotate(-70deg) translateY(-50%);
    }
    @media (max-width: 768px) {
      font-size: 21px;
      span {
        display: block;
        margin-top: 0.4em;
      }
      &::before {
        right: 95%;
      }
      &::after {
        left: 95%;
      }
    }
  }
  h3 {
    line-height: 1.2;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.4em 0;
    margin-top: 80px;
    color: var(--color-white);
    background-color: #999999;
    @media (max-width: 768px) {
      font-size: 21px;
      text-align: left;
      padding: 0.4em 0.4em;
      margin-top: 60px;
    }
  }
}

.table-department-wrapper {
  overflow-x: auto;
}

.table-department {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-top: 30px;
  @media (max-width: 1050px) {
    min-width: 850px;
  }

  caption {
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 1.5em;
  }

  thead {
    th {
      line-height: 1.2;
      font-size: 18px;
      font-weight: 500;
      vertical-align: middle;
      border: 1px solid #000000;
      padding: 0.6em 0;
      color: white;
      background-color: #be9772;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
  }

  tbody {
    th {
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      line-height: 1.2;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.2em;
      vertical-align: middle;
      padding: 0.5em 0;
      border: 1px solid #000000;
      background-color: #ffffff;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
    td {
      line-height: 1.2;
      font-size: 18px;
      font-weight: 500;
      vertical-align: middle;
      padding: 0.5em 0;
      border: 1px solid #000000;
      background-color: #ffffff;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
  }
}

/** =========================================
  * 二級建築士設計 製図試験 解答速報
  * ========================================= */
.drafting-report {
  font-feature-settings: "palt" 1;
  padding-bottom: 80px;
  @media (max-width: 768px) {
    padding-top: 10px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    .content {
      & + & {
        margin-top: 80px;
        &:nth-child(2) {
          margin-top: 60px;
        }
        @media (max-width: 768px) {
          margin-top: 60px;
            &:nth-child(2) {
            margin-top: 30px;
          }
        }
      }
      > p {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 40px;
        strong {
          font-weight: 700;
          color: var(--color-dark-red);
        }
        &.centered {
          text-align: center;
          text-indent: 0.04em;
        }
        @media (max-width: 768px) {
          margin-top: 20px;
        }
      }
      > ul.list-bullets {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 30px;
        li {
          position: relative;
          padding-left: 1em;
          &::before {
            content: "●";
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        @media (max-width: 768px) {
          margin-top: 20px;
          &.centered {
            text-align: left;
          }
        }
      }
    }
  }
  .update-date {
    line-height: 1;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-dark-red);
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  .video-wrapper {
    width: 100%;
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    & + & {
      margin-top: 40px;
    }
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    @media (max-width: 768px) {
      & + & {
        margin-top: 30px;
      }
    }
  }
  .list-archives {
    max-width: 960px;
    margin: 40px auto 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
    > * {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: auto;
    }
    @media (max-width: 1050px) {
      gap: 20px;
    }
    @media (max-width: 768px) {
      gap: 10px;
      margin-top: 30px;
    }
  }
  .card-archive {
    width: 100%;
    max-width: 570px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--serif-ja);
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
    align-items: center;
    letter-spacing: 0.08em;
    text-align: center;
    text-indent: 0.08em;
    padding: 25px 20px;
    border-radius: 15px;
    border: 2px solid #1b1b1b;
    span {
      display: block;
      font-size: 24px;
      margin-bottom: 0.4em;
    }
    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: url("../images/common/ico_more_red2.svg") no-repeat center / contain;
    }
    @media (max-width: 1050px) {
      line-height: 1.2;
      font-size: 24px;
      letter-spacing: 0;
      br {
        display: block;
      }
    }
    @media (max-width: 768px) {
      font-size: 21px;
      padding: 15px 0;
      span {
        font-size: 16px;
        margin-bottom: 0.2em;
      }
      &::after {
        width: 12px;
        height: 12px;
      }
    }
  }
  .list-cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 60px;
    margin: 0 auto;
    > * {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
    }
    @media (max-width: 1050px) {
      gap: 30px;
    }
    @media (max-width: 768px) {
      gap: 15px;
    }
  }
  .card-restart {
    width: 100%;
    max-width: 700px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--serif-ja);
    font-size: 28px;
    line-height: 1.5;
    font-weight: 900;
    align-items: center;
    letter-spacing: 0.08em;
    text-align: center;
    text-indent: 0.08em;
    padding: 45px 20px 20px;
    border-radius: 15px;
    border: 1px solid #1b1b1b;
    margin-top: 37.5px;
    &::before {
      content: "";
      display: block;
      width: 75px;
      height: 75px;
      position: absolute;
      top: -37.5px;
      left: 50%;
      transform: translateX(-50%);
      background: url("../images/common/ico_walk.svg") no-repeat center / cover;
    }
    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: url("../images/common/ico_more_red2.svg") no-repeat center / contain;
    }
    @media (max-width: 1050px) {
      line-height: 1.4;
      font-size: 24px;
      letter-spacing: 0;
      padding: 35px 0px 20px;
    }
    @media (max-width: 768px) {
      font-size: 18px;
      padding: 35px 0 10px;
      &::after {
        width: 12px;
        height: 12px;
      }
    }
  }
  .comment {
    position: relative;
    display: table;
    line-height: 1;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    margin: 0 auto;
    color: var(--color-black);
    span {
      color: var(--color-dark-red);
    }
    &::before, &::after {
      content: "";
      display: block;
      width: 50px;
      height: 2px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: 50%;
    }
    &::before {
      right: 100%;
      transform: rotate(70deg) translateY(-50%);
      transform-origin: center;
      
    }
    &::after {
      left: 100%;
      transform-origin: center;
      transform: rotate(-70deg) translateY(-50%);
    }
    @media (max-width: 768px) {
      font-size: 21px;
      span {
        display: block;
        margin-top: 0.4em;
      }
    }
  }
  h3 {
    line-height: 1.2;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.4em 0;
    margin-top: 60px;
    color: var(--color-white);
    background-color: #999999;
    @media (max-width: 768px) {
      font-size: 21px;
      text-align: left;
      padding: 0.4em 0.4em;
      margin-top: 60px;
    }
  }
}

.table-drafting-wrapper {
  overflow-x: auto;
  max-width: 700px;
  margin: 0 auto;
}

.table-drafting {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
  @media (max-width: 1050px) {
    min-width: 500px;
  }
  caption {
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 1.5em;
  }
  thead {
    th {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-indent: 0.2em;
      text-align: center;
      border: 1px solid #000000;
      border-bottom-width: 2px;
      padding: 0.3em 1em;
      vertical-align: middle;
      background-color: #ffffff;
      @media (max-width: 1050px) {
        font-size: 16px;
        padding: 0.3em 0;
      }
    }
  }
  tbody {
    th, td {
      line-height: 1.2;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0;
      border: 1px solid #000000;
      padding: 0.55em 1em;
      vertical-align: middle;
      background-color: #ffffff;
      @media (max-width: 1050px) {
        font-size: 14px;
        padding: 0.55em 0.5em;
      }
    }
    th {
      text-align: center;
    }
    td {
      p {
        &.type-rc {
          font-weight: 700;
          text-align: center;
          color: #3fa9f5;
        }
        &.type-wood {
          font-weight: 700;
          text-align: center;
          color: #603813;
        }
      }
    }
  }
}

/** =========================================
  * 宅建士講座
  * ========================================= */
.takuken-header {
  font-feature-settings: "palt" 1;
  margin: 165px auto 30px;
  @media (max-width: 768px) {
    margin: 120px auto 20px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
    text-align: center;
  }
  .lead {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.06em;
    span {
      color: var(--color-dark-red);
    }
    @media (max-width: 1050px) {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  h2 {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    padding: 0.82em 0;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    color: var(--color-white);
    background-color: var(--color-dark-red);
    @media (max-width: 1050px) {
      font-size: 40px;
      padding: 0.75em 0;
      margin-top: 20px;
      border-radius: 15px;
    }
    @media (max-width: 768px) {
      font-size: 30px;
      margin-top: 15px;
    }
  }
  .price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
    font-feature-settings: "palt";
    font-family: var(--serif-ja);
    font-size: 90px;
    font-weight: 700;
    margin-top: 0.3em;
    color: var(--color-dark-red);
    span {
      color: var(--color-black);
      &.prefix {
        display: block;
        font-size: 28px;
        margin-bottom: 0.2em;
      }
      &.suffix {
        display: inline-flex;
        flex-direction: column-reverse;
        font-size: 50px;
        margin-bottom: 0.2em;
        i {
          font-style: normal;
          font-size: 16px;
          margin: 0 auto;
          color: #5f5f5f;
        }
      }
    }
    @media (max-width: 1050px) {
      font-size: 72px;
      margin-top: 0.1em;
      span {
        &.prefix {
          font-size: 20px;
        }
        &.suffix {
          font-size: 40px;
          i {
            font-size: 14px;
          }
        }
      }
    }
    @media (max-width: 768px) {
      font-size: 54px;
      span {
        &.prefix {
          font-size: 14px;
        }
        &.suffix {
          font-size: 30px;
          i {
            font-size: 11px;
          }
        }
      }
    }
  }
}

.takuken-subjects {
  font-feature-settings: "palt" 1;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #f7e9ea;
  @media (max-width: 1050px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    > * + * {
      margin-top: 60px;
    }
    @media (max-width: 1050px) {
      margin-top: 30px;
      > * + * {
        margin-top: 30px;
      }
    }
  }
  .content {
    max-width: 700px;
    margin: 0 auto;

    h3 {
      line-height: 1;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      margin: 40px auto 0;
      span {
        color: var(--color-dark-red);
        i {
          font-style: normal;
          font-size: 60px;
          font-weight: 700;
          color: var(--color-dark-red);
        }
      }
      @media (max-width: 1050px) {
        font-size: 28px;
        margin: 30px auto 0;
      }
      @media (max-width: 768px) {
        font-size: 23px;
        span {
          i {
            font-size: 39px;
          }
        }
      }
    }

    h4 {
      line-height: 1;
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.06em;
      text-indent: 0.06em;
      margin: 60px auto 0;
      span {
        color: var(--color-dark-red);
        i {
          font-style: normal;
          font-size: 60px;
          font-weight: 700;
          color: var(--color-dark-red);
        }
      }
      @media (max-width: 1050px) {
        font-size: 24px;
        margin: 40px auto 0;
      }
      @media (max-width: 768px) {
        font-size: 21px;
        margin: 30px auto 0;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 40px;
      @media (max-width: 1050px) {
        margin-top: 20px;
      }
      thead {
        th {
          line-height: 1.2;
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0.12em;
          text-indent: 0.12em;
          text-align: center;
          padding: 0.6em 0;
          vertical-align: middle;
          border: 1px solid #b0272d;
          color: var(--color-white);
          background-color: #b0272d;
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 1px;
            height: calc(100% - 0.8em);
            background-color: #ffffff;
            position: absolute;
            top: 50%;
            left: calc(100% - 0.5px);
            transform: translateY(-50%);
          }
          &:last-child::after {
            display: none;
          }
          @media (max-width: 1050px) {
          }
        }
      }
      tbody {
        td {
          width: 33.333%;
          line-height: 1.2;
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0.06em;
          text-indent: 0.06em;
          border: 1px solid #b0272d;
          padding: 0.5em 0;
          vertical-align: middle;
          text-align: center;
          background-color: #ffffff;
          @media (max-width: 1050px) {
            font-size: 16px;
          }
        }
      }
    }

    .list-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin: 15px auto 0;
      @media (max-width: 1050px) {
        gap: 15px;
      }
      > * {
        width: 50%;
      }
      .card {
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        border-radius: 10px;
        border: 4px solid var(--color-dark-red);
        background-color: var(--color-white);
        @media (max-width: 1050px) {
          padding: 18px 0;
        }
        > dt {
          font-size: 18px;
          font-weight: 700;
          text-align: center;
          letter-spacing: 0;
          color: var(--color-black);
          @media (max-width: 1050px) {
            font-size: 16px;
          }
        }
        > dd {
          font-size: 48px;
          font-weight: 900;
          text-align: center;
          letter-spacing: 0;
          margin-top: 0.1em;
          color: var(--color-dark-red);
          span.prefix {
            font-size: 28px;
          }
          @media (max-width: 1050px) {
            font-size: 36px;
            span.prefix {
              font-size: 20px;
            }
          }
        }
      }
    }

    hr.arrow {
      width: 0px;
      height: 0px;
      outline: none;
      border-style: solid;
      border-width: 20px 30px 0 30px;
      border-color: #b0272d transparent transparent transparent;
      margin: 35px auto 0;
      @media (max-width: 1050px) {
        margin: 30px auto 0;
      }
    }

    p.centered {
      line-height: 1.5;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-align: center;
      margin-top: 30px;
      strong {
        font-weight: 700;
        color: var(--color-dark-red);
      }
      br.pcbr {
        display: block;
      }
      br.spbr {
        display: none;
      }
      @media (max-width: 1050px) {
        font-size: 24px;
        margin-top: 20px;
        br.pcbr {
          display: none;
        }
        br.spbr {
          display: block;
        }
      }
      @media (max-width: 768px) {
        line-height: 1.6;
        font-size: 21px;
        letter-spacing: 0.06em;
      }
    }
    p.point {
      line-height: 1.5;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-indent: 0.04em;
      text-align: center;
      padding: 0.9em 0;
      margin-top: 30px;
      border-radius: 10px;
      border: 4px solid var(--color-dark-red);
      background-color: var(--color-white);
      color: var(--color-dark-red);
      br.spbr {
        display: none;
      }
      @media (max-width: 1050px) {
        font-size: 22px;
        br.spbr {
          display: block;
        }
      }
      @media (max-width: 768px) {
        font-size: 21px;
        margin-top: 25px;
      }
    }
  }

  .video-wrapper {
    width: 100%;
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-top: 20px;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    @media (max-width: 768px) {
      & + & {
        margin-top: 30px;
      }
    }
  }
}


/** =========================================
  * 宅地建物取引士試験 解答速報
  * ========================================= */
.takuken-report {
  font-feature-settings: "palt" 1;
  padding-bottom: 80px;
  @media (max-width: 768px) {
    padding-top: 10px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    .content {
      margin-top: 0;
      & + & {
        margin-top: 80px;
        &:nth-child(2) {
          margin-top: 60px;
        }
        @media (max-width: 768px) {
          margin-top: 60px;
          &:nth-child(2) {
            margin-top: 30px;
          }
        }
      }
      > p {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 30px;
        strong {
          font-weight: 700;
          color: var(--color-dark-red);
        }
        &.centered {
          text-align: center;
          text-indent: 0.04em;
        }
        @media (max-width: 768px) {
          margin-top: 20px;
          &.centered {
            text-align: left;
          }
        }
      }
      > ul.list-bullets {
        line-height: 1.875;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-align: justify;
        margin-top: 30px;
        li {
          position: relative;
          padding-left: 1em;
          &::before {
            content: "●";
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        @media (max-width: 768px) {
          margin-top: 20px;
          &.centered {
            text-align: left;
          }
        }
      }
    }
  }
  .update-date {
    line-height: 1;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-dark-red);
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  .list-cards {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 60px;
    > * {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
    }
    @media (max-width: 1050px) {
      gap: 30px;
    }
    @media (max-width: 768px) {
      gap: 15px;
    }
  }
  .card {
    width: 100%;
    max-width: 700px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--serif-ja);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    align-items: center;
    letter-spacing: 0.08em;
    text-align: center;
    text-indent: 0.08em;
    padding: 48px 20px 22px;
    border-radius: 15px;
    border: 1px solid #1b1b1b;
    margin-top: 37.5px;
    br {
      display: none;
    }
    &::before {
      content: "";
      display: block;
      width: 75px;
      height: 75px;
      position: absolute;
      top: -37.5px;
      left: 50%;
      transform: translateX(-50%);
      background: url("../images/common/ico_walk.svg") no-repeat center / cover;
    }
    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: url("../images/common/ico_more_red2.svg") no-repeat center / contain;
    }
    @media (max-width: 1050px) {
      line-height: 1.4;
      font-size: 24px;
      letter-spacing: 0;
      padding: 40px 0px 20px;
      br {
        display: block;
      }
    }
    @media (max-width: 768px) {
      font-size: 18px;
      padding: 50px 0 20px;
      &::after {
        width: 12px;
        height: 12px;
      }
    }
  }
  .comment {
    position: relative;
    display: table;
    line-height: 1;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    margin: 0 auto;
    color: var(--color-black);
    span {
      color: var(--color-dark-red);
    }
    &::before, &::after {
      content: "";
      display: block;
      width: 50px;
      height: 2px;
      background-color: var(--color-dark-red);
      position: absolute;
      top: 50%;
    }
    &::before {
      right: 100%;
      transform: rotate(70deg) translateY(-50%);
      transform-origin: center;
    }
    &::after {
      left: 100%;
      transform-origin: center;
      transform: rotate(-70deg) translateY(-50%);
    }
    @media (max-width: 768px) {
      font-size: 21px;
      span {
        display: block;
        margin-top: 0.4em;
      }
      &::before {
        right: 95%;
      }
      &::after {
        left: 95%;
      }
    }
  }
  h3 {
    line-height: 1.2;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    padding: 0.4em 0;
    margin-top: 80px;
    color: var(--color-white);
    background-color: #999999;
    @media (max-width: 768px) {
      font-size: 21px;
      text-align: left;
      padding: 0.4em 0.4em;
      margin-top: 60px;
    }
  }
}

.table-takuken-wrapper {
  overflow-x: auto;
  max-width: 900px;
  margin: 0 auto;
}

.table-takuken {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-top: 30px;
  @media (max-width: 1050px) {
    min-width: 780px;
  }

  caption {
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 1.5em;
  }

  thead {
    th {
      width: 16.6666%;
      line-height: 1.2;
      font-size: 18px;
      font-weight: 500;
      vertical-align: middle;
      border: 1px solid #000000;
      border-bottom-width: 2px;
      padding: 0.6em 0;
      color: white;
      background-color: #be9772;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
  }

  tbody {
    th {
      line-height: 1.2;
      font-size: 16px;
      font-weight: 500;
      vertical-align: middle;
      padding: 0.5em 0;
      color: #ffffff;
      border: 1px solid #000000;
      background-color: #be9772;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
    td {
      line-height: 1.2;
      font-size: 16px;
      font-weight: 500;
      vertical-align: middle;
      padding: 0.58em 0;
      border: 1px solid #000000;
      background-color: #ffffff;
      @media (max-width: 1050px) {
        font-size: 16px;
      }
    }
  }
}


/** =========================================
  * スクールについて
  * 2025/12/04 追加
  * ========================================= */
.about-intro {
  font-feature-settings: "palt" 1;
  padding: 80px 0 80px;
  margin-top: 40px;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding: 40px 0 60px;
    margin-top: 30px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .picture-wrapper {
    width: 100%;
    max-width: 286px;
    margin: 60px auto 0;
    position: relative;
    @media (max-width: 768px) {
      max-width: 220px;
      margin: 30px auto 0;
    }
    figure {
      > img {
        border: 10px solid #be9772;
        outline: 1.5px solid #000000;
      }
      > figcaption {
        line-height: 1;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.1em;
        text-indent: 0.1em;
        margin-top: 1em;
        @media (max-width: 768px) {
          font-size: 14px;
        }
      }
    }
  }
  .text-wrapper {
    max-width: 700px;
    margin: calc(60px - 0.5em) auto 0;
    @media (max-width: 768px) {
      margin: calc(30px - 0.5em) auto 0;
    }
    > p {
      line-break: strict;
      line-height: 2;
      font-size: 15px;
      font-weight: 400;
      text-align: justify;
      letter-spacing: 0;
      & + & {
        margin-top: 0.25em;
      }
      strong {
        max-width: fit-content;
        margin: 0 auto;
        display: block;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-align: center;
        color: var(--color-black);
        span {
          color: var(--color-dark-red);
        }
        br.spbr {
          display: none;
        }
      }
      @media (max-width: 768px) {
        line-height: 1.875;
        letter-spacing: 0.02em;
        & + & {
          margin-top: 1.2em;
        }
        strong {
          line-height: 1.5;
          font-size: 17px;
          letter-spacing: 0;
          br.spbr {
            display: block;
          }
        }
      }
    }
  }
  .thumb-wrapper {
    max-width: 700px;
    margin: calc(80px - 0.5em) auto 0;
    @media (max-width: 768px) {
      margin: calc(60px - 0.5em) auto 0;
    }
    .thumb {
      display: block;
      width: 100%;
      margin: 0 auto;
      border: 2px solid #000000;
      img {
        width: 100%;
        height: auto;
      }
    }
    .button {
      font-size: 16px;
      margin-top: 40px;
      @media (max-width: 768px) {
        margin-top: 20px;
      }
    }
  }
}

.about-feature {
  font-feature-settings: "palt" 1;
  padding: 80px 0 80px;
  background-color: #f2f2f2;
  @media (max-width: 1050px) {
    padding: 60px 0 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 35px auto 0;
    > * {
      width: calc(33.3333% - 30px);
    }
    @media (max-width: 1050px) {
      max-width: 500px;
      flex-direction: column;
      gap: 60px;
      > * {
        width: 100%;
      }
    }
    .thumb {
      display: block;
      max-width: 270px;
      margin: 0 auto;
      > img {
        border: 1px solid #4d4d4d;
      }
      @media (max-width: 768px) {
        max-width: 220px;
      }
    }
    .text-wrapper {
      margin-top: calc(20px - 0.5em);
      h3 {
        line-height: 1.5;
        font-size: 23px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-indent: 0.04em;
        text-align: center;
        color: var(--color-black);
        span {
          color: var(--color-dark-red);
          display: inline-block;
        }
        @media (max-width: 1050px) {
          font-size: 20px;
          letter-spacing: 0;
          text-indent: 0;
          br.pcbr {
            display: none;
          }
        }
      }
      p {
        line-height: 1.8;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0;
        text-align: justify;
        margin: calc(20px - 0.9em) auto 0;
        @media (max-width: 768px) {
          line-height: 1.875;
        }
      }
    }
  }
}

.about-info {
  font-feature-settings: "palt" 1;
  padding: 80px 0 80px;
  background-color: var(--color-white);
  @media (max-width: 1050px) {
    padding: 60px 0 60px;
  }
  .inner {
    max-width: 1240px;
    padding: 0 2rem;
  }
  .columns {
    > * + * {
      margin-top: calc(80px - 0.5em);
      @media (max-width: 1050px) {
        margin-top: calc(60px - 0.5em);
      }
    }
  }
  .logo-info {
    max-width: 500px;
    text-align: center;
    margin: 60px auto 0;
    @media (max-width: 1050px) {
      max-width: 420px;
      margin: 30px auto 0;
    }
  }
  .address {
    line-height: 1.8;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    margin-top: calc(30px - 0.5em);
    span {
      display: inline-block;
      margin-left: 0.5em;
    }
    @media (max-width: 768px) {
      font-size: 16px;
      span {
        display: block;
        margin-left: 0;
      }
    }
  }
  .list-contact {
    line-height: 1.8;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    > li a {
      display: inline-block;
    }
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
}

.table-history {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin-top: calc(40px - 0.8em);
  margin-right: auto;
  margin-left: auto;
  @media (max-width: 768px) {
    letter-spacing: 0;
    margin-top: calc(30px - 0.8em);
  }
  th {
    width: 7.5em;
    padding: 0.95em 0;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
    border-bottom: 1px solid #000000;
    white-space: nowrap;
  }
  td {
    padding: 0.95em 0;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
    border-bottom: 1px solid #000000;
    @media (max-width: 768px) {
      text-align: justify;
      word-break: break-all;
    }
  }
}