@keyframes loadingImg {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(6deg)
    }
}

@keyframes loadingImg2 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(-6deg)
    }
}

@keyframes loadingImg3 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

#keyvisual {
    position: relative;
    margin-top: -38vw;
    padding-top: 38vw;
}

#keyvisual .row:nth-child(n+2) {
    position: absolute;
    top: 38vw;
    bottom: 0;
    left: 0;
    right: 0
}

#keyvisual .row h2 {
    opacity: 0;
    transition: .5s linear
}

#keyvisual .row h2.is-show {
    opacity: 1
}

#keyvisual .row .photo {
    opacity: 0
}

#keyvisual .row1 .photo {
    transform: translateY(-50%) rotate(15deg);
    padding: 10vw 15.5% 0
}

#keyvisual .row1 .photo.is-show {
    animation: loadingImg 1s forwards
}

#keyvisual .row1 h2 {
    margin: -44vw 27% 0 7%
}

#keyvisual .row2 .photo {
    transform: translateY(-50%) rotate(-15deg);
    padding: 10vw 15.5% 0
}

#keyvisual .row2 .photo.is-show {
    animation: loadingImg2 1s forwards
}

#keyvisual .row2 h2 {
    margin: 8vw 5.5% 0 6%
}

#keyvisual .row3 .photo {
    padding: 21vw 4% 0;
    transform: translateY(-50%)
}

#keyvisual .row3 .photo.is-show {
    animation: loadingImg3 1s forwards
}

#keyvisual .row3 h2 {
    margin: -20.5vw 25% 0
}

@media screen and (min-width: 768px) {
    #keyvisual {
        position: relative;
        overflow: visible;
        padding: 0 116px;
        margin-top: 0vw;
    }

    #keyvisual .row:nth-child(n+2) {
        top: 0;
    }

    #keyvisual .row {
        display: flex;
        justify-content: flex-end;
        max-width: 1224px;
        margin: 0 auto
    }

    #keyvisual .row .photo {
        order: 2
    }

    #keyvisual .row h2 {
        order: 1
    }

    #keyvisual .row1 .photo {
        padding: 0;
        margin: -113px 99px 0 0
    }

    #keyvisual .row1 h2 {
        margin: -66px 135px 0 0
    }

    #keyvisual .row2 .photo {
        padding: 0;
        margin: -118px 99px 0 0
    }

    #keyvisual .row2 h2 {
        margin: 149px 51px 0 0
    }

    #keyvisual .row3 .photo {
        padding: 0;
        margin: -30px 14px 0 0
    }

    #keyvisual .row3 h2 {
        margin: 21px 120px 0 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1450px) {
    #keyvisual {
        padding: 0 8vw
    }

    #keyvisual .row:nth-child(n+2) {
        left: 8vw;
        right: 8vw
    }

    #keyvisual .row .photo img {
        width: 100%
    }

    #keyvisual .row h2 img {
        width: 100%
    }

    #keyvisual .row1 .photo {
        margin: -7.7931034483vw 6.8275862069vw 0 0
    }

    #keyvisual .row1 h2 {
        margin: -4.5517241379vw 9.3103448276vw 0 4vw
    }

    #keyvisual .row2 .photo {
        margin: -8.1379310345vw 6.8275862069vw 0 0
    }

    #keyvisual .row2 h2 {
        margin: 10.275862069vw 3.5172413793vw 0 0
    }

    #keyvisual .row3 .photo {
        margin: -2.0689655172vw .9655172414vw 0 0
    }

    #keyvisual .row3 h2 {
        margin: 1.4482758621vw 8.275862069vw 0 6.2068965517vw
    }
}

#sec1 {
    padding-bottom: 14vw
}

#sec1 .lead {
    position: relative
}

#sec1 .lead h2 {
    padding: 36vw 26.5% 112vw
}

#sec1 .lead .bg {
    position: absolute;
    top: -50vw;
    bottom: 0;
    left: -8%;
    right: -8%;
    z-index: -1
}

#sec1 .lead .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom
}

#sec1 .txt {
    background: url("../img/index/sec1_deco_line_x.png") repeat left top/auto 35px;
    margin-top: 5vw;
    line-height: 35px
}

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

    #sec1 .wrap {
        position: unset;
        display: flex;
        justify-content: center;
        -moz-column-gap: 80px;
        column-gap: 80px;
        padding-bottom: 834px
    }

    #sec1 .lead {
        order: 2;
        position: unset
    }

    #sec1 .lead h2 {
        width: 265px;
        margin-top: 178px;
        padding: 0
    }

    #sec1 .lead .bg {
        top: -550px;
        left: 0;
        right: 0
    }

    #sec1 .txt {
        order: 1;
        background: url("../img/index/sec1_deco_line_y1.png") repeat-x right top/50px auto, url("../img/index/sec1_deco_line_y2.png") no-repeat left top/50px auto;
        text-align: left;
        margin: 180px 0 0;
        height: 468px;
        line-height: 50px
    }
}

#sec2 {
    padding-bottom: 14.5vw
}

#sec2 .lead {
    position: relative
}

#sec2 .lead h2 {
    padding: 19vw 13.5% 69.5vw 0%
}

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

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

#sec2 .txt {
    margin-top: 5.5vw
}

#sec2 .group-link {
    margin: 5vw 4% 0
}

#sec2 .group-link li+li {
    margin-top: 5.5vw
}

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

    #sec2 .wrap {
        max-width: 1300px;
        padding-bottom: 120px
    }

    #sec2 .lead {
        position: unset
    }

    #sec2 .lead h2 {
        width: 570px;
        padding: 114px 0 0 55px
    }

    #sec2 .lead .bg {
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%)
    }

    #sec2 .txt {
        color: #fff;
        width: 540px;
        margin: 17px 0 0 50px
    }

    #sec2 .group-link {
        margin: 30px 0 0 45px
    }

    #sec2 .group-link li+li {
        margin-top: 20px
    }
}

#sec3 {
    padding-bottom: 17vw
}

#sec3 .lead {
    position: relative
}

#sec3 .lead h2 {
    padding: 32vw 0 46vw
}

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

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

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

#sec3 .btn-shared {
    margin: 5.5vw 4% 0
}

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

    #sec3 .wrap {
        padding-bottom: 172px
    }

    #sec3 .lead {
        position: unset
    }

    #sec3 .lead h2 {
        text-align: center;
        padding: 186px 0 0
    }

    #sec3 .lead .bg {
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%)
    }

    #sec3 .txt {
        text-align: center;
        color: #fff;
        margin-top: 26px
    }

    #sec3 .btn-shared {
        margin: 29px auto 0
    }
}

#sec4 {
    background: url("../img/shared/bg2.jpg") repeat center;
    color: #fff;
    padding: 6vw 0 18vw
}

#sec4 .set1 .box {
    position: relative;
    margin: 12.5vw -7.7% 0
}

#sec4 .set1 .box .sub-ttl {
    position: absolute;
    top: 3vw;
    right: 4.5%;
    z-index: 2;
    text-align: center;
    background: url("../img/shared/bg1.jpg") repeat center;
    color: #2b1b12;
    border-radius: 50%;
    padding-top: 8.5vw;
    width: 32vw;
    height: 32vw;
    font-size: 4vw;
    line-height: 1.6;
    font-weight: 900;
    letter-spacing: 0
}

#sec4 .set1 .box .sub-ttl::before {
    content: "";
    position: absolute;
    border: 2px dashed #2b1b12;
    border-radius: 50%;
    inset: 1.3vw
}

#sec4 .set1 .box .sub-ttl span {
    font-size: 5.33vw;
    letter-spacing: 0
}

#sec4 .set1 .box h3 {
    position: absolute;
    top: 24vw;
    left: 16.5%;
    z-index: 2;
    transform: rotate(-5deg)
}

#sec4 .set1 .box h3 span {
    display: block;
    color: #fff;
    font-size: 5.33vw;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0
}

#sec4 .set1 .box h3 span:nth-child(2) {
    margin-top: 5.5vw
}

#sec4 .set1 .box .photo {
    position: relative;
    z-index: 1;
    padding: 1.5vw 3.2vw
}

#sec4 .set1 .box .photo::before {
    content: "";
    position: absolute;
    background: #fff;
    inset: 0;
    z-index: -2
}

#sec4 .set1 .txt {
    margin-top: 5vw
}

#sec4 .set2 {
    margin-top: 8vw
}

#sec4 .set2 .sec4-js .slick-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    z-index: 1;
    justify-content: center
}

#sec4 .set2 .sec4-js .item {
    position: relative;
    padding: 5px
}

#sec4 .set2 .sec4-js .item::before {
    content: "";
    position: absolute;
    background: #fff;
    inset: 0
}

#sec4 .set2 .sec4-js .item .sub-ttl {
    position: absolute;
    bottom: 5px;
    right: 15px;
    z-index: 1;
    font-weight: 900;
    letter-spacing: 0
}

#sec4 .set2 .sec4-js .item .photo {
    height: 62.5vw
}

#sec4 .set2 .sec4-js .item .photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec4 .set2 .floor-map {
    margin: 7vw 15.5% 0
}

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

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

    #sec4 .set1 .lead {
        display: flex;
        justify-content: space-between;
        box-sizing: content-box;
        max-width: 1105px;
        padding-right: 36px;
        -moz-column-gap: 30px;
        column-gap: 30px;
        margin: 0 auto
    }

    #sec4 .set1 .lead h2 {
        max-width: 520px;
        flex: 1
    }

    #sec4 .set1 .lead .txt {
        width: 505px;
        margin-top: 21px
    }

    #sec4 .set1 .box {
        margin: 80px 0 0;
        padding-right: 152px
    }

    #sec4 .set1 .box .sub-ttl {
        top: -67px;
        right: 46px;
        padding-top: 61px;
        width: 240px;
        height: 240px;
        font-size: 30px;
        line-height: 55px
    }

    #sec4 .set1 .box .sub-ttl::before {
        inset: 10px
    }

    #sec4 .set1 .box .sub-ttl span {
        font-size: 40px
    }

    #sec4 .set1 .box h3 {
        top: 58px;
        left: 195px;
        transform: rotate(-5deg)
    }

    #sec4 .set1 .box h3 span {
        font-size: 30px;
        line-height: 50px
    }

    #sec4 .set1 .box h3 span:nth-child(2) {
        margin-top: 30px
    }

    #sec4 .set1 .box .photo {
        padding: 10px;
        height: 570px
    }

    #sec4 .set1 .txt {
        margin-top: 505px
    }

    #sec4 .set2 {
        position: relative;
        margin-top: 0
    }

    #sec4 .set2 .sec4-js {
        position: absolute;
        top: -7px;
        left: calc(50% - 24px);
        right: 0
    }

    #sec4 .set2 .sec4-js .slick-dots {
        bottom: 30px
    }

    #sec4 .set2 .sec4-js .slick-slide {
        height: 490px
    }

    #sec4 .set2 .sec4-js .item {
        padding: 10px;
        height: 490px
    }

    #sec4 .set2 .sec4-js .item .sub-ttl {
        bottom: 26px;
        right: 29px;
        font-size: 30px
    }

    #sec4 .set2 .sec4-js .item .photo {
        height: 100%
    }

    #sec4 .set2 .floor-map {
        margin: 67px calc(50% + 116px) 0 0;
        text-align: right
    }
}

@media screen and (min-width: 768px)and (max-width: 1100px) {
    #sec4 .set2 .sec4-js {
        left: 498.5px
    }
}

#sec5 .col-r {
    padding: 11vw 7% 14vw
}

#sec5 .col-r h2 {
    text-align: center;
    font-size: 7.6vw;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0
}

#sec5 .col-r .logo {
    width: 61.5%;
    margin: 6vw auto 0
}

#sec5 .col-r .tel-shared {
    margin-top: 9.5vw
}

#sec5 .col-r .btn-reserve {
    margin-top: 4vw
}

#sec5 .col-r .cancel {
    border-top: 1px solid #272727;
    border-bottom: 1px solid #272727;
    margin-top: 8vw;
    padding: 16px 0 19px
}

#sec5 .col-r .cancel h3 {
    text-align: center;
    font-size: 17px;
    letter-spacing: .05em
}

#sec5 .col-r .cancel .txt {
    margin-top: 4px;
    line-height: 27.5px
}

#sec5 .col-r .info {
    margin-top: 11vw
}

#sec5 .col-r .info dl {
    border-bottom: 1px dotted #222;
    padding: 11px 0;
    line-height: 22.5px
}

#sec5 .col-r .info dl dd {
    text-align: left;
    margin-left: 17px
}

#sec5 .col-r .info dl dd span,
#sec5 .col-r .info dl dd a {
    font-size: 11px;
    letter-spacing: .1em
}

#sec5 .col-r .info dl dd a {
    display: inline-block;
    position: relative
}

#sec5 .col-r .info dl dd a::before {
    content: "";
    position: absolute;
    background: #222;
    height: 1px;
    bottom: 0;
    left: 6px;
    right: 6px
}

#sec5 .col-r .info dl dd a:hover::before {
    opacity: 0
}

#sec5 .col-r .photo {
    margin-top: 10.5vw
}

#sec5 .col-r .photo img {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}

#sec5 .col-l {
    padding-bottom: 22vw
}

#sec5 .col-l .map {
    height: 87vw
}

#sec5 .col-l .btn-shared {
    margin: 8vw 10% 0
}

@media screen and (min-width: 768px) {
    #sec5 {
        display: flex;
        padding-bottom: 0
    }

    #sec5 .col-r {
        order: 2;
        width: 50%;
        padding: 117px 30px 122px
    }

    #sec5 .col-r h2 {
        font-size: 50px
    }

    #sec5 .col-r .logo {
        width: 340px;
        margin-top: 49px
    }

    #sec5 .col-r .tel-shared {
        margin-top: 49px
    }

    #sec5 .col-r .btn-reserve {
        margin-top: 23px
    }

    #sec5 .col-r .cancel {
        max-width: 520px;
        margin: 40px auto 0;
        padding: 30px 0 32px
    }

    #sec5 .col-r .cancel h3 {
        font-size: 24px
    }

    #sec5 .col-r .cancel .txt {
        margin-top: 17px;
        line-height: 40px
    }

    #sec5 .col-r .info {
        max-width: 520px;
        margin: 55px auto 0
    }

    #sec5 .col-r .info dl {
        display: flex;
        padding: 15px 0 18px;
        line-height: 34px
    }

    #sec5 .col-r .info dl dt {
        max-width: 124px;
        width: 100%
    }

    #sec5 .col-r .info dl dd {
        margin: 0 -5px 0 0
    }

    #sec5 .col-r .info dl dd span,
    #sec5 .col-r .info dl dd a {
        font-size: inherit
    }

    #sec5 .col-r .photo {
        max-width: 650px;
        margin: 60px auto 0
    }

    #sec5 .col-l {
        position: sticky;
        top: 0;
        order: 1;
        width: 50%;
        height: 100vh
    }

    #sec5 .col-l .map {
        height: calc(100vh - 157px)
    }

    #sec5 .col-l .btn-shared {
        margin: 41px auto 0
    }
}

#sec6 .col-r {
    position: relative;
    background: url("../img/index/sec6_bg1.jpg") no-repeat center/cover;
    padding: 38vw 0 7.5vw
}

#sec6 .col-r h2 {
    position: absolute;
    top: -10vw;
    left: 4.5%;
    background: url("../img/index/sec6_bg_deco.png") no-repeat center top/100%;
    text-align: center;
    width: 64.5vw;
    padding: 3.5vw 0 9vw 2.5%;
    font-size: 6.67vw;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0
}

#sec6 .col-r h2 span {
    color: #8b0c0c;
    letter-spacing: 0
}

#sec6 .col-r .txt {
    text-align: center;
    color: #fff;
    line-height: 27.5px
}

#sec6 .col-r .tel-shared {
    background: rgba(255, 255, 255, .8);
    margin: 4vw 7% 0;
    padding: 3.5vw 0 4.5vw
}

#sec6 .col-l {
    background: url("../img/index/sec6_bg2.jpg") no-repeat center/cover;
    margin-top: 1.5vw;
    padding: 5.5vw 0 11vw
}

#sec6 .col-l h2 {
    text-align: center;
    color: #fff;
    font-size: 7.6vw;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0
}

#sec6 .col-l #feed {
    margin-top: 4vw
}

#sec6 .col-l #feed .rss-img {
    width: 67vw;
    height: 40vw;
    margin: 0 auto
}

#sec6 .col-l #feed .rss-img span {
    width: 100% !important;
    height: 100% !important
}

#sec6 .col-l #feed dl {
    text-align: center;
    color: #fff;
    margin-top: 2vw;
    line-height: 27.5px
}

#sec6 .col-l #feed dl dd a:hover {
    text-decoration: underline
}

#sec6 .col-l .btn-shared {
    margin: 3.5vw 16.5% 0
}

@media screen and (max-width: 767px) {
    #sec6 .col-l .btn-shared a {
        line-height: 54px
    }

    #sec6 .col-l .btn-shared a::before {
        top: 7.5px
    }

    #sec6 .col-l .btn-shared a::after {
        bottom: 7.5px
    }

    #sec6 .col-l .btn-shared a span {
        right: 27px;
        width: 10.5px;
        height: 11.5px
    }
}

@media screen and (min-width: 768px) {
    #sec6 {
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px
    }

    #sec6>* {
        width: calc(50% - 4px);
        min-height: 698px
    }

    #sec6 .col-r {
        order: 2;
        padding: 225px 30px 30px
    }

    #sec6 .col-r h2 {
        top: -75px;
        left: 17px;
        width: 484px;
        padding: 26px 0 75px 19px;
        font-size: 50px
    }

    #sec6 .col-r .txt {
        line-height: 40px
    }

    #sec6 .col-r .tel-shared {
        max-width: 500px;
        margin: 22px auto 0;
        padding: 30px 0 32px
    }

    #sec6 .col-l {
        order: 1;
        margin-top: 0;
        padding: 43px 30px 30px
    }

    #sec6 .col-l h2 {
        font-size: 50px
    }

    #sec6 .col-l #feed {
        margin-top: 30px
    }

    #sec6 .col-l #feed .rss-img {
        max-width: 500px;
        width: 100%;
        height: 300px
    }

    #sec6 .col-l #feed dl {
        margin-top: 21px;
        line-height: 32px
    }

    #sec6 .col-l .btn-shared {
        margin: 26px auto 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1100px) {
    #sec6 .col-r h2 {
        top: -6.8181818182vw;
        left: 1.5454545455vw;
        width: 44vw;
        padding: 2.3636363636vw 0 6.8181818182vw 1.7272727273vw;
        font-size: 4.5454545455vw
    }
}