@keyframes loop-slide {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes scrolldown {
    0% {
        background-position: 0 -130px
    }

    75% {
        background-position: 0 0
    }

    100% {
        background-position: 0 130px
    }
}

#keyvisual-top {
    position: relative
}

#keyvisual-top .scrolldown {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 130px;
    left: 14px;
    bottom: 61.5px;
    z-index: 1
}

#keyvisual-top .scrolldown .line {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0 -60px;
    background-size: 100% 200%;
    animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite
}

#keyvisual-top h1 {
    position: absolute;
    top: calc(50% + 16px);
    left: 24px;
    z-index: 1;
    transform: translateY(-50%);
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    line-height: 2.15;
    letter-spacing: 2.4px
}

#keyvisual-top .txt-loop {
    position: absolute;
    bottom: -31px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    white-space: nowrap
}

#keyvisual-top .txt-loop p {
    animation: loop-slide 80s linear infinite;
    color: #ccbba1;
    font-size: 72px;
    line-height: 1;
    letter-spacing: 0
}

#keyvisual-top .txt-loop p+p {
    margin-left: 30px
}

#keyvisual-top .slide-fade {
    height: 100vh
}

#keyvisual-top .slide-fade li {
    height: 100%
}

#keyvisual-top .slide-fade li img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 768px) {
    #keyvisual-top .scrolldown {
        left: 45px;
        bottom: 113px
    }

    #keyvisual-top h1 {
        top: calc(50% - 12px);
        left: 97px;
        font-size: 32px;
        letter-spacing: 5px
    }

    #keyvisual-top .slide-fade {
        height: 774px
    }

    #keyvisual-top .txt-loop {
        bottom: -86px
    }

    #keyvisual-top .txt-loop p {
        animation: loop-slide 120s linear infinite;
        font-size: 200px
    }
}

#news {
    position: relative;
    padding: 81px 0 41px
}

#news::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center top/100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: -15vw;
    z-index: -1
}

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

#news h2 span.en {
    font-size: 32px;
    letter-spacing: 0
}

#news h2 span.jp {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 5px
}

#news .right {
    margin-top: 26px
}

#news .blog .item {
    border-top: 1px solid #ecdece;
    padding: 15px 0 16px
}

#news .blog .item .desc a {
    display: block;
    line-height: 1.6
}

#news .blog .item .group {
    display: flex;
    -moz-column-gap: 12px;
    column-gap: 12px;
    margin-top: 11px
}

#news .blog .item .group .catch {
    width: -moz-fit-content;
    width: fit-content;
    background: #eee5d8;
    padding: 0 12px;
    line-height: 26px;
    font-size: 10px;
    letter-spacing: 1px
}

#news .blog .item .group .date {
    font-family: "Libre Bodoni", serif;
    font-size: 12px;
    line-height: 26px
}

@media screen and (min-width: 768px) {
    #news {
        padding: 147px 0 119px
    }

    #news .wrap {
        display: flex;
        justify-content: space-between;
        max-width: 1040px;
        padding: 0 23px
    }

    #news h2 span {
        text-align: left
    }

    #news h2 span.en {
        font-size: 56px
    }

    #news h2 span.jp {
        margin-top: 3px;
        font-size: 20px;
        letter-spacing: 2px
    }

    #news .right {
        flex: 1;
        max-width: 686px;
        margin-top: -2px
    }

    #news .blog .item .desc a {
        line-height: 2
    }

    #news .blog .item .desc a:hover {
        text-decoration: underline
    }

    #news .blog .item .group {
        margin-top: 7px
    }

    #news .blog .item .group .date {
        font-family: "Rosarivo", cursive;
        color: #7c7c7c;
        letter-spacing: 1.2px
    }

    #news .blog .item:first-child {
        border-top: none;
        padding-top: 0
    }

    #news .btn-shared {
        margin: 26px 0 0 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #news .wrap {
        flex-direction: column;
        row-gap: 50px
    }

    #news h2 span {
        text-align: center
    }

    #news .right {
        max-width: 100%
    }

    #news .btn-shared a {
        margin: 0 auto
    }
}

#about {
    position: relative;
    color: #fff
}

#about::before {
    content: "";
    position: absolute;
    background: url("../img/top/about_bg_sp.png") no-repeat center bottom/cover;
    top: 15vw;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

#about .wrap {
    padding: 0px 0 131px
}

#about .photo3 {
    position: absolute;
    bottom: 68px;
    width: 100px;
    right: 20px
}

#about .group-txt {
    padding: 40px 20px 0
}

#about .group-txt h3 {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 2.4px
}

#about .group-txt .txt {
    margin-top: 24px
}

#about .group-txt .btn-shared {
    margin-top: 25px
}

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

    #about::before {
        background-image: url("../img/top/about_bg_pc.png");
        top: 0
    }

    #about .wrap {
        max-width: 1240px;
        padding: 0 20px 262px
    }

    #about .photo1 {
        position: absolute;
        left: calc(-50vw + 50%);
        top: -175px;
        width: 396px
    }

    #about .photo2 {
        top: -43px;
        left: 640px;
        right: calc(-50vw + 50%);
        height: 760px
    }

    #about .photo3 {
        bottom: -159px;
        width: 180px;
        right: 116px
    }

    #about .group-txt {
        width: 586px;
        margin-top: 0;
        padding: 231px 0 0
    }

    #about .group-txt h3 {
        font-size: 32px;
        letter-spacing: 3.2px
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #about .photo1 {
        top: -50px;
        width: 500px;
        left: 50%;
        transform: translateX(-50%)
    }

    #about .photo2 {
        display: none !important
    }

    #about .photo3 {
        bottom: 30px
    }

    #about .group-txt {
        width: 586px;
        margin: 0 auto;
        padding: 530px 0 0
    }
}

#service {
    padding-bottom: 62px
}

#service .wrap {
    padding: 0
}

#service h2 {
    position: relative;
    z-index: 1;
    margin-top: -41px;
    width: -moz-fit-content;
    width: fit-content
}

#service h2 span {
    display: block
}

#service h2 span.en {
    position: relative;
    z-index: 1;
    color: #bdb1a2;
    opacity: .6;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0
}

#service .group .group-txt {
    padding: 24px 20px 0
}

#service .group .group-txt h3 span {
    display: block
}

#service .group .group-txt h3 span.jp {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2.4px
}

#service .group .group-txt h3 span.en {
    color: #a0683f;
    margin-top: 9px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0
}

#service .group .group-txt .txt {
    margin-top: 21px
}

#service .group .group-txt .btn-shared {
    margin-top: 17px
}

#service .group1 {
    margin-top: -23px
}

#service .group2 {
    margin-top: 62px
}

#service .group2 .txt li:nth-child(2) {
    margin: 7px 0 6px
}

#service .group2 .txt li:nth-child(2) p {
    position: relative;
    padding-left: 22px
}

#service .group2 .txt li:nth-child(2) p::before {
    content: "";
    position: absolute;
    background: #292929;
    top: 13px;
    left: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%
}

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

    #service .wrap {
        max-width: 1360px;
        padding: 0 78px
    }

    #service h2 {
        margin: -82px 0 0 -14px
    }

    #service h2 span.en {
        font-size: 200px
    }

    #service h2 span.jp {
        position: relative;
        z-index: 1;
        margin: -58px 0 0 135px;
        font-size: 32px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 3.2px
    }

    #service .group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        -moz-column-gap: 57px;
        column-gap: 57px
    }

    #service .group .photo {
        flex: 1;
        height: 650px
    }

    #service .group .photo img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    #service .group .group-txt {
        width: 457px;
        padding: 0
    }

    #service .group .group-txt h3 span.jp {
        font-size: 32px;
        letter-spacing: 3.2px
    }

    #service .group .group-txt h3 span.en {
        margin-top: 7px;
        font-size: 16px
    }

    #service .group .group-txt .txt {
        margin-top: 31px
    }

    #service .group .group-txt .btn-shared {
        margin-top: 25px
    }

    #service .group1 {
        margin-top: 66px
    }

    #service .group1 .photo {
        margin-left: calc(-50vw + 50%)
    }

    #service .group2 {
        margin-top: 114px
    }

    #service .group2 .photo {
        order: 2;
        margin-right: calc(-50vw + 50%)
    }

    #service .group2 .group-txt {
        order: 1
    }

    #service .group2 .group-txt .txt li:nth-child(2) {
        margin: 14px 0 15px
    }

    #service .group2 .group-txt .txt li:nth-child(2) p {
        position: relative;
        padding-left: 26px
    }

    #service .group2 .group-txt .txt li:nth-child(2) p::before {
        top: 16px;
        left: 12px
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #service h2 span.en {
        font-size: 150px
    }

    #service .group {
        display: block
    }

    #service .group .photo {
        margin: 0 auto
    }

    #service .group .group-txt {
        width: auto;
        padding: 30px 0 0
    }
}

#blog {
    background: url("../img/shared/bg1.jpg") repeat center top/100%;
    padding: 71px 0 118px
}

#blog .wrap {
    padding: 0
}

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

#blog h2 span.en {
    color: #d1c5b6;
    font-size: 64px;
    letter-spacing: 0
}

#blog h2 span.jp {
    margin-top: -12px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2.4px
}

#blog .slider-blog {
    margin-top: 41px
}

#blog .slider-blog .slick-slide {
    background: rgba(255, 255, 255, .7);
    color: #000;
    width: 310px;
    margin: 0 4px;
    min-height: 475px
}

#blog .slider-blog .item {
    position: relative;
    padding: 20px 20px 35px
}

#blog .slider-blog .item a {
    display: block
}

#blog .slider-blog .item .photo {
    height: 140px;
}

#blog .slider-blog .item .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#blog .slider-blog .item a .catch {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: -moz-fit-content;
    width: fit-content;
    background: #5f4837;
    color: #fff;
    padding: 0 10px 2px 11px;
    font-size: 10px;
    line-height: 19px;
    letter-spacing: 1px
}

#blog .slider-blog .item a .ttl {
    font-family: "Noto Serif JP", serif;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 5px
}

#blog .slider-blog .item a .desc {
    margin-top: 3px;
    font-size: 12px;
    letter-spacing: 1.2px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

#blog .slider-blog .item a .date {
    font-family: "Rosarivo", cursive;
    position: relative;
    margin-top: 11px;
    padding-top: 11px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.2px
}

#blog .slider-blog .item a .date::before {
    content: "";
    position: absolute;
    background: #d2c9bd;
    width: 22px;
    height: 1px;
    top: 0;
    left: 0
}

#blog .btn-shared {
    margin: 24px 20px 0
}

@media screen and (min-width: 768px) {
    #blog {
        padding: 90px 0 198px
    }

    #blog .wrap {
        max-width: 1550px;
        padding: 0 20px
    }

    #blog h2 span.en {
        font-size: 200px
    }

    #blog h2 span.jp {
        margin-top: -9px;
        font-size: 32px;
        letter-spacing: 3.2px
    }

    #blog .slider-blog {
        display: flex;
        justify-content: space-between;
        margin-top: 30px
    }

    #blog .slider-blog .item {
        background: rgba(255, 255, 255, .7);
        color: #000;
        width: 31.9205298013%;
        padding: 49px 48px 51px
    }

    #blog .slider-blog .item a {
        transition: .3s linear
    }

    #blog .slider-blog .item a .catch {
        padding: 0 10px 0px 13px;
        line-height: 28px
    }

    #blog .slider-blog .item a .photo {
        text-align: center;
        height: 215px;
    }

    #blog .slider-blog .item a .ttl {
        margin-top: 19px;
        font-size: 20px;
        letter-spacing: 2px
    }

    #blog .slider-blog .item a .desc {
        margin-top: 10px;
        font-size: 16px;
        letter-spacing: 1.6px
    }

    #blog .slider-blog .item a .date {
        color: #7c7c7c;
        margin-top: 16px;
        padding-top: 22px
    }

    #blog .slider-blog .item a:hover {
        opacity: .8
    }

    #blog .btn-shared {
        margin: 43px 0 0 149px
    }
}

@media screen and (min-width: 768px)and (max-width: 1200px) {
    #blog .slider-blog .item {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #blog .wrap {
        padding: 0
    }
}

#recruit {
    background: url("../img/shared/bg2.jpg") no-repeat left top/cover;
    padding-bottom: 114px
}

#recruit .wrap {
    padding: 0
}

#recruit .photo {
    position: absolute;
    top: -14.67vw;
    left: 25.07%;
    right: 0
}

#recruit .group-txt {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 75.2vw 20px 0
}

#recruit .group-txt h2 span {
    display: block;
    line-height: 1
}

#recruit .group-txt h2 span.en {
    color: #9e7c67;
    font-size: 64px;
    letter-spacing: 0
}

#recruit .group-txt h2 span.jp {
    margin-top: 9px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 5px
}

#recruit .group-txt .txt {
    margin-top: 13px
}

#recruit .group-txt .btn-shared {
    margin-top: 17px
}

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

    #recruit .wrap {
        max-width: 1260px;
        padding: 0 30px
    }

    #recruit .photo {
        top: -125px;
        left: calc(50% + 117px);
        right: -89px;
        height: 786px
    }

    #recruit .group-txt {
        width: -moz-fit-content;
        width: fit-content;
        padding: 133px 0 0
    }

    #recruit .group-txt h2 span.en {
        color: #ccbba1;
        margin-left: -7px;
        font-size: 200px
    }

    #recruit .group-txt h2 span.jp {
        margin-top: -17px;
        font-size: 32px;
        letter-spacing: 3.2px
    }

    #recruit .group-txt .txt {
        width: 663px;
        margin-top: 30px;
        line-height: 1.9
    }

    #recruit .group-txt .btn-shared {
        margin-top: 25px
    }
}

@media screen and (min-width: 768px)and (max-width: 1450px) {
    #recruit .photo {
        right: calc(-50vw + 50%)
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #recruit .photo {
        left: auto;
        width: 500px;
        right: 0
    }

    #recruit .group-txt {
        padding: 600px 0 0
    }

    #recruit .group-txt h2 span.en {
        font-size: 150px
    }
}

@media screen and (min-width: 768px) {
    #shop .wrap {
        max-width: 1150px
    }

    #shop .photo {
        top: -75px
    }

    #shop .group-txt {
        padding-top: 64px
    }

    #shop .group-txt h2 span.en {
        font-size: 200px
    }

    #shop .group-txt h2 span.jp {
        margin: -8px 0 0 118px
    }

    #shop .group-txt .info {
        margin-left: 118px
    }
}

@media screen and (min-width: 768px)and (max-width: 1100px) {
    #shop .photo {
        right: 529px
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #shop .group-txt {
        margin: 0 auto
    }

    #shop .photo {
        top: -75px;
        right: 50%;
        height: 500px !important;
        height: 756px
    }

    #shop .group-txt {
        padding-top: 365px
    }

    #shop .group-txt h2 span.en {
        font-size: 150px
    }
}