@charset "utf-8";

.his-top {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.webp .his-top {
  background-image: url(../asset/img/history/top.webp);
}

.no-webp .his-top {
  background-image: url(../asset/img/history/top.jpg);
}

.history {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.history img {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.time-line {
  width: 55%;
  margin: 0 0 3em;
  padding: 0 0 0 3rem;
  background-image: url(../asset/img/history/line.png);
  background-size: 15px auto;
  background-repeat: repeat-y;
  background-position: top left;
}

.time-line p {
  margin: 0 0 .6em;
  color: #695a27;
  font-size: 12px;
  font-feature-settings: "palt";
}

.time-line-image {
  width: 100%;
  margin: 3rem 0 0;
}

.bold-5 {
  padding: 0 1em 0 0;
  font-weight: 600;
}

p.time-line-heading {
  margin: 0;
  padding: .6em 0 .6em;
  font-size: 42px;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}

.his-image {
  position: relative;
  width: 45%;
  height: 100vh;
}

.his-image img {
  position: absolute;
  height: auto;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .his-top {
    position: relative;
    width: 100%;
    height: 100dvh;
    background-size: cover;
    background-position: top right 30%;
  }

  .history {
    width: 100%;
    padding: 3rem 5%;
  }
  
  .history img {
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  }
  
  .time-line {
    width: 70%;
    margin: 0 0 3em;
    padding: 0 0 0 8%;
    background-size: 10px auto;
  }
  
  .time-line-image {
    width: 100%;
    margin: 3rem 0 0;
  }
  
  .bold-5 {
    padding: 0 1em 0 0;
    font-weight: 600;
  }
  
  p.time-line-heading {
    margin: 0;
    padding: .5em 0;
    font-size: 30px;
  }
  
  .his-image {
    position: relative;
    width: 26%;
    height: 100vh;
  }
  
  .his-image img {
    position: absolute;
    height: auto;
  }
  
  .his-image .pos-1 {
    width: 100%;
    top: 30%;
    left: 0;
  }
  
  .his-image .pos-2 {
    width: 100%;
    top: 65%;
    left: 0;
  }
  
  .his-image .pos-3 {
    width: 100%;
    top: 92%;
    left: 0;
  }
  
  .his-image .pos-4 {
    width: 100%;
    top: 103%;
    left: 0;
  }
  
  .his-image .pos-5 {
    width: 100%;
    top: 130%;
    left: 0;
  }
  
  .his-image .pos-6 {
    width: 100%;
    top: 150%;
    left: 0;
  }
  
  .his-image .pos-7 {
    width: 100%;
    top: 170%;
    left: 0;
  }
  
  .his-image .pos-8 {
    width: 100%;
    top: 193%;
    left: 0;
  }

  .his-image .pos-9 {
    width: 100%;
    top: 215%;
    left: 0;
  }

  .his-image .pos-10 {
    width: 100%;
    top: 233%;
    left: 0;
  }

  .his-image .pos-11 {
    width: 100%;
    top: 248%;
    left: 0;
  }

  .his-image .pos-12 {
    width: 100%;
    top: 270%;
    left: 0;
  }

  .his-image .pos-13 {
    width: 100%;
    top: 293%;
    left: 0;
  }

  .time-line-image {
    margin: 2rem 0 0;
  }
  
}

@media screen and (min-width: 744px) and (max-width: 1024px) and (orientation:portrait) {
  .his-top {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
  }

  .his-top::before {
    content: "";
    display: block;
    padding-top: 85%;
  }

  .his-image .pos-1 {
    width: 42%;
    top: 12%;
    left: 0;
  }
  
  .his-image .pos-2 {
    width: 55%;
    top: 35%;
    right: 10%;
  }
  
  .his-image .pos-3 {
    width: 42%;
    top: 57%;
  }
  
  .his-image .pos-4 {
    width: 42%;
    top: 52%;
    right: 10%;
  }
  
  .his-image .pos-5 {
    width: 42%;
    top: 75%;
  }
  
  .his-image .pos-6 {
    width: 42%;
    top: 85%;
    right: 10%;
  }
  
  .his-image .pos-7 {
    width: 42%;
    top: 95%;
  }
  
  .his-image .pos-8 {
    width: 42%;
    top: 110%;
    right: 10%;
  }

  .his-image .pos-9 {
    width: 55%;
    top: 125%;
  }

  .his-image .pos-10 {
    width: 55%;
    top: 143%;
    right: 10%;
  }

  .his-image .pos-11 {
    width: 42%;
    top: 158%;
  }

  .his-image .pos-12 {
    width: 42%;
    top: 165%;
    right: 10%;
  }

  .his-image .pos-13 {
    width: 55%;
    top: 185%;
  }

}

@media screen and (min-width: 1025px) {
  .his-image .pos-1 {
    width: 42%;
    top: 0;
    left: 0;
  }
  
  .his-image .pos-2 {
    width: 42%;
    top: 270px;
    right: 10%;
  }
  
  .his-image .pos-3 {
    width: 42%;
    top: 500px;
    left: 0;
  }
  
  .his-image .pos-4 {
    width: 42%;
    top: 480px;
    right: 10%;
  }
  
  .his-image .pos-5 {
    width: 42%;
    top: 820px;
    left: 0;
  }
  
  .his-image .pos-6 {
    width: 42%;
    top: 900px;
    right: 10%;
  }
  
  .his-image .pos-7 {
    width: 42%;
    top: 1100px;
    left: 0;
  }
  
  .his-image .pos-8 {
    width: 42%;
    top: 1220px;
    right: 10%;
  }

  .his-image .pos-9 {
    width: 42%;
    top: 1480px;
    left: 0;
  }

  .his-image .pos-10 {
    width: 42%;
    top: 1580px;
    right: 10%;
  }

  .his-image .pos-11 {
    width: 42%;
    top: 1750px;
    left: 0;
  }

  .his-image .pos-12 {
    width: 42%;
    top: 1800px;
    right: 10%;
  }

  .his-image .pos-13 {
    width: 42%;
    top: 2120px;
    left: 0;
  }

}