@charset "utf-8";
@import url(quiz-detail.css) layer(detail);
@layer detail,top;

/* トップページ用レイヤー */
@layer top{
	body{
		display: grid;
		grid-template-areas: "header"
		                     "main"
		                     "footer";
		grid-template-rows: auto 1fr auto;
	}
	header{
		grid-area: header;
	}
	main{
		grid-area: main;
		display: grid;
		place-content: center center;
	}
	footer{
		grid-area: footer;
	}

	/* トップページ */

	header{
		margin-bottom: clamp(30px,20vw,180px);
	}
	.main_header{
		height: 260px;
		position: relative;
		/* place-content: start center; */
		background-image:
			url(../../img/top/title_bg.png),
			linear-gradient(0deg, transparent calc(100% - 1px), #eaebeb calc(100% - 1px)),
			linear-gradient(90deg, transparent calc(100% - 1px), #eaebeb calc(100% - 1px));
		background-repeat: no-repeat,repeat,repeat;
		background-position: center center,left top,left top;
		background-color: #fff;
		background-size: auto auto,16px 16px,16px 16px;
	}
	h1{
		margin-top: 50px;
	}

	main{
		padding-block: clamp(30px,10vw,60px);
	}

	/* リンク */
	.level{
		padding-inline: 20px;;
	}
	.level ul{
		margin: 0px;
		padding: 0px;
		list-style: none;
		display: grid;
		grid-template-columns: auto auto auto;
		justify-content: center;
		gap: 5vw;
	}
	.level ul :where(a,img){
		display: block;
	}
	.level ul a img{
		max-width: 100%;
		height: auto;
		transition: transform 0.15s ease;
		transform-origin: center center;
	}
	.level ul a:hover img{
		transform: scale(1.125);
	}

	@media (width < 1080px){
		.main_header{
			background-size: 100% auto,16px 16px,16px 16px;
		}

		@media (width < 768px){
			header{
				margin-bottom: 0px;
			}
			h1{
				margin-top: 0;
			}
			.main_header{
				height: auto;
				padding: 20px 20px;
			}
		}
	}



}