/* INDEX MAIN
================================== */

#IndexMain{
	width: 900px;
	margin: auto;

	.eye{
		position: relative;
		margin-top: 36px;
		border: solid 1px #BFBFBF;

		h1{
			height: 225px;
			margin: 0;
			padding: 0;
		}
		ul{
			list-style-type: none;

			position: absolute;
			top: 0;
			right: 0;
			margin: 0;
			padding: 0;
		}
		li{
			margin: 8px;
			border: solid 1px #BFBFBF;
		}
		a{
			display: block;
			width: 252px;
			height: 63px;
			overflow: hidden;
		}
		a img{
			min-width: 200%;
		}
		a img:hover{
			margin-left: -252px;
		}
	}

	.eye + ul{
		list-style-type: none;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin: 9px 0 36px;
		padding: 0;

		a{
			display: block;
			width: 225px;
			height: 144px;
			overflow: hidden;
			border-width: 1px 0 1px 1px;
			border-style: solid;
			border-color: #BFBFBF;
		}
		li:last-of-type a{
			border-width: 1px;
		}
		a img{
			min-height: 200%;
		}
		a img:hover{
			margin-top: -143px;
		}
	}
}

/* INDEX SUB
================================== */

#IndexSub{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	row-gap: 1rem;
	width: 900px;
	margin: 36px auto 72px;

	h2{
		background-image: url(/theme/image/ctr_border_h.png);
		background-position: left bottom;
		background-repeat: no-repeat;
		font-size: 1.1rem;
		font-family: serif;
		color: #333;
		letter-spacing: 0.15em;

		margin: 0 0 0.5rem;
		padding: 0 0 0.5rem;
	}
	ul{
		font-size: var(--font-s);
		list-style-type: none;
		margin: 0;
		padding: 0;

		li{
			background-image: url(/theme/image/ctr_circle.png);
			background-repeat: no-repeat;
			background-position: 5px center;
			padding-left: 1rem;
		}
	}

	.kuyo{
		h3{
			font-size: var(--font-s);
			vertical-align: top;
			display: inline-block;
			width: 63px;
		}
		ul{
			vertical-align: top;
			display: inline-block;
			width: 369px;
			margin: 0 0 1rem;

			li{
				display: inline-block;
				margin-left: 0.75rem;
			}
		}
	}
	.news{ 
		li{
			background-image: url(/theme/image/ctr_triangle.png);
		}
	}
	.spec{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 9px;

		h2{
			grid-column: 1/4;
		}
		p{
			font-size: var(--font-s);
		}
	}
	.inqu{
		p{
			font-size: var(--font-s);
		}
	}
}