@charset "UTF-8";
/* Button animation
--------------- */
@keyframes scale {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05, 1.05); }
  100% {
    transform: scale(1); } }

.button-anim {
  display: block;
  transition: 0.5s;
  animation-name: scale;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  .button-anim:hover {
    animation: none; }

.button-bounce {
  position: relative;
  transform-origin: center bottom;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.button-hover {
  display: block;
  transition: 0.5s; }
  .button-hover:hover {
    transform: scale(1.05, 1.05); }

/* 左画面外から侵入 */
@keyframes hand-outside {
  0% {
    transform: translateX(-160%) scaleX(0.2) rotate(0deg);
    opacity: 0; }
  20% {
    opacity: 1; }
  70% {
    transform: translateX(6%) scaleX(1.04);
    opacity: 1; }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1; } }

/* 右画面外から侵入 */
@keyframes hand-outside-right {
  0% {
    transform: translateX(160%) scaleX(0.2);
    opacity: 0; }
  20% {
    opacity: 1; }
  70% {
    transform: translateX(-6%) scaleX(1.04); }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1; } }

.nav-item__img--store {
  display: inline-block;
  width: clamp(140px, 28vw, 260px);
  aspect-ratio: 2 / 1;
  height: calc(clamp(140px, 28vw, 260px) / 2);
  background: url("/brand/bsb/images/menu-store-text.png") no-repeat center/80%; }
  @media screen and (max-width: 768px) {
    .nav-item__img--store {
      width: clamp(110px, 10vw, 200px);
      aspect-ratio: 10 / 7;
      height: calc(clamp(110px, 10vw, 200px) * 7 / 10); } }
  @media screen and (min-width: 768px) {
    .nav-item__img--store {
      background-size: 55%; } }

a:hover .nav-item__img--store,
a:focus .nav-item__img--store {
  background-image: url("/brand/bsb/images/menu-store-text_hover.png"); }

.nav-item__img--product {
  display: inline-block;
  width: clamp(140px, 28vw, 260px);
  aspect-ratio: 2 / 1;
  height: calc(clamp(140px, 28vw, 260px) / 2);
  background: url("/brand/bsb/images/menu-product-text.png") no-repeat center/80%; }
  @media screen and (max-width: 768px) {
    .nav-item__img--product {
      width: clamp(110px, 10vw, 200px);
      aspect-ratio: 10 / 7;
      height: calc(clamp(110px, 10vw, 200px) * 7 / 10); } }
  @media screen and (min-width: 768px) {
    .nav-item__img--product {
      background-size: 55%; } }

a:hover .nav-item__img--product,
a:focus .nav-item__img--product {
  background-image: url("/brand/bsb/images/menu-product-text_hover.png"); }

.nav-item__img--youtuber {
  display: inline-block;
  width: clamp(140px, 28vw, 260px);
  aspect-ratio: 2 / 1;
  height: calc(clamp(140px, 28vw, 260px) / 2);
  background: url("/brand/bsb/images/menu-youtuber-text.png") no-repeat center/80%; }
  @media screen and (max-width: 768px) {
    .nav-item__img--youtuber {
      width: clamp(110px, 10vw, 200px);
      aspect-ratio: 10 / 7;
      height: calc(clamp(110px, 10vw, 200px) * 7 / 10); } }
  @media screen and (min-width: 768px) {
    .nav-item__img--youtuber {
      background-size: 55%; } }

a:hover .nav-item__img--youtuber,
a:focus .nav-item__img--youtuber {
  background-image: url("/brand/bsb/images/menu-youtuber-text_hover.png"); }

main {
  overflow-x: hidden;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; }
  main img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; }

.base-layout {
  position: relative;
  max-width: 1100px;
  margin: auto;
  padding: 13.33333vw 8.66667vw;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .base-layout {
      padding: 100px 75px; } }

.nav-list {
  display: flex;
  justify-content: center;
  padding: 4vw 4.26667vw;
  column-gap: 2.1875vw;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .nav-list {
      padding: 28px 15px;
      column-gap: 4.42708vw; } }

.nav-item__link {
  display: inline-block;
  position: relative; }
  .nav-item__link:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: clamp(140px, 28vw, 260px);
    aspect-ratio: 2 / 1;
    height: calc(clamp(140px, 28vw, 260px) / 2);
    transition: 0.5s;
    background: url("/brand/bsb/images/menu_sp.png") no-repeat center/contain; }
    @media screen and (max-width: 768px) {
      .nav-item__link:after {
        width: clamp(110px, 10vw, 200px);
        aspect-ratio: 10 / 7;
        height: calc(clamp(110px, 10vw, 200px) * 7 / 10); } }
    @media screen and (min-width: 768px) {
      .nav-item__link:after {
        background: url("/brand/bsb/images/menu_pc.png") no-repeat center/contain; } }
  .nav-item__link:hover:after, .nav-item__link:focus:after {
    transform: scale(1.05, 1.05);
    background: url("/brand/bsb/images/menu_sp-hover.png") no-repeat center/contain; }
    @media screen and (min-width: 768px) {
      .nav-item__link:hover:after, .nav-item__link:focus:after {
        background: url("/brand/bsb/images/menu_pc-hover.png") no-repeat center/contain; } }

.nav-item__img {
  position: relative;
  width: clamp(140px, 28vw, 260px);
  aspect-ratio: 2 / 1;
  height: calc(clamp(140px, 28vw, 260px) / 2);
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .nav-item__img {
      width: clamp(110px, 10vw, 200px);
      aspect-ratio: 10 / 7;
      height: calc(clamp(110px, 10vw, 200px) * 7 / 10); } }

.logo {
  padding-block: 2.93333vw;
  text-align: center;
  background-color: #ef7a00; }
  @media screen and (min-width: 768px) {
    .logo {
      padding-block: 22px; } }
  .logo picture {
    display: inline-block; }
    @media screen and (max-width: 768px) {
      .logo picture {
        width: 48.13333vw; } }

.mv {
  position: relative;
  background-color: #ef7a00; }

.mv-content {
  text-align: center; }
  .mv-content__title {
    display: grid;
    width: 57.33333vw;
    gap: 3.46667vw;
    justify-content: center;
    margin: auto; }
    @media screen and (min-width: 768px) {
      .mv-content__title {
        gap: 29px;
        width: auto; } }
  .mv-content__info {
    max-width: 949px;
    margin: 16vw auto 0;
    padding: 9.33333vw 5.33333vw;
    border-radius: 10px;
    box-sizing: border-box;
    border: solid 4px #fff;
    background-color: #171c61; }
    @media screen and (min-width: 768px) {
      .mv-content__info {
        margin-top: 70px;
        padding: 70px 74px;
        border: solid 5px #fff; } }
  .mv-content__list {
    margin-top: 5.33333vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.66667vw 3.2vw; }
    @media screen and (min-width: 768px) {
      .mv-content__list {
        margin-top: 30px;
        gap: 28px 49px; } }
  .mv-content__item {
    width: calc((100% / 3) - 3.2vw); }
    @media screen and (min-width: 768px) {
      .mv-content__item {
        width: calc((100% / 3) - 33px); } }
  .mv-content__btn {
    margin: 6.66667vw auto 0;
    width: 68.93333vw; }
    @media screen and (min-width: 768px) {
      .mv-content__btn {
        margin-top: 50px;
        width: 414px; } }
  .mv-content__note {
    margin-top: 1.33333vw;
    text-align: center;
    font-size: 0.625rem;
    color: #fff; }
    @media screen and (min-width: 768px) {
      .mv-content__note {
        margin-top: 10px;
        font-size: 0.75rem; } }

/* cm
--------------- */
.cm {
  position: relative;
  background-color: #e73828; }

@media screen and (max-width: 768px) {
  .cm-content__title {
    width: 29.06667vw;
    margin: auto; } }

.cm-content__text {
  margin-block: 10px 30px; }
  @media screen and (max-width: 768px) {
    .cm-content__text {
      width: 54.53333vw;
      margin: 4vw auto 5.33333vw; } }

/* product
--------------- */
.product {
  position: relative;
  background-color: #171c60; }

@media screen and (max-width: 768px) {
  .product-content__title {
    width: 70.53333vw;
    margin: auto; } }

@media screen and (max-width: 768px) {
  .product-content__title--other {
    width: 33.2vw; } }

.product-content__text {
  margin-top: 15px; }
  @media screen and (max-width: 768px) {
    .product-content__text {
      width: 36vw;
      margin: 2vw auto 0; } }
  @media screen and (max-width: 768px) {
    .product-content__text--other {
      width: 72.4vw; } }

.product-content__list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 12px;
  justify-content: center;
  margin-top: 4vw; }
  @media screen and (min-width: 768px) {
    .product-content__list {
      gap: 15px 18px;
      margin-top: 30px; } }
  .product-content__list + .product-content__title {
    margin-top: 12vw; }
    @media screen and (min-width: 768px) {
      .product-content__list + .product-content__title {
        margin-top: 60px; } }
  @media screen and (min-width: 768px) {
    .product-content__list--other {
      width: 60%;
      min-width: 630px;
      margin-inline: auto; }
      .product-content__list--other .product-content__item {
        width: calc((100% / 2) - 6px); } }

.product-content__item {
  width: calc((100% / 3) - 12px);
  max-width: 304px; }
  @media screen and (max-width: 768px) {
    .product-content__item {
      width: calc((100% / 2) - 6px); } }
  .product-content__item a:hover {
    filter: brightness(1.5); }

.product-content__note {
  margin-top: 8vw;
  text-align: center;
  font-size: 0.625rem;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .product-content__note {
      margin-top: 50px;
      font-size: 0.75rem; } }

/* youtuber
--------------- */
.youtuber {
  position: relative;
  background-color: #e73828; }

.youtuber-content__list {
  margin-top: 9.33333vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6.93333vw 7.73333vw; }
  @media screen and (min-width: 768px) {
    .youtuber-content__list {
      margin-top: 40px;
      gap: 40px 78px; } }

.youtuber-content__item {
  max-width: 260px; }
  @media screen and (max-width: 768px) {
    .youtuber-content__item {
      width: 36vw; } }

.youtuber-content__name {
  margin-top: 9px; }
  @media screen and (max-width: 768px) {
    .youtuber-content__name {
      text-align: center; }
      .youtuber-content__name img {
        width: auto;
        height: 3.86667vw; } }

.youtuber-content__text {
  margin-top: 2vw;
  text-align: left;
  font-size: 0.625rem;
  line-height: 1.5;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .youtuber-content__text {
      margin-top: 12px;
      font-size: 0.875rem; } }

/* Modal
--------------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.3s; }

.has-modal .modal {
  visibility: visible;
  opacity: 1; }

.modal-container {
  position: relative;
  width: 90%;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .modal-container {
      width: 700px; } }

.modal-close {
  position: absolute;
  top: -35px;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer; }
  @media screen and (min-width: 768px) {
    .modal-close {
      top: -55px;
      width: 40px;
      height: 40px; } }

.modal-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden; }
  .modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.youtube {
  pointer-events: none;
  opacity: 0; }
  .youtube.is-active {
    pointer-events: visible;
    opacity: 1; }

/* store
--------------- */
.store {
  position: relative;
  overflow: hidden;
  background-color: #fbcf05; }

@media screen and (min-width: 768px) {
  .store-content {
    padding-block: 54px 69px; } }

.store-content__heading {
  width: 43.6vw;
  margin-block: 0;
  margin-inline: auto;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .store-content__heading {
      width: 366px;
      height: 59px; } }

.store-content__store-list {
  margin-top: 4.26667vw;
  margin-bottom: 0; }
  @media screen and (min-width: 768px) {
    .store-content__store-list {
      width: 100%;
      max-width: 760px;
      margin-inline: auto;
      margin-top: 24px; } }

.store-content__btn {
  margin-inline: auto;
  margin-top: 5.33333vw;
  width: 68.93333vw; }
  @media screen and (min-width: 768px) {
    .store-content__btn {
      margin: 28px auto 20px;
      width: 415px; } }

.store-content__note {
  margin-top: 1.73333vw;
  font-size: 0.625rem; }
  @media screen and (min-width: 768px) {
    .store-content__note {
      font-size: 0.8125rem; } }

.store-list__item {
  width: 100%; }

.store-list__item + .store-list__item {
  border-top: 1px solid #fff; }

.store-list__term {
  position: relative;
  line-height: 0;
  padding: 2.93333vw 4.4vw;
  text-align: left;
  background-color: #161c60; }
  @media screen and (min-width: 768px) {
    .store-list__term {
      padding: 22px 40px 22px 40px; } }
  .store-list__term:after {
    position: absolute;
    top: 50%;
    right: 2.806%;
    display: block;
    width: 5.169%;
    height: 28.947%;
    content: '';
    background: url("/brand/bsb/images/store-arrow.png") center/contain no-repeat;
    transition: transform 0.3s ease;
    transform: translateY(-50%) rotate(0deg); }
    @media screen and (min-width: 768px) {
      .store-list__term:after {
        right: 38px;
        width: 40px; } }
  @media screen and (max-width: 768px) {
    .store-list__term-img {
      height: 4.13333vw; } }

.store-list__description {
  position: relative;
  padding: 4.93333vw 3.46667vw;
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.5;
  text-align: left;
  color: #161c60;
  background-color: #fff; }
  @media screen and (min-width: 768px) {
    .store-list__description {
      padding: 30px 40px 30px 50px;
      font-size: 1.0625rem; } }

.store-list__prefecture {
  margin-bottom: 15px;
  font-size: 1.1875rem;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .store-list__prefecture {
      font-size: 1.0625rem; } }
  .store-list__prefecture:not(:first-child) {
    margin-top: 40px; }

.store-list__store:before {
  content: '・'; }

.store-list__store + .store-list__store {
  margin-top: 25px; }

.store-list__link {
  color: #161c60;
  text-decoration: none;
  letter-spacing: 0.05em; }
  .store-list__link:hover {
    text-decoration: underline; }

/* accodion
--------------- */
.js-accordion-box {
  box-sizing: content-box;
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease; }

.js-accordion._open .js-accordion-box {
  padding-block: 30px; }

.js-accordion._open .store-list__term::after {
  transform: translateY(-50%) rotate(-180deg); }

/* hand anim
--------------- */
.hand {
  overflow: hidden; }
  .hand__img {
    position: absolute;
    opacity: 0;
    visibility: hidden; }
    .hand__img.is-animated {
      opacity: 1;
      visibility: visible; }
    .hand__img--top-left {
      top: 70px;
      left: -13.02083vw;
      width: 40.625vw; }
      @media screen and (max-width: 768px) {
        .hand__img--top-left {
          top: 17.33333vw;
          left: -35.73333vw;
          width: 54.66667vw;
          max-width: 410px; } }
      .hand__img--top-left.is-animated {
        animation: hand-outside 1.5s cubic-bezier(0.22, 0.8, 0.28, 1) both; }
    .hand__img--bottom-left {
      top: 500px;
      left: -13.02083vw;
      width: 35.625vw; }
      @media screen and (max-width: 768px) {
        .hand__img--bottom-left {
          top: 61.33333vw;
          left: -37.46667vw;
          width: 61.06667vw;
          max-width: 458px; } }
      .hand__img--bottom-left.is-animated {
        animation: hand-outside 1.5s cubic-bezier(0.22, 0.8, 0.28, 1) 0.3s both; }
    .hand__img--top-right {
      top: 16px;
      right: -5.20833vw;
      transform-origin: right center;
      width: 32.44792vw; }
      @media screen and (max-width: 768px) {
        .hand__img--top-right {
          top: -10.66667vw;
          right: -36vw;
          width: 57.33333vw;
          max-width: 430px; } }
      .hand__img--top-right.is-animated {
        animation: hand-outside-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both; }
    .hand__img--bottom-right {
      top: 320px;
      right: -15.36458vw;
      transform-origin: right center;
      width: 41.04167vw; }
      @media screen and (max-width: 768px) {
        .hand__img--bottom-right {
          top: 49.33333vw;
          right: -34.66667vw;
          width: 53.33333vw;
          max-width: 400px; } }
      .hand__img--bottom-right.is-animated {
        animation: hand-outside-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.3s both; }
    .hand__img--cm {
      width: 21.875vw;
      top: 95px;
      right: -7.96875vw; }
      @media screen and (max-width: 768px) {
        .hand__img--cm {
          top: 25px;
          right: -20.4vw;
          width: 36.4vw; } }
      .hand__img--cm.is-animated {
        animation: hand-outside-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both; }
    .hand__img--product-top {
      width: 30.72917vw;
      top: 160px;
      left: -13.02083vw; }
      @media screen and (max-width: 768px) {
        .hand__img--product-top {
          top: 30px;
          left: -68px;
          width: 33.46667vw; } }
      .hand__img--product-top.is-animated {
        animation: hand-outside 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) both; }
    .hand__img--product-bottom {
      bottom: 126px;
      right: -10px;
      transform-origin: right center; }
      @media screen and (max-width: 768px) {
        .hand__img--product-bottom {
          bottom: 35px;
          right: -52px;
          width: 34.66667vw; } }
      .hand__img--product-bottom.is-animated {
        animation: hand-outside-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both; }
    .hand__img--youtuber {
      bottom: 78px;
      left: -180px;
      width: 427px;
      transform-origin: right center; }
      @media screen and (max-width: 768px) {
        .hand__img--youtuber {
          bottom: 0px;
          left: -96px;
          width: 46.4vw; } }
      .hand__img--youtuber.is-animated {
        animation: hand-outside 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both; }
    .hand__img--store {
      bottom: -50px;
      right: -12.5vw;
      width: 29.94792vw;
      transform-origin: right center; }
      @media screen and (max-width: 768px) {
        .hand__img--store {
          bottom: -13px;
          right: -78px;
          width: 36.26667vw; } }
      .hand__img--store.is-animated {
        animation: hand-outside-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both; }