#sec1 {
    background: url("../img/history/sec1_deco1.png") no-repeat right top/80%, url("../img/history/sec1_deco3.png") no-repeat left bottom 10vw/50%, url("../img/history/sec1_bg_img.png") no-repeat left bottom/100%;
    padding: 40vw 0
}

#sec1 .box-img {
    margin-top: 10vw
}

#sec1 .box-img dd {
    margin-top: 5px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 200;
    opacity: .8;
}

#sec1 .set1 {
    position: relative
}

#sec1 .set1::before {
    content: "";
    position: absolute;
    background: url("../img/history/sec1_deco2.png") no-repeat;
    background-size: 100%;
    width: 50vw;
    height: 50vw;
    bottom: -45vw;
    right: 0;
    z-index: 1
}

#sec1 .set1 h2 {
    margin: 0 auto;
    font-size: 6.13vw;
    font-weight: 500;
    line-height: 2.1666666667;
    letter-spacing: .2em
}

#sec1 .set1 h2 span {
    position: relative;
    display: block;
    height: -moz-fit-content;
    height: fit-content;
    margin-top: 28vw;
    letter-spacing: .2em
}

#sec1 .set1 h2 span::before {
    content: "";
    position: absolute;
    background: linear-gradient(177deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.2) 80%);
    width: 1px;
    height: 12vw;
    bottom: -13vw;
    left: 50%;
    transform: translateX(-50%)
}

#sec1 .set1 .txt {
    margin-top: 20vw
}

#sec1 .set2 {
    margin-top: 10vw
}

#sec1 .set2 .txt li+li {
    margin-top: 7vw
}

#sec1 .set3 {
    margin-top: 10vw
}

#sec1 .set3 .photo {
    margin-top: 10vw
}

@media screen and (min-width: 768px) {
    #sec1 {
        background: url("../img/history/sec1_deco1.png") no-repeat right top/auto, url("../img/history/sec1_deco2.png") no-repeat right top 974px/auto, url("../img/history/sec1_deco3.png") no-repeat left bottom 288px/auto, url("../img/history/sec1_bg_img.png") no-repeat left bottom/auto;
        padding: 238px 0 219px
    }

    #sec1 .box-img {
        margin-top: 0
    }

    #sec1 .box-img dd {
        margin-top: 6px;
        font-size: 15px;
        line-height: 28px
    }

    #sec1 .wrap {
        max-width: 1200px
    }

    #sec1 .set1 {
        position: relative
    }

    #sec1 .set1::before {
        display: none
    }

    #sec1 .set1 h2 {
        margin: 0 217px 0 auto;
        font-size: 30px
    }

    #sec1 .set1 h2 span {
        margin-top: 137px
    }

    #sec1 .set1 h2 span::before {
        height: 75px;
        bottom: -78px
    }

    #sec1 .set1 .txt {
        margin: 178px 57px 0 auto;
        height: 480px;
        line-height: 46px
    }

    #sec1 .set1 .box-img {
        position: absolute;
        top: -21px;
        left: -75px;
        right: 595px
    }

    #sec1 .set1 .box-img dt {
        height: 490px
    }

    #sec1 .set2 {
        position: relative;
        z-index: 1;
        margin-top: 0
    }

    #sec1 .set2 .box-img {
        position: absolute;
        top: -297px;
        right: calc(50% + 15px)
    }

    #sec1 .set2 .txt {
        box-sizing: content-box;
        height: 558px;
        padding: 138px 0 0 21px;
        line-height: 46px
    }

    #sec1 .set2 .txt li+li {
        margin: 0 39px 0 0
    }

    #sec1 .set3 {
        display: flex;
        justify-content: flex-end;
        max-width: 971px;
        margin: 0 auto
    }

    #sec1 .set3 .photo {
        margin-top: -103px
    }

    #sec1 .set3 .txt {
        margin: 98px 115px 0 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1400px) {
    #sec1 .set1 .box-img {
        left: calc(-50vw + 50% + 20px)
    }
}

#sec2 {
    position: relative;
    z-index: 1;
    background: url("../img/history/sec2_deco_line.png") no-repeat left bottom 80%, url("../img/shared/bg1.png") repeat center top, url("../img/history/sec2_bg_deco1.png") no-repeat right top/100%;
    padding: 20vw 0;
}

#sec2::before {
    content: "";
    position: absolute;
    background: url("../img/history/sec2_bg_deco2.png") no-repeat left bottom/100%;
    top: 0;
    bottom: 78vw;
    left: 0;
    right: 0;
    z-index: -1
}

#sec2 h2 {
    font-size: 6.13vw;
    font-weight: 500;
    letter-spacing: .15em
}

#sec2 .set1 h2 {
    text-align: center;
    line-height: 2
}

#sec2 .set1 .row .txt {
    margin-top: 8vw
}

#sec2 .set1 .row .photo {
    margin-top: 10vw
}

#sec2 .set2 {
    margin-top: 15vw
}

#sec2 .set2 .group-txt h2 {
    margin: 0 auto;
    line-height: 2.1666666667
}

#sec2 .set2 .group-txt .txt {
    margin-top: 8vw
}

#sec2 .set2 .group-photo li:nth-child(1) {
    margin: 10vw 15% 0 0
}

#sec2 .set2 .group-photo li:nth-child(2) {
    margin: 5vw 0 0 35%
}

@media screen and (min-width: 768px) {
    #sec2 {
        background-size: auto;
        padding-top: 163px;
        padding-bottom: 0;
    }

    #sec2::before {
        background-size: auto;
        bottom: -298px
    }

    #sec2 h2 {
        font-size: 30px
    }

    #sec2 .set1 .row {
        /* display: flex;
        justify-content: space-between;
        max-width: 937px; */
        margin: 80px auto 0
    }

    #sec2 .set1 .row .txt {
        /* order: 2; */
        text-align: center;
        width: 800px;
        margin: auto;
        padding-bottom: 100px;
    }

    #sec2 .set1 .row .photo {
        order: 1;
        margin-top: 0
    }

    #sec2 .set2 {
        display: flex;
        justify-content: space-between;
        margin-top: 0
    }

    #sec2 .set2 .group-txt {
        margin: 157px 0 0 49px
    }

    #sec2 .set2 .group-txt .txt {
        width: 460px;
        margin-top: 96px
    }

    #sec2 .set2 .group-photo {
        flex: 1
    }

    #sec2 .set2 .group-photo li:nth-child(1) {
        margin: -2px -132px 0 24px;
        height: 423px
    }

    #sec2 .set2 .group-photo li:nth-child(2) {
        margin: 119px 0 0 76px
    }
}

@media screen and (min-width: 768px)and (max-width: 1400px) {
    #sec2 {
        position: relative;
        z-index: 1;
        background: url("../img/history/sec2_deco_line.png") no-repeat left -40% top -10%, url("../img/shared/bg1.png") repeat center top, url("../img/history/sec2_bg_deco1.png") no-repeat right top/100%;
        padding-top: 20vw;
        padding-bottom: 0;
    }
}

#sec3 {
    background: url("../img/history/sec3_deco_line.png") no-repeat right top/90%, url("../img/shared/bg1.png") repeat center top, url("../img/history/sec3_bg_deco.png") no-repeat left bottom/100%;
    padding: 20vw 0
}

#sec3 .row1 h2 {
    text-align: center;
    font-size: 6.33vw;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .15em
}

#sec3 .row2 {
    margin-top: 8vw
}

#sec3 .row2 .photo {
    margin: 10vw 10vw 0
}

@media screen and (min-width: 768px) {
    #sec3 {
        background-size: auto;
        padding: 107px 0 136px
    }

    #sec3 .row1 {
        display: flex
    }

    #sec3 .row1 .photo {
        flex: 1;
        max-width: 430px;
        margin: 0 0 0 -93px;
        height: 400px
    }

    #sec3 .row1 h2 {
        text-align: left;
        margin: 81px 175px 0;
        font-size: 30px
    }

    #sec3 .row2 {
        display: flex;
        justify-content: space-between;
        margin-top: 0
    }

    #sec3 .row2 .txt {
        margin: 159px 108px 0 128px;
        height: 450px;
        line-height: 46px
    }

    #sec3 .row2 .photo {
        flex: 1;
        max-width: 530px;
        height: 720px;
        margin: -34px -42px 0 0
    }
}

#sec4 {
    position: relative;
    padding-bottom: 20vw
}

#sec4::before {
    content: "";
    position: absolute;
    background: url("../img/history/sec4_deco2.png") no-repeat;
    bottom: -25vw;
    left: 0;
    width: 68vw;
    height: 50vw;
    z-index: -1
}

#sec4 .wrap {
    background: url("../img/history/sec4_deco.png") no-repeat left top/80%;
    padding-top: 20vw
}

#sec4 h2 {
    position: relative;
    margin: 0 auto
}

#sec4 h2::before,
#sec4 h2:after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, .5);
    width: 1px
}

#sec4 h2::before {
    top: 13vw;
    bottom: 0;
    left: calc(50% - 1.5px)
}

#sec4 h2::after {
    top: 0;
    bottom: 8vw;
    left: calc(50% + 1.5px)
}

#sec4 h2 span {
    display: block;
    font-weight: 500;
    line-height: 2.5;
    letter-spacing: .15em
}

#sec4 h2 span:nth-child(1) {
    font-size: 4.8vw
}

#sec4 h2 span:nth-child(2) {
    margin-top: 14vw;
    font-size: 6.13vw
}

#sec4 .photo {
    position: relative;
    margin-top: 10vw
}

#sec4 .photo::before {
    content: "";
    position: absolute;
    background: url("../img/history/sec4_deco3.png") no-repeat;
    width: 50vw;
    height: 40vw;
    z-index: -1;
    bottom: -30vw;
    right: -25vw;
    background-size: 100%
}

#sec4 .txt {
    margin-top: 10vw
}

#sec4 .btn-shared {
    margin: 10vw 5.5% 0
}

@media screen and (min-width: 768px) {
    #sec4 {
        padding: 0 20px 0
    }

    #sec4::before {
        bottom: -89px;
        width: 495px;
        height: 353px
    }

    #sec4 .wrap {
        max-width: 1246px;
        background-size: auto;
        padding-top: 174px
    }

    #sec4 h2::before {
        top: 47px;
        bottom: 7px;
        left: calc(50% - 2px)
    }

    #sec4 h2::after {
        top: 2px;
        bottom: 52px;
        left: calc(50% + 2px)
    }

    #sec4 h2 span {
        line-height: 50px
    }

    #sec4 h2 span:nth-child(1) {
        font-size: 20px
    }

    #sec4 h2 span:nth-child(2) {
        margin-top: 49px;
        font-size: 30px
    }

    #sec4 .photo {
        max-width: 1060px;
        margin: 55px auto 0
    }

    #sec4 .photo::before {
        width: 389px;
        height: 459px;
        bottom: -280px;
        right: -170px
    }

    #sec4 .txt {
        text-align: center;
        margin-top: 62px
    }

    #sec4 .btn-shared {
        width: 400px;
        margin: 77px auto 0
    }

    #sec4 .btn-shared a span:after {
        right: -46px
    }
}

#sec5 {
    background: url("../img/history/sec5_deco.png") no-repeat right bottom 10vw/70%
}

#sec5 h2 {
    text-align: center;
    padding: 10vw 0 40vw;
    line-height: 2;
    font-size: 6.13vw;
    letter-spacing: .15em
}

@media screen and (min-width: 768px) {
    #sec5 {
        background-position: right bottom 168px;
        background-size: auto;
        display: flex;
        padding-top: 11px
    }

    #sec5 .photo {
        order: 1;
        height: 929px;
        flex: 1;
        max-width: calc(50% - 53px)
    }

    #sec5 .photo img {
        -o-object-position: left top;
        object-position: left top
    }

    #sec5 h2 {
        order: 2;
        text-align: left;
        padding: 334px 0 0 32px;
        font-size: 30px
    }
}

.remodal {
    background: url("../img/history/popup_deco.png") no-repeat left bottom/50%, url("../img/history/popup_bg_deco.png") no-repeat right bottom/100%, url("../img/shared/bg6.png") repeat center #000;
    padding-bottom: 20vw
}

.remodal .remodal-close {
    margin-right: 15px
}

.remodal .box-img {
    position: relative
}

.remodal .box-img dt {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: url("../img/shared/bg2.jpg") repeat center;
    z-index: 1;
    padding: 6vw 2vw 0
}

.remodal .box-img dt p {
    font-weight: 500
}

.remodal .box-img dt p:nth-child(1) {
    background: url("../img/shared/deco_ttl.png") no-repeat center top/10vw auto;
    padding: 1vw 0 2vw 1vw;
    margin-bottom: 3vw;
    text-align: center;
    font-size: 5.63vw;
    line-height: 1;
    letter-spacing: .15em
}

.remodal .box-img dt p:nth-child(2) {
    margin: 0 auto;
    text-align: left;
    font-size: 4.03vw;
    line-height: 1.2;
    letter-spacing: .15em
}

.remodal .col-r h2 {
    margin: 0 auto;
    text-align: left;
    font-size: 6.13vw;
    font-weight: 500;
    line-height: 2.1666666667;
    letter-spacing: .15em
}

.remodal .col-m {
    margin-top: 10vw
}

.remodal .col-m .box-img+.box-img {
    margin-top: 10vw
}

.remodal .col-l {
    margin-top: 10vw
}

.remodal .col-l h3 {
    text-align: center;
    margin-top: 10vw;
    font-size: 5.06vw;
    font-weight: 500;
    line-height: 1.9090909091;
    letter-spacing: .15em
}

@media screen and (min-width: 768px) {
    .remodal {
        background-size: auto;
        padding: 65px 0 86px
    }

    .remodal .wrap {
        display: flex;
        justify-content: space-between;
        max-width: 1120px
    }

    .remodal .remodal-close {
        margin-right: 91px;
        margin-bottom: 0
    }

    .remodal .box-img dt {
        padding: 25px 0 0 6px
    }

    .remodal .box-img dt p:nth-child(1) {
        background-size: 52px auto;
        min-height: 39px;
        padding: 2px 0 0;
        margin-bottom: 15px;
        font-size: 30px
    }

    .remodal .box-img dt p:nth-child(2) {
        font-size: 18px
    }

    .remodal .box-img dd {
        height: 270px
    }

    .remodal .col-r {
        order: 3;
        margin: 37px 25px 0 0
    }

    .remodal .col-r h2 {
        margin: 0;
        font-size: 30px
    }

    .remodal .col-m {
        order: 2;
        margin: 46px -18px 0 0
    }

    .remodal .col-m .box-img+.box-img {
        margin-top: 111px
    }

    .remodal .col-l {
        order: 1;
        margin-top: 155px
    }

    .remodal .col-l h3 {
        margin-top: 109px;
        font-size: 22px
    }
}