@charset "UTF-8";

/* ===========================
main
============================*/
/* sectionSalon */
.mainVisual {
    width: 82.6%;
    margin-top: 20px;
    border-radius: 0px 1px 1px 0px;
}

/* 画像ZoomInアニメ */
.mainVisual__outer {
    overflow: hidden;
}

.mainVisual__outer img {
    /* img要素に以下のアニメーションプロパティが適用されます: */
    animation: zoom-in 4s linear 0s 1 normal both;
    /*
        - zoom-in: 適用するアニメーションの名前。
        - 10s: アニメーションの持続時間は10秒。
        - linear: アニメーションは一定の速度で進行します。
        - 0s: アニメーションが開始するまでの遅延時間はなし。
        - 1: アニメーションは1回再生されます。
        - normal: アニメーションは正方向に再生されます。
        - both: アニメーションのプロパティがアニメーション中および終了後も適用されます。
    */
}

.topic__outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    margin: 70px 4.2% 0;
}

.topic {
    text-align: center;
    font-family: Marcellus;
    font-size: 2.2rem;
    letter-spacing: 4.4px;
}

.mainCaption {
    display: flex;
}

.mainCaption__txt {
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    letter-spacing: 1.7px;
    display: flex;
}

.mainCaption__txt--small {
    font-size: 1.5rem;
    letter-spacing: 1.5px;
}   

.salon__desk {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 100px 4.2% 80px;
}

.section__title {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 3.4px;
}

.salon__desk p {
    font-size: 1.6rem;
    letter-spacing: 0.96px;
    margin-top: 30px;
}

.salon__desk p:nth-child(3) {
    margin-top: 16px;
}

/* sectionSalon pc*/
@media screen and (min-width:1025px) {
    .main__outer {
        display: flex;
        justify-content: space-between;
    }
    
    .mainVisual {
        width: 91%;
        margin-top: 0;
    }

    .topic {
        font-size: 3.2rem;
        letter-spacing: 6.4px;
    }
    
    .topic__outer {
        gap: 70px;
        width: 39.6%;
        margin: 30.4% 5.97% auto auto;
        justify-content: flex-start;
    }

    .mainCaption {
        display: flex;
    }

    .mainCaption__txt--small,
    .mainCaption__txt span {
        display: inline;
    }
    
    .salon__desk {
        align-items: flex-start;
        margin: 180px auto 172px;
        width: 76.1%;
    }
    
    .section__title {
        font-size: 2rem;
        letter-spacing: 4px;
    }
    
    .salon__desk p {
        margin-top: 40px;
    }
    
    .salon__desk p:nth-child(3) {
        margin-top: 0;
    }
}
/* pc 1025px */

/* sectionSalon tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .main__outer {
            display: flex;
            justify-content: space-between;
        }
        
        .mainVisual {
            width: 86.1%;
        }

        .topic__outer {
            margin: 0 4.2% 0 0;
        }

        .topic {
            margin-top: 172px;
        }

        .mainCaption {
            width: 210px;
            justify-content: flex-end;
        }

        .mainCaption__txt br {
            display: inline;
        }

        .salon__desk {
            align-items: flex-start;
            margin: 170px auto 120px;
            width: 78%;
        }
}
/* tb 768px-1024px */

/* sectionTherapy */
.section--therapy {
    background-color: var(--primary-beigeSalon);
    padding-bottom: 80px;
}

.section--therapy h2 {
    text-align: center;
    font-family: Marcellus;
    font-size: 2.2rem;
    letter-spacing: 4.4px;
    padding-top: 92px;
}

.section--ibtt,
.section--clay,
.section--flower {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.en__title {
    color: var(--primary-blackLow);
    font-family: Marcellus;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 3.2px;
}

.img__link {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ibttImg {
    width: 91.4%;
    border-radius: 1px;
    margin-top: 30px;
}

.clayImg,
.flowerImg {
    width: 74.6%;
    margin-top: 30px;
}

.section--ibtt p,
.section--clay p,
.section--flower p {
    width: 91.4%;
    font-size: 1.6rem;
    letter-spacing: 0.96px;
    margin-top: 30px;
}

.btn__link {
    display: inline-flex;
    padding: 4px 10px;
    align-items: center;
    border-radius: 1px;
    border-bottom: 0.6px solid var(--primary-blackLow);
    margin-top: 20px;
}

.btn__link a {
    font-family: Marcellus;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 1.6px;
}

.btn__link:hover,
.link__outer:hover {
    color: var(--primary-pink);
    border-bottom: 0.6px solid var(--primary-pink);
}

/* sectionTherapy pc*/
@media screen and (min-width:1025px) {
    .section--therapy {
        padding-bottom: 226px;
    }
    
    .section--therapy h2 {
        font-size: 3.2rem;
        letter-spacing: 6.4px;
        padding-top: 167px;
    }
    
    .section--ibtt {
        margin-top: 180px;
    }

    .section--ibtt .img__link {
        width: 100%;
    }

    .section--clay,
    .section--flower {
        margin-top: 0;
        position: relative;
        width: 38.9%;
    }

    .cfTherapy__outer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 214px;
      }

    .ibttImg,
    .section--ibtt p {
        width: 62.5%;
    }
    
    .clayImg,
    .flowerImg,
    .section--clay p,
    .section--flower p {
        width: 80.3%;
    }

    .section--ibtt {
        position: relative;
    }

    .btn__link--ibtt {
        position: absolute;
        right: 19%;
        bottom: -5%;
    }

    .btn__link--clay,
    .btn__link--flower {
        position: absolute;
        right: 9.8%;
        bottom: -8%;
    }
} /* pc 1025px */

/* sectionSalon tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .section--therapy {
            padding-bottom: 164px;
        }

        .section--therapy h2 {
            margin-top: 120px
        }

        .section--ibtt {
            position: relative;
        }
        
        .section--ibtt .img__link {
            width: 100%;
        }

        .ibttImg {
            width: 76.6%;
        }

        .section--ibtt p {
            width: 76.5%;
        }

        .btn__link--ibtt {
            position: absolute;
            right: 12.1%;
            bottom: -7%;
        }

        .cfTherapy__outer {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 184px;
            gap: 50px;
        }

        .section--clay, 
        .section--flower {
            margin-top: 0;
            position: relative;
            width: 37.1%;
        }

        .clayImg, .flowerImg {
            width: 100%;
        }

        .section--clay p, 
        .section--flower p {
            width: 100%;
        }

        .btn__link--clay, 
        .btn__link--flower {
            position: absolute;
            right: 0%;
            bottom: -8.4%;
        }
}
/* tb 768px-1024px */

/* sectionMenu */
.section--menu {
    background: var(--primary-beige); 
    padding-top: 72px;
    padding-bottom: 50px;
}

.section__title--menu {
    font-family: Marcellus;
    font-weight: 400;
}

.salonImg,
.tourImg {
    display: flex;
    width: 89.6%;
    margin-top: 100px;
    position: relative;
}

.tourImg {
    margin: 192px 0 0 auto;
    border-radius: 1px 0px 0px 1px;
}

.salonImg {
    border-radius: 0px 1px 1px 0px;
}

.menu__item--01,
.menu__item--02 {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    position: absolute;
}

.menu__item--01 {
    align-items: flex-end;
    right: 10.5%;
}

.menu__item--02 {
    align-items: flex-start;
    left: 10.2%;
}

.menu__title {
    font-family: "Noto Serif JP";
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1.7px;
}

.link__outer {
    display: flex;
    padding: 0px 4px;
    align-items: center;
    border-radius: 1px;
    border-bottom: 0.6px solid var(--primary-blackLow);
}

.link__outer {
    width: 145px;;
}

.menu__link {
    font-family: Marcellus;
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 1.5px;
}

/* sectionMenu pc */
@media screen and (min-width:1025px) {
    .section--menu {
        padding-top: 170px;
        padding-bottom: 310px;
    }

    .section__title--menu {
        font-size: 3.2rem;
        letter-spacing: 6.4px;
        line-height: 1.5;
    }

    .section--menu li {
        display: flex;
        align-items: center;
    }

    .section--menu li:nth-of-type(1) {
        margin-top: 200px;
    }

    .section--menu li:nth-of-type(2) {
        margin-top: 190px;
        flex-direction: row-reverse;
    }

    .salonImg,
    .tourImg {
        width: 100%;
        margin-top: 0;
        display: block;
    }

    .tourImg {
        margin: 0 0 0 82px;
        width: 91.9%;
    }

    .menu__item--01,
    .menu__item--02 {
        gap: 22px;
        margin-top: 0;
    }

    .menu__item--01 {
        align-items: flex-start;
        margin-left: 82px;
        position: static;
    }

    .menu__item--02 {
        align-items: flex-end;
        position: static;
    }

    .menu__title {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .link__outer--01,
    .link__outer--02 {
        width: auto;
        padding: 4px 10px;
    }
}
/* pc 1025px */

/* sectionSalon tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .section--menu {
            padding-top: 120px;
            padding-bottom: 170px;
        }

        .section__title--menu {
            font-size: 2.2rem;
            letter-spacing: 3.4px;
            line-height: 1.5;
        }

        .section--menu li {
            display: flex;
            align-items: center;
        }
    
        .section--menu li:nth-of-type(1) {
            margin-top: 100px;
        }
    
        .section--menu li:nth-of-type(2) {
            margin-top: 106px;
            flex-direction: row-reverse;
        }

        .tourMenuImg__link {
            display: flex;
            justify-content: flex-end;
        }
    
        .salonImg, 
        .tourImg {
            width: 83%;
            margin-top: 0;
            display: block;
        }
    
        .tourImg {
            margin: 0 0 0 50px;
            width: 87.2%;
        }
    
        .menu__item--01,
        .menu__item--02 {
            margin-top: 0;
        }
    
        .menu__item--01 {
            align-items: flex-start;
            margin-right: 65px;
            position: static;
        }
    
        .menu__item--02 {
            align-items: flex-end;
            position: static;
            margin-left: 50px;
        }
    
        .menu__title {
            font-size: 1.6rem;
            letter-spacing: 1.7px;
            width: 171px;
        }

        .menu__title--02 {    
            width: 212px;
            text-align: end;
        }
}
/* tb 768px-1024px */


/* else カスタムブレイクポイント */
@media (max-width: 350px) {
    .section--therapy h2 {
        font-size: 2rem;
        letter-spacing: 3.4px;
    }
}

/* sectionSalon カスタムブレイクポイント */
@media (min-width: 1025px) and (max-width: 1388px) {
    .topic__outer {
        width: 57.6%;
        margin: 30.4% 5% auto auto;
    }
    .mainCaption {
        display: flex;
        justify-content: flex-end;
    }

    .mainCaption__txt span {
        display: flex;
        flex-direction: column;
    }

    .mainCaption__txt .spBr {
        display: block;
    }

    .mainCaption__txt--small {
        display: flex;
    }
} 

/* sectionSalon カスタムブレイクポイント */
@media (min-width: 1025px) and (max-width: 1280px) {
    .menuImg__link {
        width: 69.6%;
    }

    .tourMenuImg__link {
        width: 75.7%;
    }
}