@charset "utf-8";

/* Tablets */
@media screen and (max-width: 1024px){ /* 1025px以上 -> PC */

	/* ドロワー用要素を表示する */
	.pure-toggle-label, .pure-overlay{
		display: block;
	}
	/* ドロワー最低高さ メニュー増やすごとに調整すること */
	#menu_wrap{
		min-height: 668px;
		/* ↑より長かった場合いっぱいに広げる */
		/* 7項目で616px */
		position: absolute;
		 top: 0;
		 bottom: 0;
		 left: 0;
		 right: 0;
	}

	#main{
		width: 98%;
		}
	#contents{
		width: 90%;
		min-height: 100%;
		}


	/* ヘッダー */
	HEADER{
		position: static;
		margin: 0;
		}

	/* ヘッダーTOP用 */
	#toppic{
	margin: 20px auto 0;
	padding: 0;
	background: url(../top/toppic.png) no-repeat; /* ロゴを背景に設定 */
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 200px;
}

	/* サイトロゴTOP用 */
	#sitetitle-top{
		margin: 25px auto 25px;
	}
	/* トップページの本文-ヘッダー間余白の調整 */
	/* ヘッダー高さ＋余白だけheightをとる */
	.menu_nav_top{
		margin-bottom: 0;
	}
	/* メインメニュー */
	#mmenu{
		position: absolute;
		 top: 80px;
		 left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex-basis: 60px; /* 縦幅（height） */
		width: 100%;
		over-flow: hidden;
		margin: 0;
		padding: 0;
	}
	#mmenu li{
		flex-grow: 0;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	#mmenu li a{
		color: #fff;
		display: block;
		font-family: 'Sorts Mill Goudy', 'Times New Roman', serif;
		font-size: 18px;
		text-decoration: none;
		text-align: left;
		border-top: 1px solid transparent;
		border-bottom: 1px solid #444;
		border-left: 2px solid transparent;
		width: 100%;
		margin: 0;
		padding: 10px 0 10px 24px;
	}
    /* 一番上だけborder追加 */
    #mmenu li:first-child{
        border-top: 1px solid #444;
    }
	#mmenu li:hover a, #mmenu li:active a, #mmenu_here{
		color: #fff;
		background: #444;
		border-top: 1px solid transparent;
		border-bottom: 1px solid #444;
		border-left: 2px solid #fff;
		transition: .2s;
	}
	/* アイコン系メニュー */
	UL#imenu{
		position: absolute;
		 bottom: 6px;
		 top: auto;
		 left: 0;
		 right: 0;
		margin: 0 auto; /* absolute + left,right:0 + margin:0 autoで左右中央寄せ */
		width: 230px; /* 300pxで290px */
		height: 140px;
		justify-content: space-around;
		}
	UL#imenu li{
		margin: 5px;
	}
	UL#imenu li a{
		width: 105px; /* 300pxで135px */
		height: 60px;
		background: transparent;
		border: 1px solid #666;
		border-radius: 0;
		color: #eee;
		font-size: 24px;
		line-height: 62px;
	}
	#imenu li a:hover{
		border: 1px solid transparent;
	}

	/* Page Top */
	.page_top{
		position: absolute;
		 bottom: 20px; /* 広告等あれば50pxなどにする */
		 right: 20px;
	}

	/* サムネイル */
	.thumblist{
		/* サムネイルリスト（ボックス） */
		width: 95%;
		margin: 0 auto;
	}
	.thumbnail{
		/* サムネイル */
		width: 32.2%;
		margin: 3px;
	}

	/* サムネイル */
	.thumblist-offline{
		/* サムネイルリスト（ボックス） */
		width: 95%;
		margin: 0 auto;
	}
	.thumbnail-offline{
		/* サムネイル */
		width: 32.2%;
		margin: 3px;
	}

	/* フッター */
	#analyzer{ width: 98%; }
	.tdftad{ width: 98%; }

}

/* SmartPhones */
@media screen and (max-width: 767px){ /* 768px以上 -> Tablet */

	#all{
		margin-top: 10px;
	}

	/* サイトロゴ */
	#sitetitle-top{
		margin-top: 55px;
	}
	#sitetitle{
		margin-top: 7px;
	}
	#sitetitle a{
		display: block;
		height: auto;
		width: 100%;
	}

	/* 更新履歴を表にする */
	.renewal-log{
		display: block;
	}
	.renewal-log DL{
		display: block;
		margin-bottom: 1em;
	}
	.renewal-log DT{
		margin: 0;
		padding: 0;
		display: block;
	}
	.renewal-log DD{
		margin: 0;
		padding-left:1em;
		display: block;
	}
	/* サイトマップを表にする */
	.sitemap{
		display: block;
	}
	.sitemap DL{
		display: block;
		margin-bottom: 1em;
	}
	.sitemap DT{
		padding-right: 0;
		display: block;
	}
	.sitemap DD{
		padding-left: 1em;
		display: block;
	}

	/* 等幅2カラム */
	.multicolumn{
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	.two_col{
		display: block;
		width: auto;
	}

	/* Page Top */
	.page_top{
		position: absolute; /* 最下部に固定 */
	}

	/* サムネイル */
	.thumblist{
		/* サムネイルリスト（ボックス） */
		width: 95%;
		margin: 0 auto;
	}
	.thumbnail{
		/* サムネイル */
		width: 48%;
	}

	.thumblist-offline{
		/* サムネイルリスト（ボックス） */
		width: 95%;
		margin: 0 auto;
	}
	.thumbnail-offline{
		/* サムネイル */
		width: 48%;
	}
}

@media screen and (max-width: 499px){
	/* サイトタイトル */
	#sitetitle{
		background: none;
	}
	#sitetitle a{
		pointer-events: none;
		cursor: default;
	}
	.thumbnail span.new:before, .thumbnail span.up:before{
		padding: 4px 8px;
		font-size: 12px;
	}
}

@media screen and (max-width: 499px) and (min-width: 400px){
	/* サムネタイトルサイズの調整 */
	.tc-title{
		font-size: 16px;
	}
	.tc-title-offline{
		padding: 4%;
		line-height: 1.3;
	}
}
@media screen and (max-width: 399px) and (min-width: 320px){
	/* サムネタイトルサイズの調整 */
	.tc-title{
		font-size: 14px;
	}
	.thumbnail{
		margin: 2px;
	}
	.thumbnail span.new:before, .thumbnail span.up:before{
		 top: 3px;
		 left: 3px;
	}
	.tc-title-offline{
		font-size: 12px;
		line-height: 1.2;
	}
}

/* さらに横幅が狭い場合 */
@media screen and (max-width: 319px){
	.thumbnail{
		/* サムネイル一行一個ずつ */
		width: 95.5%;
	}
	.thumbnail span.new:before, .thumbnail span.up:before{
		 top: 5px;
		 left: 5px;
		padding: 5px 10px;
		font-size: 14px;
	}
	.tc-title-offline{
		font-size: 12px;
		line-height: 1.2;
	}
}