html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--familyNotoSans);
}

.navbarList__item:nth-child(1):after {
  opacity: 1;
}

.navdrawer__item:nth-child(1)::after {
  opacity: 1;
}
/* =================
topMv 
=================*/
.topMv {
  height: 49rem;
  position: relative;
}

.topMv::before {
  background-image: url(../imgs/top/img-mv-milk.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 32rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 79rem;
  z-index: -1;
}

.topMv::after {
  background-image: url(../imgs/top/img-mv_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 111%;
  bottom: 0;
  content: "";
  height: 22rem;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -2;
}

.topMv__package {
  bottom: 3.5rem;
  left: 1.5rem;
  position: absolute;
  width: 22rem;
}

.topMv__answer {
  bottom: 0;
  left: 19.5rem;
  position: absolute;
  width: 36rem;
}

.topMv__title {
  position: absolute;
  right: clamp(
  1.75rem,
  calc(1.75rem + (108 - 28) * ((100vw - 1440px) / (1920 - 1440))),
  6.75rem
  );
  top: 4.5rem;
  width: 28.7rem;
}

.topMv__note {
  bottom: -2rem;
  color: #666;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.83;
  margin-left: auto;
  position: absolute;
  right: 0.2rem;
  width: fit-content;
}

@media screen and (max-width: 1440px) {
  .topMv {
    height: 54.4vw;
  }

  .topMv::before {
    height: 35.6vw;
    width: 87.8vw;
  }

  .topMv::after {
    height: 24.4vw;
    width: 100%;
  }

  .topMv__package {
    bottom: 3.9vw;
    left: 1.7vw;
    width: 24.4vw;
  }

  .topMv__answer {
    left: 21.7vw;
    width: 40vw;
  }

  .topMv__title {
    right: 1.9vw;
    top: 5vw;
    width: 31.9vw;
  }

  .topMv__note {
    bottom: -2.22vw;
    font-size: 0.83vw;
    right: 0.22vw;
  }
}

@media screen and (max-width: 767px) {
  .topMv {
    height: 61.5rem;
  }

  .topMv::before {
    background-image: url(../imgs/top/img-mv-milk_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 36.5rem;
    width: 42rem;
  }

  .topMv::after {
    background-position: 66%;
    height: 31rem;
    width: 100%;
  }


  .topMv__title {
    right: -2.5rem;
    top: 4rem;
    width: 28.5rem;
  }

  .topMv__answer {
    left: 2.8rem;
    width: 35.5rem;
  }

  .topMv__package {
    bottom: 16rem;
    left: -2rem;
    width: 21.5rem;
  }

  .topMv__note {
    bottom: -5.2rem;
    font-size: 1.25rem;
    left: 0.5rem;
    line-height: 1.2;
    right: auto;
  }
}

/* =================
about 
=================*/
.about {
  padding-block: 7.5rem 8.6875rem;
}

.about__wrap {
  background-image: url(../imgs/top/img-about-milk_bg.png);
  background-position: 47.8% 0;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 2.5rem;
  overflow: auto;
  padding: 6.7rem  8.5% 2.5rem 8.48%;
  position: relative;
}

.about__wrap::after {
  background-image: url(../imgs/top/img-about-grassland_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.about__title {
  color: var(--colorNavy);
  font-family: var(--familyZenOldMincho);
  font-size: 3.125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.about__title span {
  font-size: 2.25rem;
}

.about__text {
  color: var(--colorNavy);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  margin-top: 2.1rem;
  text-align: center;
}

.flavorEval__column {
  display: grid;
  gap: 0.53rem;
  grid-template-columns: 33.5% auto 32.5%;
  justify-content: center;
  margin-top: 3.4rem;
  padding-right: 2.5rem;
}

.flavorEval__titleWrap {
  align-items: center;
  background: var(--colorLightBlue);
  display: flex;
  height: 4.4375rem;
  justify-content: center;
  margin-top: 25rem;
  position: relative;
  width: 100%;
}

.flavorEval__title {
  color: var(--colorNavy);
  font-size: 2rem;
  font-weight: 500;
  line-height: 0.875;
  padding-right: 2rem;
}

.flavorEval__answer {
  bottom: -1.7rem;
  left: -2.5rem;
  position: absolute;
  width: 17.6875rem;
}

.flavorEval__answerText {
  color: var(--colorNavy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.43;
}

.flavorEval__graph {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 15.75rem;
  justify-content: center;
  margin-inline: auto;
  width: 15.75rem;
}

.flavorEval__content {
  width: 100%;
}

.flavorEval__content:nth-child(1) {
  padding-left: 0.5rem;
}

.flavorEval__content--left .flavorEval__graph {
  background-image: url(../imgs/top/img-about-graph_01.png);
  margin-left: 2rem;
}

.flavorEval__content--right .flavorEval__graph {
  background-image: url(../imgs/top/img-about-graph_02.png);
}

.flavorEval__graphText {
  color: var(--colorWhite);
  font-family: var(--familyZenOldMincho);
  font-size: 2.025rem;
  font-weight: 900;
  margin-top: 1rem;
  text-align: center;
  line-height: 1.2;
}

.flavorEval__graphNum {
  color: var(--colorYellow);
  font-family: var(--familyGothicA1);
  font-size: 6.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.flavorEval__graphNum .percent {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -1rem;
}

.flavorEval__commentInner {
  display: contents;
}

.flavorEval__commentWrap {
  border-block: 2px dashed var(--colorNavy);
  margin-top: 1.8rem;
  padding: 1rem 0 0.6rem 0.203125rem;
}

.flavorEval__content--right .flavorEval__commentWrap {
  padding-left: 2rem;
}

.flavorEval__comment {
  color: var(--colorNavy);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.8;
}

.flavorEval__commentHuman {
  align-items: center;
  color: var(--colorNavy);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 0.8rem;
  height: 1.875rem;
  justify-content: flex-end;
  margin-top: 0.6em;
  padding-right: 0.2rem;
}

.flavorEval__commentHuman::before {
  background-image: url(../imgs/top/icon-human.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1.875rem;
  width: 1.6875rem;
}

.flavorEval__package {
  margin-top: -1.5rem;
  padding-left: 0.5rem;
  width: 100%;
}

.flavorEval__source {
  color: var(--colorNavy);
  font-size: 0.8125rem;
  margin-top: 1.4rem;
  text-align: end;
}

@media screen and (max-width: 1180px) {
  .about {
    padding-block: 10.17vw 11.78vw;
  }

  .about__wrap {
    border-radius: 3.39vw;
    padding: 9.08vw 8.5% 3.39vw 8.48%;
  }

  .about__title {
    font-size: 4.24vw;
  }

  .about__title span {
    font-size: 3.05vw;
  }

  .about__text {
    font-size: 1.5254vw;
    margin-top: 2.85vw;
  }

  .flavorEval__column {
    gap: 0.83vw;
    margin-top: 4.61vw;
    padding-right: 3.39vw;
  }

  .flavorEval__titleWrap {
    height: 6.02vw;
    margin-top: 33.90vw;
  }

  .flavorEval__title {
    font-size: 2.71vw;
    line-height: 0.875;
    padding-right: 2.71vw;
  }

  .flavorEval__answer {
    bottom: -2.31vw;
    left: -3.39vw;
    width: 23.98vw;
  }

  .flavorEval__answerText {
    font-size: 2.03vw;
    line-height: 1.43;
  }

  .flavorEval__graph {
    gap: 1.36vw;
    height: 21.36vw;
    width: 21.36vw;
  }

  .flavorEval__content--left .flavorEval__graph {
    margin-left: 2.71vw;
  }

  .flavorEval__graphText {
    font-size: 2.75vw;
    margin-top: 1.36vw;
  }

  .flavorEval__graphNum {
    font-size: 8.47vw;
    letter-spacing: -0.03em;
  }

  .flavorEval__graphNum .percent {
    font-size: 3.39vw;
  }

  .flavorEval__commentWrap {
    margin-top: 2.44vw;
    padding: 1.36vw 0 1.09vw 1.09vw;
  }

  .flavorEval__content--right .flavorEval__commentWrap {
    padding-left: 2.71vw;
  }

  .flavorEval__comment {
    font-size: 1.44vw;
    line-height: 1.8;
  }

  .flavorEval__commentHuman {
    font-size: 1.27vw;
    gap: 1.08vw;
    height: 2.54vw;
    margin-top: 0.6em;
    padding-right: 0.27vw;
  }

  .flavorEval__commentHuman::before {
    height: 2.54vw;
    width: 2.29vw;
  }

  .flavorEval__package {
    margin-top: -2.03vw;
    padding-left: 0.68vw;
  }

  .flavorEval__source {
    font-size: 1.10vw;
    margin-top: 1.90vw;
  }
}

@media screen and (max-width: 767px) {
  .about {
    padding-block: 12.5rem 9.5rem;
  }

  .about__title {
    font-size: 3.75rem;
    line-height: 1.5;
  }

  .about__title span {
    font-size: 2.75rem;
  }

  .about__wrap {
    background: url(../imgs/top/img-about-milk_bg_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2.5rem;
    margin-top: 6rem;
    overflow: clip;
    overflow: clip;
    padding: 4rem 0;
  }

  .about__wrap::after {
    content: none;
  }

  .about__text {
    font-size: 1.75rem;
    line-height: 2.142;
  }

  .flavorEval__titleWrap {
    height: 4.5rem;
    margin-inline: auto;
    margin-top: 25rem;
    width: 93%;
  }

  .flavorEval__title {
    font-size: 2.125rem;
    padding-right: 0;
  }

  .flavorEval__top {
    display: grid;
    gap: 0rem;
    grid-template-columns: 21.5rem auto;
    padding: 0.5rem 1rem 0 4rem;
  }

  .flavorEval__answer {
    bottom: 0;
    left: 0;
    padding-top: 4rem;
    position: relative;
    width: 100%;
  }

  .flavorEval__package {
    margin-left: -1rem;
    margin-top: 0;
    padding-left: 0;
  }

  .flavorEval__column {
    gap: 2.8rem;
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-right: 0;
  }

  .flavorEval__content {
    display: grid;
    gap: 1rem;
    grid-template-columns: 20rem auto;
    padding-inline: 1rem 3rem;
    position: relative;
    width: auto;
  }

  .flavorEval__graph {
    height: 40.36vw;
    margin-inline: 0;
    width: 40.36vw;
  }

  .flavorEval__content--left .flavorEval__graph {
    margin-left: 0;
  }

  .flavorEval__graphText {
    font-size: 2.425rem;
    line-height: 1.23;
  }

  .flavorEval__graphNum {
    font-size: 7.5rem;
  }

  .flavorEval__graphNum .percent {
    font-size: 3rem;
  }

  .flavorEval__commentInner {
    display: block;
  }

  .flavorEval__commentWrap {
    height: fit-content;
    margin-top: 2.2rem;
    padding: 1rem 0.5rem 1rem 1rem;
  }

  .flavorEval__comment {
    font-size: 1.5rem;
    line-height: 1.7;
  }

  .flavorEval__content--right .flavorEval__commentWrap {
    padding-inline: 0.3rem 0;
  }

  .flavorEval__commentHuman {
    font-size: 1.375rem;
    gap: 0.8rem;
    height: 2.1875rem;
  }

  .flavorEval__content--right .flavorEval__commentHuman {
    margin-top: 1.5rem;
    padding-right: 0.8rem;
  }

  .flavorEval__commentHuman::before {
    height: 2.1875rem;
    width: 1.9375rem;
  }

  .flavorEval__source {
    bottom: -0.8rem;
    font-size: 1.25rem;
    position: absolute;
    right: 3rem;
  }
}

/* =================
secret 
=================*/
.secret {
  background: var(--colorSkin);
  padding-block: 5.3rem 5rem;
}

.secret__head {
  position: relative;
  width: 100%;
}

.secret__headText {
  background: var(--colorSkin);
  margin-inline: auto;
  max-width: 15.75rem;
  padding-inline: 3rem;
  position: relative;
  position: relative;
  width: 100%;
  z-index: 2;
}

.secret__head::after {
  background: var(--colorNavy);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
}

.secret__headText::before {
  background-image: url(../imgs/top/img-secret-book.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 5.875rem;
  left: -7.5rem;
  position: absolute;
  top: 28%;
  transform: translateY(-50%);
  width: 8.675rem;
  z-index: 2;
}

.secretContent {
  border-bottom: 3px solid var(--colorNavy);
  display: grid;
  gap: 9.5%;
  grid-template-columns: 28.5% auto;
  padding-block: 1.6rem 2.3rem;
}

.secret__imgWrap {
  position: relative;
}

.secret__img--small {
  bottom: 0;
  position: absolute;
  right: -4.5rem;
  width: 8.3125rem;
}

.secret__textarea {
  padding-top: 2rem;
}

.secret__title {
  color: var(--colorNavy);
  font-family: var(--familyZenOldMincho);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
}

.secret__text {
  color: var(--colorNavy);
  font-family: var(--familyNotoSans);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.83;
  margin-top: 2.5rem;
  padding-left: 0.5rem;
}

.secret .commonLink {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  max-width: 22.75rem;
  padding-block: 1.8rem 2rem;
}

.secret .commonLink::after {
  height: 0.75rem;
  right: 1.9375rem;
  width: 0.9375rem;
}

@media screen and (max-width: 1350px) {
  .secret {
    padding-block: 6.28vw 5.93vw;
  }

  .secret__headText {
    max-width: 18.67vw;
    padding-inline: 3.56vw;
  }

  .secret__headText::before {
    height: 6.96vw;
    left: -8.89vw;
    width: 10.28vw;
  }

  .secretContent {
    padding-block: 1.90vw 2.73vw;
  }

  .secret__img--small {
    right: -5.33vw;
    width: 9.85vw;
  }

  .secret__textarea {
    padding-top: 2.37vw;
  }

  .secret__title {
    font-size: 3.26vw;
  }

  .secret__text {
    font-size: 1.78vw;
    margin-top: 2.96vw;
    padding-left: 0.59vw;
  }

  .secret .commonLink {
    font-size: 1.63vw;
    margin-top: 2.96vw;
    max-width: 26.96vw;
    padding-block: 2.13vw 2.37vw;
  }

  .secret .commonLink::after {
    height: 0.889vw;
    right: 2.296vw;
    width: 1.111vw;
  }
}

@media screen and (max-width: 767px) {
  .secret {
    padding-block: 7.5rem;
  }

  .secret__headText {
    max-width: 20.5rem;
    padding-inline: 2rem;
  }

  .secret__headText::before {
    height: 9rem;
    left: 50%;
    top: -13rem;
    transform: translateX(-50%);
    width: 13rem;
  }

  .secretContent {
    gap: 1rem;
    grid-template-columns: 1fr;
    padding-block: 4rem 5.5rem;
  }

  .secret__imgWrap {
    margin-top: 3.3rem;
  }

  .secret__img {
    margin-left: 4.5rem;
    max-width: 31.5rem;
  }

  .secret__img--small {
    right: 0;
    width: 11.5rem;
  }

  .secret__title {
    font-size: 3.375rem;
    text-align: center;
  }

  .secret__text {
    font-size: 1.75rem;
    line-height: 1.92;
    margin-top: 2.5rem;
    padding-left: 1rem;
  }

  .secret .commonLink {
    font-size: 2rem;
    margin-inline: auto;
    margin-top: 3.5rem;
    max-width: 35rem;
    padding-block: 2.8rem 3rem;
  }

  .secret .commonLink::after {
    height: 1.1875rem;
    right: 3.0625rem;
    width: 1.48rem;
  }
}

/* =================
recipe 
=================*/
.recipe {
  padding-block: 18.5rem 7.5rem;
}

.recipe__wrap {
  position: relative;
}

.recipe__title {
  left: 50%;
  max-width: 42rem;
  position: absolute;
  top: -15rem;
  transform: translateX(-50%);
  z-index: 2;
}

.recipe__swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.recipe__swiper img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.recipe .commonLink {
  border: 2px solid var(--colorWhite);
  bottom: 1.5rem;
  font-size: 1.375rem;
  left: 50%;
  max-width: 22.5rem;
  padding-block: 1.8rem;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
}

.recipe .commonLink::after {
  height: 0.75rem;
  right: 1.9375rem;
  width: 0.9375rem;
}

.recipe__banner {
  display: block;
  margin: 3.5rem auto 0;
  max-width: 32.875rem;
  transition: 0.3s;
}

@media (hover: hover) {
  .recipe .commonLink:hover {
    border: 2px solid #58acd3;
  }

  .recipe__banner:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 1440px) {
  .recipe {
    padding-block: 20.56vw 8.33vw;
  }

  .recipe__title {
    max-width: 46.67vw;
    top: -16.67vw;
  }


  .recipe__banner {
    margin: 3.89vw auto 0;
    max-width: 36.53vw;
  }

  .recipe .commonLink {
    bottom: 1.67vw;
    font-size: 1.53vw;
    max-width: 25vw;
    padding-block: 2vw;
  }

  .recipe .commonLink::after {
    height: 0.833vw;
    right: 2.153vw;
    width: 1.042vw;
  }
}

@media screen and (max-width: 767px) {
  .recipe {
    padding-block: 26.5rem 8.5rem;
  }

  .recipe__title {
    max-width: unset;
    top: -21.5rem;
    width: 41.5rem;
  }

  .recipe .commonLink {
    bottom: 0;
    font-size: 2rem;
    margin-top: 3rem;
    max-width: 36rem;
    padding-block: 3.4rem;
    position: relative;
  }

  .recipe .commonLink::after {
    height: 1.1875rem;
    right: 3.0625rem;
    width: 1.48rem;
  }

  .recipe__banner {
    margin: 4rem auto 0;
    max-width: 90%;
  }
}

/* =================
lineup 
=================*/
.lineup {
  background: rgba(246, 240, 234, 0.5);
  padding-block: 4.5rem 18.5rem;
  position: relative;
}

.lineup::after {
  background-image: url(../imgs/top/img-lineup_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  height: 41rem;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.lineup__titleWrap {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.lineup__titleImg {
  width: 6.25rem;
}

.lineup__title {
  color: var(--colorNavy);
  font-family: var(--familyZenOldMincho);
  font-size: 2.75rem;
  font-weight: 700;
  margin-top: 0.3rem;
}

.lineup__title--ra {
  letter-spacing: -0.12em;
}

.lineup__title--i {
  letter-spacing: -0.07em;
}

.lineup__title--na {
  letter-spacing: -0.05em;
}

.lineup__title--tsu {
  letter-spacing: -0.04em;
}

.lineup__column {
  background: var(--colorWhite);
  border-radius: 2.5rem;
  display: grid;
  gap: 7rem;
  grid-template-columns: repeat(3,1fr);
  margin-top: -2.5rem;
  padding: 6.3rem 5rem 4.5rem;
  position: relative;
  z-index: 2;
}

.lineup__item {
  display: grid;
  grid-template-rows: 4rem 23rem auto;
}

.lineup__banner {
  display: block;
  margin: 3.5rem auto 0;
  max-width: 33rem;
  position: relative;
  transition: 0.3s;
  width: 100%;
  z-index: 3;
}

.lineup__logo {
  align-items: center;
  display: flex;
  margin-inline: auto;
  max-width: 16rem;
  width: 100%;
}

.lineup__item:nth-child(2) .lineup__logo {
  max-width: 10rem;
}

.lineup__item:nth-child(3) .lineup__logo {
  max-width: 20rem;
}

.lineup__package {
  width: 100%;
}

.lineup__item:nth-child(1) .lineup__package {
  margin-left: 1rem;
  max-width: 16rem;
}

.lineup__item:nth-child(2) .lineup__package {
  margin-inline: auto;
  margin-top: 1rem;
  max-width: 16.5rem;
}

.lineup__item:nth-child(3) .lineup__package {
  margin-inline: auto;
  max-width: 8.2rem;
}

.lineup__volume {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}

.lineup__text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  margin-top: 1.5rem;
  min-height: 10.3rem;
}

.lineup__text .note {
  font-size: 0.875rem;
  line-height: 2;
}

.lineup__linkWrap {
  display: grid;
  gap: 1.5rem;
}

@media (hover: hover) {
  .lineup__banner:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 1350px) {
  .lineup {
    padding-block: 5.33vw 21.93vw;
  }

  .lineup::after {
    height: 48.59vw;
  }

  .lineup__titleImg {
    width: 7.41vw;
  }

  .lineup__title {
    font-size: 3.26vw;
    margin-top: 0.36vw;
  }

  .lineup__column {
    border-radius: 2.96vw;
    gap: 8.30vw;
    margin-top: -2.96vw;
    padding: 7.47vw 5.93vw 5.33vw;
  }

  .lineup__item {
    grid-template-rows: 4.74vw 27.26vw auto;
  }

  .lineup__banner {
    margin: 4.15vw auto 0;
    max-width: 39.11vw;
  }

  .lineup__logo {
    max-width: 18.96vw;
  }

  .lineup__item:nth-child(2) .lineup__logo {
    max-width: 11.85vw;
  }

  .lineup__item:nth-child(3) .lineup__logo {
    max-width: 23.70vw;
  }

  .lineup__item:nth-child(1) .lineup__package {
    margin-left: 1.19vw;
    max-width: 18.96vw;
  }

  .lineup__item:nth-child(2) .lineup__package {
    margin-top: 1.19vw;
    max-width: 19.56vw;
  }

  .lineup__item:nth-child(3) .lineup__package {
    max-width: 9.72vw;
  }

  .lineup__volume {
    font-size: 1.19vw;
  }

  .lineup__text {
    font-size: 1.33vw;
    margin-top: 1.78vw;
    min-height: 12.21vw;
  }

  .lineup__text .note {
    font-size: 1.04vw;
  }

  .lineup__linkWrap {
    gap: 1.78vw;
  }

  .lineup .commonLink {
    border-radius: 5.926vw;
    font-size: 1.185vw;
    max-width: 19.852vw;
    padding-block: 1.284vw 1.357vw;
  }

  .lineup .commonLink::after {
    height: 0.741vw;
    right: 1.87vw;
    width: 0.926vw;
  }
}

@media screen and (max-width: 767px) {
  .lineup {
    padding-block: 5rem 21.5rem;
  }

  .lineup::after {
    background-position: 74%;
    height: 44rem;
  }

  .lineup__titleImg {
    width: 9rem;
  }

  .lineup__title {
    font-size: 3.375rem;
    margin-top: 2rem;
  }

  .lineup__banner {
    margin-top: 4.2rem;
    max-width: 100%;
  }

  .lineup__column {
    border-radius: 2.5rem;
    display: grid;
    gap: 8rem;
    grid-template-columns: 1fr;
    margin-top: 5rem;
    padding: 6.5rem 2.8rem 4rem 3rem;
  }

  .lineup__item {
    grid-template-rows: unset;
  }

  .lineup__item:nth-child(1) .lineup__package, .lineup__item:nth-child(2) .lineup__package, .lineup__item:nth-child(3) .lineup__package {
    margin-inline: auto;
    max-width: 100%;
  }

  .lineup__item:nth-child(1) .lineup__package {
    margin-left: 4rem;
    margin-top: 1.5rem;
    max-width: 73%;
  }

  .lineup__item:nth-child(2) .lineup__package {
    margin-left: 4.5rem;
    margin-top: 2.5rem;
    max-width: 74%;
  }

  .lineup__item:nth-child(3) .lineup__package {
    margin-left: 11rem;
    margin-top: 0.5rem;
    max-width: 35%;
  }

  .lineup__item:nth-child(1) .lineup__logo {
    max-width: 23rem;
  }

  .lineup__item:nth-child(2) .lineup__logo {
    max-width: 15rem;
  }

  .lineup__item:nth-child(3) .lineup__logo {
    margin-top: 0.8rem;
    max-width: 29rem;
  }

  .lineup__volume {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    padding-right: 1.5rem;
  }

  .lineup__item:nth-child(3) .lineup__volume {
    margin-top: 1.2rem;
  }

  .lineup__text {
    font-size: 1.75rem;
    line-height: 1.92;
    margin-top: 2.9rem;
    padding-inline: 2.5rem 4rem;
  }

  .lineup .commonLink {
    border-radius: 7.875rem;
    font-size: 2rem;
    margin-top: 2.5rem;
    max-width: 100%;
    padding-block: 2.9rem 3.2rem;
  }

  .lineup .commonLink::after {
    height: 1.1875rem;
    right: 3.0625rem;
    width: 1.48rem;
  }

  .lineup__text .note {
    font-size: 1.39rem;
  }

  .lineup__linkWrap {
    gap: 2rem;
    margin-top: 2rem;
  }

  .lineup__linkWrap .commonLink {
    margin-top: 0;
  }
}