@charset "UTF-8";

section#hero-image {
    margin-top: 10px;
    padding: 0 20px;
    position: relative;

    .wrap_image {
        border-radius: 35px;
        overflow: hidden;
        aspect-ratio: 16 / 6.5;
        height: auto;
        max-height: 900px;

        img {
            aspect-ratio: 16 / 6.5;
            height: auto;
            max-height: 900px;
            object-fit: cover;
        }
    }

    #hero-info {
        position: absolute;
        bottom: 0;
        background: #fff;
        right: 0;
        padding: 20px 15px;
        border-radius: 25px 0 0 0;
        width: clamp(475px, 35vw, 600px);

        &::before {
            content: url(/themes/ayakomatsuda/img/edge.svg);
            display: block;
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: 96px;
            right: 20px;
        }

        .inner-hero-info {
            width: 100%;
            display: block;

            &::after {
                content: url(/themes/ayakomatsuda/img/edge.svg);
                display: block;
                width: 25px;
                height: 25px;
                position: absolute;
                bottom: 0;
                left: -25px;
            }
        }

        .wrap__top_info {
            display: initial;
            display: initial;
            display: initial;
            -webkit-box-align: initial;
            -ms-flex-align: initial;
            align-items: initial;
            position: relative;
            display: grid;
            grid-template-columns: 100px 1fr;
            column-gap: 15px;
            transition: color .35s;

            &:hover {
                text-decoration: none;
                color: var(--main-color1);

                & h3.h3__top_info {
                    color: var(--main-color1);
                }

                & img {
                    opacity: .85;
                }
            }

            .wrap_top_info_image {
                border-radius: 9px;
                overflow: hidden;
                transition: opacity .35s;
            }

            .new__top_info {
                position: absolute;
                background: var(--main-color1-l1);
                color: var(--main-color1);
                padding: 4px 20px;
                border-radius: 99px;
                font-size: 13px;
                font-weight: 400;
                min-width: 26px;
                line-height: 1;
                top: -30px;
                left: 10px;
                letter-spacing: 0.5px;
            }


            .wrap_text {
                display: grid;
                gap: 7px;
                align-content: center;

                .wrap_date {
                    display: flex;
                    align-items: center;
                    color: var(--gray2);
                }

                time {
                    margin-left: 0;
                    font-size: 14px;
                }

                .ccd__top_info {
                    background: none;
                    padding: 0;
                    font-size: 12px;
                    font-weight: 600;
                    border-radius: 3px;
                    color: var(--gold);
                    margin-left: 15px;
                    margin-right: initial;
                }

                h3.h3__top_info {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-overflow: ellipsis;
                    white-space: initial;
                    transition: color .35s;
                    font-weight: 600;
                    font-size: 13px;
                }
            }
        }
    }
}

@media screen and (max-width:1599px) {
    section#hero-image {
        & .wrap_image {
            border-radius: 25px;
        }
    }
}

@media screen and (max-width:1399px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 16 / 7.5;

            img {
                aspect-ratio: 16 / 7.5;
            }
        }
    }
}

@media screen and (max-width:1199px) {
    section#hero-image {
        & #hero-info {

            &::before {
                bottom: 87px;
            }

            .wrap__top_info {
                grid-template-columns: 85px 1fr;
            }
        }
    }
}

@media screen and (max-width:959px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 16 / 9;

            img {
                aspect-ratio: 16 / 9;
            }
        }
    }
}

@media screen and (max-width:767px) {
    section#hero-image {
        padding: 0 15px;

        & .wrap_image {
            aspect-ratio: 4 / 3;
            border-radius: 20px;

            img {
                aspect-ratio: 4 / 3;
            }
        }


        & #hero-info {
            padding: 15px 15px;
            border-radius: 20px 0 0 0;
            width: 75vw;

            &::before {
                width: 20px;
                height: 20px;
                bottom: 77px;
                right: 15px;
            }

            .inner-hero-info {
                &::after {
                    width: 20px;
                    height: 20px;
                    left: -20px;
                }
            }

            & .wrap__top_info {

                .new__top_info {
                    padding: 4px 15px;
                    font-size: 11px;
                    top: -25px;
                    left: 5px;
                }

                & .wrap_text {
                    h3.h3__top_info {
                        margin: 0;
                        margin-left: 0;
                        line-height: 1;
                    }
                }
            }

        }
    }
}

@media screen and (max-width: 480px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 4 / 5;

            img {
                aspect-ratio: 4 / 5;
            }
        }

        & #hero-info {
            width: 75vw;
            display: grid;
            height: 68px;
            align-content: center;
            padding: 0 15px;

            &::before {
                bottom: 68px;
            }

            .inner-hero-info {
                &::after {
                    width: 15px;
                    height: 15px;
                    left: -15px;
                }
            }

            & .wrap__top_info {
                grid-template-columns: 1fr 4fr;

                & .wrap_text {
                    time {
                        font-size: 12px;
                    }

                    .ccd__top_info {
                        font-size: 11px;
                    }

                    h3.h3__top_info {
                        font-size: 12px;
                    }
                }
            }
        }
    }
}