@charset "utf-8"; 

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
@import url('https://use.fontawesome.com/releases/v6.4.2/css/all.css');

*{
font-family: 'Hina Mincho', 'Caveat', serif;
} 


/* 背景 */ 
body {
  background-color: #ffffff;
  color:#000000;
}

.name {
  color: #000000 !important; 
}

/*下線消し*/
a {
text-decoration: none;
color: #577260;
}

a:visited {
  color: #577260; /* 訪問済み*/
}


/* タイトル用*/
.title{
  font-family: 'Caveat', cursive;
  font-size: 3em;
}


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

.nowplaying {
  background-color: #fff;
  color: #666;
  border-radius: 12px;
  border: 1px solid #666; 
  width: 300px;
  margin: 0.5rem auto;
  font-size:11.5px;
  
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.slide {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/***** 四角テーブル *****/


/* 本文テーブル(黄) */
.frame_yellow {
  color: #696969;
  padding: 15px;
  margin: 0 auto;
  background-color: #f0e68c;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
}

/* 本文テーブル(水) */
.frame_sky {
  color: #ffffff;
  padding: 15px;
  margin: 0 auto;
  background-color: #b0c4de;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
}

/* 本文テーブル(灰) */
.frame_gray {
  color: #dcdcdc;
  padding: 15px;
  margin: 0 auto;
  background-color: #778899;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
}

/* 本文テーブル(紫) */
.frame_purple {
  color: #ffffff;
  padding: 15px;
  margin: 0 auto;
  background-color: #d8bfd8;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
}

/* 本文テーブル(白) */
.frame_white {
  color: #696969;
  padding: 15px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
  border: 1px solid #407297;
}

/* 本文テーブル(緑) */
.frame_green {
  color: #4b612e;
  padding: 15px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
  border: 1px solid #91ba58;
}

/* 本文テーブル(黄&緑) */
.frame_yg {
  color: #769948;
  padding: 15px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
  border: 1px solid #cccc60;
}

/* 本文テーブル(赤&黒) */
.frame_rb {
  color: #662929;
  padding: 15px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
  border: 1px solid #666666;
}


/* 本文テーブル(青&赤) */
.frame_bluered {
  color: #0067C0;
  padding: 15px;
  margin: 0 auto;
  background-color: #fff;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
  border: 1px solid #B22D35;
}

/* 本文テーブル(金) */
.frame_gold {
  color: #ffffff;
  padding: 15px;
  margin: 0 auto;
  background-color: #726837;
  text-align: left;
  width: 300px;
  font-size: 10.5px;
}


/***** メモ型テーブル *****/


/* テープ部分 */
.tape {
  width: 50%;
  height: 35px;
  background: #989898;
  opacity: 0.1;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 0;
}

/* サブタイ部分 */
.subtitle {
  text-align: center;
  font-size: 1.5em;
  color: #696969;
  margin-top: 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* メモ(黄) */
.memo_yellow {
  width: 260px;
  padding: 15px;
  margin: 2em auto;
  background: #f5f5dc;
  color: #696969;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.03);
  transform: rotate(3deg);
  word-break: break-word;
  position: relative;
  font-size: 10px;
}

/* メモ(赤) */
.memo_red {
  width: 260px;
  padding: 15px;
  margin: 2em auto;
  background: #ffe4e1;
  color: #696969;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.03);
  transform: rotate(-3deg);
  word-break: break-word;
  position: relative;
  font-size: 10px;
}



/***** つぶやき枠 *****/

.tweet-container {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  width: 300px;
  margin: auto;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  font-size:12px;
}

.tweet {
  padding: 0 0 10px 0;
  border-bottom: 1px dashed #ccc;
  margin: 0;
}

.tweet:last-child {
  border-bottom: none;
}

.tweet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 3px 0;
}

/* アイコンカラーのバリエーション */
.icon-strkou { color: #87cefa; }
.icon-strkyou { color: #6495ed; }
.icon-sgrkou { color: #ffd700; }
.icon-sgrkyou { color: #daa520; }

.tweet-header i {
  font-size: 1.2em;
}

.time {
  font-size: 0.85em;
  color: #555;
}

.tweet-content {
  font-size: 0.9em;
  line-height: 1.5;
  color: #696969;
  padding-left: 1.6em;
  text-align: left;
}



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


/*高専悟(左)*/ 
.str_koul { 
position: relative; 
background: #87cefa; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-right: 20%; 
clear: both; 
max-width: 400px; 
float: left; 
color: #000;
margin-left: 40px;
font-size: 0.8em;
} 
.str_koul:after, 
.str_koul:before { 
right: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.str_koul:after { 
border-right-color: #87cefa; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.str_koul:before { 
border-right-color: #87cefa; 
border-width: 5px 14px; 
margin-top: -5px; 
} 

/*教師悟(左)*/ 
.str_kyol { 
position: relative; 
background: #6495ed; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-right: 20%; 
clear: both; 
max-width: 400px; 
float: left; 
color: #000;
margin-left: 40px;
font-size: 0.8em;
} 
.str_kyol:after, 
.str_kyol:before { 
right: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.str_kyol:after { 
border-right-color: #6495ed; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.str_kyol:before { 
border-right-color: #6495ed; 
border-width: 5px 14px; 
margin-top: -5px; 
}

/*教師傑(左)*/ 
.sgr_kyol { 
position: relative; 
background: #daa520; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-right: 20%; 
clear: both; 
max-width: 400px; 
float: left; 
color: #000;
margin-left: 40px;
font-size: 0.8em;
} 
.sgr_kyol:after, 
.sgr_kyol:before { 
right: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.sgr_kyol:after { 
border-right-color: #daa520; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.sgr_kyol:before { 
border-right-color: #daa520; 
border-width: 5px 14px; 
margin-top: -5px; 
}

/*高専傑(右)*/ 
.sgr_kour { 
position: relative; 
background: #ffd700; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-left: 20%; 
clear: both; 
max-width: 400px; 
float: right; 
color: #000;
margin-right: 40px;
font-size: 0.8em;
}
.sgr_kour:after, 
.sgr_kour:before { 
left: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.sgr_kour:after { 
border-left-color: #ffd700; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.sgr_kour:before { 
border-left-color: #ffd700;
border-width: 5px 14px; 
margin-top: -5px; 
}

/*教祖傑(右)*/ 
.sgr_kyor { 
position: relative; 
background: #daa520; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-left: 20%; 
clear: both; 
max-width: 400px; 
float: right; 
color: #000;
margin-right: 40px;
font-size: 0.8em;
}
.sgr_kyor:after, 
.sgr_kyor:before { 
left: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.sgr_kyor:after { 
border-left-color: #daa520; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.sgr_kyor:before { 
border-left-color: #daa520; 
border-width: 5px 14px; 
margin-top: -5px; 
}

/*教師悟(右)*/ 
.str_kyor { 
position: relative; 
background: #6495ed; 
margin: 3px; 
padding: 10px; 
border-radius: 15px; 
margin-left: 20%; 
clear: both; 
max-width: 400px; 
float: right; 
color: #000;
margin-right: 40px;
font-size: 0.8em;
}
.str_kyor:after, 
.str_kyor:before { 
left: 99%; 
top: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
} 
.str_kyor:after { 
border-left-color: #6495ed; 
border-width: 5px 14px; 
margin-top: -5px; 
} 
.str_kyor:before { 
border-left-color: #6495ed; 
border-width: 5px 14px; 
margin-top: -5px; 
}


 /* 割り込みを解除 */ 
.clear { 
clear: both; 
}

/* ぼかし */
bksb { 
color: transparent; 
text-shadow: 0px 0px 5px #000000;
}

bksw { 
color: transparent; 
text-shadow: 0px 0px 5px #FFFFFF;
}