*{
  /* border: #06C755 1px solid; */
}

body{
  width: 100%;
  width: max-content;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  color: #313131;
  background-color: #FCFCFC;
}

img{
  vertical-align:top;
}

/*********************************
    フレーム
*********************************/
.phone-frame {
  width: 375px;  /* スマホ画面の幅 */
  height: 100%;
  max-height: 100vh;
  /* スマホ画面の高さ */
  height: 900px;
  border: 10px solid #313131; /* 外枠 */
  border-radius: 36px; /* 角を丸くする */
  padding: 10px;
  background: #f8f8f8; /* スマホの背景色 */
  box-shadow: 0 0 20px rgba(49, 49, 49, 0.2); /* 影をつける */
  overflow: hidden; /* 枠をはみ出さないようにする */
  position: relative;
  margin: 0 auto;

  /* 画面幅が768px以下（スマホなど）のときにフレームを消す */
    @media screen and (max-width: 600px) {
    border: none;  /* フレームをなくす */
    border-radius: 0;  /* 角丸をなくす */
    box-shadow: none;  /* 影もなくす */
    padding: 0;  /* 内側の余白もなくす */
  }
}

.screen-content {
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* 縦スクロールを可能にする */
  background: rgba(49, 49, 49, 0.1); /* スマホ内の背景色 */
  padding: 10px;
  border-radius: 36px;
  /* スクロールバーを隠す */
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */

  @media screen and (max-width: 600px) {
    padding: 0;
    border-radius: 0;  /* 角丸をなくす */
  }
}


/*********************************
    チャットエリア
*********************************/
#chatContainer {
  width: 100%;
  max-width: 500px;
  height: 60%;
  position: relative;
}

#chatWindow {
  height: 100%;
  overflow-y: auto;
  display: flex;
  /* 新しいメッセージが下に追加される */
  flex-direction: column;
  background-color: #7494C0;
  border-radius: 30px 30px 0 0;
  padding: 15px;

  /* スクロールバーを隠す */
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */

  @media screen and (max-width: 600px) {
    border-radius: 0;  /* 角丸をなくす */
  }
}

/******** 左の固定吹き出し **********/
.left {
  background-color: #fcfcfc;
  text-align: left;
  position: relative;
  margin-right: auto;
  padding: 10px;
}

.receiver{
  background-color: #fcfcfc;
  text-align: left;
  margin-right: auto;
  position: relative;
  padding: 10px;
}

.left::after, .receiver::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #fcfcfc;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/******** 右の固定吹き出し **********/
.right {
  background-color: #06c755;
  text-align: left;
  margin-left: auto;
  position: relative;
  padding: 10px;
}

.sender{
  background-color: #06C755;
  text-align: right;
  margin-left: auto;
  position: relative;
  padding: 10px;
}

.right::after, .sender::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 10px;
  border-left: 20px solid #06C755;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/******** スタンプ **********/
.stamp {
  background-color: transparent; /* 背景を透明に */
  padding: 0; /* スタンプ周りの余白をなくす */
}

/* 噴き出しを消す */
.stamp::after{
  display: none;
}

.stamp img {
  width: 150px; /* スタンプ画像のサイズ調整 */
  height: auto;
}


/*********************************
    送信エリア
*********************************/
#messageInputArea{
  width: 100%;
  height: max-content;
  display: flex;
  gap: 5px;
  padding: 10px;
  background-color: #313131;
}

.message {
  max-width: 80%;
  margin-bottom: 15px;
  border-radius: 10px;
  font-size: 14px;
}

#messageInput{
  background-color: #fcfcfc;
  /* color: #ccc; */
  border-radius: 20px;
  padding: 5px 10px;
  /* border: #06C755 1px solid; */
  width: 55%;
  font-size: 16px;
}

/******** 受信者/送信者 **********/
#messageSide{
  width: 25%;
  text-align: center;
  cursor: pointer;
  color: #fcfcfc;
  appearance: auto;
  background-color: #313131;

  & option{
    color: #313131;
    background-color: #fcfcfc;
  }
}

/******** 送信ボタン **********/
#sendMessageButton{
  width: 20%;
  background-color: #06C755;
  color: #fcfcfc;
  border-radius: 10px;
}


/*********************************
    タブ
*********************************/
#stampSetContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 95%;
  margin: 5px auto 5px auto;
  padding: 0 5px;
}

#stampSets {
  display: flex;
  overflow: hidden;
  /* overflow: auto; */
  /* overflow-x: auto; */
  /* width: 250px; */
  width: 100%;
}

.stampSet {
  width: 100%;
  height: 100%;
  margin: 0 5px;
  text-align: center;
  cursor: pointer;
}

.stampSet img {
  width: 100%;
  max-width: 50px;  /* 横幅を50pxに設定 */
  height: 100%;
  max-height: 50px; /* 高さを50pxに設定 */
  object-fit: cover; /* 画像がタブのサイズに収まるように調整 */
}

#prevSet, #nextSet{
    color: #313131;
    text-decoration: none;
}

#stampListContainer {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  grid-template-rows: repeat(8, auto);   /* 8行 */
  gap: 10px;
  height: 200px;
  overflow: auto;
  padding: 0 5px;

  /* スクロールバーを隠す */
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */
}

.stampImage {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
}