/*=============================================
 * KV
 *=============================================*/
#key-box {
    background: url("../img/howto/key.jpg") no-repeat center;
    background-size: cover;
}
#sec1 {
    position: relative;
    padding: 20vw 0 15vw;
    background: url("../img/howto/sec1_bg.jpg") no-repeat left top;
    background-size: 150%;
}
#sec1 h2 {
    font-size: 5vw;
    margin-bottom: 6vw;
    letter-spacing: 0.2em;
}
#sec1 h2 .t1 {
    font-size: 6vw;
}
#sec1 h2 .t2 {
    font-size: 8vw;
}
#sec1 .txt {
    margin-bottom: 8vw;
}
#sec1 .photo {
    margin: 0 3% 5vw;
}
@media only screen and (min-width: 768px) {
    #sec1 {
        padding: 410px 0 170px;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    #sec1:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 500px;
        background: url("../img/menu/sec4_bg.png") repeat-x center bottom;
        bottom: 0;
    }
    #sec1 .wrap {
        width: 1200px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #sec1 h2 {
        font-size: 30px;
        margin-bottom: 80px;
        letter-spacing: 8px;
    }
    #sec1 h2 .t1 {
        font-size: 30px;
    }
    #sec1 h2 .t2 {
        font-size: 36px;
    }
    #sec1 .txt {
        margin-bottom: 48px;
        width: 530px;
    }
    #sec1 .photo {
        margin: 0;
        position: absolute;
        left: 600px;
        top: -228px;
        width: 590px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    #sec1 .photo {
        max-width: 44%;
    }
}


/*=============================================
 * SEC2
 *=============================================*/
#sec2 {
    position: relative;
    padding: 15vw 0 7vw;
}
#sec2 h2 {
    font-size: 6vw;
    width: 9%;
    height: 63vw;
    margin: 0 auto 5vw;
    letter-spacing: 0.1em;
}
#sec2 h2 span {
    font-size: 7vw;
}
#sec2 .row .photo {
    margin: 0 3% 6vw;
}
#sec2 .row .col h3 {
    margin-bottom: 5vw;
    font-size: 6vw;
    text-align: center;
    letter-spacing: 0.1em;
}
#sec2 .row .col h3 span {
    color: #ab774c;
}
#sec2 .row .col .txt {
    margin-bottom: 8vw;
}
@media only screen and (min-width: 768px) {
    #sec2 {
        padding: 30px 0 30px;
        background: rgba(4, 4, 4, 0.6);
    }
    #sec2 .wrap {
        width: 1200px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #sec2 h2 {
        font-size: 30px;
        width: 30px;
        height: 330px;
        margin: 0 auto;
        letter-spacing: 6px;
    }
    #sec2 h2 small {
        letter-spacing: -2px;
    }
    #sec2 h2 span {
        font-size: 36px;
    }
    #sec2 .row {
        display: flex;
        margin-bottom: 40px;
    }
    #sec2 .row .photo {
        margin: 0;
        margin-right: 80px;
        margin-left: 20px;
    }
    #sec2 .row .col {
        margin-top: 90px;
    }
    #sec2 .row .col h3 {
        margin-bottom: 53px;
        font-size: 30px;
        text-align: left;
        letter-spacing: 5px;
    }
    #sec2 .row .col h3 span {
        letter-spacing: 1px;
    }
    #sec2 .row .col .txt {
        margin-bottom: 54px;
    }
	
}


/*=============================================
 * SEC 3
 *=============================================*/
#sec3 {
    position: relative;
    padding: 15vw 0 7vw;
}
#sec3 h2 {
    font-size: 6vw;
    width: 9%;
    height: 63vw;
    margin: 0 auto 5vw;
    letter-spacing: 0.1em;
}
#sec3 .row .photo {
    margin: 0 3% 6vw;
}
#sec3 .row .col h3 {
    margin-bottom: 6vw;
    font-size: 6vw;
    text-align: center;
    letter-spacing: 0.1em;
}
#sec3 .row .col h3 span {
    color: #ab774c;
}
#sec3 .row .col .txt {
    margin-bottom: 5vw;
}
@media only screen and (min-width: 768px) {
    #sec3 {
        padding: 223px 0 174px;
        background: rgba(4, 4, 4, 0.6);
    }
    #sec3 .wrap {
        width: 1230px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #sec3 .row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    #sec3 .row .photo {
        margin: 0;
        margin-top: -130px;
        width: 670px;
    }
    #sec3 .row .col {
        margin-right: 120px;
        width: 490px;
    }
    #sec3 .row .col h3 {
        margin-bottom: 57px;
        font-size: 30px;
        text-align: left;
        letter-spacing: 5px;
    }
    #sec3 .row .col .txt {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    #sec3 .row .photo {
        max-width: 50%;
    }
    #sec3 .row .col {
        margin-right: 40px;
        width: 490px;
    }
}


/*=============================================
 * SEC 4
 *=============================================*/
#sec4 {
    position: relative;
    padding: 12vw 0 10vw;
}
#sec4 .row .photo {
    margin-bottom: 6vw;
}
#sec4 .row .col {
    margin-bottom: 22vw;
}
#sec4 .row .photo2 {
    margin: 0 3% 5vw;
}
#sec4 .row .col h3 {
    margin-bottom: 6vw;
    font-size: 6vw;
    text-align: center;
    letter-spacing: 0.1em;
}
#sec4 .row .col h3 span {
    color: #ab774c;
}
#sec4 .row .col .txt {
    margin-bottom: 8vw;
}
@media only screen and (min-width: 768px) {
    #sec4 {
        padding: 159px 0 30px;
        background: rgba(4, 4, 4, 0.6);
    }
    #sec4 .row .photo {
        margin-bottom: 30px;
        position: absolute;
        left: -252px;
        top: -127px;
    }
    #sec4 .row .col {
        margin-bottom: 30px;
        width: 420px;
        margin: 0 auto 30px 270px;
    }
    #sec4 .row .photo2 {
        margin: 0;
        position: absolute;
        left: 804px;
        top: 9px;
        width: 443px;
    }
    #sec4 .row .col h3 {
        margin-bottom: 53px;
        font-size: 30px;
        text-align: left;
        letter-spacing: 4px;
    }
    #sec4 .row .col .txt {
        margin-bottom: 56px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    #sec4 .row .photo {
        left: -20%;
    }
    #sec4 .row .photo2 {
        left: 74%;
    }
}


/*=============================================
 * SEC 5
 *=============================================*/
#sec5 {
    position: relative;
    background: url("../img/howto/sec5_bg.png") no-repeat bottom center;
    background-size: 150%;
    padding: 13vw 0 20vw;
}
#sec5 h2 {
    margin-bottom: 8vw;
    letter-spacing: 0.2em;
    line-height: 1.8;
    text-align: center;
    position: relative;
}
#sec5 h2:before {
    position: absolute;
    content: "";
    background: rgba(255, 255, 255, 0.4);
    height: 1px;
    left: -28%;
    top: 50%;
    width: 0%;
    transition: all 1s;
}
#sec5 h2 > span {
    font-size: 7vw;
    display: inline-block;
}
#sec5 h2.line-animation.animated:before {
    width: 48%;
    transition: all 1s;
}
#sec5 .txt {
    margin-bottom: 8vw;
}
#sec5 .col .photo2 {
    margin-bottom: 8vw;
    margin-left: 15%;
}
#sec5 .col .photo3 {
    width: 70%;
    margin: 0;
    margin-bottom: 6vw;
}
#sec5 .map {
    width: 80%;
    margin: 0 auto;
}
@media only screen and (min-width: 768px) {
    #sec5 {
        background-size: cover;
        padding: 151px 0 175px;
        background: url("../img/howto/sec4_shadow.png"), url(../img/howto/sec5_bg.png);
        background-position: center top, center bottom;
        background-size: auto, cover;
        background-repeat: repeat-x, no-repeat;
    }
    #sec5 h2 {
        margin-bottom: 167px;
        letter-spacing: 6px;
    }
    #sec5 h2:before {
        left: -1000px;
    }
    #sec5 h2 > span {
        font-size: 36px;
    }
    #sec5 h2.line-animation.animated:before {
        width: 1278px;
    }
    #sec5 .txt {
        margin-bottom: 71px;
        margin-left: auto;
        width: 496px;
        margin-right: 80px;
    }
    #sec5 .col .photo2 {
        margin-bottom: 80px;
        margin-left: auto;
        margin-right: -137px;
        width: 637px;
    }
    #sec5 .col .photo3 {
        width: 338px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: 330px;
    }
    #sec5 .map {
        width: 343px;
        position: absolute;
        left: 0;
        top: 167px;
    }
}