/*===================================================================================================
## めーちゃんチャット
===================================================================================================*/

#MeiIntroductionFrameAll{
    position: relative;
    
    margin: auto;
    width: 100%;
    height: 100%;;
}

#MeiIntroductionTitle{
    position: fixed;
    z-index: 101;;
    top:20px;
    width:fit-content;
    left:20px;
    font-family: "Kokoro";
    color: white;
    text-shadow: 0 0 3px rgba(0,0,0,0.8),  0 0 4px rgba(0,0,0,0.6);
    
    font-size: 32px;
    letter-spacing: 3px;
    font-weight: 320;
}


#MeiIntroductionTitle::after{
    content:"白羊めい🐏🌙.*";
    white-space: pre-wrap;
}

#MeiIntroductionContentText{
    top:75px;
    position: absolute;
    font-size: 20px;
    font-weight: 200;
    font-family: "Kokoro";
    letter-spacing: 2px;
    left:8%;
    width:84%;
    bottom: 0;
    overflow: hidden;

    box-sizing: border-box;
    padding:10px;
    /*文章折り返し*/
    overflow-wrap: break-word;
    word-break: break-all;   
}


/*===================================================================================================
## めーちゃんチャットのボタンとか画像とかをまとめる
===================================================================================================*/

#MeiIntroductionAssetFrame{
    position: relative;
    width:100%;
    height:100%;
    display: flex;
    overflow: hidden;
}



/* 左側に画像 */
#MeiIntroductionAvatarColumn{
    position: relative;
    height:100%;
    flex: 8;
    display: flex;
    align-items: flex-end;
}

#MeiIntroductionAvatarImage{
    position: relative;
    width:100%;
    height: auto;
}


/* 右側に吹き出し兼ボタン */

#MeiIntroductionAvatarResetButtonColumn{
    position: relative;
    height: 100%;
    flex: 7;
    align-items: center; /* 縦中央 */
}

#MeiIntroductionButton{
    position: absolute;
    bottom:30%;
    left:105px;
    width:50%;
    min-width:100px;
    aspect-ratio: 1.1;
    background-color: rgba(255, 255, 255, 0.514);
    
    box-sizing: border-box;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 

    z-index: 100;
    cursor: pointer;
}
#MeiIntroductionButton::after{
    content: "テキトーな\A自己紹介☝️";
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1.4px;
    white-space: pre-wrap;
}

#MeiIntroductionButtonSub1,#MeiIntroductionButtonSub2,#MeiIntroductionButtonSub3{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.514);
    border-radius: 100%;
}


#MeiIntroductionButtonSub1{
    bottom:28%;
    left:64px;
    width:50px;
    aspect-ratio: 1.1;
}
#MeiIntroductionButtonSub2{
    bottom:27%;
    left:34px;
    width:27px;
    aspect-ratio: 1.1;
}

#MeiIntroductionButtonSub3{
    bottom:26%;
    left:16px;
    width:16px;
    aspect-ratio: 1.1;
}

#MeiIntroductionButton:hover {
    background-color: rgba(255, 255, 255, 0.823);
}


#MeiIntroductionNavifator{
    position: absolute;
    bottom:15px;
    text-shadow: 0 0 3px rgba(0,0,0,0.8),  0 0 4px rgba(0,0,0,0.6);
    width:fit-content;
    left:20px;
    font-size: 19px;
    font-family: "Kokoro";
    color: white;
    width:95%;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid white;
    box-sizing: border-box;
}