@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@700&display=swap');

/*  全体の設定  */
* {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  border: none;
}

body {
  background-color: #220000;
}

/* ソーダのリンク */
@font-face{
  font-family: soda;
  src: url('https://dl.dropboxusercontent.com/scl/fi/x4lf8hjw7s2sarkiskp3s/Doodle-Coffee-Scents.otf?rlkey=71bnf04s4a1ja6gi4iw7qtutk&st=8l5zadfi&dl=0')  
  format("opentype");
}

soda {
  font-family: 'soda';
  font-size: 80px;
  display: block;
  color: #ffffff;
}

/* 星のリンク */
@font-face{
  font-family: top;
  src: url('https://dl.dropboxusercontent.com/scl/fi/f41n0f4x2m7wfw8j1jgbn/Estrellass-TFB.ttf?rlkey=ja8bwljufhcghjw6slu1jgetd&st=uttzt6r7&dl=0') format("truetype");
}

top {
  font-family: 'top';
  font-size: 15px;
  display: block;
  color: #ffffff;
}

/*  リンクの表示設定  */
a {
  font-size: 11px;
  font-weight: 400;
  text-decoration: none;
  color: #ffffff;
}

ti {
    font-family: 'Kaisei Decol', serif;
    font-size: 13px;
}

cib { font-size: 9px; }

hr {
  border: none;
  height: 1px;
  background: #220000; /* 背景と同じ色 */
  margin: 12px 0;
}

/*  各人ごとのカラーコード  */
mnt { color: #B585D2; }
lrn { color: #C10E49; }
kne { color: #ABD3D8; }
akn { color: #F03C32; }
sng { color: #EF8468; }
kgt { color: #6EB487; }
hbr { color: #CD3764; }
exa { color: #5C9BBC; }
ibr { color: #7CA1F0; }
kzh { color: #ACA7BB; }
bry { color: #DF6D7C; }
ngs { color: #77B6C2; }
rrm { color: #EF6F94; }
knt { color: #FAD246; }
kai { color: #0C6F72; }
szn { color: #B9E089; }
axa { color: #00A6FE; }
ssk { color: #EF9AAF; }
sin { color: #F1C8DE; }


/*  なうぷれ  */
.music {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: #621d2e;
  color: #ffffff;
}

.music p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite; 
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 折りたたみ */

/* 折りたたみ */
.accordion {
  margin: 25px;
  background: transparent;
  overflow: hidden;
}

/* タイトル */
.acc-title {
  position: relative;
  padding: 14px 14px 14px 36px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

/* 開いた時は全部同じ色 */
.accordion[open],
.accordion[open] .acc-title,
.accordion[open] .acc-content {
  background: #621d2e;
}

/* デフォルト三角消す */
.acc-title::-webkit-details-marker {
  display: none;
}

/* Qマーク */
.acc-title::after {
  font-family: 'top';
  content: "Q";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* 本文 */
.acc-content {
  padding: 0 14px;
  color: #fff;
  overflow: hidden;
  max-height: 0;
  transition: 
    max-height .45s ease,
    padding .3s ease;
}

/* 開いた時（超重要） */
.accordion[open] .acc-content {
  padding: 14px;
  max-height: 5000px; /* ← 実質無限 */
}

/*  タイムライン  */
.timeline {
  padding: 0.5em 1em;
  margin: 0 auto;
  overflow: auto;
  width: 250px;
  height: 100px;
}

.time {
  padding: 0.5em 1em;
  margin: 0 auto;
  width: 230px;
  color: white;
  background-color: #621d2e;
}

.time p {
  font-size: 10px;
  color: #ffffff;
  margin: 10px;
}

.time name {
  font-size: 9px;
  margin-top: 5px;
  display: block;
}


/*  タイムラインの星の色  */
tmnt:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #BF69F4;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

takn:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #F03C32;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tlrn:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #C10E49;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tssk:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #EF9AAF;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tbry:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #DF6D7C;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tkid:before {
  font-family: 'top';
  content: 'Q';
  font-size: 13px;
  color: #4DD7E3;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

/* 枠 */
.box{
   padding: 15px;
   margin: 0 auto;
   width: 80%;
}

.sen {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 1.8em,
    rgba(255,255,255,.3) 1.8em,
    rgba(255,255,255,.3) 1.85em,
    transparent 1.85em,
    transparent 2em
  );
  background-size: calc(100% - 6em) 2em;
  background-position: 3em 0;
  background-repeat: repeat-y;
  line-height: 2em;
  padding: 2em 3em 0.2em 3em;
  color: #fff;
}

.talk {
    width: 80%;
    height: 150px;
    margin: 0 auto;
    padding: 15px;
    border: 1px rgba(255,255,255,.3) solid;
    background-color: #621d2e;
    color: #000000;
    overflow-y: scroll;
    }

/*フキダシ共通*/
.talk .fw,
.talk .lr,
.talk .akn,
.talk .kid,
.talk .nrs,
.talk .hb,
.talk .ax,
.talk .sng,
.talk .kzh,
.talk .ex,
.talk .msr,
.talk .kgt,
.talk .kne,
.talk .amya,
.talk .bry,
.talk .ngs {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;
    color: #fff;
}

/*フキダシ左*/
.talk .fw.left{
    float: left;
    background: #BF69F4;
}

.talk .lr.left{
    float: left;
    background: #C10E49;
}

.talk .akn.left{
    float: left;
    background: #F03C32;
}

.talk .kid.left{
    float: left;
    background: #4DD7E3;
}

.talk .nrs.left{
    float: left;
    background: #ffc1cc;
}

.talk .hb.left{
    float: left;
    background: #CD3764;
}

.talk .ax.left{
    float: left;
    background: #00A6FE;
}

.talk .sng.left{
    float: left;
    background: #EF8468;
}

.talk .kzh.left{
    float: left;
    background: #ACA7BB;
}

.talk .ex.left{
    float: left;
    background: #5C9BBC;
}

.talk .msr.left{
    float: left;
    background: #1E2232;
}

.talk .kgt.left{
    float: left;
    background: #6EB487;
}

.talk .kne.left{
    float: left;
    background: #ABD3D8;
}

.talk .amya.left{
    float: left;
    background: #C5EDFF;
}

.talk .ngs.left{
    float: left;
    background: #77B6C2;
}

/*フキダシ右*/
.talk .lr.right{
    float: right;
    background: #C10E49;
}

.talk .akn.right{
    float: right;
    background: #F03C32;
}

.talk .kid.right{
    float: right;
    background: #4DD7E3;
}

.talk .fw.right{
    float: right;
    background: #BF69F4;
}

.talk .ax.right{
    float: right;
    background: #00A6FE;
}

.talk .bry.right{
    float: right;
    background: #DF6D7C;
}

/*しっぽ共通*/
.talk .fw::after,
.talk .lr::after,
.talk .akn::after,
.talk .kid::after,
.talk .nrs::after,
.talk .hb::after,
.talk .ax::after,
.talk .sng::after,
.talk .kzh::after,
.talk .ex::after,
.talk .msr::after,
.talk .kgt::after,
.talk .kne::after,
.talk .amya::after,
.talk .ngs::after,
.talk .bry::after{
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}

/*しっぽ左*/
.talk .fw.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #BF69F4 inset; 
}

.talk .lr.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #C10E49 inset; 
}

.talk .akn.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #F03C32 inset; 
}

.talk .kid.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #4DD7E3 inset; 
}

.talk .nrs.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #ffc1cc inset; 
}

.talk .hb.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #CD3764 inset; 
}

.talk .ax.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #00A6FE inset; 
}

.talk .sng.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #EF8468 inset; 
}

.talk .kzh.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #ACA7BB inset; 
}

.talk .ex.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #5C9BBC inset; 
}

.talk .msr.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #1E2232 inset; 
}

.talk .kgt.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #6EB487 inset; 
}

.talk .kne.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #ABD3D8 inset; 
}

.talk .amya.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #C5EDFF inset; 
}

.talk .ngs.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #77B6C2 inset; 
}

/*しっぽ右*/

.talk .fw.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #BF69F4 inset; 
}

.talk .lr.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #C10E49 inset; 
}

.talk .akn.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #F03C32 inset; 
}

.talk .kid.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #4DD7E3 inset; 
}

.talk .ax.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #00A6FE inset; 
}

.talk .bry.right::after{
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #DF6D7C inset; 
}

/*しっぽをつけないとき*/
.talk .fw.no,
.talk .lr.no,
.talk .akn.no,
.talk .kid.no,
.talk .nrs.no,
.talk .hb.no,
.talk .ax.no,
.talk .sng.no,
.talk .kzh.no,
.talk .ex.no,
.talk .msr.no,
.talk .kgt.no,
.talk .kne.no,
.talk .amya.no{
    margin-bottom: 0;
}

.talk .fw.no::after,
.talk .lr.no::after,
.talk .akn.no::after,
.talk .kid.no::after,
.talk .nrs.no::after,
.talk .hb.no::after,
.talk .ax.no::after,
.talk .sng.no::after,
.talk .kzh.no::after,
.talk .ex.no::after,
.talk .msr.no::after,
.talk .kgt.no::after,
.talk .kne.no::after,
.talk .amya.no::after,
.talk .ngs.no::after,
.talk .bry.no::after{
    content: none;
}