/* hrp-skincare variables
============================================================ */
.hrp-skincare-lp {
  /* TYPE */
  --body-family: "Hiragino Sans";
  --body-family-min: "Hiragino Mincho Pro";
  --body-size: 14px;

  /* COLORS */
  --color-main: #d7000f;
  --color-pink: #ea6f61;
  --color-yellow: #f1b440;
  --color-brown: #482808;
  --color-gray: #666;
  --bg-pink: #ffe3e0;
  --line_marker-yellow: #ffe8b4;
  --text-black: #333;
  --border-gray: #ccc;
  --border-lightgray: #eee;

  --mg04: 4px;
  --mg10: 10px;
  --mg15: 15px;
  --mg20: 20px;
  --mg30: 30px;
  --mg40: 40px;
}


/* hrp-skincare common
============================================================ */
.hrp-skincare-lp {
  color: var(--text-black);
  font-family: var(--body-family);
  font-size: var(--body-size);
}

.hrp-skincare-lp .ff-hm {
  font-family: var(--body-family-min);
}

.hrp-skincare-lp {
  margin-top: 30px;
}

.hrp-skincare-lp-inner {
  padding: 0 4%;
  margin: 0 auto;
  max-width: 700px;
}

.hrp-skincare-lp-top-text {
  color: var(--color-main);
  line-height: 1.6;
}

.hrp-skincare-lp-top-text p.ff-hm {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: var(--mg15);
  text-shadow: 0px 3px 3px rgba(0, 0, 0, .15);
}

.hrp-skincare-lp img {
  display: block;
  height: auto;
  width: 100%;
}

.hrp-skincare-lp small {
  font-size: 100%;
}


/* hrp-skincare cta
============================================================ */
.hrp-skincare-lp-cta {
  background: #fff3d7;
  margin-bottom: var(--mg40);
  padding: var(--mg20);
}

.hrp-skincare-lp-cta:last-of-type {
  margin-bottom: var(--mg04);
}

.hrp-skincare-lp-cta .hrp-skincare-lp-inner {
  padding: 0;
}

.hrp-skincare-lp-cta-ttl {
  color: var(--color-main);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--mg15);
  text-align: center;
}

.hrp-skincare-lp-cta-ttl span {
  background: linear-gradient(transparent 40%, var(--line_marker-yellow) 40%);
}

.hrp-skincare-lp-cta section {
  background: #fff;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, .05);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--mg15);
  row-gap: var(--mg15);
}

.hrp-skincare-lp-cta-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  width: 100%;
}

.hrp-skincare-lp-cta-img {
  width: 48%;
}

.hrp-skincare-lp-cta-info {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  width: 48%;
}

.hrp-skincare-lp-cta-info-postage {
  border: 1px solid var(--color-pink);
  border-radius: 8px;
  color: var(--color-pink);
  font-size: 14px;
  font-weight: 600;
  padding: 5px;
  text-align: center;
}

.hrp-skincare-lp-cta-info-postage span {
  font-size: 10px;
  font-weight: 300;
}

.hrp-skincare-lp-cta-info-benefit {
  align-items: center;
  border: 1px solid var(--color-pink);
  border-radius: 8px;
  color: var(--color-pink);
  display: flex;
  font-weight: 600;
  justify-content: center;
  padding: 5px;
  text-align: center;
}

.hrp-skincare-lp-cta-info-benefit span:first-of-type {
  font-size: 12px;
  margin-right: 5px;
}

.hrp-skincare-lp-cta-info-benefit span:nth-of-type(2) {
  font-size: 24px;
}

.hrp-skincare-lp-cta-info-benefit span:last-of-type {
  font-size: 16px;
}

.hrp-skincare-lp-cta-info-normal {
  color: var(--color-gray);
  line-height: 1.2;
  text-align: center;
}

.hrp-skincare-lp-cta-info-price {
  color: var(--color-main);
  display: flex;
  font-size: 42px;
  font-weight: 600;
  justify-content: center;
}

.hrp-skincare-lp-cta-info-price-unit {
  font-size: 10px;
  padding-top: 8px;
  text-align: center;
}

.hrp-skincare-lp-cta-info-price-unit span {
  font-size: 20px;
}

.hrp-skincare-lp-cta-btn {
  align-items: center;
  background: var(--color-pink) url(https://gigaplus.makeshop.jp/hachibeikan/hrp-skincare/images/arrow-point-to-right.svg) no-repeat 92% center/16px 16px;
  border-radius: 100px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 600;
  height: 68px;
  justify-content: center;
  line-height: 1.2;
  margin: 0 auto;
  max-width: 316px;
  text-align: center;
  width: 90%;
}

.hrp-skincare-lp-cta-btn span {
  font-size: 12px;
  display: block;
  margin-bottom: var(--mg04);
}


/* hrp-skincare main contents
============================================================ */
/* mv */
.hrp-skincare-lp-top-contents {
  margin-bottom: var(--mg40);
}

.hrp-skincare-lp-mv {
  margin: var(--mg20) 0;
}

.hrp-skincare-lp-mv p {
  color: var(--color-main);
  font-size: 10px;
  margin-top: var(--mg10);
  text-align: right;
}

.hrp-skincare-lp-ttl {
  color: var(--color-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--mg20);
}

.hrp-skincare-lp-ttl span {
  font-size: 14px;
}

.hrp-skincare-lp-intro {
  color: var(--color-brown);
  line-height: 1.8;
  text-align: justify;
}


/* materials */
.hrp-skincare-lp-materials {
  border: 4px solid var(--line_marker-yellow);
  margin-bottom: var(--mg40);
  padding: var(--mg20);
}

.hrp-skincare-lp-materials-img {
  margin-bottom: var(--mg20);
}

.hrp-skincare-lp-materials-copy{
  color: var(--color-pink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.hrp-skincare-lp-materials-copy-marker {
  background: var(--bg-pink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--color-pink);
  display: inline-block;
  font-size: 20px;
  line-height: 1.6;
  padding: 0 12px;
}

.hrp-skincare-lp-materials-copy-marker-last {
  margin: 8px 0 var(--mg10);
}

.hrp-skincare-lp-materials-copy-marker sup {
  font-size: 14px;
}

.hrp-skincare-lp-materials-copy-marker-note {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: var(--mg15);
  text-align: right;
}

.hrp-skincare-lp-materials-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--mg20);
}

.hrp-skincare-lp-materials-list li:not(:last-of-type) {
  border-bottom: 1px dashed var(--border-gray);
  padding-bottom: var(--mg20);
}

.hrp-skincare-lp-materials-list-ttl {
  color: var(--color-main);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--mg10);
}

.hrp-skincare-lp-materials-list-ttl span {
  font-size: 14px;
}

.hrp-skincare-lp-materials-detail {
  column-gap: var(--mg15);
  display: flex;
}

.hrp-skincare-lp-materials-detail img {
  align-self: flex-start;
  max-width: 100px;
}

.hrp-skincare-lp-materials-detail p {
  color: var(--color-brown);
  line-height: 1.6;
  text-align: justify;
}


/* merit */
.hrp-skincare-lp-merit {
  background: #fae6d5;
  color: var(--color-brown);
  margin-bottom: var(--mg40);
  padding: var(--mg30) var(--mg15);
  text-align: center;
}

.hrp-skincare-lp-merit-copy {
  font-size: 16px;
  margin-bottom: var(--mg10);
}

.hrp-skincare-lp-merithrp-skincare-lp-merit-ttl {
 font-size: 32px;
 font-weight: 400;
 line-height: 1.2;
 margin-bottom: var(--mg10);
}

.hrp-skincare-lp-merit-copy2 {
  font-size: 12px;
  margin-bottom: var(--mg10);
}

.hrp-skincare-lp-merit-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  gap: var(--mg20) 5%;
  justify-content: center;
}

.hrp-skincare-lp-merit-list li {
  align-items: center;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  width: 30%;
}


/* review */
.hrp-skincare-lp-review {
  margin-bottom: var(--mg40);
}

.hrp-skincare-lp-border-ttl {
  color: var(--color-main);
  font-weight: 400;
  margin-bottom: var(--mg20);
  text-align: center;
}

.hrp-skincare-lp-border-ttl::before,
.hrp-skincare-lp-border-ttl::after {
  content: "-";
  display: inline-block;
}

.hrp-skincare-lp-border-ttl::before {
  margin-right: 8px;
}

.hrp-skincare-lp-border-ttl::after {
  margin-left: 8px;
}

.hrp-skincare-lp-review-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--mg20);
}

.hrp-skincare-lp-review-list section {
  align-items: flex-start;
  column-gap: 50px;
  display: flex;
}

.hrp-skincare-lp-review-list section div {
  background: var(--line_marker-yellow);
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 18px;
  position: relative;
}

.hrp-skincare-lp-review-list section div::after {
  background: var(--line_marker-yellow);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  height: calc(tan(60deg) * 35px / 2);
  position: absolute;
  right: -24px;
  top: 16px;
  width: 25px;
}

.hrp-skincare-lp-review-list h3 {
  font-weight: 700;
} 

.hrp-skincare-lp-review-list li section figure img {
  width: 80px;
}


/* hrp-skincare-lp-lineup */
.hrp-skincare-lp-lineup {
  margin-bottom: var(--mg40);
}

.hrp-skincare-lp-lineup-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--mg40);
}

.hrp-skincare-lp-lineup-name {
  background: var(--color-main);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--mg20);
  padding: 18px 0;
  text-align: center;
}

.hrp-skincare-lp-lineup-lotion-inner {
  align-items: flex-start;
  color: var(--color-brown);
  column-gap: 20px;
  display: flex;
  line-height: 1.8;
  text-align: justify;
}

.hrp-skincare-lp-lineup-copy {
  color: var(--color-main);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-lineup-lotion-inner img {
  width: 72px;
}

.hrp-skincare-lp-lineup-use {
  border: 1px solid var(--border-lightgray);
  line-height: 1.8;
  margin: var(--mg20) 0;
  padding: var(--mg15);
}

.hrp-skincare-lp-lineup-use-ttl {
  color: var(--color-brown);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-lineup-use-inner {
  column-gap: var(--mg15);
  display: flex;
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-lineup-use-inner img {
  width: 150px;
}

.hrp-skincare-lp-lineup-lotion .hrp-skincare-lp-lineup-use > p {
  border: 1px solid var(--color-pink);
  border-radius: 8px;
  color: var(--color-pink);
  font-weight: 600;
  line-height: 1.6;
  padding: var(--mg10);
  text-align: center;
}

.hrp-skincare-lp-lineup-use > p span {
  font-weight: 300;
}

.hrp-skincare-lp-single-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 10px;
}

.hrp-skincare-lp-single-cta-large {
  align-items: center;
  background: var(--color-pink) url(https://gigaplus.makeshop.jp/hachibeikan/hrp-skincare/images/arrow-point-to-right.svg) no-repeat 92% center/16px 16px;
  border-radius: 100px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  height: 68px;
  justify-content: center;
  line-height: 1.2;
  margin: 0 auto;
  row-gap: 4px;
  width: 100%;
}

.hrp-skincare-lp-single-cta-large span {
  font-size: 20px;
}

.hrp-skincare-lp-single-cta-set {
  flex-grow: 1;
  position: relative;
}

.hrp-skincare-lp-single-cta-set a {
  align-items: center;
  background: var(--color-yellow) url(https://gigaplus.makeshop.jp/hachibeikan/hrp-skincare/images/arrow-point-to-right.svg) no-repeat 94% center/12px 12px;
  border-radius: 100px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  flex-direction: column;
  height: 50px;
  justify-content: center;
  line-height: 1.2;
  row-gap: 2px;
  text-align: center;
}

.hrp-skincare-lp-single-cta-set a span {
  display: contents;
  font-size: 16px;
}

.hrp-skincare-lp-single-cta-set p {
  background: #fff;
  border: 1px solid var(--color-yellow);
  border-radius: 50%;
  color: var(--color-yellow);
  font-size: 12px;
  font-weight: 600;
  height: 50px;
  left: 0;
  padding: 6px;
  position: absolute;
  text-align: center;
  top: -25px;
  width: 50px;
}

.hrp-skincare-lp-single-cta-set p span {
  font-size: 19px;
}

.hrp-skincare-lp-lineup-gel-inner {
  margin-bottom: var(--mg30);
}

.hrp-skincare-lp-lineup-gel-inner-text,
.hrp-skincare-lp-lineup-soap-inner-text {
  color: var(--color-brown);
  line-height: 1.8;
  margin-top: var(--mg15);
}

.hrp-skincare-lp-lineup-gel .hrp-skincare-lp-lineup-use figure,
.hrp-skincare-lp-lineup-soap .hrp-skincare-lp-lineup-use figure {
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-lineup-soap-inner {
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-lineup-soap .hrp-skincare-lp-lineup-use {
  margin-bottom: 36px;
}

.hrp-skincare-lp-lineup-soap .hrp-skincare-lp-single-cta {
  gap: 0 10px;
}

.hrp-skincare-lp-lineup-soap .hrp-skincare-lp-single-cta img {
  transform: translateY(4px);
}

.hrp-skincare-lp-lineup-soap .hrp-skincare-lp-single-cta .hrp-skincare-lp-single-cta-large {
  margin: 0 0 var(--mg30);
}


/* hrp-skincare-lp-about */
.hrp-skincare-lp-about {
  background: #f4f5f7;
  margin-bottom: var(--mg40);
  padding: var(--mg15) 0;
}

.hrp-skincare-lp-about-ttl {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--mg15);
  text-align: center;
}

.hrp-skincare-lp-about-ttl span {
  background: linear-gradient(transparent 40%, var(--line_marker-yellow) 40%);
}

.hrp-skincare-lp-about-list {
  display: flex;
  flex-direction: column;
  line-height: 1.8;
  row-gap: var(--mg15);
}

.hrp-skincare-lp-about-list figure {
  margin-bottom: var(--mg15);
}

.hrp-skincare-lp-about-text {
  text-align: justify;
}

.hrp-skincare-lp-about-text span {
  color: var(--color-pink);
}

.hrp-skincare-lp-materials-note {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 80px;
}

/* hrp-skincare Small SP
============================================================ */
@media screen and (max-width: 380px) {
  .hrp-skincare-lp-cta-info-normal {
    font-size: 12px;
  }

  .hrp-skincare-lp-cta-info-price {
    font-size: 38px;
  }

  .hrp-skincare-lp-merithrp-skincare-lp-merit-ttl {
    font-size: 26px;
  }
}


/* hrp-skincare hover
============================================================ */
@media (any-hover:hover) {
	.hrp-skincare-lp a:hover {
		cursor: pointer;
		opacity: .8;
	}
}


/* hrp-skincare PC
============================================================ */
@media screen and (min-width: 600px) {
  /*================================
    PC hrp-skincare variables
  ================================*/
  .hrp-skincare-lp {
  --mg04: 8px;
  --mg10: 20px;
  --mg15: 30px;
  --mg20: 40px;
  --mg30: 60px;
  --mg40: 80px;
  }

  /*================================
    PC hrp-skincare common
  ================================*/
  .hrp-skincare-lp-inner {
    padding: 0 15px;
  }

  .hrp-skincare-lp-top-text p.ff-hm {
    font-size: 28px;
  }

  .hrp-skincare-lp-ttl {
    font-size: 32px;
    line-height: 1.4;
  }

  .hrp-skincare-lp-ttl span {
    font-size: 22px;
  }

  .hrp-skincare-lp-mv p {
    font-size: 12px;
  }

  .hrp-skincare-lp-intro {
    font-size: 16px;
    line-height: 1.6;
  }

  /*================================
    PC hrp-skincare cta
  ================================*/
  .hrp-skincare-lp-cta {
    padding: 40px 15px;
  }

  .hrp-skincare-lp-cta-ttl {
    font-size: 26px;
  }

  .hrp-skincare-lp-cta-name {
    font-size: 20px;
  }

  .hrp-skincare-lp-cta-img {
    width: 42%;
  }

  .hrp-skincare-lp-cta-info {
    row-gap: 12px;
    width: 54%;
  }

  .hrp-skincare-lp-cta-info-postage {
    border: 2px solid var(--color-pink);
    font-size: 26px;
    padding: 8px;
  }

  .hrp-skincare-lp-cta-info-postage span {
    font-size: 18px;
  }

  .hrp-skincare-lp-cta-info-benefit {
    border: 2px solid var(--color-pink);
  }

  .hrp-skincare-lp-cta-info-benefit span:first-of-type {
    font-size: 20px;
  }

  .hrp-skincare-lp-cta-info-benefit span:nth-of-type(2) {
    font-size: 40px;
  }

  .hrp-skincare-lp-cta-info-benefit span:last-of-type {
    font-size: 24px;
  }

  .hrp-skincare-lp-cta-info-normal {
    font-size: 20px;
    text-align: left;
  }

  .hrp-skincare-lp-cta-info-price {
    font-size: 100px;
  }

  .hrp-skincare-lp-cta-info-price-unit {
    font-size: 16px;
    padding-top: 20px;
  }

  .hrp-skincare-lp-cta-info-price-unit span {
    font-size: 54px;
  }

  .hrp-skincare-lp-cta-btn {
    max-width: 400px;
  }

  .hrp-skincare-lp-cta-btn {
    font-size: 24px;
    height: 80px;
  }

  .hrp-skincare-lp-cta-btn span {
    font-size: 16px;
    margin-bottom: 4px;
  }

  /*================================
    PC hrp-skincare main contents
  ================================*/
  /* mv */
  .hrp-skincare-lp-ttl {
    margin-bottom: 20px;
  }

  /* materials */
  .hrp-skincare-lp-materials {
    padding: 20px;
  }

  .hrp-skincare-lp-materials-copy {
    font-size: 18px;
  }

  .hrp-skincare-lp-materials-copy-marker {
    font-size: 24px;
  }

  .hrp-skincare-lp-materials-list-ttl {
    font-size: 22px;
  }

  .hrp-skincare-lp-materials-list-ttl span {
    font-size: 16px;
  }

  .hrp-skincare-lp-materials-detail img {
    max-width: 200px;
  }

  .hrp-skincare-lp-materials-detail p {
    font-size: 16px;
  }

  /* merit */
  .hrp-skincare-lp-merit-copy {
    font-size: 20px;
  }

  .hrp-skincare-lp-merithrp-skincare-lp-merit-ttl {
    font-size: 40px;
  }

  .hrp-skincare-lp-merit-copy2 {
    font-size: 16px;
  }

  .hrp-skincare-lp-merit-list {
    font-size: 14px;
    gap: 0;
    justify-content: space-between;
  }

  .hrp-skincare-lp-merit-list li {
    width: 18%;
  }

  /* review */
  .hrp-skincare-lp-border-ttl {
    font-size: 22px;
  }

  .hrp-skincare-lp-review-list li section figure img {
    width: 160px;
  }

  .hrp-skincare-lp-review-list li h3 {
    font-size: 16px;
  }

  .hrp-skincare-lp-review-list li p {
    font-size: 14px;
  }

  /* hrp-skincare-lp-lineup */
  .hrp-skincare-lp-lineup-name {
    margin-bottom: 24px;
  }

  .hrp-skincare-lp-lineup-copy {
    font-size: 22px;
  }
  
  .hrp-skincare-lp-lineup-lotion-inner p {
    font-size: 16px;
  }

  .hrp-skincare-lp-lineup-lotion-inner img {
    width: 100px;
  }

  .hrp-skincare-lp-lineup-use-ttl {
    font-size: 16px;
  }

  .hrp-skincare-lp-lineup-use-inner img {
    width: 180px;
  }

  .hrp-skincare-lp-lineup-use-inner p {
    font-size: 16px;
  }

  .hrp-skincare-lp-lineup-lotion .hrp-skincare-lp-lineup-use > p {
    border: 2px solid var(--color-pink);
    font-size: 18px;
    padding: 15px;
  }

  .hrp-skincare-lp-single-cta {
    gap: 40px 20px;
  }

  .hrp-skincare-lp-single-cta-large {
    font-size: 14px;
    height: 76px;
  }

  .hrp-skincare-lp-single-cta-large span {
    font-size: 22px;
  }

  .hrp-skincare-lp-single-cta-set a {
    font-size: 16px;
    height: 66px;
  }

  .hrp-skincare-lp-single-cta-set a span {
    font-size: 20px;
  }

  .hrp-skincare-lp-single-cta-set p {
    font-size: 14px;
    height: 60px;
    top: -30px;
    width: 60px;
    z-index: 5;
  }

  .hrp-skincare-lp-single-cta-set p span {
    font-size: 22px;
  }

  .hrp-skincare-lp-lineup-gel-inner-text,
  .hrp-skincare-lp-lineup-soap-inner-text {
    font-size: 16px;
  }

  .hrp-skincare-lp img.hrp-skincare-lp-lineup-gel-all {
    margin: 0 auto;
    width: 600px;
  }

  .hrp-skincare-lp-lineup-gel .hrp-skincare-lp-lineup-use p,
  .hrp-skincare-lp-lineup-soap .hrp-skincare-lp-lineup-use p {
    font-size: 16px;
  }

  .hrp-skincare-lp img.hrp-skincare-lp-lineup-soap-present {
    margin: 0 auto;
    width: 400px;
  }


  /* hrp-skincare-lp-about */
  .hrp-skincare-lp-about {
    margin-bottom: 0;
  }

  .hrp-skincare-lp-about-ttl {
    font-size: 20px;
  }

  .hrp-skincare-lp-about-list figure {
    margin-bottom: 20px;
  }

  .hrp-skincare-lp-about-text {
    font-size: 16px;
  }

  .hrp-skincare-lp-materials-note {
    font-size: 14px;
    margin-bottom: 0;
  }
}