@charset "utf-8";
/* CSS Document */
.slick--view--shop-list--block-1 .slick-slider .slick-track{
    display: flex !important;
    align-items: stretch;
}
.slick--view--shop-list--block-1 .slick-initialized .slick__slide{
    height: auto !important;
    display: flex !important;
}
.profile--view-mode--grid {
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  font-size: 12px;
  max-width:345px;
}
.shop-list.content-list .slick-initialized .slick__slide {

}
.shop-grid-list img{
  width:100%;
  height:auto;
  object-fit: cover;
  max-height: 165px;
  min-height: 165px;
}
.shop-grid-list .field--name-field-copex-pr-image{
  margin-bottom:10px;
}
.profile--view-mode--grid{
  text-align: center;
}
.profile--view-mode--grid .field--name-field-cop-name{
  font-size:16px;
  font-weight: 600;
  margin-bottom:10px;
  /* font-family: "CormorantSC", 'NotoSansJP', serif; */
}
.profile--view-mode--grid .field--name-field-copex-name-kana {
  margin-bottom:10px;
}
.profile--view-mode--grid{
  background:var(--accent);
  margin-right:10px;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  margin-bottom:15px;
}
.profile--view-mode--grid .shop-grid-content{
  padding:10px;
  text-align: left;
  position: relative;
}
.profile--view-mode--grid .shop-grid-content .field--name-field-cop-name{
  font-size:24px;
  color:var(--main-color-3);
  margin-bottom:0px;
}
.profile--view-mode--grid .shop-grid-content .field--name-field-copex-name-kana{
  font-size:12px;
  color:var(--main-color-3);
}
.profile--view-mode--grid .shop-grid-content .catch{
  font-size:14px;
  font-weight: 600;
  color:var(--first-color);
  margin-bottom:10px;
  line-height: 200%;
}
.profile--view-mode--grid .shop-grid-content .field--name-field-copex-industry{
  font-size:15px;
  color:var(--first-color);
}
.views-field-field-views-raw-sql-wv{
  font-family: "Inria Sans";
  font-weight: 400;
  position: absolute;
  font-size: 96px;
  color: #fff;
  bottom: 200px;
  right: 40px;
}
.nfrd-list {
  display: flex;
  gap:10px;
  flex-wrap: wrap;
}
.nfrd-list li .nfrd-trigger{
  height:36px;
  line-height: 36px;
  text-align: center;
  padding:0px 10px;
  border-radius: 21px;
  font-size:12px;
  color:#333333;
  background:#fff;
  border:1px solid #C5C5C5;
}
.nfrd-list li .nfrd-trigger.is-active{
  background:#88C7CC;
  border:1px solid #27686D;
  color:#fff;
}


.view-ranking-data 
.view-ranking-data .profile--view-mode--grid,
.slick--view.slick--view--ranking-data .profile--view-mode--grid{
    max-width:100%;
}
.view-ranking-data .profile--view-mode--grid img,
.slick--view.slick--view--ranking-data .profile--view-mode--grid img{
    width:100%;
}

/* ランキングを横スクロールに：slickレイアウトだけ */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data {
  --_gap: 16px;
  --_carousel-edge-buffer: 20px;
  --_viewport-padding-block: 4px;
}

/* 横スクロール本体：slickレイアウトだけ */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data .view-content {
  display: flex;
  gap: var(--_gap);
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;

  scroll-snap-type: none;
  scroll-padding-inline: var(--_carousel-edge-buffer);

  scrollbar-width: none;

  padding-block: var(--_viewport-padding-block);
  padding-inline: var(--_carousel-edge-buffer);

  margin-block: calc(-1 * var(--_viewport-padding-block));
  margin-inline: calc(-1 * var(--_carousel-edge-buffer));
}

/* Chrome / Safari のスクロールバー非表示 */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data .view-content::-webkit-scrollbar {
  display: none;
}

/* 各カード：slickレイアウトだけ */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data .views-row {
  flex: 0 0 380px;
  scroll-snap-align: start;
  position: relative;
}


/* カード全体 */
.view-ranking-data .profile--view-mode--grid,
.view-ranking-data .to-shop-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 画像エリア */
.view-ranking-data .shop-grid-image {
  width: 100%;
  aspect-ratio: 345 / 431;
  overflow: hidden;
  background: #f2f2f2;
  position: relative;
}

/* 画像フィールド本体 */
.view-ranking-data .shop-grid-image .views-field-field-copex-st-pr-image,
.view-ranking-data .shop-grid-image .field--name-field-shp-st-pr-image {
  width: 100%;
  height: 100%;
}

/* 画像フィールド内にaタグが残っている場合の暫定対応 */
.view-ranking-data .shop-grid-image .field--name-field-shp-st-pr-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* 画像 */
.view-ranking-data .shop-grid-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像なしの場合だけデフォルト画像 */
.view-ranking-data .shop-grid-image .views-field-field-copex-st-pr-image:empty {
  width: 100%;
  height: 100%;
  background-image: url("/themes/custom/onerise_front_shop/img/rank/rank-def.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* テキストエリア */
.view-ranking-data .shop-grid-content {
  flex: 1;
}

/* キャッチコピー 3行固定 */
.view-ranking-data .catch .field--name-field-shp-st-pr-catch {
  line-height: 1.6;
  min-height: calc(1.6em * 3);
  max-height: calc(1.6em * 3);
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .view-ranking-data {
    --_gap: 12px;
    --_carousel-edge-buffer: 16px;
  }

  .view-ranking-data .views-row {
    flex-basis: 80vw;
  }
}

/* スクロール無しレイアウトだけ */
.nfrd-wrap.content-list.nfrd-layout-list .view-ranking-data .view-content {
  display: block;
  overflow: visible;
  padding: 0;
  margin: 0;
}

/* スクロール無しの時だけ views-row を横幅いっぱいに */
.nfrd-wrap.content-list.nfrd-layout-list .view-ranking-data .views-row {
  width: 100%;
  max-width: 100%;
  flex: none;
  position: relative;
  scroll-snap-align: none;
}
.nfrd-wrap.content-list.nfrd-layout-list .view-ranking-data .profile--view-mode--grid,
.nfrd-wrap.content-list.nfrd-layout-list .view-ranking-data .to-shop-link {
  width: 100%;
  max-width: 100%;
}

/* slickレイアウトのランキングだけボタン配置用 */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data {
  position: relative;
}

/* 横スクロールをなめらかに */
.nfrd-wrap.content-list.nfrd-layout-slick .view-ranking-data .view-content {
  scroll-behavior: smooth;
}

/* PC用スクロールボタン */
.ranking-scroll-btn {
  display: none;
}

@media screen and (min-width: 768px) {
  .ranking-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    z-index: 10;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;
    /*
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    */
    
  
    font-size: 0px;
    line-height: 1;
    cursor: pointer;

    transform: translateY(-50%);
  }

  .ranking-scroll-btn.is-prev {
    left: 8px;
    background: url(../img/icon/arrow-left-1-icon.svg) no-repeat top 7px center;
    background-size: 32px;
  }

  .ranking-scroll-btn.is-next {
    right: 8px;
    background: url(../img/icon/arrow-right-1-icon.svg) no-repeat top 7px center;
    background-size: 32px;
  }

  .ranking-scroll-btn:disabled {
    opacity: 0.25;
    cursor: default;
  }
}