@charset "utf-8";

/* スマホ向け：10px～499pxまで */
@media only screen and (min-width: 10px) and (max-width:499px){
body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left
}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:underline;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    margin:0px auto;
    height:50px;
    background-color:white;
    }
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:101%;
    background-color:#dcdcdc;
    margin-left:auto;
    margin-right:auto;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 49%;
  height:50px;
  border-top: 2px solid #000;}
nav ul li:nth-child(2){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}  
nav ul li:nth-child(3){
    width:49%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(4){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(5){
    width:49%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 48%;
        height:50px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;;
   margin-top:158px;
   margin-left:auto;
   margin-right:auto;
   background-color:white;
    font-size : 80%;
	line-height : 1.8em;
    } 
    #contents div#title{
        width:100%;
        text-align: center;
        padding-top: 15px;
    }
        #contents div#title a{color:blue;text-decoration: underline;}
    #contents div#title a:hover{color:blue;text-decoration: none;}
    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  
}
    
    

   

/* タブレット向けのレイアウトの指定：500px～960px */
@media only screen and (min-width:500px) and (max-width:960px){ 
body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left
}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:underline;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    width:100%;
    margin:0px auto;
    background-color:white;
    }
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:101%;
    background-color:#dcdcdc; 
    margin-left:auto;
    margin-right:auto;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 33%;
  height:50px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;}
nav ul li:nth-child(2){
    width:32%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}  
nav ul li:nth-child(3){
    width:33%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(4){
    width:33%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(5){
    width:32%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 33%;
        height:50px;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;;
   margin-top:107px;
   margin-left:auto;
   margin-right:auto;
   background-color:white;
    font-size : 80%;
	line-height : 1.8em;
    } 
    #contents div#title{
        width:100%;
        text-align: center;
        padding-top: 15px;
    }
    #contents div#title a{color:blue;text-decoration: underline;}
    #contents div#title a:hover{color:blue;text-decoration: none;}

    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  
}



/* PC向け全画面表示レイアウトの指定：961px以上 */
@media only screen and (min-width: 961px) {

body {
	width: 1200px;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left;
}
a {
    color:#0000cd;
	text-decoration:underline;
}
a:hover {
	color:#000;
    text-decoration:none;    
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
    
   
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/
header{
    width:100%;
    background-color:white;}
header h1 {
	margin:0 auto 0 0;
	width:200px;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:100%;
    background-color: #dcdcdc;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 198px;
  height:50px;
  border-right: 2px solid #000;
}    
nav ul li a{
  display:block;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:1200px;
   margin-top:-50px;
   margin-left:auto;
    margin-right:auto;
   background-color:white;
        font-size : 80%;
	line-height : 1.8;
    }   
#contents div#title{
        width:100%;
        text-align: center;
        margin-top: 50px;
        padding-top: 50px;
    }
   
    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}

    
}