/*
	クリエイトジャパンWebパーツ
	スマホチャート
	2025/11/18		MK	Y.Fujii
*/

*
{
	margin:				0;
	padding:			0;
}

/* 値段 */
#pricebody
{
	width:				100vw;
	height:				98%;
	margin:				0 auto;
	position;			fixed;
	overflow:			hidden;
}

/* 一番上 */
#headline
{
	width:				100%;
	height:				36px;
}

/* 銘柄 */
#brand
{
	width:				100%;
	height:				24px;
	margin-top:			8px;
}

#brd_select
{
	float:				left;
	width:				58%;
	height:				100%;
	margin-left:		4px;
	font-size:			12px;
}

.brand_select
{
	float:				left;
	width:				54%;
	margin-left:		4px;
	font-size:			12px;
	padding-left:		5px;
	padding-right:		5px;
}

.dlvm_select
{
	float:				left;
	width:				36%;
	margin-left:		4px;
	font-size:			12px;
	padding-left:		5px;
	padding-right:		5px;
}


/* データ詳細 */
#datadetail
{
	float:				right;
	width:				40%;
	height:				12px;
	font-size:			10px;
	margin-top:			4px;
}

/*
#dlvmname
{
	width:				100%;
	float:				left;
}
*/

/* データ日付 */
#datadate
{
	width:				100%;
	float:				right;
	text-align:		right;
	margin-right:		20px;
}

/* 最新値 */
#closedata
{
	width:				100%;
	float:				right;
	text-align:		right;
	margin-right:		20px;
}

.dataframe
{
	margin-top:		-10px;
	width:				100%;
	float:				right:
}

/* 国旗 */
#flag
{
	float:				left;
	width:				18%;
	height:				100%;
	margin-left:		4px;
}

/* 国旗画像 */
.flagimage
{
	vertical-align:	top;
	margin-top:			6px;
}

/* 銘柄名称とデータ日付 */
#branddate
{
	width:				96%;
	height:				100%;
}

/* 銘柄名称 */
#brandname
{
	width:				100%;
	height:				50%;
	font-size:			16px;
}

/* チャート切り替えタブ */
#charttab
{
	clear:				both;
	width:				calc( 100% - 78px );
	height:				20px;
	margin-top:			4px;
	margin-left:		8px;
}

/* 日足 */
#chartday
{
	float:				left;
	width:				29%;
	height:				20px;
	line-height:		20px;
	font-size:			12px;
	text-align:			center;
	padding:			0px 2px 0px 2px;
	margin:				0px 2px 0px 2px;
	margin-left:		-webkit-calc(10% / 2 - 14px);
	margin-left:		calc(10% / 2 - 14px);
	border-width:		1px 1px 0px 1px;
	border-collapse:	collapse;
	border-color:		#CCCCCC;
	border-style:		solid;
	border-radius:		8px 8px 0px 0px;
	cursor:				pointer;
}

/* 週足 */
#chartwee
{
	float:				left;
	width:				29%;
	height:				20px;
	line-height:		20px;
	font-size:			12px;
	text-align:			center;
	padding:			0px 2px 0px 2px;
	margin:				0px 2px 0px 2px;
	border-width:		1px 1px 0px 1px;
	border-collapse:	collapse;
	border-color:		#CCCCCC;
	border-style:		solid;
	border-radius:		8px 8px 0px 0px;
	cursor:				pointer;
}

/* 月足 */
#chartmon
{
	float:				left;
	width:				29%;
	height:				20px;
	line-height:		20px;
	font-size:			12px;
	text-align:			center;
	padding:			0px 2px 0px 2px;
	margin:				0px 2px 0px 2px;
	border-width:		1px 1px 0px 1px;
	border-collapse:	collapse;
	border-color:		#CCCCCC;
	border-style:		solid;
	border-radius:		8px 8px 0px 0px;
	cursor:				pointer;
}

/* タブアクティブ */
.tabactive
{
	background-color:	#70AD47;
	color:				#FFFFFF;
	font-weight:		bold;
}

/* タブ通常 */
.tabnoactive
{
	background-color:	#FFFFFF;
	color:				#000000;
	font-weight:		bold;
}

/* チャート表示領域 */
#chartarea
{
	margin-top:			0px;
	width:				100%;
	height:				calc( 100% - 75px );
/*	border:				1px solid red;*/
}

/* 移動平均線の説明 */
#chartlegend
{
/*	position:			fixed;
	bottom:				-40;*/
	width:				186px;
	height:				12px;
	margin:				4px auto;
}

#line1
{
	float:				left;
	width:				18px;
	height:				0;
	margin-top:			6px;
	border-width:		2px 0px 2px 0px;
	border-collapse:	collapse;
	border-color:		#99CC00;
	border-style:		solid;
}

#line1-text
{
	float:				left;
	width:				44px;
	height:				18px;
	text-align:			center;
	line-height:		18px;
	font-size:			12px;
}

#line2
{
	float:				left;
	width:				18px;
	height:				0;
	margin-top:			6px;
	border-width:		2px 0px 2px 0px;
	border-collapse:	collapse;
	border-color:		#9900FF;
	border-style:		solid;
}

#line2-text
{
	float:				left;
	width:				44px;
	height:				18px;
	text-align:			center;
	line-height:		18px;
	font-size:			12px;
}

#line3
{
	float:				left;
	width:				18px;
	height:				0;
	margin-top:			6px;
	border-width:		2px 0px 2px 0px;
	border-collapse:	collapse;
	border-color:		#FF3300;
	border-style:		solid;
}

#line3-text
{
	float:				left;
	width:				44px;
	height:				18px;
	text-align:			center;
	line-height:		18px;
	font-size:			12px;
}

/* フッター */
#footer
{
	position:			fixed;
	left:				0;
	bottom:				0;
	width:				100%;
	height:				34px;
	margin-top:			0px;
	border-width:		3px 0px 0px 0px;
	border-collapse:	collapse;
	border-color:		#666666;
	border-style:		solid;
	font-size:			10px;
}

#copyright
{
	width:				100%;
	height:				14px;
	background-color:	#E6E6E6;
	position:			relative;
}

#copymes
{
	position:			absolute;
	width:				100%;
	height:				100%;
	top:				0px;
	text-align:			center;
	color:				#000000;
	font-size:			10px;
}

/* 横向きにした時 */
@media screen and (orientation: landscape)
{
	#headline
	{
		display:			none;
		height:				0px;
/*
		border-width:		0px 0px 2px 0px;
		border-collapse:	collapse;
		border-color:		#666666;
		border-style:		solid;
*/
	}

	#titlebar
	{
		height:				0px;
		display:			none;
	}

	#brand
	{
		width:				50%;
		margin-top:		0px;
		float:				left;
	}

	#pricedetail
	{
		width:				50%;
		float:				left;
		margin:				1.3em 0 0 0;
	}


/* 直近値タイトル */
	#lastprctitle
	{
		width:				16%;
	}

	/* 直近値 */
	#lastprice
	{
		width:				28%;
		padding-right:		16px;
	}

	/* 前日比タイトル */
	#changetitle
	{
		width:				18%;
	}

	/* 前日比 */
	#chgprc
	{
		width:				22%;
	}

	/* チャート切り替えタブ */
	#charttab
	{
		height:				20px;
		margin-top:		0px;
	}

	/* 3ヶ月 */
	#chart3m
	{
		height:				20px;
		line-height:		20px;
		font-size:			14px;
	}

	/* 1年 */
	#chart1y
	{
		height:				20px;
		line-height:		20px;
		font-size:			14px;
	}

	/* 3年 */
	#chart3y
	{
		height:				20px;
		line-height:		20px;
		font-size:			14px;
	}

	/* 10年 */
	#chart10y
	{
		height:				20px;
		line-height:		20px;
		font-size:			14px;
	}

	#footer
	{
		height:				18px;
	}

	#copyright
	{
		height:				14px;
		display:			none;
	}
}