@charset "utf-8";
/* CSS Document */


header {
	background-color: #fff;
}

.headerTop {
  display: flex;                  /* 横並びにする */
  justify-content: space-between; /* 左右に分ける */
  align-items: center;            /* 縦方向中央揃え */
  padding: 10px 20px;             /* 上下10px、左右20pxの余白 */
  flex-wrap: wrap;                /* 小さい画面では折り返す */
}

.headerText {
	text-align: left;               /* 左端固定 */
	font-size: 14px;                /* 文字サイズ調整 */
	flex: 1;                        /* 可能な限り横幅を広げる */
	font-weight: bold;
	padding-left: 10px;
}

.siteTitle img {
	height: 30px;                   /* 画像の高さ固定 */
	max-width: 100%;                /* 小さい画面で縮小 */
	display: block;
	padding-right: 10px;
	font-size: 12px;
	font-weight: bold;
}



/* スマホ用調整 */
@media (max-width: 480px) {
  .headerTop {
    padding: 8px 12px;       /* 余白を少し小さく */
  }

  .headerText {
    font-size: 14px;         /* 文字サイズを少し小さく */
  }

  .siteTitle img {
    height: 24px;            /* 画像も少し小さく */
  }
}


/* タブレット用調整 */
@media (max-width: 768px) {
  .headerText {
    font-size: 15px;         /* 中サイズ画面用微調整 */
  }

  .siteTitle img {
    height: 28px;
  }
}








.navDrawr>ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.navDrawr>ul>li {
	float: left;
	width: 20%;
	position: relative;
}


/* 変更＝＝background:#003366;＝＝＝*/	

.navDrawr a {
	display: block;
	color: #fff;
	text-decoration: none;
	background:#0066cc;
	padding: 10px;
}



.navDrawr .sub li:last-child a {
	border: none;
}


/* ナビの入れ子=== */
.navDrawr>ul>li>a {
	border-right: 1px solid #990000;
	text-align: center;
 }



.navDrawr>ul>li>a:hover {
	background-color: #3399ff;
}



.navDrawr .sub {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 9999;
}


.navDrawr .sub a {
	background:#990000;
	border-bottom: 1px solid #660000;
	padding: 10px 10px 10px 20px;
}


.navDrawr .sub a:hover {
	background: #FF6600;
}












@media only screen and (max-width: 768px) {
	#wrapper{
		overflow:hidden;
	}
	
	.navDrawr {	
		background-color: #666;
		position: fixed;
		width: 270px;
		top: 60px;
		bottom: 0;
		right: -270px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	body.menuOpen #wrapper{
		padding-top:60px;
	}
	
	
	
	.overlay {
		display: none;
		background-color: rgba(0,0,0,0.49);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	
	header {
		position:relative;
		height: 60px;
		padding:0;
	}
	
	
	body.menuOpen header{
		position: fixed;
		top:0;
		width: 100%;
	}
	header .headerTop{
		padding:inherit;
	}
	
	
	
	
	
	header .siteTitle a{
		margin-left: 20px;
		line-height: 60px;
	}
	
	
	
	
	
	.navDrawrBtn {
		text-align: right;
	}
	.navDrawrBtn span {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: block;
		width: 60px;
		height: 60px;
		cursor: pointer;
	}
	



	/* ロゴ 　アイコン*/	
	.navDrawrBtn span::before {
		font-family: FontAwesome;
		content: "\f0c9";
		font-size: 24px;
		color: #cc0000;
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
		line-height: 60px;
	}
	
	
	
	
	
	
	
	body.menuOpen .navDrawrBtn span::before {
		content: "\f00d";
	}
	.navDrawr a {
		position: relative;
	}
	.navDrawr a::after {
		position: absolute;
		top: 50%;
		margin-top: -10px;
		right: 15px;
		font-family: FontAwesome;
		content: "\f054";
	}
	.navDrawr>ul>li {
		float: none;
		width: auto;
	}
	.navDrawr>ul>li>a {
		text-align: left;
		border-right: none;
		border-bottom: 1px solid #990000;
	}
	.navDrawr .sub {
		position: static;
		display: block!important;
	}
}







ul.imgList{}
ul.imgList::after{
	display: table;
	line-height: 0;
	content: "";
	clear:both;
}
ul.imgList li{
	float: left;
	width: 31.33333333%;
	margin: 1%;
}
ul.imgList li .thumbnail{
	background-color: #FFF;
	padding: 20px;
	border:solid 1px #ccc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
ul.imgList li img{
	margin-bottom:10px;
}
ul.imgList li .caption{}
ul.imgList li .title{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}




@media only screen and (max-width: 480px) {
	ul.imgList li{
		float: none;
		width: 98%;
		margin: 1%;
	}
	
	
	
		
	
}