@charset "UTF-8";
@keyframes loader-pulse {
  0%, 100% {
    transform: scale(0.7);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
/* ================================================
  visumo_共通
=================================================*/
/* ---------------- 見出し ---------------- */
.visumo {
  position: relative;
  margin-top: 40px;
}
.visumo__heading {
  display: flex;
  align-items: center;
  margin-bottom: 15px !important;
}
@media screen and (max-width: 767px) {
  .visumo__heading {
    gap: 5px;
  }
}
@media screen and (min-width: 768px) {
  .visumo__heading {
    gap: 8px;
  }
}
.visumo__heading-icon {
  width: 0.8em;
  margin-top: 3px;
}
.visumo__heading-txt {
  font-family: "Zen Kaku Gothic New" !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}
@media screen and (max-width: 767px) {
  .visumo__heading-txt {
    font-size: 1.125rem !important;
  }
}
@media screen and (min-width: 768px) {
  .visumo__heading-txt {
    font-size: clamp(20px, 2.5vw, 24px) !important;
  }
}
.visumo__heading-more {
  position: absolute;
  top: 0.5em;
}
@media screen and (max-width: 767px) {
  .visumo__heading-more {
    right: 5.5vw;
  }
}
@media screen and (min-width: 768px) {
  .visumo__heading-more {
    right: 0vw;
  }
}
.visumo__list h2 {
  display: none;
}
.visumo__product {
  margin-top: 40px;
}

/* ---------------- スライダー ---------------- */
/* スライダー同士の間隔 ＋ 矢印ボタン差し替え（PC）＋ 左端余白（SP） */
.hacobune-app-container {
  width: 100% !important;
  padding: 0 !important;
}
@media screen and (min-width: 768px) {
  .hacobune-app-container {
    /* はみ出しを許可（矢印を枠外に出すため） */
  }
  .hacobune-app-container, .hacobune-app-container .hacobune-slider-container {
    overflow: visible !important;
  }
  .hacobune-app-container {
    /* 矢印ボタン本体 */
  }
  .hacobune-app-container .hacobune-slider-prev,
  .hacobune-app-container .hacobune-slider-next {
    width: 50px;
    height: 50px;
    inset-block-start: calc(50% + var(--nav-offset, 0px));
    background: #2e2e2e;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  .hacobune-app-container .hacobune-slider-prev::after,
  .hacobune-app-container .hacobune-slider-next::after {
    content: "";
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 13px;
  }
  .hacobune-app-container .hacobune-slider-prev:hover,
  .hacobune-app-container .hacobune-slider-next:hover {
    opacity: 0.7;
  }
  .hacobune-app-container .hacobune-slider-prev {
    left: -20px !important;
  }
  .hacobune-app-container .hacobune-slider-next {
    right: -20px !important;
  }
  .hacobune-app-container {
    /* デフォルトのアイコンボタンを非表示 */
  }
  .hacobune-app-container .hacobune-icon-button,
  .hacobune-app-container .hacobune-icon-button::before {
    display: none !important;
  }
  .hacobune-app-container {
    /* 矢印アイコン */
  }
  .hacobune-app-container .hacobune-slider-next::after {
    background-image: url("https://devirockstore.net/s/assets/image/common/arrow/white.svg");
  }
  .hacobune-app-container .hacobune-slider-prev::after {
    background-image: url("https://devirockstore.net/s/assets/image/common/arrow/white.svg");
    transform: rotate(180deg) !important;
  }
}

.hacobune-card-slider-list-item {
  padding: 0 !important;
  margin-right: 8px !important;
}

.hacobune-slider-swiper-container {
  margin: 0 !important;
}

.hacobune-card-slider-list-item-figure-thumbnail {
  --aspect-ratio: 4 / 5;
  --object-fit: contain;
  height: auto;
  width: 100%;
}

/* スライダーテンプレートの表示枚数（PC／SPでセレクタが異なる） */
@media screen and (min-width: 768px) {
  .hacobune-gallery .hacobune-slider {
    /* PC：4枚表示 */
    --slider_break_points_xs_width: 0 !important;
    --slider_break_points_xs_perview: 4 !important;
    --slider_break_points_sm_width: 600 !important;
    --slider_break_points_sm_perview: 4 !important;
    --slider_break_points_md_width: 960 !important;
    --slider_break_points_md_perview: 4 !important;
    --slider_break_points_lg_width: 1264 !important;
    --slider_break_points_lg_perview: 4 !important;
  }
}

@media screen and (max-width: 767px) {
  .hacobune-containers-base.hacobune-containers-card-slider .hacobune-slider {
    /* SP：2.6枚表示 */
    --slider_break_points_xs_width: 0 !important;
    --slider_break_points_xs_perview: 2.6 !important;
    --slider_break_points_sm_width: 600 !important;
    --slider_break_points_sm_perview: 2.6 !important;
    --slider_break_points_md_width: 960 !important;
    --slider_break_points_md_perview: 2.6 !important;
    --slider_break_points_lg_width: 1264 !important;
    --slider_break_points_lg_perview: 2.6 !important;
  }
}

/* SP：矢印非表示 */
@media screen and (max-width: 767px) {
  .hacobune-slider-next,
  .hacobune-slider-prev {
    display: none !important;
  }
}

/* ---------------- 詳細モーダル ---------------- */
/* サムネイルアクティブ時の枠線 */
.hacobune-carousel-item-slide-active {
  border: 2px solid #a0a0a0 !important;
}

/* 商品情報 */
.hacobune-insta-item-text-caption {
  font-weight: normal !important;
  font-size: 10px !important;
}

.related-product-item-price {
  margin: 5px !important;
  font-weight: 700;
}

/* SP：余白調整 */
@media screen and (max-width: 767px) {
  .hacobune-dialog-wrapper {
    padding: 50px 5.5vw 20px !important;
  }
}

/* SP：サムネイルカルーセルの矢印非表示 */
@media screen and (max-width: 767px) {
  .hacobune-slider-carousel-prev,
  .hacobune-slider-carousel-next {
    display: none !important;
  }
}

/* SP：閉じるボタンの配置場所 */
@media screen and (max-width: 767px) {
  .hacobune-dialog-close-button-container {
    top: 5px !important;
    right: calc(5.5vw - 5px) !important;
  }
}

@media screen and (min-width: 768px) {
  .hacobune-insta-item-side {
    display: block !important;
  }
}

/* ================================================
  固有ページ：トップページ
=================================================*/
@media screen and (max-width: 767px) {
  .ig .hacobune-app-container .hacobune-swiper-wrapper {
    /* 左端の余白 */
    margin-left: 5.5vw !important;
  }
}

/* ================================================
  固有ページ：投稿一覧
=================================================*/
.hacobune-mix-search {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .hacobune-mix-list {
    margin-top: 30px !important;
  }
}
@media screen and (max-width: 767px) {
  .hacobune-mix-list {
    margin-top: 20px !important;
  }
}

.hacobune-grid-row {
  display: grid !important;
  gap: 2px !important;
}
@media screen and (min-width: 768px) {
  .hacobune-grid-row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media screen and (max-width: 767px) {
  .hacobune-grid-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.hacobune-grid-col {
  max-width: 100% !important;
}

.hacobune-mix-list-item {
  padding: 0 !important;
}

.hacobune-mix-list-item-caption {
  margin-top: 0 !important;
}

/* 動画を囲む大枠のアスペクト比を4:5に固定 */
.hacobune-mix-list-item-figure {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  overflow: hidden !important;
  /* Video.jsプレイヤーコンテナの自動リサイズを無効化して枠にフィット */
}
.hacobune-mix-list-item-figure .hacobune-video-js {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* JSが付与するアスペクト比維持の余白を強制キャンセル */
}

/* video・ポスター画像（サムネイル）をトリミングして枠いっぱいに広げる
   （.hacobune-mix-list-item-figure-thumbnail は figure の子孫ではなく
   独立クラスのため、宣言を共有する目的でここではネストせず一括指定） */
.hacobune-mix-list-item-figure .hacobune-vjs-tech,
.hacobune-mix-list-item-figure .hacobune-vjs-poster,
.hacobune-mix-list-item-figure-thumbnail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 歪ませずにトリミング */
}

/* ================================================
  固有ページ：商品一覧
=================================================*/
.visumo__product .hacobune-mix-list-item {
  margin-right: 8px !important;
}
.visumo__product .hacobune-slider-container {
  display: block;
  position: relative;
}
.visumo__product .hacobune-slider-prev,
.visumo__product .hacobune-slider-next {
  position: absolute;
  margin: 0 !important;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .visumo__product .hacobune-slider {
    /* PC：4枚表示 */
    --slider_break_points_xs_width: 0 !important;
    --slider_break_points_xs_perview: 4 !important;
    --slider_break_points_sm_width: 600 !important;
    --slider_break_points_sm_perview: 4 !important;
    --slider_break_points_md_width: 960 !important;
    --slider_break_points_md_perview: 4 !important;
    --slider_break_points_lg_width: 1264 !important;
    --slider_break_points_lg_perview: 4 !important;
  }
}
@media screen and (max-width: 767px) {
  .visumo__product .hacobune-slider {
    /* SP：2.6枚表示 */
    --slider_break_points_xs_width: 0 !important;
    --slider_break_points_xs_perview: 2.6 !important;
    --slider_break_points_sm_width: 600 !important;
    --slider_break_points_sm_perview: 2.6 !important;
    --slider_break_points_md_width: 960 !important;
    --slider_break_points_md_perview: 2.6 !important;
    --slider_break_points_lg_width: 1264 !important;
    --slider_break_points_lg_perview: 2.6 !important;
  }
}

.c-heading--center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-heading--center::before {
  content: "";
  display: block;
  background: url(/s/assets/image/common/sns/ig_bk.svg) no-repeat center center;
}
@media screen and (max-width: 767px) {
  .c-heading--center::before {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }
}
@media screen and (min-width: 768px) {
  .c-heading--center::before {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }
}