@charset "utf-8";

@import url('https://dl.dropboxusercontent.com/scl/fi/ya6jqyeqkwcu8g3a7ehu1/kissfont.css?rlkey=pkobdmkhwh8hmypr520krr3q3&st=shyc2pqo');

*{
  font-family: 'bunsyo3', sans-serif;
}

body{
  color: 
  margin: auto;
  background-image:
  background-color: 
  line-height: 1.4;
  font-size:10;
}

/*リンク*/
a {
  color: 
  border-bottom: 
}

/*ボックス*/
.text {
  padding:3em;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width:320px;
  color: #778899;
}
.text p {
    margin: 0; 
    padding: 0;
}

/*ボックス 方眼紙*/
.memo{
 padding: 2em;/*内側余白*/
  margin: 2em 0;
  color: #2f4f4f;
  background: #ffffff;/*背景色*/
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  max-width:300px;
  border: 1px solid #E6E8F1;
  background-image: linear-gradient(0deg, transparent 19px, #b4aeb1 20px),linear-gradient(90deg,  transparent 19px, #b4aeb1 20px);
  background-size: 20px 20px;
  -webkit-text-stroke: 2px #fff5ee;
  text-stroke: 2px #fff5ee;
  paint-order: stroke;
}

.memo p {
    margin: 0; 
    padding: 0;
}

/*リアルタイム*/
.tl {
    position: relative;
    align-items: center;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    padding:2em;/*内側余白*/
    border-radius: 5px;
    background-color: #ffffff;
    color: #b0e0e6;
}

.tl::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #ffffff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

.tl p {
    margin: 0; 
    padding: 0;
}

/* 角括弧風ボックス */
.csbox {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  position: relative; /* 配置基準 */
  max-width: 800px; /* 最大幅 */
  color: #111; /* 文字色（＝装飾色の基準） */
}

.csbox::before,
.csbox::after {
  content: ""; /* 擬似要素 */
  height: 100%; /* ボックス高 */
  width: 0.75em; /* カッコ幅 */
  position: absolute; /* 位置指定 */
  top: 0;
  bottom: 0; /* 下端揃え */
  border-top: 2px solid currentColor; /* 上線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

.csbox::before {
  left: 0; /* 左配置 */
  border-left: 2px solid currentColor; /* 左カッコ */
}

.csbox::after {
  right: 0; /* 右配置 */
  border-right: 2px solid currentColor; /* 右カッコ */
}

/* ボックス内の段落 */
.csbox p {
  margin: 0;
}

/*みだし2　世界はこれを引用とも呼ぶ*/
.inyo {
    padding: 0.5em 1.0em;
    border-left: 2px solid #fffafa;
    color: #fffafa;
}

.inyo:has(cite) {
    padding-bottom: .5em;
}

.inyo p {
    margin-top: 0;
}

.inyo cite {
    display: block;
    color: #fffafa;
    font-size: .8em;
    text-align: right;
}

/*枠線*/
hr{
}

/*文字ぼかし*/
.bks {
  color: transparent;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/*テキストエリア*/
textarea {
  color: #fffafa;
  background: #2f4f4f;/*背景色*/
}

/* ナウプレ*/
.nowp {
  display: block;
  height: 25px; /* バナーの高さ */
  width: 60%; /* バナーの横幅 */
  margin-left: auto;
  margin-right: auto;
  background-color: #b0e0e6; /* バナー背景色 */
  overflow: hidden; /* はみ出した要素を非表示 */
  border-radius: 10px; /* まるみ */
  border: 1px solid #E6E8F1;
}

/* ナウプレバナー内コンテンツ */
.nowp__content {
  display: inline-block;
  color: #fffafa; /* 文字色 */
  line-height: 25px; /* 行の高さ */
  padding-left: 100%; /* テキスト左側の余白 */
  white-space: nowrap; /* 文字を改行させない */
  animation: animate-banner 15s linear infinite; /* アニメーションを設定 */
}

/* ナウプレバナー内の要素をすべて選択 */
.nowp__content > * {
  display: inline-block;
}

/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 折り畳み(相棒からのいただきもの) */
summary {
 color: #fffafa; /* 折りたたみ自体の文字色をここに指定 */
 margin: 0 0 9px 0;
 cursor: pointer;
 text-align: center; /* 折りたたみ自体を中央にするコードなので必要なければ消してOK */
 display: block;
 outline: none;
}

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

details {
 display: block;
 margin: 0 0 12px 0 auto;
 transition: 1s;
}

details[open] {
 color: #fffafa;
 background: #2f4f4f; /* 開けたときの背景に使いたい色をここに指定 */
 padding: 10px 14px 15px 14px;　/* 開けたときの枠の余白をここに指定、左から上、右、下、左 */
 border-radius: 8px; /* 開けたときの背景の角の丸さをここに指定、数字が大きいほど丸く、小さいほどカクカクになる */
}

details summary::before {
 font-family: 'byom'; /* 閉じてるときに使いたい絵文字フォントをここに入れる */
 margin: 15px .2em 0 0;
 content: 'H'; /* 閉じてるときに使いたい絵文字フォントのコード */
 font-size:15px; /* ヘッダーメニュー */
}

details[open] summary::before {
 content: 'A'; /* 開けたときに使いたい絵文字フォントのコード */
 margin: 15px .2em 0 0; 
 font-size:15px; /* 開けたときのフォントの大きさ */
}


/*飾り用の文字フォント*/