/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	height: 100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/**** Demos ****/

#container {
  max-width:1512px;
  min-width:504px;
  padding:0px;
  margin:0px auto;
  clear: both;

}

.centered { margin: 0 auto; }

.box {
  margin:0px;
  padding:0px;
  background: #fff;
  color: #222 ;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
}



.box img{
  display: block;
  width: 168px;
  margin:0px;
  padding:0px;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}

.photo2 img {
  width: 336px;
}

.photomain img{
  display: block;
  width: 504px;
  margin:0px;
  padding:0px;
}




/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}







/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.float_l{
	float:left;
}

.float_r{
	float:right;
}

.ph_l{
	margin-left:15px;
	margin-bottom:15px;
}

.ph_r{
	margin-right:15px;
	margin-bottom:15px;
}

.block{
	display:block;
}

.center{
	text-align:center;
}
	
/****************************************

		common
		
*****************************************/
body{
	background:url(../images/bg.png) repeat;
}

header{
	width:100%;

	padding:0;
	margin:0;
	background:#FFF;
}

header h1{
	width:840px;
	margin:0 auto 25px auto;
	padding:43px 0 0 0;
	line-height:100%;
}


#content{
	width:100%;


}

#wrap{
	width:820px;
	margin:0 auto;
	padding:45px 10px;
	background:#FFF;
	}

#wrap h2{
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
	margin-bottom:25px;
}

#wraper{
	padding:10px;
	width:95%;
}

h3{
	color:#3EB133;
	border-left:5px solid #00A7EB;
	padding-left:10px;
	margin-bottom:20px;
	font-size:18px;
}

p{
	font-size:14px;
	color:#000;
	line-height:180%;
}

p.from{
	font-size:16px;
	color:#000;
	line-height:180%;
	font-weight:bold;
	margin-bottom:20px;
}


#shima{
	padding:0 30px 0 30px;
}
p.mab50{
	margin-bottom:50px;
}
p.mab20{
	margin-bottom:20px;
}
footer{
	width:100%;
	background:green;
	font-size:12px;
	color:#fff;
	padding:10px 0 10px 0;

}

footer{
	width:100%;
	background:green;
	font-size:12px;
	color:#fff;
	padding:10px 0 10px 0;
	text-align:right;
}

footer p{
	width:1502px;
	padding-right:10px;
	text-align:right;
	font-size:12px;
	color:#fff;
	margin-left:auto;
	margin-right:auto;
}

/**/
ul#navi {
	width:840px;
	margin:0 auto 0 auto;
}
#navi li{
	width:210px;
	float:left;
}

img{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
  }

a#gotop{
	text-align:right;
	font-size:10px;
	color:#0000FF;
	text-decoration:underline;
	cursor:pointer;
	display:block;
}
/****************************************

		1512

*****************************************/
@media screen and (max-width: 1511px) {
	/* スマホポートレート用のスタイル記述 */
	
#container {
  max-width:1344px;
  min-width:1344px;
  padding:0px;
  margin:0px auto;
  clear: both;
}

footer p{
	width:1334px;
}

}


/****************************************

		1344

*****************************************/
@media screen and (max-width: 1343px) {
	/* スマホポートレート用のスタイル記述 */
	
#container {
  max-width:1176px;
  min-width:1176px;
  padding:0px;
  margin:0px auto;
  clear: both;
}

footer p{
	width:1166px;
}


}

/****************************************

		1176

*****************************************/
@media screen and (max-width: 1175px) {
	/* スマホポートレート用のスタイル記述 */
	
#container {
  max-width:1008px;
  min-width:1008px;
  padding:0px;
  margin:0px auto;
  clear: both;

}

footer p{
	width:998px;
}

}


/****************************************

		1024

*****************************************/
@media screen and (max-width: 1023px) {
	/* スマホポートレート用のスタイル記述 */
	
#container {
  max-width:840px;
  min-width:840px;
  padding:0px;
  margin:0px auto;
  clear: both;

}

footer p{
	width:830px;
}


}


/****************************************

		768

*****************************************/
@media screen and (max-width: 839px) {
	/* スマホポートレート用のスタイル記述 */

header{
	width:100%;
	height:168px;
	padding:0;
	margin:0;
	background:#FFF;
}


header h1{
	width:768px;
	margin:0 0 25px 0;
	padding:43px 0 0 0;
	line-height:100%;
}


#wrap{
	width:748px;
	margin:0 auto;
	padding:45px 10px;
	background:#FFF;
	}

#container {
  max-width:768px;
  min-width:768px;
  padding:0px;
  margin:0px auto;
  clear: both;

}


.box img{
  display: block;
  width: 128px;
  margin:0px;
  padding:0px;
}


.photo2 img {
  width:256px;
}

.photomain img{
  display: block;
  width: 384px;
  margin:0px;
  padding:0px;
}


ul#navi {
	width:100%;
	margin:0 auto 0 auto;
}
#navi li{
	width:25%;
	float:left;
}
#navi li img{
	width:100%;

	float:left;
}

footer p{
	width:758px;
}

}


/****************************************

		568

*****************************************/
@media screen and (max-width: 767px) {
	/* スマホポートレート用のスタイル記述 */

header{
	width:100%;
	
	padding:43px 0 43px 0;
	margin:0;
	background:#FFF;
}

header h1{
	width:568px;
	margin:0 0 25px 0;
	padding:0;
	line-height:100%;
}

#wrap{
	width:548px;
	margin:0 auto;
	padding:45px 10px;
	background:#FFF;
	}

h2 img{
	width:100%;
}
#container {
  max-width:568px;
  min-width:568px;
  padding:0px;
  margin:0px auto;
  clear: both;

}
.box {
  margin:0px;
  padding:0px;
  background: #fff;
  color: #222 ;
  font-size: 11px;
  line-height: 1.4em;
  float: left;

}

.box img{
  display: block;
  width:142px;
  margin:0px;
  padding:0px;
}
.photo2 img {
  display: block;
  width:284px;
  margin:0px;
  padding:0px;
}

.photomain img{
  display: block;
  width:426px;
  margin:0px;
  padding:0px;
}

footer p{
	width:558px;
}


}



/****************************************

		480

*****************************************/
@media screen and (max-width: 320px) {
	/* スマホポートレート用のスタイル記述 */
header{
	width:100%;
	height:auto;
	padding:20px 0 20px 0;
	margin:0;
	background:#FFF;
}


header h1{
	width:320px;
	margin:0 0 25px 0;
	padding:0;
	line-height:100%;
}

header img{
	width:320px;
	margin:23px 0 23px 0;
}

#wrap{
	width:300px;
	margin:0 auto;
	padding:45px 10px;
	background:#FFF;
	}
#container {
  max-width:320px;
  min-width:320px;
  padding:0px;
  margin:0px auto;
  clear: both;

}
.box {
  margin:0px;
  padding:0px;
  background: #fff;
  color: #222 ;
  font-size: 11px;
  line-height: 1.4em;
  float: left;

}

.box img{
  display: block;
  width:160px;
  margin:0px;
  padding:0px;
}
.photo2 img {
  display:none;
}

.photomain img{
  display: block;
  width:320px;
  margin:0px;
  padding:0px;
}


ul#navi {
	width:100%;
	margin:0 auto 0 auto;
}
#navi li{
	width:50%;
	float:left;
}


footer p{
	width:95%;
}

}


/****************************************

		320

*****************************************/
@media screen and (max-width: 320px) {
	/* スマホポートレート用のスタイル記述 */
header{
	width:320px;
	margin:0;
}

header img{
	width:320px;
	margin:0;
}

#container {
  max-width:320px;
  min-width:320px;
  padding:0px;
  margin:0px auto;
  clear: both;

}
.box {
  margin:0px;
  padding:0px;
  background: #fff;
  color: #222 ;
  font-size: 11px;
  line-height: 1.4em;
  float: left;

}

.box img{
  display: block;
  width:160px;
  margin:0px;
  padding:0px;
}
.photo2 img {
  display:none;
}

.photomain img{
  display: block;
  width:320px;
  margin:0px;
  padding:0px;
}

}