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

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

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

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


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

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


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

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


/* ハンバーガーメニュー */
.nav-icon {
    display: none;  /* パソコンではハンバーガーメニューは非表示 */
    width: 40px;  /* ハンバーガーメニューの大きさ */
    padding: 8px 8px;
    background: #fd688f;  /* ハンバーガーメニューの色 */
    transition: .5s ease-in-out;
    border-radius: 3px;
    cursor: pointer;
}

.nav-icon span {
    height: 3px;
    width: 70%;
    background: #ffffff;  /* ハンバーガーメニューの3本線の色 */
    border-radius: 9px;
    opacity: 1;
    left: 15%;
    transition: .25s ease-in-out;
    display: block;
    position: absolute;
}

.nav-icon span:nth-child(1) {
    top: 7px;
}

.nav-icon span:nth-child(2) {
    top: 15px;
}

.nav-icon span:nth-child(3) {
    top: 23px;
}

.nav-icon.open span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
}

.nav-icon.open span:nth-child(2) {
    opacity: 0;
}

.nav-icon.open span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
}

p.nav-text {
    color: #ffffff;
    font-size: 14px;
    margin: 20px 0 0 0;
    text-align: center;
}

.nav-menu .gnavi {
    display: none; /* パソコンとスマホ両方で初期状態はメニューは非表示 */
}

.clearfix:after {
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}



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

@media screen and (max-width: 768px) {    /* ハンバーガーメニュー */
    .nav-icon {
        display: block; /* スマホ画面で表示 */
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2000;
    }

    .nav-menu {
        background-color: #EE9BA4;  /* ナビゲーションメニューの背景色 */
        position: fixed;
        top: 0;
        left: 20px;
        width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        z-index: 1000;
    }

    .nav-menu .gnavi {
        display: none; /* ハンバーガーメニューがクリックされる前はメニューを非表示 */
    }

    .nav-menu .gnavi li {
        float: left;
        text-align: center;
        border-bottom: 1px solid #eeeeee;
        padding: 0;
        width: 100%;
        display: block;
    }

    .nav-menu .gnavi li a {
        color: #ffffff; /* メニューの文字の色 */
        font-size: 15px;
        font-weight: bold;
        padding: 20px 20px;
        display: block;
    }

    .nav-menu .gnavi ul {
        margin: 0;
        padding: 0;
    }


    /* モバイルではテーブルを拡大する */
    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;
    }





}

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