/*** 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: 12px; line-height: 1.5; letter-spacing: 0.05em; background-color: #E5E8EB; } @media screen and (min-width: 751px) { body { font-size: 14px; } } a { color: inherit; text-decoration: none; transition: all 0.6s; cursor: pointer; transition: all 0.6s; } a:active { opacity: 0.8; } @media screen and (min-width: 751px) { a:hover { opacity: 0.8; } } a:active { opacity: 0.6; } @media screen and (min-width: 751px) { a:hover { opacity: 0.6; } } img { display: block; } body { font-family: futura-pt, sans-serif; } .ff-gotham { font-family: "brother-1816", sans-serif; } .l-main { max-width: 750px; margin: 0 auto; padding-top: clamp(100px, 20%, 150px); } .l-mainContainer { max-width: 750px; } .l-mainContainer__flex { height: fit-content; aspect-ratio: 1/0.587; display: flex; justify-content: space-between; } .l-mainContainer__flex .p-content { width: 44%; aspect-ratio: unset; } .l-mainContainer__video { width: 40%; margin: 0 auto; display: block; } .l-sideText { width: min(10%, 50px); position: fixed; top: 30%; right: 1%; transform: translateY(-50%); transform-origin: center; opacity: 0; z-index: -3; } .l-overLay { content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 300; display: none; } .p-firstView { width: 100%; height: 100vh; padding: 3% 0; display: flex; flex-direction: column; justify-content: center; } @media screen and (min-width: 751px) { .p-firstView { padding: 0; flex-direction: row; } } .p-firstView__slide { max-width: 93%; margin: 0 auto; } @media screen and (min-width: 751px) { .p-firstView__slide { max-width: 50%; } } .p-firstView__slide li { height: 100%; } .p-firstView__slide li img { width: 100%; height: 100%; object-fit: contain; } @media screen and (min-width: 751px) { .p-firstView__slide li img { object-fit: cover; } } .p-firstView__textBox { width: 100%; margin-top: 3%; padding-left: 6.67%; } @media screen and (min-width: 751px) { .p-firstView__textBox { width: 50%; margin-top: 0; padding-left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } } .p-firstView__title { width: 55%; } @media screen and (min-width: 751px) { .p-firstView__title { width: max(42%, 200px); } } .p-content { width: 100%; } .p-content .p-content__images { width: 100%; height: 100%; position: relative; } .p-content .p-content__images > li { position: absolute !important; } .p-content__hover { cursor: pointer; overflow: hidden; } .p-content__hover img { transition: all 0.6s; } .p-content__hover:active img { scale: 1.1; } @media screen and (min-width: 751px) { .p-content__hover:hover img { scale: 1.1; } } .p-content:nth-of-type(1) { aspect-ratio: 1/2.08; } .p-content:nth-of-type(1) .p-content__images li:nth-child(2) { right: 6.67%; bottom: 7.7%; } .p-content:nth-of-type(1) .p-content__images li:nth-child(3) { bottom: 0; left: 6.67%; } .p-content:nth-of-type(2) { aspect-ratio: 1/1.21; } .p-content:nth-of-type(2) .p-content__images li:nth-child(2) { right: 6.67%; bottom: 0; } .p-content:nth-of-type(3) { aspect-ratio: 1/1.6; position: relative; } .p-content:nth-of-type(3) .p-content__bg { width: 100%; height: 33.3%; background-image: url("../assets/images/main/bg_3-sp.jpg"); background-size: cover; background-position: center; position: absolute; top: 27.5%; left: 50%; transform: translateX(-50%) !important; z-index: -10; } @media screen and (min-width: 751px) { .p-content:nth-of-type(3) .p-content__bg { width: 100vw; } } .p-content:nth-of-type(3) .p-content__images li:nth-child(2) { right: 6.67%; bottom: 21.7%; } .p-content:nth-of-type(3) .p-content__images li:nth-child(3) { bottom: 0; left: 6.67%; } .p-content:nth-of-type(4) { aspect-ratio: 1/1.12; } .p-content:nth-of-type(4) .p-content__images li:nth-child(1) { right: 0; } .p-content:nth-of-type(4) .p-content__images li:nth-child(2) { bottom: 0; z-index: -1; } .p-content:nth-of-type(5) { aspect-ratio: 1/1.2; position: relative; } .p-content:nth-of-type(5) .p-content__bg { width: 100%; height: 44.4%; background-image: url("../assets/images/main/bg_5-sp.jpg"); background-size: cover; background-position: center; position: absolute; top: 80.8%; left: 50%; transform: translateX(-50%) !important; z-index: -10; } @media screen and (min-width: 751px) { .p-content:nth-of-type(5) .p-content__bg { width: 100vw; } } .p-content:nth-of-type(5) .p-content__images li:nth-child(1) { right: 6.67%; } .p-content:nth-of-type(6) { aspect-ratio: 1/2.13; } .p-content:nth-of-type(6) .p-content__images li:nth-child(2) { right: 0; bottom: 16.8%; } .p-content:nth-of-type(6) .p-content__images li:nth-child(3) { bottom: 0; left: 0; z-index: -1; } .p-content:nth-of-type(8) { aspect-ratio: 1/2.636; } .p-content:nth-of-type(8) .p-content__images li:nth-child(1) { left: 6.67%; } .p-content:nth-of-type(8) .p-content__images li:nth-child(2) { top: 17.7%; right: 0; } .p-content:nth-of-type(8) .p-content__images li:nth-child(3) { right: 0; bottom: 22%; z-index: -1; } .p-content:nth-of-type(8) .p-content__images li:nth-child(4) { bottom: 0; left: 0; } .p-content:nth-of-type(9) { aspect-ratio: 1/1.2; } .p-content:nth-of-type(9) .p-content__images li:nth-child(1) { z-index: 1; } .p-content:nth-of-type(9) .p-content__images li:nth-child(2) { right: 6.67%; bottom: 0; } .p-content:nth-of-type(10) { aspect-ratio: 1/2.33; } .p-content:nth-of-type(10) .p-content__images li:nth-child(2) { top: 23.4%; right: 0; } .p-content:nth-of-type(10) .p-content__images li:nth-child(3) { top: 14.6%; right: 0; } .p-content:nth-of-type(10) .p-content__images li:nth-child(4) { bottom: 0; } .p-content:nth-of-type(11) { aspect-ratio: 1/1.387; } .p-content:nth-of-type(11) .p-content__images li:nth-child(1) { z-index: 1; } .p-content:nth-of-type(11) .p-content__images li:nth-child(2) { right: 6.67%; bottom: 0; } .p-content:nth-of-type(12) { aspect-ratio: 1/1.56; } .p-content:nth-of-type(12) .p-content__images li:nth-child(2) { right: 0; bottom: 0; } .p-content:nth-of-type(13) { aspect-ratio: 1/0.587; } .p-content:nth-of-type(2) .p-content__plus { width: 4vw; min-width: 20px; aspect-ratio: 1/1; display: block; position: absolute; top: 14px; right: 14px; } @media screen and (min-width: 751px) { .p-content:nth-of-type(2) .p-content__plus { width: 30px; } } .p-content:nth-of-type(2) .p-content__plus::before, .p-content:nth-of-type(2) .p-content__plus::after { content: ""; width: 2px; height: 100%; display: block; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 751px) { .p-content:nth-of-type(2) .p-content__plus::before, .p-content:nth-of-type(2) .p-content__plus::after { width: 3px; } } .p-content:nth-of-type(2) .p-content__plus::after { transform: translateX(-50%) rotate(90deg); } .p-content:nth-of-type(4) .p-content__plus { width: 4vw; min-width: 20px; aspect-ratio: 1/1; display: block; position: absolute; bottom: 14px; left: 14px; } @media screen and (min-width: 751px) { .p-content:nth-of-type(4) .p-content__plus { width: 30px; } } .p-content:nth-of-type(4) .p-content__plus::before, .p-content:nth-of-type(4) .p-content__plus::after { content: ""; width: 2px; height: 100%; display: block; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 751px) { .p-content:nth-of-type(4) .p-content__plus::before, .p-content:nth-of-type(4) .p-content__plus::after { width: 3px; } } .p-content:nth-of-type(4) .p-content__plus::after { transform: translateX(-50%) rotate(90deg); } .p-content:nth-of-type(1) .p-content__plus, .p-content:nth-of-type(3) .p-content__plus, .p-content:nth-of-type(5) .p-content__plus, .p-content:nth-of-type(6) .p-content__plus, .p-content:nth-of-type(7) .p-content__plus, .p-content:nth-of-type(8) .p-content__plus, .p-content:nth-of-type(9) .p-content__plus, .p-content:nth-of-type(10) .p-content__plus, .p-content:nth-of-type(11) .p-content__plus, .p-content:nth-of-type(12) .p-content__plus, .p-content:nth-of-type(13) .p-content__plus { width: 4vw; min-width: 20px; aspect-ratio: 1/1; display: block; position: absolute; right: 14px; bottom: 14px; } @media screen and (min-width: 751px) { .p-content:nth-of-type(1) .p-content__plus, .p-content:nth-of-type(3) .p-content__plus, .p-content:nth-of-type(5) .p-content__plus, .p-content:nth-of-type(6) .p-content__plus, .p-content:nth-of-type(7) .p-content__plus, .p-content:nth-of-type(8) .p-content__plus, .p-content:nth-of-type(9) .p-content__plus, .p-content:nth-of-type(10) .p-content__plus, .p-content:nth-of-type(11) .p-content__plus, .p-content:nth-of-type(12) .p-content__plus, .p-content:nth-of-type(13) .p-content__plus { width: 30px; } } .p-content:nth-of-type(1) .p-content__plus::before, .p-content:nth-of-type(1) .p-content__plus::after, .p-content:nth-of-type(3) .p-content__plus::before, .p-content:nth-of-type(3) .p-content__plus::after, .p-content:nth-of-type(5) .p-content__plus::before, .p-content:nth-of-type(5) .p-content__plus::after, .p-content:nth-of-type(6) .p-content__plus::before, .p-content:nth-of-type(6) .p-content__plus::after, .p-content:nth-of-type(7) .p-content__plus::before, .p-content:nth-of-type(7) .p-content__plus::after, .p-content:nth-of-type(8) .p-content__plus::before, .p-content:nth-of-type(8) .p-content__plus::after, .p-content:nth-of-type(9) .p-content__plus::before, .p-content:nth-of-type(9) .p-content__plus::after, .p-content:nth-of-type(10) .p-content__plus::before, .p-content:nth-of-type(10) .p-content__plus::after, .p-content:nth-of-type(11) .p-content__plus::before, .p-content:nth-of-type(11) .p-content__plus::after, .p-content:nth-of-type(12) .p-content__plus::before, .p-content:nth-of-type(12) .p-content__plus::after, .p-content:nth-of-type(13) .p-content__plus::before, .p-content:nth-of-type(13) .p-content__plus::after { content: ""; width: 2px; height: 100%; display: block; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 751px) { .p-content:nth-of-type(1) .p-content__plus::before, .p-content:nth-of-type(1) .p-content__plus::after, .p-content:nth-of-type(3) .p-content__plus::before, .p-content:nth-of-type(3) .p-content__plus::after, .p-content:nth-of-type(5) .p-content__plus::before, .p-content:nth-of-type(5) .p-content__plus::after, .p-content:nth-of-type(6) .p-content__plus::before, .p-content:nth-of-type(6) .p-content__plus::after, .p-content:nth-of-type(7) .p-content__plus::before, .p-content:nth-of-type(7) .p-content__plus::after, .p-content:nth-of-type(8) .p-content__plus::before, .p-content:nth-of-type(8) .p-content__plus::after, .p-content:nth-of-type(9) .p-content__plus::before, .p-content:nth-of-type(9) .p-content__plus::after, .p-content:nth-of-type(10) .p-content__plus::before, .p-content:nth-of-type(10) .p-content__plus::after, .p-content:nth-of-type(11) .p-content__plus::before, .p-content:nth-of-type(11) .p-content__plus::after, .p-content:nth-of-type(12) .p-content__plus::before, .p-content:nth-of-type(12) .p-content__plus::after, .p-content:nth-of-type(13) .p-content__plus::before, .p-content:nth-of-type(13) .p-content__plus::after { width: 3px; } } .p-content:nth-of-type(1) .p-content__plus::after, .p-content:nth-of-type(3) .p-content__plus::after, .p-content:nth-of-type(5) .p-content__plus::after, .p-content:nth-of-type(6) .p-content__plus::after, .p-content:nth-of-type(7) .p-content__plus::after, .p-content:nth-of-type(8) .p-content__plus::after, .p-content:nth-of-type(9) .p-content__plus::after, .p-content:nth-of-type(10) .p-content__plus::after, .p-content:nth-of-type(11) .p-content__plus::after, .p-content:nth-of-type(12) .p-content__plus::after, .p-content:nth-of-type(13) .p-content__plus::after { transform: translateX(-50%) rotate(90deg); } .l-mainContainer__flex .p-content:nth-of-type(2) { position: relative; } .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus { width: 4vw; min-width: 20px; aspect-ratio: 1/1; display: block; position: absolute; bottom: 14px; left: 14px; top: unset; } @media screen and (min-width: 751px) { .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus { width: 30px; } } .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus::before, .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus::after { content: ""; width: 2px; height: 100%; display: block; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 751px) { .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus::before, .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus::after { width: 3px; } } .l-mainContainer__flex .p-content:nth-of-type(2) .p-content__plus::after { transform: translateX(-50%) rotate(90deg); } .p-modal { width: 340px; height: 98svh; color: #000; background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 500; overflow: scroll; display: none; } @media screen and (min-width: 751px) { .p-modal { width: 440px; } } .p-modal__inner { padding: 20px; display: flex; flex-direction: column; gap: 30px; } @media screen and (min-width: 751px) { .p-modal__inner { padding: 30px; } } .p-modal__text { width: fit-content; padding-left: 5%; display: flex; flex-direction: column; gap: 5px; font-size: 11px; } .p-modal__text li * { display: inline-block; border-bottom: 1px solid #000; } .p-modal__cross { width: 30px; aspect-ratio: 1/1; display: block; position: absolute; bottom: 20px; right: 20px; z-index: 510; transition: all 0.6s; cursor: pointer; } .p-modal__cross:active { opacity: 0.8; } @media screen and (min-width: 751px) { .p-modal__cross:hover { opacity: 0.8; } } @media screen and (min-width: 751px) { .p-modal__cross { width: 40px; } } .p-modal__cross::before, .p-modal__cross::after { content: ""; width: 1px; height: 100%; display: block; background-color: #000; position: absolute; top: 0; left: 50%; } .p-modal__cross::before { transform: rotate(-45deg); } .p-modal__cross::after { transform: rotate(45deg); } .p-footer { height: 100svh; padding-top: 50svh; } @media screen and (min-width: 751px) { .p-footer { padding-top: 40svh; } } .p-footer__link { width: min(60%, 250px); margin: 0 auto; display: flex; justify-content: space-between; } .p-footer__link li { width: 16%; } .p-footer__logo { width: min(33.3%, 150px); margin: clamp(60px, 16vw, 180px) auto 0; display: block; } .p-footer__copy { margin-top: clamp(30px, 8vw, 40px); display: block; color: #000; font-size: 10px; text-align: center; } @media screen and (min-width: 751px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 750px) { .u-hidden-sp { display: none !important; } } .u-w36 { width: 36%; } .u-w40 { width: 40%; } .u-w44 { width: 44%; } .u-w61 { width: 61.3%; } .u-w64 { width: 64%; } .u-w66 { width: 66.7%; } .u-w80 { width: 80%; } .u-w88 { width: 88%; } .u-mt50 { margin-top: clamp(30px, 6.67vw, 50px); } .u-mt160 { margin-top: clamp(80px, 21.3vw, 160px); } .u-mt200 { margin-top: clamp(100px, 26.67vw, 200px); } .u-row { display: flex; } .u-row li + li { margin-left: min(2%, 15px); } .u-column li + li { margin-top: min(8%, 20px); } .u-border { border: 5px solid #888; } .u-borderNone { border: none !important; } .u-bg { position: relative; z-index: -5; } .u-bg::after { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); position: absolute; top: 0; left: 0; }/*# sourceMappingURL=app.css.map */