/* Parallax_Animation */

body {
  background: #483d8b;   /* 背景色を設定 */
  overflow: hidden;   /* 右側スクロールバーを隠す */   /* oʊ.vɚ.floʊ（オウヴァーフロウ） */ /* hɪd.ən（ヒドゥン） */
  height: 100vh;   /* ビューポートの高さを設定 */   /* haɪt（ハイト） */
  width: 100vw;   /* ビューポートの幅を設定 */   /* wɪdθ（ウィッドス） */
  font-size: 16px;    /* 基準フォントサイズを16pxに設定（rem単位での計算を容易にするため） */ /* fɒntsaɪz（フォントサイズ） */
  font-family: "Lato";   /* Lato（ラト）フォントを適用 */   /* fɒntˈfæm.əl.i（フォント・ファミリー） */
  font-feature-settings: "palt";
  scroll-behavior: smooth; /* スムーズスクロール */
  -webkit-font-smoothing: antialiased;   /* フォントの滑らかさを向上（Safari専用） */   /* wɛbkɪt（ウェブキット） */ /* smuːðɪŋ（スムージング） */ /* æn.tiˈeɪ.liːst（アンティエイリースト） */
  -webkit-user-select: none;   /* ユーザーによるテキスト選択を無効化（Safari専用） */   /* nʌn（ナン） */
     -moz-user-select: none;   /* ユーザーによるテキスト選択を無効化（Firefox専用） */
      -ms-user-select: none;   /* ユーザーによるテキスト選択を無効化（IE専用） */
          user-select: none;   /* ユーザーによるテキスト選択を無効化（汎用） */ 
}

/* 複数の要素に共通のスタイル（高さと幅を100%）を適用 */
#Particles_Animation,#parallax,
.layer, .some-space, .some-more-space {   /* より多くの空間 */ /* leɪ.ər（レイヤー） */ /* sʌm.mɔːr.speɪs */
  position: absolute;   /* 要素を絶対位置に固定 */
  width: 100%;   /* 要素の幅 *//* wɪdθ（ウィッドス） */
  height: 100%;   /* 要素の高さ */ /* haɪt（ハイト） */
}

/* h1_font設定 */
#Particles_Animation{
  opacity: 0.6;   /* oʊˈpæs.ə.ti（オウパシティ） */
}

h1 {
  position: absolute;   /* 要素の位置を絶対値で設定 */  /* pəˈzɪʃ.ən（ポジション） */ /* æb.sə.luːt（アブソルート） */
  transform: translate(-50%, -50%);   /* 要素を中央配置 */ /* 変形 trænsˈfɔːrm（トランスフォーム） */ /* 変換 trænsˈleɪt（トランスレイト） */
  top: 50%;   /* 垂直方向の中央に配置 */
  left: 50%;   /* 水平方向の中央に配置 */
  color: white;   /* テキストの色を白に設定 */
  font-size: 4.7em;   /*  フォントサイズを設定（1rem = 16px基準で計算） */
  font-weight: 900;   /* 字の太さ設定 */ /* weɪt（ウェイト） */
  letter-spacing: 0.2em;   /* 文字間隔を設定 */
}

a {
  position: absolute;   /* 位置を絶対値で設定 */ /* pəˈzɪʃ.ən（ポジション） */ /* æb.sə.luːt（アブソルート） */
  padding: 0.77rem 0.94rem;   /* 内側余白を設定 */ /* pæd.ɪŋ（パディング） */
  transform: translate(-50%, -50%);   /* URLリンクを中央配置 */ /* 変形 trænsˈfɔːrm（トランスフォーム） */ /* 変換 trænsˈleɪt（トランスレイト） */
  top: 80%;   /* 垂直方向の位置 */
  left: 60%;   /* 水平方向の位置 */
  display: inline-block;   /* URLリンクをインライン要素（自動改行されない）として扱う */
  border: 0.125rem solid white;   /* URLリンクに白の境界線を設定 */ /* bɔːr.dɚ（ボーダー） */ /* sɑː.lɪd（ソリッド） */
  transition: all 200ms ease;   /* ホバー時のアニメーション効果を設定 */ /* 移行 trænˈzɪʃ.ən（トランジション）」 */
  letter-spacing: 0.03em;   /* 文字間隔を設定 */
  font-size: 1em;   /* フォントサイズを設定 */
  color: white;   /* リンクのテキスト色を白に設定 */
  text-decoration: none;   /* テキスト装飾を無効化 */ /* dek.əˈreɪ.ʃən（デコレーション） */
  text-align: center; /* テキストを中央揃え */
}

a:hover {
  background: white;   /* 背景色を白に設定（ホバー時） */
  color: black;   /* テキスト色を黒に設定（ホバー時） */
}

/* アニメーション効果を設定 */
.some-space {
  animation: rotate 18s 0.5s infinite linear reverse; /* 回転 roʊ.teɪt（ロウテイト） */ /* 無限 ɪn.fɪ.nɪt（インフィニット） */ /* 直線的 lɪn.i.ɚ（リニア） */ /* 反転 rɪˈvɝːs（リヴァース） */
}

.some-more-space {
  -webkit-animation: rotate 15s 0.1s infinite linear;   /* Safari専用アニメーション */
          animation: rotate 15s 0.1s infinite linear;   /* 汎用アニメーション */
}

/* レスポンシブデザイン対応（スマートフォン） */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 3em;   /* フォントサイズ調整 */
    letter-spacing: 0.11em;   /* 文字間隔を調整 */
    top: 44%;   /* 垂直位置を微調整 */
    left: 44%;   /* 水平位置を微調整 */
  }

  a {
    font-size: 0.83rem;   /* フォントサイズを調整 */
    letter-spacing: 0.02em;   /* 文字間隔を調整 */
    padding: 0.77rem 0.94rem;   /* 内側余白を調整 */ /* pæd.ɪŋ（パディング） */
    top: 70%;   /* 垂直位置を微調整 */
    left: 66%;   /* 水平位置を微調整 */
  }
}