@charset "UTF-8";
/* CSS Document */
header {
  padding: 20px 15%;
}
header p {
  margin: 0;
}
footer {
  padding: 20px 15%;
}
footer p {
  text-align: center;
  margin-bottom: 0;
}
.footer_title {
  margin-bottom: 20px;
}
.footer_p {
  font-size: 0.8rem;
}
.mgb40 {
  margin-bottom: 40px;
}
.mgb20 {
  margin-bottom: 20px;
}
nav {
  display: flex;
  justify-content: center;
}
.nextBtn {
  display: flex;
  justify-content: space-between;
  /* その他のスタイル */
  list-style-type: none;
  padding: 0;
  margin: 0 0 40px;
  ;
  width: 100%; /* 親要素の幅いっぱいに広げたい場合 */
}
.h1box {
  margin-bottom: 50px;
}
.h1box h1 {
  margin-bottom: 50px;
}
.h1box p {
  padding-left: 20px;
}
h2 {
  border-bottom: #BF1304 dashed 1px;
  padding: 10px;
  margin-bottom: 40px;
}
h3 {
  padding-bottom: 20px;
}
p {
  margin-bottom: 20px;
}
a {
  text-decoration: none;
  color: #BF1304;
  word-break: break-all;
}
figure {
  margin-bottom: 40px;
}
li {
  list-style-position: inside;
}
.float-image {
  /* 画像を左に寄せる */
  float: left;
  /* テキストとの間に余白を作る (例: 右に10px、下に10px) */
  margin: 0 10px 10px 0;
}
.next-section {
  clear: both; /* 前の要素のfloatによる回り込みを解除 */
}
/* アニメーションの定義 */
@keyframes fadeIn {
  /* アニメーション開始時 (0%) */
  0% {
    opacity: 0; /* 透明 */
  }
  /* アニメーション終了時 (100%) */
  100% {
    opacity: 1; /* 不透明 */
  }
}
/* 要素へのアニメーション適用 */
.fade-in-text {
  /* 初期状態では透明にしておく */
  opacity: 0;
  /* アニメーション名, 実行時間, 動きの緩急, 終了時の状態を維持 */
  animation: fadeIn 2s ease-out forwards;
}
/* アニメーションの定義 (浮き上がり) */
@keyframes fadeInUp {
  /* アニメーション開始時 (0%) */
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(20px); /* 下に20px移動した状態からスタート */
  }
  /* アニメーション終了時 (100%) */
  100% {
    opacity: 1; /* 不透明 */
    transform: translateY(0); /* 元の位置に戻る */
  }
}
/* 要素へのアニメーション適用 */
.fade-in-up-text {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
}
.fade-in-up-text:nth-child(1) {
  animation-delay: 0.5s; /* 0.5秒後に開始 */
}
.fade-in-up-text:nth-child(2) {
  animation-delay: 1.0s; /* 1.0秒後に開始 */
}
.fade-in-up-text:nth-child(3) {
  animation-delay: 1.5s; /* 1.5秒後に開始 */
}
.fade-in-up-text:nth-child(4) {
  animation-delay: 2.0s; /* 1.5秒後に開始 */
}
.fade-in-up-nav {
  opacity: 0;
  animation: fadeInUp 1.0s ease-out forwards;
}
.fade-in-up-nav:nth-child(1) {
  animation-delay: 0.5s; /* 0.5秒後に開始 */
}
.fade-in-up-nav:nth-child(2) {
  animation-delay: 1.0s; /* 1.0秒後に開始 */
}
.fade-in-up-nav:nth-child(3) {
  animation-delay: 1.5s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(4) {
  animation-delay: 2.0s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(5) {
  animation-delay: 2.5s; /* 0.5秒後に開始 */
}
.fade-in-up-nav:nth-child(6) {
  animation-delay: 3.0s; /* 1.0秒後に開始 */
}
.fade-in-up-nav:nth-child(7) {
  animation-delay: 3.5s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(8) {
  animation-delay: 4.0s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(9) {
  animation-delay: 4.5s; /* 0.5秒後に開始 */
}
.fade-in-up-nav:nth-child(10) {
  animation-delay: 5.0s; /* 1.0秒後に開始 */
}
.fade-in-up-nav:nth-child(11) {
  animation-delay: 5.5s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(12) {
  animation-delay: 6.0s; /* 1.5秒後に開始 */
}
.fade-in-up-nav:nth-child(13) {
  animation-delay: 6.5s; /* 1.5秒後に開始 */
}
/* 初期状態: 透明で、少し下に移動させておく */
.fade-item {
  opacity: 0;
  transform: translateY(20px);
  /* アニメーション時間と緩急をここで指定 */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
/* 画面内に入ったらJavaScriptで付与するクラス */
.fade-item.is-visible {
  opacity: 1; /* 不透明に */
  transform: translateY(0); /* 元の位置に戻す（浮き上がり） */
}
.stepnav {
  margin-bottom: 40px;
}
.stepnav li {
  list-style: none;
}
.chart-container {
  /* (以前の設定) */
  max-width: 800px;
  width: 90%;
  margin: 20px auto;
  position: relative;
  /* 💥 グラフの高さをここで制御する 💥 */
  /* デスクトップでは、幅の半分程度の高さを確保 */
  height: 400px; /* 例: 高さ400ピクセルに固定 */
}
.mokuji li {
  margin-bottom: 20px;
}
.audioList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
}
.maintitle {
  text-align: center;
}
/* スマホなどの小さな画面（例：幅600px以下）の場合の調整 */
@media (max-width: 600px) {
  .chart-container {
    width: 95%;
    /* 縦長になりすぎるのを防ぐため、スマホでは高さを少し抑える */
    height: 350px; /* 例: スマホでは高さ350ピクセルに設定 */
    /* もしくは、画面幅に対する相対的な高さで設定（縦横比を固定したい場合に有効） */
    /* padding-top: 75%; /* (幅の75%を高さにするアスペクト比維持のテクニック) */
    /* height: 0; */
  }
}
/* スマホなどの小さな画面（例：幅600px以下）の場合の調整 */
@media (max-width: 600px) {
  .chart-container {
    /* スマホではより画面いっぱいに広げる */
    width: 95%;
  }
}
/* タブレット (例: 1024px以下) */
@media screen and (max-width: 1024px) {}
/* スマートフォン (例: 767px以下) */
@media screen and (max-width: 767px) {
  footer {
    font-size: 0.8rem;
  }
  .footer_p {
    font-size: 0.6rem;
  }
  .other-content-top, .other-content {
    padding: 40px 10%;
  }
}