/* スマホ対応試作 ver.3.0 by 行木敬 */


/* == 全体のレイアウト == */

/* -- ページ設定 -- */

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;		/* フォントサイズ 18だと少し大きい */
	line-height: 1.8;		/* 行間 1.6だと少し狭い */
	background: url("background-9999ff+aaaaff.png") #9999ff;
	background-attachment: fixed;
}

b {font-weight: bold;}


/* -- ヘッダー -- */

header {
	position: fixed;
	width: 100%;
	background-color: #333333;
}

header .inframe {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header nav ul {
	display: flex;
}

header nav ul a,p {
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

header nav ul a {color: #cccccc;}
header nav ul p {color: #666666;}

header nav ul a:link {color: #cccccc;}
header nav ul a:visit {color: #cccccc;}
header nav ul a:hover {color: #ffffff; background-color: #000000;}
header nav ul a:active {color: #cccccc;}


/* -- フッター -- */
footer {
	width: 100%;
	background-color: #333333;
	color: #ffffff;
	text-align: center;
}


/* -- メイン -- */

.main {
	max-width: 1140px;
	width: 100%;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	color: #333333;
}

.content {
	width: 720px;
	min-width: 720px;
	height: 100%;
	background-color: #ffffff;
	outline: 2px solid #666666;
}


/* -- サイドメニュー -- */

#menu {
	max-width: 400px;
	width: 100%;
	margin-top: 35px;
	margin-left: 10px;
	margin-right: 10px;
	/* この部分、本当はtop: 50px; left:20px; right:0 なのだが、
		外部読み込みするとなぜかずれるため	、数値もずらした */
}

#menu .box {
	background-color: #ffffff;
	outline: 2px solid #666666;
	margin-top: 20px;
	padding: 10px;
}

#menu .box h2 { 
	font-weight: bold;
}

#menu .box a.item {
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #333333;
	display: flex;
	align-items: flex-start;
	justify-content: normal;
}

#menu .box a.item:link {color: #333333;}
#menu .box a.item:visit {color: #333333;}
#menu .box a.item:hover {color: #000000; background-color: #ffffcc;}
#menu .box a.item:active {color: #666666;}

#menu .box a.item span.title {
	display: block;
	padding-left: 20px;
}

#menu .box a.item span.reffer {
	color: #666666;
}

#menu .box a.item span.thumbnail {
	display: block;
	min-width: 80px;
	min-height: 80px;
}

#menu .box a.item span.thumbnail img {
	width: 80px;
}

#menu .box hr {
	border-top: solid 2px #999999;
	margin: 0;
}


/* == コンテンツ部分 == */

/* -- 目次ページ -- */

.index-title {
	background-color: #666666;
	color: #ffffff;
}

.index-title .sec1 {
	height: 80px;
	position: relative;
	align-items: end;
}

.index-title .sec1 p {
	position: absolute;
	width: 100%;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	top: 45px;
	text-align: center;
}

.index-title .sec2 {
	width: 100%;
	display: flex;
}

.index-title .sec2 img {
	width: 100%;
	height: 42%;
	/* 本当はheigt:auto; でいいはずなのだが、
		古いSafariだと比率がおかしくなるので 42%指定にした */
}

.index-title .sec3 {
	height: 35px;
	position: relative;
	align-items: top;
}

.index-title .sec3 p {
	position: absolute;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	top: -10px;
	text-align: center;
}

.index-content {
	padding: 0 20px 0 20px;
	color: black;
}

.index-content a.item {
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #333333;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.index-content a.item:link {color: #333333;}
.index-content a.item:visit {color: #333333;}
.index-content a.item:hover {color: #000000; background-color: #ffffcc;}
.index-content a.item:active {color: #666666;}

.index-content a.item span.text {
	display: block;
	padding-right: 20px;
}

.index-content a.item span.title {
	display: block;
	font-weight: bold;
	font-size: x-large;
}

.index-content a.item span.thumbnail {
	display: block;
	min-width: 200px;
	min-height: 200px;
}

.index-content hr {
	border-top: solid 2px #333333;
	margin: 0;
}

.index-content .comment {
	border: 2px solid #666666;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right:	20px;
	padding-bottom:	20px;
}

.index-content .comment .title {
	font-weight: bold;
	padding-bottom:	20px;
}

.index-content .comment .text {
	margin: 0px;
	padding:	0px;
}

.index-content .comment img {
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	min-width: 200px;
	min-height: 200px;
}

.index-content .comment p {
	margin: 0px;
	padding:	 0 0 10px 0;
}


/* -- 記事ページ用 -- */

.article {
	position: relative;
	padding: 55px 20px 10px 20px;
}

.article h1 {
	font-size: xx-large;
	font-weight: bold;
	padding: 0;
	text-align: center;
}

.article .sub-title {
	width: 100%;
	font-size: larger;
	font-weight: bold;
	text-align: center;
}

.article .not-comp {
	width: 100%;
	background-color: yellow;
	color: red;
	font-weight: bold;
	text-align: center;
}


.article h2 {
	font-size: large;
	font-weight: bold;
	padding: 30px 0 0 0;
	border-bottom: 2px solid #ff8040;
}

.article h3 {
	font-weight: bold;
	padding: 10px 0 0 0;
}

.article .author {
	text-align: center;
	padding: 10px 0 10px 0;
	border-top: 4px solid #ff8040;
	font-weight: bold;
}

.article p {
	padding: 10px 0 0 0;
}

.article .image {
	text-align: center;
	color: #666666;
	padding: 20px 0 20px 0;
}

.article .image img {
	width: 100%;
	border: 3px solid #000000;
	box-sizing: border-box;
}

.article .comment {
	border: 2px solid #666666;
	margin-bottom: 20px;
	padding: 10px 20px 20px 20px;
}

.article table {
	width: 100%;
	border: 2px solid #333333;
	text-align: center;
}

.article th {
	border: 1px solid #333333;
	background-color: #cccccc;
}

.article tr {
	border: 1px solid #333333;
}

.article td {
	border: 1px solid #333333;
}


/* == スマホ対応 == */

/* -- 幅1040px以下　メニューが横から下へ移動 -- */

@media screen and (max-width: 1040px) {
	.main {
		max-width: 720px;
		min-width: auto;
		width: 100%;
		flex-wrap: wrap;
	}

	.content {
		max-width: none;
		min-width: auto;
		width: 100%;
	}

	#menu {
		max-width: none;
		min-width: auto;
		width: 100%;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		/* この部分、本当はtop: 20pxなのだが、外部読み込みすると
			なぜかずれるため、数値もずらした */
}

	#menu .box {
		padding: 20px;
	}
}


/* -- 幅720px以下　文字サイズや余白の変更 -- */

@media screen and (max-width: 720px) {
	.index-content {padding-left: 10px; padding-right: 10px;}
	.index-content a.item span.text {padding-right: 10px;}
	.index-content a.item span.title {font-size: large;}
	.index-content .comment {padding-left: 10px; padding-right: 10px;}
	.article {padding-left: 10px; padding-right: 10px;}
	.article h1 {font-size: x-large;}
	.article h2 {font-size: medium;}
	.article .comment {padding-left: 10px; padding-right: 10px;}
}