/*** 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: 3.7333333333vw; letter-spacing: 0; line-height: 1; background-color: #FFE11D; overflow-x: clip; } @media screen and (min-width: 1025px) { body { font-size: 16px; } } a { display: block; color: inherit; text-decoration: none; transition: all 0.6s; } img { width: 100%; display: block; } body { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-weight: 500; font-style: normal; } @media screen and (min-width: 1025px) { .l-main { display: flex; position: relative; } } @media screen and (min-width: 1025px) { .l-main__center { width: calc(100vw - 15.1212553495vh); } } @media screen and (min-width: 1025px) { .l-main__menu { height: 100vh; aspect-ratio: 106/701; position: sticky; top: 0; } } .l-toMenu { width: 14.6666666667vw; aspect-ratio: 1/1; position: fixed; right: 4.8vw; bottom: 8.5333333333vw; opacity: 0; z-index: 50; } .l-toMenu img { border-radius: 9999px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .c-menu { padding: 11.2vw 0 16vw; display: flex; flex-direction: column; align-items: center; background-color: #fff; } @media screen and (min-width: 1025px) { .c-menu { padding: 0; } } .c-menu__list { width: 89.0666666667vw; display: flex; flex-wrap: wrap; } @media screen and (min-width: 1025px) { .c-menu__list { width: 100%; flex-wrap: nowrap; flex-direction: column; } } .c-menu__list > li { width: 33.3333333333%; height: 35.7333333333vw; background-color: #fff; } @media screen and (min-width: 1025px) { .c-menu__list > li { width: 100%; height: 16.6666666667vh; } } @media screen and (min-width: 1025px) { .c-menu__list > li + li { border-top: 1px dotted #333 !important; } } .c-menu__list > li:nth-of-type(-n+3) { border-bottom: 1px dotted #333; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(-n+3) { border: none; } } .c-menu__list > li:nth-of-type(3n) { width: 28vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(3n) { width: 100%; } } .c-menu__list > li:nth-of-type(3n).is-visible { background-color: rgba(59, 160, 199, 0.6); } .c-menu__list > li:nth-of-type(3n+1) { width: 28vw; border-right: 1px dotted #333; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(3n+1) { width: 100%; border: none; } } .c-menu__list > li:nth-of-type(3n+1).is-visible { background-color: rgba(255, 225, 29, 0.6); } .c-menu__list > li:nth-of-type(3n+2) { width: 33.0666666667vw; border-right: 1px dotted #333; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(3n+2) { width: 100%; border: none; } } .c-menu__list > li:nth-of-type(3n+2).is-visible { background-color: rgba(216, 40, 43, 0.6); } .c-menu__list > li:nth-of-type(1) .logo { width: 13.3333333333vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(1) .logo { width: 58px; } } .c-menu__list > li:nth-of-type(2) .logo { width: 17.8666666667vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(2) .logo { width: 68px; } } .c-menu__list > li:nth-of-type(3) .logo { width: 20vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(3) .logo { width: 77px; } } .c-menu__list > li:nth-of-type(4) .logo { width: 17.8666666667vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(4) .logo { width: 68px; } } .c-menu__list > li:nth-of-type(5) .logo { width: 12.2666666667vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(5) .logo { width: 38px; } } .c-menu__list > li:nth-of-type(6) .logo { width: 18.9333333333vw; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(6) .logo { width: 72px; } } .c-menu__list > li > a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2vw; } @media screen and (min-width: 1025px) { .c-menu__list > li > a { gap: 12px; } } .c-menu__list > li:nth-of-type(4) > a, .c-menu__list > li:nth-of-type(5) > a { justify-content: flex-end; } @media screen and (min-width: 1025px) { .c-menu__list > li:nth-of-type(4) > a, .c-menu__list > li:nth-of-type(5) > a { justify-content: center; } } .c-menu__artist { font-size: 4.5333333333vw; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; text-align: center; line-height: 1.2; white-space: pre-line; } @media screen and (min-width: 1025px) { .c-menu__artist { font-size: 15px; } } .c-menu__cross { width: 2.4vw; aspect-ratio: 1/1; display: block; position: relative; } .c-menu__cross::before, .c-menu__cross::after { content: ""; width: 120%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; } .c-menu__cross::before { transform: translate(-50%, -50%) rotate(-45deg); } .c-menu__cross::after { transform: translate(-50%, -50%) rotate(45deg); } @media screen and (min-width: 1025px) { .c-menu__cross { width: 9px; } } .c-artist { width: 89.6vw; padding: 10.1333333333vw 6.6666666667vw 14.6666666667vw; } @media screen and (min-width: 1025px) { .c-artist { width: 336px; padding: 40px 20px; } } .c-artist__info { width: 100%; display: flex; justify-content: flex-start; gap: 8.5333333333vw; } @media screen and (min-width: 1025px) { .c-artist__info { gap: 32px; } } .c-artist__image { width: 33.8666666667vw; } @media screen and (min-width: 1025px) { .c-artist__image { width: 127px; } } .c-artist__link { display: flex; flex-direction: column; justify-content: space-between; } .c-artist__name { font-size: 6.4vw; font-family: niveau-grotesk, sans-serif; font-weight: 400; font-style: italic; line-height: 1.1; white-space: pre-line; } @media screen and (min-width: 1025px) { .c-artist__name { font-size: 20px; } } .c-artist__buttons { display: flex; flex-direction: column; align-items: center; gap: 2.6666666667vw; } @media screen and (min-width: 1025px) { .c-artist__buttons { gap: 10px; } } .c-artist__button { width: 32.5333333333vw; aspect-ratio: 122/23; } @media screen and (min-width: 1025px) { .c-artist__button { width: 122px; } } .c-artist__button > a { height: 100%; padding: 0 2.6666666667vw 0 3.4666666667vw; color: #000; display: flex; align-items: center; justify-content: space-between; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; background-color: #fff; } @media screen and (min-width: 1025px) { .c-artist__button > a { padding: 0 10px 0 13px; font-size: 16px; } } @media screen and (min-width: 1025px) { .c-artist__button > a:hover { color: #fff; background-color: #000; } .c-artist__button > a:hover .arrow::before { border-color: #fff; } .c-artist__button > a:hover .arrow::after { background-color: #fff; } } .c-artist__button > a .arrow { width: 2.4vw; aspect-ratio: 1/1; position: relative; display: block; } @media screen and (min-width: 1025px) { .c-artist__button > a .arrow { width: 9px; } } .c-artist__button > a .arrow::before, .c-artist__button > a .arrow::after { content: ""; position: absolute; transition: all 0.6s; } .c-artist__button > a .arrow::before { width: 100%; height: 100%; border-top: 1px solid #333; border-right: 1px solid #333; } .c-artist__button > a .arrow::after { width: 130%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; transform: translate(-50%, -50%) rotate(-45deg); } .c-artist__desc { max-height: 21.3333333333vw; margin-top: 9.3333333333vw; font-size: 3.2vw; line-height: 1.7; overflow: hidden; transition: all 0.6s; } @media screen and (min-width: 1025px) { .c-artist__desc { margin-top: 40px; min-height: none; font-size: 12px; overflow: inherit; } } .c-artist__desc.is-open { height: auto; max-height: none; overflow: inherit; } .c-artist__desc > a { display: inline-block; text-decoration: underline; } @media screen and (min-width: 1025px) { .c-artist__desc > a:hover { opacity: 0.6; } } .c-artist__more { color: #000; font-size: 4vw; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; position: absolute; right: 6.4vw; bottom: 6.9333333333vw; z-index: 20; transition: all 0.3s; cursor: pointer; } @media screen and (min-width: 1025px) { .c-artist__more { display: none; } } .c-artist__more.is-open { opacity: 0; pointer-events: none; } .c-artist__more::after { content: ""; width: 80%; height: 1px; background-color: #000; position: absolute; right: 0; bottom: 0; } .p-firstView { position: relative; } @media screen and (min-width: 1025px) { .p-firstView__gif { height: 667px; display: flex; overflow: hidden; } } @media screen and (min-width: 1500px) { .p-firstView__gif { width: 100vh; height: auto; overflow: inherit; } } @media screen and (min-width: 1500px) { .p-firstView__gif > * { width: 25vw; } } .p-firstView__text { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6.9333333333vw; position: absolute; bottom: 32%; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1025px) { .p-firstView__text { width: auto; align-items: flex-end; gap: 1.1111111111vw; bottom: 25%; } } .p-firstView__title { width: 67.7333333333vw; } @media screen and (min-width: 1025px) { .p-firstView__title { width: 35.4166666667vw; } } .p-firstView__sub { width: 97.3333333333vw; } @media screen and (min-width: 1025px) { .p-firstView__sub { width: 25.6944444444vw; margin-right: -50px; } } .p-about { padding: 18.6666666667vw 0 20.8vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-about { padding: 94px 0 140px; } } .p-about__logo { display: flex; flex-direction: column; align-items: center; } .p-about__cross { width: 4vw; aspect-ratio: 1/1; display: block; position: relative; } .p-about__cross::before, .p-about__cross::after { content: ""; width: 120%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; } .p-about__cross::before { transform: translate(-50%, -50%) rotate(-45deg); } .p-about__cross::after { transform: translate(-50%, -50%) rotate(45deg); } @media screen and (min-width: 1025px) { .p-about__cross { width: 20px; } } .p-about__felix { width: 29.3333333333vw; } @media screen and (min-width: 1025px) { .p-about__felix { width: 150px; } } .p-about__igallery { width: 51.2vw; } @media screen and (min-width: 1025px) { .p-about__igallery { width: 267px; } } .p-about__pal { width: 25.8666666667vw; } @media screen and (min-width: 1025px) { .p-about__pal { width: 134px; } } .p-about__text { margin-top: 21.6vw; text-align: center; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-about__text { margin-top: 94px; } } .p-about__title { font-size: 5.8666666667vw; font-family: niveau-grotesk, sans-serif; font-weight: 500; font-style: italic; } @media screen and (min-width: 1025px) { .p-about__title { font-size: 45px; } } .p-about__desc, .p-about__info { margin-top: 8vw; line-height: 2; } @media screen and (min-width: 1025px) { .p-about__desc, .p-about__info { margin-top: 44px; line-height: 2.5; } } .p-about__info { width: 84vw; padding: 9.3333333333vw 0; border: 1px solid #000; } @media screen and (min-width: 1025px) { .p-about__info { width: 500px; padding: 50px; } } .p-about__map { text-decoration: underline; } @media screen and (min-width: 1025px) { .p-about__map:hover { opacity: 0.6; } } body { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-weight: 500; font-style: normal; } .p-contents { padding: 26.6666666667vw 0; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-contents { padding: 0; flex-direction: row; align-items: normal; position: relative; } } .p-contents__inner { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-contents__inner { width: calc(100% - 457px); padding: 60px 0 120px; overflow: hidden; } } .p-contents__title { display: flex; align-items: center; justify-content: center; gap: 5.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents__title { gap: 40px; } } .p-contents__name { font-size: 6.4vw; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; text-align: center; line-height: 1.2; white-space: pre-line; } @media screen and (min-width: 1025px) { .p-contents__name { font-size: 38px; } } .p-contents__cross { width: 2.6666666667vw; aspect-ratio: 1/1; display: block; position: relative; } .p-contents__cross::before, .p-contents__cross::after { content: ""; width: 120%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; } .p-contents__cross::before { transform: translate(-50%, -50%) rotate(-45deg); } .p-contents__cross::after { transform: translate(-50%, -50%) rotate(45deg); } @media screen and (min-width: 1025px) { .p-contents__cross { width: 14px; } } .p-contents__top { width: 56vw; margin-top: 8vw; } @media screen and (min-width: 1025px) { .p-contents__top { width: 260px; margin-top: 50px; } } .p-contents__triSlide { width: 80vw; margin-top: 8vw; aspect-ratio: 300/265; position: relative; } @media screen and (min-width: 1025px) { .p-contents__triSlide { width: 400px; margin-top: 50px; } } .p-contents__triSlide > li { width: 34.1333333333vw; position: absolute; } @media screen and (min-width: 1025px) { .p-contents__triSlide > li { width: 172px; } } .p-contents__triSlide > li:nth-of-type(1) { animation: triangle1 8s ease infinite; } .p-contents__triSlide > li:nth-of-type(2) { animation: triangle2 8s ease infinite; } .p-contents__triSlide > li:nth-of-type(3) { animation: triangle3 8s ease infinite; } .p-contents__desc { text-align: center; line-height: 2.2; white-space: pre-line; } .p-contents__loop { margin-top: 13.3333333333vw; overflow: hidden; } @media screen and (min-width: 1025px) { .p-contents__loop { margin-top: 60px; } } .p-contents__loopWrap { width: 512%; display: flex; flex-direction: row-reverse; animation: loop 20s linear infinite; } .p-contents__loopWrap > li { margin-right: 10.6666666667vw; position: relative; } @media screen and (min-width: 1025px) { .p-contents__loopWrap > li { margin-right: 50px; } } .p-contents__fluffy { width: 76.2666666667vw; height: 44vw; display: flex; justify-content: space-between; } .p-contents__fluffy > * { width: 27.7333333333vw; } @media screen and (min-width: 1025px) { .p-contents__fluffy > * { width: 104px; } } .p-contents__fluffy > *:nth-child(1) { animation: fluffy 3s ease-out infinite; -webkit-animation: fluffy 3s infinite; } .p-contents__fluffy > *:nth-child(2) { animation: reverseFluffy 3s ease-out infinite; -webkit-animation: reverseFluffy 3s infinite; } .p-contents__fluffy:nth-of-type(1) { margin-top: 23.2vw; } @media screen and (min-width: 1025px) { .p-contents__fluffy:nth-of-type(1) { width: 645px; height: 212px; margin-top: 20px; } } .p-contents__fluffy--1, .p-contents__fluffy--2 { width: 104px; position: absolute; } .p-contents__fluffy--1 { bottom: 15%; left: 5%; animation: fluffy 3s ease-out infinite; -webkit-animation: fluffy 3s infinite; } .p-contents__fluffy--2 { top: 15%; right: 5%; animation: reverseFluffy 3s ease-out infinite; -webkit-animation: reverseFluffy 3s infinite; } .p-contents__size { width: 72.2666666667vw; margin-top: 13.3333333333vw; display: flex; justify-content: space-between; } @media screen and (min-width: 1025px) { .p-contents__size { width: 400px; margin-top: 80px; } } .p-contents__size > * { width: 32vw; height: 32vw; aspect-ratio: 1/1; } @media screen and (min-width: 1025px) { .p-contents__size > * { width: 176px; height: 176px; } } .p-contents__size > *:nth-child(1) { animation: changeSize 2.5s ease-out infinite; -webkit-animation: changeSize 2.5s ease-out infinite; } .p-contents__size > *:nth-child(2) { animation: reverseChangeSize 2.5s ease-out infinite; -webkit-animation: reverseChangeSize 2.5s ease-out infinite; } .p-contents__item { display: flex; flex-direction: column; align-items: center; } .p-contents__itemWrap { display: flex; flex-direction: column; align-items: center; } .p-contents__itemTtl { font-size: 12vw; font-family: viktorie, sans-serif; font-weight: 400; font-style: normal; overflow: visible !important; z-index: 40; } @media screen and (min-width: 1025px) { .p-contents__itemTtl { font-size: 55px; } } .p-contents__itemList { margin-top: 4.8vw; display: flex; flex-direction: column; align-items: center; gap: 2.1333333333vw; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; } @media screen and (min-width: 1025px) { .p-contents__itemList { margin-top: 16px; gap: 12px; } } @media screen and (min-width: 1025px) { .p-contents__itemList > li > a:hover { opacity: 0.6; } } .p-contents__itemList > li .price { border-bottom: 1px solid #000; } .p-contents__itemList > li .shop { font-size: 3.2vw; border-bottom: 1px solid #000; } @media screen and (min-width: 1025px) { .p-contents__itemList > li .shop { font-size: 14px; } } .p-contents__autoSlide { width: 100vw; margin-top: 26.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents__autoSlide { width: calc(100vw - 15.1212553495vh - 457px); margin-top: 150px; } } .p-contents__topics { margin-top: 5.3333333333vw; padding-top: 16vw; } @media screen and (min-width: 1025px) { .p-contents__topics { margin-top: 30px; padding-top: 70px; } } .p-contents__topicsPop { width: 30.4vw; animation: rotation 10s linear infinite; } @media screen and (min-width: 1025px) { .p-contents__topicsPop { width: 114px; margin-left: -10px; } } .p-contents__topicsTxt { margin-top: 1.3333333333vw; text-align: center; } @media screen and (min-width: 1025px) { .p-contents__topicsTxt { margin-top: 10px; } } .p-contents__topicsDesc { line-height: 2.2; } .p-contents__topicsShop { margin-top: 6.9333333333vw; } @media screen and (min-width: 1025px) { .p-contents__topicsShop { margin-top: 26px; } } .p-contents__topicsList { margin-top: 8vw; display: flex; flex-direction: column; align-items: center; gap: 2.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents__topicsList { margin-top: 26px; gap: 10px; } } .p-contents__topicsList > li > a { display: inline-block; text-decoration: underline; } @media screen and (min-width: 1025px) { .p-contents__topicsList > li > a:hover { opacity: 0.6; } } .p-contents__all { width: 80vw; aspect-ratio: 300/75; margin-top: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents__all { width: 373px; height: 94px; margin-top: 100px; } } .p-contents__all > a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #000; } @media screen and (min-width: 1025px) { .p-contents__all > a:hover { color: #fff; background-color: #000; } } .p-contents__artist { margin-top: 26.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents__artist { width: 457px; height: 100vh; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0; } } .p-exhibition { padding: 26.6666666667vw 0 21.3333333333vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-exhibition { width: 709px; padding: 100px 0; margin: 0 auto; } } .p-exhibition__title { font-size: 6.1333333333vw; font-family: niveau-grotesk, sans-serif; font-weight: 500; font-style: italic; } @media screen and (min-width: 1025px) { .p-exhibition__title { font-size: 30px; } } .p-exhibition__desc { width: 85.6vw; margin-top: 10.1333333333vw; text-align: center; line-height: 2.2; } @media screen and (min-width: 1025px) { .p-exhibition__desc { width: 610px; margin-top: 66px; } } .p-exhibition__banner { width: 90.4vw; margin-top: 16vw; } @media screen and (min-width: 1025px) { .p-exhibition__banner { width: 554px; margin-top: 66px; } } .p-exhibition__data { margin-top: 22.1333333333vw; display: flex; flex-direction: column; align-items: center; gap: 10.6666666667vw; text-align: center; } @media screen and (min-width: 1025px) { .p-exhibition__data { margin-top: 120px; gap: 50px; } } .p-exhibition__data > dl > dt { font-size: 5.0666666667vw; font-family: niveau-grotesk, sans-serif; font-weight: 500; font-style: italic; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dt { font-size: 24px; } } .p-exhibition__data > dl > dd { margin-top: 5.3333333333vw; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dd { margin-top: 25px; } } .p-exhibition__data > dl > dd .info { line-height: 1.5; } .p-exhibition__data > dl > dd .day { font-size: 3.2vw; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dd .day { font-size: 15px; } } .p-exhibition__data > dl > dd .caution { font-size: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dd .caution { font-size: 12px; } } .p-exhibition__data > dl > dd .close { margin-top: 3.2vw; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dd .close { margin-top: 16px; } } .p-exhibition__data > dl > dd .add { margin-top: 2.6666666667vw; display: inline-block; line-height: 1.8; } @media screen and (min-width: 1025px) { .p-exhibition__data > dl > dd .add { margin-top: 18px; } } .p-exhibition__data > dl > dd .artist { line-height: 1.8; } .p-exhibition__map { margin-top: 2.6666666667vw; display: block; text-decoration: underline; } @media screen and (min-width: 1025px) { .p-exhibition__map { margin-top: 16px; } } .p-exhibition__support { width: 58.6666666667vw; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6.1333333333vw 8.8vw; } @media screen and (min-width: 1025px) { .p-exhibition__support { width: 320px; gap: 34px 50px; } } .p-exhibition__support > li:nth-child(1) { width: 20.2666666667vw; } @media screen and (min-width: 1025px) { .p-exhibition__support > li:nth-child(1) { width: 115px; } } .p-exhibition__support > li:nth-child(2) { width: 27.2vw; } @media screen and (min-width: 1025px) { .p-exhibition__support > li:nth-child(2) { width: 153px; } } .p-exhibition__support > li:nth-child(3) { width: 23.7333333333vw; } @media screen and (min-width: 1025px) { .p-exhibition__support > li:nth-child(3) { width: 134px; } } .p-exhibition__info { margin-top: 22.1333333333vw; display: flex; flex-direction: column; align-items: center; gap: 9.3333333333vw; } @media screen and (min-width: 1025px) { .p-exhibition__info { margin-top: 100px; flex-direction: row; gap: 30px; } } .p-exhibition__infoWrap { width: 90.4vw; padding: 8.8vw 7.4666666667vw 6.6666666667vw; display: flex; flex-direction: column; align-items: center; background-color: #fff; border: 1px solid #707070; } @media screen and (min-width: 1025px) { .p-exhibition__infoWrap { width: 340px; height: 435px; padding: 0 30px; justify-content: space-between; } } @media screen and (min-width: 1025px) { .p-exhibition__infoWrap:nth-child(1) { padding-top: 55px; padding-bottom: 24px; } } .p-exhibition__infoWrap:nth-child(1) .p-exhibition__infoLogo { width: 50.4vw; } @media screen and (min-width: 1025px) { .p-exhibition__infoWrap:nth-child(1) .p-exhibition__infoLogo { width: 189px; } } @media screen and (min-width: 1025px) { .p-exhibition__infoWrap:nth-child(2) { padding-top: 30px; padding-bottom: 24px; } } .p-exhibition__infoWrap:nth-child(2) .p-exhibition__infoLogo { width: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-exhibition__infoWrap:nth-child(2) .p-exhibition__infoLogo { width: 80px; } } .p-exhibition__infoDesc { margin-top: 6.6666666667vw; font-size: 3.2vw; line-height: 1.7; white-space: pre-line; } @media screen and (min-width: 1025px) { .p-exhibition__infoDesc { margin-top: 0; font-size: 12px; } } .p-exhibition__buttons { width: 100%; margin-top: 6.6666666667vw; display: flex; flex-direction: column; align-items: flex-end; gap: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-exhibition__buttons { margin-top: 0; gap: 10px; } } .p-exhibition__button { width: 32.5333333333vw; aspect-ratio: 122/23; } @media screen and (min-width: 1025px) { .p-exhibition__button { width: 122px; } } .p-exhibition__button > a { height: 100%; padding: 0 3.4666666667vw 0 2.6666666667vw; display: flex; align-items: center; justify-content: space-between; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; background-color: #FFE11D; } @media screen and (min-width: 1025px) { .p-exhibition__button > a { padding: 0 10px 0 13px; } } @media screen and (min-width: 1025px) { .p-exhibition__button > a:hover { color: #fff; background-color: #000; } .p-exhibition__button > a:hover .arrow::before { border-color: #fff; } .p-exhibition__button > a:hover .arrow::after { background-color: #fff; } } .p-exhibition__button > a .arrow { width: 2.4vw; aspect-ratio: 1/1; position: relative; display: block; } @media screen and (min-width: 1025px) { .p-exhibition__button > a .arrow { width: 9px; } } .p-exhibition__button > a .arrow::before, .p-exhibition__button > a .arrow::after { content: ""; position: absolute; transition: all 0.6s; } .p-exhibition__button > a .arrow::before { width: 100%; height: 100%; border-top: 1px solid #333; border-right: 1px solid #333; } .p-exhibition__button > a .arrow::after { width: 130%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; transform: translate(-50%, -50%) rotate(-45deg); } .p-staff { padding-bottom: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-staff { padding-bottom: 120px; } } .p-staff__list { display: flex; flex-direction: column; align-items: center; gap: 2.6666666667vw; font-size: 3.2vw; font-family: aileron, sans-serif; font-weight: 100; font-style: italic; } @media screen and (min-width: 1025px) { .p-staff__list { gap: 10px; font-size: 14px; } } .p-staff__list .mini { font-size: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-staff__list .mini { 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; } } .mt-10 { margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .mt-10 { margin-top: 15px; } } .mt-20 { margin-top: 5.3333333333vw; } @media screen and (min-width: 1025px) { .mt-20 { margin-top: 30px; } } .p-contents:not(#_3coins) .c-artist { max-height: 89.6vw; overflow: hidden; position: relative; transition: all 0.6s; } @media screen and (min-width: 1025px) { .p-contents:not(#_3coins) .c-artist { max-width: none; overflow: inherit; } } .p-contents:not(#_3coins) .c-artist.is-open { height: auto; max-height: 100vh; overflow: inherit; } .p-contents:not(#_3coins) .c-artist.is-open::after { opacity: 0; pointer-events: none; } .p-contents:not(#_3coins) .c-artist::after { content: ""; width: 100%; height: 40%; position: absolute; bottom: 0; left: 0; z-index: 10; transition: all 0.6s; } @media screen and (min-width: 1025px) { .p-contents:not(#_3coins) .c-artist::after { display: none; } } .p-contents#_3coins .c-artist, .p-contents#whoswhogallery .c-artist { background-color: #F5C809; } .p-contents#_3coins .c-artist::after, .p-contents#whoswhogallery .c-artist::after { background: linear-gradient(rgba(255, 225, 29, 0) 30%, #FFE11D 95%); } .p-contents#kastane, .p-contents#franklinclimbing { color: #fff; background-color: #D8282B; } .p-contents#kastane .p-contents__cross::before, .p-contents#kastane .p-contents__cross::after, .p-contents#franklinclimbing .p-contents__cross::before, .p-contents#franklinclimbing .p-contents__cross::after { background-color: #fff; } .p-contents#kastane .price, .p-contents#franklinclimbing .price { border-bottom: 1px solid #fff; } .p-contents#kastane .c-artist, .p-contents#franklinclimbing .c-artist { color: #000; background-color: #D89896; } .p-contents#kastane .c-artist::after, .p-contents#franklinclimbing .c-artist::after { background: linear-gradient(rgba(216, 40, 43, 0) 30%, #D8282B 95%); } .p-contents#ciaopanic, .p-contents#ainode { background-color: #3BA0C7; } .p-contents#ciaopanic .c-artist, .p-contents#ainode .c-artist { background-color: #446C8E; } .p-contents#ciaopanic .c-artist::after, .p-contents#ainode .c-artist::after { background: linear-gradient(rgba(59, 160, 199, 0) 30%, #3BA0C7 95%); } .p-contents#_3coins { padding-top: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins { padding-top: 60px; } } .p-contents#_3coins .p-contents__name { font-size: 10.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__name { font-size: 51px; } } .p-contents#_3coins .p-contents__brand { width: 29.6vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__brand { width: 151px; } } .p-contents#_3coins .p-contents__desc { margin-top: 3.2vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__desc { margin-top: 32px; } } .p-contents#_3coins .p-contents__item { margin-top: 40vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__item { margin-top: 150px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 94.9333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 443px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(7) .p-contents__itemImg { width: 75.2vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemImg, .p-contents#_3coins .p-contents__itemWrap:nth-of-type(7) .p-contents__itemImg { width: 351px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemTtl { margin-right: -61.3333333333vw; transform: rotate(-1deg); } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemTtl { margin-right: -300px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { margin-top: -1.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { margin-top: -5px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) { margin-top: 29.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) { margin-top: 120px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemTtl { margin-left: -21.3333333333vw; font-size: 9.8666666667vw; transform: rotate(-5deg); } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemTtl { margin-left: -60px; font-size: 55px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { margin-top: 4vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { margin-top: 20px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(3) { margin-top: 26.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(3) { margin-top: 120px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(3) .p-contents__itemTtl { transform: rotate(-6deg); } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) { margin-top: 33.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) { margin-top: 120px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemTtl { margin-right: -45.3333333333vw; transform: rotate(8deg); } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemTtl { margin-right: -230px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemImg { margin-top: -5.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(4) .p-contents__itemImg { margin-top: -30px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) { margin-top: 29.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) { margin-top: 120px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg { margin-top: 5.3333333333vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg { margin-top: 30px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg > *:nth-of-type(1) { width: 88vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg > *:nth-of-type(1) { width: 411px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg > *:nth-of-type(2) { width: 75.2vw; margin-top: 12vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(5) .p-contents__itemImg > *:nth-of-type(2) { width: 351px; margin-top: 56px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) { margin-top: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) { margin-top: 150px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) .p-contents__itemTtl { height: 42.6666666667vw; margin-left: -40vw; white-space: pre-line; transform: rotate(-10deg); } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) .p-contents__itemTtl { height: 170px; margin-left: -200px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) .p-contents__itemImg { width: 100vw; margin-top: -10.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(6) .p-contents__itemImg { width: 468px; margin-top: -20px; } } .p-contents#_3coins .p-contents__itemWrap:nth-of-type(7) { margin-top: 15.2vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .p-contents__itemWrap:nth-of-type(7) { margin-top: 126px; } } .p-contents#_3coins .c-artist { padding-bottom: 10.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents#_3coins .c-artist { padding-bottom: 40px; } } .p-contents#kastane .p-contents__brand { width: 28.8vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__brand { width: 170px; } } .p-contents#kastane .p-contents__desc { margin-top: 9.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__desc { margin-top: 35px; } } .p-contents#kastane .p-contents__item { margin-top: 16vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__item { margin-top: -120px; } } .p-contents#kastane .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 89.8666666667vw; margin-top: 4vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 535px; margin-top: 20px; } } .p-contents#kastane .p-contents__itemWrap:nth-of-type(3) { margin-top: 6.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__itemWrap:nth-of-type(3) { margin-top: 120px; } } .p-contents#kastane .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 75.2vw; } @media screen and (min-width: 1025px) { .p-contents#kastane .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 433px; } } .p-contents#ciaopanic .p-contents__brand { width: 29.6vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__brand { width: 160px; } } .p-contents#ciaopanic .p-contents__desc { margin-top: 8vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__desc { margin-top: 50px; } } .p-contents#ciaopanic .p-contents__item { margin-top: 22.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__item { margin-top: 120px; } } .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 94.9333333333vw; margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 443px; margin-top: 20px; } } .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) { margin-top: 17.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) { margin-top: 80px; } } .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) .p-contents__itemTtl { height: 24vw; margin-right: -50.6666666667vw; color: #fff; white-space: pre-line; transform: rotate(-5deg); } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) .p-contents__itemTtl { height: 110px; margin-right: -240px; } } .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { width: 75.2vw; margin-top: -12.8vw; } @media screen and (min-width: 1025px) { .p-contents#ciaopanic .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { width: 351px; margin-top: -60px; } } .p-contents#whoswhogallery .p-contents__brand { width: 32.2666666667vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__brand { width: 180px; } } .p-contents#whoswhogallery .p-contents__desc { margin-top: 9.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__desc { margin-top: 50px; } } .p-contents#whoswhogallery .p-contents__item { margin-top: 18.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__item { margin-top: 120px; } } .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 94.9333333333vw; margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { width: 443px; margin-top: 20px; } } .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) { margin-top: 37.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) { margin-top: 200px; } } .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) .p-contents__itemTtl { margin-left: -21.3333333333vw; transform: rotate(-5deg); } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) .p-contents__itemTtl { margin-left: -110px; } } .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 75.2vw; margin-top: -8vw; } @media screen and (min-width: 1025px) { .p-contents#whoswhogallery .p-contents__itemWrap:nth-of-type(3) .p-contents__itemImg { width: 351px; margin-top: -35px; } } .p-contents#franklinclimbing .p-contents__brand { width: 18.9333333333vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__brand { width: 120px; } } .p-contents#franklinclimbing .p-contents__desc { margin-top: 16vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__desc { margin-top: 80px; } } .p-contents#franklinclimbing .p-contents__item { margin-top: 17.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__item { margin-top: 100px; } } .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { margin-top: 2.6666666667vw; display: flex; flex-direction: column; align-items: center; gap: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg { margin-top: 20px; gap: 120px; } } .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg > *:nth-of-type(1) { width: 94.9333333333vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg > *:nth-of-type(1) { width: 443px; } } .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg > *:nth-of-type(2) { width: 79.2vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(1) .p-contents__itemImg > *:nth-of-type(2) { width: 380px; } } .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(2) { margin-top: 32vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(2) { margin-top: 120px; } } .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { width: 88vw; } @media screen and (min-width: 1025px) { .p-contents#franklinclimbing .p-contents__itemWrap:nth-of-type(2) .p-contents__itemImg { width: 400px; } } @media screen and (min-width: 1025px) { .p-contents#ainode .p-contents__inner { width: 100%; } } .p-contents#ainode .p-contents__brand { width: 27.4666666667vw; } @media screen and (min-width: 1025px) { .p-contents#ainode .p-contents__brand { width: 166px; } } .p-contents#ainode .p-contents__desc { margin-top: 21.3333333333vw; font-size: 3.2vw; line-height: 1.7; } @media screen and (min-width: 1025px) { .p-contents#ainode .p-contents__desc { margin-top: 50px; font-size: 16px; } } .p-contents#ainode .p-contents__item { margin-top: 21.3333333333vw; } @media screen and (min-width: 1025px) { .p-contents#ainode .p-contents__item { margin-top: 120px; } } .p-contents#ainode .p-contents__itemImg { width: 94.9333333333vw; margin-top: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents#ainode .p-contents__itemImg { width: 50%; margin-top: 20px; display: flex; } }/*# sourceMappingURL=app.css.map */