@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho&display=swap" rel="stylesheet");

@font-face {
 font-family: "pon";
 src: url("https://dl.dropboxusercontent.com/scl/fi/gok0atp4whemgvb5495uk/Music-and-Party.ttf?rlkey=bvh96e91lvcnyzrwsuifkyztb&st=bcqunqbz") format("truetype");
}

@font-face {
 font-family: "point";
 src: url("https://dl.dropboxusercontent.com/scl/fi/mi1ei3vvq3bwmrq16etje/Woodcutter-Mixed-Icons-vol1.ttf?rlkey=ubasnu08i1dxklkynly2meskf&st=wyphzozq") format("truetype");
}

@font-face {
 font-family: "book";
 src: url("https://dl.dropboxusercontent.com/scl/fi/3axw7uhvm2uskyp6a6m0j/Book-Ends.ttf?rlkey=hy6zagj4gtvk7grrxlggka3xk&st=cijs7pql") format("truetype");
}

*{
 margin: 0;
 padding: 0;
 font-size: 12px;
 color: #eaedf7;
 letter-spacing: 0.05em;
 line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
}

body{
background: #171F55;
font-family: "Shippori Mincho", serif;
}

a{
 color:#383d3d;
 text-decoration: none;
}


/*-------表紙------*/

.hyousi {
	position: relative;
	padding-left: 20px;
   font-family: 'point';
   font-size: 140px;
}

.hyousi span {
	position: relative;
	z-index: 2;
}

.hyousi::before {
	content: attr(data-en);
	position: absolute;
	transform: rotate(-5deg);
	top: 30px;
   left: 10px;
	color: rgba(255,190,8,0.6);
	font-size: 40px;
	font-weight: 400;
	font-family: luxus-brut, cursive;
	font-style: italic;
}

/*-------注意書き------*/


.info {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  outline: 3px solid #c1ab05;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #c1ab05 0 2px, #fff 2px 6px);
}

.info:first-letter {
  font-size: 3em;
  color: #c1ab05;
}

.stamp2 {
	position: relative;
   font-family: 'point';
}

.stamp4 {
   color: #383d3d;
   font-size: 5em;
	position: relative;
   font-family: 'book';
}

.stamp6 {
   color: #A58CDC;
   font-size: 3em;
   font-family: 'book';
}

.stamp7 {
   color: #5A5FAA;
   font-size: 3em;
   font-family: 'book';
}

/*-------本棚------*/


.bkm {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  outline: 3px solid #c1ab05;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #c1ab05 0 2px, #fff 2px 6px);
}


.bkm:first-letter {
  font-size: 4em;
  color: #c1ab05;
}

.stamp3 {
	position: relative;
   font-family: 'book';
}

.stamp5 {
   color: #383d3d;
   font-size: 3em;
   font-family: 'book';
}


/*-------囲み枠------*/

.syoumain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  outline: 3px solid #A58CDC;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #A58CDC 0 2px, #fff 2px 6px);
}

.syoumain:first-letter {
  font-size: 1.6em;
  color: #A58CDC;
}


.roumain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #5A5FAA;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #5A5FAA 0 2px, #fff 2px 6px);
}

.roumain:first-letter {
  font-size: 1.6em;
  color: #5A5FAA;
}


.kidmain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #4DD7E3;
  outline-offset: 5px;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #4DD7E3 0 2px, #fff 2px 6px);
}

.kidmain:first-letter {
  font-size: 1.6em;
  color: #4DD7E3;
}


.nagimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #235AAA;
  outline-offset: 5px;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #235AAA 0 2px, #fff 2px 6px);
}

.nagimain:first-letter {
  font-size: 1.6em;
  color: #235AAA;
}


.merumain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #EB4682;
  outline-offset: 5px;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #EB4682 0 2px, #fff 2px 6px);
}

.merumain:first-letter {
  font-size: 1.6em;
  color: #EB4682;
}

.hapimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #FFE632;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #FFE632 0 2px, #fff 2px 6px);
}

.hapimain:first-letter {
  font-size: 1.6em;
  color: #FFE632;
}

.ktmmain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #FF6E1E;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #FF6E1E 0 2px, #fff 2px 6px);
}

.ktmmain:first-letter {
  font-size: 1.6em;
  color: #FF6E1E;
}

.hosimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #A58CDC;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #A58CDC 0 2px, #fff 2px 6px);
}

.hosimain:first-letter {
  font-size: 1.6em;
  color: #A58CDC;
}


.himamain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #FBE340;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #FBE340 0 2px, #fff 2px 6px);
}

.himamain:first-letter {
  font-size: 1.6em;
  color: #FBE340;
}


.saramain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #FAB80D;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #FAB80D 0 2px, #fff 2px 6px);
}

.saramain:first-letter {
  font-size: 1.6em;
  color: #FAB80D;
}


.seramain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #DC3C41;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #DC3C41 0 2px, #fff 2px 6px);
}

.seramain:first-letter {
  font-size: 1.6em;
  color: #DC3C41;
}


.gamimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #E6325F;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #E6325F 0 2px, #fff 2px 6px);
}

.gamimain:first-letter {
  font-size: 1.6em;
  color: #E6325F;
}


.ponmain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #5A7DFF;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #5A7DFF 0 2px, #fff 2px 6px);
}

.ponmain:first-letter {
  font-size: 1.6em;
  color: #5A7DFF;
}


.rocomain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #198CAA;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #198CAA 0 2px, #fff 2px 6px);
}

.rocomain:first-letter {
  font-size: 1.6em;
  color: #198CAA;
}


.akgmain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #FF8C9B;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #FF8C9B 0 2px, #fff 2px 6px);
}

.akgmain:first-letter {
  font-size: 1.6em;
  color: #FF8C9B;
}

.rurimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #2887FF;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #2887FF 0 2px, #fff 2px 6px);
}

.rurimain:first-letter {
  font-size: 1.6em;
  color: #2887FF;
}

.shenamain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #F1C8DE;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #F1C8DE 0 2px, #fff 2px 6px);
}

.shenamain:first-letter {
  font-size: 1.6em;
  color: #F1C8DE;
}

.fuwamain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #BF69F4;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #BF69F4 0 2px, #fff 2px 6px);
}

.fuwamain:first-letter {
  font-size: 1.6em;
  color: #BF69F4;
}

.sumimain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #b0c4de;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #b0c4de 0 2px, #fff 2px 6px);
}

.sumimain:first-letter {
  font-size: 1.6em;
  color: #b0c4de;
}

.nazumain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  color: #383d3d;
  outline: 3px solid #fabedc;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #fabedc 0 2px, #fff 2px 6px);
}

.nazumain:first-letter {
  font-size: 1.6em;
  color: #fabedc;
}

.madomain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  outline: 3px solid #FF8184;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px,   #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #FF8184 0 2px, #fff 2px 6px);
}

.madomain:first-letter {
  font-size: 1.6em;
  color: #FF8184;
}

.yanemain {
  width: 80%;
  max-width: 270px;
  margin: 0 auto;
  padding: 20px;
  outline: 3px solid #54A2E5;
  outline-offset: 5px;
  font-family: "Shippori Mincho", serif;
  color: #383d3d;
  background: linear-gradient(45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(45deg, #b0c4de 0 2px, #fff 2px 6px);
}

.yanemain:first-letter {
  font-size: 1.6em;
  color: #54A2E5;
}

/*-------吹き出し------*/

.talk {
    width: 90%;
    height: 150px;
    margin: 0 auto;
    padding: 1em 0;
    border: 1px solid #fff;
    background-color: #fff;
    font-size: 12px;
    overflow: auto;
    font-family: "Shippori Mincho", serif;
}

.talk .rou{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .rou.no {
    margin-bottom: 0;
}

.talk .rou.l {
    float: left;
    background: #5A5FAA;
    color: white;
}

.talk .rou.r {
    float: right;
    background: #5A5FAA;
    color: white;
}

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

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

.talk .rou.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#5A5FAA inset; 
}
.talk .rou.no::after {
    content: none; }


.talk .syou{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .syou.no {
    margin-bottom: 0;
}

.talk .syou.l {
    float: left;
    background: #A58CDC;
    color: white;
}

.talk .syou.r {
    float: right;
    background: #A58CDC;
    color: white;
}


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

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

.talk .syou.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#A58CDC inset; 
}
.talk .syou.no::after {
    content: none; }


.talk .kid{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .kid.no {
    margin-bottom: 0;
}

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

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

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

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

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



.talk .nagi{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .nagi.no {
    margin-bottom: 0;
}

.talk .nagi.l {
    float: left;
    background: #235AAA;
    color: white;
}

.talk .nagi.r {
    float: right;
    background: #235AAA;
    color: white;
}

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

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

.talk .nagi.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#235AAA inset; 
}
.talk .nagi.no::after {
    content: none; }


.talk .meru{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .meru.no {
    margin-bottom: 0;
}

.talk .meru.l {
    float: left;
    background: #EB4682;
    color: white;
}

.talk .meru.r {
    float: right;
    background: #EB4682;
    color: white;
}

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

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

.talk .meru.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#EB4682 inset; 
}
.talk .meru.no::after {
    content: none; }


.talk .ktm{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .ktm.no {
    margin-bottom: 0;
}

.talk .ktm.l {
    float: left;
    background: #FF6E1E;
    color: white;
}

.talk .ktm.r {
    float: right;
    background: #FF6E1E;
    color: white;
}

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

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

.talk .ktm.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FF6E1E inset; 
}
.talk .ktm.no::after {
    content: none; }

.talk .hapi{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .hapi.no {
    margin-bottom: 0;
}

.talk .hapi.l {
    float: left;
    background: #FFE632;
    color: black;
}

.talk .hapi.r {
    float: right;
    background: #FFE632;
    color: black;
}

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

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

.talk .hapi.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FFE632 inset; 
}
.talk .hapi.no::after {
    content: none; }

.talk .hima{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .hima.no {
    margin-bottom: 0;
}

.talk .hima.l {
    float: left;
    background: #FBE340;
    color:black;
}

.talk .hima.r {
    float: right;
    background: #FBE340;
    color: black;
}

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

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

.talk .hima.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FBE340 inset; 
}
.talk .hima.no::after {
    content: none; }


.talk .sara{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .sara.no {
    margin-bottom: 0;
}

.talk .sara.l {
    float: left;
    background: #FAB80D;
    color: white;
}

.talk .sara.r {
    float: right;
    background: #FAB80D;
    color: white;
}

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

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

.talk .sara.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FAB80D inset; 
}
.talk .sara.no::after {
    content: none; }


.talk .sera{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .sera.no {
    margin-bottom: 0;
}

.talk .sera.l {
    float: left;
    background: #DC3C41;
    color: white;
}

.talk .sera.r {
    float: right;
    background: #DC3C41;
    color: white;
}

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

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

.talk .sera.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#DC3C41 inset; 
}
.talk .sera.no::after {
    content: none; }


.talk .gami{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .gami.no {
    margin-bottom: 0;
}

.talk .gami.l {
    float: left;
    background: #E6325F;
    color: white;
}

.talk .gami.r {
    float: right;
    background: #E6325F;
    color: white;
}

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

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

.talk .gami.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#E6325F inset; 
}
.talk .gami.no::after {
    content: none; }


.talk .pon{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .pon.no {
    margin-bottom: 0;
}

.talk .pon.l {
    float: left;
    background: #5A7DFF;
    color: white;
}

.talk .pon.r {
    float: right;
    background: #5A7DFF;
    color: white;
}

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

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

.talk .pon.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#5A7DFF inset; 
}
.talk .pon.no::after {
    content: none; }


.talk .roco{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .roco.no {
    margin-bottom: 0;
}

.talk .roco.l {
    float: left;
    background: #198CAA;
    color: white;
}

.talk .roco.r {
    float: right;
    background: #198CAA;
    color: white;
}

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

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

.talk .roco.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#198CAA inset; 
}
.talk .roco.no::after {
    content: none; }


.talk .akg{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .akg.no {
    margin-bottom: 0;
}

.talk .akg.l {
    float: left;
    background: #FF8C9B;
    color: white;
}

.talk .akg.r {
    float: right;
    background: #FF8C9B;
    color: white;
}

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

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

.talk .akg.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FF8C9B inset; 
}
.talk .akg.no::after {
    content: none; }

.talk .ruri{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .ruri.no {
    margin-bottom: 0;
}

.talk .ruri.l {
    float: left;
    background: #2887FF;
    color: white;
}

.talk .ruri.r {
    float: right;
    background: #2887FF;
    color: white;
}

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

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

.talk .ruri.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#2887FF inset; 
}
.talk .ruri.no::after {
    content: none; }

.talk .shena{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .shena.no {
    margin-bottom: 0;
}

.talk .shena.l {
    float: left;
    background: #F1C8DE;
    color: white;
}

.talk .shena.r {
    float: right;
    background: #F1C8DE;
    color: white;
}

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

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

.talk .shena.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#F1C8DE inset; 
}
.talk . shena.no::after {
    content: none; }


.talk .fuwa{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .fuwa.no {
    margin-bottom: 0;
}

.talk .fuwa.l {
    float: left;
    background: #BF69F4;
    color: white;
}

.talk .fuwa.r {
    float: right;
    background: #BF69F4;
    color: white;
}

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

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

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


.talk .yane{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .yane.no {
    margin-bottom: 0;
}

.talk .yane.l {
    float: left;
    background: #54A2E5;
    color: white;
}

.talk .yane.r {
    float: right;
    background: #54A2E5;
    color: white;
}

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

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

.talk .yane.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#54A2E5 inset; 
}
.talk .yane.no::after {
    content: none; }


.talk .mado{
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    font-family: "Shippori Mincho", serif;
}

.talk .mado.no {
    margin-bottom: 0;
}

.talk .mado.l {
    float: left;
    background: #FF8184;
    color: white;
}

.talk .mado.r {
    float: right;
    background: #FF8184;
    color: white;
}

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

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

.talk .mado.r::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px 	#FF8184 inset; 
}
.talk .mado.no::after {
    content: none; }

/*-------ラインマーカー------*/

.syoulm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(165, 140, 220, 0.2) 50%,rgb(165, 140, 220) 75%,rgba(165, 140, 220, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.roulm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(90, 95, 170, 0.2) 50%,rgb(90, 95, 170) 75%,rgba(90, 95, 170, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.kidlm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(77, 215, 227, 0.2) 50%,rgb(77, 215, 227) 75%,rgba(77, 215, 227, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.nagilm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(35, 90, 170, 0.2) 50%,rgb(35, 90, 170) 75%,rgba(35, 90, 170, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.merulm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(235, 70, 130, 0.2) 50%,rgb(235, 70, 130) 75%,rgba(235, 70, 130, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.ktmlm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(255, 110, 30, 0.2) 50%,rgb(255, 110, 30) 75%,rgba(255, 110, 30, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.hapilm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(255, 230, 50, 0.2) 50%,rgb(255, 230, 50) 75%,rgba(255, 230, 50, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.himalm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(251, 227, 64, 0.2) 50%,rgb(251, 227, 64) 75%,rgba(251, 227, 64, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.saralm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(250, 184, 13, 0.2) 50%,rgb(250, 184, 13) 75%,rgba(250, 184, 13, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.seralm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(220, 60, 65, 0.2) 50%,rgb(220, 60, 65) 75%,rgba(220, 60, 65, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.gamilm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(230, 50, 95, 0.2) 50%,rgb(230, 50, 95) 75%,rgba(230, 50, 95, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.ponlm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(90, 125, 255, 0.2) 50%,rgb(90, 125, 255) 75%,rgba(90, 125, 255, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.rocolm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(25, 140, 170, 0.2) 50%,rgb(25, 140, 170) 75%,rgba(25, 140, 170, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.akglm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(255, 140, 155, 0.2) 50%,rgb(255, 140, 155) 75%,rgba(255, 140, 155, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.rurilm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(40, 135, 255, 0.2) 50%,rgb(40, 135, 255) 75%,rgba(40, 135, 255, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.yanelm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(84, 162, 229, 0.2) 50%,rgb(84, 162, 229) 75%,rgba(84, 162, 229, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}

.madolm {
  color: #383d3d;
  background: linear-gradient(transparent 50%,rgba(255, 129, 132, 0.2) 50%,rgb(255, 129, 132) 75%,rgba(255, 129, 132, 0.2));
   font-weight: bold;
   font-family: "Shippori Mincho", serif;
}


/*-------なうぷれ------*/

.stamp{
 font-family: 'pon';
 display:inline-block;
 color: #383d3d;
}

.p{
 display:inline-block;
 color: #383d3d;
}

.nowplay {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  font-family: "Shippori Mincho", serif;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}



/*-------リアタイ------*/

.realtime {
    width: 80%;
    height: 150px;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #171F55;
    overflow: auto;
    font-family: "Shippori Mincho", serif;
}

.realtime .rt{
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-family: "Shippori Mincho", serif;
    color: #c1ab05;
}