@charset "UTF-8";

/* 頑張って作ったから持ち出し禁止！ */



/* 読み込み */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap'); /* タイトル用 */

@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap'); /* 見出し用 */

@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap'); /* 割り込みとか */

/* タイトル */

.ttl{
width: 100%;
height: 75px;
margin-bottom: 10px;
}


h1 {
  font-family: "Dela Gothic One", sans-serif;
  white-space: nowrap;
  font-size: 30px;
  color: #fdb418;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.square{
width: 300px;
height: 150px;
border: 1px solid #FFF;/* ★TOPページタイトルの四角い枠線の色 */
background-color: #f36f10;
color:#000;
margin: 0 auto;
position: relative
}


/* リンク基本設定 */
a {
    text-decoration: none;
    color: #000;
} 


/* テンプレ用幅指定 */

#message {
  width: 80%;
}

/* 基本設定 */

body{
 background-color: #2b3443;
 font-size: 10px;
 background-size: 30px 30px;
 max-width: 100%;
 letter-spacing: 0.05em;
 line-height: 1.5;
 padding: 18px;
}

html:before,
html:after,
body:before,
body:after {
  content: "";
  background: #f46c0e;
  position: fixed;
  display: block;
  z-index: 1;
}

/* 上 */
html:before {
  height: 10px; 
  width: 100vw;
  left: 0;
  top: 0;
}

/* 右 */
html:after {
  width: 10px;
  height: 100vh;
  right: 0;
  top: 0;
}

/* 下 */
body:before {
  height: 10px;
  width: 100vw;
  bottom: 0;
  left: 0;
}

/* 左 */
body:after {
  width: 10px;
  height: 100vh;
  top: 0;
  left: 0;
}

html:before,
html:after,
body:before,
body:after {
  pointer-events: none;
}



/* お星様 */

.stars {
  position: fixed;
  width: 100%;
  height: 100%;
}

.stars {
  pointer-events: none;
}

/* 共通の星ベース（小さめ） */
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
}

/* 星グループ①（多め） */
.stars::before {
  box-shadow:
    5vw 10vh white,
    15vw 30vh white,
    25vw 50vh white,
    35vw 20vh white,
    45vw 70vh white,
    55vw 40vh white,
    65vw 80vh white,
    75vw 15vh white,
    85vw 60vh white,
    95vw 35vh white,
    20vw 85vh white,
    60vw 25vh white,
    40vw 55vh white,
    70vw 75vh white;
  animation: twinkle1 3s infinite ease-in-out;
}

/* 星グループ② */
.stars::after {
  box-shadow:
    10vw 40vh white,
    30vw 15vh white,
    50vw 85vh white,
    70vw 45vh white,
    90vw 20vh white,
    25vw 65vh white,
    45vw 10vh white,
    65vw 55vh white,
    85vw 75vh white,
    15vw 90vh white;
  animation: twinkle2 4s infinite ease-in-out;
}

/* 点滅 */
@keyframes twinkle1 {
  0%,100% { opacity: 0.3; }
  50%     { opacity: 1; }
}

@keyframes twinkle2 {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.2; }
}

/* テキストボックス */

/* 汎用ボックス */
.box{
  margin: 0 auto;
  padding: 2em;
  box-shadow: 0 0 3px 3px #fff, 0 0 3px 2px #fff inset;
  border-radius: 10px;
 background: rgba(245, 245, 245, 0.7);
 margin: 1em auto;
 position: relative;
 width: 80%;
}

.box{
 padding-top: 50px;
padding-bottom: 20px;
}

.title{
  position: absolute;
  font-family: 'Bungee';
  font-size: 30px;
  color: #545454;
  font-weight: 400;
  letter-spacing: 0;
  top: 8px;
  left: 10px;
}

.wen{
  margin: 0 auto;
  padding: 2em;
  box-shadow: 0 0 3px 3px #FF8C9B, 0 0 3px 2px #FF8C9B inset;
  background: rgba(245, 245, 245, 0.7);
 margin: 1em auto;
 position: relative;
 width: 80%;
padding-top: 60px;
padding-bottom: 20px;
}

.wen::before {
  position: absolute;
  font-family: 'Bungee';
  content: ' Wen ';
  font-size: 30px;
  color: #FF8C9B;
  font-weight: 400;
  letter-spacing: 0;
  top: 8px;
  left: 10px;
}

.rt{
  margin: 0 auto;
  padding: 2em;
  box-shadow: 0 0 3px 3px #FAC31E, 0 0 3px 2px #FAC31E inset;
  background: rgba(245, 245, 245, 0.7);
 margin: 1em auto;
 position: relative;
 width: 80%;
padding-top: 60px;
padding-bottom: 20px;
}

.rt::before {
  position: absolute;
  font-family: 'Bungee';
  content: ' rito ';
  font-size: 30px;
  color: #FAC31E;
  font-weight: 400;
  letter-spacing: 0;
  top: 8px;
  left: 10px;
}


.kgt{
  margin: 0 auto;
  padding: 2em;
  box-shadow: 0 0 3px 3px #6EB487, 0 0 3px 2px #6EB487 inset;
  background: rgba(245, 245, 245, 0.7);
 margin: 1em auto;
 position: relative;
 width: 80%;
padding-top: 60px;
padding-bottom: 20px;
}

.kgt::before {
  position: absolute;
  font-family: 'Bungee';
  content: ' kagetsu ';
  font-size: 30px;
  color: #6EB487;
  font-weight: 400;
  letter-spacing: 0;
  top: 8px;
  left: 10px;
}


.rb{
  margin: 0 auto;
  padding: 2em;
  box-shadow: 0 0 3px 3px #A58CDC, 0 0 3px 2px #A58CDC inset;
  background: rgba(245, 245, 245, 0.7);
 margin: 1em auto;
 position: relative;
 width: 80%;
padding-top: 60px;
padding-bottom: 20px;
}

.rb::before {
  position: absolute;
  font-family: 'Bungee';
  content: ' sho ';
  font-size: 30px;
  color: #A58CDC;
  font-weight: 400;
  letter-spacing: 0;
  top: 8px;
  left: 10px;
}

/*マーカー*/

rt {
  padding: 0.05em;
    color: #fff;
    background:#FAC31E
}

wen{
    padding: 0.05em;
    color: #fff;
    background: #FF8C9B;
}


rb {
  padding: 0.05em;
    color: #fff;
    background: #A58CDC
}

kgt{
    padding: 0.05em;
    color: #fff;
    background: #6EB487;
}

/* 強調文 */

kgtst{
font-weight: 500;
color: #6EB487;
font-size: 13px;
font-family: "Dela Gothic One", sans-serif;
}

rbst{
font-weight: 500;
color: #A58CDC;
font-size: 13px;
font-family: "Dela Gothic One", sans-serif;
}

rtst{
font-weight: 500;
color: #FAC31E;
font-size: 13px;
font-family: "Dela Gothic One", sans-serif;
}

wenst{
font-weight: 500;
color: #FF8C9B;
font-size: 13px;
font-family: "Dela Gothic One", sans-serif;
}

/* コメント */

wencm{
font-weight: 400;
color: #FF8C9B;
font-size: 12px;
font-family: "Yusei Magic", sans-serif;
}

rtcm{
font-weight: 400;
color: #FAC31E;
font-size: 12px;
font-family: "Yusei Magic", sans-serif;
}

kgtcm{
font-weight: 400;
color: #6EB487;
font-size: 12px;
font-family: "Yusei Magic", sans-serif;
}

rbcm{
font-weight: 400;
color: #A58CDC;
font-size: 12px;
font-family: "Yusei Magic", sans-serif;
}

/* ぼかし */

bks {
  color: transparent;
  text-shadow: 0 0 5px rgba(140,140,140,0.8);
}



/* トーク画面 */

.talk {
 width: 90%;
 margin: 0em auto;
 background-color:#fff;
border: 1px solid #000000;
 height: 180px;
 overflow-y: scroll;
  scrollbar-width: thin;
border-radius: 5px;
}

 

/* ふきだし共通 */

.talk .fkds {
 position: relative;
 display: inline-block;
 max-width: 192px;
 margin: 1px 10px 6px;
 padding: 9px 14px;
 border-radius: 10px;
 overflow-wrap: break-word;
 clear: both;
 box-sizing: content-box;/*はてな用*/}


/* しっぽなし */

.talk .fkds.notail {
 margin-bottom: 0;}


/* ふきだし左 */


/* ふきだし左ウェン */

.talk .fkds.w {
 float: left;
 background: #FF8C9B;
 color: #404040;}

/* ふきだし左リト */

.talk .fkds.r {
 float: left;
 background: #FAC31E;
 color: #404040;}

/* ふきだしカゲツ */

.talk .fkds.k {
 float: left;
 background: #6EB487;
 color: #404040;}

/* ふきだし左るべ */

.talk .fkds.s {
 float: left;
 background: #A58CDC;
 color: #404040;}


/* ふきだし右 */

/* ふきだし右ウェン */

.talk .fkds.Rw {
 float: right;
 background: #FF8C9B;
 color: #404040;}

/* ふきだし右リト */

.talk .fkds.Rr {
 float: right;
 background: #FAC31E;
 color: #404040;}

/* ふきだし右カゲツ */

.talk .fkds.Rk {
 float: right;
 background: #6EB487;
 color: #404040;}

/* ふきだし右るべ */

.talk .fkds.Rs {
 float: right;
 background: #A58CDC;
 color: #404040;}


/* しっぽ共通 */

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


/* しっぽ左 */

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


/* しっぽ左ウェン */

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

/* しっぽ左リト */

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


/* しっぽ左カゲツ*/

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


/* しっぽ左星導*/

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

/* しっぽ右 */

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

/* しっぽ右ウェン */

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

/* しっぽ右リト */

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

/* しっぽ右カゲツ */

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

/* しっぽ右るべ */

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


/* しっぽをつけないとき */

.talk .fkds.notail::after {
 content: none;}