@charset "UTF-8";

/* カスタムプロパティ定義 - page-shogyo.php専用 */
.page-shogyo {
    --shogyo-primary-color: #56ad6a;
    --shogyo-bg-color: #e2f1e6;
    --shogyo-info-bg-color: #e0f3f6;
    --shogyo-acc-bg-color: #f7ecf7;
    /* その他のカスタムプロパティ */
    --shogyo-info-color: #52b2c1;
    --shogyo-acc-color: #b980b7;
    /* Course Subjects Colors - matching course-title-heading */
    --shogyo-course-subjects-region-bg-color: #e2f1e6;
    --shogyo-course-subjects-region-border-color: #56ad6a;
    --shogyo-course-subjects-info-bg-color: #e0f3f6;
    --shogyo-course-subjects-info-border-color: var(--shogyo-info-color);
    --shogyo-course-subjects-acc-bg-color: #f7ecf7;
    --shogyo-course-subjects-acc-border-color: var(--shogyo-acc-color);
    --shogyo-teacher-message-color-2: var(--shogyo-info-color);
    --shogyo-teacher-message-color-3: var(--shogyo-acc-color);
    --shogyo-point-color: #4a90e2;
}

/* page-shogyo.php専用スタイル */

/* 学校行事: 1281px以下は2列折り返し、1282px以上は4列（course.css の3列定義を上書き） */
/* .page-shogyo .feature-banner {
    grid-template-columns: repeat(2, 1fr);
} */

@media screen and (min-width: 1282px) {
    /* .page-shogyo .feature-banner {
        grid-template-columns: repeat(4, 1fr);
    } */

    .page-shogyo .feature-banner .feature-banner__image-wrapper {
        aspect-ratio: 5 / 4;
        overflow: hidden;
    }

    .page-shogyo .feature-banner .feature-banner__image {
        height: 100%;
        min-height: 0;
    }
}

/* 2列に折り返したとき（768px超〜1281px以下）はバナーをやや小さく */
@media screen and (max-width: 1281px) and (min-width: 769px) {
    .page-shogyo .feature-banner {
        gap: 8px;
        margin: 28px 0;
    }

    .page-shogyo .feature-banner .feature-banner__image-wrapper {
        height: 188px;
        overflow: hidden;
    }

    .page-shogyo .feature-banner .feature-banner__image {
        height: 100%;
        min-height: 0;
    }

    .page-shogyo .feature-banner .feature-banner__overlay {
        padding: 10px 12px;
    }

    .page-shogyo .feature-banner .feature-banner__japanese {
        font-size: 15px;
    }

    .page-shogyo .feature-banner .feature-banner__english {
        font-size: 0.8rem;
    }
}

.page-shogyo .point-feature__badge--shogyo {
    border-color: var(--child-course-commercial);
    color: var(--child-course-commercial);
}

.page-shogyo .shogyo-header h2 {
    font-size: 2.2rem;
    color: #333;
    border-bottom: 3px solid var(--child-course-commercial);
    display: inline-block;
    padding-bottom: 10px;
}

.page-shogyo .shogyo-section h3 {
    font-size: 1.5rem;
    border-left: 6px solid var(--child-course-commercial);
    padding-left: 15px;
    margin-bottom: 1.5em;
    background: #f9f9f9;
    padding-top: 10px;
    padding-bottom: 10px;
}

.page-shogyo .course-subjects__item {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--shogyo-course-subjects-region-bg-color, #e2f1e6);
    border: 1px solid var(--shogyo-primary-color, #56ad6a);
    white-space: nowrap;
}

/* Course Subjects Color Variations - matching course-title-heading */
.page-shogyo .course-card-region .course-subjects__item {
    background-color: var(--shogyo-primary-color);
    border-color: var(--shogyo-primary-color);
}

.page-shogyo .course-subjects--info .course-subjects__item,
.page-shogyo .course-card-info .course-subjects__item {
    background-color: var(--shogyo-info-color);
    border-color: var(--shogyo-info-color);
}

.page-shogyo .course-subjects--acc .course-subjects__item,
.page-shogyo .course-card-acc .course-subjects__item {
    background-color: var(--shogyo-acc-color);
    border-color: var(--shogyo-acc-color);
}

/* Specific Color Themes */
.page-shogyo .course-card-region {
    border-color: var(--shogyo-primary-color, #56ad6a);
    background-color: var(--shogyo-bg-color, #e2f1e6);
}

.page-shogyo .course-card-region .course-card__title {
    background-color: var(--shogyo-primary-color, #56ad6a);
}

.page-shogyo .course-title-heading {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 10px 15px;
    /* border-radius: 6px; */
    background-color: var(--shogyo-primary-color, #56ad6a);
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
}

/* Course Title Heading Color Variations */
.page-shogyo .course-title-heading--info {
    background-color: var(--shogyo-info-color);
}

.page-shogyo .course-title-heading--acc {
    background-color: var(--shogyo-acc-color);
}

.page-shogyo .course-card-info {
    border-color: var(--shogyo-info-color);
    background-color: var(--shogyo-info-bg-color, #e0f3f6);
}

.page-shogyo .course-card-info .course-card__title {
    background-color: var(--shogyo-info-color);
}

.page-shogyo .course-card-acc {
    border-color: var(--shogyo-acc-color);
    background-color: var(--shogyo-acc-bg-color, #f7ecf7);
}

.page-shogyo .course-card-acc .course-card__title {
    background-color: var(--shogyo-acc-color);
}

/* セクション全体のフォントと余白の設定 */
.page-shogyo .lib-arts-section {
    border: 2px solid var(--child-course-commercial);
    background-color: #e6f1fd;
}

/* タイトルと飾り線 */
.page-shogyo .lib-arts-title {
    color: var(--child-course-commercial);
    font-size: 28px;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.page-shogyo .lib-arts-target-title {
    color: var(--child-course-commercial);
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: bold;
}

/* チェックアイコンの装飾 */
.page-shogyo .lib-arts-icon {
    background-color: var(--child-course-commercial);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 3px;
}

.page-shogyo .tokusen-hero__header-bar {
    width: 100%;
    height: 1.5rem;
    background-color: var(--child-course-commercial);
}

.page-shogyo .tokusen-hero__left-block {
    background-color: var(--child-course-commercial);
}

.page-shogyo .point-card {
    position: relative;
    max-width: 1000px;
    width: 100%;
    /* background-color: #fff; */
    border: 2px solid var(--child-course-commercial);
    border-radius: 16px;
    /* overflow: hidden; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

/* モディファイアクラス: 色を変更 */
.page-shogyo .point-card--alt {
    border-color: #4a3faf;
}

.page-shogyo .point-card--alt .point-card__banner {
    background-color: #4a3faf;
}

/* page-shogyo.php専用: 3列グリッド */
.page-shogyo .point-card__interview-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Point Card Interview Heading Color Styles */
.page-shogyo .point-card__interview-heading--region {
    --heading-dot-color: var(--shogyo-primary-color);
    --heading-underline-color: var(--shogyo-primary-color);
}

.page-shogyo .point-card__interview-heading--info {
    --heading-dot-color: var(--shogyo-info-color);
    --heading-underline-color: var(--shogyo-info-color);
}

.page-shogyo .point-card__interview-heading--acc {
    --heading-dot-color: var(--shogyo-acc-color);
    --heading-underline-color: var(--shogyo-acc-color);
}

/* Point Card Interview Button Colors - page-shogyo.php */
.page-shogyo .point-card__interview-item .point-card__interview-button {
    border-color: #4a3faf;
    color: #4a3faf;
}

.page-shogyo .point-card__interview-item:hover .point-card__interview-button,
.page-shogyo .point-card__interview-button:hover {
    background-color: #4a3faf;
    color: #fff;
}

.page-shogyo .point-card__banner {
    background-color: var(--child-course-commercial);
}

.page-shogyo .teacher-message-section::before {
    background-color: var(--shogyo-bg-color, #e2f1e6);
    /* background-color: #009EAA; */
}

/* 2番目のteacher-message-sectionの::before背景色 */
.page-shogyo .teacher-message-section--color-2.aos-animate::before {
    background-color: var(--shogyo-info-bg-color, #e0f3f6);
}

/* 3番目のteacher-message-sectionの::before背景色 */
.page-shogyo .teacher-message-section--color-3.aos-animate::before {
    background-color: var(--shogyo-acc-bg-color, #f7ecf7);
}

.page-shogyo .teacher-message-title-line1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--shogyo-primary-color, #56ad6a);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* 2番目のteacher-message-section内のtitle-line1 */
.page-shogyo .teacher-message-section--color-2 .teacher-message-title-line1 {
    color: var(--shogyo-teacher-message-color-2, #52b2c1);
}

/* 3番目のteacher-message-section内のtitle-line1 */
.page-shogyo .teacher-message-section--color-3 .teacher-message-title-line1 {
    color: var(--shogyo-teacher-message-color-3);
}

.page-shogyo .senior-message-title {
    font-size: 23px;
    font-weight: 700;
    color: var(--child-course-commercial);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.page-shogyo .senior-message-title-underline {
    width: 60px;
    height: 2px;
    background-color: var(--child-course-commercial);
    margin-bottom: 20px;
}

.page-shogyo .check-circle-02 {
    width: 22px;
    height: 22px;
    /* border: 1px solid #e3c942; */
    background-color: var(--shogyo-primary-color, #56ad6a);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    flex-shrink: 0; /* 折り返しを防ぐ */
}

/* 2番目のteacher-message-section内のcheck-circle-02 */
.page-shogyo .teacher-message-section--color-2 .check-circle-02 {
    background-color: var(--shogyo-teacher-message-color-2, #52b2c1);
    color: #ffffff;
}

/* 3番目のteacher-message-section内のcheck-circle-02 */
.page-shogyo .teacher-message-section--color-3 .check-circle-02 {
    background-color: var(--shogyo-teacher-message-color-3);
    color: #ffffff;
}

.open-class-banner--shogyo {
    border: 2px solid var(--child-course-commercial);
}

@media screen and (max-width: 768px) {
    .page-shogyo .feature-banner {
        grid-template-columns: 1fr;
    }
}

/* 1000px以下の時の設定（デフォルトまたはモバイルファースト） */
@media screen and (max-width: 1000px) {
    .page-shogyo .p-postList.-type-card,
    .page-shogyo .p-postList.-type-thumb {
      display: flex;
      flex-wrap: wrap; /* 折り返しを許可 */
    }
  }
  
  /* 1000px以上の時の設定 */
  @media screen and (min-width: 1001px) {
    .page-shogyo .p-postList.-type-card,
    .page-shogyo .p-postList.-type-thumb {
      display: flex;
      flex-wrap: nowrap;
    }
  }