@charset "UTF-8";


/* ============
main
==============*/
/* .wrapper {
    width: 80.5vw;
    margin-right: 3.33vw;
    margin-left: 16.1vw;
} */

section {
    margin-top: 160px;
}

/* sp768px以下 */
@media screen and (max-width:768px) {
    .wrapper {
        width: 100vw;
        margin-right: 0;
        margin-left: 0;
    }
}

/* ============
mv
==============*/
.mv {
    position: relative;
    padding-bottom: 108px;
}

.nav__btn {
    display: none;
}

.mv__nail {
    position: relative;
    width: 28.1vw;
    aspect-ratio: 406/482;
    position: absolute;
    top: 344px;
    right: 0;
}

.img01,.img02,.img03,.img04,.img05 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

.img01 {
    background-image: url(../images/pc-mv-nail1.webp);
    background-size: cover;
    background-repeat: no-repeat;
    animation: slide-animation-01 40s infinite;
}
.img02 {
    background-image: url(../images/pc-mv-nail2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    animation: slide-animation-02 40s infinite;
}
.img03 {
    background-image: url(../images/pc-mv-nail3.webp);
    background-size: cover;
    background-repeat: no-repeat;
    animation: slide-animation-03 40s infinite;
}
.img04 {
    background-image: url(../images/pc-mv-nail4.webp);
    background-size: cover;
    background-repeat: no-repeat;
    animation: slide-animation-04 40s infinite;
}
.img05 {
    background-image: url(../images/pc-mv-nail5.webp);
    background-size: cover;
    background-repeat: no-repeat;
    animation: slide-animation-05 40s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
    15% {opacity: 1;}
    20% {opacity: 0; transform: scale(1.1);}
    95% {opacity: 0}
    100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
    15% {opacity: 0; transform: scale(1.15);}
    20% {opacity: 1;}
    35% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.0);}
    100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
    35% {opacity: 0;}
    40% {opacity: 1; transform: scale(1.15);}
    55% {opacity: 1;}
    60% {opacity: 0; transform: scale(1.1);}
    100% {opacity: 0;}
}
@keyframes slide-animation-04 {
    0% {opacity: 0;}
    55% {opacity: 0; transform: scale(1.0);}
    60% {opacity: 1;}
    75% {opacity: 1; transform: scale(1.1);}
    80% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes slide-animation-05 {
    0% {opacity: 0;}
    75% {opacity: 0;}
    80% {opacity: 1;  transform: scale(1.1);}
    95% {opacity: 1;}
    100% {opacity: 0;  transform: scale(1.15);}
}

/* sp768px以下 */
@media screen and (max-width:768px) {
    .nav__btn {
    display: block;
    width: 48px;
    height: 20px;
    position: fixed;
    top: 48px;
    right: 28px;
    z-index: 1000;
    }

    .nav__btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-bg);
    position: absolute;
    }

    .nav__btn span:nth-child(1) {
        top: 0;
    }
    .nav__btn span:nth-child(2) {
        top: 50%;
    }
    .nav__btn span:nth-child(3) {
        top: 100%;
    }
    /* ======
    メニューボタン開閉
    =========*/
    .nav__btn.active span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        background: var(--color-text);
    }
    .nav__btn.active span:nth-child(2) {
        display: none;
    }
    .nav__btn.active span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        background: var(--color-text);
    }
    
    .mv__nail {
        top: auto;
        bottom: 0;
        width: 57%;
        aspect-ratio: 214/274;
        right: 24px;
    }
}

/* ============
subcopy
==============*/
.subcopy {
    background-image: url(../images/pc-ripples1926.webp);
    background-size: contain;
    background-repeat: no-repeat;
    
}
.subcopy {
    position: relative;
}

/* .subcopy::before {
    content: "";
    background-image: url(../images/pc-ripples1926.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    min-height: 100vh;
    width: 100%;
    z-index: -1;
    position: absolute;
    display: block;
    top: 0;

} */
.subcopy__inner {
    width: 38.6vw;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5.41vw;
    position: relative;
    white-space: nowrap;
    padding: 118px 0 155px 0;
    margin: 0 auto;
}

.subcopy__bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: -100;
}

.subcopy__bg img {
    width: auto;
    height: 100%;
    min-width: 1160px;
}

.subcopy__ttl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6.66vw;
}

.subcopy__catch {
    font-size: var(--fs28);
    letter-spacing: 0.57em;
    margin-top: 0;
}

.subcopy__space {
    margin-top: 54px;
    font-size: var(--fs20);
    letter-spacing: 0.6em;
}

.subcopy__detail {
    margin-right: 78px;
}

.subcopy__nail {
    margin-top: 54px;
    font-size: var(--fs20);
    letter-spacing: 0.6em;
}


.subcopy__detail--list {
    font-size: var(--fs28);
    letter-spacing: 0.57em;
    margin: 97px 40px 0 0;
}
.subcopy__conclusion {
    margin-top: 165px;
    display: flex;
    flex-direction: column;
    gap: 1.66vw;
    justify-content: center;
}

.subcopy__time {
    font-size: var(--fs20);
    letter-spacing: 0.6em;
}

.subcopy__salon {
    font-size: var(--fs20);
    letter-spacing: 0.6em;
}
/* sp1800px以下 */
@media screen and (max-width:1800px) {
    /* .subcopy::before {
        background-image: url(../images/pc-ripples.webp);
    } */

    .subcopy {
    background-image: url(../images/pc-ripples1160.webp);
    background-size: contain;
    background-repeat: no-repeat;
    }
}

/* sp1400px以下 */
@media screen and (max-width:1400px) {
    /* .subcopy::before {
        background-image: url(../images/pc-ripples1160.webp);
        background-size: cover;
        position: absolute;
    } */
    
    .subcopy {
        background-size: cover;
        background-image: url(../images/pc-ripples.webp);
    }

    .subcopy__inner {
        margin: 118px auto 0;
    }
}

/* sp1000px以下 */
@media screen and (max-width:1000px) {
    .subcopy {
        background-image: url(../images/pc-ripples.webp);
        background-position: top;
    }

    .subcopy__inner {
        flex-direction: row;
        margin-top: 118px;
    }
    .subcopy__row {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .subcopy__ttl {
        /* margin-right: 12.2vw; */
        gap: 2vw 0;
    }

    .subcopy__catch {
        font-size: var(--fs20);
    }

    .subcopy__space {
        font-size: var(--fs18);
        margin-top: 74px;
    }

    .subcopy__detail {
        margin: 341px 14.9vw 0 0;
    }

    .subcopy__nail {
        font-size: var(--fs18);
        margin: 0;
    }

    .subcopy__detail--list {
        font-size: var(--fs20);
        margin: 0 2.4vw 0 0;
    }

    .subcopy__conclusion {
        font-size: var(--fs18);
    }
}

/* sp600px以下 */
@media screen and (max-width:600px) {
    .subcopy__detail--list {
        font-size: var(--fs20);
        margin: 0 2.4vw 0 0;
        line-height: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

/* ============
concept__intro
==============*/
.concept__intro {
    position: relative;
    width: auto;
    aspect-ratio: 1160/506;
    padding-bottom: 91px;
}

.concept__intro-inner {
    width: calc(53% + 116px);
    aspect-ratio: 731/393;
    border: 1px solid var(--color-text);
    background-color: rgba(250, 248, 245, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
    padding: 82px 7.84vw 74px 9.3vw;
    position: absolute;
    right: 5.34%;
    bottom: -91px;
}

.concept__intro-txt {
    font-family: var(--font-serif);
    font-size: var(--fs20);
    line-height: 2;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.concept__intro-btn {
    align-self: center;
    width: 75.2%;
    max-width: 252px;
    text-align: center;
}

.concept__img {
    width: 41.7%;    
}

/* sp1045px以下 */
@media screen and (max-width:1045px) {
    /* .concept__intro-inner {
        width: 100%;
        top: 0;
        bottom: auto;
        right: auto;
        } */

    .concept__img {
        width: 100%;    
    }
}

/* sp768px以下 */
@media screen and (max-width:768px) {
    .concept__intro {
        padding-bottom: 75px;
        margin-top: 0;
    }
    
    .concept__intro-inner {
        width: 100%;
        top: 0;
        bottom: auto;
        right: auto;
        height: calc(100% - 74px);
        /* padding: 80px 30.4vw 64px 7.2vw; */
        padding: 0;
        border: none;
        max-width: 100%;
    }
    
    .concept__intro-txt {
        font-size: var(--fs14);
        letter-spacing: 0.2em;
        padding: 0 30.4vw 0 7.2vw;
    }

    .concept__intro-btn {
        align-self: center;
    }

}
/* ============
menu
==============*/
.menu {
    background-image: url(../images/japanese-paper.webp);
    background-size: contain;
    background-repeat: repeat;
    padding: 191px 8.1% 592px 8.1%;
    text-align: end;
    position: relative;
    max-width: 1610px;
    margin: 160px auto 0;   
}

.menu::before {
    content: "";
    position: absolute;
    background-image: url(../images/orange.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15.6vw;
    aspect-ratio: 1;
    right: 37.06%;
    top: 60px;
    z-index: 10;
    max-width: 297px;
}

.menu::after {
    content: "";
    position: absolute;
    background-image: url(../images/purple-brown.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20.9vw;
    aspect-ratio: 1;
    bottom: 92px;
    left: 7.93%;
    max-width: 418px;  
}

.menu__list--wrapper {
    text-align: start;

}

.menu__list--wrapper::before {
    content: "";
    position: absolute;
    background-image: url(../images/greensimple.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 18.1vw;
    aspect-ratio: 1;
    right: 8.28%;
    top: 0;
    z-index: 10;
    max-width: 344px;
}

.menu__list--wrapper::after {
    content: "";
    position: absolute;
    background-image: url(../images/pink-flower.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 18.1vw;
    aspect-ratio: 1;
    right: 37.6%;
    bottom: 195px;
    z-index: 10;
    max-width: 362px;
}

.menu__taxIncluded {
    margin-top: 136px;
}

.menu__list {
    width: 52.2vw;
}

.menu__row {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    font-family: var(--font-serif);
    font-size: var(--fs20);
    line-height: 1.2;
    letter-spacing: 0.3em;
}

.menu__item--price {
    font-family: var(--font-en);
    letter-spacing: 0.2em;
    font-size: var(--fs20);
}

.sp-only {
    display: none;
}

.menu__lead {
    margin-top: 136px;
    font-family: var(--font-serif);
    line-height: 1.2;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.menu__lead--txt {
    margin-top: 26px;
}

.menu__lead--txt:first-of-type {
    margin-top: 0;
}

.menu__btn {
    margin-top: 48px;
    width: 75.2%;
    max-width: 252px;
    text-align: center;
}

.image__magnet-gold::before {
    content: "";
    position: absolute;
    background-image: url(../images/magnet-gold.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 18.9vw;
    aspect-ratio: 1;
    right: 8.9%;
    bottom: 54px;
    z-index: 10;
    max-width: 378px;
}
.menu__images {
    display: none;
}

/* sp1200px以下 */
@media screen and (max-width:1200px) {
    .sp-only {
        display: block;
    }

    .menu__lead {
        white-space: normal;
    }
}
/* sp800px以下 */
@media screen and (max-width:800px) {
    .menu {
        padding: 80px 5.3vw;
    }

    .menu::before {
        display: none;
    }

    .menu::after {
        display: none;
    }

    .menu__list--wrapper::before {
        display: none;
    }

    .menu__list--wrapper::after {
        display: none;
    }

    .image__magnet-gold::before {
        display: none;
    }
    .menu__images {
        margin-top: 56px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    /* 左上 */
    .menu__images img:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        margin-top: 47px;
    }

    /* 右上 */
    .menu__images img:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    }

    /* 左下 */
    .menu__images img:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    }

    /* 右中 */
    .menu__images img:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    margin-top: -47px;
    }

    /* 右下 */
    .menu__images img:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    margin-top: -47px;
    }


    .menu__taxIncluded {
        margin-top: 72px;
    }

    .menu__list {
        width: 100%;
    }


    .menu__row {
        align-items: flex-end;
        font-size: var(--fs18);
        letter-spacing: 0.2em;
    }
}

/* sp768px以下 */
@media screen and (max-width:768px) {
    .menu {
        margin: 0 auto;
        text-align: center;
    }

    .menu__lead {
        margin-top: 72px;
    }
}

/* sp426px以下 */
@media screen and (max-width:426px) {
    .menu__row {
        flex-direction: column;
    }

    .menu__item {
        align-self: flex-start;    
    }
}
/* ============
voice
==============*/
.voice {
    max-width: 1350px;
    margin: 160px auto 0;
    width: 67.5vw;
}

.voice-item {
    display: flex;
    margin-top: 80px;
    border: 1px solid var(--color-text);
    padding: 32px;
    gap: 3.33vw;
    align-items: center;
}

.voice-item:nth-of-type(2) {
    flex-direction: row-reverse;
}

.voice-item__img {
    width: 29.4%;
}

.voice-item__stack {
    width: 57.2%;
}

.voice-item__ttl {
    font-size: var(--fs20);
    line-height: 2;
}

.voice-item__desc {
    margin-top: 32px;
    line-height: 1.8;
}

.voice-item__accent {
    background: linear-gradient(transparent 60%, var(--color-accent) 78%, var(--color-accent) 88%, transparent 88%);
}

.owner__voice {
    position: relative;
    width: 81.8%;
    margin: 80px auto 0;
}

.owner__voice--img {
    width: 25.03%;
}

.owner__voice--txt {
    color: var(--color-bg);
    background-color: var(--color-main);
    padding: 32px 40px;
    width: 75%;
    position: absolute;
    bottom: 10%;
    left: 25%;
    line-height: 1.8;
}
/* sp1160px以下 */
@media screen and (max-width:1160px) {
    .owner__voice {
    width: 100%;
    }
}

/* sp768px以下 */
@media screen and (max-width:768px) {
    .voice {
        margin: 80px auto 0;
        width: 89.3vw;
    }

    .voice-item {
        flex-direction: column;
        border: none;
        padding: 0;
        margin-top: 56px;
        }

    .voice-item:nth-of-type(2) {
        flex-direction: column;
    }
    
    .voice-item__img {
        width: 100%;
        text-align: center;
    }
    
    .voice-item__stack {
        width: 100%;
    }

    .voice-item__ttl {
        font-size: var(--fs18);
        line-height: 1.8;
    }

    .owner__voice {
        margin: 56px auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 89.3vw;
    }

    .owner__voice--img {
        width: 59.4%;
    }

    .owner__voice--txt {
        position: static;
        width: 100%;
    }

}

/* ============
reservation
==============*/
.reservation {
    margin: 160px auto 0;
    width: 67.5vw;
    max-width: 1350px;
    position: relative;
    padding-bottom: 129px;
}

.reservation-intro__ttl {
    font-size: var(--fs20);
    font-family: var(--font-serif);
    line-height: 1.2;
    letter-spacing: 0.3em;
    margin-top: 72px;
}

.reservation-intro__list {
    margin-top: 56px;
}

.reservation-intro__item {
    margin-top: 32px;
}

.reservation-intro__item:first-of-type {
    margin-top: 0;
}

.reservation-intro__txt {
    font-family: var(--font-serif);
    font-size: var(--fs16);
    letter-spacing: 0.2em;
    line-height: 3;
    width: 68%;
    max-width: 653px;
    margin: 136px auto 0;
}

.reservation-intro-btn {
    position: absolute;
    bottom: 0;
    right: 6.89%;
    width: 75.2%;
    max-width: 252px;
    text-align: center;
}
/* sp768px以下 */
@media screen and (max-width:768px) {
    .reservation {
        margin: 88px auto 0;
        width: 89.3%;
        padding-bottom: 88px;
    }

    .reservation-intro__ttl {
        font-size: var(--fs18);
        letter-spacing: 0.2em;
        margin-top: 48px;
    }
    .reservation-intro__list {
        margin-top: 32px;
        padding-left: 20px;
    }
    
    .reservation-intro__item {
        margin-top: 18px;
        position: relative;
    }

    .reservation-intro__item::before {
        content: '';
        display: block;
        position: absolute;
        background-color: var(--color-text);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        top: 8px;
        left: -17px;
    }

    .reservation-intro__txt {
        font-size: var(--fs14);
        line-height: 2;
        width: 100%;
        margin: 48px auto 0;
        }
    
    .reservation-intro-btn {
        margin-top: 32px;
    }
}