@charset "UTF-8";
:root {
  --color-addict-pink: #F36B78;
  --color-addict-bg-pink: #FFF5FF;
  --color-addict-bg-gray: #F6F6F6;
  --color-addict-border-gray: #F3F2F2;
  --color-white: #FFF;
  --font-addict-40: clamp(26px, 3vw, 40px);
  --font-addict-28: clamp(20px, 3vw, 28px);
  --font-addict-24: clamp(16px, 3vw, 24px);
  --font-addict-24b: clamp(20px, 3vw, 24px);
  --font-addict-20: clamp(15px, 3vw, 20px);
  --font-addict-20b: clamp(17px, 3vw, 20px);
  --font-addict-main: clamp(14px, 3vw, 16px);
  --font-weight-bold: 600;
  --page-addict-padding-sp: 5%;
}

#v3 {
  font-size: var(--font-addict-main);
}
/* common */
#v3 h3.heading {
  font-size: var(--font-addict-40);
  margin-block-end: 3em;
  position:relative;
}
#v3 h3.heading::before {
  content:attr(data-sub);
  font-size: var(--font-addict-20);
  letter-spacing: 0;
  width: auto;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1.6em;
  margin: auto;
}
#v3 h3.heading:not(.--contents)::after {
  width: min(160px, 60vw, 170px);
  height: 15px;
  background: url(https://gigaplus.makeshop.jp/natural4721/img/common/heading_line_pc.svg) no-repeat center center / 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.4em;
  margin: auto;
}

/* contents */
#v3 .contents-table {
  padding-inline: max(20px, 3vw, 80px);
  background: var(--color-gradation);
  text-align: center;
}

/* about */
#v3 #about {
  text-align: center;
}
#v3 #about p + p{
  margin-block-start: 2em;
}
#v3 #about .picture {
  margin-block-end: 4em;
}
#v3 #about .picture:nth-of-type(n+2) {
  margin-block-start: 4em;
}
#v3 #about h4.title {
  font-size: 2.0rem;
  margin-block-end: 1.5em;
}
#v3 #about h5.title {
  font-size: 1.8rem;
  margin-block-end: 1.5em;
}

/* recommend */
#v3 #recommend {
  font-size: var(--font-addict-24);
  text-align: center;
}
#v3 #recommend ul li {
  padding-block: .3em;
}
#v3 #recommend ul li span {
  color: var(--color-addict-pink);
}

/* ingredients */
#v3 #ingredients figure {
  margin-inline: auto;
  text-align: center;
}
#v3 #ingredients .ingBox {
  border: 2px solid var(--color-addict-pink);
}
#v3 #ingredients .ingBox h4 {
  color: var(--color-addict-pink);
  font-size: var(--font-addict-24);
  margin-block-end: 1em;
}
#v3 #ingredients .ingBox dl dt {
  font-size: var(--font-addict-24);
  margin-block-end: .5em;
}
#v3 #ingredients .ingBox dl dd + dt {
  margin-block-start: 1em;
}

/* point */
#v3 #point .pointList li {
  text-align: center;
  background: var(--color-addict-bg-pink);
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#v3 #point .pointList li figure {
  margin-inline: auto;
}
#v3 #point .pointList li p {
  font-size: 14px;
}
#v3 #point .pointList li p.title {
  color: var(--color-addict-pink);
  font-size: var(--font-addict-20b);
  margin-block-end: .4em;
}

/* how to */
#v3 #how-to {
  background: var(--color-addict-bg-gray);
} 
#v3 #how-to .outline > div:not(:last-child) {
  border-bottom: 2px solid var(--color-white);
}
#v3 #how-to .outline dt {
  font-size: var(--font-addict-20b);
  font-weight: var(--font-weight-bold);
}
#v3 #how-to .outline dd p + p{
  margin-block-start: 1em;
}
#v3 #how-to .hair-cycle {
  background: var(--color-white);
}
#v3 #how-to .hair-cycle h4 {
  color: var(--color-addict-pink);
  font-size: var(--font-addict-24b);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: 1.6em;
}
#v3 #how-to .cycle-column {
  border: 2px solid var(--color-addict-pink);
}

/* faq */
#v3 #faq dl > div {
  border-bottom: 1px solid var(--color-addict-border-gray);
}
#v3 #faq dl > div:first-child {
  padding-block-start: 0;
}
#v3 #faq dl > div:last-child {
  padding-block-end: 0;
  border-bottom: 0;
}
#v3 #faq dl dt,
#v3 #faq dl dd {
  display: flex;
}
#v3 #faq dl dt {
  font-weight: var(--font-weight-bold);
  margin-block-end: 10px;
}
#v3 #faq dl dt span,
#v3 #faq dl dd span {
  color: var(--color-pink);
  font-size: var(--font-addict-24b);
  margin-block-start: -.3em;
}

/* product */
#v3 #product .itemWrap .itemName {
  color: var(--color-pink);
  font-size: var(--font-addict-28);
  line-height: 1.4;
}
#v3 #product .itemWrap .itemName span {
  padding-inline-end: 10px;
}
#v3 #product .itemWrap .details {
  background: var(--color-addict-bg-gray);
}
#v3 #product .itemWrap .details > div + div {
  margin-block-start: 1em ;
}
#v3 .link-detil-btn {
  color: var(--color-white);
  font-weight: 700;
  display: grid;
  place-items: center;
  justify-content: center;
  background-color: #CE96D9;
  width: 100%;
  max-width: 420px;
  height: 60px;
}
#v3 .link-itemAll-btn {
  font-weight: 700;
  display: grid;
  place-items: center;
  justify-content: center;
  background-color: var(--color-base);
  color: var(--color-white);
  width: 100%;
  max-width: 420px;
  height: 60px;
  margin: 50px auto 0;
}


@media screen and (max-width: 768px) {

  /* common */
  #v3 h3.heading {
    letter-spacing: .16em;
  }
  #v3 .section {
    margin-block: 75px;
    padding-inline: var(--page-addict-padding-sp);
  }

  /* mv */
  #v3 .mv {
    padding-inline: var(--page-addict-padding-sp);
  }
  #v3 #about p {
    line-height: 1.6;
  }

  /* contents */
  #v3 .contents-table {
    font-size: 13px;
    padding-block: 40px;
    margin-block: 30px;
  }
  #v3 .contents-table li {
    margin-block: 1.3em;
  }

  /* about */
  #v3 #about .picture:nth-of-type(1) {
    margin-block-start: 2em;
  }

  /* how to use */
  #v3 #howtouse .step-wrap {
    display: grid;
    row-gap: 3rem;
  }
  #v3 #howtouse .step-wrap .item {
    display: grid;
    align-items: center;
    row-gap: 1.5rem;
  }
  #v3 #howtouse .step-wrap .item .picture {
    margin-inline: auto;
  }
  #v3 #howtouse .step-wrap .item .text {
    font-size: 1.4rem;
  }

  #v3 #howtouse .point-wrap {
    display: grid;
    row-gap: 3rem;
    justify-content: space-between;
    margin-block-start: 6.0rem;
  }
  #v3 #howtouse .point-wrap .item {
    display: grid;
    row-gap: 1.2rem;
  }
  #v3 #howtouse .point-wrap .item .picture {
    display: grid;
    place-content: center;
  }
  #v3 #howtouse .point-wrap .item:last-child .picture img {
    width: 130px;
  }
  #v3 #howtouse .point-wrap .item  .text {
    font-size: 1.4rem;
  }

  /* difference */
  #v3 #difference h3.heading::before {
    font-size: 13px;
  }

  /* faq */
  #v3 #faq dl > div {
    padding-block: 25px;
  }
  #v3 #faq dl dt,
  #v3 #faq dl dd {
    gap: 16px;
  }

  /* product */
  #v3 #product .itemWrap + .itemWrap {
    margin-block-start: 80px;
  }
  #v3 #product .itemWrap figure {
    width: 100%;
    margin-block-end: 20px;
  }
  #v3 #product .itemWrap .description {
    margin-block: 20px;
  }
  #v3 #product .itemWrap .details {
    padding: 20px;
  }
  #v3 #product .itemWrap .details p + p {
    margin-block-start: 1.5rem;
  }

  #v3 #product .itemWrap .details > div + div {
    margin-block-start: 2em;
  }

  #v3 .link-detil-btn {
    margin: 20px auto 0;
  }
}

@media screen and (min-width: 769px) {

  /* 壊れるサイドの調整 */
  .container:has(#v3) .side {
    display: block;
  }
  .container:has(#v3) .side .side-category-wrap {
    margin-block-start: 50px
  }

  /* common */
  #v3 .section {
    margin-block: 130px 150px;  
  }
  #v3 #about p {
    line-height: 2;
  }

  /* youtube */
  #v3 .youtube {
    margin-block: 60px;
  }

  /* contents */
  #v3 .contents-table {
    padding-block: 80px;
    margin-block: 60px;
  }
  #v3 .contents-table li {
    margin-block: 1.5em;
  }

  /* difference */
  #v3 #difference .picture {
    display: grid;
    place-content: center;
  }

  /* recommend */
  #v3 #recommend {
    font-size: var(--font-addict-24);
  }

  /* how to use */
  #v3 #howtouse .step-wrap {
    display: grid;
    row-gap: 2em;
  }
  #v3 #howtouse .step-wrap .item {
    display: grid;
    grid-template-columns: 14.0rem minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5em;
  }
  #v3 #howtouse .step-wrap .item .picture {
    margin-inline: auto;
  }
  #v3 #howtouse .step-wrap .item .text {
    font-size: 2.0rem;
  }

  #v3 #howtouse .point-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10.0rem;
    justify-content: space-between;
    margin-block-start: 4.0rem;
  }
  #v3 #howtouse .point-wrap .item {
    display: grid;
    row-gap: 1.2rem;
  }
  #v3 #howtouse .point-wrap .item .picture {
    display: grid;
    place-content: center;
  }
  #v3 #howtouse .point-wrap .item  .text {
    font-size: 2.0rem;
  }


  /* faq */
  #v3 #faq dl > div {
    padding-block: 40px;
  }
  #v3 #faq dl dt,
  #v3 #faq dl dd {
    gap: 32px;
  }

  /* product */
  #v3 #product .itemWrap + .itemWrap {
    margin-block-start: 150px;
  }
  #v3 #product .itemWrap > div {
    display: flex;
    gap: 40px;
  }
  #v3 #product .itemWrap figure {
    width: 412px;
    flex-shrink: 0;
  }
  #v3 #product .itemWrap .description {
    margin-block: 30px;
  }
  #v3 #product .itemWrap .details {
    padding: 30px;
  }

  #v3 .link-detil-btn {
    margin: 50px auto 0;
  }
  #v3 .btnWrap.--itemAll {
    margin-block-start: 5.0rem;
  }

}