body {
    margin: 0;
    padding: 0;
    background-color: #ffffee;
    color: #202020;
    font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}

a {
    color: #202020;
    text-decoration: none;
}

a:hover {
    color:#0030b0
}

header {
    background-color: #ffdddd;
}

h1 {
    float: left;
    font-family: 'Roboto', "メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; 
    font-size: 28px;
    text-shadow: 4px 4px 3px #ddd;
}

h1 img {
    margin: 0 5px 0 0;
    height: 40px;
}

h1 span {
    font-size: smaller;
    vertical-align: middle;
}

img.logo {
    float: left;
    margin: 5px;
}

#googlesearch {
    float: right;
    margin: 5px;
}

nav {
    clear: both;
    text-align: right;
    color: white;
    line-height: 160%;
    padding: 0 10px 0 0;
}

nav.blue {
    background-color: #8855ff;
    border: 1px #7744ee solid;
}

nav.purple {
    background-color: #cc66cc;
    border: 1px #aa44aa solid;
}

nav.lightblue {
    background-color: #ccccff;
    border: 1px #bbbbee solid;
    color: black;
}

nav a{
    border:1px solid #8855ff;
    padding:2px;
    color:white;
}

nav a:hover{
    border:1px solid #ffffff;
    padding:2px;
    color:white;
}

nav.lightblue a{
    border:1px solid #ccccff;
    color: #202020;
}

nav.lightblue a:hover{
    border:1px solid #8855ff;
    color: #202020;
}


.block-menu {
    list-style-type: none;
    margin: 0 0 2px;
    padding: 1px;
}

.block-menu li a {
    margin: 0;
    padding: 7px 0px 6px 5px;
    display: block;
    background-color: #ffdddd;
    color: #442222;
    border-bottom: 1px solid #ffffff;
}

.block-menu li a:hover {
    background-color: #ff9999;
    color: #ffffff;
}

#main {
    box-sizing: border-box;
    padding: 2% 4% 1% 4%;
    line-height: 130%;
}

#main li {
    list-style-type: circle;
    line-height: 120%;
}

#main dl {
    line-height: 140%;
}

#main a {
    border-bottom: 1px solid #ffaaaa;
    line-height: 180%;
}

#main a:hover {
    background-color: #ffe5ff;
}

#main h2 {
    background-color: #ffffcc;
    border-bottom: solid 2px #66cc33;
    coloar: #202020;
    padding: 5px 0 2px 5px;
}


.main-r {
    box-sizing: border-box;
    padding: 2%;
}

.pickup {
    background-color: #eeeeff;
    border: 1px #bbbbbb solid;
    padding: 1%;
}

.news li {
    list-style-type: circle;
}

.news a {
    border-bottom: 1px solid #ffaaaa;
    line-height: 140%;
}

.news a:hover {
    background-color: #ffe5ff;
}

.news h2 {
    background-color: #ffffcc;
    border-bottom: solid 2px #66cc33;
    border-top: solid 4px #ff9999;
    coloar: #202020;
    padding: 5px 0 2px 5px;
}

#sections {
    clear: both;
    padding: 0;
    margin: 0;
}

footer {
    padding: 1% 0 2% 0;
    margin: 0;
    text-align: center; 
    line-height: 120%;
}

ol.sec1 {
    margin: 0;
}

ol.sec2 {
    margin: 0;
}

/******************************************/

@media (min-width: 600px) {

body {
    font-size: 14px;
}

body.twocolumn {
    background-color: #ffdddd;
}

h1 {
    margin: 15px;
    font-size: 28px;
}

h1 span {
    font-size: 18px;
}

nav {
    font-size: 12px;
}

#side {
    float: left;
    box-sizing: border-box;
    width: 20%;
    padding: 3px;
}

#main h2 {
    font-size: 16px;
}

.main-r {
    float: right;
    width: 80%;
    background-color: #ffffee;
}

#newsleft {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 0 1% 0 0%;
}

#newsright {
    float: right;
    box-sizing: border-box;
    width: 50%;
    padding: 0 0 0 1%;
}

.news h2 {
    font-size: 18px;
}

ol.sec1 {
    float: left;
    margin: 0 0 10px 0;
}

ol.sec2 {
    float: left;
    margin: 0 0 10px 0;
}

footer {
    clear: both;
}

}

/********************************/

@media (max-width: 599px) {

.pickup img {
    width: 40%;
}

}