@charset "utf-8";

/*------------------
共通部分
--------------------*/

*{
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
}

body{
    font-family: "Sawarabi Mincho", serif;
    font-size: 3.7vw;
    font-weight: 400;
    font-style: normal;
    color: #000;
    line-height: 1.5;
}

img{
    max-width: 100%;
    height: auto;
}

li{
    list-style-type: none;
}

span{
    display: block;
}






/*------------------
HEADER
--------------------*/

/*----------NAV MENU----------*/

.nav-menu{
    background-color: rgba(255, 255, 255, 0.95);
    padding-bottom: 25vw;
    display: none;
    max-width: 100%;
    position: relative;
    z-index: 100;
    position: fixed;
}


.nav-list{
    background-color: rgba(255, 232, 227, 0.56);
    max-width: 80%;
    padding: 9vw 39vw 14vw 13vw;
}



.nav-menu-ul{
    width: 60vw;
}

.nav-item{
    color: #AD9463;
    font-size: 4.27vw;
    margin-bottom: 3vw;
}

.nav-title{
    color: #AD9463;
    font-size: 6.4vw;
    margin-bottom: 9vw;
}

.nav-item-list{
    margin-bottom: 8vw;
    
}

.nav-logo-pc{
    display: none;
}

.nav-logo-sp{
    max-width: 40%;
    padding-top: 60px;
}

.nav-logo{
    margin-top: 0px;
    text-align: center;

}

.cross-button{
    color: #8E7B57;
    font-size: 30px;
    margin:21px 4% 0 0;
}

.nav-menu-inner{
    display: flex;
    justify-content: space-between;
    background-color: rgba(ff, ff, ff, 1);
    
}

.nav-menu{
    display: none !important;
}
.nav-menu.open{
    display: block !important;
}

.hamburger-btn.open .hamburger-line:nth-of-type(1) {
    transform: translateY(0.8rem) rotate(-45deg);
}
.hamburger-btn.open .hamburger-line:nth-of-type(2) {
    transform: translateY(-0.6rem) rotate(45deg);
}  

/*----------NAV MENU / PC----------*/

@media screen and (min-width: 769px){

    .nav-logo-pc{
        display: inline-block;
        width: 14.4vw;
        position: absolute;
        left: 57.2vw;
        top: 23vw;
    }

    .nav-logo{
        display: inline-block;
        
    }

    .nav-logo-sp{
        display: none;
    }

    .nav-list{
        width: 28.3vw;
        max-width: 100%;
    }

    .nav-menu-nav{
        padding-right: 12.1vw;
        padding-left: 5.6vw;
        width: 28.3vw;
    }

    .nav-menu-inner{
        text-align: center;
        background-color: rgba(255, 232, 227, 0.56);
        
    }

    .nav-list{
        background-color: rgba(255, 232, 227, 0.56);
        width: 28.3vw;
        padding: 4.5vw 0 12vw 0;
        
    }

    .nav-menu-nav{
        margin: 0 auto;  
    }

    .nav-menu-ul{
        width: fit-content;
        display:table;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-item-list{
        width: 10vw;
        margin-top: 0;
        margin-bottom: 2.8vw;
        height: 1.1vw;
    }

    .nav-item{
        font-size: 1.1vw;
        
    }

    .nav-title{
        color: #AD9463;
        font-size: 2.2vw;
        margin-bottom: 0;
        width: fit-content;
        padding-left: 5.6vw;
        }

    .nav-menu{
        display: flex;
        position: relative;
        position: fixed;
        padding-bottom: 0;
        height: 100vh;
        width: 100%;
        z-index: 100;
        height: 58vw;
    }
    

    .cross-button{
        position: absolute;
        right: 1.6vw;
        top: 1.6vw;
        color: #AD9463;
    }

    .nav-menu{
        display: none !important;
    }
    .nav-menu.open{
        display: flex !important;
    }

}

/*----------HEADER----------*/

.header-inner{
    background-image: url(../images/background5-sp.jpg);
    background-position: left -260px top 0;
    position: relative;
    height: 156vw;
}

.header-logo-pc{
    display: none;
}

.header-logo{
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: center;
    animation-name: fadein;
    animation-duration: 4s;
}
@keyframes fadein{
    from{
        opacity: 0;
        transform: translateY(-20px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.header-logo-sp{
    width: 39vw;
    padding-top: 5%;
    margin-bottom: 5px;
}

.hamburger-btn{
    width: 7vw;
    height: 20px;
    position: fixed;
    right: 5vw;
    top: 6.8vw;
    z-index: 120;
}

.hamburger-line{
    background-color: #AD9463;
    max-width: 38px;
    height: 2px;
    margin-top: 12px;
    transition: all 0.5s;
}


.header-read-wrapper{
    position: relative;
}

.header-read{
    font-family: "Adamina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(100vw / 375* 30);
    line-height: 1.5;
    margin-left: 5.2%;
    position: absolute;
    top: -5.5px;
    z-index: 4;
    animation-name: fadein;
    animation-duration: 7.4s;
}
@keyframes fadein{
    from{
        opacity: 0;
        transform: translateY(0);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.header-read-txt{
    background: linear-gradient(190deg, #A3906B 6.3%, #CFB98E 50.2%, #A3906B 80.5%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-read-shadow{
    font-family: "Adamina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(100vw / 375* 30);
    line-height: 1.5;
    margin-left: 6.2%;
    color: rgba(188, 162, 111, 0.18);
    z-index: 3;
}

.header-nav{
    font-size: 1.6rem;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.nav{
    display: none;
}

.header-nav-item{
    margin-bottom: 1.14vw;
    font-weight: 400;
}

.main-visual-pc{
    display: none;
}

.main-visual{
    width: 98vw;
    position: absolute;
    /* top: -72px; */
    bottom: -2vw;
    right: 0;
    text-align: right;
    z-index: 1;
    animation-name: fadein;
    animation-duration: 5s;

}

.main-visual-sp{
    display: inline-block;
    position: relative;
    z-index: 100;
    max-width: 100%;
}

.rectangle-pc{
    display: none;
}

.main{
    margin-top: -8vw;
}

/*----------HEADER / PC----------*/

@media screen and (min-width: 769px){
    .header-logo-sp{
        display: none;
    } 

    .header-logo-pc{
        width: 13vw;
        display: block;
        margin-right: 27.5vw;
        
    }

    .header-inner{
        padding-top: 1.5vw;
    }

    .header-read{
        font-size: 3.86vw;
        margin-left: 22vw;
        margin-top: 1.18vw;
    }

    .header-read-txt{
        width: 50vw;
    }

    .header-read-shadow{
        font-size: 3.86vw;
        margin-left: 22.6vw;
        margin-top: 1.43vw;
    }


    .logo-read-container{
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .header-inner{
        background-image: url(../images/background5-pc2-2.jpg);
        background-position: left -354px top 0;
        background-size:160vw;
        height: 170vw;
    }

    .main-visual-sp{
        display: none;
    }

    .main-visual-pc{
        display: block;
        margin: 0 0 0 auto;
        width: 81vw;
        position: relative;
        bottom: 125.5vw;
        z-index: 100;
    }

    .nav{
        display: block;
        font-size: 1.1vw;
        margin-left: 23vw;
        z-index: 3;
        position: relative;
        top: 0.2vw;
        line-height: 1.3;
    }

    .header-nav-item{
        font-size: 1.15vw;
    }

    .hamburger-btn{
        right: 0;
        top: 2vw;
    }

    .header-nav{
        margin-top: 0.7vw;
    }

}



/*------------------
MAIN
--------------------*/

/*----------ABOOUT----------*/


.main{
    position: relative;
}


.about-logo-img{
    background-image: url(../images/about-img2-sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 82vw;
    margin-top: 6px;
}

.about-title-wrapper{
    width: 68vw;
    aspect-ratio: 1;
    background-color: antiquewhite;
    border-radius: 50%;
    background-color: rgba(188, 162, 111, 0);
    border: solid 2px #AD9463; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 6.5px;
    left: 1.5%;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
}
@keyframes scroll-anim{
    from{
        opacity: 0.2;
        scale: 0.9;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

.about-title1{
    color: #AD9463;
    font-family: "Literata", serif;
    font-size: calc(100vw / 375* 22);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    vertical-align: middle;
    position: relative;
    top: 5px;
}

.about-section1{
    width: 68vw;
    border: solid 2px #AD9463;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    margin-right: 3%;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 10% entry 100% ;
}

.about-heading{
    font-size: 5.0vw;
    color: #998661;
    margin: 6.2vw 0 0 5%;
}

.about-section1{
    margin-top: 5px;
}

.about-section1-title1{
    font-size: 4.6vw;
    color: #998661;
    margin-left: 26%;
    margin-bottom: 10px;
    position: relative;
    bottom: 10px;
    
}

.about-section1-txt{
    max-width: 76%;
    font-size: 3.7vw;
    position: relative;
    bottom: 10px;
    left: 11vw;
}

.about-section2{
    width: 76vw;
    border: solid 2px #AD9463;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3%;
    position: relative;
    bottom: 36px;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
}


.about-section2-title{
    font-size: 4.6vw;
    color: #998661;
    margin-right: 20px;
    margin-bottom: 10px;
    position: relative;
    bottom: 10px;
    left: 16vw;
}

.about-section2-txt{
    font-size: 3.7vw;
    max-width: 76%;
    position: relative;
    bottom: 10px;
    left: 11vw;
}

.about-section3{
    width: 62vw;
    border: solid 2px #AD9463;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    margin-right: 2%;
    position: relative;
    bottom: 80px;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
}

.about-section3-inner{
    position: relative;
    top: 5px;
    left: 1vw;
}

                
.about-section3-title{
    font-size: 4.6vw;
    color: #998661;
    margin-right: 14px;
    margin-bottom: 10px;
    position: relative;
    left: 40px;
    top: 5px;
}

.about-section3-txt{
    font-size: 4.3vw;
    line-height: 2.2;
    margin-bottom: 20px;
    color: #998661;
    position: relative;
    left: 10px;
}

.about-section3-etc{
    font-size: 4.8vw;
    color: #998661;
    margin-right: 14px;
    margin-bottom: 10px;
    position: relative;
    bottom: 15px;
    left: 40px;
}


.about-read-title{
    font-size: 5.2vw;
    color: #998661;
    position: relative;
    top: 11vw;
    margin-left: 2.5vw;
}

.about-read{
    position: relative;
    bottom: 58px;
}

.about-read-rectangle{
    width: 60vw;
    height: 22vw;
    background-color:#FFE8E3;
}

.about-border{
    max-width: 65%;
    margin: 0 auto 0 0;
    position: relative;
}

.about-line{
    height: 1.5px;
    border: none;
    background-color: #AD9463;
    position: relative;
    bottom:20px;
}

.about-read-txt{
    width: 63vw;
    margin: 21px 0 0 2.5vw;
    font-size: 3.7vw;
}

.seavice-btn{
    display: block;
    background-color: #FFF;
    width: 64vw;
    height: 11vw;
    line-height: 9vw;
    color: #998661;
    font-size: 3.7vw;
    text-align: center;
    border-radius: 6.2vw;
    box-shadow: 1vw 1vw 0.6vw rgba(188, 162, 111, 0.18);
    margin: 0 auto;
    margin-top: 5.6vw;

}

.btn-border{
    width: 61vw;
    margin: 0 auto 0 24%;
}

.btn-line{
    
    height: 1.2px;
    border: none;
    background-color: #AD9463;
    position: relative;
    bottom:2.8vw;
    
}

/*----------ABOUT / PC----------*/

@media screen and (min-width: 769px){

.about-concept-container{
        background-image: url(../images/background6-pc2.jpg);
        background-position: left -362px top 0;
        background-size:160vw;
        margin-top: -80px;
        padding-top: 0.2vw;
    }

    .about-logo-img{
        margin-top: -94vw;
    }

    .about-title-wrapper{
        width: 26.4vw;
        position: relative;
        animation-timeline: view();
        animation-range: entry 30% entry 100%  ;
    }

    .about-title1{
        font-size: 2.5vw;
    }

    .about-logo-img{
        background-image: url(../images/about-img-pc2.png);
        background-repeat: no-repeat;
        position: relative;
        bottom: 14.6vw;
        margin-left: 15vw;
    }

    .about-heading{
        font-size: 1.6vw;
       text-align: right;
       margin-top: -43.2vw;
       margin-right: 12vw;
       font-size: 1.7vw;
    }

    .sp-br{
        display: none;
    }

    .about-section1-title1, .about-section2-title, .about-section3-title{
        font-size: 1.7vw;
    }

    .about-section1-title1{
        width: 14vw;
        margin-left: -0.6vw;
        position: relative;
        left: 2vw;
        
    }

    .about-section1-txt{
        font-size: 0.99vw;
        width: 18vw;
        margin-top: 0.8vw;
        margin-right: 20vw;
        margin-left: -12vw;
        
    }

    .about-section1{
        width: 25vw;
        margin-right: 13.8vw;
        margin-top: -12vw;
        
    }
   

    .about-section-inner{
        margin-left: 13vw;
        margin-bottom: 1.7vw;
    }

    .about-section2-txt{
        font-size: 0.99vw;
        width: 23.4vw;
        margin-left: 3.5vw;
        margin-top: 0.8vw;
    }

    .about-section2-inner{
        margin-right: 22vw;
    }

    .about-section2{
        width: 28.6vw;
        margin-left: 41vw;
        margin-top: -7.4vw;
        animation-timeline: view();
        animation-range: entry 30% entry 100%;
    }

    .about-section3-txt{
        font-size: 1.4vw;
        margin: 1vw 0;
    }

    .about-section3-etc{
        font-size: 1.8vw;
        margin-left: 0.8vw;
        margin-top: 2vw;
    }

    .about-section3-title{
        margin-left: 0.2vw;
    }

    .about-section3{
        width: 22.5vw;
        margin-top: -5.6vw;
        margin-right: 17vw;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }


    .about-read-title{
        font-size: 1.5vw;
        margin-left: 2vw;
        position: relative;
    }

    .about-read-txt{
        font-size: 0.99vw;
        width: 19vw;
        margin-left: 1vw;
        position: relative;
        bottom: 0.5vw;
    }

    .about-read-rectangle{
        width: 20.2vw;
        height: 6vw;
        margin-top: 7.8vw;
    }

    .about-border{
        width: 21.5vw;
        position: relative;
        top: 0.3vw;
    }

    .about-read{
        position: relative;
        bottom: 44vw;
        margin-left: 18vw;
    }

    .seavice-btn{
        font-size: 1.2vw;
    }

    .btn-border{
        width: 18.4vw;
        margin: 0.2vw auto 0 23vw;
    }

    .btn-line{
        position: relative;
        top: 0.1vw;
        margin-top: -1.4vw;
        margin-left: -2.4vw;
        z-index: 5;
    }

    .seavice-btn{
        font-size: 1.2vw;
        width: 22vw;
        height: 3.8vw;
        position: relative;
        right: 21vw;
        line-height: 3.2vw;
        box-shadow: 0.4vw 0.4vw 0.2vw rgba(188, 162, 111, 0.18);
        margin-top: -37.2vw;
        z-index: 3;
    }

    .service-btn2-border{
        position: relative;
        left: 2vw;
    }


}



/*----------CONCEPT----------*/



.concept-title-wrapper{
    position: relative;
}

.concept-heading{
    font-size: 14vw;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    color: #FFE0DA;
    margin-top: 22vw;
    margin-left: 2vw;
}

.concept-title{
    color: #998661;
    font-size: 5.8vw;
    position: absolute;
    bottom: -1vw;
    left: 17vw;
}

.concept-section-img{
    text-align: center;
}

.section-img1-pc, .section-img2-pc, .section-img3-pc{
    display: none;
}

.section-img1-sp, .section-img2-sp, .section-img3-sp{
    width: 68vw;
    margin-top: 20vw;
}

.section-img2-sp{
    margin-top: 50vw;
}

.number1, .number2, .number3{
    font-size: 22vw;
    font-family: "Literata", serif;
    color: #FFE0DA;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}
@keyframes scroll-anim{
    from{
        opacity: 0;
        scale: 0.1;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}


.number1, .number3{
    margin-left: 9.5vw;
    padding-top: -5vw;
}

.number2{
    margin-left: 64vw;
}

.concept-section-title{
    font-size: 4.8vw;
    color: #998661;
    
}

.concept-section-txt, .concept-section-txt2, .concept-section-txt3{
    width: 72vw;
    font-size: 3.7vw;
    color: #998661;
    margin: 0 auto;
    margin-top: 6.4vw;
    text-align: left;
}

.concept-section1-inner1{
    position: relative;
    
}

.concept-txt-wrapper1{
    text-align: center;
    position: absolute;
    top: 13vw;
    left: 14vw;
}

.concept-section1-inner2{
    position: relative;
}

.concept-txt-wrapper2{
    text-align: center;
    position: relative;
    bottom: 20vw;
    margin: 0 auto;
}

.section-img3-sp{
    margin-top: 4vw;
}

.concept-section1-inner3{
    position: relative;
}

.concept-txt-wrapper3{
    text-align: center;
    position: relative;
    bottom: 20.2vw;
    margin: 0 auto;
}

.about-concept-container{
    background-image: url(../images/background8-sp.png);
    background-position: left -260px top -10vw;
    background-repeat: no-repeat;
    padding-top: 84px;
    padding-bottom: 15vw;

}

/*----------CONCEPT / PC----------*/

@media screen and (min-width: 769px){

    .concept-heading{
        font-size: 5.5vw;
        position: relative;
        top: 0.7vw;
    }

    .concept-title{
        font-size: 2.2vw;
        margin-left: 36vw;
        margin-right: 7vw;
    }

    .concept-title-wrapper{
        text-align: center;
        margin-top: -11vw;
    }

    .section-img1-sp, .section-img2-sp, .section-img3-sp{
        display: none;
    }

    .section-img1-pc, .section-img2-pc, .section-img3-pc{
        display: block;
        width: 20.8vw;
    }

    .number1, .number2, .number3{
        font-size: 11.2vw;
    }

    .concept-section-title{
        font-size: 1.8vw;
    }

    .concept-section-txt, .concept-section-txt3 {
        font-size: 1vw;
        width: 25vw;
    }

    .concept-section-txt2{
        width: 26vw;
        font-size: 1vw;
    }

    .concept-section-txt{
        margin-top: 2vw;
    }

    .concept-txt-wrapper1{
        margin-top: -6.4vw;
    }

    .concept-section1{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-left: 16vw;
        margin-top: 0.4vw;
    }

    .section-img1-pc{
        margin-top: 9vw;
        margin-right: 20.6vw;
    }

    .number2{
        position: relative;
        right: 10vw;
        width: 20vw;
    }

    .section-img2-pc{
        position: relative;
        top: 20vw;
        left: 12vw;
    }

    .concept-section-txt2{
        margin-top: 2vw;
    }

    .concept-txt-wrapper2{
        width: 30vw;
        margin-top: 10vw;
        margin-left: 34.2vw;
    }

    .concept-section2{
        width: 50vw;
        position: relative;
        left: 12vw;
        bottom: 8vw;
    }

    .concept-section-inner2{
        width: 50vw;
    }

    .concept-section-txt3{
        width: 27vw;
        margin-top: 2vw;
    }

    .number3{
        position: relative;
        bottom: 10.5vw;
        left: 22vw;
        width: 40vw;
    }

    .section-img3-pc{
        position: relative;
        top: 10vw;
        left: 66vw;
    }

    .concept-section3{
        margin-top: -24vw;
        position: relative;
        right: 6.6vw;
    }
    
}

/*----------SALONROOM----------*/

.salonroom-arch-pc{
    display: none;
}

.salonroom-arch-sp{
    width: 100vw;

}

.salonroom-img-pc{
    display: none;
}

.salonroom-img-sp{
    width: 100vw;
    position: relative;
    bottom: 30vw;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
    }

    @keyframes scroll-anim{
        from{
            opacity: 0.2;
            scale: 0.9;
        }
        to{
            opacity: 1;
            scale: 1;
        }
    
}


.salonroom-container{
    position: relative;
}

.salonroom-read{
    font-size: 6.8vw;
    font-family: "Adamina", serif;
    font-weight: 400;
    color: #ffffff;
    position: relative;
    bottom: 72.5vw;
    margin-left: 9vw;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes scroll-anim{
    from{
        opacity: 0.2;
        scale: 0.9;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

.salonroom-circle-img-pc{
    display: none;
}

.salonroom-circle-img{
    text-align: right;
}

.salonroom-circle-img-sp{
    position: relative;
    bottom: 105.4vw;
    right: 12vw;
    width: 28vw;
    animation: rotate 12s infinite linear;
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

/*----------SALONROOM / PC----------*/

@media screen and (min-width: 769px){

    .salonroom-arch-sp, .salonroom-img-sp{
        display: none;
    }
    
    .salonroom-arch-pc{
        display: block;
        width: 100vw;
        margin-top: -20vw;
    }

    .salonroom-img{
        position: relative;
        bottom: 28vw;
    }

    .salonroom-img-pc{
        display: block;
        width: 88.4vw;
        margin: 0 0 0 auto;
        position: relative;
        animation: scroll-anim linear;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }

    @keyframes scroll-anim{
        from{
            opacity: 0.2;
            scale: 0.9;
        }
        to{
            opacity: 1;
            scale: 1;
        }
    }
    

    .salonroom-circle-img-sp{
        display: none;
    }

    .salonroom-circle-img{
        position: relative;
    }

    .salonroom-circle-img-pc{
        display: block;
        width: 12.2vw;
        position: absolute;
        bottom: 60.5vw;
        right: 2.8vw;
        z-index: 3;
        animation: rotate 12s infinite linear;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

    .salonroom-read{
        width: 30vw;
        font-size: 4vw;
        margin-top: 7vw;
        margin-left: 67vw;
    }

    .salonroom-container{
        height: 70vw;
    }

}


/*----------SERVICE----------*/

.service-heading{
    font-size: 14vw;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    color: #FFE0DA;
    margin-top: -84vw;
    margin-left: 2vw;
}

.service-title-wrpper{
    position: relative;
}

.service-title{
    color: #998661;
    font-size: 5.8vw;
    position: absolute;
    top:13vw ;
    left: 20vw;
}

.service-section1-logo-pc{
    display: none;
}

.service-section1-img-pc{
    display: none;
}

.service-section-title{
    width: fit-content;
    color: #998661;
    font-size: 5.4vw;
    margin-left: 9vw;
    margin-bottom: 24px;
    margin-top: -40vw;
}

.service-section1-logo-sp{
    width: 30vw;
    position: absolute;
    left: 60vw;
    top: 1vw;
    animation: slideinRight 2s ;
        animation-timeline: view();
        animation-range: entry 25% cover 35%;
    }

    @keyframes slideinRight {
        0% {
          transform: translateX(80px);
        }
        100% {
          transform: translateX(0);
        }
      
}

.service-section1-img-sp{
    border-top-right-radius: 41vw;
    width: 56vw;
    height: 76vw;
    margin-left: 9.5vw;
    display: block;
    z-index: 10;
    position: relative;
    animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: entry 25% cover 25%;
    }

    @keyframes fadeIn {
        from {
          opacity: 0;
          clip-path: inset(45% 20% 45% 20%);
        }
      
        to {
          opacity: 1;
          clip-path: inset(0% 0% 0% 0%);
        }
      

}

.service-img-wrapper{
    position: relative;
    margin-top: 18vw;
}

.service-section1-wave-pc{
    display: none;
}

.service-section1-arch-sp{
    position: relative;
    bottom: 50.5vw;
    z-index: 1;
    width: 100vw;
}

.osusume-btn{
    display: block;
    background-color: #FFFFFF;
    width: 64vw;
    height: 11vw;
    line-height: 9vw;
    color: #998661;
    font-size: 3.7vw;
    text-align: center;
    border-radius: 6.2vw;
    box-shadow: 1vw 1vw 0.6vw rgba(188, 162, 111, 0.18);
    margin: 0 auto;
    margin-top: 5.6vw; 
}

.service-btn-border{
    width: 61vw;
    margin: 0 auto 0 24%
}

.service-btn-wrapper{
    width: 80vw;
    position: relative;
    bottom: 76vw;
    z-index: 10;
}

.service-btn-line{
    height: 1.5px;
    border: none;
    background-color: #AD9463;
    position: relative;
    bottom:2.8vw;
    right: 5vw;
}

.service-section1{
    position: relative;
    top: 40vw;

}



.service-section2-img-pc,
.service-section2-logo-pc{
    display: none;
}

.service-section2-img-sp{
    width: 53.6vw;
    height: 81.6vw;
    border-top-left-radius: 39vw;
    margin-left: 36.5vw;
    margin-top: -32vw;
    position: relative;
    z-index: 3;
    animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: entry 25% cover 25%;
    }

    @keyframes fadeIn {
        from {
          opacity: 0;
          clip-path: inset(45% 20% 45% 20%);
        }
      
        to {
          opacity: 1;
          clip-path: inset(0% 0% 0% 0%);
        }
      

}

.service-section2-wave-pc{
    display: none;
}

.service-section2-logo-sp{
    width: 48vw;
    position: relative;
    bottom: -10vw;
    left: 15vw;
    z-index: 6;
    animation: slideinleft 2s ;
    animation-timeline: view();
    animation-range: entry 25% cover 35%;
    }

    @keyframes slideinleft {
        0% {
          transform: translateX(-80px);
        }
        100% {
          transform: translateX(0);
        }
      
}

.service-section-title2{
    width: fit-content;
    color: #998661;
    font-size: 5.4vw;
    margin-left: 45.5vw;
    position: relative;
    z-index: 10;
    bottom: 38vw;
}

.service-section2-arch-sp{
    position: relative;
    bottom: 50vw;
    width: 100vw;
}

.seavice-btn2{
    display: block;
    background-color: #FFFFFF;
    width: 72vw;
    height: 11vw;
    line-height: 9vw;
    color: #998661;
    font-size: 3.7vw;
    text-align: center;
    border-radius: 6.2vw;
    box-shadow: 1vw 1vw 0.6vw rgba(188, 162, 111, 0.18);
    
    margin: 5.6vw 0 0 11vw;
    position: relative;
}

.service-btn2-wrapper{
    width: 92vw;
    position: relative;
    bottom: 76vw;
    left:  8vw;
}

.service-btn2-border{
    width: 71vw;
    margin: 0 auto 0 26%
}

.service-btn2-line{
    position: relative;
    left: 5vw;
    bottom: 3vw;
    border: none;
    background-color: #AD9463;
    height: 1.5px;
    z-index: 5;
}

.service-section2{
    margin-top: -10vw;
}

.salonroom-service-container{
    background-image: url(../images/background8-sp.png);
    background-position: left -200px top -80vw;
    height: 410vw;
}

.service-section1-info{
    display: none;
}

.service-btn2-wrapper{
    width: 40vw;
}

.service-section2-info, .service-section2-subtitle, .service-section2-txt{
    display: none;
}

/*----------SERVICE / PC-------------*/

@media screen and (min-width: 769px){
    .seavice-btn2{
        font-size: 1.2vw;
        width: 25vw;
        height: 3.8vw;
        position: relative;
        left: 4vw;
        line-height: 3.2vw;
        box-shadow: 0.4vw 0.4vw 0.2vw rgba(188, 162, 111, 0.18);
        margin-top: -37.2vw;
        z-index: 3;
    }

    .service-heading{
        font-size: 5.6vw;
        margin-top: 0vw;
        margin-left: 56.4vw;
        width: fit-content;
    }

    .service-title{
        font-size: 2.2vw;
        margin-left: 48vw;
        margin-top: -8vw;
    }

    .service-section-title{
        font-size: 2.08vw;
        margin-left: 22.7vw;
    }

    .service-section1-logo-sp{
        display: none;
    }

    .service-section1-logo-pc{
        display: block;
        width: 13vw;
        position: relative;
        bottom: 32.5vw;
        margin-left: 1.8vw;
        animation: slideinRight 1s ;
        animation-timeline: view();
        animation-range: entry 25% cover 37%;
    }

    @keyframes slideinRight {
        0% {
          transform: translateX(80px);
        }
        100% {
          transform: translateX(0);
        }
      }

    .service-img-wrapper{
        margin-top: 0;
    }

    .service-section1-img-sp{
        display: none;
    }

    .service-section1-img-pc{
        display: block;
        width: 25.3vw;
        position: relative;
        top: 0.5vw;
        z-index: 3;
        border-top-right-radius: 17vw;
        margin-left: 22.8vw;
        animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: entry 25% cover 25%;
    }

    @keyframes fadeIn {
        from {
          opacity: 0;
          clip-path: inset(45% 20% 45% 20%);
        }
      
        to {
          opacity: 1;
          clip-path: inset(0% 0% 0% 0%);
        }
      }

    .service-section1-info{
        display: block;
        position: relative;
        right: 1.4vw;
        z-index: 3;
        color: #998661;
        font-weight: normal;
        margin-top: -39vw;
    }

    .service-section1-subtitle{
        font-size: 1.94vw;
       position: relative;
       right: 1vw;
    }

    .service-section1-txt{
        font-size: 1.53vw;
        margin-top: 1.6vw;
    }

    .osusume-btn{
        font-size: 1.2vw;
        width: 22vw;
        height: 3.8vw;
        position: relative;
        left: 9.9vw;
        bottom: 6vw;
        line-height: 2.6vw;
        box-shadow: 0.4vw 0.4vw 0.2vw rgba(188, 162, 111, 0.18);
        padding-top: 0.4vw;
    }

    .service-btn-wrapper{
        margin-top: 50vw;
        position: relative;
        left: 16.1vw;
        bottom: 85vw;
    }

    .service-btn-border{
        width: 18.2vw;
        margin: 0.2vw auto 0 44%;
    }

    .service-btn-line{
        position: relative;
        bottom: 1.2vw;
        left: 9vw;
        bottom: 7.3vw;
        margin-left: -2.4vw;
    }

    .service-section1-arch-sp{
        display: none;
    }

    .service-section1-wave-pc{
        width: 100vw;
        display: block;
        position: relative;
        bottom: 24.4vw;
    }

    .service-img-wrapper{
        display: flex;
        align-items: center;
        margin-top: 4vw;
        position: relative;
    }

    .service-section1-info{
        position: relative;
        right: 6vw;
    }

    .service-section-title2{
        font-size: 2.08vw; 
    }

    .service-section2-txt{
        position: relative;
        left: 1.6vw;
    }

    .service-section2-logo-sp{
        display: none;
    }

    .service-section2-logo-pc{
        display: block;
        position: relative;
        z-index: 4;
        width: 18.4vw;
        animation: slideinleft 1s ;
        animation-timeline: view();
        animation-range: entry 25% cover 37%;
    }

    @keyframes slideinleft {
        0% {
          transform: translateX(-80px);
        }
        100% {
          transform: translateX(0);
        }
      }

    .service-section2-img-sp{
        display: none;
    }

    .service-section2-img-pc{
        display: block;
        position: relative;
        z-index: 3;
        width: 21.2vw;
        height: 32vw;
        border-top-left-radius: 16vw;
        margin-top: -0.2vw;
        animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: entry 25% cover 25%;
    }

    @keyframes fadeIn {
        from {
          opacity: 0;
          clip-path: inset(45% 20% 45% 20%);
        }
      
        to {
          opacity: 1;
          clip-path: inset(0% 0% 0% 0%);
        }
      }

    .service-btn2-border{
        width: 20vw;
        position: relative;
        left: 5.8vw;
    }

    .service-btn2-line{
        position: relative;
        bottom: 1.2vw;
        
        margin-left: -4.3vw;
        margin-top: 0.2vw;
        background-color: #AD9463;
        z-index: 4;
    }

    .service-btn2-wrapper{
        position: relative;
        top: 20vw;
        margin-left: -0.8vw;
    }

    .service-section2-arch-sp{
        display: none;

    }

    .service-section2-wave-pc{
        width: 100vw;
        display: block;
        margin-top: -17.5vw;
    }

    .service-section-title2{
        margin-left: 3.6vw;
        margin-top: 38vw;
    }

    .service-section2-subtitle{
        font-size: 1.94vw;
    }

    .service-section2-txt{
        font-size: 1.53vw;
        margin-top: 1.6vw;
        margin-left: 1.5vw;
    }

    .service-section2-info{
        display: block;
        position: relative;
        z-index: 3;
        color: #998661;
        font-weight: normal;
    }

    .service-section2-info, .service-section2-subtitle, .service-section2-txt{
        display: block;
    }

    .service-section2{
        margin-top: -2vw;
        
    }

    .service-section1{
        margin-top: -3vw;
        height:60vw;
    }

    .service-section-inner{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 8vw;
    }

    .service-section2-img-pc{
        margin-top: -35.4vw;
    }

    .service-section2-logo-pc{
        position: relative;
        left: 10.6vw;
        bottom: 5.8vw;
    }

    .service-section2-info{
        position: relative;
        left: 10vw;
    }

    .salonroom-service-container{
        height: 176vw;
        background-image: url(../images/background5-pc2.jpg);
        background-position: left -354px top 0vw;
        background-size:160vw;
    }

}

/*----------NEWS----------*/

.news-container{
    padding: 30vw 0 24vw 0;
    background-image: url(../images/background8-sp.png);
    background-position: left -260px top -20px;
    margin-top: -4vw;
}

.news-title{
    color: #998661;
    font-size: 5.8vw;
    margin-left: 7.5vw;
}

.news-img-pc{
    display: none;
}

.news-img, .news-img-sp{
    width: 66.5vw;
    margin-top: 12vw;
    
}

.news-section1,
.news-section2,
.news-section3{
    text-align: center;
}

.news-section-title{
    margin-top: 9vw;
}

.news-border{
    width: 70vw;
    margin: 5.6vw auto;
    
}

.news-line{
    height: 1.5px;
    border: none;
    background-color: #AD9463;
}

.news-section-txt{
    width: 77vw;
    margin: 0 auto 10vw auto;
    text-align: left;
}

/*----------NEWS / PC-------------*/

@media screen and (min-width: 769px){

    .news-title{
        font-size: 2.2vw;
        text-align: center;
        margin-top: -15vw;

    }

    .news-img, .news-img-sp{
        width: 22.2vw;
        margin-top: -3vw;
    }

    .news-section-title{
        font-size: 1.67vw;
    }

    .news-section-txt{
        font-size: 0.99vw;
        width: 20.14vw; 
        margin-top: 1.8vw;
    }

    .news-border{
        width: 24vw;
        margin: 0;
        margin-top: 1vw;
    }

    .news-section1, .news-section2, .news-section3{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8.5vw;
    }

    .news-info{
        margin-top: -3vw;
    }

    .news-container{
        padding-bottom: 6vw;
        background-image: url(../images/background5-pc2.jpg);
        background-position: left -354px top 0vw;
        background-size:160vw;
    }
}

/*----------OWNER PROFILE----------*/

.owner-container-inner{
    width: 90vw;
    background-color: #FFE8E3;
    padding: 11vw 0;
    margin: 0 auto;
}

.OWNER-img-pc, .wave-txt-pc{
    display: none;
}

.OWNER-title{
    font-size: 9vw;
    font-family: "Adamina", serif;
    color: #FFFFFF;
    margin-left: 38vw;
    text-align: center;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}
@keyframes scroll-anim{
    from{
        opacity: 0;
        scale: 0.9;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

.OWNER-img-sp{
    width: 30vw;
    position: relative;
    bottom: 20vw;
    left: 5vw;
}

.owner-txt-wrapper{
    text-align: center;
    background-color: #FFFFFF;
    width: 84vw;
    margin: 0 auto;
    padding: 8vw 0 20vw 0;
    border-radius: 50%;
    color: #998661;
}

.owner-subtitle{
    font-size: 4.2vw;
}

.owner-txt1{
    display: inline-block;
    margin-top: 6vw;
    font-size: 3.8vw;
    text-align: left;
    margin-left: 2vw;
}

.owner-txt2{
    display: inline-block;
    margin-top: 4vw;
    text-align: left;
}

.owner-txt-inner{
    margin: 0 auto;
}

.owner-profile-wrapper{
    color: #998661;
    text-align: center;
    display: inline-block;
}

.owner-profile1,
.owner-profile3{
font-size:3.2vw;
}

.owner-profile-container{
    text-align: right;
    margin: 3vw 3vw 0 0;
}

.wave-txt-sp{
    margin-top: 2vw;
}

.owner-circle{
    margin-top: -30vw;
}

.owner-container{
    background-image: url(../images/background5-sp.png);
    background-position: left -260px top -10vw;
    background-repeat: no-repeat;
}

.wave-txt-wrapper{
    display: flex;
    overflow: hidden;
    gap: 10vw;
}

.wave-txt-wrapper .wave-txt-sp:nth-child(3){
    animation: loop 4s -5s linear infinite;
} 

.wave-txt-wrapper .wave-txt-sp:last-child{
    animation: loop2 4s linear infinite;
}

@keyframes loop {
    0%{
        transform: translateX(4%);
    }
    to{
        transform: translateX(-4%);
    }
}

@keyframes loop2 {
    0%{
        transform: translateX(0);
    }
    to{
        transform: translateX(-8%);
    }
}




/*----------OWNER / PC-------------*/

@media screen and (min-width: 769px){

    .OWNER-img-sp{
        display: none;
    }

    .OWNER-img-pc{
        display: block;
        width: 15.3vw;
        position: relative;
        left: 6.2vw;
        top: 2vw;
    }

    .OWNER-title{
        font-size: 5.7vw;
        margin: 0 auto;
    }

    .owner-subtitle{
        font-size: 1.67vw;
        margin-left: -1vw;
    }

    .owner-txt1{
        font-size: 1.25vw;
        margin: 0;
        margin-top: 4vw;
    }

    .owner-txt2{
        font-size: 1.25vw;
        margin-top: 3vw;
    }

    .owner-txt-wrapper{

        display: flex;
        flex-direction: column;
        justify-content: center;
        width: fit-content;
        
    }

    .owner-profile-wrapper{
        font-size: 1.25vw;
        display: inline-block;
    }

    .owner-profile-container{
        text-align: center;
        margin-top: -14vw;
        margin-left: 1vw;
    }

    .owner-profile1, .owner-profile3{
        font-size: 1.1vw;
    }

    .wave-txt-sp{
        display: none;
    }

    .wave-txt-pc{
        display: block;
        margin-top: 7vw;
        width: 100vw;
        
    }
    .owner-circle-inner{
        width: fit-content;
        background-color: #FFFFFF;
        border-radius: 50%;
        padding: 0vw 17.8vw 10vw;
        margin: 0 auto;
        margin-top: 20vw;
    }

    .owner-container-inner{
        width: 68.5vw;
        height: 105vw;
        padding-top: 4vw;
    }

    .owner-circle{
        width: fit-content;
        
    }

    .owner-container{
        background-image: none;
    }

    .wave-txt-wrapper{
        display: flex;
        overflow: hidden;
        gap: -4vw;
    }

    .wave-txt-wrapper .wave-txt-pc:first-child{
        animation: loop 4s -5s linear infinite;
    } 

    .wave-txt-wrapper .wave-txt-pc:last-child{
        animation: loop2 4s linear infinite;
    }

    @keyframes loop {
        0%{
            transform: translateX(4%);
        }
        to{
            transform: translateX(-4%);
        }
    }

    @keyframes loop2 {
        0%{
            transform: translateX(-8%);
        }
        to{
            transform: translateX(8%);
        }
    }


}

/*----------TRAIAL tiket----------*/

.tiket-title-pc{
    display: none;
}

.tiket-title-wrapper{
    text-align: center;
    
}

.tiket-title-sp{
    width: 48vw;
}

.first-time{
    font-size: 5.2vw;
    color: #998661;
    width: 45vw;
    height: 45vw;
    position: relative;
    top: 16.4vw;
    left: 10.2vw;
}

.first-time-wrapper{
    /*background-image: url(../images/circletxt2-sp.png);
    background-repeat: no-repeat;
    background-size: 42vw;*/
    margin-left: 4vw;
    margin-top: 4vw;
   
}


.tiket-txt{
    font-size: 3.5vw;
    color: #998661;
    position: relative;
    top: 6.5vw;
}

.tiket-circle1{
    width: 25vw;
    height: 25vw;
    background-color: #FFFFFF;
    border: solid 2px #AD9463;
    border-radius: 50%;
    text-align: center;
    position: relative;
    bottom: 19vw;
    left: 60vw;
    z-index: 3;
}

.tiket-txt2-1, .traial-txt, .tiket-txt4{
    font-size: 3.5vw;
    color: #998661;
}

.tiket-txt2-2{
    font-size: 4.5vw;
    font-weight: 500;
    color: #998661;
    margin-top: 2.4vw;
}

.tiket-circle2-inner{
    position: relative;
    top: 6vw;
}

.tiket-circle2{
    width: 41vw;
    height: 41vw;
    background-color: #FFFFFF;
    border: solid 2px #AD9463;
    border-radius: 50%;
    text-align: center;
    position: relative;
    bottom: 30vw;
    left: 31vw;
}

.tiket-circle3{
    width: 39vw;
    height: 39vw;
    background-color: #FFFFFF;
    border: solid 2px #AD9463;
    border-radius: 50%;
    text-align: center;  
    margin-left: 2vw;
    position: relative;
    bottom: 2vw;
}

.traial-txt{
    position: relative;
    top: 8.2vw;
}

.tiket-circle4{
    width: 27vw;
    height: 27vw;
    background-color: #FFFFFF;
    border: solid 2px #AD9463;
    border-radius: 50%;
    text-align: center;
}

.tiket-txt4{
    position: relative;
    top: 8vw;
}

.arrow{
    width: 9vw;
    position: relative;
    top: 14vw;
}

.arrow-wrapper{
    display: flex;
    align-items: flex-start;
    gap: 7vw;
    margin-top: -36vw;
}

.time{
    font-size: 5vw;
    color: #998661;
    border-bottom: solid 2px  #AD9463;
    width: 15vw;
    margin-left: 14vw;
}

.price{
    font-family: "Adamina", serif;
    font-size: 8.5vw;
    font-weight: 400;
    color: #998661;
    margin-top: 2vw;
    margin-left: 2vw;
}

.unit1{
    display: inline;
    font-size: 3.7vw;
    
}

.unit2{
    display: inline;
    font-size: 6.4vw;
}

.tiket-txt3{
    color: #998661;
}

.tiket-circle5{
    width: 45vw;
    height: 45vw;
    background: linear-gradient(180deg, #EDDD96 6.3%, #F3E8B9 21.4%, #ffffff 50.2%, #EDDD96 80.5%);
    border: solid 3px #AD9463;
    border-radius: 50%;
    text-align: center;
    margin-left: 29vw;
    margin-top: -4vw;
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}
@keyframes scroll-anim{
    from{
        opacity: 0;
        scale: 0.9;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}

.tiket-circle5-inner{
    position: relative;
    top: 6vw;
}

.traial-btn-wrapper{
    margin-top: 14vw;
}

.traial-container{
    background-image: url(../images/background5-sp.png);
    background-position: left -260px top 0;
    padding-top: 18vw;
    padding-bottom: 17vw;
}

.traial-btn{
    display: block;
    background-color: #FFE8E3;
    width: 64vw;
    height: 11vw;
    line-height: 9vw;
    color: #998661;
    font-size: 3.7vw;
    text-align: center;
    border-radius: 6.2vw;
    box-shadow: 1vw 1vw 0.6vw rgba(188, 162, 111, 0.18);
    position: relative;
    right: -0.5vw;
    top: 0.5vw;
    margin: 5.6vw 0 0 18vw;
    position: relative;
}

.traial-border{
    width: 61vw;
    margin: 0 auto 0 24%
}

.traial-btn-line{
    height: 1.5px;
    border: none;
    background-color: #AD9463;
    position: relative;
    bottom:2.5vw;
}

.circletxt-img-pc{
    width: 42vw;
    margin-top: -40vw;
    position: relative;
    bottom:8vw;
}

.tiket-circle-container{
    margin-top: -6vw;
}

.circletxt-img-pc{
    animation: rotate 14s infinite linear;

    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

/*----------TIKET / PC-------------*/

@media screen and (min-width: 769px){
    .tiket-title-sp{
        display: none;
    }


    .tiket-title-pc{
        display: block;
        width: 23vw;
        margin: 0 auto;
    }

    .tiket-circle-container{
        margin-top: 30vw;
    }

    .first-time{
        width: fit-content;
        height: 24vw;
        font-size: 2.2vw;
        margin-top: -8vw;
        position: relative;
        top: 10vw;
        left: 7.6vw;
    }

    .first-time-wrapper{
        margin-left: 4vw;
        margin-top: 16vw;
        width: 60vw;
        position: relative;
        bottom: 14vw;
        left: 8.8vw;
    }

    .tiket-txt, .tiket-txt2-1, .traial-txt, .tiket-txt4{
        font-size: 1.38vw;
    }

    .tiket-txt{
        position: relative;
        top: 3.2vw;
    }

    .tiket-txt2-2{
        font-size: 1.67vw;
        margin-top: 1.2vw;
    }

    .tiket-circle2-inner{
        position: relative;
        top: 3vw;
    }

    .traial-txt{
        line-height: 1.6;
        position: relative;
        top: 5.3vw;
        left: 3.2vw;
        text-align: left;
    }

    .tiket-txt4{
        position: relative;
        top: 4.4vw;
    }

    .time{
        font-size: 2.08vw;
        margin-left: 6vw;
        width: 8.8vw;
        position: relative;
        top: -3vw;
    }

    .unit1{
        font-size: 1.67vw;
    }

    .price{
        font-size: 3.61vw;
        position: relative;
        bottom: 4vw;
    }

    .unit2{
        font-size: 2.08vw;
        
    }

    .tiket-txt3{
        font-size: 1.67vw;
        position: relative;
        bottom: 3.6vw;
        left: 0.2vw;
    }

    .traial-btn{
        font-size: 1.2vw;
        width: 22vw;
        height: 3.8vw;
        position: relative;
        line-height: 2.6vw;
        box-shadow: 0.4vw 0.4vw 0.2vw rgba(188, 162, 111, 0.18);
        padding-top: 0.4vw;
        text-align: center;
        position: relative;
        left: 24vw;
    }

    .traial-border{
        width: 21.5vw;
        margin: 0.2vw auto 0 44%;
    }

    .traial-btn-line{
        height: 1.5px;
        border: none;
        background-color: #AD9463;
        position: relative;
        bottom: 0.7vw;
    }

    .arrow{
        width: 3vw;
        margin: 0 auto;
        position: relative;
        right: 4.2vw;
        margin-top: -6.2vw;
    }

    .tiket-circle1{
        width: 11.2vw;
        height: 11.2vw;
        margin-left: -6.6vw;
        position: relative;
        bottom: 26vw;
    }

    .tiket-circle2{
        width: 16.4vw;
        height: 16.4vw;
        text-align: center;
        position: relative;
        left: 42vw;
        margin-top: -1.5vw;
        z-index: 3;
    }

    .tiket-circle3{
        width: 19.8vw;
        height: 19.8vw;
        position: relative;
        left: 18vw;
        top: 0vw;
    }

    .tiket-circle4{
        width: 13.3vw;
        height: 13.3vw;
        position: relative;
        right: 24vw;
        top: 2vw;
    }

    .tiket-circle5{
        width: 20.2vw;
        height: 20.5vw;
        margin: 0 auto;
        position: relative;
        bottom: 5.8vw;
    }

    .traial-container{
        padding-top: 10vw;
        padding-bottom: 0;
        height: 93vw;
        background-image: none;
    }

    .traial-btn-wrapper{
        text-align: center;
        position: relative;
        bottom: 14vw;
        right: 3vw;
    }

    .tiket-circle-container{
        margin-top: -7vw;
        
    }

    .news-tiket-container{
        background-image: url(../images/background7-pc2-1.jpg);
        background-position: left -354px top 0vw;
        background-size:160vw; 
    }

    .circletxt-img-pc{
        width: 24.3vw;
        margin-top: -28vw;
        position: relative;
        bottom: 5.4vw;
        animation: rotate 14s infinite linear;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
    

}

/*----------FREESPACE----------*/


.freespace-title-wrapper{
    text-align: center;
    margin-top: 15vw;
}

.freespace-title{
    color: #998661;
    font-size: 5.2vw;
}

.freespace-logo-pc, .freespace-main-img-pc{
    display: none;
}

.freespace-logo-sp{
    width: 17vw;
    margin-top: 2vw;
}

.freespace-contents{
    text-align: center;
    margin-top: 8vw;
}

.freespace-img1-pc{
    width: 45vw;
    height: 34.8vw;
    margin-right: 2vw;
}

.freespace-img2-pc{
    width: 45vw;
    height: 34.8vw;
}

.freespace-txt{
    font-size: 3.6vw;
    color: #998661;
    width: 92vw;
    margin: 0 auto;
    margin-top: 6vw;
    text-align: left;
}

.freespace-main-img-sp{
    width: 94vw;
    margin: 0 auto;
    margin-top: 6.4vw;
}

.freespace-img-wrapper{
    text-align: center;
}

.freespace-txt2{
    margin-top: 12vw;
    font-size: 3.4vw;
    color: #998661;
    display: inline-block;
    text-align: left;
}

.freespace-btn-wrapper{
    margin-top: 12vw;
}

.freespace-btn{
    display: block;
    background-color: #FFE8E3;
    width: 64vw;
    height: 11vw;
    line-height: 9vw;
    color: #998661;
    font-size: 3.7vw;
    text-align: center;
    border-radius: 6.2vw;
    box-shadow: 1vw 1vw 0.6vw rgba(188, 162, 111, 0.18);
    
    margin: 5.6vw 0 0 18vw;
    position: relative;
}

.freespace-btn-line{
    height: 1.5px;
    border: none;
    background-color: #AD9463;
    position: relative;
    bottom:3vw;
}

.freespace-btn-border{
    width: 61vw;
    margin: 0 auto 0 24%
}

.home{
    color: #998661;
    display: block;
    margin: 12vw 0 0 76vw;
    border-bottom: solid 2px #AD9463;
    text-align: right;
    width: 20vw;
    margin-bottom: 6vw;
}

/*----------FREE SPACE / PC-------------*/

@media screen and (min-width: 769px){

    .freespace-title{
        font-size: 2.08vw;
    }

    .freespace-logo-sp{
        display: none;
    }

    .freespace-logo-pc{
        display: block;
        width: 8.3vw;
        transform: translateY(-7%);
    }

    .freespace-title-wrapper{
        display: flex;
        justify-content: center;
        gap: 1.4vw;
        margin-left: 8vw;
        margin-top: 10vw;
    }

    .freespace-main-img-sp{
        display: none;
    }

    .freespace-main-img-pc{
        display: inline-block;
        width: 58vw;
        margin-top: 7vw;
    }

    .freespace-img1-pc, .freespace-img2-pc{
        width: 26vw;
        height: 20vw;
    }

    .freespace-img1-pc{
        margin-right: 4vw;
    }

    .freespace-contents{
        margin-top: 4.2vw;
    }

    .freespace-txt{
        font-size: 1.1vw;
        width: 29.6vw;
    }

    .freespace-txt2{
        font-size: 0.96vw;
        margin-top: 6vw;
    }

    .freespace-btn{
        font-size: 1.2vw;
        width: 22vw;
        height: 3.8vw;
        position: relative;
        line-height: 2.6vw;
        box-shadow: 0.4vw 0.4vw 0.2vw rgba(188, 162, 111, 0.18);
        padding-top: 0.4vw;
        text-align: center;
        position: relative;
        left: 24vw; 
    }

    .freespace-btn-border{
        width: 22vw;
        margin: 0.2vw auto 0 44%;
    }

    .freespace-btn-line{
        height: 1.5px;
        border: none;
        background-color: #AD9463;
        position: relative;
        bottom: 1.2vw;
        
    }

    .freespace-btn-wrapper{
        position: relative;
        right: 3vw;
        margin-top: 6vw;
        margin-bottom: 10vw;
    }

    .home{
        display: none;
    }
}

/*------------------
FOOTER
--------------------*/

/*----------FOOTER----------*/

.footer-nav, .footer-fream1-pc, .footer-fream2-pc{
    display: none;
}

.icon{
    width: 6vw;
    position: relative;
    bottom: 7vw;
    right: 2vw;
    margin-right: 2vw;
}

.footer-logo{
    width: 27vw;
    margin: 0 auto;
}

.footer-fream1-sp{
    margin-top: 2vw;
    width: 48vw;
}

.footer-txt-container{
    text-align: center;
}

.address-title, .tel-title, .open-title, .horiday-title{
    color: #998661;
    font-size: 3.2vw;
    font-weight: 400;
}

.address-txt, .tel-txt, .open-txt, .horiday-txt{
    color: #998661;
    font-size: 3.2vw;
}

.address-container{
    display: flex;
    gap: 5vw;
    justify-content: center;
    margin-top: 3vw;
}

.address-ul, .address-text-ul{
    text-align: left;
}
.address-title, .address-txt{
    margin-bottom: 3.2vw;
}

.footer-txt{
    color: #998661;
    font-size: 3.2vw;
    margin-top: 3vw;
}

.contact-btn{
    color: #998661;
    font-size: 3.7vw;
    font-weight: 400;
    border-bottom: solid 2px #AD9463;
}

.contact-btn-txt{
    margin-top: 2.5vw;
}

.footer-fream2-sp{
    margin-top: 3.5vw;
    width: 76vw;
}

.copyright{
    color: #998661;
    font-size: 2.9vw;
    margin-top: 3.2vw;
}

.footer-inner{
    padding-bottom: 4vw;
    background-color: #FFFFFF;
    width: 86vw;
    border-top-right-radius: 42vw;
    border-top-left-radius: 42vw;
    margin: 0 auto;

}

.footer{
    background-image: url(../images/footer-back-ground-img-sp3.png);
    padding: 11vw 0 8.5vw 0;

}

.footer-logo-pc{
    display: none;
}

.footer-logo-sp{
    width: 39vw;
    padding-top: 5%;
    margin-bottom: 5px; 
}

/*----------FOOTER / PC-------------*/

@media screen and (min-width: 769px){
    .icon{
        width: 2.3vw;
        margin-right: 1vw;
    }

    .footer-logo{
        margin-top: 1.2vw;
    }

    .footer-logo-sp, .footer-fream1-sp, .footer-fream2-sp{
        display: none;
    }

    .footer-logo-pc, .footer-fream1-pc, .footer-fream2-pc{
        display: inline-block;.footer-fream1-pc;
    }

    .footer-fream1{
        height: 0;
        margin-top: -2.5vw;
    }

    .address-container{
        margin-top: 7.8vw;
        gap: 4vw;
    }

    .footer-fream1-pc{
        width: 27vw;
        
    }

    .footer-fream2-pc{
        width: 38vw;
        margin-top: 6vw;
    }

    .address-title{
        font-size: 1vw;
        margin-bottom: 1.8vw;
    }

    .address-txt{
        font-size: 1vw;
        margin-bottom: 1.8vw;
    }

    .footer-txt{
        font-size: 1vw;
        margin-top: 0.8vw;
    }

    .contact-btn{
        font-size: 1.25vw;
        
    }

    .contact-btn-txt{
        height: 2vw;
        margin-top: -1vw;
    }

    .copyright{
        font-size: 0.83vw;
        margin-top: 1.2vw;
    }

    .footer-inner{
        width: 45vw;
        border-top-right-radius: 36vw;
        border-top-left-radius: 36vw;
        padding-bottom: 2.4vw;
        margin: 0 0 0 auto;
        margin-right: 18.8vw;
        margin-top: -36vw;

    }

    .footer-logo-pc{
        width: 10.8vw;
        margin-top: 1vw;
        position: relative;
       
    }

    .icon-wrapper{
        height: 0;
        
    }

    .footer{
        padding-bottom: 4vw;
        padding-top: 6vw;
        height: 59.4vw;
        background-image: url(../images/footer-back-ground-img-pc2.jpg);
        background-position: left -110px top -170px;
        background-size: 130vw;
        height: 48.5vw;
        position: relative;
    }

    .icon-wrapper{
        position: absolute;
        top: 8vw;
        right: 64.8vw;
        
    }

    .footer-nav{
        display: inline-block;
        position: relative;
        top: 5vw;
        margin-left: 21.8vw;
    }

    .footer-nav-item{
        font-size: 1vw;
        height: 1.2vw;
    }

    .footer-li{
        height: 1.2vw;
        margin-top: 2.4vw;

    }

}