body {
	background-color: black;
	height: 100svh;
	width: 100%;
	display: grid;
	padding: 16px;
	grid-template-rows: 1fr max-content max-content;
	grid-template-columns: 100%;
	gap: 8px;

	align-content: center;
}

#menu {
	z-index: 99;
}

#posterWrap {
	grid-row: 1;
	grid-column: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#poster {
	position: relative;
	aspect-ratio: 297 / 210;
	width: 100%;
	max-height: 100%;
	align-self: flex-end;
	display: grid;
	place-items: center;
}

#poster > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
}

.p-poster > img:last-of-type {
	top: 0;
}

/*タッチエリア*/
#touchZone {
	z-index: 9;
}

#touchZone polyline,
#touchZone polygon {
	fill-opacity: 0;
	stroke-width: 0.5;
	stroke: var(--yellow-line);
	stroke-opacity: 0;
	cursor: pointer;
	display: none;
}

body:has(#message [data-partid='C'].is-here) #touchZone polygon[data-partid='C-01'],
body:has(#message [data-partid='D'].is-here) #touchZone polygon[data-partid='D-01'],
body:has(#message [data-partid='E'].is-here) #touchZone polygon[data-partid='E-01'],
body:has(#message [data-partid='F'].is-here) #touchZone polygon[data-partid='F-01'] {
	display: block !important;
	stroke-opacity: 1 !important;
}

@media (hover: hover) {
	#touchZone *[data-partid]:hover {
		stroke-opacity: 1 !important;
	}
}

/*touch area*/
#posterMask {
	z-index: 1;
	opacity: 0;
}

#posterMask:has(.done),
body:has(.ready) #posterMask,
body:has(div[data-partid].is-here) #posterMask{
	opacity: 1;
}

body:not(:has(.p-wrap.is-active)) #navi {
	display: none;
}

#touchhere {
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	width: auto;
	aspect-ratio: 297 / 210;
	transform: translateX(-50%);
	z-index: 9;
	pointer-events: none;
}

#touchhere::before {
	content: '';
	position: absolute;
	width: min(5%, 32px);
	padding-bottom: min(5%, 32px);
	opacity: 0;
	background: center/60% url(/source/icons/icon-right.svg) no-repeat var(--yellow-color);
	animation: .8s infinite alternate heresign;
}

@keyframes heresign {
	0% {
		transform: translateX(-10%);
	}

	100% {
		transform: translateX(10%);
	}
}

@keyframes heresign2 {
	0% {
		transform: translateX(-50%) translateY(-10%);
	}

	100% {
		transform: translateX(-50%) translateY(10%);
	}
}

body:has(#message .is-here[data-partid]) #touchhere::before {
	opacity: 1;
}

body:has(#message [data-partid='D'].is-here) #touchhere::before {
	right: 30%;
	top: 50%;
}

body:has(#message [data-partid='C'].is-here) #touchhere::before {
	left: 30%;
	top: 50%;
	background-image: url(/source/icons/icon-left.svg);
}

body:has(#message [data-partid='E'].is-here) #touchhere::before {
	left: 50%;
	bottom: 16%;
	transform: translateX(-50%);
	background-image: url(/source/icons/icon-down.svg);
	animation-name: heresign2;
}

body:has(#message [data-partid='F'].is-here) #touchhere::before {
	left: 50%;
	bottom: 13%;
	transform: translateX(-50%);
	background-image: url(/source/icons/icon-down.svg);
	animation-name: heresign2;
}


#poster.focuscenter::after {
	--a1: 0;
	--a2: 0.5;

	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%);
	background-position: top 50% center;
    animation: areashow 5s ease-in-out forwards;
}

@keyframes areashow {
    0% {
        background-size: 100%;
		opacity: 0;
    }
    10% {
        background-size: 100%;
		opacity: 1;
    }
    50% {
        opacity: 1;
        background-size: 100%;
    }
    100% {
        opacity: 0;
        background-size: 500%;
    }
}
body:has(#message .ready) #touchhere {
	pointer-events: auto !important;
	z-index: 99 !important;
}

body:has(#message .ready) #touchhere::after {
	content: '宇宙図をタッチしてスタート';
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	animation: 1.5s ease-in-out infinite alternate partsign;
}

#step {
	grid-row: 2;
	grid-column: 1;
	width: 100%;
	font-size: var(--fs-xs);
	display: flex;
	gap: 3em;
	margin: auto;
	margin-top: 2rem;
	max-width: 61em;
}

#step li {
	position: relative;
	opacity: 0.3;
	white-space: nowrap;
}

#step li + li::before {
	content: '';
	height: 1px;
	width: 2em;
	position: absolute;
	left: -2.5em;
	bottom: 0.6em;
	background-color: white;
}

body #step li:nth-of-type(1) {
	opacity: 1;
}

body:has(#message [data-partid='D'].is-here) #step li:nth-of-type(-n+2),
body:has(#message [data-partid='C'].is-here) #step li:nth-of-type(-n+3),
body:has(#message [data-partid='E'].is-here) #step li:nth-of-type(-n+4),
body:has(#message [data-partid='F'].is-here) #step li:nth-of-type(-n+5) {
	opacity: 1;
}

body:has(#message > div:last-of-type.is-here) #step li {
	opacity: 0;
}

#message {
	grid-row: 3;
	grid-column: 1;
	max-width: 46em;
	min-height: 14svh;
	margin: auto;
	display: grid;
	font-size: var(--fs-m);
}

#message p {
	line-height: 1.8em;
}

#message > * {
	grid-area: 1/1;
	opacity: 0;
	pointer-events: none;
}

#message .is-here {
	opacity: 1;
	pointer-events: auto;
}

#message:has(>div:last-of-type.is-here) {
	transform: translateY(calc(-16px - var(--fs-xs)*1.5));
}

#message > div:has(.text-btn) {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	text-align: center;
	justify-content: center;
	align-items: center;
}

#message .text-btn {
	min-width: 16em;
	max-height: fit-content;
	text-align: center;
	padding: 0.75em 1em;
}

#message > div:has(.text-btn) {
	flex-basis: 100%;
}

body:not([data-mode='end']) #touchArea polygon {
	animation: 1.5s ease-in-out infinite alternate partsign;
}

@keyframes partsign {
	0% {
		opacity: 0.2;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

#activePoster image {
	pointer-events: auto;
	cursor: pointer;
}

#mask > * {
	fill: rgb(150, 150, 150);
	transition: 0.3s;
}

#posterMask rect.done ~ * {
	fill: black !important;
}

#posterMask .done {
	fill: black;
}

#posterMask .active {
	animation: touchhere 1s infinite alternate;
}

@keyframes touchhere {
	from {
		fill: rgb(200, 200, 200);
	}

	to {
		fill: black;
	}
}

.p-page[data-p='E-03_1'] {
	min-height: max-content;
}

#reader:has(.p-page[data-p='E-03_1'].is-show) .i-scroll,
.p-list li[data-p='E-04'],
.p-section[data-p='E-04'] {
	display: none;

}

@media only screen and (max-width: 768px) {

	body {
		grid-template-rows: max-content max-content 1fr;
		padding: 6rem 5vw 3em 5vw;
	}

	#step,
	#message > div:last-of-type {
		margin-top: 2em;
	}

	#step {
		font-size: var(--fs-s);
	}

	#step li {
		opacity: 0;
		display: none;
	}

	#step li::before {
		display: none;
	}

	#touchhere::before {
		width: 8vw;
		padding-bottom: 8vw;
	}

	body:has(#message > div:first-of-type.is-here) #step li:nth-of-type(1),
	body:has(#message [data-partid='D'].is-here) #step li:nth-of-type(2),
	body:has(#message [data-partid='C'].is-here) #step li:nth-of-type(3),
	body:has(#message [data-partid='E'].is-here) #step li:nth-of-type(4),
	body:has(#message [data-partid='F'].is-here) #step li:nth-of-type(5) {
		display: block;
	}

	#message .text-btn {
		min-width: 98%;
		padding: 1em 1em;
		display: block;
	}

	#message {
		min-height: 100%;
	}

	#message > div:has(.text-btn) {
		height: 100%;
		flex-direction: column;
		text-align: left;
	}

	#message > div:last-of-type .text-btn:first-of-type {
		margin-top: auto;
	}
}