/* =========================================================
note RSS カルーセル（Easy Site Setup）
PC：3件表示 / スマホ：2件表示
以前は子テーマ base.css にあったものをプラグインへ移設。
========================================================= */

.note-carousel{
  position: relative;
  width: 100%;
}

.note-track{
  overflow: hidden !important;
  width: 100%;
}

.note-card-grid{
  --note-gap: 18px;

  display: flex !important;
  gap: var(--note-gap) !important;
  overflow: visible !important;

  padding: 0 !important;
  margin: 0 !important;

  transform: translate3d(0,0,0);
  transition: transform .35s ease;
  will-change: transform;
}

/* PC：3件表示 */
.note-card{
  flex: 0 0 calc((100% - var(--note-gap) * 2) / 3) !important;
  max-width: calc((100% - var(--note-gap) * 2) / 3) !important;

  display: block !important;
  text-decoration: none !important;
  color: inherit !important;

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;

  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

/* スマホ：2件表示 */
@media (max-width: 600px){
  .note-card-grid{
    --note-gap: 12px;
  }

  .note-card{
    flex-basis: calc((100% - var(--note-gap)) / 2) !important;
    max-width: calc((100% - var(--note-gap)) / 2) !important;
  }
}

.note-card-thumb{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10;
  background-size: cover !important;
  background-position: center !important;
  background-color: #f2f5f5;
}

.note-card-thumb.is-noimg{
  background-image: linear-gradient(135deg, rgba(158,202,203,0.20), rgba(216,230,232,0.15));
}

.note-card-body{
  display: block;
  padding: 5px 10px 10px 12px;
}

.note-card-date{
  display: block;
  font-size: 12px;
  opacity: .65;
  margin-bottom: 1px;
}

.note-card-title{
  display: block;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.3;
}

.note-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.note-card:hover .note-card-title,
.note-card:hover .note-card-date{
  color: #666666 !important;
}

/* 少ない時は中央寄せ */
.note-carousel.is-few .note-card-grid{
  justify-content: center !important;
  transform: none !important;
}

.note-carousel.is-few .note-nav-btn,
.note-carousel.is-few .note-dots{
  display: none !important;
}

/* 矢印 */
.note-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  cursor: pointer;

  display: grid;
  place-items: center;
  padding: 0;
}

.note-nav-btn.is-prev{
  left: -10px;
}

.note-nav-btn.is-next{
  right: -10px;
}

.note-nav-btn svg{
  width: 16px;
  height: 16px;
  opacity: .75;
}

.note-nav-btn:disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ドット非表示 */
.note-carousel .note-dots{
  display: none !important;
}