@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : page.scss
For   : /p/225822

Created       : 2024-08-20
Last Modified : 2024-08-20

==========================================

Content
  01: variable
  02: common/initialize
  03: container
  04: key visual
  05: lead
  06: products
  07: chart
  08: recommend
  09: voice
  10: how to use
  11: details
  12: footer
  13: animation

////////////////////////////////////////////////// */
/* ===================== 01: variable */
#parisienneBeautystar {
  --perBase: 750;
  --font-common: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
  --font-serif-ja: "Zen Old Mincho", serif;
  --SoftBeige: #f4f1ea;
  --SteelIndigo: #3c4a66;
  --DesertSand: #bfae8b;
  --DeepSapphire: #151f44;
  --AlabasterBeige: #f0ebe6;
  --highlight: #f9efac;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #parisienneBeautystar {
    --rate: .5px;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar {
    --rate: 1px;
  }
}
/* ===================== 02: common/initialize */
.pickupLp img,
.pickupLp picture {
  display: var(--display, block);
}
.pickupLp img {
  width: 100%;
  height: auto;
}
.pickupLp a {
  display: var(--display, inline-block);
}
.pickupLp * {
  font-family: var(--font-family, var(--font-common));
  font-feature-settings: "halt";
  font-weight: 300;
}

#parisienneBeautystar .highlight {
  position: relative;
  z-index: 0;
}
#parisienneBeautystar .highlight::before {
  width: 100%;
  height: 0.3em;
  background-color: var(--highlight);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #parisienneBeautystar .hidden-sml {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .hidden-lrg {
    display: none !important;
  }
}
/* ===================== 03: container */
#parisienneBeautystar {
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #parisienneBeautystar {
    width: 100%;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar {
    max-width: 1170px;
  }
}
/* ===================== 04: key visual */
#parisienneBeautystar .keyVisual__image {
  overflow: hidden;
}

/* ===================== 05: lead */
#parisienneBeautystar .lead {
  text-align: center;
}
#parisienneBeautystar .lead__shell {
  padding-block: calc(90 / var(--perBase) * 100%);
  background-color: var(--SoftBeige);
}
#parisienneBeautystar .lead__heading {
  width: calc(484 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .lead__image {
  width: 100%;
  -webkit-margin-before: calc(30 / var(--perBase) * 100%);
          margin-block-start: calc(30 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .lead__sentence {
  font-size: calc(24 * var(--rate));
  line-height: 2.0547153025;
  letter-spacing: 0.01em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #parisienneBeautystar .lead__sentence {
    -webkit-margin-before: calc(-45 / var(--perBase) * 100%);
            margin-block-start: calc(-45 / var(--perBase) * 100%);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .lead__heading {
    max-width: 500px;
  }
  #parisienneBeautystar .lead__image {
    max-width: 600px;
  }
}
/* ===================== 06: products */
#parisienneBeautystar .products {
  text-align: center;
}
#parisienneBeautystar .products__shell {
  -webkit-padding-before: calc(100 / var(--perBase) * 100%);
          padding-block-start: calc(100 / var(--perBase) * 100%);
  -webkit-padding-after: calc(120 / var(--perBase) * 100%);
          padding-block-end: calc(120 / var(--perBase) * 100%);
}
#parisienneBeautystar .products__figure {
  position: relative;
}
#parisienneBeautystar .products__figure-image {
  width: calc(263 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .products__figure-heading {
  margin: auto;
  font-size: calc(24 * var(--rate));
  line-height: 1.4930875576;
  letter-spacing: 0.01em;
  position: absolute;
  bottom: calc(20 / var(--perBase) * 100%);
  left: 0;
  right: 0;
}
#parisienneBeautystar .products__linkButton {
  width: calc(505 / var(--perBase) * 100%);
  margin-inline: auto;
  transition: all 0.3s;
}
#parisienneBeautystar .products__linkButton:hover {
  opacity: 0.7;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .products__linkButton {
    max-width: 500px;
  }
}
/* ===================== 07: chart */
#parisienneBeautystar .chart__shell {
  padding-block: calc(60 / var(--perBase) * 100%);
  padding-inline: calc(65 / var(--perBase) * 100%);
  background-color: var(--SoftBeige);
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .chart__shell > * {
    max-width: 700px;
    margin-inline: auto;
  }
}
/* ===================== 08: recommend */
#parisienneBeautystar .recommend__shell {
  -webkit-padding-before: calc(95 / var(--perBase) * 100%);
          padding-block-start: calc(95 / var(--perBase) * 100%);
  -webkit-padding-after: calc(75 / var(--perBase) * 100%);
          padding-block-end: calc(75 / var(--perBase) * 100%);
  padding-inline: calc(70 / var(--perBase) * 100%);
  background-color: var(--SteelIndigo);
}
#parisienneBeautystar .recommend__heading {
  width: calc(388 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .recommend__list {
  -webkit-margin-before: calc(40 / var(--perBase) * 100%);
          margin-block-start: calc(40 / var(--perBase) * 100%);
}
#parisienneBeautystar .recommend__list-item {
  display: flex;
  -moz-column-gap: 1.6393442623%;
       column-gap: 1.6393442623%;
  align-items: center;
  padding-block: 4.4262295082%;
  padding-inline: 3.2786885246%;
  background-color: #fff;
}
#parisienneBeautystar .recommend__list-item:nth-child(1) .recommend__point {
  width: 66.6666666667%;
}
#parisienneBeautystar .recommend__list-item:nth-child(2) .recommend__point {
  width: 75.4385964912%;
}
#parisienneBeautystar .recommend__list-item:nth-child(3) .recommend__point {
  width: 86.8421052632%;
}
#parisienneBeautystar .recommend__list-item:nth-child(4) .recommend__point {
  width: 87.3684210526%;
}
#parisienneBeautystar .recommend__list-item + * {
  -webkit-margin-before: calc(17 / var(--perBase) * 100%);
          margin-block-start: calc(17 / var(--perBase) * 100%);
}
#parisienneBeautystar .recommend__checkbox {
  width: 7.1929824561%;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .recommend__heading {
    max-width: 400px;
  }
  #parisienneBeautystar .recommend__list {
    max-width: 700px;
    margin-inline: auto;
  }
}
/* ===================== 09: voice */
#parisienneBeautystar .voice__shell {
  -webkit-padding-before: calc(75 / var(--perBase) * 100%);
          padding-block-start: calc(75 / var(--perBase) * 100%);
  -webkit-padding-after: calc(55 / var(--perBase) * 100%);
          padding-block-end: calc(55 / var(--perBase) * 100%);
  padding-inline: calc(45 / var(--perBase) * 100%);
  background-image: url(../img/voice-bg.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
}
#parisienneBeautystar .voice__heading {
  width: calc(350 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .voice__thumbnail {
  width: calc(118 / var(--perBase) * 100%);
  position: absolute;
  top: calc(84 / var(--perBase) * 100%);
  right: calc(60 / var(--perBase) * 100%);
}
#parisienneBeautystar .voice__list {
  -webkit-margin-before: calc(55 / var(--perBase) * 100%);
          margin-block-start: calc(55 / var(--perBase) * 100%);
}
#parisienneBeautystar .voice__list-item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#parisienneBeautystar .voice__list-item:nth-child(odd) {
  -webkit-margin-start: calc(15 * var(--rate));
          margin-inline-start: calc(15 * var(--rate));
}
#parisienneBeautystar .voice__list-item:nth-child(even) {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
#parisienneBeautystar .voice__list-item + * {
  -webkit-margin-before: calc(40 / var(--perBase) * 100%);
          margin-block-start: calc(40 / var(--perBase) * 100%);
}
#parisienneBeautystar .voice__detail {
  padding-block: 1.4583333333em;
  padding-inline: 3.125em;
  background-color: #fff;
  border-radius: 50vh;
  font-size: calc(24 * var(--rate));
  line-height: 1.4583333333;
  text-align: center;
  position: relative;
}
#parisienneBeautystar .voice__detail .larger {
  font-size: 1.125em;
  font-weight: 600;
}
#parisienneBeautystar .voice__detail::after {
  width: calc(28 * var(--rate));
  height: calc(30 * var(--rate));
  background-image: url(../img/voice-bobble-decoration.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: calc(-20 * var(--rate));
  content: "";
}
#parisienneBeautystar .voice__list-item:nth-child(odd) .voice__detail::after {
  left: calc(155 * var(--rate));
}
#parisienneBeautystar .voice__list-item:nth-child(even) .voice__detail::after {
  right: calc(100 * var(--rate));
  transform: scale(-1, 1);
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .voice__heading {
    max-width: 350px;
  }
  #parisienneBeautystar .voice__thumbnail {
    max-width: 120px;
  }
  #parisienneBeautystar .voice__list {
    max-width: 700px;
    margin-inline: auto;
  }
}
/* ===================== 10: how to use */
#parisienneBeautystar .howToUse__shell {
  -webkit-padding-after: calc(80 / var(--perBase) * 100%);
          padding-block-end: calc(80 / var(--perBase) * 100%);
  position: relative;
}
#parisienneBeautystar .howToUse__heading {
  width: 100%;
}
#parisienneBeautystar .howToUse__list {
  -webkit-margin-before: 5.5555555556%;
          margin-block-start: 5.5555555556%;
  padding-inline: calc(60 / var(--perBase) * 100%);
}
#parisienneBeautystar .howToUse__list-item {
  display: grid;
  grid-template-columns: 80.9523809524% 11.1111111111%;
  -moz-column-gap: 7.9365079365%;
       column-gap: 7.9365079365%;
  align-items: center;
  padding-block: 5.5555555556%;
}
#parisienneBeautystar .howToUse__list-item + * {
  border-top: 1px dashed #000;
}
#parisienneBeautystar .howToUse__list-details {
  display: grid;
  grid-template-columns: 7.8431372549% 1fr;
  gap: 3.9215686275%;
}
#parisienneBeautystar .howToUse__number {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--DeepSapphire);
  font-size: calc(20 * var(--rate));
  color: #fff;
}
#parisienneBeautystar .howToUse__detail {
  font-size: calc(20 * var(--rate));
  line-height: 1.6904083571;
  letter-spacing: 0.08em;
}
#parisienneBeautystar .howToUse__time {
  --time-base-font-size: 16;
  --time-small-font-size: 10;
  grid-column: 2;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-before: 3.9215686275%;
          margin-block-start: 3.9215686275%;
  border: 1px solid var(--DeepSapphire);
  border-radius: 50vh;
  overflow: hidden;
  font-size: calc(var(--time-base-font-size) * var(--rate));
  line-height: 1;
}
#parisienneBeautystar .howToUse__time > * {
  padding-block: calc(10 / var(--time-base-font-size) * 1em);
  padding-inline: calc(20 / var(--time-base-font-size) * 1em);
}
#parisienneBeautystar .howToUse__time dt {
  color: #000;
}
#parisienneBeautystar .howToUse__time dd {
  background-color: var(--DeepSapphire);
  color: #fff;
}
#parisienneBeautystar .howToUse__notes {
  -webkit-margin-before: calc(20 / var(--perBase) * 100%);
          margin-block-start: calc(20 / var(--perBase) * 100%);
  font-size: calc(15 * var(--rate));
  color: #595757;
  text-align: center;
}

/* ===================== 11: details */
#parisienneBeautystar .details__shell {
  -webkit-padding-before: calc(95 / var(--perBase) * 100%);
          padding-block-start: calc(95 / var(--perBase) * 100%);
  -webkit-padding-after: calc(60 / var(--perBase) * 100%);
          padding-block-end: calc(60 / var(--perBase) * 100%);
  background-color: var(--AlabasterBeige);
  position: relative;
}
#parisienneBeautystar .details__heading {
  width: calc(400 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .details__leadSentence {
  width: calc(580 / var(--perBase) * 100%);
  -webkit-margin-before: calc(65 / var(--perBase) * 100%);
          margin-block-start: calc(65 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .details__thumbnail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 4%;
       column-gap: 4%;
  width: calc(500 / var(--perBase) * 100%);
  -webkit-margin-before: calc(45 / var(--perBase) * 100%);
          margin-block-start: calc(45 / var(--perBase) * 100%);
  margin-inline: auto;
}
#parisienneBeautystar .details__notes {
  width: calc(392 / var(--perBase) * 100%);
  -webkit-margin-before: calc(45 / var(--perBase) * 100%);
          margin-block-start: calc(45 / var(--perBase) * 100%);
  margin-inline: auto;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #parisienneBeautystar .details__heading {
    max-width: 500px;
  }
  #parisienneBeautystar .details__leadSentence {
    max-width: 600px;
  }
  #parisienneBeautystar .details__thumbnail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 4%;
         column-gap: 4%;
    width: calc(500 / var(--perBase) * 100%);
    -webkit-margin-before: calc(45 / var(--perBase) * 100%);
            margin-block-start: calc(45 / var(--perBase) * 100%);
    margin-inline: auto;
  }
  #parisienneBeautystar .details__notes {
    max-width: 400px;
  }
}
/* ===================== 12: footer */
#parisienneBeautystar .footer__shell {
  background-color: var(--AlabasterBeige);
  position: relative;
}
#parisienneBeautystar .footer__visual {
  width: 100%;
  overflow: hidden;
}
#parisienneBeautystar .footer__logo {
  width: calc(480 / var(--perBase) * 100%);
  margin-inline: auto;
  padding-block: calc(50 / var(--perBase) * 100%);
}

/* ===================== 13: animation */
.anim-fadeIn {
  opacity: 0;
}
.anim-fadeIn:not(.js-animation-trigger), .anim-fadeIn.is-animated {
  -webkit-animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-brightly {
  overflow: hidden;
  position: relative;
}
.anim-brightly::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  -webkit-animation: brightly 3s linear infinite;
          animation: brightly 3s linear infinite;
}

.anim-zoomIn {
  opacity: 0;
}
.anim-zoomIn.is-animated {
  -webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.anim-fade-diagonal-parent > * {
  opacity: 0;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(odd) {
  -webkit-animation: bounce-diagonal-to-left 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: bounce-diagonal-to-left 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(even) {
  -webkit-animation: bounce-diagonal-to-right 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: bounce-diagonal-to-right 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(1) {
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(2) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.anim-fade-diagonal-parent.is-animated > *:nth-child(4) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.anim-fadeUp {
  opacity: 0;
}
.anim-fadeUp.is-animated {
  -webkit-animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-zoomOut {
  opacity: 0;
}
.anim-zoomOut.is-animated {
  -webkit-animation: zoomOut 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: zoomOut 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes brightly {
  0% {
    left: -75%;
  }
  25% {
    left: 125%;
  }
  26% {
    left: 125%;
    opacity: 0;
  }
  100% {
    left: -75%;
    opacity: 0;
  }
}
@keyframes brightly {
  0% {
    left: -75%;
  }
  25% {
    left: 125%;
  }
  26% {
    left: 125%;
    opacity: 0;
  }
  100% {
    left: -75%;
    opacity: 0;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounce-diagonal-to-left {
  0% {
    transform: scale(0.8, 0.8) translate(25%, 10%);
  }
  60% {
    transform: scale(1, 1) translate(0, 0);
  }
  65% {
    transform: scale(0.99, 0.975) translate(0, 2.5%);
  }
  70% {
    transform: scale(1.01, 1) translate(0, 5%);
  }
  80% {
    transform: scale(0.99, 1.025) translate(0, -5%);
  }
  90% {
    transform: scale(1, 0.975) translate(0, 2.5%);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@keyframes bounce-diagonal-to-left {
  0% {
    transform: scale(0.8, 0.8) translate(25%, 10%);
  }
  60% {
    transform: scale(1, 1) translate(0, 0);
  }
  65% {
    transform: scale(0.99, 0.975) translate(0, 2.5%);
  }
  70% {
    transform: scale(1.01, 1) translate(0, 5%);
  }
  80% {
    transform: scale(0.99, 1.025) translate(0, -5%);
  }
  90% {
    transform: scale(1, 0.975) translate(0, 2.5%);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce-diagonal-to-right {
  0% {
    transform: scale(0.8, 0.8) translate(-25%, 10%);
  }
  60% {
    transform: scale(1, 1) translate(0, 0);
  }
  65% {
    transform: scale(0.99, 0.925) translate(0, 2.5%);
  }
  70% {
    transform: scale(1.01, 1) translate(0, 5%);
  }
  80% {
    transform: scale(0.99, 1.025) translate(0, -5%);
  }
  90% {
    transform: scale(1, 0.925) translate(0, 2.5%);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@keyframes bounce-diagonal-to-right {
  0% {
    transform: scale(0.8, 0.8) translate(-25%, 10%);
  }
  60% {
    transform: scale(1, 1) translate(0, 0);
  }
  65% {
    transform: scale(0.99, 0.925) translate(0, 2.5%);
  }
  70% {
    transform: scale(1.01, 1) translate(0, 5%);
  }
  80% {
    transform: scale(0.99, 1.025) translate(0, -5%);
  }
  90% {
    transform: scale(1, 0.925) translate(0, 2.5%);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeUp {
  0% {
    transform: translateY(20%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes fadeUp {
  0% {
    transform: translateY(20%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomOut {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes zoomOut {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
/* ===================== nn: comment */
/* --- for small viewport --- */
/* --- for large viewport --- */
/* --- for middle viewport --- */
/*# sourceMappingURL=page.css.map */