/* v2モック：ヘッダーのロゴを大きくする（現行 22px → PC 36px / スマホ 32px）。
   ヘッダーの高さ 56px は変えていない。 */
.site-header .logo-link .mm-logo {
  height: 32px;
  width: auto;
}

@media (min-width: 768px) {
  .site-header .logo-link .mm-logo {
    height: 36px;
  }
}

/* v2モック：スマホでメニューの左側（Streaming / Video など）が画面外に切れ、
   スクロールしても届かなかったのを直す。
   右寄せ（flex-end）をやめて先頭の余白で右に寄せると、収まらないときは
   先頭から並んで横スクロールできる。続きがある側は端をぼかして示す。 */
.site-header .navscroll {
  justify-content: flex-start;
}

.site-header .navscroll > a:first-child {
  margin-left: auto;
}

@media (max-width: 767px) {
  .site-header .inner {
    gap: 14px;
    padding-right: 0;
  }

  .site-header .navscroll {
    padding-right: 16px;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }

  .site-header .navscroll > a:first-child {
    padding-left: 12px;
  }

  /* 指で押しやすい高さにする */
  .site-header .navscroll a {
    padding-block: 12px;
  }
}