/* -------------------- CSSは一番下から書き始めてください！ -------------------- */

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN";
  }
  
  a {
    text-decoration: none;
  }
  
  .top-wrapper {
    padding: 50px 10px 10px 10px;
    height: 2700px;
    /*background: url('assets/images/TOP.webp') no-repeat center center fixed;*/
    background-image: url(/assets/images/サッカーボールと画像.webp);
    background-size: cover; /* アスペクト比を維持して全体に表示 */
    color: gray;
    text-align: center;
    /*margin-top: 65px; */
  }
  
  .top-wrapper h1 {
    opacity: 1;
    font-size: 45px;
    letter-spacing: 5px;
    color: #fff;
  }

  .main-wrapper {
    padding: 100px 0;
    background-size: cover;
    color: black;
    text-align: center;
  }

  .container {
    max-width: 1170px;
    width: 100%;
    padding: 0 auto;
    margin: 0 auto;
    color: gray;
    font-weight: bold;
  }

  .container p {
    font-weight: bold;
  }
  
  .btn-wrapper {
    text-align: center;
    margin: 20px 0;
  }

  .btn-wrapper p {
    opacity: 0.7;
  }
  
  .btn:hover {
    opacity: 1;
  }
  
  
  .footer_container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  
  footer {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  
  .footer_logo {
    height: 65px;
    width: 230px;
  
  }
  
  footer p {
    color: #b3aeb5;
    font-size: 12px;
    text-align: center;
    margin-top: -20px;
  }
  
  
  /* -------------------- CSSはここから追加していきましょう！ -------------------- */
  
   
  form {
    max-width: 400px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
  
  /* チェックボックスを中央揃えに */
  fieldset {
    display: flex;
    flex-direction: column;
  }

label {
  margin-top: 10px;
  /*display: block;*/
  font-weight: bold;
}

input[type="date"] {
  -webkit-appearance: none; /* Safariのデフォルトスタイルをリセット */
  appearance: none;         /* デフォルトスタイルをリセット */
  width: 100%;              /* 幅を調整 */
  padding: 8px;             /* 内側の余白を追加 */
  font-size: 16px;          /* テキストサイズ */
  border: 1px solid #ddd;   /* 枠線の色 */
  border-radius: 4px;       /* 角を丸める */
  background-color: #fff;   /* 背景色 */
  text-align: center;
  height: 30px;
  color: #757575;
}


.checkbox-container {
  display: flex;
  /*flex-direction: column;  縦並びにする */
  /*align-items: center;     中央揃え */
  margin-top: 5px;    /* 下の間隔を追加 */
  margin-bottom: 5px;    /* 下の間隔を追加 */
  height: 40px;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
}

.checkbox-text {
  display: flex;
  align-items: center;
  margin-left: 5px;
  font-size: 15px;
  /*text-align: center;      文言を中央揃え */
}

input[type="checkbox"] {
  /*margin: 0;  チェックボックスの余白をリセット */
  margin-top: 5px;     /* 文言とチェックボックスの間隔 */
  margin-bottom: 5px;     /* 文言とチェックボックスの間隔 */

}

input[type="checkbox"] {
  -webkit-appearance: none; /* Safariのデフォルトスタイルをリセット */
  appearance: none;         /* デフォルトスタイルをリセット */
  width: 20px;              /* チェックボックスの幅 */
  height: 20px;             /* チェックボックスの高さ */
  border: 2px solid gray; /* 枠線の色 */
  border-radius: 3px;       /* 角を丸める */
  background-color: #fff;   /* 背景色 */
  cursor: pointer;          /* ポインタを表示 */
  position: relative;
}

input[type="checkbox"]:checked {
  background-color: #757575; /* チェック時の背景色 */
  border-color: gray;     /* チェック時の枠線色 */
}

input[type="checkbox"]:checked::after {
  content: "✔";             /* レ点を表示 */
  color: white;             /* レ点の色 */
  font-size: 14px;          /* レ点のサイズ */
  position: absolute;       /* 相対位置を設定 */
  top: 50%;                 /* 縦方向の中央揃え */
  left: 50%;                /* 横方向の中央揃え */
  transform: translate(-50%, -50%); /* 中央に配置 */
}

legend {
  font-size: 20px;
  margin-top: 30px;
  display: block;
  font-weight: bold;
}

select {
  font-family: "Hiragino Kaku Gothic ProN";
  color: gray;
  font-weight: bold;
  text-align: center;
}

input,select,#appeal_point {
    width: 100%;
    margin-top: 5px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#appeal_point {
  height: 70px;
}

input.error {
    border: 2px solid red;
    background-color: #ffe6e6;
}

button {
    width: 80%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    background-color: darkgrey;
    color: white;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

/*プライバシーポリシーのスクロールボックス*/
.scroll-box {
  max-height: 150px; /* 最大表示高さ */
  overflow-y: auto; /* 縦スクロールを有効に */
  border: 1px solid #ddd; /* 枠線 */
  padding: 10px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  text-align: left;
}