body {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: 660px;
  min-height: 100dvh;    
  background: rgb(255, 255, 255); 
  flex-direction: column;
}
/* body {
  
  height: 100%;
} */

/* ヘッダー・タイトル */
.roomTitle{
  padding: 0%;
  width: 100%;
  background: rgb(105, 116, 245);
  height: auto;
  align-items: center;
}
.big-title{
  display: flex;
  margin: 0;
  margin-left: 1%;
  color: aliceblue;
  align-items: center;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 5px;
}
/* ヘッダー・タイトル */

/* 説明部分 ---------------------------------------------------------*/
.descriptive-container{
  margin: 1% auto;
  display: flex;
  flex-direction: row;
  width: 88%;
  height: 20%;
  background-color: rgb(255, 255, 255);
  border: solid 5px rgb(192, 196, 237);
  border-radius: 20px;
  /* background: linear-gradient(0deg, #dcaeff 0%, #bea5ff 100%); */
}

.des-subtitle{
  text-align: center;
  font-size: 1.1vw;
  font-weight: bold;
  color: rgb(105, 116, 245);
  /* -webkit-text-stroke: 1px #dcaeff; */
  /* background-color: antiquewhite; */
  margin: 1%, auto;
}

.sub-descriptive-container{
  margin: auto;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.504);
  border-radius: 25px;
  padding: 1%;
}

/* 画像の設定 */
.pepl-watching{
  padding: 1.5%;
  width: 30%;
  height: auto;
  align-items: center;
  margin:  auto;
  /* border: solid 3px white; */
}
/* 説明部分--------------------------------------------------------- */

/* 以下全要素の設定 */
.all-container{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  background: rgb(204, 244, 255)
}


/* 名前や新部屋の作り方 */
.basic-container{
  width: 89%;
  margin: 0% auto;
  margin-bottom: 1%;
  display: flex;
  flex-direction: row;
}

.insert-cont{
  margin: auto;
  margin-left: 0;
  background-color: rgb(255, 255, 255);
  padding: 1%;
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  border: solid 5px rgb(192, 196, 237);
}

.create-room{
  margin: auto;
  margin-right: 0;
  padding: 1%;
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(87, 146, 198);
  border-radius: 20px;
  /* border: solid 5px rgb(124, 157, 214); */
}

.create-input{
  width: 50%;
  height: auto;
  margin: auto;
  margin-right: 0;
  /* height: 100%; */
}
.create-button{
  width: 40%;
  height: auto;
  font-size: 1.0vw;
  background: rgb(80, 89, 192);
  font-weight: bold;
  color: white;
  border-radius: 100vh;
  border: solid 2px rgb(44, 73, 145);
  margin: auto;
}
.create-button:hover{
  color: rgb(154, 235, 235);
  background-color: azure;
  border: solid 2px rgba(77, 127, 255, 0.534);
}



/* チャットルームの表示 */
:root{
  --room-main-width: 92%;
  --room-sub-width: 97%;
  --room-font-size:1.0vw;
}

h2{
  display: inline-block;
  margin: 0;
  background-color: white;
  margin-left: 5%;
  width: 30%;
  text-align: center;
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8); /* ぼかし */
}

.explain-font{
  display: inline-block;
  background-color: white;
  font-size: 1vw;
  margin-left: 5%;
  width: 40%;
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8); /* ぼかし */
}


.room-container{
  flex-direction: column;
  margin: 1% auto;
  display: flex;
  /* background-color: #9900ff9c; */
  width: var(--room-main-width);
  height: auto;
  overflow-y: auto; 
  border-radius: 1%;
  padding: 3px;
  /* margin-top: 1%;
  margin-bottom: 1%; */
}

.room-info{
  flex-direction: row;
  display: flex;
  align-items: center;   
  margin: 0 auto;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 10px;
  background-color: rgb(255, 255, 255);
  width: var(--room-sub-width);
  height: 30%;
  border: solid 5px rgb(192, 196, 237);
  border-radius: 5px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.room-name{
  margin-left: 5%;
  flex: 1 1 auto;   
  color:  rgb(105, 116, 245);
  font-size: var(--room-font-size);
  font-weight: bold;
  text-align: left;
}

.room-members{
  /* margin-left: 20%; */
  flex: 0 0 70%;            /* ← 追加：中央カラムを“文字幅”で固定 */
  color: rgb(105, 116, 245);
  font-size: var(--room-font-size);
  font-weight: bold; 
  text-align: center;
}

.room-button{
  font-size: var(--room-font-size);
  background: rgb(105, 116, 245);
  font-weight: bold;
  flex: 0 0 10%;
  color: white;
  width : 5%;
  height: 70%;
  margin-left: auto;
  margin-right: 1%;
  margin-top: 3px;
  margin-bottom: 3px;
  border-radius: 100vh;
  border: solid 2px rgb(44, 73, 145);
}
.room-button:hover{
  color: rgb(154, 235, 235);
  background-color: azure;
  border: solid 2px rgba(77, 127, 255, 0.534);
}

.room-container-sub{
  flex-direction: column;
  margin: 1% auto;
  display: flex;
  /* background-color: #ffffff9c; */
  width: var(--room-main-width);
  height: auto;
  overflow-y: auto; 
  border-radius: 1%;
  padding: 3px;
  margin-bottom: 3%;
}
footer {
  background-color: rgb(240, 240, 240);
  padding: 10px;
  text-align: center;
}