body{
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #000;
}
.ubuntu-light {
  
}
.main{
  font-size: 1.2rem;/*デフォルトサイズを基準として1.2倍のサイズになる*/
  width: 100vw;/*PC画面幅100%*/
  height: 100vh;/*PC縦の長さ100%*/
  background: linear-gradient(to right, #3f0124, #ce70c0);/*グラデーションをti right＝右方向にかけるという事*/
  overflow: hidden;/*10pxくらいのデフォルトの画面上部の白い部分を消す役割*/
  position: relative;/*infoでの左半分の白いdivのためにmainにrelativeをあてる*/
}
/*marginをあてるのはdivタグの様なブロック要素だけ。インライン要素には指定できない。幅を指定しないと使えない*/
.logo_area{
  display: flex;
  align-items: center;/*このプロパティは縦の上下の中央添えろの役目*/

}
.logo_area h2{
  font-weight: bold;
}
nav{
  display: flex;
  width: 80%;
  margin: 20px auto;
  align-items: center;
  font-weight: 550;
  position: sticky;
  z-index: 1;
}
.nav_links{
  flex: 1;
  text-align-last: right;/*flex: 1;と text-align-last: rightの組み合わせで余白を入れ替えができる*/
}
.logo{
  width: 20%;
  height: 20%;
  margin-right: 12px;
}
.nav_links ul li{
  display: inline-block;
  padding: 0 2rem;
}
.nav_links ul a{
  font-weight: 600;
  color: #fff;
  transition: 0.5s;/*ホヴァーしたときにゆっくり色が変わる速度*/
}
.nav_links ul a:hover{
  color: rgb(226, 185, 97);/*ホバーの色はrbgで指定*/
}
/*info*/
.info{
  width: 1000px;
  height: 1000px;
 
  position: absolute;/*main=relativeでinfo=absolute,*/
  top: 50%;/*これで上から50%(半分)下に降りる*/
  transform: translateY(-50%);/*cssではブラウザはy軸の下方向が+で、上方向が-である特性があるので
  ｙに-50%をつけるという事は上に上るという事*/
  left: -10%;/*画面左半分に迫っていた幅が左に10%ずれた*/
}
#circle{
  width: 1000px;
  height: 1000px;
  position: absolute;/*画像の上に、背景の上に、何かの上に何かを載せたいときには絶対使う*/
  /*background-color: #fff;*/
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  transition: 1s;/*upBtnを押したらゆっくり回転する速度の設定*/
}
.feature{
  position: absolute;
  color: #fff;
  display: flex;
 
}
.feature img{
  width: 70px;
}

.feature div{
  margin-left: 20px;
}
.one{
  
  top: 450px;/*top450,right70を指定しないと下に隠れて見えなかった*/
  right: 70px;/*position absoluteに対してtop;rightをつけて円の右真ん中に移動させた*/
}
.two{
  top: 100px;
  left: 340px;
  transform: rotate(-90deg);/*先に回転させておいて着地時に意図するようにするため*/
}
.three{
bottom: 450px;
left: 50px;
transform: rotate(-180deg);
}
.four{
bottom: 150px;
right: 370px;
transform: rotate(-270deg);
}
.pc{
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 27%;
  z-index: 1;/*pcの画像も回転してしまうのでcircleディブの外に出した。そして画像の位置がcirclenの下にいて
  隠れたのでz-indexで上に高さをあげた*/
}

.control{
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  text-align: center;
}

#upBtn{
  cursor: pointer;
  width: 40px;
}

#downBtn{
  cursor: pointer;
  width: 40px;
  transform: rotate(-180deg);/*矢印を反転させて下に向けるプロパティ*/
}

.overlay{
width: 0;
height: 0;
border-top: 520px solid #fff;
border-right: 520px solid transparent;
border-bottom: 520px solid #fff;
border-left: 520px solid #fff;
}


.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #333;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000; /* 上に表示 */
}

.popup button {
  margin-top: 10px;
  cursor: pointer;
}