@charset "UTF-8";
/*!  変数・関数
================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

footer {
  margin-left: 240px; }

main {
  flex: 1; }

/*-----------------------------------------------
 main
-----------------------------------------------*/
h2 {
  /*  margin-bottom: 85px;*/
  position: relative;
  z-index: 20; }

/*-----------------------------------------------
 chronology
-----------------------------------------------*/
.chronology {
  width: 1000px;
  margin: 0 auto; }
  .chronology::after {
    display: block;
    position: relative;
    content: "";
    width: 100%;
    height: 80px;
    background: url("../img/global/bg.png") center 100px repeat-y;
    background-color: #fff;
    background-size: 100%;
    background-attachment: fixed;
    z-index: 20; }

/*-----------------------------------------------
 .tab-list
-----------------------------------------------*/
.tab-list ul {
  position: relative;
  display: flex;
  z-index: 20;
  background: url("../img/global/bg.png") center 100px repeat-y;
  background-color: #fff;
  background-size: 100%;
  background-attachment: fixed;
  padding-top: 85px; }
  .tab-list ul li {
    width: 200px;
    height: 73px;
    text-indent: -9999px;
    cursor: pointer; }
    .tab-list ul li:first-child {
      background: url("../img/chronology/tab-before-02-pc.png") no-repeat center 10px; }
    .tab-list ul li:nth-child(2) {
      background: url("../img/chronology/tab-1st-02-pc.png") no-repeat center 10px; }
    .tab-list ul li:nth-child(3) {
      background: url("../img/chronology/tab-2nd-02-pc.png") no-repeat center 10px; }
    .tab-list ul li:nth-child(4) {
      background: url("../img/chronology/tab-3rd-02-pc.png") no-repeat center 10px; }
    .tab-list ul li:nth-child(5) {
      background: url("../img/chronology/tab-after-02-pc.png") no-repeat center 10px; }
    .tab-list ul li:first-child.active {
      background: url("../img/chronology/tab-before-01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }
    .tab-list ul li:nth-child(2).active {
      background: url("../img/chronology/tab-1st-01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }
    .tab-list ul li:nth-child(3).active {
      background: url("../img/chronology/tab-2nd-01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }
    .tab-list ul li:nth-child(4).active {
      background: url("../img/chronology/tab-3rd-01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }
    .tab-list ul li:nth-child(5).active {
      background: url("../img/chronology/tab-after-01-pc.png") no-repeat;
      transition: all 0.2s ease-out; }

/*-----------------------------------------------
 .tab-area
-----------------------------------------------*/
.tab-area {
  display: none;
  width: 902px;
  margin: 0 auto;
  padding: 44px 45px;
  border: 4px solid #13fbdd; }

.tab-area.show {
  display: block; }

ul.list-chronology {
  position: relative;
  z-index: 10; }
  ul.list-chronology li {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: content-box; }
    ul.list-chronology li .day {
      position: absolute;
      left: 0;
      width: 82px;
      font-size: 3.1rem;
      font-family: "Hiragino Mincho ProN W7", "ヒラギノ明朝 ProN W7", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      color: #030303;
      margin-top: -10px;
      margin-right: 4px; }
      ul.list-chronology li .day .year {
        font-size: 1.8rem; }
        ul.list-chronology li .day .year::after {
          display: inline-block;
          content: "年";
          font-size: 1.2rem; }
      ul.list-chronology li .day .year2 {
        font-size: 2.4rem; }
        ul.list-chronology li .day .year2::after {
          display: inline-block;
          content: "年";
          font-size: 1.8rem; }
    ul.list-chronology li .day-point {
      position: absolute;
      left: 82px;
      width: 36px;
      height: 100%;
      margin-right: 17px;
      padding-top: 30px;
      border-right: 3px solid #000;
      box-sizing: border-box; }
    ul.list-chronology li .note {
      position: relative;
      left: 142px;
      width: 750px;
      font-size: 1.9rem;
      line-height: 1.6;
      margin-bottom: 43px;
      padding-top: 22px; }
      ul.list-chronology li .note .span {
        font-size: 1.5rem; }
      ul.list-chronology li .note .note-tsuioku {
        color: #16cbb4; }
      ul.list-chronology li .note .note-double {
        color: #4479dd; }
      ul.list-chronology li .note .note-steeple {
        color: #b75cda; }
      ul.list-chronology li .note .note-koto {
        color: #fc8f46; }
      ul.list-chronology li .note .note-yotsuba {
        color: #886653; }
      ul.list-chronology li .note .note-shizoku {
        color: #ef52a7; }
      ul.list-chronology li .note .note-cygnus {
        color: #fc4675; }
      ul.list-chronology li .note .note-nankai {
        color: #2ec9db; }
      ul.list-chronology li .note .note-doran {
        color: #8bca4d; }
      ul.list-chronology li .note .note-mirai {
        color: #691fcd; }
      ul.list-chronology li .note .note-sacrifice {
        color: #970820; }
      ul.list-chronology li .note .note-sotsugyo {
        color: #7e9696; }
      ul.list-chronology li .note .note-magian {
        color: #fcb317; }
      ul.list-chronology li .note .note-nyugaku {
        color: #179a10; }
      ul.list-chronology li .note .note-kyukou {
        color: #3d2bc5; }
      ul.list-chronology li .note .note-natsu {
        color: #f35a1e; }
      ul.list-chronology li .note .note-yokohama {
        color: #9a12da; }
      ul.list-chronology li .note .note-raihou {
        color: #c71522; }
      ul.list-chronology li .note .note-koritsu {
        color: #0369f4; }
      ul.list-chronology li .note .note-escape {
        color: #12c6a2; }
      ul.list-chronology li .note .note-invasion {
        color: #a5d809; }
      ul.list-chronology li .note .note-kyuten {
        color: #e351da; }
      ul.list-chronology li .note .note-tsuiseki {
        color: #3d94d1; }
      ul.list-chronology li .note .note-dakkan {
        color: #d7b61b; }

#list01 li:first-child .day-point,
#list03 li:first-child .day-point,
#list06 li:first-child .day-point,
#list09 li:first-child .day-point,
#list11 li:first-child .day-point {
  margin-top: 28px;
  padding-top: 0; }

#list02 li:last-child .day-point,
#list05 li:last-child .day-point,
#list08 li:last-child .day-point,
#list10 li:last-child .day-point,
#list12 li:last-child .day-point {
  height: 20px;
  margin-bottom: 110px; }

.bg {
  position: fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  width: 992px;
  height: 100%;
  margin-left: -45px;
  background-position: center -300px;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  overflow: hidden; }

#bg01 {
  background-image: url(../img/chronology/bg01-pc.jpg); }

#bg02 {
  background-image: url(../img/chronology/bg02-pc.jpg); }

#bg03 {
  background-image: url(../img/chronology/bg03-pc.jpg); }

#bg04 {
  background-image: url(../img/chronology/bg04-pc.jpg);
  background-position: center -500px; }

#bg05 {
  background-image: url(../img/chronology/bg05-pc.jpg);
  background-position: center -250px; }

#bg06 {
  background-image: url(../img/chronology/bg06-pc.jpg);
  background-position: center -500px; }

#bg07 {
  background-image: url(../img/chronology/bg07-pc.jpg);
  background-position: center -400px; }

#bg08 {
  background-image: url(../img/chronology/bg08-pc.jpg);
  background-position: center -550px; }

#bg09 {
  background-image: url(../img/chronology/bg09-pc.jpg); }

#bg10 {
  background-image: url(../img/chronology/bg10-pc.jpg); }

/*#bg11{
  background-image: url(../img/chronology/bg11-pc.jpg);
  background-position: center -900px;
}*/
#bg11 {
  background-image: url(../img/chronology/bg12-pc.jpg); }

#bg12 {
  background-image: url(../img/chronology/bg13-pc.jpg);
  background-position: center -500px; }

.bg.active {
  opacity: 1; }

@media screen and (max-width: 640px) {
  footer {
    margin-left: 0; }

  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  /*
    h2 {
      margin-bottom: px_vw(55);
    }
  */
  /*-----------------------------------------------
   chronology
  -----------------------------------------------*/
  .chronology {
    width: 100%;
    margin: 0 auto; }
    .chronology::after {
      height: 12.5vw;
      background-size: cover; }

  /*-----------------------------------------------
   .tab-list
  -----------------------------------------------*/
  .tab-list ul {
    flex-wrap: wrap;
    width: 92.1875vw;
    margin-left: auto;
    margin-right: auto; }
    .tab-list ul li {
      width: 30vw;
      height: 11.40625vw;
      background-size: cover;
      margin-right: 0.46875vw; }
      .tab-list ul li:first-child {
        background: url("../img/chronology/tab-before-02-sp.png") no-repeat center top;
        margin-bottom: 0.78125vw; }
      .tab-list ul li:nth-child(2) {
        background: url("../img/chronology/tab-1st-02-sp.png") no-repeat center top;
        margin-bottom: 0.78125vw; }
      .tab-list ul li:nth-child(3) {
        background: url("../img/chronology/tab-2nd-02-sp.png") no-repeat center top;
        margin-bottom: 0.78125vw; }
      .tab-list ul li:nth-child(4) {
        background: url("../img/chronology/tab-3rd-02-sp.png") no-repeat center top; }
      .tab-list ul li:nth-child(5) {
        background: url("../img/chronology/tab-after-02-sp.png") no-repeat center top; }
      .tab-list ul li:first-child.active {
        background: url("../img/chronology/tab-before-01-sp.png") no-repeat;
        background-size: cover;
        transition: all 0.2s ease-out; }
      .tab-list ul li:nth-child(2).active {
        background: url("../img/chronology/tab-1st-01-sp.png") no-repeat;
        background-size: cover;
        transition: all 0.2s ease-out; }
      .tab-list ul li:nth-child(3).active {
        background: url("../img/chronology/tab-2nd-01-sp.png") no-repeat;
        background-size: cover;
        transition: all 0.2s ease-out; }
      .tab-list ul li:nth-child(4).active {
        background: url("../img/chronology/tab-3rd-01-sp.png") no-repeat;
        background-size: cover;
        transition: all 0.2s ease-out; }
      .tab-list ul li:nth-child(5).active {
        background: url("../img/chronology/tab-after-01-sp.png") no-repeat;
        background-size: cover;
        transition: all 0.2s ease-out; }

  /*-----------------------------------------------
   .tab-area
  -----------------------------------------------*/
  .tab-area {
    width: 85.9375vw;
    margin: 0 auto;
    padding: 5.78125vw 3.125vw 0; }

  ul.list-chronology li .day {
    width: 9.375vw;
    font-size: 3.90625vw;
    margin-top: -1.5625vw;
    margin-right: 0.46875vw; }
    ul.list-chronology li .day .year {
      font-size: 2.1875vw; }
      ul.list-chronology li .day .year::after {
        font-size: 1.53125vw; }
    ul.list-chronology li .day .year2 {
      font-size: 2.8125vw; }
      ul.list-chronology li .day .year2::after {
        font-size: 2.1875vw; }
  ul.list-chronology li .day-point {
    left: 10.78125vw;
    width: 4.375vw;
    margin-right: 2.1875vw;
    padding-top: 2.96875vw; }
    ul.list-chronology li .day-point img {
      width: 5.3125vw; }
  ul.list-chronology li .note {
    left: 17.96875vw;
    width: 65.625vw;
    font-size: 3.4375vw;
    /*margin-top: px_vw(40);*/
    margin-bottom: 6.25vw;
    padding-top: 1.25vw; }
    ul.list-chronology li .note .span {
      font-size: 2.5vw; }

  #list01 li:first-child .day-point,
  #list03 li:first-child .day-point,
  #list06 li:first-child .day-point,
  #list09 li:first-child .day-point,
  #list11 li:first-child .day-point {
    margin-top: 2.8125vw; }

  #list02 li:last-child .day-point,
  #list05 li:last-child .day-point,
  #list08 li:last-child .day-point,
  #list10 li:last-child .day-point,
  #list12 li:last-child .day-point {
    height: 3.125vw;
    margin-bottom: 50vw; }

  .bg {
    width: 92.1875vw;
    margin-left: -3.125vw;
    background-position: center -140.625vw; }

  #bg01 {
    background-image: url(../img/chronology/bg01-sp.jpg); }

  #bg02 {
    background-image: url(../img/chronology/bg02-sp.jpg);
    background-position: center -187.5vw; }

  #bg03 {
    background-image: url(../img/chronology/bg03-sp.jpg);
    background-position: center -187.5vw; }

  #bg04 {
    background-image: url(../img/chronology/bg04-sp.jpg);
    background-position: center -156.25vw; }

  #bg05 {
    background-image: url(../img/chronology/bg05-sp.jpg);
    background-position: center -62.5vw; }

  #bg06 {
    background-image: url(../img/chronology/bg06-sp.jpg);
    background-position: center -125vw; }

  #bg07 {
    background-image: url(../img/chronology/bg07-sp.jpg);
    background-position: center -140.625vw; }

  #bg08 {
    background-image: url(../img/chronology/bg08-sp.jpg); }

  #bg09 {
    background-image: url(../img/chronology/bg09-sp.jpg);
    background-position: center -234.375vw; }

  #bg10 {
    background-image: url(../img/chronology/bg10-sp.jpg);
    background-position: center -78.125vw; }

  /*  #bg11{
      background-image: url(../img/chronology/bg11-sp.jpg);
      background-position: center px_vw(-1300);
    }*/
  #bg11 {
    background-image: url(../img/chronology/bg12-sp.jpg);
    background-position: center -46.875vw; }

  #bg12 {
    background-image: url(../img/chronology/bg13-sp.jpg);
    background-position: center -156.25vw; } }