html,body {
	overflow-x: hidden;
}
p,
h5,
h4,
h3,
h2,
h1,
a {
  color: #424242;
  font-family: var(--familyInter);
  font-size: var(--fontMax16Min14);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
}

.hf .container {
  margin: 0 auto;
  max-width: 1080px;
}

.hfTitle h2 {
  font-size: 24px;
  margin-top: 8px;
  text-align: center;
}

.hfTitle p {
  font-size: 14px;
  text-align: center;
}

/* Main Visual */

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

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

.hfMainVisual__contents {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 40px 40px;
}

.hfMainVisual__title img {
  max-width: 266px;
}

.hfMainVisual__title h1 {
  color: #545454;
  margin-top: 32px;
  text-align: center;
}

.hfMainVisual__product {
  margin: 32px auto 0;
  max-width: 295px;
}

.hfMainVisual__lead {
  font-size: 24px;
  margin-top: 32px;
  text-align: center;
}

.hfMainVisual__text {
  font-size: var(--fontMax18Min16);
  margin-top: 16px;
  text-align: center;
}

.hfMainVisual__btn {
  align-items: center;
  border: 1px solid #7c7c7c;
  border-radius: 100px;
  display: flex;
  font-size: var(--fontMax16Min14);
  justify-content: center;
  line-height: 1.8;
  margin-top: 32px;
  max-width: 452px;
  min-height: 74px;
  position: relative;
  text-align: center;
  width: 100%;
}

.hfMainVisual__btn:after {
  border: 0.1em solid currentColor;
  border-bottom: 0;
  border-left: 0;
  box-sizing: border-box;
  color: #333;
  content: "";
  display: inline-block;
  height: 0.8em;
  line-height: 1;
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
  vertical-align: middle;
  width: 0.8em;
}

@media screen and (max-width: 1000px) {
  .hfMainVisual__btn .for-sp {
    display: block;
  }
  .hfMainVisual__btn .for-pc {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hfMainVisual {
    grid-template-columns: 1fr;
  }
  .hfMainVisual__image {
	height: 370px;
  }
  .hfMainVisual__image img {
    height: auto;
	left: 50%;
	max-width: 380px;
    position: absolute;
    top: 0;
	transform: translateX(-50%);
    width: 100%;
    z-index: -1;
  }
  .hfMainVisual__contents {
    background: #fff;
  }
  .hfMainVisual__contents {
    padding: 40px;
  }
  .hfMainVisual__title img {
    max-width: 180px;
  }
  .hfMainVisual__title h1,
  .hfMainVisual__lead {
    margin-top: 16px;
  }
  .hfMainVisual__product {
    max-width: 295px;
  }
  .hfMainVisual__lead {
    font-size: 16px;
  }
}

/* Special Section */

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

.special .container {
  padding: 0 24px;
}

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

.specialTitle p {
  color: #fff;
  font-size: var(--fontMax18Min15);
  text-align: center;
}

.specialMovies {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
}

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

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

.specialTextArea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  margin-top: 62px;
}

.specialText {
  color: #fff;
  font-size: var(--fontMax24Min18);
  text-align: center;
}

.specialText.hashtag {
  font-size: var(--fontMax28Min24);
  position: relative;
}

.specialText.hashtag::before {
  content: "#";
  display: inline;
  font-size: clamp(32px, 2.77vw, 40px);
  font-weight: 300;
  margin-right: 8px;
  position: relative;
}

.speicalBanner__container {
  height: 27.15vw;
  min-height: 391px;
  position: relative;
}

.speicalBanner__container img {
  left: 50%;
  min-width: 1440px;
  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 Navigation */

.hfNavigation {
  padding: 80px 0;
}

.hfNavigation__title h2 {
  font-size: var(--fontMax26Min24);
  margin-top: 16px;
  text-align: center;
}

.hfNavigation__title p {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.hfNavi {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}

@media screen and (max-width: 1010px) {
  .hfNavi {
    grid-template-columns: 1fr 1fr;
    margin: 40px auto 0;
    max-width: 850px;
    width: calc(100% - 48px);
  }
}

@media screen and (max-width: 767px) {
  .hfNavigation {
    padding: 40px 24px;
  }
  .hfNavi {
    gap: 8px;
    grid-template-columns: 1fr;
    margin-top: 24px;
    max-width: 550px;
    width: 100%;
  }
}

.hfNavi__link {
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: 16px;
  grid-template-columns: 12px auto 7px;
  height: 48px;
  padding: 0 8px;
}

.hfNavi__arrow {
  border-bottom: 1px solid #545454;
  border-right: 1px solid #545454;
  height: 6px;
  justify-self: center;
  position: relative;
  top: -2px;
  transform: rotate(45deg) skew(-4deg, -4deg);
  width: 6px;
}

.hfNavi__text {
  line-height: 1.4;
}

/* 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;
  margin-top: 32px;
}

.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-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;
  }
	.hfNavigation__title {
		margin-top:40px;
	}
}

/* Variations */

.variations {
  background: #fff;
  box-sizing: border-box;
  padding: 64px 16px;
}

.variationsDisplay {
  display: grid;
  grid-template-columns: 160px 160px 160px;
  justify-content: space-between;
  margin: 24px auto 0;
  max-width: 640px;
  width: 100%;
}

.colorVariation {
  text-align: center;
}

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

.colorVariation__tag {
  border-radius: 100px;
  color: #fff;
  line-height: 1.63;
}

.colorVarition__image {
  margin-top: 11px;
  max-width: 80px;
}

@media screen and (max-width: 767px) {
  .variationsDisplay {
    gap: 9px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .variations {
    padding: 40px 16px;
  }
}

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

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

/* Ranking */

.ranking {
  background: #f7f7f6;
  padding: 100px 24px;
}

.rankingDisplay {
  display: grid;
  grid-template-columns: 420px auto;
  justify-content: space-around;
}

.rankingList {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

.rankingItem {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
}

.rankingItem img {
  max-width: 120px;
}

.rankingItem p {
  line-height: 1.6;
}

.rankingDetails {
  max-width: 555px;
  width: 100%;
}

.rankingTag__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.rankingTag__item {
  align-items: center;
  background: #fff;
  border: 1px solid #424242;
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  height: 26px;
  justify-content: center;
  text-align: center;
}

.rankingTag__item p {
  box-sizing: border-box;
  font-size: var(--fontMax14Min12);
  min-width: 124px;
  padding: 0 9px;
}

.rankingText {
  color: #232323;
  margin-top: 34px;
  text-align: center;
}

.rankingPrices {
  display: flex;
  flex-wrap: wrap;
  gap: 33px;
  justify-content: center;
  margin-top: 44px;
}

.rankingPrices p,
.stickProduct__price p {
  font-size: 14px;
  /* text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px; */
}

.rankingPrices p .small,
.rankingPrices p .price,
.stickProduct__price p .small,
.stickProduct__price p .price {
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
}

.rankingPrices p .small {
  border: 1px solid #ababab;
  margin-right: 8px;
  padding: 2px 8px;
}

.rankingPrices p .price,
.stickProduct__price p .price {
  font-size: var(--fontMax32Min24);
}

.ranking .cartLink {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .ranking {
    padding: 40px 24px;
  }
  .rankingDisplay {
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0 auto;
    max-width: 550px;
  }
  .rankingList {
    gap: 6px;
  }
  .rankingItem p {
    letter-spacing: 0.07em;
  }
  .rankingPrices p .stickProduct__price p {
    font-size: 10px;
  }
  .rankingPrices {
    display: grid;
    gap: 19px;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .rankingPrices p {
    text-align: center;
  }
  .rankingText {
    margin-top: 24px;
  }
  .rankingTag__list {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
  }
  .rankingTag__item {
    width: 100%;
  }
  .rankingTag__item:last-child {
    grid-column: 1 / span 2;
  }
  .ranking .cartLink {
    margin-top: 31px;
  }
}

/* Concerns */

.concerns {
  background: #fff;
  box-sizing: border-box;
  padding: 64px 24px;
}

.concernsTitle {
  color: #232323;
  font-size: var(--fontMax24Min18);
  text-align: center;
}

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

.concernsList {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

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

@media screen and (max-width: 767px) {
  .concerns {
    padding: 40px 24px 0;
  }
  .concernsDisplay {
    gap: 24px;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .concernsImage {
    grid-column: 1;
    grid-row: 2;
    max-width: 350px;
  }
  .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;
  padding: 64px 24px;
}

.solutionsTitle h3,
.solutionsTitle p {
  color: #fff;
  font-size: var(--fontMax28Min24);
  font-weight: 400;
  margin-top: 4px;
  text-align: center;
}

.solutionsTitle p {
  font-size: var(--fontMax20Min18);
}

.solutionsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 24px auto 0;
  max-width: 736px;
  width: 100%;
}

.solutionsItem {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  grid-template-columns: 24px auto;
  padding: 0 10px;
}

.solutionsItem img {
  max-width: 16px;
}

.solutionsItem p {
  color: #fff;
  font-size: var(--fontMax18Min16);
  font-weight: 700;
}

@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;
  }

  .solutionsItem p {
    font-size: 14px;
  }

  .solutionsList {
    display: grid;
    grid-template-columns: 1fr;
    width: fit-content;
  }
  .solutionsItem {
    padding: 5px 0;
  }
}

/* How To Sections */

.howTo {
  background: #fff;
  box-sizing: border-box;
  padding: 80px 24px;
}

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

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

.howToTitle h4 {
  font-size: 18px;
  margin-top: 8px;
}

.howTo__ba {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}

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

.howTo__baImage--single.after {
  margin-left: -15px;
  margin-top: 35%;
}

.howTo__baImage--single.before {
  margin-right: -15px;
}

.howTo__baTextArea {
  align-self: center;
  margin-top: 40px;
}

.howTo__baTextArea p {
  text-align: center;
}

.stylistAdvice {
  align-items: center;
  display: grid;
  grid-template-columns: 45% 50%;
  justify-content: space-between;
  margin-top: 40px;
}

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

.stylistAdvice__image {
  max-width: 199px;
}

.stylistAdvice__bubble {
  align-items: center;
  border: 1px solid #7c7c7c;
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: var(--fontMax21Min14);
  height: 116px;
  justify-content: center;
  line-height: 1.4;
  max-width: 288px;
  padding: 0 16px;
  width: 100%;
}

.stylistAdvice__bubble .orange {
  color: #d56046;
}

.howTo__sideBack {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

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

.sideBack__textArea p {
  font-size: 14px;
  padding: 44px 20px 20px;
  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;
}

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

  .stylistAdvice__bubble {
    height: 80px;
  }
}

/* Reason */

.reason {
  background: #fff;
  box-sizing: border-box;
  padding: 80px 16px;
}

.reasonList {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}

.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;
}

.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;
  }
  .reasonList .howToTitle h4 {
    font-size: 16px;
  }
  .reasonList .howToTitle {
    padding: 16px 0;
  }
}

/* Point */

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

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

.pointVisual {
  margin: 0 -16px;
}

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

  }
	.pointVisual img {
		position:relative;
		transform:scale(1.3);
	}
}

/* Stick */

.stick {
  background: #fff;
  padding: 80px 16px;
}

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

.stickDisplay.women {
  position: relative;
}

.stickDisplayLinkWrap {
  max-width: 327px;
  position: absolute;
  right: 12%;
  top: 55%;
  width: 100%;
}

.stickDisplay.women .stickDisplayLink {
  align-items: center;
  background: #fff;
  border-radius: 100px;
  color: #424242;
  display: flex;
  font-size: var(--fontMax16Min14);
  height: 50px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.stickDisplay.women .stickDisplayLink:after {
  border: 0.1em solid currentColor;
  border-bottom: 0;
  border-left: 0;
  box-sizing: border-box;
  color: #333;
  content: "";
  display: inline-block;
  height: 0.5em;
  line-height: 1;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  vertical-align: middle;
  width: 0.5em;
}

/* HF FAQ */

.hf__faq {
  background: #f7f7f6;
  box-sizing: border-box;
  padding: 80px 16px;
}

.hf__faqLead {
  font-size: var(--fontMax18Min16);
  margin-top: 16px;
  text-align: center;
}

.hf__faqList {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}

.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);
  padding-bottom: 4px;
}

.hf__faqQuestion span {
  font-size: var(--fontMax26Min24);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-right: 8px;
}

/* Stick Ranking */

.stickRanking {
  box-sizing: border-box;
  padding: 80px 16px;
}

.stickRankingDisplay {
  display: grid;
  gap: 40px;
  grid-template-columns: auto 552px;
  margin: 0 auto;
  width: fit-content;
}

.stickRankingDisplay .rankingList {
  margin: 0 auto;
  width: fit-content;
}

.stickRankingDisplay .rankingDisplay {
  gap: 40px;
  grid-template-columns: 1fr;
}

.stickRankingDisplay .rankingText {
  margin-top: 16px;
}

.stickRanking__image {
  max-width: 300px;
}

.stickProducts {
  display: grid;
  gap: 24px;
  grid-template-columns: auto auto auto;
  justify-content: center;
  margin-top: 40px;
}

.stickProduct__single {
  text-align: center;
  width: fit-content;
}

.stickProduct__imageArea {
  align-content: flex-end;
  height: 100%;
  max-height: 140px;
}

.smallProd img {
  max-height: 105px;
}

.stickProduct__imageArea img {
  height: 100%;
  width: auto;
}

.stickProduct__price {
  margin-top: 16px;
}

.stickProduct__price .small {
  border: 1px solid #ababab;
  margin-right: 8px;
  padding: 2px 8px;
}

.stickRanking .cartLink {
  margin-top: 44px;
}

@media screen and (max-width: 850px) {
  .stickRanking {
    padding: 40px 16px;
  }
  .stickRankingDisplay {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .stickRankingDisplay .rankingTag__list {
    margin-top: 0;
  }
  .stickRankingDisplay .rankingDisplay {
    gap: 24px;
  }
  .stickProducts {
    grid-template-columns: 1fr;
    justify-self: center;
    margin-top: 24px;
  }

  .stickProduct__single {
    width: auto;
  }
  /* .stickProducts .stickProduct__single:first-child {
    grid-column: 1 / span 2;
    grid-row: 1;
    justify-self: center;
  }
  .stickProducts .stickProduct__single:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .stickProducts .stickProduct__single:last-child {
    grid-column: 2;
    grid-row: 2;
  } */
  .stickProducts .stickProduct__single:nth-child(2) .stickProduct__imageArea,
  .stickProducts .stickProduct__single:last-child .stickProduct__imageArea {
    height: 100px;
  }
  .stickProduct__price p,
  .stickProduct__price p .small {
    font-size: 10px;
  }
}