/* 基本のリセット */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* htmlとbodyの高さを100%に設定 */
html,
body {
    height: 100%;
    /*overflow-y: scroll;
    /* 常にスクロールバー表示 */
    font-family: 'Source Han Serif', 'Hiragino Mincho Pro', 'MS PMincho', serif;
}

/* リスト、段落、見出しのデフォルトのリセット */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

/* 画像が親要素からはみ出さないように */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* リンクのデフォルトスタイルのリセット */
a {
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    /* 背景色のリセット */
    transition: color 0.2s;
    /* スムーズなエフェクト */
}

/* フォーム要素のリセット */
input,
button,
select,
textarea {
    font: inherit;
    background: none;
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    /* フォーカス時のスタイルをカスタマイズしやすく */
}

/* ボタンのカーソル変更 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

/* フォーカス時のデフォルトの点線消す */
button:focus,
a:focus {
    outline: none;
    /* 点線を消す */

}


/* 必要に応じて、スクリーンリーダー対応の調整 */
[hidden] {
    display: none;
}

/* フォーム要素の自動サイズ調整をリセット */
input[type="number"],
input[type="search"],
textarea {
    width: 100%;
}

/* 表のリセット */
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/* レスポンシブメディアの設定 */
video,
audio {
    display: block;
    max-width: 100%;
}




/* モバイル向けのデフォルト設定 */
body {
    font-size: 16px;
    /* 基本のフォントサイズ */
    line-height: 1.5;
}

/* 画面サイズが768px以上（タブレット向け） */
@media (min-width: 768px) {
    body {
        font-size: 18px;
        /* タブレット向けのフォントサイズ */
    }
}

/* 画面サイズが1024px以上（デスクトップ向け） */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
        /* デスクトップ向けのフォントサイズ */
    }
}









/* ------------------------フレックスコンテナに適用------------------------*/
/*display: flex;
/* または inline-flex */




/* ------------------------フレックスアイテムが同じ行に収まるか、複数行に分けるか------------------------ */
/*flex-wrap: nowrap;
/* 1行に収める（デフォルト） */

/*flex-wrap: wrap;
/* アイテムが溢れると次の行に折り返す */

/*flex-wrap: wrap-reverse;
/* 折り返しを逆順にする */




/* ------------------------フレックスアイテムの順番を指定------------------------ */
/*flex-flow: row nowrap;
/* flex-direction と flex-wrap をまとめて指定 */






/* ------------------------主軸（水平方向）での配置方法------------------------ */
/*justify-content: flex-start;
/* 左揃え（デフォルト） */

/*justify-content: flex-end;
/* 右揃え */

/*justify-content: center;
/* 水平方向中央揃え */

/*justify-content: space-between;
/* 子要素間に等間隔で配置 */

/*justify-content: space-around;
/* 子要素間に等間隔、端にもスペースを配置 */

/*justify-content: space-evenly;
/* 子要素間、端にも均等にスペースを配置 */




/* ------------------------交差軸（垂直方向）での配置方法------------------------ */
/*align-items: flex-start;
/* 上揃え */

/*align-items: flex-end;
/* 下揃え */

/*align-items: center;
/* 垂直方向中央揃え */

/*align-items: baseline;
/* テキストのベースラインを揃える */

/*align-items: stretch;
/* 高さを伸ばして揃える（デフォルト） */



/* ------------------------各アイテムの配置方法------------------------ */
/*align-self: auto;
/* 親の align-items を継承（デフォルト） */

/*align-self: flex-start;
/* 上揃え */

/*align-self: flex-end;
/* 下揃え */

/*align-self: center;
/* 垂直方向中央揃え */

/*align-self: baseline;
/* テキストのベースラインを揃える */

/*align-self: stretch;
/* 高さを伸ばして揃える */




/* ------------------------フレックスアイテムの配置方向------------------------ */
/*flex-direction: row;
/* 水平方向（デフォルト） */

/*flex-direction: row-reverse;
/* 水平方向の逆順 */

/*flex-direction: column;
/* 垂直方向 */

/*flex-direction: column-reverse;
/* 垂直方向の逆順 */



/* ------------------------フレックスアイテムの並び順------------------------*/
/*order: 0;
/* デフォルトは0（負の値や大きな値も設定可能） */


/* -------------------------フレックスアイテムのサイズ------------------------ */
/*flex-grow: 0;
/* 余分なスペースを分け合う量 */

/*flex-shrink: 1;
/* アイテムが縮小する割合 */

/*flex-basis: auto;
/* 基本のサイズ */

/*flex: 0 1 auto;
/* flex-grow, flex-shrink, flex-basis をまとめて指定 */





/* ------------------------フレックスアイテムの配置サイズに影響を与える設定------------------------ */
/*align-content: flex-start;
/* 行を上揃え */

/*align-content: flex-end;
/* 行を下揃え */

/*align-content: center;
/* 行を中央揃え */

/*align-content: space-between;
/* 行の間隔を均等に */

/*align-content: space-around;
/* 行の間隔と端にスペースを配置 */

/*align-content: stretch;
/* 行が伸びる */




/* ------------------------アイテムの個別設定------------------------ */
/*margin: auto;
/* アイテムを中央に配置するために使える（flexboxと組み合わせて） */




/* ------------------------インラインフレックスボックスに使える------------------------ */
/*inline-flex: flexbox をインライン要素として使う */




/* ------------------------複数のプロパティをまとめて指定する------------------------ */
/*flex-flow: row wrap;
/* 主軸の方向と折り返しを一度に指定 */