@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap");

/*PAGES------------------------------------------------------*/
/* .p-secondHeader（ページ見出し部分） */
.p-secondHeader {
    background-color: #E6F0FF;
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 240px;
}

@media only screen and (max-width: 768px) {
    .p-secondHeader {
        min-height: 120px;
        padding: 0 15px;
        margin: 0 0 20px;
    }
}

.p-secondHeader__inner,
.c-text__base,
.c-subttl__base,
.c-ttl__base.__sizeL {
    width: 1180px;
    margin: 0 auto;
}

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

    .p-secondHeader__inner,
    .c-text__base,
    .c-subttl__base,
    .c-ttl__base.__sizeL {
        width: 100%;
    }
}

.p-secondHeader__sub {
    font-size: 18px;
    color: #a1c9ff;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
}

@media only screen and (max-width: 768px) {
    .p-secondHeader__sub {
        font-size: 14px;
    }
}

.p-secondHeader__ttl {
    font-size: 44px;
    font-weight: 700;
    color: #006ab7;
    line-height: 1.1;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .p-secondHeader__ttl {
        font-size: 20px;
        padding: 0;
    }
}


/*TEXT--------------------------------------------------------*/
/* .c-text__base（説明文） */
@media only screen and (min-width: 769px) {
    .c-text__base {
        font-size: 2.4rem;
        margin: 40px auto 80px;
    }
}

.c-text__base p:not(:last-child) {
    margin-bottom: 3.2rem;
}

@media only screen and (max-width: 768px) {
    .c-text__base p:not(:last-child) {
        margin-bottom: 1.6rem;
    }
}

/*TITLE--------------------------------------------------------*/
/* .c-subttl__base（MANUAL_01などの小見出し） */
.c-subttl__base {
    line-height: 1;
    color: #a1c9ff;
    font-weight: 600;
    font-size: 15px;
}

.c-subttl__base:has(+ .c-ttl__base.__sizeL) {
    font-size: 15px;
}

@media only screen and (max-width: 768px) {
    .c-subttl__base:has(+ .c-ttl__base.__sizeL) {
        font-size: 14px;
        margin: 40px 0 0;
        padding: 0 10px;
    }
}

/* .c-ttl__base（各パートの見出し） */
.c-ttl__base {
    font-weight: 700;
    color: var(--color-01);
    line-height: 1.4;
    font-size: 2rem;
}

.c-ttl__base:has(+ *) {
    margin-bottom: 1.6rem;
}

@media only screen and (max-width: 768px) {
    .c-ttl__base {
        font-size: 1.6rem;
    }
}

.c-ttl__base.__sizeL {
    color: #006ab7;
    line-height: 1.8;
    font-size: 24px;
}

.c-ttl__base.__sizeL span {
    font-size: 20px;
}

.c-ttl__base.__sizeL:has(+ *) {
    margin-bottom: 3.2rem;
    font-size: 24px;
}

@media only screen and (max-width: 768px) {
    .c-ttl__base.__sizeL {
        font-size: 20px;
        padding: 0 15px;
    }

    .c-ttl__base.__sizeL span {
        font-size: 16px;
    }
}

/* .c-ttl__topSection__sub（p-strengths内のサブ見出し。今回は空pだが構造上必要） */
.c-ttl__topSection__sub {
    font-size: 2rem;
    color: var(--color-08);
    margin-bottom: 1.2rem;
    line-height: 1.1;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .c-ttl__topSection__sub {
        font-size: 1.4rem;
    }
}

/*SECTION--------------------------------------------------------*/
/* .p-strengths（動画一覧を囲むセクション） */
.p-strengths {
    padding: 80px 0;
    background-color: #eff0f8;
    margin: 20px auto 80px;
}

@media only screen and (max-width: 768px) {
    .p-strengths {
        padding: 30px 15px;
        margin: 10px auto 40px;
    }
}

.p-strengths .c-ttl__topSection__sub,
.p-strengths .c-ttl__topSection {
    text-align: center;
}

/*LAYOUT--------------------------------------------------------*/
/* .c-flex__img（動画カードのグリッド） */
.c-flex__img {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

@media only screen and (max-width: 768px) {
    .c-flex__img {
        width: 100%;
        gap: .8rem;
        flex-direction: column;
    }
}

.c-flex__img.__col3>div {
    width: 31.92%;
}

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

    .c-flex__img.__col3>div,
    .c-flex__img.__col3>div iframe {
        width: 100%;
    }

    .c-flex__img.__col3 h3 {
        padding: 0 0 10px;
        font-size: 14px;
    }
}

h3.contents_heading_h3 {
    font-weight: 700;
}

/*UTILITY--------------------------------------------------------*/
/* フォント（数字・英字用） u-fm__rubik / MANUALの文字用 */
.u-fm__rubik {
    font-family: "Rubik", serif;
}