@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Gravitas+One&family=Kaisei+Decol&family=Kumar+One+Outline&display=swap');
@import url('https://use.fontawesome.com/releases/v6.0.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');


/* --- 全体--- */

body, p {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #fde9c1;
  color: #494949;
  text-align: center;
}

a {
	font-family: "Kaisei Decol", serif;
	color: #494949!important;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height:20px;
	text-align: center;
  text-decoration: none; 
}
a:visited {
  font-family: "Kaisei Decol", serif;
	color: #494949!important;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height:20px;
	text-align: center;
  text-decoration: none; 
}
a:link {
  font-family: "Kaisei Decol", serif;
	color: #494949!important;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height:20px;
	text-align: center;
  text-decoration: none; 
}

/* --- 表紙--- */
.top {
  font-family: "Gravitas One", "Kaisei Decol", serif;
	color: #fffaf0!important;
  font-size: 16px;
  text-align: center;
}
.top p { margin:0; }

.top a {
  color: rgb(250, 213, 157);
  text-decoration: none;
}

h1 {
  font-family: "Gravitas One", "Kaisei Decol", serif;
}

.radius {
  width: 280px;              /* 円の幅 */
  height: 280px;             /* 円の高さ */
  background-color: #f88440; /* 円の色 */
  border-radius: 50%;         /* 完全な円にする */
  display: flex;
  justify-content: center;    /* 横中央 */
  align-items: center;        /* 縦中央 */
  text-align: center;         /* 複数行でも中央揃え */
  color: white;               /* 文字色 */
  font-weight: bold;
  font-size: 20px;            /* 文字サイズ */
  margin: 50px auto;          /* ページ中央寄せ */
  position: relative; /* 擬似要素用 */
}

/* 内側のドット線 */
.radius::before {
  content: "";
  position: absolute;
  top: 3px;    /* 内側にずらす */
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 3px dotted white;
  border-radius: 50%; /* 内側でも円形 */
  pointer-events: none; /* クリックの邪魔にならない */
}

/*  表紙数字  */
.numbers{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
}
.number-04 {
  position: relative;
  font-family: "Gravitas One", serif;
  font-size: 56px;
  color: #333;
  font-weight: 400;
  line-height: 1;
  display:flex;
  box-sizing: border-box;
  text-align: center; 
  margin-inline: auto;
  display:inline-block;
}

.number-04::before {
  content:'';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  rotate: 45deg;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #cec4f1;
  z-index: -1;
}

/*  映画アイコン  */
@font-face{
  font-family: 'movie';
  src: url('https://dl.dropboxusercontent.com/scl/fi/e5g51qxaxnxw4h31hbuxl/CordelMovies-Regular.ttf?rlkey=9s1i6avs0gx5g6fgtc16wimbl&st=yechdaf3&dl=1')  
  format("truetype");
}

.movie {
  font-family: 'movie';
  font-size: 40px;
  display: block;
  color: #ffffff;
  display: inline-block;
}


/*  CAUTION  */
.cbox {
  margin: 2em auto; /* 外側余白 */
  padding: 2em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #cec4f1, 0 0 6px 1px #cec4f1 inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(65, 63, 60, 0.87);
  font-size: 12px;
  text-align: left;
}

/* CAUTION */
.cbox p { margin:0; }



/*  sric */
@font-face{
  font-family: 'sric';
  src: url('https://dl.dropboxusercontent.com/scl/fi/sngvparg2af4xpknbpi7y/Knife.ttf?rlkey=7qx65xgs74iwfkqvcy77ckxlr&st=g36c9z15')  
  format("truetype");
}
.sric {
  font-family: 'sric';
  font-size: 20px;
  display: block;
  color: #DC3C41;
}

/*  枠（セラフ）  */
.srbox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #DC3C41, 0 0 6px 1px #DC3C41 inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.srbox p { margin:0; } /* ボックス内の段落 */

/*  枠（北見）  */
.ktmbox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #FF6E1E, 0 0 6px 1px #FF6E1E inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.ktmbox p { margin:0; }/* ボックス内の段落 */

/*  枠（四季凪）  */
.ngbox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #235AAA, 0 0 6px 1px #235AAA inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.ngbox p { margin:0; }/* ボックス内の段落 */

/*  枠（魁星）  */
.kisibox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #0C6F72, 0 0 6px 1px #0C6F72 inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.kisibox p { margin:0; }/* ボックス内の段落 */

/*  枠（佐伯）  */
.ttbox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #8C4664, 0 0 6px 1px #8C4664 inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.ttbox p { margin:0; }/* ボックス内の段落 */

/*  枠（宇佐美）  */
.rtbox {
  margin: 2em auto; /* 外側余白 */
  padding: 0.5em;   /* 内側余白 */
  background-color:#fff; /* 背景色 */
  opacity: 0.5;
  box-shadow: 0 0 6px 1px #FAC31E, 0 0 6px 1px #FAC31E inset; /*ふわりとした影*/
  border-radius: 8px;
  max-width: 320px; /* 最大幅 */
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
}
.rtbox p { margin:0; }/* ボックス内の段落 */

/* プレイリスト */
.music {
  border: solid  rgba(75, 75, 109, 0.87);
  border-radius: 20px;
  background-color: rgba(75, 75, 109, 0.87);
  overflow: hidden;
  margin: auto;
  width: 200px;
  padding: 3px;
}

.music span {
  font-family: "Kaisei Decol", serif;
  font-size: 12px;
  display     : inline-block;
  padding-left: 100%;
  line-height : 1em;
  color: rgba(207, 198, 240, 0.87);
  white-space : nowrap;
  animation   : scrollAnime 10s linear infinite;
}
@keyframes scrollAnime{
  0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

np::before {
  font-family: "Material Symbols Outlined";
  content: "music_note_2";
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
}

/* マーカー */
sr { 
  background: linear-gradient(transparent 80%,#DC3C41 0%); 
 }
ng { 
  background: linear-gradient(transparent 80%, #235AAA 0%); 
}
ktm { 
  background: linear-gradient(transparent 80%, #FF6E1E 0%); 
}
kisi { 
  background: linear-gradient(transparent 80%, #0C6F72 0%);
}
tt { 
  background: linear-gradient(transparent 80%, #8C4664 0%);
}
rt { 
  background: linear-gradient(transparent 80%, #FAC31E 0%);
}

/* 本文名前 */
srnm  {
  font-family: "Ephesis", serif;
	color: #DC3C41;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #dc3c41,
  0 0 10px #dc3c41,
  0 0 21px #dc3c41,
  0 0 42px #f0f,
  0 0 82px #f0f,
  0 0 92px #f0f,
  0 0 102px #f0f,
  0 0 151px #f0f;
  padding: 0.1em;
}

ktmnm  {
  font-family: "Ephesis", serif;
	color: #FF6E1E ;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #FF6E1E,
  0 0 10px #FF6E1E,
  0 0 21px #FF6E1E,
  0 0 42px rgb(255, 238, 0),
  0 0 82px rgb(255, 238, 0),
  0 0 92px rgb(255, 238, 0),
  0 0 102px rgb(255, 238, 0),
  0 0 151px rgb(255, 238, 0);
  padding: 0.1em;
}

ngnm  {
  font-family: "Ephesis", serif;
	color: #235AAA ;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #235AAA,
  0 0 10px #235AAA,
  0 0 21px #235AAA,
  0 0 42px rgb(141, 219, 255),
  0 0 82px rgb(141, 219, 255),
  0 0 92px rgb(141, 219, 255),
  0 0 102px rgb(141, 219, 255),
  0 0 151px rgb(141, 219, 255);
  padding: 0.1em;
}

kisinm  {
  font-family: "Ephesis", serif;
	color: #0C6F72 ;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #0C6F72,
  0 0 10px #0C6F72,
  0 0 21px #0C6F72,
  0 0 42px rgb(128, 255, 206),
  0 0 82px rgb(128, 255, 206),
  0 0 92px rgb(128, 255, 206),
  0 0 102px rgb(128, 255, 206),
  0 0 151px rgb(128, 255, 206);
  padding: 0.1em;
}

ttnm  {
  font-family: "Ephesis", serif;
	color: #8C4664 ;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #8C4664,
  0 0 10px #8C4664,
  0 0 21px #8C4664,
  0 0 42px rgb(221, 185, 250),
  0 0 82px rgb(221, 185, 250),
  0 0 92px rgb(221, 185, 250),
  0 0 102px rgb(221, 185, 250),
  0 0 151px rgb(221, 185, 250);
  padding: 0.1em;
}

rtnm  {
  font-family: "Ephesis", serif;
	color: #FAC31E ;
  font-size: 26px;
  display: block;
  text-align: right;
  text-shadow:
  0 0 7px #FAC31E,
  0 0 10px #FAC31E,
  0 0 21px #FAC31E,
  0 0 42px rgb(232, 255, 179),
  0 0 82px rgb(232, 255, 179),
  0 0 92px rgb(232, 255, 179),
  0 0 102px rgb(232, 255, 179),
  0 0 151px rgb(232, 255, 179);
  padding: 0.1em;
}

/* IC */
ktmic::before {
  font-family: "Font Awesome 6 Free";
  content: "\f805";
  font-weight: 900;
}

kisiic::before {
  font-family: "Font Awesome 6 Free";
  content: "\f084";
  font-weight: 900;
}

ngic::before {
  font-family: "Font Awesome 6 Free";
  content: "\f15b";
  font-weight: 900;
}

sric::before {
  font-family: "Material Symbols Outlined";
  content: "owl";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
}

ttic::before {
  font-family: "Material Symbols Outlined";
  content: "handshake";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
}

rtic::before {
  font-family: "Material Symbols Outlined";
  content: "thunderstorm";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
}

/* time */
tm {
  font-family: "Kumar One Outline", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}

/* 折りたたみ */
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

summary::before {
  font-family: "Material Symbols Outlined";
  content: "door_front";
  font-size: 12px;
}

details[open] summary::before {
  content: "door_open";
  font-size: 12px;
}

/* リアタイ */
.tlbox {
  margin: 0em auto; 
  margin-top: 4px;  /* タイトルとの距離を狭める */
  padding: 0.5em;   
  background-color: rgba(255, 255, 255, 0.5); /* 背景だけ薄く */
  border: 1px solid #cec4f1;  /* シンプルでおしゃれな枠線 */
  border-radius: 8px;
  max-width: 300px; 
  color: rgba(46, 45, 44, 0.87);/* 文字は濃く */
  font-size: 12px;
  text-align: left;

  height: 180px;       
  overflow-y: scroll;   /* スクロールを常に表示 */
  position: relative;
}

/* 区切り線のみ */
.tl-item {
  padding: 8px 4px;
  border-bottom: 1px solid #e8e4f7;
}

.tl-item:last-child {
  border-bottom: none;
}

/* 時間 */
.tl-time {
  font-family: "Kumar One Outline", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #8a84a6;
  margin-bottom: 2px;
}

/* 投稿テキスト */
.tl-text {
  line-height: 1.4;
  background: none; /* 背景色なし */
  padding: 0;       /* パディングもなし */
}

/* リアタイタイトル */
tl {
  font-family: "Ephesis", serif;
	color: #4b09b4 ;
  font-size: 26px;
  margin: 0 auto;
  display: block;
  text-align: center;
  text-shadow:
  0 0 7px #4b09b4 ,
  0 0 10px #4b09b4 ,
  0 0 21px #4b09b4 ,
  0 0 42px rgb(197, 166, 255),
  0 0 82px rgb(197, 166, 255),
  0 0 92px rgb(197, 166, 255),
  0 0 102px rgb(197, 166, 255),
  0 0 151px rgb(197, 166, 255);
  padding: 0.1em;
}

/* チャット全体 */
.chatbox {
  margin: 0em auto;
  margin-top: 4px;
  padding: 0.5em 0.5em 20px 0.5em; /* 下に余白 */
  background-color:rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 6px 1px #cec4f1, 0 0 6px 1px #cec4f1 inset;
  border-radius: 8px;
  max-width: 350px;
  color: rgba(65, 63, 60, 0.87);
  font-size: 12px;
  text-align: left;
  height: auto;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
}

.talkbox {
  margin: 0em auto;
  margin-top: 4px;  /* タイトルとの距離を狭める */
  padding: 0.5em;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #cec4f1; 
  border-radius: 8px;
  max-width: 340px;
  color: rgba(46, 45, 44, 0.87);
  font-size: 12px;
  text-align: left;
  height: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

/* チャット内 */
.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 吹き出しベース */
.bubble {
  position: relative;
  display: inline-block;
  padding: 6px 10px 14px 10px; /* 少し小さめ */
  border-radius: 15px;
  background: var(--bubble-color);
  color: var(--text-color);
  max-width: 200px;
  font-size: 12px;
  line-height: 1.3;
}

/* 左側の吹き出し (kil / ngl) */
.kisil, .ngl, .ktml, .srl , .ttl , .rtl {
  position: relative;
}

.kisil { --bubble-color: #0C6F72; --text-color: #fff; }
.ngl { --bubble-color: #235AAA; --text-color: #fff; }
.ktml { --bubble-color: #FF6E1E; --text-color: #fff; }
.srl  { --bubble-color: #DC3C41; --text-color: #fff; }
.ttl  { --bubble-color: #8C4664; --text-color: #fff; }
.rtl  { --bubble-color: #FAC31E; --text-color: #fff; }

.kisil::after, .ngl::after .ktml::after .srl::after .ttl::after .rtl::after {
  content: "";
  position: absolute;
  bottom: 0;          
  left: -6px; /* ボックスから少しはみ出す */
  width: 12px;
  height: 12px;
  border-radius: 0 0 0 12px; /* 左下に細三角 */
  box-shadow: 12px 2px 0 -3px var(--bubble-color) inset;
  transform: rotate(-20deg);
}

/* 右側の吹き出し (ktmr / srr) */
.ktmr, .srr, .kisir, .ngr, .ttr , .rtr  {
  position: relative;
  margin-left: auto;
}

.ktmr { --bubble-color: #FF6E1E; --text-color: #fff; }
.srr  { --bubble-color: #DC3C41; --text-color: #fff; }
.kisir { --bubble-color: #0C6F72; --text-color: #fff; }
.ngr { --bubble-color: #235AAA; --text-color: #fff; }
.ttr { --bubble-color: #8C4664; --text-color: #fff; }
.rtr { --bubble-color: #FAC31E; --text-color: #fff; }

.ktmr::after, .srr::after,.kisir::after, .ngr::after, .ttr::after, .rtr::after  {
  content: "";
  position: absolute;
  bottom: 0;          
  right: -6px; /* ボックスから少しはみ出す */
  width: 12px;
  height: 12px;
  border-radius: 0 0 12px 0; /* 右下に細三角 */
  box-shadow: -12px 2px 0 -3px var(--bubble-color) inset;
  transform: rotate(20deg);
}

/* わりこみ */
.memo {
  margin: 2em auto;
  padding: 1.2em;
  background-color: #f2f3f4;
  position: relative;
  max-width: 300px;

  border: 1px solid #ccc;
  border-radius: 12px;
}

.memo::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;

  border: 1px dashed #999;
  border-radius: 8px;
  pointer-events: none;
}

.memo::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #ffffff #ccc transparent;

  border-top-right-radius: 4px;
  box-shadow: -2px 2px 3px rgba(0,0,0,0.15);
}
.memo p {
  margin: 0;
  line-height: 1; 
}

.labelsr {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #DC3C41;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

.labelng {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #235AAA;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

.labelktm {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #FF6E1E;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

.labelkisi {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #0C6F72;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

.labeltt {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #8C4664;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

.labelrt {
  position: absolute;
  top: -6px;
  left: 4px;

  background-color: #FAC31E;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}