@charset "UTF-8";
/*import*/
@import url(./reset.css);
@import url(./font.css);
/*--------*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
a {
    text-decoration: none;
}

.sp {display: block;}
.pc {display: none;}

#wrapper
{
    overflow: hidden;

    font-size: 62.5%;
    width: 100%;
    max-width: 750px;
    background-color: #ffb713;
    color: #000000;

    margin: 0 auto;
    position: relative;

    -webkit-text-size-adjust: 100%;
    font-family: 'Kosugi Maru', "ヒラギノ角ゴ Std W3", "メイリオ", "meiryo", "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Geneva, Arial, Verdana, sans-serif, "YuGothic", "游ゴシック", "ms pgothic", "ms pゴシック", "osaka";
}

#top {
    width: 100%;
    margin: 1% 0 2.3% 0;
}
#top h1 {
    position: relative;
    width: 93.2%;
    margin: 0 auto;
    
    background: transparent url(../img/title.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((426/1091)*93.2%);
}
#top h1 span {
    position: absolute;
    top: 9.4%;
    right: 3.67%;
    
    font-size: 3.5vw;
    font-weight: 700;
    line-height: 1.13;
}


#intro {
    
}
#intro .inner {
    
}

#intro .intro_block_area {
    
}
#intro .intro_block_area .block {
    width: 93.2%;
    margin: 0 auto 5.13% auto;
    padding: 5.13% 0;
    
    background: #ffffff;
    
    box-sizing: border-box;
    border: 5px solid #000000;
    border-radius: 18px;
    box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 1);
}

#intro .head {
    width: 89%;
    margin: 0 auto 2.66% auto;
}
#intro .head .icon {
    float: left;
    width: 26.4%;
    margin: 0 6.6% 0 0;
}
#intro .head .title {
    float: left;
    width: 66%;
    
    font-size: 4.5vw;
    font-weight: 700;
    line-height: 1.214;
    
}
#intro .head .title span {
    display: block;
    width: 94%;
    margin: 3% 0 0 0;
    padding: 1.44% 5.55%;

    font-size: 3.5vw;
    color: #ffffff;
    box-sizing: border-box;
    border-radius: 38px;
}
#intro .head .title .read {
    display: block;
    font-weight: normal;
    width: 100%;
    margin: 0 0 2% 0;
    padding: 0;
    font-size: 2.5vw;
    color: #000000;
}




.col1 {
    background: #26c83e;
}
.col2 {
    background: #fa75b3;
}
.col3 {
    background: #fda635;
}
.col4 {
    background: #b54df1;
}
.col5 {
    background: #1e90ff;
}
.col6 {
    background: #800080;
}
.col7 {
    background: #ee0000;
}

#intro .cls_block {
    width: 100%;
    margin: 0 0 2.66% 0;
}
#intro .cls_block #slides p a {
    display: block;
    margin: 0 3.3%;
}


#intro .detail {
    width: 89%;
    margin: 0 auto 2.66% auto;
    
    font-size: 3vw;
    font-weight: 700;
    line-height: 1.44;
}

.btn {
    display: block;
    width: 89%;
    margin: 0 auto;
    padding: 5% 0;
    text-align: center;
    
    background: #fb6720;
    
    box-sizing: border-box;
    border: 5px solid #000000;
    border-radius: 18px;
    box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 1);
}
.btn span {
    line-height: 1;
    font-size: 5vw;
    font-weight: 700;
    color: #ffffff;
    
}

#sub {
    
}

#sub h1 {
    position: relative;
    width: 100%;
    margin: 0 0 11.2% 0;
    
    background: transparent url(../img/sub_title.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((907/1170)*100%);
}
#sub h1 span {
    position: absolute;
    top: 91.5%;
    left: 0;
    right: 0;
    margin: auto;
    
    text-align: center;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 1.42;
}

/*
#sub .youtube {
    width: 93.2%;
    margin: 0 auto 5.55% auto;
}
*/
#sub #youtubech {
    width: 93.2%;
    margin: 0 auto 5.55% auto;
}

#sub .caption {
    text-align: center;
    line-height: 1;
    
    font-size: 4.78vw;
    font-weight: 700;
    margin: 0 auto 5.55% auto;
}

#sub ul {
    width: 93.2%;
    margin: 0 auto 5.55% auto;
}
#sub ul li {
    margin: 0 0 2.5% 0;
}

#sub ul li p {
    display: inline-block;
    vertical-align: middle;
}
#sub ul li .char {
    width: 26.4%;
    margin: 0 2% 0 0;
}
#sub ul li .detail {
    width: 71.6%;
    font-size: 3.9vw;
    font-weight: 700;
    line-height: 1.13;
}
#sub ul li .detail span {
    font-size: 3vw;
}

#footer {
    background: #ffffff;
    padding: 3.42% 0;
}
#footer p {
    width: 40.85%;
    margin: 0 auto;
    
    background: transparent url(../img/f_logo.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((112/478)*40.85%);
}

.mg,
.thumb {
    margin: 0 3% 0 0;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}


.player {
    position: relative;
}
.player .playmark {
    position: absolute;
    top: 31%;
    left: 0;
    right: 0;
    
    width: 21.6%;
    margin: 0 auto;
    
    background: transparent url(../img/play_mark.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((201/201)*21.6%);
}


#playbg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    
    background: rgba(0,0,0,.8);
    transition-duration: .25s;
}
#playbg .flame {
    position: absolute;
    z-index: -2;
}


@media screen and (min-width: 768px) {
    .sp {display: none;}
    .pc {display: block;}
    
    #wrapper {
        max-width: 1980px;
    }
    #top {
        max-width: 1170px;
        width: 100%;
        margin: 1% auto 2.3% auto;
    }
    #intro,
    #sub
    {
        max-width: 1170px;
        width: 100%;
        margin: 0 auto 5% auto;
    }
    
    
    
    #top h1 {
        position: relative;
        width: 40%;
        margin: 0 auto 0 3%;
        background: transparent url(../img/title.png) 0 0 no-repeat;
        background-size: contain;
        padding-top: calc((426/1091)*40%);
    }
    #top h1 span {
        position: absolute;
        top: 9.4%;
        right: 0;
        font-size: 1.8vw;
    }
    
    
    #intro .intro_block_area {
        width: 98%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    #intro .intro_block_area .block {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 48%;
        margin: 0 2% 2.5% auto;
/*        padding: 2.5% 0;*/
        padding: 2.5% 0 12.5% 0;
    }
    #intro .head .title {
        float: left;
        width: 66%;
        font-size: 2.25vw;
        font-weight: 700;
        line-height: 1.214;
    }
    #intro .head .title span {
        font-size: 2vw;
    }
    #intro .head .title .read {
        font-size: 1.25vw;
    }
    #intro .detail {
        font-size: 1.5vw;
    }
    .btn span {
        font-size: 2.75vw;
    }
    
    
    #sub .pc_block {
        width: 98%;
        text-align: center;
        margin: 0 auto;
    }
    #sub .pc_block .logo {
        display: inline-block;
        vertical-align: middle;
        
        width: 48%;
        margin: 0 auto 0 0;
        background: transparent url(../img/sub_title.png) 0 0 no-repeat;
        background-size: contain;
        padding-top: calc((907/1170)*50%);
    }
    #sub .pc_block .youtube {
        display: inline-block;
        vertical-align: middle;
        
        width: 48%;
        margin: 0 auto;
    }
    #sub .pc_block #youtubechpc {
        display: inline-block;
        vertical-align: middle;
        
        width: 48%;
        margin: 0 auto;
    }
    #sub .pc_block .text {
/*        text-align: left;*/
        font-size: 2.9vw;
        font-weight: 700;
        line-height: 1.44;
        margin: 0 0 2.5% 0
    }
    #sub .caption {
        font-size: 4vw;
        margin: 0 auto 2.5% auto;
    }
    
    #sub ul {
        width: 98%;
        margin: 0 auto 5% auto;
    }
    #sub ul li {
        width: 32%;
        display: inline-block;
        vertical-align: middle;
        
        margin: 0 2% 0 0;
    }
    #sub ul li:nth-last-child(1){
        margin: 0;
    }
    #sub ul li .detail {
        font-size: 1.95vw;
    }
    #sub ul li .detail span {
        font-size: 1.5vw;
    }
    #footer {
        padding: 1.71% 0;
    }
    #footer p {
        width: 20%;
        background: transparent url(../img/f_logo.png) 0 0 no-repeat;
        background-size: contain;
        padding-top: calc((112/478)*20%);
    }
    
    .btn {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
        margin: auto;
    }
}

@media screen and (min-width: 1170px) {
    #top h1 span {
        font-size: 20px;
    }
    #intro .head .title {
/*        font-size: 30px;*/
        font-size: 25px;
    }
    #sub .pc_block .text {
        font-size: 24px;
    }
    #intro .head .title span {
        font-size: 23px;
    }
    #intro .detail {
        font-size: 16px;
    }
    .btn span {
        font-size: 32px;
    }
    #sub .caption {
        font-size: 30px;
    }
    #sub ul li .detail {
        font-size: 20px;
    }
    #sub ul li .detail span {
        font-size: 16px;
    }
    
    #intro, #sub {
        margin: 0 auto 2.5% auto;
    }
    #intro .head .title .read {
        font-size: 16px;
    }

}