html{
font-size:62.5%
}
body{
background:#f3f3f3; /* 背景 */
color:#000; /* 文字色 */
font-family:'Segoe UI','游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
font-size:1.3em; /* 文字の大きさ */
letter-spacing:.1em;
line-height:1.5;
padding:0 10px;
text-align:center;
}

h1{
  font-size:2em;
  text-align: left;
  }

img{ 
  -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    max-width: 100%;
}

a{
  color:#848DE6
}
a:hover{
color:#fcfba0;
background:#cadfdb;
}

  
  
  #leftcolumn{ 
float:left;
margin-left:0;
text-align:left;
margin-top:100px
}

  #leftcolumn2{ 
float:left;
margin-left:0;
text-align:left;
margin-top:100px
}


  #rightcolumn{ 
    float:right;
margin-right:0;
text-align:right;
margin-top:100px
}

#mobilepopup{
  display: none;
    /* Add styling for your popup (e.g., position: fixed, background, padding, etc.) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    justify-content: center;
  
    align-items: center;
    z-index: 1000;
  }
  
  @media only screen and (max-width: 768px) {
    #mobilepopup {
        display: flex; /* Use flex or block to make it visible */
    }
}




.container{
  position: relative;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
  .container img{
  display: inline-block
  }

.bottom{
  position: absolute;
  margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;  
  }
  .bottom img{
   padding-left:100px;
   padding-right:100px;
   padding-bottom:200px;

    }
    
.text{
  display:flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 700px;           /* Define a height for the container */
  }
  
.screen{    
  position:absolute;
    z-index:-1;
    justify-content: center;
  }
  
  .sidelefttop{
  position: absolute;
  z-index: 2;
  text-align:left;
  margin-top: -350px;
  margin-left: 85px;
  font-size: 2em;
  transform: rotate(-15deg);
  
  }
   
  .sideleftbot{
  position: absolute;
  z-index: 2;
  text-align:left;
  margin-top: -135px;
  margin-left: 225px;
  font-size: 2em;
  transform: rotate(-15deg);
  }
  
  .siderighttop{
  position: absolute;
  z-index: 2;
  text-align:right;
  margin-top: -350px;
  margin-left: 215px;
  font-size: 2em;
  transform: rotate(15deg);
  
  }
   
  .siderightbot{
  position: absolute;
  z-index: 2;
  text-align:right;
  margin-top: -130px;
  margin-left: 100px;
  font-size: 2em;
  transform: rotate(15deg);
  }
  
 

.top { 
   position: absolute;
   top: 400px;
   margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
 display:flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 700px;    
}




  .screenmain{
    z-index:-1;
  position: absolute;
  margin-bottom: 100px;
  }
  
  
   .linklefttop{
  position: relative;
  z-index: 2;
  text-align:left;
  margin-top: -350px;
  margin-left: 0px;
  font-size: 2em;
  transform: rotate(-15deg);
  
  }
   
  .linkleftbot{
  position: absolute;
  z-index: 2;
  text-align:left;
  margin-top: -150px;
  margin-left: 225px;
  font-size: 2em;
  transform: rotate(-15deg);
  }
   .linkrighttop{
  position: absolute;
  z-index: 2;
  text-align:right;
  margin-top: -350px;
  margin-left: 225px;
  font-size: 2em;
  transform: rotate(15deg);
  
  }
   
  .linkrightbot{
  position: absolute;
  z-index: 2;
  text-align:right;
  margin-top: -130px;
  margin-left: 120px;
  font-size: 2em;
  transform: rotate(15deg);
  }
  
  .header{
    text-align:left;
    font-size: 2em;
    }
  
  .chardesc{
    text-align:left;
    margin-left: 1000px;
    margin-top:300px;
    }
  
  
  
  .footer{
    position:absolute;
    margin-top:500px;
    }