/* ==========================================================================
   HISTORY
============================================================================= */


.history {}
.history .main-content { color: #fff; text-shadow: 1px 1px 3px #000; position: relative; z-index: 1; padding-bottom: 200px; }
.history section { margin:0; width: 100%; display: block; }
.history section:after { content: " "; clear: both; display: block; }
.history section p { width: 100%; text-align: left; font-size: 20px; }
.history section p::after { content: ''; display: block; clear: both; }
.history section img { padding-right: 20px; padding-bottom: 20px; max-height: 200px; }
.history article { width: 960px; margin:100px auto 0; padding-left: 80px; opacity: 0; }
.history article:after { content: ""; clear: both; display: block; }

/*.history .video-wrap {
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  font-size: 0;
  overflow: hidden;
  min-height: 700px;
  margin:0 auto;
  max-width: 100%;
}*/

.history .video-cover {
  position: fixed;
  background: rgba(0,0,0,0.6);
  background-image: url(../img/common/video-cover-bg.png);
  width: 100%;
  height: 100%;
  z-index: 1;
  max-height: 100%;
}


.history #video {
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}


.history .sec-year { font-size: 24px; color: #fff; background: #900; letter-spacing: 0.4em; padding-left: 0.4em; font-weight: bold; z-index: 1; text-shadow: none; transform: rotateY(90deg); }
.history .sec-year { border-radius: 50%; margin-right: 20px; width: 120px; height: 120px; line-height: 120px; text-align: center; position: absolute; left: 50%; margin-left: -540px; border: none; }
.history .sec-ttl { font-size: 50px; font-weight: bold; letter-spacing: 0.15em; text-align: left; line-height: 70px; margin-bottom: 20px; border-bottom: #900 solid 1px; padding-bottom: 10px; }
.history .sec-ttl a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-shadow: none;
  background: #c00;
  line-height: 20px;
  height: 20px;
  padding: 0 20px;
  display: inline-block;
  border-radius: 10px;
  margin-left: 10px;
  transition: 0.3s;
}
.history .sec-date { font-size: 20px; line-height: 20px; text-align: left; letter-spacing: 0.1em; }

.history .sec-text { display: flex; }

.liner { width: 4px; background: #900; position: absolute; left: 50%; margin-left: -482px; z-index: 0; height: 100%; }
.liner { animation:liner-anim 2s ease-in-out; }

/* pagination */

.pagination-wrap {
  position: fixed;
  width: 50px;
  top: 100px;
  right: 0;
}

.pagination {
  position: absolute;
  right:0;
  text-align:right;
  top: 50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  width:100px;
}
.pagination li {
  padding: 0;
  text-align: center;
}
.pagination li a{
  padding: 7px;
  color:#fff;
  text-decoration:none;
  text-align:right;
  display: block;
  margin: 0;
  padding:0 20px 0 0;
  transition: padding-right 0.2s;
  font-size: 1.3vh;
  line-height: 2.3vh;
}

.pagination li a.active,.pagination li a:hover{
  color:#d00;
  text-decoration:none;
  padding-right: 30px;
}

/* animation */

@keyframes liner-anim {
  0% { height:0; }
  100% { height:100%; }
}





@media screen and (max-width: 768px) {


  .history .main-content { text-shadow: none; position: relative; padding-bottom: 80px; }
  .history .main-text { width: 90%; font-size: 14px; text-align: left; }
  .history .sec-year { width: 40px; height: 40px; line-height: 40px; font-size: 12px; left: 0; margin-left: 10px; letter-spacing: 0.08em; padding-left: 0.08em; }
  .liner { left: 0; margin-left: 29px; width: 2px; }
  .history section p { width: 80%; margin-left: 60px; font-size: 12px; }
  .history section img { max-height: 100px; padding-right: 10px; padding-bottom: 5px; }
  .history article { padding-left: 0; margin-left: 0; width: 100%; margin-top: 50px; }
  .history .sec-date { width: 80%; margin-left: 60px; line-height: 14px; font-size: 14px; }
  .history .sec-ttl { width: 80%; margin-left: 60px; font-size: 20px; line-height: 30px; letter-spacing: 0.05em; margin-bottom: 10px; padding-bottom: 6px; }
  .history .sec-ttl a {
    font-size: 10px;
    line-height: 18px;
    height: 18px;
    padding: 0 14px;
  }
  .history .sec-text { display: block; }
  .history .pagination li a { color: #fff; }
  .pagination-wrap { position: relative; width: 90%; top: auto; margin: 0 auto; }
  .pagination { position: relative; top: auto; width: 100%; text-align: center; background: #fff; padding: 1vw 0vw; display: none; }
  .pagination li { display: inline-block; padding: 4vw; background: #000; margin: 0.4vw; }
  .pagination li a { display: block; padding: 0; }
  .pagination li a:after { }
  .pagination li a.active, .pagination li a:hover { color: #ccc; padding: 0; }
}