/* font-family: 'Kaisei Opti', serif; */

html{
    font-family: 'Kaisei Opti', serif;
}

h2,a{
    font-size: 1.3rem;
}

h1{
    width: 33%;
    font-size: 2vw;
    position: fixed;
    z-index: 10;
    border-bottom-right-radius: 25px;
    padding-right: 5px;
}

h2 p{
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
}

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

.name{
    background-color:rgba(255, 68, 0, 0.705);
    color: white;
    padding-top: 10px;
    padding-bottom: 7px;
}

.pc{
    display: block !important;
    width: 100%;
    opacity: 0;
    animation: fadein-anim 2s linear forwards;
}

.sp{
    display: none !important;
}

@keyframes fadein-anim {
    100%{
        opacity: 1;
    }
}

.pcBackGround{
    width: 100%;
    height: auto; /* 必ずvhで指定*/
    background-image: url(../images/hana003-1.png);
    background-repeat: no-repeat;
    background-size:cover;
    background-position:bottom;
    opacity: 0.8;
    position: fixed;
    inset:0; /*真ん中で固定するときは0指定*/
    z-index: -1; /* これであらゆる要素の裏側(背面）に回す */
}

.siteWrapper{
    width: 100%;
    margin-inline:auto;
    background-color: rgba(255, 255, 255, 0.753);
    text-align: center;
}

/************************************** ドロワーメニューの記述 *************************************/

.drawer{
    width: 3rem;
    height: 3rem;
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 100;
    background-color: #fff;
    border-radius: 5px;
    background-image: url(../images/menu.png);
    background-position: center;
    background-size: 2.5rem;
    background-repeat: no-repeat;
}

.drawer_menu{
    background-color: rgba(255, 255, 255, 0.582);
    width: 9rem;
    height: 20rem;
    position: fixed;
    inset-inline-end:-10rem;
    transition: all 0.3s linear;
    padding-top: 100px;
    text-align: center;
    border-radius: 0 0 0 10px;
    z-index: 10;
}

.drawer_menu li{
    margin-bottom: 2rem;
}

.drawer_menu a{
    padding: 1rem;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
}

.open{
    inset-inline-end: 0;
}

.active{
    background-image: url(../images/close.png);
}

/************************************** ドロワーメニューの記述 ここまで*************************************/

h2{
    padding-bottom: 10px;
}

.drawer_menu a:hover{
    cursor: pointer;
    transform: scale(1.2, 1.2);
    color: orangered;
}

#sec01{
    position: relative;
}

.coin{
    position: fixed;
    bottom: 8%;
    left: 5%;
    z-index: 10;
    opacity: 1;
    width: 18%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 12px;
}

.coin img{
    transition: all 1s linear 0s;
    cursor: pointer;
}

.coin img:hover{
    transform: rotateY(360deg);
}

.open-title{
    position: absolute;
    bottom: 35%;
    left: 24%;
    font-family: 'Kaisei Opti', serif;
    font-size: clamp(0.875rem, 0.1875rem + 3.4375vw, 2.25rem);
    color: rgba(255, 255, 255, 0.397);
    margin-top: 2rem;
    margin-bottom: 3rem;
    background-color: rgba(255, 255, 255, 0.733);
    padding: 7px;
    border-radius: 5px;

    animation-name: fadeinanime;
    animation-fill-mode: forwards;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-direction: normal;
}

@keyframes fadeinanime{
    0%{
        opacity: 0;
    }

    65%{
        color: rgb(251, 255, 0);
    }

    100%{
        opacity: 1;
        color: rgb(0, 0, 0);
    }
}



.open-text{
    width: 100%;
    font-family: 'Kaisei Opti', serif;
    font-size: 0.8rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.open-text p{
    padding: 0.4rem;
}

.news-wrapper{
    width: 70%;
    margin: 0 auto;
}

.news-wrapper h2{
    margin-top: 2rem;
}

.news-wrapper ul{
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.news-wrapper li{
    font-size: 0.8rem;
    text-align: left;
    border-bottom: dotted 1px lightsteelblue;

}

.salon-text{
    width: 80%;
    background-color:rgb(246, 232, 255);
    margin: 0 auto;
    outline: 2px solid rgb(255, 209, 192);
    outline-offset: -6px;
}

.salon-text ul{
    padding: 1.5rem;
}

.salon-text li{
    text-align: left;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
    line-height: 1.5rem;
}


.section-inview{
    width: 100%;
    margin-top: 5rem;
}

#imgBox2{
    width: 80%;
    margin: 0 auto;
    padding: 1rem;
}

#imgBox3{
    width: 80%;
    margin: 0 auto;
    padding: 1rem;
}

#imgBox2 img{
    border-radius: 10px;
}

#imgBox3 img{
    border-radius: 10px;
}


/* .section-inview{
    width: 100%;
    min-height: 80vh;
    margin-top: 1rem;
    position: relative;
}

.section-inview div{
    max-width: 70%;
}

.section-inview img{
    border-radius: 10px;
}

.imgBox2{
    position: absolute;
    top:12%;
    left: 21%;
    z-index: 5;
}

.imgBox3{
    position: absolute;
    top: 41%;
    left: 10%;
}

.txtBox1{
    margin-top: 3rem;
    margin-left: 16%;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
    
} */

.menu-wrapper{
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    margin-bottom: 3rem;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
}

.menu-text{
    font-size: 0.8rem;
    margin-top: 2rem;
    text-align: left;
    padding: 3px;
}


.menu-text2{
    margin-top: 1rem;
    text-align: left;
    padding: 1rem;
    line-height: 28px;
    background-color:rgb(246, 232, 255);
    border-radius: 8px;
}

.menu-text3 img{
    transition: all 0.6s ease 0s;
}

.menu-text3 img:hover{
    cursor: pointer;
    transform: scale(1.2, 1.2);
}

.menu-text3{
    margin-top: 1rem;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
    text-align: center;
    padding: 3px;
    line-height: 30px;
}


.menu-text4{
    text-align: left;
    margin-top: 2rem;
    background-color:rgb(246, 232, 255);
    padding: 1rem;
    border-radius: 8px;
}

.menu-text5{
    margin-top: 1rem;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
    text-align: center;
    padding: 3px;
    line-height: 30px;
}

span{
    color: orangered;
    border-bottom: dotted 1px orangered;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
}



.slider-box{
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.slider-box img{
    border-radius: 20px;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

#sec04{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.access-wrapper{
    width: 70%;
    margin: 0 auto;
}

.access-text{
    margin-bottom: 2rem;
}

.access-text li{
    font-family: 'Kaisei Opti', serif;
    font-size: clamp(0.8rem, 0.65rem + 0.75vw, 1.1rem);
    padding-bottom: 5px;
}

.access-img{
    display: flex;
    justify-content: center;
}

.access-img div{
    width: 40%;
    padding: 5px;
}

.access-img img{
    border-radius: 10px;
}

.sns-box{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.sns-box div{
    padding: 1vw;
}

.sns-box div:hover{
    cursor: pointer;
    transform: scale(1.2, 1.2);
}

.sns-box a img{
    width: 40px;
}

.access-map{
    margin-top: 2rem;
}

footer{
    width: 100%;
    height:auto;
    margin-top: 2rem;
    padding-bottom: 65%;
    background-image: url(../images/hana003-5.png);
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    padding-top: 14%;
}


/************************************** メディアクエリ　パソコン版 *************************************/
@media (960px < width){

    .pc{
        display: none !important;
    }

    .sp{
        display: block !important;
        width: 100%;
        opacity: 0;
        animation: fadein-anim 2s linear forwards;
    }

    @keyframes fadein-anim {
        100%{
            opacity: 1;
        }
    }
        
        
    h1{
        width: 30rem;
        font-size: 1.2rem;
        position: static;
        z-index: 0;
        border-bottom-right-radius: 0;
    }

    h1,h2,a{
        padding-top: 1rem;
    }

    .siteWrapper{
        max-width: 30rem; /*30文字分*/
        margin-inline:auto; /* margin: 0 auto; と同じ。最新の書き方*/
        /* margin-left: auto;
        margin-right: auto; */
        background-color:  rgba(255, 255, 255, 0.644);/*透明の指定*/
        text-align: center;
    }

    .drawer_menu{
        height: 15rem;
        inset-block: 0;
        margin-block: auto;
        inset-inline-end: 4rem;
        border-radius: 10px;
        padding-top: 2rem;
    }

    .open-title{
            position: static;
            font-size: 24px;
            background-color: rgba(255, 255, 255, 0);
        }

        .salon-text li{
            font-size: 0.8rem;
        }

        .coin{
            width: 14%;
        }


    }

    

@media (max-width:960px){

    .pcBackGround{
        opacity: 0.4;
    }

}

    /* .section-inview{
        height: 170vh;
    }

    }

    @media (max-width:900px){

        .section-inview{
            height: 160vh;
        }
     

    }
    @media (max-width:860px){

        .section-inview{
            height: 150vh;
        }
     

    }
    @media (max-width:800px){

        .section-inview{
            height: 140vh;
        }
     

    }
    @media (max-width:750px){

        .section-inview{
            height: 130vh;
        }
     

    }
    @media (max-width:700px){

        .section-inview{
            height: 120vh;
        }
     

    }
    @media (max-width:650px){

        .section-inview{
            height: 110vh;
        }
     

    }
    @media (max-width:600px){

        .section-inview{
            height: 100vh;
        }
     

    }
    @media (max-width:550px){

        .section-inview{
            height: 90vh;
        }
     

    }
    @media (max-width:500px){

        .section-inview{
            height: 80vh;
        }
     

    } */


@media (max-width:450px){

    .coin{
        width:23% ;
    }

    /* .section-inview{
        height: 70vh;
    } */


}