/*
----------------------------------------------------------------
	M O B I L E
	画面幅が狭い端末(スマホ)向けの上書き。PC表示には影響しない。
---------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
	}

@media screen and (max-width: 767px) {

	body {
		font-size: 14px;
		-webkit-text-size-adjust: 100%;
		}

	/* S T R U C T U R E */

	#main,
	#content {
		width: auto;
		float: none;
		}

	#content {
		margin: 0 12px 2px;
		}

	#col1 {
		float: none;
		}

	/* H E A D E R */

	#main h1 {
		font-size: 34px;
		line-height: 44px;
		margin: 0 12px 2px;
		padding: 8px 0;
		}

	#main h1 img {
		width: 26px;
		vertical-align: middle;
		}

	/* E N T R Y  B O D Y */

	#content pre {
		margin: 0 0 20px;
		font-size: 15px;
		line-height: 1.7;
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-wrap: anywhere;
		}

	#content p,
	#comments p,
	#content ul,
	#content ol {
		margin-left: 0;
		margin-right: 0;
		}

	#content blockquote {
		margin-right: 0;
		}

	/* P O S T  M E T A (日付・タグ) */

	#post-meta-head,
	#post-meta-navi {
		float: none;
		margin: 8px 12px;
		}

	#post-meta-top {
		float: none;
		height: auto;
		margin: 0 12px 12px;
		}

	#post-meta-top ul {
		width: auto;
		}

	#post-meta-top ul li,
	#post-meta-top ul .date,
	#post-meta-top ul .cats,
	#post-meta-top ul .arch {
		position: static;
		width: auto;
		left: auto;
		border-left: none;
		margin: 0;
		padding: 8px 0 0;
		}

	#post-meta-top ul .date a {
		display: inline-block;
		}

	#post-meta-top ul .cats {
		padding-top: 4px;
		}

	#post-meta-top ul .cats span {
		font-size: 15px;
		}

	#post-meta-bott {
		height: auto;
		margin: 0 12px;
		}

	#post-meta-bott ul {
		width: auto;
		}

	#post-meta-bott ul li {
		position: static;
		width: auto;
		left: auto;
		border-left: none;
		}

	/* F O R M S (管理画面) */

	textarea,
	input[type=text] {
		width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* iOSの自動ズーム防止 */
		}

	/* 記事中の画像・グリッド幅指定 (.one〜.eight, layout.erb の .five) */

	#content .one, #content .two, #content .three, #content .four,
	#content .five, #content .six, #content .seven, #content .eight {
		max-width: 100%;
		}

	#content .five,
	#content .left.inset {
		margin-left: 0;
		}

	/* E X T R A */

	#twitter_box,
	#twitter_box_l {
		width: auto;
		left: 0;
		}

	#footer {
		width: auto;
		}
}