@charset "utf-8";

.contents{
	padding: 20px 35px 20px;
	width: 920px;
}
#head-navi{ display: none }
#head-navi ul.text-menu li,
#foot-navi ul.text-menu li{}
ul.text-menu li a.comingsoon{
	color: #999999;
	text-decoration: none;
}
.contents ul.text-menu{
	margin-bottom: 25px;
	width: auto;
	border: 1px solid #ccc;
	background: #ddd url(../images/bg-text-menu.gif) no-repeat 0 0;
}
.contents ul.text-menu li{
	vertical-align: bottom;
	padding: 10px 20px 10px 15px;
	border-right: 1px solid #ccc;
}
.contents ul.text-menu li a{
	background-image: url(../images/icon_circle_red.gif);
	background-position: 0 50%;
}
.contents ul.text-menu li.stay{
	background: #fff url(../images/bg-text-menu-stay.gif) no-repeat 0 0;
}
.contents ul.text-menu li a.comingsoon{
	background-image: url(../images/icon_circle_gray.gif);
}
.contents ul.text-menu-last{
	clear: both;
	margin: 25px 0 -10px 0;
}

/* ---------- ヘッダ  ---------- */
.contents .chronology-header{
	margin-bottom: 8px;
/*	padding-bottom: 12px;
	border-bottom: 1px solid #CCCCCC;*/
}
.contents .chronology-header{ /zoom : 1; }
.contents .chronology-header:after{ content : ''; display : block; clear : both; height:0; }
.contents .chronology-header h1{
	float: left;
	margin-bottom: 0;
}
.contents .chronology-header .toppage{
	float: right;
	margin: 8px 0 0 0;
	margin: 0;
}
.contents .chronology-header .toppage a{
	min-height: 21px;
	padding: 9px 15px 9px 45px;
	background: url(../images/ico_home.gif) no-repeat 0 50%;
}
.contents .chronology-header .print{
	float: right;
	margin: 8px 0 0 0;
	margin: 0;
}
.contents .chronology-header .print a{
	min-height: 21px;
	padding: 9px 0 9px 45px;
	background: url(../images/ico_print.gif) no-repeat 0 50%;
}
.contents .chronology-lead{
	float: left;
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
}
.contents .noscript{
	border: 1px solid #FF6600;
	padding: 10px;
	margin: 20px 0;
	color: #FF6600;
	font-weight: bold;
	background: #FFE1D7;
}

/* ---------- 大枠 ---------- */
.chronology{
	position: relative;
}
.chronology-wrap{
	position: relative;
	background: url(../images/bg-history.gif) repeat-y 0 0;
}
.chronology-wrap{ /zoom : 1; }
.chronology-wrap:after{ content : ''; display : block; clear : both; }

.chronology-history{
	float: left;
	width:300px;
	padding: 20px 0 0 0 ;
}
.chronology-main{
	float: right;
	width: 600px;
}
.chronology-item{
	position: relative;
	zoom: 1;
}
.chronology-item .graph{
	margin: 0;
}

/* ---------- 社会のできごと ---------- */
.chronology-history h2{
	font-size: 100%;
	background: none;
	padding: 0 0 5px;
	margin-left: 25px;
	margin-right: 25px;
}
.chronology-history ul li{
	font-size: 75%;
	text-indent: -4.3em;
	padding-left: 4.3em;
	line-height: 1.5;
	margin-bottom: 5px;
}
.chronology-history h3{
	background: none;
	padding: 0;
	margin-left: 24px;
	margin-bottom: 12px;
}
.chronology-history dl{
	margin: 10px 25px 30px;
}
.chronology-history dt{
	color: #333333;
	font-weight: bold;
	margin-top: 12px;
	padding: 12px 0 3px 0;
	/padding: 12px 0 1px 0;
	border-top: 1px dotted #CCC;
	line-height: 1.1;
}
.chronology-history dt a{
	display: inline-block;
	padding: 0 5px 0 18px;
	text-decoration: none;
	color: #333333;
}
.chronology-history dt a:link,
.chronology-history dt a:visited,
.chronology-history dt a:hover,
.chronology-history dt a:active{
	color: #333333;
}
.chronology-history dt span{
	display: inline-block;
	
	padding: 0 5px 0 18px;
	line-height: 1.1;

/*	padding: 2px 10px; 
	display: block;
	margin-bottom: 10px;
	color: #FFFFFF;
	background: #0066cc;
*/}
.chronology-history dt.first{
	border-top: 0;
	padding-top: 0;
}
.chronology-history dd{
	line-height: 1.5;
	margin-left: 18px;
}
.chronology-history dd.event{
	margin-bottom: 0;
}
.chronology-history dd.event a{
	/zoom: 1;
	/display: inline;
	padding-right: 12px;
	background: url(../images/ico-slidetoggle.gif) no-repeat 100% 50%;
}
.chronology-history dd.description{
	width: 230px;
	margin-top: 2px;
}

/* ---------- この時代の商社について ---------- */
.chronology-item .chronology-outline{
	margin-top: -30px;
	padding: 0 0 5px;
	font-size: 114%;
}
.chronology-item .chronology-outline h2{
	background-position: 0 35px;
}
.chronology-item .chronology-outline dl{
	margin-bottom: 20px;
}
.chronology-item .chronology-outline dt{
	font-weight: bold;
}
.chronology-item .chronology-outline ul{
	margin-bottom: 20px;
}
.chronology-item .chronology-outline ul li{
	margin-left: 20px;
	list-style-type: disc;
}
.chronology-item .chronology-outline ul li.click{
	margin-left: 0;
	margin-top: 20px;
	padding-left: 60px;
	list-style-type: none;
	background: url(../images/ico-functions.gif) no-repeat 0 0.5em	;
}
.chronology-item .chronology-outline ul li.click em{
	font-style: normal;
	font-size: 110%;
	font-weight: bold;
}
.chronology-item .chronology-outline ul.banner{
	margin: 0 0 0 2px;
	padding-bottom: 25px;
	width: 692px;
}
.chronology-item .chronology-outline ul.banner li{
	float: left;
	display: inline;
	margin-left: 0;
	margin-right: 30px;
	list-style-type: none;
	width: 316px;
	line-height: 1.5;
}
.chronology-item .chronology-outline ul.banner li.last{
	margin-right: 0;
}
.chronology-item .chronology-outline ul.banner li a{
	text-decoration: none;
}
.chronology-item .chronology-outline ul.banner li img{
	margin-bottom: 5px;
}
.chronology-item .chronology-outline ul.banner li span{
	text-decoration: underline;
}
.point-check{text-align:center; }
.contents .image-l{ float: left; }
.contents .image-r{ float: right; }
.contents .figure-r{ float: right; margin:3px 0 16px 16px; text-align: center; font-size: 77%; }
.contents .figure-l{ float: left; margin:3px 16px 16px 0; text-align: center; font-size: 77%; }
.contents .figure-chara{ margin: 3px 10px 8px; }
.contents .figure-intext{ margin-top: 10px; }

/* ---------- 詳しい解説 ---------- */
.chronology-item .chronology-detail{
	padding: 0 0 1px;
	zoom: 1;
	z-index: 101;
	font-size: 114%;
}
.chronology-item .chronology-detail .chronology-note-a{
/*	padding: 20px 20px 0;
	margin-bottom: 20px;
	font-size: 85.7%;
	background: #F9F9F9;
	border: 1px solid #000088;
*/
	font-size: 88%;
	padding: 20px 20px 1px;
	margin: 0 20px 20px;
	background: #F8FCFF;
	border: 1px solid #4169E1
}
.chronology-item .chronology-detail .chronology-note-a h4{
	color: #0066CC;
	font-size: 87.5%;
	background: transparent;
}
.chronology-item .chronology-detail .comingsoon{
	text-align: center;
	font-size: 100%;
	font-weight: bold;
	line-height: 1.5;
	padding: 1em;
	color: #FF0000;
	background: #FFFFCC;
}
.chronology-main .comingsoon2{
	margin-top: 40px;
	margin-bottom: 0;
}

/* ---------- 固有の設定 ---------- */
#cover{
	background: none;
	margin-top: -15px;
}
#cover .chronology-main{
	width: auto;
	float: none;
}
#cover .chronology-item .chronology-outline{
	margin-top: 0;
}
#cover #chronology-1 .bubble-oryo{
	position: absolute;
	top: 35px;
	left: 465px;
	font-size: 65%;
	padding: 10px 14px;
	line-height: 1.6;
	top: 50px;
	left: 650px;
	font-size: 87%;
}
#cover #chronology-1 .bubble-ryuma{
	position: absolute;
	top: 220px;
	left: 19px;
	padding: 10px 14px;
	line-height: 1.6;
	font-size: 65%;
	top: 284px;
	/top: 285px;
	left: 19px;
	font-size: 87%;
}
#cover #chronology-1 .next{
	position: absolute;
	top: 241px;
	right: 7px;
}

/* ---------- 社会のできごととリンク ---------- */
.chronology-main h3{
	padding: 7px 10px 8px 20px;
	height: 27px;
}
#chronology-detail-2-1 h3{ background: url(../images/tit-chronology-history-1.gif) no-repeat 0 0; }
#chronology-detail-2-2 h3, 
#chronology-detail-3-1 h3,
#chronology-detail-3-2 h3{ background: url(../images/tit-chronology-history-2.gif) no-repeat 0 0; }
#chronology-detail-4-1 h3,
#chronology-detail-4-2 h3{ background: url(../images/tit-chronology-history-3.gif) no-repeat 0 0; }
#chronology-detail-4-2 h3{ font-size:100%; padding-top:9px; height:25px; }
#chronology-detail-5-1 h3,
#chronology-detail-5-2 h3,
#chronology-detail-5-3 h3,
#chronology-detail-5-4 h3{ background: url(../images/tit-chronology-history-4.gif) no-repeat 0 0; font-size:100%; padding-top:9px; height:25px; }
#chronology-detail-6-1 h3,
#chronology-detail-6-2 h3,
#chronology-detail-6-3 h3{ background: url(../images/tit-chronology-history-5.gif) no-repeat 0 0; font-size:87%; padding-top:10px; height:24px; }
#chronology-detail-6-3 h3{ letter-spacing:-1px;}

.chronology-history .detail-1{ background: url(../images/ico-history-1.gif) no-repeat 0 0; }
.chronology-history .detail-2{ background: url(../images/ico-history-2.gif) no-repeat 0 0; }
.chronology-history .detail-3{ background: url(../images/ico-history-3.gif) no-repeat 0 0; }
.chronology-history .detail-4{ background: url(../images/ico-history-4.gif) no-repeat 0 0; }
.chronology-history .detail-5{ background: url(../images/ico-history-5.gif) no-repeat 0 0; }




/* ----------  ---------- */
#cover .functions dt a{
	/zoom: 1;
	/display: inline;
	padding-right: 16px;
	background: url(../images/ico-slidetoggle.gif) no-repeat 100% 50%;
}
#cover .functions dt{
	font-weight: normal;
	padding-left: 22px;
	background: url(../images/ico-functions-2.gif) no-repeat 0 50%;
}
#cover .functions dd{
	padding-left: 22px;
}

/* ----------  ---------- */
.chronology .chronology-main h3{
/*	position: relative;
	padding-left: 100px;*/
	line-height: 1.4;
}
.chronology .chronology-main h3 .period{
/*	position: absolute;
	left: 20px;
	top: 12px;*/
	font-size: 75%;
	margin-right: 5px;
	vertical-align: middle;
}

/* ---------- イントロ1 ---------- */
.chronology .chronology-main .intro-wrap{
	position: relative;
	margin: 20px 0 20px;
	padding: 20px 20px 20px 5px;
	background: url(../images/img-intro-5.gif) repeat 0 5px;
}
.chronology .chronology-main .intro{
	background: url(../images/img-intro-3.gif) no-repeat 100% 100%;
}
.chronology .chronology-main .intro .chara{
	float: left;
	width: 98px;	
	margin-bottom: 0;
}
.chronology .chronology-main .intro .inner{
	float: left;
	width: 437px;
	min-height: 40px;
	_height: 40px;
	margin-bottom: 0;
	padding: 23px 20px 23px 20px;
	font-size:77%;
	line-height: 1.7;
	background: url(../images/img-intro-2.gif) no-repeat 100% 0;
}

/* ---------- イントロ2 ---------- */
.chronology .chronology-main .intro-wrap2{
	position: relative;
	height: 224px;
	margin: 30px 0 0;
	background: url(../images/img-intro-6.gif) no-repeat 0 0;
}
.chronology .chronology-main .intro-wrap2 .ryoma{
	font-size:77%;
	line-height: 1.7;
	padding: 37px 75px 0 125px;
}
.chronology .chronology-main .intro-wrap2 .oryo{
	font-size:77%;
	line-height: 1.7;
	padding: 24px 75px 0 160px;
}
.chronology .chronology-main .intro-wrap2 .next{
	position: absolute;
	top: 80px;
	right: 5px;
}
.chronology .chronology-main .intro-wrap2 .prev{
	position: absolute;
	top: 80px;
	left: 3px;
}

/* ---------- イントロ3 ---------- */
.chronology .chronology-main .intro-wrap3{
	position: relative;
	margin: 30px 0 0;
	padding: 16px 20px 20px 5px;
	background: url(../images/img-intro-5.gif) repeat 0 5px;
}
.chronology .chronology-main .intro-wrap3 .intro{
	background: url(../images/img-intro-9-2.gif) no-repeat 100% 100%;
}
.chronology .chronology-main .intro-wrap3 .intro .chara{
	float: left;
	width: 158px;	
	margin-bottom: 0;
}
.chronology .chronology-main .intro-wrap3 .intro .inner{
	float: left;
	width: 377px;
	min-height: 40px;
	_height: 40px;
	margin-bottom: 0;
	padding: 23px 20px 23px 20px;
	font-size:77%;
	line-height: 1.7;
	background: url(../images/img-intro-8-2.gif) no-repeat 100% 0;
}
.chronology .chronology-main .intro-wrap3 .next{
	position: absolute;
	top: 75px;
	top: 133px;
	right: 5px;
}
.chronology .chronology-main .intro-wrap3 .prev{
	position: absolute;
	top: 75px;
	top: 133px;
	left: 5px;
}
.chronology .chronology-main .intro-wrap-index3 .prev,
.chronology .chronology-main .intro-wrap-index3 .next{
	top: 88px;
	top: 146px;
}
.chronology .chronology-main .chronology-title{
/*	display: none;*/
}
.chronology .chronology-main .chronology-title{
	display: block;
	padding: 0 0 14px;
	margin-bottom: 0;
}

/* ---------- IE印刷対策 ---------- */
h2,
.chronology-item .chronology-outline ul li.click,
#cover .functions dt
{ position: relative; }

/* ---------- トップ関連 ---------- */
.chronology .recommend{
	text-align: center;
	border: 1px solid #ccc;
	padding: 0 30px;
	margin: 40px 90px 0;
}

/* ---------- ヘッダ ---------- 
#global-header{
	background: url(../images/bg-header.gif) repeat 0 0;
}
#global-header #global-header-inner{
	position: relative;
	background: url(../images/bg-header-inner.gif) no-repeat 100% 0px;
}
#global-header #global-header-inner h1{
	border: 0;
	padding: 0;
}
#global-header #global-header-inner ul{
	padding-top: 57px;
	padding-right: 20px;
}
#global-header #global-header-logo2{
	position: absolute;
	top: 0;
	right: 0;
}*/

/* ---------- クイズ ---------- */
.chronology .chronology-quiz h2{
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 20px;
	font-size: 100%;
	line-height: 1;
}
.chronology .chronology-quiz dt{
	font-size: 100%;
	padding: 0 0 5px 0;
}
.chronology .chronology-quiz dd{
	clear: both;
	font-size: 100%;
	padding: 0 0 15px 0;
	margin-bottom: 15px;
	background: url(../images/img-quiz-separate.gif) no-repeat 0 100%;
}
.chronology .chronology-quiz dd.last{
	margin-bottom: 0;
	padding-bottom: 0;
	background: none;
}
.chronology .chronology-quiz dt,
.chronology .chronology-quiz dd{ /zoom : 1; }
.chronology .chronology-quiz dt:after,
.chronology .chronology-quiz dd:after{ content : ''; display : block; clear : both; height:0; }

.chronology .chronology-quiz .title{
	display: block;
	float: left;
	width: 58px;
	margin: 0 0 0 0;
	text-align: right;
}
.chronology .chronology-quiz .text{
	display: block;
	float: right;
	width: 532px;
	position: relative;
}
.chronology .chronology-quiz .sticky{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #FF7D7D url(../images/img-quiz-sticky-2.gif) no-repeat 100% 100%;
}
.chronology .chronology-quiz .sticky img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -97px;
	
}