﻿/*別館コンテンツ－特集●普通列車・山陰ページの本文ＣＳＳ - メニュー集約対応版*/
/**major_update_231014** メニュー表示オブジェクト化 ver0.00*/


@charset "UTF-8";

body {
	font-family :"ＭＳ ゴシック";
	background-color:#000000;
	color:#cccccc;									/*文字色*/
	max-width:1200px;								/*最大表示幅*/
		text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
		-ms-text-size-adjust: 100%;/*EgdeMobile*/
		-moz-text-size-adjust: 100%;/*firefox*/
	margin: 0;										/*画面一杯に表示／無指定では周囲に8px空白*/
	padding: 0;										/*画面一杯に表示／無指定では周囲に8px空白*/
}

a[href]:{text-decoration : underline;}
a,a[name]:hover{color: #cccccc;}
a:link {color: #cccccc;}
a:visited {color: violet;}
a:hover {color: deepskyblue;}

p {													/*(950px以上)本文段落設定*/
	font-size: 18px;								/*標準ウィンドウ時18px*/
	line-height: 150%;
	font-weight : 100;
	margin: 0px 4px 16px 190px;						/*上0・下16・左MENU＋本文左4px(186+4)・右4px余白(上-右-下-左)*/
}
		@media screen and (max-width:799px) {		/*(799px以下)本文段落設定*/
			p {
				font-size: 16px;					/*縮小ウィンドウ時本文フォント16px*/
  		 		margin: 0px 4px 12px 4px;			/*本文左寄せ＋左右4px下12px余白(上-右-下-左)*/
			}
		}

table.keishiki,table.ANNOTATION {					/*(800px以上)標題・お知らせ表示設定(<p>に合わせる)*/
	width: calc(100% - 194px);						/*table幅は窓幅-(MENU186+左4+右4)*/
	border-collapse: collapse;						/*隣接するセルのボーダーを重ねて表示*/
	margin: 7px 4px 8px 190px;						/*MENU表示＋本文左4px(186+4)、右4px余白(上-右-下-左)*/
}
		@media screen and (max-width:799px) {		/*(799px以下)標題・お知らせ表示設定(<p>に合わせる)*/
			table.keishiki,table.ANNOTATION {		/*標題・お知らせ表示設定(<p>に合わせる)*/
				width: calc(100% - 8px);			/*table幅は窓幅-(左4+右4)*/
				margin: 7px 4px 8px 4px;			/*左メニュー消去・本文左寄せ(上-右-下-左)*/
			}
		}
		@media screen and (max-width:559px) {		/*(559px以下)標題設定(<p>に合わせる)*/
			table.keishiki {						/*固定ヘッダ分の38pxオフセット*/
				margin: 45px 4px 8px 4px;			/*上7+38=45、下8(上-右-下-左)*/
  			}
		}
td.keishiki {										/*(800px以上)コンテンツタイトル表示*/
	font-size: 18px;								/*標準ウィンドウ時18px*/
	line-height: 100%;
	padding-bottom: 4px;							/*タイトル下隙間*/
}
		@media screen and (max-width:799px) {		/*(799px以下)コンテンツタイトル表示*/
			td.keishiki {
				font-size: 16px;					/*縮小ウィンドウ時16px*/
  			}
		}
td.koushinbi {										/*(800px以上)更新日書式*/
	font-size: 15px;								/*標準ウィンドウ時15px*/
	line-height: 125%;
	text-align: right;
	padding: 0px 0px 0px 5px;						/*(上-右-下-左)*/
}
		@media screen and (max-width:799px) {		/*(799px以下)更新日書式*/
			td.koushinbi {
				font-size: 13px;					/*縮小ウィンドウ時13px*/
				line-height: 150%;
			}
		}
table.ANNOTATION {									/*(800px以上)注釈･お知らせ･クレジットの書式*/
	font-size: 15px;								/*標準ウィンドウ時15px*/
	line-height: 125%;
}
		@media screen and (max-width:799px) {		/*(799px以下)注釈･お知らせ･クレジットの書式*/
				table.ANNOTATION {
					font-size: 13px;				/*縮小ウィンドウ時13px*/
					line-height: 150%;
				}
		}

figure.PICT60C {									/*写真テーブル書式(600px中央揃え)*/
	width: calc(100% - 202px);						/*600px写真はページ全体に表示、段落<p>より4px内側(186+8+8)*/
	margin-top: 0px;								/*中央揃え写真は段落上端に密着*/
	margin-bottom: 16px;							/*段落<P>に準拠・中央揃え写真は本文の回り込み無し*/
	margin-left: 194px;								/*段落<p>左端から4px内側(186+4+4)*/
	margin-right: 8px;								/*写真の右端～本文左端の余白8px*/
	border: solid 1px #cccccc;						/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)写真テーブル書式(600px中央)*/
			figure.PICT60C {
				width: calc(100% - 10px);			/*<P>に現物合わせ*/
				margin-bottom: 12px;				/*段落<P>に準拠・中央揃え写真は本文の回り込み無し*/
				margin-left: 4px;					/*段落<p>左端に密着(4+0)*/
			}
		}
figure.PICT40L {									/*(800px以上)写真テーブル書式(400px左寄せ)*/
	width: 400px;									/**/
	float: left;									/**/
	margin-top: 4px;								/*段落上端より4px下側*/
	margin-bottom: 8px;								/*回り込んだ本文の密着を避ける*/
	margin-left: 194px;								/*段落<p>左端から4px内側(186+4+4)*/
	margin-right: 8px;								/*写真の右端～本文左端の余白8px*/
	border: solid 1px #cccccc;						/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)左マージン縮小*/
			figure.PICT40L {
				margin-left: 4px;					/*段落<p>左端に密着(4+0)*/
			}
		}
		@media screen and (max-width:669px) {		/*(669px以下)左寄せ写真テーブル*/
			figure.PICT40L {
				width: 60%;							/*400px写真・窓幅の60％表示*/
			}
		}
figure.PICT40R {									/*(800px以上)写真テーブル書式(400px右寄せ)*/
	width: 400px;									/**/
	float: right;									/**/
	margin-top: 4px;								/*段落上端より4px下側*/
	margin-bottom: 8px;								/*回り込んだ本文の密着を避ける*/
	margin-left: 8px;								/*写真の左端～本文右端の余白8px*/
	margin-right: 8px;								/*段落<p>右端から4px内側(4+4)*/
	border: solid 1px #cccccc;						/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)右マージン縮小*/
			figure.PICT30R {
				margin-right: 4px;					/*段落<p>右端に密着(4+0)*/
			}
		}
		@media screen and (max-width:669px) {		/*(669px以下)右寄せ写真テーブル*/
			figure.PICT30R {
				width: 60%;							/*400px写真・窓幅の60％表示*/
			}
		}
figure.PICT30L {									/*(800px以上)写真テーブル書式(300px左寄せ)*/
	width: 300px;									/**/
	float: left;									/**/
	margin-top: 4px;								/*段落上端より4px下側*/
	margin-bottom: 8px;								/*回り込んだ本文の密着を避ける*/
	margin-left: 194px;								/*段落<p>左端から4px内側(186+4+4)*/
	margin-right: 8px;								/*写真の右端～本文左端の余白8px*/
	border: solid 1px #cccccc;						/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)左マージン縮小*/
			figure.PICT30L {
				margin-left: 4px;					/*段落<p>左端に密着(4+0)*/
			}
		}
		@media screen and (max-width:499px) {		/*(499px以下)左寄せ写真テーブル*/
			figure.PICT30L {
				width: 60%;							/*300px写真・窓幅の60％表示*/
			}
		}
figure.PICT30R {									/*(800px以上)写真テーブル書式(300px右寄せ)*/
	width: 300px;									/**/
	float: right;									/**/
	margin-top: 4px;								/*段落上端より4px下側*/
	margin-bottom: 8px;								/*回り込んだ本文の密着を避ける*/
	margin-left: 8px;								/*写真の左端～本文右端の余白8px*/
	margin-right: 8px;								/*段落<p>右端から4px内側(4+4)*/
	border: solid 1px #cccccc;						/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)右マージン縮小*/
			figure.PICT30R {
				margin-bottom: 12px;				/*キャプション枠下の余白<P>に準拠*/
				margin-right: 4px;					/*段落<p>右端に密着(4+0)*/
			}
		}
		@media screen and (max-width:499px) {		/*(499px以下)右寄せ写真テーブル*/
			figure.PICT30R {
				width: 60%;							/*300px写真・窓幅の60％表示*/
			}
		}

figure.PICT {										/*写真行書式*/
	text-align: center;
	margin: 0px;									/*領域に密着(但しmax-width: 100%;)*/
}
img.PICT {											/*写真サイズ指定*/
	max-width: 100%;
	height: auto;
}
figcaption.PIC-Detail {								/*(800px以上)撮影データ書式*/
	font-size: 15px;								/*標準ウィンドウ時15px*/
	line-height: 125%;
	text-align: center;
	padding: 2px 4px 2px 4px;						/*説明文余白／撮影データ(上-右-下-左)*/
	border-top: solid 1px #808080;					/*(上)gray*/
}
		@media screen and (max-width:799px) {		/*(799px以下)撮影データ書式*/
			figcaption.PIC-Detail {
				font-size: 13px;					/*縮小ウィンドウ時13px*/
				line-height: 150%;
			}
		}
figcaption.PIC-Explain {							/*(800px以上)情景解説書式*/
	font-size: 15px;
	line-height: 125%;
	text-align: left;
	padding: 2px 4px 2px 4px;						/*枠内余白(上-右-下-左)※下は本文の回り込みを逃げる*/
	border-top: solid 1px #808080;					/*罫線(上)gray*/
}
		@media screen and (max-width:799px) {		/*(799px以下)情景解説書式*/
			figcaption.PIC-Explain {
				font-size: 13px;					/*縮小ウィンドウ時13px*/
				line-height: 150%;
				padding: 2px 4px 2px 4px;			/*枠内余白(上-右-下-左)※下は本文の回り込みを逃げる*/
			}
		}

table.hensei-hyo_c502 {								/*編成表テーブル書式*/
	width: 590px;									/*(W=616px以上)590px幅*/
	font-size: 15px;								/*(W=616px以上)15px*/
	line-height: 125%;								/**/
	border: solid 1px #cccccc;						/**/
	border-collapse: collapse;						/*隣接するセルのボーダーを重ねて表示*/
	margin-top: 20px;								/**/
	margin-bottom: 20px;							/**/
	margin-left: calc(50% - 202px);						/*(W=800px以上) ((W-186-590)/2)+186 */
}
		@media screen and (max-width:799px) {		/*(799px以下)撮影データ書式*/
			table.hensei-hyo_c502 {					/*編成表テーブル書式*/
				margin-left: auto;					/*中央揃え*/
				margin-right: auto;					/*中央揃え*/
			}
		}
		@media screen and (max-width:615px) {
				table.hensei-hyo_c502 {
					width: 100%;					/*615px以下で100％幅*/
					font-size: 13px;				/*615px以下で13px*/
				}
		}
td.hensei-hyo_c502 {								/*編成表・行書式*/
	text-align: center;								/*号車・形式番号・所属は中央揃え*/
	border: solid 1px #cccccc;
	padding: 0px 2px 0px 2px;						/*中央揃えの枠内余白(上-右-下-左)*/
}
td.hensei-hyo_keishiki_c502 {						/*編成表(形式)・行書式*/
	width: 120px;									/*標準ウィンドウ時120px幅*/
	text-align: center;								/*号車・形式番号・所属は中央揃え*/
	border: solid 1px #cccccc;
	padding: 0px 2px 0px 2px;						/*中央揃えの枠内余白(上-右-下-左)*/
}
		@media screen and (max-width:615px) {
				td.hensei-hyo_keishiki_c502 {
					width: 110px;					/*615px以下で120px幅*/
				}
		}
td.hensei-hyo_bikou_c502 {							/*編成表(備考)・行書式*/
	text-align: left;								/*備考は中左揃え*/
	border: solid 1px #cccccc;
	padding: 0px 5px 0px 5px;						/*枠内余白(上-右-下-左)*/
}




table.MENU {										/*(800px以上)左メニュー設定*/
	font-size: 16px;								/*左メニューフォントサイズ16px*/
	line-height: 150%;
	position : absolute;
	top: 0px; left: 0px;
	width: 182px;									/*左メニュー本体幅182px*/
	border: solid 1px #cccccc;
	border-collapse: collapse;						/*隣接するセルのボーダーを重ねて表示*/
	margin: 2px 2px 0px 2px;						/*メニュー枠外余白・上左右2px(上-右-下-左)*/
}
		@media screen and (max-width:799px) {		/*(799px以下)左メニュー設定*/
			table.MENU {
				display:none;						/*左メニュー消去*/
			}
}
	td.MENU {										/*メニューの行設定*/
		border-style : none;
		padding:0px 1px 0px 2px;					/*メニューの文字周囲余白(上-右-下-左)*/
	}
	td.MENU_IMG {									/*メニューのロゴ画像とアニメ周囲余白*/
		border-style : none;
		padding:1px 1px 1px 1px;					/*(上-右-下-左)*/
	}
	img.MENU,img.LINK {								/*メニューロゴ・リンクロゴ標準表示書式*/
		max-width: 176px;
		border: solid 1px;							/*カーソル載せで着色するため色指定しない*/
	}

table.MENU-UPSIDE {									/*(800px以上)上端ヘッダ表示OR消去*/
	display:none;									/*ヘッダ消去・左メニュー表示*/
}
		@media screen and (max-width:799px) {		/*(799px以下)上端ヘッダ表示OR消去*/
			table.MENU-UPSIDE {						/*上端ヘッダ表示仕様*/
				display:block;						/*本文と共にスクロール*/
				width: 100%;						/**/
				position : relative;				/*560px以上でヘッダ可動*/
				background-color: #234059;			/*背景色-青15号#234059or*ぶどう色2号#413027*/
				border-collapse: collapse;			/*隣接するセルのボーダーを重ねて表示*/
				border: none;						/*ヘッダ固定時に枠無し*/
				margin: 0px 0px 0px 0px;			/*(上-右-下-左)*/
			}
			img.MENU-UPSIDE {
				height: 36px;						/*サイトロゴ縮小(img元サイズ176x58)*/
			}
		}
		@media screen and (max-width:559px) {		/*(559px以下)上端ヘッダ表示OR消去*/
			table.MENU-UPSIDE {						/*ヘッダ表示仕様*/
				position: fixed;					/*ヘッダ画面上端固定*/
				top: 0;								/*固定ヘッダの絶対位置指定*/
				z-index: 2;							/*ヘッダ最前面表示*/
				border: none;						/*ヘッダ固定時に枠無し*/
			}
		}

div.MENU-UPSIDE-FIX {								/*(800px以上)左メニュー表示・ヘッダ消去*/
	display:none;									/**/
}
		@media screen and (max-width:799px) {		/*(799px以下)左メニュー消去・ヘッダ表示*/
			div.MENU-UPSIDE-FIX {					/*上端ヘッダ表示仕様*/
				display: flex;						/*(TITLE-IMAGE+TOPへ戻る)と(ページトップへ)を配列*/
				flex-direction: row;				/*内容項目は横並び*/
				flex-wrap: nowrap;					/*折り返し不可*/
				width: 100%;						/*画面一杯に配列*/
				height: 38px;						/**/
				background-color: #234059;			/*背景色-青15号#234059or*ぶどう色2号#413027*/
				font-size: 12px;					/**/
				z-index: 2;							/*ヘッダ表示順位(最前面)2*/
			}
		}
		@media screen and (max-width:559px) {		/*(559px以下)左メニュー消去・ヘッダ固定表示*/
			div.MENU-UPSIDE-FIX {					/*ヘッダ表示仕様*/
				position: fixed;					/*ヘッダ画面上端固定*/
				top: 0;								/*固定ヘッダの絶対位置指定*/
			}
			a.head-fixed {							/*固定ヘッダに対するページ内ジャンプ先補正*/
				padding-top: 42px;
				margin-top: -42px;
			}
		}
	div.MENU-UPSIDE_FIX_IMG {						/*(左側)ロゴ画像配置*/
			display: flex;							/**/
			flex-wrap: wrap;						/*折り返し許可*/
			align-content: center;					/*上下中央揃え(display:flex／flex-wrap:wrap必須)*/
			padding-left: 1px;
	}
		img.MENU-UPSIDE {
			height: 36px;						/*サイトロゴ縮小(img元サイズ176x58)*/
		}
	div.MENU-UPSIDE_L {								/*左側(TITLE-IMAGE+TOPへ戻る)*/
		flex-wrap: wrap;							/*折り返し許可*/
		align-content: flex-start;					/*上詰め(display:flex／flex-wrap:wrap必須)*/
		text-align: left;							/**/
		margin-right: auto;							/*ロゴ画像と「TOPページへ移動」をまとめて左寄せ*/
		padding-left: 2px;
	}
	div.MENU-UPSIDE_R {								/*右側(ページトップへ)*/
		visibility: hidden;							/*(560px以上)(ページトップへ)を非表示*/
	}
			@media screen and (max-width:559px) {	/*(559px以下)(ページトップへ)を表示*/
				div.MENU-UPSIDE_R {					/**/
					visibility: visible;			/*(560px以上)(ページトップへ)を表示*/
					display: flex;					/**/
					flex-wrap: wrap;				/*折り返し許可*/
					align-content: flex-end;		/*下詰め*/
					text-align: right;				/**/
					padding-right: 2px;				/**/
				}
			}


											/*★★以下、object要素による別館MENUの制御★★*/
	table.MAIN-MENU {								/*※共通※別館メニューtable設定*/
		font-size: 16px;							/*※共通※別館メニューフォントサイズ16px*/
		line-height: 150%;							/*※共通※行の高さ*/
		border-collapse: collapse;					/*※共通※隣接するセルのボーダーを重ねて表示*/
		margin: 0px 0px 0px 0px;					/*※共通※別館メニュー枠外余白はobject側で制御(上-右-下-左)*/
	}
	img.MAIN-MENU,img.MAIN-LINK {					/*※共通※別館メニューロゴ・リンクロゴ表示書式*/
		border: solid 1px;							/*※共通※カーソル載せで着色するため色指定しない*/
	}

		@media screen and (min-width:182px) {		/*別館メニュー※WINDOW=182px･左上配置の制御*/
			object.MAIN-MENU {						/*別館トップページMAIN-MENU左上配置時object設定*/
				position : absolute;				/**/
				top: 0px; left: 0px;				/**/
				width: 182px;						/*別館左上MAIN-MENU本体幅182px*/
				height: 1400px;						/*別館左上MAIN-MENU高さ_1378min_menu_v0.00※現物合わせ*/
			/*	border: solid 1px lime;				/*for debug※通常表示時の枠線はTABLE側に付ける*/
				border-collapse: collapse;			/*隣接するセルのボーダーを重ねて表示*/
				margin: 2px 0px 0px 2px;			/*別館上MAIN-MENU枠外余白・上左2px(上-右-下-左)*/
			}
			object.content-MENU {					/*別館コンテンツページcontent-MENU左上配置時object設定*/
				position : absolute;				/**/
				top: 0px; left: 0px;				/**/
				width: 182px;						/*別館左上content-MENU本体幅182px*/
				height: 1170px;						/*別館左上content-MENU高さ_1154min_menu_v0.00※現物合わせ*/
			/*	border: solid 1px pink;				/*for debug※通常表示時の枠線はTABLE側に付ける*/
				border-collapse: collapse;			/*隣接するセルのボーダーを重ねて表示*/
				margin: 2px 0px 0px 2px;			/*別館左上content-MENU枠外余白・上左2px(上-右-下-左)*/
			}
			table.MAIN-MENU {						/*別館メニュー左上配置時table-td設定*/
				text-align: left;					/*別館メニュー内の文字を中央揃え*/
				border: solid 1px #cccccc;			/*通常表示時の枠線はTABLE側に付ける*/
			/*	border: solid 1px yellow;			/*for debug*/
			}
			td.MAIN-MENU {							/*別館メニュー左上配置時table設定*/
				padding: 0px 1px 0px 2px;			/*別館メニュー枠内余白・右1px左2px(上-右-下-左)※無指定時は1px確保*/
			}
		}

		@media screen and (min-width:183px) and (max-width:799px) {
													/*別館TOPページ用※183以上799px以下･メニュー中央配置の制御*/
			object.MAIN-MENU {						/*別館メニュー中央配置時トップページメニューobject設定*/
				position:relative;					/*別館メニューをページ内相対配置*/
				margin-left:auto;					/*TABLEを中央揃え*/
				margin-right:auto;					/*TABLEを中央揃え*/
				width: 99%;							/*ページ一杯に表示※100%にすると左右スクロールバー出現*/
				height: 1200px;						/*中央MENU高さ_1198min_menu_v0.00※ロゴ表示状態で現物合わせ*/
				margin: 0px 0px 10px 0px;			/*別館メニュー枠外余白・下10px(上-右-下-左)*/
			/*	border: solid 1px green;			/*for debug※通常表示時の枠線はTABLE側に付ける*/
			}
			table.MAIN-MENU {						/*別館メニュー中央配置時table設定*/
				text-align:center;					/*別館メニュー内の文字を中央揃え*/
				width: 100%;						/*ページ一杯に表示※100%にすると左右スクロールバー出現*/
				border: none;						/*別館メニュー中央配置時に枠無し*/
			/*	border: solid 1px blue;				/*for debug※TABLE側の枠線*/
			}
			img.MAIN-MENU {							/*別館メニュー中央配置時メニューロゴ設定*/
				display:none;						/*別館メニュー中央配置時はメニューロゴ非表示*/
			}
			object.content-MENU {					/*別館メニュー中央配置時コンテンツページメニューobject設定*/
				display:none;						/*別館コンテンツページは949px以下でメニュー消去*/
			}
		}


