/*** 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.9333333333vw; line-height: 1; letter-spacing: 0.04em; background-color: #fff; overflow-x: hidden; overflow-x: clip; } @media screen and (min-width: 1025px) { body { font-size: 11px; } } a { color: inherit; text-decoration: none; transition: all 0.6s; } img { width: 100%; display: block; } body { font-family: futura-pt, sans-serif; font-weight: 400; } .l-wrap { display: flex; align-items: flex-start; } @media screen and (min-width: 1025px) { .l-wrap { position: relative; } } .l-wrap__index { width: 4vw; height: 100svh; position: sticky; position: -webkit-sticky; top: 0; left: 0; z-index: 999; } @media screen and (min-width: 1025px) { .l-wrap__index { width: 30px; } } .l-wrap__main { width: 100vw; margin-left: -4vw; z-index: 0; } @media screen and (min-width: 1025px) { .l-wrap__main { width: 820px; margin-left: calc((100vw - 820px) / 2); } } .l-link { width: 92vw; margin-top: 13.3333333333vw; margin-inline: auto; transition: all 0.6s; } @media screen and (min-width: 1025px) { .l-link { width: 600px; margin-top: 30px; } } .l-link:active { opacity: 0.6; } @media screen and (min-width: 1025px) { .l-link:hover { opacity: 0.6; } } .p-firstView { width: 100%; height: 100svh; position: relative; } .p-firstView__image { height: 100%; } .p-firstView__image img { height: 100%; object-fit: cover; object-position: top; } .p-firstView__text { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8vw; position: absolute; bottom: 5.0666666667vw; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1025px) { .p-firstView__text { width: 30.5555555556vw; gap: 0.9722222222vw; top: 50%; right: 3.9583333333vw; bottom: unset; left: unset; transform: translate(0, -50%); } } .p-firstView__logo { width: 68.8vw; aspect-ratio: 258/65; position: relative; } @media screen and (min-width: 1025px) { .p-firstView__logo { width: 27.9861111111vw; aspect-ratio: 403/101; } } .p-firstView__logo > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .p-firstView__logo > img:nth-child(2) { width: 64.5333333333vw; } @media screen and (min-width: 1025px) { .p-firstView__logo > img:nth-child(2) { width: 26.25vw; } } .p-firstView__season { color: #fff; font-size: 2.4vw; font-family: brother-xl, sans-serif; font-weight: 400; letter-spacing: 0.5em; } @media screen and (min-width: 1025px) { .p-firstView__season { font-size: 0.7638888889vw; } } .p-index { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: urw-din-condensed, sans-serif; font-weight: 400; background-color: #fff; } .p-index__logo { width: 2.4vw; } @media screen and (min-width: 1025px) { .p-index__logo { width: 13px; } } .p-index__allday { margin-top: 1.3333333333vw; font-size: 2.4vw; writing-mode: vertical-rl; } @media screen and (min-width: 1025px) { .p-index__allday { margin-top: 8px; font-size: 13px; } } .p-index__num { width: 2.4vw; margin-top: 1.3333333333vw; display: flex; flex-direction: column; align-items: center; font-size: 1.8666666667vw; font-family: urw-din, sans-serif; font-weight: 500; text-align: center; } @media screen and (min-width: 1025px) { .p-index__num { width: 13px; margin-top: 18px; font-size: 10px; } } .p-index__num li { width: 100%; padding: 2.6666666667vw 0; position: relative; } @media screen and (min-width: 1025px) { .p-index__num li { padding: 15px 0; } } .p-index__num li:not(:last-child)::before { content: ""; width: 1.0666666667vw; height: 0.5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; background-color: #000; } @media screen and (min-width: 1025px) { .p-index__num li:not(:last-child)::before { width: 6px; } } .p-index__num li.active { color: #fff; } .p-index__num li.active::after { content: ""; width: 2.4vw; aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background-color: #6CB0E4; border-radius: 9999px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } @media screen and (min-width: 1025px) { .p-index__num li.active::after { width: 13px; } } .p-index__num li span { position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); z-index: 1; } .p-index__text { margin-top: 1.3333333333vw; color: #6CB0E4; font-size: 2.1333333333vw; writing-mode: vertical-rl; } @media screen and (min-width: 1025px) { .p-index__text { margin-top: 22px; font-size: 12px; } } .p-about { display: flex; } @media screen and (min-width: 1025px) { .p-about { height: 100svh; padding-bottom: 14.2857142857svh; } } .p-about__text { width: 41.8666666667vw; padding-top: 17.8666666667vw; padding-left: 8vw; } @media screen and (min-width: 1025px) { .p-about__text { width: 50%; padding-top: 73px; padding-left: 57px; } } .p-about__title { font-size: 8.2666666667vw; font-family: brother-xl, sans-serif; font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; position: relative; } @media screen and (min-width: 1025px) { .p-about__title { font-size: 48px; } } .p-about__blue { width: 34.6666666667vw; display: block; position: absolute; top: 6.6666666667vw; left: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-about__blue { width: 210px; top: 45px; left: 10px; } } .p-about__lead { width: 28.2666666667vw; margin-top: 4.5333333333vw; font-size: 2.1333333333vw; font-family: dnp-shuei-gothic-gin-std, sans-serif; font-weight: 500; line-height: 2.25; letter-spacing: 0.07em; } @media screen and (min-width: 1025px) { .p-about__lead { width: 50%; margin-top: 28px; font-size: 12px; } } .p-about__image { width: 58.1333333333vw; height: 100%; } @media screen and (min-width: 1025px) { .p-about__image { width: 410px; height: auto; } } .p-about__image img { height: 100%; object-fit: cover; } body { font-family: futura-pt, sans-serif; font-weight: 400; } .p-contents { position: relative; } @media screen and (min-width: 1025px) { .p-contents { display: flex; flex-direction: column; align-items: center; } } .p-contents__over { position: relative; } .p-contents__over--inner { position: sticky; top: 0; overflow-x: hidden; } .p-contents__over--inner > * { height: 100vh; } .p-contents__over .over { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0; left: 0; } .p-contents__anime { position: relative; } @media screen and (min-width: 1025px) { .p-contents__anime { height: 580px; } } .p-contents__anime--inner { position: sticky; top: 0; left: 0; overflow-x: hidden; } .p-contents__anime--inner > * { height: 100vh; } .p-contents__anime--inner > *:not(:nth-child(1)) { position: absolute; top: 0; left: 0; } .p-contents .pin-spacer { height: 100vh !important; } .p-contents__scroll { width: 100vw; height: 100vh; position: relative; overflow: hidden; } .p-contents__scroll .scroll { height: 100%; aspect-ratio: 1025/666; position: relative; } .p-contents__padding { padding: 8vw 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } @media screen and (min-width: 1025px) { .p-contents__padding { padding: 0; } } .p-contents__padding > img { width: 83.7333333333vw; } .p-contents__flex { height: 70.6666666667vw; display: flex; } @media screen and (min-width: 1025px) { .p-contents__flex { height: 100svh; align-items: center; background-color: #fff; } } .p-contents__flex > * { width: 50%; } .p-contents__wrap { margin-top: -90vh; } @media screen and (min-width: 1025px) { .p-contents__wrap { margin-top: -100vh; } } .p-contents__wrap > * { position: relative; z-index: 10; } @media screen and (min-width: 1025px) { .p-contents__stickyFlex { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; position: relative; } .p-contents__stickyFlex--inner { height: 100svh; display: flex; position: sticky; top: 0; left: 0; } .p-contents__stickyFlex--inner .under { width: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .p-contents__stickyFlex--inner .under > img { height: 580px; } .p-contents__stickyFlex .over { width: 100%; height: 100svh; position: sticky; top: 0; left: 0; } .p-contents__stickyFlex .over > img { position: absolute; top: 50%; } .p-contents__animeFlex { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; position: relative; } .p-contents__animeFlex--inner { height: 100svh; display: flex; position: sticky; top: 0; left: 0; } .p-contents__animeFlex--inner .under { width: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .p-contents__animeFlex--inner .under > img { height: 580px; } .p-contents__animeFlex--image > * { width: 410px; } .p-contents__animeFlex--image > *:not(:nth-child(1)) { position: absolute; } } .p-contents .sticky { position: sticky; top: 0; left: 0; z-index: -1; } .p-contents .padding { height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: #fff; } .p-contents .padding > img { width: 40vw; height: 71.6981132075%; margin-inline: auto; } .p-contents .dummy-100 { width: 100%; height: 100vh; display: block; position: sticky; top: 0; left: 0; z-index: -1; } .p-contents .dummy-200 { width: 100%; height: 200vh; display: block; position: sticky; top: 0; left: 0; z-index: -1; } .p-contents img { height: 100%; object-fit: cover; } .p-credit { width: calc(100vw - 15px); padding: 0 4.2666666667vw; color: #fff; font-style: italic; letter-spacing: 0.07em; line-height: 1.5; position: absolute; bottom: 2.9985007496dvh; left: 4vw; opacity: 0; transition: all 0.6s; pointer-events: none; } @media screen and (min-width: 1025px) { .p-credit { width: calc((100vw - 820px) / 2); padding: 0 10px 0 24px; color: #000; top: 50px; left: 30px; bottom: unset; } } .p-credit.visible { opacity: 1; pointer-events: auto; } .p-credit__inner { display: flex; flex-direction: column; gap: 1.3333333333vw; } @media screen and (min-width: 1025px) { .p-credit__inner { gap: 8px; } } .p-credit__list { margin-top: 1.3333333333vw; display: flex; flex-direction: column; gap: 1.3333333333vw; } @media screen and (min-width: 1025px) { .p-credit__list { margin-top: 5px; gap: 5px; } } @media screen and (min-width: 1025px) { .p-credit__list li a:hover .p-credit__buy { color: #000; background-color: #fff; } } .p-credit__tax { margin-right: 1.8666666667vw; display: inline-block; } @media screen and (min-width: 1025px) { .p-credit__tax { margin-right: 7px; } } .p-credit__buy { padding: 0 1.3333333333vw; display: inline-block; color: #000; font-size: 2.6666666667vw; font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; line-height: 1; text-align: center; background-color: #fff; border: 1px solid #fff; transition: all 0.6s; } @media screen and (min-width: 1025px) { .p-credit__buy { padding: 0 5px; color: #fff; font-size: 10px; background-color: #000; border: 1px solid #000; } } .p-footer { margin-top: 30.6666666667vw; padding: 14.4vw 0 7.4666666667vw 11.7333333333vw; color: #fff; font-size: 3.2vw; font-family: sofia-pro, sans-serif; background-image: url(../images/footer-sp.jpg); background-size: cover; background-repeat: no-repeat; } @media screen and (min-width: 1025px) { .p-footer { margin-top: 100px; padding: 80px 0 67px 7.9166666667vw; font-size: 14px; background-image: url(../images/footer-pc.jpg); } } .p-footer__theme { font-size: 3.4666666667vw; line-height: 1.65; } @media screen and (min-width: 1025px) { .p-footer__theme { font-size: 15px; } } .p-footer__logo { width: 72.2666666667vw; margin-top: 9.6vw; } @media screen and (min-width: 1025px) { .p-footer__logo { width: 352px; margin-top: 47px; } } .p-footer__season { margin-top: 2.1333333333vw; font-size: 4vw; letter-spacing: 0.14em; } @media screen and (min-width: 1025px) { .p-footer__season { margin-top: 10px; font-size: 20px; } } .p-footer__link { margin-top: 6.4vw; display: flex; gap: 6.4vw; } @media screen and (min-width: 1025px) { .p-footer__link { margin-top: 35px; gap: 30px; } } .p-footer__link li a { display: flex; align-items: center; gap: 1.3333333333vw; } @media screen and (min-width: 1025px) { .p-footer__link li a { gap: 5px; } } .p-footer__link li a:active { opacity: 0.6; } @media screen and (min-width: 1025px) { .p-footer__link li a:hover { opacity: 0.6; } } .p-footer__arrow { width: 2.1333333333vw; display: block; } @media screen and (min-width: 1025px) { .p-footer__arrow { width: 10px; } } .p-footer__copy { margin-top: 10.6666666667vw; display: block; font-size: 2.6666666667vw; font-family: nimbus-sans, sans-serif; } @media screen and (min-width: 1025px) { .p-footer__copy { margin-top: 56px; font-size: 12px; } } @media screen and (min-width: 1025px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 1024px) { .u-hidden-sp { display: none !important; } } .h-530 { height: 141.3333333333vw; } .h-265 { height: 70.6666666667vw; } .over-1 > img { width: 78.4vw; height: auto; } .over-2 > img { width: 72vw; height: auto; } .mt-100 { margin-top: 153.9039039039vh; } @media screen and (min-width: 1025px) { .w-820 { width: 820px; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .w-820 > img { width: 100%; height: 520px; } .w-600 { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .w-600 > img { width: 600px; height: 424px; } .w-410 { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .w-410 > img { width: 410px; height: 580px; } .h-410 { width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .h-410 > img { width: 410px; height: 410px; } .w-330 { width: 410px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .w-330 > img { width: 330px; height: 233px; } .w-327 { width: 410px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .w-327 > img { width: 327px; height: 414px; } .over-pc-1 > img { width: 321px; height: 454px; left: 44px; transform: translateY(-50%); } .over-pc-2 > img { width: 295px; height: 417px; left: 50%; transform: translate(-50%, -50%); } .over-pc-3 > img { width: 295px; height: 417px; right: 57px; transform: translateY(-50%); } .s3p { width: 100%; height: 100svh; position: absolute; top: 700vh; left: 0; } }/*# sourceMappingURL=app.css.map */