/* ボタン全体 */
article.course.card-wrapper .icons-container .icon-button {
    border-color: #fff;
}

/* 共通 */
article.course.card-wrapper .icons-container .icon-button.play,
article.course.card-wrapper .icons-container .icon-button.info {
    width: auto;
    padding: 0.5vw 1vw;
    border-radius: 5px;
    background-image: none;
    color: #fff;
}

/* 再生ボタン */
article.course.card-wrapper .icons-container .icon-button.play {
    border-color: #d4ba36;
    background-color: #d4ba36;
    letter-spacing: 0.1rem;
}
article.course.card-wrapper .icons-container .icon-button.play::before {
    content: "今すぐ視聴する";
}

/* 詳細ボタン */
article.course.card-wrapper .icons-container .icon-button.info::before {
    content: "詳細";
}

/* マイリスト */
article.course.card-wrapper .icons-container .icon-button.plus {
    width: 1.4vw;
    background-image: none;
    text-align: center;
    align-content: center;
}
article.course.card-wrapper .icons-container .icon-button.plus::before {
    color: #fff;
    content: "\f004";
    font-family: "Font Awesome 6 Free";
    font-size: 1.6rem;
    font-weight: 900;
}

/* ボタンコンテナの余白 */
article.course.card-wrapper .card .icons-container.flex-wrapper {
    padding: 2rem 4%;
}

/* 動画の詳細(スマホ) */
article.course.touch-devices.expand-card .article-info {
    border-right: #333 solid 1px;
    border-left: #333 solid 1px;
    background-color: #000;
}
article.course.touch-devices.expand-card .article-info h4 a {
    color: #fff !important;
}

/* 動画ページのスタイル */
#multimedia-container article.course.card-wrapper .card .icons-container.flex-wrapper {
    justify-content: space-around;
    margin: 0 -5%;
    padding: 0;
    background-color: transparent;
    border: none;
}
#multimedia-container article.course.card-wrapper .icons-container .icon-button.play::before,
#multimedia-container article.course.card-wrapper .icons-container .icon-button.info::before {
    font-size: 1rem;
}
#multimedia-container article.course.card-wrapper .icons-container .icon-button.play::before {
    content: "視聴する";
}

/* 詳細ページのスタイル */
.course-details-recommended article.course.card-wrapper .card .icons-container {
    justify-content: space-around;
    margin: 0 -5%;
    padding: 0;
    background-color: transparent;
    border: none;
}
.course-details-recommended article.course.card-wrapper .icons-container .icon-button.play::before {
    content: "視聴する";
}

/* 検索ページのスタイル */
.search-result-area article.course.expand-card .icons-container .icon-button.info.black {
    width: auto;
    border-radius: 5px;
    border-color: #fff;
    background-image: none;
}
.search-result-area article.course.expand-card .icons-container .icon-button.info.black::before {
    content: "詳細";
    color: #fff;
}

/* ライブ配信ページのスタイル */
#event article.course.card-wrapper .card .icons-container.flex-wrapper {
    background-color: transparent;
    border: none;
}

/* カテゴリータイトル */
.home-multimedia-carousal .home-page-slider .heading__h4.box-header span {
    padding: 0;
    background-color: transparent;
}
.home-multimedia-carousal .home-page-slider .heading__h4.box-header span::after {
    content: none;
}

/* ホバー時のスタイル */
@media (hover: hover) {
    article.course:hover.expand-card .icons-container .icon-button.play.black,
    article.course:hover.expand-card .icons-container .icon-button.info.black,
    article.course:hover.expand-card .icons-container .icon-button.plus.black {
        background-image: none !important;
    }

    .icon-button.black-border:hover {
        transform: scale(1.1, 1.1);
    }

    article.course:hover.expand-card .icons-container .icon-button.play.black {
        border-color: #d4ba36;
    }

    .icon-button.black-border.info:hover,
    .icon-button.black-border.plus:hover {
        background-color: transparent;
    }

    /* カテゴリータイトル */
    .home-multimedia-carousal .home-page-slider .heading__h4.box-header span:hover {
        opacity: 0.7;
    }
}

/* スマホ時 */
@media screen and (max-width: 992px) {
    /* 共通 */
    article.course.card-wrapper .icons-container .icon-button.play::before,
    article.course.card-wrapper .icons-container .icon-button.info::before,
    article.course.card-wrapper .icons-container .icon-button.plus::before {
        font-size: 1rem;
    }

    /* 再生ボタン */
    article.course.card-wrapper .icons-container .icon-button.play {
        width: 50%;
        padding: 1.5vw 0;
    }
    article.course.card-wrapper .icons-container .icon-button.play::before {
        content: "視聴する";
    }

    /* 詳細ボタン */
    article.course.expand-card .icons-container .icon-button.info.black {
        width: 20%;
        padding: 1.5vw 0;
    }
    
    /* マイリストボタン */
    article.course.card-wrapper .icons-container .icon-button.plus {
        width: 1.6rem;
        padding: 1.5vw;
    }

    /* 検索時のボタンの大きさ */
    .search-results article.course.card-wrapper .icons-container .icon-button.play,
    .search-results article.course.card-wrapper .icons-container .icon-button.info {
        /* padding: 1.5vw 1vw; */
    }

    /* ボタンコンテナの余白 */
    article.course.card-wrapper .card .icons-container.flex-wrapper {
        justify-content: space-around;
        padding: 1rem 0;
    }

    /* 検索ページのスタイル */
    .search-result-area article.course.expand-card .icons-container .icon-button.info.black {
        width: 40%;
    }
    .search-result-area .article-view-container article.course {
        background-color: #000;
    }

    /* ライブ配信ページのスタイル */
    #event article.course.card-wrapper .card .icons-container.flex-wrapper {
        justify-content: space-between;
        border: none;
    }
    #event article.course.card-wrapper .card .icons-container.flex-wrapper.center {
        justify-content: center;
    }
    #event .icon-button.cancelEvent.black {
        background-image: url(https://technoeye.uishare.co/desktop/images/cancel-event.svg);
    }

    /* ファイルページのスタイル */
    .icon-button.pencil.black.black-border {
        background-image: url(https://technoeye.uishare.co/desktop/images/icon-pencil.svg);
    }
    .icon-button.users.black.black-border {
        background-image: url(https://technoeye.uishare.co/desktop/images/icon-user.png);
    }
    .icon-button.deleteBtn.black.black-border {
        background-image: url(https://technoeye.uishare.co/desktop/images/icon-delete-white.svg);
    }
}