.hfSection {
  padding: clamp(3.75rem, 7.4074vw, 5rem) 1.25rem;
}

.hfSection .container,
.point .container {
  display: flex;
  flex-direction: column;
}

.detailedMovie .container {
  gap: 1rem;
}

.concerns .container,
.variations .container,
.solutions .container,
.hf__faq .container {
  gap: 1.5rem;
}

.foundation .container {
  gap: 2rem;
}

.hfNav .container,
.howTo .container,
.reason .container,
.point .container {
  gap: 2.5rem;
}

.hfTitle {
  font-size: var(--fontMax26Min22);
  letter-spacing: 0.05em;
  text-align: center;
}

.solutions .hfTitle {
  color: #fff;
  line-height: 2.5;
}

/* Main Visual */

.hfMainVisual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 72px;
  position: relative;
}

.hfMainVisual__image {
  max-height: calc(100dvh - 72px);
  overflow: hidden;
}

.hfMainVisual__image img {
  height: auto;
  object-fit: cover;
  width: 100%;
}

.hfMainVisual__contents {
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 2.5rem;
}

.hfMainVisual__title img {
  max-width: 16.625rem;
}

.hfMainVisual__title h1 {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.hfMainVisual__product {
  margin: 1rem auto 0;
  max-width: 18.125rem;
}

.hfMainVisual__lead {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  text-align: center;
}

.hfMainVisual__leadText {
  color: #545454;
  font-size: var(--fontMax20Min18);
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1100px) {
  .hfMainVisual__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .hfMainVisual {
    grid-template-columns: 1fr;
  }
  .hfMainVisual__image {
    height: 64vw;
  }
  .hfMainVisual__image img {
    height: auto;
    position: absolute;
    top: -26vw;
    width: 100%;
    z-index: -1;
  }
  .hfMainVisual__title img {
    max-width: 11.25rem;
  }
  .hfMainVisual__lead {
    font-size: var(--fontMax18Min16);
  }
}

/* Special Section */

.special {
  background: #d79e86;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 4rem;
}

.special .container {
  padding: 0 1.25rem;
}

.specialTitle {
  color: #fff;
  font-size: var(--fontMax36Min32);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.specialMovies {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.5rem;
}

.specialMovieSingle {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.specialMovieSingle iframe {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.specialText {
  color: #fff;
  font-size: var(--fontMax24Min20);
  margin-top: 3.875rem;
  text-align: center;
}

.speicalBanner__container {
  height: 27.15vw;
  min-height: 24.4375rem;
  position: relative;
}

.speicalBanner__container img {
  left: 50%;
  min-width: 90rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
}

@media screen and (max-width: 767px) {
  .special {
    padding-top: 40px;
  }
  .specialMovies {
    grid-template-columns: 1fr;
  }
  .specialTextArea {
    margin: 40px auto 0;
    max-width: 500px;
  }
  .specialText:not(.hashtag) {
    text-align: start;
  }
  .speicalBanner__container {
    min-height: 265px;
  }
  .speicalBanner__container img {
    min-width: 980px;
  }
  .specialText.hashtag {
    text-align: end;
  }
}

/* HF-Nav */

.hfNav__nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.hfNav__link {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.5rem 1fr;
  padding: 0 1rem;
}

.hfNav__number {
  display: block;
  font-size: var(--fontMax26Min22);
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.hfNav__text {
  letter-spacing: 0.05em;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .hfNav__nav {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 550px) {
  .hfNav__nav {
    grid-template-columns: 1fr;
  }
}


/* Foundation */

.foundation {
  background: url(../../images/hf/img-foundation_bg.png) no-repeat center / cover;
  box-sizing: border-box;
  padding: 80px 24px;
}

.foundationDisplay {
  align-items: center;
  display: grid;
  grid-template-columns: 58.3% 38%;
  grid-template-rows: auto;
  justify-content: space-between;
}

.foundationImageArea {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
}

.foundation__content img,
.howTo__baImage--single img {
  border: 8px solid #fff;
  box-sizing: border-box;
}

.foundation__content.after img,
.howTo__baImage--single.after img {
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}

.foundation__content.after {
  margin-left: -10px;
  margin-top: 43%;
}

.foundation__content.before img,
.howTo__baImage--single.before img {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
}

.foundation__content.before {
  margin-right: -10px;
}

.foundation__content p,
.howTo__baImage--single p {
  font-family: var(--familyInter);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 16px;
  text-align: center;
}

.topText {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  top: -50px;
}

.bottomText {
  bottom: -50px;
  grid-column: 2;
  grid-row: 1;
  position: relative;
}

@media screen and (max-width: 767px) {
  .foundation {
    padding: 40px 16px;
  }
  .foundationDisplay {
    gap: 16px;
    grid-template-columns: 1fr;
    margin: 16px auto 0;
    max-width: 550px;
  }
  .topText {
    grid-column: 1;
    grid-row: 1;
    top: 0;
  }
  .bottomText {
    bottom: 0;
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }
  .foundationImageArea {
    grid-column: 1;
    grid-row: 2;
  }
  .foundationText .for-pc {
    display: none;
  }
}

.variationsDisplay {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  margin: 0 auto;
  width: fit-content;
}

.colorVariation {
  text-align: center;
}

.colorVariation__label {
  color: #232323;
  font-size: var(--fontMax16Min14);
}

.colorVariation__tag {
  border-radius: 100px;
  color: #fff;
  line-height: 1.63;
  margin: 0 auto;
  max-width: 10rem;
}

.colorVarition__image {
  margin-top: 0.6875rem;
  max-width: 5rem;
}

@media screen and (max-width: 767px) {
  .variationsDisplay {
    gap: 0.5625rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 550px) {
  .colorVariation__tag {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 374px) {
  .colorVariation__label {
    font-size: 0.75rem;
  }
}

/* Concerns */

.concernsDisplay {
  display: grid;
  grid-template-columns: 30% 68%;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.concernsList {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}

.concernsItem p {
  align-items: center;
  border: 1px solid #7c7c7c;
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  line-height: 1.4;
  min-height: 60px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .concernsDisplay {
    gap: 1.5rem;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .concernsImage {
    grid-column: 1;
    grid-row: 2;
    max-width: 21.875rem;
  }
  .concernsList {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
  }
}

/* Solutions */

.solutions {
  background-image: linear-gradient(to bottom, rgba(215, 158, 134, 0.9), rgba(215, 158, 134, 0.9)), url(../../images/hf/img-solution_bg_pc.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

.solutionsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.solutionsItem {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  grid-template-columns: 1.5rem 1fr;
  padding: 0 10px;
}

.solutionsItem img {
  max-width: 1.5rem;
}

.solutionsItem p {
  color: #fff;
  font-size: var(--fontMax16Min14);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 767px) {
  .solutions {
    background-image: linear-gradient(to bottom, rgba(215, 158, 134, 0.9), rgba(215, 158, 134, 0.9)), url(../../images/hf/img-solution_bg_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .solutionsList {
    display: grid;
    grid-template-columns: 1fr;
    width: fit-content;
  }

  .solutionsItem {
    padding: 0.3125rem 0;
  }
}

/* How To Sections */


.howToTitle {
  border-bottom: 1px solid #ababab;
  border-top: 1px solid #ababab;
  box-sizing: border-box;
  padding: 16px;
  text-align: center;
}

.howToTitle--noBorder {
  border: none;
}

.howToTitle__lead {
  color: #000;
  font-size: var(--fontMax14Min12);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
}

.howToTitle__title {
  font-size: var(--fontMax18Min16);
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.detailedMovie .howToTitle__title {
  font-size: var(--fontMax26Min22);
}

.howTo__baImage--single p {
  font-size: var(--fontMax22Min18);
}

.howTo__ba {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr 1fr;
}

.howTo__baImages {
  display: grid;
  grid-template-columns: 40% 60%;
}

.howTo__baImage--single.after {
  margin-left: -0.9375rem;
  margin-top: 35%;
}

.howTo__baImage--single.before {
  margin-right: -0.9375rem;
}

.howTo__baTextArea {
  align-self: center;
  margin-top: 2.5rem;
}

.howTo__baTextArea p,
.stylistAdvice__textArea p {
  letter-spacing: 0.05em;
}

.stylistAdvice {
  align-items: center;
  display: grid;
  grid-template-columns: 40% 56%;
  justify-content: space-between;
}

.stylistAdvice__imageArea {
  align-items: center;
  display: flex;
}

.stylistAdvice__image {
  max-width: 199px;
}

.stylistAdvice__bubble {
  border: 1px solid #7c7c7c;
  border-radius: 100px;
  box-sizing: border-box;
  display: block;
  font-size: var(--fontMax20Min18);
  height: fit-content;
  line-height: 1.4;
  max-width: 18rem;
  padding: 1.75rem 2.5rem;
  text-align: center;
  width: fit-content;
}

.stylistAdvice__bubble .orange {
  color: #d56046;
}

.howTo__sideBack {
  display: grid;
  gap: 16px;
}

.sideBack__textArea {
  align-self: center;
  left: 50%;
  max-width: 33.25rem;
  position: relative;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}

.sideBack__textArea p {
  font-size: 14px;
  padding: 2.75rem 1.25rem 1.25rem;
  text-align: center;
}

.sideBack__bubble {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.sideBack__gallery {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.howToMovie {
  margin-top: 16px;
}

.howtoMovie__caption {
  margin-top: 16px;
  text-align: center;
}

.detailedMovie__container iframe {
  aspect-ratio: 1080 / 607;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .howTo__ba,
  .stylistAdvice {
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 34.375rem;
  }
  .stylistAdvice {
    gap: 20px;
  }
  .stylistAdvice__imageArea {
    justify-content: center;
  }
  .stylistAdvice__textArea p {
    text-align: center;
  }
  .howTo__sideBack {
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 34.375rem;
  }
  .inverted .sideBack__gallery {
    grid-column: 1;
    grid-row: 2;
  }
  .inverted .sideBack__textArea {
    grid-column: 1;
    grid-row: 1;
  }
  .howTo__baTextArea {
    margin-top: 0;
  }
  .stylistAdvice__imageArea {
    gap: 1rem;
  }
  .stylistAdvice__image {
    max-width: 9.375rem;
  }
}

@media screen and (max-width: 550px) {
  .stylistAdvice__bubble {
    padding: 0.75rem 1.5rem;
  }
  .stylistAdvice__textArea br,
  .sideBack__textArea br {
    display: none;
  }
}


/* Reason */

.reasonList {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.reasonTitle__group {
  text-align: center;
}

.reasonTitle__lead {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.reasonTitle__title {
  font-size: var(--fontMax24Min20);
  margin-top: 1.5rem;
}

.reason .howToTitle,
.point .howToTitle {
  padding: 0.5rem 1rem;
}

.reason .howToTitle__title {
  margin: 0;
}

.reasonList .howToTitle h4 {
  margin-top: 0;
}

.reasonItem {
  display: grid;
  grid-template-columns: 59.2% 37.03%;
  justify-content: space-between;
}

.reasonItem.inverted {
  grid-template-columns: 37.03% 59.2%;
}

.reasonItem__textArea {
  display: flex;
  flex-direction: column;
  gap: 40px;
  grid-template-columns: 1fr;
}

.point .reasonItem__textArea {
  gap: 1rem;
}

.reasonItem__text {
  font-size: 0.875rem;
  line-height: 2.5;
}

.reasonItem__text--leadingWide {
  line-height: 2.5;
}

@media screen and (max-width: 767px) {
  .reason {
    padding: 40px 16px;
  }
  .reasonList {
    margin-top: 16px;
  }
  .reasonItem,
  .reasonItem.inverted {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .reasonItem.inverted img {
    grid-column: 1;
    grid-row: 2;
  }
  .reasonItem.inverted .reasonItem__textArea {
    grid-column: 1;
    grid-row: 1;
  }
  .reasonItem__textArea {
    gap: 16px;
  }
  .reasonItem {
    margin: 0 auto;
    max-width: 550px;
  }
}

/* Point */

.point {
  background: #ebe6e2;
  overflow: hidden;
  padding: 0 16px 80px;
}

.point .container {
  padding-top: 80px;
}

.pointVisual {
  margin: 0 -16px;
}

@media screen and (max-width: 767px) {
  .point {
    padding-bottom: 40px;
  }
  .point .container {
    padding-top: 0;
  }
  .pointVisual {
    left: 53%;
    position: relative;
    transform: translateX(-50%);
    width: 130vw;
  }
}

/* HF FAQ */

.hf__faq {
  background: #f7f7f6;
  box-sizing: border-box;
}

.hf__faqList {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.hf__faqItem {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.hf__faqQuestion {
  align-items: center;
  border-bottom: 1px solid #424242;
  display: flex;
  font-size: var(--fontMax18Min16);
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}

.hf__faqQuestion span {
  font-size: var(--fontMax26Min22);
  line-height: 1;
  margin-right: 8px;
}

.hf__faqAnswer {
  letter-spacing: 0.05em;
}

.return .cta__text {
  display: flex;
  position: relative;
}

.return .cta--secondary .cta__text::before {
  background: url(../../images/common/icon-cart_white.svg) no-repeat center / cover;
  content: "";
  display: inline-block;
  height: 1.5rem;
  margin-right: 0.5rem;
  width: 1.5rem;
}