@import url("https://use.fontawesome.com/releases/v6.7.0/css/all.css");

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

*{
    font-family: 'Kiwi Maru',serif;
    font-size: 10px;
    color: #8b7f82;
}

body{
    background-color: #fffcdb;
}
a {
    text-decoration: none; 
}
hr { border: none; }




.top{
     margin: 20px auto;
     padding: 4em;/*内側余白*/
     background-color: #fffcdb;/*背景の色*/
     text-align:center;
}


/*ーーーーーーーー概要ページーーーーーーーー*/
.page{
     margin: 20px;
     padding: 4em;/*内側余白*/
     background-color: #fff;/*背景の色*/
}


/*ーーーーーーーーーー本文ーーーーーーーーーー*/
.box{
     margin: 20px;
     padding: 4em;/*内側余白*/
     position: relative;
     z-index: 0;
     background-color: #fff;/*背景色*/
     border-radius: 10px;
}

.box::before{
     position: absolute;
     border: 2px dashed #e3cba9;/*破線の太さ・色*/
     content: '';
     display: block;
     top: 0px;
	 bottom: 0px;
	 left: 0px;
	 right: 0px;
     margin: 10px;
     z-index: -1;
     border-radius: 10px;
}

/*ーーーーーーーーーー乱入用ーーーーーーーーーー*/
.xob{
     margin: 20px;
     padding: 4em;/*内側余白*/
     position: relative;
     z-index: 0;
     background-color: #fff;/*背景色*/
}

.xob::before{
     position: absolute;
     border: 2px dashed #e3cba9;/*破線の太さ・色*/
     content: '';
     display: block;
     top: 0px;
	 bottom: 0px;
     left: 0px;
     right: 0px;
     margin: 10px;
     z-index: -1;
}



big{
    font-family: 'Kiwi Maru', serif;
    font-size: 20px;
    font-weight: bold;
}

/*ーーーーーーーーーーマーカーーーーーーーーーーー*/

umsm{
 background: linear-gradient(transparent 70%, rgba(255, 200, 0, 0.5) 75%); /*数字を小さくすると太くなる*/
}

srfm{
 background: linear-gradient(transparent 70%, rgba(220, 60, 65, 0.5) 75%); /*数字を小さくすると太くなる*/
}

gkm{
 background: linear-gradient(transparent 70%, rgba(255, 203, 91, 0.5) 75%); /*数字を小さくすると太くなる*/
}

tym{
 background: linear-gradient(transparent 70%, rgba(165, 144, 175, 0.5) 75%); /*数字を小さくすると太くなる*/
}

mgm{
 background: linear-gradient(transparent 70%, rgba(255, 137, 157, 0.5) 75%); /*数字を小さくすると太くなる*/
}

rrm{
 background: linear-gradient(transparent 70%, rgba(191, 255, 255, 0.5) 75%); /*数字を小さくすると太くなる*/
}

rtm{
 background: linear-gradient(transparent 70%, rgba(250, 195, 30, 0.5) 75%); /*数字を小さくすると太くなる*/
}

rbm{
 background: linear-gradient(transparent 70%, rgba(165, 140, 220, 0.5) 75%); /*数字を小さくすると太くなる*/
}

kim{
 background: linear-gradient(transparent 70%, rgba(12, 111, 114, 0.5) 75%); /*数字を小さくすると太くなる*/
}

mlnm{
 background: linear-gradient(transparent 70%, rgba(44, 53, 189, 0.5) 75%); /*数字を小さくすると太くなる*/
}

rurm{
 background: linear-gradient(transparent 70%, rgba(40, 135, 255, 0.5) 75%); /*数字を小さくすると太くなる*/
}

trm{
 background: linear-gradient(transparent 70%, rgba(119, 182, 194, 0.5) 30%);
}

szm{
 background: linear-gradient(transparent 70%, rgba(185, 224, 137, 0.5) 30%);
}


torm{
 background: linear-gradient(transparent 70%, rgba(205, 165, 255, 0.5) 30%);
}


brym{
 background: linear-gradient(transparent 70%, rgba(223, 109, 124, 0.5) 30%);
}

/*-----------折りたたみ------------*/

details { 
      text-align: left;
      line-height: 1.7;
      font-size: 10px;
}

details summary{ list-style:none;  }

summary {
      color: #8b7f82;
      font-size: 10px;
      line-height: 1.2;
}

details[open] {
      color: #8b7f82;
      background: #ffffff;
      padding: 5px;
      border-radius: 5px;
      animation: fadeIn 1s ease;
      text-align:left;}

details summary::-webkit-details-marker {
      display: none;
}

details[open] summary::before {
      font-family: "Font Awesome 6 free";
      content: '\f0e5';
      color: #8b7f82;
      font-weight: 900;
      margin-right: 4px;
}

details[open] summary {
      color: #8b7f82; 
}

details summary::before {
      font-family: "Font Awesome 6 free";
      content: '\f0e5';
      font-weight: 900 ;
      color: #8b7f82;
      margin-right: 4px;
}

@keyframes fadeIn {
  0% {
      opacity: 0; 
      transform: translateY(-10px); 
  }
  100% {
      opacity: 1;
      transform: none;
  }

}


/*ーーーーーーーーーーふきだしーーーーーーーーーー*/
/*フレームとフォント*/
.kiw {
    overflow:scroll;
    width: 75%;
    max-width: 450px;
    margin: 0 auto;
    padding: 10px 0;
    min-height:140px;
    height:200px;
    background: #f7f7f7;
    border-radius: 5px;
}

/*フキダシ共通*/
.kiw .ums {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .ums.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .ums.left {
    float: left;
    background: #ffe37f;
}
/*フキダシ右*/
.kiw .ums.right {
    float: right;
    background:#ffe37f;
}
/*しっぽ共通*/
.kiw .ums::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .ums.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #ffe37f inset; 
}
/*しっぽ右*/
.kiw .ums.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #ffe37f inset; 
}
/*しっぽをつけないとき*/
.kiw .ums.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .srf {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .srf.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .srf.left {
    float: left;
    background: #df4f54;
}
/*フキダシ右*/
.kiw .srf.right {
    float: right;
    background: #df4f54;
}
/*しっぽ共通*/
.kiw .srf::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .srf.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #df4f54 inset; 
}
/*しっぽ右*/
.kiw .srf.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #df4f54 inset; 
}
/*しっぽをつけないとき*/
.kiw .srf.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .mg {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .mg.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .mg.left {
    float: left;
    background: #FF899D;
}
/*フキダシ右*/
.kiw .mg.right {
    float: right;
    background: #FF899D;
}
/*しっぽ共通*/
.kiw .mg::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .mg.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #FF899D inset; 
}
/*しっぽ右*/
.kiw .mg.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #FF899D inset; 
}
/*しっぽをつけないとき*/
.kiw .mg.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .rr {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .rr.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .rr.left {
    float: left;
    background: #BFFFFF;
}
/*フキダシ右*/
.kiw .rr.right {
    float: right;
    background: #BFFFFF;
}
/*しっぽ共通*/
.kiw .rr::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .rr.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #BFFFFF inset; 
}
/*しっぽ右*/
.kiw .rr.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #BFFFFF inset; 
}
/*しっぽをつけないとき*/
.kiw .rr.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .gk {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .gk.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .gk.left {
    float: left;
    background: #FFCB5B;
}
/*フキダシ右*/
.kiw .gk.right {
    float: right;
    background: #FFCB5B;
}
/*しっぽ共通*/
.kiw .gk::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .gk.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #FFCB5B inset; 
}
/*しっぽ右*/
.kiw .gk.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #FFCB5B inset; 
}
/*しっぽをつけないとき*/
.kiw .gk.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .ty {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .ty.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .ty.left {
    float: left;
    background: #b7a6bf;
}
/*フキダシ右*/
.kiw .ty.right {
    float: right;
    background: #b7a6bf;
}
/*しっぽ共通*/
.kiw .ty::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .ty.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #b7a6bf inset; 
}
/*しっぽ右*/
.kiw .ty.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #b7a6bf inset; 
}
/*しっぽをつけないとき*/
.kiw .ty.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .rt {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .rt.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .rt.left {
    float: left;
    background: #fbcf4a;
}
/*フキダシ右*/
.kiw .rt.right {
    float: right;
    background: #fbcf4a;
}
/*しっぽ共通*/
.kiw .rt::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .rt.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #fbcf4a inset; 
}
/*しっぽ右*/
.kiw .rt.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #fbcf4a inset; 
}
/*しっぽをつけないとき*/
.kiw .rt.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .rb {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .rb.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .rb.left {
    float: left;
    background: #b7a3e3;
}
/*フキダシ右*/
.kiw .rb.right {
    float: right;
    background: #b7a3e3;
}
/*しっぽ共通*/
.kiw .rb::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .rb.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #b7a3e3 inset; 
}
/*しっぽ右*/
.kiw .rb.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #b7a3e3 inset; 
}
/*しっぽをつけないとき*/
.kiw .rb.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .ki {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .ki.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .ki.left {
    float: left;
    background: #549a9c;
}
/*フキダシ右*/
.kiw .ki.right {
    float: right;
    background: #549a9c;
}
/*しっぽ共通*/
.kiw .ki::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .ki.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #549a9c inset; 
}
/*しっぽ右*/
.kiw .ki.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #549a9c inset; 
}
/*しっぽをつけないとき*/
.kiw .ki.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .mln {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    color: #000000;
    box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .mln.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kiw .mln.left {
    float: left;
    background: #8085d7;
}
/*フキダシ右*/
.kiw .mln.right {
    float: right;
    background: #8085d7;
}
/*しっぽ共通*/
.kiw .mln::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kiw .mln.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #8085d7 inset; 
}
/*しっぽ右*/
.kiw .mln.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #8085d7 inset; 
}
/*しっぽをつけないとき*/
.kiw .mln.notail::after {
    content: none;
}

/*フキダシ共通*/
.kiw .tr {
     position: relative;
     display: inline-block;
     max-width: 192px;
     margin: 1px 10px 6px;
     padding: 9px 14px;
     border-radius: 19px;
     overflow-wrap: break-word;
     clear: both;
     color: #000000;
     box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .tr.notail {
      margin-bottom: 0;
}

/*フキダシ左*/
.kiw .tr.left {
      float: left;
      background: #77B6C2;
}

/*フキダシ右*/
.kiw .tr.right {
      float: right;
      background: #77B6C2;
}

/*しっぽ共通*/
.kiw .tr::after {
      position: absolute;
      content: "";
      width: 17px;
      height: 17px;
      bottom: 0;
}

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

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

/*しっぽをつけないとき*/
.kiw .tr.notail::after {
      content: none;
}

/*フキダシ共通*/
.kiw .sz {
      position: relative;
      display: inline-block;
      max-width: 192px;
      margin: 1px 10px 6px;
      padding: 9px 14px;
      border-radius: 19px;
      overflow-wrap: break-word;
      clear: both;
      color: #000000;
      box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .sz.notail {
      margin-bottom: 0;
}

/*フキダシ左*/
.kiw .sz.left {
      float: left;
      background: #B9E089;
}

/*フキダシ右*/
.kiw .sz.right {
      float: right;
      background: #B9E089;
}

/*しっぽ共通*/
.kiw .sz::after {
      position: absolute;
      content: "";
      width: 17px;
      height: 17px;
      bottom: 0;
}

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

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

/*しっぽをつけないとき*/
.kiw .sz.notail::after {
      content: none;
}

/*フキダシ共通*/
.kiw .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;
      color: #000000;
      box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .bry.notail {
      margin-bottom: 0;
}

/*フキダシ左*/
.kiw .bry.left {
      float: left;
      background: #DF6D7C;
}

/*フキダシ右*/
.kiw .bry.right {
      float: right;
      background: #DF6D7C;
}

/*しっぽ共通*/
.kiw .bry::after {
      position: absolute;
      content: "";
      width: 17px;
      height: 17px;
      bottom: 0;
}

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

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

/*しっぽをつけないとき*/
.kiw .bry.notail::after {
      content: none;
}


/*フキダシ共通*/
.kiw .tor {
      position: relative;
      display: inline-block;
      max-width: 192px;
      margin: 1px 10px 6px;
      padding: 9px 14px;
      border-radius: 19px;
      overflow-wrap: break-word;
      clear: both;
      color: #000000;
      box-sizing: content-box;/*はてな用*/
}

/*しっぽをつけないとき*/
.kiw .tor.notail {
      margin-bottom: 0;
}

/*フキダシ左*/
.kiw .tor.left {
      float: left;
      background: #CDA5FF;
}

/*フキダシ右*/
.kiw .tor.right {
      float: right;
      background: #CDA5FF;
}

/*しっぽ共通*/
.kiw .tor::after {
      position: absolute;
      content: "";
      width: 17px;
      height: 17px;
      bottom: 0;
}

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

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

/*しっぽをつけないとき*/
.kiw .tor.notail::after {
      content: none;
}

/*ーーーーーーーーなうぷれーーーーーーーー*/

.playlist{
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     width: 100%;
     border-radius: 10px;/*丸みを調整*/
     background-color: #e3f6fb;/*背景色*/
     text-align: center;
     font-size: 10px;
}

.li{
  color: #806C68;
  font-size: 10px;
  display: inline-block;
  white-space: nowrap;
  animation: text_scroll 10s linear infinite;
}
@keyframes text_scroll{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}