/* .img-1{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(var(--size-header-height) + 300px);
  z-index: -1;
  object-fit:cover;
}
.img-1-spacer{
  height:300px;
} */

section{
  /* background-color:#fff; */
  padding:20px;
}

main img.img-1{
  width:800px;
  max-width:100%;
}
main img.img-1{
  width:50%;
  /* max-height:300px; */
  object-fit:contain;
  display:block;
  margin:0 auto;
}

main .contents{
  margin:0 20px;
}

main .contents{
  text-align:center;
}
main .contents ul{
  display:inline-block;
  width:100%;
  max-width:500px;
  border-top:1px dashed #aaa;
  border-bottom:1px dashed #aaa;
}
main .contents li{
  display:block;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  text-align:left;
}
main .contents li+*{
  border-top:1px dashed #aaa;
}
main .contents li img{
  width:32px;
  vertical-align:middle;
}

main .platform-lists{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
main .platform-lists li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px;
}
main .platform-lists li +*{
  border-top:1px dotted #ddd;
}

main .platform-lists li img{
  width:60px;
}

main > .banner{
  position:relative;
  width:100%;
  height:500px;
}

main > .banner > *{
  position:absolute;
}

main > .banner h1{
  /* top:50%;
  left:50%; */
  top:50px;
  left:0;
  width:100%;
  /* transform:translate(-50%,-50%); */
  white-space:normal;
  z-index:10;
  color:white;
  text-align:center;
  padding:0 10px;
  margin:0;
}
main > .banner .text{
  display:block;
  color:white;
  font-size:1.5rem;
  white-space:pre-wrap;
  word-break:break-all;
  text-align:center;
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
  /* letter-spacing : 1rem; */
}
/* main > .banner h1 span.catch::first-letter{
  color:red;
  font-size:3.0rem;
}
main > .banner h1 div.company{
  margin-top:2rem;
} */

main > .banner img{
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  object-position : left;
}

main .document{
  white-space:pre-wrap;
  word-break:break-all;
  font-size:1rem;
  padding:10px;
  background-color:#eee;
}

@media (max-width:768px){
  section > .flex,
  section > .flex-reverse{
    flex-direction:column;
  }
  section > .flex > *,
  section > .flex-reverse > *{
    text-align:center;
    margin:0 auto;
  }
  section > .flex > img,
  section > .flex-reverse > img{
    margin-bottom:30px;
    width:70%;
  }
  main > img.banner{
    width:100%;
    height:500px;
    max-height:500px;
    object-fit:cover;
  }
  main > img.img-1{
    width:90%;
  }
  main > .banner{
    height:300px;
  }
  main > .banner h1{
    top:30px;
  }
  main > .banner .text{
    font-size:1.0rem;
  }
}

section .whatsnew-lists{
  border:1px solid #ddd;
  padding:20px;
}
section .whatsnew-lists > li .content a {
  font-size:1.2rem;
}
section .whatsnew-lists > li .content{
  line-height:1.5rem;
}
section .whatsnew-lists > li .content::after{
  content:'';
  border:0;
}