body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ================================
	 NEWS：レイアウト土台
================================ */

/* 一覧全体の横幅（トップと同等の 69%） */
.news-inner{
	width:69%;
	margin:0 auto 4vh;
}

/* UL 初期化（箇条書き/余白リセット） */
.news-list{
	list-style:none;
	margin:0;
	padding:0;
}

/* ================================
	 NEWS：1件の行（details/summary）
================================ */

/* 各行の上下ボーダー（details に持たせる） */
.news-item details{
	border-top: 0.12vw solid rgba(230,0,0,.18);
}
.news-item:last-child details{
	border-bottom: 0.12vw solid rgba(230,0,0,.18);
}

/* 1行ヘッダー（クリック領域 = summary） */
.news-item summary{
	list-style:none;                /* Safari 対策 */
	cursor:pointer;
	display:grid;                   /* 日付 / バッジ / タイトル / 矢印 の 4カラム */
	grid-template-columns: 6vw max-content 1fr 2.4vw;
	align-items:center;
	gap:1.4vw;
	padding:2.4vh 1vh;
	background:transparent;
	-webkit-user-select:none;
	user-select:none;
}
/* 既定のディスクマーカーを非表示 */
.news-item summary::-webkit-details-marker{ display:none; }

/* ================================
	 NEWS：行内テキスト
================================ */

/* 日付 */
.news-item .date{
	font-variant-numeric: tabular-nums;
	font-size:1.15vw;
	white-space:nowrap;
	line-height:1;
}

/* タイトル */
.news-item .text{
	font-size:1.15vw;
	font-weight:500;
	line-height:1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	justify-self:start;
}

/* ================================
	 NEWS：行末の矢印（開閉表示）
================================ */

/* デフォルトは横三角（▶） */
.news-item .caret::before{
	content:"▷";
	display:inline-block;
	color:#e60000;
	font-size:1.2em;
	transition: transform .2s ease;
}

/* open 時は下三角（▼） */
.news-item details[open] .caret::before{
	content:"▼";
}

/* summary ホバーの薄いハイライト */
.news-item summary:hover{
	background: rgba(255,255,255,.35);
}

/* ================================
	 NEWS：詳細本文（開閉アニメーション）
================================ */

.news-item .detail{
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding: 0 1vh;
	transition: max-height .4s ease, opacity .25s ease, padding .4s ease;
	font-size: 1vw;
	line-height: 1.85;
	color:#222;
}
.news-item .detail p{ margin: 1vh 0; }
.news-item .detail img{
	max-width:100%;
	height:auto;
	display:block;
	margin:1vh 0;
	border-radius:.6vh;
}

/* open 時の背景（ほんのり白化させたい場合のフック） */
.news-item details[open]{
	transition: background .2s ease;
}

/* ================================
	 NEWS：カテゴリバッジ
================================ */

/* バッジ共通スタイル */
.tag{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:4.8vw;
	height:1.7vw;
	padding:0;
	border-radius:999px;
	font-size:0.8vw;
	font-weight:500;
	line-height:1;
	white-space:nowrap;
	user-select:none;
	border:1px solid transparent;
}

/* カラーバリエーション（topPage.css と揃え） */
.tag.news{
	background:#fff;
	color:#0b63c9;
	border-color:rgb(164, 203, 255);
}
.tag.event{
	background:rgb(255, 247, 219);
	color:#b27300;
	border-color:rgb(255, 224, 151);
}
.tag.new{
	background:rgb(255, 244, 248);
	color:#d60033;
	border-color:rgb(255, 187, 204);
}

/* ================================
	 “もっと見る” ボタン
================================ */

.more-btn-wrap{
	text-align:center;
	margin:4vh 0;
}
.more-btn{
	display:inline-block;
	padding:2vh 4vw;
	border:.1vh solid #e60000;
	border-radius:999px;
	color:#e60000;
	font-weight:700;
	font-size:1.15vw;
	text-decoration:none;
	transition: background .25s, color .25s, transform .08s;
	background-color: #fff;
	cursor: pointer;
}
.more-btn:hover{ background:#e60000; color:#fff; }
.more-btn:active{ transform: translateY(1px); }

/* =========================================================
	 Responsive（～900px）
========================================================= */
@media (max-width:900px){

	/* 幅を広げてマージン少なめに */
	.news-inner{
		width:88%;
		margin:0 auto 2vh;
	}

	/* UL 初期化（念のため） */
	.news-list{
		margin:0;
		padding:0;
	}

	/* 1行ヘッダーのグリッドをスマホ用に再配列 */
	.news-item summary{
		grid-template-columns: 16vw auto 1fr 5vw !important;
		gap:2.5vw;
		padding:2vh 0 2vh 0.4vh;
	}

	/* 日付を大きく */
	.news-item .date{
		font-size:3.1vw;
	}

	/* タイトルは複数行折返し可にして読みやすく */
	.news-item .text{
		font-size:3.1vw;
		line-height:1.8;
		white-space:normal !important;
		overflow-wrap:break-word !important;
	}

	/* 右端矢印の位置調整＋サイズUP */
	.news-item .caret{
		justify-self: end;
	}
	.news-item .caret::before{
		font-size:4vw;
	}

	/* 詳細本文の文字を少し大きく */
	.news-item .detail{
		opacity: 0;
		padding: 1vh 1vh !important;
		font-size: 3vw;
	}

	/* バッジサイズを拡大 */
	.tag{
		width:10.7vw;
		height:4.4vw;
		font-size:2.1vw;
	}

	/* “もっと見る” の位置調整（右寄せ＋縦位置微調整） */
	.more-btn-wrap{
		text-align: right;
		margin:0 2.6vw;
		transform: translateY(38%);
	}
	.more-btn{
		padding:1.15vh 5.4vw 1.4vh;
		font-size:2.4vw;
	}
}