/*
 * page-opencampus-event.css — OC 5イベントページ共通
 */

.page-opencampus-event {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    padding: 50px 0 0;
    background: #fff;
}

/* CONTENT c-feature-numbered グリッド */
.page-opencampus-event__content-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

/* TARGET c-check-item グリッド */
.page-opencampus-event__target-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}
.page-opencampus-event__target-grid > .c-check-item {
    max-width: none;
    width: 100%;
    height: 100%;
}

/* SCHEDULE c-schedule グリッド */
.page-opencampus-event__schedule-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}
.page-opencampus-event__schedule-grid > .c-schedule {
    max-width: none;
    width: 100%;
}

/* FLOW c-step-row 縦積み */
.page-opencampus-event__flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* FAQ */
.page-opencampus-event__faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .page-opencampus-event { gap: 30px; padding: 20px 0 0; }
    .page-opencampus-event__content-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .page-opencampus-event__target-grid { grid-template-columns: 1fr; gap: 10px; }
    .page-opencampus-event__schedule-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Figma 準拠: briefing (学校説明会) は CONTENT→SCHEDULE→TARGET→FAQ の順 */
.page-opencampus-event--schedule-first {
    display: flex;
    flex-direction: column;
}
.page-opencampus-event--schedule-first > .c-page-hero { order: 0; }
.page-opencampus-event--schedule-first > [aria-labelledby="oc-content-heading"] { order: 1; }
.page-opencampus-event--schedule-first > [aria-labelledby="oc-schedule-heading"] { order: 2; }
.page-opencampus-event--schedule-first > [aria-labelledby="oc-target-heading"] { order: 3; }
.page-opencampus-event--schedule-first > [aria-labelledby="oc-flow-heading"] { order: 4; }
.page-opencampus-event--schedule-first > [aria-labelledby="oc-faq-heading"] { order: 5; }

/* ============================================================================
 * 当日の流れ (c-step-row) 時間ピル 2026-10-08
 * ========================================================================== */
.page-opencampus-event__flow .c-step-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
}
.page-opencampus-event__flow .c-step-row:has(.c-step-row__time) {
    grid-template-columns: 70px 90px 1fr;
}
.page-opencampus-event__flow .c-step-row__no {
    text-align: center;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 13px;
    color: #1aad7c;
}
.c-step-row__time {
    padding: 6px 12px;
    background: #fff;
    border: 1.5px solid #1aad7c;
    border-radius: 999px;
    text-align: center;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: #0f6b4b;
    white-space: nowrap;
}
.page-opencampus-event__flow .c-step-row__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media screen and (max-width: 768px) {
    .page-opencampus-event__flow .c-step-row {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 8px 12px;
    }
    .c-step-row__time { grid-column: 2; justify-self: start; }
    .page-opencampus-event__flow .c-step-row__body { grid-column: 1 / -1; }
}

/* ============================================================================
 * FLOW --grid modifier (Figma 準拠 2026-10-13 trial: 7 ステップを横並び時刻カード)
 *   時刻ピル (上段) + タイトル2段 (下段) をコンパクトな矩形カードで横一列に並べる。
 *   STEP ラベルは hide し、時刻 + タイトルだけでシンプルに。
 * ========================================================================== */
.page-opencampus-event__flow--grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.page-opencampus-event__flow--grid .c-step-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-align: center;
}
.page-opencampus-event__flow--grid .c-step-row:has(.c-step-row__time) {
    grid-template-columns: none;
}
.page-opencampus-event__flow--grid .c-step-row__no {
    /* STEP ラベルは grid レイアウトでは非表示 (時刻+タイトルで十分) */
    display: none;
}
.page-opencampus-event__flow--grid .c-step-row__time {
    display: block;
    width: 100%;
    padding: 6px 4px;
    background: #1aad7c;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.page-opencampus-event__flow--grid .c-step-row__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.page-opencampus-event__flow--grid .c-step-row__title {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ytc-text-primary, #000);
}
.page-opencampus-event__flow--grid .c-step-row__desc {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 11px;
    line-height: 1.5;
    color: var(--ytc-text-secondary, #787878);
}
@media screen and (max-width: 768px) {
    .page-opencampus-event__flow--grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .page-opencampus-event__flow--grid .c-step-row {
        grid-template-columns: none;
        grid-template-rows: auto;
    }
    .page-opencampus-event__flow--grid .c-step-row__time {
        grid-column: auto;
        justify-self: stretch;
    }
    .page-opencampus-event__flow--grid .c-step-row__body {
        grid-column: auto;
    }
}

/* 2026-10-13: 開催日程下の申し込み CTA 中央配置 */
.page-opencampus-event__schedule-cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* 2026-10-13 佐藤様指摘: STEP # ラベル下に時刻を入れる (opencampus/trial 等) */
.c-step-row--has-time .c-step-row__no {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.c-step-row__no-label {
    display: block;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}
.c-step-row__no-time {
    display: block;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: inherit;
    opacity: 0.9;
}

/* ============================================================================
 * 2026-10-19 Figma 準拠レイアウト調整 (OC 5 イベントページ共通)
 *   数値は Figma ノード JSON (15_OC_体験入学 ほか) から採寸
 * ========================================================================== */

/* セクション間: Figma は箱と箱の間 80px (= gap 30 + 箱の margin-top 50) */
.page-opencampus-event {
    gap: 30px;
}
/* 見出し領域: リードあり 150px / なし 110px (Figma paddingTop) — PC のみ */
@media screen and (min-width: 769px) {
    /* 2026-10-19 [common] 共通 .c-section-box が Figma 値 (110/40/40・リード付き150・gap30) になったので削除 */
}
/* briefing は order で並べ替えているため DOM 末尾以外が最後に来る → フッターとの間を空ける */
.page-opencampus-event--schedule-first > [aria-labelledby="oc-target-heading"] {
    margin-bottom: 50px;
}

/* CONTENT カード: タイトル 20px / 説明 16px (3 枚以下は 26px) */
@media screen and (min-width: 769px) {
    .page-opencampus-event__content-grid > .c-feature-numbered.c-feature-numbered {
        gap: 15px;
        padding: 20px;
    }
    .page-opencampus-event__content-grid .c-feature-numbered__title.c-feature-numbered__title {
        font-size: 20px;
        line-height: 1.5;
    }
    .page-opencampus-event__content-grid:not(:has(> li:nth-child(4))) .c-feature-numbered__title.c-feature-numbered__title {
        font-size: 26px;
    }
    .page-opencampus-event__content-grid .c-feature-numbered__desc.c-feature-numbered__desc {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* SP: CONTENT / DATES は 1 列 (Figma SP は横長カードの縦積み。2 列だと DATES が右にはみ出していた) */
@media screen and (max-width: 768px) {
    .page-opencampus-event__content-grid,
    .page-opencampus-event__schedule-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-opencampus-event__content-grid .c-feature-numbered__title.c-feature-numbered__title {
        font-size: 20px;
        line-height: 1.5;
    }
    .page-opencampus-event__content-grid .c-feature-numbered__desc.c-feature-numbered__desc {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
 * 体験入学 FLOW: Figma「Step Item / PC」= 時刻ラベル + タイトルの縦長カードを横一列、
 * カード間は 16px の点線でつなぐ (カード数・時刻は ACF のまま)
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .page-template-page-opencampus-trial .page-opencampus-event__flow.page-opencampus-event__flow {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        flex-direction: row;
        gap: 28px;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row.c-step-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 0;
        padding: 20px 12px;
        text-align: center;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row:not(:last-child)::after {
        top: 68px;
        bottom: auto;
        left: auto;
        right: -23px;
        width: 16px;
        height: 0;
        border: 0;
        border-top: 1px dashed var(--ytc-border-strong, #39364e);
        transform: none;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row__no.c-step-row__no {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: center;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row__no-time {
        font-size: 16px;
        line-height: 1;
        color: var(--ytc-bg-brand, #439fff);
        opacity: 1;
        white-space: nowrap;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row__body.c-step-row__body {
        flex: 0 1 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 0;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row__title.c-step-row__title {
        font-size: 18px;
        line-height: 1.5;
    }
    .page-template-page-opencampus-trial .page-opencampus-event__flow .c-step-row__desc.c-step-row__desc {
        font-size: 12px;
        line-height: 1.6;
        color: var(--ytc-text-secondary, #787878);
    }
}
/* SP: Figma「Step Item」= 時刻 11px (青・太字) → タイトル 20px → 説明 14px */
@media screen and (max-width: 768px) {
    .page-opencampus-event__flow .c-step-row__no-time {
        font-size: 11px;
        color: var(--ytc-bg-brand, #439fff);
        opacity: 1;
    }
    .page-opencampus-event__flow .c-step-row__title.c-step-row__title {
        font-size: 20px;
        line-height: 1.5;
    }
    .page-opencampus-event__flow .c-step-row__desc.c-step-row__desc {
        font-size: 14px;
        line-height: 1.6;
        color: var(--ytc-text-secondary, #787878);
    }
}

/* ---------------------------------------------------------------------------
 * WEB相談会 FLOW (--inline): Figma は 3 カード横並び (STEP 16px / タイトル 20px / 説明 16px)。
 * 基本指定の flex-direction: column が勝って縦積みになっていたのを修正
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .page-opencampus-event__flow.page-opencampus-event__flow--inline {
        flex-direction: row;
        gap: 36px;
    }
    .page-opencampus-event__flow--inline > .c-step-row.c-step-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-height: 0;
        padding: 20px 24px;
    }
    .page-opencampus-event__flow--inline > .c-step-row:not(:last-child)::after {
        top: 50%;
        bottom: auto;
        left: auto;
        right: -27px;
        width: 16px;
        height: 0;
        border: 0;
        border-top: 1px dashed var(--ytc-border-strong, #39364e);
        transform: none;
    }
    .page-opencampus-event__flow--inline .c-step-row__no.c-step-row__no {
        min-width: 0;
        font-size: 16px;
        align-items: center;
    }
    .page-opencampus-event__flow--inline .c-step-row__body.c-step-row__body {
        flex: 0 1 auto;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0;
    }
    .page-opencampus-event__flow--inline .c-step-row__title.c-step-row__title {
        font-size: 20px;
        line-height: 1.5;
    }
    .page-opencampus-event__flow--inline .c-step-row__desc.c-step-row__desc {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* SP: DATES カード = Figma「Schedule Row」(左に 62x52 の日付ブロック、右にイベント名・時間) */
@media screen and (max-width: 768px) {
    .page-opencampus-event__schedule-grid > .c-schedule.c-schedule {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
        padding: 10px 14px 10px 10px;
        border-radius: 5px;
        text-align: left;
    }
    .page-opencampus-event__schedule-grid .c-schedule__date.c-schedule__date {
        grid-row: 1 / span 2;
        grid-column: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        width: 62px;
        height: 52px;
        padding: 0;
        border-radius: 8px;
    }
    .page-opencampus-event__schedule-grid .c-schedule__date-ymd {
        font-size: 16px;
        line-height: 1;
    }
    .page-opencampus-event__schedule-grid .c-schedule__date-dow {
        font-size: 11px;
        line-height: 1.2;
    }
    .page-opencampus-event__schedule-grid .c-schedule__badge.c-schedule__badge {
        grid-column: 2;
        justify-self: start;
        align-self: end;
        margin: 0;
    }
    .page-opencampus-event__schedule-grid .c-schedule__title.c-schedule__title {
        grid-column: 2;
        align-self: start;
        margin: 0;
        width: auto;
        text-align: left;
        font-size: 14px;
    }
    .page-opencampus-event__schedule-grid > .c-schedule > .c-schedule__date:only-child,
    .page-opencampus-event__schedule-grid > .c-schedule:not(:has(.c-schedule__badge)) .c-schedule__title {
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* WEB相談会 STYLE: Figma は番号なし (タイトル 24px + 説明)。テンプレの body_modifier=web-consult の意図どおり番号を隠す */
.page-opencampus-event--web-consult .page-opencampus-event__content-grid .c-feature-numbered__no {
    display: none;
}
@media screen and (min-width: 769px) {
    .page-opencampus-event--web-consult .page-opencampus-event__content-grid .c-feature-numbered__title.c-feature-numbered__title {
        font-size: 24px;
        line-height: 1.2;
    }
}
@media screen and (max-width: 768px) {
    .page-opencampus-event--web-consult .page-opencampus-event__content-grid > .c-feature-numbered.c-feature-numbered {
        grid-template-columns: 1fr;
    }
    .page-opencampus-event--web-consult .page-opencampus-event__content-grid .c-feature-numbered__desc.c-feature-numbered__desc {
        grid-column: 1;
    }
}

/* WEB相談会 ABOUT: SP 共通指定 (c-text-card 横並び) で見出しが 1 文字幅の縦書き状態になっていた → Figma どおり見出しの下に本文 */
@media screen and (max-width: 768px) {
    .page-opencampus-event [aria-labelledby="oc-about-heading"] .c-text-card.c-text-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * [layout-restore] 2026-10-19 企業学費支援説明会 (/opencampus/tuition-briefing/) FLOW を Figma 準拠に戻す
 *   PC: Figma「Step Item / PC」203x128 の STEP カードを横一列 (カード間 10+16px 点線+10 = 36px)、
 *       pad 20/24・角丸 10・濃色 1px 枠・白、STEP 16px/700 青、見出し 18px/700、説明 16px グレー、中央揃え
 *   SP: Figma「Step Item」縦積み (pad 14/16・角丸 5、STEP 11px → 見出し → 説明 14px、左揃え、縦の点線 16px)
 *   旧 2026-10-13「縦リストに揃える」は妥協だったため上書き。マークアップ (c-step-row) は不変
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow.page-opencampus-event__flow {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        flex-direction: row;
        gap: 36px;
        width: 100%;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow > .c-step-row.c-step-row {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 128px;
        padding: 20px 24px;
        background: #fff;
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 10px;
        text-align: center;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow > .c-step-row:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        bottom: auto;
        left: auto;
        right: -27px;
        width: 16px;
        height: 0;
        border: 0;
        border-top: 1px dashed var(--ytc-border-strong, #39364e);
        transform: none;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__no.c-step-row__no {
        display: block;
        width: 100%;
        min-width: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        color: var(--ytc-bg-brand, #439fff);
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__body.c-step-row__body {
        flex: 1 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-height: 62px;
        padding: 0;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__title.c-step-row__title {
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__desc.c-step-row__desc {
        font-size: 16px;
        line-height: 1.6;
        color: var(--ytc-text-secondary, #787878);
        text-align: center;
    }
}
@media screen and (max-width: 768px) {
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow.page-opencampus-event__flow {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow > .c-step-row.c-step-row {
        align-items: flex-start;
        gap: 6px;
        padding: 14px 16px 16px;
        border-radius: 5px;
        text-align: left;
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow > .c-step-row:not(:last-child)::after {
        left: 50%;
        right: auto;
        top: auto;
        bottom: -21px;
        width: 0;
        height: 16px;
        border: 0;
        border-left: 1px dashed var(--ytc-border-strong, #39364e);
        transform: translateX(-50%);
    }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__no.c-step-row__no { font-size: 11px; line-height: 1; }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__body.c-step-row__body { gap: 6px; }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__title.c-step-row__title { font-size: 18px; line-height: 1.5; text-align: left; }
    .page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__desc.c-step-row__desc { font-size: 14px; line-height: 1.6; text-align: left; }
}
/* [layout-restore] STEP ラベル (span) は親の 16px/11px を継承させる (基本指定 14px を打ち消し) */
.page-template-page-opencampus-tuition-briefing .page-opencampus-event__flow .c-step-row__no-label { font-size: inherit; }

/* 2026-10-20 開催日程: 今日以降の日程が無いときの案内 */
.page-opencampus-event__schedule-empty {
    margin: 0;
    padding: 32px 24px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}
@media screen and (max-width: 768px) {
    .page-opencampus-event__schedule-empty { padding: 24px 16px; font-size: 14px; }
}

/* GALLERY (2026-10-20: 鈑金塗装科ページの GALLERY と同じ見た目 / 4列・間20・角丸10・枠線) */
.page-opencampus-event__gallery-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}
.page-opencampus-event__gallery-item {
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.page-opencampus-event__gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 275 / 207;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
    .page-opencampus-event__gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}