@import url(../css/news.css);
.newsDetailArea {
    padding: 194px 0 101px;
    z-index: 11;
}
.newsDetailArea .inner {
    max-width: 917px;
    width: 100%;
}
.newsDetailArea .titleWrap {
    padding: 0 34px 26px;
    margin-bottom: 51px;
    border-bottom: 1px solid #999;
}
.newsDetailArea .newsTitle {
    font-size: 32px;
    margin-bottom: 44px;
    color: #000;
}
.newsDetailArea .newsDate {
    font-size: 20px;
    color: #000;
}
.newsDetailArea .thumb {
    max-width: 704.3px;
    width: 100%;
    margin: 0 auto 50px;
}
.newsDetailArea .thumb img {
    aspect-ratio: 704/462;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.newsDetailArea .newsContent {
    padding: 0 33px;
    margin-bottom: 86px;
}

.newsDetailArea .newsContent p {
    min-height: 20px;
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 1.45em;
    font-weight: 400;
    text-align: justify;
}
.newsDetailArea .newsContent > *:last-child {
    margin-bottom: 0;
}
.newsDetailArea .newsContent p:has(img) {
    width: 100%;
    margin: 0 auto 50px;
}
.newsDetailArea .newsContent p:has(img) img {
    display: block;
    margin: 0 auto;
}
.newsDetailArea .newsContent p a {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #e50111;
}

.newsDetailArea.bgRainBow:after {
    z-index: -1;
    top: 8.4%;
    right: -9.1%;
}

.newsDetailArea.bgDiamond::before {
    top: 40.3%;
    left: -162px;
    height: 61%;
}

.newsArea.bgRainBow:after {
    bottom: -29.6%;
    right: -37.5%;
    top: unset;
    width: 64.9%;
    height: 45%;
    background-position: center bottom;
    max-width: 600px;
}
.newsDetailArea .btnLink {
    margin: 0 auto;
}
@media (min-width: 769px) {
    .newsDetailArea .newsContent p a:hover {
        text-decoration: none;
    }
    .main .wrapMain .mainPhoto img {
        aspect-ratio: 1280 / 645;
        min-height: 645px;
    }
    body:not(:has(.mainSlash)) .main .wrapMain .mainPhoto img {
        clip-path: unset
    }
}
@media (max-width: 768px) {
    .main .wrapMain .mainPhoto img {
        aspect-ratio: 450/ 227;
    }
    .newsDetailArea {
        padding: clamp(62px, 13.778vw, 105.81px) 0 clamp(38px, 8.444vw, 64.85px);
    }

    .newsDetailArea .inner {
        padding: 0 10.1%;
    }

    .newsDetailArea .titleWrap {
        padding: 0 0 clamp(11px, 2.444vw, 18.77px);
        margin-bottom: clamp(24px, 5.333vw, 40.96px);
    }

    .newsDetailArea .newsTitle {
        font-size: clamp(18px, 4vw, 30.72px);
        margin-bottom: clamp(17px, 3.778vw, 29.01px);
    }

    .newsDetailArea .newsDate {
        font-size: clamp(12px, 2.667vw, 20.48px);
    }

    .newsDetailArea .thumb {
        width: 93.3%;
        margin-bottom: clamp(22px, 4.889vw, 37.55px);
    }

    .newsDetailArea .thumb img {
        aspect-ratio: 334.3/219.7;
    }

    .newsDetailArea .newsContent {
        padding: 0;
        margin-bottom: clamp(29px, 6.444vw, 49.49px);
    }

    

    .newsDetailArea .newsContent p {
        font-size: clamp(12px, 2.667vw, 20.48px);
        text-align: justify;
        min-height: 11px;
        margin-bottom: 1.45em;
    }

    
    .newsDetailArea.bgRainBow:after {
        top: 6.2%;
        right: -16.6%;
        width: 57%;
    }

    .newsDetailArea.bgDiamond::before {
        top: 42%;
        left: -30.8%;
        height: 61%;
        width: 57.3%;
    }
    .newsArea.relatedArea .relatedText {
        font-size: clamp(22px, 4.889vw, 37.55px);
    }
    .newsWrap.bgRainBowBottom::after {
        bottom: -9.5%;
    }
    .btnLink a {
        font-size: clamp(14px, 3.111vw, 23.89px);
    }
}
@media (max-width: 375px) {
    .newsDetailArea .inner {
        padding: 0 6%;
    }
}