.index_inner {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	font-size: calc(8vw + 8vh);
	color: #fff;
	font-family: sans-serif;
	letter-spacing: -.3vw;
	overflow: hidden;
    font-family: "Lacquer", system-ui;
    width: 100%;
}


.rugrats {
	margin: 0 auto;
	text-align: center;
}
.rugrats span {
	display:inline-block;
	transition: color linear 0.5s forwards;
	-webkit-text-stroke-width: .32vw;
	-webkit-text-stroke-color: black;
	text-shadow: .4vw .5vw #000;
    font-size: 6rem;
    font-family: "Lacquer", system-ui;
}
.rugrats.kor span {
    display: inline-block;
    padding:2rem 0;
    font-family: 'LOTTERIACHAB';
}

.rugrats span {
	text-transform:capitalize;
	text-transform:lowercase;
/* 	animation:caseChange 5s ease infinite forwards;
}
@keyframes caseChange{
	from{
		text-transform:uppercase;
	}
	to{
		text-transform:lowercase;
	}
} */
}

#wrap {
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    padding-bottom: 5rem;
    display: flex;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
#wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    /* width: fit-content; */
    height: fit-content;
    padding: 1rem 1.8rem;
    color: #999;
    border-radius: 20rem;
    box-shadow: 0 0 .2rem rgba(0, 0, 0, 0.3);
}
a.prev_product {
    display: inline-block;
    position: fixed;
    left: 1rem;
    bottom: 2rem;
    background-color: #457ff2c5;
    color: #fff;
    z-index: 9999;
    padding: 1rem 1.8rem;
    border-radius: 2rem;
}
a.next_product {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    background: #ffb340;
    color: #fff;
    z-index: 9999;
    display: inline-block;
    padding: 1rem 1.8rem;
    border-radius: 2rem;
}
@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
}
.inner {
    font-family: "Asap", sans-serif;
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    overflow-x: clip;
    color: gray;
    display: grid;
    place-items: center;
}
.inner::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        135deg,
        rgba(222, 191, 244, 1) 0%,
        rgba(255, 178, 178, 1) 100%
    );
}
main {
    width: 100%;
    max-width: 100vw;
    display: grid;
    place-items: center;
}

#gallery {
    --size-w: 200px;
    --size-h: calc(var(--size-w) * 1.25);

    position: relative;
    width: min(100%, 1000px);
    overflow-x: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;

    gap: 10px;
    padding: 10px;
}
@media (max-width: 500px) {
    #gallery {
        --size-w: 40vw;
    }
}
@property --card-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@property --card-x {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
}
@property --card-y {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
}
.card {
    --card-x: 0px; /* auto set by CardSpreadPosition.js */
    --card-y: 0px; /* auto set by CardSpreadPosition.js */
    --card-angle: 0deg; /* auto set by CardSpreadPosition.js */

    /* sticky! */
    --sticky-visible-h: max(2rem, 5vh);
    position: sticky;
    bottom: calc((var(--size-h) - var(--sticky-visible-h)) * -1);

    display: grid;
    place-items: center;

    width: var(--size-w);
    height: var(--size-h);
    padding: 0.5rem;

    background-color: floralwhite;
    border-radius: 10px;
    box-shadow: 0.15rem 0.15rem 0.5rem #888;

    animation: anim linear both;
    animation-timeline: view();
    animation-range: entry 100% contain 80%;
    animation-duration: 1ms; /* for firefox*/
    transform-origin: center;
    transform: rotate3d(0, 0, 1, var(--card-angle))
        translate3d(var(--card-x), var(--card-y), 0);
}

@keyframes anim {
    to {
        --card-x: 0px;
        --card-y: 0px;
    }
}

.card * {
    overflow-wrap: anywhere;
}
.msg {
    display: none;
    color: crimson;
}
/* animation-timeline 非対応ブラウザ用 */
@supports not (animation-timeline: view()) {
    .msg {
        display: block;
    }
}
footer {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: dimgray;
}
a {
    color: currentColor;
    font-weight: bold;
}
a {
    text-transform: capitalize;
    font-size: 1.7rem;
}
article:nth-child(5n + 1 of .card) {
    background-color: lightcyan;
}
article:nth-child(5n + 2 of .card) {
    background-color: peachpuff;
}
article:nth-child(5n + 3 of .card) {
    background-color: lavender;
}
article:nth-child(5n + 4 of .card) {
    background-color: ivory;
}
article:nth-child(5n + 5 of .card) {
    background-color: mistyrose;
}


#load {
    width: 100%;
    height: 100%;
    position: relative;
}
.font {
    font-family: 'BagelFatOne-Regular';
}
#load > h1 {
    font-size: 2.5rem;
    position: absolute;
    left: 40%; top: 40%;
    transform: translate(-50%, -50%);
    color: #8a8a8a;
    animation: bouncing 1.5s infinite;
}
.spinner {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    /* gap: 1rem; */
}
.spinner .droplet {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 .5rem;
    background-color: #29db88;
    border-radius: 50%;
    transform-origin: center bottom;
    animation: bounce 1.2s cubic-bezier(0.3, 0.01, 0.4, 1) infinite;
}
.spinner .droplet:nth-child(1) {
    animation-delay: -0.4s;
}
.spinner .droplet:nth-child(2) {
    animation-delay: -0.2s;
}
.spinner .droplet:nth-child(3) {
    animation-delay: 0s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
@keyframes bouncing {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}