/* Theme */

/* =========================================================
   ブログ一覧（2カラム: main + sidebar）
   - 768px以上: 2カラム
   - 767px以下: 1カラム（スマホ）
   ========================================================= */

.contents{
  padding: 30px 0;
}

/* 2カラム（main + sidebar） */
@media screen and (min-width: 768px){
  .contents .top-container.container{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 40px !important;
    align-items: start !important;
  }

  .contents .top-container.container > main.main{
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .contents .top-container.container > aside.side{
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* 1カラム（スマホ） */
@media screen and (max-width: 767px){
  .contents .top-container.container{
    display: block !important;
  }
}

/* =========================================================
   記事カード（一覧）
   ========================================================= */

.contents .main article{
  border: 1px solid #dcdcdc !important;
  padding: 24px !important;
  margin: 0 0 28px 0 !important;
  background: #fff !important;
}

.contents .post-card{
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

@media screen and (max-width: 860px){
  .contents .post-card{
    grid-template-columns: 1fr !important;
  }
}

.contents .post-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.contents .post-date{
  display: inline-block;
  background: #b3282d;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 0 10px 0;
}

.contents .post-title{
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 12px 0;
}

.contents .post-title a{
  color: inherit;
  text-decoration: none;
}

.contents .post-title a:hover{
  text-decoration: underline;
}

.contents .post-excerpt{
  color: #333;
  line-height: 1.9;
  margin: 0 0 14px 0;
}

.contents .readmore{
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.contents .readmore:hover{
  opacity: 0.85;
}

/* =========================================================
   サイドバー（ウィジェット）
   ========================================================= */

.side .widget{
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

.side .widget-title{
  font-size: 15px;
  margin: 0 0 10px;
}

/* =========================================================
   デバッグバッジ（必要なら使用）
   ========================================================= */

.theme-debug-badge{
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 99999;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0.85;
}
/* =========================================================
   デザイン寄せ（参考スクショに近づける）
   - サイドバー見出し: 黒帯 + 下向き三角
   - サイドバー記事リスト: 画像+テキスト横並び / 点線区切り / ">> more" 右寄せ
   - メイン記事カード: 余白/見出し/区切り線/続きを読むボタン位置
   ========================================================= */

/* ---------- Sidebar title: 黒帯 + 三角 ---------- */
.side .widget-title{
  background: #111;
  color: #fff;
  text-align: center;
  font-weight: 800;
  padding: 9px 12px;
  margin: 0 0 14px 0;
  position: relative;
  letter-spacing: 0.04em;
}

.side .widget-title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
}

/* widget内の余白を“見出しの黒帯”基準に調整 */
.side .widget{
  padding: 0;
  border: 0;
  background: transparent;
}

/* widget本文エリア（見出し下の白い箱） */
.side .widget > *:not(.widget-title){
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 12px 14px;
}

/* ---------- Sidebar list style (汎用) ---------- */
.side .widget ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.side .widget ul li{
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px dotted #999;
}

/* 最後は区切り線なし */
.side .widget ul li:last-child{
  border-bottom: 0;
}

.side .widget a{
  color: #1b46d8;
  text-decoration: none;
}

.side .widget a:hover{
  text-decoration: underline;
}

/* WordPress「最近の投稿」など、li内に画像がある想定の汎用レイアウト */
.side .widget ul li a{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* サムネが <img> で入る場合 */
.side .widget ul li img{
  width: 70px;
  height: auto;
  display: block;
}

/* “more”リンク（ウィジェット末尾の a に class が無い場合もあるので汎用） */
.side .widget .more,
.side .widget .more-link,
.side .widget a.more-link{
  display: block;
  text-align: right;
  margin-top: 10px;
}

/* ---------- Main card: 見出し/区切り/ボタン位置 ---------- */
.contents .main article{
  padding: 28px !important;
}

.contents .post-title{
  font-size: 28px;
  margin-bottom: 14px;
}

/* タイトル下の点線（参考スクショ寄せ） */
.contents .post-title::after{
  content: "";
  display: block;
  margin-top: 12px;
  border-bottom: 1px dotted #888;
}

/* 続きを読むボタンを右寄せ */
.contents .readmore{
  float: right;
}

/* floatの影響をカード外へ出さない */
.contents .main article::after{
  content: "";
  display: block;
  clear: both;
}

/* =========================================================
   一覧カードの高さ揃え + 画像を一回り小さく
   - 目的: 画像が大きくて文章が圧迫されるのを防ぐ
   - 方法: サムネ枠を固定し、画像は cover でトリミングして収める
   ========================================================= */

@media screen and (min-width: 768px){

  /* 記事カード全体の高さを揃える（必要なら数値調整） */
  .contents .main article{
    min-height: 260px;  /* ←ここで高さを揃えます */
  }

  /* サムネ枠を小さく固定 */
  .contents .post-card{
    grid-template-columns: 180px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  /* 画像を枠内に収める（全体表示 / 余白あり） */
  .contents .post-thumb img{
    width: 180px !important;
    height: 180px !important;
    object-fit: contain !important;
  }
}

/* スマホでは縦並びなので自然なサイズに戻す */
@media screen and (max-width: 767px){
  .contents .main article{
    min-height: 0 !important;
  }
  .contents .post-thumb img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ===== KEI THEME debug badge hide ===== */
.theme-debug-badge{
  display: none !important;
}

/* =========================================================
   記事詳細(single)・固定ページ(page)だけ：枠線/箱を消す
   TOP(一覧)は .contents .main article の枠を維持する
========================================================= */
body.single .contents .main article,
body.single-post .contents .main article,
body.page .contents .main article{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;     /* 箱の内側余白も消す */
  margin-top: 24px !important; /* ピルとくっつく場合の保険 */
}

/* もし「本文だけ」余白が欲しければ（任意）
body.single .contents .main .entry-content,
body.single-post .contents .main .entry-content,
body.page .contents .main .entry-content{
  padding-top: 16px !important;
}
*/

/* ==============================
   記事詳細：ピルと本文の間に余白を作る（確実版）
============================== */

/* 記事詳細（single/page）で、上に余白を追加 */
.single .contents,
.page .contents{
  padding-top: 30px !important;
}

/* もし↑が効かない場合の保険（内部のmainにも余白） */
.single .contents .main,
.page .contents .main{
  padding-top: 30px !important;
}

/* ===== single/page：ピル直下に余白を作る（最小修正） ===== */
body.single-post .contents,
body.page .contents{
  padding-top: 30px !important;  /* 30は好みで調整 */
}