/* ===== General / Content ===== */

/* 記事内の画像が枠からはみ出さないようにする */
.content img, .post__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

/* 月の見出し：線の色をダークモード用に調整 */
.archive-month {
  margin-top: 2.5em;
  padding-bottom: 5px;
  border-bottom: 1px solid #444; /* #eeeから暗い色に変更 */
}

.archive-month + ul {
  margin-bottom: 2em;
}

/* ===== Mainroad Dark Base ===== */

html, body, .container, .wrapper, .main, .sidebar, .post, .widget {
  background: #202020 !important;
  color: #d6d6d6 !important;
}

/* サイトタイトル・本文 */
.logo a, p, li {
  color: #d6d6d6 !important;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  color: #e6e6e6 !important;
}

/* リンク */
a {
  color: #7aa2ff !important;
}

a:hover {
  color: #a5c0ff !important;
}

/* ウィジェットタイトル下のライン：少し暗くして馴染ませる */
.widget__title {
  border-bottom: 2px solid #777 !important; /* #cccから変更 */
}

/* コードブロック：背景を少しだけ明るくして認識しやすくする */
pre, code {
  background: #2b2b2b !important; /* 全体背景より少し明るいグレー */
  color: #e6e6e6 !important;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}


/* ===== Header & Titles ===== */

.header, .header * {
  color: #ADDFB3 !important;
}

.header svg {
  fill: currentColor;
}

.post__title, .post__title a {
  color: #90D7EC !important;
}


/* 個別記事ページナビゲーションボタン */

.post-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;      /* 下（タイトル）との間隔 */
    margin-top: 0;           /* 上の余白を詰める */
    border-top: none;        /* 上の線を消す */
    border-bottom: 1px solid #777; /* 下に線を入れる */
    padding-bottom: 1rem;    /* 線と文字の間の余白 */
}

.post-nav__item {
	width: 48%;
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__link {
	text-decoration: none;
	color: #000;
}

.post-nav__caption {
	font-size: 0.8rem;
	color: #777;
	display: block;
}

.post-nav__post-title {
	font-weight: bold;
	margin: 0;
}


/* 記事のカテゴリー表示 */

.post__meta-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-size: 0.9rem;
    color: #666;
}

.post__meta-icon {
    margin-right: 5px;
    fill: #666; /* アイコンの色 */
}

.post__meta-link {
    color: #e22d30; /* Mainroadのデフォルト赤色に合わせる場合 */
    text-decoration: none;
}

.post__meta-link:hover {
    text-decoration: underline;
}

/* 2026.01.29 全文検索追加 */
#search .pagefind-ui__search-input {
  background-color: #222222 !important;
  color: #ffffff !important;
}

/* search.html キーワード検索の文字色 */
#search .pagefind-ui__search-input::placeholder {
  color: #999999 !important; /* ここを好きな色に */
  opacity: 1;
}


/* アーカイブ 年月選択タブ */
.widget__content .widget-archive__select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    background-color: #333; /* ダーク背景 */
    color: #fff;            /* 白文字 */
    border: 1px solid #444; /* 枠線も少し暗く */
    font-size: 14px;
}

/* 選択肢（option）もダークにする */
.widget-archive__select option {
    background-color: #333;
    color: #fff;
}



/* backToTop floatingボタン関係 */

#floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 15px; /* 右側に寄せる */
    display: flex;
    flex-direction: column; 
    gap: 10px;
    z-index: 1000;
}

.floating-btn {
    width: 45px;
    height: 45px;
    background-color: #333;    /* ダーク系で統一 */
    color: white;
    border: 1px solid #444;
    border-radius: 4px;        /* 以前のセレクトボックスと同じ角丸 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background 0.3s;
    
    opacity: 0.6; /* 通常時は薄くして記事を透かす */
    transition: all 0.3s ease;
}

/* スマホでも、タップした瞬間だけハッキリ見えるようにする */
.floating-btn:active {
    opacity: 1;
    background-color: #e22d30;
}

/* ホバー時にアイコンを少し大きく動かす演出 */
.floating-btn:hover svg {
    transform: scale(2.2);
}

/* PCではマウスを乗せた時だけハッキリさせる */
@media (hover: hover) {
    .floating-btn:hover {
        opacity: 1;
        background-color: #e22d30;
        transform: scale(1.05);
    }
}