html {
    font-size: 62.5%; /*フォントの基準サイズを10pxにする*/
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; /*全体の書体を指定する*/
    font-size: 1.4rem; /*全体のフォントサイズは14pxとする*/
    line-height: 1.5; /*全体の行の高さは文字の1.5(倍)とする*/
    text-align: justify; /*行末を揃える*/
    -webkit-text-size-adjust: 100%; /*スマホでPC表示した際に勝手に文字が大きくなるのを防ぐ*/
}

body * {
    box-sizing: border-box; /*paddingやborderの大きさもwidthとheightに含める*/
    background-repeat: no-repeat; /*背景は基本的にリピートしない*/
}

img {
    display: block; /*デフォルトのdisplay:inline;で表示することはほぼ無いため*/
    max-width: 100%; /*親要素の幅からはみ出させない*/
    height: auto; /*一括指定(以降imgの大きさはwidthのみ指定すればよい)*/
}

a {
    display: block; /*デフォルトのdisplay:inline;で表示することが少ないため(ボタンなど)*/
    text-decoration: none; /*装飾は一切つけない*/
    color: inherit; /*親要素に指定した色を受け継ぐ*/
}

a:hover {
    opacity: .8; /*マウスオーバー時の透明度を指定*/
}

p a {
    display: inline; /*pタグ内のリンクは文字列として表示する*/
    color: #00f; /*カラーを指定*/
    text-decoration: underline; /*下線をつける*/
}

p a:hover {
    text-decoration: none; /*マウスオーバー時下線を消す*/
}

small {
    display: block; /*改行して表示することが多いため*/
    font-size: 1rem; /*全体に指定したフォントサイズより小さい値を指定*/
}

#wrap {
    width: 100%; /*全ての要素を包括する<div id="wrap">の幅を画面幅に設定する*/
    overflow-x: hidden; /*横にはみ出した部分は表示させない（スクロールさせない）*/
}

.inner {
    width: 1000px; /*インナーの幅を指定*/
    position: relative; /*本来配置される位置を基準とする*/
    left: 50%; /*親要素の幅の半分右にずらす*/
    margin: 0 0 0 -500px; /*この要素の半分左にずらす*/
}

.fl {
    float: left; /*class="fl"と指定するだけで左に回り込ませる*/
}

.fr {
    float: right; /*class="fr"と指定するだけで右に回り込ませる*/
}

.clearfix:after { /*回り込み解除*/
    display: block;
    content: "";
    clear: both;
}

/* header ---------------------------------------- */

/* footer ---------------------------------------- */

/* content ---------------------------------------- */

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

.sp {
    display: none; /*スマホ用の要素は非表示にする*/
}

.pc {
    display: block; /*pc用の要素は表示する*/
}