html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#main {
	--h: calc((100svh - var(--pad-def) - var(--corner) - var(--scorll-b) - var(--pad-b))*0.5);
	--columns: var(--pad-side) 1fr var(--pad-side);
	--rows: var(--pad-def) var(--h) var(--corner) var(--h) calc(var(--scorll-b) + var(--pad-b));

	width: 100%;
	height: 100svh;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: auto;
	background-color: var(--color-bk);
}

.page,
.card,
.illust,
.sticky {
	overflow: visible;
	box-sizing: border-box;
}

.page {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: var(--columns);
	grid-template-rows: var(--rows);
	scroll-snap-align: center;
}

.page h2 {
	font-size: var(--fs-xl);
	transform: translateY(-0.5em);
}

.card {
	grid-column: 2;
	grid-row: 2;
	font-size: var(--fs-l);
	line-height: 1.8em;
	display: grid;
	place-items: center;
	text-align: center;
	z-index: 1;
	opacity: 0;
	transition: opacity .3s ease;
	will-change: opacity;
}

.page[data-p$='_1'] .card,
.page[data-p*='_6'] .card {
	grid-column: 2;
	grid-row: 2/5;
}

.sticky::before {
	content: '';
	width: 100%;
	height: 100%;
	grid-column: 1/-1;
	grid-row: 1/-2;
	background: url(/source/uchuzu_bk.webp) no-repeat bottom center/cover;
	transition: transform 1s ease, opacity 1s ease;
	opacity: 0;
	transform: translateY(2em);
}

.page[data-p*='_11'] {
	--rows: var(--pad-def) 1fr calc(var(--pad-side) + var(--pad-b));
}

.page[data-p*='_11'] .card {
	width: 100%;
	height: max-content;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 2vw;
	pointer-events: none;
}

.page[data-p*='_11'] .card img {
	max-width: calc(100svw - var(--pad-side) * 2);
	height: calc(100svh - 140px - 5rem);
	aspect-ratio: 297 / 210;
	object-fit: contain;
	flex-basis: 100%;
}

.page[data-p*='_11'] .card a {
	width: calc(50svw - var(--pad-side) - 1vw);
	max-width: 350px;
}

.page.show .card {
	opacity: 1;
}

.stickywrap {
	width: 100%;
	height: 0;
	position: sticky;
	top: 0;
	pointer-events: none;
}

.sticky {
	height: 100dvh;
	max-height: 100dvh;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	grid-template-columns: var(--columns);
	grid-template-rows: var(--rows);
	justify-items: center;
	pointer-events: none;
	overflow: hidden;
	transition: opacity .5s, transform .5s;
	will-change: opacity, transform;

}

.sticky > * {
	max-width: 100%;
	max-height: 100%;
	grid-column: 2;
	grid-row: 4;
}

.sticky img {
	object-fit: contain;
}

.sticky [data-p] {
	opacity: 0;
	transition: opacity .5s, transform .8s;
	will-change: opacity, transform;
}

.sticky svg {
	overflow: visible;
	transition: opacity .5s, transform .5s;
	will-change: opacity, transform;
}

.sticky svg [data-p] {
	transform-box: fill-box;
	transform-origin: center;
}

.sticky svg text {
	fill: #fff;
	font-size: var(--fs-m);
}

.sticky svg .line {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sticky svg .block {
	fill: #000;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10
}

/*1 title*/

/*2 you the world*/
.sticky [data-p*='_2'] {
	fill: white;
	stroke: black;
	transform: translateY(20%);
}

#main:has([data-p*='_2'].show) .svgmain {
	transform: scale(2.5);
}

#main:has([data-p*='_2'].show) .sticky [data-p*='_2'] {
	transform: translateY(0);
	opacity: 1;
}

/*3 earth*/
.sticky .ear {
	transform: translateY(120%) scale(0.5);
}

#main:has([data-p*='_3'].show) .sticky [data-p*='_2'] {
	transform: translateY(-5%);
	opacity: 1;
}

#main:has([data-p*='_3'].show) .sticky .ear {
	transform: translateY(0) scale(1.5);
	opacity: 1;
}

/*4 Universe*/
.sticky [data-p*='_4'] {
	transform: scale(0);
}

#main:has([data-p*='_4'].show) .sticky [data-p*='_2'] {
	transform: translateY(0%);
}

#main:has([data-p*='_4'].show) .sticky .ear {
	transform: translateY(0);
}


#main:has([data-p*='_4'].show) .sticky [data-p*='_4'] {
	transform: scale(1);
	opacity: 1;
}

/*5 疑問*/
#main:has([data-p*='_5'].show) .svgmain {
	transform: scale(2);
}

.sticky [data-p*='_5'] {
	transform: scale(0);
	transform-origin: bottom left !important;
	opacity: 0;
}

#main:has([data-p*='_5'].show) .sticky [data-p*='_5'] {
	transform: scale(1);
	opacity: 1;
}

/*6 Question*/
#main:has([data-p*='_6'].show) .sticky {
	opacity: 0;
}

.page[data-p*='_6'] .card {
	text-align: left !important;
}

.page[data-p*='_6'] span {
	text-align: center;
	display: block;
	opacity: 0;
	transform: translateY(-1em);
	transition: 1s;
	position: relative;
}

.page[data-p*='_6'] span br {
	display: none;
}

.page[data-p*='_6'] span:nth-of-type(1),
.page[data-p*='_6'] span:nth-of-type(2),
.page[data-p*='_6'] span:nth-of-type(3) {
	line-height: 2.5em;
}

.page[data-p*='_6'] span:nth-of-type(1)::before,
.page[data-p*='_6'] span:nth-of-type(3)::after {
	--s: 24px;
	--p: calc(var(--s) * -1.5);
	--i: '';
	content: '';
	width: var(--s);
	height: var(--s);
	position: absolute;
	background: center 100% no-repeat var(--i);
	opacity: 0;
	transition: opacity 1s;
}


.page[data-p*='_6'] span:nth-of-type(1)::before {
	--i: url(/source/icons/icon-quote-top.svg);
	top: 0;
	left: var(--p);
}

.page[data-p*='_6'] span:nth-of-type(3)::after {
	--i: url(/source/icons/icon-quote-bottom.svg);
	bottom: 0;
	right: var(--p);
}

.page[data-p*='_6'] span:nth-of-type(1)::before,
.page[data-p*='_6'] span:nth-of-type(3)::after {
	opacity: 1;
}

.page[data-p*='_6'] span:nth-of-type(3)::after {
	transition-delay: 2.5s;
}

.page[data-p*='_6'] span:nth-of-type(4) {
	margin-top: 1em;
}

.page[data-p*='_6'].show span {
	opacity: 1;
	transform: translateY(0);
}

.page[data-p*='_6'].show span:nth-of-type(2) {
	transition-delay: 0.5s;
}

.page[data-p*='_6'].show span:nth-of-type(3) {
	transition-delay: 1s;
}

.page[data-p*='_6'].show span:nth-of-type(4),
.page[data-p*='_6'].show span:nth-of-type(5) {
	transition-delay: 2s;
}

#main:has([data-p*='_6'].show) .sticky .peo,
#main:has([data-p*='_6'].show) .sticky .ear,
#main:has([data-p*='_6'].show) .sticky [data-p*='_4'],
#main:has([data-p*='_6'].show) .sticky [data-p*='_5'] {
	transform: translateY(0) scale(1);
}

#main:has([data-p*='_6'].show) .sticky [data-p*='_5'] {
	opacity: 0;
}

/*7 Universe*/
#main:has([data-p*='7'].show) .sticky {
	opacity: 1;
}

#main:has([data-p*='_7'].show) .svgmain {
	transform: translateY(-12vh) scale(1.3);
}

#main:has([data-p*='7'].show) [data-p*='_7'] {
	opacity: 1;
}

.sticky [data-p*='_7'] .time,
.sticky [data-p*='_7'] .dis {
	transform-box: fill-box;
	transition: 1s;
}

#main:has([data-p*='_7'].show) .sticky .time,
#main:has([data-p*='_7'].show) .sticky .dis {
	transition-delay: 0.8s;
	opacity: 1;
}

.sticky [data-p*='_7'] .time {
	transform-origin: bottom;
	transform: scaleY(0);
}

#main:has([data-p*='_7'].show) .sticky .time {
	transform: scaleY(1);
}

#main:has([data-p*='_7'].show) .sticky .time .line:nth-of-type(1) {
	animation-fill-mode: forwards;
	animation-name: hide-line;
	animation-duration: 0.5s;
	animation-delay: 1.8s;
}

@keyframes hide-line {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.sticky [data-p*='_7'] .dis {
	transform-origin: left;
	transform: scaleX(0);
}

#main:has([data-p*='_7'].show) .sticky .dis {
	transform: scaleX(1);
}

.sticky [data-p*='_7'] .ucy > path {
	transform-box: fill-box;
	transform-origin: center;
	transition: 1s;
	opacity: 0;
	transform: scale(0);
}

#main:has([data-p*='_7'].show) .sticky .ucy > path {
	transform: scale(1);
	opacity: 1;
}

#main:has([data-p*='_7'].show) .sticky .ucy > path:nth-child(1) {
	transition-delay: 1s;
}

#main:has([data-p*='_7'].show) .sticky .ucy > path:nth-child(2) {
	transition-delay: 1.2s;
}

#main:has([data-p*='_7'].show) .sticky .ucy > path:nth-child(3) {
	transition-delay: 1.4s;
}

#main:has([data-p*='_7'].show) .sticky .ucy > path:nth-child(4) {
	transition-delay: 1.6s;
}

.sticky [data-p*='_7'] .inn {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}

#main:has([data-p*='_7'].show) .sticky .inn {
	transition: 3s;
	transition-delay: 1s;
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
}

/*8 Life*/
#main:has([data-p*='_8'].show) .svgmain {
	transform: translateY(0) scale(1);
}

#main:has([data-p*='_8'].show) .sticky .peo,
#main:has([data-p*='_8'].show) .sticky .time,
#main:has([data-p*='_8'].show) .sticky .dis {
	opacity: 0;
	transition-delay: 0s;
}

#main:has([data-p*='_8'].show) .sticky .mal {
	opacity: 1;
}

#main .sticky .mal {
	transform-origin: center bottom;
}

.sticky .mal > g {
	transform-box: fill-box;
	transform-origin: center bottom;
	transition: 1s;
	opacity: 0;
}

.sticky .mal > g:nth-of-type(1) {
	transform: translateX(20vw);
}

.sticky .mal > g:nth-of-type(2) {
	transform-origin: center bottom;
	transform: translateX(2vw);
}

.sticky .mal > g:nth-of-type(3) {
	transform: translateX(2vw);
}

.sticky .mal > g:nth-of-type(4) {
	transform: translateX(-15vw);
}

.sticky .mal > g:nth-of-type(5) {
	transform: translateX(-23vw);
}

#main:has([data-p*='_8'].show) .sticky .mal > g {
	opacity: 1;
	transform: translateX(0) scale(1);
}

/*9 End*/
#main:has([data-p*='_9'].show) .svgmain {
	transform: translateY(-12vh) scale(1.3);
}

#main:has([data-p*='_9'].show) .sticky .mal {
	transform: scale(0);
	opacity: 0;
}

#main:has([data-p*='_9'].show) .sticky .peo {
	opacity: 1;
}

/*10 go to*/
.sticky [data-p*='_10'] {
	transition: .5s;
	transform-origin: bottom center;
	grid-row: 2/6;
	align-self: flex-end;
	max-height: 70vh;
	transform: scale(0.5);
}

#main:has([data-p*='_10'].show) .sticky .svgmain {
	opacity: 0;
	transition: 1.5s;
	transform: translateY(-18vh) scale(1.3);
}

#main:has([data-p*='_10'].show) .sticky::before {
	opacity: 1;
	transform: translateY(0);
}

/*11 uchuzu*/
.page[data-p*='_11'].show .card {
	pointer-events: auto;
}

#main:has([data-p*='_11'].show) .i-scroll {
	opacity: 0;
	pointer-events: none;
}

#main:has([data-p*='_11'].show) .sticky::before {
	opacity: 0;
	transform: translateY(-2em);
}

.page[data-p*='_11'] img {
	transition: 1s;
	opacity: 0;
	transform: translateY(10%);
}

.page[data-p*='_11'].show img {
	opacity: 1;
	transform: translateY(0);
}

@media only screen and (max-width: 768px) {
	#main {
		--columns-max: 1fr min(21.25rem, 95vw) 1fr;
	}

	.stickywrap,
	.sticky,
	.page {
		width: 100dvw;
		max-width: 100dvw;
		height: 100dvh;
		min-height: 100dvh;
	}

	.page:not([data-p$='_1']) .card {
		align-self: flex-end;
		margin-bottom: 1em;
	}

	.page:not([data-p$='_1']) p.card {
		text-align: left;
	}

	.card br {
		display: none;
	}

	/*2 you*/
	#main:has([data-p*='_2'].show) .svgmain {
		transform: translateY(5vh) scale(1);
	}

	#main:has([data-p*='_2'].show) .sticky [data-p*='_2'] {
		transform: translateY(0%) scale(4);
		opacity: 1;
	}

	/*3 earth*/
	#main:has([data-p*='_3'].show) .sticky [data-p*='_2'] {
		transform: translateY(-200%) scale(4);
	}

	#main:has([data-p*='_3'].show) .sticky .ear {
		transform: translateY(0) scale(6);
		opacity: 1;
	}

	#main:has([data-p*='_4'].show) .sticky .peo {
		transform: translateY(-120%) scale(3);
	}

	#main:has([data-p*='_4'].show) .sticky .ear {
		transform: translateY(0) scale(3);
	}

	.sticky [data-p*='_5'] {
		transform: translate(50%, 0%) scale(0);
	}
	
	#main:has([data-p*='_5'].show) .sticky [data-p*='_5'] {
		transform: translate(50%, -120%) scale(2.5);
	}

	.page[data-p*='_6'] {
		grid-template-columns: var(--columns-max);
	}

	.page[data-p*='_6'] .card {
		align-self: center;
	}

	.page[data-p*='_6'] p span:not(:nth-last-of-type(-n+2)) {
		max-width: 20rem;
		margin: auto;
		line-height: 1.8em;
		text-align: left;
	}

	.page[data-p*='_6'] span br {
		display: block;
	}

	.page[data-p*='_6'] span:nth-of-type(1)::before {
		top: var(--p);
		left: 0;
	}

	.page[data-p*='_6'] span:nth-of-type(3)::after {
		bottom: calc(var(--p) * 0.5);
		right: 0;
	}

	.page[data-p*='_6'] p span:nth-of-type(3) {
		margin-bottom: 3em;
	}

	.sticky .dis text {
		transform: translateX(-3%);
	}

	.page[data-p*='_7'] .card {
		margin-bottom: 0;
	}

	#main:has([data-p*='_7'].show) .sticky .peo,
	#main:has([data-p*='_7'].show) .sticky .ear {
		transform: scale(1);
	}

	#main:has([data-p*='_7'].show) .sticky .svgmain {
		transform: translateY(0) scale(2);
	}

	#main:has([data-p*='_8'].show) .sticky .svgmain {
		transform: translateY(20%) scale(1.2);
	}

	#main:has([data-p*='_9'].show) .sticky .svgmain {
		transform: translateY(0) scale(2);
	}

	.sticky [data-p*='_10'] {
		width: 100dvw;
		height: calc(100dvh - 6em);
		object-fit: cover;
		grid-column: 1/-1;
		transform: scale(1);
		margin-bottom: 6em;
	}

	.page[data-p*='_10'] p.card {
		text-align: center;
	}

	.page[data-p*='_10'] .card br {
		display: block;
	}

	.page[data-p*='_11'] {
		--columns: 5vw 1fr 5vw;
		max-height: 100svh;
	}

	.page[data-p*='_11'] .card {
		margin: 0;
	}

	.page[data-p*='_11'] .card img {
		max-width: 100%;
		opacity: 1;
	}

	.page[data-p*='_11'] .card .text-btn {
		width: 100%;
		max-width: 100%;
	}

	.page[data-p*='_11'] .card .text-btn:first-of-type {
		margin-top: auto;
	}

}