@media screen and (max-width: 768px) {
    .test {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        opacity: .7 !important
    }
}

.ttl-shared {
    background: url("../img/story/deco_ttl.png") no-repeat center top/5.8vw auto;
    padding-top: 12vw
}

.ttl-shared span {
    display: block;
    text-align: center;
    line-height: 1
}

.ttl-shared span.en {
    font-size: 3.2vw;
    letter-spacing: .1em
}

.ttl-shared span.jp {
    margin: 7vw 0 0 2vw;
    font-size: 6.33vw;
    letter-spacing: .28em
}

@media screen and (min-width: 768px) {
    .ttl-shared {
        background-size: auto;
        padding-top: 62px
    }

    .ttl-shared span.en {
        font-size: 14px
    }

    .ttl-shared span.jp {
        margin: 37px 0 0 10px;
        font-size: 30px
    }
}

#sec1 {
    background: url("../img/story/sec1_deco_sp.png") no-repeat right top 198vw/100%;
    padding: 47vw 0 20vw
}

#sec1 .wrap {
    padding: 0
}

#sec1 h2 {
    background: url("../img/story/sec1_ttl_deco1.png") no-repeat center left/11.2vw auto, url("../img/story/sec1_ttl_deco2.png") no-repeat center right/11.2vw auto;
    margin: 0 4.5%
}

#sec1 h2 span {
    display: block;
    text-align: center;
    line-height: 1
}

#sec1 h2 span:nth-child(1) {
    font-size: 5.83vw;
    letter-spacing: .28em
}

#sec1 h2 span:nth-child(2) {
    margin-top: 7vw;
    font-size: 4.2vw;
    letter-spacing: .15em
}

#sec1 .row .box-img {
    position: relative
}

#sec1 .row .box-img dt {
    position: absolute;
    z-index: 1;
    font-size: 5.2vw;
    line-height: 1;
    letter-spacing: .28em
}

#sec1 .row .box-img dt span {
    font-size: 8.67vw;
    letter-spacing: .15em
}

#sec1 .row .box-img:nth-child(1) {
    margin: 27.5vw 0 0 31%
}

#sec1 .row .box-img:nth-child(1) dt {
    position: absolute;
    top: -11vw;
    left: 3.5%;
    color: #000
}

#sec1 .row .box-img:nth-child(1) dt span {
    color: #fff;
    margin-bottom: 1vw
}

#sec1 .row .box-img:nth-child(2) {
    margin-top: 14.5vw
}

#sec1 .row .box-img:nth-child(2) dt {
    bottom: 5.5vw;
    right: 0;
    padding-right: 12vw;
    letter-spacing: .18em
}

#sec1 .row .box-img:nth-child(2) dt::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, .5);
    width: 11vw;
    height: 1px;
    top: 6vw;
    right: 0
}

#sec1 .row .box-img:nth-child(2) dd {
    padding-right: 30.5%
}

#sec1 .txt {
    margin: 14.5vw 5.3% 0
}

#sec1 .group-link {
    display: flex;
    justify-content: space-between;
    margin: 15vw 5.3% 0
}

#sec1 .group-link li {
    width: 23%;
    height: 86.4vw
}

#sec1 .group-link li a {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10vw 0 0;
    background: url("../img/story/sec1_bg_btn.png") no-repeat center bottom/cover
}

#sec1 .group-link li a::before {
    content: "";
    position: absolute;
    background: url("../img/story/sec1_icon_arrow.png") no-repeat;
    width: 7.73vw;
    height: 7.73vw;
    background-size: 100%;
    bottom: 20vw;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: exclusion
}

#sec1 .group-link li a span {
    display: block;
    margin: 0 auto
}

#sec1 .group-link li a span.jp {
    min-height: 28vw;
    font-size: 5.83vw;
    letter-spacing: .28em
}

#sec1 .group-link li a span.en {
    font-size: 3.27vw;
    letter-spacing: .1em
}

@media screen and (min-width: 768px) {
    #sec1 {
        background: url("../img/story/sec1_deco1.png") no-repeat left top/auto, url("../img/story/sec1_deco2.png") no-repeat right top/525px auto;
        padding: 185px 0 132px
    }

    #sec1 .wrap {
        padding: 0
    }

    #sec1 h2 {
        background-size: 48px auto;
        width: 398px;
        padding-bottom: 9px;
        margin: 0 auto
    }

    #sec1 h2 span:nth-child(1) {
        font-size: 25px
    }

    #sec1 h2 span:nth-child(2) {
        margin-top: 28px;
        font-size: 18px
    }

    #sec1 .row {
        display: flex;
        justify-content: space-between;
        margin: 200px 30px 0
    }

    #sec1 .row .box-img dt {
        font-size: 30px
    }

    #sec1 .row .box-img dt span {
        font-size: 50px
    }

    #sec1 .row .box-img:nth-child(1) {
        order: 2;
        margin: 0
    }

    #sec1 .row .box-img:nth-child(1) dt {
        top: -61px;
        left: 17px
    }

    #sec1 .row .box-img:nth-child(1) dt span {
        margin-bottom: 7px
    }

    #sec1 .row .box-img:nth-child(2) {
        order: 1;
        margin-top: 130px
    }

    #sec1 .row .box-img:nth-child(2) dt {
        bottom: 33px;
        right: -214px;
        padding-right: 107px;
        letter-spacing: .17em
    }

    #sec1 .row .box-img:nth-child(2) dt::before {
        width: 100px;
        top: 37px
    }

    #sec1 .row .box-img:nth-child(2) dt span {
        margin-right: 4px;
        font-size: 50px
    }

    #sec1 .row .box-img:nth-child(2) dd {
        padding-right: 0
    }

    #sec1 .txt {
        text-align: center;
        margin: 166px 0 0
    }

    #sec1 .group-link {
        max-width: 635px;
        margin: 148px auto 0
    }

    #sec1 .group-link li {
        width: 99px;
        height: 480px
    }

    #sec1 .group-link li a {
        cursor: pointer;
        padding-top: 52px
    }

    #sec1 .group-link li a::before {
        width: 33px;
        height: 33px;
        bottom: 159px
    }

    #sec1 .group-link li a span {
        cursor: pointer
    }

    #sec1 .group-link li a span.jp {
        min-height: 138px;
        font-size: 25px
    }

    #sec1 .group-link li a span.en {
        font-size: 14px
    }

    #sec1 .group-link li a:hover {
        opacity: .7
    }
}

#sec2 {
    background: url("../img/story/sec2_bg.png") no-repeat center top/100%;
    padding-top: 20vw
}

#sec2 .slider {
    position: relative;
    margin-top: 10vw
}

#sec2 .slider .slider-main .item .group-txt {
    margin-top: 30vw
}

#sec2 .slider .slider-main .item .group-txt h3 {
    text-align: center;
    font-size: 6.33vw;
    line-height: 1.5;
    letter-spacing: .28em
}

#sec2 .slider .slider-main .item .group-txt .txt {
    margin-top: 5vw
}

#sec2 .slider .slider-thumb {
    position: absolute;
    top: 70vw;
    left: 0;
    right: 0;
    z-index: 1
}

#sec2 .slider .slider-thumb .slick-list {
    overflow: visible
}

#sec2 .slider .slider-thumb .slick-track {
    display: flex;
    justify-content: center;
    width: 100% !important;
    transform: unset !important
}

#sec2 .slider .slider-thumb .slick-slide {
    color: #b49573;
    text-align: center;
    width: 15vw;
    margin: 0 2vw;
    font-size: 5.67vw;
    line-height: 1.5
}

#sec2 .slider .slider-thumb .slick-current {
    position: relative;
    color: #fff
}

#sec2 .slider .slider-thumb .slick-current::before {
    content: "";
    position: absolute;
    background: #fff;
    height: 18vw;
    width: 1px;
    bottom: 10vw;
    left: 47%;
    transform: translateX(-50%)
}

#sec2 .slider .slick-dots {
    display: none !important
}

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

#sec2 .group-photo::before {
    content: "";
    position: absolute;
    background: url("../img/story/sec2_deco.png") no-repeat;
    width: 75vw;
    height: 104vw;
    background-size: 100%;
    top: -16vw;
    left: -9%;
    z-index: -1
}

#sec2 .group-photo li:nth-child(1) {
    width: 44%
}

#sec2 .group-photo li:nth-child(2) {
    position: absolute;
    top: 13vw;
    right: 0;
    width: 49%
}

#sec2 .group-photo li:nth-child(3) {
    width: 35%;
    margin: 8vw 0 0 11.5%
}

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

    #sec2 .wrap {
        max-width: 100%
    }

    #sec2 .slider {
        max-width: 1260px;
        padding: 0 30px;
        margin: 0 auto
    }

    #sec2 .slider .slider-main {
        box-sizing: content-box;
        max-width: 920px;
        margin: 104px 0 0 auto;
        padding-right: 70px
    }

    #sec2 .slider .slider-main .item .group-txt {
        display: flex;
        align-items: center;
        -moz-column-gap: 83px;
        column-gap: 83px;
        margin: 60px 0 0 41px
    }

    #sec2 .slider .slider-main .item .group-txt h3 {
        text-align: left;
        font-size: 30px
    }

    #sec2 .slider .slider-main .item .group-txt .txt {
        margin-top: 0
    }

    #sec2 .slider .slider-thumb {
        top: 123px;
        left: 29px;
        right: auto;
        z-index: 1
    }

    #sec2 .slider .slider-thumb .slick-track {
        justify-content: flex-start;
        flex-direction: column
    }

    #sec2 .slider .slider-thumb .slick-slide {
        text-align: left;
        width: auto;
        cursor: pointer;
        margin: 0;
        font-size: 25px
    }

    #sec2 .slider .slider-thumb .slick-slide+.slick-slide {
        margin-top: 58px
    }

    #sec2 .slider .slider-thumb .slick-slide:hover {
        opacity: .7
    }

    #sec2 .slider .slider-thumb .slick-current::before {
        height: 1px;
        width: 170px;
        top: 50%;
        bottom: auto;
        left: 59px;
        transform: translateY(-50%)
    }

    #sec2 .slider .slick-dots {
        position: absolute;
        top: 431px;
        right: 0;
        display: block !important
    }

    #sec2 .slider .slick-dots li+li {
        margin-top: 30px
    }

    #sec2 .group-photo {
        max-width: 1360px;
        padding: 0 30px;
        margin: 168px auto 0
    }

    #sec2 .group-photo::before {
        background: url("../img/story/sec2_deco.png") no-repeat;
        width: 738px;
        height: 779px;
        top: -85px;
        left: calc(-50vw + 50%)
    }

    #sec2 .group-photo li:nth-child(1) {
        position: relative;
        z-index: 1;
        width: auto;
        margin-left: 15px
    }

    #sec2 .group-photo li:nth-child(2) {
        top: 191px;
        right: 29px;
        width: auto
    }

    #sec2 .group-photo li:nth-child(3) {
        width: auto;
        margin: 176px 0 0 234px
    }
}

#sec3 {
    padding-top: 20vw
}

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

#sec3 .row {
    margin-top: 10vw;
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    row-gap: 10vw
}

#sec3 .row .box {
    display: flex;
    -moz-column-gap: 4vw;
    column-gap: 3vw;
    width: 33%;
    margin-right: 3vw;
}

#sec3 .row .box dt {
    order: 2;
    margin-top: 4vw;
    font-size: 3.5vw;
    line-height: 1;
    letter-spacing: .28em
}

#sec3 .row .box dd {
    order: 1;
    height: 60vw
}

#sec3 .row .box dd img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec3 .row .box:last-child {
    margin: 0 auto
}

#sec3 .photo {
    margin-top: 10vw
}

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

    #sec3 .wrap {
        max-width: 1403px;
        padding: 0 30px
    }

    #sec3 .txt {
        width: 620px;
        margin: 73px 83px 0 auto;
        letter-spacing: .05em
    }

    #sec3 .row {
        margin-top: 3px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        row-gap: 20px
    }

    #sec3 .row .box {
        -moz-column-gap: 20px;
        column-gap: 20px;
        width: auto
    }

    #sec3 .row .box dt {
        margin-top: 29px;
        font-size: 20px;
        letter-spacing: .28em
    }

    #sec3 .row .box dd {
        height: 460px
    }

    #sec3 .row .box:nth-child(2) {
        margin: 80px 0 0 60px
    }

    #sec3 .row .box:last-child {
        margin: 160px 0 0 60px
    }

    #sec3 .photo {
        margin: 123px calc(-50vw + 50%) 0 302px;
        height: 547px
    }
}

#sec4 {
    padding: 20vw 0
}

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

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

#sec4 .sec4-js .slick-dots {
    justify-content: center;
    margin-top: 5vw;
    -moz-column-gap: 30px;
    column-gap: 30px
}

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

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

    #sec4 .row {
        position: relative
    }

    #sec4 .txt {
        height: 502px;
        margin: 128px 80px 0 auto
    }

    #sec4 .sec4-js {
        position: absolute;
        top: -27px;
        max-width: 770px;
        left: auto;
        right: 318px;
        margin-top: 0
    }

    #sec4 .sec4-js .item {
        height: 541px
    }

    #sec4 .sec4-js .slick-dots {
        margin-top: 54px
    }
}

#sec5 h2 {
    padding: 30vw 10%;
    font-size: 7.67vw;
    line-height: 1;
    letter-spacing: .1em
}

#sec5 .inner {
    background: url("../img/story/sec5_deco.png") no-repeat right top/90%, url("../img/shared/bg2.jpg") repeat center;
    color: #000;
    padding: 20vw 0
}

#sec5 .group-txt .ttl {
    background: url("../img/story/sec5_ttl_deco1.png") no-repeat center top/100%, url("../img/story/sec5_ttl_deco2.png") no-repeat center bottom/100%;
    width: 50%;
    margin: 0 auto;
    padding: 16vw 0
}

#sec5 .group-txt .ttl h3 {
    margin: 0 auto;
    font-size: 5.67vw;
    line-height: 2.2;
    letter-spacing: .28em
}

#sec5 .group-txt .txt {
    margin-top: 10vw
}

#sec5 .list-photo li:nth-child(1) {
    margin: 10vw 20% 0 0
}

#sec5 .list-photo li:nth-child(2) {
    margin: 5vw 0 0 35%
}

#sec5 .btn-shared {
    margin: 10vw auto 0
}

@media screen and (min-width: 768px) {
    #sec5 h2 {
        padding: 306px 0 304px 91px;
        font-size: 40px
    }

    #sec5 .inner {
        background-size: auto;
        padding: 106px 0 150px
    }

    #sec5 .wrap {
        max-width: 1394px;
        padding: 0 30px
    }

    #sec5 .group-txt {
        display: flex;
        justify-content: space-between;
        max-width: 1000px;
        margin: 0 auto
    }

    #sec5 .group-txt .ttl {
        width: 188px;
        margin: 0 0 0 38px;
        padding: 78px 0 70px
    }

    #sec5 .group-txt .ttl h3 {
        font-size: 25px
    }

    #sec5 .group-txt .txt {
        margin: 67px 44px 0 0;
        letter-spacing: .03em
    }

    #sec5 .list-photo {
        display: flex;
        -moz-column-gap: 69px;
        column-gap: 69px
    }

    #sec5 .list-photo li:nth-child(1) {
        margin: 100px 0 0
    }

    #sec5 .list-photo li:nth-child(2) {
        margin: 13px 0 0
    }

    #sec5 .btn-shared {
        margin-top: 120px
    }
}

#sec6 .group-link {
    padding: 20vw 5.3%
}

#sec6 .group-link li a {
    position: relative;
    display: block
}

#sec6 .group-link li a h3 {
    position: absolute;
    bottom: 6.5vw;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    -moz-column-gap: 4vw;
    column-gap: 4vw;
    font-size: 7.67vw;
    line-height: 1;
    letter-spacing: .1em
}

#sec6 .group-link li a h3 img {
    display: block;
    margin-bottom: 1vw;
    width: 7vw
}

#sec6 .group-link li+li {
    margin-top: 8vw
}

@media screen and (min-width: 768px) {
    #sec6 .group-link {
        display: flex;
        justify-content: space-between;
        -moz-column-gap: 30px;
        column-gap: 30px;
        max-width: 1460px;
        margin: 0 auto;
        padding: 150px 30px
    }

    #sec6 .group-link li a h3 {
        bottom: 69px;
        -moz-column-gap: 20px;
        column-gap: 20px;
        font-size: 40px
    }

    #sec6 .group-link li a h3 img {
        width: 33px;
        margin-bottom: 5px
    }

    #sec6 .group-link li a .photo {
        height: 530px
    }

    #sec6 .group-link li a:hover {
        opacity: .7
    }

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

.remodal {
    background: #1a1917;
    padding: 30px 0 100px
}

.remodal h2 {
    text-align: center;
    font-size: 25px;
    line-height: 1.5;
    letter-spacing: .3em
}

.remodal .note {
    text-align: center;
    margin-top: 0px
}

.remodal .row {
    margin-top: 40px
}

.remodal .row .col .item h3 {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: .3em
}

.remodal .row .col .item .sub-txt {
    margin: 10px 0 -10px;
    color: #e6d1a6;
    letter-spacing: .3em
}

.remodal .row .col .item dl {
    display: flex;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding: 8px 0;
    -moz-column-gap: 10px;
    column-gap: 10px
}

.remodal .row .col .item dl dt {
    flex: 1
}

.remodal .row .col .item dl dd {
    text-align: right
}

.remodal .row .col .item+.item {
    margin-top: 40px
}

.remodal .row .col+.col {
    margin-top: 40px
}

@media screen and (min-width: 768px) {
    .remodal .wrap {
        max-width: 1140px;
        padding: 0 20px
    }

    .remodal h2 {
        font-size: 30px
    }

    .remodal .note {
        margin-top: 35px;
        font-size: 16px;
        letter-spacing: .3em
    }

    .remodal .row {
        display: flex;
        justify-content: space-between;
        margin-top: 54px
    }

    .remodal .row .col {
        width: 500px
    }

    .remodal .row .col .item h3 {
        margin-bottom: 0;
        font-size: 23px
    }

    .remodal .row .col .item .sub-txt {
        margin: 14px 0 -12px;
        font-size: 16px;
        line-height: 30px
    }

    .remodal .row .col .item dl {
        padding: 16px 0;
        font-size: 16px;
        line-height: 30px
    }

    .remodal .row .col .item+.item {
        margin-top: 30px
    }

    .remodal .row .col+.col {
        margin-top: 0
    }
}