@charset "utf-8";

/* * {
  border: 1px solid red;
} */

body {
  background-color: #fff;
}

/* カテゴリーページ（アーカイブページ）用のスタイル */
.category #contents,
.archive #contents {
  margin-top: 0; /* デフォルトの70pxから0に変更 */
}

/* 画像を最上部に配置するためのスタイル */
#contents > div:first-child {
  margin-top: 0;
  padding-top: 0;
  line-height: 0; /* 画像下の余白を消す */
}

#contents > div:first-child img {
  display: block; /* インライン要素の余白を消す */
  width: 100%; /* 横幅いっぱいに表示 */
}

.category #header,
.archive #header {
  position: absolute; /* 固定位置から絶対位置に変更 */
  /* background: transparent; 背景を透明に */
}

.archive-bg {
  width: 100%;
  line-height: 0;
  margin-top: 70px;
  padding: 0;

  position: relative;
  overflow: hidden;
}

.archive-bg img {
  width: 100%;
  display: block;
}

.archive-bg img:nth-child(2) {
  width: 100px;
  position: absolute;
  bottom: 0px;
  animation: slideRightToLeft 15s linear infinite;
}

/* シンプルな右から左へのアニメーション */
@keyframes slideRightToLeft {
  0% {
    right: -100px;
    opacity: 1;
  }
  /* 右から左へ移動 */
  40% {
    right: 100%;
    opacity: 1;
  }
  /* 左端で消える */
  45% {
    right: 110%;
    opacity: 0;
  }
  /* 右端で再度出現（非表示のまま位置を右端に移動） */
  50% {
    right: -100px;
    opacity: 0;
  }
  /* 右端から再度移動開始 */
  55% {
    right: -100px;
    opacity: 1;
  }
  100% {
    right: 60%;
    opacity: 1;
  }
}

/* タブレット・PC向けの調整 */
@media (min-width: 768px) {
  .archive-bg img:nth-child(2) {
    width: 150px;
    bottom: 0px;
  }
}

#news {
  margin: 50px 0;
}

#header {
  position: relative;
  margin: 0;
}

.news_wrapper {
  background-color: transparent;
  padding: 0;
}

.page_ttl {
  margin: 0;
  margin-bottom: 30px;
}

.page_ttl::before {
  content: "NEWS";
  /* color: #ffffff !important; */
}

.news_wrapper::before,
.news_wrapper::after {
  display: none;
}
@media (min-width: 768px) {
  .page_ttl {
    margin-bottom: 60px;
  }
}

@media (min-width: 1024px) {
  #contents {
    margin-top: 0 !important;
  }
  #news {
    margin-top: 80px;
  }

  .archive-bg {
    height: 350px;
    overflow: hidden;
    margin-top: 0;
  }

  /* 画像の下部を表示するように設定 */
  .archive-bg img:first-child {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center bottom; /* 中央下部を表示 */
  }
}