@charset "UTF-8"; :root { --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-purple: #CAB7D3; --color-brown: #B49F94; --color-pink: #FFC6B7; --color-green: #4B8149; --color-orange: #EE7042; --color-blue: #9AC3EB; --color-yellow: #E5E599; --color-purple-sub: #562F2D; --color-brown-sub: #363534; --color-pink-sub: #98775F; --color-green-sub: #C1CDDD; --color-orange-sub: #EFD9B8; --color-blue-sub: #40414B; --color-yellow-sub: #5A0034; } :root { --fs-item-title: 5.13vw; --fs-21-33: 5.38vw; --fs-18-22: 4.62vw; --fs-18-21: 4.62vw; --fs-13-14: 3.33vw; --fs-12-16: 3.08vw; --fs-12-12: 3.08vw; --fs-11-13: 2.82vw; --fs-11-12: 2.82vw; --fs-10-12: 2.56vw; --fs-10-11: 2.82vw; --fs-8-10: 2.05vw; } @media all and (min-width: 864px) { :root { --fs-item-title: min(2.11vw, 27px); --fs-21-33: min(2.58vw, 33px); --fs-18-22: min(1.72vw, 22px); --fs-18-21: min(1.64vw, 21px); --fs-13-14: min(1.09vw, 14px); --fs-12-16: min(1.25vw, 16px); --fs-12-12: min(0.94vw, 12px); --fs-11-13: min(1.02vw, 13px); --fs-11-12: min(0.94vw, 12px); --fs-10-12: min(0.94vw, 12px); --fs-10-11: min(0.86vw, 11px); --fs-8-10: min(0.78vw, 10px); } } :root { --logo-width: 19.23vw; --logo-height: 4.23vw; --btn-height: 15.38vw; --inner-width: 82.05%; --section-imgs-padding: 1.28vw; --section-imgs-gap: 10.26vw; --btn-slide-width: 6.41vw; --btn-icon-slide-width: 2.05vw; --item-padding-bottom: 25.64vw; --ttl-h1-width: 46.15vw; --ttl-h1-height: 9.15vw; --hide-y: 7.69vw; --txtlink-icon-width: 5.13vw; --lang-switch-height: 3.08vw; --lang-switch-top: 4.1vw; --lang-switch-right: 2.56vw; } @media all and (min-width: 864px) { :root { --logo-width: min(8.05vw, 103px); --logo-height: min(1.77vw, 22.6px); --btn-height: min(5.47vw, 70px); --inner-width: 74.06%; --section-imgs-padding: min(0.55vw, 7px); --section-imgs-gap: min(3.13vw, 40px); --btn-slide-width: min(3.13vw, 40px); --btn-icon-slide-width: min(0.86vw, 11px); --item-padding-bottom: min(10.39vw, 133px); --ttl-h1-width: min(21.09vw, 270px); --ttl-h1-height: min(4.19vw, 53.6px); --hide-y: min(3.13vw, 40px); --txtlink-icon-width: min(1.56vw, 20px); --lang-switch-height: min(1.09vw, 14px); --lang-switch-top: min(2.07vw, 26.5px); --lang-switch-right: min(1.56vw, 20px); } } /*** 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; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { overflow-x: hidden; overflow-y: visible; } body { color: #000; font-family: "dnp-shuei-gothic-gin-std", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; } body.disable { overflow: hidden; } body.disable #wrapper { opacity: 0; } #wrapper { transition: opacity 0.6s ease; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } img { vertical-align: bottom; width: 100%; height: auto; } header { position: fixed; z-index: 5; width: 100%; } header p { position: absolute; width: var(--logo-width); height: var(--logo-height); top: 4.1vw; left: 50%; margin-left: calc(var(--logo-width) / -2); } header p svg { fill: var(--color-white); } .b-external_links { background: var(--color-yellow); } .b-external_links .c-links { padding: 15.38vw 0 17.95vw 0; } .b-external_links .c-links ul { display: flex; justify-content: center; align-items: center; column-gap: 14.62vw; } .b-external_links .c-links ul li span.c-icon { width: 6.67vw; height: 6.67vw; } .b-external_links .c-links ul li span.c-icon.yt { width: 8.46vw; } .b-external_links .c-links ul li span.c-icon svg { fill: var(--color-yellow-sub); } .b-pagetop { background: var(--color-yellow); } .b-pagetop a { display: grid; place-content: center; width: 10.26vw; height: 10.26vw; border-radius: 100vmax; background: var(--color-yellow-sub); margin-inline: auto; } .b-pagetop a .c-icon { width: 2.31vw; height: 2.31vw; } .b-pagetop a .c-icon svg { fill: var(--color-yellow); } .b-staff { padding-top: 17.95vw; background: var(--color-yellow); } .b-staff h4 { font-size: var(--fs-12-12); text-align: center; color: var(--color-yellow-sub); } .b-staff .c-list_staff { margin-top: 10.26vw; } .b-staff .c-list_staff ul { text-align: center; } .b-staff .c-list_staff ul li { font-size: var(--fs-11-12); line-height: 1.25; color: var(--color-yellow-sub); } footer { padding: 14.1vw 0 12.82vw 0; background: var(--color-yellow); } footer .copy { text-align: center; } footer .copy p { font-size: var(--fs-12-12); color: var(--color-yellow-sub); } .c-switch_lang { position: fixed; z-index: 10; height: var(--lang-switch-height); top: var(--lang-switch-top); right: var(--lang-switch-right); } .c-switch_lang button, .c-switch_lang li { font-family: alverata, serif; font-weight: 400; font-style: normal; font-size: var(--fs-10-12); } .c-switch_lang button { color: var(--color-white); } .c-switch_lang button .inr { display: flex; align-items: center; column-gap: 1.54vw; } .c-switch_lang button span.c-icon { width: 2.56vw; height: 2.56vw; transition: rotate 0.3s ease; } .c-switch_lang button span.c-icon svg { fill: var(--color-white); } .c-switch_lang ul { display: none; } .c-switch_lang ul li { color: var(--color-white); line-height: 3; text-align: right; cursor: pointer; } .c-switch_lang ul li a { color: var(--color-white); } @media all and (min-width: 864px) { header p { top: min(1.72vw, 22px); } .b-external_links { background: var(--color-yellow); } .b-external_links .c-links { padding: min(5.47vw, 70px) 0 min(7.81vw, 100px) 0; } .b-external_links .c-links ul { column-gap: min(4.45vw, 57px); } .b-external_links .c-links ul li span.c-icon { width: min(2.03vw, 26px); height: min(2.03vw, 26px); } .b-external_links .c-links ul li span.c-icon.yt { width: min(2.58vw, 33px); } .b-pagetop a { width: min(3.13vw, 40px); height: min(3.13vw, 40px); } .b-pagetop a .c-icon { width: min(0.7vw, 9px); height: min(0.7vw, 9px); } .b-staff { padding-top: min(6.25vw, 80px); } .b-staff .c-list_staff { margin-top: min(3.13vw, 40px); } footer { padding: min(3.91vw, 50px) 0 min(4.38vw, 56px) 0; } .c-switch_lang button span.inr { column-gap: min(0.47vw, 6px); } .c-switch_lang button span.c-icon { width: min(0.78vw, 10px); height: min(0.78vw, 10px); } } .alv-r { font-family: alverata, serif; font-weight: 400; font-style: normal; } .alv-m { font-family: alverata, serif; font-weight: 500; font-style: normal; } .alv-sb { font-family: alverata, serif; font-weight: 600; font-style: normal; } button { cursor: pointer; } .c-icon { position: relative; display: block; } .c-icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } a.c-btn { display: block; height: var(--btn-height); } a.c-btn .inr { width: 100%; height: calc(var(--btn-height) - 2px); display: flex; align-items: center; justify-content: center; } a.c-btn span { font-size: var(--fs-18-21); line-height: 1; } a.c-btn.white { background: var(--color-white); border: 1px solid var(--color-black); } a.c-btn.white span { color: var(--color-black); } .item .c-hero_movie { width: 100%; aspect-ratio: 684/854; position: relative; } .item .c-hero_movie .c-movie { width: 100%; aspect-ratio: 684/854; position: relative; } .item .c-hero_movie .c-movie video, .item .c-hero_movie .c-movie iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; vertical-align: bottom; object-fit: cover; object-position: top center; } .item .c-hero_movie .c-movie .hacobune-app-container { padding: 0 !important; width: 100% !important; background: none !important; max-width: 100% !important; pointer-events: none; } .item .c-hero_movie .c-movie .hacobune-unit-video { margin: 0 !important; aspect-ratio: 684/854; position: relative; } .item .c-hero_movie .c-movie .hacobune-unit-video-player { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .item .c-hero_movie .c-item_info { position: absolute; bottom: 0px; right: 0px; } .item .c-hero_movie .c-item_info .c-item_info_inner { padding: 0 2.56vw 2.56vw 0; text-align: right; } .item .c-hero_movie .c-item_info h3, .item .c-hero_movie .c-item_info p, .item .c-hero_movie .c-item_info dt, .item .c-hero_movie .c-item_info dd { color: var(--color-white); } .item .c-hero_movie .c-item_info p { font-family: alverata, serif; font-weight: 400; font-style: normal; margin-bottom: 2.05vw; } .item .c-hero_movie .c-item_info h3 { font-size: var(--fs-18-22); } .item .c-hero_movie .c-item_info dl { display: flex; line-height: 1.375; justify-content: flex-end; } .item .c-hero_movie .c-item_info dl dt, .item .c-hero_movie .c-item_info dl dd { font-size: var(--fs-8-10); font-family: alverata, serif; font-weight: 400; font-style: normal; } .item .c-hero_movie .c-item_info .txt_link { margin-top: 3.08vw; } .item .c-hero_movie .c-item_info .txt_link a { display: block; } .item .c-hero_movie .c-item_info .txt_link a .inr { display: flex; align-items: center; column-gap: 2.05vw; justify-content: flex-end; } .item .c-hero_movie .c-item_info .txt_link a span.txt { font-size: var(--fs-11-13); color: var(--color-white); } .item .c-hero_movie .c-item_info .txt_link a span.c-icon { width: var(--txtlink-icon-width); height: var(--txtlink-icon-width); } .item .c-hero_movie .c-item_info .txt_link a span.c-icon svg { fill: var(--color-white); } .item .c-hero_img { width: 100%; aspect-ratio: 640/800; } .item .c-hero_img figure { width: 100%; aspect-ratio: 640/800; position: relative; } .item .c-hero_img img { width: 100%; height: 100%; object-fit: cover; } .c-item_description { padding-bottom: var(--item-padding-bottom); } .c-item_description .c-imgs { margin-top: var(--section-imgs-gap); } .c-item_description .c-imgs ul { width: var(--inner-width); margin-inline: auto; display: flex; flex-direction: column; row-gap: var(--section-imgs-gap); } .c-item_description .c-imgs ul li .inr { background: var(--color-white); padding: var(--section-imgs-padding); } .c-item_description .c-imgs ul li figure { overflow: hidden; } .c-item_description .c-items { margin-top: var(--section-imgs-gap); display: flex; align-items: center; } .c-item_description .c-items .slide_items { width: var(--inner-width); margin-inline: auto; } .c-item_description .c-items ul::-webkit-scrollbar { /* Chrome / Safari */ display: none; } .c-item_description .c-items ul { display: flex; scroll-snap-type: x mandatory; scroll-snap-stop: always; overflow-x: auto; overflow-y: hidden; /* Firefox */ scrollbar-width: none; /* IE / Edge (旧) */ -ms-overflow-style: none; } .c-item_description .c-items ul.nosnap { scroll-snap-stop: none; scroll-behavior: auto; } .c-item_description .c-items ul.nosnap li { scroll-snap-align: none; } .c-item_description .c-items ul.disable { scroll-behavior: auto; pointer-events: none; } .c-item_description .c-items ul li { flex-shrink: 0; width: calc(50% - 0.51vw); margin-right: 1.03vw; } .c-item_description .c-items ul li:last-child { margin-right: 0px; } .c-item_description .c-items ul li a { width: 100%; display: block; } .c-item_description .c-items ul li p { font-family: alverata, serif; font-weight: 600; font-style: normal; font-size: var(--fs-12-16); margin-top: 2.05vw; } .c-item_description .c-items .c-slide_nav { width: calc((100% - var(--inner-width)) / 2); display: flex; justify-content: center; align-items: center; } .c-item_description .c-items button { width: var(--btn-slide-width); height: var(--btn-slide-width); border-radius: 100vmax; display: grid; place-content: center; } .c-item_description .c-items button .c-icon { width: var(--btn-icon-slide-width); height: var(--btn-icon-slide-width); } .c-item_description .c-items button.disable { opacity: 0.3; pointer-events: none; } .c-item_description .c-about { width: var(--inner-width); margin-inline: auto; margin-top: var(--section-imgs-gap); } .c-item_description .c-about h3 { font-size: var(--fs-item-title); font-weight: 600; line-height: 1.33; } .c-item_description .c-about h3 span.t { display: block; position: relative; width: fit-content; } .c-item_description .c-about h3 span.t:before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; } .c-item_description .c-about h3 span.t_i { position: relative; white-space: nowrap; } .c-item_description .c-about .c-description { margin-top: 3.59vw; } .c-item_description .c-about .c-description p { position: relative; font-size: var(--fs-13-14); line-height: 1.76; } .c-item_description .c-about .c-description p:before { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; display: block; } .c-item_description .c-about .c-description p span { position: relative; } .c-item_description .c-about .c-wrap_btn { margin-top: var(--section-imgs-gap); } section.collection { background: var(--color-yellow); width: 100%; } section.collection .s-inner { padding: 24.87vw 0 0 0; } section.collection .c-ttl_collection { text-align: center; margin-bottom: 12.82vw; } section.collection .c-ttl_collection h3 { font-size: var(--fs-21-33); color: var(--color-yellow-sub); } section.collection .c-list_collection { width: var(--inner-width); margin-inline: auto; --col1: 20.51vw; --col2: 41.03vw; --col3: 61.54vw; --row1: 24.62vw; --row2: 49.23vw; --row3: 73.85vw; --row4: 98.46vw; } section.collection .c-list_collection ul { width: 100%; height: 122.82vw; position: relative; } section.collection .c-list_collection ul li { position: absolute; width: var(--col1); aspect-ratio: 80/96; } section.collection .c-list_collection ul li .inr { width: calc(100% - 1px); height: calc(100% - 1px); position: absolute; top: 0px; left: 0px; } section.collection .c-list_collection ul li .inr figure { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } section.collection .c-list_collection ul li .inr figure img { width: 100%; height: 100%; object-fit: cover; } section.collection .c-list_collection ul li:nth-child(1), section.collection .c-list_collection ul li:nth-child(15) { width: var(--col2); aspect-ratio: 160/192; } section.collection .c-list_collection ul li:nth-child(1) { top: 0px; left: 0px; } section.collection .c-list_collection ul li:nth-child(2) { top: 0px; left: var(--col2); } section.collection .c-list_collection ul li:nth-child(3) { top: 0px; left: var(--col3); } section.collection .c-list_collection ul li:nth-child(4) { top: var(--row1); left: var(--col2); } section.collection .c-list_collection ul li:nth-child(5) { top: var(--row1); left: var(--col3); } section.collection .c-list_collection ul li:nth-child(6) { top: var(--row2); left: 0; } section.collection .c-list_collection ul li:nth-child(7) { top: var(--row2); left: var(--col1); } section.collection .c-list_collection ul li:nth-child(8) { top: var(--row2); left: var(--col2); } section.collection .c-list_collection ul li:nth-child(9) { top: var(--row2); left: var(--col3); } section.collection .c-list_collection ul li:nth-child(10) { top: var(--row3); left: 0; } section.collection .c-list_collection ul li:nth-child(11) { top: var(--row3); left: var(--col1); } section.collection .c-list_collection ul li:nth-child(12) { top: var(--row4); left: 0; } section.collection .c-list_collection ul li:nth-child(13) { top: var(--row4); left: var(--col1); } section.collection .c-list_collection ul li:nth-child(14) { top: var(--row3); left: var(--col2); display: none; } section.collection .c-list_collection ul li:nth-child(15) { top: var(--row3); left: var(--col2); } section.collection .c-btn_wrap { width: var(--inner-width); margin-inline: auto; margin-top: 10.26vw; } @media all and (min-width: 864px) { .item .c-hero_movie { width: 100%; height: 100vh; position: sticky; top: 0px; aspect-ratio: revert; } .item .c-hero_movie .c-movie_wrap { width: 50%; height: 100vh; position: absolute; top: 0px; right: 0px; overflow: hidden; } .item .c-hero_movie .c-movie { width: 100%; height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); aspect-ratio: 640/800; } .item .c-hero_movie .c-movie .hacobune-app-container, .item .c-hero_movie .c-movie .hacobune-unit-video, .item .c-hero_movie .c-movie .hacobune-video-js { height: 100vh; } .item .c-hero_movie .c-movie .hacobune-unit-video { aspect-ratio: revert; } .item .c-hero_movie .c-movie .hacobune-unit-video-player { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .item .c-hero_movie .c-item_info .c-item_info_inner { padding: 0 min(1.56vw, 20px) min(1.56vw, 20px) 0; } .item .c-hero_movie .c-item_info p { margin-bottom: min(0.78vw, 10px); } .item .c-hero_movie .c-item_info dl { line-height: 1.5; } .item .c-hero_movie .c-item_info .txt_link { margin-top: min(1.41vw, 18px); } .item .c-hero_movie .c-item_info .txt_link a .inr { column-gap: min(0.78vw, 10px); } .item .c-hero { width: 100%; height: 100vh; display: flex; margin-top: -100vh; } .item .c-hero .c-hero_img { width: 50%; height: 100vh; } .item .c-hero .c-hero_img figure { height: 100vh; } .item.r .c-hero_movie .c-movie_wrap { right: atuo; left: 0px; } .item.r .c-hero { justify-content: flex-end; } .item.r .c-item_description { left: 50%; position: relative; } .c-item_description { width: 50%; } .c-item_description .c-item_content { width: 100%; pointer-events: auto; } .c-item_description .c-imgs { margin-top: min(4.69vw, 60px); } .c-item_description .c-items ul::-webkit-scrollbar { display: none; /* Chrome, Safari, 新Edge */ } .c-item_description .c-items ul li { width: calc(50% - min(0.39vw, 5px)); margin-right: min(0.78vw, 10px); } .c-item_description .c-items ul li a { width: 100%; } .c-item_description .c-items ul li p { margin-top: min(0.63vw, 8px); } .c-item_description .c-about { margin-top: min(5vw, 64px); } .c-item_description .c-about .c-description { margin-top: min(0.86vw, 11px); } .c-item_description .c-about .c-wrap_btn { margin-top: min(4.69vw, 60px); } section.collection .s-inner { padding: min(8.59vw, 110px) 0 0 0; } section.collection .c-ttl_collection { margin-bottom: min(3.13vw, 40px); } section.collection .c-list_collection { width: 82.5%; max-width: 1056px; --col1: min(11.8vw, 151px); --col2: min(23.59vw, 302px); --col3: min(35.39vw, 453px); --col4: min(47.19vw, 604px); --col5: min(58.98vw, 755px); --col6: min(70.78vw, 906px); --row1: min(14.14vw, 181px); --row2: min(28.28vw, 362px); --row3: min(42.42vw, 543px); } section.collection .c-list_collection ul { height: min(42.34vw, 542px); } section.collection .c-list_collection ul li { position: absolute; width: var(--col1); aspect-ratio: 80/96; } section.collection .c-list_collection ul li:nth-child(14) { width: var(--col1); aspect-ratio: 80/96; } section.collection .c-list_collection ul li:nth-child(1), section.collection .c-list_collection ul li:nth-child(15) { width: var(--col2); aspect-ratio: 160/192; } section.collection .c-list_collection ul li:nth-child(1) { top: 0px; left: 0px; } section.collection .c-list_collection ul li:nth-child(2) { top: 0px; left: var(--col2); } section.collection .c-list_collection ul li:nth-child(3) { top: 0px; left: var(--col3); } section.collection .c-list_collection ul li:nth-child(4) { top: 0; left: var(--col4); } section.collection .c-list_collection ul li:nth-child(5) { top: 0; left: var(--col5); } section.collection .c-list_collection ul li:nth-child(6) { top: 0; left: var(--col6); } section.collection .c-list_collection ul li:nth-child(7) { top: var(--row1); left: var(--col2); } section.collection .c-list_collection ul li:nth-child(8) { top: var(--row1); left: var(--col3); } section.collection .c-list_collection ul li:nth-child(9) { top: var(--row1); left: var(--col4); } section.collection .c-list_collection ul li:nth-child(10) { top: var(--row2); left: 0; } section.collection .c-list_collection ul li:nth-child(11) { top: var(--row2); left: var(--col1); } section.collection .c-list_collection ul li:nth-child(12) { top: var(--row2); left: var(--col2); } section.collection .c-list_collection ul li:nth-child(13) { top: var(--row2); left: var(--col3); } section.collection .c-list_collection ul li:nth-child(14) { top: var(--row2); left: var(--col4); display: block; } section.collection .c-list_collection ul li:nth-child(15) { top: var(--row1); left: var(--col5); } section.collection .c-btn_wrap { width: min(37.03vw, 474px); margin-top: min(3.91vw, 50px); } }