@charset "utf-8";

.list-lecture span {
    font-weight: bold;
    margin-right: 20px;
}
@media screen and (max-width: 767px){
    .list-lecture span {
        display: block;
    }
}
/* 20231023 参加ボタン追加 */
.cv-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin: 24px 0 0 0;
}

/***************************************************************
*サブキャンペーン項目「タイムテーブルへの表示」⇒「非表示」の時のデザイン
****************************************************************/
#timetable .session-list__item.timetable-disp_1 {
    display: none;
}

/***************************************************************
*モーダル表示について　2022/12/19追記
****************************************************************/
#timetable .session-list__item:hover {
    cursor: pointer;
}
@media screen and (min-width: 768px) {
    #timetable .session-list__item {
        position: relative;
        overflow: hidden
    }

    #timetable .session-list__item:not(.session-limit, .session-finished, .session-before)::before {
        background-image: url(../../shared/user2024/img/common/hover_detail_text.png);
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: inline-block;
        height: 26px;
        margin: auto;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 131px;
        z-index: 2;
        opacity: 0;
        transition: all .3s ease-in
    }

    #timetable .session-list__item::after {
        background-color: rgba(34, 50, 66, 0);
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: block;
        width: 0;
        height: 0;
        content: "";
        z-index: 1;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all .3s ease-in
    }

    #timetable .session-list__item:hover {
        cursor: pointer
    }

    #timetable .session-list__item:hover::before {
        background-image: url(../../shared/user2024/img/common/hover_detail_text.png);
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: inline-block;
        height: 26px;
        margin: auto;
        opacity: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 131px;
        z-index: 2;
        transition: all .3s ease-in
    }

    #timetable .session-list__item:hover::after {
        background-color: rgba(34, 50, 66, .88);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        transition: all .3s ease-in;
        z-index: 1;
        opacity: 1;
        transform: translate(-50%, -50%) scale(2) rotate(0deg)
    }
}
.modal__in.js-modal_set{
  display: none;
}

.modal__speaker__list .ss_modal_img figure{
  width: 100px;
  height: 100px;
}
.modal__speaker__list .ss_modal_img img{
  width: 100%;
  height: 100%;
}

/***************************************************************
*モーダル表示について　非表示
****************************************************************/
#timetable .timetable-modal_off {
  pointer-events: none;
}

/***************************************************************
*各サブキャンペーン状態時のデザイン
****************************************************************/
/* 申込期間前、申込期間後、満席 */
#timetable .session-list__item.session-before,
#timetable .session-list__item.session-finished,
#timetable .session-list__item.session-limit {
    overflow: hidden;
    position: relative;
    cursor: auto;
    pointer-events: none;
}
#timetable .session-list__item.session-before::before,
#timetable .session-list__item.session-finished::before,
#timetable .session-list__item.session-limit::before {
    -webkit-transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in;
    background-color: rgba(rgb(53, 53, 53), green, blue, 0.8);
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    display: inline-block;
    height: 26px;
    left: 50%;
    width: max-content;
    margin: auto;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-in;
    z-index: 1;
}
#timetable .session-list__item.session-before::after,
#timetable .session-list__item.session-finished::after,
#timetable .session-list__item.session-limit::after {
    -webkit-transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in;
    -webkit-transform: translate(-50%, -50%) scale(2) rotate(0deg);
    background-color: rgba(34, 50, 66, 0.88);
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) scale(2) rotate(0deg);
    transition: all 0.3s ease-in;
    width: 100%;
    z-index: 0;
}
#timetable .session-list__item.session-before::before {
    content: "Coming soon";
}
#timetable .session-list__item.session-finished::before {
    content: "受付終了";
}
#timetable .session-list__item.session-limit::before {
    content: "満席";
}
/* 残席わずか */
#timetable .session-list__item.session-few .session-list__item__thumb {
    position: relative;
}
#timetable .session-list__item.session-few .session-list__item__thumb::before {
    position: absolute;
    content: "残りわずか";
    background-color: #fdd000;
    bottom: 8px;
    left: 8px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

/***************************************************************
*アーカイブ期間表示用デザイン
****************************************************************/
#timetable .js-archive-table div.session-list {
    display: none;
}
#timetable .js-archive-text {
    text-align: center;
    margin-top: 20px;
    padding: 0 10px;
}
@media screen and (min-width: 768px){
    #timetable .session-list__item.special .session-list__item__info .list-lecture {
        font-size: 13.6px;
    }
}