/*===============================================
●PC画面 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        position: relative;
    }

    body {
        margin: 0;
    }

    #header {
        width: 100%;
        text-align: center;
    }

    #container1 {
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height: 100%;
        padding-bottom: 150px;
        overflow:hidden;
    }

    #container {
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height: 100%;
        padding-bottom: 150px;
        overflow:hidden;
    }


    #container3 {
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height: 100%;
        padding-bottom: 150px;
        overflow:hidden;
	text-align: center;
    }

    #footer {
        clear: both;
        width: 100%;
        background: gray;
        text-align: center;
        position: absolute;
        bottom: 0;
        height: 150px;
    }

    #title {
        color: black;
        font-family: MS ゴシック;
        font-size: 40px;
    }

    #illumfence {
          position: absolute;
        /*background: green;*/
        width: 100%;
    }

    .topic_img img{
        width: 100%;
    }


    #illumination {
        float: left;
        /*background: green;*/
        width: 50%;
    }

    .topic_img img{
        width: 100%;
    }

    #fence {
        float: left;
        /*background: red;*/
        width: 50%;
    }

    .navigation {
        width: 100%;
        margin: 0 auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .navigation:after {
        content: "";
        clear: both;
        display: block;
    }
    .navigation li {
        float: left;
        width: 33.3%;
    }
    .navigation a {
        display: block;
        text-align: center;
        line-height:50px;
        height:50px;
        background:gray;
        color:#fff;
        text-decoration: none;
        border-right:1px solid white;
    }
    .navigation a:hover {
        background:black;
    }
    .navigation li:first {
        border-left:1px solid white;
    }

    .archive {
        float: left;
        width: 35%;
	font-size: 12px;
    }
    .new_info {
        float: left;
        width: 65%;
	font-size: 12px;
	font-color: black;
    }


    .box {
        border-bottom: 3px double black;
	 width: 90%;
    }


    /*固定ページ用の装飾*/
    .note {
        position:relative;
        width:480px;
        padding:1em 1.5em;
        margin:2em auto;
        color:black;
        /*background: #97C02F;   塗りつぶしVer.*/
	outline: solid 1px #97C02F; 　　/*アウトラインVer.*/
        overflow:hidden;
    }

    .note:before {
        content:"";
        position:absolute;
        top:0;
        right:0;
        border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
        border-style:solid;
        border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
        background:#658E15; /* For Opera when also applying a border-radius */
        display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
        -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    }
    .note.red {background:#ffff;}
    .note.red:before {border-color:#fff #fff #ffff00 #ffff00; background:#ffff;}
    .note.rounded {
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
    }

    .note.rounded:before {
        border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
        border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
        -webkit-border-bottom-left-radius:5px;
        -moz-border-radius:0 0 0 5px;
        border-radius:0 0 0 5px;
    }

～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●タブレット 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        position: relative;
    }

    body {
        margin: 0;
    }

    #header {
        width: 100%;
        text-align: center;
    }

    #container {
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height: 100%;
        padding-bottom: 200px;
        //overflow:hidden;
    }

    #footer {
        width: 100%;
        background: gray;
        text-align: center;
        position: absolute;
        bottom: 0;
        height: 200px;
    }

    #title {
        color: black;
        font-family: MS ゴシック;
        font-size: 40px;
    }

    #illumination {
        width: 100%;
    }

    .topic_img img{
        width: 100%;
    }

    #fence {
        width: 100%;
    }

    .navigation {
        width: 100%;
        margin: 0 auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navigation:after {
        content: "";
        display: block;
    }

    .navigation li {
        width: 100%;
    }

    .navigation a {
        display: block;
        text-align: center;
        line-height:50px;
        height:50px;
        background:gray;
        color:#fff;
        text-decoration: none;
        border-bottom:1px solid white;
    }

    .navigation a:hover {
        background:black;
    }

    .navigation li:first {
        border-top:1px solid white;
    }

    .archive {
        width: 100%;
    }
    .new_info {
        width: 100%;
    }

    .box {
        border-bottom: 3px double black;
	 width: 100%;
    }

～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●スマホ  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){

～以下、画面の横幅が640pxまでの場合のスタイル記入～
}