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

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Klee+One&family=WDXL+Lubrifont+JP+N&display=swap');

@font-face {
  font-family: "LeagueScript";
  src: url("LeagueScriptNumberOne-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

*{font-family: 'Klee One' ;}

a { text-decoration: none; }

 hr { border:0; }

body {
  background: linear-gradient(#88C1BB, #BEE0DB);
}

body {
 font-size: 13px;
 padding: 10px;
 margin: 0;
 line-height: 180%;
}

.title {
  position: relative;
  display: block;           /* ← ここを変更 */
  width: fit-content;       /* ← 文字幅にする */
  margin: 0 auto 25px;      /* ← これで中央 */
  font-family: 'Caveat';
  font-size: 40px;
  color: #276559;
  line-height: 1.2;
}

.title a {
  color: #276559;
  text-decoration: none;
}

.title a:visited,
.title a:hover {
  color: #276559;
}

.title::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 0.2em;
  width: 110%;
  height: 0.5em;
  background: rgba(200, 238, 65, 0.5);
  z-index: -1;
  border-radius: 999px;
  transform-origin: left;
}

/* 折りたたみ全体 */
.fold {
  font-size: 0.9em; /* 本文の90% */
}

/* 折りたたみ全体 */
.fold summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64AE96;
  font-size: 14px;
}

/* デフォルト三角を消す */
.fold summary::-webkit-details-marker {
  display: none;
}

/* アイコン */
.fold .icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f256"; /* fa-egg */
}

/* 「続きを読む…」をCSSで表示 */
.fold summary::after {
  content: "以降はサブスク限定です。";
}

/* 開いたとき */
.fold[open] .icon::before {
  content: "\f25b"; /* 別アイコン */
}

.fold[open] summary::after {
  content: "入会ありがとうございます。";
}

/* 中身 */
.fold-content {
  margin-top: 0.5em;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* アニメーション定義 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 開いたときにアニメーション */
.fold[open] .fold-content {
  animation: fadeUp 0.4s ease;
}

.textbox {
  max-width:440px;              /* 小さめの枠 */
  margin: 60px auto;             /* 左右に余白 */
  padding: 1.4em 1.6em;          /* 中の余白 */

 /* これを追加 */
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 520px;

  background: rgba(255, 255, 255, 0.65); /* うっすら白 */
  
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-left: none;
  border-right: none;

  color: #333;
  font-size: 14px;
  line-height: 1.5;              /* 行間 */
  letter-spacing: 0.04em;        /* 文字間 */

  text-align: left;
}

.textbox {
  position: relative;
}

.textbox::after {
  content: "A";              /* ← 絵になる文字 */
  font-family: "LeagueScript";
  position: absolute;
  right: 0.8em;
  bottom: 0.6em;
  font-size: 26px;
  color: rgba(0,0,0,0.35);
  pointer-events: none;
}

/* 日付 */
.textbox .date {
  position: absolute;
  top: 0.6em;
  right: 0.8em;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.05em;
}

.bubble-area {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリック邪魔しない */
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -50px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: bubbleUp 10s linear infinite;
}

.bubble:nth-child(1) {
  left: 10%;
  width: 12px;
  height: 12px;
  animation-duration: 8s;
}

.bubble:nth-child(2) {
  left: 30%;
  width: 20px;
  height: 20px;
  animation-duration: 12s;
}

.bubble:nth-child(3) {
  left: 50%;
  width: 15px;
  height: 15px;
  animation-duration: 10s;
}

.bubble:nth-child(4) {
  left: 70%;
  width: 25px;
  height: 25px;
  animation-duration: 14s;
}

.bubble:nth-child(5) {
  left: 85%;
  width: 10px;
  height: 10px;
  animation-duration: 9s;
}

@keyframes bubbleUp {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  to {
    transform: translateY(-110vh);
    opacity: 0;
  }
}

.diary {
  position: relative;
  z-index: 5; /* 泡より前 */
  padding: 20px;
}

/* ===== mk マーカー共通設定 ===== */
gnmk, yumk, jsmk, drmk, rimk, nzmk {
  position: relative;
  display: inline-block;
  color: #000;
}

/* ===== ごん ===== */
gnmk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(213, 191, 70, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== よう ===== */
yumk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(70, 156, 75, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== じゃす ===== */
jsmk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(249, 255, 253, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== だるま ===== */
drmk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(227, 98, 102, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== りおん ===== */
rimk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(230, 76, 107, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== ？ ===== */
nzmk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(83, 120, 224, 0.5);
  z-index: -1;
  border-radius: 999px;
}

/* ===== タイムライン全体 ===== */
.timeline{max-width:360px;margin:0 auto;padding:8px}

/* ===== ポスト共通 ===== */
.post{display:flex;gap:10px;padding:12px;margin-bottom:10px;border-radius:14px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.18)}

/* ===== アイコン ===== */
.post .icon{width:40px;flex-shrink:0;text-align:center}
.post .icon i{font-size:28px;color:#ddd}

/* ===== 中身 ===== */
.post .content{flex:1}

/* ヘッダー（名前＋ID） */
.header{display:flex;gap:6px;align-items:baseline}
.name{font-weight:bold;font-size:13px;color:#fff}
.id{font-size:11px;color:rgba(255,255,255,0.6)}

/* 本文 */
.text{margin-top:4px;font-size:13px;line-height:1.6;color:#fff}

/* 時刻 */
.meta{margin-top:6px;font-size:10px;color:rgba(255,255,255,0.6)}

/* アクション */
.actions{display:flex;justify-content:space-between;margin-top:8px;max-width:220px;color:rgba(255,255,255,0.7);font-size:14px}

/* ===== リプライ ===== */
.post.reply{margin-left:36px;position:relative}
.post.reply::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;background:rgba(255,255,255,0.25)}

/* ===== プレイリスト全体 ===== */
.playlist {
  width: 80%;
  max-width: 360px;
  margin: 2em auto;
  padding: 14px 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  text-align: center;
  color: #000;
}

/* タイトル */
.playlist .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

/* ===== 横スクロール情報（参考CSS流用） ===== */
.playlist .scroll {
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0.7;
  position: relative;
}

.playlist .scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-text 8s linear infinite;
}

/* 横スクロール */
@keyframes scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ===== 再生UI ===== */
.playlist .controls {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 10px;
  font-size: 16px;
  color: rgba(0,0,0,0.7);
}

/* 再生バー */
.playlist .bar {
  margin: 8px auto 0;
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}

/* プレイリスト内の title を無効化・上書き */
.playlist .title {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 14px;
  color: #000;
  line-height: 1.4;
}

/* マーカーを消す */
.playlist .title::after {
  display: none;
}