body{
    background:linear-gradient(to bottom right,rgb(255, 217, 119),rgb(255, 174, 186));
    background-size:cover;
    background-attachment: fixed;
    margin:5% 10%;
}

.op{
    background-color:white;
    background-size:cover;
    /*height:100%;*/
    width:100vw;
    margin:-5% -10%;
    position:absolute;

    animation: op 3s;
    /*animation-fill-mode: forwards;*/
}

.leaf{
    height:50vh;
    width:25vw;
    background-image: url(画像/葉.png);
    background-size: 25vw auto;
    background-repeat:no-repeat;
    margin:0 0 -20vh;
    position:absolute;
}

.all{
    display:flex;
    position:relative;
}

.titlelogo{
    width:60%;
    height:28vw;
    /*background-color: rgb(218, 253, 255);*/
    border-radius: 50%;
    background-image: url(画像/logo2.PNG);
    background-size: 80%;
    background-position:center;
    background-repeat:no-repeat;
    margin:10% auto 0 0;

}

.titlelogo p{
    margin:10% 15%;
    font-size:10%;
}


.msg{
    width:15%;
    height:100%;
    margin:5%;
    animation: fadeIn 5s ease 1s 1 normal backwards;
}

.msg p{
    margin:5% 5%;
    font-size: 3vw;
    writing-mode: vertical-rl;
    font-family: "Hannari";
}

.menu{
    width:25%;
    height:150px;
}

.menu div.tag{
    height:15%;
    transition: 1s all;
    margin:15% auto;
}

.menu div a{
    text-align:center;
    text-decoration:none;
    color:#ffffff;
    line-height:100%;
}

.menu div a div{
    background-color:hsl(103, 25%, 44%);
    font-size:0.5rem;
    border-radius: 20px 0 20px 0;
}

.panda_out{
    width:auto;
    
    display:flex;
    position:relative;
}

.tap{
    font-size:1.7vw;
    color:#263e1c;
    text-align:center;
}

.panda{
    width:100%;
    aspect-ratio: 1 / 1.2;
    background-size: 100% auto;
    animation: panda 0.5s;
    animation-iteration-count: infinite;
    background-repeat:no-repeat;
}

#msgbox{
    background-image: url(画像/自己紹介.png);
    height:5vw;
    width:8vw;
    background-size:5vw;
    background-repeat:no-repeat;
    transition: 1s all;
    margin: 0 0;
    opacity:0;
    position:absolute;
}

#msgbox.on{
    background-image: url(画像/自己紹介.png);
    height:75vw;
    width:75vw;
    background-size:75vw;
    background-repeat:no-repeat;
    transition: 1s all;
    margin: -140% -370%;
    opacity:1;
}






.main1_title{
    font-weight: bold;
    margin:15px;

}

.main1{
    border-radius:10px;
    background: rgba(255, 255, 255, 0.2);
    color:#263e1c;
    padding:15%;
    text-align:center;
    line-height:150%;
}

.main2{
    border-radius:10px;
    background: rgba(255, 255, 255, 0.2);
    color:#263e1c;
    padding:1%;
    margin:15px 0;
    text-align:center;
    line-height:150%;
}

.main1 div{
    text-align:left;
}

hr{
    margin:10% auto 5vh 0;
    height:2px;
    background-color:#263e1c;
}

.shosai{
    text-align:right;
    color:#263e1c;
    font-size:10px;
}




/*fee.html*/


.logoContainer .logo{
    width:30%;
}



.fee{
    width:77.5%;
    height:300%;
}
.container{
    height:20px;
    width:100px;
    position:relative;
    margin:20px 0 5px 0;
}

.feeMenu{
    margin:5px;
}


.open{
    cursor:pointer;
    width:100%;
    height:100%;
    background:linear-gradient(to right,hsl(102, 28%, 36%),rgb(134, 177, 79));
    border:solid 1.5px rgb(48, 91, 45);
    color:#ffffff;
    font-size:0.5%;
    padding:0px;
    text-align: center;
    border-radius:5px;
    position:absolute;
    top:50%;
    margin-top:-15px;
}

.off{
    display:none;
    opacity:0;
    height:0;
    margin:0 auto 200% 0;
}

.feeImg{
    border-radius:20px 20px 0 0;
    background-size:cover;
    background-repeat:no-repeat;
    width:100%;
    aspect-ratio: 1 / 1;
    position:absolute;

}


/*美容*/
#biyo{
    width:90%;
    position:relative;
    margin:0 auto 95vw 0;
}

#biyo .feeImg{
    background-image:url(画像/美容鍼.PNG);
}

#biyo .feeText{
    background: rgba(255, 255, 255, 0.2);
    border-radius:20px;
    position:absolute;
    margin:50% auto;
    width:100%;
    aspect-ratio: 1/1;
}


/*頭*/
#atama{
    width:90%;
    position:relative;
    margin:0 auto 100vw 0;
}


#atama .feeImg{
    background-image:url(画像/頭鍼.png);
}

#atama .feeText{
    background: rgba(255, 255, 255, 0.2);
    border-radius:20px;
    position:absolute;
    margin:50% auto;
    width:100%;
    aspect-ratio: 1/1;
}


/*身体*/

#karada{
    width:90%;    
    position:relative;
    margin:0 auto 85vw 0;
}

#karada .feeImg{
    background-image:url(画像/身体鍼灸.PNG);
}

#karada .feeText{
    background: rgba(255, 255, 255, 0.2);
    border-radius:20px;
    position:absolute;
    margin:50% auto;
    width:100%;
    aspect-ratio: 1/0.5;
}


/*もみほぐし*/
#momi{
    width:90%;    
    position:relative;
    margin:0 auto 80vw 0;
}

#momi .feeImg{
    background-image:url(画像/もみほぐし.PNG);
}

#momi .feeText{
    background: rgba(255, 255, 255, 0.2);
    border-radius:20px;
    position:absolute;
    margin:50% auto;
    width:100%;
    aspect-ratio: 1/0.5;
}


/*猫背*/
#neko{
    width:90%;    
    position:relative;
    margin:0 auto 50vw 0;
}

#neko .feeText{
    background: rgba(255, 255, 255, 0.2);
    border-radius:20px;
    position:absolute;
    margin:0% auto;
    width:100%;
    aspect-ratio: 1/0.5;
}



.text{
    margin:40% 10% 10% 10%;
    color:#263e1c;
    line-height:100%;
}

#neko .feeText .text{
    margin:10% 10% 10% 10%;
    color:#263e1c;
    line-height:100%;
}


.sejutu{
    font-weight:bold;
    text-align:center;
    font-size:5%;
}

.setumei{
    font-size:1%;
}