<div class="CheckBox">
  <!-- 見出し -->
    <div class="CheckBox-title">ここに見出しが入ります</div>
  <!-- チェックリスト -->
<div class="Checklist">
            <ul>
                        <li>ここにテキストを入力</li>
                        <li>ここにテキストを入力</li>
                        <li>ここにテキストを入力</li>
                        <li>ここにテキストを入力</li>
                        <li>ここにテキストを入力</li>              
            </ul>
        </div>
</div>
/* チェックリスト style.css 2185-2271
 ========================================================================== */
.CheckBox {
    margin: 2em 0;
    background: #fffbf4;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:736px) {
    .CheckBox {
        margin: 0em 0;
        background: #fffbf4;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 3px;
    }
}

.CheckBox .CheckBox-title {
    font-size: 24px;
    background: #fcd69e;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 16px 0px;
    line-height: 1.7;
}

@media (max-width:736px) {
    .CheckBox .CheckBox-title {
        font-size: 16px;
    }
}

#main .CheckBox p {
    padding: 15px 20px;
    margin: 0;
}

@media (max-width: 763px) {
    #main .CheckBox p {
        padding: 8px 16px 0;
        margin: 0px 0;
    }
}

.Checklist {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 0;
}

@media (max-width: 763px) {
    .Checklist {
        padding: 16px 0;
        width: 95%;
    }
}

.Checklist li {
    list-style: none;
    padding: 3px 0px 3px 32px;
    line-height: 1.7;
    background-position-y: 2px;
    border-bottom: dotted 2px #fcd69e;
    font-size: 22px;
}

@media (max-width: 763px) {
    .Checklist li {
        padding: 8px 0 8px 25px;
        font-size: 14px;
        line-height: 1.7;
    }

}

.Checklist li:before {
    margin-left: -25px;
    position: absolute;
    font-family: FontAwesome;
    content: '\f14a';
    color: #ff9800;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.