:root {
    /* Main theme colors */
    --primary-bg: #ffffff;          /* Dark red - wrapper background */
    --primary-text: #000;           /* Text on primary/dark backgrounds */

    --accent-bg: #000;               /* Black - menu, footer inner, h3, frames */
    --accent-text: #fff;            /* Text on accent/black backgrounds */

    --body-bg: #282828;                /* Page background */
    --body-text: #000;              /* Main page text and links */

    --gray-light: #ccc;             /* Figcaptions, hr borders */
    --gray-bg: rgba(218, 218, 218, .8); /* Pagetop background */

    --overlay-dark: rgba(0, 0, 0, .8);  /* Sub-menu, hover states */
    --overlay-darker: rgba(0, 0, 0, .9); /* Mobile menu */

    --highlight-bg: #d3cbfe;        /* Marker background (light purple) */
}

*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none}
a img{border-style:none}
ul,li{list-style-type:none}

html,body{
    height:100%
}
html{
    font-size:62.5%
}
body{
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            var(--accent-bg) 100%
        ),
        var(--body-bg);
    color:var(--body-text);
    font-size:1.2em;
    font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    height:100%;
    letter-spacing:.1em;
    line-height:1.5;
    text-align:center;
    overflow-y:scroll;
    overflow-wrap:break-word;
    word-wrap:break-word
}
a{
    text-decoration:underline;
    color:var(--link-color);
}
a:active{
    color:var(--link-color);
}
a:visited{
    color:var(--link-color);
}
a:hover{
    text-decoration:none;
    box-sizing:border-box;
    outline:1px solid var(--primary-text);
}

p{
    margin-top:5px;
}

figure{
    margin:10px;
}

figcaption{
    scale:75%;
    color:var(--gray-light);
}
footer-notes{
    scale:75%;
    color:var(--gray-light);
}

/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper{
    background:var(--primary-bg);
    color:var(--primary-text);
    height:auto;
    min-height:100%;
    margin:0 auto;              /* This centers it horizontally */
    max-width:600px;            /* Better than fixed width */
    width:100%;                 /* Full width on small screens, capped by max-width */
    position:relative;
}

/*--------------------------------------------------------
上(ヘッダー)
--------------------------------------------------------*/
header{
    background:url(img/banner200.gif);
    background-size:cover;
    color:var(--primary-text)
}
header a{
    color:var(--primary-text)
}
.header-inner{
    min-height:80px;
    padding:15px;
    text-align:left
}

/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
    margin-top:15px;
    background:var(--accent-bg);
    line-height:1;
    width:100%;
    text-align:center
}
nav li{
    display:inline-block;
    position:relative;
    height:2em;line-height:2em;
}
nav li a,nav li span{
    color:var(--accent-text);
    display:block;
    padding:0 5px;
    text-decoration:none
}
/* サブメニュー */
.sub-menu{
    background:var(--overlay-dark);
    position:absolute;
    width:180px;
    z-index:20
}
.sub-menu li{
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0;
    width:100%
}
nav li:hover .sub-menu li{
    visibility:visible;
    overflow:visible;
    height:3em;line-height:3em;
    transition: .5s
}
#open{display:none}

/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents{
    padding:20px 20px 100px;
    text-align:left;
}

/*--------------------------------------------------------
下(フッター)
--------------------------------------------------------*/
footer{
    background: url(img/back01.gif);
    color:var(--accent-text);
    bottom:0;
    height:80px;
    position:absolute;
    text-align:right;
    width:100%
}
.footer-inner{
    background:var(--accent-bg);
    padding:5px 10px
}
footer a{
    color:var(--primary-text)
}

/*--------------------------------------------------------
ページ上部へのリンク、著作権表示
--------------------------------------------------------*/
#pagetop {
    background:var(--gray-bg);
    color:var(--body-text);
    border-radius:10px;
    display:block;
    padding:10px;
    position:fixed;
    text-align:center;
    text-decoration:none;
    z-index:10
}
#pagetop:hover {
    background:var(--overlay-dark);
}
#fl a{
    display:inline-block;
    margin:10px
}

/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1{
    color:var(--primary-text);
    font-size:1.3em;
    padding:0 0 10px
}
h2{
    border-bottom:0px solid var(--primary-text);
    font-size:1.3em;
    margin:0.44em 0;
}
h3{
    background:var(--accent-bg);
    border-radius:6px;
    color:var(--accent-text);
    font-size:1em;
    margin:10px 0 20px;
    padding:5px;
    position:relative
}
h3::after{
    border:8px solid transparent;
    border-top:8px solid var(--accent-bg);
    content:'';
    height:0;
    left:30px;
    position:absolute;
    top:100%;
    width:0
}
dd{
    margin:0 0 5px 2em
}
dt{
    font-weight:700;
    margin:0 0 5px
}
em{
    font-weight:700
}
input,textarea{
    background:var(--body-bg);
    border:1px solid var(--border-main);
    color:var(--body-text);
    margin:3px 0;
    width:200px
}
textarea{
    height:50px
}
hr{
    display:block;
    border:0;
    border-top:1px solid var(--gray-light);
    margin:1em 0;
    padding:0;
    height:1px
}
.marker{
    background:var(--highlight-bg)
}
.dcline{
    border-left:3px solid var(--border-main);
    margin:5px 0;
    padding:3px
}
.textbox{
    border:2px solid var(--border-main);
    margin:10px 0;
    padding:3px;
    text-align:center
}
.title{
    font-size:1.5em;
    font-weight:700;
    margin:2em 0;
    text-align:right
}
.txt{
    border-left:1px dotted var(--border-main);
    margin:1em;
    padding:0 0 0 1em
}
.frame{
    background:var(--accent-bg);
    border-radius:3px;
    padding:6px
}

/*--------------------------------------------------------
スマホ、タブレット用
--------------------------------------------------------*/
@media screen and (max-width: 600px){
    body{
        font-size:1.4em
    }
    #wrapper{
        width:100%
    }
    img{
        max-width:100%;
        height:auto
    }
    #menu{
        background:var(--overlay-darker);
        text-align:left;
        display:none;
        position:absolute;
        left:0;
        z-index:20
    }
    nav li{
        display:block;
        height:auto;line-height:inherit
    }
    nav li a,nav li span{
        position:relative;
        padding:15px 20px
    }
    .sub-menu{
        background:none;
        position:static;
        display:none;
        width:100%;
        z-index:auto
    }
    .sub-menu li{
        text-indent:1em;
        display:inline-block;
        visibility:visible;
        overflow:visible;
        height:auto;
        width:50%
    }
    .sub-menu li a:after{
        display:none
    }
    nav li:hover .sub-menu li{
        height:auto;line-height:inherit
    }
    nav li span:after{
        border-top:3px solid var(--accent-text);
        border-right:3px solid var(--accent-text);
        content:"";
        display:block;
        margin-top:-5px;
        position:absolute;
        top:50%;right:20px;
        height:5px;width:5px;
        -ms-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
        transition:.5s
    }
    nav li span.open:after {
        -ms-transform:rotate(135deg);
        -webkit-transform:rotate(135deg);
        transform:rotate(135deg)
    }
    #open {
        background:var(--accent-bg);
        color:var(--accent-text);
        display:block;
        padding:.5em
    }
}