@charset "UTF-8";

.cf:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;line-height: 0;}
.mainImg{background-image: url(../img/schedule/main_l.jpg);}
body{background-image: url(../img/schedule/bg1.png);background-repeat: no-repeat;background-position: left 50%;}
#wrapper {background-image: url(../img/schedule/bg3.png);background-repeat: no-repeat;background-position: left bottom;}
#timeline {width: 100%;background-image: url(../img/schedule/bg2.png);background-repeat: no-repeat;background-position: right center;}
.year {clear: both;width: 100%;margin: 0 auto;background-image: url(../img/schedule/c_line.png);background-repeat: repeat-y;background-position: center top;}
.ellipsis {background-image: url(../img/schedule/ellipsis.png);background-repeat: no-repeat;background-position: center 70px;}
.year h2 {font-family: "Source Sans Pro", Arial, sans-serif;font-size: 3.8rem;letter-spacing: 0.14em;font-weight: 700;font-style: italic;color: #4e5c7b;line-height: 1;}
.year h2:after {display: block;padding-left: 0.11em;content: '◦';font-size: 5.7rem;font-style: normal;line-height: 0.3;color: #969aa3;display: none\9;}
.year .leftTopics, .year .rightTopics {font-size: 1.4rem;}
.year .rightTopics, .year .lefttTopics {clear: both;}
.year h3 {width: 50%;margin-left: 55%;font-size: 2rem;font-weight: normal;line-height: 1.3;color: #e6881a;}
#y1998 h2 {padding-top: 25px;}
#y1998 .ellipsis {background-position: center 90px;}
#y1998 h3, #y2000 h3 {margin-top: -15px;}
#y1998 .ellipsis {min-height: 110px;}
#y2004 .ellipsis, #y2008 .ellipsis, #y2013, #y2017 {min-height: 90px;}
#y2003, #y2007, #y2011 {position: relative;min-height: 110px;width: 90%;}
.leftTimeArea, .rightTimeArea {width: 52%;background-color: rgba(16,26,87,0.2);border: 1px solid rgba(255,255,255,0.2);}
.rightTimeArea {float: right;}
.flexTimeArea {clear: both;position: relative;width: 90%;margin: 0 auto;}
.flexTimeArea .rightTimeArea {position: absolute;right: 0;z-index: -1;height: calc(100% - 50px);margin-top:50px;}
#y2003 .leftTimeArea, #y2007 .leftTimeArea{min-height: 80px;}
#y2011 .leftTimeArea,
#y2011 .rightTimeArea {margin-top: -80px;min-height: 100px;}
.leftTimeArea p, .rightTimeArea p {margin: 0.5em;font-size: 1.4rem;color: #aaa;}
.rightTimeArea p {text-align: right;}
#y2011 h3 {margin-top: -1em;}
.leftTopics p {box-sizing: border-box;width: 50%;text-align: right;padding-right: 79px;}
.leftTopics p:after {content: url(../img/schedule/line_l.png);margin-right: -83px;}
.rightTopics p {box-sizing: border-box;width: 50%;margin-left: 50%;padding-left: 79px;text-indent: -74px;}
.rightTopics p:before {content: url(../img/schedule/line_r.png);margin-left: -8px;}
#y2012 h2 {margin-bottom: 0.5em;}
#y2018 {padding-bottom: 20px;}
.FID{float: right;margin-left:0px;width: 45%;}
.FID h3{margin-left: 0;}

@media only screen and (min-width:980px) and (max-width:1024px) {
	.mainImg {height: 50%;}
}
@media only screen and (max-width:979px) {
	body {background-position: center bottom;}
	.mainImg {height: 60%;}
	h1 {padding-top: 20%;line-height: 1;}
	h1 > span {line-height: 2;}
}
@media only screen and (max-width:599px) {
	html {font-size: 40%;}
	body, #wrapper, #timeline {background-size: contain;}
	#y2011, .flexTimeArea {width: 95%;}
	.leftTopics p {padding-right: 37px;}
	.leftTopics p:after {content: url(../img/schedule/line_ls.png);margin-right: -41px;}
	.rightTopics p {padding-left: 37px;text-indent: -32px;}
	.rightTopics p:before {content: url(../img/schedule/line_rs.png);margin-left: -8px;}
	#y2012 .leftTopics {margin-top: 4em;}
	#y2017 {padding-bottom: 0px;}
  .FIDex{margin-top: 0!important;}
}

@media only screen and (max-width:399px) {
    .mainImg{height: 50%;}
}