/* reset default style */
.contents {
  overflow: visible !important;
}

html {
  font-size: 10px;
}

html,
body {
  overflow: smooth;
  margin: 0;
}

main {
  padding-bottom: 0 !important;
}


img {
  display: block;
  width: 100%;
  height: auto;
}

.main {
  max-width: 100vw;
  background-color: #e0f3dd;
}

h1 {
  margin: 0 !important;
}

.main_content {
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  z-index: 1;
  animation-delay: .5s;
  overflow: hidden;
}

@media screen and (min-width:768px) {
  .main_content {
    margin: auto;
    max-width: 780px;
    z-index: 2;
  }
}

@media screen and (max-width:767px) {
  .main_content {
    max-width: max-content;
  }
}

.main_content a {
  transition: .3s;
}

@media screen and (min-width:768px) {
  .main_content h1 {
    margin: 0;
  }
}

@media screen and (max-width:767px) {

  .main_content,
  .main_content h1,
  .main_content h2 {
    font-size: 1.38vw;
  }

  .main {
    overflow: hidden;
  }
}

.main_content p {
  letter-spacing: 0;
  font-weight: 500;
}

.main_content a {
  display: block;
  text-decoration: none;
}

.main_content h2 {
  position: relative;
}

.main_content .sp {
  display: none !important;
}

@media screen and (max-width: 500px) {
  .main_content .pc {
    display: none !important;
  }

  .main_content .sp {
    display: block !important;
  }
}

.position {
  position: relative;
}


/* ==============================
  fv
  ============================== */
.fv_ttl {
  position: absolute;
  width: 85%;
  top: 24%;
  left: 0;
  right: 0;
  margin: auto;
}

.fv_photo img,
.fv02_txt img {
  position: absolute;
}

.fv_photo .photo01 {
  width: 61%;
  top: 9%;
  left: 3%;
}

.fv_photo .photo02 {
  width: 38%;
  top: 3%;
  left: 57%;
}

.fv02_txt .txt01 {
  width: 64%;
  top: 66%;
  left: 4%;
}

.fv02_txt .txt02 {
  width: 92%;
  top: 75%;
  left: 1%;
  right: 0%;
  margin: auto;
}

.fv02_txt img {
  clip-path: inset(0 100% 0 0);
}

.fv02_txt .txt01.active {
  clip-path: inset(0 0% 0 0);
  transition: clip-path .5s ease-out;
  animation: backgroundMove 3s ease-in-out infinite alternate;
}

.fv02_txt .txt02.active {
  clip-path: inset(0 0% 0 0);
  transition: clip-path .5s ease-out .3s;
  animation: backgroundMove 3s ease-in-out infinite alternate;
}

@keyframes backgroundMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}


/* ==============================
  green_bg
  ============================== */
.green_bg {
  background-image: url(../img/bg_img.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 3em 0 4em;
}

.green_bg_contents {
  padding-bottom: 6.5em;
  opacity: 0;
}

.green_bg_contents.active {
  opacity: 1;
  animation: fadeSlideUp 0.6s ease-out forwards;
}

@keyframes fadeSlideUp {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.green_bg_contents_img {
  width: 69em;
  margin: auto;
}


/* ==============================
  howto
  ============================== */
.howto_link {
  position: absolute;
  width: 47em;
  left: 0;
  right: 0;
  margin: auto;
  top: 24.5%;
  transition: .3s;
}

.howto_link:hover {
  opacity: .6;
}


/* ==============================
  terms
  ============================== */
.terms_btn {
  position: absolute;
  width: 62em;
  left: 0;
  right: 0;
  margin: auto;
  top: 62%;
  transition: .3s;
  transition: .3s;
}

.terms_btn:hover {
  opacity: .6;
}


/* ==============================
  walk_rally_bg
  ============================== */
.walk_rally_bg {
  background-image: url(../img/walk_rally_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6em 0 3em;
}

.walk_rally_bg_contents {
  padding-bottom: 6.5em;
}

.walk_rally_bg_contents_img {
  width: 66em;
  margin: auto;
}

.walk_rally_ttl {
  width: 64em;
  margin: 0 auto 4em;
}

.walk_rally {
  width: 69em;
  margin: auto;
}

.walk_rally_btn {
  width: 69em;
  margin: 6em auto 9em;
  transition: .3s;
  animation: fluffySlow 2s ease-in-out infinite;
}

@keyframes fluffySlow {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(.97);
  }
}

.walk_rally_btn:hover {
  opacity: .6;
}


/* ==============================
  footer
  ============================== */
.main_content footer {
  text-align: center;
  background-color: #fff;
}

.main_content .footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em 0;
  margin: 0 auto;
}

.main_content .footer__link-item {
  margin: 0 2em;
  width: 30rem;
}

.main_content footer li {
  list-style: none;
}

.main_content .footer__link-item a {
  display: block;
}

.main_content .footer__link-item img {
  width: 100%;
}

.main_content .footer__copyright {
  font-size: 1.5em;
  opacity: 1;
  color: #fff;
  padding: 1.5em 0;
  background-color: #000;
  margin: 0;
}