.product-card:where(.astro-qinddzwp){br:not(.sub-sp-only,.sub-pc-only,.sub-both) {display: none;} br.sub-sp-only {@media screen and (min-width: 768px) {display: none;}} .br.sub-pc-only {display: none; @media screen and (min-width: 768px) {display: block;}}}:where(.product-card):where(.astro-qinddzwp){.inner { --pad-y-1: calc(var(--vw) * 12); --pad-y-2: calc(var(--vw) * 6); --w: calc((130 / var(--comp-w)) * 100vw); position: relative; display: grid; grid-template: "figure " max-content ". " var(--pad-y-1) "name " max-content ". " var(--pad-y-2) "box " max-content / var(--w); width: calc((130 / var(--comp-w)) * 100vw); height: 100%; @media screen and (min-width: 768px) { --pad-y-1: calc(var(--vw) * 20); --pad-y-2: calc(var(--vw) * 10); --w: 1fr; width: calc((221 / var(--comp-w)) * 100vw); } .figure { grid-area: figure; aspect-ratio: 131 / 160; width: 100%; height: auto; display: grid; place-items: center; @media screen and (min-width: 768px) { width: calc(var(--vw) * 220); } } .award-container { .image-wrapper { position: absolute; &.monoqlo-hall-of-fame { top: 0; left: 0; width: calc(var(--vw) * 40); transform: translateX(calc(var(--vw) * 16 * -1)) translateY(calc(var(--vw) * 10 * -1)); } &.best-buy-men-cosme-1, &.best-buy-men-cosme-2 { top: 0; left: 0; width: calc(var(--vw) * 53); transform: translateX(calc(var(--vw) * 24 * -1)) translateY(calc(var(--vw) * 20 * -1)); } &.monomax-body-soap { top: 0; left: 0; width: calc(var(--vw) * 50); transform: translateX(calc(var(--vw) * 19 * -1)) translateY(calc(var(--vw) * 4)); } &.monomax-body-mist, &.monomax-all-in-one-shampoo { top: 0; left: 0; width: calc(var(--vw) * 50); transform: translateX(calc(var(--vw) * 10 * -1)) translateY(calc(var(--vw) * 4)); } @media screen and (min-width: 768px) { &.monoqlo-hall-of-fame { transform: translateX(calc(var(--vw) * 18 * -1)) translateY(0); width: calc(var(--vw) * 66); } &.best-buy-men-cosme-1, &.best-buy-men-cosme-2 { transform: translateX(calc(var(--vw) * 28 * -1)) translateY(calc(var(--vw) * 10 * -1)); width: calc(var(--vw) * 73); } &.monomax-body-soap { top: 0; left: 0; width: calc(var(--vw) * 82); transform: translateX(calc(var(--vw) * 32 * -1)) translateY(0); } &.monomax-body-mist, &.monomax-all-in-one-shampoo { top: 0; left: 0; width: calc(var(--vw) * 82); transform: translateX(calc(var(--vw) * 16 * -1)) translateY(0); } } } .image-wrapper { &:where(.has-caption) { &::before { content: "＊"; position: absolute; bottom: calc(var(--vw) * 0); right: calc(var(--vw) * 0); color: var(--text-secondary); font-size: calc(var(--rem) * 7); @media screen and (min-width: 1024px) { font-size: calc(var(--rem) * 7); } } } } .text { font-size: calc(var(--rem) * 6); line-height: var(--leading-tight); letter-spacing: var(--tracking-widest); text-align: right; position: absolute; inset-inline-start: 0; inset-block-end: 0; color: var(--text-secondary); width: max-content; transform: translateY(calc(calc(var(--vw) * 6) + 100%)); @media screen and (min-width: 768px) { font-size: calc(var(--rem) * 7); transform: translateY( calc(calc(var(--vw) * 10) + 100%) ); } } } .name { grid-area: name; line-height: var(--leading-none); font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-extra-widest); line-height: var(--leading-snug); font-weight: var(--font-medium); width: max-content; @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 15); } sup { display: none; } } .box { grid-area: box; display: flex; justify-content: start; align-items: center; gap: calc(var(--vw) * 3); } :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) * 11); 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) * 10); 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-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) { font-size: calc(var(--vw) * 13); } } } }}.a:where(.astro-g6nquhgq){text-align:center;font-size:calc(var(--vw) * 16);line-height:var(--leading-none);letter-spacing:var(--tracking-wide);font-weight:var(--font-medium);text-decoration:underline;text-decoration-thickness:8%;text-underline-offset:25%;text-decoration-color:inherit;@media screen and (min-width: 768px){font-size:calc(var(--vw) * 22)}}.pick-up-section:where(.astro-pv435api){--pad-1: calc(var(--vw) * 60);--pad-2: calc(var(--vw) * 50);--pad-right: calc(var(--vw) * 17.5);--pad-left: calc(var(--vw) * 17.5);padding-top:calc(var(--vw) * 120);padding-bottom:calc(var(--vw) * 120);padding-right:var(--pad-right);padding-left:var(--pad-left);display:grid;grid-template:"title" max-content "." var(--pad-1) "list" max-content "." var(--pad-2) "link" max-content / 1fr;justify-items:center;@media screen and (min-width: 768px){--pad-1: calc(var(--vw) * 60);--pad-2: calc(var(--vw) * 100);padding-block-start:calc(var(--vw) * 180);padding-bottom:calc(var(--vw) * 250);padding-inline:calc(var(--vw) * 182)}.title {transform: translateX(calc((var(--pad-right) - var(--pad-left)) * 0.5)); grid-area: title; font-size: calc(var(--rem) * 24); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 34);}} .list {grid-area: list; display: grid; grid-template-columns: repeat(2,1fr); gap: calc(var(--vw) * 30); @media screen and (min-width: 768px) {grid-template-columns: repeat(4,1fr);}} .link {grid-area: link; transform: translateX(calc((var(--pad-right) - var(--pad-left)) * 0.5));}}.picture:where(.astro-l4z7viwi){.img {height: 100%; object-fit: cover;}}