.fv-section {
    background-image: url("../img/top-page-fv-pc.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    aspect-ratio: 660 / 340;
    height: auto;
    display: block;
}

.description-section {
    background-color: #DB2473;
    padding: 40px 0;
    /* position: relative; */
}

.news-container {
    width: min(90%, 1200px);
    margin: 0 auto;
    padding: 20px;
    display: flex;
    background-color: #FFEFF7;
    border-radius: 15px;

    /* position: absolute;
    top: 0; */
    transform: translateY(-70%);
}

.news-container > div{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
    width: 20%;
}
.news-container > div img {
    width: 15%;
}
.news-container > div p{
    color: #DB2473;
    font-size: 1.5rem;
    font-weight: 700;
}

.news-container nav {
    width: 80%;
}

.news-container nav ul{
    list-style-type: none;
}

.news-container nav ul li{
    position: relative;
    padding-left: 20px;
}

.news-container nav ul li::before{
    position:absolute;
    content:'';
    top: 0;
    left: 0;
    transform: translateY(50%);
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #DB2473;
}

.news-container nav ul li a {
    color: #000;
}

.top-description {
    width: min(90%, 1200px);
    margin: 0 auto;
}

.top-description p {
    color: #fff;
    text-align: center;
}

.top-description p:first-child {
    font-size: 1.5rem;
}


.main-section {
    background-image: url("../img/top-main-back-pc.webp");
    background-repeat: repeat;
    background-size: cover;
    background-position: center center;
    background-color: #FFB1D6;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    padding: 0 0 250px;
}

.main-section::before {
    content: "";
    display: block;
    background-image: url("../img/top-img-01.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: clamp(300px, 40%, 700px);
    aspect-ratio: 1514 / 770;
    height: auto;

    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-29%);
}

.main-section::after {
    content: "";
    display: block;
    background-image: url("../img/top-main-img-01.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: clamp(120px, 10%, 400px);
    aspect-ratio: 571 / 881;
    height: auto;

    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-25%, -210%);
}


.text-on-img {
    width: clamp(300px, 50%, 400px);
    aspect-ratio: 2 / 1 ;
    font-size: 2rem;
    color: #DB2473;
    font-weight: bold;
    background-image: url("../img/page-title-back-02.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.text-on-img > h1 {
    font-weight: 500 !important;
    font-size: 1rem !important;
}

.main-section-container {
    display: flex;
    flex-wrap: wrap; /* 要素が親の幅を超えたら折り返す */
    justify-content: center; /* これが重要！余った要素を中央寄せにします */
    max-width: 1200px; /* 全体の最大幅（お好みで） */
    margin: 0 auto; /* 全体を中央寄せ */
}

.main-section-container img {
    width: clamp(15%, 28vw, 30%);
    aspect-ratio: 360 / 350;
    height: auto;

    display: block;
}

@media (max-width: 1280px) {
}


/* --- レスポンシブ対応 (960px以下で縦並び) --- */
@media (max-width: 960px) {
    main {
        padding: 0 !important;
    }
    .fv-section {
        background-image: url("../img/top-page-fv-sp.webp");
        aspect-ratio: 1500 / 2752;
        height: auto;
    }
    .description-section {
        padding: 0;
    }
    .news-container {
        flex-direction: column;
        transform: translateY(-50%);
    }
    .news-container > div {
        justify-content: flex-start;
        width: 100%;
        column-gap: 14px;
    }
    .news-container > div img {
        width: 10%;
        max-width: 30px;
        aspect-ratio: 6 / 7;
        height: auto;
    }
    .news-container nav {
        width: 100%;
    }
    .main-section {
        background-image: url("../img/top-main-back-sp.webp"), linear-gradient(to bottom, #DB2473, #FFB1D6);
        background-position: top center;
        padding: 70px 0 300px;
    }
    .main-section::before {
        content: "";
        display: block;
        background-image: url("../img/top-main-img-01-sp.webp");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        width: clamp(100px, 20%, 422px);
        aspect-ratio: 422 / 452;
        height: auto;
        position: absolute;
        right: 0;
        left: auto;
        top: 0;
        transform: translate(-20%, 90%);
    }
    .main-section::after {
        display: none;
    }
    .main-section-container {
        /* flex-direction: column; にしても良いですが、
        幅を100%にするだけで自然に縦並びになります */
        gap: 0px; /* スマホ時の余白を少し狭めるなど */
    }
    .main-section-container img {
        width: min(90%, 1200px);
    }
}

@media (max-width: 640px) {
    .news-container {
        transform: translateY(-10%);
    }
}

@media (max-width: 640px) {
    .main-section::before {
        transform: translate(-20%, 120%);
    }
}