@charset "utf-8";

/* ==================================================================

    news.css

=================================================================== */

#news{
    @media only screen and
    (max-width : 767px) {
        padding-top: 0;
    }
}
#news main .chapter{
    padding-bottom: 100px;
}
#news .newsBox{
    width: calc(64% - 42px);
}

#news .newsBox .newsList a{
    color: #333;
    text-decoration: none;
}

#news .newsBox .newsList li{
    border-bottom: 1px solid #A8A8A8;

    &:first-child{
         border-top: 1px solid #A8A8A8;
    }
    a{
        display: block;
        padding: 32px 42px 32px 4px;
        transition: .3s;
        background: url("../../images/common/icon/arrow.svg") 98% 50% no-repeat;


        p.state{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0 12px;

            margin-bottom: 12px;

            span.date{
                display: inline-block;
            }
            
            span.category{
                display: inline-block;
            }
        }

        > dl{

            dt{
                font-weight: 700;
            }
            dd{
                margin-top: 12px;
            }
        }

        &:hover{
            background-position: 99% 50%;
        }
    } 
} 

#news .newsBox .linkStyle{
    margin-top: 32px;
}

@media only screen and
(max-width : 767px) {
    #news{
        padding-bottom: 5vw;
    }

    #news .newsBox{
        padding-top: 12vw;
        padding-bottom: 12px;
        gap:0;
    }

    #news .newsBox .newsList{
        padding: 0 ;
    }
    #news .newsBox .newsList li + li{
        margin-top: 8px;
    }
    #news .newsBox .newsList li a > dl dt{
        flex-shrink: 0;
        font-size: 1.3rem;
    }
    #news .newsBox .newsList li a > dl dd{
        font-size: 1.4rem;
        line-height: 1.2;
    }

    #news .newsBox .linkStyle{
        margin-top: 6vw;
        text-align: center;
    }

}