@charset "UTF-8";
.p-diagnose {
  /* Document
  * ========================================================================== */
  /**
  * 1. Add border box sizing in all browsers (opinionated).
  * 2. Backgrounds do not repeat by default (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  /**
  * 1. Use the default cursor in all browsers (opinionated).
  * 2. Change the line height in all browsers (opinionated).
  * 3. Breaks words to prevent overflow in all browsers (opinionated).
  * 4. Use a 4-space tab width in all browsers (opinionated).
  * 5. Remove the grey highlight on links in iOS (opinionated).
  * 6. Prevent adjustments of font size after orientation changes in iOS.
  */
  /* Sections
  * ========================================================================== */
  /**
  * Remove the margin in all browsers (opinionated).
  */
  /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Edge, Firefox, and Safari.
  */
  /* Grouping content
  * ========================================================================== */
  /**
  * Remove the margin on nested lists in Chrome, Edge, and Safari.
  */
  /**
  * 1. Correct the inheritance of border color in Firefox.
  * 2. Add the correct box sizing in Firefox.
  */
  /**
  * Remove the list style on navigation lists in all browsers (opinionated).
  */
  /**
  * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  * 3. Prevent overflow of the container in all browsers (opinionated).
  */
  /* Text-level semantics
  * ========================================================================== */
  /**
  * Add the correct text decoration in Safari.
  */
  /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
  /**
  * Add the correct font size in all browsers.
  */
  /* Embedded content
  * ========================================================================== */
  /*
  * Change the alignment on media elements in all browsers (opinionated).
  */
  /**
  * Remove the border on iframes in all browsers (opinionated).
  */
  /**
  * Change the fill color to match the text color in all browsers (opinionated).
  */
  /* Tabular data
  * ========================================================================== */
  /**
  * 1. Collapse border spacing in all browsers (opinionated).
  * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
  * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
  */
  /* Forms
  * ========================================================================== */
  /**
  * Remove the margin on controls in Safari.
  */
  /**
  * Correct the inability to style buttons in iOS and Safari.
  */
  /**
  * Change the inconsistent appearance in all browsers (opinionated).
  */
  /**
  * Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
  /**
  * 1. Remove the margin in Firefox and Safari.
  * 3. Change the resize direction in all browsers (opinionated).
  */
  /**
  * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  * 2. Correct the outline style in Safari.
  */
  /**
  * Correct the cursor style of increment and decrement buttons in Safari.
  */
  /**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
  /**
  * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  */
  /**
  * 1. Correct the inability to style upload buttons in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
  /* Interactive
  * ========================================================================== */
  /*
  * Add the correct styles in Safari.
  */
  /*
  * Add the correct display in Safari.
  */
  /* Accessibility
  * ========================================================================== */
  /**
  * Change the cursor on busy elements in all browsers (opinionated).
  */
  /*
  * Change the cursor on control elements in all browsers (opinionated).
  */
  /*
  * Change the cursor on disabled, not-editable, or otherwise
  * inoperable elements in all browsers (opinionated).
  */
  /*
  * Change the display on visually hidden accessible elements
  * in all browsers (opinionated).
  */
}
.p-diagnose *,
.p-diagnose *::before,
.p-diagnose *::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}
.p-diagnose *::before,
.p-diagnose *::after {
  vertical-align: inherit; /* 2 */
  text-decoration: inherit; /* 1 */
}
.p-diagnose :where(:root) {
  line-height: 1.5; /* 2 */
  cursor: default; /* 1 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  overflow-wrap: break-word; /* 3 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}
.p-diagnose :where(body) {
  margin: 0;
}
.p-diagnose :where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}
.p-diagnose :where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}
.p-diagnose :where(hr) {
  height: 0; /* 2 */
  color: inherit; /* 1 */
}
.p-diagnose :where(nav) :where(ol, ul) {
  padding: 0;
  list-style-type: none;
}
.p-diagnose :where(nav li)::before {
  float: left;
  content: "​";
}
.p-diagnose :where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}
.p-diagnose :where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}
.p-diagnose :where(b, strong) {
  font-weight: bolder;
}
.p-diagnose :where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
.p-diagnose :where(small) {
  font-size: 80%;
}
.p-diagnose :where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}
.p-diagnose :where(iframe) {
  border-style: none;
}
.p-diagnose :where(svg:not([fill])) {
  fill: currentColor;
}
.p-diagnose :where(table) {
  border-collapse: collapse; /* 1 */
  text-indent: 0; /* 3 */
  border-color: inherit; /* 2 */
}
.p-diagnose :where(button, input, select) {
  margin: 0;
}
.p-diagnose :where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}
.p-diagnose :where(fieldset) {
  border: 1px solid #a0a0a0;
}
.p-diagnose :where(progress) {
  vertical-align: baseline;
}
.p-diagnose :where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}
.p-diagnose :where([type=search i]) {
  outline-offset: -2px; /* 2 */
  -webkit-appearance: textfield; /* 1 */
}
.p-diagnose ::-webkit-inner-spin-button,
.p-diagnose ::-webkit-outer-spin-button {
  height: auto;
}
.p-diagnose ::-webkit-input-placeholder {
  opacity: 0.54;
  color: inherit;
}
.p-diagnose ::-webkit-search-decoration {
  -webkit-appearance: none;
}
.p-diagnose ::-webkit-file-upload-button {
  font: inherit; /* 2 */
  -webkit-appearance: button; /* 1 */
}
.p-diagnose :where(dialog) {
  position: absolute;
  right: 0;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  padding: 1em;
  color: black;
  border: solid;
  background-color: white;
}
.p-diagnose :where(dialog:not([open])) {
  display: none;
}
.p-diagnose :where(details > summary:first-of-type) {
  display: list-item;
}
.p-diagnose :where([aria-busy=true i]) {
  cursor: progress;
}
.p-diagnose :where([aria-controls]) {
  cursor: pointer;
}
.p-diagnose :where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}
.p-diagnose :where([aria-hidden=false i][hidden]) {
  display: initial;
}
.p-diagnose :where([aria-hidden=false i][hidden]:not(:focus)) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

html {
  line-height: 1.33;
  scroll-behavior: smooth;
  scroll-padding-top: 26.6666666667vw;
}
@media screen and (min-width: 769px), print {
  html {
    scroll-padding-top: min(17.1875vw, 220px);
  }
}
html .float-bnr {
  display: none !important;
}
html .entry-wrapper {
  max-width: none;
  padding: 0;
}
html .entry-wrapper[role=main] {
  display: block;
}
html .entry-wrapper .dokidoki_22AW_banner {
  margin: 0 auto !important;
}
html .entry-wrapper .entry-container {
  width: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 1024px) {
  html .entry-wrapper .entry-container {
    padding: 69px 0 0;
  }
}

.p-diagnose *,
.p-diagnose *::before,
.p-diagnose *::after {
  box-sizing: border-box;
}
.p-diagnose * {
  font-family: "MT たづがね角ゴシック StdN", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important;
  text-transform: none;
  font-feature-settings: "palt";
}
.p-diagnose input,
.p-diagnose button,
.p-diagnose select,
.p-diagnose textarea {
  padding: 1.3333333333vw 2.6666666667vw;
  border-radius: 0;
  line-height: 1.6;
  background: transparent;
}
.p-diagnose input:not([type=radio], [type=checkbox]),
.p-diagnose button:not([type=radio], [type=checkbox]),
.p-diagnose select:not([type=radio], [type=checkbox]),
.p-diagnose textarea:not([type=radio], [type=checkbox]) {
  width: 100%;
}
.p-diagnose .p-diagnose-step {
  position: relative;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item {
  overflow: hidden;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"]::before {
  content: "";
  position: absolute;
  bottom: 4vw;
  left: 50%;
  width: 110.4vw;
  height: 41.0666666667vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-01.png?$staticlink$");
  background-size: cover;
  transform: translateX(-50%);
  z-index: 1;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"]::after, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"]::after, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/sp_obi.png?$staticlink$");
  background-size: cover;
  z-index: 2;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"], .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="3"] {
  position: relative;
  width: 100%;
  transform: translateY(0);
  transition: 0.5s ease-out;
  transition-property: opacity, transform;
  opacity: 1;
  z-index: 2;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"][role=none], .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="3"][role=none] {
  position: absolute;
  opacity: 0;
  transform: translateY(4vw);
  z-index: 1;
  display: none;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"], .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"] {
  position: relative;
  opacity: 1;
  overflow: hidden;
  transition: none;
  z-index: 2;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"]::before, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"]::before {
  content: "";
  position: absolute;
  bottom: -10.6666666667vw;
  left: -41.3333333333vw;
  width: 206vw;
  height: 176.8vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-02.png?$staticlink$");
  background-size: cover;
  z-index: 1;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"] .p-diagnose-step__content, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"] .p-diagnose-step__content {
  position: relative;
  margin: 9vw 6.6666666667vw 13.9333333333vw;
  z-index: 1;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"] .p-diagnose-step__item-card, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"] .p-diagnose-step__item-card {
  margin: 0 0 8vw;
  padding: 8.5333333333vw 0;
  border-radius: 2.6666666667vw;
  background: #000;
  color: #fff;
  opacity: 2;
  transform: translateY(0);
  transition: 0.5s ease-out;
  transition-property: opacity, transform;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"][role=none], .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"][role=none] {
  position: absolute;
  width: 100%;
  opacity: 0;
  z-index: 1;
}
.p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"][role=none] .p-diagnose-step__item-card, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"][role=none] .p-diagnose-step__item-card {
  opacity: 0;
  transform: translateY(4vw);
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"]::before {
    bottom: min(11.71875vw, 150px);
    width: min(100.546875vw, 1287px);
    height: min(24.765625vw, 317px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-01@pc.png?$staticlink$");
  }
  .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="0"]::after, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"]::after, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"]::after {
    height: min(1.171875vw, 15px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/pc_obi.png?$staticlink$");
  }
  .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"]::before, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"]::before {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: min(82.421875vw, 1055px);
    height: min(67.734375vw, 867px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-02@pc.png?$staticlink$");
    transform: translate(calc(-50% - max(-3.125vw, -40px)), calc(50% - max(-4.6875vw, -60px)));
  }
  .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"] .p-diagnose-step__content, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"] .p-diagnose-step__content {
    max-width: min(46.875vw, 600px);
    margin: min(3.90625vw, 50px) auto min(5.46875vw, 70px);
  }
  .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="1"] .p-diagnose-step__item-card, .p-diagnose .p-diagnose-step .p-diagnose-step__item[data-step="2"] .p-diagnose-step__item-card {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: min(19.453125vw, 249px);
    margin: 0 auto min(2.1875vw, 28px);
    padding: min(3.125vw, 40px) 0;
    border-radius: min(0.390625vw, 5px);
    transition-property: opacity;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(min(3.90625vw, 50px));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.p-diagnose .u-inview {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0) scale(1);
  transition: transform 1.2s cubic-bezier(0.43, 0.05, 0.17, 1) 0s, opacity 1.2s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
  transition-delay: 0.1s;
}
.p-diagnose .u-inview.is-visible {
  opacity: 1;
  transform: translateZ(0) scale(1);
}
.p-diagnose .p-diagnose-intro {
  position: relative;
  z-index: 1;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content {
  position: relative;
  margin: 8vw 6.6666666667vw 44.2666666667vw;
  padding: 10.6666666667vw 0;
  border-radius: 2.6666666667vw;
  text-align: center;
  background: #000;
  color: #fff;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__hdg {
  position: relative;
  display: inline-block;
  margin-bottom: 8vw;
  padding-bottom: 2.9333333333vw;
  font-size: 5.7333333333vw;
  line-height: 1.2093023256;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__hdg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5333333333vw;
  background: #ce0000;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose__lead {
  margin: 0 0 7.6vw;
  text-align: center;
  font-size: 3.4666666667vw;
  line-height: 1.6;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__action-btn {
  width: 70.6666666667vw;
  padding: 3vw 0;
  border: none;
  font-size: 4.2666666667vw;
  line-height: 1.09375;
  letter-spacing: 0.02em;
  background: #fff;
  color: #000;
}
.p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__action-btn:hover, .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__action-btn:active, .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__action-btn:focus {
  background: #ccc;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-intro .p-diagnose-intro__content {
    max-width: min(43.75vw, 560px);
    margin: min(6.25vw, 80px) auto min(7.8125vw, 100px);
    padding: min(4.6875vw, 60px) min(6.25vw, 80px);
    border-radius: min(0.78125vw, 10px);
  }
  .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__hdg {
    margin: 0 0 min(3.125vw, 40px);
    padding: 0 0 min(0.78125vw, 10px);
    font-size: min(1.875vw, 24px);
  }
  .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__hdg::after {
    height: min(0.15625vw, 2px);
  }
  .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose__lead {
    margin: 0 0 min(3.125vw, 40px);
    font-size: min(1.25vw, 16px);
    line-height: 1.6;
  }
  .p-diagnose .p-diagnose-intro .p-diagnose-intro__content .p-diagnose-step__action-btn {
    width: min(23.4375vw, 300px);
    padding: min(1.25vw, 16px) 0;
    font-size: min(1.25vw, 16px);
  }
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg {
  margin: 0 0 5.3333333333vw;
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg > span > img {
  width: auto;
  height: 9.3333333333vw;
  margin-right: 1.3333333333vw;
  margin-bottom: 1.3333333333vw;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__action-txt {
  margin: 0 0 5.3333333333vw;
  text-align: center;
  font-size: 4.6666666667vw;
  line-height: 1.1142857143;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__input label {
  display: block;
  margin: 0 auto 5.8666666667vw;
  cursor: pointer;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__input label:last-child {
  margin: 0 auto;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__input input[type=radio] {
  position: absolute;
  opacity: 0;
  appearance: none;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__input input[type=radio] + span {
  display: block;
  width: 53.3333333333vw;
  margin: 0 auto;
  padding: 2.9333333333vw 0;
  border-radius: 1.3333333333vw;
  text-align: center;
  font-size: 4.2666666667vw;
  line-height: 1.1875;
  background: #fff;
  color: #000;
  transition: 0.2s ease;
  transition-property: background, color;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__input input[type=radio]:checked + span {
  background: #c8102e;
  color: #fff;
}
.p-diagnose .p-diagnose-step__content .p-diagnose-step__action {
  width: 50.6666666667vw;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg {
    margin: 0 0 min(1.875vw, 24px);
    font-size: min(2.1875vw, 28px);
    letter-spacing: 0.03em;
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg > span {
    padding-bottom: min(0.15625vw, 2px);
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg > span > i {
    font-size: min(2.1875vw, 28px);
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__hdg > span > img {
    height: min(3.4375vw, 44px);
    margin-right: min(0.390625vw, 5px);
    margin-bottom: min(0.390625vw, 5px);
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__action-txt {
    margin: 0 0 min(1.25vw, 16px);
    font-size: min(1.25vw, 16px);
    line-height: 1.125;
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__input label {
    margin: 0 0 min(1.5625vw, 20px);
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__input label:last-child {
    margin: 0;
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__input input[type=radio] + span {
    width: min(23.4375vw, 300px);
    padding: min(0.9375vw, 12px) 0;
    border-radius: min(0.3125vw, 4px);
    font-size: min(1.25vw, 16px);
    line-height: 1.1875;
  }
  .p-diagnose .p-diagnose-step__content .p-diagnose-step__action {
    width: min(15.625vw, 200px);
  }
}
.p-diagnose .p-diagnose-result {
  font-family: "MT たづがね角ゴシック StdN", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important;
}
.p-diagnose .p-diagnose-result .p-diagnose-step__beginning {
  margin: 13.3333333333vw 0 0;
  padding: 13.3333333333vw 0;
  background: #F3F2F2;
}
.p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn {
  padding: 3.4666666667vw 5.3333333333vw;
  border: solid 1px #000;
  color: #000;
  background: #fff;
}
.p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:hover, .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:active, .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:focus {
  color: #ccc;
}
.p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn > span {
  padding: 0;
}
.p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn > span::after {
  display: none;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-result .p-diagnose-step__beginning {
    margin: min(3.90625vw, 50px) 0 0;
    padding: min(7.8125vw, 100px) 0;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn {
    height: min(3.75vw, 48px);
    padding: min(1.328125vw, 17px) min(3.125vw, 40px);
    font-size: min(1.09375vw, 14px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:hover, .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:active, .p-diagnose .p-diagnose-result .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:focus {
    color: #ccc;
  }
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv[data-pattern="1"] [data-pattern-items*="1"], .p-diagnose .p-diagnose-result .p-diagnose-result-kv[data-pattern="2"] [data-pattern-items*="2"], .p-diagnose .p-diagnose-result .p-diagnose-result-kv[data-pattern="3"] [data-pattern-items*="3"], .p-diagnose .p-diagnose-result .p-diagnose-result-kv[data-pattern="4"] [data-pattern-items*="4"] {
  display: block;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__inner {
  position: relative;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
  padding: 8vw 0 14.9066666667vw;
  text-align: center;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/sp_obi.png?$staticlink$");
  background-size: cover;
  z-index: 2;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__hdg {
  display: none;
  margin: 0 0 7.4666666667vw;
  font-size: 4.8vw;
  line-height: 1.4;
  color: #000;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__hdg > span {
  display: inline-block;
  margin: 0 0 3.7333333333vw;
  font-size: 4.8vw;
  line-height: 0.0444444444;
  color: #ce0000;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__txt {
  display: none;
  font-size: 3.4666666667vw;
  line-height: 1.6;
  margin: 0;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__img {
  display: block;
  width: 58.6666666667vw;
  margin: 9.0666666667vw auto 0;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__img > img {
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: min(6.25vw, 80px) 0 min(7.421875vw, 95px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__inner::after {
    height: min(1.171875vw, 15px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/pc_obi.png?$staticlink$");
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__hdg {
    margin: 0 0 min(2.5vw, 32px);
    text-align: left;
    font-size: min(2.1875vw, 28px);
    line-height: 1.4;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__hdg > span {
    margin: 0 0 min(1.25vw, 16px);
    font-size: min(1.40625vw, 18px);
    line-height: 1.7222222222;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__txt {
    text-align: left;
    font-size: min(1.25vw, 16px);
    line-height: 1.75;
    letter-spacing: 0.08em;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-kv .p-diagnose-result-kv__img {
    width: min(19.178125vw, 245.48px);
    margin: 0;
    margin-right: min(4.6484375vw, 59.5px);
  }
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content {
  padding: 12vw 6.64vw 12.2666666667vw;
  color: #fff;
  background: #000;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::before, .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::after {
  content: "";
  position: absolute;
  z-index: 0;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::before {
  top: 0;
  right: -17.3333333333vw;
  width: 48.5333333333vw;
  height: 47.8666666667vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-03.png?$staticlink$");
  background-size: cover;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::after {
  bottom: -24vw;
  left: -26.6666666667vw;
  width: 71.2vw;
  height: 63.8666666667vw;
  background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-04.png?$staticlink$");
  background-size: cover;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content > [data-number] {
  display: none;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content .p-diagnose-step__beginning {
  margin: 3.2vw 0 0;
}
@keyframes slide-down {
  0% {
    display: none;
    overflow: hidden;
    max-height: 0;
  }
  1% {
    display: block;
  }
  100% {
    display: block;
    overflow: auto;
  }
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content-hdg {
  text-align: center;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list {
  position: relative;
  margin: 9.0666666667vw 0 0;
  padding: 8vw 4vw 8vw;
  list-style: none;
  border-radius: 2.6666666667vw;
  background: #fff;
  color: #000;
  z-index: 1;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list > li {
  display: none;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list[data-pattern="1"] [data-pattern-items*="1"], .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list[data-pattern="2"] [data-pattern-items*="2"], .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list[data-pattern="3"] [data-pattern-items*="3"], .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list[data-pattern="4"] [data-pattern-items*="4"] {
  display: block;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item {
  display: flex;
  align-items: center;
  margin: 0 0 8vw;
  padding: 0 0 8vw;
  border-bottom: solid 1px #ccc;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__item-img {
  display: block;
  width: 26.6666666667vw;
  min-width: 26.6666666667vw;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-item {
  margin: 0;
  padding: 0 0 0 5.3333333333vw;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-name {
  font-size: 4vw;
  line-height: 1.3;
  display: block;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-model {
  margin-top: 3.6vw;
  font-size: 3.2vw;
  line-height: 1.7333333333;
  display: block;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk {
  font-size: 3.4666666667vw;
  position: relative;
  display: inline-block;
  margin: 4.2666666667vw 0 0;
  padding: 0 2.9333333333vw 0 0;
  color: #000;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk::before {
  position: absolute;
  top: 1.3333333333vw;
  right: 0.5333333333vw;
  display: block;
  width: 1.4666666667vw;
  height: 1.4666666667vw;
  content: "";
  transform: rotate(225deg);
  border: 0.2666666667vw solid;
  border-color: transparent transparent #000 #000;
}
.p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk::after {
  position: absolute;
  bottom: -0.5333333333vw;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  content: "";
  background: #000;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look {
    position: relative;
    margin: 0 auto;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content {
    position: relative;
    z-index: 100;
    padding: min(6.015625vw, 77px) 0 min(7.8125vw, 100px);
    color: #fff;
    background: #000;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::before {
    top: 0;
    right: 50%;
    width: min(28.4375vw, 364px);
    height: min(28.046875vw, 359px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-03@pc.png?$staticlink$");
    background-size: cover;
    transform: translateX(min(42.1875vw, 540px));
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__content::after {
    bottom: max(-10.9375vw, -140px);
    left: 50%;
    width: min(41.71875vw, 534px);
    height: min(37.421875vw, 479px);
    background-image: url("../contentassetimages/lp/24ss/makeup-finder/step-bg-04@pc.png?$staticlink$");
    background-size: cover;
    transform: translateX(max(-50vw, -640px));
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list {
    width: min(48.4375vw, 620px);
    margin: min(4.6875vw, 60px) auto 0;
    padding: min(3.125vw, 40px) min(4.6875vw, 60px);
    border-radius: min(1.5625vw, 20px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item {
    margin: 0 0 min(1.875vw, 24px);
    padding: 0 0 min(1.875vw, 24px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__item-img {
    width: min(9.375vw, 120px);
    min-width: min(9.375vw, 120px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-item {
    padding: 0 0 0 min(1.875vw, 24px);
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-name {
    font-size: min(1.40625vw, 18px);
    line-height: 1.3;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-model {
    margin-top: min(0.78125vw, 10px);
    font-size: min(1.171875vw, 15px);
    line-height: 1.6;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk {
    font-size: min(1.25vw, 16px);
    margin: min(1.484375vw, 19px) 0 0;
    padding: 0 min(1.875vw, 24px) 0 0;
    color: #000;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk::before {
    top: min(0.390625vw, 5px);
    right: min(0.234375vw, 3px);
    width: min(0.546875vw, 7px);
    height: min(0.546875vw, 7px);
    border: min(0.15625vw, 2px) solid;
    border-color: transparent transparent #000 #000;
  }
  .p-diagnose .p-diagnose-result .p-diagnose-result-recommend-look .p-diagnose-result-recommend-look__list .p-diagnose-result-recommend-look__item .p-diagnose-result-recommend-look__content-lnk::after {
    position: absolute;
    bottom: max(-0.3125vw, -4px);
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
  }
}
.p-diagnose .p-diagnose-step__action-btn {
  font-family: "MT たづがね角ゴシック StdN Medium", "IBM Plex Sans JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important;
  padding: 3.2vw 0;
  border: none;
  font-size: 4.2666666667vw;
  line-height: 1.1875;
  color: #fff;
  background: #000;
  opacity: 1;
  transition: 0.4s ease;
  transition-property: background-color;
}
.p-diagnose .p-diagnose-step__action-btn:hover, .p-diagnose .p-diagnose-step__action-btn:active, .p-diagnose .p-diagnose-step__action-btn:focus {
  background: #111;
}
.p-diagnose .p-diagnose-step__action-btn[disabled] {
  background: #333;
  color: #ccc;
  pointer-events: none;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-step__action-btn {
    font-size: min(1.171875vw, 15px);
    max-width: min(23.4375vw, 300px);
    height: auto;
    padding: min(1.09375vw, 14px);
  }
}
.p-diagnose .p-diagnose-result-howto {
  margin: 13.3333333333vw auto;
}
.p-diagnose .p-diagnose-result-howto[data-pattern="1"] [data-pattern-items*="1"], .p-diagnose .p-diagnose-result-howto[data-pattern="2"] [data-pattern-items*="2"], .p-diagnose .p-diagnose-result-howto[data-pattern="3"] [data-pattern-items*="3"], .p-diagnose .p-diagnose-result-howto[data-pattern="4"] [data-pattern-items*="4"] {
  display: block;
}
.p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__list {
  display: none;
  margin: 0 6.6666666667vw;
  padding-left: 1em;
}
.p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__list > li {
  margin-bottom: 4vw;
  font-size: 3.4666666667vw;
  line-height: 1.5;
}
.p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__list > li:last-child {
  margin-bottom: 0;
}
.p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__hdg {
  margin: 0 0 8vw;
  text-align: center;
  font-family: "ShiseidoGinza-Bold" !important;
  font-size: 5.8666666667vw;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-result-howto {
    margin: min(7.8125vw, 100px) auto;
  }
  .p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__list {
    width: min(62.5vw, 800px);
    margin: 0 auto;
  }
  .p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__list > li {
    margin-bottom: min(1.5625vw, 20px);
    font-size: min(1.25vw, 16px);
    line-height: 1.6;
  }
  .p-diagnose .p-diagnose-result-howto .p-diagnose-result-howto__hdg {
    margin: 0 0 min(4.6875vw, 60px);
    font-size: min(2.8125vw, 36px);
  }
}
.p-diagnose .p-diagnose-step__beginning {
  margin: 5.3333333333vw 0 0;
  text-align: center;
}
.p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 3.4666666667vw;
  line-height: 1.1923076923;
  color: #000;
  appearance: none;
  transition: 0.2s ease;
  transition-property: color;
}
.p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:hover, .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:active, .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:focus {
  color: #111;
}
.p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:hover > span::after, .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:active > span::after, .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn:focus > span::after {
  background: #111;
}
.p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn > span {
  position: relative;
  display: inline-block;
  padding: 0 0 2.1333333333vw;
}
.p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  transition: 0.2s ease;
  transition-property: background;
}
@media screen and (min-width: 769px), print {
  .p-diagnose .p-diagnose-step__beginning {
    margin: min(1.5625vw, 20px) 0 0;
  }
  .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn {
    font-size: min(1.09375vw, 14px);
  }
  .p-diagnose .p-diagnose-step__beginning .p-diagnose-step__beginning-btn > span {
    padding: 0 0 min(0.78125vw, 10px);
  }
}

.c-hide {
  display: none !important;
}
.c-hide__pc {
  display: block !important;
}
.c-hide__sp {
  display: none !important;
}
@media screen and (min-width: 769px), print {
  .c-hide__pc {
    display: none !important;
  }
  .c-hide__sp {
    display: block !important;
  }
}