@charset "UTF-8";

/* ブログの2カラム（本文＋サイドバー）とサイドバー本体。
   詳細ページ・一覧ページの両方から inc/blog_sidebar.php 経由で読み込む。 */

.blog_column_side .f_din {
	font-family: "din-2014", sans-serif;
}

/* 2カラム */
.blog_column {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.blog_column .blog_column_main {
	flex-grow: 1;
	min-width: 0;
}

.blog_column .blog_column_side {
	width: 300px;
	flex-shrink: 0;
}

/* 右下の追従バナーはコンテンツ枠の右端に重なるため、サイドバーがあるページでは出さない
   （fixed / right:30px / width:170px のため、画面幅1540px未満で必ず重なる）。
   ページ名で絞らず「サイドバーがあるか」で判定する（カテゴリ・著者・タグの各一覧が同じ
   archive/template3 を使うため、body class で列挙すると取りこぼす） */
body:has(.blog_column_side) .common_follow_pc {
	display: none;
}

/* サイドバー */
.blog_column_side .side_item+.side_item {
	margin-block: 35px 0;
}

.blog_column_side .side_ttl {
	color: #265436;
	font-size: 18px;
	letter-spacing: .06em;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 1px dashed #B2B2B2;
	padding-block: 0 0.4em;
	margin-block: 0 0.9em;
}

/* 人気ランキングと最新情報は同じ形（サムネイル＋日付＋タイトル） */
.blog_column_side .side_rank_list .side_rank_item,
.blog_column_side .side_latest_list .side_latest_item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.blog_column_side .side_rank_list .side_rank_item+.side_rank_item,
.blog_column_side .side_latest_list .side_latest_item+.side_latest_item {
	margin-block: 14px 0;
}

.blog_column_side .side_rank_list .side_rank_item .item_img,
.blog_column_side .side_latest_list .side_latest_item .item_img {
	width: 90px;
	height: 65px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog_column_side .side_rank_list .side_rank_item .item_img img,
.blog_column_side .side_latest_list .side_latest_item .item_img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 人気ランキングの順位（サムネイルの左上）。
   1〜3位の金・銀・銅は参考サイトと同じグラデーション。4位以降はサイトのメインカラー */
.blog_column_side .side_rank_list .side_rank_item .item_img {
	position: relative;
}

.blog_column_side .side_rank_list .side_rank_item .item_img .item_rank {
	width: 22px;
	height: 22px;
	background: #183F27;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.blog_column_side .side_rank_list .side_rank_item .item_img .item_rank.rank1 {
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90%, #B67B03 100%);
}

.blog_column_side .side_rank_list .side_rank_item .item_img .item_rank.rank2 {
	background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90%, #757575 100%);
}

.blog_column_side .side_rank_list .side_rank_item .item_img .item_rank.rank3 {
	background: linear-gradient(45deg, #C47022 0%, #BA6E40 45%, #FEE9A0 70%, #BA6E40 85%, #C47022 90%, #C47022 100%);
}

.blog_column_side .side_rank_list .side_rank_item .item_text_area,
.blog_column_side .side_latest_list .side_latest_item .item_text_area {
	min-width: 0;
}

.blog_column_side .side_rank_list .side_rank_item .item_text_area .item_date,
.blog_column_side .side_latest_list .side_latest_item .item_text_area .item_date {
	color: #8D8D8D;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	margin-block: 0 0.5em;
}

.blog_column_side .side_rank_list .side_rank_item .item_text_area .item_name,
.blog_column_side .side_latest_list .side_latest_item .item_text_area .item_name {
	color: #183F27;
	font-size: 14px;
	letter-spacing: .02em;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 750px) {
	.blog_column {
		display: block;
	}

	.blog_column .blog_column_side {
		width: 100%;
		margin-block: 12vw 0;
	}

	.blog_column_side .side_item+.side_item {
		margin-block: 9vw 0;
	}

	.blog_column_side .side_ttl {
		font-size: 4vw;
		letter-spacing: .04em;
	}

	.blog_column_side .side_rank_list .side_rank_item,
	.blog_column_side .side_latest_list .side_latest_item {
		gap: 3.5vw;
	}

	.blog_column_side .side_rank_list .side_rank_item+.side_rank_item,
	.blog_column_side .side_latest_list .side_latest_item+.side_latest_item {
		margin-block: 4vw 0;
	}

	.blog_column_side .side_rank_list .side_rank_item .item_img,
	.blog_column_side .side_latest_list .side_latest_item .item_img {
		width: 24vw;
		height: 17vw;
	}

	.blog_column_side .side_rank_list .side_rank_item .item_img .item_rank {
		width: 5.6vw;
		height: 5.6vw;
		font-size: 3vw;
	}

	.blog_column_side .side_rank_list .side_rank_item .item_text_area .item_date,
	.blog_column_side .side_latest_list .side_latest_item .item_text_area .item_date {
		font-size: 3vw;
	}

	.blog_column_side .side_rank_list .side_rank_item .item_text_area .item_name,
	.blog_column_side .side_latest_list .side_latest_item .item_text_area .item_name {
		font-size: 3.4vw;
	}
}