html {
  scroll-behavior: smooth;
}

.lp-lineup2025 {
  --color-intro: #f39a18;
  --color-cta: #f39a18;
  --color-kanpai-blue: #01b9ef;
  --color-kanpai-orange: #ffae00;
  --color-kanpai-green: #2fc571;
  --color-kanpai-bg: #fff7e3;
  --color-strawberry: #e60012;
  --color-strawberry-nav: #fccdcb;
  --color-sparkling: #42205a;
  --color-sparkling-nav: #ebcaf4;
  --color-kanpai-grape: #723f84;
  --color-kanpai-grape-nav: #e2b0f3;
  --color-mugi: #006cbf;
  --color-mugi-nav: #bbdcf9;
  --color-kiwi: #e60012;
  --color-kiwi-nav: #fad370;
  --color-lemon: #13a950;
  --color-lemon-nav: #c3eae8;
  --width-pc: 1000px;
  --margin-inline-sp: 4%;
  --color-marker: linear-gradient(to right, #ffec6f, #ffec6f) no-repeat bottom / 100% 50%;
}

.lp-lineup2025-strawberry {
  --color-main: var(--color-strawberry);
  --width-img-pc: 250px;
  --width-img-sp: 180px;
  --position-img-pc: -80px;
  --position-img-sp: -20px;
  --contents-move-height-pc: 0;
}

.lp-lineup2025-sparkling {
  --color-main: var(--color-sparkling);
  --color-marker: linear-gradient(to right, #ecc2cb, #ecc2cb) no-repeat bottom / 100% 50%;
  --width-img-pc: 268px;
  --width-img-sp: 152px;
  --position-img-pc: -80px;
  --position-img-sp: -20px;
  --contents-move-height-pc: -50px;
}

.lp-lineup2025-mugi {
  --color-main: var(--color-mugi);
  --width-img-pc: 143px;
  --width-img-sp: 123px;
  --position-img-pc: -40px;
  --position-img-sp: -20px;
  --contents-move-height-pc: -20px;
}

.lp-lineup2025-kanpai-grape {
  --color-main: var(--color-kanpai-grape);
  --color-marker: linear-gradient(to right, #ffe109, #ffe109) no-repeat bottom / 100% 50%;
  --width-img-pc: 208px;
  --width-img-sp: 188px;
  --position-img-pc: -60px;
  --position-img-sp: -40px;
  --contents-move-height-pc: -20px;
}

.lp-lineup2025-kiwi {
  --color-main: var(--color-kiwi);
  --width-img-pc: 240px;
  --width-img-sp: 160px;
  --position-img-pc: -60px;
  --position-img-sp: -20px;
  --contents-move-height-pc: 0;
}

.lp-lineup2025-lemon {
  --color-main: var(--color-lemon);
  --width-img-pc: 204px;
  --width-img-sp: 180px;
  --position-img-pc: -60px;
  --position-img-sp: -20px;
  --contents-move-height-pc: 0;
}

.lp-lineup2025 a {
  color: #333;
}

:where(.lp-lineup2025) img {
  width: 100%;
}

.lp-lineup2025-title {
  margin: 0 0 30px;
}

.lp-lineup2025-banner img {
  width: 100%;
}

.lp-lineup2025-nav {
  text-align: center;
}

.lp-lineup2025-nav a {
  aspect-ratio: 1 / 1;
  align-content: center;
  background: url(../img/icon-arrow-bottom.svg) no-repeat 50% 80% / 24px auto;
  display: block;
  position: relative;
}

.lp-lineup2025-nav-label {
  color: #fff;
  border-radius: 12px;
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
}

.lp-lineup2025-nav-title {
  font-weight: bold;
  display: block;
  line-height: 1.2;
}

.lp-lineup2025-nav-text {
  font-size: .75em;
}

.lp-lineup2025-nav ul {
  display: grid;
  gap: 15px;
}

.lp-lineup2025-nav a::after {
  aspect-ratio: 1 / 1;
  border-radius: 100px;
  content: '';
  display: block;
  filter: blur(16px);
  inset: 0;
  margin: auto;
  position: absolute;
  width: 90%;
  z-index: -1;
}

a[href="#lineup2025-strawberry"]::after {
  background: var(--color-strawberry-nav);
}

a[href="#lineup2025-sparkling"]::after {
  background: var(--color-sparkling-nav);
}

a[href="#lineup2025-mugi"]::after  {
  background: var(--color-mugi-nav);
}
a[href="#lineup2025-kanpai-grape"]::after {
  background: var(--color-kanpai-grape-nav);
}

a[href="#lineup2025-kiwi"]::after {
  background: var(--color-kiwi-nav);
}

a[href="#lineup2025-lemon"]::after  {
  background: var(--color-lemon-nav);
}

.lp-lineup2025-nav {
  margin: 0 0 70px;
}

.lp-lineup2025-intro {
  color: var(--color-intro);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 2;
  margin: 0 0 20px;
  text-align: center;
  padding: 0 20px;
}

.lp-lineup2025-intro span {
  display: inline-block;
}

/* Product */

.lp-lineup2025-sec {
  font-weight: bold;
  margin: 0 0 80px;
}

.lp-lineup2025-sec-intro {
  color: var(--color-main);
}

.lp-lineup2025-sec-intro small {
  font-style: 15px;
  font-weight: 400;
}

.lp-lineup2025-sec-inner {
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 40px 5%;
}

.lp-lineup2025-sec-point li {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0 0 34px;
}

.lp-lineup2025-sec-point li:last-child {
  margin: 0 0 20px;
}

.lp-lineup2025-sec-point li>img {
  width: 136px;
}

.lp-lineup2025-sec-point-text img {
  margin: 0 0 10px;
  width: 124px;
}

.lp-lineup2025-sec-marker {
  background: var(--color-marker);
}

.lp-lineup2025-sec-picture {
  aspect-ratio: 1 / 1;
  position: relative;
}

.lp-lineup2025-sec-img {
  bottom: 0;
  position: absolute;
  width: var(--width-img-pc);
}

.lp-lineup2025-btn {
  background: var(--color-cta) url(../img/icon-arrow-right-wh.svg) no-repeat 95% 50%/15px auto;
  border-radius: 45px;
  display: block;
  font-weight: bold;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}

.lp-lineup2025-btn a {
  color: #fff;
  display: block;
}

.lp-lineup2025-cta .lp-lineup2025-btn {
  background: #fff url(../img/icon-arrow-right-orange.svg) no-repeat 95% 50%/15px auto;
}

.lp-lineup2025-cta .lp-lineup2025-btn a {
  color: var(--color-cta);
}

.lp-lineup2025-sec-note {
  text-align: right;
  font-size: 16px;
}

/* CTA */

.lp-lineup2025-cta {
  background-image: linear-gradient( -75deg, rgba(244,190,71,0.99608) 0%, rgb(243,154,24) 100%);
  margin: 0 0 50px;
}

.lp-lineup2025-cta-title {
  margin: 0 auto 30px;
  max-width: 550px;
}

/* Kanpai kajyu series */

.lp-lineup2025-kanpai {
  background: var(--color-kanpai-bg);
  border-radius: 16px;
  font-size: 15px;
  margin: 60px 0 0;
}

.lp-lineup2025-kanpai-title {
  max-width: 785px;
}

.lp-lineup2025-kanpai-name {
  display: block;
  font-weight: 700;
}

.lp-lineup2025-kanpai-orange {
  background-color: var(--color-kanpai-orange);
}

.lp-lineup2025-kanpai-orange-text {
  color: var(--color-kanpai-orange);
}

.lp-lineup2025-kanpai-green {
  background-color: var(--color-kanpai-green);
}

.lp-lineup2025-kanpai-green-text {
  color: var(--color-kanpai-green);
}

.lp-lineup2025-kanpai-blue {
  background-color: var(--color-kanpai-blue);
}

.lp-lineup2025-kanpai-blue-text {
  color: var(--color-kanpai-blue);
}

.lp-lineup2025-kanpai .lp-lineup2025-btn {
  background-size: auto 15px;
  color: #fff;
  padding: 15px 0;
}

.lp-lineup2025-kanpai-list li {
  font-weight: normal;
}

.lp-lineup2025-kanpai-img small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  text-align: right;
}

/* Animation */

.lp-lineup2025-anime-swinging {
  transform-origin: center center;
  animation: swinging 2s linear infinite;
}

@keyframes swinging {
  0% , 100%{
      transform: rotate(5deg);
  }
  50%{
      transform: rotate(-5deg);
  }
}

.lp-lineup2025-anime-fluffy {
  animation: fluffy 3s ease-in-out infinite alternate;
}

@keyframes fluffy {
  0% {
    transform:translate(0, 0) rotate(-5deg);
  }
  50% {
    transform:translate(0, -4px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(5deg);
  }
}

.lp-lineup2025-anime-swinging2 {
  transform-origin: center bottom;
  animation: swinging2 2s linear infinite;
}

@keyframes swinging2 {
  0% , 100%{
      transform: rotate(2deg);
  }
  50%{
      transform: rotate(-2deg);
  }
}

@media (width < 768px) {
  /**
   * SP
   */

   .hidden-sp {
    display: none;
   }

  .lp-lineup2025-nav {
    margin-inline: var(--margin-inline-sp);
  }

  .lp-lineup2025-nav ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .lp-lineup2025-nav-title {
    font-size: 12px;
  }

  .lp-lineup2025-nav a {
    background-size: 16px auto;
  }

  /* Product */

  .lp-lineup2025-sec-intro {
    font-size: 20px;
    padding: 0 0 0 20px;
  }

  .lp-lineup2025-sec-title {
    margin: 0 0 10px;
  }

  .lp-lineup2025-sec-inner {
    padding-inline: var(--margin-inline-sp);
  }

  .lp-lineup2025-sec-point-text {
    font-size: 16px;
  }

  .lp-lineup2025-btn {
    background-size: 10px auto;
    font-size: 20px;
    max-width: 70%;
    margin-top: 40px;
  }

  .lp-lineup2025-btn a {
    padding: 20px 0;
  }

  .lp-lineup2025-sec-img {
    left: var(--position-img-sp);
    width: var(--width-img-sp);
  }

  /* CTA */

  .lp-lineup2025-cta {
    margin-inline: var(--margin-inline-sp);
    padding: 40px 0;
  }

  .lp-lineup2025-cta-title {
    max-width: 60%;
  }

  /* Kanpai kajyu series */

  .lp-lineup2025-kanpai {
    margin-inline: var(--margin-inline-sp);
    padding: 50px 0;
  }

  .lp-lineup2025-kanpai>ul {
    display: flex;
    flex-direction: column-reverse;
    gap: 50px;
  }

  .lp-lineup2025-kanpai-title {
    max-width: 80%;
  }

  .lp-lineup2025-kanpai .lp-lineup2025-btn,
  .lp-lineup2025-kanpai-name,
  .lp-lineup2025-kanpai-list {
    max-width: 64%;
  }

  .lp-lineup2025-kanpai-title,
  .lp-lineup2025-kanpai .lp-lineup2025-btn {
    margin: 0 auto 30px;
  }

  .lp-lineup2025-kanpai-img {
    display: block;
    margin: 0 auto 10px;
    width: 51%;
  }

  .lp-lineup2025-kanpai-name,
  .lp-lineup2025-kanpai-list {
    margin: 0 auto;
  }

  .lp-lineup2025-strawberry .lp-lineup2025-kanpai-img {
    transform: translateX(-10px);
  }

  .lp-lineup2025-kanpai-grape .lp-lineup2025-kanpai-img {
    transform: translateX(10px);
  }
}


@media (width >= 768px) {
  /**
   * PC
   */

  .lp-lineup2025 {
    margin: 0 auto;
    max-width: var(--width-pc);
  }

  .lp-lineup2025-nav ul {
    grid-template-columns: repeat(6, 1fr);
  }

  .lp-lineup2025-nav-title {
    font-size: 18px;
  }

  /* Product */

  .lp-lineup2025-sec-inner {
    margin-top: var(--contents-move-height-pc);
    grid-template-columns: 48% 47%;
  }

  .lp-lineup2025-sec-intro {
    font-size: 24px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    padding: 0 0 0 40px;
  }

  .lp-lineup2025-sec-picture {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .lp-lineup2025-sec-point {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .lp-lineup2025-sec-point-text {
    font-size: 20px;
    width: 64%;
  }

  .lp-lineup2025-sec-img {
    left: var(--position-img-pc);
  }

  .lp-lineup2025-btn {
    font-size: 24px;
    max-width: 340px;
  }

  .lp-lineup2025-btn a {
    padding: 24px 0;
  }

  /* CTA */

  .lp-lineup2025-cta {
    padding: 80px 0;
  }

  /* Kanpai kajyu series */

  .lp-lineup2025-kanpai {
    max-width: 920px;
    margin-inline: auto;
    padding: 80px 30px;
  }

  .lp-lineup2025-kanpai-title {
    margin: 0 auto 60px;
    padding: 0 20px;
  }

  .lp-lineup2025-kanpai>ul {
    display: flex;
    justify-content: space-around;
    gap: 5%;
    padding: 0 0 0 8%;
  }

  .lp-lineup2025-kanpai>ul>li {
    max-width: 340px;
  }

  .lp-lineup2025-kanpai-img {
    display: block;
    margin: 0 0 15px;
    min-height: 360px;
  }

  .lp-lineup2025-kanpai .lp-lineup2025-btn {
    background-position: 91% 50%;
    margin: 0 0 20px;
    width: 190px;
  }

  .lp-lineup2025-kanpai-name,
  .lp-lineup2025-kanpai-list {
    font-size: 18px;
  }

  .lp-lineup2025-strawberry .lp-lineup2025-kanpai-img {
    transform: translateX(-60px);
    max-width: 268px;
  }
}


@media (768px <= width <= 1020px) {

  .lp-lineup2025-sec-inner,
  .lp-lineup2025-nav,
  .lp-lineup2025-kanpai,
  .lp-lineup2025-cta {
    margin-inline: 2%;
  }

  .lp-lineup2025-nav-title {
    font-size: 14px;
  }

  .lp-lineup2025-sec-intro {
    grid-column: 1 / 3;
  }

  .lp-lineup2025-sec-img {
      left: var(--position-img-sp);
      width: 170px;
  }

}

@media (any-hover: hover) {
  a:hover {
    opacity: .75;
  }

  .lp-lineup2025-nav a:hover {
    opacity: 1;
  }

  .lp-lineup2025-nav a:hover::after {
    opacity: .75;
  }
}