@charset "UTF-8";

#media-cm-wrap .media-cm-container {
    padding: 4cqw;
    background: #E5BD1C;
}

#media-cm-wrap .media-cm-container-background {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 3cqw 2cqw;
}

#media-cm-wrap .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3cqw 2cqw;
    gap: 10px;
    border-radius: 20px;
    flex-grow: 0;
}

#media-cm-wrap .fukidashi-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0cqw;
    gap: 5px;
    width: fit-content;
    height: 24px;
    margin: auto;
}

#media-cm-wrap .media-count-text {
    text-align: center;
    color: #D00000;
}

#media-cm-wrap .media-images-logos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#media-cm-wrap .media-images-logos, .cm-thumb {
    max-width: 100%;
}

#media-cm-wrap .media-images-logos .media-images {
    width: 100%;
}

#media-cm-wrap .cm-details-wrapper {
    max-width: 100%;
}

#media-cm-wrap .cm-ribbon-wrapper {
    position: relative;
    margin: 10px 0px;
    width: 100%;
}

#media-cm-wrap .cm-ribbon-wrapper .cm-ribbon {
    display: inline-block;
    position: relative;
    width: 100%;
    background: #D00000;
    color: #FFF;
    padding: 2cqw;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;

    /* --- ここが重要：リボン型に切り抜く --- */
    /* 15px の部分が矢印の「凹み」の深さです */
    clip-path: polygon(
        0% 0%,
        100% 0%,
        calc(100% - 10px) 50%,
        100% 100%,
        0% 100%,
        10px 50%
    );
}

#media-cm-wrap .cm-thumb .media-images {
    width: 100%;
}

#media-cm-wrap .fukidashi-wrapper .media-images {
    width: 32px;
    height: 32px;
}

@media (max-width: 767px) {
    #media-cm-wrap .fukidashi-wrapper .media-images {
        width: 24px;
        height: 24px;
    }
}