@charset "utf-8";


/*Main content*/
body{-webkit-text-size-adjust: 100%; 
    padding: 0;
    margin: 0 auto;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    background-color: #eee;
   }


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

.head   {width: 100%;
        margin-left: auto;
        margin-right: auto}

nav     {background-color:#223;
        text-align: center;
        font-size: 1.2rem;
padding-bottom: 3px;}

.menu{color: #fff;
        margin: 0 auto;
        text-decoration: none;
background-color: #;    
border: solid 2px #fff;
border-bottom: solid 1px #ddd;
border-right: solid 1px #eee;
border-radius: 5px;
padding: 0px 5% 0px 5%;}



.wrapper{background-color: #fff;
}
.content    {
}



.side{border-left:;
background-color: ;
}

.side a{color: #111;
text-decoration:;
border-top: ;
border-bottom:;
margin: 0;
}

.sidetop{background-color: #224;
color: #fff;
padding-left: 10px;
box-shadow: 1px;
border-radius: 0px;}


.side img{;}


.footer {background-color: #223;
        width: 100%;
        padding-top: 0;
        padding-bottom: 20px;
        color: #fff;
        }
.footer h4{font-size: 1em;
margin: 0}
.footer p{font-size: 0.8em;
margin: 0}

.foot   {width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;}

.wrapper{
overflow: hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.content    {padding: 0px 0px;
            width: 100%x;
            margin-left: auto;
            margin-right: auto;
            background-color: #fff;
            padding: 20px;}
}



.white{background-color: #fff}




.logo{display: inline-block}
.logo1{display: inline-block}

address{font-size: 0.6rem;}

/*tags*/


h1      {color: #fff; 
        text-shadow:black 1px 1px 0px, black -1px 1px 0px,
             black 1px -1px 0px, black -1px -1px 0px;
        font-size:1rem;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        }

h2      {font-size: 2rem}

h3      {font-size: 1.7rem}

h4{font-size: 1.3rem;
}

p       {font-size: 20px;}

a       {}



a:hover {color: #aff;
        }

a:hover img{box-shadow: 10px #aff}





table   {font-size: 1.3rem;}


ul      {font-size: 1rem;
        padding: 0}
li      {list-style: none;
        font-size: 1rem}

tr {width: 100%}

td {font-size: 1.5rem;
    text-align: center;
width: 50%}

.table3 td {text-align: center;
width: 30%}



.clearfix::after{
content: '';
display: block;
clear: both;
}

.clear{clear: both;
}


/*class*/

.box{background-color: #d21;
color: #fff;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-radius: 10px;}

.box2{background-color: #116;
color: #fff;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
box-shadow: 1px;
border-radius: 10px;}

.box3{background-color: #d34;
color: #fff;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
box-shadow: 1px;
border-radius: 10px;}

.box4{background-color: #224;
color: #fff;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
box-shadow: 1px;
border-radius: 10px;}



.red{color: #f44}

.blue{color: #16f}

.blue1{color: #3af}

.green{color: #1c1}

.gray{color: #555}

.list{border: solid;
border-color: #fa4;
border-radius: 10px;
padding-left: 15px
}

.list p{margin-left: auto;
margin-right: auto;
}

.frame{border: solid;
border-color: #c55;
border-radius: 10px;
margin-top: 0;
margin-bottom: 20px;
padding:0 10px;

}

.frame1{border: solid;
border-color: #cac;
padding: 5px;
}

.frame2{border: solid;
border-color: #3af;
padding: 5px;
}





/*size*/

@media screen and (max-width: 580px) {
.head   {width: 100%;} 
h2{font-size: 1.7rem}
h3{font-size: 1.5rem}
h4{font-size: 1.3rem}
p{font-size: 1rem;}
.side{width: 100%;
    padding: 0px;}
.menu{padding: 5px 1% 5px 1%;
    font-size: 1rem}
nav   {padding:10px 0px 10px 0px;}

}



@media screen and (min-width: 590px) {
.head   {width: 100%;} 
h2{font-size: 2rem}
.side{width: 100%;
    padding: 0px;}
    

}



@media screen and (min-width: 1000px) {
.head   {width: 900px;
        margin-left: auto;
        margin-right: auto}
.foot   {width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 5p;
        padding-top: 0}
h2      {font-size: 2rem}
h3      {font-size: 1.7rem}
h4{font-size: 1.3rem;}
p       {font-size: 20px;}
nav     {background-color:#223;
        text-align: center;
        font-size: 1.7rem;
padding-bottom: 3px;}

.menu{color: #fff;
        margin: 0 auto;
        text-decoration: none;
background-color: #;    
border: solid 2px #fff;
border-bottom: solid 1px #ddd;
border-right: solid 1px #eee;
border-radius: 5px;
padding: 0px 5% 0px 5%;}
    

.wrapper{
border:solid #fff;
overflow: hidden;
width: 950px; 
margin-left: auto;
margin-right: auto;
}
.content    {padding: 30px 10px 0px 10px;          
            width: 650px;
            margin-left: auto;
            margin-right: auto;
            background-color: #fff; 
            float: left
}

.side{float: right;
width: 250px;
}

.left{float: left;
width: 70%;}
.right{float: right;
width: 45%;}

.right1{float: right;
width: 45%;}

    
.side {padding-top: 0px}
.side h2{font-size: 1.8rem;}
.side h3{font-size: 1.5rem;}
}