@charset "UTF-8";
/* スマホ・タブレット対応 */

/* ========================================
   Workページ 1100px以下
======================================== */

@media screen and (max-width: 1100px) {


    .work-app-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .work-learning-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

    .work-learning-arrow {
        display: none;
    }

    .work-program-board {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 28px 16px;
    }

    .work-program-line {
        display: none;
    }

    .work-program-dot {
        display: none;
    }
}


/* ========================================
   Workページ 768px以下
======================================== */

@media screen and (max-width: 768px) {

    .work-hero {
        min-height: 100svh;

        padding:
            calc(var(--header-height) + 60px)
            20px
            90px;
            background:
        radial-gradient(
            circle at 18% 30%,
            rgb(36 233 255 / 16%),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 58%,
            rgb(255 143 216 / 13%),
            transparent 32%
        ),
        radial-gradient(
            circle at 62% 12%,
            rgb(184 156 255 / 12%),
            transparent 25%
        ),
        #050505;
    }

    .work-hero-inner {
        grid-template-columns: 1fr;
        gap: 45px;

        text-align: center;
    }


    .work-hero-catch {
        font-size:
            clamp(1.35rem, 5.5vw, 1.9rem);
    }

.work-hero-text {
    margin-right: auto;
    margin-left: auto;

    font-size: clamp(0.625rem, 3vw, 0.95rem);
}

.work-hero-line {
    display: block;
    white-space: nowrap;
}
    .work-hero-visual {
        width:
            min(360px, 88vw);

        margin: 0 auto;
    }

    .work-hero-button {
        width: 100%;
        min-width: 0;
    }


    /* セクション */

    .work-section {
        padding:
            85px 20px;
    }

    .work-heading {
        gap: 14px;

        margin-bottom: 42px;
    }

    .work-heading::before {
        width: 32px;
    }

    .work-heading-number {
        font-size: 3rem;
    }

/* 「Beスポーツで取り組むお仕事」を1行にする */
.work-category .work-heading-ja {
    font-size: clamp(1.05rem, 5vw, 1.45rem);
    white-space: nowrap;
}
/* 「使用するアプリケーション」を1行にする */
.work-app .work-heading-ja {
    font-size: clamp(1.2rem, 5.8vw, 1.6rem);
    white-space: nowrap;
}
/* 「初心者から段階的に学べる」を1行にする */
.work-learning .work-heading-ja {
    font-size: clamp(1.1rem, 5.8vw, 1.6rem);
    white-space: nowrap;
}
/* 「活動を通して身につく力」を1行にする */
.work-skill .work-heading-ja {
    font-size: clamp(1.3rem, 6.5vw, 1.75rem);
    white-space: nowrap;
}
    /* 仕事内容 */

    .work-category-grid {
        grid-template-columns: 1fr;
    }

    .work-category-card {
        min-height: 0;
    }
/* カード内の見出しを同じ大きさに揃える */
.work-category-card h3,
.work-learning-step h3 {
    font-size: 1.45rem;
}
/* アプリ */

    .work-app-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .work-app-card {
        min-height: 0;
    }


    /* 学び方 */

    .work-learning-flow {
        grid-template-columns: 1fr;
    }

    .work-learning-step {
        min-height: 0;
    }


    /* 1日プログラム */

    .work-program-board {
        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            24px 16px;
    }

    .work-program-item {
        display: grid;
        grid-template-columns:
            72px 1fr;

        align-items: stretch;
        gap: 14px;

        text-align: left;
    }

    .work-program-item time {
        display: flex;
        align-items: center;

        color: #24e9ff;
    }

    .work-program-content {
        min-height: 0;

        padding:
            18px 16px;
    }
/* 1日のプログラムの項目名を少し大きくする */
.work-program-content h3 {
    font-size: 1.2rem;
}

    /* 身につく力 */

    .work-skill-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* CTA */

    .work-cta {
        padding:
            90px 20px;
    }

    .work-cta h2 {
        font-size:
            clamp(2rem, 8vw, 3.2rem);
    }

    .work-cta h2 br {
        display: none;
    }

    .work-cta-buttons {
        flex-direction: column;
    }

    .work-cta-button {
        width: 100%;
        min-width: 0;
    }
}


/* ========================================
   Workページ 480px以下
======================================== */

@media screen and (max-width: 480px) {

    .work-hero-title {
        font-size: 2.9rem;
    }

    .work-hero-catch br {
        display: none;
    }

    .work-hero-visual {
        width: 290px;
    }

    .work-floating-word {
        padding:
            7px 11px;

        font-size: 0.56rem;
    }

    .work-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .work-heading {
        align-items: flex-start;
    }

    .work-heading::before {
        display: none;
    }

    .work-heading-number {
        font-size: 2.5rem;
    }

    .work-category-card {
        padding:
            28px 22px;
    }

    .work-app-grid {
        grid-template-columns: 1fr;
    }

    .work-program-item {
        grid-template-columns:
            58px 1fr;
    }

    .work-program-item time {
        font-size: 0.9rem;
    }

    .work-skill-grid {
        grid-template-columns: 1fr;
    }
}