@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}
html {
  scroll-behavior: smooth;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));

  letter-spacing: 0.005rem;
  color: #666;
}

/* title drop shadow */

h2#gsap_01_hero_h2 {
  text-shadow: 0 4px 2px #00000044;
}

/* loading */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 高いz-index値を指定して他の要素の上に表示 */
  opacity: 1; /* デフォルトの透明度を1に設定 */
  transition: opacity 0.5s ease-in-out; /* 0.5秒で透明度を変更 */
}

.fade-out {
  opacity: 0 !important; /* フェードアウトのために透明度を0に設定 */
}

/* step arrow */

.step--arrow {
  position: relative;
}
.step--arrow:not(:last-child)::before {
  content: ""; /* 矢印の文字 */
  width: 0px;
  height: 0px;
  border: 15px solid #bd9fcc;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  right: 2%; /* ボックスの外側の距離 */
  transform: rotate(45deg) translateY(-50%); /* 縦方向の中心を基準にする */
  z-index: 10; /* 必要に応じて矢印を前面に表示 */
}
@media screen and (min-width: 1355px) and (max-width: 1504px) {
  .step--arrow:not(:last-child):before {
    top: 58% !important; /* 縦方向の中心に配置 */
  }
}

@media screen and (min-width: 1280px) and (max-width: 1354px) {
  .step--arrow:not(:last-child):before {
    top: 58% !important; /* 縦方向の中心に配置 */
  }
}

@media screen and (min-width: 1170px) and (max-width: 1279px) {
  .step--arrow:not(:last-child):before {
    top: 62% !important; /* 縦方向の中心に配置 */
  }
}
@media screen and (min-width: 1054px) and (max-width: 1125px) {
  .step--arrow:not(:last-child):before {
    top: 58% !important; /* 縦方向の中心に配置 */
  }
}


@media screen and (min-width: 1024px) and (max-width: 1053px) {
  .step--arrow:not(:last-child)::before {
    top: 58% !important; /* 縦方向の中心に配置 */
  }
}

@media screen and (min-width: 980px) and (max-width: 1023px) {
  .step--arrow:not(:last-child)::before {
    border-width: 12px;
    right: -4%; /* ボックスの外側の距離 */
    top: 45% !important; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 41% !important; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}


@media screen and (min-width: 870px) and (max-width: 979px) {
  .step--arrow:not(:last-child)::before {
    border-width: 12px;
    right: -4%; /* ボックスの外側の距離 */
    top: 48%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 44%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 869px) {
  .step--arrow:not(:last-child)::before {
    border-width: 12px;
    right: -4%; /* ボックスの外側の距離 */
    top: 50%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 45%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}

@media screen and (min-width: 630px) and (max-width: 767px) {
  .step--arrow:not(:last-child)::before {
    border-width: 12px;
    right: -4%; /* ボックスの外側の距離 */
    top: 52%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 48%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}

@media screen and (min-width: 500px) and (max-width: 629px) {


  .step--arrow:not(:last-child)::before {
    border-width: 12px;
    right: -4%; /* ボックスの外側の距離 */
    top: 54%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 50%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }


}

@media screen and (min-width: 392px) and (max-width: 499px) {

  .step--arrow:not(:last-child)::before {
    border-width: 10px;
    right: -3.5%; /* ボックスの外側の距離 */
    top: 58%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 55%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}

@media screen and (max-width: 391px) {
  .step--arrow:not(:last-child)::before {
    border-width: 10px;
    right: -3.5%; /* ボックスの外側の距離 */
    top: 60%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(3)::before {
    top: 56%; /* 縦方向の中心に配置 */
  }
  .step--arrow:nth-of-type(4)::before {
    display: none;
  }
  .step--arrow:nth-of-type(2)::before {
    display: none;
  }
}


@media screen and (min-width: 1024px) {
  .pc--box--height--fix {
    min-height: 140px;
  }
}