@font-face {
    font-family: 'chogokubosogothic';
    src: url('./font/chogokubosogothic_5.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {
    font-family: 'chogokubosogothic', sans-serif; 
    margin: 0;
    color: white;
    font-size: 35px;
    
  }
  .container {
    position: relative;
    width: 1440px;
    height: 800px; 
    cursor: pointer;
    margin-top: 50px; 
  }

  .container1 {
    position: relative;
    width: 1440px;
    height: 800px; 
    cursor: pointer;
    margin-top: 50px; 
  }

  .container1:hover {
    cursor: url('./images/cursor.png'), auto;
   }




  .sticky{
      position: sticky;
      top: 0px;
      width: 1440px;
      height: 800px; 
  }

  .letter {
    position: absolute;
  }

  /*あかいめだまのさそり*/
  .letter11 { top: 337px; left: 774px; }
  .letter21 { top: 288px; left: 819px; }
  .letter31 { top: 264px; left: 873px; }
  .letter41 { top: 111px; left: 954px; }
  .letter51 { top: 205px; left: 988px; color: white;}
  .letter61 { top: 284px; left: 993px; }
  .letter71 { top: 350px; left: 988px; }
  .letter81 { top: 528px; left: 377px; }
  .letter91 { top: 534px; left: 475px; }
  .letter101 { top: 577px; left: 430px; }

  /*ひろげた鷲のつばさ*/
  .letter12 { top: 135px; left: 475px; }
  .letter22 { top: 247px; left: 615px; }
  .letter32 { top: 267px; left: 681px; }
  .letter42 { top: 173px; left: 999px; }
  .letter52 { top: 377px; left: 622px; }
  .letter62 { top: 313px; left: 664px; }
  .letter72 { top: 356px; left: 785px; }
  .letter82 { top: 452px; left: 839px; }
  .letter92 { top: 668px; left: 979px; }

  /*あをいめだまの小いぬ*/
  .letter1 { top: 107px; left: 669px; }
  .letter2 { top: 174px; left: 698px; }
  .letter3 { top: 283px; left: 822px; }
  .letter4 { top: 351px; left: 560px; }
  .letter5 { top: 379px; left: 635px; }
  .letter6 { top: 421px; left: 803px; }
  .letter7 { top: 418px; left: 434px; }
  .letter8 { top: 518px; left: 534px; }
  .letter9 { top: 641px; left: 551px; }
  .letter10 { top: 691px; left: 709px; }

  /*ひかりのへびのとぐろ*/
  .letter14 { top: 211px; left: 338px; }
  .letter24 { top: 281px; left: 429px; }
  .letter34 { top: 424px; left: 517px; }
  .letter44 { top: 523px; left: 589px; }
  .letter54 { top: 573px; left: 628px; }
  .letter64 { top: 561px; left: 725px; }
  .letter74 { top: 496px; left: 807px; }
  .letter84 { top: 436px; left: 880px; }
  .letter94 { top: 273px; left: 960px; }
  .letter104 { top: 200px; left: 1025px; }

  /*オリオンは高くうたひ つゆとしもとをおとす*/
  .letter15 { top: 353px; left: 606px; }
  .letter25 { top: 346px; left: 645px; }
  .letter35 { top: 335px; left: 688px; }
  .letter45 { top: 328px; left: 728px; }
  .letter55 { top: 363px; left: 747px; }
  .letter65 { top: 401px; left: 772px; }
  .letter75 { top: 374px; left: 816px; }
  .letter85 { top: 353px; left: 861px; }
  .letter95 { top: 326px; left: 908px; }
  .letter105 { top: 302px; left: 957px; }
  .letter115 { top: 542px; left: 636px; }
  .letter125 { top: 590px; left: 617px; }
  .letter135 { top: 633px; left: 593px; }
  .letter145 { top: 673px; left: 568px; }
  .letter155 { top: 681px; left: 614px; }
  .letter165 { top: 685px; left: 658px; }
  .letter175 { top: 688px; left: 706px; }
  .letter185 { top: 693px; left: 751px; }
  .letter195 { top: 639px; left: 734px; }
  .letter205 { top: 591px; left: 721px; }

  /*アンドロメダのくもはさかなのくちのかたち*/
  .letter16 { top: 542px; left: 588px; }
  .letter26 { top: 501px; left: 610px; }
  .letter36 { top: 464px; left: 637px; }
  .letter46 { top: 428px; left: 671px; }
  .letter56 { top: 398px; left: 709px; }
  .letter66 { top: 377px; left: 746px; }
  .letter76 { top: 355px; left: 787px; }
  .letter86 { top: 336px; left: 825px; }
  .letter96 { top: 329px; left: 864px; }
  .letter106 { top: 325px; left: 908px; }
  .letter116 { top: 538px; left: 625px; }
  .letter126 { top: 521px; left: 661px; }
  .letter136 { top: 503px; left: 695px; }
  .letter146 { top: 486px; left: 728px; }
  .letter156 { top: 470px; left: 757px; }
  .letter166 { top: 455px; left: 788px; }
  .letter176 { top: 434px; left: 816px; }
  .letter186 { top: 408px; left: 846px; }
  .letter196 { top: 383px; left: 875px; }
  .letter206 { top: 358px; left: 900px; }

  /*大ぐまのあしをきたに*/
  .letter17 { top: 598px; left:  1076px; }
  .letter27 { top: 638px; left: 1069px; font-size: 25px;}
  .letter37 { top: 664px; left: 1059px; font-size: 25px;}
  .letter47 { top: 693px; left: 1048px; font-size: 25px;}
  .letter57 { top: 713px; left: 1031px; }
  .letter67 { top: 713px; left: 1005px; font-size: 25px;}
  .letter77 { top: 704px; left: 976px; font-size: 25px;}
  .letter87 { top: 695px; left: 943px; font-size: 25px;}
  .letter97 { top: 682px; left: 910px; font-size: 25px; }
  .letter107 { top: 672px; left: 876px; font-size: 25px;}

  /*五つのばしたところ*/
  .letter18 { top: 654px; left: 841px; }
  .letter28 { top: 633px; left: 855px; font-size: 25px;}
  .letter38 { top: 611px; left: 865px; font-size: 25px;}
  .letter48 { top: 585px; left: 874px; font-size: 25px;}
  .letter58 { top: 545px; left: 879px; }
  .letter68 { top: 527px; left: 855px; font-size: 25px;}
  .letter78 { top: 504px; left: 828px; font-size: 25px;}
  .letter88 { top: 482px; left: 799px; font-size: 25px;}
  .letter98 { top: 459px; left: 772px; font-size: 25px;}

  /*小熊のひたいのうへは*/
  .letter19 { top: 416px; left: 739px; }
  .letter29 { top: 393px; left: 719px; font-size: 25px;}
  .letter39 { top: 365px; left: 708px; font-size: 25px;}
  .letter49 { top: 337px; left: 701px; font-size: 25px;}
  .letter59 { top: 308px; left: 692px; font-size: 25px;}
  .letter69 { top: 273px; left: 680px; }
  .letter79 { top: 251px; left: 683px; font-size: 25px;}
  .letter89 { top: 223px; left: 685px; font-size: 25px;}
  .letter99 { top: 198px; left: 687px; font-size: 25px;}
  .letter109 { top: 172px; left: 688px; font-size: 25px;}

  .letter1009{ top: 725px; left: 530px;}



  .image {
    position: absolute;
    width: 100%;
    height: 800px; 
    display: none; 
    top: -6px; 
    left: 0; 
  }

  .image10 {
    position: absolute;
    width: 100%; 
    height: 800px; 
    top: -102px; 
    left: 0px; 
  }


.cap{
    font-size: 30px;
}


.flex{
    width: 100%;
    padding: 0.5em 0em;
}

.flex2{
    padding: 7em 0em;
}


h1{
    font-size: 50px;
    margin: 0%;
    margin-left: 0%;
    padding: 7em 0em;
}

p{
    padding: 7em 0em;
}



.text{
    padding: 11em 0em;
}

footer{
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 15px;
}


/*星空背景*/

/*========= レイアウトのためのCSS ===============*/

#wrapper{
  justify-content: center;
  align-items: center;
  text-align:center;
  color: #fff;
  margin-left: 0%;
  width: 100%;
  height: 4000px;
  
}


/*========= particle js を描画するエリア設定 ===============*/

html,body{
  width: 100%;
  margin-top: 0%;
  margin-left: 0%;
  flex-direction: column; 
}

#particles-js{ 
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  background-color:#020E34;/*背景色*/
}

#wrapper{
  position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width:100%;
  height: 100%;
  
}