/* =====================
  Vmoto 新車先行予約セール（260515）
===================== */

.footer_xeam {
  margin-top: 0px;
}

/* 中古車LPと同様に「色＋テクスチャ」の2層。先頭＝手前＝bg.png
   bg.png は 1418×32768 の超縦長。background-size:auto だと縦ピクセルが GPU の
   テクスチャ上限を超えてレイヤーが出ないことがあるため、描画高を抑えてタイルで敷き詰める */
.newBikeSale260515 {
  padding-top: 73px;
  overflow: hidden;
  background-color: #F6FFEF;
  background-image: url("/img/campaign/260515_newbikesale/bg.png"),
    linear-gradient(180deg, #DAFCFD 0%, #F6FFEF 100%);
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: cover;
  min-height: 100vh;
  box-sizing: border-box;
}

@media screen and (max-width: 1508px) {
  .newBikeSale260515 {
    padding-top: 94px;
  }
}

@media screen and (max-width: 1102px) {
  .newBikeSale260515 {
    padding-top: 113px;
  }
}

@media screen and (max-width: 1038px) {
  .newBikeSale260515 {
    padding-top: 134px;
  }
}

@media screen and (max-width: 960px) {
  .newBikeSale260515 {
    padding-top: 60px;
  }
}

.newBikeSale260515-article {
  margin: 0;
  padding: 0;
}

/* ----- FV：全幅 ----- */
.newBikeSale260515-kv {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(24px);
}

.newBikeSale260515-kv img {
  display: block;
  width: 100%;
  height: auto;
}

.newBikeSale260515-kv.animateOfEach {
  opacity: 1;
  transform: translateY(0);
  transition: ease 0.8s;
}

/* ----- 白背景カラム ----- */
.newBikeSale260515-wrap {
  padding: 60px 0;
  box-sizing: border-box;
}

.newBikeSale260515-content {
  background-color: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 0;
  box-sizing: border-box;
  border-radius: 20px;
}

@media screen and (max-width: 900px) {
  .newBikeSale260515-wrap {
    padding: 30px 0;
  }
    .newBikeSale260515-content {
    margin: 0 10px;
  }
}

.newBikeSale260515-block {
  margin: 0 0 120px;
  padding: 0;
  box-sizing: border-box;
}

/* CTA（.scrollElement）直下の前要素は従来の下余白のまま（PC 60px / SP 30px）※--sectionTitle は除外 */
.newBikeSale260515-content
  > .newBikeSale260515-block:not(.newBikeSale260515-block--sectionTitle):has(
    + .newBikeSale260515-cta.scrollElement
  ) {
  margin-bottom: 60px;
}

/* PC 左右60px */
.newBikeSale260515-block--pad60 {
  padding-left: 60px;
  padding-right: 60px;
}

/* PC 左右30px（08,20,28,36） */
.newBikeSale260515-block--pad30 {
  padding-left: 30px;
  padding-right: 30px;
}

.newBikeSale260515-block img,
.newBikeSale260515-block picture {
  display: block;
  width: 100%;
  height: auto;
}

.newBikeSale260515-block picture img {
  width: 100%;
  height: auto;
}

/* セクションタイトル（*-title.png）：フル幅ブロックと同じ（横パディングなし）、下のみ 30px */
.newBikeSale260515-block.newBikeSale260515-block--sectionTitle {
  margin: 0 0 30px;
  padding: 0;
  box-sizing: border-box;
}

.newBikeSale260515-block--sectionTitle img {
  display: block;
  width: 100%;
  height: auto;
}

/* 10 ギャラリー：2カラムグリッド（10-title はブロック外の --sectionTitle） */
.newBikeSale260515-gallery {
  padding-top: 0;
  box-sizing: border-box;
}

.newBikeSale260515-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .newBikeSale260515-gallery__grid {
    column-gap: 15px;
    row-gap: 15px;
  }
}

.newBikeSale260515-gallery__cell {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}

.newBikeSale260515-gallery__cell img {
  display: block;
  width: 100%;
  height: auto;
}

/* 28 のように1枚だけをグリッド全幅で載せる場合 */
.newBikeSale260515-gallery__cell--span2 {
  grid-column: 1 / -1;
}

.newBikeSale260515-gallery__cell picture {
  display: block;
  width: 100%;
}

.newBikeSale260515-gallery__cell picture img {
  display: block;
  width: 100%;
  height: auto;
}


.newBikeSale260515-block--wing10,
.newBikeSale260515-block--wing20,
.newBikeSale260515-block--wing22,
.newBikeSale260515-block--wing28,
.newBikeSale260515-block--wing30,
.newBikeSale260515-block--wing36,
.newBikeSale260515-block--wing38 {
  position: relative;
}

.newBikeSale260515-block--wing10::before,
.newBikeSale260515-block--wing20::before,
.newBikeSale260515-block--wing22::before,
.newBikeSale260515-block--wing28::before,
.newBikeSale260515-block--wing30::before,
.newBikeSale260515-block--wing36::before,
.newBikeSale260515-block--wing38::before {
  content: "";
  position: absolute;
  width: clamp(100px, 28vw, 200px);
  height: clamp(72px, 20vw, 144px);
  background-image: url("/img/campaign/260515_newbikesale/wing.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  pointer-events: none;
}

.newBikeSale260515-block--wing07::before,
.newBikeSale260515-block--wing20::before,
.newBikeSale260515-block--wing28::before,
.newBikeSale260515-block--wing36::before {
  top: -60px;
  left: 10px;
  z-index: -1;
}

.newBikeSale260515-block--wing10::before,
.newBikeSale260515-block--wing22::before,
.newBikeSale260515-block--wing30::before,
.newBikeSale260515-block--wing38::before {
  top: -60px;
  right: 10px;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .newBikeSale260515-block--wing10::before,
  .newBikeSale260515-block--wing22::before,
  .newBikeSale260515-block--wing30::before,
  .newBikeSale260515-block--wing38::before {
    top: -30px;
    right: -10px;
  }
}

/* ヘルメット＋CTA / ワイヤーロック＋CTA */
.newBikeSale260515-bundle {
  margin: 0 0 60px;
  box-sizing: border-box;
}

.newBikeSale260515-bundle > .newBikeSale260515-block {
  margin: 0 0 20px 0;
}

/* バンドル内CTA：上余白は共通ルールに合わせる */
.newBikeSale260515-bundle .newBikeSale260515-cta {
  margin: 70px auto 0;
}

/* CTA（上余白：PC 70px / SP 30px） */
.newBikeSale260515-cta {
  margin: 70px auto 120px;
  max-width: 500px;
  width: 100%;
  box-sizing: border-box;
}

.newBikeSale260515-cta a {
  display: block;
}

.newBikeSale260515-cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* スクロール演出 */
.newBikeSale260515 .scrollElement {
  opacity: 0;
  transform: translateY(200px);
}

.newBikeSale260515 .scrollElement.animateOfEach {
  opacity: 1;
  transform: translateY(0);
  transition: ease 0.8s;
}

/* 10 ギャラリー：2列目（右・DOM偶数）を左より少し遅らせて表示 */
.newBikeSale260515-gallery__cell.scrollElement.animateOfEach {
  transition:
    opacity 0.8s ease 0s,
    transform 0.8s ease 0s;
}

.newBikeSale260515-gallery__cell.scrollElement:nth-child(even).animateOfEach {
  transition:
    opacity 0.8s ease 0.22s,
    transform 0.8s ease 0.22s;
}

@media screen and (max-width: 768px) {
  .newBikeSale260515-content {
    padding: 50px 0;
  }

  .newBikeSale260515-block,
  .newBikeSale260515-bundle {
    margin: 0 0 80px;
  }

  .newBikeSale260515-content
    > .newBikeSale260515-block:not(.newBikeSale260515-block--sectionTitle):has(
      + .newBikeSale260515-cta.scrollElement
    ) {
    margin-bottom: 30px;
  }

  .newBikeSale260515-block--pad60,
  .newBikeSale260515-block--pad30 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .newBikeSale260515-cta {
    margin: 30px auto 80px;
    max-width: 300px;
  }

  .newBikeSale260515-bundle .newBikeSale260515-cta {
    margin-top: 30px;
  }
}

.newBikeSale260515-content > figure.newBikeSale260515-block:last-of-type {
  margin-bottom: 0;
}

/* 11 / 23 / 31 / 39 直下の bundle との隙間（PC・SP とも 10px） */
.newBikeSale260515-block.newBikeSale260515-block--mb10 {
  margin-bottom: 10px;
}

/* 12 / 24 / 32 / 40（PC） */
.newBikeSale260515-block.newBikeSale260515-block--my60 {
  margin: -20px 0 60px;
}

@media screen and (max-width: 768px) {
  .newBikeSale260515-block.newBikeSale260515-block--my60 {
    margin: -50px 0 50px;
  }
}