@charset "UTF-8";
@media screen and (max-width: 480px) {
  .sp-none {
    display: none;
  }
}

.model-course {
  max-width: var(--container-max-width);
  margin: var(--navbar-height) auto 0 auto;

  .course-header {
    .course-title {
      font-size: var(--font-size-xl);
      display: flex;
      gap: var(--spacing-sm);

      .course-no {
        color: var(--title-font-color);
      }

      @media screen and (max-width: 570px) {
        flex-direction: column;
        gap: 0;
      }
    }

    .course-summary {
      display: flex;
      align-items: center;
      gap: var(--spacing-lg);

      @media screen and (max-width: 1024px) {
        gap: var(--spacing-sm);
      }

      .airplane {
        align-items: center;
        display: flex;
        gap: var(--spacing-xs);
      }
    }

    .bar-vertical {
      transform: rotate(-90deg);
      width: 24px;
      height: 4px;
    }
  }

  .course-summary {
    margin: 0.5rem 0 0.5rem 0;
  }

  .map {
    width: 100%;
  }

  .course-detail {
    width: 100%;

    .day-header {
      margin: 5rem 0 3rem 0;
    }

    .day-title {
      text-align: center;
      font-size: var(--font-size-xxxl);
    }

    .d-center {
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    .d-left {
      text-align: left;
      justify-content: left;
    }

    .reserve {
      /* global.cssからの差分だけ上書き */
      width: 4rem;
      margin-right: 1rem;
      height: 80% !important;

      a {
        color: var(--btn-font-color);
      }
    }

    .contents {
      width: 100%;
      display: flex;
      gap: var(--spacing-lg);

      @media screen and (max-width: 1024px) {
        /* display: block; */
        flex-direction: column;
        gap: 0;
      }

      .content {
        width: 50%;
        display: flex;
        flex-direction: column;

        .image {
          width: 100%;
        }

        @media screen and (max-width: 1024px) {
          display: block;
          width: 100%;
          margin: 0;
        }
      }

      .time-schedule {
        width: 420px;
        padding: var(--spacing-sm) 0 var(--spacing-sm) 0;
        border-radius: 3rem;
        border: 0.2rem solid;
        display: flex;
        flex-direction: column;

        @media screen and (max-width: 1024px) {
          width: 360px;
          margin: 0 auto;
        }

        @media screen and (max-width: 480px) {
          width: 330px;
          margin: 0 auto;
        }

        .description {
          font-size: var(--font-size-sm);
          margin: 0 2rem 0 2rem;
        }

        .name {
          font-weight: 750;
          margin: 0 2rem 0 2rem;
        }

        .name-reserve {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: var(--spacing-sm);
        }

        .reserve {
          height: 1.2rem;
        }
      }

      .vector {
        width: 100%;
        text-align: center;
        margin: 0 0 -0.4rem 0;
      }

      @media screen and (max-width: 1024px) {
        .sp-none-vector {
          display: none;
        }
      }
    }

    .reverse {
      @media screen and (max-width: 1024px) {
        flex-direction: column-reverse;
      }
    }

    .strong-name {
      font-size: var(--font-size-xl);
      font-weight: 750;
      display: flex;
      align-items: center;
      gap: var(--spacing-md);

      /* globals.cssで調整 */
      /* @media screen and (max-width: 1024px) {
                font-size: var(--font-size-lg);
            }    */

      @media screen and (max-width: 480px) {
        justify-content: space-between;
      }
    }

    .time {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }
  }

  .course-footer {
    margin: 5rem 0 0 0;
  }
}

.bar {
  width: 100%;
  height: 1px;
  background-color: var(--border-color-light-gray);
  margin: 0.5rem 0 0.5rem 0;
}

.product-list {
  background-color: var(--bg-color-sub);

  .container-custom {
    padding: 32px 64px 0 64px;

    @media screen and (max-width: 1024px) {
      padding: 16px 32px 16px 32px;
    }

    margin: 0 auto 0 auto;
    max-width: var(--container-max-width);
    font-size: var(--font-size-sm);

    .header {
      margin: 0 var(--spacing-md) 0 var(--spacing-md);
      font-size: var(--font-size-md);

      @media screen and (max-width: 1024px) {
        margin: 0;
      }
    }

    .contents {
      display: flex;
      gap: var(--spacing-sm);

      @media screen and (max-width: 1024px) {
        display: block;
      }

      .content {
        display: flex;
        flex-direction: column;
        margin: 0 1rem 0 1rem;
        width: 50%;

        @media screen and (max-width: 1024px) {
          display: block;
          margin: 0;
          width: 100%;
        }

        .button-link {
          height: 1.2rem;
        }

        .description {
          margin: 0 0 0 0.5rem;
        }
      }
    }
  }
}