/* =========================
   全体
========================= */
.content-area{
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width:1000px;
    margin:40px auto;
    padding:0 20px;
    line-height:1.8;
}

/* 共通 */
.note-style-yellow,
.note-style-red,
.note-style-blue{
    border-radius:12px;
    padding:25px 30px;
    margin-bottom:40px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* =========================
   見出し
========================= */

/* 共通の枠サイズ */
.note-style-yellow,
.note-style-red,
.note-style-blue{
    width:600px;      /* ←ここ統一 */
    margin:40px auto; /* ←中央寄せ */
}
/* =========================
   カラー別
========================= */

/* 黄 */
.note-style-yellow{
    background:#fff8dc;
    border:2px solid #f2c94c;
}

/* 赤 */
.note-style-red{
    background:#ffecec;
    border:2px solid #e57373;
}

/* 青 */
.note-style-blue{
    background:#eef6ff;
    border:2px solid #64b5f6;
}

/* =========================
   テキスト
========================= */
.note-style-yellow p,
.note-style-red p,
.note-style-blue p{
    margin-bottom:10px;
    font-size:16px;
}

/* 下線 */
.underbar{
    border-bottom:2px solid #333;
}

.rule-box{
    display:inline-block;
    width:12px;
    height:12px;
    margin-right:8px;
    border-radius:2px;
}

/* 色 */
.rule-box.red{
    background:#ff4d4d;
}

.rule-box.blue{
    background:#4da6ff;
}

.rule-box.green{
    background:#66cc66;
}

.rule-box{
    display:inline-block;
    width:12px;
    height:12px;
    margin-right:8px;
    border-radius:2px;
}

/* 色 */
.rule-box.red{
    background:#ff4d4d;
}

.rule-box.blue{
    background:#4da6ff;
}

.rule-box.green{
    background:#66cc66;
}


/* =========================
   スマホ
========================= */
@media (max-width:768px){

    .content-area{
        padding:0 15px;
    }

    .note-style-yellow,
    .note-style-red,
    .note-style-blue{
        padding:20px;
    }

    .note-style-yellow h1,
    .note-style-red h1,
    .note-style-blue h1{
        font-size:22px;
    }

}