@media (max-width: 1024px) {
	/* タブレット以上のスタイル */
	#home{
		#top{
			grid-template-columns: 25vw 75vw;
			height: 100lvh;
		}
		.display-block{
			width: 100%;
		}
		.indicator-wrap{
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto;
			height: auto;
			top: 0;
			align-content: start;
			#prev{ grid-column: 1/2; grid-row: 1/2; justify-self: end;}
			#genre-indicator{ grid-column: 2/3; grid-row: 1/2; }
			#next{ grid-column: 3/4; grid-row: 1/2; }
			#genre-titles{ grid-column: 1/4; grid-row: 2/3; }
			.genre-titles{ 
				display: none;
			}
		}
		.read-about-this{
			position: relative;
			margin: 0;
		}
	}

}

@media (max-width: 767px) {
	/* スマホ以下のスタイル */
	body{
		min-width: 300px;
		overflow-x: hidden;
	}
	#index{
		.attention{
			width: 90vw;
			padding: 1rem;
			box-sizing: border-box;
		}
		.enter{
			border-radius: 2rem;
		}
	}

	#home{
		#top{
			grid-template-columns: 30vw 70vw;
			padding-right: 0;
			width: 100%;
			height: 100lvh;
			.home-nav{
				grid-row: 3/4;
				bottom: 50%;
				left: -40%;
				margin-right: unset;
				.contents-list li {
					font-size: 1.5em;
				}
			}
			.site-name{
				top: 0;
				left: 1rem;
				grid-column: 1 / 3;
				max-width: max-content;
				h1{ font-size: 3rem; }
			}
			.display-block{
				grid-column: 1/3;
				grid-row: 1/3;
				width: 100vw;
				height: 75vh;

				.illust-slide{
					img{ width: 100vw; }
				}
			}
			.indicator-wrap{
				display: grid;
				grid-template-columns: auto auto auto;
				grid-template-rows: auto auto;
				height: auto;
				top: 0;
				align-content: start;
				#prev{ grid-column: 1/2; grid-row: 1/2; justify-self: end;}
				#genre-indicator{ grid-column: 2/3; grid-row: 1/2; display: none}
				#next{ grid-column: 3/4; grid-row: 1/2; }
				#genre-titles{ grid-column: 1/4; grid-row: 2/3; }
				.genre-titles{ 
					display: none;
				}
			}
		}
		.read-about-this{
			position: relative;
			margin: 0;

			h2{display: none;}

		}
		.read-about-this::before{
			bottom: -1px;
		}
		.slide-in{ width:85vw; }
		/*#me .collapsible-content.expanded{ max-height:24rem; }*/
		/*#bookmarks.collapsible-content.expanded{ max-height: 364px; }*/
		#me .mmz{
			padding: 3rem;
			.mmz-icon{
				top: -5rem;
			}
		}
		#links{
			.link-here{
				padding: 3rem;
			}
		}
		#bookmarks,
		#contact{
			ul{
				gap: 0.2rem 1rem;
				flex-flow: wrap;
			}
		}
	}
	.page-nav{
		.page-nav-box{
			.page-nav-list{
				flex-direction: column;
				align-items: center;
				li{
					width: 12rem;
					text-align: left;
				}
			}
		}
	}

	#creation-contents{
		.tab{
			flex-flow: wrap;
			gap: 0.5rem 0.5rem;
			padding: 1rem 0;
			.genre-tab{
				width: 4rem;
				border: 1px solid #bbbbbb;
				border-radius: unset;
				background: unset;
			}
			.genre-tab.is-active{
				background: #cbcbcb9c;
				top: 0;
				border-image: unset;
			}
		}
		#switch-contents{
			min-width: 300px;
			.contents[data-genre-scope="outline"]{
				width: auto;
				margin: 1rem;
			}
			.trim{
				width: 100%;
				height: 5rem;
				img{
					-webkit-transform: translate(-30%, -30%) scale(0.75);
					-ms-transform: translate(-30%, -30%) scale(0.75);
					transform: translate(-30%, -30%) scale(0.75);
				}
			}
		}
	}

	#events{
		.circle, .next-join, .events-list {
			margin-left: unset;
		}
	}
	main#offline-contents {
		width: 95vw;
		.books{
			display: flex;
			flex-direction: column;
			.items{
				display: flex;
				flex-direction: column;
				grid-template-columns: unset;
				grid-template-rows: unset;
			}
		}
		.plain-books{
			flex-direction: column;
			align-items: unset;
			.plain-thx{
				margin-left: 1rem;
			}
			.plain-list{
				margin: unset;
			}
		}
	}


}