@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.site-main {
  padding-top: 2rem !important;
}

.post-list {
  margin-top: 2rem; /* スライダーと記事リストに空き */
}

/* 2カラム用スタイル */
.post-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 2列 */
  gap: 2rem; /* お好きな間隔 */
}

/* 各記事にボーダーや背景を追加する例（任意） */
.post-list article {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}

/* スマホ用に1列にする */
@media screen and (max-width: 767px) {
  .post-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   メインとサイドバー用の2列レイアウト
   ========================================= */
.content-wrapper {
  display: grid;
  grid-template-columns: 5fr 1fr; /* 左が広く、右が狭い */
  gap: 2rem; /* メインとサイドバーの間隔 */
  align-items: flex-start; /* 高さが違ってもズレにくい */
}

@media screen and (max-width: 767px) {
  .content-wrapper {
    flex-direction: column;
  }

  .main-column,
  .sidebar-column {
    width: 100% !important;
  }
}

.main-column {
  /* 必要に応じてスタイル追加可 */
}

.sidebar-column {
  padding: 2rem;
  background: #b5d7f4; /* ちょっと背景色をつけたいとき */
  border-radius: 0.5rem;
  box-sizing: border-box;
}

/* スマホ用に1列にする */
@media screen and (max-width: 767px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
}

.sidebar-column .widget {
  margin-bottom: 1rem; /* 各ウィジェット間に1rem間隔 */
}
.sidebar-column .widget {
  padding: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

/* ウィジェットタイトルにボトムラインを入れる */
.sidebar-column .widget-title {
  border-bottom: 1px solid #ccc; /* ラインの色や太さはお好みで */
  padding-bottom: 0.3rem; /* タイトルとラインに少し間隔 */
  margin-bottom: 1rem;    /* ラインから中身までの余白 */
  font-weight: bold;
}

/* サイドバーのボディ文字を少し小さく */
.sidebar-column .widget {
  font-size: 0.9rem; /* これくらいがちょうどいいはず */
  line-height: 1.5;  /* 行間も少し広げると読みやすいよ */
}

.sidebar-column .widget-title {
  font-size: 1.2rem; /* 前に近い大きさに */
}

.sidebar-column .widget-title {
  color: #0f23bf; /* ここにメインカラーを入れる */
  font-size: 1.2rem; /* お好きな大きさで */
  border-bottom: 2px solid #0f23bf; /* ラインもメインカラーにすると統一感UP */
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

/* ブックマーク（リンクリスト）各アイテムに間隔をあける */
.sidebar-column .widget_links ul li {
  margin-bottom: 2rem; /* お好きな間隔に調整 */
}

.sidebar-column .widget {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふわっと影 */
}

/* ヘッダー下メニューを非表示にする */
.c-header__nav,
.c-gnav {
  display: none !important;
}

/* ハンバーガーボタン非表示 */
.c-iconBtn.-menuBtn {
  display: none !important;
}

.l-header__inner,
.c-header__inner {
  padding-bottom: 2rem !important;
}

.post-list .entry-title {
  color: #0f23bf;     /* メインカラー */
  font-size: 1.4rem;  /* お好きな大きさに調整 */
  font-weight: bold;  /* 太字に */
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.post-list .entry-meta {
  font-size: 0.85rem;    /* 小さめに */
  color: #666;           /* 少し薄めに */
  margin-bottom: 1rem;   /* タイトルと本文に少し間隔 */
}

.post-list article {
  position: relative; /* 擬似要素の基準にする */
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden; /* はみ出し防止 */
}

/* 左上の罫線装飾 */
.post-list article::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;  /* 横線の長さ */
  height: 100px; /* 縦線の長さ */
  border-top: 1px solid #0f23bf;   /* 上線 */
  border-left: 1px solid #0f23bf;  /* 左線 */
}

/* 右下の罫線装飾 */
.post-list article::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;  /* 横線の長さ */
  height: 100px; /* 縦線の長さ */
  border-bottom: 1px solid #0f23bf; /* 下線 */
  border-right: 1px solid #0f23bf;  /* 右線 */
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid #eee;
  margin-top: 2rem;
}

.post-list article {
  padding: 3rem; /* 好きな広さに広げる */
}

.custom-calendar-nav .month-nav a {
  color: #b60000 !important;  /* 他と揃える赤に */
  text-decoration: underline;
}

.custom-calendar-nav .month-nav a:hover {
  color: #800000 !important;  /* 濃いめの赤にしてもOK */
  text-decoration: none;
}

/* レイアウト崩れ対策：カラム幅を安定させる */
.content-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

/* メイン記事カラムの基本設定 */
.main-column {
  flex: 1;
  min-height: 300px; /* 内容がなくても高さを確保 */
}

/* サイドバーの幅を固定（お好みで調整） */
.sidebar-column {
  width: 350px;
  flex-shrink: 0;
}

/* カレンダー表示時のカラム崩れ防止 */
.sidebar-column {
  width: 350px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: auto; /* ← 念のため */
}

/* カレンダー内のテーブルをはみ出させないように調整 */
#custom_calendar {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}

/* 投稿本文の行間を調整 */
.post_content,
.post_content * {
  line-height: 1.5 !important;
}

.post_content > div {
  margin-bottom: 0.5em;
  line-height: 1.5 !important;
}

/* 関連記事のアイキャッチ画像を完全に非表示に */
.p-relatedPosts .p-postList__thumb {
  display: none !important;
}

.p-relatedPosts .p-postList__item {
  background: #b5d7f4;
  border: 1px solid #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.p-relatedPosts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem; /* ← 横と縦の両方に隙間ができる */
}

.p-relatedPosts .p-postList__item {
  flex: 1 1 calc(50% - 1.2rem); /* 2カラム時の横幅調整（gap考慮） */
}

.p-relatedPosts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem; /* 横と縦どちらも */
}

.p-relatedPosts .p-postList__item {
  flex: 1 1 calc(25% - 1.2rem); /* 4列分（隙間を考慮） */
}

@media screen and (max-width: 768px) {
  .p-relatedPosts .p-postList__item {
    flex: 1 1 100%; /* スマホでは1列表示に */
  }
}

.c-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-archive-list__item {
  border-bottom: 1px solid #ccc;
  padding: 1.5em 0;
}
.c-archive-list__title {
  font-size: 1.2rem;
  margin: 0 0 0.5em;
}
.c-archive-list__meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5em;
}
.c-archive-list__excerpt {
  font-size: 1rem;
  color: #444;
}
.c-pagination {
  margin-top: 2em;
  text-align: center;
}

.post-category {
  display: inline-block;
  margin-left: 1em;
  color: #666;
  font-size: 0.9em;
}

.archive-pagination .page-numbers {
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 0 0.3em;
  border: 1px solid #0f23bf;
  border-radius: 4px;
  text-decoration: none;
  color: #0f23bf;
  font-size: 0.85em;
  text-align: center;
  background-color: transparent;
}

.archive-pagination .page-numbers.current {
  background-color: #0f23bf;
  color: #fff;
  font-weight: bold;
  border-color: #0f23bf;
}

.archive-pagination .page-numbers:hover {
  background-color: #001080;
  color: #fff;
  border-color: #001080;
}

.archive-title {
  font-size: 1.8rem; /* タイトルを大きく */
  font-weight: bold;
  margin-bottom: 2em; /* タイトル下の余白を広く */
  text-align: center; /* 中央寄せ（必要なら） */
}