@import url(news.css);

.newsDetailArea {
    background: #fff;
    padding: 43px 0 90px;
}
.newsDetailArea .newsBlock {
    max-width: 857px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 102px;
}
.newsDetailArea .newsBlock:last-child {
    margin-bottom: 0;
}
.newsDetailArea .newsBlock .dateTime {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.08em;
    margin-bottom: 13px;
}
.newsDetailArea .newsBlock .newsDetailTitle {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    background: #e50011;
    border-radius: 0 20px 20px 0;
    padding: 8px 20px 7px;
    margin-bottom: 20px;
}
.newsDetailArea .newsBlock h3 {
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 8px;
    font-weight: 900;
    line-height: 1.6;
}
.newsDetailArea .newsBlock h4 {
    font-size: 16px;
    letter-spacing: 2.5px;
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1.6;
}
.newsDetailArea .newsBlock .newsContent {
    color: #231815;
}
.newsDetailArea .newsBlock .newsContent > *:last-child {
    margin-bottom: 0;
}
.newsDetailArea .newsBlock .newsContent p {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.2px;
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 32px;
}
.newsDetailArea .newsBlock .newsContent a {
    color: #e50011;
}
.newsDetailArea .newsBlock .newsImg,
.newsDetailArea .newsBlock .newsContent p:has(img) {
    margin: 0 1.5px 44px;
}
.newsDetailArea .newsBlock .newsContent img {
    display: block;
    height: auto;
    width: 100%;
    object-fit: cover;
}
.newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul),
.newsDetailArea .newsBlock .newsContent  ol:not(#ez-toc-container ol) {
    margin-left: 2em;
    margin-bottom: 32px;
    list-style-position: outside;
    padding-left: 1.5em;
}
.newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) {
    padding-left: 0;
}
.newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li,
.newsDetailArea .newsBlock .newsContent  ol:not(#ez-toc-container ol) li {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    text-align: justify;

}
.newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li {
    position: relative;
    padding-left: 1.75em;
}
.newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li::before {
    content: "•";
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    transform: translateY(-50%);
    font-size: 1.5em;
}

@media (min-width: 769px) {
    .newsDetailArea .newsBlock .newsContent a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}
@media (max-width: 768px) {
    .newsDetailArea {
        padding: clamp(24.5px, 6.53vw, 49px) 0 clamp(47px, 12.53vw, 94px);
    }
    .newsDetailArea .inner {
        padding: 0 5.4%;
    }
    .newsDetailArea .newsBlock .dateTime {
        font-size: clamp(12.2px, 3.25vw, 24.4px);
        margin-bottom: clamp(5px, 1.33vw, 10px);
    }
    .newsDetailArea .newsBlock .newsDetailTitle {
        font-size: clamp(16px, 4.27vw, 32px);
        padding: clamp(1px, 0.27vw, 2px) clamp(10px, 2.67vw, 20px) clamp(3px, 0.8vw, 6px);
        padding-right: clamp(7.5px, 2vw, 15px);
        letter-spacing: clamp(1.05px, 0.28vw, 2.1px);
        border-radius: 0 60px 60px 0;
        margin-bottom: clamp(24px, 6.4vw, 48px);
    }
    .newsDetailArea .newsBlock h3 {
        font-size: clamp(14px, 3.74vw, 28px);
        margin-bottom: clamp(6px, 1.6vw, 12px);
        letter-spacing: clamp(2.3px, 0.61vw, 4.6px);
    }
    .newsDetailArea .newsBlock .newsContent p {
        font-size: clamp(12px, 3.2vw, 24px);
        line-height: 1.47;
        margin-bottom: clamp(14px, 3.73vw, 28px);
    }
    .newsDetailArea .newsBlock .newsImg,
    .newsDetailArea .newsBlock .newsContent p:has(img) {
        margin: 0 0 clamp(25.5px, 6.8vw, 51px) 0
    }
    .newsDetailArea .newsBlock {
        margin-bottom: clamp(50.5px, 13.47vw, 101px)
    }
    .newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul),
    .newsDetailArea .newsBlock .newsContent  ol:not(#ez-toc-container ol) {
        margin-bottom: clamp(15px, 4vw, 30px);
         margin-left: clamp(7px, 1.867vw, 14px);
        padding-left: clamp(18px, 4.8vw, 36px)
    }
    .newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) {
        margin-left: clamp(7px, 1.867vw, 14px);
        padding-left: 0;
    }
    .newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li {
        padding-left: clamp(18px, 4.8vw, 36px)
    }
    .newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li::before {
        transform: translateY(-52%);
        left: clamp(5px, 1.333vw, 10px);
    }
    .newsDetailArea .newsBlock .newsContent  ul:not(#ez-toc-container ul) li,
    .newsDetailArea .newsBlock .newsContent  ol:not(#ez-toc-container ol) li {
        font-size: clamp(12px, 3.2vw, 24px);
        line-height: 1.49;
    }
}
@media (max-width: 430px) {
    @media (max-width: 430px) {
    .newsDetailArea .inner {
        padding: 0 5.3%;
    }
    .newsDetailArea .newsBlock .newsDetailTitle {
        font-size: clamp(15px, 4vw, 30px);
        letter-spacing: clamp(2px, 0.533vw, 4px);
        border-radius: 0 55px 55px 0;
        padding: clamp(9px, 2.4vw, 18px) clamp(20px, 5.333vw, 40px) clamp(9px, 2.4vw, 18px);
        margin-right: 0;
        margin-bottom: clamp(17px, 4.53vw, 34px);
        width: 100%;
        line-height: 1.3;
        min-height: clamp(57px, 15.2vw, 114px);
    }
    .newsDetailArea .newsBlock .newsContent p {
        font-size: clamp(12px, 3.2vw, 24px);
        letter-spacing: clamp(0.95px, 0.23vw, 1.9px);
        line-height: 1.6;
        margin-bottom: 1.63em;
        padding-right: 0;
    }
    .newsDetailArea .newsBlock .newsContent ul:not(#ez-toc-container ul),
    .newsDetailArea .newsBlock .newsContent ol:not(#ez-toc-container ol) { 
        font-size: clamp(12px, 3.2vw, 24px);
         margin-bottom: 1.63em;
    }
}
}