/* ==========================================
    1. ブログ一覧ページ用
   ========================================== */
/* 検索結果文字 */
.bl_searchStatus {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding: 0 8px;
    background-color: var(--color-primary-brighter); /* ベージュの背景 */
    font-size: 0.9rem;
}
/* ページネーション */
.bl_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.bl_pagination a, .bl_pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
}
.bl_pagination a {
  background: var(--color-body-white);
  color: var(--color-primary);
  transition: background 0.2s;
}
.bl_pagination a:hover {
  background: var(--color-primary);
  color: var(--font-white-color);
}
.bl_pagination .current {
  background: var(--color-primary); /* アクセントカラー：キャラのイメージ色などに変更可 */
  color: var(--font-white-color);
}

/* 各セクションのタイトル（SEARCH, TAGSなど） */
.el_sideTitle_blog {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

/* --- 1. 検索窓のスタイル --- */
.search-form {
  display: flex;
  position: relative; /* 子要素のabsoluteの基準にする [cite: 9] */
  width: 100%;
}

/* 入力欄：クラス名を el_searchInput に統一 */
.el_searchInput {
  width: 100%;
  padding: 12px 45px 12px 20px; /* 右側にボタン用の余白を確保 */
  border: 2px solid #eee;
  border-radius: 999px; /* 他のボタンと合わせたカプセル型 [cite: 10] */
  font-size: 0.95rem;
  outline: none;
  background-color: #fff;
  transition: border-color 0.3s;
}

.el_searchInput:focus {
  border-color: var(--color-primary); /* メインカラーでフォーカスを強調 [cite: 11] */
}

/* 送信ボタン：クラス名を el_searchSubmit に統一 */
.el_searchSubmit {
  position: absolute; /* 親要素 .search-form の中を基準に配置 [cite: 9, 12] */
  right: 8px;
  top: 50%;
  transform: translateY(-50%); /* 縦方向の中央に配置 */
  width: 35px;
  height: 35px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ホバー・クリック時の挙動（他のボタンと共通） */
.el_searchSubmit:hover {
    filter: brightness(1.2);
}
.el_searchSubmit:active {
    transform: translateY(-50%) scale(0.9); /* 中央補正を維持したまま縮小 */
}
/* --- 2. タグ一覧のスタイル --- */
.ly_list_tag {
  display: flex;
  flex-wrap: wrap; /* タグを横に並べて溢れたら改行 */
  gap: 8px;
}
/* おすすめリストのコンテナ */
.bl_sideList_recommend {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 個別アイテム */
.bl_sideItem_recommend {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.bl_sideItem_recommend:hover {
    transform: translateX(4px); /* 少し右に動く演出 */
}

/* 画像ラッパー：1:1の正方形か16:9の横長がおすすめ */
.bl_sideItem_imgWrapper {
    flex: 0 0 80px; /* 画像の幅を固定 */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--color-body);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bl_sideItem_imgWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストエリア */
.bl_sideItem_body {
    flex: 1;
}

.el_sideItem_date {
    display: block;
    font-size: 0.75rem;
    color: var(--font-sub-color, #888);
    margin-bottom: 2px;
}

.el_sideItem_title {
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: bold;
    /* 2行を超えたら「...」で省略する指定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 「すべて見る」の共通パーツ化 */
.el_icon_viewmore {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    text-align: right;
    color: var(--color-accent);
    text-decoration: none;
}

/* ==========================================
    2. ブログ個別ページ用
   ========================================== */
/* ブログ記事 */
/* 記事内の見出し（共通化） */
.el_pageTitle_blog {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--font-size-h2);
  line-height: var(--lh-tight);
  font-weight: 800;
  color: var(--color-primary);
}
.el_pageTitle_blog::before {
  content: "";
  width: 6px; /* 太さを少し調整 */
  height: 1.2em; /* 文字の高さに合わせることでバランスを最適化 */
  background-color: var(--color-primary);
  border-radius: 4px; /* 少し角を丸めるとモダンな印象に */
  flex-shrink: 0;
}

/* ヒーロー画像の外枠 */
.bl_post_hero {
    margin: 0 0 2em 0; /* 下に余白 */
    padding: 0;
}

/* キャプションのスタイル */
.el_heroCaption {
    margin-top: 0.8em;
    font-size: 0.85rem;      /* 本文より小さく */
    color: var(--color-primary); /* バイオレット（またはグレー） */
    opacity: 0.7;
    text-align: center;      /* 中央寄せが一般的 */
    line-height: 1.6;
}

/* キャプションの頭に「※」などを自動で付ける演出 */
.el_heroCaption::before {
    content: "※";
    margin-right: 0.2em;
}

/* 記事本文の簡略化開始　ここから */
/* 記事本文のベース設定 */
/* .bl_post_header {
  gap: var(--space-content-l);
} */
.bl_postBody .el_postLead {
  font-size: var(--font-size-h4);
  font-weight: 500;
  color: var(--color-primary); /* バイオレット */
}


.bl_postBody {
  line-height: 1.8;
  color: var(--font-color);
  margin-bottom: 4em; /* タグとの間隔 */
}

/* クラスなしの p タグに自動で余白を付与 */
.bl_postBody p {
  margin-bottom: 1.5em;
  font-size: 16px;
}

/* 見出しも h2 と書くだけでスタイルが当たるように */
.bl_postBody h2 {
  margin: 2em 0 1em;
  padding: 0.5em 0.8em;
  background-color: rgba(var(--rgb-primary), 0.18);
  color: var(--font-color);
  opacity: 80%;
  /* border-left: 4px solid var(--color-primary); */
  font-size: var(--font-size-h3);
}
/* 記事本文の簡略化開始　ここまで */

.bl_postBody figure { margin: 2em 0; text-align: center; }
.bl_postBody figcaption { 
    font-size: 0.8rem; 
    color: #666; 
    margin-top: 0.5em; 
}

/* 記事内の画像 */
.bl_postBody img {
  width: 100%;
  height: auto;
  margin: 1.5em 0;
  border-radius: 8px;
}
/* 親コンテナ：figureを並べる */
.ly_imgFlex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* セット間の隙間 */
    justify-content: center;
    margin: 2em 0;
}

/* 各画像セットの枠 */
.ly_imgFlex figure {
    width: calc(50% - 10px); /* 2枚並びを基本にする */
    margin: 0 !important;   /* 既存のmarginリセット */
    text-align: center;
}

/* 画像自体の調整 */
.ly_imgFlex img {
    width: 100% !important;
    margin: 0 0 0.5em 0 !important; /* 画像下の余白を調整 */
    vertical-align: bottom;
}

/* 3枚目（奇数番目）が最後に来た場合、100%幅＆中央寄せ */
.ly_imgFlex figure:last-child:nth-child(odd) {
    width: 100%;
    max-width: 500px; /* 1枚だけ巨大化するのを防ぐ */
}

/* スマホ表示：100%幅に戻す */
@media (max-width: 768px) {
    .ly_imgFlex figure {
        width: 100% !important;
        max-width: none !important;
    }
}

/* --- 目次 (Index) --- */
.bl_index__blog {
  margin-block: var(--space-content-s);
  margin-inline: var(--space-content-s);
  padding-inline: var(--space-content-l);
  border: 4px solid rgba(var(--rgb-primary), 0.18);
  border-radius: 8px;
  background: var(--color-body-white);
}
.bl_index_list__blog {
  /* margin-top: var(--space-component-l);
  gap: var(--space-component-m); */
  list-style-type: decimal;
}
.bl_index_link {
  color: var(--font-color);
  text-decoration: none;
  font-size: var(--font-size-sub);
  transition: color 0.3s;
}
.bl_index_link:hover {
  color: var(--color-accent); /* アクセントカラーがある場合 */
}
.el_indexTitle {
  font-size: var(--font-size-lead);
  font-weight: bold;
}
.el_indexTitle::before {
  display: inline-block;
  content: '';
  background-image: url("../img/icon/Contents-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.5rem;
}


/* 「前の記事・次の記事」へのナビゲーション */
/* 前後のテキスト方向 */
.btn--tertiary.prev { justify-content: flex-start; }
.btn--tertiary.next { justify-content: flex-end; }





/* ブログ　コンテナここまで */