@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: initial; } ul, ol { list-style: none; } img, video { max-width: 100%; vertical-align: bottom; line-height: 1; } button { background-color: transparent; border: none; cursor: pointer; appearance: none; } a { color: currentColor; text-decoration: none; transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); } @media (hover: hover) { a:hover { filter: brightness(1.1); } } html { scroll-behavior: smooth; } body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } :root { --color-white: white; --color-black: black; --color-gray-1: #808080; --color-gray-3: #F3F3F3; --color-blue-1: #0F53C9; --layout-space-y: 0.75rem; } @media (width >= 48rem) { :root { --layout-space-y: 1.25rem; } } html { color: var(--color-black); font-family: "Koburina Gothic W3 JIS2004", sans-serif; } .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; } .product-title { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 1.5625rem; letter-spacing: 0.05em; line-height: 200%; } .product-title .number { font-size: 1.6em; font-weight: 400; } .product-title .day { font-size: 1em; } .product-title .vol { display: block; width: 4.25rem; padding-inline: 0.625rem 0; color: var(--color-white); font-size: 2.125rem; line-height: 61.5%; letter-spacing: 0.1em; font-weight: 300; background-color: #808080; } .product-title .vol small { font-size: 0.4117647059em; font-weight: 500; letter-spacing: 0.1em; } .product-list { display: grid; } .product-list li { opacity: 0; } .product-list.in-view li { animation: item-in 0.75s var(--item-display-delay, 0s) linear forwards; } @keyframes item-in { 0% { opacity: 0; } 100% { opacity: 1; } } .product-item .colors, .product-item .title { padding-inline: min(4vw, 0.9375rem); font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .product-item .colors { display: flex; gap: 0 0.4375rem; margin-top: 0.9375rem; color: #9C9C9C; font-size: 0.9375rem; letter-spacing: 0.05em; } .product-item .colors ul { display: flex; align-items: center; gap: 0.3125rem; } .product-item .colors li { flex: none; display: block; width: 0.78125rem; height: 0.78125rem; font-size: 0; color: transparent; border-radius: 50%; background-color: var(--color-spot, var(--color-white)); } .product-item .colors li[data-color=white] { --color-spot: var(--color-white); box-shadow: 0 0 0 0.5px var(--color-black); } .product-item .colors li[data-color=black] { --color-spot: var(--color-black); } .product-item .colors li[data-color=gray] { --color-spot: #BCBCBC; } .product-item .title { font-size: 0.9375rem; line-height: 213.333%; letter-spacing: 0.05em; } .product-item .title span { display: block; } .product-item .title .price { margin-top: -0.5rem; } .product-item .date { display: block; width: min(100%, 11.25rem); padding-inline: min(4vw, 0.9375rem); color: var(--color-blue-1); font-size: 0.625rem; line-height: 278.3333333333%; letter-spacing: 0.1em; } .product-item .view-more { display: block; width: min(46.6666666667vw, 10.9375rem); margin: 0.3125rem auto 0; font-size: 0.75rem; line-height: 2.0625rem; letter-spacing: 0.1em; text-align: center; border: 0.93px solid var(--color-black); border-radius: 1.25rem; } @media (width >= 48rem) { .product-item .view-more { width: min(100%, 12.5rem); margin: 0.5625rem auto 0; line-height: 2.25rem; } } .video-js { color: var(--color-white); } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus { background-color: rgb(from var(--color-black) r g b/55%); } .video-js .vjs-big-play-button { width: var(--vjs-play-button-width, 9.4375rem); height: var(--vjs-play-button-height, 9.4375rem); margin: 0; border: none; transform: translate(-50%, -50%); mask-image: url('data:image/svg+xml,'); mask-size: cover; mask-repeat: no-repeat; background-color: currentColor; } .video-js .vjs-big-play-button::before { display: none; } .credits { padding-block: 3.125rem; background-color: var(--color-gray-3); } .credits .content { width: fit-content; margin-inline: auto; } .credits h2 { margin-bottom: 0.75rem; font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 1.75rem; line-height: 178.571%; letter-spacing: 0.05em; text-align: center; } .credits ul { display: grid; grid-template-columns: max-content max-content; gap: 0.75rem 0; } .credits li { display: grid; grid-column: span 2; grid-template-columns: subgrid; } .credits h3, .credits p { font-size: 0.875rem; line-height: 167%; letter-spacing: 0.1em; } .credits h3 { text-align: right; } @media (width >= 48rem) { .credits { padding-block: 2.5rem; } .credits h2 { margin-bottom: 1.25rem; } } .footer { padding-block: 2.25rem 2.0625rem; font-size: 0.75rem; line-height: 200%; letter-spacing: 0.1em; background-color: var(--color-white); position: relative; } .footer::before { content: ""; position: absolute; top: 0; display: block; width: 100%; height: 1px; transition: background-size 1s; background-image: linear-gradient(var(--color-black), var(--color-black)); background-size: 0% 100%; background-repeat: no-repeat; } .footer.in-view::before { background-size: 100% 100%; } .footer-wrapper { width: min(90vw, 68.75rem); display: grid; justify-items: center; margin-inline: auto; } .footer ul { display: flex; align-items: center; } .footer a, .footer svg { display: block; } .footer-logo { display: none; gap: 0 3.0625rem; } .footer-logo img { align-self: end; } .footer-share-hobo, .footer-store-copy { display: flex; flex-direction: column; gap: 1.6875rem 0; } .footer-store-copy { margin-top: 0.75rem; } .footer-share ul { gap: 0 1.3125rem; } .footer-hobo { font-family: "Koburina Gothic W6 JIS2004", sans-serif; } .footer-hobo ul { gap: 0 1.3125rem; } .footer-store { font-family: "Koburina Gothic W3 JIS2004", sans-serif; } .footer-store ul { justify-content: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; } .footer-copy { text-align: center; } .footer-copy svg { display: inline-block; } @media (width >= 48rem) { .footer { padding-block: 3.1875rem 2.4375rem; } .footer-wrapper { grid-template-columns: max-content auto; grid-template-rows: 1fr auto; justify-items: unset; } .footer-logo { grid-row: 1/3; display: flex; } .footer-share ul { gap: 0 1.25rem; } .footer-share svg { height: auto; } .footer-share [data-platform=twitter] svg { width: 1.875rem; } .footer-share [data-platform=facebook] svg { width: 2.0625rem; } .footer-share [data-platform=line] svg { width: 2.0625rem; } .footer-hobo { font-size: 0.8125rem; } .footer-store ul { gap: 0 1rem; } .footer-share-hobo { align-self: end; flex-direction: row-reverse; align-items: center; gap: 0 1.3125rem; } .footer-store-copy { display: block; text-align: right; margin-top: 1.625rem; } .footer-store-copy ul { flex-wrap: wrap; justify-content: end; } .footer-store, .footer-copy { display: inline-flex; } } @media (width >= 75rem) { .footer-wrapper { transform: translateX(-0.375rem); } .footer-store { font-size: 0.625rem; } } .main { background-color: var(--color-white); } .cover { position: relative; aspect-ratio: 375/700; } .cover .logo-dc, .cover .logo-o2, .cover .text-debut { position: absolute; opacity: 0; transition: opacity 1.75s 0.25s ease-out; } .cover.in-view .logo-dc, .cover.in-view .logo-o2, .cover.in-view .text-debut { opacity: 1; } .cover .logo-dc { top: 8.2857142857%; left: 36.5333333333%; width: 26.9333333333%; height: 12.7142857143%; } .cover .logo-o2 { bottom: 3%; right: 6.1333333333%; width: 23.7333333333%; height: 7.7142857143%; } .cover .text-debut { top: 25%; right: 14.6666666667%; width: 70.6666666667%; height: 3%; } @media (width >= 48rem) { .cover { aspect-ratio: 1200/650; } .cover .logo-dc { top: 9.0769230769%; left: 5.0833333333%; width: 14.5833333333%; height: 23.8461538462%; } .cover .logo-o2 { bottom: 3.2307692308%; right: 1.9166666667%; width: 10.5833333333%; height: 11.8461538462%; } .cover .text-debut { top: 27.0769230769%; right: 16.9166666667%; width: 21.25%; height: 17.6923076923%; } } .cover-logo { transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .logo-color .cover-logo { color: var(--color-black); } .cover-picture h2 { opacity: 0; transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); } .cover-picture.in-view h2 { opacity: 1; } .cover-video { position: relative; display: grid; grid-template-areas: "stack"; } .cover-video > picture, .cover-video > video { grid-area: stack; } .cover-video { width: 100%; aspect-ratio: 9/16; color: var(--color-white); } .cover-video .logo-dc, .cover-video .logo-o2 { position: absolute; height: auto; } .cover-video .logo-dc { top: 2.9282576867%; left: 6.6666666667%; width: 32.8%; height: 15.9590043924%; } .cover-video .logo-o2 { bottom: 3.8067349927%; right: 5.6%; width: 23.7333333333%; height: 7.906295754%; } .cover-video img, .cover-video video { width: 100%; height: 100%; object-fit: cover; } @media (width >= 48rem) { .cover-video { aspect-ratio: 16/9; } .cover-video .logo-dc { top: 9.1851851852%; left: 6.0833333333%; width: 11.4166666667%; height: 17.9259259259%; } .cover-video .logo-o2 { bottom: 9.037037037%; right: 2.75%; width: 10.5833333333%; height: 11.4074074074%; } } .preface { --duration: 0.5s; --delay: 0.2s; display: flex; place-content: center; padding-block: 6.25rem; } .preface .size-l { display: none; } .preface svg { width: 20.5333333333vw; height: auto; } .preface svg path { fill: rgb(from var(--color-black) r g b/0%); transform-origin: 50%; } .preface.in-view svg path { animation: wind var(--duration) linear forwards; } .preface.in-view svg path:nth-of-type(1) { animation-delay: calc(var(--delay) * 0); } .preface.in-view svg path:nth-of-type(2) { animation-delay: calc(var(--delay) * 1); } .preface.in-view svg path:nth-of-type(3) { animation-delay: calc(var(--delay) * 2); } .preface.in-view svg path:nth-of-type(4) { animation-delay: calc(var(--delay) * 3); } .preface.in-view svg path:nth-of-type(5) { animation-delay: calc(var(--delay) * 4); } .preface.in-view svg path:nth-of-type(6) { animation-delay: calc(var(--delay) * 5); } .preface.in-view svg path:nth-of-type(7) { animation-delay: calc(var(--delay) * 6); } .preface.in-view svg path:nth-of-type(8) { animation-delay: calc(var(--delay) * 7); } .preface.in-view svg path:nth-of-type(9) { animation-delay: calc(var(--delay) * 8); } .preface.in-view svg path:nth-of-type(10) { animation-delay: calc(var(--delay) * 9); } .preface.in-view svg path:nth-of-type(11) { animation-delay: calc(var(--delay) * 10); } .preface.in-view svg path:nth-of-type(12) { animation-delay: calc(var(--delay) * 11); } .preface.in-view svg path:nth-of-type(13) { animation-delay: calc(var(--delay) * 12); } .preface.in-view svg path:nth-of-type(14) { animation-delay: calc(var(--delay) * 13); } .preface.in-view svg path:nth-of-type(15) { animation-delay: calc(var(--delay) * 14); } .preface.in-view svg path:nth-of-type(16) { animation-delay: calc(var(--delay) * 15); } .preface.in-view svg path:nth-of-type(17) { animation-delay: calc(var(--delay) * 16); } .preface.in-view svg path:nth-of-type(18) { animation-delay: calc(var(--delay) * 17); } .preface.in-view svg path:nth-of-type(19) { animation-delay: calc(var(--delay) * 18); } .preface.in-view svg path:nth-of-type(20) { animation-delay: calc(var(--delay) * 19); } .preface.in-view svg path:nth-of-type(21) { animation-delay: calc(var(--delay) * 20); } @media (width >= 48rem) { .preface { padding-block: 8.75rem; } .preface .size-l { display: block; } .preface .size-s { display: none; } .preface svg { width: 18.5625rem; height: auto; transform: scale(1); } } @keyframes wind { 0% { fill: rgb(from var(--color-black) r g b/0%); transform: translate(2px, -2px); filter: drop-shadow(-4px 2px 1px rgba(0, 0, 0, 0.5)); } 50% { filter: drop-shadow(-6px 4px 1px rgba(0, 0, 0, 0.3)); } 100% { fill: var(--color-black); transform: translate(0); filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); } } .passage p { font-family: "A1 Mincho R JIS2004 AP", serif; font-size: 0.90625rem; line-height: 200%; letter-spacing: 0.1em; } .passage p + p { margin-top: 1em; } .passage img { width: 100%; height: auto; } @media (width >= 48rem) { .passage { --passage-space: 6.25rem; } .passage p { font-size: 1rem; line-height: 218.75%; } .passage .s-only { display: none; } } .passage-1 { display: grid; grid-template-areas: "stack"; } .passage-1 > * { grid-area: stack; } .passage-1 { color: var(--color-white); } .passage-1 .para { margin: 17.6% 0 0 22.9333333333%; } .passage-1 p:last-of-type { display: none; } @media (width >= 48rem) { .passage-1 img { aspect-ratio: 1200/800; } .passage-1 .para { margin: 8.5% 8.5% 0 auto; } .passage-1 p:last-of-type { display: block; } } .passage-1-2 { display: grid; grid-template-areas: "stack"; } .passage-1-2 > * { grid-area: stack; } .passage-1-2 p { margin: 34.4% 0 0 12.8%; } @media (width >= 48rem) { .passage-1-2 { display: none; } } .passage-2 p { padding: 18.6666666667% 0 17.0666666667% 17.0666666667%; } .passage-2 picture { width: 86.9333333333%; } @media (width >= 48rem) { .passage-2 { display: flex; justify-content: start; flex-direction: row-reverse; margin-top: var(--passage-space); } .passage-2 picture { width: 43.4166666667%; } .passage-2 p { display: flex; align-items: center; padding: 0 0 0 15.6666666667%; } } .passage-3 .para { padding: 21.3333333333% 0 16.2666666667% 8.5333333333%; } .passage-3 picture { width: 86.9333333333%; margin-left: auto; } @media (width >= 48rem) { .passage-3 { display: flex; justify-content: end; } .passage-3 .para { display: flex; flex-direction: column; justify-content: center; padding: 0 16.1666666667% 0 0; } .passage-3 .para p + p { margin-top: 0; } .passage-3 picture { width: 39%; margin-left: 0; } } .passage-4 p { padding: 14.9333333333% 0 14.6666666667% 26.6666666667%; } @media (width >= 48rem) { .passage-4 { display: grid; grid-template-areas: "stack"; } .passage-4 > * { grid-area: stack; } .passage-4 p { position: relative; z-index: 1; margin: 19.5% 16.9166666667% 0 auto; padding: 0; } } .passage-5 { overflow: hidden; margin-top: 16.2666666667%; display: grid; grid-template-areas: "stack"; } .passage-5 > * { grid-area: stack; } .passage-5 p { display: flex; align-items: center; justify-content: center; transform: translateY(-1.4166666667%); } .passage-5 .video-wrapper { width: 84.8%; margin-inline: auto; aspect-ratio: 53/99; } @media (width >= 48rem) { .passage-5 { margin-top: 5rem; } .passage-5 p { transform: translateY(-1%); } .passage-5 .video-wrapper { width: 82.6666666667%; aspect-ratio: 242/145; } } .passage-6 p { display: flex; align-items: center; justify-content: center; padding-block: 13.3333333333%; } .passage-6 picture { width: 92.5333333333%; margin-left: auto; } @media (width >= 48rem) { .passage-6 { display: flex; justify-content: end; margin-top: 5rem; } .passage-6 p { padding: 0 9.6666666667% 0 0; } .passage-6 picture { width: 53.3333333333%; margin-left: 0; } } .passage-7 .para { display: flex; flex-direction: column; padding: 19.2% 0 0 12%; } @media (width >= 48rem) { .passage-7 { display: flex; flex-direction: row-reverse; justify-content: start; margin-top: var(--passage-space); } .passage-7 picture { width: 53.3333333333%; } .passage-7 .para { justify-content: center; padding: 0 0 0 6.4166666667%; transform: translateY(1.25%); } } .passage.function { display: grid; grid-template-areas: "stack"; } .passage.function > * { grid-area: stack; } .passage.function { margin-top: 2.5rem; } .passage.function .photo { width: 100%; margin-inline: auto; } .passage.function .text { --photo-delay: 0.5s; width: 54.1333333333%; height: auto; margin: 30.6666666667% auto 0; } @media (width >= 48rem) { .passage.function { margin-top: 5rem; } .passage.function .photo { width: 82.6666666667%; } .passage.function .text { width: 41.0833333333%; margin: 17.4166666667% auto 0; } } .passage-end { padding-block: 6.25rem; } .passage-end p { font-family: "A1 Mincho R JIS2004 AP", serif; font-size: 1.125rem; text-align: center; letter-spacing: 0.1em; } .passage-end p .open-bracket { letter-spacing: 0.25em; } .passage-end p .dc { letter-spacing: -0.2em; } @media (width >= 48rem) { .passage-end { padding-block: 7.5rem; } .passage-end p { font-size: 1.25rem; } .passage-end p .open-bracket { letter-spacing: 0.3em; } } .passage [data-watch=photo], .passage [data-watch=para] { opacity: 0; visibility: hidden; } .passage [data-watch=photo].in-view { animation: passage 1.5s var(--photo-delay, 0s) ease forwards; } .passage [data-watch=para].in-view { animation: passage 1.5s var(--para-delay, 0s) ease forwards; } .passage-1, .passage-1-2, .passage-5 { --para-delay: 0.5s; } .passage-2, .passage-3, .passage-4, .passage-6, .passage-7 { --photo-delay: 0.5s; } @media (width >= 48rem) { .passage-2, .passage-3, .passage-4, .passage-6, .passage-7 { --photo-delay: 0s; --para-delay: 0.5s; } } .passage-end p { visibility: hidden; opacity: 0; } .passage-end p.in-view { animation: passage 1.5s ease forwards; } @keyframes passage { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } .stroll { --speed: 60s; position: relative; overflow: hidden; display: grid; grid-auto-flow: column; } .stroll div { display: flex; } .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 img { width: 87.2vw; max-width: unset; aspect-ratio: 15/22; } .stroll h2 { position: absolute; inset: 0; display: grid; align-items: center; justify-content: center; opacity: 0; transition: opacity 1.5s 0.5s; color: var(--color-white); font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 3.6550625rem; } .stroll h2 .fullstop, .stroll h2 .debut { letter-spacing: 0.09999829em; } .stroll h2 .month { letter-spacing: 0.049999145em; } .stroll h2 .excellent { display: inline-block; letter-spacing: 0.09999829em; transform: rotate(16.45deg); } .stroll.in-view .first, .stroll.in-view .second { animation-play-state: running; } .stroll.in-view h2 { opacity: 1; } @media (width >= 48rem) { .stroll img { width: 20.75rem; aspect-ratio: 2/3; } } @keyframes stroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes stroll-again { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } .products { width: min(100%, 55.375rem); margin-inline: auto; padding-block: 3.75rem 0; } @media (width >= 48rem) { .products { padding-block: 9.375rem 0; } } .product-list + .product-title { margin-top: 3.75rem; } .product-title { --prod-title-margin: 0 1.375rem 1.25rem; margin: var(--prod-title-margin); } @media (width >= 920px) { .product-title { --prod-title-margin: 0 0 1.375rem; } .product-list + .product-title { margin-top: 5rem; } } .product-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 0.3125rem; } @media (width >= 48rem) { .product-list { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } } @media (width >= 75rem) { .product-list { gap: 1.75rem; } } .prologue { display: flex; flex-direction: column; align-items: center; gap: 0.75rem 0; padding-block: 4.375rem; width: 100%; } .prologue h2 { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 1.5rem; line-height: normal; letter-spacing: 0.1em; } .prologue .video-trailer { width: 19.875rem; } .prologue .video-trailer video { width: 100%; height: 100%; object-fit: cover; } @media (width >= 48rem) { .prologue { gap: 1.25rem 0; padding-block: 6.25rem; } .prologue h2 { font-size: 1.75rem; } .prologue .video-trailer { width: 43.75rem; aspect-ratio: 19/6; } } .banner { padding-block: 2.5rem 3.125rem; position: relative; } .banner::before { content: ""; position: absolute; top: 0; display: block; width: 100%; height: 1px; transition: background-size 1s; background-image: linear-gradient(var(--color-black), var(--color-black)); background-size: 0% 100%; background-repeat: no-repeat; } .banner.in-view::before { background-size: 100% 100%; } .banner-content { display: flex; flex-direction: column; align-items: center; gap: 0.75rem 0; width: min(90.6666666667%, 25rem); margin-inline: auto; font-size: 0.875rem; line-height: 192.857%; letter-spacing: 0.05em; } .banner .banner-img { width: 100%; height: auto; } @media (width >= 48rem) { .banner { padding-block: 2.5rem 3.75rem; } } .page-top { position: fixed; top: 1.4375rem; left: 1.125rem; opacity: 0; transition: opacity 0.25s; } .page-top.is-visible { opacity: 1; } @media (width >= 48rem) { .page-top { top: 3.1875rem; left: 3.4375rem; } .page-top svg { width: 3.4375rem; height: 3.0625rem; } }