body {
  position: relative;  /* 擬似要素を使うために親要素を相対位置に設定 */
}

body::before {
  content: '';  /* 擬似要素にコンテンツを追加 */
  position: absolute;
  top: 0;
  left: 50%;  /* 画面幅の50%の位置に配置 */
  height: 100vh;  /* 高さは画面全体（ビューポート高さ） */
  width: 1px;  /* 幅は1pxに設定 */
  background-color: red;  /* 縦線の色を設定（赤など） */
  transform: translateX(-50%);  /* 縦線を中央に揃えるため、X軸方向に50%移動 */
  z-index: 9999;  /* 中心線のレイヤーを最前面に */
}

.screen {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  font-size: clamp(16px, 26vw, 110px);
}

.screen .div {
  overflow: hidden;
  border: 1px solid;
  border-color: var(--al-qz-5o);
  background-image: url(../img/image.png);
  background-size: cover;
  background-position: 50% 50%;
  /*width: 395px;*/
  width: 100vw;
  max-width: 430px;
  /*height: 852px;*/
  height:216.7442vw;
  max-height: 932px;
  position: relative;
}

/* iPad Mini (768x1024) */
@media screen and (min-width: 768px) and (max-width: 768px) {
  .screen .div {
    width: 472px;
    max-width: 472px;
    height:1024px;
    max-height: 1024px;
  }
}

/* iPad Air (820x1180) */
@media screen and (min-width: 820px) and (max-width: 820px) {
  .screen .div {
    width: 544px;
    max-width: 544px;
    height:1180px;
    max-height: 1180px;
  }
}

/* iPad Pro (1024x1366) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  .screen .div {
    width: 630px;
    max-width: 630px;
    height:1366px;
    max-height: 1366px;
  }
}

.screen .text-wrapper {
  height: 2.7%;  /* 縦幅に対する高さの割合 */
  top: 81.4%;    /* 縦幅に対するtopの位置 */
  left: 41.2%;   /* 横幅に対するleftの位置 */
  font-family: "Rounded M+ 1c-medium", Helvetica;
  font-weight: 400;
  color: #99bdda;
  font-size: 17%; /* 画面幅の4.3% */
  line-height: 2.7%; /* 縦幅に対する行の高さ */
  text-decoration: underline;
  white-space: nowrap;
  position: absolute;
  text-align: center;
  letter-spacing: 0;
}

.screen .text-wrapper-2 {
  height: 2.7%;  /* 縦幅に対する高さ */
  top: 78%;      /* 縦幅に対するtopの位置 */
  left: 21.3%;   /* 横幅に対するleftの位置 */
  font-family: "Rounded M+ 1c-medium", Helvetica;
  font-weight: 400;
  color: var(--zv-jk-3t);
  font-size: 16%; /* 画面幅の3.8%に相当するフォントサイズ */
  line-height: 2.7%; /* 縦幅に対する行の高さ */
  white-space: nowrap;
  position: absolute;
  text-align: center;
  letter-spacing: 0;
}

.submit-btn {
  position: absolute;
  width: 56.4%;  /* 横幅に対する割合 */
  height: 7.9%;  /* 縦幅に対する割合 */
  top: 66%;    /* 縦幅に対するtopの位置 */
  left: 21.5%;   /* 横幅に対するleftの位置 */
  background-color: var(--o-4surt);
  border-radius: 52px;
  border: 1px solid var(--al-qz-5o);
  font-size: 27%; /* 横幅に基づいてフォントサイズ */
  color: white; /* テキストカラーを白に設定 */
  text-align: center; /* テキストを中央に配置 */
  cursor: pointer; /* カーソルをポインターに変更してクリック可能に見せる */
  outline: none; /* フォーカス時のアウトラインを消す */
}


.submit-btn:active {
  background-color: var(--al-qz-5o); /* クリック時の色変更（オプション） */
}

.screen .p {
  height: 2.7%;  /* 縦幅に対する高さ */
  top: 57.4%;    /* 縦幅に対するtopの位置 */
  left: 2%;    /* 横幅に対するleftの位置 */
  font-family: "Rounded M+ 1c-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 15.5%; /* 横幅に基づいてフォントサイズ */
  line-height: 2.7%; /* 縦幅に対する行の高さ */
  white-space: nowrap;
  position: absolute;
  text-align: center;
  letter-spacing: 0;
}

.screen .span {
  color: #99bdda;
  text-decoration: underline;
}

.screen .text-wrapper-4 {
  color: #707070cc;
}

.checkbox {
  width: 30px; /* チェックボックスのサイズ */
  height: 30px;
  border-radius: 5px; /* 必要であれば角を丸くする */
  border: 2px solid var(--al-qz-5o); /* 枠線 */
  position: relative; /* 親要素に対して相対的に配置 */
  top: 55%; /* 親要素の垂直方向の中央 */
  left: 0px; /* 左に少し余白を設定 */
  cursor: pointer; /* クリック可能にする */
  appearance: none; /* デフォルトのチェックボックスの外観を削除 */
  background-color: white; /* チェックボックスの背景色 */
}
.checkbox:checked {
  background-color: var(--al-qz-5o); /* チェックされた時の背景色 */
  border-color: var(--al-qz-5o); /* 枠線の色を変える */
}

.checkbox::after {
  content: '✔'; /* Unicodeでチェックマークを表示 */
  position: absolute;
  top: -2px; /* チェックマークの位置を調整 */
  left: 4px;
  font-size: 24px; /* チェックマークのサイズ */
  color: white; /* チェックマークの色 */
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 0.2s ease; /* アニメーションの追加 */
}

.checkbox:checked::after {
  opacity: 1; /* チェックされたときにチェックマークを表示 */
}

.screen .view-3 {
  position: absolute;
  width: 75.6%;     /* 横幅に対する割合 */
  height: 5.05%;    /* 縦幅に対する割合 */
  top: 49%;         /* 縦幅に対するtopの位置 */
  left: 11.9%;      /* 横幅に対するleftの位置 */
  background-color: var(--s-19z-dg);
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--al-qz-5o);
}

.screen .text-wrapper-5 {
  height: 50%;
  width: 60%;
  top: 22%;
  left: 47px;
  font-family: "Rounded M+ 1c-medium", Helvetica;
  font-weight: 400;
  color: var(--zv-jk-3t);
  font-size: 16px;
  line-height: 23px;
  white-space: nowrap;
  position: absolute;
  text-align: left;
  letter-spacing: 0;
  border: none;
}

.screen .img {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 20%;
  left: 12px;
  object-fit: cover;
}

.screen .text-wrapper-6 {
  height: 2.7%;    /* 縦幅に対する高さ */
  top: 47%;      /* 縦幅に対するtopの位置 */
  left: 13%;     /* 横幅に対するleftの位置 */
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: var(--zv-jk-3t);
  font-size: 12%; /* 横幅に基づいてフォントサイズ */
  line-height: 2.7%; /* 縦幅に対する行の高さ */
  white-space: nowrap;
  position: absolute;
  text-align: center;
  letter-spacing: 0;
}

.screen .view-4 {
  position: absolute;
  width: 75.6%;    /* 横幅に対する割合 */
  height: 5.05%;   /* 縦幅に対する割合 */
  top: 40%;        /* 縦幅に対するtopの位置 */
  left: 11.9%;     /* 横幅に対するleftの位置 */
  background-color: var(--s-19z-dg);
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--al-qz-5o);
}

.screen .image {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 20%;
  left: 12px;
}

.screen .element {
  position: absolute;
  width: 42px;
  height: 29px;
  top: 7px;
  left: 250px;
  object-fit: cover;
}

.screen .view-5 {
  position: absolute;
  width: 75.6%;   /* 横幅に対する割合 */
  height: 5.1%;   /* 縦幅に対する割合 */
  top: 31.9%;     /* 縦幅に対するtopの位置 */
  left: 11.9%;    /* 横幅に対するleftの位置 */
  background-color: var(--s-19z-dg);
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--al-qz-5o);
}

.screen .overlap {
  position: absolute;
  width: 100%;
  height: 28.7%;
  top: -1px;
  left: -1px;
}

.screen .overlap-group-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgb(204.39, 227.97, 246.5) 80.5%,
    rgb(255, 250, 253) 100%
  );
}

.screen .overlap-group {
  position: relative;
  width: 100%;
  height: 28.7%;
  top: 10%;
  left: 21%;
}

.screen .image-2 {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 10%;
  left: 15px;
  object-fit: cover;
}

.screen .image-3 {
  position: absolute;
  width: 7%;
  height: 23%;
  top: 43%;
  left: 0;
  object-fit: cover;
}

.screen .image-4 {
  position: absolute;
  width: 7%;
  height: 23%;
  top: 43%;
  left: 51%;
  object-fit: cover;
}

.screen .text-wrapper-7 {
  width: 70%;
  height: 1.9%;
  top: 60%;
  left: 15%;
  font-family: "Rounded M+ 1c-regular", Helvetica;
  font-weight: 400;
  color: var(--s-19z-dg);
  font-size: 35%;
  line-height: 1.9%;
  position: absolute;
  text-align: center;
  letter-spacing: 0;
}

.screen .element {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 25%;
  left: 85%;
  object-fit: cover;
  cursor: pointer; /* クリックできるようにポインタに変更 */
}