*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:#333;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-weight:400;
  letter-spacing:.01em;
}
main{width:100%}
.hero{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 24px 40px;
}
.hero h1{
  margin:0;
  font-size:42px;
  font-weight:400;
  letter-spacing:.02em;
}
.hero p{
  margin:18px 0 0;
  font-size:15px;
}
.content-section{
  width:min(1080px,100%);
  margin:0 auto;
  min-height:350px;
  padding:64px 100px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,400px);
  gap:64px;
  align-items:center;
}
.copy{min-width:0}
.eyebrow{
  margin:0 0 18px;
  font-size:14px;
  letter-spacing:.04em;
}
h2{
  margin:0 0 22px;
  font-size:28px;
  line-height:1.45;
  font-weight:400;
}
h3{
  margin:0 0 10px;
  font-size:20px;
  font-weight:400;
}
h3:not(:first-of-type){margin-top:26px}
.copy p{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.8;
}
.visual{
  margin:0;
  width:100%;
}
.visual img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.contact{
  width:min(1080px,100%);
  margin:0 auto;
  padding:48px 100px 84px;
  min-height:200px;
}
.contact a{font-size:15px}

@media (max-width:990px){
  .hero{min-height:220px}
  .hero h1{font-size:36px}
  .content-section{
    padding:56px 72px;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:48px;
  }
  .contact{padding:40px 72px 72px}
}

@media (max-width:690px){
  .hero{
    min-height:200px;
    padding:42px 30px 34px;
  }
  .hero h1{font-size:34px}
  .hero p{font-size:13px}
  .content-section{
    min-height:auto;
    padding:48px 30px 56px;
    display:flex;
    flex-direction:column;
    gap:24px;
    align-items:stretch;
  }
  .eyebrow{margin-bottom:14px;font-size:12px}
  h2{font-size:22px;margin-bottom:18px}
  h3{font-size:18px}
  .copy p{font-size:13px;line-height:1.7}
  .visual img{aspect-ratio:16/9}
  .contact{
    padding:44px 30px 70px;
    min-height:auto;
  }
  .contact a{font-size:13px}
}