@charset "utf-8";

/********* サンプル *************************************************/

main ul.sample {
    margin: 0;
}
main ul.sample li {
    list-style: none;
}
main ul.sample li a {
    display: block;
    width: 200px;
    height: 80px;
    margin: 0 auto;
    background-size: cover;
    background-image: url(../images/rollover.png);
    background-position: center middle;
    text-indent: -9999px;
}
main ul.sample li a:hover {
    background-position: 0 80px;
}

/********* サイド ***************************************************/

/* 画像タグの表示例 */
aside figure.sample img {
    max-width: 100%;
    height: auto;
}

/* 背景画像の表示例 */
aside div.sample {
    max-width: 320px;
}
aside div.sample p {
    width: 100%;
    height: 0;
    padding-top: calc(320 / 640 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
    background: url(../images/640x320.png) center center / cover no-repeat;
    text-indent: -9999px;
}