/*** 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: #0F1111; font-size: clamp(12px, 3.2vw, 16px); line-height: 1.5; letter-spacing: 0.08em; background-color: #94F571; overflow-x: hidden; } @media screen and (min-width: 768px) { body { font-size: 14px; } } a { color: inherit; text-decoration: none; transition: all 0.6s; } a:active { opacity: 0.6; } @media screen and (min-width: 768px) { a:hover { opacity: 0.6; } } img { display: block; } body { font-family: sofia-pro, sans-serif; font-weight: 400; } .l-contentsWrapper { width: 94%; margin: 0 auto; padding-bottom: 16%; } @media screen and (min-width: 768px) { .l-contentsWrapper { width: clamp(668px, 86%, 1100px); padding-bottom: 120px; } } .l-overLay { width: 100%; height: 120vh; background-image: url("../assets/images/modal/bg.jpg"); background-size: cover; background-position: 40%; background-repeat: repeat-y; position: fixed; top: 0; left: 0; z-index: 100; display: none; } .p-firstView { width: 100%; height: 100svh; color: #fff; font-weight: 400; background-image: url("../assets/images/firstView/fv_sp.jpg"); background-size: cover; background-position: top center; background-repeat: no-repeat; } @media screen and (min-width: 768px) { .p-firstView { background-image: url("../assets/images/firstView/fv_pc.jpg"); background-position: top center; } } .p-firstView__logo { width: 54%; position: absolute; top: 42%; left: 50%; transform: translateX(-50%) translateY(-50%); } @media screen and (min-width: 768px) { .p-firstView__logo { width: min(44%, 635px); } } .p-firstView__vol { color: #AA92DF; font-size: clamp(16px, 4.27vw, 20px); text-align: center; text-shadow: 1px 1px 4px #fff; } @media screen and (min-width: 768px) { .p-firstView__vol { font-size: clamp(30px, 3.8vw, 35px); } } .p-firstView__text { color: #FFBE0A; font-size: clamp(18px, 4.8vw, 22px); font-family: "instrument-serif", sans-serif; line-height: 1; letter-spacing: 0; position: absolute; bottom: 4vw; left: 4vw; } @media screen and (min-width: 768px) { .p-firstView__text { font-size: clamp(20px, 2.9vw, 26px); bottom: 25px; left: 25px; } } .p-index { padding: 10% 0; font-size: clamp(19px, 5vw, 24px); } @media screen and (min-width: 768px) { .p-index { padding: 60px 0; } } .p-index__list { display: flex; justify-content: center; gap: 10%; } @media screen and (min-width: 768px) { .p-index__list { gap: 40px; } } .p-index__list li:nth-child(1) { color: #808080; } .p-index__list li:nth-child(2) { border-bottom: 1px solid #0F1111; } .p-contents { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw 3vw; grid-template-areas: "grid1 grid2" "grid3 grid3" "grid4 grid5" "grid6 grid6" "grid7 grid7" "grid7 grid7" "grid8 grid9" "grid10 grid10" "grid11 grid11" "grid11 grid11" "grid12 grid12" "grid13 grid14" "grid15 grid15" "grid16 grid17" "grid18 grid19" "grid20 grid20" "grid21 grid22" "grid23 grid23" "grid24 grid24" "grid24 grid24"; } @media screen and (min-width: 768px) { .p-contents { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px 10px; grid-template-areas: "grid1 grid2 grid3 grid3" "grid4 grid5 grid7 grid7" "grid6 grid6 grid7 grid7" "grid8 grid9 grid10 grid10" "grid11 grid11 grid12 grid12" "grid11 grid11 grid13 grid14" "grid15 grid15 grid16 grid17" "grid18 grid19 grid20 grid20" "grid21 grid22 grid24 grid24" "grid23 grid23 grid24 grid24"; } } .p-contents li { position: relative; overflow: hidden; cursor: pointer; } .p-contents li img { transition: all 0.6s; } .p-contents li:active img { scale: 1.1; } @media screen and (min-width: 768px) { .p-contents li:hover img { scale: 1.1; } } .p-contents li:active a { opacity: 1; } @media screen and (min-width: 768px) { .p-contents li:hover a { opacity: 1; } } .p-contents__open { width: 5.3vw; height: 5.3vw; display: block; position: absolute; right: 2.8vw; bottom: 2.8vw; } @media screen and (min-width: 768px) { .p-contents__open { width: 30px; height: 30px; right: 16px; bottom: 16px; } } .p-contents__open::before, .p-contents__open::after { content: ""; width: 100%; height: 1px; background-color: #fff; position: absolute; top: 50%; } .p-contents__open::after { transform: rotate(90deg); } .p-contents__link { width: 80%; margin: 14% auto 0; padding: 4%; display: block; color: #fff; font-size: clamp(15px, 4vw, 20px); text-align: center; line-height: 1; background-color: #AA92DF; border-radius: 40px; } @media screen and (min-width: 768px) { .p-contents__link { width: 420px; margin-top: 120px; padding: 22px 0; font-size: 24px; } } .p-pickUp { padding: 16% 0 22%; font-size: clamp(10px, 2.67vw, 12px); background-color: #FFBE0A; position: relative; } @media screen and (min-width: 768px) { .p-pickUp { padding: 80px 0; } } .p-pickUp::before, .p-pickUp::after { content: ""; width: 100%; height: 16px; position: absolute; left: 0; z-index: 10; } .p-pickUp::before { top: -16px; background: linear-gradient(45deg, #FFBE0A 8px, transparent 0), linear-gradient(315deg, #FFBE0A 8px, transparent 0); background-size: 16px 16px; } .p-pickUp::after { bottom: -16px; background: linear-gradient(45deg, #FFBE0A 8px, transparent 0), linear-gradient(315deg, #FFBE0A 8px, transparent 0); background-size: 16px 16px; transform: rotate(180deg); } .p-pickUp__inner { width: 74%; margin: 0 auto; } @media screen and (min-width: 768px) { .p-pickUp__inner { width: clamp(600px, 69%, 990px); } } .p-pickUp__title { font-size: clamp(16px, 4.27vw, 24px); font-weight: 500; text-align: center; } .p-pickUp__list { margin-top: 15%; } @media screen and (min-width: 768px) { .p-pickUp__list { margin-top: 36px; display: flex; justify-content: space-between; } } @media screen and (min-width: 768px) { .p-pickUp__list li { width: 31%; } } .p-pickUp__list li + li { margin-top: 18%; } @media screen and (min-width: 768px) { .p-pickUp__list li + li { margin-top: 0; } } .p-pickUp__image { border-bottom: 6px solid #AA92DF; } .p-pickUp__textBox { margin-top: 6%; } @media screen and (min-width: 768px) { .p-pickUp__textBox { display: flex; flex-direction: column; margin-top: 20px; } } .p-pickUp__name { font-size: clamp(18px, 4.8vw, 26px); } @media screen and (min-width: 768px) { .p-pickUp__name { font-size: 20px; word-wrap: break-word; } } .p-pickUp__text { margin-top: 4%; color: #557171; font-family: dnp-shuei-gothic-gin-std, sans-serif; font-weight: 500; line-height: 2; letter-spacing: 0.15em; } @media screen and (min-width: 768px) { .p-pickUp__text { margin-top: 13px; } } .p-pickUp__link { width: 33%; margin-top: 5%; padding-bottom: 2%; display: block; font-size: clamp(16px, 4.27vw, 24px); text-align: center; letter-spacing: 0.16em; position: relative; } @media screen and (min-width: 768px) { .p-pickUp__link { min-width: 100px; margin-top: 10px; font-size: 19px; } } .p-pickUp__link::before, .p-pickUp__link::after { content: ""; height: 1px; background-color: #0F1111; position: absolute; bottom: 0; transition: all 0.6s; } .p-pickUp__link::before { width: 100%; left: 0; } .p-pickUp__link::after { width: 15%; height: 1px; right: 0; transform: rotate(35deg); transform-origin: bottom right; } .p-pickUp__link:active::before { left: 5%; } .p-pickUp__link:active::after { right: -5%; } @media screen and (min-width: 768px) { .p-pickUp__link:hover::before { left: 5%; } .p-pickUp__link:hover::after { right: -5%; } } .p-footer { padding: 11% 0 8%; background-image: url("../assets/images/footer_bg-sp.jpg"); background-size: cover; background-repeat: no-repeat; } @media screen and (min-width: 768px) { .p-footer { padding: 5% 0; background-image: url("../assets/images/footer_bg-pc.jpg"); } } .p-footer__inner { width: 74%; margin: 0 auto; } @media screen and (min-width: 768px) { .p-footer__inner { width: auto; margin: 0 auto 0 8%; } } .p-footer__title { font-size: clamp(13px, 3.47vw, 21px); } @media screen and (min-width: 768px) { .p-footer__title { font-size: 16px; } } .p-footer__list { margin-top: 10%; font-weight: 500; } @media screen and (min-width: 768px) { .p-footer__list { margin-top: 3%; } } .p-footer__list li + li { margin-top: 3%; } @media screen and (min-width: 768px) { .p-footer__list li + li { margin-top: 1%; } } .p-footer__light { font-weight: 300; } .p-footer__logo { margin-top: 12%; width: 100%; } @media screen and (min-width: 768px) { .p-footer__logo { width: 27%; margin-top: 4%; } } .p-footer__season { margin-top: 1%; font-size: clamp(15px, 4vw, 20px); } @media screen and (min-width: 768px) { .p-footer__season { margin-top: 0.5%; } } .p-footer__linkList { margin-top: 8%; display: flex; gap: 8%; font-weight: 500; } @media screen and (min-width: 768px) { .p-footer__linkList { margin-top: 2.5%; gap: 30px; } } .p-footer__link { display: flex; align-items: center; gap: 4px; } .p-footer__arrow { width: 10px; display: inline-block; } @media screen and (min-width: 768px) { .p-footer__arrow { width: 12px; } } .p-footer__copy { margin-top: 14%; display: inline-block; font-size: 10px; } @media screen and (min-width: 768px) { .p-footer__copy { margin-top: 4.5%; } } .p-modal { width: 100%; height: 100%; padding-bottom: min(20%, 150px); position: fixed; top: 0; left: 0; z-index: 110; overflow-x: hidden; overflow-y: scroll; display: none; } .p-modal__heading { padding: 2.6%; } @media screen and (min-width: 768px) { .p-modal__heading { padding: 2%; } } .p-modal__logo { width: 30%; z-index: 105; } @media screen and (min-width: 768px) { .p-modal__logo { width: min(24%, 300px); position: fixed; } } .p-modal__cross { width: min(8%, 80px); aspect-ratio: 1/1; display: inline-block; position: fixed; top: 2%; right: 2.6%; z-index: 120; cursor: pointer; } .p-modal__cross::before, .p-modal__cross::after { content: ""; width: 100%; height: 1px; background-color: #0F1111; position: absolute; top: 50%; left: 50%; } .p-modal__cross::before { transform: translateX(-50%) rotate(-45deg); } .p-modal__cross::after { transform: translateX(-50%) rotate(45deg); } .p-modal__list { margin-top: 8%; font-size: clamp(9px, 2.4vw, 16px); z-index: 110; } @media screen and (min-width: 768px) { .p-modal__list { width: 700px; margin: 0 auto; margin-top: max(10%, 200px); font-size: 18px; } } .p-modal__list > li { position: relative; } .p-modal__list > li:not(:first-child) { padding-top: 17%; } @media screen and (min-width: 768px) { .p-modal__list > li:not(:first-child) { padding-top: 75px; } } .p-modal__list > li:not(:first-child)::before { content: ""; width: 100vw; height: 0.5%; background-image: url("../assets/images/modal/border.png"); background-size: contain; background-repeat: repeat-x; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .p-modal__list > li:not(:last-child) { padding-bottom: 17%; } @media screen and (min-width: 768px) { .p-modal__list > li:not(:last-child) { padding-bottom: 75px; } } .p-modal__title { width: fit-content; padding-left: 5%; display: flex; align-items: baseline; font-size: clamp(18px, 4.8vw, 26px); line-height: 1; letter-spacing: 0.11em; font-style: italic; } @media screen and (min-width: 768px) { .p-modal__title { padding-left: 3%; } } .p-modal__titleImage { width: clamp(18px, 4.8vw, 26px); } @media screen and (min-width: 768px) { .p-modal__titleImage { height: 18px; } } .p-modal__slideContainer { width: 80%; margin: 6% auto 0; position: relative; } @media screen and (min-width: 768px) { .p-modal__slideContainer { width: 600px; margin-top: 40px; } } .p-modal__slide { width: 100%; } .p-modal__credit { width: 80%; margin: 0 auto; margin-top: calc(10% + 20px); } @media screen and (min-width: 768px) { .p-modal__credit { margin-top: 80px; } } .p-modal__credit li { display: flex; gap: 10px; } .p-modal__credit li + li { margin-top: 4%; } @media screen and (min-width: 768px) { .p-modal__credit li + li { margin-top: 18px; } } .p-modal__long { align-items: flex-end; } .p-modal__light { font-weight: 200; font-style: italic; } .p-modal__link { font-weight: 500; border-bottom: 1px solid #0F1111; } @media screen and (min-width: 768px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 767px) { .u-hidden-sp { display: none !important; } }/*# sourceMappingURL=app.css.map */