body { 
  font-family: 'Noto Sans JP', sans-serif; 
  color: #333333; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}

.font-bold-jp { 
  font-family: 'Noto Sans JP', sans-serif; 
  font-weight: 700; 
}

.font-regular-jp { 
  font-family: 'Noto Sans JP', sans-serif; 
  font-weight: 400; 
}

/* Animation */
.fade-in-initial { 
  opacity: 0; 
  transform: translateY(30px); 
}

.fade-in-visible { 
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}



.img100 {
  width: 100%; /* 親要素の幅に合わせる */
   max-height: 800px;
  /* object-fit: cover;  表示領域に合わせて画像を拡大・縮小 */
  /* object-fit: contain;  縦横比を維持したまま、表示領域に収まるように表示 */
}



 style="width: 100%; max-height: 600px; object-fit: cover;"


/* 
  section[data-animate="true"] elements have their initial state for animation 
  set via the .fade-in-initial class added by JavaScript.
  The .fade-in-visible class is then added by JavaScript when the element
  becomes visible in the viewport, triggering the transition.
*/

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightgray;
}

main {
  margin-top: -100px; /* ヘッダーの高さに合わせて調整 */
  padding-top: 0px;
}