body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
main {
  margin: 20px;
  margin-top: 0;
  padding-top: 60px;
}

header {
  position: fixed; /*fixedを設定して固定*/
  height: auto; /*高さ指定*/
  width: 100%; /*横幅指定*/
  z-index: 999; /*最前面へ*/
  /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 90%;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  /*overflow-y: hidden;*/
  -webkit-app-region: drag;
}

p#sessid {
  margin-left: auto;
  margin-right: 10px;
}

.chatbox {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  margin: 15px auto;
}

.msgsd {
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
  width: 70%;
}
.msgsd textarea {
  width: 95%;
  height: 50px;
  border-radius: 10px;
  border: 1px solid gray;
  padding: 5px 10px 5px 20px;
}
.msgsd button {
  margin: 5px 10px;
  background: #5a94bd;
  color: white;
  border-radius: 50%;
  border: none;
  aspect-ratio: 1/1;
  width: 45px;
}
.msgsd button:hover {
  animation: rotate 0.1s linear;
  transform: rotate(-30deg);
}

#message-list {
  border: 1px solid gray;
  border-radius: 10px;
  width: 75%;
  margin: 10px auto;
  padding: 30px 20px;
  height: 65vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #f9f9f9;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    width: 40px;
  }
  100% {
    transform: rotate(-30deg);
    width: 50px;
  }
}

.icons {
  width: 100%;
  aspect-ratio: 1/1;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iconimg {
  background-image: url(../img/icon.png);
  width: 60%;
  height: 60%;
  aspect-ratio: 1/1;
  z-index: 10;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.ibgcolor {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  background-color: #316745;
  z-index: 0;
  position: absolute;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  /*margin-top: 50px;
  padding-bottom: 40px;*/
  background-color: #fff;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: 25%;
  margin: 0 20px;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100% / 3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
/*#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}
*/
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item[for="chats"] {
  background-color: #5abd78;
  color: #fff;
}
.tabs input:checked + .tab_item[for="questions"] {
  background-color: #bd655a;
  color: #fff;
}
.tabs input:checked + .tab_item[for="feedbacks"] {
  background-color: #5aa1bd;
  color: #fff;
}

/* 全体 */
.sb-box {
  position: relative;
  overflow: hidden;
  /*margin: 12px auto 12px 0;*/
  margin :12px auto 12px auto;
  width: 100%;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0; /* 画像の位置を上から0に */
  width: 35px; /* 画像の幅 */
  height: 35px; /* 画像の高さ */
  aspect-ratio: 1/1!important;
  border-radius: 50%; /* 画像を丸く表示する */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 24px; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
  border-radius: 50%; /* 画像を丸く表示する */
  border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 90px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 44px; /* ネームの位置を上から83に */
  color: #777; /* ネームのカラー */
  font-size: 10px; /* ネームのフォントサイズ */
  font-weight: 800;
}
/* アイコンネーム（左） */
.icon-name-left {
  left: -7px; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}

.uzicn{
  font-size: 16px!important;
  margin-right: 1.5px;
}
.verifiedicn{
  color: #25a4d6;
}
.adminicn{
  color: #166de3;
}

.hosticn{
  color: #197f5b;
}

.icon-name-left{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.posttime {
  text-align: center;
  color: #a7a7a7;
  margin: auto;
  font-size: 70%;
  position: absolute;
  width: 80px;
  top: 60px;
}

/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 5px 10px 25px 95px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
  float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 6px; /* 吹き出しを角丸に */
  background: #fff; /* 吹き出しの背景色 */
  color: #333; /* 吹き出し内のテキストのカラー */
  font-size: 15px; /* 吹き出し内のフォントサイズ */
  line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 8px 18px; /* 吹き出し内の上下左右の余白 */
  word-break: break-word;
}
.sb-txt > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
  left: -7px;
  border-width: 7px 10px 7px 0;
  border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
  right: -7px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}

/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* アイコン画像 */
  .icon-img {
    width: 60px; /* 画像の幅を-20px */
    height: 60px; /* 画像の高さを-20px */
  }
  /* アイコンネーム */
  .icon-name {
    width: 60px; /* 画像の幅に合わせて-20px */
    top: 62px; /* ネームの位置を上から62に */
    font-size: 9px; /* ネームのフォントサイズを-1px */
  }
  /* 吹き出し（左） */
  .sb-side-left {
    margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
  }
  /* 吹き出し（右） */
  .sb-side-right {
    margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
  }
  /* 吹き出し内のテキスト */
  .sb-txt {
    padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
  }
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
  height : 50%;
  overflow : auto;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}