/*案内文章*/
h3 {
    font-size: 18px; /* フォントサイズ */
    line-height: 1.0; /* 行間の調整 */
    color: black; /* 文字色 */
    margin-bottom: 15px; /* 各文章の下に余白を設定 */
    padding-left: 20px; /* 左側にインデントを設定 */
    text-align: justify; /* 両端揃えで文章を整える */
    max-width: 1000px; /* 最大幅を設定 */
    margin-left: auto; /* 水平方向に中央揃え */
    margin-right: auto; /* 水平方向に中央揃え */
    margin-bottom: 5px;
}

/* 問題選択範囲のスタイル */
.problem-selection {
    background-color: #EEFDF9; /* 薄緑の背景色 */
    padding: 20px; /* 内側の余白 */
    margin: 10px auto; /* 上下の余白と中央揃え */
    max-width: 840px; /* 最大幅を設定 */
    border-radius: 8px; /* 角を丸くする */
}

.problem-selection h4 {
    font-size: 20px; /* 見出しのフォントサイズ */
    margin-top: 0;
    margin-bottom: 10px; /* 下に余白を追加 */
    color: #333; /* 見出しの色 */
}

.problem-selection p {
    font-size: 16px; /* テキストのフォントサイズ */
    color: #555; /* テキストの色 */
}

/* フォーム全体のスタイル */
form {
    display: flex;
    flex-wrap: wrap;
}

/* 各カテゴリの枠組み */
.category-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列レイアウト */
    grid-template-rows: auto auto; /* 自動で高さを調整 */
    grid-template-areas:
        "category1 category2"
        "category4 category3";
    gap: 15px; /* 各category-boxの間に15pxのスペースを設定 */
    width: 100%;
}

.category1 {
    grid-area: category1; /* 左上：記述統計 */
}

.category2 {
    grid-area: category2; /* 右上：ベイズ統計 */
}

.category3 {
    grid-area: category3; /* 右下：推測統計 */
}

.category4 {
    grid-area: category4; /* 左下：その他 */
}

.category-box {
    border: 2px solid #ccc; /* 枠線を設定 */
    padding: 15px; /* 内側の余白を設定 */
    border-radius: 8px; /* 角を丸くする */
    flex: 1 1 48%; /* 左右に並べるための設定 */
    box-sizing: border-box; /* パディングとボーダーを含むボックスサイズ */
}


/* インデントを設定 */
.indent {
    padding-left: 20px; /* インデントの幅を設定 */
    margin-top: 10px; /* 上に少し余白を追加 */
}

.indent label {
    display: inline; /* ラベルをインライン表示に設定 */
    margin-left: 5px; /* チェックボックスとラベルの間に余白を設定 */
    margin-bottom: 5px; /* ラベルとチェックボックスの間に余白 */
    vertical-align: middle; /* ラベルとチェックボックスの縦位置を揃える */
}

.indent input[type="checkbox"] {
    vertical-align: middle; /* チェックボックスとラベルの縦位置を揃える */
}

/* ボタンのスタイル */
button {
    background-color: #4BE8C3; /* 薄緑の背景色 */
    color: white; /* 文字色を白に */
    border-radius: 8px; /* 角を丸くする */
    padding: 10px 20px; /* 内側の余白を設定 */
    font-size: 16px; /* フォントサイズを設定 */
    cursor: pointer; /* カーソルをポインターに */
    display: block; /* ボタンをブロック要素に */
    text-align: center; /* テキストを中央揃えに */
    margin: auto;
}

button:hover {
    background-color: #149C7C; /* ホバー時の背景色を少し明るくする */
}

.all-options {
    display: flex;
    align-items: center; /* 子要素を垂直方向に中央揃え */
    justify-content: flex-start; /* 左揃え */
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
}

/* スマートフォン用のレスポンシブデザイン */
@media (max-width: 768px) {

    .problem-selection {

        max-width: 370px; /* 最大幅を設定 */
        border-radius: 8px; /* 角を丸くする */
    }

    h3 {
        font-size: 15px; /* フォントサイズを小さく調整 */
        padding-left: 10px; /* 左側のインデントを小さく調整 */
        padding-right: 10px;
    }

    .category-box {
        padding: 10px; /* 内側の余白を小さく調整 */
        font-size: 14px;
    }

    .indent {
        padding-left: 10px; /* インデントの幅を小さく調整 */
    }

    .category-container {
        gap: 5px; /* 各category-boxの間に15pxのスペースを設定 */
    }

    .all-options {
        justify-content: center;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}