:root{
    --news_font_base:"IBM Plex Sans JP", sans-serif;
    --news_font_en:"Jost", sans-serif;
    --news_font_mincho:"Shippori Mincho B1", serif;
    --news_color_text:#32373E;
    --news_color_text_light:#6B6F75;
    --news_color_line_light:#B7B9BD;
    --news_color_text_dark:#20242a;
    --news_color_red:#C50018;
    --news_color_white:#ffffff;
    --news_color_black:#000000;
    --news_color_bg:#F0F1F4;
    --news_color_bg_light:#f7f7f7;
    --news_color_line:#CCCFD1;
    --news_color_border:#c5cbd1;
    --news_color_maker_border:#d9dde1;
}



.first_area{
    padding: 0px 16px;

    .first_wrap{
        max-width: 1120px;
        margin: 0px auto;

        .satei_ttl_lead{
            max-width: 800px;
            font-family: var(--news_font_base);
            margin: 0px auto;

            .satei_ttl_lead_text{
                font-size: 16px;
                line-height: 28px;
                margin-bottom: 24px;
            }
            .satei_ttl_lead_note{
                font-size: 14px;
                line-height: 20px;
                color: var(--news_color_text_light);
            }
        }
    }
}

.news_list_area{
    padding: 0 16px;
    margin-top: 96px;

    .news_list_wrap{
        max-width: 1120px;
        margin: 0 auto;
    }
    .news_list_container{
        border-top: 1px solid var(--news_color_line);
    }
    .news_list_item{
        display: block;
        position: relative;
        padding: 46px 48px 40px 0;
        color: var(--news_color_text_dark);
        border-bottom: 1px solid var(--news_color_line);

        &:hover{
            opacity: 0.7;
        }
        &:after{
            content: '';
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: url('../images/news/arrow.png') center / contain no-repeat;
        }
        .news_list_meta{
            display: flex;
            align-items: center;
            gap: 19px;
            margin-bottom: 24px;
            font-family: var(--news_font_base);
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: var(--news_color_text_light);

            time{
                font-family: var(--news_font_en);
            }
            span{
                padding: 2px 13px 0;
                font-size: 12px;
                line-height: 18px;
                border: 1px solid var(--news_color_line_light);
                color: var(--news_color_text);
                border-radius: 12px;
            }
        }
        h2{
            margin-bottom: 7px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 18px;
            line-height: 26px;
            color: var(--news_color_text_dark);
            letter-spacing: 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        p{
            max-width: 1056px;
            margin: 0;
            font-family: var(--news_font_base);
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: var(--news_color_text_light);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }
}

.news_pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 48px;

    a{
        color: var(--news_color_text_dark);
    }
    .news_pagination_arrow{
        width: 60px;
        height: 48px;
        background: url('../images/news/pagination-prev.png') center / contain no-repeat;

        &:hover{
            opacity: 0.7;
        }
    }
    .news_pagination_next{
        transform: rotate(180deg);
    }
    .news_pagination_number,
    .news_pagination_dots{
        font-family: var(--news_font_base);
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: var(--news_color_text_dark);
    }
    .news_pagination_number{
        min-width: 12px;
        text-align: center;

        &.active{
            color: var(--news_color_red);
            text-decoration: underline;
            text-underline-offset: 3px;
        }
    }
}

.news_detail_area{
    padding: 0 16px;
    margin-top: 96px;

    .news_detail_wrap{
        max-width: 800px;
        margin: 0 auto;
    }
    .news_detail_meta{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;
        font-family: var(--news_font_base);
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: var(--news_color_text_light);

        time{
            font-family: var(--news_font_en);
        }
        span{
            padding: 2px 13px 0;
            font-size: 14px;
            line-height: 20px;
            color: var(--news_color_text);
            border: 1px solid var(--news_color_line_light);
            border-radius: 12px;
        }
    }
    .news_detail_article{
        h2{
            margin-bottom: 32px;
            padding-bottom: 18px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 28px;
            line-height: 42px;
            letter-spacing: 0;
            color: var(--news_color_text_dark);
            border-bottom: 1px solid var(--news_color_line);
        }
    }
    .news_detail_content{
        p{
            margin-bottom: 28px;
            font-family: var(--news_font_base);
            font-weight: 500;
            font-size: 16px;
            line-height: 28px;
            color: var(--news_color_text);
        }
        .news_detail_attention{
            font-weight: 600;
            color: var(--news_color_red);
        }
        figure{
            margin: 40px 0 48px;
            border-radius: 4px;
            overflow: hidden;

            img{
                width: 100%;
            }
        }
        h3{
            margin-bottom: 21px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 22px;
            line-height: 33px;
            letter-spacing: 0;
            color: var(--news_color_text_dark);
        }
        h4{
            margin-bottom: 22px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 0;
            color: var(--news_color_text_dark);
        }
        a:not(.news_detail_button){
            font-family: var(--news_font_base);
            font-weight: 500;
            font-size: 16px;
            line-height: 28px;
            color: #0356CB;
            text-decoration: underline;
            text-underline-offset: 3px;

            &:hover{
                opacity: 0.7;
            }
        }
        .news_detail_button{
            display: block;
            width: 100%;
            max-width: 374px;
            margin: 40px auto 96px;
            padding: 21px 50px 19px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            text-align: center;
            color: var(--news_color_text);
            background: url(../images/news/link-button-arrow.png) center right 20px / 24px no-repeat;
            background-color: var(--news_color_white);
            border: 1px solid var(--news_color_line);
            border-radius: 50px;

            &:hover{
                color:#C50018;
                border-color:#C50018;
                opacity: 1 !important;
            }
        }
    }
    .news_detail_nav{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 96px;
        position: relative;
        margin-top: 56px;

        &:before{
            content: '';
            width: 1px;
            height: 40px;
            background-color: var(--news_color_line);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        a{
            display: flex;
            align-items: center;
            gap: 16px;
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: var(--news_color_text_dark);

            &:hover{
                opacity: 0.7;
            }
            &:before,
            &:after{
                content: '';
                display: block;
                width: 50px;
                height: 40px;
                background: url('../images/news/pagination-prev.png') center / contain no-repeat;
                flex: none;
            }
        }
        .news_detail_nav_prev{
            &:after{
                content: none;
            }
        }
        .news_detail_nav_next{
            &:before{
                content: none;
            }
            &:after{
                transform: rotate(180deg);
            }
        }
    }
}




/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .first_area{
        padding: 0 1.111vw;
    
        .first_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
    
            .satei_ttl_lead{
                /* max-width: 55.556vw; */
                font-family: var(--news_font_base);
                margin: 0 auto;
    
                .satei_ttl_lead_text{
                    font-size: 1.111vw;
                    line-height: 1.944vw;
                    margin-bottom: 1.667vw;
                }
                .satei_ttl_lead_note{
                    font-size: 0.972vw;
                    line-height: 1.389vw;
                    color: var(--news_color_text_light);
                }
            }
        }
    }
    
    .news_list_area{
        padding: 0 1.111vw;
        margin-top: 6.667vw;
    
        .news_list_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
        }
        .news_list_container{
            border-top: 0.069vw solid var(--news_color_line);
        }
        .news_list_item{
            display: block;
            position: relative;
            padding: 3.194vw 3.333vw 2.778vw 0;
            color: var(--news_color_text_dark);
            border-bottom: 0.069vw solid var(--news_color_line);
    
            &:hover{
                opacity: 0.7;
            }
            &:after{
                content: '';
                position: absolute;
                top: 50%;
                right: 1.111vw;
                transform: translateY(-50%);
                width: 1.667vw;
                height: 1.667vw;
                background: url('../images/news/arrow.png') center / contain no-repeat;
            }
            .news_list_meta{
                display: flex;
                align-items: center;
                gap: 1.319vw;
                margin-bottom: 1.667vw;
                font-family: var(--news_font_base);
                font-weight: 500;
                font-size: 0.972vw;
                line-height: 1.389vw;
                color: var(--news_color_text_light);
    
                time{
                    font-family: var(--news_font_en);
                }
                span{
                    padding: 0.139vw 0.903vw 0;
                    font-size: 0.833vw;
                    line-height: 1.25vw;
                    border: 0.069vw solid var(--news_color_line_light);
                    color: var(--news_color_text);
                    border-radius: 0.833vw;
                }
            }
            h2{
                margin-bottom: 0.486vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.25vw;
                line-height: 1.806vw;
                color: var(--news_color_text_dark);
                letter-spacing: 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            p{
                /* max-width: 73.333vw; */
                margin: 0;
                font-family: var(--news_font_base);
                font-weight: 500;
                font-size: 1.111vw;
                line-height: 1.667vw;
                color: var(--news_color_text_light);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
    
    .news_pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.667vw;
        margin-top: 3.333vw;
    
        a{
            color: var(--news_color_text_dark);
        }
        .news_pagination_arrow{
            width: 4.167vw;
            height: 3.333vw;
            background: url('../images/news/pagination-prev.png') center / contain no-repeat;
    
            &:hover{
                opacity: 0.7;
            }
        }
        .news_pagination_next{
            transform: rotate(180deg);
        }
        .news_pagination_number,
        .news_pagination_dots{
            font-family: var(--news_font_base);
            font-weight: 600;
            font-size: 1.111vw;
            line-height: 1.111vw;
            color: var(--news_color_text_dark);
        }
        .news_pagination_number{
            min-width: 0.833vw;
            text-align: center;
    
            &.active{
                color: var(--news_color_red);
                text-decoration: underline;
                text-underline-offset: 0.208vw;
            }
        }
    }
    
    .news_detail_area{
        padding: 0 1.111vw;
        margin-top: 6.667vw;
    
        .news_detail_wrap{
            /* max-width: 55.556vw; */
            margin: 0 auto;
        }
        .news_detail_meta{
            display: flex;
            align-items: center;
            gap: 1.111vw;
            margin-bottom: 2.222vw;
            font-family: var(--news_font_base);
            font-weight: 500;
            font-size: 1.111vw;
            line-height: 1.389vw;
            color: var(--news_color_text_light);
    
            time{
                font-family: var(--news_font_en);
            }
            span{
                padding: 0.139vw 0.903vw 0;
                font-size: 0.972vw;
                line-height: 1.389vw;
                color: var(--news_color_text);
                border: 0.069vw solid var(--news_color_line_light);
                border-radius: 0.833vw;
            }
        }
        .news_detail_article{
            h2{
                margin-bottom: 2.222vw;
                padding-bottom: 1.25vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.944vw;
                line-height: 2.917vw;
                letter-spacing: 0;
                color: var(--news_color_text_dark);
                border-bottom: 0.069vw solid var(--news_color_line);
            }
        }
        .news_detail_content{
            p{
                margin-bottom: 1.944vw;
                font-family: var(--news_font_base);
                font-weight: 500;
                font-size: 1.111vw;
                line-height: 1.944vw;
                color: var(--news_color_text);
            }
            .news_detail_attention{
                font-weight: 600;
                color: var(--news_color_red);
            }
            figure{
                margin: 2.778vw 0 3.333vw;
                border-radius: 0.278vw;
                overflow: hidden;
    
                img{
                    width: 100%;
                }
            }
            h3{
                margin-bottom: 1.458vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.528vw;
                line-height: 2.292vw;
                letter-spacing: 0;
                color: var(--news_color_text_dark);
            }
            h4{
                margin-bottom: 1.528vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.389vw;
                line-height: 2.083vw;
                letter-spacing: 0;
                color: var(--news_color_text_dark);
            }
            a:not(.news_detail_button){
                font-family: var(--news_font_base);
                font-weight: 500;
                font-size: 1.111vw;
                line-height: 1.944vw;
                color: #0356CB;
                text-decoration: underline;
                text-underline-offset: 0.208vw;
    
                &:hover{
                    opacity: 0.7;
                }
            }
            .news_detail_button{
                display: block;
                width: 100%;
                /* max-width: 25.972vw; */
                margin: 2.778vw auto 6.667vw;
                padding: 1.458vw 3.472vw 1.319vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.111vw;
                line-height: 1.667vw;
                text-align: center;
                color: var(--news_color_text);
                background: url(../images/news/link-button-arrow.png) center right 1.389vw / 1.667vw no-repeat;
                background-color: var(--news_color_white);
                border: 0.069vw solid var(--news_color_line);
                border-radius: 3.472vw;
    
                &:hover{
                    opacity: 0.7;
                }
            }
        }
        .news_detail_nav{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6.667vw;
            position: relative;
            margin-top: 3.889vw;
    
            &:before{
                content: '';
                width: 0.069vw;
                height: 2.778vw;
                background-color: var(--news_color_line);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            a{
                display: flex;
                align-items: center;
                gap: 1.111vw;
                font-family: var(--news_font_base);
                font-weight: 600;
                font-size: 1.111vw;
                line-height: 1.667vw;
                color: var(--news_color_text_dark);
    
                &:hover{
                    opacity: 0.7;
                }
                &:before,
                &:after{
                    content: '';
                    display: block;
                    width: 3.472vw;
                    height: 2.778vw;
                    background: url('../images/news/pagination-prev.png') center / contain no-repeat;
                    flex: none;
                }
            }
            .news_detail_nav_prev{
                &:after{
                    content: none;
                }
            }
            .news_detail_nav_next{
                &:before{
                    content: none;
                }
                &:after{
                    transform: rotate(180deg);
                }
            }
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .first_area{
        .first_wrap{
            .satei_ttl_lead{
                font-size: 3.733vw;
                line-height: 6.4vw;
                margin-bottom: 2.4vw;
    
                .satei_ttl_lead_text{
                    font-size: 3.733vw;
                    line-height: 6.4vw;
                    margin-bottom: 4.533vw;
                }
                .satei_ttl_lead_note{
                    font-size: 3.2vw;
                    line-height: 4.8vw;
                }
            }
        }
    }
    
    .news_list_area{
        margin-top: 17.067vw;
    
        .news_list_item{
            padding: 8vw 0 6.667vw;
    
            &:after{
                right: 0;
                width: 5.333vw;
                height: 5.333vw;
            }
            .news_list_meta{
                gap: 3.2vw;
                margin-bottom: 4.267vw;
                font-size: 3.2vw;
                line-height: 4.8vw;
    
                span{
                    
                }
            }
            h2{
                -webkit-line-clamp: 2;
                max-width: 82.667vw;
                font-size: 4.267vw;
                line-height: 6.4vw;
                margin-bottom: 1.067vw;
            }
            p{
                -webkit-line-clamp: 5;
                max-width: 82.667vw;
                font-size: 3.733vw;
                line-height: 5.333vw;
            }
        }
    }
    
    .news_pagination{
        gap: 5.333vw;
        margin-top: 8.533vw;
    
        .news_pagination_arrow{
            width: 13.333vw;
            height: 10.667vw;
        }
        .news_pagination_number,
        .news_pagination_dots{
            font-size: 4.267vw;
            line-height: 4.267vw;
        }
    }
    
    .news_detail_area{
        margin-top: 17.067vw;
    
        .news_detail_wrap{
            max-width: none;
        }
        .news_detail_meta{
            gap: 3.2vw;
            margin-bottom: 6.4vw;
            font-size: 3.2vw;
            line-height: 4.8vw;
    
            span {
                padding: 0.533vw 3.467vw 0;
                font-size: 3.2vw;
                line-height: 4.8vw;
            }
        }
        .news_detail_article{
            h2{
                margin-bottom: 6.4vw;
                padding-bottom: 3.733vw;
                font-size: 5.333vw;
                line-height: 8.533vw;
            }
        }
        .news_detail_content{
            p{
                margin-bottom: 6.4vw;
                font-size: 4.267vw;
                line-height: 7.467vw;
            }
            figure{
                margin: 6.4vw 0 8.533vw;
                border-radius: 1.067vw;
            }
            h3{
                margin-bottom: 3.733vw;
                font-size: 5.333vw;
                line-height: 8.533vw;
            }
            h4{
                margin-bottom: 4vw;
                font-size: 4.8vw;
                line-height: 7.467vw;
            }
            a:not(.news_detail_button){
                font-size: 3.733vw;
                line-height: 6.4vw;
            }
            .news_detail_button{
                max-width: 74.667vw;
                margin: 6.4vw auto 17.067vw;
                padding: 3.733vw 10.667vw 3.467vw;
                font-size: 3.733vw;
                line-height: 5.333vw;
                background-size: 6.4vw;
                background-position: center right 3.2vw;
            }
        }
        .news_detail_nav{
            gap: 17.067vw;
            margin-top: 10.667vw;
    
            &:before{
                height: 10.667vw;
            }
            a{
                gap: 3.2vw;
                font-size: 4.267vw;
                line-height: 4.267vw;
    
                &:before,
                &:after{
                    width: 13.333vw;
                    height: 10.667vw;
                }
            }
        }
    }
}