/* ========================================
   GOOGLE FONTS
   ※ 必ずCSSの一番上に配置
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');


/* ========================================
   ADIDAS HYPERBOOST
   MakeShop / GigaPlus
======================================== */


/* ========================================
   RESET / 全体
======================================== */

.hyperboost-hero-section,
.hyperboost-hero-section * {
  box-sizing: border-box;
}


.hyperboost-hero-section {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  font-family:
    "Inter",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  color: #111;
}


/* ========================================
   MakeShop共通CSS対策
   このページ内のH3
   ・ブラック
   ・中央揃え
======================================== */

.hyperboost-hero-section h3 {
  color: #000000 !important;
  text-align: center !important;
}


/* ========================================
   メイン動画
======================================== */

.hero-video-wrapper {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 5.5;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background-color: #f5f5f5;
}


.hero-video {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}


/* ========================================
   動画上テキスト
======================================== */

.hero-content-left {
  position: absolute;

  top: 15%;
  left: 3%;

  z-index: 2;

  pointer-events: none;
}


.hero-text {
  margin: 0;
  padding: 0;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.1;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  color: #111;
}


/* ========================================
   HYPERBOOST ロゴ
======================================== */

.hero-logo-wrapper {
  width: 100%;

  margin: 0;
  padding: 10px 0;

  overflow: hidden;

  background-color: #ffffff;
}


.hero-logo-img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;
}


/* ========================================
   HYPERBOOST EDGE
======================================== */

.hyperboost-edge {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


.hyperboost-edge-image {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


.hyperboost-edge-image img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;
}


/* ========================================
   HYPERBOOST EDGE
   テキストエリア
======================================== */

.hyperboost-edge-content {
  width: 100%;

  margin: 0;

  padding: 42px 20px 46px;

  background-color: #d4d2d2;

  text-align: center;

  color: #111;
}


/* ========================================
   HYPERBOOST EDGE タイトル
======================================== */

.hyperboost-edge-content h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif !important;

  font-size:
    clamp(21px, 2vw, 28px) !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 1.2px !important;

  text-transform: uppercase;

  text-align: center !important;

  color: #000000 !important;
}


/* ========================================
   HYPERBOOST EDGE 説明文
======================================== */

.hyperboost-edge-content p {
  max-width: 700px;

  margin: 0 auto;
  padding: 0;

  font-family:
    "Inter",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    clamp(8px, 0.7vw, 10px);

  font-weight: 400;

  line-height: 1.55;

  text-align: center;

  color: #222222;
}


/* ========================================
   FEATURE
   横2列レイアウト
======================================== */

.hyperboost-feature-grid {
  display: flex;

  width: 100%;

  margin: 0;
  padding: 0;

  gap: 0;

  align-items: stretch;

  background-color: #d7d7d7;
}


.hyperboost-feature-column {
  display: flex;

  flex-direction: column;

  width: 50%;

  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ========================================
   FEATURE 画像
======================================== */

.feature-image {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


.feature-image img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;
}


/* ========================================
   テキスト付き画像
======================================== */

.feature-image-text {
  position: relative;
}


/* ========================================
   FEATURE テキスト共通
======================================== */

.feature-text {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 2;

  width: min(90%, 680px);

  transform: translate(-50%, -50%);

  text-align: center;

  color: #111;

  pointer-events: none;
}


/* ========================================
   FEATURE タイトル共通
======================================== */

.feature-text h3 {
  margin:
    0
    0
    clamp(4px, 0.55vw, 9px)
    0 !important;

  padding: 0 !important;

  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif !important;

  font-size:
    clamp(11px, 1.3vw, 20px) !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing:
    clamp(0.4px, 0.065vw, 1px) !important;

  text-transform: uppercase;

  text-align: center !important;

  white-space: nowrap;

  color: #000000 !important;
}


/* ========================================
   FEATURE 説明文
======================================== */

.feature-text p {
  width: 100%;

  max-width: 620px;

  margin: 0 auto;
  padding: 0;

  font-family:
    "Inter",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    clamp(5px, 0.65vw, 10px);

  font-weight: 400;

  line-height: 1.5;

  letter-spacing: -0.01em;

  text-align: center;

  color: #222222;
}


/* ==================================================
   ① HYPERBOOST PRO
================================================== */

.feature-text--pro {
  left: 50% !important;

  top: 50% !important;

  transform:
    translate(-50%, -50%) !important;
}


/* ==================================================
   ② PRIMEWEAVE
================================================== */

.feature-text--primeweave {
  left: 50% !important;

  top: 50% !important;

  transform:
    translate(-50%, -50%) !important;
}


/* ==================================================
   ③ COMFORT PODS
================================================== */

.feature-text--comfort {
  left: 50% !important;

  top: 50% !important;

  transform:
    translate(-50%, -50%) !important;
}


/* ==================================================
   ④ LIGHTTRAXION OUTSOLE
   少し下へ配置
================================================== */

.feature-text--lighttraxion {
  left: 50% !important;

  top: 54% !important;

  transform:
    translate(-50%, -50%) !important;
}


/* ========================================
   LIGHTTRAXION OUTSOLE
   文字数が多いため少し小さく
======================================== */

.feature-text--lighttraxion h3 {
  font-size:
    clamp(10px, 1.22vw, 19px) !important;

  text-align: center !important;
}


/* ========================================
   TABLET
   1024px以下
======================================== */

@media screen and (max-width: 1024px) {


  /* ======================================
     FEATURE
  ====================================== */

  .feature-text {
    width: 92%;
  }


  .feature-text p {
    max-width: 94%;
  }


  /* ======================================
     EDGE
  ====================================== */

  .hyperboost-edge-content {
    padding:
      clamp(30px, 4vw, 42px)
      20px
      clamp(34px, 4.4vw, 46px);
  }


  .hyperboost-edge-content h3 {
    font-size:
      clamp(21px, 2.4vw, 28px) !important;

    text-align: center !important;
  }


  .hyperboost-edge-content p {
    font-size:
      clamp(8px, 0.95vw, 10px);
  }


  /* ======================================
     LIGHTTRAXION
  ====================================== */

  .feature-text--lighttraxion {
    top: 54% !important;
  }

}


/* ========================================
   SMARTPHONE
   768px以下

   横2列を維持しながら
   テキストをPCより小さくする
======================================== */

@media screen and (max-width: 768px) {


  /* ======================================
     動画
  ====================================== */

  .hero-video-wrapper {
    aspect-ratio: 16 / 9;
  }


  .hero-content-left {
    top: 10%;
    left: 4%;
  }


  .hero-text {
    font-size:
      clamp(8px, 1.8vw, 10px);
  }


  /* ======================================
     HYPERBOOST EDGE
  ====================================== */

  .hyperboost-edge-content {
    padding: 30px 15px 34px;
  }


  .hyperboost-edge-content h3 {
    font-size:
      clamp(16px, 4vw, 19px) !important;

    text-align: center !important;
  }


  .hyperboost-edge-content p {
    font-size:
      clamp(6px, 1.6vw, 8px);
  }


  /* ======================================
     FEATURE
     スマホでも横2列を維持
  ====================================== */

  .hyperboost-feature-grid {
    display: flex;

    flex-direction: row;

    width: 100%;
  }


  .hyperboost-feature-column {
    width: 50%;

    min-width: 0;
  }


  /* ======================================
     HYPERBOOST PRO
  ====================================== */

  .feature-text--pro {
    left: 50% !important;

    top: 50% !important;

    width: 92%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     PRIMEWEAVE
  ====================================== */

  .feature-text--primeweave {
    left: 50% !important;

    top: 50% !important;

    width: 92%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     COMFORT PODS
  ====================================== */

  .feature-text--comfort {
    left: 50% !important;

    top: 50% !important;

    width: 92%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     LIGHTTRAXION OUTSOLE
  ====================================== */

  .feature-text--lighttraxion {
    left: 50% !important;

    top: 54% !important;

    width: 92%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     FEATURE 見出し
     スマホ用に小さく
  ====================================== */

  .feature-text h3 {
    margin: 0 0 4px 0 !important;

    padding: 0 !important;

    font-size:
      clamp(7px, 2.1vw, 10px) !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing:
      0.3px !important;

    text-align: center !important;

    white-space: nowrap;
  }


  /* ======================================
     LIGHTTRAXION 見出し
     長いためさらに少し小さく
  ====================================== */

  .feature-text--lighttraxion h3 {
    font-size:
      clamp(6.5px, 1.9vw, 9px) !important;

    text-align: center !important;
  }


  /* ======================================
     FEATURE 説明文
     スマホ用に小さく
  ====================================== */

  .feature-text p {
    width: 94%;

    max-width: none;

    margin: 0 auto;

    font-size:
      clamp(4px, 1.15vw, 5.5px);

    line-height: 1.35;

    letter-spacing: -0.01em;

    text-align: center;
  }

}


/* ========================================
   SMALL SMARTPHONE
   480px以下
======================================== */

@media screen and (max-width: 480px) {


  /* ======================================
     HYPERBOOST PRO
  ====================================== */

  .feature-text--pro {
    left: 50% !important;

    top: 50% !important;

    width: 94%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     PRIMEWEAVE
  ====================================== */

  .feature-text--primeweave {
    left: 50% !important;

    top: 50% !important;

    width: 94%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     COMFORT PODS
  ====================================== */

  .feature-text--comfort {
    left: 50% !important;

    top: 50% !important;

    width: 94%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     LIGHTTRAXION
  ====================================== */

  .feature-text--lighttraxion {
    left: 50% !important;

    top: 54% !important;

    width: 94%;

    transform:
      translate(-50%, -50%) !important;
  }


  /* ======================================
     FEATURE 見出し
  ====================================== */

  .feature-text h3 {
    margin: 0 0 3px 0 !important;

    padding: 0 !important;

    font-size:
      clamp(6px, 2vw, 8px) !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing:
      0.2px !important;

    text-align: center !important;

    white-space: nowrap;
  }


  /* ======================================
     LIGHTTRAXION 見出し
  ====================================== */

  .feature-text--lighttraxion h3 {
    font-size:
      clamp(5.5px, 1.8vw, 7.5px) !important;

    text-align: center !important;
  }


  /* ======================================
     FEATURE 説明文
  ====================================== */

  .feature-text p {
    width: 94%;

    max-width: none;

    margin: 0 auto;

    font-size:
      clamp(3.5px, 1.1vw, 4.8px);

    line-height: 1.35;

    letter-spacing: -0.01em;

    text-align: center;
  }


  /* ======================================
     HYPERBOOST EDGE
  ====================================== */

  .hyperboost-edge-content h3 {
    font-size:
      clamp(15px, 4vw, 18px) !important;

    text-align: center !important;
  }

}