@charset "UTF-8";

/* ================================================== */
/* hero */
/* ================================================== */
#hero {
  background-color: #000000;
  height: 100vh; /* 画面いっぱいに表示する場合 */
  overflow: hidden;
  position: relative;
  width: 100%;  
}

#hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* 動画を要素に合わせて表示 */
  opacity: 0.6;
}

#hero .hero-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* 動画の上に表示 */
  color: white; /* テキストの色 */
}

#hero .hero-content .title.is-1 {
  line-height: 1;
  margin-bottom: var(--margin-bottom-card-content);
}

@media screen and (max-width: 1023px) {
  #hero .hero-content h1 {
    font-size: 4.4rem;
  }
}

@media screen and (max-width: 768px) {
  #hero .hero-content {
    width: 335px;
  }
}

/* ================================================== */
/* problem */
/* ================================================== */
@media screen and (max-width: 768px) {
  #problem .title.is-4 {
    font-size: 2rem;
  }
}

/* ================================================== */
/* solution */
/* ================================================== */
@media screen and (max-width: 768px) {
  #solution .title.is-3 {
    font-size: 2rem;
  }
}

/* ================================================== */
/* benefit */
/* ================================================== */
#benefit {
  background: url(../images/benefit_background.png) no-repeat center center var(--color-navy);
  background-attachment: fixed;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  #benefit {
    background-image: none;
  }
}

/* ================================================== */
/* evidence */
/* ================================================== */
@media screen and (max-width: 768px) {
  #evidence .title.is-2 {
    font-size: 3.4rem;
  }
}

/* ================================================== */
/* offer */
/* ================================================== */
#offer {
  background: url(../images/offer_background.jpg) no-repeat center center var(--color-navy);
  background-size: cover;
}