@charset "UTF-8";

:root {
  font-size: 62.5%;
  --color-btn-primary: #DC002F;
  --color-btn-secondary: #13778F;
  --color-main: #222222;
  --color-main-text: #2B2A31;
  --color-caption-text: #6B6B6B;
  --color-white: #fff;
  --bgColor-btn-primary: linear-gradient(90deg, #2472F7 0%, #6A1FFF 100%);;
  --bgColor-btn-secondary: #ffffff;
  scroll-behavior: smooth;
}

/* 768px(769px) ~ の間は 幅1440px, 高さ900px 基準でスケーリング */
@media screen and (min-width: 769px) {
  :root {
    font-size: min(calc(10 / 1440 * 100vw) , calc(10 / 900 * 100vh));
  }
}
/* 768px の間は 375px 基準でスケーリング */
@media screen and (max-width: 768px) {
  :root {
    font-size: calc(10 / 375 * 100vw);
  }
}

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin: 0;
  text-box: trim-both cap alphabetic;
}

a {
  text-decoration: none;
  color: var(--color-main-text);
}

img {
  max-width: 100%;
  vertical-align: middle;
}
h1,h2,h3,h4,h5,h6 {
  text-box: trim-both cap alphabetic;
}
/* utility */
.u-pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none !important;
  }
}
.u-sp-only {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .u-sp-only {
    display: block !important;
  }
}

.u-text-highlight {
  display: inline-flex;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  background-color: var(--color-main);
  color: #fff;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 768px) {
  .u-text-highlight {
    padding: 0.2rem 0.6rem;
  }
}

.u-font-weight--bold {
  font-weight: 700;
}

/* layout */
.l-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.l-header {
  background-color: #fff;
}

.l-header__inner {
  max-width: 144rem; /* 1440px -> 144rem */
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.l-header__logo {
  width: fit-content;
  img{
    width: 11rem;
  }
}

.l-header__tel {
  font-size: 2.4rem;
  font-weight: 700;
  position: relative;
  padding-left: 3rem;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background-image: url('/img/products/vhx-x1/201798001/icon_tel.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  a.prd-inlineLink{
    color: var(--color-main);
  }
}

.l-main {
  position: relative;
  flex-grow: 1;
}

.l-main__nav {
  position: absolute;
  z-index: 10;
  content: '';
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
}

.l-main__nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 141.6rem;
  margin: 0 auto;
  gap: 0.4rem;
  padding: 0.8rem;
  border-radius: 1.2rem;
  border: 1px solid #FFF;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 0 24px 0 rgba(57, 86, 143, 0.08);
  backdrop-filter: blur(4px);
}

.l-main__nav-item {
  &.is-active {
    .l-main__nav-link {
      background-color: var(--color-main);
      color: #fff;
      font-weight: 700;
    }
  }
}

.l-main__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--color-main-text);
  height: 5.6rem;
  width: 23rem;
  min-width: 17.6rem;
  padding: 2.4rem 1.6rem;
  border-radius: 0.8rem;
  flex: 1 1 0;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: rgba(34, 34, 34, 0.08);
  }
}
@media screen and (max-width: 768px) {
  .l-body{
    height: auto;
    overflow: hidden;
  }
  .l-main__nav {
    display: none;
  }
  .l-header__inner{
    justify-content: center;
  }
  .l-header__tel{
    display: none;
  }
}

.l-main__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 78.4rem;
}

.l-main__content-section {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 1;
  padding: 12rem 0 0;
  &.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
  }
  &::before{
    content: '';
    position: absolute;
    bottom: -18rem;
    right: calc(50% - 19.2rem);
    width: calc(50% + 19.2rem);
    height: calc(100% + 18rem);
    aspect-ratio: 1152 / 964;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .l-main__content-section {
    &::before{
      width: 100%;
      height: 23rem;
      left: 0;
      bottom: 0;
      top: 0;
    }
  }
}

.l-main__content-section-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  width: 100%;
  max-width: 144rem;
  padding: 0 1.2rem;
  margin: 0 auto;
}

/* 2カラムレイアウト（左テキスト・右画像） */
.l-main__content-section-body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.l-main__content-section-text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  gap: 4.8rem;
  width: 83.6rem;
  margin-bottom: 12rem;
}

.l-main__content-section-title {
  font-size: 5.6rem;
  color: var(--color-white);
  text-shadow: 0 0 0.8rem #000, 0 0 2.4rem #000, 0 0 5.6rem rgba(0, 0, 0, 0.50);
  line-height: 1.3;
}

h1.l-main__content-section-title {
  font-size: 6.4rem;
}

.l-main__content-section-image-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 0 0 40rem;

  & img {
    width: 100%;
    height: auto;
  }
}
.l-main__content-section-image-area__caption{
  display: block;
  color: #6B6B6B;
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-size: 2.4rem;
  line-height: 1.333;
  width: fit-content;
  margin: 0 auto;
  padding: 0 0.6rem 1.5rem;
  position: relative;
  letter-spacing: -0.05rem;

  &::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-color: #AEAEAE;
  }
}

.l-main__content-section-desc {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--color-white);
}

.l-main__content-section-cv {
  display: inline-block;
  margin-top: 3rem;
  padding: 1.2rem 4rem;
  background-color: var(--color-btn-primary);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5rem;
  box-shadow: 0 0.4rem 1.5rem rgba(220, 0, 47, 0.4); /* 4px 15px -> 0.4rem 1.5rem */
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, opacity 0.8s ease, transform 0.8s ease;

  &:hover {
    background-color: #b80028;
    transform: translateY(-0.2rem);
    box-shadow: 0 0.6rem 2rem rgba(220, 0, 47, 0.6); /* 6px 20px -> 0.6rem 2rem */
  }
}
@media screen and (max-width: 768px) {
  .l-main__content-section-body{
    gap: 0;
  }
  .l-main__content-section-title {
    font-size: 3.2rem;
  }
  .l-main__content-section-image-area{
    padding: 2.6rem 0;

    & img{
      max-width: 20rem;
    }
  }
  .l-main__content-section-image-area__caption{
    font-size: 1.6rem;
    padding: 0 0.36rem 0.8rem;

    &::before{
      height: 1px;
    }
  }
}

/* ==========================================================================
   Animation Utility
   ========================================================================== */

/* * フェード基盤設定
 * --end-y: アニメーション終了位置（本来の表示位置からのオフセット）
 * --fade-offset: フェード移動距離（3rem固定）
 * --translate-x: X軸方向の位置調整（デフォルト0）
 */
.u-fade {
  --end-y: 0px;
  --fade-offset: 3rem; /* 30px -> 3rem */
  --translate-x: 0;
  opacity: 0;
  transform: translate(var(--translate-x), var(--end-y));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Fade Up: 終了位置 + 3rem から開始 */
.u-fade-up {
  --end-y: 0px;
  --fade-offset: 3rem; /* 30px -> 3rem */
  --translate-x: 0;
  opacity: 0;
  transform: translate(var(--translate-x), calc(var(--end-y) + var(--fade-offset)));
  transition: opacity 0s, transform 0s;
}

/* Fade Down: 終了位置 - 3rem から開始 */
.u-fade-down {
  --end-y: 0px;
  --fade-offset: 3rem; /* 30px -> 3rem */
  --translate-x: 0;
  opacity: 0;
  transform: translate(var(--translate-x), calc(var(--end-y) - var(--fade-offset)));
  transition: opacity 0s, transform 0s;
}

/* Fade Right→Left: 右（+3rem）から左（本来の位置）へフェード */
.u-fade-right {
  --end-x: 0px;
  --end-y: 0px;
  --fade-offset: 3rem;
  opacity: 0;
  transform: translate(calc(var(--end-x) + var(--fade-offset)), var(--end-y));
  transition: opacity 0s, transform 0s;
}

/*
 * SP用フェード（-sp サフィックス）
 * PCとSPで同じ動き: .u-fade / .u-fade-up / .u-fade-down / .u-fade-right のみで両方制御
 * PCとSPで別の動き: 上記に加えて .u-fade-sp / .u-fade-up-sp / .u-fade-down-sp / .u-fade-right-sp を付与すると、
 *   SP時のみメディアクエリ内の -sp スタイルで上書きされる（PCでは通常クラスのみが効く）
 */

/* X軸方向の中央揃え用クラス (-50%) */
.u-translateX-center {
  --translate-x: -50%;
}

/* 終了位置調整用ユーティリティ */
.u-start-n8  { --end-y: 0.8rem; }
.u-start-n16 { --end-y: 1.6rem; }
.u-start-n24 { --end-y: 2.4rem; }
.u-start-n80 { --end-y: 8rem; }

/* 移動量調整用ユーティリティ (Offset) */
.u-offset-0  { --fade-offset: 0px; }
.u-offset-8 { --fade-offset: 0.8rem; }
.u-offset-10 { --fade-offset: 1rem; }
.u-offset-16 { --fade-offset: 1.6rem; }
.u-offset-20 { --fade-offset: 2rem; }
.u-offset-24 { --fade-offset: 2.4rem; }
.u-offset-40 { --fade-offset: 4rem; }
.u-offset-50 { --fade-offset: 5rem; }
.u-offset-80 { --fade-offset: 8rem; }

/* アニメーション発火トリガー（PC: section is-active / SP: is-in-view） */
.l-main__content-section.is-active .u-fade,
.u-fade.is-in-view,
.l-main__content-section.is-active .u-fade-up,
.u-fade-up.is-in-view,
.l-main__content-section.is-active .u-fade-down,
.u-fade-down.is-in-view,
.l-main__content-section.is-active .u-fade-right,
.u-fade-right.is-in-view,
.l-main__content-section.is-active .u-fade-sp,
.u-fade-sp.is-in-view,
.l-main__content-section.is-active .u-fade-up-sp,
.u-fade-up-sp.is-in-view,
.l-main__content-section.is-active .u-fade-down-sp,
.u-fade-down-sp.is-in-view,
.l-main__content-section.is-active .u-fade-right-sp,
.u-fade-right-sp.is-in-view {
  opacity: 1;
  transform: translate(var(--translate-x, var(--end-x, 0)), var(--end-y));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Delay 設定 */
.l-main__content-section.is-active .u-delay-0-1s { transition-delay: 0.1s; }
.l-main__content-section.is-active .u-delay-0-2s { transition-delay: 0.2s; }
.l-main__content-section.is-active .u-delay-0-4s { transition-delay: 0.4s; }
.l-main__content-section.is-active .u-delay-1s { transition-delay: 1s; }
.l-main__content-section.is-active .u-delay-2s { transition-delay: 2s; }
.l-main__content-section.is-active .u-delay-3s { transition-delay: 3s; }

.u-fade.is-in-view.u-delay-0-1s,
.u-fade-up.is-in-view.u-delay-0-1s,
.u-fade-down.is-in-view.u-delay-0-1s,
.u-fade-right.is-in-view.u-delay-0-1s,
.u-fade-sp.is-in-view.u-delay-0-1s,
.u-fade-up-sp.is-in-view.u-delay-0-1s,
.u-fade-down-sp.is-in-view.u-delay-0-1s,
.u-fade-right-sp.is-in-view.u-delay-0-1s {
  transition-delay: 0.1s;
}

.u-fade.is-in-view.u-delay-0-2s,
.u-fade-up.is-in-view.u-delay-0-2s,
.u-fade-down.is-in-view.u-delay-0-2s,
.u-fade-right.is-in-view.u-delay-0-2s,
.u-fade-sp.is-in-view.u-delay-0-2s,
.u-fade-up-sp.is-in-view.u-delay-0-2s,
.u-fade-down-sp.is-in-view.u-delay-0-2s,
.u-fade-right-sp.is-in-view.u-delay-0-2s {
  transition-delay: 0.2s;
}

.u-fade.is-in-view.u-delay-0-4s,
.u-fade-up.is-in-view.u-delay-0-4s,
.u-fade-down.is-in-view.u-delay-0-4s,
.u-fade-right.is-in-view.u-delay-0-4s,
.u-fade-sp.is-in-view.u-delay-0-4s,
.u-fade-up-sp.is-in-view.u-delay-0-4s,
.u-fade-down-sp.is-in-view.u-delay-0-4s,
.u-fade-right-sp.is-in-view.u-delay-0-4s {
  transition-delay: 0.4s;
}

.u-fade.is-in-view.u-delay-1s,
.u-fade-up.is-in-view.u-delay-1s,
.u-fade-down.is-in-view.u-delay-1s,
.u-fade-right.is-in-view.u-delay-1s,
.u-fade-sp.is-in-view.u-delay-1s,
.u-fade-up-sp.is-in-view.u-delay-1s,
.u-fade-down-sp.is-in-view.u-delay-1s,
.u-fade-right-sp.is-in-view.u-delay-1s {
  transition-delay: 1s;
}

.u-fade.is-in-view.u-delay-2s,
.u-fade-up.is-in-view.u-delay-2s,
.u-fade-down.is-in-view.u-delay-2s,
.u-fade-right.is-in-view.u-delay-2s,
.u-fade-sp.is-in-view.u-delay-2s,
.u-fade-up-sp.is-in-view.u-delay-2s,
.u-fade-down-sp.is-in-view.u-delay-2s,
.u-fade-right-sp.is-in-view.u-delay-2s {
  transition-delay: 2s;
}

.u-fade.is-in-view.u-delay-3s,
.u-fade-up.is-in-view.u-delay-3s,
.u-fade-down.is-in-view.u-delay-3s,
.u-fade-right.is-in-view.u-delay-3s,
.u-fade-sp.is-in-view.u-delay-3s,
.u-fade-up-sp.is-in-view.u-delay-3s,
.u-fade-down-sp.is-in-view.u-delay-3s,
.u-fade-right-sp.is-in-view.u-delay-3s {
  transition-delay: 3s;
}

/* SP時のみ: -sp が付与されている要素でPCのフェード挙動を上書き（--fade-offset 等は通常クラスから継承） */
@media screen and (max-width: 768px) {
  /* u-start-* の --end-y をSP時のみオーバーライド */
  .u-start-sp-2-2 { --end-y: 2.2rem; }
  .u-start-sp-4-3 { --end-y: 4.3rem; }

  .u-fade-sp,
  .u-fade-up-sp,
  .u-fade-down-sp,
  .u-fade-right-sp {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .u-fade-sp { transform: translate(var(--translate-x), var(--end-y)); }
  .u-fade-up-sp { transform: translate(var(--translate-x), calc(var(--end-y) + var(--fade-offset))); }
  .u-fade-down-sp { transform: translate(var(--translate-x), calc(var(--end-y) - var(--fade-offset))); }
  .u-fade-right-sp { transform: translate(calc(var(--end-x) + var(--fade-offset)), var(--end-y)); }

  .u-fade-sp.is-in-view,
  .u-fade-up-sp.is-in-view,
  .u-fade-down-sp.is-in-view,
  .u-fade-right-sp.is-in-view {
    opacity: 1;
    transform: translate(var(--translate-x, var(--end-x, 0)), var(--end-y));
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .u-fade-sp.is-in-view.u-delay-0-1s,
  .u-fade-up-sp.is-in-view.u-delay-0-1s,
  .u-fade-down-sp.is-in-view.u-delay-0-1s,
  .u-fade-right-sp.is-in-view.u-delay-0-1s { transition-delay: 0.1s; }
  .u-fade-sp.is-in-view.u-delay-0-2s,
  .u-fade-up-sp.is-in-view.u-delay-0-2s,
  .u-fade-down-sp.is-in-view.u-delay-0-2s,
  .u-fade-right-sp.is-in-view.u-delay-0-2s { transition-delay: 0.2s; }
  .u-fade-sp.is-in-view.u-delay-0-4s,
  .u-fade-up-sp.is-in-view.u-delay-0-4s,
  .u-fade-down-sp.is-in-view.u-delay-0-4s,
  .u-fade-right-sp.is-in-view.u-delay-0-4s { transition-delay: 0.4s; }
  .u-fade-sp.is-in-view.u-delay-1s,
  .u-fade-up-sp.is-in-view.u-delay-1s,
  .u-fade-down-sp.is-in-view.u-delay-1s,
  .u-fade-right-sp.is-in-view.u-delay-1s { transition-delay: 1s; }
  .u-fade-sp.is-in-view.u-delay-2s,
  .u-fade-up-sp.is-in-view.u-delay-2s,
  .u-fade-down-sp.is-in-view.u-delay-2s,
  .u-fade-right-sp.is-in-view.u-delay-2s { transition-delay: 2s; }
  .u-fade-sp.is-in-view.u-delay-3s,
  .u-fade-up-sp.is-in-view.u-delay-3s,
  .u-fade-down-sp.is-in-view.u-delay-3s,
  .u-fade-right-sp.is-in-view.u-delay-3s { transition-delay: 3s; }

  /* SP時のみフェードアニメーションを無効化（.u-no-fade-sp を付与した要素はアニメーションせず即表示） */
  .u-no-fade-sp.u-fade,
  .u-no-fade-sp.u-fade-up,
  .u-no-fade-sp.u-fade-down,
  .u-no-fade-sp.u-fade-right,
  .u-no-fade-sp.u-fade-sp,
  .u-no-fade-sp.u-fade-up-sp,
  .u-no-fade-sp.u-fade-down-sp,
  .u-no-fade-sp.u-fade-right-sp {
    opacity: 1;
    transform: translate(var(--translate-x, var(--end-x, 0)), var(--end-y));
    transition: none;
  }
}

/* Delay 設定（PC: section is-active 時の SP クラス用） */
.l-main__content-section.is-active .u-fade-sp.u-delay-0-1s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-0-1s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-0-1s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-0-1s { transition-delay: 0.1s; }
.l-main__content-section.is-active .u-fade-sp.u-delay-0-2s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-0-2s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-0-2s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-0-2s { transition-delay: 0.2s; }
.l-main__content-section.is-active .u-fade-sp.u-delay-0-4s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-0-4s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-0-4s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-0-4s { transition-delay: 0.4s; }
.l-main__content-section.is-active .u-fade-sp.u-delay-1s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-1s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-1s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-1s { transition-delay: 1s; }
.l-main__content-section.is-active .u-fade-sp.u-delay-2s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-2s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-2s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-2s { transition-delay: 2s; }
.l-main__content-section.is-active .u-fade-sp.u-delay-3s,
.l-main__content-section.is-active .u-fade-up-sp.u-delay-3s,
.l-main__content-section.is-active .u-fade-down-sp.u-delay-3s,
.l-main__content-section.is-active .u-fade-right-sp.u-delay-3s { transition-delay: 3s; }

/* PC: 2カラムグリッド */
@media screen and (min-width: 769px) {
  .l-main__content-section-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12.8rem;
  }

  .l-main__content-section-image-area img {
    min-height: 30rem; /* 300px -> 30rem */
    object-fit: contain;
  }
}

/* SP: セクション縦並び用 */
@media screen and (max-width: 768px) {
  .l-main__content {
    overflow: visible;
    height: auto;
  }

  .l-main__content-section {
    position: relative;
    height: auto;
    opacity: 1;
    visibility: visible;
    padding: 0;
    z-index: 1;
  }

  .l-main__content-section.is-active {
    position: relative;
  }

  .l-main__content-section-text-area {
    text-align: center;
    width: 100%;
    height: 23rem;
    margin-bottom: 0;
  }

  .l-main__content-section-cv {
    width: 100%;
    text-align: center;
  }
}

.l-main__content-section-text-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.l-main__content-section-text {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-main-text);
}

/* anchor（SP時のみ：セクション一覧へ） */
.c-anchor {
  display: none;
}
.c-anchor__icon {
  display: block;
  background-image: url('/img/products/vhx-x1/201798001/icon_anchor.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* footer */
.l-footer {
  background-color: var(--color-main);
}

.l-footer__inner {
  max-width: 144rem; /* 1440px -> 144rem */
  margin: 0 auto;
  padding: 1.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.l-footer__content {
  display: flex;
  gap: 3.3rem;
}

.l-footer__link-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.3rem;
}

.l-footer__link-item+.l-footer__link-item {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1.6rem;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: #fff;
  }
}

.l-footer__link-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;

  &:hover {
    opacity: 0.8;
  }
}

.l-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1.6rem;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__content{
    flex-direction: column;
    gap: 0.8rem;
  }
  .l-footer__copyright{
    text-align: center;
    &::before {
      display: none;
    }
  }
}
/* ==========================================================================
   Intro Section
   ========================================================================== */
.l-main__intro-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 144rem;
  padding: 0 1.2rem;
  margin: 0 auto;
}

.l-main__intro-body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
}

.l-main__intro-text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  gap: 4.8rem;
  flex-basis: 69.6rem;
}

.l-main__intro-title {
  font-size: 7.2rem;
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
}

.l-main__intro-text-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.6rem;
}

.l-main__intro-text {
  font-size: 3.2rem;
  line-height: 1.625;
  color: var(--color-main-text);
  text-box: trim-both cap alphabetic;
}

.l-main__intro-cv {
  display: inline-block;
  margin-top: 3rem;
  padding: 1.2rem 4rem;
  background-color: var(--color-btn-primary);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 0.4rem 1.5rem rgba(220, 0, 47, 0.4); /* 0 4px 15px -> 0.4rem 1.5rem */
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, opacity 0.8s ease, transform 0.8s ease;
}

.l-main__intro-cv:hover {
  background-color: #b80028;
  transform: translateY(-0.2rem);
  box-shadow: 0 0.6rem 2rem rgba(220, 0, 47, 0.6);
}

.l-main__intro-panels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
}

.l-main__intro-panel {
  flex: 1;
  position: relative;

  & img {
    max-width: fit-content;
    margin: 0 auto;
  }
}

.l-main__intro-panel__caption {
  position: absolute;
  content: '';
  z-index: 1;
  left: 2.4rem;
  top: 0;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-caption-text);
  text-box: trim-both cap alphabetic;
}

.l-main__intro-panel--01 {
  & img {
    width: 24.4rem;
    aspect-ratio: 488/936;
  }
}

.l-main__intro-panel--02 {
  margin-left: -1.8rem;
  & img {
    width: 24.4rem;
    aspect-ratio: 488/836;
  }
}

.l-main__intro-panel--03 {
  margin-left: -1.8rem;
  & img {
    width: 24.4rem;
    aspect-ratio: 488/1128;
  }
}

.l-main__intro-panel--04 {
  margin-bottom: -5rem;
  padding-left: 0;
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 0;
  left: 50%;
  /* u-translateX-center クラスで制御 */
  & img {
    width: 32rem;
    aspect-ratio: 320/306;
  }
}
@media screen and (min-width: 769px) {
  .l-main__intro-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 67.2rem;
  }
}

@media screen and (max-width: 768px) {
  .l-main__intro-inner{
    gap: 2.4rem;
    padding: 4rem 0 5.6rem;
  }
  .l-main__intro-title{
    line-height: 1;
    font-size: 4rem;
  }
  .l-main__intro-text-wrap{
    gap: 0.8rem;
  }
  .l-main__intro-text{
    font-size: 2.2rem;
  }
  .l-main__intro-text-area {
    text-align: center;
    gap: 2.4rem;
    flex-basis: 100%;
    padding: 0 1.5rem;
  }

  .l-main__intro-cv {
    width: 100%;
    text-align: center;
  }

  .l-main__intro-panels {
    min-height: 38.1rem;
  }
  .l-main__intro-panel--01 {
    & img {
      width: 13.2rem;
    }
  }
  .l-main__intro-panel--02 {
    margin-left: -1rem;
    & img {
      width: 13.2rem;
    }
  }
  .l-main__intro-panel--03 {
    margin-left: -1rem;
    & img {
      width: 13.2rem;
    }
  }
  .l-main__intro-panel--04{
    margin-bottom: -0.4rem;
    & img {
      width: 17.2rem;
    }
  }
  .l-main__intro-panel{
  }
  .l-main__intro-panel__caption{
    font-size: 1.5rem;
    left: 1.3rem;
  }
}

/* ==========================================================================
   Section Backgrounds
   ========================================================================== */
#section1::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_001.jpg');
  background-position: center;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 100%;
}

#section2::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_002.jpg');
}

#section3::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_003.jpg');
}

#section4::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_004.jpg');
  background-position: left top;
}

#section5::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_005.jpg');
  bottom: -9rem;
  height: calc(100% + 9rem);
}

#section6::before{
  background-image: url('/img/products/vhx-x1/201798001/bg_section_006.jpg');
}

@media screen and (max-width: 768px) {
  #section1 {
    background: radial-gradient(33.02% 58.7% at 50.73% 36.02%, #FFF 0%, #F0F1F2 100%);
  }
  #section1::before {
    background-image: url('/img/products/vhx-x1/201798001/bg_section_001_sp.jpg');
    height: 81rem;
  }

  #section5::before{
    bottom: 0;
    height: 23rem;
  }
  #section6::before {
    background-image: url('/img/products/vhx-x1/201798001/bg_section_006_sp.jpg');
  }
}

/* ==========================================================================
   components
   ========================================================================== */

.l-main__content-cv{
  width: 100%;
  position: absolute;
  bottom: 4.8rem;
  left: 0;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ページトップへアンカー（SP時のみ表示・JSで位置・表示制御） */
.l-main__page-top-anchor {
  display: none;
}
.l-main__page-top-anchor__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.l-main__page-top-anchor__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.l-main__content-cv-inner{
  position: relative;
  width: 144rem;
  margin: 0 auto;
}

/* セクション切替で is-active 付与。表示開始は transition-delay で制御（変更時はCSSのみ修正） */
.l-main__content-cv.is-active {
  opacity: 1;
  transform: translate(var(--translate-x, var(--end-x, 0)), var(--end-y));
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--cv-show-delay, 1s);
}

.c-cv-btn__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.8rem;
}
.c-cv-btn__wrap--bg-gray {
  padding: 1.6rem;
  background: rgba(34, 34, 34, 0.60);
  box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.25); /* 16px -> 1.6rem */
  backdrop-filter: blur(0.8rem);
  border-radius: 0.8rem;
  width: fit-content;
}

.c-cv-btn__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 22.6rem;
  min-height: 6.4rem;
  gap: 0.8rem;
  padding: 2rem 2.4rem;
  border-radius: 0.8rem;
  flex: 1 1 0;
  overflow: hidden;
}
.c-cv-btn__item--small {
  min-height: 4.8rem;
  padding: 1.4rem 1.2rem;
}
.c-cv-btn__item-text {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.45;
}
.c-cv-btn__item-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.c-cv-btn__item--small .c-cv-btn__item-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.c-cv-btn__item--catalog {
  & .c-cv-btn__item-icon {
    background-image: url('/img/products/vhx-x1/201798001/icon_cv-btn_catalog.svg');
  }
}
.c-cv-btn__item--price {
  & .c-cv-btn__item-icon {
    background-image: url('/img/products/vhx-x1/201798001/icon_cv-btn_price.svg');
  }
}
.c-cv-btn__item--demo {
  & .c-cv-btn__item-icon {
    background-image: url('/img/products/vhx-x1/201798001/icon_cv-btn_demo.svg');
  }
}
.c-cv-btn__item--primary {
  position: relative;
  background: var(--bgColor-btn-primary);
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.30) inset;
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--color-white);
  z-index: 1;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradation, linear-gradient(90deg, var(--blue, #5C98FF) 0%, var(--purple, #8548FE) 100%));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: 0.8rem;
  }
  &:hover{
    &::before {
      opacity: 1;
    }
  }
}
.c-cv-btn__item--secondary {
  position: relative;
  background: var(--bgColor-btn-secondary);
  border: 1px solid rgba(34, 34, 34, 0.10);
  color: var(--color-main-text);
  z-index: 1;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(34, 34, 34, 0.10) 0%, rgba(34, 34, 34, 0.10) 100%), #FFF;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: 0.8rem;
  }
  &:hover{
    &::before {
      opacity: 1;
    }
  }
}

@media screen and (max-width: 768px) {
  .c-cv-btn__wrap--bg-gray{
    margin: 0 auto;
    padding: 0.8rem;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    width: 100%;
    backdrop-filter: blur(0.8rem);
  }
  .c-cv-btn__item{
    min-width: auto;
    min-height: auto;
    height: 4.4rem;
    padding: 1.6rem 1.2rem;
  }
  .c-cv-btn__item-text {
    font-size: 1.2rem;
  }
  .c-cv-btn__item-icon{
    width: 1.6rem;
    height: 1.6rem;
  }

  .l-main__intro-inner .c-cv-btn__wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    padding: 0 2.4rem;
  }

  .l-main__intro-inner .l-main__intro-panels + .c-cv-btn__wrap{
    display: grid !important;
  }

  .l-main__intro-inner .c-cv-btn__item--primary{
    grid-column: span 2;
    height: 5.6rem;
    padding: 1.6rem 2.4rem;

    & .c-cv-btn__item-text{
      font-size: 1.8rem;
    }
  }
  .l-main__content-cv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .l-main__content-cv.is-hidden {
    display: none;
  }
  .l-main__content-cv:not(.is-hidden) {
    display: flex;
  }
  .l-main__content-cv:not(.is-active) {
    pointer-events: none;
  }
  .l-main__content-cv.is-active {
    opacity: 1;
    transition: opacity 0.3s ease;
    transition-delay: 0s;
  }
  .l-main__content-cv.is-active.is-above-footer {
    bottom: calc(var(--cv-bottom, 0));
  }
  .l-main__content-cv-inner {
    width: 100%;
  }

  /* ページトップへアンカー: l-main__content-cv の 1.5rem 上、右 0.8rem。section2以降で表示、footerで高さ考慮して停止 */
  .l-main__page-top-anchor {
    display: flex;
    position: fixed;
    right: 0.8rem;
    bottom: var(--page-top-anchor-bottom, 8rem);
    z-index: 12;
    width: 4.8rem;
    height: 4.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .l-main__page-top-anchor.is-hidden {
    display: none;
  }
  .l-main__page-top-anchor:not(.is-hidden) {
    display: flex;
  }
  .l-main__page-top-anchor:not(.is-active) {
    pointer-events: none;
  }
  .l-main__page-top-anchor.is-active {
    opacity: 1;
  }
  .l-main__page-top-anchor__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid #DDD;
    background-color: var(--color-white);
    border-radius: 50%;
  }
  .l-main__page-top-anchor__link::after {
    content: '';
    width: 1.1rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15' fill='none'%3E%3Cpath d='M0.5 4.5L5.5 0.5L10.5 4.5' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.5 13.6328V1.63281' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* anchor: SP時のみ表示、枠線はCSSで再現 */
  .c-anchor {
    display: flex;
    margin: 0 1.5rem;
    padding: 1.6rem;
    flex-direction: column;
    border-radius: 0.8rem;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 0 2.4rem 0 rgba(57, 86, 143, 0.08);
    backdrop-filter: blur(0.4rem);
  }
  .c-anchor__list{
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .c-anchor__item {
    list-style: none;
  }
  .c-anchor__item + .c-anchor__item {
    border-top: 1px solid #DDD;
  }
  .c-anchor__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    height: 5.6rem;
    padding: 0 1.6rem;
    width: 100%;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
  }
  .c-anchor__link-text{
    font-weight: bold;
    line-height: 1.15;
  }
  .c-anchor__icon {
    width: 2.6rem;
    height: 1.6rem;
    background-image: url('/img/products/vhx-x1/201798001/icon_anchor.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}