/* 基本スタイル */
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  background-color: #f8fafc;
}

.content-wrapper {
  width: 570px;
  max-width: 100%;
  background-color: #ffffff;
}

.content-wrapper img,
.content-wrapper video {
  max-width: 100%;
  height: auto;
}

/* ユーティリティクラス */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.br {
  display: block;
  margin-bottom: 1em;
}

/* 文字スタイル */
.text-small {
  font-size: 9px;
  color: #888888;
}

.text-normal {
  font-size: 13px;
}

.text-medium {
  font-size: 17px;
}

.text-large {
  font-size: 19px;
}

.text-xlarge {
  font-size: 21px;
}

.text-xxlarge {
  font-size: 23px;
}

.text-huge {
  font-size: 25px;
}

.text-giant {
  font-size: 29px;
}

.text-pink {
  color: #fa57cc;
}

.text-red {
  color: #ff0000;
}

.text-white {
  color: #ffffff;
}

.text-gray {
  color: #888888;
}

/* 背景色 */
.bg-transparent {
  background-color: rgba(0, 0, 0, 0);
}

.bg-cyan {
  background-color: #cef6ff;
}

.bg-yellow {
  background-color: #ffff00;
}

/* フッター */
footer {
  background-color: #5bc0de;
  padding: 20px 0;
  width: 100%;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.footer-links a {
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
}

/* マーカー */
.sb-bg-under-marker {
  background: linear-gradient(transparent 60%, #ffff00 0%) repeat scroll 0 0;
}

.sb-bg-under-marker-pink {
  background: linear-gradient(transparent 60%, #facccc 0%) repeat scroll 0 0;
}

/* ビデオ */
.ql-video {
  display: block;
  margin: 0 auto;
}

/* カスタムパーツ用の既存のスタイル */
.sb-custom {
  display: block;
}

/* レスポンシブ対応 */
@media screen and (max-width: 700px) {
  .content-wrapper {
    width: 100%;
  }
}