@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap");
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-feature-settings: "palt";
}

#timeline {
  font-family: "Noto Sans JP", sans-serif;
}

body.inopening {
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 200vh;
  position: relative;
}

.container.endopening {
  height: 100vh;
}

.section-a {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}

.section-b {
  width: 100%;
  height: 100vh;
  background-color: #305faa;
  position: fixed;
  top: 100vh;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 12;
}

.section-b.inaction {
  top: 0;
}

.text-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-left,
.text-right {
  position: absolute;
  color: white;
  font-size: min(200px, 18vw);
}

.text-left {
  right: 0;
  transform: translate(50%, -0.5em);
  opacity: 0;
  font-family: serif;
}

.text-right {
  left: 0;
  transform: translate(-50%, 0.5em);
  opacity: 0;
  font-family: serif;
}

.no-scroll {
  overflow: hidden;
}

#slide_images header, #slide_images footer {
  height: 6vh;
  background-color: #f7f7f7;
  text-align: center;
}
#slide_images header {
  background-image: url(https://www.shimz.co.jp/heritage/img/shoulder_logo.svg);
  background-repeat: no-repeat;
  background-size: 9.5vh;
  background-position: center top;
  border-bottom: 3px solid #305faa;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 10px;
}
#slide_images header.header-en {
  background-image: url(https://www.shimz.co.jp/heritage/img/shoulder_logo_en.svg);
}
#slide_images header hr {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 3px;
}
#slide_images footer {
  border-top: 3px solid #305faa;
}
#slide_images footer p {
  padding-top: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #305faa;
}

.full-screen {
  width: 100%;
  height: 100%;
  background-color: lightblue; /* 背景色を設定（任意） */
}

.top_container {
  max-width: 100%;
  position: relative;
}

#banner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(48, 95, 170, 0.9);
  color: white;
  text-align: center;
  font-family: serif;
  padding: 20px;
  gap: 20px;
  border: 20px solid rgba(255, 255, 255, 0.1411764706);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  max-width: 530px;
  width: 80vw;
}
#banner img.scrolldown_img {
  display: block;
  width: 50px;
  margin-top: 20px;
}
#banner hr {
  width: 100%;
}

#scrollArea {
  /* 外部でサイズを自由に設定可能 */
  width: 100%;
  height: 88vh;
  /* その他のスタイル */
  background-color: #f0f0f0;
}

@keyframes bounce-fast {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-10px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.bounce {
  animation: bounce-fast 0.8s infinite;
}/*# sourceMappingURL=style2.css.map */