﻿/*****************　本鰹節　*********************/



/****************	481以下 ***************/
@media only screen and (max-width: 481px)
{
header h1{	font-size:1.5em;}
header h2{	font-size:1.5em;line-height:1.5em}
header p{font-size:1.2em;}	

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

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

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

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

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


}


/****************481 px以上 *********************/
@media only screen and (min-width: 481px) {
nav{padding:0 0 0 6%;border-bottom: 1px solid #fff;}
nav ul{	width:480px;padding:1px 0;}

.photo-right img{float:none;margin:0;padding:0;}
.photo-right p{overflow:auto;}

.bordersettei {	width: auto ;margin:5px;	padding:3px;
	border: dotted 3px #FF4500 ;border-radius: 15px ;}

.pingleft img{float:left;}
.pingleft p{overflow:auto;}

#sidebar1 { width: 43%;  padding-right: 3%;   float: left; }
#sidebar2 { width: 43%;  padding-left: 3%;   float: right;}
	

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

.photo-left img{float:left;width:auto;}
.photo-left p{overflow:auto;} 

.photo-right img{float:right;width:auto;}
.photo-right p{overflow:auto;} 

.photo-righttate img{float:right;width:auto;}
.photo-righttate p{overflow:auto;} 

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

figure.photo-right420 img{float:none;width:auto;margin-left:3%;}
figure.photo-right420 p{overflow:auto;}

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

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

figure.photo-left74 img{float:none;width:auto;margin:0;}
gigure.photo-left74 p{overflow:auto;}
} 
 /**************** 651px以下 *********************/ 
@media only screen and (max-width: 651px){
header h1{	font-size:1.5em;}
header h2{	font-size:1.5em;line-height:1.5em}
header p{font-size:1.2em;}	
article section p{text-indent:0em;}	

.imgleft img{float:left;width:48%;}
.imgright img{float:right;width:48%;}


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

nav { padding: 0 30px; }
nav ul{	width:640px ;}	
nav ul li{font-size:1.5em;}

.photo-left img{float:left;width:auto;}
.photo-left p{overflow:auto;} 
.photo-right img{float:right;width:auto;}
.photo-right p{overflow:auto;}
.photo-righttate img{float:right;width:auto;}
.photo-righttate p{overflow:auto;} 

figure.photo-left420 img{float:left;width:50%;}
figure.photo-left420 p{overflow:auto;} 

figure.photo-right420 img{float:right;width:auto;}
figure.photo-right420 p{overflow:auto;}

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

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

figure.photo-left74 img{float:left;width:auto;height:auto;margin:0;}
gigure.photo-left74 p{overflow:auto;}

.imgleft img{float:left;width:48%;}
.imgright img{float:right;width:48%;margin-right:3%;}


}
/**************** 721px以下 *********************/
@media only screen and (max-width: 721px) {
header h1{	font-size:1.8em;}
header h2{	font-size:1.8em;}
header p{font-size:1.5em;}
}
/**************** 721px以上 *********************/
@media only screen and (min-width: 721px) {

#wrapper {  width: 98%;  margin: 0 auto;	  padding: 0 0 20px 0;	 
      -webkit-border-radius: 16px;    /* Safari,Google Chrome用 */  
      -moz-border-radius: 16px;   /* Firefox用 */  }
#common-contents {  width: auto;  margin: 0 0 1em; padding: 0 10px; }
article.main { float: left;  width:65%; padding:0 1em 0 0;	}
aside.side { float:right; width:30%; margin: 0;  padding: 0.5em 0 0 0; }
#sidebar1, #sidebar2 {  width: 100%;  padding:0 0 0 1em;  float: none; }	

nav { padding: 0px 30px; }
nav { padding: 0 30px; }
nav ul{	width:720px ;}	
nav ul li { float:left;width:145px;margin: 0; text-align: center;
    border-left: 2px solid #fff;border-right: 2px solid #fff; border-bottom:2px solid #fff ; }

.imgleft img{float:left;width:48%;}
.imgright img{float:right;width:48%;}

.photo-left img{float:left;width:auto;}
.photo-left p{overflow:auto;} 
.photo-right img{float:right;width:auto;}
.photo-right p{overflow:auto;} 
.photo-righttate img{float:right;width:auto;}
.photo-righttate p{overflow:auto;} 

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

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

figure.photo-right420 img{float:right;width:auto;width:55%;}
figure.photo-right420 p{overflow:auto;} 

figure.photo-left420 img{float:left;width:50%;width:55%;}
figure.photo-left420 p{overflow:auto;} 

figure.photo-left194 img{float:left;width:auto;}
gigure.photo-left194 p{overflow:auto;}

figure.photo-left74 img{float:left;width:auto;height:auto;margin:0;padding:0;}
gigure.photo-left74 p{overflow:auto;}


}

/**************** 961px以上 *********************/
@media only screen and (min-width: 961px) { 
header { padding: 10px 30px;}

nav { padding: 0 30px; }
nav ul{	width:940px ;}	
nav ul li { float:left;width:145px;margin: 0; text-align: center;font-size:1.5em;
    border-left: 2px solid #fff;border-right: 2px solid #fff; border-bottom:2px solid #fff ; }


#wrapper {  width: 958px;  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用 */  }
#common-contents {  width: auto;  margin: 0.5em 0 1em; padding: 0 10px; }
	  
figure.photo-left img{float:left;width:350px;height:auto;}
figure.photo-left p{overflow:auto;margin-top:0.5em;} 
figure.photo-right img{float:right;width:350px;height:auto;}
figure.photo-right p{overflow:auto;margin-top:0.5em;} 

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

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


figure.photo-righttate img{float:right;width:200px;height:auto;}
figure.photo-righttate p{overflow:auto;margin-top:0.5em;} 

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


figure.photo-left74 img{float:left;width:75px;height:auto;margin:0;}
gigure.photo-left74 p{overflow:auto;}	

.imgleft img{float:left;width:48%;}
.imgright img{float:right;width:48%;}

article.main { float: left;  width:680px; padding:0 1em 0 0; }
		 
aside.side { float:right; width:230px; margin: 0;  padding: 0 0 0 0; }

#sidebar1, #sidebar2 {  width: 100%;  padding:1em 0 0 1em;  float: none; }	  
		}
