body {
    font-family: "MS Sans Serif";
    background-color: rgb(192, 179, 182);
    margin: 0;
    padding: 0;
}

.heading-3 {
    padding: 0.4em;
    border-bottom: 3px dotted #ffffff;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
}

.box3-4{
    padding:2em;/*内側余白*/
    position: relative;
    z-index: 0;
    background-color:#ffffff;/*背景色*/
    color: #987272;
    top: 15px;
    margin: 20px;
    margin-bottom: 40px;
    
}

.box3-4:before{
    position: absolute;
    border: 2px dashed #987272;/*破線の太さ・色*/
    content: '';
    display: block;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin:5px;
    z-index: -1;
    border-radius:3px;
}

.form-container {
    padding: 20px;
    
    border-radius: 15px;
    
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-size: 16px;
    color: #987272;
    margin-bottom: 8px;
}

input, textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #987272;
    font-size: 16px;
    padding: 5px 0;
    color: #987272;
    outline: none;
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus {
    border-bottom-color: #e09ca9;
}

textarea {
    resize: none;
}

.confirm-button, .back-button, .submit-button {
    display: inline-block;
    background: #e09ca9;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.confirm-button:hover, .back-button:hover, .submit-button:hover {
    background: #d0889b;
}


/* ラジオボタン全体 */
.radio-button {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    font-size: 16px;
    color: #987272;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* ラジオボタンのインプット（非表示） */
.radio-button input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* カスタムの丸いラジオボタン */
.radio-button .custom-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #987272; /* 外枠の色 */
    border-radius: 50%; /* 丸くする */
    background: transparent;
    margin-right: 10px;
    transition: background 0.3s ease, border-color 0.3s ease;
    position: relative;
}

/* 選択時のカスタムラジオボタン */
.radio-button input:checked + .custom-circle {
    background: #e09ca9; /* 選択時の背景色 */
    border-color: #e09ca9; /* 選択時の枠線の色 */
}

/* 選択時の内側のアニメーション */
.radio-button .custom-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* 初期状態で非表示 */
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.radio-button input:checked + .custom-circle::after {
    transform: translate(-50%, -50%) scale(1); /* 選択時に表示 */
}

.responsive-iframe {
    position: relative;
    width: 100%; /* 幅を親要素いっぱいに */
    max-width: 800px; /* 最大幅を800pxに制限（PC用） */
    margin: auto; /* 中央寄せ */
    aspect-ratio: 4 / 3; /* アスペクト比を保持（16:9なら 16/9） */
}

.responsive-iframe iframe {
    width: 80%;
    height: 80%;
    position: relative;
    max-width: 800px; /* PCの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    aspect-ratio: 4 / 3; /* アスペクト比を維持 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center; /* 縦方向の中央寄せ */
}
h3 {
    text-align: center; /* テキストを中央揃え */
    width: 100%; /* 幅を親要素いっぱいに */
}




/* スマホ画面（幅600px以下）のスタイル */
@media (max-width: 600px) {
    body {
        font-size: 14px; /* フォントサイズを小さく */
    }

    .heading-3 {
        font-size: 24px; /* 見出しのフォントサイズを調整 */
        padding: 0.3em;  /* パディング調整 */
    }

    .box3-4 {
        margin: 10px; /* ボックスのマージンを小さく */
        padding: 1.5em; /* ボックス内の余白を小さく */
    }

    .form-container {
        padding: 15px; /* フォーム内の余白 */
        border-radius: 10px; /* 角を少し丸く */
    }

    input, textarea {
        font-size: 14px; /* 入力フィールドの文字サイズ */
        padding: 4px 0; /* 内側の余白 */
    }

    .confirm-button, .back-button, .submit-button {
        width: 100%; /* ボタンを画面幅いっぱいに */
        font-size: 16px; /* ボタンのフォントサイズ */
        padding: 12px 0; /* ボタンの内側余白 */
        margin-top: 10px; /* ボタン間のスペース */
    }

    .radio-button {
        font-size: 14px; /* ラジオボタンの文字サイズ */
    }

    .radio-button .custom-circle {
        width: 18px; /* ラジオボタンのサイズ */
        height: 18px;
    }
}

/* タブレット画面（幅601px〜1024px）のスタイル */
@media (min-width: 601px) and (max-width: 1024px) {
    .box3-4 {
        padding: 2em; /* 中くらいの余白 */
        margin: 15px;  /* マージンの調整 */
    }

    .heading-3 {
        font-size: 26px;
    }

    .confirm-button, .back-button, .submit-button {
        width: auto; /* ボタンの幅を自動に戻す */
    }
}
.responsive-iframe {
    max-width: 100%; /* 画面いっぱいに */
}