/* Break point: 768px(tablet), 480px(smartphone-land), 420px(smartphone-portrait */

.main-panel{
    position: relative;
}

    .main-image-pc{
        width: 100vw;
        aspect-ratio: 16 / 9;
    }

    .main-image-m{
        display: none;
    }

    .time-maker{
        background-color: rgba(254, 254, 254, 0.7);
        width: 40vw;
        height: 35vh;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

        .time-now{
            font-size: 8.5vw;
            text-align: center;
            position: absolute;
            top: 32%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            }

        .time-maker-label{
            font-size: 1.3vw;
            text-align: center;
            position: absolute;
            top: 65%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            white-space: nowrap;
        }

.seminars-panel{
    border-bottom: 2px solid rgb(203, 203, 203);
    padding-top: 6vw;
    padding-bottom: 12vw;
    padding-right: 10vw;
    padding-left: 10vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .history-pageround{
        width: 85%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    .seminars-panel p{
        margin-top: 8px;
        font-size: 1.8vw;
    }

    .subtitle-feature{
        font-size: 5vw;
        color:rgb(203, 203, 203);
        position: absolute;
        text-align: right;
        bottom: -1.9vw;
        right: 39vw;
    }

    .title-feature{
        font-size: 12vw;
        color:rgb(203, 203, 203);
        position: absolute;
        text-align: right;
        bottom: -4.5vw;
        right: 0px;
    }

.schedule-panel{
    margin: 0px !important;
    position: relative;
    padding-top: 12vw;
    padding-bottom: 6vw;
    padding-right: 10vw;
    padding-left: 10vw;
}

    .schedule-panel col{
        padding: 0px;
    }

    .title-schedule{
        font-size: 12vw;
        color:rgb(203, 203, 203);
        position: absolute;
        text-align: left;
        top: -5.1vw;
        left: 0px;
    }


@media screen and (max-width: 768px){
    .time-maker{
        height: 30vh;
    }

    .time-maker-label{
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 480px) {
    .main-image-pc{
        display: none;
    }

    .main-image-m{
        display: inline;
        width: 100vw;
        aspect-ratio: 9 / 16;
    }

    .time-maker{
        width: 50vw;
    }

    .time-now{
        font-size: 11vw;
    }

    .time-maker-label{
        font-size: 3vw;
    }

    .seminars-panel{
        padding-right: 6vw;
        padding-left: 6vw;
    } 

    .history-pageround{
        width: 90%;
    }

    .seminars-panel p{
        font-size: 2vw;
    }

    .schedule-panel{
    padding-right: 6vw;
    padding-left: 6vw;
    }

    .schedule-panel iframe{
        height: 400px;
    }

    .t-br::after {
        content:"\A";
        white-space:pre;
    }

}

@media screen and (max-width: 420px) {
    .time-maker-label{
        font-size: 3.5vw;
    }

    .history-pageround{
        width: 100%;
    }

    .seminars-panel p{
        font-size: 2.6vw;
    }
}