@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap');

:root {
    --color-pink: #ce7293;
    --color-red: #dc534d;
}

/*==============================================================
webinar top
==============================================================*/

/* main header */
.main-header {
    border-bottom: solid 4px #333;
    background: #f9f8ed;
    position: relative;
    overflow: hidden;
}

.main-header {
    position: relative;
}

.main-header .title-wrp {
    display: block;
    margin: 2% auto 0;
    padding: 0;
    width: 45%;
}

.main-header .title-wrp .main-title {
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-header .title-wrp .main-title img {
    width: 100%;
}

.main-header .main-img {
    width: 90%;
    height: 20vw;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.main-header .main-img figure {
    display: block;
    width: 22.5vw;
    height: 20vw;
}

.main-header .main-img img {
    width: 100%;
    height: auto;
}

@media screen and (max-width:767px) {
    .main-header .title-wrp {
        margin: 10% auto 0;
        padding: 0;
        width: 90%;
        min-height: 130px;
    }

    .main-header .main-img {
        width: 100%;
        height: 50vw;
    }

    .main-header .main-img figure {
        width: 50vw;
        height: 50vw;
    }
}

/* lead */
.lead,
.point-wrp {
    color: #fff;
    background-color: #ce7293;
}


.lead {
    font-size: min(1.8rem, 4vw);
    line-height: 1.8;
    text-align: left;
}

.lead-wrp-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
}

.lead .lead-img {
    width: 28%;
}

.lead p {
    display: block;
    width: 68%;
    padding: 2.5em 0 1em;
}

@media screen and (max-width:767px) {
    .lead {
        text-align: justify;
        font-size: .9em;
    }

    .lead-wrp-inner {
        padding: 0 1em;
    }

    .lead .lead-img {
        width: 60%;
        order: 1;
        margin: 0 auto;
    }

    .lead p {
        display: block;
        width: 100%;
        padding: 1em 0;
        order: 0;
    }
}

/* seminar */
.seminar-wrp {
    background-color: #f9f8ed;
    position: relative;
    overflow: hidden;
}

.single .seminar-wrp {
    background-color: #fff;
}

.seminar-wrp .latest-seminar-title {
    font-size: min(2.5rem, 5.5vw);
    text-align: center;
    color: var(--color-red);
}

.seminar-wrp .seminar-list {
    --base-gutter: min(24px, 2vw);
}

.seminar-wrp .seminar-list .seminar-box {
    padding: min(24px, 7vw) min(24px, 4vw);
    text-align: center;
    position: relative;
}


/* new title layout */

.latest-seminar-wrp {
    background-color: #fff;
    background: linear-gradient(-20deg, #fff 92%, #f5e3e9 92%);
}

@media screen and (max-width:767px) {
    .latest-seminar-wrp {
        background: linear-gradient(-30deg, #fff 95%, #f5e3e9 95%);
    }
}

.seminar-wrp .seminar-list .seminar-box-flex {
    text-align: left;
    padding: 0;
}

.seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .seminar-title-wrp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.5em;
    margin-top: 5em;
}

.seminar-wrp .seminar-list .seminar-box-flex.mtop {
    margin-top: 7em;
}

@media screen and (max-width:767px) {
    .seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .seminar-title-wrp {
        margin-top: 3em;
    }

    .seminar-wrp .seminar-list .seminar-box-flex.mtop {
        margin-top: 5em;
    }
}

.seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .vol {
    padding: .2em .3em .2em 0;
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    font-size: min(3.6em, 8vw);
    font-weight: normal;
    border-right: 2px solid;
    border-bottom: none;
    color: var(--color-pink) !important;
    line-height: 1;
    width: 13%;
    position: relative;
}

@media screen and (max-width:767px) {
    .seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .vol {
        padding: .3em;
        width: 100%;
        border: none;
    }
}

.seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .vol.new::before {
    content: 'NEW!';
    display: inline-block;
    font-size: 2.2rem;
    padding: 1rem 1.5rem;
    background-color: #dc534d;
    border-radius: 3px;
    color: #fff;
    position: absolute;
    top: -5rem;
    left: 0;
    margin-bottom: .5em;
    text-align: center;
}

.seminar-wrp .seminar-list .seminar-box-flex .meta-wrp .vol.new::after {
    content: '';
    width: 2rem;
    height: 2rem;
    background-color: #dc534d;
    position: absolute;
    top: -1rem;
    left: 0;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.seminar-wrp .seminar-list .seminar-box .seminar-title {
    font-size: min(1.7em, 4.2vw);
    width: 87%;
    padding-left: 1.5em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media screen and (max-width:767px) {
    .seminar-wrp .seminar-list .seminar-box .seminar-title {
        width: 100%;
        padding-left: 0;
        padding: 0 1.5rem;
    }
}

.seminar-wrp .seminar-list .seminar-box .seminar-title .sml {
    font-size: .8em;
    display: block;
    width: 100%;
}

.seminar-wrp .seminar-list .seminar-box .seminar-subtitle-wrp {
    display: flex;
    margin: 1em auto 0;
}

.seminar-wrp .seminar-list .seminar-box .seminar-subtitle-wrp .subtitle-icon {
    width: 160px;
    padding: 0 1em;
    display: inline-flex;
    align-items: end;
}

@media screen and (max-width:767px) {
    .seminar-wrp .seminar-list .seminar-box .seminar-subtitle-wrp .subtitle-icon {
        display: none;
    }
}

.seminar-wrp .seminar-list .seminar-box .seminar-subtitle {
    margin-bottom: 2em;
    font-size: min(1.05em, 3vw);
}

@media screen and (max-width:767px) {
    .seminar-wrp .seminar-list .seminar-box .seminar-subtitle {
        padding: 0 1.5rem;
    }
}


/* logout shumb */
.seminar-wrp .seminar-list .seminar-box .thumb {
    position: relative;
    border: solid 1px #fff;
}

.seminar-wrp .seminar-list .seminar-box .thumb a {
    display: block;
}

.seminar-wrp .seminar-list .seminar-box .thumb .play-arrow {
    width: 5em;
    height: 5em;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 40%);
    color: var(--color-pink);
    background-color: rgba(255, 255, 255, .8);
    border: solid 2px currentcolor;
    border-radius: 50%;
    transition: all .3s 0s ease;
}

.seminar-wrp .seminar-list .seminar-box .thumb:hover .play-arrow {
    color: #222;
}

.seminar-wrp .seminar-list .seminar-box .thumb .play-arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid 1em transparent;
    border-left: solid 1.6em currentcolor;
    position: absolute;
    left: 38%;
    top: 50%;
    transform: translateY(-50%);
}

.seminar-wrp .seminar-list .seminar-box .thumb .btn {
    width: max-content;
    margin: 0 !important;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    font-size: min(1em, 3.4vw);
    background-color: var(--color-pink);
}

.seminar-wrp .seminar-list .seminar-box .thumb:hover .btn {
    background-color: #222;
}

/*==============================================================
webinar single page
==============================================================*/
.mov-wrp {
    --mov-size: min(calc(100% - calc(var(--base-gutter)*2)), var(--article-width2));
    padding: min(60px, 12vw) 0 min(80px, 15vw);
    position: relative;
    /* background: linear-gradient(to bottom right, #f9f8ed 80%, #f5e3e9 80%); */
    /* if no new area */
    background: linear-gradient(to bottom right, #fbfbfb 80%, #f5e3e9 80%);
    overflow: hidden;
}

.mov-wrp .webinar-logo {
    display: block;
    width: min(80%, 480px);
    margin: 0 auto 4em;
}

.mov-wrp .mov-wrp-inner {
    margin: 0 auto;
    position: relative;
    text-align: center;
}

@media screen and (min-width:768px) {
    .mov-wrp .mov-wrp-inner {
        width: min(calc(100% - 200px), var(--max-width));
    }
}

.mov-wrp .mov {
    width: var(--mov-size);
}

.mov-wrp .mov.samplemovie {
    margin: 0 auto;
}

.mov-wrp .mov-meta {
    width: min(470px, calc(100% - var(--mov-size) - 50px));
    text-align: left;
}

.mov-wrp .mov-meta .vol {
    font-family: 'Work Sans', sans-serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--color-pink);
    display: inline-block;
    border-bottom: 2px solid;
    padding-bottom: .15em;
    margin-top: .25em;
    margin-bottom: 1em;
}

.single .vol {
    color: var(--color-pink);
}

.mov-wrp .mov-meta .seminar-title {
    padding: 0;
    font-size: min(2rem, 5.4vw);
}

.single .mov-meta .seminar-subtitle {
    text-align: justify;
    font-size: min(1.5rem, 3.6vw);
    line-height: 1.8;
    padding: 1em 0;
}

.mov-wrp .forTAB {
    display: none;
}

@media screen and (max-width:1024px) {
    .mov-wrp .mov-wrp-inner {
        flex-direction: column;
        align-items: center;
        order: 2;
    }

    .mov-wrp .mov {
        order: 2;
    }

    .mov-wrp .mov-meta {
        width: min(90%, 740px);
        margin-bottom: min(48px, 5vw);
        order: 1;
    }

    .mov-wrp .cat-wrp {
        text-align: center;
    }

    .mov-wrp .mov-meta .vol {
        margin-bottom: .75em;
    }

    .mov-wrp .mov-meta .seminar-title {
        text-align: center;
    }

    .single .mov-meta .seminar-subtitle br {
        display: none;
    }
}

/* next banner */
.single .next-movie-banner {
    margin-top: 2.5em;
    position: relative;
}

.single .next-movie-banner::before {
    content: '';
    display: block;
    position: absolute;
    top: -35px;
    left: 7px;
    width: 112px;
    height: 30px;
    background-image: url(/webinar/img/nextmovie.svg);
    background-repeat: no-repeat;
}

@media screen and (max-width:1024px) {
    .single .next-movie-banner::before {
        top: -25px;
        left: 17px;
    }
}

.single .next-movie-banner a {
    color: #222;
    width: 100%;
    border: 1px solid #ccc;
    padding: 7px;
    background-color: #fff;
    text-decoration: none;
}

.single .next-movie-banner a .thumb {
    width: 38%;
}

.single .next-movie-banner a .meta-wrp {
    width: 54.5%;
    font-size: .8em;
    padding-left: .5em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single .next-movie-banner a .next-icon {
    width: 4.5%;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single .next-movie-banner a .meta-wrp .vol {
    font-family: 'Work Sans', sans-serif;
    display: block;
    width: 100%;
    font-size: 1.3em;
    margin-bottom: 0;
}

@media screen and (max-width:1024px) {
    .single .next-movie-banner {
        order: 3;
        padding: 15px;
        text-align: left;
    }

    .single .next-movie-banner a .meta-wrp {
        font-size: .7em;
    }
}


/* .single .latest-seminar-wrp .title {
    grid-area: text;
    line-height: 2;
} */

/* other wrp */
.other-wrp {
    padding: min(64px, 12vw) 0;
}

.other-wrp .other-title {
    font-size: min(2.6rem, 6.8vw);
    text-align: center;
}

.other-wrp .other-title::after {
    content: '';
    display: block;
    width: 4em;
    margin: .8em auto 0;
    border-bottom: solid 4px var(--case-blue);
}

.other-list {
    margin: 54px auto;
    overflow: hidden;
}

.other-list .bannerlink {
    display: inline-block;
    /* width: 300px; */
    padding: 12px;
    margin: 0 min(16px, 2vw);
    position: relative;
    background-color: #fff;
    border: 1px solid #ccc;
}

.other-list .bannerlink a:focus {
    outline: none;
}

.other-list .bannerlink::after {
    font-size: min(1.4rem, 3.6vw);
}

.other-list .bannerlink .thumb {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
}

.other-list .bannerlink .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.other-list .bannerlink p {
    margin-top: .5em;
    font-size: min(1.4rem, 3.6vw);
}

.other-list .bannerlink p.vol {
    margin-top: .25em;
    font-size: min(2.4rem, 6vw);
}

.open-message {
    background-color: #ec8600;
    padding: 1em 2em;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    transform: translateY(2em);
}

.open-message:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(236, 134, 0, 0);
    border-top-color: #ec8600;
    border-width: 15px;
    margin-left: -15px;
}

.other-list li.watched .meta-wrp::after {
    content: '視聴済';
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: .7em;
    line-height: 1;
    color: #555;
    border: 1px solid #ccc;
    padding: .25em .5em;
    border-radius: 3px;
}

/* quiz */
.pre-contents {
    --quiz-color: var(--color-pink);
    text-align: center;
}

.slide .quiz_hd::after,
.slide .answer_hd::after {
    content: '';
    display: block;
    height: min(95%, 17vw);
    aspect-ratio: 1.45/1;
    position: absolute;
    right: calc(15px - 5vw);
    bottom: 0;
    background: url(../img/tom_quiz.svg) no-repeat center bottom / contain;
}

.slide .answer_hd::after {
    height: min(16vw, 115px);
    aspect-ratio: 1.38/1;
    right: 15px;
    background: url(../img/tom_quiz-miss.svg) no-repeat center bottom / contain;
}

.slide .correct .answer_hd::after {
    height: min(16vw, 115px);
    aspect-ratio: 2/1;
    right: 0;
    background: url(../img/tom_quiz-correct.svg) no-repeat center bottom / contain;
}

@media screen and (max-width: 640px) {

    .slide .quiz_hd::after,
    .slide .answer_hd::after {
        display: none;
    }
}

.pre-contents [class*="choiceA"] {
    --answer-color: #ffb500;
}

.pre-contents [class*="choiceB"] {
    --answer-color: #0a75bc;
}

.slide .choices .choice {
    padding-bottom: 0 !important;
}

.slide .choices .choice p {
    margin: .5em auto 1em !important;
}

/* [class*="slide-choice"] .point-get-wrp {
    overflow: auto;
    max-height: 5em;
} */