/*
	クリエイトジャパン　ニュース
	PC向け FX

	2025.11.10	MK	Y.Fujii
*/

body
{
	margin-top:				4px;
	background-color:		#FFFFFF;
}

.header
{
	width:			800px;
	margin:			0 auto;
}

.news_title
{
	float:			left;
/*	width:			620px;*/
	margin-left:	240px;
	font-size:		24px;
	text-align:		center;
	font-weight:	bold;
	margin-bottom:	14px;
}

/* ニュース枠 */
.news_frame
{
	clear:			both;
	width:			900px;
	font-size:		20px;

	/* 真ん中に表示する(本番では削除するかも) */
	margin:			0 auto;

	/* 確認用で線を引く */
/*	border: solid #444444 1px;*/
}

/* スマホ用ニュース本文を表示する領域 */
.news_framesp
{
	width:			100%;
	display:		none;
}

/* ページの表示枠 */
/* ニュース枠内に表示するので幅は100% */
.page_frame
{
	width:			100%;
	display:		flex;
	justify-content:	center;

	/* 確認用で線を引く */
/*	border:			solid #444444 1px;*/
}

/* ページ数を表示する枠 */
.page_no
{
	width:			24px;
	height:			18px;
	font-size:		14px;
	text-align:		center;
	margin:			0px 4px 0px 4px;
	border:			solid #444444 1px;
	cursor:			pointer;
}

/* 次ページ、前ページ、最新の枠 */
.page_move
{
	width:			60px;
	height:			18px;
	font-size:		14px;
	text-align:		center;
	margin:			0px 4px 0px 4px;
	border:			solid #444444 1px;
	cursor:			pointer;
}

/* 現在表示しているページ */
.page_active
{
	background-color:	#4444AA;
	color:				#FFFFFF;
	cursor:				default;
}

/* ヘッドライン全体(日時とヘッドライン)を表示する枠 */
#headline_list
{
	width:			100%;
}

.headline_frame
{
	width:			calc(100% - 2px);
	margin-top:		10px;
	/* 確認用で線を引く */
/*	border: solid #444444 1px;*/
}

/* ニュースの日時を表示する枠 */
.news_datetime
{
	width:			140px;
	font-size:		14px;
	color:			#16508A;
	margin:			1px 0px 0px 4px;
	float:			left;
}

.headline_body
{
	width:			750px;
	height:			24px;
	color:			#5C0138;
	font-size:		16px;
	margin-left:	0px;
	float:			left;
	cursor:			pointer;
}

.headline_body:hover
{
	background-color:	#CCCCDD;
}

/* ページ切り替えボタンにマウスが乗った時に色を変える */
.page_no:hover, .page_move:hover
{
	background-color:	#BBBBEE;
}

.page_active:hover
{
	background-color:	#4444AA;
}

.nolink
{
	cursor:				default;
}

/* 本文用(textpc.php) */
.news_titlebody
{
	clear:			both;
	width:			140px;
	float:			left;
	margin:			0 auto;
	font-size:		24px;
/*	text-align:		center;*/
	font-weight:	bold;
	margin-bottom:	14px;
	margin-left:	270px;
}

.news_framebody
{
	width:		90%;
	font-size:	20px;
	margin:		0 auto;
	clear:		both;
}

.news_datetimebody
{
	float:			right;
/*	width:			90%;*/
	margin-top:	10px;
	margin-right:	80px;
	font-size:		16px;
	color:			#16508A;
}

.news_headline
{
	clear:			both;
	width:			90%;
	font-weight:	bold;
	font-size:		20px;
	margin-bottom:	10px;
	overflow-wrap:	break-word;
	border-width:		0px 0px 2px 0px;
	border-collapse:	collapse;
	border-color:		#CCCCCC;
	border-style:		solid;
}

.news_body
{
	width:			90%;
	font-size:		18px;
	overflow-wrap:	break-word;
}

.return_btn
{
	width:				40px;
	float:				right;
	font-size:			14px;
	text-align:			center;
	border-width:		1px 1px 1px 1px;
	border-collapse:	collapse;
	border-color:		#666666;
	border-style:		solid;
/*	border-radius:		8px;*/
	margin-right:		100px;
	cursor:				pointer;
}

.btn_center
{
	clear:				both;
	width:				70px;
	font-size:			18px;
	text-align:			center;
	border-width:		1px 1px 1px 1px;
	border-collapse:	collapse;
	border-color:		#666666;
	border-style:		solid;
	border-radius:		8px;
	cursor:				pointer;
	margin:				0 auto;
}

/* フッターテキスト */
.footer_text
{
	position:			fixed;
	font-size:			14px;
	width:				900px;
	bottom:			0;
	margin:			0 auto;
}

.tooltip {
  position: relative; /* 親要素を基準に配置 */
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* 親要素の上に表示 */
  left: 400%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 900px)
{
	.news_frame
	{
		width:			800px;
	}

	.news_datetime
	{
		width:			120px;
		font-size:		12px;
	}

	.headline_body
	{
		width:			650px;
		font-size:		14px;
	}

	.news_datetimebody
	{
		font-size:		14px;
	}

	.news_headline
	{
		font-size:		18px;
	}

	.news_body
	{
		font-size:		16px;
	}
}