@charset "UTF-8";
.cont__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cont__center > * {
  min-height: 0%;
}

.cont__container, .cont__container--small {
  box-sizing: content-box !important;
  max-width: 1547px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .cont__container, .cont__container--small {
    max-width: 89.3333333333vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.cont__container--small {
  max-width: 840px;
}
@media screen and (max-width: 1547px) {
  .cont__container--small {
    max-width: 95.4545454545vw;
  }
}
@media screen and (max-width: 768px) {
  .cont__container--small {
    max-width: 100%;
  }
}

.link {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
.link:hover {
  opacity: 0.7;
}

.store__container, .product__container, .gallery__container, .lead__container, .kv__container {
  max-width: 1547px;
  margin: 0 auto;
}

/* common:start */
[v-cloak] {
  display: none;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
}

.js-fade {
  opacity: 0;
  transition: 0.4s all;
  transform: translateY(5%);
}
.js-fade-active {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.bg-foot {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding-top: 15px;
}

@keyframes yurayura {
  0%, 100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
.wrapper {
  margin-bottom: 40px;
}
@media screen and (max-width: 1547px) {
  .wrapper {
    margin-bottom: 2.5856496445vw;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    margin-bottom: 5.3333333333vw;
  }
}

/* フェードインする要素の初期状態（非表示） */
.js-fade {
  opacity: 0;
  transform: translateY(20px);
  /* 少し下からスタート */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面内に入ったときに適用されるクラス */
.js-fade-active {
  opacity: 1;
  transform: translateY(0);
  /* 元の位置に戻る */
}

.imgcover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.content {
  background-image: url(/alcohol/beer/ichiban/gallery/images/index-image-content-bg.jpg);
  background-size: 100% 100%;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .content {
    background-image: url(/alcohol/beer/ichiban/gallery/images/sp/index-image-content-bg.jpg);
    background-size: 100% 101%;
    background-position: top -1.3333333333vw center;
  }
}

/* common:end */
/* kv:start */
.kv {
  background-image: url(/alcohol/beer/ichiban/gallery/images/index-image-kv-bg.jpg);
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .kv {
    background-image: url(/alcohol/beer/ichiban/gallery/images/sp/index-image-kv-bg.jpg);
  }
}
.kv__container {
  position: relative;
  height: 580px;
}
@media screen and (max-width: 1547px) {
  .kv__container {
    height: 37.4919198449vw;
  }
}
@media screen and (max-width: 768px) {
  .kv__container {
    height: 99.4666666667vw;
  }
}
.kv__image {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
}
.kv .js-kv__image01,
.kv .js-kv__image02,
.kv .js-kv__image03 {
  opacity: 0;
  transform: translateY(10%);
}
.kv .is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* kv:end */
/* lead:start */
.lead__container {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
}
@media screen and (max-width: 1547px) {
  .lead__container {
    padding-top: 4.5248868778vw;
    padding-bottom: 4.5248868778vw;
  }
}
@media screen and (max-width: 768px) {
  .lead__container {
    padding-top: 15.4666666667vw;
    padding-bottom: 0;
  }
}
.lead__title {
  width: 49.127343245%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .lead__title {
    width: 53.4666666667vw;
    margin-left: 25.3333333333vw;
    margin-right: auto;
  }
}
.lead__text {
  width: 58.6942469295%;
  margin-inline: auto;
  margin-top: 40px;
}
@media screen and (max-width: 1547px) {
  .lead__text {
    margin-top: 2.5856496445vw;
  }
}
@media screen and (max-width: 768px) {
  .lead__text {
    width: 78.1333333333vw;
    margin-top: 5.3333333333vw;
  }
}
.lead__link {
  width: 33.548804137%;
  margin-inline: auto;
  margin-top: 33px;
}
@media screen and (max-width: 1547px) {
  .lead__link {
    margin-top: 2.1331609567vw;
  }
}
@media screen and (max-width: 768px) {
  .lead__link {
    width: 80.5333333333vw;
    margin-top: 4.8vw;
  }
}
.lead__icon {
  position: absolute;
  width: 12.9282482224%;
  top: 262px;
  left: 0;
}
@media screen and (max-width: 1547px) {
  .lead__icon {
    top: 16.9360051713vw;
  }
}
@media screen and (max-width: 768px) {
  .lead__icon {
    width: 16vw;
    top: 13.7333333333vw;
    left: 3.7333333333vw;
  }
}

/* lead:end */
.gallery .swiper-button-next, .gallery .swiper-button-prev {
  width: 48px;
  height: 98px;
  margin-top: 0;
  top: 46.2732919255%;
  transition: 0.2s opacity;
}
@media screen and (max-width: 1547px) {
  .gallery .swiper-button-next, .gallery .swiper-button-prev {
    width: 3.1027795734vw;
    height: 6.334841629vw;
  }
}
@media screen and (max-width: 768px) {
  .gallery .swiper-button-next, .gallery .swiper-button-prev {
    width: 7.7333333333vw;
    height: 14.1333333333vw;
  }
}
.gallery .swiper-button-next::after, .gallery .swiper-button-prev::after {
  display: block;
  content: "";
  position: absolute;
  background-image: url(/alcohol/beer/ichiban/gallery/images/index-btn-gallery.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .gallery .swiper-button-next::after, .gallery .swiper-button-prev::after {
    background-image: url(/alcohol/beer/ichiban/gallery/images/sp/index-btn-gallery.png);
  }
}
.gallery .swiper-button-next:hover, .gallery .swiper-button-prev:hover {
  opacity: 0.7;
}

/* gallery:start */
.gallery__container {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 1547px) {
  .gallery__container {
    padding-top: 3.8784744667vw;
    padding-bottom: 3.8784744667vw;
  }
}
@media screen and (max-width: 768px) {
  .gallery__container {
    padding-top: 14.5333333333vw;
  }
}
.gallery__content {
  width: 62.0555914674%;
  background-image: url(/alcohol/beer/ichiban/gallery/images/index-image-gallery-content-bg.png);
  background-size: 101.875%;
  background-repeat: no-repeat;
  background-position: center;
  margin-inline: auto;
  padding-block: 3.8784744667% 7.1105365223%;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .gallery__content {
    width: 93.6vw;
    background-image: url(/alcohol/beer/ichiban/gallery/images/sp/index-image-gallery-content-bg.png);
    background-size: 102.5641025641%;
    padding-block: 10.6666666667vw 14.6666666667vw;
  }
}
.gallery__swiper {
  position: relative;
}
.gallery .swiper-slide {
  position: relative;
  pointer-events: none;
  box-shadow: 0 5px 15px 0 rgba(5, 33, 79, 0.4);
}
.gallery .swiper-slide::before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  transition: 0.4s opacity;
}
.gallery .swiper-slide-active {
  pointer-events: all;
  cursor: pointer;
  transition: 0.2s opacity;
}
.gallery .swiper-slide-active::before {
  opacity: 0;
}
.gallery .swiper-slide-active:hover {
  opacity: 0.7;
}
.gallery .swiper-button-prev {
  left: 96px;
  transform: translateY(-46.2732919255%);
}
@media screen and (max-width: 1547px) {
  .gallery .swiper-button-prev {
    left: 6.2055591467vw;
  }
}
@media screen and (max-width: 768px) {
  .gallery .swiper-button-prev {
    left: 3.3333333333vw;
  }
}
.gallery .swiper-button-next {
  right: 96px;
  transform: scale(-1, 1) translateY(-46.2732919255%);
}
@media screen and (max-width: 1547px) {
  .gallery .swiper-button-next {
    right: 6.2055591467vw;
  }
}
@media screen and (max-width: 768px) {
  .gallery .swiper-button-next {
    right: 3.3333333333vw;
  }
}
.gallery .swiper-pagination {
  top: 87.5776397516%;
}
@media screen and (max-width: 768px) {
  .gallery .swiper-pagination {
    top: 61.8666666667vw;
  }
}
.gallery .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: #bfc0c0;
  margin-inline: 5px !important;
  opacity: 1;
  transition: 0.2s opacity;
}
@media screen and (max-width: 768px) {
  .gallery .swiper-pagination-bullet {
    width: 1.2928248222vw;
    height: 1.2928248222vw;
    margin-inline: 0.3232062056vw !important;
  }
}
@media screen and (max-width: 768px) {
  .gallery .swiper-pagination-bullet {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-inline: 1.2928248222vw !important;
  }
}
.gallery .swiper-pagination-bullet:hover {
  opacity: 0.7;
}
.gallery .swiper-pagination-bullet-active {
  background: #013274;
  opacity: 1;
}
.gallery .swiper-pagination-bullet-active:hover {
  opacity: 1;
}
.gallery .swiper-notification {
  display: none !important;
}

/* gallery:end */
/* product:start */
.product__container {
  padding-top: 50px;
  padding-bottom: 73px;
}
@media screen and (max-width: 1547px) {
  .product__container {
    padding-top: 3.2320620556vw;
    padding-bottom: 4.7188106012vw;
  }
}
@media screen and (max-width: 768px) {
  .product__container {
    padding-top: 10.6666666667vw;
    padding-bottom: 14.6666666667vw;
  }
}
.product__title {
  width: 63.2191338074%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .product__title {
    width: 96vw;
  }
}
.product__contents {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .product__contents {
    flex-direction: column;
  }
}
.product__content--ichiban {
  width: 20.4266321913%;
  order: 2;
  margin-left: 0.6464124111%;
  margin-top: 2.2624434389%;
}
@media screen and (max-width: 768px) {
  .product__content--ichiban {
    width: 90.2666666667vw;
    order: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.5333333333vw;
  }
}
.product__content--zero {
  width: 20.2973497091%;
  order: 3;
  margin-left: 0.8403361345%;
  margin-top: 4.6541693601%;
}
@media screen and (max-width: 768px) {
  .product__content--zero {
    width: 90.2666666667vw;
    order: 2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
}
.product__content--white {
  width: 20.6205559147%;
  order: 1;
  margin-top: 4.7834518423%;
}
@media screen and (max-width: 768px) {
  .product__content--white {
    width: 90.4vw;
    order: 3;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
}
.product__name {
  width: 100%;
}
.product__bottom {
  position: relative;
  width: 211px;
}
@media screen and (max-width: 1547px) {
  .product__bottom {
    width: 13.6393018746vw;
  }
}
@media screen and (max-width: 768px) {
  .product__bottom {
    width: 53.8666666667vw;
    margin-left: 15.3333333333vw;
  }
}
.product__link {
  position: absolute;
  width: 79.6208530806%;
  top: -16.6126418152%;
  right: -44.0758293839%;
}
@media screen and (max-width: 768px) {
  .product__link {
    width: 42.4vw;
    top: -26.9333333333vw;
    right: -22.4vw;
  }
}
.product__image--ichiban {
  margin-top: 44.3037974684%;
}
@media screen and (max-width: 768px) {
  .product__image--ichiban {
    margin-top: 16vw;
  }
}
.product__image--zero {
  margin-top: 43.3544303797%;
  width: 131.2796208531%;
}
@media screen and (max-width: 768px) {
  .product__image--zero {
    width: 74.1333333333vw;
    margin-top: 10.4vw;
  }
}
.product__image--white {
  margin-top: 41.1392405063%;
}
@media screen and (max-width: 768px) {
  .product__image--white {
    margin-top: 10.4vw;
  }
}
.product__caution {
  width: 61.4091790562%;
  margin-left: 18.2288299935%;
  margin-top: -13.0575307046%;
}
@media screen and (max-width: 768px) {
  .product__caution {
    width: 88.5333333333vw;
    margin-left: 5.3333333333vw;
    margin-top: -7.2vw;
  }
}
.product__official {
  width: 62.0555914674%;
  margin-inline: auto;
  margin-top: 4.2016806723%;
}
@media screen and (max-width: 768px) {
  .product__official {
    width: 93.6vw;
    margin-top: 16vw;
  }
}
.product__official-image {
  width: 100%;
}
.product__official-caution {
  width: 92.7083333333%;
  margin-top: 1.25%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .product__official-caution {
    width: 96vw;
    margin-top: 3.3333333333vw;
    margin-left: -1.2vw;
  }
}

/* product:end */
/* store:start */
.store {
  background-color: #ebebeb;
}
.store__container {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 1547px) {
  .store__container {
    padding-top: 3.8784744667vw;
    padding-bottom: 3.8784744667vw;
  }
}
@media screen and (max-width: 768px) {
  .store__container {
    padding-top: 16vw;
    padding-bottom: 16vw;
  }
}
.store__title {
  width: 62.0555914674%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .store__title {
    width: 93.6vw;
  }
}
.store__contents {
  width: 62.0555914674%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  margin-top: 3.2320620556%;
}
@media screen and (max-width: 768px) {
  .store__contents {
    width: 76vw;
    margin-top: 6.6666666667vw;
    flex-direction: column;
  }
}
.store__content {
  width: 29.5833333333%;
}
@media screen and (max-width: 768px) {
  .store__content {
    width: 100%;
  }
}
.store__content:not(:last-child) {
  margin-right: 5.625%;
}
@media screen and (max-width: 768px) {
  .store__content:not(:last-child) {
    margin-bottom: 4vw;
    margin-right: 0;
  }
}

/* store:end */
/* xxx:start */
.modal {
  /* 初期状態は非表示 */
  display: none;
  /* 常に最前面に表示 */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* モーダル自体がスクロールしないように */
  /* JavaScriptでモーダルが表示されたときに適用 */
}
.modal.is-active {
  display: block;
}
.modal {
  /* ====================================
    モーダルの背景
    ==================================== */
}
.modal__bg {
  background: rgba(0, 0, 0, 0.3);
  /* 半透明の黒 */
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* 背景クリックで閉じられることを示す */
}
.modal {
  /* ====================================
    モーダルの中身（動画コンテナと閉じるボタン）
    ==================================== */
}
.modal__content {
  /* 画面中央に配置 */
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -48%);
  /* サイズ設定 */
  width: auto;
  max-width: 1140px;
  max-height: 80dvh;
  /* 動画の最大幅の目安 */
  padding: 0;
}
@media screen and (max-width: 768px) {
  .modal__content {
    width: 94%;
  }
}
.modal__content img {
  max-height: 90dvh;
}
.modal {
  /* ====================================
    動画コンテナ（レスポンシブ対応のための親要素）
    ==================================== */
}
.modal__image-container {
  position: relative;
  /* 16:9のアスペクト比を維持するためのpadding (縦/横 = 9/16 = 56.25%) */
  overflow: hidden;
  background-color: black;
}
.modal {
  /* iframe（動画プレイヤー）のスタイル */
}
.modal__image-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal {
  /* ====================================
  閉じるボタン
  ==================================== */
}
.modal__close {
  position: absolute;
  top: -89px;
  /* 動画コンテナの上部に配置 */
  right: 89px;
  /* ボタンの見た目 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  transition: opacity 0.2s;
  font-size: 0;
}
.modal__close::before {
  position: absolute;
  display: block;
  content: "";
  width: 88px;
  height: 88px;
  background-image: url(/alcohol/beer/ichiban/gallery/images/index-btn-modal-close.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 1547px) {
  .modal__close::before {
    width: 5.6884292178vw;
    height: 5.6884292178vw;
  }
}
@media screen and (max-width: 768px) {
  .modal__close::before {
    width: 11.0666666667vw;
    height: 11.0666666667vw;
    background-image: url(/alcohol/beer/ichiban/gallery/images/sp/index-btn-modal-close.png);
  }
}
@media screen and (max-width: 1547px) {
  .modal__close {
    top: -5.753070459vw;
    right: 5.753070459vw;
  }
}
@media screen and (max-width: 768px) {
  .modal__close {
    top: -12.2666666667vw;
    right: 9.3333333333vw;
  }
}
.modal__close:hover {
  opacity: 0.8;
}
.modal__image {
  display: none;
}
.modal__image.is-show {
  display: block;
}

/* xxx:end */