/* --- Single Sakurei UI --- */
.rcs-swk--single .rcs-swk-title{ font-size:1.25rem; font-weight:700; margin:0 0 .25rem }
.rcs-swk--single .rcs-swk-counters{ display:flex; gap:14px; align-items:center; color:#666; font-size:.9rem; margin:0 0 12px }
.rcs-swk--single .rcs-swk-counters .like{ color:#e25555 }

/* 画像：メイン1 + サムネ縦列（正方形）*/
.rcs-swk--single { --thumb-size: 150px; }
.rcs-swk--single .rcs-swk-visual{ display:grid; grid-template-columns:1fr 150px; gap:16px; align-items:start }
.rcs-swk--single .rcs-swk-main-img{ width:100%; aspect-ratio:1/1; object-fit: contain; border-radius:8px; background:#f4f4f4 }
.rcs-swk--single .rcs-swk-visual__thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rcs-swk--single .rcs-swk-thumb{
  /* ← width:100% をやめ、固定サイズにする */
  flex: 0 0 var(--thumb-size);
  width: var(--thumb-size);
  height: var(--thumb-size);        /* 常に正方形 */
  border:0;
  padding:0;
  cursor:pointer;
  background:transparent;
  border-radius:8px;
  overflow:hidden;
  position: relative;               /* ズーム用aを全面に */
}
.rcs-swk--single .rcs-swk-thumb img{
  width:100%;
  height:100%;
  object-fit: contain;              /* 画像の比率保持（余白OKならcontain）*/
  display:block;
}
.rcs-swk--single .rcs-swk-thumb .rcs-swk-zoom{
  position:absolute;
  inset:0;
}

/* 投稿者行 */
.rcs-swk--single .rcs-swk-author{ display:flex; align-items:center; gap:10px; margin:16px 0 12px;position: relative;}
.rcs-swk--single .rcs-swk-avatar{ width:40px; height:40px; border-radius:50%; object-fit: contain; }
@media (max-width:800px){
  .rcs-swk--single .rcs-swk-avatar{ width:60px; height:60px;}
}
.rcs-swk--single .rcs-swk-author-meta{ line-height:1.25 }
.rcs-swk--single .rcs-swk-author-meta .name{ font-weight:600 }
.rcs-swk--single .rcs-swk-like{ margin-left:auto; border:1px solid #eee; background:#fff; padding:4px 10px; border-radius:999px; cursor:pointer;position:relative !important;top: 0 !important; right: auto;}
.sakurei_img_box{position: absolute;bottom: 15px;right: 15px;}
.f_bot{position: relative;top: 0;right: 0;}

/* 解説・本文 */
.rcs-swk--single .rcs-swk-excerpt{ margin:12px 0; font-size:.95rem; line-height:1.7 }
.rcs-swk--single .rcs-swk-content{ margin:18px 0 }
.rcs-swk--single .rcs-swk-related{ margin:12px 0; color:#555 }

/* ライトボックス */
.rcs-swk-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:9999 }
.rcs-swk-lightbox.is-open{ display:flex }
.rcs-swk-lightbox img{ max-width:min(90vw, 1200px); max-height:90vh; border-radius:8px }

/* SPは viewport=800 前提で1カラムに切り替え */
@media (max-width:800px){
  .rcs-swk--single .rcs-swk-visual{ grid-template-columns:1fr }
  .rcs-swk--single .rcs-swk-visual__thumbs{
    flex-direction:row;
    flex-wrap:wrap;                 /* 折り返しても同サイズ維持 */
  }
  .rcs-swk--single .rcs-swk-thumb{
    flex: 0 0 var(--thumb-size);    /* 幅を固定して均一化 */
  }  .rcs-swk--single .rcs-swk-title{ font-size:1.5rem }
  .rcs-swk--single .rcs-swk-counters{ font-size:.8rem }
}

/* center 70% on PC */
@media (min-width:801px){ .rcs-swk.rcs-swk--single{ max-width:70%; margin:0 auto; } }