/* ボックス全体のスタイル */

.cl_pricebox{
    height: calc(50vw);
    overflow-y:scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cl_pricebox::-webkit-scrollbar {
  display: none;
}


@media (max-width: 1400px) and (min-width: 1025px) {
    
.cl_pricebox{
    overflow-y:scroll;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

}


@media (max-width: 1024px) and (min-width: 768px) {
  
.cl_pricebox{
    height: 80vh;
    overflow-x: hidden;
}

}


@media screen and (max-width:767px) {
    
.price_table_text{
    padding:0 40px;
}
   
   
.price_table2506 .price_table .elementor-shortcode{
  width:100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
} 

.price_table2506 .price_table .elementor-shortcode table{
  width:600px;
  min-width:600px;
  margin-left:40px;
}

  
.cl_pricebox{
    width:100%;
    height: 80vh;
    overflow-x: scroll;
}

}


/* コントローラーのスタイル */

.vertical-nav {
  background: #eeeee5;
  border-radius: 36px;
  padding: 13px 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nav-item {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  opacity: 1.0;
  position: relative;
}

/* 画像重ね順も明快に */
.nav-item img.default,
.nav-item img.active {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0; top: 0;
  transition: opacity 0.3s;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.nav-item img.active {
  z-index: 2;
  opacity: 0;
}

/* クラスで切り替え！ */
.nav-item.active img.default,
.nav-item.hovering img.default {
  opacity: 0 !important;
}
.nav-item.active img.active,
.nav-item.hovering img.active {
  opacity: 1 !important;
}

@media (max-width: 1399px) and (min-width: 768px) {
  .vertical-nav { width: 60px; gap: 7px; border-radius: 36px; }
  .nav-item { width: 41px; height: 41px; }
  .nav-item img { width: 41px; height: 41px; }
}
@media screen and (max-width: 768px) {
  .vertical-nav { width: 46px; gap: 6px; border-radius: 25px; padding: 5px 0; }
  .nav-item { width: 38px; height: 38px; }
  .nav-item img { width: 41px; height: 41px; }
}






/* Moreボタンスクロール */
.scroll-marquee.more-marquee {
  position: relative;
  width: 65px;
  height: 11px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.svg-more {
  position: absolute;
  left: 0;
  top: 0;
  width: 65px;
  height: 11px;
  transition: none;
}
.svg-more img {
  width: 65px;
  height: 11px;
  display: block;
}
.scroll-marquee.more-marquee.hovering .svg-more {
  animation: moreMarqueeLoop 2.8s linear infinite;
}
.scroll-marquee.more-marquee .svg-more:nth-child(2) {
  left: -65px;   /* 必ずwidthと同じ値 */
}
@keyframes moreMarqueeLoop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(65px); }
}


.slick-slide {
  transition: opacity 2.0s ease;
}
.slick-slide:not(.slick-active) {
  opacity: 0.7;
}

/* Body scroll lock 用のスタイル */
body.scroll-disabled {
  overflow: hidden;
}

/* 動的に調整する場合 */
body.scroll-disabled .sticky_middle.scroll-adjusted {
  padding-right: var(--adjusted-padding-right) !important;
}