@charset "utf-8";

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

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css');


/* フォント */

@font-face{
font-family: 背景;
src: url('https://dl.dropboxusercontent.com/scl/fi/8haxp7rybgjx8qbhus80o/Vintage-Decorative-signs-3.ttf?rlkey=d2m322aoqmjerekxxzg6gaf26&dl=0')
     format("truetype");
}

@font-face{
font-family: 背景2;
src: url('https://dl.dropboxusercontent.com/scl/fi/bavtofcgsnek14npcuxqw/Calligraphic-Frames-Soft-Two-2.otf?rlkey=p74pyie3n38s665q4kydfkwtz&dl=0')
     format("opentype");
}

@font-face{
font-family: タイトル;
src: url('https://dl.dropboxusercontent.com/scl/fi/oumh0i4438ji5cea3tq34/Decision-Making.ttf?rlkey=27t9uu0jsm41ck2d82cfr365g&dl=0')
     format("truetype");
}

@font-face{
font-family: タイトル2;
src: url('https://dl.dropboxusercontent.com/scl/fi/c3h4q8yur2mp8q4sbg9gv/Antro_Vectra_Bolder.otf?rlkey=j8bhs7kr2ahbkporp30h6yhnv&dl=0')
     format("opentype");
}

@font-face{
font-family: 蝶々;
src: url('https://dl.dropboxusercontent.com/scl/fi/dgzmr7ebjqfrhnyrq9iur/Butterflies.ttf?rlkey=ls01kq2sm4q0z6igbc3qz7er0&dl=0')
     format("truetype");
}

@font-face{
font-family: 羽;
src: url('https://dl.dropboxusercontent.com/scl/fi/tf5wma7pqyufc6pn8880r/wings-of-wind-tfb.ttf?rlkey=qh2dhmu18dxivxxn1ftm4nh5d&dl=0')
     format("truetype");
}

@font-face{
font-family: ゲーム;
src: url('https://dl.dropboxusercontent.com/scl/fi/cgbi3blxukjh5turmom0t/video-games.ttf?rlkey=clje8hshhfta3e9at2eqsqqvh&dl=0')
     format("truetype");
}

@font-face{
font-family: ぺちょフォント;
src: url('https://dl.dropboxusercontent.com/scl/fi/86hdcahaqgayd8pbt9r3b/komorebi-gothic-P.ttf?rlkey=sgkn42ayfy5bt37vls22e47gz&dl=0')
     format("truetype");
}

@font-face{
font-family: ぺちょ乱入;
src: url('https://dl.dropboxusercontent.com/scl/fi/up1gp2emhdv27orygtcx3/.ttf?rlkey=sgww03hyzh2vof5qi1x2a9b9c&dl=0')
     format("truetype");
}

@font-face{
font-family: だるまフォント;
src: url('https://dl.dropboxusercontent.com/s/ldtyk1ad5rn38oe/FLOPDesignFont.ttf')
     format("truetype");
}

@font-face{
font-family: だるま乱入;
src: url('https://dl.dropboxusercontent.com/scl/fi/uf6e4t2vg3cefw4i831v2/MT_TARE.ttf?rlkey=vxdzm5pwcei78ecx3h8tjv8k5&dl=0')
     format("truetype");
}

@font-face{
font-family: 全体フォント;
src: url('https://dl.dropboxusercontent.com/scl/fi/khbgdkl5peuej2t7cpifw/Mamelon-3-Hi-Regular.otf?rlkey=rd7lin5gswdu9w7ncnztrl1as&dl=0')
     format("truetype");
}

@font-face{
font-family: ドット;
src: url('https://dl.dropboxusercontent.com/s/gngr2by0503o1vj/Nosutaru-dotMPlusH-10-Regular.ttf')
     format("truetype");
}

@font-face{
font-family: ミニタイトル;
src: url('https://dl.dropboxusercontent.com/scl/fi/8puzclyfarwfo31fmd357/nicoca_v2.ttf?rlkey=woxvf6q21898ef8ga51rnx129&dl=0')
     format("truetype");
}

/* タイトル */

title {
    font-family: 'タイトル';
    font-size: 25px;
    color: #000;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px #fff;
    position:  relative; 
    z-index: 3;
}

title2 {
    font-family: 'タイトル';
    font-size: 15px;
    color: #000;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px #fff;
    position:  relative; 
    z-index: 3;
}

subtitlew {
    font-family: 'タイトル2';
    font-size: 30px;
    color: #fff;
}

subtitleb {
    font-family: 'タイトル2';
    font-size: 30px;
    color: #000;
}

drmt {
    margin: 0 auto;
    padding: 0.5em;
    border-radius: 15px;
    color: #ffffff;
    font-family: 'ミニタイトル';
    font-size: 15px;
    background-color: #b22222; 
    position: relative;
    text-align: left;
}

ptyt {
    margin: 0 auto;
    padding: 0.5em;
    border-radius: 15px;
    color: #ffffff;
    font-family: 'ミニタイトル';
    font-size: 15px;
    background-color: #F8B759; 
    position: relative;
    text-align: left;
}

/* 乱入フォント */

daru {
    font-family: 'だるま乱入';
    font-size: 10px;
    color: #b22222;
}

peti {
    font-family: 'ぺちょ乱入';
    font-size: 10px;
    color: #F8B759;
}

/* 全体 */

.cover {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #00000000; /* 背景色 */
 border: 1px solid #00000000; /* 枠線 */
 z-index: 1;
}

.cover:after {
  font-family: "背景2";
  content: 'c';
  color: #000000; 
  font-size: 250px;
  left: 10px;
  top: 80px;
  position: absolute;
  z-index: 2;
}


* {
 font-family: '全体フォント';
 color: #000;
 border: none;
}

a {
    color: #000;
    text-decoration: none;
}

body {
    font-size: 12px;
    line-height: 15px;
    margin: 10px;
    background-color: #7D0F0F; /* 背景色 */
} 

html:before, html:after,
body:before, body:after {
 width: 10px;
 content: " " ;
 background: #000000;
 position: fixed;
 z-index: 1;
}

body:before {
 width: 100vw;
 bottom: 0; left: 0;
}
body:after {
 height: 100vh;
 top: 0; left: 0;
}
html:before {
 width: 100vw;
 left: 0; top: 0;
}
html:after {
 height: 100vh;
 right: 0; top: 0;
}

/* ボックス */

.daruma {
    margin: 0 auto;
    padding: 25px; 
    width: 250px;
    color: #fff;
    font-family: 'だるまフォント';
    font-size: 10px;
    background-color:#000000; 
    position: relative;
    text-align: left; 
}

.daruma:after {
    position: absolute;
    font-family: "羽";
    content: "A"; 
	 right: -25px;
	 bottom: 0px;
    color: #fff; 
    opacity: 0.8;
    font-size: 40px;
    transform:rotate(15deg);
    z-index: 3;
}

.daruma details {
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    border: none;
    border-radius: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 10px;
   } 

.daruma details[open] {
    padding: 15px;
    text-align: left;
    background-color: #rgba(0,0,0,0.8);
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
   }

.daruma details[open] summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f130' ;
    font-size: 15px;
    color: #a9a9a9;
  }

.daruma details summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f131' ;
    font-size: 15px;
    color: #a9a9a9;
  }
  
.daruma details summary{
    list-style : none;
    color: #fff;
    font-size: 10px;
    line-height: 1;
   }

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


.petit {
    margin: 0 auto;
    padding: 25px; 
    width: 250px;
    color: #000;
    font-family: 'ぺちょフォント';
    font-size: 10px;
    background-color:#ffffff; 
    position: relative;
    text-align: left; 
}

.petit:after {
    position: absolute;
    font-family: "蝶々";
    content: "E"; 
	 right: -15px;
	 bottom: 0px;
    color: #000; 
    opacity: 0.8;
    font-size: 50px;
    transform:rotate(15deg);
    z-index: 3;
}

.petit details {
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    border: none;
    border-radius: 10px;
    padding-bottom: 10px;
    color: #000;
    font-size: 10px;
   } 

.petit details[open] {
    padding: 15px;
    text-align: left;
    background-color: #rgba(0,0,0,0.8);
    border-radius: 10px;
    color: #000;
    font-size: 10px;
   }

.petit details[open] summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f130' ;
    font-size: 15px;
    color: #a9a9a9;
  }

.petit details summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f131' ;
    font-size: 15px;
    color: #a9a9a9;
  }
  
.petit details summary{
    list-style : none;
    color: #000;
    font-size: 10px;
    line-height: 1;
   }

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


.boxw {
    margin: 0 auto;
    padding: 25px; 
    width: 250px;
    color: #000;
    font-family: '全体フォント';
    font-size: 10px;
    background-color:#ffffff; 
    position: relative;
    text-align: left; 
}

.boxb {
    margin: 0 auto;
    padding: 25px; 
    width: 250px;
    color: #fff;
    font-family: '全体フォント';
    font-size: 10px;
    background-color:#000000; 
    position: relative;
    text-align: left; 
}

/*折り畳み*/

details {
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    border: none;
    border-radius: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 10px;
   } 

details[open] {
    padding: 15px;
    text-align: left;
    background-color: #rgba(0,0,0,0.8);
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
   }

details[open] summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f130' ;
    font-size: 15px;
    color: #a9a9a9;
  }

details summary::before {
    font-family: "Font Awesome 5 Free";
    content: '\f131' ;
    font-size: 15px;
    color: #a9a9a9;
  }
  
details summary{
    list-style : none;
    color: #fff;
    font-size: 10px;
    line-height: 1;
   }

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


/*強調*/

kz {
    background:linear-gradient(transparent 0%, #aca7bb 0%);
    color:#fff;
}

vn {
    background:linear-gradient(transparent 0%, #192f60 0%);
    color:#fff;
}

ur {
    background:linear-gradient(transparent 0%, #CC3333 0%);
    color:#fff;
}

hr {
    background:linear-gradient(transparent 0%, #EF9A0D 0%);
    color:#fff;
}

dr {
    background:linear-gradient(transparent 0%, #b22222 0%);
    color:#fff;
}

ar {
    background:linear-gradient(transparent 0%, #ec6800 0%);
    color:#fff;
}

kn {
    background:linear-gradient(transparent 0%, #ABD3D8 0%);
    color:#fff;
}

lr {
    background:linear-gradient(transparent 0%, #C10E49 0%);
    color:#fff;
}

nr {
    background:linear-gradient(transparent 0%, #EC9FE1 0%);
    color:#fff;
}

pt {
    background:linear-gradient(transparent 0%, #F8B759 0%);
    color:#fff;
}

ns {
    background:linear-gradient(transparent 0%, #6a5acd 0%);
    color:#fff;
}

rr {
    background:linear-gradient(transparent 0%, #EF6F94 0%);
    color:#fff;
}

knk {
    background:linear-gradient(transparent 0%, #FFCC33 0%);
    color:#fff;
}

/*スクロール*/

.scr{
  width: 280px;
  height: 80px;
  overflow: scroll;
}

/*リアルタイム*/

.real {
    margin: 0 auto;
    padding: 10px; 
    width: 280px;
    color: #D4D1D1;
    font-family: '全体フォント';
    font-size: 12px;
    background-color:#00000000;
    position: relative;
    text-align: left; 
}

.time {
  margin: 5px;
  padding: 10px;
  font-family: '全体フォント';
  color: #D4D1D1;
  font-size: 10px;
}

ir {
  display: inline-block;
  font-family: 'ゲーム';
  color: #D4D1D1;
  font-size: 16px;
}

tl {
    font-family: '全体フォント';
    font-size: 12px;
    color: #D4D1D1;
}

/*なうぷれ*/

.music {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

mw {
    font-family: 'ドット';
    font-size: 10px;
    color: #fff;
}

mb {
    font-family: 'ドット';
    font-size: 10px;
    color: #000;
}

/*フキダシ用のスクロールとフォント*/

.boxk {
    margin: 0 auto;
    padding: 25px; 
    width: 250px;
    color: #000;
    background-color:#ffffff; 
    position: relative;
    text-align: left; 
}

.kaiwa.imessage {
    width: 250px;
    height: 100px;
    margin: 0 auto;
    padding: 10px 0;
    font-family: '全体フォント';
    font-size: 10px;
    color: #fff;
    overflow: scroll;
}

/*フキダシ共通*/

.kaiwa.imessage .fukidasi {
    position: relative;
    display: inline-block;
    max-width: 198px;
    margin: 1px 10px 6px;
    padding: 6px 11px;
    border-radius: 16px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;
}

/*しっぽなし*/

.kaiwa.imessage .fukidasi.notail {
    margin-bottom: 0;
}

/*フキダシ左*/

.kaiwa.imessage .fukidasi.left {
    float: left;
    background: #aca7bb;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left2 {
    float: left;
    background: #192f60;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left3 {
    float: left;
    background: #CC3333;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left4 {
    float: left;
    background: #EF9A0D;
  color: #fff;
}

.kaiwa.imessage .fukidasi.left5 {
    float: left;
    background: #b22222;
     color: #fff;
}

.kaiwa.imessage .fukidasi.left6 {
    float: left;
    background: #ec6800;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left7 {
    float: left;
    background: #ABD3D8;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left8 {
    float: left;
    background: #C10E49;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left9 {
    float: left;
    background: #EC9FE1;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left10 {
    float: left;
    background: #F8B759;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left11 {
    float: left;
    background: #6a5acd;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left12 {
    float: left;
    background: #EF6F94;
    color: #fff;
}

.kaiwa.imessage .fukidasi.left13 {
    float: left;
    background: #FFCC33;
    color: #fff;
}

/*しっぽ共通*/
.kaiwa.imessage .fukidasi::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    bottom: 0;
}

/*しっぽ左*/
.kaiwa.imessage .fukidasi.left::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #aca7bb inset; 
}

.kaiwa.imessage .fukidasi.left2::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #192f60 inset; 
}

.kaiwa.imessage .fukidasi.left3::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #CC3333 inset; 
}

.kaiwa.imessage .fukidasi.left4::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #EF9A0D inset; 
}

.kaiwa.imessage .fukidasi.left5::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #b22222 inset; 
}

.kaiwa.imessage .fukidasi.left6::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #ec6800 inset; 
}

.kaiwa.imessage .fukidasi.left7::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #ABD3D8 inset; 
}

.kaiwa.imessage .fukidasi.left8::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #C10E49 inset; 
}

.kaiwa.imessage .fukidasi.left9::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #EC9FE1 inset; 
}

.kaiwa.imessage .fukidasi.left10::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #F8B759 inset; 
}

.kaiwa.imessage .fukidasi.left11::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #6a5acd inset; 
}

.kaiwa.imessage .fukidasi.left12::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #EF6F94 inset; 
}

.kaiwa.imessage .fukidasi.left13::after {
    left: -5px;
    border-radius: 0px 0  14px 0px/ 0px 0 13px 0; 
    box-shadow: -9px 2px 0 -3px #FFCC33 inset; 
}


/*フキダシ右*/

.kaiwa.imessage .fukidasi.right {
    float: right;
    background: #aca7bb;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right2 {
    float: right;
    background: #192f60;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right3 {
    float: right;
    background: #CC3333;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right4 {
    float: right;
    background: #EF9A0D;
  color: #fff;
}

.kaiwa.imessage .fukidasi.right5 {
    float: right;
    background: #b22222;
     color: #fff;
}

.kaiwa.imessage .fukidasi.right6 {
    float: right;
    background: #ec6800;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right7 {
    float: right;
    background: #ABD3D8;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right8 {
    float: right;
    background: #C10E49;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right9 {
    float: right;
    background: #EC9FE1;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right10 {
    float: right;
    background: #F8B759;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right11 {
    float: right;
    background: #6a5acd;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right12 {
    float: right;
    background: #EF6F94;
    color: #fff;
}

.kaiwa.imessage .fukidasi.right13 {
    float: right;
    background: #FFCC33;
    color: #fff;
}

/*しっぽ右*/
.kaiwa.imessage .fukidasi.right::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #aca7bb inset; 
}

.kaiwa.imessage .fukidasi.right2::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #192f60 inset; 
}

.kaiwa.imessage .fukidasi.right3::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #CC3333 inset; 
}

.kaiwa.imessage .fukidasi.right4::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #EF9A0D inset; 
}

.kaiwa.imessage .fukidasi.right5::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #b22222 inset; 
} 

.kaiwa.imessage .fukidasi.right6::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #ec6800 inset; 
} 

.kaiwa.imessage .fukidasi.right7::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #ABD3D8 inset; 
} 

.kaiwa.imessage .fukidasi.right8::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #C10E49 inset; 
} 

.kaiwa.imessage .fukidasi.right9::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #EC9FE1 inset; 
} 

.kaiwa.imessage .fukidasi.right10::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #F8B759 inset; 
} 

.kaiwa.imessage .fukidasi.right11::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #6a5acd inset; 
} 

.kaiwa.imessage .fukidasi.right12::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #EF6F94 inset; 
} 

.kaiwa.imessage .fukidasi.right13::after {
    right: -5px;
    border-radius: 0px 0  0 14px/ 0px 0 0 13px; 
    box-shadow: 9px 2px 0 -3px #FFCC33 inset; 
} 

/*しっぽなし右*/

.kaiwa.imessage .fukidasi.notail::after {
    content: none;
}