/* この箇所の解説：
 * CSSのコメントです。
 * 実行用の見た目ではなく、説明・ライセンス等を記録しています。
 */
/* ホーム専用配置。共通の作品額縁・広告意匠はbase.cssをそのまま利用します。 */
/* この箇所の解説：
 * セレクター「.home-page」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-page {
  /* この箇所の解説：
   * 外側の余白を「0」に指定します。
   */
  margin: 0;
  /* この箇所の解説：
   * 指定方向の内余白を「128px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-bottom: 128px;
  /* この箇所の解説：
   * 文字の色を「#183c48」に指定します。
   */
  color: #183c48;
  /* この箇所の解説：
   * 背景全体を「#f8faf9」に指定します。
   */
  background: #f8faf9;
}
/* この箇所の解説：
 * セレクター「.home-page [hidden]」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-page [hidden] {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「none」に指定します。
   * !important付きです。
   */
  display: none !important;
}
/* この箇所の解説：
 * セレクター「.home-header」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-header {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 配置基準からの距離を「0 0 auto」に指定します。
   */
  inset: 0 0 auto;
  /* この箇所の解説：
   * 重なり順を「50」に指定します。
   */
  z-index: 50;
  /* この箇所の解説：
   * 高さを「74px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 74px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #dbe7e4」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 1px solid #dbe7e4;
  /* この箇所の解説：
   * 背景全体を「rgb(255 255 255 / 95%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  background: rgb(255 255 255 / 95%);
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(8px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(8px);
}
/* この箇所の解説：
 * セレクター「.home-header-inner」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-header-inner {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 20px;
  /* この箇所の解説：
   * 内側の余白を「0 28px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 0 28px;
}
/* この箇所の解説：
 * セレクター「.home-logo」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-logo {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 文字の大きさを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 24px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * 文字間隔を「-0.06em」に指定します。
   */
  letter-spacing: -0.06em;
}
/* この箇所の解説：
 * セレクター「.home-logo img」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-logo img {
  /* この箇所の解説：
   * 横幅を「44px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 44px;
  /* この箇所の解説：
   * 高さを「44px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 44px;
  /* この箇所の解説：
   * 画像を枠へ収める方式を「contain」に指定します。
   */
  object-fit: contain;
}
/* この箇所の解説：
 * セレクター「.desktop-search」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-search {
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 横幅の上限を「576px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  max-width: 576px;
  /* この箇所の解説：
   * 外側の余白を「0 auto」に指定します。
   */
  margin: 0 auto;
}
/* この箇所の解説：
 * セレクター「.desktop-search input」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-search input {
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「40px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 40px;
  /* この箇所の解説：
   * 内側の余白を「0 20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 0 20px;
  /* この箇所の解説：
   * 境界線を「1px solid #cbdad7」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #cbdad7;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 背景全体を「#f4f8f7」に指定します。
   */
  background: #f4f8f7;
}
/* この箇所の解説：
 * セレクター「.desktop-account」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-account {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 指定方向の外余白を「auto」に指定します。
   */
  margin-left: auto;
}
/* この箇所の解説：
 * セレクター「.desktop-account button, .mobile-account button」に一致する
 * 要素へ、内側の見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-account button,
.mobile-account button {
  /* この箇所の解説：
   * 内側の余白を「8px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 16px;
  /* この箇所の解説：
   * 境界線を「1px solid #b8cac6」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #b8cac6;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.desktop-account .login-link, .mobile-account .login-link」に
 * 一致する要素へ、内側の見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-account .login-link,
.mobile-account .login-link {
  /* この箇所の解説：
   * 指定箇所の境界線を「#ee6e62」に指定します。
   */
  border-color: #ee6e62;
  /* この箇所の解説：
   * 文字の色を「#d85148」に指定します。
   */
  color: #d85148;
}
/* この箇所の解説：
 * セレクター「.desktop-account .register-link, .mobile-account
 * .register-link」に一致する要素へ、内側の見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.desktop-account .register-link,
.mobile-account .register-link {
  /* この箇所の解説：
   * 指定箇所の境界線を「#15877d」に指定します。
   */
  border-color: #15877d;
  /* この箇所の解説：
   * 文字の色を「#0d756c」に指定します。
   */
  color: #0d756c;
}
/* この箇所の解説：
 * セレクター「[data-session-name]」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
[data-session-name] {
  /* この箇所の解説：
   * 内容がはみ出した場合の扱いを「hidden」に指定します。
   */
  overflow: hidden;
  /* この箇所の解説：
   * 横幅の上限を「220px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  max-width: 220px;
  /* この箇所の解説：
   * 内側の余白を「8px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 16px;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 背景全体を「#edf7f4」に指定します。
   */
  background: #edf7f4;
  /* この箇所の解説：
   * CSSのtext-overflow設定を「ellipsis」に指定します。
   */
  text-overflow: ellipsis;
  /* この箇所の解説：
   * 空白と改行の扱いを「nowrap」に指定します。
   */
  white-space: nowrap;
}
/* この箇所の解説：
 * セレクター「.menu-toggle」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.menu-toggle {
  /* この箇所の解説：
   * 指定方向の外余白を「auto」に指定します。
   */
  margin-left: auto;
  /* この箇所の解説：
   * 内側の余白を「7px 11px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 7px 11px;
  /* この箇所の解説：
   * 境界線を「1px solid #b8cac6」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #b8cac6;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 文字の大きさを「22px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 22px;
}
/* この箇所の解説：
 * セレクター「.mobile-menu」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.mobile-menu {
  /* この箇所の解説：
   * 内側の余白を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 16px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #dbe7e4」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 1px solid #dbe7e4;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
}
/* この箇所の解説：
 * セレクター「.mobile-menu input」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.mobile-menu input {
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 内側の余白を「8px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 12px;
  /* この箇所の解説：
   * 境界線を「1px solid #cbdad7」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #cbdad7;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
}
/* この箇所の解説：
 * セレクター「.mobile-account」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.mobile-account {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 12px;
}
/* この箇所の解説：
 * セレクター「.category-sidebar」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-sidebar {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 配置基準からの距離を「74px auto 0 0」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  inset: 74px auto 0 0;
  /* この箇所の解説：
   * 重なり順を「40」に指定します。
   */
  z-index: 40;
  /* この箇所の解説：
   * 指定方向のはみ出しを「auto」に指定します。
   */
  overflow-y: auto;
  /* この箇所の解説：
   * 横幅を「210px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 210px;
  /* この箇所の解説：
   * 内側の余白を「24px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 24px 16px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #cedcd9」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-right: 1px solid #cedcd9;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
}
/* この箇所の解説：
 * セレクター「.category-sidebar h2」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-sidebar h2 {
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 12px;
  /* この箇所の解説：
   * 内側の余白を「8px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 12px;
  /* この箇所の解説：
   * 角の丸みを「6px 6px 0 0」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px 6px 0 0;
  /* この箇所の解説：
   * 背景全体を「#176378」に指定します。
   */
  background: #176378;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.category-sidebar button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-sidebar button {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「space-between」に指定します。
   */
  justify-content: space-between;
  /* この箇所の解説：
   * 指定方向の外余白を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 4px;
  /* この箇所の解説：
   * 内側の余白を「10px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 10px 12px;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「left」に指定します。
   */
  text-align: left;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
  /* この箇所の解説：
   * 文字の色を「#526b72」に指定します。
   */
  color: #526b72;
}
/* この箇所の解説：
 * セレクター「.category-sidebar button::after」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-sidebar button::after {
  /* この箇所の解説：
   * 疑似要素の内容を「"›"」に指定します。
   */
  content: "›";
}
/* この箇所の解説：
 * セレクター「.category-sidebar button[aria-pressed="true"]」に一致する要素
 * へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-sidebar button[aria-pressed="true"] {
  /* この箇所の解説：
   * 文字の色を「#08756c」に指定します。
   */
  color: #08756c;
  /* この箇所の解説：
   * 背景全体を「#e9f6f3」に指定します。
   */
  background: #e9f6f3;
}
/* この箇所の解説：
 * セレクター「.home-main」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-main {
  /* この箇所の解説：
   * 指定方向の外余白を「210px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-left: 210px;
  /* この箇所の解説：
   * 指定方向の内余白を「74px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-top: 74px;
}
/* この箇所の解説：
 * セレクター「.home-content」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-content {
  /* この箇所の解説：
   * 横幅の上限を「1040px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  max-width: 1040px;
  /* この箇所の解説：
   * 外側の余白を「0 auto」に指定します。
   */
  margin: 0 auto;
  /* この箇所の解説：
   * 内側の余白を「28px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 28px;
}
/* この箇所の解説：
 * セレクター「.category-mobile」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-mobile {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「sticky」に指定します。
   */
  position: sticky;
  /* この箇所の解説：
   * 配置基準からの距離を「74px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  top: 74px;
  /* この箇所の解説：
   * 重なり順を「30」に指定します。
   */
  z-index: 30;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「none」に指定します。
   */
  display: none;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 指定方向のはみ出しを「auto」に指定します。
   */
  overflow-x: auto;
  /* この箇所の解説：
   * 内側の余白を「12px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 12px 16px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #dbe7e4」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 1px solid #dbe7e4;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
}
/* この箇所の解説：
 * セレクター「.category-mobile button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-mobile button {
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * 内側の余白を「8px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 16px;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 背景全体を「#edf3f1」に指定します。
   */
  background: #edf3f1;
  /* この箇所の解説：
   * 文字の色を「#526b72」に指定します。
   */
  color: #526b72;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.category-mobile button[aria-pressed="true"]」に一致する要素
 * へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.category-mobile button[aria-pressed="true"] {
  /* この箇所の解説：
   * 背景全体を「#176378」に指定します。
   */
  background: #176378;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
}
/* この箇所の解説：
 * セレクター「.live-section」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-section {
  /* この箇所の解説：
   * 指定方向の外余白を「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 32px;
  /* この箇所の解説：
   * 境界線を「1px solid #b9cfca」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #b9cfca;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
}
/* この箇所の解説：
 * セレクター「.live-heading」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-heading {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 内側の余白を「8px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 16px;
  /* この箇所の解説：
   * 背景全体を「#1b846f」に指定します。
   */
  background: #1b846f;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「.live-heading span」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-heading span {
  /* この箇所の解説：
   * 内側の余白を「4px 8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 4px 8px;
  /* この箇所の解説：
   * 背景全体を「#f24852」に指定します。
   */
  background: #f24852;
  /* この箇所の解説：
   * 文字の大きさを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 12px;
}
/* この箇所の解説：
 * セレクター「.live-content」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-content {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * Gridの列数と横幅を「1.2fr 0.8fr」に指定します。
   */
  grid-template-columns: 1.2fr 0.8fr;
}
/* この箇所の解説：
 * セレクター「.live-picture」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-picture {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   */
  position: relative;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 高さの下限を「260px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 260px;
  /* この箇所の解説：
   * 背景全体を「#0b2530」に指定します。
   */
  background: #0b2530;
}
/* この箇所の解説：
 * セレクター「.live-picture img」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-picture img {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   */
  inset: 0;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
  /* この箇所の解説：
   * 画像を枠へ収める方式を「cover」に指定します。
   */
  object-fit: cover;
  /* この箇所の解説：
   * CSSのfilter設定を「brightness(0.75)」に指定します。
   */
  filter: brightness(0.75);
}
/* この箇所の解説：
 * セレクター「.live-picture img.is-playing」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-picture img.is-playing {
  /* この箇所の解説：
   * CSSのfilter設定を「none」に指定します。
   */
  filter: none;
}
/* この箇所の解説：
 * セレクター「#live-badge」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#live-badge {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  top: 16px;
  /* この箇所の解説：
   * 配置基準からの距離を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  left: 16px;
  /* この箇所の解説：
   * 内側の余白を「4px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 4px 12px;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 背景全体を「#ef3547」に指定します。
   */
  background: #ef3547;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 文字の大きさを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 12px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「#live-toggle」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#live-toggle {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   */
  inset: 0;
  /* この箇所の解説：
   * 横幅を「64px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 64px;
  /* この箇所の解説：
   * 高さを「64px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 64px;
  /* この箇所の解説：
   * 外側の余白を「auto」に指定します。
   */
  margin: auto;
  /* この箇所の解説：
   * 境界線を「2px solid white」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 2px solid white;
  /* この箇所の解説：
   * 角の丸みを「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  border-radius: 50%;
  /* この箇所の解説：
   * 背景全体を「rgb(0 0 0 / 45%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  background: rgb(0 0 0 / 45%);
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 文字の大きさを「28px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 28px;
}
/* この箇所の解説：
 * セレクター「.live-chat」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-chat {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 高さの上限を「380px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  max-height: 380px;
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 内側の余白を「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 20px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #dbe7e4」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-left: 1px solid #dbe7e4;
  /* この箇所の解説：
   * 背景全体を「#f4faf7」に指定します。
   */
  background: #f4faf7;
}
/* この箇所の解説：
 * セレクター「.live-chat h3」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-chat h3 {
  /* この箇所の解説：
   * 指定方向の外余白を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 16px;
  /* この箇所の解説：
   * 文字の色を「#155d69」に指定します。
   */
  color: #155d69;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「.live-comments」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-comments {
  /* この箇所の解説：
   * 指定方向のはみ出しを「auto」に指定します。
   */
  overflow-y: auto;
  /* この箇所の解説：
   * 高さの下限を「0」に指定します。
   */
  min-height: 0;
  /* この箇所の解説：
   * CSSのflex設定を「1」に指定します。
   */
  flex: 1;
  /* この箇所の解説：
   * 指定方向の内余白を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-right: 4px;
}
/* この箇所の解説：
 * セレクター「.live-comment」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-comment {
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 12px;
  /* この箇所の解説：
   * 内側の余白を「8px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 12px;
  /* この箇所の解説：
   * 境界線を「1px solid #d7e6e2」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #d7e6e2;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
   */
  overflow-wrap: anywhere;
}
/* この箇所の解説：
 * セレクター「.live-comment strong」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-comment strong {
  /* この箇所の解説：
   * 文字の色を「#e25f55」に指定します。
   */
  color: #e25f55;
}
/* この箇所の解説：
 * セレクター「.live-comment span」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.live-comment span {
  /* この箇所の解説：
   * 指定方向の外余白を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-left: 8px;
  /* この箇所の解説：
   * 文字の色を「#536970」に指定します。
   */
  color: #536970;
}
/* この箇所の解説：
 * セレクター「#comment-form」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#comment-form {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 指定方向の外余白を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 8px;
}
/* この箇所の解説：
 * セレクター「#comment-input」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#comment-input {
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * CSSのflex設定を「1」に指定します。
   */
  flex: 1;
  /* この箇所の解説：
   * 内側の余白を「8px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 12px;
  /* この箇所の解説：
   * 境界線を「1px solid #b9cfca」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #b9cfca;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
}
/* この箇所の解説：
 * セレクター「#comment-form button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#comment-form button {
  /* この箇所の解説：
   * 横幅を「40px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 40px;
  /* この箇所の解説：
   * 高さを「40px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 40px;
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * 角の丸みを「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 6px;
  /* この箇所の解説：
   * 背景全体を「#176378」に指定します。
   */
  background: #176378;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
}
/* この箇所の解説：
 * セレクター「.featured-section」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.featured-section {
  /* この箇所の解説：
   * 指定方向の外余白を「40px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 40px;
}
/* この箇所の解説：
 * セレクター「.featured-heading」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.featured-heading {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * Flexで折り返すかどうかを「wrap」に指定します。
   */
  flex-wrap: wrap;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「space-between」に指定します。
   */
  justify-content: space-between;
  /* この箇所の解説：
   * 子要素間の間隔を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 12px;
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 12px;
  /* この箇所の解説：
   * 指定方向の内余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-bottom: 12px;
  /* この箇所の解説：
   * 指定箇所の境界線を「2px solid #e95f59」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 2px solid #e95f59;
}
/* この箇所の解説：
 * セレクター「.featured-heading > div:first-child」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.featured-heading > div:first-child {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 12px;
}
/* この箇所の解説：
 * セレクター「.featured-heading h2」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.featured-heading h2 {
  /* この箇所の解説：
   * 文字の大きさを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 24px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「.hot-label」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.hot-label {
  /* この箇所の解説：
   * 内側の余白を「4px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 4px 12px;
  /* この箇所の解説：
   * 背景全体を「#ef454f」に指定します。
   */
  background: #ef454f;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 文字の大きさを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 12px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「#artwork-count」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#artwork-count {
  /* この箇所の解説：
   * 文字の色を「#687f85」に指定します。
   */
  color: #687f85;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.duration-tabs」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.duration-tabs {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素間の間隔を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 4px;
  /* この箇所の解説：
   * 内側の余白を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 4px;
  /* この箇所の解説：
   * 角の丸みを「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 8px;
  /* この箇所の解説：
   * 背景全体を「#eef7f4」に指定します。
   */
  background: #eef7f4;
}
/* この箇所の解説：
 * セレクター「.duration-tabs button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.duration-tabs button {
  /* この箇所の解説：
   * 高さの下限を「36px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 36px;
  /* この箇所の解説：
   * 内側の余白を「8px 16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 16px;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 文字の色を「#526b72」に指定します。
   */
  color: #526b72;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.duration-tabs button[aria-pressed="true"]」に一致する要素へ、
 * 内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.duration-tabs button[aria-pressed="true"] {
  /* この箇所の解説：
   * 背景全体を「#176378」に指定します。
   */
  background: #176378;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
}
/* この箇所の解説：
 * セレクター「.home-page .artwork-grid」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-page .artwork-grid {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * Gridの列数と横幅を「repeat(3, minmax(0, 1fr))」に指定します。
   */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* この箇所の解説：
   * 子要素間の間隔を「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 20px;
}
/* この箇所の解説：
 * CSSのコメントです。
 * 実行用の見た目ではなく、説明・ライセンス等を記録しています。
 */
/* 4列配布版はbodyの値だけを変更し、保存内容やカード本体は共通にします。 */
/* この箇所の解説：
 * セレクター「.home-page[data-columns="4"] .artwork-grid」に一致する要素へ、
 * 内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-page[data-columns="4"] .artwork-grid {
  /* この箇所の解説：
   * Gridの列数と横幅を「repeat(4, minmax(0, 1fr))」に指定します。
   */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* この箇所の解説：
 * セレクター「.empty-artworks」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.empty-artworks {
  /* この箇所の解説：
   * 内側の余白を「64px 20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 64px 20px;
  /* この箇所の解説：
   * 境界線を「1px dashed #a8bbb7」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px dashed #a8bbb7;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
  /* この箇所の解説：
   * 文字の色を「#688086」に指定します。
   */
  color: #688086;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
}
/* この箇所の解説：
 * セレクター「#empty-title」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#empty-title {
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「#empty-description」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
#empty-description {
  /* この箇所の解説：
   * 指定方向の外余白を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 8px;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
}
/* この箇所の解説：
 * セレクター「.filter-note」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.filter-note {
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 12px;
  /* この箇所の解説：
   * 文字の色を「#687f85」に指定します。
   */
  color: #687f85;
  /* この箇所の解説：
   * 文字の大きさを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 12px;
  /* この箇所の解説：
   * 行の高さを「1.7」に指定します。
   */
  line-height: 1.7;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="science"]」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="science"] {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#e0f3f4」に指定します。
   * CSSのカスタム変数「--ad-bg」に値を設定します。
   */
  --ad-bg: #e0f3f4;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#126577」に指定します。
   * CSSのカスタム変数「--ad-accent」に値を設定します。
   */
  --ad-accent: #126577;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="art"]」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="art"] {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#f7eddf」に指定します。
   * CSSのカスタム変数「--ad-bg」に値を設定します。
   */
  --ad-bg: #f7eddf;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#9d493c」に指定します。
   * CSSのカスタム変数「--ad-accent」に値を設定します。
   */
  --ad-accent: #9d493c;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="music"]」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="music"] {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#172347」に指定します。
   * CSSのカスタム変数「--ad-bg」に値を設定します。
   */
  --ad-bg: #172347;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#d7c0ff」に指定します。
   * CSSのカスタム変数「--ad-accent」に値を設定します。
   */
  --ad-accent: #d7c0ff;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="photo"]」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="photo"] {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#e7eff4」に指定します。
   * CSSのカスタム変数「--ad-bg」に値を設定します。
   */
  --ad-bg: #e7eff4;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#285d9e」に指定します。
   * CSSのカスタム変数「--ad-accent」に値を設定します。
   */
  --ad-accent: #285d9e;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="cafe"]」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="cafe"] {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#f5e5d4」に指定します。
   * CSSのカスタム変数「--ad-bg」に値を設定します。
   */
  --ad-bg: #f5e5d4;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「#985638」に指定します。
   * CSSのカスタム変数「--ad-accent」に値を設定します。
   */
  --ad-accent: #985638;
}
/* この箇所の解説：
 * セレクター「.ad-creative[data-ad="science"] .ad-image」に一致する要素へ、
 * 内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative[data-ad="science"] .ad-image {
  /* この箇所の解説：
   * CSSのobject-position設定を「left center」に指定します。
   */
  object-position: left center;
}
/* この箇所の解説：
 * セレクター「.home-ad-dialog」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-ad-dialog {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   */
  inset: 0;
  /* この箇所の解説：
   * 横幅を「100vw」に指定します。
   */
  width: 100vw;
  /* この箇所の解説：
   * 横幅の上限を「none」に指定します。
   */
  max-width: none;
  /* この箇所の解説：
   * 高さを「100dvh」に指定します。
   */
  height: 100dvh;
  /* この箇所の解説：
   * 高さの上限を「none」に指定します。
   */
  max-height: none;
  /* この箇所の解説：
   * 外側の余白を「0」に指定します。
   */
  margin: 0;
  /* この箇所の解説：
   * 内側の余白を「0」に指定します。
   */
  padding: 0;
  /* この箇所の解説：
   * 境界線を「0」に指定します。
   */
  border: 0;
  /* この箇所の解説：
   * 背景全体を「transparent」に指定します。
   */
  background: transparent;
}
/* この箇所の解説：
 * セレクター「.home-ad-dialog::backdrop」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-ad-dialog::backdrop {
  /* この箇所の解説：
   * 背景全体を「rgb(0 0 0 / 84%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  background: rgb(0 0 0 / 84%);
}
/* この箇所の解説：
 * セレクター「.home-ad-dialog .ad-modal-stage」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-ad-dialog .ad-modal-stage {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
  /* この箇所の解説：
   * CSSのplace-items設定を「center」に指定します。
   */
  place-items: center;
}
/* この箇所の解説：
 * セレクター「.home-ad-dialog .ad-modal-image」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.home-ad-dialog .ad-modal-image {
  /* この箇所の解説：
   * 横幅の上限を「96vw」に指定します。
   */
  max-width: 96vw;
  /* この箇所の解説：
   * 高さの上限を「94dvh」に指定します。
   */
  max-height: 94dvh;
  /* この箇所の解説：
   * 画像を枠へ収める方式を「contain」に指定します。
   */
  object-fit: contain;
}
/* この箇所の解説：
 * @media 「(min-width: 768px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (min-width: 768px) {
  /* この箇所の解説：
   * セレクター「.menu-toggle」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .menu-toggle {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     */
    display: none;
  }
}
/* この箇所の解説：
 * @media 「(min-width: 640px) and (max-width: 1279px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (min-width: 640px) and (max-width: 1279px) {
  /* この箇所の解説：
   * セレクター「.home-page .artwork-grid」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-page .artwork-grid {
    /* この箇所の解説：
     * Gridの列数と横幅を「repeat(2, minmax(0, 1fr))」に指定します。
     */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* この箇所の解説：
 * @media 「(max-width: 1023px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width: 1023px) {
  /* この箇所の解説：
   * セレクター「.category-sidebar」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .category-sidebar {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     */
    display: none;
  }
  /* この箇所の解説：
   * セレクター「.category-mobile」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .category-mobile {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「flex」に指定します。
     */
    display: flex;
  }
  /* この箇所の解説：
   * セレクター「.home-main」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-main {
    /* この箇所の解説：
     * 指定方向の外余白を「0」に指定します。
     */
    margin-left: 0;
  }
}
/* この箇所の解説：
 * @media 「(max-width: 767px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width: 767px) {
  /* この箇所の解説：
   * セレクター「.desktop-search」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .desktop-search {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     */
    display: none;
  }
  /* この箇所の解説：
   * セレクター「.live-content」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .live-content {
    /* この箇所の解説：
     * Gridの列数と横幅を「1fr」に指定します。
     */
    grid-template-columns: 1fr;
  }
  /* この箇所の解説：
   * セレクター「.live-chat」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .live-chat {
    /* この箇所の解説：
     * 指定箇所の境界線を「1px solid #dbe7e4」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    border-top: 1px solid #dbe7e4;
    /* この箇所の解説：
     * 指定箇所の境界線を「0」に指定します。
     */
    border-left: 0;
  }
}
/* この箇所の解説：
 * @media 「(max-width: 639px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width: 639px) {
  /* この箇所の解説：
   * セレクター「.home-header-inner」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-header-inner {
    /* この箇所の解説：
     * 内側の余白を「0 16px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 0 16px;
  }
  /* この箇所の解説：
   * セレクター「.home-logo」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-logo {
    /* この箇所の解説：
     * 文字の大きさを「20px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 20px;
  }
  /* この箇所の解説：
   * セレクター「.desktop-account」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .desktop-account {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     */
    display: none;
  }
  /* この箇所の解説：
   * セレクター「.home-content」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-content {
    /* この箇所の解説：
     * 内側の余白を「28px 16px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 28px 16px;
  }
  /* この箇所の解説：
   * セレクター「.home-page .artwork-grid」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .home-page .artwork-grid {
    /* この箇所の解説：
     * 子要素間の間隔を「8px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 8px;
  }
  /* この箇所の解説：
   * セレクター「.featured-heading h2」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .featured-heading h2 {
    /* この箇所の解説：
     * 文字の大きさを「20px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 20px;
  }
  /* この箇所の解説：
   * セレクター「.duration-tabs」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .duration-tabs {
    /* この箇所の解説：
     * 横幅を「100%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    width: 100%;
    /* この箇所の解説：
     * 子要素の主方向の揃え方を「space-between」に指定します。
     */
    justify-content: space-between;
  }
  /* この箇所の解説：
   * セレクター「.duration-tabs button」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .duration-tabs button {
    /* この箇所の解説：
     * 内側の余白を「8px 12px」に指定します。
     * pxはCSS上のピクセル単位です。
     * 空行です。
     * 見た目の指定はありません。
     */
    padding: 8px 12px;
  }
}