@charset "UTF-8";

main {
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

section {
  min-height: 100vh;
  scroll-snap-align: start;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center; 
  align-items: center;     
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
  width: 100%;
  max-width: 34em;
  margin: 0 auto;
}

.text-iiam {
  padding-left: 1rem;
}

h2 {
  font-size: 4rem;
  font-family: var(--font-sub);
  color: #000000;
}

p {
  font-size: 2rem;
  font-family: var(--font-body);
  color: #000000;
}

.night h2 ,
.night p {
  color: #ffffff;
}

#create h2,
#create p {
  color: #000000;
}

#create {
  background-image: url(../img/noon/about/noon_about_LightOff.webp);
}

.light #create {
  background-image: url(../img/noon/about/noon_about_LightOn.webp);
}


#think {
  background-image: url(../img/noon/about/noon_about_think.webp);
}

.night #think {
  background-image: url(../img/night/about/night_about_think.webp);
}

#build {
  background-image: url(../img/noon/about/noon_about_build.webp);
}

.night #build {
  background-image: url(../img/night/about/night_about_build.webp);
}

#forward {
  background-color: #dddddd;
  position: relative;
}

.night #forward {
  background-color: #555555;
}

/* ------------------------------歯車------------------------------ */
#forward {
  position: relative;
}

.gears-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.gear {
  transform-box: fill-box;
  transform-origin: center;
}

.gear1 { animation: rotate 5s linear infinite; }
.gear2 { animation: rotate 12s linear infinite; }
.gear3 { animation: rotate 8s linear infinite reverse; }
.gear4 { animation: rotate 6s linear infinite reverse; }

@keyframes rotate {
  to { transform: rotate(360deg); }
}

/* ------------------------------PC------------------------------ */
@media (min-width: 800px) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .text-wrap {
    grid-column: 1;
    padding-left: 5rem;
    gap: 1rem;
  }

  section:nth-of-type(even) .text-wrap {
    grid-column: 2;
  }

  h2 {
    font-size: 5rem;
  }

  p {
    font-size: 3rem;
  }

  #create {
    background-image: url(../img/noon/about/noon_pc_LightOff.webp);
  }

  body.light #create {
    background-image: url(../img/noon/about/noon_pc_LightOn.webp);
  }

  #think {
    background-image: url(../img/noon/about/noon_pc_think.webp);
    background-position: center;
  }

  .night #think {
    background-image: url(../img/night/about/night_pc_think.webp);
  }

  #build {
    background-image: url(../img/noon/about/noon_pc_build.webp);
  }

  .night #build {
    background-image: url(../img/night/about/night_pc_build.webp);
  }

 #forward {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* 歯車：左列 */
  .gears-bg {
    position: static;   /* ← absolute解除が超重要 */
    grid-column: 1;
    justify-self: start;
    width: 90%;
    height: auto;
    opacity: 0.3;
  }
}