/* つどい用　CSS */


.hierarchy {
	float: left;
	margin-left: 10px;
	text-align: left;
	font-size: 12px;
}


.notice { font-size: 12pt; }

.quote blockquote {
	padding: 10px;
	background-color: #fcfcfc;
	line-height: 2em;
}

.info blockquote {
	margin: 20px auto;
	width: 85%;
	text-align: left;
	font-size: small;
	background-image: url(../images/blockquote2.gif);
	background-repeat: no-repeat;
	background-position: 2% 6%;
	padding: 10px 20px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	color: #212121;
}

.info .origin {
	text-align: right;
	margin-bottom:0;
	font-size: x-small;
	color: #c0c0c0;
}

.howto {
	position: relative;
	widht: 300px;
	padding-top: 10px;
	margin-left:180px;
	text-align: left;
	font-size: 12px;
}

.map {
	position: relative;	/*絶対配置*/
}

/*ボックス内のアイコン*/
.map .map-icon {
	font-size: 0.6rem;
	background: #ff0000;
	color: #fff;
	width: 50px;
	line-height: 50px;
	border-radius: 50%;		/*角丸のサイズ*/
	text-align: center;
	position: absolute;		/*.mapに対して絶対配置*/
	left: -10px;			/*listブロックに対して左からの配置場所指定*/
	top: -10px;				/*listブロックに対して上からの配置場所指定*/
}

/*figure画像*/
.map figure {
	margin-bottom: 2rem;	/*下に空けるスペース。2文字分。*/
}


/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.map-half .map {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*画像ブロック共通*/
.map-half .image-l, .map-half .image-r {
	margin-left: 1rem;margin-right: 1rem;	/*画像の左右に1文字分のスペースを空ける*/
	position: relative;						/*子要素のアイコンを絶対配置する為の設定*/
}
.map-half .image-l img, .map-half .image-r img {
	border-radius: 30px;					/*角丸指定。*/
	box-shadow: 0 0 8px rgba(0,0,0,0.1);	/*2px 2px rgba(0,0,0,0.1)*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*２カラムを囲むブロック*/
		.map-half .map {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.map-half .image-l, .map-half .image-r {
			width: 50%;			/*幅「テキストブロック」のwidthと調整*/
		}
		
		/*画像を右に配置する場合*/
		.map-half .image-r {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.map-half .image-l {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.map-half .text{
			width: 50%;			/*幅「画像ブロック共通」のwidthと調整*/
		}

	}/*画面幅900px以上の追加指定ここまで*/