@charset "UTF-8";
.hamburger span {
  background: var(--sub-color);
}
.hamburger.is-active span {
  background: var(--primary-color);
}

.sec__about {
  position: relative;
  width: 100%;
}
.sec__about .main-ttl {
  position: absolute;
  left: 0.5em;
  top: 0.4em;
  z-index: 1;
}
.sec__about .red-txt {
  z-index: 1;
}

.flame-box {
  position: relative;
  width: 100%;
  height: 180vh; /* スクロールさせる長さ（お好みで調整） */
}
.bg-about {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 画面いっぱいに表示 */
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color); /* フレームの色（背景色） */
}
.bg-about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 初期状態はフルサイズ */
  transform: scale(1);
  transition: transform 0.1s ease-out; /* 滑らかに動かす */
}
.about_content {
  position: relative;
  z-index: 2;
  background-color: var(--bg-color); /* 背景を白にして画像を隠す */
  padding: 0;
  margin: -100px 0 2em;
}
.about_content .inner {
  margin-bottom: 2em;
}

.loopslider {
  background: linear-gradient(to bottom, transparent 50%, var(--sub-color) 50%);
}

@media (min-width: 480px) {
}

@media (min-width: 768px) {
  .content-l::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
    z-index: -1; /* Swiperなどのコンテンツより下に配置 */
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }

  /* JSでクラスが付与されたとき、背景（疑似要素）を消す */
  .content-l.is-hidden-bg::after {
    opacity: 0;
    visibility: hidden;
  }
  .content-l .menu-item a:hover {
    color: var(--primary-color);
  }
  .content-l.is-hidden-bg .menu-item a:hover {
    color: var(--secondary-color);
  }
}

@media (min-width: 1025px) {
  .about_content {
    margin: -140px 0 2em;
  }
}