.timeline {
  box-sizing: border-box;
  margin: 1em 0.5em 0.5em 4%;
  padding: 0.25em 0 0.25em 0;
  border-left: solid 2px #ffbb33;
  font-family: "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, sans-serif;
}

.timeline h2 {
  position: relative;
  box-sizing: border-box;
  margin: 1em 0 0 0;
  padding: 0 0 0 1em;
  border: none;
  border-top: solid 2px #ffbb33;
  text-indent: 0;
  background: #f0f0f0;
  background: #ffe493;
}

.timeline h2:first-child {
  margin: 0;
}

.timeline h2:before {
  position: absolute; top: -2px; left: -6px;
  box-sizing: border-box;
  content: '';
  width: 10px;
  height: 2px;
  background: #ffbb33;
  border-top: solid 2px #ffbb33;
}

.timeline dl {
  position: relative;
  font-size: 1em;
  margin: 1em 0 1em 0;
  padding: 0 0 0 1em;
  page-break-inside: avoid;
}

.timeline dl:before {
  position: absolute;
  box-sizing: border-box;
  top: 7px;
  left: -6px;
  content: '';
  font-size: 1em;
  width:  10px;
  height: 10px;
  border: solid 1px #ffbb33;
  border-radius: 1em;
  background: #ffbb33;
}

.btn {
  background: #ffcd58;
  margin: 0 0 1em 4%;
  width: 12em;
  position: relative;
}

.btn a {
  display: block;
  text-align: center;
  line-height: 1.8;
}

.btn a:hover {
  background: #ffe493;
}

.btn a:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.9em solid transparent;
  border-bottom: 0.9em solid transparent;
  border-right: 1em solid transparent;
  border-left: 1em solid #ffcd58;
  position: absolute;
  top: 0;
  right: -2em;
}

.btn a:hover:after {
  border-left: 1em solid #ffe493;
}

.btn a:link,
.btn a:visited {
  color: #403316;
  text-decoration: none;
}