/* GLOBAL VARIABLES
=================================== */
:root{
	--font-xl: 1.7rem; /* page, category h1 */
	--font-xx: 2.0rem; /* page, category h2 */
	--font-l:  1.5rem; /* article h1 */
	--font-ml: 1.3rem; /* article h2 */
	--font-m:  1.0rem; /* 本文 */
	--font-ms: 0.9rem; /* メニューアイテム */
	--font-s:  0.8rem; /* 文構造 */
	--font-xs: 0.7rem; /* メタ情報 */
}

/* BASE ELEMENT
=================================== */
body{
	margin: 27px auto;
}

a:link{
	color: #011E57;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a:visited{
	color: #011E57;
	text-decoration: none;
}

/* SITE HEADER
=================================== */
#SiteHeader{
	display: grid;
	grid-template-columns: auto 1fr;

	width: 900px;
	margin: 0 auto;

	nav ul{
		text-align: right;
		line-height: 1;
		list-style-type: none;

		margin: 0;
		padding: 18px 0 0;

		li{
			display: inline-block;
			overflow: hidden;
			margin: 0 0 0 18px;
			padding: 0;
		}

		li.i1{ width: 137px; }
		li.i2{ width: 101px; }
		li.i3{ width: 101px; }
		li.i4{ width: 101px; }
		li.i5{ width: 137px; }
		li.i6{ width: 101px; }
		li.i7{ width: 101px; }
		li.i8{ width: 101px; }
		li.i9{ width: 136px; }


		li.i1:hover img{ margin-left: -135px ;}
		li.i2:hover img{ margin-left: -99px ;}
		li.i3:hover img{ margin-left: -99px ;}
		li.i4:hover img{ margin-left: -99px ;}
		li.i5:hover img{ margin-left: -135px ;}
		li.i6:hover img{ margin-left: -99px ;}
		li.i7:hover img{ margin-left: -99px ;}
		li.i8:hover img{ margin-left: -99px ;}
		li.i9:hover img{ margin-left: -135px ;}

		li a{
			display: inline-block;
			width: 100%;
		}
		li img{
			min-width: 200%;
		}
	}

}

/* SITE FOOTER
=================================== */

#SiteFooter{
	color: #333;
	min-width: 900px;
	background-image: url(/theme/image/foot_bg.png);
	background-position: 0 0;
	background-repeat: repeat-x;

	.main{
		width: 900px;
		margin: auto;
		padding: 18px 0;

		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 1.0rem;
	}

	.contact{
		h2{
			font-size: var(--font-m);
			margin: 0;
			padding: 0;
		}
		ul{
			list-style-type: none;
			font-size: var(--font-s);
			padding: 0;

			li{
				margin: 9px 0;
				border-width: 1px 0 0;
				border-style: solid;
				border-color: #BFBFBF;
				padding: 9px 0 0;
			}
			li:first-child{
				border: none;
			}
		}
	}
	.message{
		p{
			font-size: var(--font-m);
			font-weight: bold;
			text-align: center;
			padding-bottom: 1rem;
		}
	}
	.copy{
		font-size: var(--font-s);
		text-align: center;
		grid-column: 1/4;
		margin: 1em 0 0.5em;
	}
}