/* Google Fonts の読み込み  */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Shippori+Antique&display=swap');

body{
    margin: 0;
    padding: 0;
}

/* --- 共通レイアウト --- */
#scenes {
  max-width: 800px;
  padding: 0.4em 0 0 0;
}

.scenes-detail {
  display: flex;
  flex-direction: column;
  margin: 1em; /* 上下左右に等間隔のマージン  */
  border: 2px solid #000;
  box-shadow: 0 2px 4px rgb(200, 200, 200);
  background-color: #000;
}

/* --- ふきだし配置エリア（背景：黒）  --- */
.top, .bottom {
  position: relative;
  display: flex;
  flex-direction: row; /* 新仕様：横並びに対応 */
  flex-wrap: nowrap;
  align-items: flex-end; /* topでは下（ビデオ側）に揃える */
  gap: 15px;
  background-color: #000; /* 背景は黒  */
  box-sizing: border-box;
  min-height: 40px;
  font-size: 16px;
  padding: 0 1em;
}

.bottom {
  align-items: flex-start; /* bottomでは上（ビデオ側）に揃える */
}

/* --- ビデオエリア --- */
.video-area,
.img-area {
  width: 100%;
  background-color: #000;
  line-height: 0;
}

.video-area video,
.img-area img {
  width: 100%;
  display: block;
}

/* --- ふきだし基本設定 --- */
.S, .T {
  position: relative;
  background-color: #fff; /* 背景は白  */
  box-sizing: border-box;
  z-index: 10;
  width: fit-content;
  max-width: 100%;
  text-align: justify;
  line-height: 1.2em;
}
.S {
  padding: 12px 18px;
}
.T {
  padding: 12px 26px;
}

/* 横方向の配置規定（Flex Row内での調整） */
.left { margin-right: auto; }
.R { margin-left: auto; }
.C { margin-left: auto; margin-right: auto; }

/* 2つ配置された際の特殊調整（leftとrightが混在する場合など） */
.left + .R { margin-left: 0; }
.left + .C { margin-left: 0; }
.C + .R { margin-right: 0; }

/* --- しゃべり言葉 (speak)  --- */
.S {
  font-family: 'Shippori Antique', sans-serif;
  border-radius: 1em; /* 1emの角丸  */
  color: #000; /* テキストは黒  */
}

/* --- 心の声 (think)  --- */
.T {
  font-family: 'Kiwi Maru', serif;
  border-radius: 45%;
  color: #666; /* テキストは灰色  */
}

/* --- しっぽの設定 --- */
.S::after, .T::after {
  content: "";
  position: absolute;
}

/* しっぽ形状  */
.S::after { border: 15px solid transparent; } /* 三角形 */
.T::after { width: 15px; height: 15px; background-color: #fff; border-radius: 50%; } /* 円形 */

/* 方向（topは下向き、bottomは上向き）  */
.top .S::after { bottom: -28px; border-top-color: #fff; }
.top .T::after { bottom: -18px; }
.bottom .S::after { top: -28px; border-bottom-color: #fff; }
.bottom .T::after { top: -18px; }

/* しっぽの横位置規定クラス  */
.tail-L::after { left: 15%; }
.tail-C::after { left: 50%; transform: translateX(-50%); }
.tail-R::after { right: 15%; }
.tail-none::after { display: none !important; }

/* --- チャット・レビュー用（以前の指定を維持） --- */
.p-chat { display: flex; flex-direction: column; gap: 20px; }
.p-chat__item { display: flex; align-items: flex-start; gap: 15px; }
.p-chat__item--right { justify-content: flex-end; }
.p-chat__item--right .p-chat__bubble { background-color: #6ed04f; order: 1; }
.p-chat__item--right .p-chat__bubble::after { right: -15px; left: auto; border-left-color: #6ed04f; border-right-color: transparent; }
.p-chat__item--right .p-chat__icon { order: 2; }
.p-chat__icon { width: 50px; height: 50px; }
.p-chat__icon img { width: 100%; border-radius: 50%; }
.p-chat__bubble { position: relative; background: #fff; padding: 15px; border-radius: 15px; max-width: 70%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.p-chat__bubble::after { content: ""; position: absolute; border: 10px solid transparent; left: -15px; top: 15px; border-right-color: #fff; }

.c-link--primary {
  display: block;
  background: #ff6b6b;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
}

.p-data-table {
  width: 100%;
  border-collapse: collapse;
}
.p-data-table th, .p-data-table td {
  border-bottom: 1px solid #ddd;
  padding: 10px;
}