@charset "utf-8";

/* =========================================================
   Fonts / Icons
   ========================================================= */

/* 基本・本文 */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');

/* 見出し/装飾 */
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

/* 各キャラ名見出し */
@import url('https://fonts.googleapis.com/css2?family=Corinthia&display=swap'); /* olv */
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');      /* kgm */
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap'); /* los */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap'); /* fuwa */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap'); /* akg */
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap'); /* pata */

/* ウィンドウ風バー用 */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* fontawesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');

/* 映画アイコン */
@font-face { font-family:'mov';
  src: url("https://dl.dropboxusercontent.com/scl/fi/jhvpk5p0gs62o8am2mwg2/mov.woff2?rlkey=op1p0zwbwle5q6mpnlvobn036&dl=0") format("woff2");
}
/* 犬猫アイコン/ak兼用 */
@font-face { font-family:'catdog';
  src: url("https://dl.dropboxusercontent.com/scl/fi/pie6wvuzyjfoeacgnovpb/catdog.woff2?rlkey=tgy69jhkrfphuusil5ao2fg2b&dl=0") format("woff2");
}
/* 料理アイコン */
@font-face { font-family:'cook';
  src: url("https://dl.dropboxusercontent.com/scl/fi/kix4iphnbnqmuythopxj8/cook.woff2?rlkey=4q76xea2g35v2dse3l5lsonpp&dl=0") format("woff2");
}
/* 表紙アイコン */
@font-face { font-family:'smile';
  src: url("https://dl.dropboxusercontent.com/scl/fi/tfbnkda75qtd16n8fd1k4/smile.woff2?rlkey=rsvblu25erlk62a165ef3g7dq&dl=0") format("woff2");
}

/* 罫線フォント */
@font-face { font-family:'line';
  src: url("https://dl.dropboxusercontent.com/scl/fi/9qvo2tcb5bm22a3j0o1x5/olv.woff2?rlkey=np5boqbfjkspcebozz1jzk8yf&dl=0") format("woff2");
}
@font-face { font-family:'line2';
  src: url("https://dl.dropboxusercontent.com/scl/fi/6a8aw2sikamhb47h0z3ey/line2.woff?rlkey=ap52x0069ol83h546dwpamm1l&dl=0") format("woff");
}

/* キャラアイコンフォント */
@font-face { font-family:'olv';
  src: url("https://dl.dropboxusercontent.com/scl/fi/9qvo2tcb5bm22a3j0o1x5/olv.woff2?rlkey=np5boqbfjkspcebozz1jzk8yf&dl=0") format("woff2");
}
@font-face { font-family:'kgm';
  src: url("https://dl.dropboxusercontent.com/scl/fi/gpb9706fcrqd1ie8k6k22/kgm.woff2?rlkey=e8rgezufl5e2y27xgu8svj0qf&dl=0") format("woff2");
}
@font-face { font-family:'los';
  src: url("https://dl.dropboxusercontent.com/scl/fi/8y12c0jkg356s5rww9y5o/los.woff2?rlkey=6d6sjfkv7kw0g2peq94bil2cv&dl=0") format("woff2");
}
@font-face { font-family:'fuwa';
  src: url("https://dl.dropboxusercontent.com/scl/fi/4572mczkd0p1mkkxmmumn/fuwa.woff2?rlkey=gu6y0pd71iyiei87ynkwxzelc&dl=0") format("woff2");
}
@font-face { font-family:'akg';
  src: url("https://dl.dropboxusercontent.com/scl/fi/9iiuag89qgdcl6hd0bse7/akg.woff2?rlkey=1ot175i6jw9c9oen5z8jchsxx&dl=0") format("woff2");
}
@font-face { font-family:'pata';
  src: url("https://dl.dropboxusercontent.com/scl/fi/nvw7xuk0wnlo6mb3sech6/pata.woff2?rlkey=nsng3rfonx94ec8sb6u78mzaz&dl=0") format("woff2");
}
@font-face { font-family:'rore';
  src: url("https://dl.dropboxusercontent.com/scl/fi/wrzmd9rec6gf2xc7s9c24/rore.woff2?rlkey=78z0zlt9tvwg5sepaxco5z0e6&dl=0") format("woff2");
}

/* =========================================================
   Base
   ========================================================= */

* { box-sizing: border-box; }

html{
  font-size: 12px !important;
}

/* 色味や見た目の統一変数 */
:root{
  --base-font: 'Kiwi Maru', serif;
  --text: #555555;
  --link: #6e8570;

  /* window bar */
  --winbar-h: 34px;
  --winbar-bg: #f0f0f0;
  --winbar-border: rgba(0,0,0,.12);
  --ui-font: 'Chakra Petch', system-ui, sans-serif;

  /* 見出し：英字→Fredericka、和文→Yusei Magicへ自動フォールバック */
  --title-font: 'Fredericka the Great','Yusei Magic','Kiwi Maru', sans-serif;

  /* details の薄い色差し（汎用デフォ） */
  --accent: #c7c7c7;
}

body{
  margin: 20px 20px !important;
  padding: 10px 0 !important;

  font-family: var(--base-font);
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  color: var(--text);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  background: linear-gradient(to bottom, rgba(242, 255, 227, 1), rgba(255, 255, 255, 1) 50%, rgba(242, 255, 227, 1));
  position: relative;
  z-index: -10;
}

body, div, p, span, a, font, li, dt, dd{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

p.line-text{ margin: 0 !important; }
hr{ margin: 8px 0 !important; }

a, a:link, a:visited{
  text-decoration: none;
  color: var(--link);
  margin-bottom: 0;
  position: relative;
}

span, p, s{
  font-family: var(--base-font);
  color: var(--text);
}

/* ぼかし */
.bks{ -ms-filter: blur(4px); filter: blur(4px); }

/* =========================================================
   アイコン用文字
   ========================================================= */

line{
  color: #777;
  font-family: 'line2';
  position: center;
  font-size: 5em;
  margin-top: 0;
}

/* 映画 */
.mov{
  font-family: 'Shadows Into Light Two', cursive;
  display:inline-block;
  font-size: 3em;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  margin-bottom: 0;
}
.mov::before{
  content:"A";
  font-family:'mov';
  display:inline-block;
  color:#999;
  font-size: 2em;
  transform: rotate(10deg);
  position:absolute;
  margin-left: 100%;
  margin-top: -10%;
  z-index:-3;
  white-space: nowrap;
}

/* カトラリー */
.cook{
  font-family: 'Shadows Into Light Two', cursive;
  display:inline-block;
  font-size: 3em;
  position: relative;
  z-index:5;
  white-space: nowrap;
  margin-bottom: 0;
}
.cook::before{
  content:"C";
  font-family:'cook';
  display:inline-block;
  color:#999;
  font-size: 2em;
  transform: rotate(10deg);
  position:absolute;
  margin-left: 90%;
  margin-top: -30%;
  z-index:-1;
  white-space: nowrap;
}

/* その他 */
.sml{
  font-family: 'Shadows Into Light Two', cursive;
  display:inline-block;
  font-size: 3em;
  position: relative;
  z-index:5;
  white-space: nowrap;
  margin-bottom: 0;
}
.sml::before{
  content:"O";
  font-family:'smile';
  display:inline-block;
  color:#999;
  font-size: 2em;
  transform: rotate(10deg);
  position:absolute;
  margin-left: 100%;
  margin-top: -40%;
  z-index:-1;
  white-space: nowrap;
}

/* 親記事 */
.que{
  font-family: 'Shadows Into Light Two', cursive;
  display:inline-block;
  font-size: 3em;
  transform: rotate(-10deg);
  position: relative;
  z-index:-2;
  white-space: nowrap;
}
.que::before{
  content:"J";
  font-family:'smile';
  display:inline-block;
  color:#999;
  font-size: 2.5em;
  transform: rotate(10deg);
  position:absolute;
  margin-left: 80%;
  margin-bottom: 10%;
  z-index:-2;
  white-space: nowrap;
}

/* =========================================================
   Note wrappers（枠/影/アイコン）
   ========================================================= */

/* 掲示板側.titleと衝突しないように */
.title{ text-align: center; }

.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap{
  background: #fff;
  padding: 1em 2em;
  width: 70%;
  margin: 30px auto;
  position: relative;
  border-radius: 10px;
}

/* 各枠のアクセント色（details/summary の色差しにも使用） */
.note_olv_wrap{ --accent:#BCC37E; }
.note_kgm_wrap{ --accent:#B9ADB9; }
.note_los_wrap{ --accent:#234A87; }
.note_fuwa_wrap{ --accent:#BF69F4; }
.note_pata_wrap{ --accent:#F74848; }
.note_akg_wrap{ --accent:#FF8C9B; }
.note_com_wrap{ --accent:#c7c7c7; } /* 汎用はグレー */

/* olv */
.note_olv_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #a1b574 inset;
}
.note_olv_wrap::before{
  content:"f";
  font-family:'olv';
  position:absolute;
  bottom:-10px;
  right:10px;
  display:inline-block;
  font-size:10em;
  color:#BCC37E;
  opacity:.5;
}

/* kgm */
.note_kgm_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #a69aa6 inset;
}
.note_kgm_wrap::before{
  content:"B";
  font-family:'kgm';
  position:absolute;
  bottom:-10px;
  right:10px;
  display:inline-block;
  font-size:10em;
  color:#B9ADB9;
  opacity:.5;
}

/* los */
.note_los_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #345282 inset;
}
.note_los_wrap::before{
  content:"P";
  font-family:'los';
  position:absolute;
  bottom:-10px;
  right:10px;
  display:inline-block;
  font-size:10em;
  color:#234A87;
  opacity:.5;
}

/* fuwa */
.note_fuwa_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #d6b6d6 inset;
}
.note_fuwa_wrap::before{
  content:"R";
  font-family:'fuwa';
  position:absolute;
  bottom:-10px;
  right:10px;
  display:inline-block;
  font-size:10em;
  color:#BF69F4;
  opacity:.5;
}

/* pata */
.note_pata_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #de3737 inset;
}
.note_pata_wrap::before{
  content:"R";
  font-family:'pata';
  position:absolute;
  bottom:10px;
  right:10px;
  display:inline-block;
  font-size:7em;
  color:#F74848;
  opacity:.5;
}

/* akg */
.note_akg_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #d97784 inset;
}
.note_akg_wrap::before{
  content:"E";
  font-family:'akg';
  position:absolute;
  bottom:-10px;
  right:10px;
  display:inline-block;
  font-size:10em;
  color:#FF8C9B;
  opacity:.5;
}

/* 汎用 */
.note_com_wrap{
  box-shadow: 8px 8px 2px 1px rgba(128,128,128,.2),
              0px 0px 8px 3px #c7c7c7 inset;
  /* 汎用は右下デカ飾り無し */
}

/* 掲示板側の .title 競合で見出しが小さくなる対策 */
.note_olv_wrap .title,
.note_kgm_wrap .title,
.note_los_wrap .title,
.note_pata_wrap .title,
.note_akg_wrap .title,
.note_fuwa_wrap .title,
.note_com_wrap .title{
  font-size: 1rem !important;
  line-height: normal !important;
}

/* =========================================================
   罫線本文（ノート）
   ========================================================= */

.note_olv,.note_kgm,.note_los,.note_pata,.note_akg,.note_fuwa,.note_com{
  line-height: 2 !important;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1lh - 1px),
    #ddd calc(1lh - 1px),
    #ddd 1lh
  );
  background-position: 0 0 !important;
}

.note_olv > p,.note_kgm > p,.note_los > p,.note_pata > p,.note_akg > p,.note_fuwa > p,.note_com > p{
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: var(--base-font);
  color: var(--text);
}

/* =========================================================
   見出し（キャラ名）
   ========================================================= */

.nameolv{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Corinthia', cursive;
  color: #BCC37E;
  font-size: 4em;
}
.namekgm{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Play', sans-serif;
  color: #B9ADB9;
  font-size: 3em;
}
.namelos{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Covered By Your Grace', cursive;
  color: #234A87;
  font-size: 4em;
}
.namefuwa{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Sacramento', cursive;
  color: #BF69F4;
  font-size: 3.5em;
}
.namepata{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Hachi Maru Pop', cursive;
  color: #F74848;
  font-size: 3em;
}
.nameakg{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Luckiest Guy', cursive;
  color: #FF8C9B;
  font-size: 4em;
}

/* 汎用の見出し（Yusei Magic） */
.namecom{
  position: relative;
  width: 100%;
  margin: 50px 0 0;
  padding: 0;
  font-family: 'Yusei Magic', sans-serif;
  color: #777;
  font-size: 3.5em;
  margin-bottom: 0;
}

/* 見出し下罫線（共通） */
.nameolv::before,.namekgm::before,.namelos::before,.namefuwa::before,.namepata::before,.nameakg::before,.namecom::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0; right:0;
  width: 90%;
  height: 1px;
  margin: 0 auto;
  background-image: linear-gradient(to right, transparent, #555 25%, #555 75%, transparent);
  background-position: center;
  background-repeat: no-repeat;
}

/* namecomだけは線幅を少し短め */
.namecom::before{ width: 50%; }

/* =========================================================
   textarea（スカスカ対策）
   ========================================================= */
textarea{
  width: 95%;
  min-height: 3.2em;
  height: 3.2em;
  resize: vertical;
  font-family: var(--base-font);
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* =========================================================
   details / summary（折りたたみ）: マーカー消し + 見た目統一
   ========================================================= */

details, summary{
  font-family: var(--base-font);
  position: relative;
}

/* 外枠 */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) details{
  margin: 14px 0;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* summary */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  color: #555;
  user-select: none;
  position: relative;
  display: block; /* list-item事故防止 */

  /* フォールバック（色差し無し） */
  background: linear-gradient(to bottom, rgba(255,255,255,.90), rgba(245,245,245,.90));
}

/* アクセント差し（対応ブラウザのみ） */
@supports (background: color-mix(in srgb, red 10%, white)) {
  :is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) summary{
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 18%, white),
      rgba(255,255,255,.35)
    );
  }
}

/* 標準マーカーを消す（Chrome/Safari/Android/Firefox） */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap)
summary::-webkit-details-marker{ display:none; }
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap)
summary::marker{ content:""; }

/* 右側の矢印 */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) summary::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(85,85,85,.75);
  transform: translateY(-35%);
  opacity: .9;
}

/* open時 */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) details[open] summary{
  border-bottom: 1px solid rgba(0,0,0,.10);
}
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap) details[open] summary::after{
  border-top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid rgba(85,85,85,.75);
  transform: translateY(-65%);
}

/* details内は「余計な箱装飾」を持たせない（罫線を殺さない） */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap)
details > *:not(summary){
  padding: 0;
}

/* ノート本文は内側余白をここで付与（罫線維持） */
details :is(.note_olv,.note_kgm,.note_los,.note_pata,.note_akg,.note_fuwa,.note_com){
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

/* details内の textarea ははみ出し防止 */
:is(.note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap)
details textarea{
  width: 100%;
  max-width: 100%;
  min-height: 2.2em;
}

/* =========================================================
   TALK / TL（ウィンドウ風）
   ========================================================= */

/* 二重バー事故防止：HTMLに残ってても隠す */
.ui_bar_title{ display:none !important; }

/* 置き場だけ中央寄せ。中身は左揃え。 */
.tl_center{ text-align: center !important; }
.tl_center .tl_box{ text-align: left !important; }

/* ウィンドウ風枠：TALK & TL 共通 */
.talk, .tl_box{
  width: 70%;
  max-width: 820px;
  margin: 20px auto !important;
  display: block !important;
  box-sizing: border-box;

  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);

  position: relative;
  overflow: hidden;

  /* タイトルバー分を確保 */
  padding-top: var(--winbar-h);

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.25) transparent;
}

/* タイトルバー本体 */
.talk::before, .tl_box::before{
  content: var(--win-title, "Chat");
  position: absolute;
  left: 0; top: 0;
  height: var(--winbar-h);
  width: 100%;
  background: var(--winbar-bg);
  border-bottom: 1px solid var(--winbar-border);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--ui-font);
  font-weight: 500;
  color: #444;
  letter-spacing: .02em;
  z-index: 2;
}

/* 左上3点 */
.talk::after, .tl_box::after{
  content:"";
  position:absolute;
  left: 10px; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #bbb;
  box-shadow: 14px 0 0 #bbb, 28px 0 0 #bbb;
  z-index: 3;
}

/* タイトル名 */
.talk{ --win-title: "TALK"; }
.tl_box{ --win-title: "RealTime"; }

/* Webkit scrollbar */
.talk::-webkit-scrollbar, .tl_box::-webkit-scrollbar{ width: 10px; }
.talk::-webkit-scrollbar-thumb, .tl_box::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.talk::-webkit-scrollbar-track, .tl_box::-webkit-scrollbar-track{ background: transparent; }

/* TALK本体 */
.talk{
  height: 220px;
  overflow-y: auto;
  padding: calc(var(--winbar-h) + 8px) 10px 10px;
  font-family: var(--base-font);
  line-height: 1.4;
  color: #fff;
}

/* フキダシ共通 */
.talk .ma{
  position: relative;
  display: inline-block;
  max-width: 60%;
  margin: 1px 10px 6px;
  padding: 9px 14px;
  border-radius: 19px;
  overflow-wrap: break-word;
  clear: both;
}
.talk .ma.no{ margin-bottom: 0; }
.talk .ma.no::after{ content: none; }

.talk .ma::after{
  position:absolute;
  content:"";
  width: 17px;
  height: 17px;
  bottom: 0;
}

/* 各色 */
.talk .ma.los.le{ float:left;  background:#234A87; color:#fff; }
.talk .ma.los.ri{ float:right; background:#234A87; color:#fff; }
.talk .ma.los.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #234A87 inset;
}
.talk .ma.los.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #234A87 inset;
}

.talk .ma.olv.le{ float:left;  background:#BCC37E; color:#fff; }
.talk .ma.olv.ri{ float:right; background:#BCC37E; color:#fff; }
.talk .ma.olv.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #BCC37E inset;
}
.talk .ma.olv.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #BCC37E inset;
}

.talk .ma.pata.le{ float:left;  background:#F74848; color:#fff; }
.talk .ma.pata.ri{ float:right; background:#F74848; color:#fff; }
.talk .ma.pata.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #F74848 inset;
}
.talk .ma.pata.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #F74848 inset;
}

.talk .ma.ak.le{ float:left;  background:#00A6FE; color:#fff; }
.talk .ma.ak.ri{ float:right; background:#00A6FE; color:#fff; }
.talk .ma.ak.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #00A6FE inset;
}
.talk .ma.ak.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #00A6FE inset;
}

.talk .ma.rore.le{ float:left;  background:#C10E49; color:#fff; }
.talk .ma.rore.ri{ float:right; background:#C10E49; color:#fff; }
.talk .ma.rore.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #C10E49 inset;
}
.talk .ma.rore.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #C10E49 inset;
}

.talk .ma.kgm.le{ float:left;  background:#B9ADB9; color:#fff; }
.talk .ma.kgm.ri{ float:right; background:#B9ADB9; color:#fff; }
.talk .ma.kgm.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #B9ADB9 inset;
}
.talk .ma.kgm.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #B9ADB9 inset;
}

.talk .ma.fw.le{ float:left;  background:#BF69F4; color:#fff; }
.talk .ma.fw.ri{ float:right; background:#BF69F4; color:#fff; }
.talk .ma.fw.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #BF69F4 inset;
}
.talk .ma.fw.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #BF69F4 inset;
}

.talk .ma.akg.le{ float:left;  background:#FF8C9B; color:#fff; }
.talk .ma.akg.ri{ float:right; background:#FF8C9B; color:#fff; }
.talk .ma.akg.le::after{
  left:-6px; border-radius: 0 0 17px 0 / 0 0 13px 0;
  box-shadow: -14px 2px 0 -3px #FF8C9B inset;
}
.talk .ma.akg.ri::after{
  right:-6px; border-radius: 0 0 0 17px / 0 0 0 13px;
  box-shadow: 14px 2px 0 -3px #FF8C9B inset;
}

/* =========================================================
   Timeline
   ========================================================= */

.tl_box{
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--winbar-h) + 8px) 0 8px;
  text-align: left !important;
}

dl.tl{
  background: transparent;
  margin: 0;
  padding: 0 16px !important;
  box-sizing: border-box !important;

  font-family: var(--base-font);
  font-size: 1em;

  --ic-size: 44px;
  --glyph: 32px;
  --gap: 12px;

  text-align: left !important;
}
dl.tl::after{ content:""; display:block; clear:both; }

dl.tl dt, dl.tl dd{ text-align: left !important; }

dl.tl dt{
  float: left !important;
  clear: left !important;
  width: var(--ic-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 2px !important;
  margin-right: var(--gap) !important;
}
dl.tl dd{
  margin: 0 0 0 calc(var(--ic-size) + var(--gap)) !important;
  padding: 6px 16px 6px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  white-space: pre-line !important;
  text-align: left !important;
}
dl.tl dd:last-of-type{ border-bottom: none !important; }
dl.tl dd:hover{ background: rgba(0,0,0,.02) !important; }

/* メタ（@名前 日時） */
dl.tl dd .tl_meta{
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  color: #555;
  text-align: left !important;
}

/* 本文 */
dl.tl dd .tl_body{
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.012);
  color: #555;
  font-weight: 400;
  white-space: pre-line;
  text-align: left !important;
}

/* アイコン共通（丸） */
dl.tl dt > .olvic,
dl.tl dt > .losic,
dl.tl dt > .kgmic,
dl.tl dt > .fwic,
dl.tl dt > .pataic,
dl.tl dt > .akgic,
dl.tl dt > .roreic,
dl.tl dt > .akic,
dl.tl dt > .aknic{
  width: var(--ic-size);
  height: var(--ic-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
}

/* 中身（元のフォントアイコン） */
dl.tl dt > .olvic::before,
dl.tl dt > .losic::before,
dl.tl dt > .kgmic::before,
dl.tl dt > .fwic::before,
dl.tl dt > .pataic::before,
dl.tl dt > .akgic::before,
dl.tl dt > .roreic::before,
dl.tl dt > .akic::before,
dl.tl dt > .aknic::before{
  font-size: var(--glyph) !important;
  line-height: 1;
  color: #fff;
  display: block;
}

/* 各アイコン：色 + content/font-family */
.olvic{ background-color:#BCC37E; }
.olvic::before{ content:"f"; font-family:'olv'; }

.losic{ background-color:#234A87; }
.losic::before{ content:"P"; font-family:'los'; }

.kgmic{ background-color:#B9ADB9; }
.kgmic::before{ content:"B"; font-family:'kgm'; }

.fwic{ background-color:#BF69F4; }
.fwic::before{ content:"R"; font-family:'fuwa'; }

.pataic{ background-color:#F74848; }
.pataic::before{ content:"R"; font-family:'pata'; }

.akgic{ background-color:#FF8C9B; }
.akgic::before{ content:"E"; font-family:'akg'; }

.roreic{ background-color:#C10E49; }
.roreic::before{ content:"C"; font-family:'rore'; }

.akic{ background-color:#00A6FE; }
.akic::before{ content:"A"; font-family:'catdog'; }

.aknic{ background-color:#F03C32; }
.aknic::before{ content:"1"; font-family:'cook'; }

/* 個別サイズ */
.olvic{  --glyph: 44px; }
.losic{  --glyph: 44px; }
.kgmic{  --glyph: 44px; }
.fwic{   --glyph: 44px; }
.pataic{ --glyph: 18px; }
.akic{   --glyph: 60px; }
.aknic{  --glyph: 28px; }

/* =========================================================
   マーカー
   ========================================================= */
.mk_red{ background:linear-gradient(transparent 75%, #ff5252 75%); font-weight:bold; }
.mk_pi{  background:linear-gradient(transparent 75%, #ff87e9 75%); font-weight:bold; }
.mk_pur{ background:linear-gradient(transparent 75%, #bf87ff 75%); font-weight:bold; }
.mk_lb{  background:linear-gradient(transparent 75%, #94f8ff 75%); font-weight:bold; }
.mk_bl{  background:linear-gradient(transparent 75%, #6675ff 75%); font-weight:bold; }
.mk_gr{  background:linear-gradient(transparent 75%, #94ffb6 75%); font-weight:bold; }
.mk_ye{  background:linear-gradient(transparent 75%, #f2ff5e 75%); font-weight:bold; }
.mk_or{  background:linear-gradient(transparent 75%, #ffaf5e 75%); font-weight:bold; }

/* =========================================================
   Patch: 見出しを大きめに戻す + スマホ幅最適化（安全な上書きだけ）
   ========================================================= */

/* 見出しサイズ（本文は小さめ維持） */
.nameolv{  font-size: clamp(48px, 9vw, 60px) !important; }
.namekgm{  font-size: clamp(40px,  8vw, 50px) !important; }
.namelos{  font-size: clamp(48px, 9vw, 50px) !important; }
.namefuwa{ font-size: clamp(36px, 8vw, 56px) !important; }
.namepata{ font-size: clamp(20px,  8vw, 48px) !important; }
.nameakg{  font-size: clamp(42px, 10vw, 50px) !important; }
.namecom{  font-size: clamp(44px, 8.5vw, 50px) !important; }

/* スマホでTALK/TLを広げる（PCは820px上限） */
.talk, .tl_box{
  width: min(820px, 92vw) !important;
  max-width: none !important;
}

/* 横はみ出し保険 */
html, body{
  overflow-x: hidden !important;
}

@media (max-width: 640px){
  body{
    margin: 10px 10px !important;
  }

  .note_olv_wrap,.note_kgm_wrap,.note_los_wrap,.note_pata_wrap,.note_akg_wrap,.note_fuwa_wrap,.note_com_wrap{
    width: 92vw !important;
    padding: 1em 1.2em !important;
  }

  .talk, .tl_box{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* ===================
   なうぷれ
=================== */
.music{
  padding: 0.5em 1em;
  margin: 2em 0;
  border: double 5px #737373;
  position: relative;
  margin: auto;
  display:inline-block;
  overflow: hidden;
}
.mus{
  font-family: var(--base-font);
  animation: music 5s linear infinite;
  transform: translateX(100%);
  line-height: 10px;
  display:inline-block;
}
@keyframes music{
  100%{ transform: translateX(-100%); }
}
.music hr{
  height: 2px;
  background-color: var(--text);
  border: none;
}
.music i{ color: var(--text); }