/*** 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: 4vw; letter-spacing: 0.02em; line-height: 1; background-color: #CBE689; overflow-x: clip; position: relative; } @media screen and (min-width: 1025px) { body { font-size: 26px; } } a { display: block; color: inherit; text-decoration: none; transition: all 0.6s; } img { width: 100%; display: block; } [v-cloak] { display: none; } body { font-family: tt-modernoir, sans-serif; font-weight: 400; } @media screen and (min-width: 1025px) { .l-main { width: 650px; margin-inline: auto; position: relative; } .l-main::before { content: ""; width: 100%; height: 100vh; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-size: cover; position: fixed; top: 0; left: 0; z-index: -10; } } .p-loading { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #CBE689; position: fixed; top: 0; left: 0; z-index: 200; } .p-loading__icon { width: 29.3333333333vw; } @media screen and (min-width: 1025px) { .p-loading__icon { width: 10.4166666667vw; } } .p-animation { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; background-color: #CBE689; } .p-animation__slide { width: 100%; height: 100%; max-height: 100svh; display: flex; flex-direction: column; align-items: center; } .p-animation__slide img { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; object-fit: contain; } .p-firstView { width: 100%; height: 100vh; position: relative; } .p-firstView__slide { width: 100%; height: 100%; z-index: -1; } .p-firstView__slide img { width: 100%; height: 100%; object-fit: cover; } .p-firstView__top { width: 93.6vw; position: absolute; top: 1.4992503748%; left: 2vw; } @media screen and (min-width: 1025px) { .p-firstView__top { width: 48.75vw; top: unset; bottom: 24.4444444444%; left: 3.8888888889vw; } } .p-firstView__heading { display: flex; gap: 1.0666666667vw; } @media screen and (min-width: 1025px) { .p-firstView__heading { gap: 0.5555555556vw; } } .p-firstView__heading .icon { width: 22.8vw; } @media screen and (min-width: 1025px) { .p-firstView__heading .icon { width: 9.4444444444vw; } } .p-firstView__heading .title { width: 69.7333333333vw; } @media screen and (min-width: 1025px) { .p-firstView__heading .title { width: 29.0277777778vw; } } .p-firstView__text { width: 64.2666666667vw; margin-top: 1.8666666667vw; margin-left: 1.8666666667vw; } @media screen and (min-width: 1025px) { .p-firstView__text { width: 26.3888888889vw; margin-top: 0.9722222222vw; margin-left: 0.9722222222vw; } } .p-firstView__logo { width: 84.9333333333vw; position: absolute; top: 45.952023988%; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1025px) { .p-firstView__logo { width: 41.6666666667vw; top: unset; bottom: 6.2222222222%; left: 4.3055555556vw; transform: none; } } .p-firstView__season { width: 93.3333333333vw; display: flex; justify-content: space-between; color: #CBE689; font-size: 2.5333333333vw; font-family: adapt-variable, sans-serif; font-variation-settings: "wdth" 100, "wght" 400; position: absolute; bottom: 2.9985007496%; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1025px) { .p-firstView__season { width: 10.4166666667vw; font-size: 1.4583333333vw; bottom: 5.5555555556%; right: 6.9444444444vw; left: unset; transform: none; } } body { font-family: tt-modernoir, sans-serif; font-weight: 400; } .p-section { display: flex; flex-direction: column; align-items: center; overflow-x: clip; } .p-section__credit { width: 91.3333333333%; display: flex; column-gap: 20vw; } @media screen and (min-width: 1025px) { .p-section__credit { width: 598px; column-gap: 132px; } } .p-section__creditTtl { font-size: 2.8vw; font-family: nimbus-sans, sans-serif; font-weight: 400; } @media screen and (min-width: 1025px) { .p-section__creditTtl { font-size: 18px; } } .p-section__creditTtl + .p-section__creditList { margin-top: 1.6vw; } @media screen and (min-width: 1025px) { .p-section__creditTtl + .p-section__creditList { margin-top: 15px; } } .p-section__creditList { width: 30.4vw; display: flex; flex-direction: column; gap: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-section__creditList { width: 193px; gap: 18px; } } .p-section__creditList > li > * { display: flex; align-items: center; justify-content: space-between; } @media screen and (min-width: 1025px) { .p-section__creditList > li > a:hover { opacity: 0.6; } } .p-section__creditList .buy { font-weight: 500; } .p-section__creditList .coming { font-size: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-section__creditList .coming { font-size: 20px; } } .p-section#section-1 { padding-top: 8.6666666667%; background-color: #F5A190; } .p-section#section-1 .p-section__credit { padding-top: 6.6666666667%; padding-bottom: 7.4666666667%; } .p-section#section-1 .p-section__credit .buy { color: #CBE689; } .p-section#section-1 .top { width: 91.3333333333%; } .p-section#section-1 .sticky { position: relative; } .p-section#section-1 .sticky .bg { width: 100%; position: sticky; top: 0; z-index: 0; } .p-section#section-1 .sticky .main { width: 100%; aspect-ratio: 750/539; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; } .p-section#section-1 .sticky .main > img { width: 71.8666666667%; } .p-section#section-1 .scale { width: 100%; aspect-ratio: 750/630; position: relative; overflow: hidden; } .p-section#section-1 .scale > * { position: absolute; } .p-section#section-1 .scale .star { width: 7.4666666667%; top: 16.8253968254%; left: 5.7333333333%; } .p-section#section-1 .scale .text { width: 47.4666666667%; top: 5.7142857143%; right: 4.8%; } .p-section#section-1 .scale .for { width: 26.6666666667%; top: 26.6666666667%; right: 3.4666666667%; } .p-section#section-1 .scale .main { width: 82%; max-height: none; top: -19.0476190476%; left: -0.5333333333%; z-index: 1; } .p-section#section-1 .gallery { width: 100%; aspect-ratio: 750/437; background-color: #CBE689; position: relative; overflow: hidden; } .p-section#section-1 .gallery > * { position: absolute; } .p-section#section-1 .gallery .text-1 { width: 24.9333333333%; top: 27.9176201373%; left: 9.2%; } .p-section#section-1 .gallery .text-2 { width: 36.6666666667%; top: 51.9450800915%; left: 7.7333333333%; } .p-section#section-1 .gallery .main { width: 100%; max-height: none; bottom: 0; } .p-section#section-2 { background-color: #fff; } .p-section#section-2 .p-section__credit { margin-top: 4%; position: relative; z-index: 2; } .p-section#section-2 .p-section__credit .buy { color: #EA5514; } .p-section#section-2 .flex { display: flex; } .p-section#section-2 .flex > * { width: 50%; } .p-section#section-2 .gallery { width: 100%; aspect-ratio: 750/666; margin-top: -34.6666666667%; position: relative; } .p-section#section-2 .gallery > * { max-height: none; position: absolute; } .p-section#section-2 .gallery .new { width: 22.4%; top: 43.5435435435%; left: 7.0666666667%; } .p-section#section-2 .gallery .main { width: 85.3333333333%; top: 6.1561561562%; right: -15.2%; z-index: 1; } .p-section#section-3 { background-color: #fff; position: relative; } .p-section#section-3 .p-section__credit { padding-top: 13.3333333333%; padding-bottom: 23.4666666667%; flex-wrap: wrap; row-gap: 6.6666666667vw; } @media screen and (min-width: 1025px) { .p-section#section-3 .p-section__credit { row-gap: 50px; } } .p-section#section-3 .p-section__credit .buy { color: #EA5514; } .p-section#section-3 .gallery { width: 100%; aspect-ratio: 750/2196; background-color: #CBE689; position: relative; } .p-section#section-3 .gallery > * { position: absolute; } .p-section#section-3 .gallery > *:nth-child(1) { width: 19.0666666667%; top: -6.3296903461%; left: 14%; z-index: 1; } .p-section#section-3 .gallery > *:nth-child(2) { width: 61.2%; top: 9.2440801457%; right: 3.3333333333%; z-index: 1; } .p-section#section-3 .gallery > *:nth-child(3) { width: 49.4666666667%; top: 39.2531876138%; left: 0; } .p-section#section-3 .gallery > *:nth-child(4) { width: 98.6666666667%; bottom: -4.0072859745%; left: -0.8%; z-index: 1; } .p-section#section-3 .gallery > *:nth-child(5) { width: 88.2666666667%; bottom: 26.5938069217%; left: 50%; transform: translateX(-50%); z-index: 0; } .p-section#section-3 .jump { width: 50.5333333333%; position: absolute; right: 3.8666666667%; bottom: 1.3981358189%; } .p-section#section-4 { padding-top: 7.3333333333%; background: linear-gradient(180deg, #7F7C48 0%, #7F7C48 88%, #fff 88%, #fff 100%); } .p-section#section-4 .p-section__credit { padding-top: 3.3333333333%; padding-bottom: 11.3333333333%; } .p-section#section-4 .p-section__credit .buy { color: #EA5514; } .p-section#section-4 .top { width: 93.3333333333%; } .p-section#section-4 .desc { width: 92.6666666667%; aspect-ratio: 695/625; margin-top: 3.6%; position: relative; } .p-section#section-4 .desc > *:not(:last-child) { position: absolute; } .p-section#section-4 .desc > *:nth-child(1) { width: 26.6666666667%; top: -1.28%; right: 30.6666666667%; z-index: 2; } .p-section#section-4 .desc > *:nth-child(2) { width: 29.3333333333%; top: 34.72%; left: -2.9333333333%; z-index: 2; } .p-section#section-4 .desc > *:nth-child(3) { width: 22%; top: 17.92%; left: -3.0666666667%; z-index: 2; } .p-section#section-4 .look { margin-top: 12.2666666667%; } .p-section#section-5 { background-color: #fff; } .p-section#section-5 .p-section__credit { padding-top: 4.5333333333%; padding-bottom: 8.6666666667%; } .p-section#section-5 .p-section__credit .buy { color: #EA5514; } .p-section#section-5 .gallery { width: 100%; aspect-ratio: 750/890; background-color: #FFEEAB; position: relative; overflow: hidden; } .p-section#section-5 .gallery > * { position: absolute; max-height: none; } .p-section#section-5 .gallery > *:nth-child(1) { width: 100.5333333333%; top: -17.8651685393%; right: -19.3333333333%; z-index: 2; } .p-section#section-5 .gallery > *:nth-child(2) { width: 30%; top: 2.4719101124%; left: 4.1333333333%; z-index: 2; } .p-section#section-5 .gallery > *:nth-child(3) { width: 27.0666666667%; bottom: 31.4606741573%; left: 3.2%; z-index: 1; } .p-section#section-5 .gallery > *:nth-child(4) { width: 94.4%; bottom: 7.7528089888%; left: 2.6666666667%; z-index: 1; } .p-section#section-5 .gallery > *:nth-child(5) { width: 50%; bottom: 11.5730337079%; left: 2.1333333333%; z-index: 0; } .p-section#section-5 .sticky { position: relative; } .p-section#section-5 .sticky .main { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; } .p-section#section-5 .sticky .main > img { width: 86.6666666667%; } .p-section#section-5 .look { margin-top: 12.2666666667%; } .p-section#section-6 { padding-bottom: 10.6666666667%; background-color: #fff; } .p-section#section-6 .p-section__credit { padding-top: 6.5333333333%; padding-bottom: 7.4666666667%; } .p-section#section-6 .p-section__credit .buy { color: #EA5514; } .p-section#section-6 .gallery { width: 100%; aspect-ratio: 750/1900; position: relative; } .p-section#section-6 .gallery > *:nth-child(4) { width: 11.0666666667%; position: absolute; bottom: 41%; left: 9.3333333333%; z-index: 0; } .p-section#section-6 .poster { width: 90.5333333333%; } .p-section#section-7 { padding-top: 19.6%; background-color: #55839D; } .p-section#section-7 .p-section__credit { padding-top: 6.6666666667%; padding-bottom: 10.6666666667%; flex-wrap: wrap; row-gap: 6.6666666667vw; color: #fff; } @media screen and (min-width: 1025px) { .p-section#section-7 .p-section__credit { row-gap: 50px; } } .p-section#section-7 .p-section__credit .buy { color: #CBE689; } .p-section#section-7 .gallery { width: 100%; aspect-ratio: 750/1253; position: relative; } .p-section#section-7 .gallery > * { position: absolute; } .p-section#section-7 .gallery > *:nth-child(1) { width: 69.7333333333%; top: 0; left: 2.8%; } .p-section#section-7 .gallery > *:nth-child(2) { width: 36.2666666667%; top: 29.9281723863%; left: 18.9333333333%; z-index: 1; } .p-section#section-7 .gallery > *:nth-child(3) { width: 46.5333333333%; bottom: 15.1636073424%; right: 2.8%; } .p-section#section-7 .gallery > *:nth-child(4) { width: 38%; bottom: 0; left: 0; } .p-section#section-7 .gallery > *:nth-child(5) { width: 12%; top: 12.7693535515%; right: 6.1333333333%; } .p-section#section-7 .gallery > *:nth-child(6) { width: 94.5333333333%; top: 34.1580207502%; left: 50%; transform: translateX(-50%); } .p-section#section-7 .gallery > *:nth-child(7) { width: 50%; bottom: 3.5913806864%; right: 5.0666666667%; } .p-section#section-7 .slide { width: 100%; margin-top: 5.8666666667%; } .p-section#section-7 .fade { width: 100%; aspect-ratio: 750/665; margin-top: 4.9333333333%; position: relative; } .p-section#section-7 .fade > * { position: absolute; } .p-section#section-7 .fade > *:nth-child(1) { width: 55.3333333333%; bottom: 0; left: 7.7333333333%; z-index: 1; } .p-section#section-7 .fade > *:nth-child(2) { width: 33.4666666667%; top: 0; right: 5.4666666667%; } .p-section#section-8 { padding-top: 20.4%; padding-bottom: 6.6666666667%; background-color: #CBE689; } .p-section#section-8 .p-section__credit { padding-top: 5.3333333333%; padding-bottom: 8%; } .p-section#section-8 .p-section__credit .buy { color: #EA5514; } .p-section#section-8 .gallery { width: 100%; aspect-ratio: 750/806; position: relative; } .p-section#section-8 .gallery > * { position: absolute; } .p-section#section-8 .gallery > *:nth-child(1) { width: 53.4666666667%; max-height: none; top: -10.0496277916%; left: 29.6%; z-index: 2; } .p-section#section-8 .gallery > *:nth-child(2) { width: 71.2%; top: 4.8387096774%; left: 50%; transform: translateX(-50%); z-index: 1; } .p-section#section-8 .gallery > *:nth-child(3) { width: 56.8%; bottom: 3.2258064516%; left: 50%; transform: translateX(-50%); z-index: 1; } .p-section#section-8 .gallery > *:nth-child(4) { width: 93.3333333333%; top: 0; left: 50%; transform: translateX(-50%); z-index: 0; } .p-section#section-8 .flex { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 1.7333333333vw; } @media screen and (min-width: 1025px) { .p-section#section-8 .flex { row-gap: 13px; } } .p-section#section-8 .flex > * { width: 49.0666666667%; } .p-section#section-9 { padding-top: 13.3333333333%; padding-bottom: 4%; background-image: url(../images/contents/9/bg.jpg); background-size: cover; } .p-section#section-9 .p-section__credit { margin-top: -20%; padding-bottom: 9.3333333333%; position: relative; z-index: 2; } .p-section#section-9 .p-section__credit .buy { color: #EA5514; } .p-section#section-9 .fade { width: 100%; aspect-ratio: 750/784; position: relative; } .p-section#section-9 .fade > * { position: absolute; } .p-section#section-9 .fade > *:nth-child(1) { width: 32.5333333333%; bottom: 0; left: 5.3333333333%; } .p-section#section-9 .fade > *:nth-child(2) { width: 54.5333333333%; top: 0; right: 5.3333333333%; } .p-section#section-9 .gallery { width: 100%; aspect-ratio: 750/752; margin-top: 12%; position: relative; } .p-section#section-9 .gallery > * { position: absolute; } .p-section#section-9 .gallery > *:nth-child(1) { width: 100%; max-height: none; top: -33.1265508685%; left: 0; z-index: 1; } .p-section#section-9 .gallery > *:nth-child(2) { width: 100%; top: 0; left: 0; z-index: 0; } .p-section#section-10 { padding-top: 8.5333333333%; padding-bottom: 13.7333333333%; background-color: #E8CAEA; } .p-section#section-10 .p-section__credit { padding-top: 4%; padding-bottom: 6.6666666667%; position: relative; z-index: 2; } .p-section#section-10 .p-section__credit .buy { color: #EA5514; } .p-section#section-10 .top { width: 89.3333333333%; } .p-section#section-10 .fade { width: 100%; aspect-ratio: 750/784; position: relative; } .p-section#section-10 .fade > * { position: absolute; } .p-section#section-10 .fade > *:nth-child(1) { width: 32.5333333333%; bottom: 0; left: 5.3333333333%; } .p-section#section-10 .fade > *:nth-child(2) { width: 54.5333333333%; top: 0; right: 5.3333333333%; } .p-section#section-10 .gallery { width: 100%; aspect-ratio: 750/686; position: relative; } .p-section#section-10 .gallery > * { position: absolute; } .p-section#section-10 .gallery > *:nth-child(1) { width: 47.4666666667%; top: -28.8629737609%; right: 0; z-index: 1; } .p-section#section-10 .gallery > *:nth-child(2) { width: 49.3333333333%; bottom: 0; left: 0; z-index: 1; } .p-section#section-10 .gallery > *:nth-child(3) { width: 100%; max-height: none; right: -22.6666666667%; bottom: -31.195335277%; z-index: 1; } .p-section#section-10 .gallery > *:nth-child(4) { width: 26.1333333333%; top: -4.0816326531%; left: 28.2666666667%; z-index: 1; } .p-section#section-10 .gallery > *:nth-child(5) { width: 94.5333333333%; top: 0; left: 50%; transform: translateX(-50%); z-index: 0; } .p-footer { width: 100%; aspect-ratio: 750/506; padding-top: 10%; padding-bottom: 12%; display: flex; flex-direction: column; justify-content: space-between; color: #CBE689; background-color: #947F4F; position: relative; } .p-footer__logo { padding-left: 4%; display: flex; align-items: center; gap: 4%; } .p-footer__logo .icon { width: 17.8666666667%; } .p-footer__logo .logo { width: 68.6666666667%; } .p-footer__list { width: fit-content; padding-left: 4%; display: flex; flex-direction: column; gap: 5.3333333333vw; } @media screen and (min-width: 1025px) { .p-footer__list { gap: 30px; } } .p-footer__list > li > a { display: inline-block; font-size: 3.8666666667vw; font-family: sofia-pro, sans-serif; font-weight: 500; letter-spacing: 0.04em; border-bottom: 1px solid #CBE689; } @media screen and (min-width: 1025px) { .p-footer__list > li > a:hover { opacity: 0.6; } } @media screen and (min-width: 1025px) { .p-footer__list > li > a { font-size: 24px; } } .p-footer__copy { font-size: 3.0666666667vw; font-family: nimbus-sans, sans-serif; font-weight: 400; position: absolute; right: 4.8%; bottom: 17.7865612648%; } @media screen and (min-width: 1025px) { .p-footer__copy { font-size: 14px; } } @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 */