#sec1 {
    position: relative;
    z-index: 2;
    padding-bottom: 20vw
}

#sec1::before {
    content: "";
    position: absolute;
    background: url("../img/about/sec1_bg.jpg") no-repeat center/cover;
    top: 0;
    bottom: -5vw;
    left: 0;
    right: 0;
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0% 100%)
}

#sec1:after {
    content: "";
    position: absolute;
    background: url("../img/shared/bg3.jpg") repeat center;
    top: 0;
    bottom: -8vw;
    left: 0;
    right: 0;
    z-index: -2;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0% 100%)
}

#sec1 h2 {
    padding: 13vw 11%
}

#sec1 .txt {
    background: url("../img/about/sec1_deco_line_x.png") repeat-y left top/auto 40px, url("../img/about/sec1_deco_line_x2.png") repeat-x left bottom/auto 40px;
    color: #fff;
    line-height: 40px;
    letter-spacing: 0
}

#sec1 .txt span {
    background: #000;
    color: #a1573c;
    padding: 0 5px;
    letter-spacing: 0
}

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

    #sec1::before {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 200px), 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 200px), 0% 100%);
        bottom: -200px
    }

    #sec1:after {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 200px), 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 200px), 0% 100%);
        bottom: -240px
    }

    #sec1 h2 {
        text-align: center;
        padding: 120px 0 0
    }

    #sec1 .txt {
        background: url("../img/about/sec1_deco_line_y.png") repeat-x right top/55px auto, url("../img/about/sec1_deco_line_y2.png") no-repeat left top/55px auto;
        height: 405px;
        margin: 51px auto 0;
        padding-top: 11px;
        line-height: 55px
    }

    #sec1 .txt span {
        margin-top: -11px;
        padding: 11px 0 0
    }
}

#sec2 {
    position: relative;
    z-index: 1;
    padding-bottom: 15vw
}

#sec2::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg6.jpg") repeat center;
    opacity: .6;
    top: -20vw;
    left: 0;
    right: 0;
    z-index: -2;
    height: 100vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px))
}

#sec2:after {
    content: "";
    position: absolute;
    background: url("../img/about/sec2_deco1.png") no-repeat right top/180%;
    top: -20vw;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#sec2 h2 {
    padding: 22vw 15% 0
}

#sec2 h3 {
    position: relative;
    z-index: 3;
    margin: 10vw 15% 0 0;
    padding: 0 7% 8vw 0
}

#sec2 h3::before,
#sec2 h3:after {
    content: "";
    position: absolute;
    left: calc(-50vw + 50%);
    right: 0
}

#sec2 h3::before {
    background: rgba(0, 0, 0, .5);
    height: 1px;
    bottom: 3vw
}

#sec2 h3:after {
    background: #000;
    height: 3px;
    bottom: 0
}

#sec2 .photo {
    position: relative;
    z-index: 2;
    margin: -10vw -10% 0 10%
}

#sec2 .txt {
    margin: 5vw 7% 0
}

#sec2 .box-img {
    position: relative;
    z-index: 2;
    margin-top: 5vw
}

#sec2 .box-img dt {
    position: absolute;
    top: 0vw;
    right: 8%;
    width: 15%;
    z-index: 1
}

#sec2 .txt2 {
    position: relative;
    margin-top: 5vw;
    padding: 0 7% 0
}

#sec2 .txt2::before {
    content: "";
    position: absolute;
    background: url("../img/about/sec2_deco2.png") no-repeat;
    background-size: 100%;
    top: -13vw;
    left: -12vw;
    width: 135vw;
    height: 79vw;
    z-index: -1
}

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

    #sec2::before {
        top: 0;
        height: 602px;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 200px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 200px))
    }

    #sec2:after {
        background-size: auto;
        top: 0
    }

    #sec2 h2 {
        text-align: center;
        padding: 164px 0 0
    }

    #sec2 h3 {
        width: -moz-fit-content;
        width: fit-content;
        margin: -232px 0 0 30px;
        padding: 0 65px 49px 0
    }

    #sec2 h3::before,
    #sec2 h3:after {
        right: 0
    }

    #sec2 h3::before {
        height: 2px;
        bottom: 16px
    }

    #sec2 h3:after {
        height: 5px;
        bottom: 0
    }

    #sec2 .photo {
        position: absolute;
        top: 500px;
        left: 449px;
        margin: 0
    }

    #sec2 .txt {
        width: 362px;
        margin: 28px 0 0 60px
    }

    #sec2 .group {
        display: flex
    }

    #sec2 .box-img {
        max-width: 697px;
        flex: 1;
        margin: 56px 0 0 -198px
    }

    #sec2 .box-img dt {
        top: 6px;
        right: 49px;
        width: auto
    }

    #sec2 .txt2 {
        width: 394px;
        margin: 362px 20px 0 51px;
        padding: 0
    }

    #sec2 .txt2::before {
        top: -173px;
        left: -143px;
        width: 847px;
        height: 477px
    }
}

#sec3 {
    position: relative;
    z-index: 3;
    color: #fff
}

#sec3::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg3.jpg") repeat center;
    top: 10vw;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%)
}

#sec3 .slider {
    background: url("../img/shared/bg3.jpg") repeat center;
    align-items: flex-start !important;
    transform: rotate(12.5deg);
    padding-top: 6vw;
    margin: 0 -10vw
}

#sec3 .slider .item {
    width: 60vw;
    margin: 0 -0.5px;
}

#sec3 .lead .group h3 {
    position: relative;
    z-index: 1;
    padding: 10vw 10%
}

#sec3 .lead .group h3::before,
#sec3 .lead .group h3:after {
    content: "";
    position: absolute;
    left: 0;
    right: calc(-50vw + 50%)
}

#sec3 .lead .group h3::before {
    background: rgba(255, 255, 255, .5);
    height: 1px;
    bottom: 3vw
}

#sec3 .lead .group h3:after {
    background: #fff;
    height: 3px;
    bottom: 0
}

#sec3 .lead .group .txt {
    margin: 5vw 4% 0
}

#sec3 .lead .photo {
    position: relative;
    z-index: 2;
    margin: 10% 20% 0 0
}

#sec3 .photo2 {
    margin: -15vw 0 0 5%
}

@media screen and (min-width: 768px) {
    #sec3 {
        margin-top: -15px
    }

    #sec3::before {
        top: 160px;
        bottom: 86px;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 254px), 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 254px), 0 100%)
    }

    #sec3 .slider {
        transform: rotate(9.5deg);
        padding-top: 30px
    }

    #sec3 .slider .item {
        width: auto
    }

    #sec3 .wrap {
        max-width: 1340px;
        padding: 0 20px
    }

    #sec3 .lead {
        display: flex;
        min-height: 828px
    }

    #sec3 .lead .group {
        order: 2
    }

    #sec3 .lead .group h3 {
        padding: 137px 0 48px 29px
    }

    #sec3 .lead .group h3::before,
    #sec3 .lead .group h3:after {
        left: -20px
    }

    #sec3 .lead .group h3::before {
        height: 2px;
        bottom: 16px
    }

    #sec3 .lead .group h3:after {
        height: 5px;
        bottom: 0
    }

    #sec3 .lead .group .txt {
        width: 371px;
        margin: 28px auto 0
    }

    #sec3 .lead .photo {
        max-width: 637px;
        flex: 1;
        order: 1;
        margin: 33px 0 0 24px
    }

    #sec3 .photo2 {
        text-align: right;
        margin: -158px 99px 0 0
    }
}

#sec4 {
    position: relative;
    z-index: 1
}

#sec4::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg6.jpg") repeat center;
    opacity: .6;
    top: -23vw;
    left: 0;
    right: 0;
    height: 30vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
    z-index: -1
}

#sec4:after {
    content: "";
    position: absolute;
    background: url("../img/about/sec4_bg.png") no-repeat center top/120%;
    top: -23vw;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2
}

#sec4 .lead h3 {
    position: relative;
    z-index: 1;
    padding: 10vw 8.5% 7.5vw 4%
}

#sec4 .lead h3::before,
#sec4 .lead h3:after {
    content: "";
    position: absolute;
    left: calc(-50vw + 50%);
    right: 0
}

#sec4 .lead h3::before {
    background: rgba(0, 0, 0, .5);
    height: 1px;
    bottom: 3vw
}

#sec4 .lead h3:after {
    background: #000;
    height: 3px;
    bottom: 0
}

#sec4 .lead .txt {
    margin-top: 5.5vw;
}

#sec4 .catch {
    position: relative;
    z-index: 1;
    margin: 9vw -2.5% 0 33%
}

#sec4 .box {
    background: url("../img/shared/bg7.jpg") repeat center;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .11);
    border-left: 4vw solid #8f330f;
    padding: 17vw 0 24.5vw;
    margin-top: -8.5vw
}

#sec4 .box h4 {
    position: relative
}

#sec4 .box h4 span {
    text-align: center;
    display: block;
    line-height: 1
}

#sec4 .box h4 span.jp {
    font-size: 6vw;
    font-weight: bold;
    letter-spacing: 0
}

#sec4 .box h4 span.en {
    position: absolute;
    top: -5vw;
    left: 0;
    right: 0;
    opacity: .09;
    font-size: 12.5vw;
    font-weight: 800;
    letter-spacing: -0.075em
}

#sec4 .box .inner {
    margin-top: 25vw
}

#sec4 .box .inner .col-main {
    position: relative
}

#sec4 .box .inner .col-main .group {
    margin-left: 35.5%
}

#sec4 .box .inner .col-main .group .txt {
    position: relative;
    padding: 2.5vw 0 0 9.5%;
    margin: 0vw 10% 0;
    font-size: 13px;
    line-height: 23px
}

#sec4 .box .inner .col-main .group .txt::before,
#sec4 .box .inner .col-main .group .txt:after {
    content: "";
    position: absolute;
    background: #8f330f;
    width: 1px;
    top: 10px;
    left: 0;
    bottom: 0
}

#sec4 .box .inner .col-main .group .txt:after {
    left: 3px
}

#sec4 .box .inner .col-icon1 {
    margin: 11vw 43.5% 0
}

#sec4 .box .inner .col-icon2 {
    margin: 11vw 47% 0
}

#sec4 .box .inner .col-main1 .photo {
    position: absolute;
    top: -18vw;
    left: 9%;
    right: 63%
}

#sec4 .box .inner .col-main1 .group .sub-ttl {
    margin: 0 23% 0 17%
}

#sec4 .box .inner .col-main2 .photo {
    position: absolute;
    top: .5vw;
    left: 10%;
    right: 65%
}

#sec4 .box .inner .col-main2 .group .sub-ttl {
    padding: 5.5vw 25% 2.5vw 15.5%
}

#sec4 .box .inner .col-main3 .photo {
    position: absolute;
    top: 13.5vw;
    left: 9%;
    right: 63%
}

#sec4 .box .inner .col-main3 .group .sub-ttl {
    padding: 5vw 39.5% 1.5vw 33%
}

@media screen and (min-width: 768px) {
    #sec4 {
        margin-top: -57px
    }

    #sec4::before {
        top: -283px;
        height: 315px;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 315px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 315px))
    }

    #sec4:after {
        background-size: 100%;
        top: -283px
    }

    #sec4 .wrap {
        max-width: 1140px;
        padding: 0 20px
    }

    #sec4 .lead {
        display: flex;
        align-items: flex-end;
        max-width: 1000px;
        margin: 0 auto
    }

    #sec4 .lead h3 {
        padding: 0 0 48px
    }

    #sec4 .lead h3::before {
        height: 2px;
        bottom: 16px
    }

    #sec4 .lead h3:after {
        height: 5px
    }

    #sec4 .lead .txt {
        width: 371px;
        margin: 0 0 41px 72px
    }

    #sec4 .catch {
        text-align: right;
        margin: 20px 76px 0 0
    }

    #sec4 .box {
        border-width: 50px;
        padding: 60px 0 56px;
        margin-top: -44px
    }

    #sec4 .box h4 span.jp {
        font-size: 30px
    }

    #sec4 .box h4 span.en {
        top: -12px;
        font-size: 120px
    }

    #sec4 .box .inner {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: -37px 0 0
    }

    #sec4 .box .inner .col-main {
        z-index: 1
    }

    #sec4 .box .inner .col-main .photo {
        position: unset !important
    }

    #sec4 .box .inner .col-main .group {
        margin-left: 0
    }

    #sec4 .box .inner .col-main .group .txt {
        max-width: 265px;
        padding: 0 0 0 34px;
        margin: 0;
        font-size: 16px;
        line-height: 35px
    }

    #sec4 .box .inner .col-icon1 {
        margin: 0 10px 325px -19px
    }

    #sec4 .box .inner .col-icon2 {
        margin: 0 6px 350px -6px
    }

    #sec4 .box .inner .col-main1 .photo {
        margin-left: 57px
    }

    #sec4 .box .inner .col-main1 .group .sub-ttl {
        position: absolute;
        top: 122px;
        left: 4px;
        margin: 0;
        z-index: -1
    }

    #sec4 .box .inner .col-main2 .photo {
        text-align: right
    }

    #sec4 .box .inner .col-main2 .group .sub-ttl {
        position: absolute;
        top: -103px;
        left: 22px;
        padding: 0
    }

    #sec4 .box .inner .col-main3 {
        margin-left: 7px
    }

    #sec4 .box .inner .col-main3 .group .sub-ttl {
        position: absolute;
        top: -176px;
        left: 28px;
        padding: 0
    }
}

#sec5 {
    position: relative;
    background: url("../img/about/sec5_bg.jpg") no-repeat center top/100%, url("../img/about/sec5_deco.png") no-repeat right bottom/120%;
    padding-top: 22vw
}

#sec5::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg6.jpg") repeat center;
    opacity: .6;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -3
}

#sec5 .lead {
    position: relative;
    z-index: 1;
    padding: 10vw 0
}

#sec5 .lead h3 {
    position: relative;
    padding: 0 10% 10vw 4%;
    margin-left: 15%
}

#sec5 .lead h3::before,
#sec5 .lead h3:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0
}

#sec5 .lead h3::before {
    background: rgba(255, 255, 255, .5);
    height: 1px;
    bottom: 3vw
}

#sec5 .lead h3:after {
    background: #fff;
    height: 3px;
    bottom: 0
}

#sec5 .lead .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#sec5 .lead .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec5 .box {
    position: relative;
    z-index: 1;
    padding: 20vw 0 20vw 10%
}

#sec5 .box::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5%;
    z-index: 1
}

#sec5 .box .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#sec5 .box .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec5 .box .group-txt h4 {
    color: #fff;
    margin: 0 0 -1vw 3vw;
    font-size: 9.33vw;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .06em
}

#sec5 .box .group-txt .sub-ttl {
    width: -moz-fit-content;
    width: fit-content;
    background: rgba(255, 255, 255, .9);
    padding: 3vw 5vw;
    font-size: 4vw;
    line-height: 1.5
}

#sec5 .box2::before {
    background-image: url("../img/shared/bg2.jpg")
}

#sec5 .group-link {
    padding: 15vw 11%
}

#sec5 .group-link li a {
    display: block;
    -webkit-clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 0)
}

#sec5 .group-link li a .txt {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3vw 5vw 4vw;
    min-height: 19vw;
    color: #fff;
    font-size: 4.8vw;
    line-height: 1.3461538462
}

#sec5 .group-link li a .txt .arrow {
    position: absolute;
    background: #fff;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 1;
    transition: 0.2s linear;
}

#sec5 .group-link li a .txt .arrow::before {
    content: "";
    position: absolute;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    width: 2vw;
    height: 3vw;
    top: 50%;
    left: calc(50% + 2px);
    transform: translate(-50%, -50%);
    z-index: 1
}

#sec5 .group-link li a:hover .txt .arrow {
    right: 3%;
}

#sec5 .group-link li a .txt.bg1 {
    background: url("../img/shared/bg1.jpg") repeat center
}

#sec5 .group-link li a .txt.bg1 .arrow::before {
    background: url("../img/shared/bg1.jpg") repeat center
}

#sec5 .group-link li a .txt.bg2 {
    background: url("../img/shared/bg2.jpg") repeat center
}

#sec5 .group-link li a .txt.bg2 .arrow::before {
    background: url("../img/shared/bg2.jpg") repeat center
}

#sec5 .group-link li+li {
    margin-top: 5vw
}

@media screen and (min-width: 768px) {
    #sec5 {
        background: url("../img/about/sec5_bg.jpg") no-repeat center top/100%, url("../img/about/sec5_deco.png") no-repeat right bottom/auto;
        padding-top: 329px
    }

    #sec5 .lead {
        position: unset;
        padding: 0
    }

    #sec5 .lead h3 {
        position: absolute;
        top: 277px;
        right: 0;
        padding: 0 66px 60px 39px;
        margin-left: 57px;
        z-index: 2
    }

    #sec5 .lead h3::before {
        height: 2px;
        bottom: 16px
    }

    #sec5 .lead h3:after {
        height: 5px
    }

    #sec5 .lead .bg {
        position: absolute;
        top: 196px;
        bottom: auto;
        left: auto;
        right: 0;
        width: 558px;
        height: 722px;
        z-index: 1
    }

    #sec5 .box {
        padding: 192px 0 100px 70px;
        margin-right: 400px;
        min-height: 450px
    }

    #sec5 .box::before {
        width: 20px
    }

    #sec5 .box .group-txt h4 {
        margin: 0 0 -3px 18px;
        font-size: 60px
    }

    #sec5 .box .group-txt .sub-ttl {
        padding: 9px 29px 10px 31px;
        font-size: 20px;
        line-height: 35px
    }

    #sec5 .group-link {
        display: flex;
        justify-content: space-between;
        -moz-column-gap: 20px;
        column-gap: 20px;
        max-width: 980px;
        margin: 60px auto 0;
        padding: 0 20px 100px
    }

    #sec5 .group-link li a {
        display: block;
        -webkit-clip-path: polygon(calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%, 0 0)
    }

    #sec5 .group-link li a .txt {
        padding: 0 0 5px 33px;
        min-height: 110px;
        font-size: 26px
    }

    #sec5 .group-link li a .txt .arrow {
        width: 60px;
        height: 60px;
        right: 30px
    }

    #sec5 .group-link li a .txt .arrow::before {
        width: 17px;
        height: 19px
    }

    #sec5 .group-link li a:hover .txt .arrow {
        right: 20px;
    }

    #sec5 .group-link li a:hover {
        opacity: .8
    }

    #sec5 .group-link li+li {
        margin-top: 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1500px) {
    #sec5 {
        background-size: auto
    }
}