/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
.new-top * {margin: 0;padding: 0;}

/*ブロック全体*/
.new-top {
	position: absolute;
	top: 80vh;	/*上から80%の場所に配置*/
	left: 20vh;	/*左から10%の場所に配置*/
	z-index: 1;
	width: 70vw;	/*幅は80%*/
	margin-left: 10vw;	/*左に10%空ける*/
	display: flex;
	align-items: center;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: #fff;	/*背景色。*/
	border-radius: 5px;	/*角を丸くする*/
}

/*マウスオン時に透明度を80%に*/
.new-top a:hover {
	opacity: 0.8;
}

/*「お知らせ」の見出し*/
.new-top h2 {
	font-size: 1rem;
	font-weight: normal;
	background: #555;	/*背景色*/
	color: #fff;		/*文字色*/
	border-radius: 3px;	/*角を少しだけ丸く*/
	margin-right: 1rem;	/*右に空けるスペース。テキストブロックとの間に空けるスペースです。*/
	padding: 0 1rem;	/*見出し内の余白。上は0で、左右に１文字分。*/
}

/*テキストのブロック*/
.new-top .text {
	flex: 1;
	
	/*以下4行は、末尾を...として１行にまとめる為のスタイル*/
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ▼ お知らせ枠の文字色を読みやすく（白背景に黒系） */
.new-top { color: #222; }                 /* デフォルト文字色 */
.new-top .text,
.new-top .text * { color: inherit; }      /* 中の要素も継承 */
.new-top .new-list a {
  color: #222;                            /* 「一覧」リンクも黒系 */
  background: #eee;
  padding: .4rem .8rem;
  border-radius: 4px;
  text-decoration: none;
}

/* もしまだ白文字になる場合は以下を有効化（上書き用） */
/* .new-top .text a { color:#222 !important; } */

/*ブロック右側にある「一覧」*/
.new-top .new-list {
	align-self: flex-end;
}

/* --- 最新お知らせの強調表示 --- */
.new-top .text .date { margin-right: .8rem; color: #555; }
.new-top .text .label { font-weight: 700; }

/* 継承指定よりも強く効かせるためにセレクタを具体化 + !important */
.new-top .text .flash-new {
  color: #e6002d !important;   /* 赤 */
  font-weight: 800;
  display: inline-block;       /* 変形のため */
  animation: pulseNew 1.2s ease-in-out infinite;
}

@keyframes pulseNew {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.25); opacity: .85; }
}