/* ===============================
	index.html
==================================
	LayoutTop
---------------------------------- */

#LayoutTop{
	background-image: url(/theme/image/idx_top_hill.svg);
	background-position: right -3px top;
	background-repeat: no-repeat;

	section.eyeCatch{
		line-height: 1.7;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		min-height: 255px;
		padding: 0 2vw;

		h2{
			letter-spacing: 0.1em;
			margin-bottom: 0.3em;
		}
		p{
			margin-top: 0.5em;
		}
		.left{
			flex: 1 55%;
			background-color: rgba(255,255,255,0.7);
			min-width: 20em;
			border-radius: 0.5em;
			padding: 0.5em 1em;
		}
		.right{
			flex: 1 45%;
			height: 0;
		}

		/* font size */
		h2 span{ font-size: 0.85em; }
		h2{ font-size: 1.4em; }
		p { font-size: 0.9em; }
	}

	section.articles{
		display: flex;
		flex-wrap: wrap;

		article{
			background-color: rgba(90,90,90,0.1);
			flex: 1 14em;
			order: 1;

			h3:before{
				content: "▶";
				color: #43afb5;	
				vertical-align: baseline;
				padding-right: 0.5em;
			}
			.properties{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				time{
					font-weight: bold;
				}
				.tags{
					display: inline-block;

					a{
						color: #369;
						font-weight: bold;
						background-color: rgba(30,50,100,0.1);
						border: solid 1px rgba(30,50,100,0.1);
						border-radius: 1em;
						padding: 0.2em 0.7em 0.1em;
					}
					a+a{
						margin-left: 0.5em;
					}
				}
			}
		}
		article.notice{
			background-color: #e5c899;
			order: 0;
		}
		div.pagenator{
			background-color: rgba(90,90,90,0.1);
			flex: 1 14em;
			order: 2;

			nav ul{
				display: flex;

				li{
					margin: 0 0.3em;
				}
			}
		}

		/* font size */
		article h3{				font-size: 0.9em; }
		article p {				font-size: 0.9em; }
		article .properties{	font-size: 0.9em; }
		article .tags a{ 		font-size: 0.8em; }

		/* vertical layout */
		padding: 0 0 1em 1em;

		article,
		.pagenator{
			margin: 1em 1em 0 0;
			padding: 0.5em;
		}
		article{
			h3{ line-height: 1.3; }
			p { line-height: 1.7; }
			.properties{
				margin-bottom: 0.5em;
				time, .tags{
					margin-top: 0.5em;
				}
			}
		}
	}
}

/* -------------------------------
	LayoutMiddle
---------------------------------- */

#LayoutMiddle{
	background-color: rgba(146,204,52,0.5);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-left: 1em;
	padding-bottom: 1em;

	h2{
		display: none;
	}

	div{
		background-color: rgba(0,0,0,0.1);
		flex: 1 14em;
		margin: 1em 1em 0 0;
		padding: 0.5em 1em;

		h3{
			line-height: 1.3;
			text-align: center;
			padding: 0;
		}
		p{
			line-height: 1.7;
			margin: 0.5em 0 0;
		}
	}
	div.dummy{
		height: 0;
		min-width: 64.5%;
		margin: 0 1em 0 0;
		padding: 0 1em;
	}

	/* font size */
	div h3{ font-size: 0.9em; }
	div p { font-size: 0.9em; }
}

/* -------------------------------
	LayoutBottom
---------------------------------- */

#LayoutBottom{
	background-image: url("/theme/image/bg_message.png");
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0 4vw;

	section.message{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0 0 2em;

		h2{
			margin: 1em 0 0.6em;
		}
		p{
			margin: 0.5em 0;
		}
		.text{
			flex: 1;
			min-width: 20em;
		}
		.illust{
			flex: 1;
			text-align: center;
		}
	}

	section.thought{
		margin: 2em 0;
		border-top: solid 1px #5b8021;
		border-bottom: solid 1px #5b8021;
		padding-bottom: 1.5em;

		h2{
			margin: 1em 0 0.6em;
		}
		h3{
			margin: 1em 0;
		}
		p{
			margin: 0.5em 0;
		}
		li:before{
			content: "●";
			color: #92cc34;
			vertical-align: middle;
			padding-right: 0.5em;
		}
	}
	section.nav ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	/* font size */
	h2 span{ font-size: 0.85em; }
	h2{ font-size: 1.4em; line-height: 1.3; }
	p { font-size: 0.9em; line-height: 1.7; }
	li{ font-size: 0.9em; line-height: 1.7; }
}