@charset "UTF-8";

/* 全画面共通の考え方 */
.container {
    max-width: 800px; /* PCでの最大幅を制限 */
    margin: 0 auto;   /* 中央寄せ */
    padding: 15px;    /* 左右の余白 */
    width: 100%;
    box-sizing: border-box;
}

/* モバイル（幅が狭い時）は全幅、PC（広い時）は背景色を変えるとお洒落です */
body {
    /* iOS(iPhone/iPad)のゴシック体を最優先にし、次にWindowsやAndroidの標準を指定 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    
    /* 文字の端がギザギザに見えるのを防ぐ（iPhoneでより綺麗に見えます） */
    -webkit-font-smoothing: antialiased;
    
    background: #f4f4f4;
    margin: 0;
    padding: 0;
}