/* ===== レイアウト ===== */
.column-layout {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0px;
}

/* メイン */
.column-main {
  flex: 1;
  min-width: 0;
}

/* サイドバー */
.column-sidebar {
  width: 300px;
  padding-top: 55px;
  padding-bottom: 72px;
}

/* ===== サイドバー装飾 ===== */
.sidebar-box {
  background: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
  position: sticky;
  top: 118px;
}

.sidebar-box h2 {
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

/* 記事一覧 */
.column-list {
  list-style: disc;
  padding: 0;
  margin: 0;
  padding-left: 18px;
  max-height: 600px; /* スクロール */
  overflow-y: auto;    /* スクロール */
}

.column-list li {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
  line-height: 1.6;
}

.column-list a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  display: block;
}

.column-list a:hover {
  text-decoration: underline;
}

/* 現在記事の強調 */
.column-list .current a {
  font-weight: bold;
  color: #0073e6;
}

/* タイトル */
.column-list .title {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

/* 日付 */
.column-list .date {
  display: block;
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* NEW */
.new-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: #fff;
  background: #e60023;
  padding: 2px 5px;
  border-radius: 3px;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .column-layout {
    flex-direction: column;
  }

  .column-sidebar {
    width: 90%;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sidebar-box {
    position: static;
  }

  .scroll-list {
    max-height: 350px;
    overflow-y: auto;
  }
}

/* New バッジにするため、表示は行わない
.column-list .is_newclo::before {
  content: 'New ';
  color: #ff0000;
  font-weight: 700;
}
*/

/*
=== 人気記事追加
*/
.sidebar-section {
  margin-bottom: 20px;
}

/* 人気記事は少し強調 */
.popular-list li a {
  font-weight: 600;
}

/* 一覧スクロール */
.scroll-list {
  max-height: 640px;
  overflow-y: auto;
}

/* サイドバー用タグリスト */
.sidebar-section .colum-TagList li {
  display: inline-block;
  padding: 0 0.5em;
  margin: 0 1.5em 0.5em 0;
}


/* 関連記事 */
.related-list {
  list-style: disc;
  padding-left: 20px;
}

.related-list li {
  margin-bottom: 10px;
}

/* 前後リンク */
#colum-detail .pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

#colum-detail .pager-prev,
#colum-detail .pager-next {
  width: 48%;
}

#colum-detail .pager a {
  display: block;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
}

#colum-detail .pager a:hover {
  background: #e9f2ff;
}

#colum-detail .pager span {
  font-size: 14px;
  color: #0073e6;
  font-weight: 600;
}

#colum-detail .pager-prev span:before {
  content: "\f060";
  font-family: "Font Awesome 5 Free";
  color: #0073e6;
}

#colum-detail .pager-next span:after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  color: #0073e6;
}


#colum-detail .pager p {
  margin: 5px 0 0;
  font-size: 14px;
}

/* 左エリア調整 */
.column-layout .product2023_whitemat {
  margin-left: 7%;
  width: 91%;
}

@media (max-width: 768px) {
  .column-layout .product2023_whitemat {
    margin-left: 0;
    width: 100%;
  }

}