/* pタグのスタイルはそのまま残します */
p {
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

/* 境界線結合のために、ラッパー要素をテーブルとして扱います */
.stm-container {
    display: table;
    border-collapse: collapse; /* .stm-containerでborder-collapseを指定 */
    border-spacing: 0; /* セル間のスペースをなくす */
    width: 100%; /* 必要に応じて幅を指定 */
}

.stm {
    /* 修正前：border-collapseが効かなかったので削除 */
    /* 結合させるために display: table-cell に変更 */
    display: table-row; /* 各セクションを「行」として扱う */
    border: 1px solid #a6a6a6;
    color: #ceab4b;
    font-weight: bold;
    padding: 0; /* paddingを一旦0にし、内側の要素で調整します */
    font-size: 2rem;
    line-height: 3rem;
    
    /* セル境界線が隣接する要素と結合するようにします */
    /* border-top は不要になることが多いですが、ここでは残します */
}



/* --- ネガティブマージンで境界線を結合する手法 (一般的なDIVレイアウトの場合) --- */

.stm {
    border: 1px solid #a6a6a6;
    color: #ceab4b;
    font-weight: bold;
    padding: 1rem;
    font-size: 2rem;
    line-height: 3rem;
    margin-top: -1px; /* 上の要素の境界線と結合させる */
        display: block;
}

.stm:first-child {
    margin-top: 0; /* 最初の要素の上マージンは不要 */
}

/* ul 要素のリストスタイルをリセット */
.stm ul {
    list-style: none; /* リストの黒い点（ビュレット）を非表示 */
    padding-left: 0;  /* ul要素自体の左パディングをリセット */
    margin-top: 0.5rem; /* 上部の間隔調整 */
    margin-bottom: 0;   /* 下部の間隔調整 */
}

/* .oya スタイル */
.oya {
    /* .stm の font-size: 2rem の影響を受けるため、サイズを調整 */
    font-size: 2rem; 
    line-height: 3rem;
    margin-bottom: 0.5rem; /* リストとの間隔 */
    color: inherit; /* 親の .stm の色を継承 */
}

/* .ko スタイル */
.ko {
    color: inherit; /* 親の .stm の色を継承 */
    font-size: 1.3rem;
    /* ul の padding-left: 0; と組み合わせ、リスト要素の左側に余白を作る */
    padding-left: 5rem;
    position: relative;
    /* リストのマーク（ビュレット）をカスタムで作成 */
}

/* カスタムビュレットの例 */
.ko::before {
    content: "・"; /* ビュレットの文字 */
    color: #ceab4b; /* ビュレットの色 */
    position: absolute;
    left: 3rem;
}