/* ------------------------------------------------------------
	Reset Styles
------------------------------------------------------------ */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}




/* ------------------------------------------------------------
	General Styles
------------------------------------------------------------ */


{
    box-sizing: border-box;
}

body
{
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo    color: #000;

    background: white;
    color: black;
    font-size: 16px;
    line-height: 1;
    padding: 2em;
}

h1
{
    margin-bottom: 0.5em;
    padding: 10px  5px;
    font-size: 23px;
    color: #fff;
    background: #206e43;
    border-top: 3px solid #206e43;
    border-bottom: 1px dotted #206e43;
}


.sitemap
{
    margin: 0 0 2em 0;
}

/* ------------------------------------------------------------
	Page Styles
------------------------------------------------------------ */

/* -------- Top Level --------- */

.primaryNav
{
    clear: both;
    width: 100%;
    margin-top: 3em;
}

    .primaryNav #home
    {
        position: absolute;
        margin-top: -3em;
        margin-bottom: 0;
        min-width: 11.5em;
        width: 100%;
    }

        .primaryNav #home:before
        {
            display: none;
        }

    .primaryNav ul
    {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        position: relative;
    }

    .primaryNav li
    {
        flex: 1;
        flex-basis: 11.5em;
        padding-right: 1.25em;
        position: relative;

    }

    .primaryNav > ul > li
    {
        margin-top: 3em;
    }

    .primaryNav li a
    {
        margin: 0;
        padding: .875em .9375em .9375em .9375em;
        display: block;
        font-size: .9375em;
        font-weight: bold;
        color: white;
        background:#206e43;
        text-shadow: 0 0 10px rgba(0,0,0,.1);
        text-align:center;
        border: 1px solid rgba(0,0,0,.025);
        box-shadow: 0px 2px 1px rgba(0,0,0,0.15);
        text-decoration: none;
        border-radius: 12px;

    }

        .primaryNav li a:hover
        {
            background-color: #185433;
        }

    .primaryNav a:link:after,
    .primaryNav a:visited:after,
    .utilityNav a:link:after,
    .utilityNav a:visited:after
    {
  /*      content: " "attr(href)" "; */
        display: block;
        font-weight: 600;
        font-size: .75em;
        margin-top: .25em;
        word-wrap: break-word;
        color: rgba(255,255,255,.75);
    }

    /* -------- Second Level --------- */

    .primaryNav ul ul
    {
        display: block;
    }

        .primaryNav ul ul li
        {
            padding-top: .6875em;
            padding-right: 0;
        }

            .primaryNav ul ul li a
            {
                background-color: #206e43;
            }

                .primaryNav ul ul li a:hover
                {
                    background-color: #185433;
                }

            .primaryNav ul ul li:first-child
            {
                padding-top: 2em;
            }

        /* -------- Third Level --------- */

        .primaryNav ul ul ul
        {
            margin-top: .6em;
            padding-top: .6em;
            padding-bottom: .625em;
        }

            .primaryNav ul ul ul li
            {
                padding-top: .3125em;
                padding-bottom: .3125em;
            }

                .primaryNav ul ul ul li a
                {
                    background-color: #206e43;
                    font-size: .75em;
                    padding: .75em;
                    width: 90%;
                    margin-right: 0;
                    margin-left: auto;
                }

                    .primaryNav ul ul ul li a:hover
                    {
                        background-color: #185433;
                    }

                .primaryNav ul ul ul li:first-child
                {
                    padding-top: 1em;
                }

                .primaryNav ul ul ul li a:link:after,
                .primaryNav ul ul ul li a:visited:after
                {
                    font-size: .75em;
                }

            /* --------	Fourth Level --------- */

            .primaryNav ul ul ul ul
            {
                margin-top: 0;
                padding-top: .3125em;
                padding-bottom: .3125em;
            }

                .primaryNav ul ul ul ul li a
                {
                    background-color: #206e43;
                    padding: .75em;
                    width: 80%;
                }

                    .primaryNav ul ul ul ul li a:hover
                    {
                        background-color: #185433;
                    }

                    .primaryNav ul ul ul ul li a:link:after,
                    .primaryNav ul ul ul ul li a:visited:after
                    {
                        display: none;
                    }

    /* ------------------------------------------------------------
	Connecting Lines:
	Uncomment 'border-color: red' for debugging
------------------------------------------------------------ */

    .primaryNav ul:before,
    .primaryNav ul:after,
    .primaryNav ul li:before,
    .primaryNav ul li:after
    {
        display: block;
        content: '';
        position: absolute;
        border-width: 0;
        border-color: #e3e3e3;
        border-style: solid;
        z-index: -1;
        /* border-color: red; */
    }

    .primaryNav > ul > li:before
    {
        height: 1.375em;
        top: -1.375em;
        ;
        right: calc(50% + .625em);
        width: calc(100% - 2px);
        border-top-width: 2px;
        border-right-width: 2px;
        /* border-color: red; */
    }

    .primaryNav > ul > li:first-child + li:before
    {
        border-top-width: 0;
        height: 5em;
        top: -5em;
        /* border-color: red; */
    }

    .primaryNav ul ul li:after
    {
        width: 50%;
        height: .6875em;
        top: 0;
        right: 1px;
        border-left-width: 2px;
        /* border-color: red */;
    }

    .primaryNav ul ul li:first-child:before
    {
        width: 50%;
        height: 1.3125em;
        top: .6875em;
        right: 1px;
        border-left-width: 2px;
        /* border-color: red; */
    }

    .primaryNav > ul > li:last-child:after
    {
        border-bottom-width: 0;
    }

    .primaryNav ul ul ul li:before
    {
        width: calc(50% - 5px) !important;
        height: calc(100% - 2px);
        top: -50%;
        left: 0;
        border-left-width: 2px;
        border-bottom-width: 2px;
        /* border-color: red; */
    }

    .primaryNav ul ul ul li:first-child:before
    {
        height: 2.125em;
        top: -1px;
        border-top-width: 2px;
        /* border-color: red; */
    }

    .primaryNav ul ul ul:before
    {
        width: 50%;
        height: 1.25em;
        top: -10px;
        right: 1px;
        border-left-width: 2px;
        /* border-color: red; */
    }

    .primaryNav ul ul ul li:after
    {
        border-width: 0;
    }

    .primaryNav ul ul ul ul li:before,
    .primaryNav ul ul ul ul li:first-child:before
    {
        display: none;
    }

    .primaryNav ul ul ul ul:before
    {
        width: 1px;
        height: calc(100% + 2.5em);
        top: -2.5em;
        left: 0;
        border-left-width: 2px;
        /* border-color: red; */
    }


/* ------------------------------------------------------------
	Responsive Styles
------------------------------------------------------------ */

@media screen and (max-width: 30em)
{
    .primaryNav ul
    {
        display: block;
    }

    .primaryNav li
    {
        width: 100%;
        padding-right: 0;
    }

    .primaryNav #home
    {
        width: 100%;
        position: relative;
        margin-bottom: -1em;
        margin-top: 0;
    }

    .utilityNav
    {
        float: none;
        display: block;
        width: 100%;
        text-align: right;
        margin-bottom: 2.5em;
        max-width: 100%;
    }
}

/* The media queries below keep the grid column widths intact when
a column wraps. This prevents the wrapped column from displaying at
100% width. These queries also make the homepage line item flex
appropriately. When your sitemap is complete, remove the queries
that you don't need, and your sitemap layout will work perfectly. */

/* two column */
@media screen and (min-width: 30em)
{
    .primaryNav > ul > li
    {
        max-width: 50%;
    }
}
/* three column */
@media screen and (min-width: 38.5em)
{
    .primaryNav > ul > li
    {
        max-width: 33%;
    }
}
/* four column */
@media screen and (min-width: 50em)
{
    .primaryNav > ul > li
    {
        max-width: 25%;
    }
}
/* five column */
@media screen and (min-width: 61em)
{
    .primaryNav > ul > li
    {
        max-width: 20%;
    }
}
/* six column */
@media screen and (min-width: 73em)
{
    .primaryNav > ul > li
    {
        max-width: 16.66%;
    }
}
/* seven column */
@media screen and (min-width: 84.5em)
{
    .primaryNav > ul > li
    {
        max-width: 14.285%;
    }
}
/* eight column */
@media screen and (min-width: 96em)
{
    .primaryNav > ul > li
    {
        max-width: 12.5%;
    }
}
/* nine column */
@media screen and (min-width: 107.5em)
{
    .primaryNav > ul > li
    {
        max-width: 11.11%;
    }
}
/* ten column */
@media screen and (min-width: 119em)
{
    .primaryNav > ul > li
    {
        max-width: 10%;
    }
}