/* 画像のリサイズ設定 */
.resizeimage {
  max-width: 800px; /* 最大幅 */
  min-width: 240px; /* 最小幅 */
}
.resizeimage img { width: 100%; } /* 画像を親要素の幅に合わせる */

/* ページ全体のスタイル設定 */
body {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", 
               "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO"; /* フォント設定 */
  font-weight: bold; /* フォントの太さを太字に設定 */
  margin: 0; /* ブラウザのデフォルト余白を削除 */
  padding-left: 70px; /* 左に余白を設定 */
  width: 100vw; /* ビューポート幅を100%に設定 */
  height: 100vh; /* ビューポート高さを100%に設定 */
  background-image: url("./img/question.png"); /* 背景画像を設定 */
  padding: 20px; /* 全体の内側に20pxの余白を設定 */
}

/* ボックス要素のスタイル設定 */
.box1 {
  text-align: center; /* テキストを中央に配置 */
  padding-top: 30px; /* 上に30pxの余白を設定 */
  margin: 40px auto; /* 上下に40pxの余白を設定し、中央寄せ */
  color: #fff; /* テキストカラーを白に設定 */
  background: #6eb7ff; /* 背景色を設定 */
  border-bottom: solid 6px #3f87ce; /* 下辺に6pxのボーダーを設定 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* ボックスに影をつける */
  border-radius: 9px; /* 角を丸める */
  width: 600px; /* 幅を600pxに設定 */
  height: 100px; /* 高さを100pxに設定 */
}

/* クラス「skrab」のスタイル設定 */
.skrab {
  position: absolute; /* 絶対配置 */
  left: 200px; /* 左から200pxの位置に配置 */
  top: 440px; /* 上から440pxの位置に配置 */
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* コンテンツを中央に配置 */
  align-items: center; /* 垂直方向に中央配置 */
  margin-bottom: 20px; /* 下に20pxの余白を設定 */
}

/* クラス「cattail」のスタイル設定 */
.cattail {
  position: absolute; /* 絶対配置 */
  left: 200px; /* 左から200pxの位置に配置 */
  top: 465px; /* 上から465pxの位置に配置 */
}

/* クラス「catnaderu」のスタイル設定 */
.catnaderu {
  position: absolute; /* 絶対配置 */
  left: 200px; /* 左から200pxの位置に配置 */
  top: 390px; /* 上から390pxの位置に配置 */
}

/* クラス「think」のスタイル設定 */
.think {
  position: absolute; /* 絶対配置 */
  left: 200px; /* 左から200pxの位置に配置 */
  top: 390px; /* 上から390pxの位置に配置 */
}

/* クラス「hakasecat」のスタイル設定 */
.hakasecat {
  position: absolute; /* 絶対配置 */
  left: 200px; /* 左から200pxの位置に配置 */
  top: 390px; /* 上から390pxの位置に配置 */
}

/* クラス「example2」のスタイル設定 */
.example2 {
  text-align: center; /* テキストを中央に配置 */
  width: 100px; /* 幅を100pxに設定 */
  margin: auto; /* 中央寄せ */
  padding: 0; /* 内側の余白を0に設定 */
  list-style-type: none; /* リストスタイルをなしに設定 */
}

/* クラス「example2」のリスト項目のスタイル設定 */
.example2 li {
  line-height: 2; /* 行間を2倍に設定 */
}

/* クラス「form_conf」のスタイル設定 */
.form_conf {
  text-align: center; /* テキストを中央に配置 */
  margin-top: 20px; /* 上に20pxの余白を設定 */
}

/* クラス「form_conf」のフォームのスタイル設定 */
.form_conf form {
  display: inline-block; /* フォームをインラインブロック要素に設定 */
  margin: 0 10px; /* 左右に10pxの余白を設定 */
}

/* 共通のボタンスタイル */
.button, .button2 {
  display: inline-block; /* インラインブロック要素として扱う */
  border-radius: 20px; /* 角を丸める */
  font-size: 18pt; /* フォントサイズを18ptに設定 */
  text-align: center; /* テキストを中央に配置 */
  cursor: pointer; /* カーソルをポインタに設定 */
  padding: 12px 18px; /* 上下12px、左右18pxの内側余白を設定 */
  background: #6eb7ff; /* 背景色を設定 */
  color: #1a1aff; /* テキストカラーを設定 */
  line-height: 1em; /* 行の高さを設定 */
  transition: 0.3s; /* 背景色の遷移時間を0.3秒に設定 */
  box-shadow: 4px 4px 3px #666666; /* ボックスに影をつける */
  border: 2px solid rgba(0, 127, 255, 0.83); /* 枠線を設定 */
  margin: 10px; /* ボタン間の間隔を調整 */
}

/* ボタンのホバー時のスタイル設定 */
.button:hover, .button2:hover {
  box-shadow: none; /* 影を削除 */
  color: rgba(0, 127, 255, 0.83); /* テキストカラーを変更 */
  background: #ffffff; /* 背景色を白に変更 */
}

/* クラス「btn1」のスタイル設定 */
.btn1 {
  color: #fff; /* テキストカラーを白に設定 */
  background-color: #039ee6; /* 背景色を設定 */
}

/* クラス「btn1」のホバー時のスタイル設定 */
.btn1:hover {
  color: #f10a0a; /* ホバー時にテキストカラーを赤に変更 */
  background-color: #039ee6; /* 背景色はそのまま */
}

/* クラス「btn2」のスタイル設定 */
.btn2 {
  color: #fff; /* テキストカラーを白に設定 */
  background-color: #039ee6; /* 背景色を設定 */
  width: 300px; /* 幅を300pxに設定 */
  padding: 10px; /* 内側の余白を10pxに設定 */
  box-sizing: border-box; /* ボックスのサイズ計算を調整 */
  border: 1px solid #6eb7ff; /* 枠線を設定 */
  background: #6eb7ff; /* 背景色を設定 */
  cursor: pointer; /* カーソルをポインタに設定 */
  border-radius: 5px; /* 角を丸める */
  font-size: 20; /* フォントサイズを20pxに設定 */
}

/* クラス「btn2」のホバー時のスタイル設定 */
.btn2:hover {
  color: rgba(0, 127, 255, 0.83); /* テキストカラーを変更 */
  background-color: #ffffff; /* 背景色を白に変更 */
}