@charset "UTF-8";

/* ==========================================================================
   ブログ (/blog/) 専用スタイル ― DESIGN A
   --------------------------------------------------------------------------
   260806 新規作成。

   【なぜ作ったか】
   list.html / detail.html は以前から <link ... page.blog.css> を書いていたが
   ファイル自体が存在せず 404 だった。つまりブログ専用の指定が1行も無く、
   page.top.css の「トップページ用」ルールが偶然当たっているだけの状態だった。

   【前置きの .modern-blog-theme を外さないこと】
   page.top.css:1868-1875 が .blog-card / .blog-card-body / .blog-card-title /
   .blog-card-date を "トップの横スクロールカード" 用に素のクラス名で持っている。
   さらに page.top.css:1974 の SP ルールが .blog-card { min-width:75%; max-width:75% }
   を当ててくるため、素のクラス名で書くと 768px 以下でカードが横にはみ出す。
   ここでは全て .modern-blog-theme を前置きして詳細度 (0,2,0) で勝たせている。

   【a { } を単独で書かないこと】
   page.search.css で .modern-search-theme a { color: inherit } を書いたせいで
   ヘッダーの .btn-login / .btn-register の文字色まで潰れる事故が起きている。
   base.css:141 の a { color:#006CD8 } を打ち消したい場所は、
   このファイルでもパーツ単位（.blog-card-title a など）で個別に指定する。

   【色は必ず common.css :root の変数を使う】
   --primary #992F3B / --primary-dark / --primary-pale / --text / --text-light /
   --text-muted / --white / --bg-light / --border / --shadow / --shadow-hover /
   --radius / --radius-lg
   （--radius-sm は page.top.css 側の定義。読み込み順の事故を避けフォールバック付きで使う）
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. テーマ基底
   -------------------------------------------------------------------------- */

body.modern-blog-theme {
	background: var(--bg-light);
	color: var(--text);
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.7;
}

.modern-blog-theme img {
	max-width: 100%;
	height: auto;
}

/* page.top.css:53 の .container { padding: 30px 30px } が common.css:324 の
   .container { padding: 0 20px } を後勝ちで潰している（トップの節間余白用の指定）。
   ブログは帯（.blog-header-wrap）側で上下の余白を作るので上下パディングは要らない。
   ※これを入れないとページヘッダーの高さが上下30pxずつ膨らむ（実測 209.6px → 149.6px）

   横は padding:0 でセンタリングに任せる。
   ヘッダー／フッターも同じ .container を使うため、ここを 20px にすると
   /blog/ だけロゴが 20px 内側にずれる（実測 logoX: /s/ と /companies/ が 150 に対し 170）。
   ただし padding:0 のままでは幅が足りなくなった時にコンテンツが画面端へ貼り付くので、
   そこから下だけガターを入れる（検索ページは 768px まで貼り付いたままの状態）。

   260820 幅を 1140px → **1180px** に変更。
   トップページ（page.top.css:1734 の :where(body.designa-top) .container）が 1180px で、
   /blog/ だけ 40px 狭かった（実測: / が x=123 w=1180 に対し /blog/ は x=143 w=1140）。
   コラムはトップから入ってくる導線なので、トップと同じ幅にそろえる。
   ※同日、検索・求人詳細（.modern-search-theme / .modern-detail-theme）も 1180px へ統一した
     （page.search.css:1664 / page.detail.css:944）。**サイト全体が 1180px** で、
     根拠は採用デザイン mockup/design-a.html:38 の .container { max-width: 1180px }。
     1140px は不採用の design-b.html:38 の値。 */
.modern-blog-theme .container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}

/* 1180 + 20*2 = 1220。ここを下回るとセンタリングだけでは左右20pxを確保できない */
@media screen and (max-width: 1219px) {

	.modern-blog-theme .container {
		padding: 0 20px;
	}
}

/* 旧レイアウト由来の table-cell 指定 (page.css:90 #side / #main) を無効化する。
   #side は ID セレクタなので .modern-blog-theme を前置きして (1,1,0) で上書きする */
.modern-blog-theme #side,
.modern-blog-theme #main {
	display: block;
	width: auto;
	padding-left: 0;
	vertical-align: baseline;
	min-width: 0;
}


/* --------------------------------------------------------------------------
   2. ページヘッダー（パンくず＋タイトル帯）
        page.search.css の .page-header と同じ設計言語に揃えている
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-header-wrap {
	background: var(--white);
	border-bottom: 1px solid var(--border);
	padding: 22px 0 26px;
}

.modern-blog-theme .blog-breadcrumbs {
	margin-bottom: 10px;
}

.modern-blog-theme .blog-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	color: var(--text-muted);
}

/* flex-shrink を効かせると <li> の中の <a> と区切りアイコンが親からはみ出す
   （390px 実測で4件検出）。縮むのは末尾（記事タイトル）だけにする */
.modern-blog-theme .blog-breadcrumbs li {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

/* 区切りは markup 側の <span class="material-icons-outlined">chevron_right</span>。
   :after + ligature で出すとフォント未読込時に "chevron_right" の文字列が露出するため使わない */
.modern-blog-theme .blog-breadcrumbs .material-icons-outlined {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0 2px;
}

.modern-blog-theme .blog-breadcrumbs a {
	color: var(--text-muted);
	transition: color .2s;
}

.modern-blog-theme .blog-breadcrumbs a:hover {
	color: var(--primary);
	opacity: 1;
}

/* 最後のパンくず（記事タイトル）は長くなるので省略する */
.modern-blog-theme .blog-breadcrumbs li:last-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.modern-blog-theme .blog-title {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1.45;
	margin: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* 260820 カテゴリの説明文。h1 の直下・件数の上。
   カテゴリページに固有の文章を持たせるための行なので、件数より先に読ませる */
.modern-blog-theme .blog-page-desc {
	max-width: 760px;
	margin-top: 12px;
	font-size: .92rem;
	line-height: 1.8;
	color: var(--text-light);
}

.modern-blog-theme .blog-page-sub {
	font-size: .85rem;
	color: var(--text-muted);
	margin-top: 8px;
}

.modern-blog-theme .blog-page-sub strong {
	color: var(--primary);
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   3. 2カラムレイアウト
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-page {
	padding: 32px 0 56px;
}

.modern-blog-theme .blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}

.modern-blog-theme .blog-main {
	min-width: 0;
}

/* 260820 サイドバーを持たないページ（404）用の1カラム。
   .blog-layout のままだと右の 300px が空のまま確保され、本文が左に寄って見える */
.modern-blog-theme .blog-layout-single {
	grid-template-columns: minmax(0, 1fr);
}


/* --------------------------------------------------------------------------
   4. 記事一覧（カードグリッド）
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-list-wrap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.modern-blog-theme .blog-card {
	display: flex;
	flex-direction: column;
	/* page.top.css の SP ルール (min/max-width:75%) を無効化するため明示する */
	min-width: 0;
	max-width: none;
	flex-shrink: 1;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}

.modern-blog-theme .blog-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
	border-color: rgba(153, 47, 59, .25);
}

.modern-blog-theme .blog-card-image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-light);
}

.modern-blog-theme .blog-card-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.modern-blog-theme .blog-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}

.modern-blog-theme .blog-card:hover .blog-card-image img {
	transform: scale(1.04);
}

.modern-blog-theme .blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px 14px;
}

.modern-blog-theme .blog-card-cat {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 9px;
}

.modern-blog-theme .blog-cat-chip {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid rgba(153, 47, 59, .18);
	border-radius: 999px;
	background: var(--primary-pale);
	color: var(--primary);
	font-size: .7rem;
	font-weight: 500;
	line-height: 1.7;
}

.modern-blog-theme .blog-card-title {
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.55;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.modern-blog-theme .blog-card-title a {
	color: var(--text);
	transition: color .2s;
}

.modern-blog-theme .blog-card-title a:hover {
	color: var(--primary);
	opacity: 1;
}

.modern-blog-theme .blog-card-excerpt {
	font-size: .82rem;
	line-height: 1.75;
	color: var(--text-light);
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 本文に URL がベタ書きされている記事があるため、必ず折り返す */
	word-break: break-word;
	overflow-wrap: anywhere;
}

.modern-blog-theme .blog-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--border);
}

.modern-blog-theme .blog-card-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .76rem;
	color: var(--text-muted);
}

.modern-blog-theme .blog-card-date .material-icons-outlined {
	font-size: 15px;
}

/* 260819 <span> から <a> にした（リンクが張られていなかった）。
   共通の a に下線が付くため、ここで明示的に消す */
.modern-blog-theme .blog-card-more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: .76rem;
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
	transition: gap .2s;
	text-decoration: none;
}

.modern-blog-theme .blog-card-more:hover {
	text-decoration: none;
	color: var(--primary);
}

.modern-blog-theme .blog-card-more .material-icons-outlined {
	font-size: 15px;
}

.modern-blog-theme .blog-card:hover .blog-card-more {
	gap: 7px;
}

/* 記事0件 */
.modern-blog-theme .blog-empty {
	grid-column: 1 / -1;
	padding: 56px 20px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-align: center;
	color: var(--text-muted);
	font-size: .9rem;
}


/* --------------------------------------------------------------------------
   5. ページャ
        旧 .page_pager（page.css:174-）は使わず、
        page.search.css の .pagination と同じ見た目に揃えた .blog-pager を使う
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-pager {
	padding: 36px 0 4px;
}

.modern-blog-theme .blog-pager ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 直下の a / span だけを箱にする。
   前後ページの矢印は <a><span class="material-icons-outlined"> なので、
   子孫セレクタ (li span) にすると矢印アイコンまで現在ページ色の箱になってしまう */
.modern-blog-theme .blog-pager li > a,
.modern-blog-theme .blog-pager li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--text-light);
	font-size: .88rem;
	transition: all .2s;
}

.modern-blog-theme .blog-pager li > a:hover {
	border-color: var(--primary);
	background: var(--primary-pale);
	color: var(--primary);
	opacity: 1;
}

/* リンクが張られていない = 現在ページ */
.modern-blog-theme .blog-pager li > span {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
	font-weight: 700;
}

.modern-blog-theme .blog-pager li .material-icons-outlined {
	font-size: 18px;
}

/* 260820 WordPress の paginate_links が出すページ番号の省略記号（…）。
   直上の「リンクが張られていない = 現在ページ」の指定に当たってしまい、
   … が現在ページと同じ色の箱になるので打ち消す */
.modern-blog-theme .blog-pager li > span.dots {
	min-width: 0;
	border-color: transparent;
	background: transparent;
	color: var(--text-light);
	font-weight: 400;
}


/* --------------------------------------------------------------------------
   6. 記事詳細
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-detail-content {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px 36px 36px;
	box-shadow: var(--shadow);
}

.modern-blog-theme .blog-detail-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--border);
}

.modern-blog-theme .blog-detail-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	color: var(--text-muted);
}

.modern-blog-theme .blog-detail-date .material-icons-outlined {
	font-size: 16px;
}

.modern-blog-theme .blog-detail-block + .blog-detail-block {
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}

.modern-blog-theme .blog-detail-block > h3 {
	position: relative;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text);
	padding-left: 14px;
	margin: 0 0 18px;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.modern-blog-theme .blog-detail-block > h3:before {
	content: '';
	position: absolute;
	left: 0;
	top: .22em;
	bottom: .22em;
	width: 4px;
	border-radius: 2px;
	background: var(--primary);
}

.modern-blog-theme .blog-detail-block > figure {
	margin: 0 0 20px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-light);
}

.modern-blog-theme .blog-detail-block > figure img {
	display: block;
	width: 100%;
	height: auto;
}


/* --- 6-1. 記事本文（DB から入る HTML の体裁） --------------------------- */

.modern-blog-theme .blog-detail-text {
	font-size: .93rem;
	line-height: 1.95;
	color: var(--text-light);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.modern-blog-theme .blog-detail-text > *:first-child { margin-top: 0; }
.modern-blog-theme .blog-detail-text > *:last-child { margin-bottom: 0; }

.modern-blog-theme .blog-detail-text p {
	margin: 0 0 1.2em;
}

.modern-blog-theme .blog-detail-text h2,
.modern-blog-theme .blog-detail-text h3,
.modern-blog-theme .blog-detail-text h4 {
	color: var(--text);
	font-weight: 700;
	line-height: 1.55;
	margin: 1.8em 0 .8em;
}

.modern-blog-theme .blog-detail-text h2 {
	font-size: 1.15rem;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--primary-pale);
}

.modern-blog-theme .blog-detail-text h3 { font-size: 1.05rem; }
.modern-blog-theme .blog-detail-text h4 { font-size: .98rem; }

.modern-blog-theme .blog-detail-text ul,
.modern-blog-theme .blog-detail-text ol {
	margin: 0 0 1.2em;
	padding-left: 1.6em;
}

/* base.css:138 で list-style:none にされているので戻す */
.modern-blog-theme .blog-detail-text ul,
.modern-blog-theme .blog-detail-text ul li { list-style: disc outside; }
.modern-blog-theme .blog-detail-text ol,
.modern-blog-theme .blog-detail-text ol li { list-style: decimal outside; }

.modern-blog-theme .blog-detail-text li {
	margin-bottom: .4em;
}

.modern-blog-theme .blog-detail-text a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.modern-blog-theme .blog-detail-text a:hover {
	color: var(--primary-dark);
}

.modern-blog-theme .blog-detail-text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: .6em 0;
}

.modern-blog-theme .blog-detail-text strong,
.modern-blog-theme .blog-detail-text b {
	color: var(--text);
	font-weight: 700;
}

.modern-blog-theme .blog-detail-text blockquote {
	margin: 0 0 1.2em;
	padding: 14px 18px;
	border-left: 4px solid var(--primary-pale);
	border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
	background: var(--bg-light);
	color: var(--text-muted);
	font-size: .9rem;
}

.modern-blog-theme .blog-detail-text blockquote > *:last-child { margin-bottom: 0; }

/* 幅の広い表は本文をはみ出させず、表の中だけ横スクロールさせる */
.modern-blog-theme .blog-detail-text table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 1.2em;
	font-size: .88rem;
}

.modern-blog-theme .blog-detail-text table th,
.modern-blog-theme .blog-detail-text table td {
	border: 1px solid var(--border);
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
}

.modern-blog-theme .blog-detail-text table th {
	background: var(--bg-light);
	color: var(--text);
	font-weight: 700;
	white-space: nowrap;
}

.modern-blog-theme .blog-detail-text hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.8em 0;
}

.modern-blog-theme .blog-detail-text pre {
	overflow-x: auto;
	max-width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm, 6px);
	background: var(--bg-light);
	font-size: .84rem;
}

/* 非公開記事の案内文 */
.modern-blog-theme .blog-detail-notice {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 44px 32px;
	text-align: center;
	color: var(--text-light);
	font-size: .93rem;
	box-shadow: var(--shadow);
}


/* --- 6-2. 一覧へ戻る -------------------------------------------------- */

/* --------------------------------------------------------------------------
   6-2. 関連する記事（260820 新設）
        記事から記事への内部リンク。本文の下・「一覧へ戻る」の上に置く。
        一覧カード（.blog-card）は2カラムで大きすぎるので、横並びの小さい行にしている
   -------------------------------------------------------------------------- */

.modern-blog-theme .blog-related {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}

.modern-blog-theme .blog-related-head {
	position: relative;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text);
	padding-left: 14px;
	margin: 0 0 18px;
}

.modern-blog-theme .blog-related-head:before {
	content: '';
	position: absolute;
	left: 0;
	top: .22em;
	bottom: .22em;
	width: 4px;
	border-radius: 2px;
	background: var(--primary);
}

.modern-blog-theme .blog-related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.modern-blog-theme .blog-related-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	transition: all .2s;
}

.modern-blog-theme .blog-related-item:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	opacity: 1;
}

.modern-blog-theme .blog-related-thumb {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--bg-light);
	overflow: hidden;
}

.modern-blog-theme .blog-related-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modern-blog-theme .blog-related-body {
	display: block;
	padding: 12px 14px 14px;
}

.modern-blog-theme .blog-related-title {
	display: block;
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--text);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.modern-blog-theme .blog-related-item:hover .blog-related-title {
	color: var(--primary);
}

.modern-blog-theme .blog-related-date {
	display: block;
	margin-top: 8px;
	font-size: .76rem;
	color: var(--text-muted);
}

.modern-blog-theme .blog-detail-actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.modern-blog-theme .btn-blog-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 30px;
	border: 2px solid var(--primary);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--primary);
	font-size: .9rem;
	font-weight: 600;
	transition: all .2s;
}

.modern-blog-theme .btn-blog-back:hover {
	background: var(--primary);
	color: var(--white);
	opacity: 1;
}

.modern-blog-theme .btn-blog-back .material-icons-outlined {
	font-size: 18px;
}


/* --------------------------------------------------------------------------
   7. サイドバー
        markup は common/module/blog_menu.tpl（共有モジュールのため編集不可）。
        旧 side.css:389- の水色 #6BD8FF ボーダーをブランド色に置き換える
   -------------------------------------------------------------------------- */

/* 260820 sticky（top:88px）をやめて通常配置に戻した。
   記事が増えると「新着の記事」が伸びてサイドバー自体がビューポートより高くなり、
   張り付いた状態では**下側が画面外に出たまま読めなくなる**（記事25本・カテゴリ5件で発生）。
   sticky は中身が画面に収まる高さのときしか成立しない。
   ※ヘッダー（.header）の sticky はそのまま。あちらは高さ69px固定なので問題にならない。 */
.modern-blog-theme #side {
	position: static;
}

.modern-blog-theme .side_blog {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.modern-blog-theme .side_blog:last-child {
	margin-bottom: 0;
}

.modern-blog-theme .side_blog_head {
	position: relative;
	background: var(--white);
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	padding: 14px 18px 13px 30px;
	text-align: left;
	font-size: .95rem;
	font-weight: 700;
	color: var(--text);
}

/* 旧: border-top: solid 4px #6BD8FF（水色の上線）→ 左のブランドカラーバーへ */
.modern-blog-theme .side_blog_head:before {
	content: '';
	display: block;
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 1em;
	border-top: none;
	border-radius: 2px;
	background: var(--primary);
	margin-bottom: 0;
}

.modern-blog-theme .side_blog_body {
	padding: 4px 18px 10px;
	border: none;
	border-radius: 0;
	text-align: left;
}

.modern-blog-theme .side_blog_body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modern-blog-theme .side_blog_body ul li {
	border-bottom: 1px dashed var(--border);
	text-align: left;
}

.modern-blog-theme .side_blog_body ul li:last-child {
	border-bottom: none;
}

.modern-blog-theme .side_blog_body ul li a {
	display: block;
	padding: 11px 0;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--text-light);
	word-break: break-word;
	overflow-wrap: anywhere;
	transition: color .2s;
}

.modern-blog-theme .side_blog_body ul li a:hover {
	color: var(--primary);
	opacity: 1;
}


/* --------------------------------------------------------------------------
   8. レスポンシブ
   -------------------------------------------------------------------------- */

/* タブレット: サイドバーを本文の下へ */
@media screen and (max-width: 1023px) {

	.modern-blog-theme .blog-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* 260820 sticky を全幅で廃止したため、この打ち消しは不要になった（残しても害は無い）。
	   1カラムに落ちる幅ではサイドバーが本文の下に回る */

	.modern-blog-theme .side_blog {
		margin-bottom: 16px;
	}
}

/* スマートフォン */
@media screen and (max-width: 767px) {

	/* page.top.css:60 の SP 用 .container { padding: 20px 15px } を打ち消す */
	.modern-blog-theme .container {
		padding: 0 16px;
	}


	.modern-blog-theme .blog-header-wrap {
		padding: 16px 0 20px;
	}

	.modern-blog-theme .blog-title {
		font-size: 1.22rem;
	}

	/* 260820 関連記事はSPで縦積み。3カラムのままだとサムネイルが潰れて何の画像か分からなくなる */
	.modern-blog-theme .blog-related-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.modern-blog-theme .blog-page-desc {
		font-size: .88rem;
		margin-top: 10px;
	}

	/* 1行に収め、あふれる分は末尾（記事タイトル）を … で省略する。
	   横スクロールを作らないので documentElement.scrollWidth は増えない */
	.modern-blog-theme .blog-breadcrumbs ol {
		font-size: .72rem;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.modern-blog-theme .blog-breadcrumbs li {
		white-space: nowrap;
	}

	.modern-blog-theme .blog-page {
		padding: 20px 0 40px;
	}

	/* カードは1カラム。page.top.css:1974 の min/max-width:75% を必ず潰す */
	.modern-blog-theme .blog-list-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.modern-blog-theme .blog-card {
		min-width: 0;
		max-width: none;
	}

	.modern-blog-theme .blog-card-body {
		padding: 14px 16px 12px;
	}

	.modern-blog-theme .blog-card-title {
		font-size: .94rem;
	}

	.modern-blog-theme .blog-detail-content {
		padding: 20px 16px 24px;
		border-radius: var(--radius);
	}

	.modern-blog-theme .blog-detail-block + .blog-detail-block {
		margin-top: 26px;
		padding-top: 22px;
	}

	.modern-blog-theme .blog-detail-block > h3 {
		font-size: 1.06rem;
		margin-bottom: 14px;
	}

	.modern-blog-theme .blog-detail-text {
		font-size: .89rem;
		line-height: 1.9;
	}

	.modern-blog-theme .blog-detail-notice {
		padding: 32px 18px;
	}

	.modern-blog-theme .btn-blog-back {
		width: 100%;
		justify-content: center;
	}

	.modern-blog-theme .blog-pager {
		padding: 26px 0 0;
	}

	.modern-blog-theme .blog-pager ul {
		gap: 4px;
	}

	.modern-blog-theme .blog-pager li > a,
	.modern-blog-theme .blog-pager li > span {
		min-width: 32px;
		height: 32px;
		font-size: .8rem;
	}
}