/* 全体の背景 */
.agency-lp-form {
  background-color: #FDFAE1; /* 背景色 */
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  flex-direction: column; /* 子要素を縦方向に揃える */
  padding-bottom: 40px;
  padding-left: 20px; /* 左右に余白を追加 */
  padding-right: 20px; /* 左右に余白を追加 */
  box-sizing: border-box; /* パディングとボーダーを含めた幅計算 */
  overflow-x: hidden; /* 横スクロールを防ぐ */
  width: 100%; /* 全体の幅を画面幅いっぱいに */
}

/* ヘッダー部分（アイコンとテキスト） */
.cta-header {
  display: flex;
  align-items: center;
  justify-content: center; /* 水平方向に中央揃え */
  padding: 10px;
  width: 100%; /* 横幅いっぱいに広げる */
  max-width: 800px; /* 最大幅を設定 */
  box-sizing: border-box;
}

.cta-icon {
  width: 80px;
  height: auto;
  margin-right: 10px;
}

.cta-text {
  font-size: 1.6rem;
  font-weight: bold;
  color: #e47924;
  word-break: break-word; /* 長いテキストの折り返し */
}

/* 全体のフォームセクション */
.cta-form-section {
  background-color: white;
  padding: 30px;
  margin: 0 auto;
  max-width: 800px; /* フォーム全体の幅 */
  width: 100%;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}


/* フォーム全体のグリッドレイアウト */
.cta-form-container {
  width: 100%;
  box-sizing: border-box;
}

.form {
  max-width: 100%;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Labels */

form label {
  display: block; 
  margin-bottom: 0.1rem;
  text-align: left;  
  font-size: 0.9em;
}

input {
  margin-bottom:5px;
  list-style: none;
}

select {
  margin-bottom:5px;
}

textarea {
  height:6em;
  margin-bottom:5px;
}

form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='file'],
form input[type='search'],
form select,
form textarea {
  font-size: 0.9em;
  padding: 10px 10px 10px;
  border: 1px solid #a9a9a9;
  background: #f5f5f5;
  color:#666666;
  border-radius: 2px;
  box-sizing: border-box;
  width: 100%;
}

form input[type='text']:hover,
form input[type='email']:hover,
form input[type='password']:hover,
form input[type='tel']:hover,
form input[type='number']:hover,
form input[type='file']:hover,
form input[type='search']:hover,
form select:hover,
form textarea:hover {
  background: #DBEBF9;
 
}


input-placeholder {
   color: #666666;
}
form input[type='submit'],
form .hs-button ,
form input[type='button']{
  margin-top:0px!important;
  margin-bottom:0px!important;
  background-color:#ff6600 !important;
  padding: 10px 10px !important;
  border-radius: 2px  !important;
  border: 1.5px solid #ff6600  !important;
  transition: .5s  !important;
  display: inline-block
  cursor: pointer  !important;
  width:100% !important;
  color:#fff  !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
}

form input[type='submit']:hover, 
form .hs-button:hover {
  background: #FFFFFF !important;
  color: #ff6600 !important;
  border: 1.5px solid #ff6600 !important;
  font-weight: 700 !important;
}

/* Validation */

form .hs-form-required {
  color: #ef6b51;
}

form .hs-input.error {
  border: 2px solid #ef6b51;
}

form .hs-error-msg,
form .hs-error-msgs {
  color: #ef6b51;
  margin-top: -5px; /* 上部の間隔を調整 */
}


/* Form fields - checkbox/radio */
form .inputs-list {
  padding: 0; 
  margin: 0px 0px 5px 5px; 
  list-style: none; 
}

form .inputs-list > li {
  display: block; 
}

.hs_request_for_information.hs-request_for_information.hs-fieldtype-checkbox.field.hs-form-field {
  background-color: #f5f5f5 !important; /* 薄いグレーの背景色 */
  padding:10px;
}

.inputs-list.multi-container {
  display: grid ;
  grid-template-columns: repeat(4, 1fr);
  font-size:1.1rem;
}

.hs-richtext.hs-main-font-element p {
  margin-bottom:0px !important;
}

.hs-form-booleancheckbox {
  padding:15px 0px 15px 10px !important;
  font-size:1.1rem !important;
}

/* モバイル対応（768px以下） */
@media (max-width: 768px) {

  /* セクション全体のパディングと幅を調整 */
  .agency-lp-form {
    padding: 10px; /* セクション全体に余白を追加 */
    width: 100%; /* 横幅を画面幅いっぱいに */
    box-sizing: border-box; /* パディングを含めた幅の計算 */
  }

  /* ヘッダー部分（アイコンとテキスト）を縦並びに */
  .cta-header {
    flex-direction: column; /* アイコンとテキストを縦並びに */
    align-items: center; /* テキストとアイコンを中央に揃える */
  }

  /* アイコンのサイズを少し縮小 */
  .cta-icon {
    width: 60px;
    margin-bottom: 10px; /* テキストとの間に余白を追加 */
  }

  /* テキストのフォントサイズを縮小 */
  .cta-text {
    font-size: 1.4rem;
    text-align: center; /* テキストを中央揃え */
  }

  /* フォームセクションのレイアウトを調整 */
  .cta-form-section {
    padding: 20px; /* パディングを少し小さく */
    width: 100%; /* 横幅いっぱいに */
    max-width: 100%; /* 最大幅を100%に */
    box-shadow: none; /* ボックスシャドウを削除 */
  }

  /* フォーム内のフィールドのフォントサイズとパディングを調整 */
  form input[type='text'],
  form input[type='email'],
  form input[type='password'],
  form input[type='tel'],
  form input[type='number'],
  form input[type='file'],
  form input[type='search'],
  form select,
  form textarea {
    font-size: 0.85em; /* フォントサイズを少し小さく */
    padding: 8px; /* パディングを小さく */
  }

  /* サブミットボタンのフォントサイズとパディングを調整 */
  form input[type='submit'],
  form .hs-button,
  form input[type='button'] {
    font-size: 1rem; /* ボタンのフォントサイズを調整 */
    padding: 10px; /* ボタンのパディングを調整 */
  }

  /* チェックボックスやラジオボタンのリスト調整 */
  .inputs-list.multi-container {
    grid-template-columns: repeat(1, 1fr); /* 1列に変更 */
    font-size: 1rem; /* フォントサイズを少し小さく */
  }

  /* エラーメッセージの調整 */
  form .hs-error-msg,
  form .hs-error-msgs {
    font-size: 0.9rem; /* エラーメッセージのフォントサイズを調整 */
    margin-top: 5px; /* 上部の余白を増やす */
  }
}