.product-card:where(.astro-fnr77g23){br:not(.main-sp-only,.main-pc-only,.main-both) {display: none;} br.main-sp-only {@media screen and (min-width: 768px) {display: none;}} .br.main-pc-only {display: none; @media screen and (min-width: 768px) {display: block;}}}:where(.product-card):where(.astro-fnr77g23){.inner { --pad-y: calc(var(--vw) * 2); position: relative; display: grid; grid-template: "figure-wrapper " max-content "." 1fr "name-container " max-content "another-name " max-content "annotation" max-content ". " var(--pad-y) "box " max-content / 1fr; height: 100%; @media screen and (min-width: 768px) { --pad-y: calc(var(--vw) * 6); } @media screen and (min-width: 1024px) { aspect-ratio: 1/1; } .figure-wrapper { grid-area: figure-wrapper; aspect-ratio: 124 / 147; height: auto; margin-inline: auto; display: grid; place-items: center; @media screen and (min-width: 768px) { width: calc((307 / 480) * 100%); } .figure { position: absolute; left: 50%; transform: translateX(-50%); } } .figure-wrapper { @media screen and (max-width: 767px) { --width-sp-sm: calc((102 / var(--comp-w)) * 100vw); --width-sp-md: calc((107 / var(--comp-w)) * 100vw); --width-sp-lg: calc((109 / var(--comp-w)) * 100vw); --top-sp-sm: 0; --top-sp-md: calc((6 / var(--comp-w)) * 100vw); &.width-sp-sm { width: var(--width-sp-sm); } &.width-sp-md { width: var(--width-sp-md); } &.width-sp-lg { width: var(--width-sp-lg); } .figure { &.width-sp-sm { width: var(--width-sp-sm); } &.width-sp-md { width: var(--width-sp-md); } &.width-sp-lg { width: var(--width-sp-lg); } &.top-sp-sm { top: var(--top-sp-sm); } &.top-sp-md { top: var(--top-sp-md); } } } @media screen and (min-width: 768px) { --width-pc-sm: calc((284 / var(--comp-w)) * 100vw); --width-pc-md: calc((297 / var(--comp-w)) * 100vw); --width-pc-lg: calc((308 / var(--comp-w)) * 100vw); --top-pc-sm: 0; --top-pc-md: calc((5 / var(--comp-w)) * 100vw); --top-pc-lg: calc((11 / var(--comp-w)) * 100vw); &.width-pc-sm { width: var(--width-pc-sm); } &.width-pc-md { width: var(--width-pc-md); } &.width-pc-lg { width: var(--width-pc-lg); } .figure { &.width-pc-sm { width: var(--width-pc-sm); } &.width-pc-md { width: var(--width-pc-md); } &.width-pc-lg { width: var(--width-pc-lg); } &.top-pc-sm { top: var(--top-pc-sm); } &.top-pc-md { top: var(--top-pc-md); } &.top-pc-lg { top: var(--top-pc-lg); } } } } .thumbnail { grid-area: thumbnail; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1; object-fit: cover; & ~ * { position: relative; z-index: 2; } } .award-container { .image-wrapper { position: absolute; &.monoqlo-hall-of-fame { top: calc(var(--vw) * 9); left: calc(var(--vw) * 10); width: calc((48 / 187) * 100%); } &.best-buy-men-cosme-1 { top: calc(var(--vw) * 4); left: calc(var(--vw) * 12.5); width: calc((46 / 187) * 100%); } &.best-buy-men-cosme-2 { top: calc(var(--vw) * 13); left: calc(var(--vw) * 14); width: calc((50 / 187) * 100%); } &.monomax-body-soap { top: calc(var(--vw) * 14); left: calc(var(--vw) * 16); width: calc((47 / 187) * 100%); } &.monomax-body-mist { top: calc(var(--vw) * 14); left: calc(var(--vw) * 17); width: calc((51 / 187) * 100%); } &.monomax-all-in-one-shampoo { top: calc(var(--vw) * 14); left: calc(var(--vw) * 16); width: calc((51 / 187) * 100%); } @media screen and (min-width: 768px) { &.monoqlo-hall-of-fame { top: calc(var(--vw) * 35); left: calc(var(--vw) * 55); width: calc((84 / 480) * 100%); } &.best-buy-men-cosme-1 { top: calc(var(--vw) * 35); left: calc(var(--vw) * 52); width: calc((97 / 480) * 100%); } &.best-buy-men-cosme-2 { top: calc(var(--vw) * 53); left: calc(var(--vw) * 42); width: calc((108 / 480) * 100%); } &.monomax-body-soap { top: calc(var(--vw) * 48); left: calc(var(--vw) * 44); width: calc((96 / 480) * 100%); } &.monomax-body-mist, &.monomax-all-in-one-shampoo { top: calc(var(--vw) * 48); left: calc(var(--vw) * 44); width: calc((105 / 480) * 100%); } } } .image-wrapper { &:where(.has-caption) { &::before { content: "＊"; position: absolute; bottom: calc(var(--vw) * 6); right: calc(var(--vw) * 1); color: inherit; font-size: calc(var(--rem) * 6); @media screen and (min-width: 1024px) { font-size: calc(var(--rem) * 10); } } } } .text { font-size: calc(var(--rem) * 6); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); text-align: right; position: absolute; inset-inline-end: calc(var(--vw) * 10); inset-block-start: calc(var(--vw) * 10); @media screen and (min-width: 768px) { inset-inline-end: calc(var(--vw) * 12); inset-block-start: calc(var(--vw) * 12); } @media screen and (min-width: 1024px) { inset-inline-end: calc(var(--vw) * 22); inset-block-start: calc(var(--vw) * 22); line-height: var(--leading-none); font-size: calc(var(--rem) * 7); width: max-content; } } } .name-container { grid-area: name-container; position: relative; } :where(.name-container) { .tag-feature { position: absolute; top: calc(var(--vw) * -4); left: calc(var(--vw) * 14); font-size: calc(var(--rem) * 6); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); border-width: 1px; border-style: solid; padding: calc(var(--vw) * 3) calc(var(--vw) * 3); width: max-content; transform: translateY(-100%); font-weight: var(--font-medium); @media screen and (min-width: 560px) { font-size: calc(var(--rem) * 10); top: calc(var(--vw) * -14); } @media screen and (min-width: 768px) { padding: calc(var(--vw) * 6) calc(var(--vw) * 6); left: calc(var(--vw) * 60); top: calc(var(--vw) * -12); } } .name { line-height: var(--leading-snug); font-size: calc(var(--rem) * 11); letter-spacing: var(--tracking-extra-widest); font-weight: var(--font-medium); padding-inline-start: calc(var(--vw) * 14); position: relative; width: max-content; @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 15); padding-inline: calc(var(--vw) * 60); } } .another-name { font-size: calc(var(--rem) * 7); line-height: var(--leading-none); letter-spacing: var(--tracking-widest); padding-inline-start: calc(var(--vw) * 14); margin-block-start: calc(var(--vw) * 1); @media screen and (min-width: 768px) { font-size: calc(var(--rem) * 10); padding-inline: calc(var(--vw) * 60); margin-block-start: calc(var(--vw) * 5); } } } .annotation { grid-area: annotation; font-size: calc(var(--rem) * 6); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); padding-inline: calc(var(--vw) * 14); @media screen and (min-width: 768px) { font-size: calc(var(--rem) * 10); padding-inline: calc(var(--vw) * 60); margin-block-start: calc(var(--vw) * 4); } } .box { grid-area: box; display: flex; justify-content: start; align-items: center; padding-block-end: calc(var(--vw) * 13); padding-inline: calc(var(--vw) * 14); gap: calc(var(--vw) * 3); @media screen and (min-width: 768px) { padding-block-end: calc(var(--vw) * 40); padding-inline: calc(var(--vw) * 60); } } :where(.box) { .price { display: flex; justify-content: start; align-items: center; gap: calc(var(--vw) * 1); } :where(.price) { .value { line-height: var(--leading-none); font-size: calc(var(--vw) * 10); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 15); } } .tax { font-size: calc(var(--vw) * 9); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 14); } } } .volume { line-height: var(--leading-none); font-size: calc(var(--vw) * 9); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 13); } } } }}