@charset "utf-8";
/* CSS Document */

/*----------------------
　　リセット
----------------------*/

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: #FFF;
  color: #333;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: #007BFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


.pub_contents {
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.6);
  overflow: hidden; /* スライダーがはみ出るのを防ぐ */

}

.submit {
  text-align: center;
}

.submit input[type="image"] {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .pub_form input[type="text"],
  .submit input[type="image"] {
    max-width: 100%;
  }
}

.under {
  padding: 20px;
  text-align: left;
  background-color: #DBDBDB;
}

.push {
  -webkit-animation: push 1.5s ease-in-out infinite both;
  animation: push 1.5s ease-in-out infinite both;
}

@-webkit-keyframes push {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes push {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* styles.css */

form {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

label {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  display: block;
}

input[type="text"] {
  width: 100%;
  padding: 1.0em;
  margin-bottom: 1em;
  border: 3px solid #B2B2B2;
  border-radius: 10px;
  font-size: 1.2rem;
}


@media screen and (max-width:480px) { 
input[type="text"] {
  font-size: 1.0rem;
}
}


input[type="image"] {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  width: 100%;
}

#public_footer {
 text-align: center;
  background-color:#003366;
  padding: 20px;
  color: #FFFFFF;
 
}


input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

 input[type="radio"] {
      position: relative;
      width: 25px;
      height: 25px;
      border: 1px solid #000;
      border-radius: 50%;
      vertical-align: middle; /* 修正: ラジオボタンとテキストの高さを揃える */
      margin-right: 10px; /* ラベルとの間にスペースを追加 */
    }

    input[type="radio"]:checked:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #000;
      content: '';
    }

    fieldset {
      width: 90%;
      margin: 15px auto; /* 中央寄せ */
      padding: 10px;
      border: 1px solid #0564a6;
      font-weight: bold;
    }

    legend {
      font-size: 2rem;
      text-align: center; /* 伝説を中央に揃える */
    }

    label {
      display: flex; /* フレックスボックスレイアウトを使用 */
      align-items: center; /* ラジオボタンとテキストの高さを揃える */
      margin: 10px 0;
      text-align: left; /* 左揃え */
    }

    fieldset div {
      display: flex; /* フレックスボックスレイアウトを使用 */
      justify-content: center; /* 水平方向に中央揃え */
      align-items: flex-start; /* 子要素を左揃え */
      flex-direction: column; /* 縦方向に配置 */
	  width:250px;
      margin: 0 auto;
    }

@media screen and (max-width:480px){

legend {
      font-size:1rem;
      text-align: center; /* 伝説を中央に揃える */
    }
}

.allquestion{
	margin:20px 0 0 0;
}

.question{
	background-color:#003366; 
	padding:20px;
	color: #FFFFFF;
}


.answer{
	background-color:#e3f1ff; 
	padding:20px;
	color:#003366; 
	font-size:1.5rem; 
	text-align:left;
}

@media screen and (max-width:480px) { 
	
.question{
	background-color:#003366; 
	padding:15px;
	color: #FFFFFF;
}	
	
	
.answer{
	background-color:#e3f1ff; 
	padding:15px;
	color:#003366; 
	font-size:1rem;
	text-align:left; 
}
}