@charset "UTF-8";

.injection{
    margin-bottom: 140px;
}
@media screen and (max-width:768px) {
    .injection{
        margin-bottom: 80px;
    }
}
.injection_container{
    max-width: 840px;
    margin-inline: auto;
    .worries{
        margin-bottom: 50px;
        background-color: var(--color-gray-800);
        padding: 30px;
        box-shadow: 0px 2px 8px 0px rgba(197, 197, 195, 0.3),0px 6px 30px 0px rgba(222, 222, 219, 0.2);
        h3{
            margin-bottom: 24px;
            text-align: center;
            font-family: var(--font-family-serif);
            font-size: 22px;
            font-weight: 400;
            position: relative;
            span{
                position: relative;
                display: inline-block;
                padding: 0 30px;
                background-color: var(--color-gray-800);
                z-index: 1;
                font-weight: 600;
            }
            &::before{
                content:'';
                position:absolute;
                top:50%;
                left:0;
                width:100%;
                height:1px;
                background:var(--color-gray-100);
                transform:translateY(-50%);
            }
        }
        ul{
            width: fit-content;
            margin-inline: auto;
            li{ 
                display: flex;
                align-items: center;
                font-weight:500;
                margin-bottom: 18px;
                &:last-of-type{
                    margin-bottom: 0;
                }
            &::before{
                content: '';
                flex-shrink: 0;
                width: 20px;
                height: 20px;
                margin-right: 8px;
                background-color: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
                mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    .injection_container{
        width: 100%;
        .worries{
            margin-bottom: 30px;
            background-color: var(--color-gray-800);
            padding: 30px 4% 40px;
            h3{
                font-size: 21px;
                span{
                    padding: 0 16px;
                }
            }
            ul{
                li::before{
                    margin: 0 0.6em 0 0;
                }
            }
        }
    }
}
.injection_inner{
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    p{
        width: 65%;
    }
    figure{
        width: 28%;
    }
}
@media screen and (max-width:768px) {
    .injection_inner{
        margin-bottom: 50px;
        display: block;
        p{
            width: 100%;
            margin-bottom: 40px;
        }
        figure{
            width: 100%;
            img{
                width: 90%;
                margin-inline: auto;
                display: block;
            }
        }
    }
}
.article_subtitle{
    margin-bottom: 20px;
}
.injection_detail{
    margin-bottom: 60px;
}
@media screen and (max-width:768px) {
    .injection_detail{
        margin-bottom: 50px;
    }
}