*{
margin:0;
padding:0;
margin-block-end:0;
}

/* ■■■■全体の構成■■■■ */
	html {
		/* scroll-behavior: "smooth" */
		height: 100%;
	}

	body {
		background-color: #BBB;
		max-width: 1000px;
		min-height: 100%;
		margin:auto;  /* 中央よせ */
		font-family: 'メイリオ', 'Meiryo', sans-serif;

		/* 中身を縦に並べる */
		display: flex;
		flex-direction: column;  /* 縦 */
	}

	header{
	}

	.contents{
		/* .sideMenuAreaと.mainContentsAreaを2カラム */
		display: flex;
		flex-direction: row;  /* 横（デフォルト値・省略可） */
		justify-content: center; 

		flex: 1; /* 内容が少なくてもフッター領域まで伸びる */
	}

	.sideMenuBtn{
		display:none;
	}

	@media all and (-ms-high-contrast: none){
		.contents{
			flex: none; /* IEだとバグるので上書き */ 
		}
	}

	.sideMenuArea{
		background-color: #fff;
		width: 200px;
		margin: 10px;
		padding: 10px;
	}

	.mainContentsArea{
		background-color:#fff;
		width:70%;
		margin:10px 10px 10px 0px;  /* 左はメニューと重なるから0 */
		padding:5px 20px 20px 20px;

		line-height:1.8;
	}


	footer{
		text-align:center;
	}


/* ■■■■共通パーツ■■■■ */
	h1 {
		font-size:29px;
		margin-bottom:-10px;
		margin-left:12px;
	}
	h1 a {
		color: #444;
		text-decoration: none;
	}
	h1 a:hover {
		color: #eee;
	}

	input[type="submit"] {
		padding:1px 3px 1px 3px;
	}

	/* ページTOPへ */
	.pagetop {
		position: fixed;
		background: #999;
		height: 40px;
		width:  40px;
		text-align: center;
		bottom: 40px;
		right:  20px;
		border-radius:50%;
		cursor: pointer;
	}
	.pagetop a{
		position: relative;
		top:5px;
		font-size:20px;
	}
	
	/* tweet */
	.tweet {
		height: 22px;
		width:  55px;
		text-align: center;
		background: #5bcaff;
		margin-top:5px;
		margin-bottom:10px;
	}
	.tweet a {
		position: relative;
		top:0px;
		color: #fff;
		text-decoration: none;
	}
	
	/* ツイッター埋め込み */
	.timeline-Header-title {
		font-size:12px!important;
	}
	.twi{
		margin-top:10px;
	}

/* ■■■■VFツリー■■■■ */
	.vfspace{
		/*background-color: #888;*/
		height:100px;
		width:15px;
	}
	.vfimg>p{
		/*background-color: #888;*/
	}

/* ■■■■拍手■■■■ */
	.clapImg {
		width:400px;
	}

/* ■■■■ブログ一覧（フロント)■■■■ */
	
	.blogTitle{
		font-size:24px;
		background: #eee;
	}
	h2{
		font-size:24px;
		background: #eee;
	}
	
	.blogTime{
		font-size:12px;
		text-align:right;
		right:0;
	}
	.blogText{
		font-size:15px;	
		margin: 5px 3px 30px 3px;
	}
	.blogText img{
		max-width :300px;
	}

	.blogSeparate{
		height: 1px;
		background: #bbb;
	}
	.timeSeparate{
		height: 0px;
		background: #fff;
	}

	.blog_pager{

		display: flex;
		flex-direction: row;  /* 横（デフォルト値・省略可） */
		justify-content: space-between; 
	}

	/* 画像全般*/
	.blogText img{
        width: 300px; /* これより大きくならない */
        max-width: 100%;
        height: auto;
    }




/* ■■■■スマホ向けメディアクエリ■■■■ */
	@media
	only screen and (max-width: 650px) {

		input, button{
		  -webkit-appearance: none;
		}

		body {
			font-size:14px;
		}
		.contents {
			display: block;
		}
		.sideMenuBtn{
			border: 1px solid #000;
			background-color: #e9e9ed;
            width: 20px;
            height: 20px;
            margin:10px 0px 0px calc(100% - 30px);
            display: block;
            z-index:101;
            position: relative;
		}
		.hide{
		   /* font-size:14px;*/
		}
		.sideMenuArea{
			margin-top:-10px;
			width: auto;
			display: none;
			height:0px;
			z-index:100;
		}
		@keyframes show{
		    0%{
		        opacity: 0;
		        height:0px;
		    }
		    30%{
		        opacity: 0;
		        height:300px;
		    }
		    100%{
		        opacity: 1;
		        height:100%;

		    }
		}
		.sideMenuArea.show{
		    animation: show 1s linear;
		    animation-fill-mode:forwards;
			display:block;
		}
		@keyframes hide{
		    0%{
		        opacity: 1;
		        height:200px;
		    }
		    30%{
		        opacity: 0;
		        height:0px;
		    }
		    100%{
		        opacity: 0;
		        height:0px;
		    }
		}
		.sideMenuArea.hide{
		    animation: hide 1s linear;
		    animation-fill-mode:forwards;
		}

		.twi_block{
			display:none;
		}

		.categoryL{
			margin-bottom: 10px;
		}
		.mainContentsArea{
			width: auto;
			margin: 10px 10px 10px 10px;
		}
		.clapImg {
			width:300px;
		}
		.sitemapSeparate{
			margin-bottom: 10px;
		}
		.sitemapTitle{
			margin-bottom: 10px;
		}
		.pagetop {
			bottom: 30px;
		}
		.pagetop a{
			top:6px;
		}
		.textLink {
			line-height:30px;
		}
	}

/* Safari 7.1-8.0 */
	_::-webkit-full-page-media, _:future, :root .pagetop a {
		top:8px;
	}

/* Safari 6.1-7.0 */
	@media screen and (-webkit-min-device-pixel-ratio:0)
	  and (min-color-index:0) {
		.pagetop a {
			(; top:8px;)
		}
	}