/* ===== Minimal sidebar styles ===== */
:root {
  --sidebar-width: 305px;
  --widget-bg: #fff;
  --widget-border: #e9e9e9;
  --widget-title-bg: #f7f7f7;
  --text: #222;
  --muted: #666;

  /* layout */
  --col-gap: 24px;
}

#sidebar {
  width: var(--sidebar-width);
  max-width: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: var(--text);
}

#sidebar .sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Widgets */
.sidebar_widget {
  background: var(--widget-bg);
  border: 1px solid var(--widget-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Search */
.sidebar_widget_search .searchform {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.sidebar_widget_search .s {
  flex: 1 1 auto;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--widget-border);
  border-radius: 8px;
  font-size: 14px;
}

.sidebar_widget_search .searchsubmit {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--widget-border);
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
}

.sidebar_widget_search .searchform{
  height: 60px;                 /* ← 高さだけここで決める */
  width: 95%;
}

.sidebar_widget_search .s{
  height: 60px;                 /* 入力欄の高さをフォームに合わせる */
  line-height: 60px;            /* Windowsでの1pxズレ対策 */
  vertical-align: middle;       /* 既定の bottom を打ち消す */
  box-sizing: border-box;       /* はみ出し防止（幅80%指定のままでも安全） */
}

/* 送信ボタン（absolute配置を維持） */
/* style.css に top:0; bottom:0; right:0; width:20% がある前提。 */
.sidebar_widget_search input.searchsubmit{
  /* 下記2行は“見た目の中央”を安定させるための明示だけ（heightは伸長でもOK） */
  height: 60px;                 /* 伸長指定でも top+bottom で親高にフィット */
  line-height: 60px;            /* テキストの縦中央を保証 */
  box-sizing: border-box;       /* 枠・padding でのズレを防止 */
}

/* === Search: 見た目仕上げ（右ピンク・白字／高さ60px） === */
.sidebar_widget_search .searchform{ height: 60px; }

/* 入力欄：右側の枠線を消して“つながって見える”ようにする */
.sidebar_widget_search .s{
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  border-right: 0;                     /* ←ここがポイント（二重線防止） */
  border-radius: 8px 0 0 8px;          /* 左だけ角丸 */
  vertical-align: middle;
}

/* 送信ボタン（<input type="submit" class="searchsubmit">想定） */
.sidebar_widget_search input.searchsubmit{
  position: absolute; right: 0; top: 11px; bottom: 0;  /* 既存の absolute を踏襲 */
  width: 80px;                       /* 必要なら調整（80〜96px目安） */
  height: 37px;
  line-height: 60px;                 /* テキスト縦中央 */
  box-sizing: border-box;

  /* ピンクのタブ風 */
  background: #ff66b3;               /* お好みで #ff5cab / #ff6fb1 等 */
  color: #fff;
  border: 1px solid #ff66b3;
  border-left: 0;                     /* 入力の右枠と“つながる” */
  border-radius: 0 8px 8px 0;         /* 右だけ角丸 */
  font: inherit; font-weight: 700;
  text-align: center;
  padding: 0 12px;

  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}

.sidebar_widget_search input.searchsubmit:hover{ filter: brightness(1.03); }
.sidebar_widget_search input.searchsubmit:active{ transform: translateY(1px); }

/* Menu */
.sidebar_widgettitle {
  font-weight: bold;
  padding: 10px 12px;
  border-bottom: 1px solid var(--widget-border);
  background: var(--widget-title-bg);
  margin-bottom: 10px;
  background: #ff78d2;
  color: #fff
}

.sidebar_widget_nav_menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar_widget_nav_menu .menu .menu-item a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px dashed var(--widget-border);
}

.sidebar_widget_nav_menu .menu .menu-item:last-child a {
  border-bottom: none;
}

.sidebar_widget_nav_menu .menu .menu-item a:hover {
  background: #fafafa;
}

/* ===== Responsive (sidebar width full on small) ===== */
@media (max-width: 1024px) {
  #sidebar { width: 100%; }
}

/* ===== Global 2-column layout using #main-wrap =====
   ※ 全ページで #main-wrap をレイアウトの親にする
   ※ テンプレでは #main-wrap の直下に #main(または #single-main/#page-main) と #sidebar を兄弟で置く
*/
@media (min-width: 1025px){
  /* 親をフレックス化 */
  #main-wrap{
    display: flex;
    align-items: flex-start;
    column-gap: var(--col-gap);
  }

  /* 本文カラム：#main / #single-main / #page-main どれでもOK */
  #main-wrap > #main,
  #main-wrap > #single-main,
  #main-wrap > #page-main{
    /* 念のため古い指定を無効化（保険） */
    float: none !important;
    width: auto !important;

    flex: 1 1 auto;
    min-width: 0;
    order: 1;
  }

  /* 右サイドバー */
  #main-wrap > #sidebar{
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    order: 2;
  }

  /* JSが挿れる空白ブロックを無効化 */
  #main-wrap .fit-sidebar-blank{
    display: none !important;
    height: 0 !important;
  }
  /* JSのfixed指定・top補正を打ち消して sticky に統一 */
  #fix_sidebar{
    position: sticky !important;
    top: 16px !important;   /* 好きな余白に調整OK */
    bottom: auto !important;
  }
  /* 念のため */
  #fix_sidebar.fit-sidebar,
  #fix_sidebar.fit-sidebar-fixed{
    position: sticky !important;
  }
}

/* 追従（固定ヘッダーがあるなら top を調整） */
#fix_sidebar{ position: sticky; top: 16px; }

/* 1529px以下は1カラム：本文→サイドバーの順で縦積み */
@media (max-width: 1529px){
  #main-wrap{
    /* 2カラム用のflexをやめて全幅に */
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  /* 本文は全幅 */
  #main-wrap > #main,
  #main-wrap > #single-main,
  #main-wrap > #page-main{
    float: none;
    width: 100%;
    flex: none;
    min-width: 0;
    order: 1; /* 念のため本文が先 */
  }

  /* サイドバーは本文の下に配置・全幅 */
  #main-wrap > #sidebar{
    float: none;
    width: 100%;
    flex: none;
    order: 2;
    margin-top: 24px;       /* 本文との余白。好みで調整OK */
  }

  /* 追従は不要なのでstickyを無効化（好みで） */
  #fix_sidebar{
    position: static;
    top: auto;
    bottom: auto;
  }

  /* 古いJSのプレースホルダが残る場合の保険 */
  #main-wrap .fit-sidebar-blank{
    display: none;
    height: 0;
  }
}

/* ── 人気ランキング（サイドバー） ───────────────────── */
.sidebar_widget_sidebar_ranking .sidebar-ranking-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-ranking-item{
  display: block;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  text-decoration: none;
}

.sidebar-ranking-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* サムネ比率。必要なら 3/2 などに調整可 */
  overflow: hidden;
}

.sidebar-ranking-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-badge{
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-block;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  background: #383838; /* デフォルト色（4位以降） */
}
/* 1〜3位だけ色を変える */
.rank-1{ background: #fa0; } /* gold-ish */
.rank-2{ background: #bbb; } /* silver-ish */
.rank-3{ background: #930; } /* bronze-ish */

.premium-badge.-small{
  position: absolute;
  right: 8px;
  top: 8px;
  background: #111;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  display: inline-block;
}

.sidebar-ranking-title{
  padding: 10px 12px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #111;
}

/* 1530px以下は既に1カラム運用のためそのままでOK。必要なら余白だけ微調整 */
@media (max-width:1530px){
  .sidebar-ranking-item{ border-radius: 10px; }
}

@media (max-width: 1024px){
  .fit-sidebar-blank{
    display: none !important;
    height: 0 !important;
    float: none !important;
  }
  /* 固定解除（インラインがあっても潰す） */
  #fix_sidebar{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
  }
  /* 念のためサイドバー本体を100%に */
  #sidebar{
    float: none !important;
    width: 100% !important;
  }
}