@charset "utf-8";
/* CSS Document */


/***********************
* Archive (category, tag, date...)
* sun-square.co.jp 用
* 影響範囲： body.archive 以下
***********************/
body.archive {
	--ink: #111;
	--muted: #666;
	--line: #e7ecf3;
	--card: #fff;
	--bg: #fafafa;
	--brand: #1070b4;   /* ブルー */
	--accent: #f5a440;  /* オレンジ */
	--ok: #5cc96a;      /* グリーン */
}

/* ===== ページ全体 ===== */
/* body.archive #wrapper {
background: var(--bg);
}
*/
body.archive main.archive {
	padding: clamp(16px, 2.5vw, 32px) 0 48px;
}

/* パンくず（テーマ準拠のid） */
body.archive #breadcrumb {
	margin: 0 0 16px;
	font-size: .9rem;
	color: var(--muted);
}
body.archive #breadcrumb a { color: var(--brand); }
body.archive #breadcrumb a:hover { text-decoration: underline; }

/* 見出し */
body.archive h2.archiev{
	position: relative;
	margin: 0 0 20px;
	padding: 8px 0 14px;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	border-bottom: 3px solid var(--brand);
}

/* カテゴリ説明（出力がある場合） */
body.archive .category-description{
	margin: 12px 0 24px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--muted);
	line-height: 1.7;
}

article{padding-left:20px; padding-right:20px;}

/* ===== 一覧リスト ===== */
/* #topnews が一覧のラッパー。カードグリッド化 */
body.archive #topnews{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
	gap: clamp(14px, 2.2vw, 20px);
	align-items: stretch;
}

#topnews .itiran-dd, #newposts .itiran-dd{width: auto;}

/* 各アイテム（itiran-dl）をカードとして扱う */
body.archive #topnews .itiran-dl{
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,.04);
	/*   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; */
}

/* クリック領域を全体に（既に .click-all を a に付与済） */
body.archive #topnews .itiran-dl > a.click-all{
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* サムネイルブロック */
body.archive #topnews .itiran-dt{
	position: relative;
	aspect-ratio: 16 / 10;
	background: #eef4fb;
	overflow: hidden;
	width: 100%;
	height: auto;
}

/* no-image でも高さをキープしてトリミング */
body.archive #topnews .itiran-dt img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

/* カテゴリバッジ */
body.archive #topnews .category_info{
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}
body.archive #topnews .category_info p{
	margin: 0;
	padding: 4px 10px;
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
	background: var(--brand);
	border-radius: 999px;
	letter-spacing: .02em;
}

/* テキストブロック */
body.archive #topnews .itiran-dd{
	position: relative;
	padding: 14px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* タイトル */
body.archive #topnews .itiran-dd h3{
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.45;
}
body.archive #topnews .itiran-dd h3 a{
	color: var(--ink);
	text-decoration: none;
}
body.archive #topnews .itiran-dd h3 a:hover{
	color: var(--brand);
	text-decoration: underline;
}

/* 投稿日時 */
body.archive #topnews .blog_info{
	margin-top: auto;
}
body.archive #topnews .blog_info p{
	margin: 0;
	font-size: .82rem;
	color: var(--muted);
}

/* ホバー効果（画像ズーム＆カード持ち上がり） */
@media (hover:hover){
	body.archive #topnews .itiran-dl:hover{
		transform: translateY(-4px);
		box-shadow: 0 10px 26px rgba(0,0,0,.08);
		border-color: #dfe7ef;
	}
	body.archive #topnews .itiran-dl:hover .itiran-dt img{
		transform: scale(1.04);
	}
}

/* ===== ページネーション（テーマの.pagination等があれば上書き） ===== */
body.archive .pagination,
body.archive .wp-pagenavi{
	margin: 28px 0 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
body.archive .pagination a,
body.archive .wp-pagenavi a,
body.archive .wp-pagenavi span{
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.archive .pagination a:hover,
body.archive .wp-pagenavi a:hover{
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}
body.archive .wp-pagenavi .current{
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	font-weight: 700;
}

/* ===== CTA ===== */
#cta-area{
	display: none;
}
/* body.archive #cta-area{
margin-top: 36px;
text-align: center;
}
body.archive #cta-area .cta{
display: flex;
justify-content: center;
}
body.archive .cta-modern{
position: relative;
display: inline-flex;
align-items: center;
gap: .6em;
padding: 14px 24px;
border-radius: 999px;
background: linear-gradient(135deg, var(--brand), #2890de);
color: #fff;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px rgba(16,112,180,.25);
transition: transform .15s ease, box-shadow .15s ease;
}
body.archive .cta-modern::after{
content: "→";
font-weight: 700;
transform: translateX(0);
transition: transform .15s ease;
}
body.archive .cta-modern:hover{
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(16,112,180,.32);
}
body.archive .cta-modern:hover::after{
transform: translateX(3px);
}
*/
/* ===== サイドバー（今回は非表示クラス none-sidebar が付与） ===== */
body.archive .none-sidebar #side{
	display: none;
}

/* ===== 細かなユーティリティ ===== */
body.archive .ripple { /* テーマのrippleがある前提。軽い押下感だけ補強 */
	-webkit-tap-highlight-color: transparent;
	height: auto;
    width: 100%;
}

/* ===== レスポンシブ調整 ===== */
@media (max-width: 960px){
	body.archive #topnews{
		grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
	}
}
@media (max-width: 600px){
	body.archive main.archive{
		padding: 12px 0 36px;
	}
	body.archive #topnews{
		grid-template-columns: 1fr;
		gap: 14px;
	}
	body.archive #topnews .itiran-dt{ aspect-ratio: 16/9; }
	body.archive .cta-modern{ width: min(92%, 560px); justify-content: center; }
}



#content{
	position: relative;
}

#content:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(90deg, #2B7DF5, #00C2A8);
}