/*** 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: #2F2B28; font-size: 3.2vw; letter-spacing: 0.02em; line-height: 1; background-color: #CED6D5; overflow: clip; } @media screen and (min-width: 1025px) { body { font-size: 12px; } } 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: 400; font-style: normal; } .l-loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 500; transition: all 1s; will-change: opacity; } .l-loading * { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .l-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } @media screen and (min-width: 1025px) { .l-main { display: flex; position: relative; } } @media screen and (min-width: 1025px) { .l-main__center { width: 450px; display: flex; flex-direction: column; align-items: center; } } .l-main__left, .l-main__right { display: none; } @media screen and (min-width: 1025px) { .l-main__left, .l-main__right { width: calc((100vw - 450px) / 2); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0; } } .l-main__left { background-color: #694230; } .l-toModal, .l-toMenu { width: 14.9333333333vw; aspect-ratio: 1/1; position: fixed; } @media screen and (min-width: 1025px) { .l-toModal, .l-toMenu { width: 72px; } } .l-toModal__link, .l-toMenu__link { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #694230; font-size: 2.1333333333vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; text-align: center; line-height: 1.3; background-color: #fff; border: 1px solid #694230; border-radius: 9999px; } @media screen and (min-width: 1025px) { .l-toModal__link, .l-toMenu__link { font-size: 9px; } } @media screen and (min-width: 1025px) { .l-toModal__link:hover, .l-toMenu__link:hover { opacity: 0.6; } } .l-toModal { top: 4.2666666667vw; left: 4.2666666667vw; z-index: 150; } @media screen and (min-width: 1025px) { .l-toModal { top: 2.7777777778vw; left: 2.7777777778vw; } } .l-toModal__link { gap: 1.6vw; transition: all 0.6s; cursor: pointer; } @media screen and (min-width: 1025px) { .l-toModal__link { gap: 7px; } } .l-toModal__link > span { width: 6.4vw; aspect-ratio: 24/10; display: block; position: relative; } @media screen and (min-width: 1025px) { .l-toModal__link > span { width: 28px; aspect-ratio: 28/11; } } .l-toModal__link > span::before, .l-toModal__link > span::after { content: ""; width: 100%; height: 1px; background-color: #694230; position: absolute; left: 50%; transform: translateX(-50%); transition: all 0.6s; } .l-toModal__link > span::before { top: 0; } .l-toModal__link > span::after { bottom: 0; } .l-toModal__link > span.is-visible { aspect-ratio: 1/1; } .l-toModal__link > span.is-visible::before, .l-toModal__link > span.is-visible::after { top: 50%; left: 50%; } .l-toModal__link > span.is-visible::before { transform: translate(-50%, -50%) rotate(-45deg); } .l-toModal__link > span.is-visible::after { transform: translate(-50%, -50%) rotate(45deg); } .l-toModal__link > p { border-bottom: 1px solid #694230; } .l-toModal__link > p.is-visible { border: none; } .l-toMenu { right: 4.2666666667vw; bottom: 2.1333333333vw; opacity: 0; z-index: 50; } @media screen and (min-width: 1025px) { .l-toMenu { right: 2.7777777778vw; bottom: 2.7777777778vw; } } .l-toMenu__link { gap: 0.5333333333vw; } @media screen and (min-width: 1025px) { .l-toMenu__link { gap: 3px; } } .l-toMenu__link > img { width: 6.4vw; } @media screen and (min-width: 1025px) { .l-toMenu__link > img { width: 30px; } } .l-modal { width: 100%; height: 100%; padding: 24vw 0 13.3333333333vw; display: flex; flex-direction: column; align-items: center; background-color: #CDD6D5; position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.6s, pointer-events 0s; overflow-y: scroll; } @media screen and (min-width: 1025px) { .l-modal { padding: 25px 0 64px; } } .l-modal.is-visible { opacity: 1; pointer-events: auto; } .l-modal__title { padding-bottom: 1.3333333333vw; font-size: 8.5333333333vw; font-family: futura-pt-bold, sans-serif; font-weight: 700; font-style: normal; border-bottom: 1px solid #2F2B28; } @media screen and (min-width: 1025px) { .l-modal__title { padding-bottom: 5px; font-size: 40px; } } .l-modal__stylist { margin-top: 8.5333333333vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .l-modal__stylist { margin-top: 50px; } } .l-modal__image { width: 17.0666666667vw; } @media screen and (min-width: 1025px) { .l-modal__image { width: 64px; } } .l-modal__name { margin-top: 3.2vw; text-align: center; line-height: 1.3; } @media screen and (min-width: 1025px) { .l-modal__name { margin-top: 12px; } } .l-modal__name > span { font-size: 4.2666666667vw; } @media screen and (min-width: 1025px) { .l-modal__name > span { font-size: 16px; } } .l-modal__list { margin-top: 5.3333333333vw; display: flex; flex-wrap: wrap; column-gap: 0.4vw; row-gap: 0.5333333333vw; } @media screen and (min-width: 1025px) { .l-modal__list { width: 1006px; margin-top: 32px; justify-content: center; gap: 2px; } } .l-modal__list > li { width: 33.0666666667vw; } @media screen and (min-width: 1025px) { .l-modal__list > li { width: 124px; } } .l-modal__list > li > a { border: 1px solid #694230; } @media screen and (min-width: 1025px) { .l-modal__list > li > a:hover { opacity: 0.6; } } .l-modal__model { display: flex; flex-direction: column; align-items: center; justify-content: center; } .l-modal__modelTitle { font-size: 4.2666666667vw; } @media screen and (min-width: 1025px) { .l-modal__modelTitle { font-size: 16px; } } .l-modal__modelName { margin-top: 4.2666666667vw; display: flex; flex-direction: column; align-items: center; gap: 1.3333333333vw; font-size: 2.6666666667vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; } @media screen and (min-width: 1025px) { .l-modal__modelName { margin-top: 16px; gap: 5px; font-size: 10px; } } .l-modal__close { margin-top: 13.3333333333vw; display: flex; flex-direction: column; align-items: center; gap: 3.2vw; color: #616F72; transition: all 0.6s; cursor: pointer; } @media screen and (min-width: 1025px) { .l-modal__close { margin-top: 55px; gap: 12px; } } @media screen and (min-width: 1025px) { .l-modal__close:hover { opacity: 0.6; } } .l-modal__close > span { width: 8vw; aspect-ratio: 1/1; display: block; position: relative; } @media screen and (min-width: 1025px) { .l-modal__close > span { width: 35px; } } .l-modal__close > span::before, .l-modal__close > span::after { content: ""; width: 1px; height: 100%; background-color: #616F72; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .l-modal__close > span::before { transform: translate(-50%, -50%) rotate(-45deg); } .l-modal__close > span::after { transform: translate(-50%, -50%) rotate(45deg); } .c-menu { padding-top: 21.3333333333vw; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 1025px) { .c-menu { height: 100%; padding: 0; justify-content: center; } } .c-menu__title { padding-bottom: 1.3333333333vw; font-size: 8.5333333333vw; font-family: futura-pt-bold, sans-serif; font-weight: 700; font-style: normal; position: relative; } @media screen and (min-width: 1025px) { .c-menu__title { font-size: 40px; padding-bottom: 5px; } } .c-menu__title::after { content: ""; width: 105%; height: 1px; background-color: #2F2B28; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .c-menu__list { margin-top: 10.1333333333vw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.5333333333vw; position: relative; } @media screen and (min-width: 1025px) { .c-menu__list { width: min(80%, 400px); margin-top: 40px; display: flex; flex-wrap: wrap; gap: 2px; } } @media screen and (min-width: 1025px) { .c-menu__list > li { width: calc((100% - 4px) / 3); transition: all 0.6s; } } @media screen and (min-width: 1025px) { .c-menu__list > li.is-visible { opacity: 0.6; } } .c-menu__list > li:nth-child(1) { grid-column: 1; grid-row: 1; } .c-menu__list > li:nth-child(2) { grid-column: 2; grid-row: 1; } .c-menu__list > li:nth-child(3) { grid-column: 3; grid-row: 1; } .c-menu__list > li:nth-child(4) { grid-column: 3; grid-row: 2; } .c-menu__list > li:nth-child(5) { grid-column: 3; grid-row: 3; } .c-menu__list > li:nth-child(6) { grid-column: 3; grid-row: 4; } .c-menu__list > li:nth-child(7) { grid-column: 2; grid-row: 4; } .c-menu__list > li:nth-child(8) { grid-column: 1; grid-row: 4; } .c-menu__list > li:nth-child(9) { grid-column: 1; grid-row: 3; } .c-menu__list > li:nth-child(10) { grid-column: 1; grid-row: 2; } .c-menu__list > li > a { border: 1px solid #694230; } .c-menu__text { color: #616F72; font-size: 4.2666666667vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; font-weight: 500; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (min-width: 1025px) { .c-menu__text { width: calc(100% - 2px - (100% - 4px) / 3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; position: static; transform: none; } } .c-item { padding-top: 8.5333333333vw; display: flex; flex-direction: column; align-items: center; background-color: #694230; } @media screen and (min-width: 1025px) { .c-item { width: 100%; padding-top: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } } .c-item__heading { font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; color: #C9C9C9; text-align: center; } @media screen and (min-width: 1025px) { .c-item__heading { font-size: 14px; } } .c-item__heading > span { font-size: 4.2666666667vw; font-weight: 500; } @media screen and (min-width: 1025px) { .c-item__heading > span { font-size: 16px; } } .c-item__name { margin-top: 10.6666666667vw; color: #E3E3E3; font-size: 5.3333333333vw; font-weight: 600; } @media screen and (min-width: 1025px) { .c-item__name { margin-top: 40px; font-size: 24px; } } .c-item__image { margin-top: 6.4vw; border: 1px solid #694230; position: relative; overflow: hidden; } @media screen and (min-width: 1025px) { .c-item__image { width: min(80%, 400px); margin-top: 24px; } } .c-item__image > a > img { transition: all 0.6s; } @media screen and (min-width: 1025px) { .c-item__image > a:hover > img { transform: scale(1.1); } } .c-item__credit { color: #fff; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; text-decoration: underline; position: absolute; right: 4.2666666667vw; bottom: 2.1333333333vw; } @media screen and (min-width: 1025px) { .c-item__credit { right: 10px; bottom: 10px; } } .p-firstView { aspect-ratio: 375/790; padding: 19.2vw 0 20.8vw; display: flex; flex-direction: column; align-items: center; position: relative; } @media screen and (min-width: 1025px) { .p-firstView { aspect-ratio: 1440/1100; padding: 3.9583333333vw 0 8.3333333333vw; } } .p-firstView__top { font-size: 3.2vw; } @media screen and (min-width: 1025px) { .p-firstView__top { font-size: 1.1111111111vw; } } .p-firstView__top > span { font-size: 4.5333333333vw; letter-spacing: 0.08em; } @media screen and (min-width: 1025px) { .p-firstView__top > span { font-size: 1.3888888889vw; } } .p-firstView__theme { margin-top: 4.2666666667vw; color: #694230; font-size: 6.9333333333vw; font-weight: 500; line-height: 1.3; text-align: center; position: relative; } @media screen and (min-width: 1025px) { .p-firstView__theme { margin-top: 2.2222222222vw; font-size: 3.4722222222vw; } } .p-firstView__theme::after { content: ""; width: 72vw; aspect-ratio: 271/25; background-image: url(../images/firstView/line.png); background-size: cover; background-repeat: no-repeat; position: absolute; bottom: -12%; left: 50%; transform: translateX(-50%); z-index: -1; } @media screen and (min-width: 1025px) { .p-firstView__theme::after { width: 27.7777777778vw; bottom: -14%; } } .p-firstView__loop { margin-top: 13.3333333333vw; overflow: hidden; } @media screen and (min-width: 1025px) { .p-firstView__loop { margin-top: 4.8611111111vw; } } .p-firstView__loopWrap { width: 666.6666666667%; display: flex; flex-direction: row-reverse; animation: loop 30s linear infinite; } @media screen and (min-width: 1025px) { .p-firstView__loopWrap { width: 437.5%; animation: loopPC 30s linear infinite; } } .p-firstView__loopWrap > li { margin-right: -13.3333333333vw; position: relative; } @media screen and (min-width: 1025px) { .p-firstView__loopWrap > li { margin-right: -3.4722222222vw; } } .p-firstView__text { position: absolute; bottom: 19.2vw; } @media screen and (min-width: 1025px) { .p-firstView__text { bottom: 7.6388888889vw; } } .p-firstView__heading { width: 100vw; font-size: 12.2666666667vw; font-family: futura-pt-bold, sans-serif; font-weight: 700; font-style: normal; text-align: center; } @media screen and (min-width: 1025px) { .p-firstView__heading { font-size: 6.25vw; } } .p-firstView__heading > span { font-size: 15.4666666667vw; } @media screen and (min-width: 1025px) { .p-firstView__heading > span { font-size: 8.3333333333vw; } } .p-firstView__season { margin-top: 1.3333333333vw; font-size: 2.9333333333vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; line-height: 1.3; text-align: center; } @media screen and (min-width: 1025px) { .p-firstView__season { margin-top: 0; font-size: 1.5277777778vw; } } .p-firstView__lead { margin-top: 10.6666666667vw; font-size: 4.2666666667vw; font-weight: 500; line-height: 2; text-align: center; font-feature-settings: "palt"; } @media screen and (min-width: 1025px) { .p-firstView__lead { margin-top: 7.6388888889vw; font-size: 1.1111111111vw; } } .p-stylist { width: 92vw; margin-inline: auto; padding: 6.6666666667vw 4.2666666667vw 9.3333333333vw; background-color: #fff; border: 1px solid #2F2B28; } @media screen and (min-width: 1025px) { .p-stylist { width: 410px; padding: 24px 18px 40px; } } .p-stylist__info { display: flex; align-items: end; gap: 4.5333333333vw; } @media screen and (min-width: 1025px) { .p-stylist__info { gap: 16px; } } .p-stylist__image { width: 30.6666666667vw; } @media screen and (min-width: 1025px) { .p-stylist__image { width: 137px; } } .p-stylist__name { padding-bottom: 1.3333333333vw; font-size: 2.6666666667vw; } @media screen and (min-width: 1025px) { .p-stylist__name { padding-bottom: 8px; font-size: 12px; } } .p-stylist__name > span { font-size: 4.2666666667vw; } @media screen and (min-width: 1025px) { .p-stylist__name > span { font-size: 16px; } } .p-stylist__text { margin-top: 3.7333333333vw; line-height: 1.7; } @media screen and (min-width: 1025px) { .p-stylist__text { margin-top: 16px; } } body { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-weight: 400; font-style: normal; } .p-contents { width: 100%; text-align: center; } .p-contents__scroll { width: 100%; aspect-ratio: 375/193; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (min-width: 1025px) { .p-contents__scroll { height: 175px; justify-content: flex-end; } } .p-contents__scroll > span { width: 1px; height: 21.3333333333vw; background-color: #694230; position: relative; } @media screen and (min-width: 1025px) { .p-contents__scroll > span { height: 95px; } } .p-contents__scroll > span::after { content: ""; width: 2.4vw; height: 2.4vw; background-color: #694230; border-radius: 9999px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); animation: circleMove 1.6s ease-in-out infinite, circleHide 1.6s ease-out infinite; } @media screen and (min-width: 1025px) { .p-contents__scroll > span::after { width: 10px; height: 10px; } } .p-contents__select { padding-top: 10.6666666667vw; color: #616F72; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; } @media screen and (min-width: 1025px) { .p-contents__select { padding-top: 80px; } } .p-contents__select .red, .p-contents__select .blue { font-size: 8.5333333333vw; } @media screen and (min-width: 1025px) { .p-contents__select .red, .p-contents__select .blue { font-size: 38px; } } .p-contents__select .amp { font-size: 6.4vw; } @media screen and (min-width: 1025px) { .p-contents__select .amp { font-size: 29px; } } .p-contents__select .style { font-size: 4.2666666667vw; line-height: 1.5; } @media screen and (min-width: 1025px) { .p-contents__select .style { font-size: 18px; } } .p-contents__style { padding-top: 10.6666666667vw; } @media screen and (min-width: 1025px) { .p-contents__style { padding-top: 80px; } } .p-contents__type { padding: 2.1333333333vw 0; display: inline-block; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; border-top: 1px solid #616F72; border-bottom: 1px solid #616F72; position: relative; } @media screen and (min-width: 1025px) { .p-contents__type { padding: 8px 0; font-size: 14px; } } .p-contents__type > span { font-size: 4.2666666667vw; } @media screen and (min-width: 1025px) { .p-contents__type > span { font-size: 19px; } } .p-contents__type::before, .p-contents__type::after { content: ""; width: 100%; height: 1px; background-color: #616F72; position: absolute; left: 50%; transform: translateX(-50%); } .p-contents__type::before { top: 0.5333333333vw; } @media screen and (min-width: 1025px) { .p-contents__type::before { top: 2px; } } .p-contents__type::after { bottom: 0.5333333333vw; } @media screen and (min-width: 1025px) { .p-contents__type::after { bottom: 2px; } } .p-contents__theme { margin-top: 10.6666666667vw; font-size: 5.3333333333vw; font-weight: 600; font-feature-settings: "palt"; } @media screen and (min-width: 1025px) { .p-contents__theme { margin-top: 33px; font-size: 24px; } } .p-contents__image { margin-top: 6.4vw; position: relative; } @media screen and (min-width: 1025px) { .p-contents__image { width: 450px; margin-top: 24px; } } .p-contents__image > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 10; } .p-contents__desc, .p-contents__open { position: absolute; z-index: 5; } .p-contents__desc { width: 100%; height: 100%; padding-bottom: 21.3333333333vw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff; line-height: 2; white-space: pre-line; background-color: rgba(0, 0, 0, 0.3); bottom: 0; opacity: 0; transition: all 0.6s; } @media screen and (min-width: 1025px) { .p-contents__desc { padding-bottom: 100px; } } .p-contents__desc.is-visible { opacity: 1; } .p-contents__open { width: 17.3333333333vw; aspect-ratio: 60/36; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: #fff; font-size: 2.6666666667vw; right: 4.2666666667vw; bottom: 2.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents__open { width: 75px; font-size: 12px; right: 18px; bottom: 10px; } } .p-contents__open > span { width: 6.4vw; aspect-ratio: 1/1; position: relative; } @media screen and (min-width: 1025px) { .p-contents__open > span { width: 20px; } } .p-contents__open > span::before, .p-contents__open > span::after { content: ""; width: 1px; height: 100%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.6s; } .p-contents__open > span::after { transform: translate(-50%, -50%) rotate(90deg); } .p-contents__open.is-visible > span::before { transform: translate(-50%, -50%) rotate(-135deg); } .p-contents__open.is-visible > span::after { transform: translate(-50%, -50%) rotate(135deg); } .p-contents__items { padding: 6.6666666667vw 0 10.6666666667vw; display: flex; flex-direction: column; align-items: center; background-color: #D6D0CE; } @media screen and (min-width: 1025px) { .p-contents__items { padding: 30px 0 50px; } } .p-contents__credits { width: 85.8666666667vw; display: flex; flex-wrap: wrap; gap: 8.5333333333vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; } @media screen and (min-width: 1025px) { .p-contents__credits { width: 386px; gap: 38.5px; } } .p-contents__credits > li { width: 22.9333333333vw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2.1333333333vw; } @media screen and (min-width: 1025px) { .p-contents__credits > li { width: 103px; gap: 10px; } } .p-contents__credits > li > span { width: 1px; height: 3.2vw; display: block; background-color: #2F2B28; } @media screen and (min-width: 1025px) { .p-contents__credits > li > span { height: 14px; } } .p-contents__category { color: #616F72; font-size: 4.2666666667vw; font-weight: 500; } @media screen and (min-width: 1025px) { .p-contents__category { font-size: 19px; } } .p-contents__link { display: flex; flex-direction: column; align-items: center; flex-grow: 1; } @media screen and (min-width: 1025px) { .p-contents__link.link:hover .p-contents__thumb, .p-contents__link.link:hover .p-contents__data { opacity: 0.7; } .p-contents__link.link:hover .p-contents__buy { color: #694230; background-color: #fff; } } .p-contents__link:not(.link) { pointer-events: none; } .p-contents__thumb { width: 100%; transition: all 0.6s; } .p-contents__data { margin-top: 2.6666666667vw; display: flex; flex-direction: column; align-items: center; flex-grow: 1; gap: 1.3333333333vw; font-size: 2.6666666667vw; word-break: break-all; transition: all 0.6s; } @media screen and (min-width: 1025px) { .p-contents__data { margin-top: 10px; gap: 5px; font-size: 12px; } } .p-contents__data .name { font-family: dnp-shuei-gothic-gin-std, sans-serif; line-height: 1.3; } .p-contents__data .price { font-size: 3.2vw; } @media screen and (min-width: 1025px) { .p-contents__data .price { font-size: 14px; } } .p-contents__buy, .p-contents__gray { width: 14.9333333333vw; margin-top: 2.6666666667vw; aspect-ratio: 56/24; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (min-width: 1025px) { .p-contents__buy, .p-contents__gray { width: 67px; margin-top: 10px; } } .p-contents__buy { color: #fff; background-color: #694230; border: 1px solid #694230; font-size: 14px; transition: all 0.6s; } .p-contents__gray { font-size: 1.8666666667vw; white-space: pre-line; border: 1px solid #2F2B28; } @media screen and (min-width: 1025px) { .p-contents__gray { font-size: 10px; } } .p-photo { padding: 6.6666666667vw 0 10.6666666667vw; color: #fff; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; text-align: center; background-color: #694230; } @media screen and (min-width: 1025px) { .p-photo { width: 100%; margin-top: 80px; padding: 30px 0 50px; } } .p-photo__title { position: relative; } .p-photo__title::after { content: ""; width: 22.6666666667vw; aspect-ratio: 85/16; background-image: url(../images/main/line.png); background-size: cover; background-repeat: no-repeat; position: absolute; bottom: -90%; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1025px) { .p-photo__title::after { width: 100px; bottom: -95%; } } .p-photo__loop { margin-top: 4vw; overflow: hidden; } @media screen and (min-width: 1025px) { .p-photo__loop { margin-top: 20px; } } .p-photo__loopWrap { width: 500vw; display: flex; animation: galleryLoop 20s linear infinite; } @media screen and (min-width: 1025px) { .p-photo__loopWrap { width: 2250px; } } .p-photo__list { display: flex; } .p-photo__list > li { width: 25%; border: 1px solid #694230; } .p-recommend { padding: 21.3333333333vw 0 32vw; display: flex; flex-direction: column; align-items: center; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; text-align: center; } @media screen and (min-width: 1025px) { .p-recommend { padding: 95px 0; } } .p-recommend__title { font-size: 8.5333333333vw; font-family: futura-pt-bold, sans-serif; font-weight: 700; font-style: normal; } @media screen and (min-width: 1025px) { .p-recommend__title { font-size: 40px; } } .p-recommend__list { width: 86.4vw; margin-top: 8vw; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6.4vw; } @media screen and (min-width: 1025px) { .p-recommend__list { width: 790px; margin-top: 40px; row-gap: 40px; } } .p-recommend__list > * { width: 26.6666666667vw; } @media screen and (min-width: 1025px) { .p-recommend__list > * { width: 120px; } } .p-recommend__link { width: 32vw; aspect-ratio: 120/38; margin-top: 10.6666666667vw; } @media screen and (min-width: 1025px) { .p-recommend__link { width: 168px; height: 56px; margin-top: 80px; } } .p-recommend__link > a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 4.2666666667vw; background-color: #694230; border: 1px solid #694230; } @media screen and (min-width: 1025px) { .p-recommend__link > a { font-size: 24px; } } @media screen and (min-width: 1025px) { .p-recommend__link > a:hover { color: #694230; background-color: #fff; } } @media screen and (min-width: 1025px) { .sectionAjax a:hover { opacity: 0.6; } } .sectionAjax a > p { position: relative; } .sectionAjax img + span { position: absolute; bottom: 0; left: 0; display: block; background: #219bd9; color: #fff; box-sizing: border-box; padding: 3px 10px; white-space: nowrap; font-size: 10px; } @media screen and (min-width: 1025px) { .sectionAjax img + span { font-size: 13px; } } .sectionAjax .ico_box { display: none; } .sectionAjax .ico_box + p { margin-top: 2.1333333333vw; } @media screen and (min-width: 1025px) { .sectionAjax .ico_box + p { margin-top: 9px; } } .sectionAjax .textOverflow, .sectionAjax .label { display: -webkit-box; margin-top: 1.0666666667vw; font-family: dnp-shuei-gothic-gin-std, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media screen and (min-width: 1025px) { .sectionAjax .textOverflow, .sectionAjax .label { margin-top: 6px; } } .sectionAjax .price { margin-top: 1.0666666667vw; } @media screen and (min-width: 1025px) { .sectionAjax .price { margin-top: 6px; } } .sectionAjax .salecolor, .sectionAjax .salecolor + .price { color: red; } .p-staffCredit { padding-bottom: 32vw; } @media screen and (min-width: 1025px) { .p-staffCredit { padding-bottom: 95px; } } .p-staffCredit__list { display: flex; flex-direction: column; align-items: center; gap: 4vw; font-size: 4.2666666667vw; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; } @media screen and (min-width: 1025px) { .p-staffCredit__list { gap: 15px; font-size: 18px; } } @media screen and (min-width: 1025px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 1024px) { .u-hidden-sp { display: none !important; } } .red { color: #891100; } .blue { color: #008893; }/*# sourceMappingURL=app.css.map */