.p-u-underline {
  text-decoration: underline;
}

.p-u-zoom-50 {
  zoom: 0.5;
}

.p-content__in {
  max-width: 930px;
  margin: auto;
}

.p-button {
  display: block;
  border-radius: 100px;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
@media (hover: hover) {
  .p-button:hover {
    opacity: 0.7;
  }
}
.p-button img:nth-child(n) {
  -webkit-transition: none !important;
  transition: none !important;
  opacity: 1 !important;
}

.p-hero {
  position: relative;
}
.p-hero__main {
  position: absolute;
  top: 40px;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.p-hero__navigation {
  position: absolute;
  top: 505px;
  left: 40px;
  right: 40px;
  -webkit-filter: drop-shadow(5px 5px 20px rgba(160, 72, 108, 0.1));
          filter: drop-shadow(5px 5px 20px rgba(160, 72, 108, 0.1));
}
.p-hero__navigation-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 447px;
  height: 46px;
  margin: auto;
  background: #E36C9E;
  border-radius: 10px 10px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.07em;
  color: #FFFFFF;
}
.p-hero__navigation-heading b {
  font-size: 20px;
  font-weight: inherit;
}
.p-hero__navigation-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 25px 25px 25px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
}
.p-hero__navigation-block {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  background: #F6F7FB;
  border-radius: 10px;
}
.p-hero__navigation-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.p-hero__navigation-title {
  margin: 19px 0 0;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #CD597C;
}
.p-hero__navigation-title._01 {
  color: #6F9FB7;
}
.p-hero__navigation-title._02 {
  color: #E2719E;
}
.p-hero__navigation-title._03 {
  color: #74B8C1;
}
.p-hero__navigation-title._04 {
  color: #D9665B;
}
.p-hero__navigation-title._05 {
  color: #CD597C;
}
.p-hero__navigation-title b {
  font-size: 18px;
  font-weight: inherit;
}
.p-hero__navigation-button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 136px;
  height: 30px;
  padding: 2px 4px 0 0;
  margin: 82px auto 10px;
  background: #C1AD04;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
          box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #FFFFFF;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
@media (hover: hover) {
  .p-hero__navigation-button:hover {
    opacity: 0.7;
  }
}
.p-hero__navigation-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7px;
  display: block;
  width: 6px;
  height: 11px;
  margin: auto;
  background: url(/pgmedia/hairEssence/img/202512/hero_button_arrow_01_pc.svg) 0 0/contain no-repeat;
}

.p-choice {
  margin: 50px 0 0;
}
.p-choice__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid #677B93;
  border-bottom: 1px solid #677B93;
  height: 151px;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #555555;
}
.p-choice__section {
  display: grid;
  grid-template: "title  image" auto "detail image" 1fr "info   info" auto/423px 1fr;
  margin: 25px 0 0;
}
.p-choice__section:not(:first-child) {
  margin-top: 62px;
}
.p-choice__image {
  grid-area: image;
}
.p-choice__image._01 {
  margin: 9px 0 0;
  justify-self: right;
}
.p-choice__image._02 {
  margin: -33px 0 0;
  justify-self: right;
}
.p-choice__title {
  grid-area: title;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 180%;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-choice__detail {
  grid-area: detail;
  margin: 17px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.07em;
  color: #555555;
}
.p-choice__detail-text:not(:first-child) {
  margin-top: 1.8em;
}
.p-choice__info {
  grid-area: info;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 26px;
  padding: 18px 0 11px;
  margin: 25px 0 0;
  background: #F6F7FB;
  border-radius: 10px;
}

.p-like {
  margin: 36px 0 0;
}
.p-like__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid #677B93;
  border-bottom: 1px solid #677B93;
  height: 151px;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #555555;
}
.p-like__section {
  margin: 30px 0 0;
}
.p-like__section:not(:first-child) {
  margin-top: 50px;
}
.p-like__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 180%;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-like__title:before {
  content: "";
  display: block;
  width: 11px;
  height: 46px;
  background: #677B93;
}
.p-like__image {
  margin: 25px 0 0;
}
.p-like__scroller {
  padding: 0 0 20px;
  overflow: auto;
}
.p-like__table {
  position: relative;
  overflow: clip;
  margin: 25px 0 0;
}
.p-like__table th,
.p-like__table td {
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}
.p-like__table-in {
  width: 100%;
  margin: -5px -5px 0 0;
}
.p-like__table-th-01 {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 16px 0 12px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #FFFFFF;
  background: #E36C9E;
}
.p-like__table-th-01:after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  height: 100%;
  display: block;
  border-right: inherit;
  z-index: 1;
}
.p-like__table-th-01 small {
  display: block;
  font-size: 10px;
  margin: -3px 0 0;
}
.p-like__table-th-01:has(small) {
  padding: 6px 0 2px;
}
.p-like__table-th-02 {
  height: 50px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #FFFFFF;
}
.p-like__table-th-02._01 {
  background-color: #6F9FB7;
}
.p-like__table-th-02._02 {
  background-color: #E2719E;
}
.p-like__table-th-02._03 {
  background-color: #74B8C1;
}
.p-like__table-th-02._04 {
  background-color: #D9665B;
}
.p-like__table-th-02._05 {
  background-color: #CD597C;
}
.p-like__table-td {
  padding: 7px 0 7px;
  background-color: #F6F7FB;
}
.p-like__table-td._main {
  padding: 0;
  vertical-align: top;
}
.p-like__table-grid {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 78px;
  margin: 9px 15px 7px;
}
.p-like__table-name {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-like__table-icon {
  position: absolute;
}
.p-like__table-icon._01 {
  top: -1px;
  right: 0;
}
.p-like__table-icon._02 {
  top: 6px;
  right: 10px;
}
.p-like__table-icon._03 {
  top: 6px;
  right: 10px;
}
.p-like__table-icon._04 {
  top: -1px;
  right: 2px;
}
.p-like__table-icon._05 {
  top: 3px;
  right: 1px;
}
.p-like__table-info {
  margin: 0 16px 0;
}
.p-like__table-button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 165px;
  height: 35px;
  padding: 2px 0 0 0;
  margin: 10px auto 10px;
  background: #C1AD04;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
          box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #FFFFFF;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
@media (hover: hover) {
  .p-like__table-button:hover {
    opacity: 0.7;
  }
}
.p-like__table-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7px;
  display: block;
  width: 6px;
  height: 11px;
  margin: auto;
  background: url(/pgmedia/hairEssence/img/202512/like_button_arrow_01_pc.svg) 0 0/contain no-repeat;
}
.p-like__table-score {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #E36C9E;
}
.p-like__table-score._01 {
  color: #677B93;
}
.p-like__table-text {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #677B93;
}

.p-type {
  margin: 50px 0 0;
}
.p-type__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid #677B93;
  border-bottom: 1px solid #677B93;
  height: 151px;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #555555;
}
.p-type__in {
  margin: 25px 0 0;
}
.p-type__card + .p-type__card {
  margin-top: 55px;
}
.p-type__card-heading-sub {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 424px;
}
.p-type__card-heading-sub-note {
  position: absolute;
  bottom: -4px;
  right: 49px;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-type__card-in {
  display: grid;
  grid-template: "heading-main image" "detail image" "tips image" "button image" "aside image" ". image"/465px 1fr;
}
.p-type__card-heading-main {
  grid-area: heading-main;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin: -3px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 150%;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-type__card-heading-main:before {
  content: "";
  display: block;
  width: 11px;
  height: 100%;
  min-height: 46px;
  background: #677B93;
}
.p-type__card-image {
  grid-area: image;
  align-self: end;
  justify-self: end;
  margin-top: -100px;
}
.p-type__card-detail {
  grid-area: detail;
  margin: 15px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.07em;
  color: #555555;
}
.p-type__card-tips {
  grid-area: tips;
  display: grid;
  grid-template: auto/85px 1fr;
  gap: 10px;
  padding: 34px 0 0;
  margin: 35px 0 0;
  border-top: 1px dashed #677B93;
}
.p-type__card-tips-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 0 0;
  background: #677B93;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #FFFFFF;
}
.p-type__card-tips-body {
  display: grid;
  grid-template: auto/1fr 1fr 1fr 1fr;
  gap: 5px 6px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  text-align: center;
  color: #677B93;
}
.p-type__card-tips-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 42px;
  padding: 3px 0 0;
  background-color: #F6F7FB;
}
.p-type__card-button {
  grid-area: button;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 55px;
  margin: 20px 0 0;
  background: #C1AD04;
  border-radius: 10px;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.07em;
  color: #FFFFFF;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
@media (hover: hover) {
  .p-type__card-button:hover {
    opacity: 0.7;
  }
}
.p-type__card-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 19px;
  display: block;
  width: 8px;
  height: 16px;
  margin: auto;
  background: url(/pgmedia/hairEssence/img/202512/type_arrow_01_pc.svg) 0 0/contain no-repeat;
}
.p-type__card-aside {
  grid-area: aside;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 13px 13px 12px 57px;
  background: #F6F7FB;
  margin: 15px 0 0;
  border-radius: 5px;
}
.p-type__card-aside-icon {
  position: absolute;
}
.p-type__card-aside-icon._01 {
  left: 10px;
  bottom: 1px;
}
.p-type__card-aside-icon._02 {
  left: 15px;
  bottom: 7px;
}
.p-type__card-aside-icon._03 {
  left: 15px;
  bottom: 6px;
}
.p-type__card-aside-head {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  letter-spacing: 0.07em;
  color: #677B93;
}
.p-type__card-aside-button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 191px;
  height: 45px;
  padding: 2px 10px 0 0;
  margin-left: auto;
  background: #FFFFFF;
  border: 1px solid #C1AD04;
  border-radius: 5px;
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: #C1AD04;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
@media (hover: hover) {
  .p-type__card-aside-button:hover {
    opacity: 0.7;
  }
}
.p-type__card-aside-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  display: block;
  width: 7px;
  height: 15px;
  margin: auto;
  background: url(/pgmedia/hairEssence/img/202512/type_arrow_02_pc.svg) 0 0/contain no-repeat;
}

.p-bridge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 60px 0 0;
}