/* ===============================
   General Styles
=============================== */

body {
  font-family: serif;
  color: #414141;
  font-size: 18px;
  line-height: 24px;
}

/* h1 {
  font-size: 150px;
  font-family: "Triangle2";
} */

h1 {
  font-size: clamp(20px, 16vw, 180px);
  font-family: "Triangle2";
  text-align: center;
}

h2 {
  font-size: 18px;
  text-align: center;
}

/* コンテンツ幅調整 */
.contained {
  margin: 0 auto;
  width: 90%;
}

.fade-text span {
  display: block;
  opacity: 0;
  transform: translateY(40px);
}


/* 一覧.png を画面の70%にして中央配置 */
.fade-text img {
  width: 70vw;   /* 画面幅の70% */
  max-width: 100%; /* 念のため */
  height: auto;
  display: block;
  margin: 0 auto; /* 中央配置 */
}

/* ===============================
   メインエリア
=============================== */

main {
  position: relative;
  background: #ffffff;
  z-index: 10;
  padding: 60px 0;
}

/* ===============================
   Header Styles
=============================== */

header {
  overflow: hidden;
  /* padding-bottom で高さを決める */
  padding-bottom: 55%;
}

/* ヘッダー画像 */
header img {
  width: 100%;
  max-width: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ===============================
   Swiper Styles
=============================== */

/* スライド画像 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

/* ★★★ 矢印をグレーに変更（追加部分）★★★ */
.swiper {
  --swiper-navigation-color: #b6b6b6; /* ← 矢印色 */
  --swiper-pagination-color: #b6b6b6; /* ← 下のドット色も統一 */
}

/* 矢印サイズ調整（任意） */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 24px;
}

/* ===============================
   Responsive Design
=============================== */

@media (min-width: 500px) {
  .contained {
    width: 80%;
  }
}

@media (min-width: 600px) {
  .contained {
    width: 60%;
  }

  header {
    padding-bottom: 50%;
  }
}

@media (min-width: 700px) {
  header {
    padding-bottom: 45%;
  }
}


a {
  text-decoration: none;
  color: inherit;
}

body {
  padding: 40px;
}

.parts-anime {
  font-weight: 700;
  width: 200px;
  background: #a5a5a5;
  color: #fff;
  border: 2px solid #a5a5a5;
  text-align: center;
  cursor: pointer;
  border-radius: 24px;
  transition: all 0.3s;
}

.parts-anime a {
  padding: 16px 0;
  display: block;
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.parts-anime:hover {
  background-color: #fff;
  color: #a5a5a5;
  border: 2px solid #a5a5a5;
}


.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1px 0; /* 上下余白 */
}