/* ------------------------------------ */
/* CSSファイル (style.css) */
/* ------------------------------------ */

/* 全体の設定 */
body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100vw;
  position: relative;
  overflow: hidden;

  display: block;
  background-color: #0d0c1b;
}

/* ------------------------------------ */
/* スライドショーのスタイリング */
/* ------------------------------------ */

#slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* メインコンテンツの背後に配置 */
  background-color: #0d0c1b;
  /* スライド切り替え時の背景色 */
}

.embed-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  /* フェードアニメーション */
}

.embed-wrapper.active {
  opacity: 1;
}

.embed-wrapper iframe,
.embed-wrapper div {
  /* 埋め込みコンテンツを全画面でカバー（必要に応じて調整） */
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  /* クリック操作を無効化 */
}

/* ------------------------------------ */
/* メインコンテンツ (テキストスタック) のスタイリング */
/* ------------------------------------ */

/* 2つのテキスト要素を囲む新しいスタックコンテナ */
#text-stack {
  position: absolute;
  left: 50%;
  bottom: 5%;
  /* 親要素の底部から5%の位置 */
  transform: translateX(-50%);
  /* 水平方向の中央寄せ */
  display: flex;
  flex-direction: column;
  /* 要素を縦に並べる（2段重ね） */
  align-items: center;
  /* 子要素を水平中央に揃える */
  z-index: 10;
  /* スライドショーの上に配置 */
}

/* クエリ表示エリアのスタイル */
#query-display {
  /* flexアイテムとして扱う */
  position: static;
  top: unset;
  left: unset;
  transform: unset;

  color: #fff;
  /* PHPで用意された静的文字列のデフォルト色は白 */
  font-size: clamp(25px, calc(40 / 1800 * 100vw), 40px);
  padding: 0;
  margin-bottom: 1em;
  /* 修正: 下に1emの余白を追加 */

  font-family: 'Stack Sans Notch', Montserrat, sans-serif;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

/* クエリから読み込んだデータ（動的な部分）を黄色でハイライト */
.query-highlight {
  color: #FFDE00;
  /* SVGのハイライトカラーと合わせる */
}

/* コンテナとSVGの配置 */
.container {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
  /* 親 #text-stack の幅いっぱいに広げる */
  height: auto;
  z-index: 5;
}

svg {
  display: block;
  /* flexアイテムとして扱う */
  position: static;
  top: unset;
  left: unset;
  transform: unset;

  width: 90vw;
  max-width: 1350px;
  height: auto;
}

/* SVGグループ (.g-ants) はスタイルなし */
.g-ants {}

/* SVGシンボルのテキストスタイル */
#s-text {
  font-family: 'Stack Sans Notch', Montserrat, sans-serif;
  font-size: 145px;
  font-weight: 900;
}

/* ------------------------------------ */
/* アニメーションと色の定義 (ストロークアニメーション) */
/* ------------------------------------ */

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 10% 70%;
  stroke-width: 5px;
  stroke-linecap: round;
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: stroke-move 60s infinite linear alternate;
}

.text-copy:nth-child(1) {
  stroke: #FFFF4C;
  stroke-dashoffset: 10%;
}

.text-copy:nth-child(2) {
  stroke: #ffffee;
  stroke-dashoffset: 20%;
}

.text-copy:nth-child(3) {
  stroke: #FFDE00;
  stroke-dashoffset: 30%;
}

.text-copy:nth-child(4) {
  stroke: #66664C;
  stroke-dashoffset: 40%;
}

.text-copy:nth-child(5) {
  stroke: #FF8500;
  stroke-dashoffset: 50%;
}

/* 線の動きのアニメーション */
@keyframes stroke-move {
  100% {
    stroke-dashoffset: -100%;
  }
}

/* ------------------------------------ */
/* メディアクエリ */
/* ------------------------------------ */

/* 画面幅600px以下の場合 (モバイル) */
@media (max-width: 600px) {
  #s-text {
    font-size: 100px;
  }

  /* viewBoxの縦方向の中央寄せを維持 */
  #s-text,
  .g-ants text {
    y: 75%;
  }
}