body{
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    margin: 0;
    padding: 0;
}
#botTitle{
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    text-align: center;
    background-color: #585858;
    color: whitesmoke;
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 0px 4px 0px;
}
#titleBox{
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    text-align: center;
    background-color: #585858;
    color: whitesmoke;
    font-weight: 700;
    font-size: 16px;
    padding: 4px 0px 4px 0px;
}
#talkBox{
    overflow: auto;
    background-color: #e0e0e0;
    height: calc(100vh - 96px );/*26px - 36px - 4px - 4px - X */
    margin-top: 32px;
    padding: 8px 4px 8px 4px;
}
.sendBox{
    position: absolute;/*←絶対位置*/
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgb(216, 216, 216);
    height: 48px;
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}

#sendBox{
    position: absolute;/*←絶対位置*/
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgb(255 254 254);
    height: 48px;
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}

#question{
    width: calc(100% - 100px);
    font-size: 1.07rem;
}
#commentBox{
    width: 300px;
    margin-left: 16px;
    background-color: #f1f1f1;
    border: solid 1px lightgray;
    border-radius: 20px;
    font-size: 1.07rem;
    padding-left: 8px;
}
#sendBtn{
    background-image: url('../img/paper-plane-sharp-solid.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    margin-left: 16px;
    width: 64px;
    height: 24px;
    cursor: pointer;
}
#sendBtn:active{
    opacity: 60;
}

.myMsg{
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.myMsg p{
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
    padding: 8px;
    max-width: 300px;
    height: 100%;
    border-radius: 12px;
    background: #86D97B;
    font-size: 15px;
    text-align: left;
}
.myMsg p:after {
    content: "";
    position: absolute;
    top: 3px;
    right: -19px;
    border: 8px solid transparent;
    border-left: 18px solid #86D97B;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}
.myIcon{
    width: 72px;
    object-fit: contain;
}


.botMsg{
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}
.botMsg p{
    display: inline-block;
    position: relative;
    margin: 0 0 0 0px;
    padding: 10px;
    max-width: 250px;
    height: 100%;
    border-radius: 12px;
    background: #f2f5f3;
}
.botMsg p:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 3px;
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #f2f5f3;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
}
.botIcon{
    width: 72px;
    object-fit: contain;
    transform: scale(-1, 1);
}