* {
    margin: 0;
    padding: 0;
}

header, footer {
    padding: 20px;
}

footer {
    text-align: right;
}

.note {
    color: #fff;
    background-color: #555;
}

main {
    padding: 0 30px 30px;
}

section {
    margin-bottom: 30px;
}

/* ブロック要素とインライン要素 */
.section1 div {
    background-color: #ccc;
}
.section1 span {
    background-color: #eee;
}

/* ブロックの装飾について */
.section2 .section2-1 {
    width: 200px;
    height: 40px;
}
.section2 .section2-2 {
    width: 200px;
    height: 40px;
    background-color: yellow;
}
.section2 .section2-3-1,
.section2 .section2-3-2 {
    width: 200px;
    height: 40px;
    margin: 10px 0;
    background-color: #f90;
}
.section2 .section2-4 span {
    width: 200px;
    height: 40px;
    background-color: #eee;
}

/* 文字について */
.section3-1 {
    color: red;
}
.section3-2 {
    font-size: 24px;
    color: blue;
}
.section3-3 {
    font-size: 16px;
    font-weight: bold;
    color: #c71585;
}
.section3-4 {
    font-size: 14px;
    font-family: YuGothic, 游ゴシック体, Yu Gothic, 游ゴシック, sans-serif;
    color: #3cb371;
}
.section3-5 {
    font-size: 12px;
    line-height: 3;
    width: 300px;
}
.section3-6 {
    font-size: 12px;
    width: 300px;
    height: 100px;
    line-height: 100px;
    background-color: #ccc;
    text-align: center;
}

/* リストについて */
.section4-1 {
    list-style-type: disclosure-closed;
}
.section4-2 {
    list-style-type: none;
    font-size: 0;
}
.section4-2 li {
    display: inline-block;
    font-size: 16px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.section4-2 li:not(:first-child) {
    border-left: 1px solid #aaa;
}