@charset "utf-8";

/*共通*/
body {
font-family: -apple-system, BlinkMacSystemFont,
              "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}


body {
    background: #d6c9a3;
    margin: 0;
    text-align: center;
}

body.gazou {
    background: #EAE09D;
    margin: 0;
    text-align: center;
}

main {
    text-align: left;
}

main h1 {
    margin: 0;
}

main h1 img {
    width: 100%
}

p {
    margin-top: 0;
}

footer,
span.small {
    font-size: 80%;
}



a {
    text-decoration: none;
}

a:link {
    color: #0000ff;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ffff00;
}

/*五郡カラー*/

ul {
    padding: 0;
    position: relative;
}

ul li.onga {
    border-left: solid 6px #0A3A14;
    /*左側の線*/
    margin-bottom: 3px;
    /*下のバーとの余白*/
    padding: 0.3em;
    list-style-type: none !important;
    /*ポチ消す*/
}

ul li.kurate {
    border-left: solid 6px #7E0C08;
    /*左側の線*/
    margin-bottom: 3px;
    /*下のバーとの余白*/
    padding: 0.3em;
    list-style-type: none !important;
    /*ポチ消す*/
}

ul li.kaho {
    border-left: solid 6px #0A3F77;
    /*左側の線*/
    margin-bottom: 3px;
    /*下のバーとの余白*/
    padding: 0.3em;
    list-style-type: none !important;
    /*ポチ消す*/
}

ul li.tagawa {
    border-left: solid 6px #925609;
    /*左側の線*/
    margin-bottom: 3px;
    /*下のバーとの余白*/
    padding: 0.3em;
    list-style-type: none !important;
    /*ポチ消す*/
}

ul li.kiku {
    border-left: solid 6px #811888;
    /*左側の線*/
    margin-bottom: 3px;
    /*下のバーとの余白*/
    padding: 0.3em;
    list-style-type: none !important;
    /*ポチ消す*/
}

/*初めにページ送り*/
div.page {
    width: 100%;
    display: flex;
}

div.back {
    text-align: left;
    width: 40%;
}

div.stay {
    text-align: center;
    width: 20%;
}

div.forward {
    text-align: right;
    width: 40%;
}
/*画像目次*/
td.gazou-menu-button{
text-align:center;
}
td.gazou-menu-button a img {
padding:3px 10px;
}

/*画像一覧ページ送り*/
div.page2 {
    height: auto;
    display: block;
    width: 100%;
}

div.back2 {
    float: left;
    text-align: left;
    width: 30%;
    height: auto;
}

div.stay2 {
    float: left;
    width: 20%;
    height: auto;
}

div.forward2 {
    float: right;
    text-align: right;
    width: 30%;
    height: auto;
}


/*画像リスト*/
.cssgrid {
    text-align: center;
    margin-top: 100px;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 0.5em;
    padding: 1em 0.5em 0;
    margin: 0;
    align-items: end;
}

.cssgrid > div {
    overflow: auto;
    min-width: 0;
    padding: 0;
    font-size: 90%;

}

.cssgrid > div > img {
    vertical-align: bottom;
}

/*拡大画像*/
.zoom {
    text-align: center;
    margin-top: 5px;

}


@media only screen and (min-width: 768px) {
    header {
        background-color: #617370;
        height: 80px;

    }

    .all_menu {
        margin-left: auto;
        margin-right: auto;
        width: 800px;

    }

    .left_link {
        margin-top: 10px;
        float: left;
        width: 124px;
    }

    .menu {
        width: 480px;
        text-align: center;
        float: left;
        display: flex;
    }

    .menu ul {
        display: table-cell;
        margin-top: 50px;
    }

    .menu li {
        margin-top: 0;
        display: table-cell;
        list-style: none;
    }

    .db {
        width: 152px;
        margin-top: 15px;
        float: left;
    }

    #wrap {
        width: 800px;
        margin-top: 0;
        clear: both;
        background: #d6c9a3;
        margin-left: auto;
        margin-right: auto;
    }

    aside {
        margin-top: 0;
        width: 197px;
        float: left;
        height: auto;
    }

    main {
        margin-top: 0;
        float: left;
        width: 603px;
        height: auto;
    }

    .clear {
        margin-top: 160px;
        clear: none;
        font-size: 80%;
    }

    footer {
        margin-left: auto;
        margin-right: auto;
        width: 800px;
        text-align: right;
        background: #d6c9a3;
        clear: both;
        color: #666633;
    }

    footer.pd {
        background: #EAE09D;
        margin-top: 0.1em;
        margin-left: auto;
        margin-right: auto;
        width: 930px;
        text-align: right;
        clear: both;
        color: #666633;
    }

    /*画像一覧*/
    #frame {
        background: #EAE09D;
        margin: 0 auto;
        width: 930px;
    }

    div.kahotopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #0A50A1;
    }

    div.kuratetopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #890C08;
    }

    div.tagawatopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #BE7A0B;
    }

    div.ongatopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #136127;
    }

    div.kikutopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #811788;
    }

    div.sonotatopguide {
        margin-top: 0;
        width: 170px;
        height: 670px;
        float: left;
        background: #5a3d1b;
    }


    div.box {
        margin-top: 0;
        height: 675px;
    }

    div.guide {
        text-align: left;
        line-height: 1em;
        margin-top: 0.5em;
        height: 71px;
    }

    img.gazou_left {
        vertical-align: text-bottom;
    }

    span.big {
        font-size: 160%;
    }
/* 画像一覧タイトル区切り線 */
img.sen {
 height:10px;
 width:760px;
 }
}

/* スマホ　767px以下 */

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

    body {
        width: 100%;
    }

    header {
        background-color: #617370;
        width:100%;
    }

    #wrap {
        width: 100%;
        font-size:0.9em;
        height: auto;
        margin:0 10px;
    }

    main img {
        width: auto;
        height: auto;
    }

    #wrap aside img {
        display: none;
    }

    #wrap:before {
        content: attr(data-label);
        font-size: 120%;
        color: #8b4513;
    }

    main {
        padding-left: auto;
        padding-right: auto;
        width: 90%;
        height: auto;
    }

    /* メニュー */

    .all_menu {
        text-align: center;
        width:100%;
    }

    .menu li a:before {
        content: attr(data-text);
        color: #ffffff;
        font-size: 1em;
        text-decoration: none;

    }

    .menu li img {
        display: none;
    }

    .left_link,
    .db {
        display: block;
        margin: 30px auto;
        float: none;
    }

    .menu ul {
        width: 150px;
        margin: 50px auto;
        display: block;
        float: none;
        padding-left: 0;
    }

    .menu li {
        display: block;
        margin: 5px auto;
        border: 2px solid #ffffff;
    }

    footer,
    footer.pd {
        clear: both;
    }

    .zoom img {
        width: 100%;
        height: auto;
    }

    span.big {
        font-size: 120%;
    }
    /*画像目次*/
table.gazou-menu {
margin:auto;
}
.cssgrid {
width:100%;
}
/* 画像一覧タイトル区切り線 */
img.sen {
 height:10px;
 width:90%;
 }
 
}