@charset 'UTF-8';
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@keyframes spin
{
    to
    {
        transform: translate(70%, -80%) rotate(-360deg);
    }
}
@keyframes disnone
{
    0%
    {
        z-index: 100000;

        display: flex;

        transform: translateX(0%);

        opacity: 1;
    }
    99%
    {
        z-index: 100000;

        display: flex;

        transform: translateX(0%);

        opacity: 0;
    }
    100%
    {
        z-index: -100;

        display: none;

        transform: translateX(-500%);

        opacity: 0;
    }
}
.c-text
{
    margin-bottom: var(--m45);
}
.c-text-line
{
    font-size: var(--fs14_18);
    /* font-weight: 500; */
    line-height: 2.8;

    display: block;
}
.c-text.center .c-text-line
{
    text-align: center;
}

.p-loadAnime
{
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 100%;

    transition: all .5s;
    transform: translateX(0%);

    background-color: #fff;

    justify-content: center;
    align-items: center;
}
.p-loadAnime.complate
{
    animation: disnone 1s 0s linear forwards;
}
.p-loadAnime.opacity
{
    background: unset;
}
.p-loadAnime.opacity .load_logo
{
    display: none;
}
.p-loadAnime.reload
{
    z-index: -100 !important;

    display: none !important;

    transform: translateX(-500%) !important;

    opacity: 0 !important;
}
.p-loadAnime__inner
{
    width: 90%;
    max-width: 500px;

    transition: opacity .5s;

    opacity: 0;
}
.p-loadAnime__inner.load
{
    opacity: 1;
}
.p-loadAnime__inner.complate
{
    opacity: 0;
}
.p-loadAnime .cls-1
{
    fill: #b7183f;
}
.p-loadAnime .cls-2
{
    fill: #fff;
}
.p-loadAnime .cls-3
{
    fill: #656464;
}

.p-mv
{
    position: relative;
    z-index: 1;

    width: 100%;
    max-height: 1800px;
    padding-top: var(--m130);

    aspect-ratio: 8/9;
}
.p-mv::after
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    display: inline-block;

    width: 100%;
    height: 100%;

    content: '';

    background: url(../images/common/bg.png) center top/cover no-repeat;
}
.p-mv__main-photo
{
    width: min(46.85vw, 750px);
    margin: 0 auto;
}
.p-mv__logo
{
    position: relative;
    z-index: 20;

    width: 90%;
    max-width: min(28.125vw, 450px);
    margin: 0 auto var(--m45);
}
.p-mv .c-text
{
    position: relative;
    z-index: 20;

    width: 90%;
    max-width: min(54.06vw, 865px);
    margin-right: auto;
    margin-left: auto;
}
.p-mv__rotate
{
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;

    width: clamp(150px, 20.75vw, 335px);

    transform: translate(70%, -80%);
    animation: spin 10s linear infinite;

    aspect-ratio: 332/327;
}
.p-mv .c-cv-area
{
    position: relative;
    z-index: 20;

    width: 90%;
    max-width: min(54.06vw, 865px);
    margin-right: auto;
    margin-bottom: var(--m80);
    margin-left: auto;
}
.p-mv__photo
{
    position: absolute;
    z-index: 5;

    overflow: hidden;
}
.p-mv__photo.left01
{
    top: 3.88%;
    left: clamp(10px, 10px + (100vw - 1024px) * .15625, 100px);

    width: clamp(100px, 17.5vw, 280px);
}
.p-mv__photo.left02
{
    top: 30.55%;
    left: 0;

    width: clamp(170px, 23.125vw, 370px);
}
.p-mv__photo.left03
{
    top: 52.77%;
    left: clamp(10px, 10px + (100vw - 1024px) * .15625, 100px);

    width: clamp(200px, 27.625vw, 440px);
}
.p-mv__photo.left04
{
    top: 70.55%;
    left: clamp(15px, 15px + (100vw - 1024px) * .6076388889, 365px);

    width: clamp(140px, 20.43vw, 327px);
}
.p-mv__photo.right01
{
    top: 13.61%;
    right: 0;

    width: clamp(120px, 19.25vw, 308px);
}
.p-mv__photo.right02
{
    top: 55.55%;
    right: clamp(10px, 10px + (100vw - 1024px) * .0694444444, 50px);

    width: clamp(210px, 30.62vw, 490px);
}
.p-mv__text
{
    font-size: clamp(28px, 2.5vw, 40px);

    position: absolute;
    z-index: 10;

    color: var(--brown02);
}
.p-mv__text.salon
{
    top: 48.88%;
    left: clamp(10px, 10px + (100vw - 1024px) * .15625, 100px);
}
.p-mv__text.hair
{
    top: 83.88%;
    left: clamp(10px, 10px + (100vw - 1024px) * .3819444444, 230px);
}
.p-mv__text.eye
{
    top: 38.88%;
    right: clamp(15px, 15px + (100vw - 1024px) * .4600694444, 280px);
}
.p-mv__text.nail
{
    top: 53.11%;
    right: clamp(10px, 10px + (100vw - 1024px) * .0694444444, 50px);
}
.p-mv__slide
{
    aspect-ratio: 3/2;
}
.p-mv__slide img
{
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
}

.p-menu-area__top
{
    position: relative;
    z-index: 1;

    margin-bottom: var(--m150);
}
.p-menu-area__top::before,
.p-menu-area__top::after
{
    position: absolute;
    top: 50%;

    display: inline-block;

    content: '';
    transform: translateY(-50%);

    background-repeat: no-repeat;
    background-size: cover;
}
.p-menu-area__top::before
{
    left: 0;

    width: min(16.568vw, 264px);

    background-image: url(../images/common/texture_l.svg);
    background-position: center left;

    aspect-ratio: 288/768;
}
.p-menu-area__top::after
{
    right: 0;

    width: min(18vw, 288px);

    background-image: url(../images/common/texture_r.svg);
    background-position: center right;

    aspect-ratio: 264/870;
}
.p-menu-area__top .c-title
{
    position: relative;
    z-index: 1;

    max-width: -moz-fit-content;

    max-width: fit-content;
    margin-right: auto;
    margin-left: auto;
}
.p-menu-area__top .c-title::after
{
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;

    display: inline-block;

    width: min(17.81vw, 285px);

    content: '';
    transform: translate(50%, -90%);

    background: url(../images/common/texture01.svg) center/cover no-repeat;

    aspect-ratio: 435/363;
}
.p-menu-area__top .c-text
{
    position: relative;
    z-index: 1;

    max-width: -moz-fit-content;

    max-width: fit-content;
    margin-right: auto;
    margin-left: auto;
}
.p-menu-area__top .c-text::after
{
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;

    display: inline-block;

    width: min(17.81vw, 285px);

    content: '';
    transform: translate(-80%, 40%);

    background: url(../images/common/texture02.svg) center/cover no-repeat;

    aspect-ratio: 285/312;
}

.p-menu-seciton
{
    position: relative;
    z-index: 1;

    display: flex;

    margin-bottom: var(--m150);

    flex-wrap: wrap;
}
.p-menu-seciton::before
{
    position: absolute;
    z-index: -1;
    top: 0;

    display: inline-block;

    width: 37.5%;

    content: '';

    aspect-ratio: 594/422;
}
.p-menu-seciton__title
{
    position: relative;
    z-index: 30;

    width: 100%;
}
.p-menu-seciton__title-inner
{
    transform: translateY(30%);
}
.p-menu-seciton__title__en
{
    font-size: var(--fs28_50);
    line-height: 1;

    display: flex;

    letter-spacing: .5em;

    color: var(--brown03);

    align-items: center;
    grid-gap: var(--m30);
}
.p-menu-seciton__title__en::before
{
    display: inline-block;

    width: var(--fs26_30);

    content: '';

    background-image: url(../images/common/icon_deco.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    aspect-ratio: 31/14;
}
.p-menu-seciton__title__jp
{
    font-size: var(--fs16_20);

    display: block;

    margin-top: var(--m20);
    margin-left: calc(var(--m30) + var(--m30));

    color: var(--brown04);
}
.p-menu-seciton__text-area
{
    position: relative;
    z-index: 10;

    width: 50%;

    transform: translateY(10%);
}
.p-menu-seciton__main-image
{
    position: relative;
    z-index: 1;

    overflow: hidden;

    width: 62.5%;
    max-height: 685px;

    aspect-ratio: 100/66;
}
.p-menu-seciton__main-image::before
{
    position: absolute;
    z-index: 1;
    top: 0;

    display: inline-block;

    width: 67.3%;
    height: 100%;

    content: '';
}
.p-menu-seciton__main-image-inner
{
    display: block;

    width: 100%;
    height: 100%;
}
.p-menu-seciton__main-image img
{
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
}
.p-menu-seciton__image-area
{
    position: relative;
    z-index: 1;

    width: 100%;
}
.p-menu-seciton__image-area::before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    display: inline-block;

    width: 100%;
    height: 100%;

    content: '';
}
.p-menu-seciton__image-area-inner
{
    display: flex;

    margin-bottom: calc(min(5%, 80px) * -1);

    transform: translateY(-50%);

    flex-wrap: wrap;
    justify-content: space-between;
}
.p-menu-seciton__image
{
    width: 22.525%;
}
.p-menu-seciton__image-caption
{
    font-size: var(--fs14_16);

    color: var(--brown04);
}
.p-menu-seciton:nth-of-type(odd) .p-menu-seciton__main-image
{
    margin-left: -12.5%;
}
.p-menu-seciton:nth-of-type(odd) .p-menu-seciton__main-image::before
{
    left: 0;

    background: linear-gradient(to right, var(--mainwhite), rgba(255, 255, 255, 0));
}
.p-menu-seciton:nth-of-type(even) .p-menu-seciton__title
{
    order: 1;
}
.p-menu-seciton:nth-of-type(even) .p-menu-seciton__text-area
{
    order: 3;
}
.p-menu-seciton:nth-of-type(even) .p-menu-seciton__main-image
{
    margin-right: -12.5%;

    order: 2;
}
.p-menu-seciton:nth-of-type(even) .p-menu-seciton__main-image::before
{
    right: 0;

    background: linear-gradient(to left, var(--mainwhite), rgba(255, 255, 255, 0));
}
.p-menu-seciton:nth-of-type(even) .p-menu-seciton__image-area
{
    order: 4;
}
.p-menu-seciton#nail::before
{
    right: 0;

    background: linear-gradient(to left, var(--brown05), rgba(232, 220, 217, 0));
}
.p-menu-seciton#nail .p-menu-seciton__image-area::before
{
    background-color: var(--brown06);
}
.p-menu-seciton#eye::before
{
    left: 0;

    background: linear-gradient(to right, var(--brown07), rgba(222, 215, 209, 0));
}
.p-menu-seciton#eye .p-menu-seciton__title__en
{
    color: var(--brown04);
}
.p-menu-seciton#eye .p-menu-seciton__title__en::before
{
    background-image: url(../images/common/icon_deco02.svg);
}
.p-menu-seciton#eye .p-menu-seciton__image-area::before
{
    background-color: var(--gray02);
}
.p-menu-seciton#esthe::before
{
    right: 0;

    background: linear-gradient(to left, var(--brown08), rgba(242, 228, 192, 0));
}
.p-menu-seciton#esthe .p-menu-seciton__title__en
{
    color: var(--brown11);
}
.p-menu-seciton#esthe .p-menu-seciton__title__en::before
{
    background-image: url(../images/common/icon_deco03.svg);
}
.p-menu-seciton#esthe .p-menu-seciton__image-area::before
{
    background-color: var(--brown09);
}

.p-shop
{
    position: relative;
    z-index: 1;

    padding-bottom: var(--m200);
}
.p-shop::before
{
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;

    display: inline-block;

    width: 100%;
    height: calc(100% - var(--fs18_24) - var(--m30) - var(--fs28_50) / 2);

    content: '';

    background-color: var(--brown10);
}
.p-shop .c-text
{
    margin-bottom: var(--m150);
}
.p-shop-section:not(:last-of-type)
{
    margin-bottom: var(--m190);
}
.p-shop-section#takasaki .p-shop__text-area
{
    letter-spacing: .05em;
}
.p-shop-section#takasaki .p-shop__insta
{
    margin-right: var(--m100);
}
.p-shop__gallery
{
    display: flex;

    margin-bottom: var(--m45);

    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: var(--m70) 0;
}
.p-shop__gallery-main
{
    overflow: hidden;

    width: 55.83%;
}
.p-shop__gallery-thumbs
{
    width: 38.33%;
}
.p-shop__main-slide img
{
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
}
.p-shop__thumbs-inner
{
    display: flex;

    flex-wrap: wrap;
    grid-gap: var(--fs14_20) 4.505%;
}
.p-shop__thumbs-slide
{
    position: relative;
    z-index: 1;

    width: 30.33%;
}
.p-shop__thumbs-slide img
{
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
}
.p-shop__thumbs-slide.is-active::after
{
    position: absolute;
    top: 0;
    left: 0;

    display: inline-block;

    width: 100%;
    height: 100%;

    content: '';

    box-shadow: inset 0 0 0 6px var(--maincol);
}
.p-shop__info
{
    display: flex;

    margin-bottom: var(--m80);

    flex-wrap: wrap;
    align-items: center;
    grid-gap: var(--m40) var(--m20);
}
.p-shop__info .c-button
{
    width: 100%;
    max-width: 420px;
}
.p-shop__name
{
    font-size: var(--fs18_24);
    font-weight: bold;

    margin-bottom: var(--m16);

    color: var(--black01);
}
.p-shop__add
{
    font-size: var(--fs14_18);

    margin-bottom: var(--m8);
}
.p-shop__hours
{
    font-size: var(--fs14_16);

    margin-bottom: var(--m16);
}
.p-shop__tel
{
    font-size: var(--fs16_18);
    font-weight: bold;
}
.p-shop__insta
{
    display: flex;

    align-items: center;
    grid-gap: var(--m8);
}
.p-shop__insta-text
{
    width: clamp(50px, 6vw, 80px);
}
.p-shop__insta-icon
{
    width: clamp(36px, 3.75vw, 50px);
}
.p-shop__insta-icon a
{
  display: block;
  background-color: var(--mainwhite);
  border: 2px solid var(--maincol);
  padding: 5px;
  border-radius: 10px;
  transition: all .5s;
}
.p-shop__map-inner
{
    margin-bottom: var(--m30);

    aspect-ratio: 3/1;
}
.p-shop__map-inner iframe
{
            filter: grayscale(80%);
    -webkit-filter: grayscale(80%);
}
.p-shop__map-text
{
    font-size: var(--fs14_16);

    padding: .8em;

    text-align: center;

    border: var(--maincol) 1px solid;
}

/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (min-width: 1334px)
{
  /* .p-shop__insta-icon a:hover{
    background-color: var(--maincol);
  } */
}
@media all and (min-width: 1334px)
{
    .p-menu-seciton:nth-of-type(odd) .p-menu-seciton__text-area
    {
        max-width: 600px;
        margin-left: auto;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__title
    {
        width: 50%;
        margin-left: 50%;
        padding-left: 8.5%;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__title-inner
    {
        margin-left: 0;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__text-area
    {
        max-width: 460px;
        margin-right: auto;
        margin-left: 8.5%;
    }
}
@media all and (max-width: 1333px)
{
    .p-menu-seciton:nth-of-type(odd) .p-menu-seciton__text-area
    {
        padding-left: 5%;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__text-area
    {
        padding-right: 5%;
    }
}
@media all and (max-width: 1024px)
{
    .p-mv
    {
        padding-bottom: var(--m150);
    }
    .p-mv .c-cv-area
    {
        width: 47%;
    }
    .p-mv .c-cv-menu .c-button,
    .p-mv .c-cv-menu .c-map-bt
    {
        width: 100%;
    }
    .p-menu-seciton__image-area-inner
    {
        transform: translateY(calc(clamp(10px, 10px + (100vw - 600px) * .2122641509, 100px) * -1));
    }
    .p-shop__map-inner
    {
        aspect-ratio: 2/1;
    }
}
@media all and (max-width: 767px)
{
    .p-mv
    {
        aspect-ratio: unset;
    }
    .p-mv__main-photo
    {
        width: 75%;
    }
    .p-mv__logo
    {
        width: 60%;
        max-width: unset;
    }
    .p-mv__rotate
    {
        transform: translate(70%, -80%);
    }
    .p-mv .c-text
    {
        width: 90%;
        max-width: unset;
    }
    .p-mv .c-cv-area
    {
        width: 90%;
        max-width: unset;
    }
    .p-mv__photo
    {
        display: none;
    }
    .p-mv__text.salon
    {
        top: unset;
        bottom: 30%;
        left: 3%;
    }
    .p-mv__text.hair
    {
        top: 90%;
    }
    .p-mv__text.eye
    {
        top: 3%;
        right: 20%;
    }
    .p-mv__text.nail
    {
        top: unset;
        bottom: 10%;
    }
    .p-menu-seciton__title-inner
    {
        padding-top: var(--m30);

        transform: unset;
    }
    .p-menu-seciton__text-area
    {
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .p-menu-seciton__main-image
    {
        width: 100%;
    }
    .p-menu-seciton__image-area-inner
    {
        margin-bottom: 0;

        transform: translateY(-10%);
    }
    .p-menu-seciton__image
    {
        width: 48%;
    }
    .p-menu-seciton:nth-of-type(odd) .p-menu-seciton__main-image
    {
        margin: 0;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__text-area
    {
        order: 2;
    }
    .p-menu-seciton:nth-of-type(even) .p-menu-seciton__main-image
    {
        margin: 0;

        order: 3;
    }
    .p-menu-seciton#eye::before
    {
        right: 0;
        left: unset;

        background: linear-gradient(to left, var(--brown07), rgba(222, 215, 209, 0));
    }
    .p-shop-section#takasaki .p-shop__text-area
    {
        letter-spacing: unset;
    }
    .p-shop-section#takasaki .p-shop__insta
    {
        margin-right: 0;
    }
    .p-shop__gallery-main
    {
        width: 100%;
    }
    .p-shop__gallery-thumbs
    {
        overflow: scroll;

        width: 100%;

        grid-gap: var(--fs14_20) 4%;
    }
    .p-shop__thumbs-inner
    {
        flex-wrap: nowrap;
    }
    .p-shop__thumbs-slide
    {
        width: 22%;
        min-width: 100px;
    }
    .p-shop__thumbs-slide.is-active::after
    {
        box-shadow: inset 0 0 0 3px var(--maincol);
    }
    .p-shop__info
    {
        justify-content: center;
    }
    .p-shop .c-button
    {
        max-width: calc(100% - 100px);
    }
    .p-shop__map-inner
    {
        margin-bottom: var(--m30);

        aspect-ratio: 1/1;
    }
    .p-shop__map-inner iframe
    {
                filter: grayscale(80%);
        -webkit-filter: grayscale(80%);
    }
    .p-shop__map-text
    {
        font-size: var(--fs14_16);

        padding: .8em;

        text-align: center;

        border: var(--maincol) 1px solid;
    }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 620px)
{
    .c-text-line
    {
        line-height: 2;
    }
}