@charset "UTF-8";
.text-box p {
  background-image: url("../../src/story/story.webp");
}

.title-box {
  width: 80%;
  margin: 0 auto;
  margin-top: 5%;
  padding-bottom: 2%;
  border-bottom: solid 1px #707070;
}
.title-box .content-title {
  font-size: 2.5vw;
  line-height: 200%;
}
.title-box .content-title span {
  margin-left: 5%;
}
.title-box .content-title span .small-text {
  font-size: 1.8vw;
}

.story-box {
  width: 80%;
  margin: 0 auto;
}
.story-box .story {
  margin: 3% auto;
  display: flex;
}
.story-box .story .story-left {
  flex: 50%;
  width: 50%;
}
.story-box .story .story-right {
  flex: 50%;
  width: 50%;
}

.time {
  text-align: center;
  width: 20%;
  background-color: rgb(29, 29, 29);
  padding: 1.5% 0;
  margin: 0 auto;
  position: relative;
  margin-bottom: 20%;
  margin-top: 10%;
  font-size: max(1.3vw, 10px);
}
.time span {
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: white;
  padding: 3% 5%;
}
.time .schedule {
  text-align: left;
  position: absolute;
  width: 190%;
}
.time .schedule img {
  width: 100%;
}
.time .schedule h4 {
  font-size: max(1.2vw, 10px);
  margin-top: 3%;
}
.time .schedule p {
  font-family: "HiraginoSans-W2", "Hiragino Sans", "ヒラギノ角ゴシック";
  font-weight: 200;
  font-size: max(1vw, 10px);
}
.time .schedule1,
.time .schedule3 {
  top: -50%;
  left: -200%;
  padding: 10% 40% 10% 10%;
}
.time .schedule2,
.time .schedule4 {
  top: -50%;
  left: 110%;
  padding: 10% 10% 10% 40%;
}
.time .schedule5 {
  top: -260%;
  left: -200%;
  padding: 10% 40% 10% 10%;
}
.time .schedule1,
.time .schedule3 {
  background-image: url("../../src/story/path2.webp");
  background-size: 100% 100%;
}
.time .schedule2,
.time .schedule4 {
  background-image: url("../../src/story/path3.webp");
  background-size: 100% 100%;
}
.time .schedule5 {
  background-image: url("../../src/story/path4.webp");
  background-size: 100% 100%;
}

.time2 {
  margin-bottom: 15%;
}

.time3 {
  margin-top: 0%;
}

.time5 {
  margin-top: 35%;
}

.story-right {
  padding-left: 7.5%;
}
.story-right .profile {
  display: flex;
}
.story-right .profile .prof-title {
  font-size: max(1.3vw, 10px);
  font-weight: 800;
  line-height: 180%;
}
.story-right .profile .profile-left {
  width: 40%;
  flex: 40%;
  margin-right: 5%;
  border: solid 1px #707070;
}
.story-right .profile .profile-right {
  width: 60%;
  flex: 60%;
}
.story-right .profile p {
  font-family: "HiraginoSans-W2", "Hiragino Sans", "ヒラギノ角ゴシック";
  font-weight: 200;
  line-height: 180%;
  font-size: max(1.2vw, 10px);
}
.story-right p {
  font-family: "HiraginoSans-W2", "Hiragino Sans", "ヒラギノ角ゴシック";
  font-weight: 200;
  margin-top: 10%;
  line-height: 180%;
  font-size: max(1.2vw, 10px);
}

@media (max-width: 700px) {
  .title-box {
    margin-top: 10%;
  }
  .title-box .content-title {
    font-size: 18px;
  }
  .story-box {
    width: 90%;
  }
  .story-box .story {
    flex-direction: column-reverse;
  }
  .story-box .story .story-left {
    width: 100%;
    margin-top: 10%;
  }
  .story-box .story .story-right {
    width: 100%;
    margin-top: 10%;
    padding-right: 7.5%;
  }
  .story-box .story .story-right .profile .prof-title {
    font-size: 15px;
  }
  .story-box .story .story-right .profile p {
    font-size: 14px;
  }
  .story-box .story .story-right p {
    font-size: 15px;
  }
  .time .schedule2,
  .time .schedule4 {
    top: -80%;
  }
  .time .schedule5 {
    top: -370%;
  }
  .time .schedule3 {
    top: -70%;
  }
  .time span {
    font-size: 13px;
  }
  .time .schedule h4 {
    font-size: 14px;
  }
  .time .schedule p {
    font-size: 12px;
  }
  .title-box .content-title span .small-text {
    font-size: 13px;
  }
}/*# sourceMappingURL=story.css.map */