/*---------------------------------

  共通

---------------------------------*/

.title{
    font-weight: 900;
}

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

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

}

/*---------------------------------

  KV

---------------------------------*/
.kv{
    position: relative;
    padding: 27px 0 186px;
    background: linear-gradient(90deg, var(--bg01) 40%, var(--bg02) 40%);
}

.kv .catch{
    display: block;
    margin-bottom: 48px;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.1;
}

.kv .catch .en{
    display: block;
    margin: 24px 0 0;
    font-size: 20px;
    line-height: 1.2;
}


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

    .kv{
        padding: 40px 0 110px;
    }
    .kv .catch{
        margin-bottom: 32px;
        font-size: 44px;
    }
    .kv .catch .en{
        margin: 16px 0 0;
        font-size: 13px;
    }
    .kv .pic img{
        height: 384px;
        object-fit: cover;
    }
    
}

/*---------------------------------

  bnr_list

---------------------------------*/

.bnr_list{
    gap: 13px;
    width: 100%;
    margin-top: 90px;
}
.bnr_list li{
    width: calc((100% - 39px)/4);
}
.bnr_list li a{
    display: block;
    width: 100%;
    background: #fff;
}
.bnr_list li a:hover img{
    opacity: .7;
}

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

    .bnr_list{
        gap: 8px 2%;
        width: 90%;
        margin: auto;
        margin-top: 30px;
    }
    .bnr_list li{
        width: 49%;
    }
    .bnr_list li a{
        min-height: inherit;
    }
    
}



/*---------------------------------

  important_news

---------------------------------*/

.important_news{
    margin-top: 126px;
}
.important_news .ttl{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 300px;
    background: #DCDCDC;
    color: var(--main);
    font-size: 19px;
}
.important_news .ttl::before{
    content: '';
    display: inline-block;
    width: 38px;
    height: 38px;
    
    background: url(/wp-content/themes/cuse/img/common/ico_info.png) no-repeat;
    background-size: 38px;
}
.important_news .news_list{
    width: calc(100% - 300px);
    padding: 48px 64px 56px;
    background: #fff;
}
.important_news .news_list li + li{
    margin-top: 32px;
}
.important_news .news_list li .date{
    font-size: 16px;
    line-height: 1.2;
}
.important_news .news_list .category{
    display: inline-block;
    min-width: 92px;
    height: 21px;
    padding: 4px 5px 0;
    margin: 0 0 0 16px;
    background: var(--text);
    border-radius: 40px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}
.important_news .news_list li a{
    display: block;
    margin: 4px 0 0;
    color: var(--text);
    font-size: 16px;
    text-decoration: underline;
}

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

    .important_news{
        margin-top: 60px;
    }
    .important_news .ttl{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 76px;
        padding: 0 20px;
        color: var(--main);
        font-size: 18px;
    }
    
    .important_news .news_list{
        width: 100%;
        padding: 32px 24px;
        background: #fff;
    }
    
}


/*---------------------------------

  bloc_news

---------------------------------*/

.bloc_news{
    position: relative;
    padding: 0px 0 140px;
}
.bloc_news::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -150px;
    display: block;
    width: 435px;
    height: 707px;
    background: url(/wp-content/themes/cuse/img/home/news_bg.jpg) no-repeat;
    background-size: 435px;
}
.bloc_news .inner{
    max-width: 985px;
}
.bloc_news .title{
    position: relative;
    top: -50px;
    margin: 0 0 20px;
    color: var(--text);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}
.bloc_news .title .en{
    display: block;
    font-size: 88px;
    line-height: 1.2;
}
.bloc_news .newscat_list{
    gap: 10px;
    position: relative;
    top: -30px;
}
.bloc_news .newscat_list li{
    display: block;
    min-width: 120px;
    min-height: 34px;
    padding: 6px 5px 0;
    background: var(--sub);
    border-radius: 90px;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.bloc_news .newscat_list li.active{
    background: var(--main);
    color: #fff;
    cursor: inherit;
}
.bloc_news .newscat_list li:hover{
    background: var(--main);
    color: #fff;
}

.bloc_news .news_list{
    position: relative;
    padding: 64px 80px;
    background: #fff;
}
.bloc_news .news_list li + li{
    margin-top: 40px;
}
.bloc_news .news_list li .date{
    font-size: 16px;
    line-height: 1.2;
}
.bloc_news .news_list li .category{
    display: inline-block;
    min-width: 92px;
    height: 21px;
    padding: 4px 5px 0;
    margin: 0 0 0 16px;
    background: var(--text);
    border-radius: 40px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    vertical-align: 2px;
}
.bloc_news .news_list li a{
    display: block;
    margin: 4px 0 0;
    color: var(--text);
    font-size: 16px;
    text-decoration: underline;
    text-underline-position: from-font;
}
.bloc_news .btn{
    float: right;
    padding: 0 0 0 20px;
    margin: 24px 0 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
}
.bloc_news .btn::before{
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(-45deg);
}

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

    .bloc_news{
        position: relative;
        padding: 0px 0 140px;
    }
    .bloc_news::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: -150px;
        display: block;
        width: 203px;
        height: 416px;
        background: url(/wp-content/themes/cuse/img/home/news_bg.jpg) no-repeat;
        background-size: cover;
    }
    
    .bloc_news .title{
        top: -30px;
        margin: 0 0 30px;
        font-size: 16px;
    }
    .bloc_news .title .en{
        font-size: 48px;
    }
    
    .bloc_news .newscat_list li{
        min-width: 85px;
        min-height: 30px;
        padding: 4px 15px 0;
    }
    
    .bloc_news .news_list{
        padding: 32px 24px;
    }    
    
}

/*---------------------------------

  bloc_features

---------------------------------*/

.bloc_features{
    padding: 210px 0 215px;
    background: url(/wp-content/themes/cuse/img/home/features_bg.jpg) no-repeat top;
    background-size: 100%;
}

.bloc_features .title{
    color: var(--text);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}
.bloc_features .title .en{
    display: block;
    font-size: 104px;
    line-height: 1.2;
}
.bloc_features nav{
    padding: 72px 0 0;
}
.bloc_features ul{
    gap: 60px;
    justify-content: center;
}
.bloc_features li{
    position: relative;
    width: 248px; 
}
.bloc_features li .num{
    position: absolute;
    top: -60px;
    left: -30px;
    color: #fff;
    font-size: 80px;
    font-weight: 400;
}
.bloc_features li a{
    display: block;
    padding: 0 0 8px;
    color: var(--main);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
}
.bloc_features .arrow_r_o::after{
    top: auto;
    bottom: 0;
}
.bloc_features li a img{
    margin: 0 0 24px;
}

@media screen and (max-width:1300px){
 
    .bloc_features nav{
        background-color: transparent;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .bloc_features ul{
        width: max-content;
        margin: 0 30px;
    }

}

@media screen and (max-width:767px){
 
    .bloc_features{
        padding: 177px 0 110px;
        background: url(/wp-content/themes/cuse/img/home/features_bg.jpg) no-repeat top;
        background-size: 100%;

    }
    .bloc_features .title{
        width: 90%;
        margin: auto;
        font-size: 16px;
        text-align: left;
    }
    .bloc_features .title .en{
        font-size: 56px;
    }
    .bloc_features ul{
        gap: 50px;
    }
    .bloc_features li{
        width: 186px;
    }
    .bloc_features li .num{
        top: -48px;
        left: -24px;
        font-size: 60px;
    }
    .bloc_features li a{
        font-size: 18px;
    }
    .bloc_features .arrow_r_o::after{
        width: 30px;
        height: 30px;
        background: url(/wp-content/themes/cuse/img/common/arrow_r.png) no-repeat center center;
        background-size: 12px;
        background-color: var(--sub);
        bottom: 3px;
    }

    
}

/*---------------------------------

  bloc_content

---------------------------------*/

.bloc_content{
    padding: 0 0 160px;
    background: #fff;
}
.bloc_content .title{
    position: relative;
    top: -80px;
}
.bloc_content .title .en{
    color: var(--sub);
    font-size: 120px;
    font-weight: 400;
    line-height: 1.2;
}
.bloc_content .content_list{
    position: relative;
    width: 100%;
    padding: 0 50% 0 0;

}
.bloc_content .content_list li:first-child{
    border-top: 1px solid var(--main);
}
.bloc_content .content_list li a{
    display: flex;
    align-items: center;
    height: 120px;
    width: 100%;
    border-bottom: 1px solid var(--main);
    color: var(--main);
    font-size: 24px;
    line-height: 1.1;
}
.bloc_content .content_list::after{
    content: '';
    position: absolute;
    right: calc(50% - 50vw + 52px);
    top: 0;
    display: block;
    width: calc(50vw - 130px);
    height: 100%;
    background: url(/wp-content/themes/cuse/img/home/content_img.jpg) no-repeat;
    background-size: cover;
}

.bloc_content .bnr_list{
    margin-top: 90px; 
}

@media screen and (max-width:767px){
 
    .bloc_content{
        padding: 0 0 80px;
        background: #fff;
    }
    .bloc_content .title{
        top: -50px;
    }
    .bloc_content .title .en{
        font-size: 64px;
    }
    .bloc_content .content_list{
        padding: 0 0 390px;
    }
    .bloc_content .content_list li a{
        height: 100px;
        font-size: 20px;
    }
    .bloc_content .content_list::after{
        content: '';
        right: calc(50% - 50vw);
        top: auto;
        bottom: 0;
        width: 100vw;
        height: 315px;
    }
    
}

/*----------------------

  コード例

.feature > .sec::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 430px;
    height: 450px;
    background: url(/wp-content/themes/cuse/img/common/feature_bg_img_03.svg) no-repeat;
    mix-blend-mode: multiply;
}

.feature > .sec ol li:nth-child(1){
    position: relative;
    left: 77px;
    width: 817px;
    height: 183px;
    padding: 60px 180px 0 155px;
    margin: 0 0 30px;
    background: url(/wp-content/themes/cuse/img/top/icon_01.png) no-repeat right 60px center , url(/wp-content/themes/cuse/img/top/feature01_box.svg) no-repeat;
    background-size: 92px , contain; 
}
    background: linear-gradient(86.23deg, #FF8C00 7.17%, #FF4000 100.81%);
---------------------------------*/