body {
     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
     background-color: #ECF3F6;
 }

 .container {
     max-width: 600px;
     margin: auto;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 10px;
     box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
     background-color: white;
 }

 h1 {
     background-color: #2464AC;
     color: #fff;
     border-bottom: 1px solid #2464AC;
     padding: 10px;
     font-size: 22px;
     margin-bottom: 20px;
 }

 @media screen and (max-width: 750px) {
     h1 {
         font-size: 5vw;
         margin-bottom: 10px;
     }

 }


 h2 {
     color: #2464AC;
     margin-bottom: 0;
 }

 h3 {
     color: #2464AC;
     margin-top: 30px;
     margin-bottom: 0;
 }

 ul {
     margin-top: 5px;
     font-size: 18px;
 }

 p {
     margin-top: 0;
     font-size: 18px;
     margin-bottom: 15px;
 }

 form {
     margin-top: 20px;
 }

 label {
     font-size: 16px;
     margin-bottom: 8px;
     display: block;
     text-align: left;
 }

 input {
     padding: 10px;
     margin: 8px 0;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-sizing: border-box;
     font-size: 16px;
     margin-right: 5px;
 }

 button {
     background-color: #2464AC;
     color: white;
     padding: 10px 20px;
     font-size: 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 button:hover {
     background-color: #726f92;
 }

 .back-button {
     display: inline-block;
     margin-top: 20px;
     padding: 10px 20px;
     font-size: 16px;
     background-color: #dce6dc;
     color: #666;
     text-decoration: none;
     border-radius: 5px;
 }

 .back-button:hover {
     background-color: #ccc;
 }

 .btn_1 {
     margin: 20px 0 60px;
 }

 .btn_1 a {
     display: inline-block;
     background-color: #2464AC;
     color: white;
     text-decoration: none;
     padding: 10px 20px;
     font-size: 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 .btn_1 a:hover {
     opacity: .8;
 }

 .sq1 {
     background-color: #E1D8EC;
     padding: 20px 20px 40px;
     display: inline-block;
 }

 #quiz-container {
     min-height: 400px;
     position: relative;
 }

 .question {
     opacity: 0;
     transition: opacity 0.5s ease;
     display: none;
     padding-bottom: 80px;

 }

 #next-button {
     position: absolute;
     bottom: 0;
 }

 .question.active {
     display: block;
     opacity: 1;
 }

 label {
     display: block;
     margin: 5px 0;
 }

 .fade-out {
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 .question-text {
     font-weight: bold;
     font-size: 20px;
     color: #000;
     position: relative;
     padding-left: 0;
 }

 .question-text strong {
     margin-right: 5px;
     border-radius: 5px;
     color: #2464AC;
 }

 .question-text strong .q1 {
     background-color: #DEE9F7;
     padding: 5px 10px;
     border-radius: 50%;
 }

 .question-text strong .q2 {
     font-size: 150%;
     vertical-align: -3px;
 }
 @media screen and (max-width: 750px) {
    .container {
        margin: 20px;
    }
    .question-text {
        font-size: 18px;
        line-height: 1.5;
        padding-top: 40px;
    }
    .question-text strong {
        position: absolute;
        left:0;
        top:0;
    }

    .question {
        padding-bottom: 60px;
    }
 }
 .question input[type="radio"] {
     display: none;
 }

 .question label span {
     display: inline-block;
     padding: 12px 20px;
     margin: 8px 8px 0 0;
     border: 2px solid #ccc;
     border-radius: 8px;
     background-color: #f8f8f8;
     cursor: pointer;
     transition: all 0.2s ease;
     font-size: 16px;
     display: block;
 }

 .question label span:hover {
     background-color: #e0e0e0;
     border-color: #888;
 }

 .question input[type="radio"]:checked+span {
     background-color: #4caf50;
     color: white;
     border-color: #4caf50;

 }

 footer {

     padding-top: 20px;
     text-align: center;
 }

 footer a {
     color: #666;
     font-size: 13px;
 }