body{
    background-color: #fdd448;
}

.root {
    background-image: url("../images/Bg_repeat.png");
    width: 100vw;
    height: 100%;

    overflow: hidden;
    animation: scroll-anim 100000s linear infinite;
}
@keyframes scroll-anim {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 1024000px 0;
    }
}

.content-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    align-content : flex-start;
    width: 100vw;

    padding-bottom: 60px;
}　

[class^="content-"]{
     width: 100vw;
 }


/*<editor-fold desc="content-header">*/

.header-bg{
    width: 100vw;
}

.banner-content {
    width: calc(100%/3);
    padding:0 5px;
    z-index : 1;
}

.banner-view{
    max-width:100%;
    z-index : 1;
}

@media (min-width: 768px){

    .header-banners{
        position: absolute;

        display: flex;
        width: 50%;

        margin-top: 50%;
        margin-left: 25%;
        padding-bottom: 8%;
    }
}

@media (max-width: 767px){

    .header-banners{
        position: absolute;

        display: flex;
        width: 90%;

        margin-top: 78%;
        margin-left: 5%;
        padding-bottom: 8%;
    }

}

/*</editor-fold>*/

/*<editor-fold desc="content-campaign">*/
.conditions-bg{

    z-index : 10;
    width: 100vw;
}

.condition-load {
    padding:0 5px;
}

.load-view {
    width: 25%;
}

.condition-detail {
    padding-bottom: 2%;
}

.condition-view {
    width: 100%;
}

@media screen and (min-width: 768px){

    .condition-loads {
        position: absolute;
        margin-top: 32%;
        margin-left: 27.25%;

        width: 25%;
        z-index : 20;
    }

    .condition-details{
        position: absolute;
        margin-top: 25%;
        margin-left: 26%;

        width: 50%;
        z-index : 30;
    }

    .campaign-banner{
        position: absolute;
        margin-top: 150%;
        margin-left: 23%;

        width: 55%;
        z-index : 30;
        padding-bottom: 1%;
    }
}

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

    .condition-loads {
        position: absolute;
        margin-top: 45%;
        margin-left: 14.5%;

        width: 36%;
        z-index : 20;
    }

    .condition-details{
        position: absolute;
        margin-top: 37%;
        margin-left: 13%;

        width: 70%;
        z-index : 30;
    }

    .campaign-banner{
        position: absolute;
        margin-top: 215%;
        margin-left: 10%;

        width: 80%;
        z-index : 30;
        padding-bottom: 1%;
    }
}


/*</editor-fold>*/

/*<editor-fold desc="content-media-view">*/

.video-view-bg{
    width: 100vw;
}

.ss-list-wrap{
    margin-top: 5%;
    background-color: #fff5d5;
    align-items: center;
}

@media screen and (min-width:  768px){

    .video-view{
        position: absolute;
        width: 16.2%;

        margin-top: 14.5%;
        margin-left: 25%;
    }

    .slider{
        display: flex;
        width: 90%;
        margin-left: 5%;
    }

    .ss {
        width: calc(100%/4);
        padding:5px 5px;
    }

    .ss-view {
        max-width:100%;
    }


}

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

    .video-view{
        position: absolute;
        width: 56.7%;

        margin-top: 33%;
        margin-left: 22.5%;
    }

    .ss {
        padding:20px 10px;
    }

    .ss-view {
        width: 100%;
    }

    .slider{
        max-width: 360px;
        margin: 0 auto;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="content-static-footer">*/

.content-static-footer{
    margin-top: 10%;

}

.copyright-view{
    z-index : 100;
    width: 100vw;
    font-size:1em;
    text-align: center;
    padding-top: 4%;
    padding-bottom: 60px;
    background-color: #ff7800;
    font-family: "ヒラギノ角ゴシック";
}
/*</editor-fold>*/

/*<editor-fold desc="dynamic-footer">*/


.dynamic-footer{
    position: fixed;
    z-index : 100;
    bottom: -20%;
    transition: all 0.65s;
    width: 100%;
    height: 100px;
}

.dynamic-footer.is-active {
    transition: all 0.65s;
    bottom: 0;
}

.footer-bg{
    width: 100%;
    height: 100px;
}

.footer-text{
    position: absolute;
    left: 50%;
    top: 0%;
    z-index : 100;
}

@media screen and (min-width:  768px){
    .footer-text-view{
        height: 44px;
        width: 345px;

        position: absolute;
        left: -172px;
    }

    .footer-banners{
        list-style: none;
        display: flex;

        position: absolute;
        margin-top: 50px;
        margin-left: calc(50% - (450px / 2));
    }

    .footer-banner-content {
        width: 150px;
        padding:0 5px;
    }
}

@media screen and (max-width: 767px){
    .footer-text-view{
        height: 30px;
        width: 241px;

        position: absolute;
        left: -120px;
    }

    .footer-banners{
        list-style: none;
        display: flex;

        position: absolute;
        margin-top: 50px;
        margin-left: calc(50% - (360px / 2));
    }

    .footer-banner-content {
        width: 120px;
    }

}

/*</editor-fold>*/