.box:where(.astro-jhzkjko3){pointer-events:none;display:flex;flex-direction:column;--width: calc((100vw) - (var(--pad-i)) * 2);width:var(--width);@media screen and (min-width: 768px){--width: calc((100vw / 2) - var(--pad-i) * 2)}&:first-child{position:relative}&:not(:first-child){position:absolute;top:0;left:0}}:where(.box):where(.astro-jhzkjko3){.volume {transition: opacity 0.2s ease; &:not(.is-active),&:not(.is-active) + .urls {opacity: 0.3; z-index: 0;} &.is-active,&.is-active + .urls {z-index: 1; .list {opacity: 1;}}} .urls {.list {opacity: 0;}} :where(.volume) {.button {display: flex; justify-content: center; pointer-events: auto; font-size: calc(var(--vw) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); width: calc(var(--width) / 3); transform: translateX(calc((var(--width) / 3) * var(--index))); padding-block: calc(var(--vw) * 18); text-align: center; border-bottom-width: 2px; border-bottom-style: solid; @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 14);} span {display: block;}}} .urls {pointer-events: auto; padding: calc(var(--vw) * 16); display: flex; flex-direction: column; gap: calc(var(--vw) * 16); @media screen and (min-width: 768px) {padding: calc(var(--vw) * 18);}} :where(.urls) {.heading {font-size: calc(var(--vw) * 12); line-height: var(--leading-none); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 13);}} .list {display: grid; align-items: center; grid-template-columns: repeat(2,1fr); justify-content: center; gap: calc(var(--vw) * 12);} :where(.list) {.item {width: 100%; &.amazon {grid-row: 1 / 2; grid-column: 2 / 3;}} :where(.item) {div.link {opacity: 0.4;} .link {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: calc(var(--vw) * 8); border-radius: var(--radius); transition: background-color 0.3s ease-in-out; min-height: 48px; @media screen and (min-width: 768px) {min-height: 44px;}} :where(.link) {.img.nature-lab-store {width: calc(var(--vw) * 115);} .img.amazon {width: calc(var(--vw) * 66);} @media screen and (min-width: 768px) {.img.amazon {width: calc(var(--vw) * 71);}}}}}}}.prices:where(.astro-su73hmn4){margin-block-start:calc(var(--vw) * 20);display:flex;align-items:center;gap:calc(var(--vw) * 2);line-height:var(--leading-none);letter-spacing:var(--tracking-wide);font-weight:var(--font-medium);position:relative;@media screen and (min-width: 768px){margin-block-start:calc(var(--vw) * 18)}.value {font-size: calc(var(--rem) * 14); &:not(:first-child) {position: absolute; top: 0; left: 0;} &.is-active {opacity: 1;} &:not(.is-active) {opacity: 0;} @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}} .tax {font-size: calc(var(--vw) * 13); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 15);}}}.details:where(.astro-n3f46rkw){padding-inline:calc(var(--vw) * 8)}:where(.details):where(.astro-n3f46rkw){:where(.summary) {.summery-inner {cursor: pointer; font-size: calc(var(--rem) * 16); font-weight: var(--font-medium); padding-block: calc(var(--vw) * 24); display: flex; justify-content: space-between; align-items: center;} :where(.summery-inner) {.text {line-height: var(--leading-none);} .icon {position: relative; aspect-ratio: 1/1; width: calc(var(--rem) * 16); height: auto;} :where(.icon) {.bar {position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 1px; transition: rotate 0.2s var(--ease-in-slice); &:first-of-type {rotate: 90deg;} &:last-of-type {rotate: 0deg;}}}}} .content {overflow: hidden;} &:where(.is-opened) {:where(.summery-inner) {:where(.icon) {.bar {&:first-of-type {rotate: 180deg;}}}}}}.content:where(.astro-rjv6csbi){--pad-i: calc(var(--vw) * 20);--pad-b-s: calc(var(--vw) * 32);padding-inline:var(--pad-i);padding-block-start:var(--pad-b-s);display:grid;grid-template:"tag-list" max-content "name" max-content "another-name" max-content "price" max-content "name-annotation" max-content "online-store" max-content "product-details" max-content "ingredients" max-content / 1fr;@media screen and (min-width: 768px){--pad-b-s: calc(var(--vw) * 40);--pad-i: calc(var(--vw) * 115)}}.offset-x:where(.astro-rjv6csbi){padding-inline-start:calc(var(--vw) * 2);@media screen and (min-width: 768px){padding-inline-start:0}}:where(.content):where(.astro-rjv6csbi){.tag-list {display: flex; justify-content: start; align-items: center; gap: calc(var(--vw) * 8); .tag-feature {grid-area: tag-feature; font-size: calc(var(--rem) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); border-width: 1px; border-style: solid; border-color: var(--line-quaternary); font-weight: var(--font-medium); padding: calc(var(--vw) * 6) calc(var(--vw) * 6); width: max-content; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 14); padding: calc(var(--vw) * 8) calc(var(--vw) * 14);}}} .name {grid-area: name; margin-block-start: calc(var(--vw) * 24); display: flex; flex-direction: column; gap: calc(var(--vw) * 8); line-height: var(--leading-snug); text-transform: uppercase; br:not(.content-sp-only,.content-pc-only,.content-both) {display: none;} br.content-sp-only {@media screen and (min-width: 768px) {display: none;}} br.content-pc-only {display: none; @media screen and (min-width: 768px) {display: block;}} @media screen and (min-width: 768px) {gap: calc(var(--vw) * 6); font-size: calc(var(--rem) * 32); margin-block-start: calc(var(--vw) * 28);} .en {letter-spacing: var(--tracking-wide); font-size: calc(var(--rem) * 14); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}} .ja {font-size: calc(var(--rem) * 20); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 26);}}} .another-name {grid-area: another-name; margin-block-start: calc(var(--vw) * 8); line-height: var(--leading-snug); font-size: calc(var(--rem) * 12); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}} .price {grid-area: price;} .name-annotation {grid-area: name-annotation; margin-block-start: calc(var(--vw) * 20); font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-snug); @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 18);}} .online-store {grid-area: online-store; margin-block-start: calc(var(--vw) * 24); @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 32);} .store-list {position: relative;}} .product-details {grid-area: product-details; margin-block-start: calc(var(--vw) * 54); border-top-width: 1px; border-top-style: solid;} :where(.product-details) {.product-details-content {padding-block-end: calc(var(--vw) * 60); display: grid; grid-template: "tagline" max-content "description" max-content "annotation" max-content "description-image" max-content "point-list" max-content "scent" max-content "how-to-use" max-content "scenes" max-content / 1fr; @media screen and (min-width: 768px) {padding-block-end: calc(var(--vw) * 40);}} .tagline {grid-area: tagline; margin-block-start: calc(var(--vw) * 36); font-size: calc(var(--rem) * 20); line-height: var(--leading-normal); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24);}} .description {grid-area: description; margin-block-start: calc(var(--vw) * 14); font-size: calc(var(--rem) * 13); letter-spacing: var(--tracking-widest); line-height: var(--leading-relaxed); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 14);}} .annotation {grid-area: annotation; margin-block-start: calc(var(--vw) * 32); font-size: calc(var(--rem) * 10); letter-spacing: var(--tracking-widest); line-height: var(--leading-normal);} .description-image {grid-area: description-image; margin-block-start: calc(var(--vw) * 60);} .point-list {grid-area: point-list; display: flex; flex-direction: column; gap: calc(var(--vw) * 40); &:where(.has-feature-image) {margin-block-start: calc(var(--vw) * 32); @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 40);}} &:where(:not(.has-feature-image)) {margin-block-start: calc(var(--vw) * 60); @media screen and (min-width: 768px) {}} .item {display: grid; grid-template: "point" max-content "img" max-content "text-box" max-content / 1fr; .point {grid-area: point; text-transform: uppercase; font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-none); font-weight: var(--font-medium); padding-block: calc(var(--rem) * 4); padding-inline: calc(var(--rem) * 8); width: max-content; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 13); padding-inline: calc(var(--rem) * 6);}} .img {margin-block-start: var(--margin-block-start-img); grid-area: img;} .text-box {margin-block-start: calc(var(--rem) * 16); grid-area: text-box; @media screen and (min-width: 768px) {} .heading {font-size: calc(var(--rem) * 16); letter-spacing: var(--tracking-widest); line-height: var(--leading-relaxed); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}} .text {font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-relaxed); margin-block-start: calc(var(--vw) * 6); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 15);}} .annotation {font-size: calc(var(--rem) * 10); letter-spacing: var(--tracking-widest); line-height: var(--leading-snug); margin-block-start: calc(var(--vw) * 20); display: block;}}}} .scent {grid-area: scent; margin-block-start: calc(var(--vw) * 60); display: grid; grid-template: "heading" max-content "." calc(var(--vw) * 14) "img" max-content "." calc(var(--vw) * 14) "text" max-content / 1fr; .heading {grid-area: heading;} .img {grid-area: img;} .text {grid-area: text; font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-relaxed); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 15);}}} .how-to-use {grid-area: how-to-use; margin-block-start: calc(var(--vw) * 60); .list {margin-block-start: calc(var(--vw) * 32); display: flex; flex-direction: column; gap: calc(var(--vw) * 40);} .item {display: flex; flex-direction: column; gap: calc(var(--vw) * 16); .step {grid-area: heading;} .text {font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-relaxed); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 15);}}}} .scenes {grid-area: scenes; margin-block-start: calc(var(--vw) * 60); @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 80);} .list {margin-block-start: calc(var(--vw) * 14); display: flex; flex-direction: column; gap: calc(var(--vw) * 20); @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 32); gap: calc(var(--vw) * 32);}} .item {display: flex; flex-direction: column; .text {padding-block: calc(var(--vw) * 14); font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); line-height: var(--leading-none); text-align: center; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 14);}}}}} .ingredients {grid-area: ingredients; border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; .ingredients-content {.text {font-size: calc(var(--rem) * 10); letter-spacing: var(--tracking-widest); line-height: var(--leading-snug); padding-block-end: calc(var(--vw) * 24);}}}}.product-image-slider:where(.astro-ifz5wh4a){.swiper-button-next,.swiper-button-prev {width: calc(var(--vw) * 24);} .swiper-pagination {position: absolute; left: 0 !important; bottom: 0% !important; height: 45px; .swiper-pagination-bullet {width: calc(var(--vw) * 18); height: calc(var(--vw) * 1); background-color: var(--filled-primary); border-radius: 0 !important; opacity: 0.5; &.swiper-pagination-bullet-active {height: calc(var(--vw) * 2); opacity: 1;}}} .swiper-button-prev {scale: -1 1;} .swiper-wrapper {@media screen and (min-width: 768px) {display: flex; flex-direction: column;}} :where(.swiper-wrapper) {.swiper-slide {width: 100%; height: auto;} :where(.swiper-slide) {.main-slide {position: relative; width: auto; height: 100%; @media screen and (min-width: 768px) {aspect-ratio: 780 / 975; width: 100%; height: auto;} br:not(.prod-sp-only,.prod-pc-only,.prod-both) {display: none;} br.prod-sp-only {@media screen and (min-width: 768px) {display: none;}} .br.prod-pc-only {display: none; @media screen and (min-width: 768px) {display: block;}}} :where(.main-slide) {.figure {width: calc((245 / 375) * 100%); height: auto; position: absolute; top: 50%; left: 50%; translate: -50% -50%; @media screen and (min-width: 768px) {width: calc((572 / 780) * calc((100vw / 2)));}} .award-container {.image-wrapper {position: absolute; &.monoqlo-hall-of-fame {top: calc(var(--vw) * 40); left: calc(var(--vw) * 40); width: calc((72 / 375) * 100%);} &.best-buy-men-cosme-1,&.best-buy-men-cosme-2,&.monomax-body-soap,&.monomax-body-mist,&.monomax-all-in-one-shampoo {top: calc(var(--vw) * 40); left: calc(var(--vw) * 40); width: calc((72 / 375) * 100%);} @media screen and (min-width: 768px) {&.monoqlo-hall-of-fame {top: calc(var(--vw) * 78); left: calc(var(--vw) * 83); width: calc((145 / 780) * 100%);} &.best-buy-men-cosme-1,&.best-buy-men-cosme-2,&.monomax-body-soap,&.monomax-body-mist,&.monomax-all-in-one-shampoo {top: calc(var(--vw) * 35); left: calc(var(--vw) * 52); width: calc((97 / 480) * 100%);}}} .image-wrapper {&:where(.has-caption) {&::before {content: "＊"; position: absolute; bottom: calc(var(--vw) * 6); right: calc(var(--vw) * 4); color: var(--text-secondary); font-size: calc(var(--rem) * 10); @media screen and (min-width: 1024px) {font-size: calc(var(--rem) * 10);}}}} .text {font-size: calc(var(--rem) * 6); line-height: var(--leading-tight); letter-spacing: var(--tracking-widest); text-align: right; position: absolute; inset-inline-end: calc(var(--vw) * 22); inset-block-end: calc(var(--vw) * 42); color: var(--text-secondary); @media screen and (min-width: 768px) {inset-inline-end: calc(var(--vw) * 42); inset-block-end: calc(var(--vw) * 42); font-size: calc(var(--rem) * 10);}}}}}}}.related-product-list:where(.astro-5uxas7wu){display:flex;flex-direction:column;gap:calc(var(--vw) * 32);@media screen and (min-width: 768px){gap:calc(var(--vw) * 40)}}:where(.related-product-list):where(.astro-5uxas7wu){.heading {padding-inline: calc(var(--vw) * 24); @media screen and (min-width: 768px) {padding-inline: calc(var(--vw) * 60);}}}.related-product-list-slider:where(.astro-5uxas7wu){width:100vw;grid-area:swiper;.swiper-button-next,.swiper-button-prev {aspect-ratio: 1/1; width: calc(var(--vw) * 32); height: calc(var(--vw) * 32); .img {width: calc(var(--vw) * 23); transform: translateX(-10%); opacity: 0.3;} @media screen and (min-width: 768px) {width: calc(var(--vw) * 60); height: calc(var(--vw) * 60); .img {width: calc(var(--vw) * 41); transform: translateX(-36%);}}} .swiper-button-next {right: 0;} .swiper-button-prev {left: 0;} .swiper-pagination {position: absolute; left: 0 !important; bottom: 0% !important; height: 45px; .swiper-pagination-bullet {width: calc(var(--vw) * 18); height: calc(var(--vw) * 1); background-color: var(--filled-secondary); border-radius: 0 !important; opacity: 0.5; &.swiper-pagination-bullet-active {height: calc(var(--vw) * 2); opacity: 1;}}} .swiper-button-prev {scale: -1 1;} :where(.swiper-wrapper) {.swiper-slide {width: 100%; height: auto; border-color: var(--line-primary); border-style: solid; border-width: 0; &:nth-child(3n - 2),&:nth-child(3n - 1) {border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px;} &:nth-child(3n) {border-top-width: 1px; border-bottom-width: 1px;}} :where(.swiper-slide) {.main-slide {position: relative; width: auto; height: 100%;} :where(.main-slide) {.figure {width: calc((245 / 375) * 100%); position: absolute; top: 50%; left: 50%; translate: -50% -50%;} .award {position: absolute; &.monoqlo-hall-of-fame {top: calc(var(--vw) * 40); left: calc(var(--vw) * 40); width: calc((72 / 375) * 100%);} &.best-buy-men-cosme {top: calc(var(--vw) * 40); left: calc(var(--vw) * 40); width: calc((72 / 375) * 100%);}}} .sub-slide {width: auto; height: 100%;}}}}.related-product-list-slider:where(.astro-5uxas7wu):where(:not(.swiper-initialized)){.swiper-wrapper {display: flex; .swiper-slide {width: calc(100% / 2); height: auto; @media screen and (min-width: 768px) {width: calc(100% / 3);}}} .swiper-button-next,.swiper-button-prev {display: none;}}.page:where(.astro-5tuuwndc){margin-block-start:var(--header-min-height-sp);padding-block-end:calc(var(--vw) * 100);@media screen and (min-width: 768px){margin-block-start:var(--header-min-height-pc);padding-block-end:calc(var(--vw) * 200);display:grid;grid-template:"product-images-slider-wrapper content" max-content "related-products-container related-products-container" max-content / 1fr 1fr}}:where(.page):where(.astro-5tuuwndc){.product-images-slider-wrapper {@media screen and (min-width: 768px) {grid-area: product-images-slider-wrapper; .product-images-slider {position: sticky;}}} .content {@media screen and (min-width: 768px) {grid-area: content;}} .related-products-container {margin-block-start: calc(var(--vw) * 116); display: flex; flex-direction: column; gap: calc(var(--vw) * 32); overflow: hidden; @media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 160); grid-area: related-products-container; gap: calc(var(--vw) * 80);}}}