/* 記事内の画像が枠からはみ出さないようにする */
.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 #eee; /* 軽い下線を引くとさらに見やすい */
}

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

/* 個別記事ページナビゲーションボタン */
.post-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;      /* 下（タイトル）との間隔 */
    margin-top: 0;           /* 上の余白を詰める */
    border-top: none;        /* 上の線を消す */
    border-bottom: 1px solid #eee; /* 下に線を入れる */
    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;
}


/* --- アーカイブ 年月選択タブ --- */
.widget__content .widget-archive__select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 0; /* Mainroadのシャープな角に合わせるなら0、少し丸めるなら4px */
    background-color: #f5f5f5; /* サイドバーに馴染む薄いグレー */
    color: #333;               /* 文字は読みやすい黒 */
    border: 1px solid #e22d30; /* 枠線をMainroadの赤にして「選択できる感」を出す */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ホバー時に背景を白く、文字を赤くして反転させる */
.widget-archive__select:hover {
    background-color: #fff;
    color: #e22d30;
}

/* 選択肢（option）は標準的な白背景・黒文字に戻す（スマホでの視認性重視） */
.widget-archive__select option {
    background-color: #fff;
    color: #333;
}

/* --- backToTop floatingボタン関係 --- */
#floating-buttons {
    position: fixed;
    bottom: 25px;
    right: 15px;
    display: flex;
    flex-direction: column; 
    gap: 12px;
    z-index: 1000;
}

.floating-btn {
    width: 46px;
    height: 46px;
    background-color: #fff;    /* 基本は白ベース（Mainroadの清潔感） */
    color: #e22d30;            /* アイコンは赤 */
    border: 2px solid #e22d30; /* 赤いしっかりした枠線 */
    border-radius: 4px;        /* 他のウィジェットの角丸に合わせる */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    opacity: 0.7;              /* 常時は少し控えめに */
    transition: all 0.3s ease;
}

/* SVGアイコン自体のサイズ調整 */
.floating-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

/* スマホ：タップした瞬間の反応 */
.floating-btn:active {
    opacity: 1;
    background-color: #e22d30; /* 背景を赤に */
    color: #fff;               /* アイコンを白に */
}

/* PC：マウスホバー時の演出 */
@media (hover: hover) {
    .floating-btn:hover {
        opacity: 1;
        background-color: #e22d30; /* 赤背景に反転 */
        color: #fff;               /* 白アイコンに反転 */
        transform: translateY(-3px); /* 軽く浮かせる */
    }
    
    /* ホバー時にアイコンを少し大きく見せる */
    .floating-btn:hover svg {
        transform: scale(2.2);
    }
}