/*
	クリエイトジャパン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;
}

/* イオン銀行ロゴ */
#logo
{
/*	float:				right;*/
/*	width:				calc(100% - 72px);*/
	width:				130px;
	height:				100%;
/*	margin:				4px 0px 0px 4px;*/
	margin:				14px auto;
}

.titlelogo
{
	width:		110px;
	height:		21px;
}

/* クローズボタン */
#closebutton
{
	float:				right;
	width:				64px;
	height:				100%;
	margin-top:			2px;
	cursor:				pointer;
	margin:				4px 4px 0px 0px;
}

/* タイトル */
#titlebar
{
	clear:				both;
	width:				100%;
	height:				52px;
}

/* 情報名名称 */
/*
#item
{
	width:				100%;
	height:				100%;
	padding-top:		4px;
	font-size:			14px;
	background-color:	#DDDDDD;
	border-width:		2px 0px 0px 0px;
	border-collapse:	collapse;
	border-color:		#666666;
	border-style:		solid;
}
*/

#item
{
	font-size: 18px;
	font-weight: bold;
	padding: 14px 10px 10px;
	margin: 0 -10px 15px;
	background: #ebebeb;
	border-top: 1px solid #adadad;
	border-bottom: 3px solid #b60081;
	box-shadow: inset 0 1px 0 white, inset 0 5px 5px rgba(0, 0, 0, 0.12);
	-webkit-box-shadow: inset 0 1px 0 white, inset 0 5px 5px rgba(0, 0, 0, 0.12);
}


/* 情報名名称の下線 */
.redline
{
	border-bottom:		2px solid #FF0000;
}

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

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

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

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

#cnflag
{
	width:				46px;
	float:				left;
	margin-left:		6px;
	margin-top:		0px;
	vertical-align:	middle;
}

/* データ日付 */
#datadate
{
	width:				40%;
	float:				right;
	margin-top:		0px;
}

#closedata
{
	width:				33%;
	float:				right;
	margin-top:		0px;
}


/* 国旗 */
#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;
	}
}