:root{
  --blue:#24287f;
  --yellow:#dce127;
  --white:#ffffff;
  --blue-deep:#1a1d5e;
  --sans:"Helvetica Neue","Helvetica","Arial","Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
  --serif:'Jost','Zen Kaku Gothic New',"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--blue);
  color:var(--yellow);
  font-family:var(--sans);
  line-height:1.9;
  letter-spacing:.025em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--yellow);color:var(--blue)}
a{color:inherit;text-decoration:none;transition:opacity .2s}
a:hover{opacity:.6}

.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:5vh 7.5vw 0;
}
.top .back{
  font-family:var(--sans);font-weight:bold;
  font-size:14px;letter-spacing:.12em;
  color:var(--white);
  padding:8px 16px;border:2px solid var(--white);
  transition:background .15s,color .15s;
}
.top .back:hover{background:var(--white);color:var(--blue);opacity:1}
.top img{height:30px}

main{padding:9vh 7.5vw 14vh;max-width:860px}
h1{
  font-family:var(--sans);font-weight:bold;
  font-size:clamp(30px,4.6vw,56px);
  letter-spacing:.02em;line-height:1.2;
  margin-bottom:14px;
}
.sub{
  color:var(--white);
  font-family:var(--serif);font-weight:400;
  font-size:15px;letter-spacing:.14em;
  margin-bottom:8vh;
}
.lead{
  color:#dfe2ff;
  font-family:var(--serif);font-weight:400;
  font-size:16px;line-height:2.15;letter-spacing:.06em;
  margin-bottom:7vh;
}
section{margin-bottom:6vh}
h2{
  color:var(--white);
  font-family:var(--sans);font-weight:bold;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:.05em;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(220,225,39,.35);
}
p,li{
  color:#cdd0f0;
  font-family:var(--serif);font-weight:400;
  font-size:15.5px;line-height:2.1;letter-spacing:.05em;
}
p+p{margin-top:1.2em}
ul{list-style:none;margin-top:6px}
ul li{padding-left:1.4em;position:relative}
ul li::before{content:"—";position:absolute;left:0;color:var(--yellow)}
.mail{
  color:var(--white);font-family:var(--sans);font-weight:bold;
  font-size:17px;letter-spacing:.06em;word-break:break-all;
}
.date{
  margin-top:8vh;
  color:#aeb2e0;font-family:var(--serif);font-weight:400;
  font-size:14px;letter-spacing:.08em;
}

footer{
  background:var(--blue-deep);color:var(--yellow);
  padding:72px 7.5vw;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
footer .left{
  font-family:var(--sans);font-weight:bold;
  font-size:clamp(14px,1.7vw,22px);
}
footer img{height:28px}
@media(max-width:640px){
  footer{flex-direction:column;align-items:flex-start;gap:28px}
  .top{padding:4vh 7.5vw 0}
  main{padding:7vh 7.5vw 10vh}
}