/* body */
body {
	color:#1a1a1a;
	margin:0px;
	padding:0px;
	background:#ffffff url(bg8.gif) repeat-y;
	background-position:center;
	font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}

/* テーブル・段落 */
td { font-size:15px; line-height:160%; }
p  { margin:3px 5px; }

/* リンク */
a       { color:#0000ff; text-decoration:underline; }
a:hover { color:#aa0000; text-decoration:none; background-color:#ffcc99; }

/* コンテンツ */
h1 { color:dodgerblue; font-size:24px; margin:0px 0px;}
h2 { color:white; font-size:16px; margin:0px 0px;}
h3 { color:black; font-size:16px; margin:0px 0px;}


/* ホームページの横幅 */
table {
    max-width: 900px;
    margin: 0 auto;
}

/* サイドバーの横幅（メインコンテンツの横幅も自動的に決まる） */
.sidebar {
    width: 210px;
}


/* パソコンでは「mobile-sidebar」の箇所を非表示にする */
.mobile-sidebar {
    display: none;
}

/*「mobile-only」の箇所はパソコンでは非表示にする */
.mobile-only {
    display: none;
}





/*===============================================================
  モバイル向けのスタイルシート
===============================================================*/

@media screen and (max-width: 768px) {

    /* モバイルではテーブルを拡大する */
    table {
        width: 100%;
        max-width: none;
    }

    /* モバイルで見るときの文字サイズと文字の間隔 */
    td {
        font-size: 15px;
        line-height: 160%;
    }

    /* モバイルでは画像を拡大する */
    img {
        max-width: 100%;
        height: auto;
    }

    /* モバイルではコンテンツバーを折り返して表示する */
    .nav-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* モバイルではコンテンツバーを横に3つずつ表示する */
    .nav-item {
        width: 33.33%;
        box-sizing: border-box;
        background-size: cover;
        padding-top: 5px;
        padding-bottom: 5px;
    }


    /* モバイルではサイドバーを非表示にする */
    .sidebar {
        display: none;
    }

    /* モバイルではサイドバーの情報をフッターに表示する */
    .mobile-sidebar {
        display: block;
        margin-top: 20px;
    }


    /* モバイルではメールフォームの横幅を広げる */
    input[type="text"], textarea {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* モバイルではテーブルを縦に並べる */
    .responsive-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }


    /*「pc-only」の箇所はモバイルでは非表示にする */
    .pc-only {
        display: none;
    }

    /*「mobile-only」の箇所はモバイルでは表示する */
    .mobile-only {
        display: block;
    }





}

/*===============================================================
  ここまで  モバイル向けのスタイルシート
================================================================*/