/*************　Media css　201606 *******************/

@charset "UTF-8";

/****************200 px 以上 *********************/

@media only screen and (min-width:200px){
#wrapper {  width:98%;  margin: 0.5em auto;  padding: 0 0 0.5em 0;
		  border-radius: 16px;        /* CSS3草案 */  
      -webkit-border-radius: 16px;    /* Safari,Google Chrome用 */  
      -moz-border-radius: 16px;   /* Firefox用 */  background-color:#fff;   }

#maincontents{float:none;width:100%;}
#subcontens{float:none;width:98%;}
#subA,#subB{float:none;width:98%;}

figure.photo-left420 img{float:left;width:60%;margin-right:3%;margin-top:0.3em;}
figure.photo-left420 p{overflow:auto;margin-top:0.5em;}

figure.photo-right420 img{float:right;width:60%;margin-left:3%;margin-top:0.3em;}
figure.photo-right420 p{overflow:auto;margin-top:0.5em;}

figure.gif-style74 img{float:left;width:74px;margin-right:3%;margin-top:0.3em;}
figure.gif-style74 p{overflow:auto;margin-top:0.5em;}

.imgleft img{float:left;width:45%;padding:0.5em 0.5em;}
.imgright img{float:right;width:45%;padding:0.5em 0.5em;}

header h1{font-size:1.5em;padding-top:0.5em;}
header h2{font-size:1.2em;padding:0.5em 0 0.5em 2em;}	
header p{font-size:1em;padding:0.5em 0.5em 1em 1em;}

figure.photo-left350 img{float:left;width:45%;margin-right:3%;}
figure.photo-left350 p{overflow:auto;}


figure.photo-left300 img{float:left;width:48%;height:auto;padding:0 auto;}
figure.photo-left300 p{overflow:auto;margin:0 0;clear:both;}
figure.photo-right300 img{float:right;width:48%;height:auto;padding:0 auto;}
figure.photo-right300 p{overflow:auto;margin:0 0;clear:both;}

}

/****************481 px以上 *********************/
@media only screen and (min-width: 481px) {

#comon{width: auto;  margin: 0.5em 0 ; padding: 0 0;}   
#maincontents{float:none;width:100%;}
#subcontens{float:none;width:100%;}
#subA{float:left;width:45%;}
#subB{float:right;width:45%;}


}

 /**************** 651px以上 *********************/ 
@media only screen and (min-width: 651px) {
#comon{width: auto;  margin: 0.5em 0 ; padding: 0 0;}      
#maincontents{float:left;width:64%;}
#subcontens{float:right;width:30%;margin:0;padding:0 1em 0 0;margin:0 0.7em 0 0;}
#subA,#subB{float:none;width:100%;}

header h1{font-size:2em;padding-top:1em;}
header h2{font-size:1.5em;padding:0.5em 0 1em 2em;}	
header p{font-size:1.5em;padding:0.5em 0.5em 2em 1em;}

}

/**************** 721px以上 *********************/
@media only screen and (min-width: 721px) {
nav { padding: 0px 30px; }
nav { padding: 0 30px; }
nav ul{	width:90% ;}	
nav ul li { float:left;width:24%;margin: 0; text-align: center;
    border-left: 2px solid #fff;border-right: 2px solid #fff; border-bottom:2px solid #fff ; }



}

/**************** 961px以上 *********************/
@media only screen and (min-width: 961px) { 
#wrapper {  width: 950px;  margin: 0.5em auto;  padding: 0 0 0 0;
		  border-radius: 16px;        /* CSS3草案 */  
      -webkit-border-radius: 16px;    /* Safari,Google Chrome用 */  
      -moz-border-radius: 16px;   /* Firefox用 */  background-color:#FFF;   }
#comon{width: auto;  margin: 0.5em 0 ; padding: 0 0;}      
#maincontents{float:left;width:64%;}
#subcontens{float:right;width:30%;margin:0;padding:0 1em 0 0;margin:0 0.7em 0 0;}
#subA,#subB{float:none;width:100%;}

figure.photo-right420 img{float:right;width:60%;height:auto;}
figure.photo-right420 p{overflow:auto;margin-top:0.5em;} 

figure.photo-left420 img{float:left;width:60%;height:auto;}
figure.photo-left420 p{overflow:auto;margin-top:0.5em;} 


figure.photo-left300 img{float:left;width:48%;height:auto;}
figure.photo-left300 p{overflow:auto;margin-top:0.5em;}
figure.photo-right300 img{float:right;width:48%;height:auto;}
figure.photo-right300 p{overflow:auto;margin-top:0.5em;}  

.imgleft img{float:left;width:47%;padding:0.5em 0.5em;}
.imgright img{float:right;width:47%;padding:0.5em 0.5em;}


}