﻿@charset "UTF-8";

/* ----ページ---- */

.block-page-caption,
.block-page-freespace--top,
.block-page-freespace--bottom,
.block-page-block--contents {
  word-break: break-all;
}

.block-page-block--frame {
  margin-bottom: 40px;
}

.block-page-block--contents-goodslist {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 40px;
}
.block-page-block--contents-goodslist dl {
  display: block;
  width: calc((100% - (10px * 3)) / 4);
}

.block-page-block--goods-image figure {
  width: 100%;
  aspect-ratio: 187/241;
  overflow: hidden;
}

.block-page-block--goods-image figure img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  transition: var(--hover-transition-goodsListImage);
}

.block-page-block--contents-goodslist dl:has(a:hover) .block-page-block--goods-image img {
  transform: scale(1.09);
}

.block-page-block--goods-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  margin-top: 8px;
}

.block-page-block--goods-name a {
  transition: var(--hover-transition-goodsListText);
}

.block-page-block--contents-goodslist dl:has(a:hover) .block-page-block--goods-name a {
  color: var(--blue3);
  text-decoration: none;
}

.block-page-block--goods-comment {
  font-size: 12px;
  margin-top: 5px;
}

.block-page-block--contents-body-img-slider-1column {
  display: inline-block;
  vertical-align: top;
  width: 500px;
}

.block-page-block--contents-body-imgtext-slider-1column {
  display: inline-block;
  vertical-align: top;
  width: 500px;
}

.block-page-block--goods-image .img-center {
  position: relative;
}

/* ---- Swiper表示 ---- */
.block-page-block--contents-swiper {
  margin: 20px 0 60px 0;
  position: relative;
}

.block-page-block--contents-swiper .swiper-pageblock {
  overflow: hidden;
}

.block-page-block--contents-swiper .swiper-pageblock .swiper-wrapper {
  z-index: 0;
}

.block-page-block--contents-swiper .swiper-button-disabled {
  display: none;
}

.block-page-block--contents-swiper .swiper-page-prev {
  position: absolute;
  cursor: pointer;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  left: 15px;
}

.block-page-block--contents-swiper .swiper-page-next {
  position: absolute;
  cursor: pointer;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  right: 15px;
}

.block-page-block--contents-swiper .swiper-page-prev::before,
.block-page-block--contents-swiper .swiper-page-next::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  content: "";
}

.block-page-block--contents-swiper .swiper-page-prev::before {
  background-image: url(../../img/usr/common/ico_slider_arrow_left.png);
}

.block-page-block--contents-swiper .swiper-page-next::before {
  background-image: url(../../img/usr/common/ico_slider_arrow_right.png);
}

.block-page-block--contents-swiper .swiper-page-prev::after,
.block-page-block--contents-swiper .swiper-page-next::after {
    display: none;
  }

.block-page-block--contents-swiper .swiper-pagination {
  bottom: -30px !important;
}

.block-page-block--contents-swiper .swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,10px)) !important;
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px)) !important;
}

.block-page-block--contents-swiper .swiper-pagination-bullet-active {
  --swiper-theme-color: #666 !important;
}

/* SNS Links */
.block-page-links {
  margin-bottom: 10px;
}
.block-page-links a {
  text-decoration: underline;
}

/* 画像 + 本文 */
.block-page-block--contents-body-imgtext-1column-text {
  margin-top: 10px;
}
/* スライダー画像 + 本文 */
.block-page-block--contents-body-imgtext-slider-1column-text {
  margin-top: 10px;
}