@charset 'utf-8';

.seminar-promo.hapa-2017 nav span {
    background-color: #9999cb;
}

.seminar-promo.hapa-2017 .line {
    background-color: #404040;
}

.seminar-promo.hapa-2017 .line-s {
    text-decoration: line-through;
    color: #999;
}

.seminar-promo.hapa-2017 .top-title {
    background-color: #1b809e;
}

.seminar-promo.hapa-2017 .sub-img {
    background-color: #1b809e;

    order: 2;
}

.seminar-promo.hapa-2017 .main-img {
    background-image: url(../images/main.jpg);
    background-position: center;
    background-size: cover;
}

.seminar-promo.hapa-2017 header h1 img {
    border: none;
    max-height: 100%;
}
.seminar-promo.hapa-2017 .for-pc {
    display: none;
}
.seminar-promo.hapa-2017 .for-mobile {
    display: block;
}
.hapa-2017 .sub-img .inner {
    width: 100%;
}

.hapa-2017 .sub-img img {
    display: block;
    width: 388px;
    margin: 0 auto;
}

.live-banner {
    margin: 1em 0;
}

.live-banner img {
    padding: .6em;
    border: 1px solid #ccc;
    background-color: #fff;
}

.live-banner a span {
    font-size: 1.5em;
    display: block;
    margin: .5em auto 1em;
    text-align: center;
}

.img-frame .inner {
    padding: 0 .25em;
}

.img-frame .inner img {
    display: block;
    margin: 0 auto;
}


/*info*/

.seminar-promo.hapa-2017 .curriculum ol {
    margin: 0 0 1.5em 1.5em;
    padding: 0 0 1em;
    border-bottom: 1px dotted #ccc;
}

.seminar-promo.hapa-2017 .curriculum li {
    font-size: .9em;
    line-height: 1.75;
    list-style-type: disc;
}

.seminar-promo.hapa-2017 .details th {
    width: 30%;
    padding: .7em .5em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px dotted #cdcdcd;
    background-color: #f9f9f5;
}

.seminar-promo.hapa-2017 .details td {
    font-size: 1em;
    line-height: 1.6;
    padding: .7em;
    border-bottom: 1px dotted #cdcdcd;
}


/* - .ticket
 ------------------------------------------------------------ */

.hapa-2017 .ticket h2 {
    font-size: 1.4em;
    font-weight: bold;
    display: inline-block;
    padding: .2em 1em;
    color: #fff;
    background-color: #84cce0;
}

.hapa-2017 .ticket.due .wrap {
    padding: 1em;
    background-color: #f3f3f3;
    margin: 0 0 2em;
}

.seminar-promo.hapa-2017 .ticket.due {
    margin: 0;
    padding: 1em;
    text-align: center;
    background: none;
}

.ticket.due [class*=grid-][class*=-noGutter] .booking .inner {
    border: none;
    background: none;
    padding: 0;
}

.seminar-promo.hapa-2017 .ticket.due h3 {
    line-height: 1.25;
    margin: 0 0 .4em;
    padding: 0 0 0 .2em;
    border-left: 9px solid #adadad;
    background: none;
}

.seminar-promo.hapa-2017 .ticket.due h3 span {
    font-size: 65%;
    display: block;
}

.hapa-2017 .ticket .inner {
    /* padding: 1em; */
}

.hapa-2017 .booking h3 {
    font-size: 1.05em;
    font-weight: bold;
    margin: 0;
    padding: .25em;
    text-align: center;
    background-color: #dae8f3;
}

.hapa-2017 .ticket.tre h3 {
    background-color: #e4f4f9;
}

.luogo a {
    color: #333;
    border-top: 1px dotted #ccc;
    padding: .35em 0;
}

.hapa-2017 .type-info {
    text-align: left;
    margin: 0 0 .5em;
}

.hapa-2017 .type-info .discountless {
    font-size: 140%;
    font-weight: bold;
}

.hapa-2017 h4.type-label {
    font-size: 1.1em;
    font-weight: bold;
}

.seminar-promo.hapa-2017 .ticket.due [class*=grid-][class*=-noGutter] .book-info .inner {
    margin: 0 0 1em;
    text-align: left;
    padding: 0 1em;
}

.hapa-2017 [class*=t-type-] {
    /* margin: 1em 0 0; */
    padding: 2em 1em;
    background-color: #fff;
    border-bottom: 1px dashed #aaa;
}

.hapa-2017 .t-type-standard {
    margin: 0 0 1em;
    /* border-top: 1px dashed #aaa; */
    border-bottom: 1px dashed #aaa;
    /* padding: 1em; */
    /* background-color: #fff; */
}

.hapa-2017 .button-wrap a {
    width: 100%;
    margin: .35em 0;
    padding: .5em;
    text-align: center;
    color: #fff;
    border-radius: 2px;
    background-color: #d47383;
}

.hapa-2017 .button-wrap a .fa {
    font-size: 1em;
    color: #fff;
}

.hapa-2017 .button-wrap .style-b a {
    font-size: .9em;
    background-color: #5dbdcb;
}

.dummy {
    display: none !important;
}

.hapa-2017 .data {
    /* font-size: 1.15em; */
    /* margin: .7em 0 .2em; */
}

.hapa-2017 .col-12.wrap:nth-of-type(10) .seminar-date:after {
    content: '祝日';
    font-weight: bold;
}
.hapa-2017 .col-12.wrap:nth-of-type(11) .seminar-date:after {
    content: '祝日';
    font-weight: bold;
}
.hapa-2017 .seminar-time {
    font-size: .9em;
    padding: .3em 0;
}

.hapa-2017 .button-wrap a.one-click {
    /* font-size: 1.15em; */
    background-color: #9999cb;
}

.hapa-2017 .discount {
    font-size: 1.3em;
}

.hapa-2017 .discount b {
    color: #f04124;
}

.hapa-2017 .booking {
    position: relative;
}

.hapa-2017 .booking .avv {
    font-size: 1.35em;
    font-weight: bold;
    position: absolute;
    top: 2.2em;
    right: 1.8em;
    padding: .25em;
    color: #ef6f56;
    border: 1px solid #ef6f56;
}

.hapa-2017 .requested-count {
    /* text-align: center; */
    /* font-size: .85em; */
    /* margin: .8em 0 0 0; */
}

.hapa-2017 .requested-count .fa {
    font-size: 1.5em;
    position: relative;
    top: 2px;
    color: #2ecc71;
}

.hapa-2017 .requested-count span {
    font-weight: bold;
    padding: .3em;
    border: 1px solid #ef6f56;
}


/*after-party*/

.hapa-2017 .after-party .inner {
    margin: 0 0 2em;
    padding: 1.5em;
    border: 1px solid #ccc;
}

.hapa-2017 .after-party h5 {
    font-size: 1.25em;
    margin: .5em 0;
    letter-spacing: 5px;
}

.hapa-2017 .after-party p {
    font-size: .9em;
    margin: 1em 0;
}

.hapa-2017 .after-party p em {
    font-weight: bold;
}

.sold-out-text {
    font-size: 30px;
    font-weight: bold;
    margin-top: 100px;
    opacity: .6;
    color: red;
}

.seminar-list {
    margin: 2em 0;
    padding: 1em;
}

.seminar-list h4 {
    text-align: center;
    margin: 0 auto 2em;
    max-width: 80%;
}
.seminar-list .wrapper {
    display: grid;
    margin: 0 0 1em;
    border: 1px solid #dedede;
    grid-template-columns: 20%;
    grid-template-rows: 40px;
}
.seminar-list .wrapper.close {
    background-color: #a9a9a9;
}
.seminar-list .wrapper.close > div:not(.buy) {
    text-decoration: line-through;
}
.seminar-list .wrapper.close .buy {
    background-color: #ccc;
    font-weight: bold;
}
.seminar-list .wrapper:nth-of-type(6),
.seminar-list .wrapper:nth-of-type(10),
.seminar-list .wrapper:nth-of-type(12) {
    background-color: #eaf3f2;
}

.seminar-list .wrapper div {
    line-height: 40px;
    text-align: center;
}

.seminar-list .wrapper .day {
    font-weight: bold;
    line-height: 40px;
    padding: 0 0 0 .5em;
    text-align: left;
    border-bottom: 2px dotted #e4e4e4;

    grid-column-start: 1;
    grid-column-end: 6;
}

.seminar-list .place {
    grid-column-start: 1;
    grid-column-end: 2;
}

.seminar-list .time {
    grid-column-start: 2;
    grid-column-end: 5;
}

.seminar-list .rank {
    font-weight: bold;

    grid-column-start: 5;
    grid-column-end: 6;
}

.seminar-list .buy {
    background-color: #dedede;

    grid-column-start: 1;
    grid-column-end: 6;
}

.seminar-list .buy a {
    display: block;
    color: #fff;
    background-color: #4ca2dc;
}

[class*=info-seminar-] {
    padding: 1em;
}

.seminar-list .buy a.ele {
    display: block;
    color: #fff;
    background-color: #27a39b;
}

[class*=info-seminar-] {
    padding: 1em;
}

.info-seminar-01 .inner {
    padding: 1em;
}

.info-seminar-01 h3 {}

.info-seminar-01 h3 img {}

.info-seminar-01 ol {
    margin: 1em 0 0 2em;
}

.info-seminar-01 li {
    line-height: 2;
    list-style-type: disc;
}

.info-seminar-01 p {
    margin: 1em 0;
}
.info-seminar-01 p span {
    display: block;
    margin: .5em 0 0;
    font-weight: bold;
    color: #d26464;
}
.info-seminar-02 {
    background-color: #f3f3f3;
}

.seminar-promo [class*=info-seminar-] [class*=curriculum-] {
    background-color: #fff;
    padding: .5em;
}

.seminar-promo [class*=info-seminar-] [class*=curriculum-] h3 {
    border-bottom: 1px dotted #aaa;
    margin: .3em .3em 1em;
}

.seminar-promo [class*=info-seminar-] [class*=curriculum-] p {
    font-size: 1.1em;
    margin: 0 0 2em .5em;
}

.seminar-promo [class*=info-seminar-] .curriculum-02 p {
    font-size: .9em;
    margin: 0 0 1em .5em;
}

.seminar-promo [class*=info-seminar-] [class*=curriculum-] span {
    display: block;
    font-size: 1.8em;
    margin: .3em 0 0 0;
}

.button-wrap {
    display: flex;
    flex-direction: column;
}

.booking .inner {
    background-color: #fff;
}



.anchor {
    margin: 2em 0;
}

.anchor h4 {
    text-align: center;
    margin: 0 auto 2em;
    max-width: 80%;
    height: 2em;
}
.u-line {
    position: relative;
    padding-bottom: 0.5em;
    border-bottom: 4px solid #DDD;
}
.u-line::after {
    position: absolute;
    content: " ";
    border-bottom: solid 4px #D08A2C;
    bottom: -4px;
    width:10%;
    display: block;
}



/* - ## x <= 569px
 ------------------------------------------------------------ */

@media screen and (min-width:569px) {
    .seminar-promo .details th:lang(ja) {
        width: 35%;
        min-width: inherit;
    }
}


/* - ## x <= 768px
 ------------------------------------------------------------ */

@media screen and (min-width:768px) {
    .seminar-promo.hapa-2017 .for-pc {
        display: block;
    }
    .seminar-promo.hapa-2017 .for-mobile {
        display: none;
    }

    /*booking*/
    .hapa-2017 .booking h3 {
        font-size: 1.2em;
    }
    .button-wrap {
        flex-direction: row;

        justify-content: space-around;
    }
    .hapa-2017 .button-wrap a {
        margin: 0 .2em;
    }
    .seminar-list ul {
        display: grid;

        grid-template-columns: 20% 20% 20% 20% 20%;
        grid-template-rows: 25px 25px 25px 25px 25px;
    }
    /*list*/
    .seminar-list .wrapper {
        display: grid;
        width: 100%;
        margin: 0 auto .1em;
        border: 1px solid #dedede;

        grid-template-columns: 20% 20% 20%;
        grid-template-rows: 40px;
    }
    .seminar-list .wrapper .day {
        padding: 0 0 0 1em;
        border: none;

        grid-column-start: 1;
        grid-column-end: 2;
    }
    .seminar-list .wrapper .place {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    .seminar-list .wrapper .time {
        grid-column-start: 3;
        grid-column-end: 4;
    }
    .seminar-list .wrapper .rank {
        grid-column-start: 4;
        grid-column-end: 5;
    }
    .seminar-list .wrapper .buy {
        grid-column-start: 5;
        grid-column-end: 6;
    }
    .hapa-2017 .data {
        font-size: 1.6em;
        margin: .7em 0 .3em;
    }
    .hapa-2017 .seminar-time {
        padding: .5em 0 .7em;
    }
    .seminar-promo.hapa-2017 .ticket.due h3 {
        font-size: 2em;
    }
    .ticket.due [class*=grid-][class*=-noGutter] .booking .inner {
        margin: 0 0 0 1em;
    }
    .seminar-promo.hapa-2017 .ticket.due [class*=grid-][class*=-noGutter] .book-info .inner {
        padding: 0;
    }
    .hapa-2017 h4.type-label {
        display: inline;
        padding: 0 1em 0 .5em;
    }
}




/* - ## x >= 1025px
 ------------------------------------------------------------ */

@media screen and (min-width:1024px) {
    .seminar-promo.hapa-2017 .top-title {
        max-height: 375px;
    }
    /*booking*/
    .hapa-2017 .button-wrap {
        /* padding: 0 1em; */
    }

    /*info*/
    .hapa-2017 .after-party .inner {
        margin: 1em 2em;
    }
}

/* - .intro
 ------------------------------------------------------------ */

.intro h2 {
    /* margin: 1em 0; */
}
.intro h2 span {
    display: block;
    margin: 0 0 .5em -.5em;
}
.intro p {
    line-height: 1.7;
    /* margin: 1em auto; */
    font-size: 1em;
    padding: 0 1em;
}
.intro .img-02 {
    display: block;
    max-width: 270px;
    margin: 0 auto;
}

/* - .flow
 ------------------------------------------------------------ */
.flow {padding: 2em;}
.flow .box {border: 1px dotted #bbb;padding: 1em 1em 1em 0;}
.flow .box span {font-size: 2em;color: #757575;font-weight: normal;position: absolute;top: 0;left: .5em;}
.flow .box p {padding: 0 0 0 3em;position: relative;}
.flow [class*=arrow-] {text-align: center;font-size: 1.5em;padding: .2em 0;color: #757575;}
.flow em {
    white-space: nowrap;
    display: inline-block;
    font-style: normal;
}
.seminar-promo .flow .grid-center {
    align-items: flex-start;
}


/* - .flow (Curriculum)
 ------------------------------------------------------------ */
.flow li {padding: 2em 0 1.5em;}

/* - .ticket
 ------------------------------------------------------------ */
.ticket {
    margin: 1em 0 2em;
    padding: 2em 1em;
    background-color: #433351;
}
.ticket h3 {
    /* margin: 1em 0 0 0; */
}
.ticket p {
    /* text-align: center; */
}

.ticket .close {
    font-weight: bold;
    width: 25%;
    margin: 1em auto 0;
    padding: .5em;
    color: #488aaa;
    border: 1px solid #bbb;
}
.ticket .book-wrap {
    margin: 0 auto 2em;
    padding: 1em;
    background-color: #fff;
}
.ticket .book-wrap .tel {
    font-weight: bold;
    margin: 1em 0;
    padding: .25em;
    text-align: center;
    color: #fff;
    background-color: #73ccb3;
}
.ticket .book-wrap .online {
    font-weight: bold;
    margin: 1em 0;
    padding: .25em;
    text-align: center;
    color: #fff;
    background-color: #67afda;
}
.ticket .title-wrap {
    margin: 0 0 1em;
}
.ticket .title-wrap h3 {
    font-size: 1.6em;
    margin: .2em 0 0;
    text-align: left;
    line-height: 1.4;
}
.ticket .title-wrap h3 span {
    /* display: block; */
}
.ticket .title-wrap h4 {
    font-size: 1.16em;
    display: block;
    margin: 0 0 .8em;
}
.ticket .title-wrap p {
    font-size: 1.3em;
}
.ticket .title-wrap p b {
    font-size: 140%;
    /* display: block; */
    letter-spacing: -1px;
    line-height: 1.4;
    position: relative;
    top: -2px;
}
.ticket .title-wrap p span.eccetto {
    font-size: 90%;
}
.ticket .title-wrap p span:not(.eccetto) {
    font-size: 90%;
    /* display: block; */
}

/* - .video
 ------------------------------------------------------------ */
.video {width: 100%;background-color: #9999cb;/* padding: 3em 0 2em; */}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    width: 100%;
    margin: 1em 0 0;
    border: 4px solid #fff;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.intro a {
    display: block;
}
.live {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 1px 1px #efeeee;
}


.sec-profile {
    margin: 2.5em 0 0 0;
    padding: 0 0 2.5em 0;
}
.sec-profile h3 {
    font-size: 1.3em;
    text-align: center;
    margin: 0 0 .7em;
}
.sec-profile img {
    width: 180px;
}
.sec-profile p {
    font-size: .9em;
    line-height: 1.8;
    margin: 0 0 2em;
}
.sec-profile h4 {
    font-size: 1.3em;
    font-weight: 800;
}
.series-item-content {
    border: 3px solid #EEE;
    margin:0.5em 0.5em 2em 0;
    padding: 0.7em 0; 
    font-size: 0.9em; 
}
.series-item-content ul {
    margin-left: 0.5em;
    margin-bottom: 1em;
}
.series-item-content li {
    padding:0;
    font-size: 0.9em;
    list-style-type: disc;
    margin-left: 1em;
}
.series-item-image {
    margin-bottom: 1em;
}
.series-item-image img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;    
}