モバイルファースト用のCSS的な何か

##css
```style.css
@charset "utf-8";

/* ---------------------------------------------------------------------------------------------------------

 共通

--------------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 エレメント
--------------------------------------------------------------------------- */
/*　初期化 */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,
th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video {
    margin: 0;
    padding: 0;
}

img,body,html {
    border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,address {
    font-style: normal;
    font-weight: normal;
    word-wrap: break-word;
}

ol,ul {
    list-style: none;
}

caption,th {
    text-align: left;
}

article,aside,figure,footer,header,nav,section {
    display: block;
}

textarea {
  overflow: auto;
  resize: none;
}

/*　デザイン */
html {
    font-size: 62.5%;
}

body {
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 1.6rem;
    text-size-adjust: 100%;
}

h1,h2,h3,h4,h5,h6 {
    line-height: 1.1;
}

p,li,dt,dd,th,td,pre {
    line-height: 1.5;
}

table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
    font: 100%;
    font-size: inherit;
    word-wrap: break-word;
    word-break: break-all;
}

/* ---------------------------------------------------------------------------
 特定の役割のスタイル
--------------------------------------------------------------------------- */

/* ------------------------------
 クリアフィックス
------------------------------ */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: hidden;
    zoom: 1;
}

/* ---------------------------------------------------------------------------------------------------------

スマホ

--------------------------------------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
 ヘッダー
--------------------------------------------------------------------------- */
header {

}

/* ---------------------------------------------------------------------------
 フッター
--------------------------------------------------------------------------- */
footer {

}

/* --------------------------------------------------------------------------
 レイアウト
--------------------------------------------------------------------------- */
.container {

}

/* --------------------------------------------------------------------------
 縦と横
--------------------------------------------------------------------------- */
@media screen and (orientation: portrait) {
   /* 縦 */
   p {
       color: red;
   }
}

@media screen and (orientation: landscape) {
    /* 横 */
    p {
        color: blue;
    }
}

/* ---------------------------------------------------------------------------------------------------------

 タブレット(768px以上に適用)

--------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 768px) {

    @media screen and (orientation: portrait) {
       /* 縦 */
       p {
           color: yellow;
       }
    }

    @media screen and (orientation: landscape) {
        /* 横 */
        p {
            color: red;
        }
    }

    /* ---------------------------------------------------------------------------
     ヘッダー
    --------------------------------------------------------------------------- */
    header {

    }

    /* ---------------------------------------------------------------------------
     フッター
    --------------------------------------------------------------------------- */
    footer {

    }

    /* --------------------------------------------------------------------------
     レイアウト
    --------------------------------------------------------------------------- */
    .container {

    }

}

/* ---------------------------------------------------------------------------------------------------------

 PC(1025px以上に適用)

--------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 1025px) {

    p {
        color: #333;
    }

    /* ---------------------------------------------------------------------------
     ヘッダー
    --------------------------------------------------------------------------- */
    header {

    }

    /* ---------------------------------------------------------------------------
     フッター
    --------------------------------------------------------------------------- */
    footer {

    }

    /* --------------------------------------------------------------------------
     レイアウト
    --------------------------------------------------------------------------- */
    .container {

    }

}

/* EoF */
```