@charset "UTF-8";

/* ==========================================================================
   ■ ポータル専用 サムネイル表示サイズ設定（XS / S / M / L / XL）
   ========================================================================== */

/* サムネイル画像枠の整列・配置設定 */
.link-group a:has(img) {
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

.link-group a img {
  width: auto !important;
  object-fit: contain !important;
  transition: height 0.2s ease;
}

/* XSサイズ（超小） */
body.view-xs .link-group a img { height: 36px !important; }
body.view-xs .link-group a:has(img) { font-size: 9px !important; }

/* Sサイズ（小） */
body.view-s .link-group a img { height: 70px !important; }
body.view-s .link-group a:has(img) { font-size: 11px !important; }

/* Mサイズ（中：標準） */
body.view-m .link-group a img { height: 110px !important; }
body.view-m .link-group a:has(img) { font-size: 12px !important; }

/* Lサイズ（大） */
body.view-l .link-group a img { height: 200px !important; }
body.view-l .link-group a:has(img) { font-size: 13px !important; }

/* XLサイズ（特大） */
body.view-xl .link-group a img { height: 540px !important; }
body.view-xl .link-group a:has(img) { font-size: 16px !important; }

/* ==========================================================================
   ■ 黒帯ボタン選択時ハイライト（アクティブ状態＝緑色点灯表示）
   ========================================================================== */
.size-controls .size-btn.active {
  background-color: #00cc66 !important;
  color: #ffffff !important;
  border-color: #88ffe0 !important;
  font-weight: bold !important;
  box-shadow: 0 0 6px rgba(0, 204, 102, 0.8) !important;
}