@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #000000, #00162c);
    background-size: 100% 100%;
    min-height: 100lvh;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}
.screen {
  display: grid;
  /* grid-template-columns: repeat(1, 1fr); */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  /* grid-template-columns: 350px 1fr; */
  grid-template-columns: 30% 60%;
  /* grid-template-columns: 80lvw; */
  grid-template-rows: 1000px;
  grid-auto-rows: minmax(1000px,auto);
  gap: 5px;
  align-items: center;
  /* font-size: clamp(0.938rem, -0.938rem + 3.75vw, 1.875rem); */
  font-size: clamp(0.625rem, -0.625rem + 2.5vw, 1.00rem);
}
/*文字周り*/
p {
    font-size: clamp(0.625rem, -0.625rem + 2.5vw, 1.00rem);
    color: aliceblue;
}
.screen p{
    font-size: clamp(0.625rem, -0.625rem + 1.5vw, 2.00rem);
    color: aliceblue;
}
@media (max-width:1024px) {
.screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1000px;
    grid-auto-rows: minmax(1000px,auto);
    gap: 5px;
    align-items: center;
    font-size: clamp(0.625rem, -0.625rem + 2.5vw, 1.25rem);
}
}
.border {
    border: 1px solid #dddddd78;
    box-shadow: 0 0 10px rgba(62, 0, 143, 0.15);
    border-radius: 10px;    
}

.box-from-left{
    display: flex;
    width: 100%;
    justify-content: center;
    animation: from-left 1000ms ease-in both;
    animation-timeline: scroll(root block);; 
    animation-range: entry 0% entry 100%; 
}
.box-from-right{
    display: flex;
    width: 100%;
    justify-content: end;
    animation: from-right 1000ms ease-in both;
    animation-timeline: scroll(root block);
    animation-range: entry 0% entry 50%; 
}
@keyframes from-left {
    from {
        opacity: 0.;
        transform: translateX(0%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes from-right {
    from {
        opacity: 0;
        transform: translateX(-50%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}