@charset 'utf-8';
/*
style.css
*/



#siteID .small {
  color: #fff;
  font-size: 0.7em;
}




/*
Masonryグリッド基本設定
*/

.grid_container {
  width: 100%;
  margin: 0 0 50px;
}

/*　1カラム（段・グリッド）の基本設定　*/

.grid_container .column {
  /* CSS3のbox-sizingを使用できない場合は、
  widthからpaddingとborderの値をマイナスして計算する */
  width: 266px;
  padding: 5px;
  margin: 2px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #d9d9d9;

  /* Javascriptを無効にしていると、
  noscript.cssを読み込んでvisibleになります */
  visibility: hidden;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 2カラム（段・グリッド）分の幅 */
.grid_container .column.w2 {
  /* CSS3のbox-sizingを使用できない場合は、
  上記カラム基本設定のpaddingとborderの値を、
  widthからマイナスして計算する */
  width: 536px;
}

/* 3カラム（段・グリッド）分の幅 */
.grid_container .column.w3 {
  /* CSS3のbox-sizingを使用できない場合は、
  上記カラム基本設定のpaddingとborderの値をの値を、
  widthからマイナスして計算する */
  width: 806px;
}

.grid_container .column img {
  display: block;
  width: 100%;
  height: auto;
}
.grid_container .column .title {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4;
  margin: 0.5em 0 0;
}


/*
sample3　フルードグリッド用追加設定
*/

#photoGalleryContainer .grid_sizer {
  /*　masonryへ指示する基本グリッド幅を%で指定するときは、
  CSSセレクタで指定する必要がある　*/
  width: 25%;
}
#photoGalleryContainer.fluid .column {
  width: 24.5%;
  margin: 0.25%;
}
#photoGalleryContainer.fluid .column.w2 {
  width: 49.5%;
}
#photoGalleryContainer.fluid .column.w3 {
  width: 74.5%;
}

/*
sample4　colorbox用追加設定
*/

#photoGalleryContainer.withColorbox .column {
  background: #fff;
  -webkit-transition: background-color .4s linear;
  transition: background-color .4s linear;
}
#photoGalleryContainer.withColorbox .column:hover {
  background: #F0E247;
}


@media only screen and (max-width:767px) {
	.inner {
		max-width: 94%;
		min-width: 94%;
		width: 94%;
	}

	#siteID {
		float: none;
		text-align: center;
	}

	#contentContainer h1.contentTitle {
		font-size: 2.0em;
		line-height: 1.3;
	}
	#contentContainer h2.contentTitle {
		font-size: 1.2em;
		line-height: 1.2;
		margin: 0 0 1em;
	}
	#photoGalleryContainer .column {
		width: 100%;
	}
	#photoGalleryContainer.fluid .column {
		width: 49.5%;
	}

}