body {
    /* 画面全体に引き伸ばす */
    background-size: 100% 100%;
    /* min-height: 100lvh; */
    /* 幅に上限を設定 */
    max-width: 100%;
    width: 100%;
    margin: 0;
    background: linear-gradient(to bottom, #000000, #00162c);
    z-index: -1;
    position: relative;
    color:aliceblue;
}
 /* 下線を消す */
.no-underline {
    text-decoration: none;
    color:aliceblue;
}
.header{   
    position: fixed;
    height: 60px;
    width: 100%;
    z-index: 1000;
    display: grid;
    grid-template-columns: 70% 20%;
    align-items: center;
    background: linear-gradient(to bottom, #000000, #00000083);
}

.header-logo{
    font-size: clamp(1.563rem, 1.449rem + 0.57vw, 1.875rem);
    margin-left: auto;
    width: 100%;
}
.header-logo img{
  position: absolute;
  top: -5px;
  width: 180px;
  height: 70px;
  opacity: 0.6;
}
#menu-toggle {
  display: none;
}
#menu-toggle:checked ~ .menu {
  max-height: 300px;
  opacity: 0.6;
}
.menu{
    position: fixed;
    right: 10%;
    top: 7%;
    height: auto;
    width: 300px;
    max-height: 0px;          /* 高さゼロで隠す */
    opacity: 0;             /* 透明にする */
    overflow: hidden;
    background:linear-gradient(to bottom, #0000007c, #030128d8);
    /* background: #2c0756; */
    transition: max-height 0.5s ease, opacity 0.5s ease; /* 徐々に変化 */
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.screen {
    display: grid;
    /* grid-template-columns: repeat(1, 1fr); */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    grid-template-columns: 300px 1fr;
    /* grid-template-columns: 80lvw; */
    grid-template-rows: 200px;
    grid-auto-rows: minmax(100px,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);
}
@media (max-width:1024px) {
.screen {
    display: grid;
    /* grid-template-columns: repeat(1, 1fr); */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    /* grid-template-columns: 80lvw; */
    grid-template-rows: 200px;
    grid-auto-rows: minmax(100px,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.25rem);
}
}
.border {
    border: 1px solid #dddddd78;
    box-shadow: 0 0 10px rgba(62, 0, 143, 0.15);
    border-radius: 10px;
}
.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 100;
  font-style: normal;
}
.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 100;
  font-style: normal;
}
/* <weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name */
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
}