@charset "utf-8";
/* ---------------------------------------------
	ブレイクポイント：~1400px
--------------------------------------------- */

/* @media (max-width: 1400px) {

} */

/* ---------------------------------------------
	ブレイクポイント：~1200px
--------------------------------------------- */

@media (max-width: 1200px) {

	/* body[id="story"] {

		:root {
			--headH: 144px;
		}
	} */

	body[id="show"] {

		nav {
			height: 4.2vh;
			max-height: 4.2vh;
		}
	}
}

/* ---------------------------------------------
	ブレイクポイント：~992px
--------------------------------------------- */

/* @media (max-width: 992px) {


} */

/* ---------------------------------------------
	ブレイクポイント：~768px

	@media (max-width: 768px) {

	:root {
	--page-top: 10.0cqw;
}

}
--------------------------------------------- */



/* ---------------------------------------------
	ブレイクポイント：~576px
--------------------------------------------- */

@media (max-width: 576px) {

	header {
		height: 20vh;
	}

	.container {
		border-left: none;
		border-right: none;
	}

	.character {
		flex-flow: row wrap;
		/* gap: 5.0cqw; */
		justify-content: center;

		li {
			width: 72.0cqw;
			grid-template-rows: 60cqw 6.0rem auto;
		}
	}

	/* .modal {
		min-width: 100%;
		width: auto;
		max-width: 100%;
		min-height: 320px;
		height: auto;
		max-height: auto;
	}

	.modal img {
		max-width: 64px;
	} */

	/* .yesorno {
		display: flex;
		flex-flow: column wrap;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	} */

	/* .modal a {
		display: block;
		margin: 0.25rem 0;
		width: 100%;
		height: 40px;
		line-height: 37px;
		font-size: 1.5rem;
		color: #ffffff;
		background-color: #d9333f;
		border: #d9333f 2px solid;
		border-radius: 1.75rem;
		font-family: 'Annie Use Your Telescope';
	} */

	body[id="show"] {

		nav {
			min-height: 100%;
			height: 100%;
			max-height: 100%;

			#tab {
				li {
					writing-mode: vertical-rl;

					span {
						font-size: 7.0cqw;
					}
				}
			}
		}
	}
}