/*切符の部屋用(切符の表用) *********************************************************
	作成者：阿久津　祐一
	初版	：2005.12.23.
		：2012.12.16.
		：2020.02.17.	tick_event_mdl, tick_not_have_mdl, tick_had_mdl を追加
		：2020.03.11.	スクロール時に先頭行と最左列を固定
						tick_event_left_top,
						tick_event_left_mdl,
						tick_event_left_btm　を追加
		：2020.07.31.	div.event_boxを追加
		：2022.03.09.	ベンダープレフィックス削除
***************************************************************************** */

/* 切符の表の入れ物 ............................................................ */
table.table_ticks
{
	width		: 100%;
	margin		: 0px;
	padding		: 0px;
	border-width: 0px;
	border-color: transparent;
	border-style: none;
}

div#sub_body table.table_ticks
{
	width		: auto;
	margin-left	: auto; 
	margin-right: auto; 
}

table.table_ticks td
{ 
	vertical-align	: top;
	position		: relative;
	padding			: 0px;
	margin			: 0px;
	border-width	: 0px;
	border-color	: transparent;
	border-style	: none;
}

/* 切符の表 .................................................................. */
table.table_tick
{
	font-size:14px;
	line-height:14px;
	border-style: none; 
	margin		: 0;
	padding		: 0 0 var(--space___wide___) 0;
	z-index		: 6;
}

/* 縦スクロール時に固定する ..................................................... */
table.table_tick thead th,
table.table_kind thead th
{
	position	: sticky;
	top			: 0px;
	white-space	: nowrap;/* 高さが変わらないよう改行させない */
}
table.table_tick thead tr:nth-child(1) th
{
	top			: 0px;
	z-index		: 5;
}
table.table_tick thead tr:nth-child(2) th
{
	top			: 22px; /* 2行目は1行目の高さの位置に固定する */
	z-index		: 5;
}

table.table_tick thead tr:nth-child(3) th
{
	top			: 42px; /* 3行目は2行目の高さの位置に固定する */
	z-index		: 5;
}
table.table_kind tbody td,
table.table_kind tbody td.kind_icon ul.class_navi
{
	z-index		: 4;
}

/* 横スクロール時に固定する ..................................................... */
table.table_tick thead th.tick_kind:first-child,
table.table_tick thead th.tick_line_name:first-child,
table.table_tick tbody td.tick_event_left,
table.table_tick tbody th.tick_kind_vert,
table.table_tick tbody td.tick_kind
{
	position: sticky;
	left	: 0px;
}
table.table_tick thead th.tick_kind:first-child,
table.table_tick thead th.tick_line_name:first-child
{
	z-index		: 7; /* ヘッダー行内の他のセルより手前に表示する */
}
table.table_tick tbody td.tick_event_left,
table.table_tick tbody th.tick_kind_vert,
table.table_tick tbody td.tick_kind
{
	z-index		: 3; /* データ行内の他のセルより手前に表示する */
}

/* 共通部( table_tick ) ...................................................... */
* th,
* td.pseudo_th,
* td.tick_line_name,
* td.tick_kind,
* td.tick_kind_vert
{
	--th_font_color	: white;
	text-align		: center;
	color			: var(--th_font_color);
	border-style	: solid;
	border-width	: 1px;
}

* th,
* td.pseudo_th
{
	--th_back_color		: var(--neck_color-point-main__);
	--th_border_width	: 1px;
	--th_border_style	: outset;
	font-family			: var(--font_gothic);
	background-color	: var(--th_back_color);
	border				: var(--th_border_width)
						  var(--th_border_style)
						  var(--th_back_color);
}

* th.tick_kind,
* td.tick_kind,
* th.tick_kind_vert
{
	--th_kind_back_color	: var(--neck_color-point-dark__);
	--th_kind_border_width	: 1px;
	--th_kind_border_style	: outset;
	font-family				: var(--font_gothic);
	background-color		: var(--th_kind_back_color);
	border					: var(--th_kind_border_width)
							  var(--th_kind_border_style)
							  var(--th_kind_back_color);
}

* th.tick_line_name,
* td.tick_line_name
{ 
	--th_line_back_color	: var(--neck_color-point-medium);
	--th_line_border_width	: 1px;
	--th_line_border_style	: outset;
	font-family				: var(--font_mincho);
	background-color		: var(--th_line_back_color);
	border					: var(--th_line_border_width)
							  var(--th_line_border_style)
							  var(--th_line_back_color);
}

table.table_tick td
{
	font-size:14px;
	text-align		: center; 
	vertical-align	: top; 
	border			: solid 1px;
	border-color	: transparent;
}

table.table_tick td p
{
	font-size:1em;
	text-align		: left; 
	margin-top		: 0; 
	margin-bottom	: 0;
}

/* 券の種類セル .............................................................. */

/* 券の種類セル〜券の図版が縦並び( _prt ) ........................................ */
th.tick_kind
{ 
/*	min-width: 10em; 
	max-width: 24em;*/
}

/* 券の種類セル〜券の図版が横並び( _lnd ) ........................................ */
th.tick_kind_vert
{ 
	min-width: 1em; 
	max-width: 1em;
	writing-mode : vertical-rl;
}

/* 図版セル .................................................................. */
.table_tick td.tick_not_exist,
.table_tick td.tick_have_list,
.table_tick td.tick_had,
.table_tick td.tick_not_have
{
	font-family	: var(--font_gothic);
	padding		: var(--neck_size-font-medium__);
	border-style: inset;
}

.table_tick td.tick_not_exist,
.table_tick td.tick_have_list,
.table_tick td.tick_had,
.table_tick td.tick_not_have
{ 
	color			: var(--neck_color-image-medium);
	background-color: var(--neck_color-gray_-dark__);
	border-color	: var(--neck_color-gray_-medium);
}

.table_tick td.tick_not_exist	p,
.table_tick td.tick_have_list	p,
.table_tick td.tick_had			p,
.table_tick td.tick_not_have	p
{
	text-align	: center;
}

/* 解説文など長い場合 */
.table_tick td.tick_not_exist	p.exp,
.table_tick td.tick_have_list	p.exp,
.table_tick td.tick_had			p.exp,
.table_tick td.tick_not_have	p.exp
{
	text-align	: left;
	line-height	: 1.5em;
	text-indent	: 1em;
}

table.table_tick td.tick_not_have
{ 
	color			: black; 
	background-color: var(--neck_color-image-pale__);
	border-color	: var(--neck_color-image-pale__);
}

table.table_tick td.tick_not_exist
{ 
	vertical-align	: middle;
	background-color: var(--neck_color-gray_-light_);
	border-color	: var(--neck_color-gray_-pale__);
}

/* 記事のセル ................................................................. */
.table_tick td.tick_event,
.table_tick td.tick_event_left,
.table_tick td.estim_period
{
	font-size:12px;
	padding			: var(--space___wide___)
					  var(--space___narrow_)
					  var(--space___wide___)
					  var(--space___narrow_);
	border-style	: none;
	background-image: linear-gradient( var(--button_over__) );
	background-color: var(--neck_color-point-medium);
}

.table_tick td.estim_period
{
	background-image: linear-gradient( var(--button_over__) );
	background-color: var(--neck_color-image-pale__);
}

td.tick_event		p,
td.tick_event_left	p,
td.estim_period
{
/*	font-size: var(--neck_size-font_smallish);*/
	font-size:12px;
	line-height:14px;
}

/* 記事の段落 ................................................................. */
* p.date
{
	font-size	: 1em;
	color		: var(--neck_color-point-deep__); 
	text-indent	: calc(-1 * 1em); 
	margin-left	: var(--neck_size-font_smallish);
}

* p.head_line
{ 
	font-weight: bold;
}

* p.note
{ 
	color		: var(--neck_color-accnt-dark__); 
	text-indent: calc(-1 * 1em);
	margin-left: 2em;
	white-space: normal;
	word-break : normal;
}

* .note:before
{
	content:"★";
}

/* 解説セル .................................................................. */
/*.table_tick td.tick_comment*/
.tick_comment
{
	--comment_back_color	: var(--neck_color-image-pale__);
	padding			: var(--space___narrow_)
					  var(--space___narrow_)
					  var(--space___narrow_)
					  var(--space___narrow_);
	border-style	: none;
	background-image: linear-gradient( var(--button_over__) );
	background-color: var(--comment_back_color);
}

.table_tick td.tick_comment
{
	color		: var(--comment_color);
	font-size	: var(--neck_size-font-medium__);
	text-align	: left;
	padding			: var(--space___narrow_)
					  0.5em
					  var(--space___narrow_)
					  0.5em;
}

.table_tick td.tick_comment p
{
	font-family	: var(--font_mincho);
	font-size:1em;
	line-height	: 1.5em;
	text-indent	: var(--neck_size-font-medium__);
	text-align	: left;
	padding		: 0 0 0 0;
}

.table_tick td.tick_comment p.hanging
{
	margin-left	: calc( 1 * var(--neck_size-font-medium__));
	text-indent	: calc(-1 * var(--neck_size-font-medium__));
}

.comment_cell_back
{
	background-image: linear-gradient( var(--button_over__) );
	background-color: var(--ticket_srmwht_pale);
}

/* 記事の区切り =============================================================== */
hr.separate,
hr.caption
{
	position		: relative;
	height			: var(--border_wdt_thin);
	background		: none;
	border			: none;
	border-top		: var(--border_wdt_thin)
					  dotted
					  var(--neck_color-gray_-medium);
	outline			: none;
	margin			: var(--space__-medium_) /*上*/
					  var(--space___narrow_) /*右*/
					  var(--space___narrow_) /*下*/
					  var(--space___narrow_);/*左*/
}

hr.caption
{
	margin-top		: var(--space___wide___);
	margin-bottom	: var(--space___little_);
}

hr.caption:before
{
	--hr_cap_bkcolor: var(--neck_color-point-light_);
	font-size:inherit;
	content			: attr(data-symbol);
	position		: absolute;
	top				: calc(-1 * var(--space___little_));
	left			: var(--space__-medium_);
	background-color: var(--hr_cap_bkcolor);
	border			: solid;
	border-width	: var(--border_wdt_thin);
	padding-left	: var(--space___ex_fine) /*上*/
					  var(--space___narrow_) /*右*/
					  var(--space___ex_fine) /*下*/
					  var(--space___narrow_);/*左*/
}

/* 追加記事 =================================================================== */

:root
{
	--event_box_top		: var(--space___narrow_);
	--event_box_left	: var(--space___narrow_);
	--event_box_width	: 12em;
}

div.event_box
{
	color		: var(--neck_color-accnt-dark__);
	background-color: rgba(255,255,255,0.85);
	border-style: groove;
	border-width: var(--border_wdt_mdum);
	border-color: var(--neck_color-point-medium);
	margin		: 0;
	padding		: var(--space___narrow_);
	position	: absolute;
	z-index		: 1;
	top			: var(--event_box_top);
	left		: var(--event_box_left);
	width		: var(--event_box_width);
	float		: left;
	display		: block;
}

div.event_box p
{
	text-align	: left !important;
	font-family	: var(--font_mincho);
	font-size	: var(--neck_size-font_smallish);
	text-indent	: calc(-1 * var(--neck_size-font_smallish)); 
	margin-left	: var(--neck_size-font_smallish);
	line-height	: var(--neck_size-font_smallish);
}

div.event_box p:before
{
	content		: "★";
}

div.event_box p.event_title
{
	text-align	: center;
}

div.event_box p.event_title:before
{
	content		: none;
}

/* 車内券の様式で使用 .......................................................... */
* .note_simple
{
	text-indent: var(--neck_size-font_smallish); 
	margin-left: var(--neck_size-font_smallish);
}

* .note_bullets/* 車内券の様式で使用 */
{ 
	text-indent: calc(-1 * var(--neck_size-font_smallish)); 
	margin-left: calc( 2 * var(--neck_size-font_smallish));
}

* .note_bullets_sub/* 車内券の様式で使用 */
{ 
	text-indent: calc(-1 * var(--neck_size-font_smallish)); 
	margin-left: calc( 3 * var(--neck_size-font_smallish));
}