@charset "UTF-8";

main{
    max-width: 100%;
}

/* section 背景*/
.frontpage_topics{
    border-radius: 100px;
    background-color: var(--gray);
}

@media screen and (min-width: 0px) {
    main{
        margin-top: 2.5em;
        margin-right: 0em;
    }
    main.front_page{
        margin-top: unset;
    }

    .frontpage_topics{
        padding: 6em 1.25em;
    }
}

@media screen and (min-width: 768px) {
    .frontpage_topics{
        padding: 6em 4em;
    }
}

@media screen and (min-width: 1024px) {
    main{
        margin-top: 130px;
    }

    main.front_page{
        margin-top: 130px;
    }
}

/*====================================
メインビジュアル
=====================================*/
.mainv_area{
    margin-top: 1em;
    max-width: 100%;
    width: 100%;
    position: relative;
}

.mainv{
    width: 100%;
    height: 100%;
    background-color: var(--gray);
    overflow: hidden;
}

.mainv .mainv_splide__bt{
    margin-top: 0em;
    padding: 0 2em;
    justify-content: end;
    position: absolute;
    bottom: 1.5em;
}

.mainv .splide__track{
    height: 100%;
}

.mainv .splide__slide img{
    object-fit: cover;
    object-position: right;
}

.mainv_catchcopy{
    position: absolute;
    bottom: 3em;
    left: 5em;
    z-index: 1;
}

.mainv_catchcopy p{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: var(--white);
    font-size: 2em;
    line-height: 1.75;
    filter: drop-shadow(0px 0px 5px rgb(13 39 132 / 20%))
}

@media screen and (min-width: 0px) {
    .mainv_area{
        padding: 0em 1em;
        height: auto;
    }

    .mainv{
        border-radius: 30px;
    }

    .mainv_catchcopy{
        bottom: 5em;
        left: 2.5em;
    }

    .mainv_catchcopy p{
        font-size: 1.15em;
        line-height: 1.75;
    }
}

@media screen and (min-width: 768px) {
    .mainv{
        border-radius: 60px;
    }

    .mainv_catchcopy{
        left: 4em;
    }

    .mainv_catchcopy p{
        font-size: 1.75em;
        line-height: 2;
    }
}

@media screen and (min-width: 1024px) {
    .mainv_area{
        padding: 0em 1.5em;
        height: calc(100vh - (130px + 1.5em));
    }

    .mainv_catchcopy{
        bottom: 3em;
        left: 5em;
    }

    .mainv_catchcopy p{
        font-size: 2em;
        line-height: 1.75;
    }
}

/*====================================
重要なお知らせ
=====================================*/
.important_news__area{
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 20px;
    border: solid 2px var(--red);
    background-color: var(--white);
}

.important_news__area h3{
    font-family: "Zen Maru Gothic", sans-serif;
    color: var(--red);
    display: flex;
    align-items: flex-end;
    font-size: 1.5em;
    font-weight: 500;
    gap: 0.5em;
}

.important_news__icon{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--red);
    -webkit-mask-image: url('../img/icon/important.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat:no-repeat;
    mask-image: url('../img/icon/important.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
}

.important_news__area .news_post{
    margin: 0;
    border-bottom: unset;
}

@media screen and (min-width: 0px) {
    .important_news__area{
        padding: 0.75em;
        margin-top: 1.5em;
        flex-wrap: wrap;
        gap: 1.5em;
    }

    .important_news__area .news_post{
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .important_news__area{
        padding: 1.25em;
    }
}

@media screen and (min-width: 1024px) {
    .important_news__area{
        gap: 0em;
    }
}

@media screen and (min-width: 1025px) {

}

@media screen and (min-width: 1440px) {
    .important_news__area{
        margin-top: 4em;
        flex-wrap: nowrap;
        gap: 1.5em;
    }

    .important_news__area .news_post{
        width: auto;
        flex: 1;
    }

}

/*====================================
ページコンテンツ
=====================================*/
.page_group{
    margin-bottom: 100px;
}
/*====================================
活動紹介
=====================================*/
.frontpage_topics{
    background-color: var(--gray);
}

.frontpage_topics h2{
    width: 100%;
}

.frontpage_topics h2.top_tit::after {
    content: 'topics';
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--gray2);
    position: absolute;
    bottom: -2em;
    left: 0em;
}

.frontpage_topics a.topics_category__link{
    background-color: var(--white);
}

.topics{
    display: grid;
    gap: 3em;
    justify-items: start;
    align-items: baseline;
    position: relative;
}

.topics_item{
    width: 100%;
}

.frontpage_topics .bt_area{
    margin-top: 2.5em;
    display: flex;
    justify-content: center;
}


@media screen and (min-width: 0px) {
    .topics{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        gap: 2em;
    }
}

@media screen and (min-width: 425px) {

}

@media screen and (min-width: 768px) {
    .topics{        
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1024px) {
    .topics{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3em;
    }

    .frontpage_topics{
        padding-left: 4em;
    }

    .frontpage_topics .bt_area{
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 1440px) {
    .frontpage_topics .bt_area{
        margin-left: 0;
    }
}

/*====================================
お知らせ
=====================================*/
.frontpage_news h2.top_tit::after {
    content: 'news';
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--gray2);
    position: absolute;
    bottom: -2em;
    left: 0em;
}

.frontpage_news .bt_area{
    margin-top: 3em;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 0px) {
    .frontpage_news{
        padding: 3em 1.5em;
    }
}

@media screen and (min-width: 425px) {

}

@media screen and (min-width: 768px) {
    .frontpage_news{
        padding: 3em;
    }

    .news_area{
        padding: 0 1.5em;
    }
}