@charset "UTF-8";
/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
box-sizing: border-box;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0;
}
ul[role=list], ol[role=list] {
list-style: none;
}
body {
min-height: 100vh;
line-height: 1.5;
}
h1, h2, h3, h4, button, input, label {
line-height: 1.1;
}
h1, h2, h3, h4 {
text-wrap: balance;
}
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
img, picture {
max-width: 100%;
display: block;
}
input, button, textarea, select {
font: inherit;
}
textarea:not([rows]) {
min-height: 10em;
}
:target {
scroll-margin-block: 5ex;
}
/** base **/
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button,
pre {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
text-wrap: unset;
}
ul,
ol {
list-style: none;
}
img,
video {
max-width: 100%;
vertical-align: bottom;
line-height: 1;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
appearance: none;
}
a {
color: currentColor;
text-decoration: none;
}
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
overflow-wrap: anywhere; /* 収まらない場合に折り返す */
word-break: normal; /* 単語の分割はデフォルトに依存 */
line-break: strict; /* 禁則処理を厳格に適用 */
}
:root {
--color-moomin-1: #002264;
--color-red: #BD0404;
--color-mint: #D7EBE9;
--color-sky-blue: #B7E0F6;
--color-pink: #F8CCC1;
--color-yellow: #FEE580;
--color-paper: #FFFDF5;
--color-white: white;
--color-note: #BD0404;
--color-store: #E6F0EF;
--color-pouch: #F9E6E6;
--space-x1: 0.8rem;
--space-x2: 1.6rem;
--space-x3: 2.4rem;
--space-x5: 4rem;
--space-x8: 6.4rem;
--space-x10: 8rem;
--filter-drop-shadow: drop-shadow(7px 6px 0 rgb(0 0 0 / 10%));
}
body {
color: var(--color-moomin-1);
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
background-color: var(--color-paper);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.h2 {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.6rem;
line-height: 1.6;
letter-spacing: 0.05em;
text-align: center;
}
.h3 {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.2rem;
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
}
.lead {
width: 86.5384615385%;
font-size: 1.6rem;
line-height: 1.7;
letter-spacing: 0.05em;
}
.header {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4.7rem;
margin-inline: auto;
background-color: var(--color-white);
}
.header img {
width: unset;
}
@media (min-width: 40rem) {
.header {
position: fixed;
left: 50%;
width: 40rem;
transform: translateX(-50%);
background-color: transparent;
}
}
.region-switcher {
position: absolute;
right: 1.7rem;
display: flex;
align-items: center;
gap: 0 1.2rem;
}
.region-switcher .language {
display: flex;
align-items: center;
gap: 0 0.7rem;
width: 4.5rem;
height: 1.6rem;
border: 1px solid currentColor;
border-radius: 0.8rem;
}
.region-switcher .language span:nth-of-type(2) {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 1.1rem;
line-height: 1;
translate: 0 -1px;
}
.region-switcher .language::before {
content: "";
display: block;
width: 1.2rem;
height: 1.2rem;
margin-left: 0.2rem;
background-color: currentColor;
mask: url('data:image/svg+xml,') center/100% no-repeat;
}
.region-switcher .ge-flag {
font-size: 0;
padding: 0;
}
.label,
.shop {
display: none;
}
@media (min-width: 64rem) {
.label,
.shop {
position: fixed;
top: 0;
display: block;
width: calc(50% - 20rem);
height: 100svh;
}
.label a,
.shop a {
transition: filter 0.25s ease;
}
}
@media (min-width: 64rem) and (hover: hover) {
.label a:hover:has(img),
.shop a:hover:has(img) {
filter: brightness(1.1);
}
}
@media (min-width: 64rem) {
.shop {
right: 0;
display: grid;
}
.shop .rotation {
--anim-play-state: running;
}
}
@media (height < 630px) {
.shop,
.label {
display: none;
}
}
.label {
align-items: center;
justify-items: end;
}
.label img {
width: 100%;
height: auto;
}
.label a {
display: block;
width: min(73.2265446224%, 32rem);
margin: min(15.3318077803%, 43.7rem) auto 0;
}
@media (min-width: 40rem) {
.label {
position: fixed;
left: 0;
top: 0;
width: calc(100% - 43.5rem);
height: 100svh;
display: grid;
overflow-y: auto;
}
}
@media (min-width: 48rem) {
.label-wrapper {
width: max(29rem, 90.625%);
max-width: 43.7rem;
margin-right: 9.375%;
}
}
@media (min-width: 64rem) {
.label {
width: calc(50% - 20rem);
margin-right: 5.3rem;
}
}
.shop {
align-items: center;
overflow-x: hidden;
overflow: hidden;
}
.shop-wrapper {
display: grid;
grid-template-areas: "stack";
width: max(22.7rem, 68.7878787879%);
max-width: 29.6rem;
margin-left: 9.0909090909%;
container: shop-wrapper/inline-size;
}
@media (min-width: 96rem) {
.shop-wrapper {
margin-left: 9rem;
}
}
.shop-content {
position: relative;
z-index: 2;
grid-area: stack;
display: grid;
gap: min(13.5135135135cqi, 4rem) 0;
overflow-y: auto;
}
.shop .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: min(8.1081081081cqi, 2.4rem) min(4.7297297297cqi, 1.4rem);
}
.shop .grid-item {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: min(6.0810810811cqi, 1.8rem);
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
}
.shop .grid-item:first-of-type {
grid-column: 1/3;
}
.shop .solid {
display: block;
width: 100%;
padding-block: 0.5em 0.5909090909em;
color: var(--color-white);
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: min(7.4324324324cqi, 2.2rem);
line-height: 1.4;
letter-spacing: 0.05em;
text-decoration: none;
text-align: center;
background-color: var(--color-moomin-1);
border-radius: 1.2rem;
}
.shop .s-key {
pointer-events: auto;
}
.shop .s-key img {
width: 100%;
height: auto;
}
.shop .region-switcher {
display: flex;
justify-content: center;
padding-top: var(--space-x5);
}
.rotation {
display: grid;
grid-template-areas: "stack";
}
.rotation > * {
grid-area: stack;
}
.rotation {
margin-bottom: var(--space-x1);
border-radius: 1.2rem;
aspect-ratio: 1;
overflow: hidden;
background-color: var(--color-paper);
}
.rotation img:not(:first-of-type) {
opacity: 0;
}
.rotation {
--r-duration: 3s;
--anim-play-state: paused;
}
.rotation[data-rotation="2"] img {
animation: rotation-of-2 calc(2 * var(--r-duration)) linear infinite 0s;
animation-play-state: var(--anim-play-state);
}
.rotation[data-rotation="2"] img:nth-of-type(1) {
animation-delay: calc(0 * var(--r-duration));
}
.rotation[data-rotation="2"] img:nth-of-type(2) {
animation-delay: calc(1 * var(--r-duration));
}
.rotation[data-rotation="3"] img {
animation: rotation-of-3 calc(3 * var(--r-duration)) linear infinite 0s;
animation-play-state: var(--anim-play-state);
}
.rotation[data-rotation="3"] img:nth-of-type(1) {
animation-delay: calc(0 * var(--r-duration));
}
.rotation[data-rotation="3"] img:nth-of-type(2) {
animation-delay: calc(1 * var(--r-duration));
}
.rotation[data-rotation="3"] img:nth-of-type(3) {
animation-delay: calc(2 * var(--r-duration));
}
.rotation[data-rotation="4"] img {
animation: rotation-of-4 calc(4 * var(--r-duration)) linear infinite 0s;
animation-play-state: var(--anim-play-state);
}
.rotation[data-rotation="4"] img:nth-of-type(1) {
animation-delay: calc(0 * var(--r-duration));
}
.rotation[data-rotation="4"] img:nth-of-type(2) {
animation-delay: calc(1 * var(--r-duration));
}
.rotation[data-rotation="4"] img:nth-of-type(3) {
animation-delay: calc(2 * var(--r-duration));
}
.rotation[data-rotation="4"] img:nth-of-type(4) {
animation-delay: calc(3 * var(--r-duration));
}
.rotation[data-rotation="5"] img {
animation: rotation-of-5 calc(5 * var(--r-duration)) linear infinite 0s;
animation-play-state: var(--anim-play-state);
}
.rotation[data-rotation="5"] img:nth-of-type(1) {
animation-delay: calc(0 * var(--r-duration));
}
.rotation[data-rotation="5"] img:nth-of-type(2) {
animation-delay: calc(1 * var(--r-duration));
}
.rotation[data-rotation="5"] img:nth-of-type(3) {
animation-delay: calc(2 * var(--r-duration));
}
.rotation[data-rotation="5"] img:nth-of-type(4) {
animation-delay: calc(3 * var(--r-duration));
}
.rotation[data-rotation="5"] img:nth-of-type(5) {
animation-delay: calc(4 * var(--r-duration));
}
@keyframes rotation-of-2 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
25.00% {
opacity: 1;
animation-timing-function: ease-out;
}
50.00% {
opacity: 1;
}
75.00% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotation-of-3 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
16.67% {
opacity: 1;
animation-timing-function: ease-out;
}
33.33% {
opacity: 1;
}
50.00% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotation-of-4 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
12.50% {
opacity: 1;
animation-timing-function: ease-out;
}
25.00% {
opacity: 1;
}
37.50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotation-of-5 {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10.00% {
opacity: 1;
animation-timing-function: ease-out;
}
20.00% {
opacity: 1;
}
30.00% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.shop-stickers {
position: relative;
grid-area: stack;
pointer-events: none;
}
.shop-stickers [class^=s-] {
position: absolute;
height: auto;
}
.shop-stickers .s-11 {
width: 30.0675675676%;
right: 0;
top: 0;
margin-right: -40.5405405405%;
margin-top: 65.8783783784%;
}
.shop-stickers .s-12 {
width: 28.3783783784%;
left: 0;
top: 0;
margin-left: -5.4054054054%;
margin-top: 102.7027027027%;
}
.shop-stickers .s-13 {
width: 67.2297297297%;
left: 0;
top: 0;
margin-left: 2.7027027027%;
margin-top: -20.2702702703%;
}
.shop-stickers .s-14 {
width: 42.2297297297%;
right: 0;
top: 0;
margin-right: -52.7027027027%;
margin-top: 158.4459459459%;
}
.shop-stickers .s-15 {
width: 24.6621621622%;
left: 0;
bottom: 0;
margin-left: -30.0675675676%;
margin-bottom: -10.1351351351%;
}
.shop-stickers .s-17 {
width: 57.0945945946%;
left: 0;
top: 0;
margin-left: 92.5675675676%;
margin-top: -35.1351351351%;
}
.shop-stickers .s-34 {
width: 22.2972972973%;
left: 0;
top: 0;
margin-left: -22.2972972973%;
margin-top: 55.0675675676%;
}
.shop-stickers .s-36 {
width: 18.5810810811%;
left: 0;
bottom: 0;
margin-left: -2.3648648649%;
margin-bottom: -6.4189189189%;
}
.shop-stickers .s-37 {
width: 27.3648648649%;
left: 0;
top: 0;
margin-left: -34.4594594595%;
margin-top: 150.3378378378%;
}
.shop-stickers .s-key {
width: 23.8175675676%;
right: 0;
bottom: 0;
margin-right: -39.3581081081%;
margin-bottom: -12.5%;
}
.shop-stickers img[class^=s-] {
opacity: 0;
}
.shop-stickers img[class^=s-].is-on {
opacity: 1;
}
.shop-stickers .s-15,
.shop-stickers .s-34,
.shop-stickers .s-37 {
z-index: 2;
}
.shop-stickers .s-34 {
rotate: -15deg;
}
.shop-stickers .s-11.is-on {
animation: s11 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.shop-stickers .s-12.is-on {
animation: s12 3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-13.is-on {
animation: s12 3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-14.is-on {
animation: s14 4s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-15.is-on {
animation: s15 4s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-17.is-on {
animation: s17 4s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-34.is-on {
animation: s34 5s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-36.is-on {
--ty: -120%;
animation: s12 3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-37.is-on {
animation: s37 3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
.shop-stickers .s-key {
animation: key 2s linear infinite;
}
@media (width <= 1330px) {
.shop-stickers .s-key {
position: fixed;
right: 32px;
bottom: 32px;
width: 7.05rem;
margin: unset;
}
}
@media (height <= 770px) {
.shop-stickers .s-key {
position: fixed;
right: 32px;
bottom: 32px;
width: 7.05rem;
margin: unset;
}
}
@keyframes s11 {
from {
transform: translateX(-150%);
}
to {
transform: translateX(200%);
}
}
@keyframes s14 {
from {
transform: translateY(10svh);
}
to {
transform: translateY(-150svh);
}
}
@keyframes s15 {
from {
transform: translate(-100%, -200%);
}
to {
transform: translate(100%, 150%);
}
}
@keyframes s17 {
from {
transform: translate(-100%, 200%);
}
to {
transform: translate(100%, -100%);
}
}
@keyframes s12 {
0% {
transform: translateY(var(--ty, 70%));
}
30% {
transform: translateY(0%);
}
70% {
transform: translateY(0%);
}
100% {
transform: translateY(var(--ty, 70%));
}
}
@keyframes s34 {
0% {
transform: translate(100%, 15%);
}
25% {
transform: translate(0%, 0%);
}
75% {
transform: translate(0%, 0%);
}
100% {
transform: translate(100%, 15%);
}
}
@keyframes s37 {
0% {
transform: translate(118%, -50%);
}
25% {
transform: translate(0%, 0%);
}
75% {
transform: translate(0%, 0%);
}
100% {
transform: translate(118%, -50%);
}
}
@keyframes key {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: rotate(10deg);
}
}
.moomin-main {
--pf-height-top: 4.8rem;
--pf-height-bottom: 2.4rem;
--pf-position: 3.5rem;
position: relative;
width: 100%;
margin-inline: auto;
overflow: hidden;
}
.moomin-main::before {
display: none;
pointer-events: none;
}
.moomin-main::before {
content: "";
position: fixed;
top: var(--pf-height-top);
bottom: var(--pf-height-bottom);
z-index: 5;
right: var(--pf-position);
width: 40rem;
border: 0.63px solid var(--color-moomin-1);
border-radius: 3.2rem;
}
.moomin-main .moomin-frame {
position: fixed;
z-index: 3;
top: 0;
bottom: 0;
right: var(--pf-position);
width: 40rem;
flex-direction: column;
justify-content: space-between;
display: none;
pointer-events: none;
--corner-size: 3.2rem;
--gradient-pos: calc(100% - var(--corner-size));
}
.moomin-main .moomin-frame::before, .moomin-main .moomin-frame::after {
content: "";
background-size: 100%, var(--corner-size), var(--corner-size);
background-repeat: no-repeat;
}
.moomin-main .moomin-frame::before {
height: calc(var(--pf-height-top) + var(--corner-size));
background-image: linear-gradient(to bottom, var(--color-paper) var(--gradient-pos), transparent var(--gradient-pos)), url('data:image/svg+xml,'), url('data:image/svg+xml,');
background-position: left top, left bottom, right bottom;
}
.moomin-main .moomin-frame::after {
height: calc(var(--pf-height-bottom) + var(--corner-size));
background-image: linear-gradient(to top, var(--color-paper) var(--gradient-pos), transparent var(--gradient-pos)), url('data:image/svg+xml,'), url('data:image/svg+xml,');
background-position: left bottom, left top, right top;
}
@media (min-width: 40rem) {
.moomin-main {
justify-self: end;
width: 40rem;
margin-right: var(--pf-position);
padding-top: var(--pf-height-top);
}
.moomin-main::before,
.moomin-main .moomin-frame {
display: flex;
}
}
@media (min-width: 64rem) {
.moomin-main {
--pf-position: calc(50% - 20rem);
}
.moomin-main::before,
.moomin-main .moomin-frame {
right: unset;
left: var(--pf-position);
}
}
.aside {
position: relative;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-x5) 0;
padding-block: 7rem calc(var(--space-x5) + var(--space-x10));
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic W6 JIS2004", sans-serif;
}
.footer h3 img {
width: 21.8rem;
height: auto;
}
.footer-social {
display: grid;
grid-template-columns: repeat(5, 2.4rem);
justify-content: center;
gap: 0 var(--space-x2);
}
.footer-social a[target=_blank]:has(svg)::after {
display: none !important;
}
.footer-store {
display: grid;
gap: var(--space-x3) 0;
line-height: 1.5;
text-align: center;
}
.footer-trade-mark {
width: 13.9rem;
height: auto;
}
.footer-copyright {
line-height: 0.5;
}
.loading {
position: fixed;
z-index: 10;
inset: 0;
display: grid;
align-items: center;
justify-items: center;
grid-template-areas: "stack";
background-color: var(--color-paper);
}
.loading.is-loaded {
--loading-aps: paused;
animation: fade-out 1s 1s ease-out forwards;
}
.loading.is-loaded .moomins:nth-of-type(2) {
opacity: 1;
}
.loading .moomins {
grid-area: stack;
position: relative;
display: flex;
width: min(71.1538461538%, 29.6rem);
aspect-ratio: 296/71;
}
.loading img {
position: absolute;
height: auto;
opacity: 0;
--duration: 0.65s;
animation: loading calc(4 * var(--duration)) linear infinite 0s;
animation-play-state: var(--loading-aps, running);
}
.loading .moomins:nth-of-type(2) {
opacity: 0;
transition: opacity 1s 0.15s ease-out;
}
.loading .moomins:nth-of-type(2) img {
opacity: 1;
animation: unset;
}
.loading img:nth-of-type(1) {
left: 0;
bottom: 0;
width: 21.9230769231%;
aspect-ratio: 57/65;
margin-left: 0%;
margin-bottom: 0%;
animation-delay: calc(3 * var(--duration));
}
.loading img:nth-of-type(2) {
left: 0;
top: 0;
width: 23.0769230769%;
aspect-ratio: 60/66;
margin-left: 29.2307692308%;
margin-top: 0.3846153846%;
animation-delay: calc(2 * var(--duration));
}
.loading img:nth-of-type(3) {
left: 0;
top: 0;
width: 23.8461538462%;
aspect-ratio: 62/59;
margin-left: 53.4615384615%;
margin-top: 0%;
animation-delay: calc(1 * var(--duration));
}
.loading img:nth-of-type(4) {
right: 0;
top: 0;
width: 20%;
aspect-ratio: 52/46;
margin-right: 0%;
margin-top: 0.7692307692%;
animation-delay: calc(0 * var(--duration));
}
@keyframes loading {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
12.5% {
opacity: 1;
}
37.5% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.opening {
padding: 5.5288461538% 4.5673076923% 7.4519230769%;
container: opening/inline-size;
}
.opening h2 {
margin-bottom: 10.582010582cqi;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 5.3291005291cqi;
line-height: 1.4700158856;
letter-spacing: 0.0400119142em;
text-align: center;
}
.opening .block {
width: 100%;
aspect-ratio: 378/168;
display: grid;
grid-template-areas: "stack";
}
.opening .block > * {
grid-area: stack;
}
.opening .block img {
position: relative;
height: auto;
}
.opening .block-bg {
background-color: var(--block-bg-color, #FFE4D9);
border-radius: 2rem;
filter: url("#texture-1");
}
.opening .mint {
--block-bg-color: var(--color-mint);
margin-block: 2.4038461538cqi 3.7037037037cqi;
}
.opening .table-illus {
width: 59.5238095238%;
margin: -8.9947089947% 0 0 0.5291005291%;
}
.opening .table-p {
width: 22.7513227513%;
margin: -6.3492063492% 0 0 62.4338624339%;
}
.opening .snufkin-illus {
width: 43.1216931217%;
margin: -1.3227513228% 0 0 47.0899470899%;
}
.opening .snufkin-p {
width: 22.7513227513%;
margin: -7.4074074074% 0 0 15.3439153439%;
}
.opening .pair {
position: relative;
display: grid;
grid-template-columns: 44.4444444444% 55.5555555556%;
}
.opening .pair figure {
position: relative;
width: 100%;
}
.opening .pair figure .techo-p {
position: absolute;
top: 0;
left: 0;
width: 105.7416267943%;
max-width: unset;
height: auto;
margin: 0.956937799% 0 0 -3.3492822967%;
}
.opening .techo-t {
margin-top: 6.5476190476%;
}
.opening .bobble {
position: absolute;
top: 0;
right: 0;
width: 24.0740740741%;
height: 24.0740740741%;
margin: -8.7301587302% -1.455026455% 0 0;
}
.opening .little-my {
position: absolute;
width: 26.3736263736%;
aspect-ratio: 24/30;
height: auto;
margin: -31.5384615385% 0 0 38.4615384615%;
}
.opening h2,
.opening .block-bg,
.opening img {
opacity: 0;
}
.opening .table-p,
.opening .snufkin-p {
scale: 1.05;
filter: drop-shadow(14px 12px 0 rgba(0, 0, 0, 0));
}
.opening .little-my {
transform: translateY(-100%);
}
.opening .pink .block-bg {
--a-delay: 0s;
}
.opening .mint .block-bg {
--a-delay: 0.15s;
}
.opening .techo-p {
--a-delay: 0.3s;
}
.opening .table-illus {
--a-duration: 2s;
--a-delay: 0.45s;
--scale-start: 0.95;
opacity: 0;
}
.opening .snufkin-illus {
--a-duration: 2s;
--a-delay: 0.6s;
--scale-start: 0.95;
opacity: 0;
}
.opening h2 {
--a-delay: 0.75s;
}
.opening .table-p {
--a-delay: 0.9s;
}
.opening .snufkin-p {
--a-delay: 1.05s;
}
.opening .techo-t {
--a-delay: 0.75s;
}
.opening .circle {
--a-delay: 1.2s;
}
.opening .little-my {
--a-delay: 1.5s;
}
.opening.in-view h2,
.opening.in-view .block-bg,
.opening.in-view img:not(.table-illus, .table-p, .snufkin-illus, .snufkin-p, .little-my) {
animation: fade-in var(--a-duration, 0.75s) var(--a-delay, 0s) cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
.opening.in-view .table-illus,
.opening.in-view .snufkin-illus {
animation: scale-fade-in var(--a-duration) var(--a-delay) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.opening.in-view .table-p,
.opening.in-view .snufkin-p {
animation: scale-fade-in-shadow 0.5s var(--a-delay, 0s) linear forwards;
}
.opening.in-view .little-my {
animation: opening-little-my 1.5s var(--a-delay, 2.5s) cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes opening-little-my {
0% {
opacity: 0;
transform: translateY(30px) rotate(0deg);
}
5% {
opacity: 1;
}
60% {
transform: translateY(-20px) rotate(15deg);
}
75% {
transform: translateY(2px) rotate(-3deg);
}
100% {
opacity: 1;
transform: translateY(0%) rotate(0deg);
}
}
.deck {
position: relative;
display: grid;
grid-template-areas: "stack";
}
.deck > * {
grid-area: stack;
}
.deck {
width: 100%;
aspect-ratio: 356/188;
}
.deck.mint {
--deck-color: var(--color-mint);
}
.deck.blue {
--deck-color: var(--color-sky-blue);
}
.deck.pink {
--deck-color: var(--color-pink);
}
.deck.yellow {
--deck-color: var(--color-yellow);
}
.deck-floor {
background-color: var(--deck-color, var(--color-mint));
border-radius: 1.91rem;
filter: url("#texture-2");
}
.deck img {
position: absolute;
z-index: 1;
height: auto;
}
.deck .mint-grass {
width: 41.0112359551%;
margin: 25.8426966292% 0 0 -4.2134831461%;
rotate: 0deg;
}
.deck .mint-moomintroll {
width: 32.3033707865%;
margin: 8.1460674157% 0 0 -1.1235955056%;
rotate: 0deg;
}
.deck .mint-snufkin-p {
width: 27.5280898876%;
margin: -8.9887640449% 0 0 39.8876404494%;
rotate: -4.723deg;
}
.deck .mint-table-p {
width: 28.9325842697%;
margin: -5.3370786517% 0 0 61.2359550562%;
rotate: 25.032deg;
}
.deck .blue-hattihatteners {
width: 20.2247191011%;
margin: -10.6741573034% 0 0 69.6629213483%;
rotate: 0deg;
}
.deck .blue-butterfly-flowers {
width: 46.3483146067%;
margin: 30.0561797753% 0 0 59.2696629213%;
rotate: 0deg;
}
.deck .blue-snorkmaiden {
width: 33.4269662921%;
margin: 15.7303370787% 0 0 69.9438202247%;
rotate: 0deg;
}
.deck .blue-mint-p {
width: 28.9325842697%;
margin: 8.3146067416% 0 0 0.702247191%;
rotate: -18.745deg;
}
.deck .blue-pink-p {
width: 37.0786516854%;
margin: -2.0786516854% 0 0 17.9775280899%;
rotate: 6.572deg;
}
.deck .pink-snufkin {
width: 32.8651685393%;
margin: 14.3258426966% 0 0 -5.0561797753%;
rotate: 0deg;
}
.deck .pink-ship {
width: 19.5786516854%;
margin: 36.5168539326% 0 0 75.2808988764%;
rotate: 0deg;
}
.deck .pink-green-p {
width: 26.1235955056%;
margin: 7.3033707865% 0 0 34.7191011236%;
rotate: -14.188deg;
}
.deck .pink-yellow-p {
width: 19.1011235955%;
margin: 15.1685393258% 0 0 55.5056179775%;
rotate: 14.847deg;
}
.deck .pink-stationary-p {
width: 32.8651685393%;
margin: -1.9662921348% 0 0 67.6966292135%;
rotate: 0deg;
}
.deck .yellow-1-p {
width: 37.9213483146%;
margin: 10.2808988764% 0 0 5.0561797753%;
rotate: -15.052deg;
}
.deck .yellow-2-p {
width: 26.6853932584%;
margin: 28.0898876404% 0 0 19.1011235955%;
rotate: 13.003deg;
}
.deck .yellow-3-p {
width: 26.5730337079%;
margin: 0.8426966292% 0 0 48.595505618%;
rotate: 29.846deg;
}
.deck .yellow-cake {
width: 13.0898876404%;
margin: 53.6516853933% 0 0 2.808988764%;
rotate: -14.846deg;
}
.deck .yellow-teacup {
width: 10.8426966292%;
margin: 46.6292134831% 0 0 0.5617977528%;
rotate: -14.846deg;
}
.deck .yellow-little-my {
width: 39.3258426966%;
margin: 31.7415730337% 0 0 54.4943820225%;
rotate: 0deg;
}
.deck-floor {
clip-path: rect(25% 75% 75% 25% round 2rem);
opacity: 0;
transition: all 0.55s cubic-bezier(0.5, 1, 0.89, 1);
}
.deck img:not([class$=-p]) {
opacity: 0;
}
.deck [class$=-p] {
opacity: 0;
scale: 0.9;
}
.deck .mint-table-p,
.deck .blue-mint-p,
.deck .pink-yellow-p,
.deck .yellow-3-p {
--a-delay: 0.78s;
}
.deck .pink-stationary-p,
.deck .yellow-2-p {
--a-delay: 1.1375s;
}
.deck .mint-grass,
.deck .blue-butterfly-flowers,
.deck .pink-ship,
.deck .yellow-cake {
--a-delay: 0.8125s;
}
.deck .blue-hattihatteners,
.deck .yellow-teacup {
--a-delay: 0.975s;
}
.deck.in-view .deck-floor {
opacity: 1;
clip-path: rect(0% 100% 100% 0% round 2rem);
}
.deck.in-view [class$=-p] {
animation: scale-in 0.65s var(--a-delay, 0.4875s) cubic-bezier(0.61, 1, 0.88, 1) forwards;
}
.deck.in-view img:not([class$=-p]) {
animation: fade-up 0.65s var(--a-delay, 0.65s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes scale-in {
0% {
opacity: 0;
scale: 0.9;
}
35% {
opacity: 1;
scale: 1.1;
}
100% {
opacity: 1;
scale: 1;
}
}
.nav {
padding-block: 4.2rem var(--space-x8);
}
.nav ul {
display: grid;
gap: var(--space-x2) 0;
width: 85.5769230769%;
margin-inline: auto;
}
.yodogawa {
display: grid;
justify-items: center;
gap: var(--space-x5) 0;
padding-top: var(--space-x8);
}
.yodogawa h2,
.yodogawa p {
width: 83.4134615385%;
}
.yodogawa h2 {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: min(5.7692307692cqi, 2.4rem);
line-height: 1.6;
letter-spacing: 0.05em;
}
.yodogawa p {
font-size: min(4.3269230769cqi, 1.8rem);
line-height: 2.19;
}
.yodogawa img {
width: 100%;
height: auto;
}
.goods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 10.3896103896%;
}
.g {
container: g/inline-size;
}
.g img {
filter: var(--filter-drop-shadow);
}
.g-heading {
display: grid;
justify-items: center;
gap: var(--space-x1) 0;
padding-top: var(--space-x1);
}
.g-name {
display: block;
width: 94.2028985507cqi;
padding-block: 0.4em 0.3em;
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 7.2463768116cqi;
line-height: 1.6;
text-align: center;
background-color: var(--color-white);
border-radius: 0.4em;
}
.g-price {
display: flex;
align-items: center;
gap: 0 3.9855072464cqi;
}
.g .price {
font-size: 20.2898550725cqi;
font-weight: 700;
}
.g .tax-inc {
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 5.7971014493cqi;
line-height: 1.25;
}
.g .currency {
font-size: 10.1449275362cqi;
font-weight: 700;
}
.g .yen {
font-size: 19.1427536232cqi;
font-weight: 500;
}
[data-card=intro] .f {
position: relative;
width: 98.0519480519%;
margin-block: 21.1920529801% 7.9470198675%;
padding-top: 15.8940397351%;
background-color: var(--color-moomin-1);
border-radius: 0.8rem;
}
[data-card=intro] .f > * {
position: absolute;
top: 0;
left: 0;
}
[data-card=intro] .f .f-little-my {
width: 11.0927152318%;
margin: -12.9139072848% 0 0 81.4569536424%;
}
[data-card=intro] .f .f-letter {
width: 17.2185430464%;
margin: 4.5033112583% 0 0 -1.9867549669%;
}
[data-card=intro] .f .f-text {
width: 68.5430463576%;
margin: -3.3112582781% 0 0 17.2185430464%;
}
[data-card=intro] .f .f-little-my {
opacity: 0;
transform: translateY(30px);
}
[data-card=intro] .f.in-view .f-letter {
animation: letter 3.5s linear infinite;
}
[data-card=intro] .f.in-view .f-little-my {
animation: f-little-my 2s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes letter {
0% {
transform: translateY(0%);
}
25% {
transform: translateY(-10%);
}
50% {
transform: translateY(10%);
}
75% {
transform: translateY(-10%);
}
}
@keyframes f-little-my {
0% {
opacity: 0;
transform: translateY(30px);
}
5% {
opacity: 1;
}
25% {
transform: translateY(-15px) rotate(10deg);
}
35% {
transform: translateY(2px);
}
40% {
transform: translateY(0px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.card[data-card=intro] {
gap: 0;
padding-bottom: 0;
}
.card[data-card=intro] .arch {
position: relative;
padding-top: 0;
}
.card[data-card=intro] .hat {
position: absolute;
top: -60.4166666667%;
width: 14.1826923077%;
height: auto;
transform: translateY(100%) rotate(30deg);
opacity: 0;
}
.card[data-card=intro] .hat.in-view {
animation: hat-jump 1.25s 0.25s cubic-bezier(0.65, 0, 0.35, 1) forwards, hat 3s 2s linear infinite;
}
.card[data-card=intro] h2 {
display: grid;
justify-items: center;
gap: var(--space-x3) 0;
width: 54.0865384615%;
margin-bottom: var(--space-x5);
}
.card[data-card=intro] .h3 {
font-size: min(5.2884615385cqi, 2.2rem);
}
.card[data-card=intro] .box {
display: grid;
grid-template-areas: "stack";
}
.card[data-card=intro] .box > * {
grid-area: stack;
}
.card[data-card=intro] .box {
align-items: center;
width: 81.7777777778%;
aspect-ratio: 184/49;
container: intro-box/inline-size;
text-align: center;
}
.card[data-card=intro] .box > span {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: min(8.6956521739cqi, 1.6rem);
line-height: 1.6;
letter-spacing: 0.05em;
}
.card[data-card=intro] .wrapper {
position: relative;
width: 74.0384615385%;
margin-bottom: var(--space-x8);
}
@keyframes hat-jump {
0% {
opacity: 0;
transform: translateY(100%) rotate(30deg);
}
70% {
opacity: 1;
transform: translateY(-100%) rotate(-15deg);
}
85% {
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%) rotate(0deg);
}
}
@keyframes hat {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-10%) rotate(-5deg);
}
75% {
transform: translateY(10%) rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
.card {
--card-blue: #B7E0F6;
--card-blue-light: #DBEFFB;
--card-pink: #F8CCC1;
--card-pink-light: #FBE5E0;
--card-yellow: #FEE580;
--card-yellow-light: #FFF2BF;
--card-green: #D7EBE9;
--color-feat-layer: var(--color-paper);
--color-feat: var(--card-green);
display: grid;
gap: var(--space-x5) 0;
justify-items: center;
padding-block: var(--space-x8);
background-image: linear-gradient(var(--color-feat-layer) var(--space-x8), var(--color-feat) var(--space-x8));
}
.card[data-card=feat-01] {
--color-feat: var(--card-pink);
--color-feat-layer: var(--card-green);
--slide-c-bg: var(--card-pink-light);
}
.card[data-card=feat-02] {
--color-feat: var(--card-yellow);
--color-feat-layer: var(--card-pink);
--slide-c-bg: var(--card-yellow-light);
}
.card[data-card=feat-03] {
--color-feat: var(--card-blue);
--color-feat-layer: var(--card-yellow);
--slide-c-bg: var(--card-blue-light);
}
.card[data-card=feat-04] {
--color-feat: var(--card-yellow);
--color-feat-layer: var(--card-blue);
--slide-c-bg: var(--card-yellow-light);
}
.card-main-fig {
width: 74.5192307692%;
}
.card-main-fig img {
width: 100%;
height: auto;
filter: var(--filter-drop-shadow);
}
.card-header {
display: grid;
gap: 3.6rem 0;
width: 86.5384615385%;
}
.card-header h3 {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.2rem;
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
}
.card-header p {
font-size: 1.6rem;
line-height: 1.7;
letter-spacing: 0.05em;
}
.card-chapter {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-image: linear-gradient(to top, var(--color-feat) 3px, var(--color-feat-layer) 3px);
}
.card-chapter .arch {
position: absolute;
bottom: 0;
overflow: hidden;
display: block;
width: 100%;
padding-top: 11.5384615385%;
}
.card-chapter .arch svg {
width: 107.4519230769%;
aspect-ratio: 447/48;
height: auto;
margin-left: -3.7259615385%;
color: var(--color-feat);
filter: url("#texture-2");
}
.card-chapter .boxy {
position: relative;
display: grid;
justify-items: center;
gap: 0.3rem 0;
width: 22.5961538462%;
aspect-ratio: 1;
container: card-h2/inline-size;
margin-inline: auto;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
}
.card-chapter .boxy::before {
content: "";
position: absolute;
inset: -16.4893617021%;
background: url("../img/feat/header.webp") center/100% no-repeat;
}
.card-chapter .boxy span {
position: relative;
}
.card-chapter .boxy span:first-of-type {
margin-top: 14.8936170213%;
font-size: 12.7659574468cqi;
line-height: 1.49;
letter-spacing: 0.1em;
}
.card-chapter .boxy span:first-of-type::after {
content: "";
position: absolute;
display: block;
width: 43.6170212766cqi;
height: 0.6px;
margin: 7.4468085106cqi 0 0 -5.3191489362cqi;
background-color: currentColor;
}
.card-chapter .boxy span:last-of-type {
font-size: 39.9691489362cqi;
line-height: 1.4899789731;
letter-spacing: -0.0199888212em;
}
.card-chapter [class^=char-] {
position: absolute;
left: 0;
bottom: 0;
}
.card-chapter .char-moomintroll {
width: 28.125%;
margin-left: 6.7307692308%;
margin-bottom: -4.3269230769%;
}
.card-chapter .char-bag {
width: 30.7692307692%;
margin-left: 66.1057692308%;
margin-bottom: -4.5673076923%;
}
.card-chapter .char-fillyjonks {
width: 23.5576923077%;
margin-left: 7.6923076923%;
margin-bottom: -2.6442307692%;
}
.card-chapter .char-cup {
width: 23.0769230769%;
margin-left: 67.3076923077%;
margin-bottom: 2.6442307692%;
}
[data-anim=boxy] {
opacity: 0;
transform: translateY(10px);
transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-anim=boxy] span:first-of-type {
opacity: 0;
transition: opacity 0.6s var(--a-delay, 0.55s) cubic-bezier(0.65, 0, 0.35, 1);
}
[data-anim=boxy] span:first-of-type::after {
clip-path: inset(0% 100% 0% 0%);
transition: clip-path 0.6s var(--a-delay, 0.75s) cubic-bezier(0.65, 0, 0.35, 1);
}
[data-anim=boxy] span:last-of-type {
opacity: 0;
transition: opacity 0.6s var(--a-delay, 0.75s) cubic-bezier(0.65, 0, 0.35, 1);
}
[data-anim=boxy].in-view {
transform: translateY(0);
opacity: 1;
}
[data-anim=boxy].in-view span:first-of-type {
opacity: 1;
}
[data-anim=boxy].in-view span:first-of-type::after {
clip-path: inset(0%);
}
[data-anim=boxy].in-view span:last-of-type {
opacity: 1;
}
.video {
display: grid;
justify-items: center;
gap: var(--space-x2) 0;
width: 88.4615384615%;
padding-block: var(--space-x8);
}
.video h3 {
width: 100%;
display: flex;
align-items: end;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.2rem;
line-height: 1.6;
letter-spacing: 0.05em;
}
.video h3 img {
flex: none;
width: 17.6630434783%;
max-width: unset;
height: auto;
margin-inline: 5.7065217391% 4.0760869565%;
}
.video .wrapper {
width: 100%;
aspect-ratio: 4/3;
border-radius: 2rem;
overflow: hidden;
}
.video .wrapper iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.video p {
padding-top: 0.4rem;
color: var(--color-note);
font-size: 1.6rem;
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
}
.techo {
display: grid;
justify-items: center;
background-color: var(--color-yellow);
}
.techo .h2 {
margin-block: var(--space-x10) var(--space-x5);
}
.techo .box {
position: relative;
display: grid;
grid-template-areas: "stack";
}
.techo .box > * {
grid-area: stack;
}
.techo .box {
width: 93.3333333333%;
aspect-ratio: 336/110;
margin: var(--space-x3) auto var(--space-x5);
container: box-sniff/inline-size;
}
.techo .box p {
margin: 4.4642857143% 0 0 17.7827380952%;
font-size: 4.7619047619cqi;
line-height: 1.2;
text-align: center;
}
.techo .box .sniff {
position: absolute;
width: 21.4285714286%;
margin-top: 2.9761904762%;
}
[class^=illus-] {
height: auto;
max-width: unset;
}
.illus-moomintroll-snufkin {
width: 62.0192307692%;
}
.illus-moomintroll-field {
width: 52.1634615385%;
margin: 0.5rem 0 0 auto;
}
.stroll {
--speed: 72s;
position: relative;
overflow: hidden;
display: grid;
grid-auto-flow: column;
container: stroll/inline-size;
}
.stroll > div {
display: flex;
}
.stroll > div img {
max-width: unset;
width: 62.5cqi;
height: auto;
aspect-ratio: 1;
}
.stroll .first {
animation: stroll var(--speed) calc(var(--speed) * -1) linear infinite;
animation-play-state: paused;
}
.stroll .second {
animation: stroll-again var(--speed) calc(var(--speed) / -2) linear infinite;
animation-play-state: paused;
}
.stroll.in-view .first,
.stroll.in-view .second {
animation-play-state: running;
}
@keyframes stroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes stroll-again {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}
.category {
width: 86.5384615385%;
}
.lead + .category {
margin-top: var(--space-x8);
}
.category + .category {
margin-top: var(--space-x10);
}
.category[data-item-category=techo] {
--item-bg: var(--color-white);
}
.category[data-item-category=cover] {
--item-bg: var(--color-sky-blue);
}
.category[data-item-category=stationary] {
--item-bg: var(--color-mint);
}
.category[data-item-category=pouch] {
--item-bg: var(--color-pouch);
}
.category[data-item-category=pouch] .category-header {
--cate-header-w: 84.4444444444%;
--cate-header-as: 304 / 72;
--cate-header-fs: 7.2368421053cqi;
--cate-header-lh: 1.2;
}
.category .item + .item {
margin-top: var(--space-x5);
}
.category-header {
position: relative;
padding-bottom: var(--space-x8);
}
.category-header > img {
position: absolute;
}
.category-header h3 {
display: grid;
grid-template-areas: "stack";
}
.category-header h3 > * {
grid-area: stack;
}
.category-header h3 {
align-items: center;
justify-items: center;
container: cate-box/inline-size;
width: var(--cate-header-w, 51.1111111111%);
aspect-ratio: var(--cate-header-as, 184/56);
margin-inline: auto;
}
.category-header h3 span {
position: relative;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: var(--cate-header-fs, 11.9565217391cqi);
line-height: var(--cate-header-lh, 1.4);
letter-spacing: 0.05em;
text-align: center;
}
.category-header h3 img {
height: auto;
max-width: unset;
}
[data-item-category=cover] .category-header > img {
right: 2.5%;
bottom: 2.2rem;
width: 36.3888888889%;
}
[data-item-category=stationary] .category-header > img {
left: 3.0555555556%;
bottom: 2.5rem;
width: 31.9444444444%;
}
[data-item-category=pouch] .category-header > img {
right: 1.6666666667%;
bottom: 5.6rem;
width: 16.6666666667%;
}
.category-header h3 span,
.category-header h3 img,
.category-header h3 + img {
opacity: 0;
}
.category-header.in-view h3 span {
animation: fade-in 0.6s 0.5s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}
.category-header.in-view h3 img {
animation: fade-up 0.6s 0s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
.category-header.in-view h3 + img {
animation: fade-up 0.6s 0.5s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
.item {
display: grid;
grid-template-areas: "stack";
}
.item > * {
grid-area: stack;
}
.item {
justify-items: center;
}
.item-b {
width: 100%;
margin-top: 30.5555555556%;
border-radius: 1.906rem;
background-color: var(--item-bg, var(--color-sky-blue));
filter: url("#texture-2");
}
.item-c {
position: relative;
display: grid;
gap: var(--space-x2) 0;
width: 90%;
padding-bottom: var(--space-x5);
}
.item-cover {
aspect-ratio: 324/324;
border-radius: 1.2rem;
overflow: hidden;
}
.item-heading {
display: grid;
gap: var(--space-x2) 0;
}
.item-type {
width: fit-content;
padding: 0.3333333333em 0.6666666667em;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.2rem;
line-height: 1.7;
background-color: var(--item-type-bg, var(--color-white));
border-radius: 0.3333333333em;
}
.item-type.pink {
background-color: #FFE4D9;
}
.item-type.mint {
background-color: var(--color-mint);
}
.item-type.yellow {
background-color: var(--color-yellow);
}
.item-name {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.6rem;
line-height: 1.33;
}
.item-price {
display: flex;
align-items: center;
gap: 0 0.55rem;
}
.item .price {
font-size: 2.8rem;
font-weight: 700;
}
.item .tax-inc {
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 0.8rem;
line-height: 1.25;
}
.item .currency {
font-size: 1.4rem;
}
.item .yen {
font-size: 2.6417rem;
font-weight: 500;
}
.item-description {
position: relative;
display: grid;
align-items: center;
padding-top: 92.5714285714%;
}
.item-description p {
position: absolute;
font-size: 1.4rem;
line-height: 1.4;
}
.item-description p i {
font-style: italic;
}
.item-product {
display: grid;
grid-template-columns: 54.012345679% auto;
}
.item-product figure {
position: relative;
}
.item-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 14.1rem;
height: fit-content;
padding: 0.7857142857em 0.8571428571em 0.7142857143em 2.0714285714em;
color: var(--color-white);
font-size: 1.4rem;
line-height: 1.4;
font-weight: 600;
background-color: var(--color-moomin-1);
border-radius: 7.1428571429em;
}
.item-button::after {
content: "";
display: block;
width: 1.4285714286em;
height: 1.4285714286em;
background: url('data:image/svg+xml,') center/contain no-repeat;
}
.item-product [class^=p] {
position: absolute;
top: 0;
left: 0;
height: auto;
max-width: unset;
filter: var(--filter-drop-shadow);
}
.item-product .p1-1 {
width: 80.5369127517%;
margin: -6.711409396% 0 0 8.7248322148%;
}
.item-product .p1-2 {
width: 97.9865771812%;
margin: -14.7651006711% 0 0 2.0134228188%;
}
.item-product .p2-1 {
width: 90.6040268456%;
margin: -12.0805369128% 0 0 9.3959731544%;
}
.item-product .p2-2 {
width: 97.3154362416%;
margin: 0% 0 0 6.0402684564%;
}
.item-product .p2-3 {
width: 88.5906040268%;
margin: 3.355704698% 0 0 11.4093959732%;
}
.item-product .p3-1 {
width: 80.5369127517%;
margin: 18.7919463087% 0 0 12.7516778523%;
}
.item-product .p3-2 {
width: 126.1744966443%;
margin: 45.6375838926% 0 0 -20.8053691275%;
}
.item-product .p3-3 {
width: 99.6644295302%;
margin: 31.5436241611% 0 0 -2.0134228188%;
}
.item-product .p-t-1 {
width: 70.4697986577%;
margin: -18.7919463087% 0 0 27.5167785235%;
}
.item-product .p-t-2 {
width: 70.4697986577%;
margin: -14.7651006711% 0 0 26.1744966443%;
}
.item-product .p2-2,
.item-product .p-t-1,
.item-product .p-t-2 {
filter: none;
}
.item-product .p3-2 {
rotate: 15deg;
}
.item-product .p3-3 {
rotate: 9.74deg;
}
.item-para {
display: grid;
gap: var(--space-x2) 0;
}
.item-note {
display: grid;
align-items: end;
grid-template-columns: max-content auto;
}
.item-note .item-button {
height: fit-content;
}
.item-note small {
justify-self: end;
width: min(90%, 15.5rem);
padding: 1.4166666667em 0.4166666667em 1.5em 0.4166666667em;
color: var(--color-note);
font-size: 1.2rem;
line-height: 1.2;
text-align: center;
border: 1px solid currentColor;
border-radius: 0.8rem;
}
.item:has(.item-en) .item-b {
margin-top: 13.3333333333%;
}
.item-en {
position: relative;
display: grid;
grid-template-areas: "stack";
}
.item-en > * {
grid-area: stack;
}
.item-en {
margin: 0 auto var(--space-x2);
}
.item-en.tn-1 {
width: 91.049382716%;
aspect-ratio: 295/246;
}
.item-en.tn-2 {
width: 90.4320987654%;
aspect-ratio: 293/246;
}
.item-en img {
width: 100%;
height: auto;
}
.item-en .fig-note {
position: absolute;
bottom: 0;
right: 0;
margin: 0 -8.3333333333% -11.4583333333% 0;
display: flex;
align-items: center;
justify-content: center;
width: 31.9444444444%;
aspect-ratio: 1;
container: fig-note/inline-size;
color: var(--color-white);
background-color: var(--color-moomin-1);
border-radius: 50%;
}
.item-en .fig-note span {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 17.3913043478cqi;
line-height: 1;
text-align: center;
}
.video-shorts {
position: relative;
width: 100%;
padding-block: var(--space-x8);
}
.video-shorts .wrapper {
width: min(83.6538461538%, 34.8rem);
aspect-ratio: 9/16;
margin-inline: auto;
border-radius: 1.6rem;
overflow: hidden;
}
.video-shorts iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-shorts .v-knit {
position: absolute;
top: -7.6rem;
right: 15.3846153846%;
width: 27.4038461538%;
height: auto;
rotate: 30deg;
}
.items {
display: flex;
flex-direction: column;
align-items: center;
padding-block: var(--space-x10) 3.5rem;
}
.items .lead {
margin-top: 3.6rem;
}
.store {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-x5) 0;
padding-block: 7.9rem 14rem;
background-color: var(--color-store);
--bit-height: 0.6rem;
}
.store::before, .store::after {
content: "";
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: var(--bit-height);
background-color: var(--color-store);
filter: url("#texture-2");
}
.store::before {
top: calc(var(--bit-height) * -0.5);
}
.store::after {
bottom: calc(var(--bit-height) * -0.5);
}
.store ul {
width: 83.6538461538%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.store ul a[target=_blank]::after {
display: none !important;
}
.store-note {
width: max(74.0384615385%, 30.8rem);
display: grid;
grid-template-columns: min(32.4675324675%, 10rem) auto;
gap: 0 var(--space-x3);
}
.store-note img {
height: auto;
}
.store-note p {
padding-top: 16.3043478261%;
font-size: 1.6rem;
line-height: 1.7;
}
.techo-l {
width: 88.9423076923%;
}
.techo-l-header {
position: relative;
padding-bottom: var(--space-x5);
}
.techo-l-header img {
--a-delay: 0.25s;
position: absolute;
z-index: 1;
height: auto;
}
.techo-l-header.cover img {
right: 0;
top: 0;
width: 8.9rem;
margin-right: 2.1rem;
margin-top: -1.2rem;
}
.techo-l-header.stationary img {
left: 0;
top: 0;
width: 9.6rem;
margin-left: 1.9rem;
margin-top: -1.4rem;
}
.techo-l-header.weeks img {
left: 0;
top: 0;
width: 10.9rem;
margin-left: 1.9rem;
margin-top: 1.7rem;
}
.techo-l-header.pouch img {
right: 0;
top: 0;
width: 8.3rem;
margin-right: 1.4rem;
margin-top: -1.6rem;
}
.techo-l h3 {
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.2rem;
line-height: 1.6;
letter-spacing: 0.05em;
text-align: center;
}
.products {
position: relative;
display: grid;
justify-items: center;
gap: var(--space-x5) 0;
padding-block: 8.9rem calc(5.5rem + var(--space-x10));
background: var(--color-sky-blue) url("../img/products/pattern.webp") 0 0/50.475rem 44.025rem repeat;
background-blend-mode: soft-light;
}
.products-header {
display: grid;
gap: var(--space-x3) 0;
width: 82.2115384615%;
text-align: center;
}
.products-header .lead {
width: 100%;
}
.products .techo-items {
display: grid;
grid-template-columns: repeat(2, calc(50% - 0.5rem));
gap: 1rem;
}
.products .techo-items[data-group] {
margin: 0;
}
.products .techo-items > li {
width: 100%;
margin-top: 0;
padding: 0;
}
.products .techo-items > li .btn-item {
border: 0;
border-radius: 1.8495rem;
}
@media (hover: hover) {
.products .techo-items a:hover {
opacity: 1;
}
}
.r-contents {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-x5) 0;
padding-block: 9.2rem calc(5rem + var(--space-x10));
background-color: var(--color-pink);
--bit-height: 0.6rem;
}
.r-contents::before, .r-contents::after {
content: "";
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: var(--bit-height);
background-color: var(--color-pink);
filter: url("#texture-2");
}
.r-contents::before {
top: calc(var(--bit-height) * -0.5);
}
.r-contents::after {
bottom: calc(var(--bit-height) * -0.5);
}
.r-contents ul {
display: grid;
gap: var(--space-x2) 0;
width: 72.1153846154%;
}
.r-contents .small-tax-inc-note {
margin-block-start: var(--space-x5);
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
line-height: 0.625;
}
[data-anim=fade-up] {
opacity: 0;
}
[data-anim=fade-up].in-view {
animation: fade-up var(--a-duration, 0.6s) var(--a-delay, 0s) var(--a-tf, cubic-bezier(0.37, 0, 0.63, 1)) forwards;
}
[data-anim=fade-in] {
opacity: 0;
}
[data-anim=fade-in].in-view {
animation: fade-in 0.6s var(--a-delay, 0s) cubic-bezier(0.12, 0, 0.39, 0) forwards;
}
[data-anim=scale-fade-in-shadow] {
opacity: 0;
scale: 1.05;
}
[data-anim=scale-fade-in-shadow].in-view {
animation: scale-fade-in-shadow 0.6s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
[data-anim=heading] {
opacity: 0;
}
[data-anim=heading].in-view {
animation: fade-up-blur var(--a-duration, 0.6s) 0.25s var(--a-tf, cubic-bezier(0.37, 0, 0.63, 1)) forwards;
}
[data-anim=zigzag].in-view {
animation: zigzag var(--a-duration, 1s) var(--a-delay, 0s) steps(3) var(--a-ic, 2);
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10px);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes scale-fade-in-shadow {
from {
opacity: 0;
scale: var(--scale-start, 1.05);
filter: var(--shadow-start, drop-shadow(14px 12px 0 rgba(0, 0, 0, 0)));
}
to {
opacity: 1;
scale: 1;
filter: var(--filter-drop-shadow);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes scale-fade-in {
from {
opacity: 0;
scale: var(--scale-start, 0.95);
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes fade-up-blur {
0% {
opacity: 0;
transform: translateY(10px);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes zigzag {
0% {
filter: none;
}
25% {
filter: url("#texture-3");
}
75% {
filter: url("#texture-4");
}
}
.svg {
position: absolute;
width: 0rem;
height: 0rem;
}
.sct {
position: absolute;
z-index: 2;
width: 4.5rem;
height: auto;
}
.sct.moomintroll {
top: -3.5rem;
width: 3.8rem;
}
.sct.moominmamma {
top: -2.2rem;
width: 4.5rem;
}
.sct.moominpappa {
top: -2.8rem;
width: 4.5rem;
}
.splide {
--pag-size: 1rem;
--pag-gap: var(--space-x3);
display: grid;
grid-template-areas: "track" "control";
gap: var(--space-x5) 0;
}
.splide__track {
grid-area: track;
}
.splide__arrows {
grid-area: control;
display: flex;
justify-content: space-between;
width: 23.8rem;
margin-inline: auto;
}
.splide[data-slide-number="4"] .splide__arrows {
width: calc(var(--pag-size) * 4 + var(--pag-gap) * 3 + var(--space-x5) * 4);
}
.splide[data-slide-number="5"] .splide__arrows {
width: calc(var(--pag-size) * 5 + var(--pag-gap) * 3 + var(--space-x5) * 4);
}
.splide__arrow {
border-radius: 50%;
box-shadow: 0 0 0 1px inset var(--color-moomin-1);
transition: opacity 0.25s;
}
.splide__arrow:disabled {
opacity: 0.2;
}
.splide__arrow--prev {
scale: -1;
}
.splide__pagination {
grid-area: control;
gap: 0 var(--pag-gap);
}
.splide__pagination__page {
display: block;
width: var(--pag-size);
height: var(--pag-size);
min-height: unset;
background-color: var(--color-moomin-1);
border-radius: 50%;
transition: opacity 0.25s;
opacity: 0.2;
}
.splide__pagination__page.is-active {
opacity: 1;
}
.splide {
width: 100%;
container: splide/inline-size;
}
.splide__slide {
padding: 0 0 0.6rem 5.7692307692cqi;
}
.slide-c {
display: grid;
gap: var(--space-x2) 0;
width: 86.5384615385cqi;
padding: 3.2rem 5.7692307692cqi;
background-color: var(--slide-c-bg, #FBE5E0);
border-radius: 1.2rem;
box-shadow: 7px 6px 1px 0 rgba(0, 0, 0, 0.1);
}
.slide-c figure {
position: relative;
overflow: hidden;
background-color: var(--color-white);
border-radius: 0.8rem;
}
.slide-c h4 {
display: grid;
align-items: center;
height: 2.7777777778em;
font-family: "Arsenal", sans-serif;
font-weight: 700;
font-style: normal;
font-size: min(4.3269230769cqi, 1.8rem);
line-height: 1.4;
letter-spacing: 0.0473684211em;
}
.slide-c p {
font-size: min(3.8461538462cqi, 1.6rem);
line-height: 1.7;
}
.plus {
position: absolute;
inset: 0;
display: flex;
align-items: end;
justify-content: end;
padding: 0 2.8846153846% 3.8461538462% 0;
font-size: 0;
}
.plus::before {
content: "";
display: block;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--color-feat) url('data:image/svg+xml,') center/50% no-repeat;
}
.dialog {
width: 100svw;
height: 100svh;
max-width: 100%;
max-height: 100%;
background-color: transparent;
}
.dialog[open] {
display: flex;
align-items: center;
justify-content: center;
}
.dialog::backdrop {
background-color: transparent;
}
.dialog-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(9, 36, 78, 0.8);
backdrop-filter: blur(5px);
}
.dialog [class^=close] {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-moomin-1);
}
.dialog [class^=close]::after {
content: "";
display: block;
background-color: currentColor;
}
.dialog .close-circle {
position: absolute;
top: 2.4rem;
right: 2.1rem;
visibility: hidden;
width: 4rem;
height: 4rem;
font-size: 0;
background-color: var(--color-white);
border-radius: 50%;
}
.dialog .close-circle::after {
width: 1.3rem;
height: 1.3rem;
mask: url('data:image/svg+xml,') center/100% no-repeat;
}
.dialog .close {
gap: 0 1.2142857143em;
padding: 0.7142857143em 0.8571428571em 0.7857142857em 3.5714285714em;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size: 1.4rem;
line-height: 1.4;
background-color: var(--color-white);
border-radius: 7.1428571429em;
}
.dialog .close::after {
width: 2rem;
height: 2rem;
mask: url('data:image/svg+xml,') center/100% no-repeat;
}
.dialog figure {
width: 100%;
overflow-x: auto;
}
.dialog img {
width: auto;
max-width: unset;
height: 75.712143928svh;
margin-inline: auto;
filter: var(--filter-drop-shadow);
}
@media (min-width: 48rem) {
.dialog-content {
width: min(90%, 88.6rem);
height: auto;
aspect-ratio: 1;
max-height: 90%;
border-radius: 2rem;
}
.dialog .close-circle {
visibility: visible;
}
.dialog figure {
width: fit-content;
}
.dialog img {
max-width: 100%;
}
}
.anchor {
position: absolute;
z-index: 3;
bottom: -2.45rem;
right: 7.2115384615%;
width: 8.8rem;
height: 11.1rem;
display: grid;
grid-template-areas: "stack";
justify-items: center;
}
.anchor img {
grid-area: stack;
}
.anchor img:first-of-type {
width: 90.9090909091%;
height: auto;
}
.anchor img:last-of-type {
width: 100%;
height: auto;
align-self: end;
animation: anchor 2s linear infinite;
}
@keyframes anchor {
0% {
rotate: 0deg;
}
25% {
rotate: 5deg;
}
75% {
rotate: -5deg;
}
100% {
rotate: 0deg;
}
}