@charset "UTF-8";
/* CSS Document */

.ecm-border-10 {
  border-width: 10px !important;
}
.ecm-text-recomend {
  font-size: 18px;
}
@media screen and (min-width: 961px) {
  .ecm-text-recomend {
    font-size: 20px;
  }
}

@media screen and (min-width: 961px) {
  .p-img-box {
    width: 360px;
  }
}

@media screen and (max-width: 960px) {
  .image100{
    width: 100%;
  }
}

.ecm-list-item--circle::before {
  width: 8px !important;
  height: 8px !important;
  border-radius: 4px;
  background: #C8102E;
  border: none !important;
  margin-top: .7em !important;
}

.yt_movie{
    padding: 10vw 0 10vw 0;
}

.kv-text-note {
    position: relative;
    font-size: 1.9vw !important;
    line-height: 1.3;
    color: #fff;
    top: -5vw;
    text-align: center;
}

.text-note-01 {
    font-size: 1.8vw !important;
    text-align: left;
    position: relative;
    width: 100%;
    top: 33.5%;
    padding: 5vw 6vw 5vw 6vw;
    margin-bottom: 10px !important;
    line-height: 1.5;
}

.text-note-02 {
    font-size: 1.8vw !important;
    text-align: left;
    position: relative;
    width: 100%;
    padding: 5vw 0 7vw 7vw;
    line-height: 1.2;
}

.text-note-03 {
    font-size: 1.8vw !important;
    text-align: left;
    position: relative;
    width: 100%;
    padding: 5vw 0vw 7vw 7vw;
    margin-bottom: 10px !important;
    line-height: 1.2;
}

.text-note-04 {
    font-size: 2vw !important;
    text-align: left;
    position: relative;
    top: -13VW;
    padding: 0 0 0 2vw;
    line-height: 1.2;
    color: #fff;
}

.text_center{
    text-align: center;
}

.movie-wrap01{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10vw 0 0 0;
}

.movie-wrap02 {
    position: absolute;
    top: 65%;
    left: 8vw;
    width: 80%;
}

.movie-wrap03 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10vw 0 0vw 0;
}

.movie-wrap01 video,.movie-wrap02 video,.movie-wrap03 video{
    width: 100%;
    height: 100%;
    border-radius: 2vw;
}

.cont01 {
    background: url(../sp_bg01.jpg) repeat 0 0;
    padding: 0 0 10vw 0;
    background-size: cover;
}

.cont01_01 {
    position: relative;
    top: 0;
    left: 0;
    padding-top: 10%;
    width: 80%;
}

.cont01_02 {
    position: relative;
    top: 0;
    left: 0;
    padding-top: 5%;
    width: 80%;
}

.cont02{
}

.cont02_01, .cont02_02, .cont02_03 {
    position: relative;
    width: 90%;
    margin: 10VW auto;
}

.cont02_01,.cont02_02{
     background-color: rgba(255,255,255,0.60)
}

.cont02_03 {
    padding: 0 0 5vw 0;
    background: url(../sp_sec02_03_bg.png) repeat 0 0;
    width: 90%;
    margin: 0 auto;
    background-size: cover;
}

.cont02_01_01 {
    position: relative;
    top: -5vw;
    left: 0;
    width: 60%;
}

.cont02_01_02 {
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
}

.cont02_01_03 {
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    padding-top: 2vw;
}

.cont02_01_04{
    position: relative;
    top:0;
    left:0;
    padding-top: 3vw;
}

.cont02_01_05 {
    position: relative;
    top: 0;
    left: 0;
    width: 75%;
}

.cont02_01_06 {
    position: relative;
    top: 0;
    left: 0;
    width: 85%;
    padding-top: 2vw;
}

.cont02_02_01 {
    position: relative;
    top: -5vw;
    left: 0;
    width: 60%;
}

.cont02_02_02 {
    position: relative;
    top: 0;
    left: 0;
    padding-top: 2%;
}

.cont02_02_03 {
    position: relative;
    top: -4vw;
    left: 0;
    width: 80%;
}

.cont02_02_04 {
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
}


.cont02_03_01 {
    position: relative;
    top: -5vw;
    left: 0;
    width: 60%;
}

.cont02_03_02 {
    position: relative;
    top: -2vw;
    left: 0;
    width: 90%;
}

.cont02_03_03 {
    position: relative;
    top: -4vw;
    left: 0;
    width: 90%;
}

.cont03{
    padding: 0 0 10vw 0;
    background: url(../sp_bg02.jpg) repeat 0 0;
    position: relative;
    background-size: cover;
}

.cont03_00 {
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    padding-top: 12%;
}

.cont03_01 {
    position: relative;
    top: 0;
    left: -2vw;
    padding-top: 5%;
    width: 95%;
}

.cont03_02 {
    position: relative;
    top: -5vw;
    left: 2vw;
    width: 95%;
}

.cont03_03{
    position: relative;
    top:0;
    left:0;
}


.cont04{
    padding: 0 0 10vw 0;
    background: url(../sp_bg03.jpg) repeat 0 0
}

.c05_01{
    position: relative;
}

.c05_btn{
    position: relative;
    top:-10vw;
}

.flex_pc_row{
    display: flex;
    flex-direction: column;
}

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

    .yt_movie{
        padding: 40px 0 50px 0;
    }

    .kv-text-note {
        font-size: 12px !important;
        line-height: 2;
        padding: 0 0 0 20px;
        text-align: left;
        top: -30px;
    }
    
    .text-note-01 {
        text-align: left;
        bottom: auto;
        font-size: 12px !important;
        padding: 25px 0 0 25px;
    }
    
    .text-note-02 {
        text-align: left;
        top: -10px;
        font-size: 12px !important;
        padding: 0 0 10px 50px;
    }

    .text-note-03 {
        text-align: left;
        font-size: 12px !important;
        padding: 30px 0 0 60px;
        bottom: 0;
    }
    
    .text-note-04 {
        text-align: left;
        font-size: 12.5px !important;
        padding: 0 0 0 95px;
        bottom: 40px;
        top:auto;
    }

    .movie-wrap01 {
        position: relative;
        top: 0;
        left: 0;
        width: 538px;
        margin: 0 auto;
        padding: 30px 0 50px 0;
    }

    .movie-wrap02 {
        position: absolute;
        top: 1050px;
        left: 231px;
        width: 422px;
    }

    .movie-wrap03 {
        position: relative;
        top: 0;
        left: 0;
        width: 538px;
        margin: 0 auto;
        padding: 70px 0 0 0;
    }
    
    .movie-wrap01 video,.movie-wrap02 video,.movie-wrap03 video{
        border-radius: 15px;
    }
    
    .cont01{
        background: url(../bg01.jpg) repeat 0 0;
        padding: 90px 0 80px 0;
        background-size: cover;
    }
    
    .cont01_01{
        top:0;
        left:0;
        width: auto;
        padding-top: 0;
    }

    .cont01_02{
        top:0;
        left:0;
        padding-top: 25px;
        width: auto;
    }
    
    .cont02{
    }
    
    .cont02_01, .cont02_02 {
        margin: 80px 20px 80px;
        padding: 0 0 50px 0;
        width: auto;
    }
    
    .cont02_03 {
        margin: 70px 20px 0px;
        padding: 0 0 0 0;
        background: url(../sec02_03_bg.png) repeat 0 0;
        width: auto;
        background-size: cover;
    }
    
    .cont02_01_01{
        top:-25px;
        left:0;
        width: auto;
    }
    
    .cont02_01_02{
        top:0;
        left:0;
        padding-top: 10px;
        width: auto;
    }
    
    .cont02_01_03{
        top:0;
        left:0;
        padding-top: 20px;
        width: auto;
    }
    
    .cont02_01_04{
        top:0;
        left:0;
        padding-top: 30px;
        width: auto;
    }
    
    .cont02_01_05{
        top:-60px;
        left:0;
        width: auto;
    }
    
    .cont02_01_06{
        top:-45px;
        left:0;
        width: auto;
        padding-top: 0;
    }

    .cont02_02_01 {
        top: -25px;
        left: 0;
        width: auto;
    }
    
    .cont02_02_02{
        top:0;
        left:0;
        padding-top: 20px;
        width: auto;
    }
    
    .cont02_02_03{
        top:0;
        left:0;
        padding-top: 10px;
        width: auto;
    }
    
    .cont02_02_04{
        top:0;
        left:0;
        padding-top: 10px;
        width: auto;
    }

    .cont02_03_01{
        top:-25px;
        left:0;
        width: auto;
    }

    .cont02_03_02{
        top:-10px;
        left:0;
        width: auto;
    }

    .cont02_03_03{
        top:-30px;
        left:0;
        width: auto;
    }

    .cont03{
        padding: 50px 0 40px 0;
        background: url(../bg02.jpg) repeat 0 0;
        background-size: cover;
    }
    
    .cont03_01{
        top:0;
        left:44px;
        width: auto;
    }
    
    .cont03_00{
        top:0;
        left:0;
        width: auto;
        padding-top: 0;
    }

    .cont03_02{
        top:0;
        left:-25px;
        width: auto;
    }

    .cont03_03{
        top:0;
        left:-140px;
        width: auto;
    }

    .cont04{
        padding: 90px 0 80px 0;
        background: url(../bg03.jpg) repeat 0 0
    }
    
    .cont05{
        padding: 60px 0 50px 0;
    }
    
    .c05_btn{
        top:-72px;
    }
    
    .cont04_02,.cont04_03,.cont04_04{
        padding-top: 30px;
    }

    .flex_pc_row{
        flex-direction: row;
        padding-top: 60px;
    }

}

/****youtube設定*********************************/

.youtubewrap {
    border-radius: 14px;
    width: 560px;
    height: 315px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

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

    .youtubewrap {
        width: 100%;
        height: 0;
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
        border-radius: 1.8vw;
    }

    .youtubewrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }

}

/****youtube設定*********************************/


.ecm-block .ecm-bootstrap figure,.ecm-main .ecm-bootstrap figure{margin:0}.hero-area{margin-bottom:10px;position:relative}.no-border{border:none !important}.vc100-cm-area{max-width:880px;margin:32px auto 30px}@media screen and (min-width: 961px){.vc100-cm-area{margin:40px auto}}.vc100-cm-area .movie-block{position:relative}.vc100-cm-text{font-size:5.3vw !important;font-weight:bold !important;line-height:1.25 !important;text-align:center}@media screen and (min-width: 961px){.vc100-cm-text{font-size:36px !important}}.vc100-cm__movie{position:absolute;width:100%;padding:0 0;top:0}@media screen and (min-width: 961px){.vc100-cm__movie{padding:0 160px}}.vc100-cm__movie div{position:relative;width:100%;padding-top:56.25%}.vc100-cm__movie div iframe{position:absolute;top:0;right:0;width:100%;height:100%}.lead-text{font-size:15px;line-height:1.8;width:100%;margin:18px auto !important}@media screen and (min-width: 961px){.lead-text{font-size:18px;width:600px;margin:34px auto !important}}.lead-text .bg-orange{background-color:#fec34d}@media screen and (min-width: 100px){.hoj-text-sm{font-size:11px;line-height:1.3}}@media screen and (min-width: 100px)and (max-width: 960px){.hoj-text-sm{font-size:10px;line-height:1.4}}.hoj-text-m{font-size:14px;line-height:1.57}@media screen and (min-width: 961px){.hoj-text-m{font-size:20px;line-height:1.5}}.hoj-text-18{font-size:12px;line-height:1.6}@media screen and (min-width: 961px){.hoj-text-18{font-size:18px}}.font-color-white{color:#fff}.section-area-vc100-inner{width:100%;background-color:#ecf2f6;padding:3.2vw 1.6vw}@media screen and (min-width: 961px){.section-area-vc100-inner{padding:40px 35px}}.ecm-lp-new-vc100-main__list{margin-top:3.2vw}@media screen and (min-width: 961px){.ecm-lp-new-vc100-main__list{margin-top:42px}}.ecm-lp-new-vc100-main__list .upgrade{margin-top:1.6vw;position:relative}@media screen and (min-width: 961px){.ecm-lp-new-vc100-main__list .upgrade{margin-top:18px}}.upgrade-1 .note{position:absolute;width:100%;text-align:center;bottom:0}.upgrade-2 .note{position:absolute;width:100%;text-align:left;bottom:0;padding:0 5.33333vw}@media screen and (min-width: 961px){.upgrade-2 .note{text-align:center;padding:0 20px}}.upgrade-3 .note{width:100%;text-align:left;padding:1.6vw 5.33333vw 0;margin-bottom:0 !important}@media screen and (min-width: 961px){.upgrade-3 .note{text-align:center;padding:8px 20px 0;margin-bottom:0 !important}}.hero-text-note{position:absolute;font-size:2.7vw !important;padding:0 4.8vw;bottom:0vw;line-height:1.3;margin-bottom:1.3vw !important}@media screen and (min-width: 961px){.hero-text-note{font-size:12px !important;line-height:2;bottom:10px;padding:0 55px}}.about-text-note-01{font-size:2.7vw !important;text-align:left;position:absolute;width:100%;text-align:left;top:41.3vw;padding:0 4.8vw;margin-bottom:10px !important}@media screen and (min-width: 961px){.about-text-note-01{text-align:right;top:130px;font-size:12px !important;padding:0 60px 0 0}}.about-text-note-02{font-size:2.7vw !important;text-align:left;position:absolute;bottom:0;padding:0 4.8vw}@media screen and (min-width: 961px){.about-text-note-02{font-size:12px !important;padding:0 0 0 52px}}.about-text-note-03{font-size:2.7vw !important;text-align:left;position:absolute;bottom:0;padding:0 4.8vw;line-height:1.5}@media screen and (min-width: 961px){.about-text-note-03{bottom:22px;font-size:12px !important;padding:0 0 0 52px}}.about-text-note-04{font-size:2.7vw !important;text-align:right;line-height:1.5}@media screen and (min-width: 961px){.about-text-note-04{font-size:12px !important}}.about-text-note-05{font-size:2.7vw !important;text-align:left;padding:0 4.8vw;line-height:1.5;position:absolute;bottom:0}@media screen and (min-width: 961px){.about-text-note-05{font-size:12px !important;padding:0 0 0 52px;bottom:0}}.about-text-note-06{font-size:2.7vw !important;text-align:left;padding:0 4.8vw;line-height:1.5;position:absolute;bottom:2.1vw;margin-bottom:0 !important}@media screen and (min-width: 961px){.about-text-note-06{bottom:26px;font-size:12px !important;padding:0 0 0 52px}}.about-text-note-07{font-size:2.7vw !important;text-align:left;padding:0 4.8vw;line-height:1.5;position:absolute;bottom:0;margin-bottom:0 !important}@media screen and (min-width: 961px){.about-text-note-07{bottom:35px;font-size:12px !important;padding:0 52px}}.about-text-note-08{font-size:2.7vw !important;text-align:left;padding:0 4.8vw;line-height:1.5;position:absolute;bottom:2.1vw;margin-bottom:0 !important}@media screen and (min-width: 961px){.about-text-note-08{bottom:46px;font-size:12px !important;padding:0 0 0 52px}}.movie-wrap{position:absolute;width:100%;padding-left:4.8vw;padding-right:4.8vw;top:34.1vw}@media screen and (min-width: 961px){.movie-wrap{width:506px;padding-left:0;padding-right:0;top:150px;left:50%;-webkit-transform:translateX(-253px);transform:translateX(-253px)}}.movie-wrap-inner{position:relative;padding-top:56.25%}.movie-wrap-block{position:absolute;top:0;left:0;width:100%;height:100%}.movie-wrap-block video{width:100%;height:100%}