@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-face{
  font-family: moon;
  src: url('https://dl.dropboxusercontent.com/scl/fi/zpglogwgf9j2bdlrzyajt/Moon_2.0.otf?rlkey=400yn1stvgkam80cu0ijbhyi8&st=t6c5xw9j&dl=0')  
  format("opentype");
}

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

/*  コーヒーのリンク  */
@font-face{
  font-family: coffee;
  src: url('https://dl.dropboxusercontent.com/scl/fi/i31nleaso4dextwfkx0rr/Doodle-Coffee-Scents.otf?rlkey=6br15cqi2pldv59eks8ft4yld&st=s2805hfx&dl=0')  
  format("opentype");
}

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




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

hr {
  border: none;
  height: 1px;
  background: #1B1133;
  margin: 12px 0;
}

body { background-color: #1B1133; }

a {
  font-size: 11px;
  text-decoration: none;
  color: #ffffff;
}




/*  表紙周り  */
ti {
  font-family: 'Kaisei Decol', sans-serif;
  font-size: 14px;
}




/* 枠 */
.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;
}



/*  各人ごとのカラーコード  */
mnt { color: #B585D2; }
lrn { color: #C10E49; }
kne { color: #ABD3D8; }
akn { color: #F03C32; }
kgt { color: #6EB487; }
hbr { color: #CD3764; }
exa { color: #5C9BBC; }
ibr { color: #7CA1F0; }
kzh { color: #ACA7BB; }
ngs { color: #77B6C2; }
bry { color: #DF6D7C; }
sng { color: #EF8468; }
kai { color: #0C6F72; }


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

.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] { background: #2E1D59; }
.accordion[open] .acc-title { background: #2E1D59; }
.accordion[open] .acc-content { background: #2E1D59; }

.acc-title::-webkit-details-marker {
  display: none;
}

.acc-title::after {
  font-family: 'moon';
  content: "l";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .3s;
}

.accordion[open] .acc-title::after { content: "L"; }

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

.accordion[open] .acc-content {
  padding: 14px;
  max-height: 250px;
}




/*  タイムライン  */
.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: #2E1D59;
}

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

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


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

tkzh:before {
  font-family: 'moon';
  content: 'L';
  font-size: 20px;
  color: #ACA7BB;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tkne:before {
  font-family: 'moon';
  content: 'L';
  font-size: 20px;
  color: #ABD3D8;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}

tngs:before {
  font-family: 'moon';
  content: 'L';
  font-size: 20px;
  color: #77B6C2;
  position: relative;
  margin-top: 2px;
  margin-right: 10px;
  float: left;
}



/*  ふきだし  */
.talk {
    width: 80%;
    height: 150px;
    margin: 0 auto;
    padding: 15px;
    border: 1px rgba(255,255,255,.3) solid;
    background-color: #2E1D59;
    color: #000000;
    overflow-y: scroll;
    }

/*フキダシ共通*/
.talk .mnt,
.talk .lrn,
.talk .kne,
.talk .akn,
.talk .kzh,
.talk .ngs,
.talk .bry {
    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 .lrn.left{
    float: left;
    background: #C10E49;
}

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

.talk .mnt.left{
    float: left;
    background: #BF69F4;
}

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

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

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

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

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

/*しっぽ共通*/
.talk .mnt::after,
.talk .lrn::after,
.talk .kne::after,
.talk .akn::after,
.talk .kzh::after,
.talk .ngs::after,
.talk .bry::after{
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}

/*しっぽ左*/
.talk .lrn.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 .mnt.left::after{
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #BF69F4 inset; 
}

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

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

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

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

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

/*しっぽをつけないとき*/
.talk .mnt.no,
.talk .lrn.no,
.talk .kne.no,
.talk .akn.no,
.talk .kzh.no,
.talk .ngs.no,
.talk .bry.no {
    margin-bottom: 0;
}

.talk .mnt.no::after,
.talk .lrn.no::after,
.talk .kne.no::after,
.talk .akn.no::after,
.talk .kzh.no::after,
.talk .ngs.no::after,
.talk .bry.no::after {
    content: none;
}