@charset "UTF-8";



/*=============================================

 * <main>

 *=============================================*/

main {

    padding-top: 0;

}

header{

    position: static;

    padding-bottom: 20px;

}

/*=============================================

 * <header>

 *=============================================*/

header .nav-bottom{

    margin-bottom: 20px;

}



#keyTop {

    margin-top: 30px;

}

#sec1 {

    background: #fcaa54;

    color: #fff;

    position: relative;

}

#sec1:before {

    content: '';

    position: absolute;

    background: url("../img/history/s1_deco.png");

    background-size: cover;

    width: 353px;

    height: 371px;

    top: 592px;

    left: calc(50% - 692px);

}

#sec1:after {

    content: '';

    position: absolute;

    background: url("../img/history/s1_deco_2.png");

    background-size: cover;

    width: 353px;

    height: 371px;

    top: 400px;

    left: calc(50% + 342px);

}

#sec1 .gr_btn {

    display: flex;

    justify-content: space-between;

    /*padding-top: 100px;*/

    margin-left: -60px;

    margin-right: -60px;

	padding-bottom:96px;

}

#sec1 .gr_btn img {

    box-shadow: 13px 16px 40px 0px rgba(75, 63, 63, 0.15);

}

#sec1 h2 {

    text-align: center;

    font-size: 35px;

    font-weight: 500;

    line-height: 55px;

    letter-spacing: 0.4em;

    padding: 100px 0 26px;

}

#sec1 h2 small {

    font-size: 25px;

}

#sec1 .txt {

    text-align: center;

    padding-bottom: 100px;

}

#sec2 {

    position: relative;

}

#sec2 h2 {

    position: absolute;

    z-index: 2;

    top: -272px;

    left: 50%;

    transform: translateX(-50%);

}

#sec2 .bg_prallax {

    position: relative;

    height: 400px;

}

#sec2 .bg_prallax .img_parallax {

    clip: rect(0, auto, auto, 0);

    margin-bottom: 0;

    bottom: 0;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    min-height: inherit;

    z-index: -1;

}

#sec2 .bg_prallax .img_parallax img {

    width: 100%;

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    padding: 0;

    margin: 0;

    object-fit: cover;

    transform: translateZ(0);

    z-index: -2;

}

#sec2 .set2 {

    padding-bottom: 120px;

    background-color: #fff;

    position: relative;

}

#sec2 .txt {

    text-align: center;

    padding: 191px 0 51px;

}

#sec2 .txt p + p  {

    margin-top: 10px;

}

#sec2 .btn__ {

    text-align: center;

}

#sec3 {

    background-color: #fff;

}

header, footer {

    background-color: #fff;

}



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

    header h1 {

        margin: 29px 0 0;

    }

    #keyTop {

        margin-left: -100px;

        margin-right: -100px;

    }

    #sec1{

        margin-bottom: 120px;

    }

    #sec2 .txt p span{

        display: block;

        padding-top: 10px;

    }

    #sec2 .bg_prallax .img_parallax{

        background-image: url("../img/history/s2_parallax.jpg");

        min-height: 400px;

    }

    #sec2 .bg_prallax .img_parallax img{

        opacity: 0;

    }

    #sec3 h2{

        margin-bottom: 79px;

    }

    #sec3 .btn__ {

        margin-left: -60px;

        margin-right: -60px;

        padding: 90px 0 40px;

    }

}



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

    header h1 {

        margin-top: 20px;

        display: block;

    }

    #sec1 {

        margin: 0 0 50px;

    }

    #sec1:before {

        width: 50vw;

        height: 50vw;

        top: 75vw;

        left: -10%;

    }

    #sec1:after {

        width: 50vw;

        height: 52vw;

        top: 65vw;

        right: -10%;

        left: auto;

    }

    #sec1 .gr_btn {

        display: block;

        padding-top: 10%;

        margin-left: 10%;

        margin-right: 10%;

    }

    #sec1 .gr_btn > p:nth-child(1) {

        margin-bottom: 5%;

    }

    #sec1 h2 {

        font-size: 4.5vw;

        line-height: 1.75;

        padding: 10% 0 5%;

        letter-spacing: 0.25em;

        margin-left: -5%;

        margin-right: -5%;

    }

    #sec1 h2 small {

        font-size: 4vw;

    }

    #sec1 .txt {

        text-align: justify;

        padding-bottom: 50px;

    }

    #sec2 .set2 {

        padding-bottom: 50px;

    }

    #sec2 h2 {

        line-height: 1;

        top: -48vw;

        text-align: center;

        width: 21%;

    }

    #sec2 .bg_prallax {

        z-index: -1;

        height: 70vw;

    }

    #sec2 .txt {

        text-align: justify;

        padding: 38vw 0 35px;

    }

    #sec2 .btn__ {

        margin: 0 10%;

    }

    #sec2 .btn__ img {

        box-shadow: 3px 21px 40px 4px rgb(75 63 63 / 22%);

    }

    #sec3 h2 {

        margin-bottom: 30px;

    }

    #sec3 .btn__ {

        margin: 0;

        padding: 30px 0 50px;

    }

}