body{  
	margin: 0;  
	line-height: 150%; 
	font-size:90%;
	font-family:"Verdana", "メイリオ", "ヒラギノ角ゴ Pro W3",  "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "sans-serif", "Osaka‐等幅";
	background: #f6f2eb;

}

/*リンク*/
	a{text-decoration:none;}
	a:link {color:#0099ff;}
	a:active {background-color: #CCFFFF; color:#808080;border-bottom:2px dotted #0099ff;}
	a:visited {color:#0099ff;}
	a:hover{background-color: #CCFFFF; color:#808080; border-bottom:2px dotted #0099ff; cursor:crosshair}

/*見出し*/
h1 {
	padding:0;
	margin:0;
}
h1 a {
	width:173px;
	height:36px;
	display: block;
	background: url(../img/msr_archives_logo.png) no-repeat;
	margin:0 auto;
}

h2 {
	border-left: 8px solid #e96;
	padding-left:15px;
}

/* ヘッダーエリア */
div#header {  
	width: 100%;  
	height: 30px;  
	padding:10px 0;  
	background-color: #e8f4ff;
	color: #fff;  
	box-shadow: 0px 2px 15px 5px #aaa;
}

/* フッターエリア */
div#footer {
	width: 100%;  
	height: 60px;  
	padding: 10px 0;
	background-color: #e8f4ff;  
	color: #808080;
	text-align:center;
	line-height: 105%;
	box-shadow: 0px 2px 15px 5px #aaa;
}

/* コンテンツエリア */
div#contents{
	max-width:1080px;
	min-width:420px;
	padding:20px;
	margin:0 auto;
	color: #808080;
}

/* グリッドのコンテナー */
div#container {
	margin:0 auto;
}

/* グリッドのボックス */
div.box {
	margin:4px;
	width:200px;
	border:1px solid #ccc;
	background: #fff;

	/* ボックスを角丸にする */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	/* ボックスにドロップシャドウを追加する */
	box-shadow: 0px 2px 5px 1px #ccc;
}

/* 大きいボックス */
div.box.w2 {
	width:410px;
	position: relative;
}

/* ボックス内の画像に表示される空白の対策 */
div.box div.thumb {
	line-height:0; 
}

/* ボックス内の画像 */
div.box div.thumb img {
	border:none;

	/* 画像右上・左上を、ボックスに合わせて角丸にする */
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* 大きいボックスの画像ファイル */
div.box.w2 div.thumb img {

	/* ボックスに合わせて角丸にする */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* ボックス内のヘッダー */
div.box h3 {
	margin:0;
	padding:3px 5px;
	background:#e1cdb2;
	color:#570000;
}

/* 大きいボックスの画像キャプション */
div.box.w2 h3 {
	position: absolute;
	bottom:0;
	margin:0;
	width:390px;
	padding:6px 10px;
	background:#570000;
	color:#b7dcff;
	opacity:0.7;

	/* キャプションの右下・左下を、ボックスに合わせて角丸にする */
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

}

/* ボックス内文章 */
div.box p {
	margin:5px;
	padding:5px;
}

.hidden {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
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%;
  }
  #headerContainer {
    position: relative;
  }
  #siteID {
    float: none;
    text-align: center;
  }
  #contentContainer {
    padding: 20px 0 40px;
    margin: 0 auto;
  }
  #copyright {
    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%;
  }
  .loaderSymbol {
    position: fixed;
    top: 50%;
    left: 45%;
  }

}


/* TOPに戻るボタン追加設定 */

.pagetop {
	color: #fff;
	background-color: #a0d0ff;
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #a0d0ff;
	text-decoration: none;
}