/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } body { color: #000; font-size: 2.56vw; letter-spacing: 0.02em; line-height: 1; overflow-x: clip; position: relative; } @media screen and (min-width: 1025px) { body { font-size: 1.1111111111vw; } } body::before { content: ""; width: 100%; height: 100vh; background-image: url(../images/bg-sp.jpg); background-size: cover; background-repeat: no-repeat; position: fixed; top: 0; left: 0; z-index: -1; } @media screen and (min-width: 1025px) { body::before { background-image: url(../images/bg-pc.jpg); } } a { display: block; color: inherit; text-decoration: none; transition: all 0.6s; } img { width: 100%; display: block; } [v-cloak] { display: none; } body { font-family: dnp-shuei-gothic-kin-std, sans-serif; font-weight: 600; } .l-wrap { position: relative; margin-top: 13.3333333333vw; position: relative; } @media screen and (min-width: 1025px) { .l-wrap { margin-top: 0; } } .l-wrap::before { content: ""; width: 100%; height: 13.3333333333vw; background-color: #fff; position: absolute; top: -13.3333333333vw; left: 0; z-index: -1; } @media screen and (min-width: 1025px) { .l-wrap::before { display: none; } } .l-note { width: 100%; height: 6.6666666667vw; display: block; background-color: #fff; position: sticky; top: 0; left: 0; z-index: 40; } @media screen and (min-width: 1025px) { .l-note { height: 1.7361111111vw; } } .l-note > * { position: absolute; bottom: -3.7333333333vw; } @media screen and (min-width: 1025px) { .l-note > * { bottom: -2.0833333333vw; } } main { position: relative; } .l-main { margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .l-main { margin-top: 0; } } .p-loading { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(../images/bg-sp.jpg); background-size: cover; background-repeat: no-repeat; position: fixed; top: 0; left: 0; z-index: 100; } @media screen and (min-width: 1025px) { .p-loading { background-image: url(../images/bg-pc.jpg); } } .p-firstView { padding-top: 13.3333333333vw; padding-bottom: 2.6666666667vw; padding-left: 3.7333333333vw; position: relative; } @media screen and (min-width: 1025px) { .p-firstView { padding-top: 5.5555555556vw; padding-bottom: 0.6944444444vw; padding-left: 11.1111111111vw; } } .p-firstView__logo { width: 20.5333333333vw; position: absolute; top: -16vw; left: 4.5333333333vw; z-index: 50; } @media screen and (min-width: 1025px) { .p-firstView__logo { width: 12.5vw; top: 6.5972222222vw; right: 2.9861111111vw; left: unset; } } .p-firstView__season { width: 40.8vw; position: absolute; top: -12vw; left: 30.4vw; z-index: 50; } @media screen and (min-width: 1025px) { .p-firstView__season { width: 15.1388888889vw; top: 15.6944444444vw; right: 2.9861111111vw; left: unset; } } .p-firstView__animation { width: 28.8vw; position: absolute; top: 4.8vw; left: 7.4666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-firstView__animation { width: 12.8472222222vw; top: 20.5555555556vw; right: 2.3611111111vw; left: unset; } } .p-firstView__image { width: 90.4vw; transform: rotate(-2.95deg); } @media screen and (min-width: 1025px) { .p-firstView__image { width: 66.5277777778vw; } } .p-gallery { position: relative; overflow-x: clip; } .p-gallery > * { position: absolute; } .p-gallery--1 { width: 100%; aspect-ratio: 750/2010; } @media screen and (min-width: 1025px) { .p-gallery--1 { aspect-ratio: 1440/1335; } } .p-gallery--1 > *:nth-child(1) { width: 8.5333333333vw; top: 133.6vw; right: 3.2vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(1) { width: 4.4444444444vw; top: 35vw; right: 8.2638888889vw; } } .p-gallery--1 > *:nth-child(2) { width: 17.3333333333vw; top: 13.8666666667vw; left: 9.8666666667vw; z-index: 4; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(2) { width: 10.1388888889vw; top: 13.3333333333vw; left: 8.125vw; } } .p-gallery--1 > *:nth-child(3) { width: 37.3333333333vw; bottom: 2.9333333333vw; left: 4.8vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(3) { width: 21.5972222222vw; bottom: -1.9444444444vw; left: 4.1666666667vw; } } .p-gallery--1 > *:nth-child(4) { width: 7.4666666667vw; top: 139.2vw; left: 5.0666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(4) { width: 3.8888888889vw; top: 60.1388888889vw; left: 5.4861111111vw; } } .p-gallery--1 > *:nth-child(5) { width: 13.3333333333vw; top: 148.2666666667vw; left: 14.1333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(5) { width: 7.7777777778vw; top: unset; bottom: 17.9861111111vw; left: 6.9444444444vw; } } .p-gallery--1 > *:nth-child(6) { width: 26.4vw; top: 18.6666666667vw; left: 19.2vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(6) { width: 15.4166666667vw; top: 16.25vw; left: 13.4027777778vw; } } .p-gallery--1 > *:nth-child(7) { width: 32.8vw; top: 25.0666666667vw; left: 4.8vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(7) { width: 19.0972222222vw; top: 19.7916666667vw; left: 5.1388888889vw; } } .p-gallery--1 > *:nth-child(8) { width: 32vw; top: 28vw; left: 38.9333333333vw; z-index: 4; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(8) { width: 18.4722222222vw; top: 21.5277777778vw; left: 25vw; } } .p-gallery--1 > *:nth-child(9) { width: 50.9333333333vw; top: 46.1333333333vw; left: 3.4666666667vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(9) { width: 29.4444444444vw; top: 32.0833333333vw; left: 4.375vw; } } .p-gallery--1 > *:nth-child(10) { width: 65.6vw; top: 86.6666666667vw; right: 4vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(10) { width: 37.9861111111vw; top: 12.6388888889vw; right: 14.5833333333vw; } } .p-gallery--1 > *:nth-child(11) { width: 30.4vw; top: 149.8666666667vw; right: 14.1333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(11) { width: 22.0833333333vw; top: 47.8472222222vw; right: 16.5972222222vw; } } .p-gallery--1 > *:nth-child(12) { width: 36.8vw; bottom: 46.6666666667vw; left: -6.1333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(12) { width: 21.4583333333vw; bottom: 11.0416666667vw; left: 17.5694444444vw; } } .p-gallery--1 > *:nth-child(13) { width: 27.2vw; bottom: 0; right: 2.1333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(13) { width: 14.2361111111vw; right: 2.9861111111vw; bottom: 7.9861111111vw; } } .p-gallery--1 > *:nth-child(15) { width: 17.0666666667vw; top: 78.9333333333vw; left: 36.2666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(15) { width: 9.5138888889vw; top: 8.0555555556vw; left: 50.9722222222vw; } } .p-gallery--1 > *:nth-child(16) { width: 18.6666666667vw; top: 143.2vw; right: 2.4vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(16) { width: 13.5416666667vw; top: 43.0555555556vw; right: 8.2638888889vw; } } .p-gallery--1 > *:nth-child(17) { width: 75.2vw; top: 0; right: 1.3333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(17) { width: 43.4722222222vw; right: 4.6527777778vw; } } .p-gallery--1 > *:nth-child(18) { width: 47.4666666667vw; bottom: 10.1333333333vw; left: 4vw; } @media screen and (min-width: 1025px) { .p-gallery--1 > *:nth-child(18) { width: 27.3611111111vw; bottom: 2.0833333333vw; left: 3.6111111111vw; } } .p-gallery--1 .gifSlide { width: 54.9333333333vw; bottom: 27.2vw; left: 26.1333333333vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--1 .gifSlide { width: 31.8055555556vw; bottom: 0; left: 36.4583333333vw; } } .p-gallery--2 { width: 100%; aspect-ratio: 750/2350; margin-top: 5.3333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--2 { aspect-ratio: 1440/1708; margin-top: 6.5972222222vw; } } .p-gallery--2 > *:nth-child(1) { width: 20.8vw; top: 117.6vw; right: 8.5333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(1) { width: 11.9444444444vw; top: 38.8194444444vw; right: 4.5833333333vw; } } .p-gallery--2 > *:nth-child(2) { width: 10.6666666667vw; top: 115.4666666667vw; left: 22.4vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(2) { width: 6.0416666667vw; top: 27.3611111111vw; left: 41.3194444444vw; } } .p-gallery--2 > *:nth-child(3) { width: 9.3333333333vw; top: 139.7333333333vw; left: 6.4vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(3) { width: 5.4166666667vw; top: 41.5277777778vw; left: 32.1527777778vw; } } .p-gallery--2 > *:nth-child(4) { width: 15.4666666667vw; right: 13.3333333333vw; bottom: 76vw; z-index: 4; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(4) { width: 8.9583333333vw; right: 34.5833333333vw; bottom: 27.1527777778vw; } } .p-gallery--2 > *:nth-child(5) { width: 41.3333333333vw; bottom: 80.8vw; right: 8.8vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(5) { width: 23.9583333333vw; bottom: 30vw; right: 32.0833333333vw; } } .p-gallery--2 > *:nth-child(6) { width: 52.8vw; top: 50.6666666667vw; right: 8vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(6) { width: 30.5555555556vw; top: 0; right: 4.5138888889vw; } } .p-gallery--2 > *:nth-child(7) { width: 36vw; top: 22.6666666667vw; left: 6.6666666667vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(7) { width: 20.8333333333vw; top: 18.75vw; left: 7.7777777778vw; } } .p-gallery--2 > *:nth-child(8) { width: 38.6666666667vw; bottom: 88vw; left: 6.6666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(8) { width: 22.4305555556vw; bottom: 36.0416666667vw; left: 10.6944444444vw; } } .p-gallery--2 > *:nth-child(9) { width: 32.8vw; top: 149.3333333333vw; right: 0; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(9) { width: 17.7083333333vw; top: 54.375vw; right: 9.0972222222vw; } } .p-gallery--2 > *:nth-child(10) { width: 71.4666666667vw; bottom: 20.8vw; left: 11.7333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(10) { width: 41.4583333333vw; bottom: 0; left: 29.2361111111vw; } } .p-gallery--2 > *:nth-child(11) { width: 41.3333333333vw; top: 122.1333333333vw; left: 10.4vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(11) { width: 23.75vw; top: 31.3888888889vw; left: 34.5138888889vw; } } .p-gallery--2 > *:nth-child(12) { width: 20vw; bottom: 76vw; right: -2.4vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(12) { width: 11.5972222222vw; bottom: 27.1527777778vw; right: 25.6944444444vw; } } .p-gallery--2 > *:nth-child(13) { width: 60.8vw; top: 0; right: 5.0666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(13) { width: 35.2083333333vw; top: 14.8611111111vw; left: 31.5277777778vw; z-index: 3; } } .p-gallery--2 > *:nth-child(14) { width: 40.5333333333vw; right: 5.3333333333vw; bottom: 0; } @media screen and (min-width: 1025px) { .p-gallery--2 > *:nth-child(14) { width: 23.4722222222vw; right: 4.4444444444vw; bottom: 6.6666666667vw; } } .p-gallery--3 { width: 100%; aspect-ratio: 750/1560; } @media screen and (min-width: 1025px) { .p-gallery--3 { aspect-ratio: 1440/1040; } } .p-gallery--3 > *:nth-child(1) { width: 42.6666666667vw; top: 25.6vw; left: 8.8vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(1) { width: 24.7222222222vw; top: 0; left: 40.4166666667vw; } } .p-gallery--3 > *:nth-child(2) { width: 48.8vw; top: 29.8666666667vw; right: 6.9333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(2) { width: 28.1944444444vw; top: 2.5vw; right: 10.8333333333vw; } } .p-gallery--3 > *:nth-child(3) { width: 42.9333333333vw; top: 112.5333333333vw; left: 0; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(3) { width: 24.7916666667vw; top: 35.2777777778vw; left: 13.8888888889vw; } } .p-gallery--3 > *:nth-child(4) { width: 42.6666666667vw; top: 106.4vw; left: 4.5333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(4) { width: 24.5833333333vw; top: 31.8055555556vw; left: 16.5277777778vw; } } .p-gallery--3 > *:nth-child(5) { width: 44.5333333333vw; bottom: 10.4vw; left: 8.8vw; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(5) { width: 25.625vw; bottom: 1.4583333333vw; left: 18.1944444444vw; } } .p-gallery--3 > *:nth-child(6) { width: 14.9333333333vw; right: 28vw; bottom: 0; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(6) { width: 8.6111111111vw; right: 16.3888888889vw; } } .p-gallery--3 > *:nth-child(7) { width: 54.9333333333vw; top: 0; left: 1.3333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(7) { width: 31.7361111111vw; top: 10.0694444444vw; left: 3.8194444444vw; } } .p-gallery--3 > *:nth-child(8) { width: 20.2666666667vw; right: 17.0666666667vw; bottom: 39.4666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(8) { width: 11.6666666667vw; right: 10vw; bottom: 17.7083333333vw; } } .p-gallery--3 > *:nth-child(9) { width: 30.9333333333vw; right: 3.2vw; bottom: 23.4666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--3 > *:nth-child(9) { width: 17.8472222222vw; right: 2.0833333333vw; bottom: 13.75vw; } } .p-gallery--3 .gif { width: 80vw; aspect-ratio: 300/245; right: 4.8vw; bottom: 35.2vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--3 .gif { width: 40.1388888889vw; aspect-ratio: 578/464; right: 16.3888888889vw; bottom: 0; } } .p-gallery--3 .gif > * { position: absolute; } .p-gallery--3 .gif > *:nth-child(1) { width: 23.4666666667vw; top: 0; right: 0; } @media screen and (min-width: 1025px) { .p-gallery--3 .gif > *:nth-child(1) { width: 10.3472222222vw; } } .p-gallery--3 .gif > *:nth-child(2) { width: 28vw; top: 10.1333333333vw; left: 31.4666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--3 .gif > *:nth-child(2) { width: 12.4305555556vw; top: 4.5833333333vw; left: 18.4027777778vw; } } .p-gallery--3 .gif > *:nth-child(3) { width: 38.4vw; bottom: 0; left: 0; } @media screen and (min-width: 1025px) { .p-gallery--3 .gif > *:nth-child(3) { width: 22.3611111111vw; } } .p-gallery--4 { width: 100%; aspect-ratio: 750/2182; margin-top: 1.0666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--4 { aspect-ratio: 1440/1220; margin-top: 10.0694444444vw; } } .p-gallery--4 > *:nth-child(1) { width: 30.1333333333vw; right: 5.0666666667vw; bottom: 17.3333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(1) { width: 17.8472222222vw; right: 4.6527777778vw; bottom: 1.7361111111vw; z-index: 2; } } .p-gallery--4 > *:nth-child(2) { width: 43.4666666667vw; top: 8.2666666667vw; left: -6.1333333333vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(2) { width: 22.9861111111vw; top: 6.3888888889vw; left: 5.7638888889vw; } } .p-gallery--4 > *:nth-child(3) { width: 131.4666666667vw; max-inline-size: none; top: 85.8666666667vw; left: -6.4vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(3) { width: 76.1111111111vw; top: 4.0972222222vw; left: 7.6388888889vw; } } .p-gallery--4 > *:nth-child(4) { width: 51.2vw; top: 0; left: 20.5333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(4) { width: 27.0138888889vw; top: 2.0138888889vw; left: 19.9305555556vw; } } .p-gallery--4 > *:nth-child(5) { width: 53.6vw; top: 92.8vw; right: 14.6666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(5) { width: 38.5416666667vw; top: 0; right: 12.2916666667vw; } } .p-gallery--4 > *:nth-child(6) { width: 19.2vw; top: 116.2666666667vw; right: 2.9333333333vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(6) { width: 13.8194444444vw; top: 16.9444444444vw; right: 3.9583333333vw; } } .p-gallery--4 > *:nth-child(7) { width: 52.8vw; top: 10.6666666667vw; left: 7.4666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(7) { width: 27.9861111111vw; top: 7.5vw; left: 12.9861111111vw; } } .p-gallery--4 > *:nth-child(8) { width: 27.7333333333vw; bottom: 31.2vw; left: 33.0666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(8) { width: 13.8194444444vw; bottom: 0; left: 27.2916666667vw; } } .p-gallery--4 > *:nth-child(9) { width: 34.6666666667vw; bottom: 32.2666666667vw; left: -3.4666666667vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(9) { width: 17.2916666667vw; bottom: 0.6944444444vw; left: 9.0972222222vw; } } .p-gallery--4 > *:nth-child(10) { width: 19.2vw; right: 28.5333333333vw; bottom: 66.1333333333vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(10) { width: 9.4444444444vw; right: 53.5416666667vw; bottom: 17.6388888889vw; } } .p-gallery--4 > *:nth-child(11) { width: 61.3333333333vw; bottom: 0; left: 5.8666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(11) { width: 35.4166666667vw; bottom: 2.0833333333vw; left: 43.4722222222vw; } } .p-gallery--4 > *:nth-child(12) { width: 25.8666666667vw; bottom: 62.4vw; left: 16.2666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--4 > *:nth-child(12) { width: 12.9166666667vw; bottom: 19.0277777778vw; left: 15.625vw; } } .p-gallery--4 .gifSlide { width: 75.2vw; aspect-ratio: 564/349; bottom: 95.4666666667vw; left: 12vw; } @media screen and (min-width: 1025px) { .p-gallery--4 .gifSlide { width: 37.1527777778vw; bottom: 20vw; left: 49.1666666667vw; } } .p-gallery--5 { width: 100%; aspect-ratio: 750/2220; margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--5 { aspect-ratio: 1440/1616; margin-top: 10.4166666667vw; } } .p-gallery--5 > *:nth-child(1) { width: 32.5333333333vw; top: 111.2vw; right: 5.3333333333vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(1) { width: 22.9861111111vw; top: 30vw; right: 36.3194444444vw; z-index: 3; } } .p-gallery--5 > *:nth-child(2) { width: 9.6vw; top: 11.7333333333vw; left: 44.2666666667vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(2) { width: 7.5vw; top: 8.8888888889vw; left: 41.0416666667vw; } } .p-gallery--5 > *:nth-child(3) { width: 22.6666666667vw; right: 8.5333333333vw; bottom: 119.4666666667vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(3) { width: 20.4861111111vw; right: 10.8333333333vw; bottom: 46.7361111111vw; } } .p-gallery--5 > *:nth-child(4) { width: 7.7333333333vw; right: 21.3333333333vw; bottom: 127.2vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(4) { width: 6.9444444444vw; right: 22.6388888889vw; bottom: 53.8194444444vw; } } .p-gallery--5 > *:nth-child(5) { width: 25.0666666667vw; top: 5.6vw; left: 17.6vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(5) { width: 19.4444444444vw; top: 4.5833333333vw; left: 20.3472222222vw; } } .p-gallery--5 > *:nth-child(6) { width: 28.5333333333vw; top: 0; left: 1.8666666667vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(6) { width: 22.0833333333vw; left: 8.0555555556vw; } } .p-gallery--5 > *:nth-child(7) { width: 61.0666666667vw; top: 40.5333333333vw; right: 0; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(7) { width: 33.0555555556vw; top: 1.3888888889vw; right: 8.0555555556vw; } } .p-gallery--5 > *:nth-child(8) { width: 30.4vw; top: 18.1333333333vw; left: 18.6666666667vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(8) { width: 23.6805555556vw; top: 13.8194444444vw; left: 21.1805555556vw; } } .p-gallery--5 > *:nth-child(9) { width: 80vw; left: 9.8666666667vw; bottom: 52.8vw; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(9) { width: 40.9722222222vw; bottom: 26.9444444444vw; left: 30.0694444444vw; z-index: 2; } } .p-gallery--5 > *:nth-child(10) { width: 80vw; bottom: 0; left: 9.8666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(10) { width: 40.9722222222vw; left: 30.0694444444vw; } } .p-gallery--5 > *:nth-child(11) { width: 10.4vw; right: 11.4666666667vw; bottom: 106.1333333333vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(11) { width: 9.4444444444vw; right: 13.5416666667vw; bottom: 34.5138888889vw; } } .p-gallery--5 > *:nth-child(12) { width: 17.8666666667vw; right: 2.1333333333vw; bottom: 110.4vw; z-index: 4; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(12) { width: 16.3194444444vw; right: 4.8611111111vw; bottom: 38.6111111111vw; } } .p-gallery--5 > *:nth-child(13) { width: 44.8vw; bottom: 153.0666666667vw; left: 7.7333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(13) { width: 25.9027777778vw; bottom: 33.1944444444vw; left: 3.8194444444vw; z-index: 2; } } .p-gallery--5 > *:nth-child(14) { width: 49.8666666667vw; bottom: 129.8666666667vw; left: 3.2vw; } @media screen and (min-width: 1025px) { .p-gallery--5 > *:nth-child(14) { width: 28.8888888889vw; bottom: 19.7916666667vw; left: 1.1805555556vw; z-index: 2; } } .p-gallery--6 { width: 100%; aspect-ratio: 750/1867; } @media screen and (min-width: 1025px) { .p-gallery--6 { aspect-ratio: 1440/1297; } } .p-gallery--6 > *:nth-child(1) { width: 50.9333333333vw; bottom: 49.6vw; left: 0; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(1) { width: 33.6111111111vw; bottom: 22.9166666667vw; left: 5.5555555556vw; } } .p-gallery--6 > *:nth-child(2) { width: 17.3333333333vw; bottom: 83.2vw; left: 4vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(2) { width: 11.8055555556vw; bottom: 45vw; left: 7.1527777778vw; } } .p-gallery--6 > *:nth-child(3) { width: 53.0666666667vw; bottom: 55.7333333333vw; left: 5.8666666667vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(3) { width: 35.0694444444vw; bottom: 26.7361111111vw; left: 8.6111111111vw; } } .p-gallery--6 > *:nth-child(4) { width: 60.8vw; top: 17.3333333333vw; right: 8.5333333333vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(4) { width: 33.0555555556vw; top: 0; right: 10.8333333333vw; } } .p-gallery--6 > *:nth-child(5) { width: 30.4vw; top: 72vw; left: 9.3333333333vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(5) { width: 16.5277777778vw; top: 29.8611111111vw; left: 44.5138888889vw; } } .p-gallery--6 > *:nth-child(6) { width: 30.1333333333vw; bottom: 0; left: 2.1333333333vw; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(6) { width: 14.9305555556vw; left: 17.9166666667vw; } } .p-gallery--6 > *:nth-child(7) { width: 30.1333333333vw; bottom: 0; left: 34.6666666667vw; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(7) { width: 14.9305555556vw; left: 34.375vw; } } .p-gallery--6 > *:nth-child(8) { width: 30.1333333333vw; right: 2.1333333333vw; bottom: 0; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(8) { width: 14.9305555556vw; right: 34.2361111111vw; } } .p-gallery--6 > *:nth-child(9) { width: 31.7333333333vw; right: 24.5333333333vw; bottom: 97.0666666667vw; z-index: 1; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(9) { width: 15.8333333333vw; right: 17.6388888889vw; bottom: 19.3055555556vw; } } .p-gallery--6 > *:nth-child(10) { width: 36vw; right: 1.6vw; bottom: 88.5333333333vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(10) { width: 19.375vw; right: 4.0972222222vw; bottom: 14.5138888889vw; } } .p-gallery--6 > *:nth-child(11) { width: 17.0666666667vw; right: 18.1333333333vw; bottom: 122.1333333333vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(11) { width: 9.0277777778vw; right: 13.125vw; bottom: 32.7777777778vw; } } .p-gallery--6 > *:nth-child(12) { width: 72.2666666667vw; top: 0; left: 4vw; z-index: 2; } @media screen and (min-width: 1025px) { .p-gallery--6 > *:nth-child(12) { width: 41.8055555556vw; top: 10.0694444444vw; left: 7.5vw; } } body { font-family: dnp-shuei-gothic-kin-std, sans-serif; font-weight: 600; } .p-section { display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } .p-section + .p-section { margin-top: 26.6666666667vw; } @media screen and (min-width: 1025px) { .p-section + .p-section { margin-top: 6.9444444444vw; } } .p-section__index { width: 100%; font-size: 4vw; font-family: patrick-hand-sc, sans-serif; } @media screen and (min-width: 1025px) { .p-section__index { font-size: 1.8055555556vw; } } .p-section__list { width: 91.4666666667vw; margin-top: 10.6666666667vw; } @media screen and (min-width: 1025px) { .p-section__list { width: 90vw; display: flex; margin-top: 3.4722222222vw; flex-wrap: wrap; justify-content: center; column-gap: 8.75vw; } } .p-section__list > li { padding: 8vw 0 6.6666666667vw; display: flex; flex-direction: column; align-items: center; position: relative; } @media screen and (min-width: 1025px) { .p-section__list > li { padding: 4.1666666667vw 0; } } .p-section__list > li::before { content: ""; width: 89.3333333333vw; aspect-ratio: 670/10; background-image: url(../images/contents/border-sp.svg); background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; } @media screen and (min-width: 1025px) { .p-section__list > li::before { content: none; } } @media screen and (min-width: 1025px) { .p-section__list > li:nth-child(2n-1)::before { content: ""; width: 90vw; aspect-ratio: 1296/8.8; background-image: url(../images/contents/border-pc.svg); background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: -3.125vw; } } .p-section__images { width: 84.8vw; aspect-ratio: 318/247; margin-top: 1.3333333333vw; position: relative; } @media screen and (min-width: 1025px) { .p-section__images { width: 36.25vw; margin-top: 0.5555555556vw; } } .p-section__slide { width: 49.4666666667vw; position: absolute; top: 0; left: 0; } @media screen and (min-width: 1025px) { .p-section__slide { width: 21.4583333333vw; } } .p-section__pola { position: absolute; z-index: 5; } .p-section__credits { width: 86.4vw; margin-top: 4vw; display: flex; flex-direction: column; gap: 2vw; } @media screen and (min-width: 1025px) { .p-section__credits { width: 37.5vw; margin-top: 1.3888888889vw; gap: 0.8333333333vw; } } .p-section__credits > li .link { display: flex; align-items: center; justify-content: space-between; } @media screen and (min-width: 1025px) { .p-section__credits > li .link:hover { opacity: 0.6; } } .p-section__credits > li .text { max-width: 66.6666666667vw; } @media screen and (min-width: 1025px) { .p-section__credits > li .text { max-width: 29.1666666667vw; } } .p-section__credits > li .line { height: 0.2666666667vw; margin: 0 2.6666666667vw; flex-grow: 1; background-image: radial-gradient(circle, #000 20%, transparent 20%); background-size: 2.6666666667vw 0.5333333333vw; background-repeat: repeat-x; } @media screen and (min-width: 1025px) { .p-section__credits > li .line { height: 0.0694444444vw; margin: 0 0.6944444444vw; background-size: 1.3888888889vw 0.1388888889vw; } } .p-section__credits > li .buy { width: 7.7333333333vw; aspect-ratio: 29/18; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #009B5D; font-family: chelsea-market-pro, sans-serif; background-color: #fff; border-radius: 50%; } @media screen and (min-width: 1025px) { .p-section__credits > li .buy { width: 3.3333333333vw; } } .p-section__desc { width: 86.4vw; margin-top: 4vw; font-size: 2.24vw; font-family: mamelon, sans-serif; font-weight: 500; line-height: 2; } @media screen and (min-width: 1025px) { .p-section__desc { width: 37.5vw; margin-top: 2.0833333333vw; font-size: 0.9722222222vw; } } .p-section__plus { width: 78.6666666667vw; margin-top: 4vw; } @media screen and (min-width: 1025px) { .p-section__plus { width: 37.5vw; margin-top: 1.7361111111vw; } } .p-section__plusImg { width: 100%; aspect-ratio: 526/339; display: flex; flex-direction: column; align-items: center; position: relative; } @media screen and (min-width: 1025px) { .p-section__plusImg { aspect-ratio: 539/339; } } .p-section__plusImg > * { position: absolute; } .p-section__plusImg > *:nth-child(1) { width: 65.0666666667vw; right: 4.8vw; bottom: 0; z-index: 2; } @media screen and (min-width: 1025px) { .p-section__plusImg > *:nth-child(1) { width: 31.1111111111vw; right: 3.4722222222vw; } } .p-section__plusImg > *:nth-child(2) { width: 13.3333333333vw; top: -5.3333333333vw; left: 5.3333333333vw; z-index: 3; } @media screen and (min-width: 1025px) { .p-section__plusImg > *:nth-child(2) { width: 4.8611111111vw; top: -1.6666666667vw; left: 1.25vw; } } .p-section__plusImg > *:nth-child(3) { width: 47.4666666667vw; top: 0; left: 0; z-index: 1; } @media screen and (min-width: 1025px) { .p-section__plusImg > *:nth-child(3) { width: 24.7916666667vw; left: -2.5694444444vw; } } .p-section__plus .p-section__credits { width: 100%; } .p-section--1 .p-section__top { margin-top: 5.3333333333vw; } @media screen and (min-width: 1025px) { .p-section--1 .p-section__top { width: 77.0833333333vw; margin-top: 4.1666666667vw; } } .p-section--1 .p-section__list > li:nth-child(1) .pola, .p-section--1 .p-section__list > li:nth-child(5) .pola { width: 50.9433962264%; top: 15.5339805825%; right: -7.1698113208%; } .p-section--1 .p-section__list > li:nth-child(2) .pola { width: 43.5849056604%; top: 9.9514563107%; right: -3.7735849057%; } .p-section--1 .p-section__list > li:nth-child(3) .pola { width: 55.8490566038%; top: 13.3495145631%; right: -9.0566037736%; } .p-section--1 .p-section__list > li:nth-child(4) .pola { width: 48.4905660377%; top: 9.4660194175%; right: -3.5849056604%; } .p-section--1 .p-section__list > li:nth-child(6) .pola { width: 47.9245283019%; top: 6.7961165049%; right: -7.5471698113%; } .p-section--1 .p-section__list > li:nth-child(7) .pola { width: 45.4716981132%; top: 13.1067961165%; right: -5.6603773585%; } .p-section--1 .p-section__list > li:nth-child(8) .pola { width: 42.8301886792%; top: 11.4077669903%; right: -4.9056603774%; } .p-section--1 .p-section__list > li:nth-child(8) .clip { width: 17.7358490566%; aspect-ratio: 94/168; background-image: url(../images/contents/scene1/clip.png); background-size: contain; background-repeat: no-repeat; position: absolute; top: -1.6990291262%; right: -8.4905660377%; z-index: 10; } .p-section--2 .p-section__top { aspect-ratio: 750/224; overflow: hidden; } @media screen and (min-width: 1025px) { .p-section--2 .p-section__top { aspect-ratio: 1440/431; } } .p-section--2 .p-section__top .parallax { overflow: hidden; } .p-section--2 .p-section__list > li:nth-child(1) .pola, .p-section--2 .p-section__list > li:nth-child(3) .pola { width: 41.5094339623%; top: 18.6893203883%; right: -3.7735849057%; } .p-section--2 .p-section__list > li:nth-child(2) .pola, .p-section--2 .p-section__list > li:nth-child(4) .pola { width: 41.5094339623%; top: 18.6893203883%; right: -5.0943396226%; } .p-section--3 .p-section__list > li:nth-child(1) .pola { width: 51.320754717%; top: 15.2912621359%; right: -9.6226415094%; } .p-section--3 .p-section__list > li:nth-child(2) .pola { width: 51.1320754717%; top: 27.9126213592%; right: -8.1132075472%; } .p-section--4 .p-section__top { aspect-ratio: 750/412; overflow: hidden; } @media screen and (min-width: 1025px) { .p-section--4 .p-section__top { aspect-ratio: 1440/791; } } .p-section--4 .p-section__top .parallax { overflow: hidden; } .p-section--4 .p-section__list > li:nth-child(1) .pola { width: 40.5660377358%; top: 15.2912621359%; right: -0.5660377358%; } .p-section--4 .p-section__list > li:nth-child(2) .pola { width: 46.2264150943%; top: 10.9223300971%; right: -3.0188679245%; } .p-section--4 .p-section__list > li:nth-child(3) .pola { width: 46.4150943396%; top: 12.1359223301%; right: -7.7358490566%; } .p-section--4 .p-section__list > li:nth-child(4) .pola { width: 47.5471698113%; top: 10.1941747573%; right: -5.6603773585%; } .p-section--5 .p-section__top { aspect-ratio: 750/307; overflow: hidden; } @media screen and (min-width: 1025px) { .p-section--5 .p-section__top { aspect-ratio: 1440/589; } } .p-section--5 .p-section__top .parallax { overflow: hidden; } .p-section--5 .p-section__list > li:nth-child(1) .pola { width: 51.8867924528%; top: 10.6796116505%; right: -6.2264150943%; } .p-section--5 .p-section__list > li:nth-child(2) .pola { width: 46.2264150943%; top: 9.7087378641%; right: -3.0188679245%; } .p-section--5 .p-section__list > li:nth-child(3) .pola { width: 47.5471698113%; top: 6.7961165049%; right: -3.5849056604%; } .p-section--5 .p-section__list > li:nth-child(4) .pola { width: 46.9811320755%; top: 6.7961165049%; right: -4.7169811321%; } .p-section--6 .p-section__list > li:nth-child(1) .pola { width: 44.1509433962%; top: 13.8349514563%; right: -2.2641509434%; } .p-section--6 .p-section__list > li:nth-child(2) .pola { width: 61.320754717%; top: 5.3398058252%; right: -12.0754716981%; } .p-footer { aspect-ratio: 750/887; margin-top: 2.6666666667vw; padding-top: 8vw; display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 3.3333333333vw; font-family: brother-1816, sans-serif; font-weight: 400; letter-spacing: 0.08em; background-image: url(../images/footer/bg-sp.jpg); background-size: contain; } @media screen and (min-width: 1025px) { .p-footer { aspect-ratio: 1440/650; margin-top: 1.3888888889vw; padding-top: 5.9722222222vw; font-size: 1.0416666667vw; background-image: url(../images/footer/bg-pc.jpg); background-size: cover; position: relative; } } .p-footer__logo { width: 37.3333333333vw; } @media screen and (min-width: 1025px) { .p-footer__logo { width: 19.4444444444vw; } } .p-footer__text { width: 21.8666666667vw; margin-top: 2.1333333333vw; } @media screen and (min-width: 1025px) { .p-footer__text { width: 11.3194444444vw; margin-top: 1.0416666667vw; } } .p-footer__list { margin-top: 12vw; display: flex; flex-direction: column; align-items: center; gap: 5.8666666667vw; } @media screen and (min-width: 1025px) { .p-footer__list { width: 65.4861111111vw; margin-top: 0; flex-direction: row; justify-content: space-between; position: absolute; top: 10.7638888889vw; } } .p-footer__list a { text-decoration: underline; } @media screen and (min-width: 1025px) { .p-footer__list a:hover { opacity: 0.6; } } @media screen and (min-width: 1025px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 1024px) { .u-hidden-sp { display: none !important; } }/*# sourceMappingURL=app.css.map */