@charset "utf-8";

/* ============ */
/* Main Image */
.main-image__container {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.main-image__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ふよふよ */

    .wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        /* width: min(89.8vw,400px); */
        width: min(89.8vw,375px);
        height: auto;
    }

    .circle{
        background-image:url(../img/mainVisual.webp);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        /* border-radius: 50%; */
        padding-top: 90%;
        width: 80%;
    
        animation-name: puyopuyo;
        animation-duration: 20.0s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;

        animation: puyopuyo 17s ease-in-out infinite alternate;
    }

    @keyframes puyopuyo{  
        0% {
        border-radius: 65% 35% 57% 43% / 57% 45% 55% 43%;
        }
        14% {
            border-radius: 37% 63% 57% 43% / 46% 63% 37% 54%;
        }
        28% {
            border-radius: 57% 43% 35% 65% / 46% 73% 27% 54%;
        }
        42% {
            border-radius: 64% 36% 58% 42% / 64% 35% 65% 36%;
        }
        56% {
            border-radius: 64% 36% 70% 30% / 73% 47% 53% 27%;
        }
        70% {
            border-radius: 47% 53% 31% 69% / 53% 71% 29% 47%;
        }
        84% {
            border-radius: 43% 57% 53% 47% / 32% 64% 36% 68%;
        }
        100% {
            border-radius: 65% 35% 57% 43% / 57% 45% 55% 43%;
        }
        
        /* 0% {
            border-radius: 65% 35% 65% 35% / 60% 40% 60% 40%;
        }
        14% {
            border-radius: 30% 70% 70% 30% / 40% 60% 40% 60%;
        }
        28% {
            border-radius: 70% 30% 25% 75% / 40% 75% 25% 60%;
        }
        42% {
            border-radius: 75% 25% 70% 30% / 70% 25% 75% 30%;
        }
        56% {
            border-radius: 70% 30% 80% 20% / 80% 35% 65% 20%;
        }
        70% {
            border-radius: 35% 65% 20% 80% / 45% 80% 20% 55%;
        }
        84% {
            border-radius: 35% 65% 65% 35% / 20% 75% 25% 80%;
        }
        100% {
            border-radius: 65% 35% 65% 35% / 60% 40% 60% 40%;
        } */
    }

/* ======
article_header
========= */

h1 {
    margin: 0 auto;
}

.topLOGO {
    display: block;
    width: 198px;
    height: auto;
    margin: 81px auto 111px;
}

/* =======
about
======== */
.top_about {
    background-color: var(--primary-white);
    padding: 0 min(9.6vw,36px);
}

.about_title {
    margin-top: 33px;
    color: var(--pale-blue);
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.42em;
}

.about_text {
    margin-top: 33px;
    color: var(--pale-blue);
    /* width: 80vw;
    max-width: 300px; */
    line-height: 1.78;
    letter-spacing: 2.24px;
}


/* ===============
nail hairset access共通
================== */
.top_nail_contents,.top_hair_contents,.top_access_contents{
    padding-left:min(9.6vw,36px);
}

.top_section_ph{
    margin-top: 70px;
}

.top_section_title {
    margin-top: 50px;
    padding: 0 min(9.6vw,36px);
    color: var(--navy);
    font-family: "Quicksand", sans-serif;
    line-height: 1.25;
    letter-spacing: 0.16em;
}

.top_section_txt {
    margin-top: 22px;
    padding: 0 min(9.6vw,36px);
    color: var(--blue-gray);
    line-height: 1.857;
    letter-spacing: 0.16em;
}

/* =文字の上に写真重ねたい　わからない= */

.topSamplePhoto {
    margin-top: 80px;
}

.detail_flowing {
    /* margin-bottom: calc(-400px - 25vw); */
    margin-bottom: calc(-193px - 30vw);
    color: var(--navy);
}

.flowNail {
    color: #F1DFE0;
}

.flowHair {
    color: #E5CCE4;
}

.flowing{
    align-items: center;
    display: flex;
    overflow:hidden;
    width: 100%;
    white-space:nowrap;
    /* margin-top: 11vw; */
    margin-top: min(50px,20vw);
}


.FLOW1 {
  animation: flowing 60s linear infinite;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}

.FLOW2 {
  animation: flowing 100s linear infinite reverse;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}

.FLOW3 {
  animation: flowing 100s linear infinite;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}

.flowing ul li{
    font-family: Cormorant; 
    font-size: clamp(7rem, 15.7329rem + -46.5753vw, 0.625rem);
    display: inline-block;
    padding-right: 10px;
    line-height: 1;
}
@keyframes flowing {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}



.slick-slide img {
    max-width: 300px;
    width: 80vw;
    /* aspect-ratio: 1/1; */
    margin: 0 auto;
}

@media screen and (min-width: 400px) {
    .detail_flowing {
        margin-bottom: calc(-193px - 24vw);
    }
}

@media screen and (min-width: 600px) {
    .detail_flowing {
        margin-bottom: calc(-163px - 20vw);
    }
}

@media screen and (min-width: 768px) {
    .detail_flowing {
        margin-bottom: max(calc(-163px - 20vw), -450px);
    }
}

@media screen and (min-width: 900px) {
    .detail_carousel {
    margin-top: min(90px, 5vw);
    }
}

@media screen and (min-width: 1200px) {
    .detail_carousel {
    margin-top: min(160px, 9vw);
    }
}
/* == */

/* ===============
nail 限定 
================== */


/* ===============
hair set限定 
================== */



/* ===============
access
================== */


.salon__image {
    margin: 75px auto 0;
}

.salon__name, .salon__japanese-name{
    margin-left: min(5.33vw,20px);
}

.salon__name {
    margin-top: 55px;
    color: var(--navy);
    font-family: "Cormorant", serif;
    font-size: 2.2rem;
    font-weight: 700;
}

.salon__japanese-name {
    margin-top: 5px;
    color: var(--navy);
    font-family: "Quicksand", sans-serif;
    font-size: 1.8rem;
}

.access_table {
    margin: 0 min(4.26vw,16px) 0;
    padding-bottom: 60px;
    border-bottom: 1px solid #C8C5D7;
}

.accessTitle{
    margin: 26px 0 0 min(5.33vw,20px);
    color: var(--navy);
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.address__map {
    margin-top: 33px;
    position: relative;
    width: 100%;
    padding-top: 75%; /* = height ÷ width × 100 */
}

.map {
  filter: grayscale(100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.address__text {
    margin:15px 0 0 min(5.33vw,20px);
    color: var(--pale-blue);
    font-family: Quicksand, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.64;
    letter-spacing: 0.11em;
}

/* お問い合わせ */
.contact__label {
    margin: 15px 0 0 min(5.33vw,20px);
    color: var(--navy);
    font-family: "Zen Kaku Gothic New";
    font-size: 1.8rem;
    line-height: 1.278;
    letter-spacing: 0.017em;
}

.contact__label--insta {
    margin: 43px 0 0 min(5.33vw,20px);

}

.contact__value {
    margin: 3px 0 0 min(5.33vw,20px);
    color: var(--pale-blue);
    font-family: Quicksand, sans-serif;
    font-size: 1.4rem;
    line-height: 1.652;
    letter-spacing: 0.11em;
    /* text-decoration-line: underline; */

    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact__value span {
    color: var(--navy);
}

.contact__instagram-label {
    display: inline-block;
    width: 120px;
}

/* .contact__instagram-link,.contact__LINE-link {
    text-decoration: none;
} */

.contact__instagram-link:hover,
.contact__LINE-link:hover 
{
    transition:  0.5s ease;
    text-decoration:underline solid #E791E1 1px;
    color:  #E791E1 ;
}

/* 営業時間 */
.hours__nail ,.hours__hairset{
    margin: 15px 0 0 min(5.33vw,20px);
    color: var(--pale-blue);
    font-family: Quicksand, sans-serif;
    line-height: 1.642;
    letter-spacing: 0.11em;
}

.hours__hairset {
    margin-top: 60px;
}

.hours__subtitle {
    font-size: 2.2rem;
    /* text-decoration-line: underline; */
}

.hours__note {
    margin-top: 8px;
    font-size: 1.4rem;
}

.second {
    margin-top: 12px;
}

.hours__text {
    color: var(--pale-blue, #6F84C3);
    font-size: 1.4rem;
}

.hours__text_PS {
    margin-top:min(4.26vw,16px);

}



/* 最寄駅 */
.nearest-station__info {
    margin: 15px min(5.33vw,20px) 0 min(5.33vw,20px);
    color: var(--pale-blue);
    font-family: Quicksand, sans-serif;
    font-size: 1.4rem;
    line-height: 1.652;
    letter-spacing: 0.11em;
}

.station__title {
    font-size: 1.6rem;
    /* text-decoration: underline dotted #C8C5D7 1px; */
}

.nearest-station__text {
    margin-top: 15px;
}


/* 席数 */
.seats__list {
    margin: 15px min(5.33vw,20px) 0 min(5.33vw,20px);
    color: var(--pale-blue);
    font-family: Quicksand, sans-serif;
    font-size: 1.4rem;
    line-height: 1.652;
    letter-spacing: 0.11em;
}

.seats__item:last-of-type {
    margin-top: 22px;
}

.seats__label {
    font-size: 1.6rem;
    /* text-decoration: underline dotted #C8C5D7 1px; */

}

.seats__value {
    margin-top: 7px;
}