.nijiiro-editorial-sidebar {
  --ns-coral: #e76545;
  --ns-coral-bright: #ff8a65;
  --ns-ink: #473a32;
  --ns-ink-soft: #75675d;
  --ns-cream: #fffaf3;
  --ns-border: #eadfd2;
  --ns-green: #3f8068;
  --ns-blue: #357997;
  --ns-purple: #775f92;
  color: var(--ns-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 304px;
  width: 100%;
}

.nijiiro-editorial-sidebar *,
.nijiiro-editorial-sidebar *::before,
.nijiiro-editorial-sidebar *::after { box-sizing: border-box; }

.ns-section { margin: 0 0 35px; }

.ns-heading {
  color: var(--ns-ink);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 14px;
}

.ns-heading::after {
  background: linear-gradient(90deg, #ff8a65 0 20%, #ffc857 20% 40%, #8fcb9b 40% 60%, #7ec4e8 60% 80%, #b79fd1 80% 100%);
  border-radius: 4px;
  content: "";
  display: block;
  height: 5px;
  margin-top: 8px;
  width: 100%;
}

.ns-lead {
  color: var(--ns-ink-soft);
  font-size: 11.5px;
  line-height: 1.6;
  margin: -5px 0 14px;
}

.ns-disclosure {
  background: #fff6f1;
  border: 1px solid #f4c8b9;
  border-radius: 10px;
  color: var(--ns-ink-soft);
  font-size: 10.5px;
  line-height: 1.55;
  margin: -4px 0 14px;
  padding: 8px 10px;
}
.ns-disclosure strong { color: #9a3d28; font-size: 11px; }

.ns-rank-group { margin: 0 0 26px; }
.ns-rank-group:last-child { margin-bottom: 0; }

.ns-rank-title {
  border-left: 4px solid var(--ns-coral-bright);
  color: var(--ns-ink);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 10px;
  padding: 1px 0 1px 9px;
}

.ns-period-tabs {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 10px;
}

.ns-period-tab {
  background: #fff;
  border: 1px solid var(--ns-border);
  border-radius: 8px;
  color: var(--ns-ink-soft);
  cursor: pointer;
  font: 700 12px/1.2 "Noto Sans JP", sans-serif;
  min-height: 34px;
  padding: 7px 4px;
}

.ns-period-tab:hover { border-color: var(--ns-coral-bright); color: var(--ns-coral); }
.ns-period-tab[aria-selected="true"] { background: var(--ns-coral); border-color: var(--ns-coral); color: #fff; }
.ns-period-tab:focus-visible,
.ns-rank-link:focus-visible,
.ns-video-item:focus-visible,
.ns-channel-link:focus-visible,
.ns-service-card:focus-visible { outline: 3px solid #245f9d; outline-offset: 3px; }

.ns-rank-panel[hidden] { display: none; }
.ns-rank-list { counter-reset: ns-rank; list-style: none; margin: 0; padding: 0; }
.ns-rank-item { border-bottom: 1px solid var(--ns-border); counter-increment: ns-rank; margin: 0; padding: 0; }
.ns-rank-link {
  align-items: flex-start;
  color: var(--ns-ink) !important;
  display: flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 10px;
  line-height: 1.55;
  padding: 9px 2px;
  text-decoration: none !important;
}
.ns-rank-link::before {
  align-items: center;
  background: #a89e96;
  border-radius: 50%;
  color: #fff;
  content: counter(ns-rank);
  display: flex;
  flex: 0 0 23px;
  font: 800 11.5px/1 "Noto Sans JP", sans-serif;
  height: 23px;
  justify-content: center;
  margin-top: 1px;
}
.ns-rank-item:nth-child(1) .ns-rank-link::before { background: #f2b928; color: #513a00; }
.ns-rank-item:nth-child(2) .ns-rank-link::before { background: #aab5b0; }
.ns-rank-item:nth-child(3) .ns-rank-link::before { background: #bd7e43; }
.ns-rank-link:hover { color: var(--ns-coral) !important; text-decoration: underline !important; }
.ns-rank-empty { color: var(--ns-ink-soft); font-size: 12px; margin: 0; padding: 10px 2px; }

.ns-video-heading { align-items: center; display: flex; gap: 8px; }
.ns-youtube-mark { background: #f00; border-radius: 4px; display: inline-block; flex: 0 0 22px; height: 15px; position: relative; }
.ns-youtube-mark::after { border-color: transparent transparent transparent #fff; border-style: solid; border-width: 3.5px 0 3.5px 6px; content: ""; left: 9px; position: absolute; top: 4px; }
.ns-channel { margin: 0 0 25px; }
.ns-channel:last-child { margin-bottom: 0; }
.ns-channel-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 11px; }
.ns-channel-name { font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; font-size: 13.5px; font-weight: 800; line-height: 1.4; margin: 0; }
.ns-channel-link { background: #e60000; border-radius: 999px; color: #fff !important; font-size: 11px; font-weight: 700; padding: 5px 12px; text-decoration: none !important; }
.ns-video-item { color: inherit !important; display: block; text-decoration: none !important; }
.ns-video-thumb { aspect-ratio: 16/9; background: #eee; border-radius: 14px; box-shadow: 0 4px 14px rgba(71,58,50,.12); display: block; overflow: hidden; position: relative; }
.ns-video-thumb img { display: block; height: 100% !important; object-fit: cover; transition: transform .25s ease; width: 100% !important; }
.ns-video-thumb::after { background: rgba(0,0,0,.62); border-radius: 50%; content: ""; height: 48px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 48px; }
.ns-video-thumb::before { border-color: transparent transparent transparent #fff; border-style: solid; border-width: 8px 0 8px 13px; content: ""; left: calc(50% + 2px); position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 1; }
.ns-video-item:hover .ns-video-thumb img { transform: scale(1.04); }
.ns-video-item:hover .ns-video-thumb::after { background: #e60000; }
.ns-video-title { display: -webkit-box; font-size: 13px; font-weight: 700; line-height: 1.5; margin-top: 9px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ns-video-item:hover .ns-video-title { color: var(--ns-coral); }

.ns-service-grid { display: grid; gap: 14px; }
.ns-service-card { background: #fff; border: 1px solid var(--ns-border); border-radius: 15px; color: inherit !important; display: block; overflow: hidden; position: relative; text-decoration: none !important; transition: border-color .16s, box-shadow .16s, transform .16s; }
.ns-service-card:hover { border-color: var(--ns-coral-bright); box-shadow: 0 9px 20px rgba(71,58,50,.12); transform: translateY(-2px); }
.ns-service-thumb { aspect-ratio: 16/8.8; background: var(--ns-cream); display: block; overflow: hidden; }
.ns-service-thumb img { display: block; height: 100% !important; object-fit: cover; transition: transform .25s ease; width: 100% !important; }
.ns-service-card:hover .ns-service-thumb img { transform: scale(1.04); }
.ns-service-body { display: block; padding: 12px 36px 14px 16px; }
.ns-service-name { display: block; font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; font-size: 14.5px; font-weight: 800; line-height: 1.4; }
.ns-service-description { color: var(--ns-ink-soft); display: block; font-size: 11px; line-height: 1.45; margin-top: 3px; }
.ns-service-arrow { bottom: 11px; color: var(--ns-coral); font-size: 20px; font-weight: 800; position: absolute; right: 14px; }

@media (max-width: 959px) {
  .nijiiro-editorial-sidebar { margin-inline: auto; max-width: 680px; }
  .ns-video-grid, .ns-service-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-channel { margin: 0; }
}

@media (max-width: 599px) {
  .nijiiro-editorial-sidebar { max-width: 100%; }
  .ns-video-grid, .ns-service-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nijiiro-editorial-sidebar * { scroll-behavior: auto !important; transition: none !important; }
}