section.insight{
    padding: .5rem 0 1rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.insight{
        padding: .4rem .2rem;
}
    }
section.insight .container{
        padding: .4rem;
        background-color: var(--light-grey);
        color: var(--dark-grey);
        border-radius: .32rem;
        display: flex;
        justify-content: space-between;
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.insight .container{
            padding: .2rem;
            gap: .36rem;
            flex-direction: column;
    }
        }
section.insight .left{
        display: flex;
        flex-direction: column;
        width: 5.22rem;
        gap: .4rem;
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.insight .left{
            width: 100%;
    }
        }
:is(section.insight .left) .title{
            font-size: .4rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
            font-weight: 400;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(section.insight .left) .title{
                font-size: .32rem;
        }
            }
:is(section.insight .left) .text{
            font-size: .16rem;
            line-height: 1.5;
            font-weight: 400;
            letter-spacing: 0;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(section.insight .left) .text{
                font-size: .16rem;
        }
            }
section.insight .right{
        display: flex;
        flex-direction: column;
        gap: .4rem;
        width: 6.12rem;
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
    section.insight .right{
            width: 100%;
    }
        }
:is(section.insight .right) .insight-content{
            background-color: #fff;
            border-radius: .16rem;
            padding: .24rem;
            height: 4.75rem;
            overflow-y: auto;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(section.insight .right) .insight-content{
                padding: .2rem;
                height: 4.25rem;
        }
            }
:is(:is(section.insight .right) .insight-content) h3{
                font-size: .28rem;
                line-height: 1.1;
                font-weight: 400;
                letter-spacing: -0.02em;
                margin-bottom: .4rem;
                margin-top: .45rem;
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(:is(section.insight .right) .insight-content) h3{
                    font-size: .28rem;
            }
                }
:is(:is(section.insight .right) .insight-content) h4{
                font-size: .2rem;
                line-height: 1.2;
                font-weight: 400;
                color: #000;
                margin-top: 0.3rem;
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(:is(section.insight .right) .insight-content) h4{
                    font-size: .2rem;
            }
                }
:is(:is(section.insight .right) .insight-content) p{
                font-size: .16rem;
                line-height: 1.5;
                font-weight: 400;
                letter-spacing: 0;
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(:is(section.insight .right) .insight-content) p{
                    font-size: .16rem;
            }
                }
:is(:is(section.insight .right) .insight-content) a {
                text-decoration: underline;
                transition: color 0.4s ease-in-out;
            }
:is(:is(:is(section.insight .right) .insight-content) a):hover {
                    color: var(--orange);
                }
:is(:is(section.insight .right) .insight-content) ul li{
                font-size: .16rem;
                line-height: 1.5;
                font-weight: 400;
                letter-spacing: 0;
                padding-left: .24rem;
                position: relative;
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
    :is(:is(section.insight .right) .insight-content) ul li{
                    font-size: .16rem;
            }
                }
:is(:is(:is(section.insight .right) .insight-content) ul li)::before{
                    content: '';
                    position: absolute;
                    left: .1rem;
                    top: .12rem;
                    width: .02rem;
                    height: .02rem;
                    display: block;
                    border-radius: 50%;
                    background-color: #000;
                }
:is(:is(section.insight .right) .insight-content) h4,:is(:is(section.insight .right) .insight-content) p{
                margin-bottom: .24rem;
            }
:is(:is(section.insight .right) .insight-content) ul { 
                margin-bottom: .3rem;
            }
:is(:is(section.insight .right) .insight-content) ul li + li{
                margin-top: .24rem;
            }
:is(:is(section.insight .right) .insight-content) *:last-child{
                margin-bottom: 0;
            }
:is(section.insight .right) .insight-content > :first-child {
            margin-top: 0;
        }
:is(section.insight .right) .btn{
            width: fit-content;
            text-align: center;
        }