@charset "UTF-8";

/* ---------------------------------------------
	EXPOページ
--------------------------------------------- */

/*------------------メイン------------------*/
#mainWrap{
    /*background: #fff url("../../img/bg01.png") no-repeat center 0;
    background-attachment: fixed;*/
    position: relative;
    background-color: #fff;
    z-index: 500;
    overflow: hidden;
}
#mainWrap::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-image:url("../../img/bg01.png");
    background-size:cover;
}

#mainWrap > div{
    width: 960px;
    margin: 0 auto;
    padding: 4em 0;
    text-align: center;
}
#mainWrap h3{
    font-size: 230%;
    font-weight: normal;
    text-align: center;
    line-height: 1;
    display: flex;
    margin: 0 0 0.2em;
    align-items: center;
    justify-content: center;
    /* color: #589cbf; */
    color: #479e89;
}

#mainWrap h3 span{
    display: inline-block;
    background-color: #ea297b;
    color: #fff; font-size: 70%;
    padding: 0 0.5em 0;
    line-height: 1.4;
    margin-left: 10px;
    vertical-align: text-bottom;
}
@media screen\0 {
    #mainWrap h3 span{
        vertical-align: middle;
        display: inline;
        line-height: 1.0;
        padding: 0.2em 0.5em 0;
    }
}

#mainWrap .subttl{
    color: #c84e4e;
    font-size: 150%;
    line-height: 1.0;
    padding-bottom: 1em;
    margin-top: -0.2em;
}

#mainWrap .nowon{
    /*width: 70%;*/
    position: relative;
    font-size: 176%;
    margin: -0.5em 0.6em 0.7em;
    letter-spacing: 0.1em;
}
#mainWrap .nowon span{
    color: #fff;
    line-height: 1.0;
    padding: 0.2em 0;
    display: block;
    background-color: #f8388a;
    position: relative;
    z-index: 1111;
}
#mainWrap .nowon::before,
#mainWrap .nowon::after{
    content: "";
    display: block;
    background: url("../../img/ribbon_parts.svg") no-repeat 0 0;
    position: absolute;
    top: 50%; left: -0.8em;
    width: 1.2em;
    height: 1.8em;
    background-size: contain;
    margin-top: -0.5em;
    z-index: 888;
}
#mainWrap .nowon::before{ transform: rotateY(180deg);}
#mainWrap .nowon::after{
    top: 50%; right: -0.8em; left: auto;
    background-size: contain;
}

#mainWrap > div > div.intro__photo{
    margin-bottom: 3em;
    box-shadow: 18px 18px 0 1px rgba(71, 158, 137, 0.37);
}
.intro__photo img{
    vertical-align: bottom;
    width: 100%;
    height: auto;
}
#mainWrap .intro{
    text-align: center;
    color: #f8388a;
    font-size: 128%;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 2em;
}

#mainWrap > div > div{ margin-bottom: 5em;}
#mainWrap h4{
    font-size: 180%;
    font-weight: normal;
    color: #6b6b6b;
    position: relative;
    z-index: 300;
}
#mainWrap h4 + p{ color: #ff496c;}

@media screen and (max-width: 960px) {
    #mainWrap > div{
        width: 94%;
        padding-top: 40px;
        padding-bottom: 0;
    }
    #mainWrap h3{
        font-size: 170%;
        margin-left: -20px;
    }
    #mainWrap .nowon{ font-size: 140%; margin-bottom: 0.4em;}
    #mainWrap .intro{ font-size: 104%;}
    #mainWrap .intro .narrow_sp{ letter-spacing: -0.1em;}
    #mainWrap h4{ font-size: 150%;}
}


/*------------実施内容------------*/
#summary dl{
    background-color: #fff;
    margin: -20px 0 0;
    padding: 2.4em 2em 2.0em 0;
    font-size: 108%;
    line-height: 1.6;
    box-shadow: 18px 18px 0 1px rgba(200, 78, 78, 0.37);
}
.drama #summary dl{ box-shadow: 18px 18px 0 1px rgba(229, 143, 72, 0.37);}
.variety #summary dl{ box-shadow: 18px 18px 0 1px rgba(141, 166, 68, 0.37);}
.news #summary dl{ box-shadow: 18px 18px 0 1px rgba(100, 166, 79, 0.37);}
.sports #summary dl{ box-shadow: 18px 18px 0 1px rgba(71, 158, 137, 0.37);}
.digital #summary dl{ box-shadow: 18px 18px 0 1px rgba(88, 156, 191, 0.37);}
.technique #summary dl{ box-shadow: 18px 18px 0 1px rgba(105, 101, 175, 0.37);}
.design #summary dl{ box-shadow: 18px 18px 0 1px rgba(178, 93, 169, 0.37);}
.sales #summary dl{ box-shadow: 18px 18px 0 1px rgba(178, 93, 169, 0.37);}

#summary dt,
#summary dd{ margin-bottom: 14px;}
#summary dt{
    width: 10em;
    background-color: #c84e4e;
    color: #fff;
    float: left;
    /*-webkit-transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0);
    transform: skew(-10deg,0);*/
    margin-left: -3px;
}
.drama #summary dt{ background-color: #fd9238;}
.variety #summary dt{ background-color: #90b516;}
.news #summary dt{ background-color: #64a64f;}
.sports #summary dt{ background-color: #479e89;}
.digital #summary dt{ background-color: #589cbf;}
.technique #summary dt{ background-color: #6965af;}
.design #summary dt{ background-color: #b25da9;}
.sales #summary dt{ background-color: #b25da9;}

#summary dd{
    text-align: left;
    padding-left: 11em;
    color: #333;
}

#summary dd a{
    text-decoration: underline;
    color: #ff496c;
}
.cx_displaydevice #summary dd a:hover{ color: #ff8ea4;}

@media screen and (max-width: 960px) {
    #summary dl{
        font-size: 100%;
        padding-right: 1em;
    }
    #summary dt{
        width: auto;
        float: none;
        text-align: left;
        padding: 0 0.4em;
    }
    #summary dd{ padding-left: 1.2em;}
}
#summary .underline{ border-bottom: solid 5px #FFEC21;}
#summary .strong{ font-weight: bold; color: #d33232;}

.summary__detail{ font-size: 94%;}
.summary__detail__ttl{
    font-weight: bold;
    color: #479e89;
    margin-top: 1em;
}
.summary__detail__ttl::before{ content: "◆ ";}
.summary__detail2{ margin-bottom: 1em;}


/*------------受講までのフロー------------*/
#flow > ul{
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#flow > ul > li{
    flex-shrink: 0;
    width: 300px;
    margin: 0 30px 60px 0;
    background-color: #fff;
    padding: 46px 25px 25px;
    box-shadow: 18px 18px 0 1px rgba(200, 78, 78, 0.37);
    box-sizing: border-box;
    position: relative;
    text-align: center;
}
.drama #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(229, 143, 72, 0.37);}
.variety #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(141, 166, 68, 0.37);}
.news #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(100, 166, 79, 0.37);}
.sports #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(71, 158, 137, 0.37);}
.digital #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(88, 156, 191, 0.37);}
.technique #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(105, 101, 175, 0.37);}
.design #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(178, 93, 169, 0.37);}
.sales #flow > ul > li{ box-shadow: 18px 18px 0 1px rgba(178, 93, 169, 0.37);}

#flow > ul > li:nth-of-type(3n){ margin: 0 0 60px 0;}
#flow > ul > li::after{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 0 240px 300px;
    border-color: transparent transparent rgba(0,0,0,0.04) transparent;
    z-index: 250;
}
#flow > ul > li::before{
    content: "";
    display: inline-block;
    font-size: 450%;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
    position: absolute;
    top: -0.4em;
    left: 10px;
    line-height: 1.0;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    font-weight: bold;
    color: #f07878;
}
.drama #flow > ul > li::before{ color: #ffb77d;}
.variety #flow > ul > li::before{ color: #cde77e;}
.news #flow > ul > li::before{ color: #a2e38d;}
.sports #flow > ul > li::before{ color: #85e6cf;}
.digital #flow > ul > li::before{ color: #94d1f1;}
.technique #flow > ul > li::before{ color: #a39fec;}
.design #flow > ul > li::before{ color: #eba1e3;}
.sales #flow > ul > li::before{ color: #eba1e3;}

#flow > ul > li:nth-of-type(1)::before{ content: "1.";}
#flow > ul > li:nth-of-type(2)::before{ content: "2.";}
#flow > ul > li:nth-of-type(3)::before{ content: "3.";}
#flow > ul > li:nth-of-type(4)::before{ content: "4.";}
#flow > ul > li:nth-of-type(5)::before{ content: "5.";}
#flow > ul > li:nth-of-type(6)::before{ content: "6.";}
#flow > ul > li:nth-of-type(7)::before{ content: "7.";}
#flow > ul > li:nth-of-type(8)::before{ content: "8.";}

#flow > ul > li > p:nth-of-type(1){
    font-size: 118%;
    font-weight: bold;
    color: #555;
    line-height: 1.4;
    margin-bottom: 8px;
}
#flow > ul > li > p.date,
#flow > ul > li > span.date{
    font-size: 118%;
    font-weight: bold;
    color: #c84e4e;
    margin-bottom: 10px;
    position: relative;
}
.drama #flow > ul > li > p.date,
.drama #flow > ul > li > span.date{ color: #d97422;}
.variety #flow > ul > li > p.date,
.variety #flow > ul > li > span.date{ color: #87a52f;}
.news #flow > ul > li > p.date,
.news #flow > ul > li > span.date{ color: #64a64f;}
.sports #flow > ul > li > p.date,
.sports #flow > ul > li > span.date{ color: #479e89;}
.digital #flow > ul > li > p.date,
.digital #flow > ul > li > span.date{ color: #589cbf;}
.technique #flow > ul > li > p.date,
.technique #flow > ul > li > span.date{ color: #6965af;}
.design #flow > ul > li > p.date,
.design #flow > ul > li > span.date{ color: #b25da9;}
.sales #flow > ul > li > p.date,
.sales #flow > ul > li > span.date{ color: #b25da9;}


#flow > ul > li > span.date{
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-bottom: 0;
}
/*.internship.spage #flow > ul > li > p.date.strong::before{
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    background-color: #ffde48;
    position: absolute;
    bottom: -3px;
    left: 0;
}*/
#flow > ul > li > p.date.strong{
    background: -moz-linear-gradient(top,  rgba(255,236,33,0) 0%, rgba(255,236,33,0) 75%, rgba(255,236,33,1) 76%, rgba(255,236,33,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,236,33,0)), color-stop(75%,rgba(255,236,33,0)), color-stop(76%,rgba(255,236,33,1)), color-stop(100%,rgba(255,236,33,1)));
    background: -webkit-linear-gradient(top,  rgba(255,236,33,0) 0%,rgba(255,236,33,0) 75%,rgba(255,236,33,1) 76%,rgba(255,236,33,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,236,33,0) 0%,rgba(255,236,33,0) 75%,rgba(255,236,33,1) 76%,rgba(255,236,33,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,236,33,0) 0%,rgba(255,236,33,0) 75%,rgba(255,236,33,1) 76%,rgba(255,236,33,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,236,33,0) 0%,rgba(255,236,33,0) 75%,rgba(255,236,33,1) 76%,rgba(255,236,33,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffec21', endColorstr='#ffec21',GradientType=0 );
    display: inline-block;
}
#flow > ul > li > p.date.grey{ color: #838383;}
#flow > ul > li > p.attention{
    font-size: 94%;
    line-height: 1.4;
    color: #555;
}

#flow .loginBtn{
    position: relative;
    z-index: 500;
}
#flow .loginBtn li:nth-of-type(1){ margin-bottom: 6px;}
#flow .loginBtn li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: solid 5px #00aabe;
}
#flow .loginBtn li:nth-of-type(1) a{ background-color: #fff;}
#flow .loginBtn li:nth-of-type(2) a{ background-color: #00aabe;}
#flow .loginBtn li a:hover{ border: solid 5px #00b4c9;}
#flow .loginBtn li:nth-of-type(1) a:hover{ background-color: #f5fffb;}
#flow .loginBtn li:nth-of-type(2) a:hover{ background-color: #00b4c9;}
#flow .loginBtn li a p{
    text-align: center;
    line-height: 3em;
    font-size: 108%;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
}
#flow .loginBtn li:nth-of-type(1) a{ color: #00aabe;}
#flow .loginBtn li:nth-of-type(2) a{ color: #fff;}


@media screen and (max-width: 960px) {
    #flow > ul{ margin-top: 30px;}
    #flow > ul > li{
        width: 100%;
        padding-top: 25px;
        margin-right: 0;
        margin-bottom: 35px;
    }
    #flow > ul > li:nth-of-type(3){ margin-bottom: 35px;}
    #flow > ul > li .mt70{ margin-top: 10px;}
    #flow > ul > li::before{
        font-size: 350%;
        top: -0.16em;
    }
    /*#flow .loginBtn li a p{ line-height: 68px;}*/
}

/*------------受講までのフロー＋α------------*/
#flow > div{
    line-height: 1.6;
    color: #4b4b4b;
}


@media screen and (max-width: 960px) {
    #flow > div{
        text-align: left;
        margin: 1em 1em 0;
    }
    #flow > div > p,
    #flow > div li{ margin-bottom: 0.4em;}
}

/*------------------下部ログインボタン------------------*/
#btmBtn{
    background-color: #e8e8e8;
    padding: 20px 0;
    position: relative;
    z-index: 500;
}
#btmBtn ul{
    width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#btmBtn li{
    flex-shrink: 0;
    width: 49%;
}
#btmBtn li:nth-of-type(1){ margin-right: 2%;}
#btmBtn li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: solid 5px #00aabe;
}
#btmBtn li:nth-of-type(1) a{ background-color: #fff;}
#btmBtn li:nth-of-type(2) a{ background-color: #00aabe;}
#btmBtn li a:hover{ border: solid 5px #00b4c9;}
#btmBtn li:nth-of-type(1) a:hover{ background-color: #f5fffb;}
#btmBtn li:nth-of-type(2) a:hover{ background-color: #00b4c9;}
#btmBtn li a p{
    text-align: center;
    line-height: 3em;
    font-size: 118%;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
}
#btmBtn li:nth-of-type(1) a{ color: #00aabe;}
#btmBtn li:nth-of-type(2) a{ color: #fff;}

@media screen and (max-width: 960px) {
    #btmBtn ul{ width: 94%;}
    #btmBtn li{
        width: 100%;
    }
    #btmBtn li:nth-of-type(1){ margin: 0 0 12px;}
}