kp {
  position: relative;
  display: block;
  width: 75%;
  margin: 0 auto;
  padding: 5px 20px 16px 20px;  /* 上 右 下 左 */
  color: #474a4d;
  background: #ffffff;
  border: 1px solid #FF8C9B;
}

kp .content {
  display: none;
}
kp input:checked + label + .content {
  display: block;
}

sik {
  position: relative;
  display: block;
  width: 75%;
  margin: 0 auto;
  padding: 5px 20px 16px 20px;  /* 上 右 下 左 */
  color: #474a4d;
  background: #ffffff;
  border: 1px solid #8C4664;
}



* {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

ma {
  display: block;
  width: 50%;
  margin: 20px auto 9px auto;  /* 上 右 下 左 */
  border-bottom: 1px dashed #ccc;
}

luv {
  position: absolute;
  right: -7px;
  bottom: -5px;
  font-size: 30px;
  color: #8C4664;
}


luv2 {
  position: absolute;
  right: -7px;
  bottom: -5px;
  font-size: 30px;
  color: #FF8C9B;
}



sr {
  background-image: linear-gradient(transparent 80%, #8C4664 80%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

ar {
  background-image: linear-gradient(transparent 80%, #FF8C9B 80%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


sl {
  color: #8C4664;
}

al {
  color: #FF8C9B;
}




index {
  display: block;
  margin: 0 auto;
  width: 75%;
  padding: 10px;
  border: 0px #808080 solid;
  background-color: #ffffff;
  padding: 5px 20px 16px 20px;
}


body {
  position: relative;
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #ffffff, #eaf4fc, #ffe6e6);
  z-index: -1;
}


/* 親（カスタムタグ）設定 */
playlist {
  display: flex;             /* 横並び＋上下中央にする */
  align-items: center;       /* ← 縦方向の中央揃え */
  height: 25px;              /* 高さを固定（お好みで調整） */
  width: 80%;                 /* 指定通り80% */
  margin: 20px auto;          /* 中央寄せ + 上下マージン */
  overflow: hidden;           /* はみ出し部分を隠す */
  white-space: nowrap;        /* 改行を防ぐ（1行表示） */
  box-sizing: border-box;
  background: black;       /* ← 背景を黒に変更 */
  color: #00ffff;          /* ← 文字色 */
  position: relative;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  font-weight: bold;         /* 太字 */
  border: 2px solid #FF8C9B; /* 必要なら枠線も残す */
}

/* 流す中身（1つのトラック） */
playlist .track {
  display: inline-block;
  padding-left: 100%;         /* 初期位置を右端の外側にするための余白 */
  /* アニメーションは transform を使う（滑らか） */
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 12s;    /* ← 速度の調整（秒）。短いほど速い */
  animation-play-state: running;
  will-change: transform;
  font-size: 1rem;           /* 必要に応じて調整 */
  line-height: 1;            /* 高さ調整 */
}


/* アニメーション定義：右（padding領域）から左へ移動 */
@keyframes marquee {
  0% {
    transform: translateX(0);       /* 初期（画面右端の外） */
  }
  100% {
    transform: translateX(-100%);   /* 自分の幅分左へ移動し終える */
  }
}