@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap'); */
:root {
  --MAN_POSITION:850px;
}
#page.site{
  width: 100%;
  height: fit-content;
  max-height: 1000px;
}
main{
  width: 100%;
  height: 100%;
}
.jumbotron-content{
  display: none;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
}
.image:not(:first-child) {
    opacity: 0;
}

.image.active {
    opacity: 1;
}
.image_sp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
}
.image_sp:not(:first-child) {
    opacity: 0;
}

.image_sp.active {
    opacity: 1;
}
.image2{
    position: absolute;
    display: block;
    width: 50px;
}
.kumo{
    position: absolute;
    top: 0px;
    opacity: 0.5;
    animation: kumo_move 2000ms infinite forwards;
}
#base{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}
#base_sp{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}
@keyframes kumo_move {
  0% { transform: translate(0, 0); } /* 初期位置 */
  50% { transform: translate(0, -20px); } /* 頂点（上に50px移動） */
  100% { transform: translate(0, 0); } /* 初期位置に戻る */
}
/*  footer領域  */
div.site-bottom{
	position: absolute;
  top: 1200px;
	display: block;
	width: 100%;
	text-align: center;
}
.site-info{
	display: inline;
}
.site-copyright{
	display: inline;
}
#colophon div.site-credit{
	display: none;
}

/* 跳ねるアニメーション */
@keyframes jump {
    0% { transform: translate(0, 0); } 
    50% { transform: translate(0, -50px); }
    100% { transform: translate(0, 0); } 
  }

.jumping {
    animation: jump 0.6s ease-in-out forwards; 
}


/* @media screen and (min-width: 767px){ */
@media screen and (min-width: 980px){
/* 1024pxまでの幅の場合に適応される */
body{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
}
  #mainvisual{
      position: relative;
      top: -100px;
      left: 0px;
      display: block;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      background-color: #9fa6b0;
      overflow: hidden;
  }
    #mainvisual img{
      /* filter: sepia(65%) blur(2px) saturate(80%); */
    }
    #mainvisual .yoru{
      /* filter: brightness(50%); */
    }
    #mainvisual .yoake{
      filter: brightness(70%);
    }
    #mainvisual .hiru{
      /* filter: brightness(120%); */
    }
    #mainvisual .yuuake{
      filter: brightness(70%);
    }
  #base{
    visibility: visible;
  }
  #base_sp{
    visibility: hidden;
  }
  #ground_sp{
    position: absolute;
    top :0px;
    display: none;
  }
  .image{
    display: block;
  }

  .image_sp{
    display: none;
  }
  #catch_copy_pc{
    display: block;
  }
  #catch_copy_sp{
    display: none;
  }
  .page_title{
      position: absolute;
      top: 150px;
      left: 5%;
      /* font-family: "BIZ UDPGothic", sans-serif; */
  }
  .catch_all{
      font-family: 'Noto Sans JP', sans-serif;
      /* font-family: 'Noto Serif JP', sans-serif; */
      font-weight: 600;
      font-size:calc((100vw - 320px) / 24 + 14px);
      line-height: 2em;
      letter-spacing: 0.3em;
      color: #fff;
      text-shadow: 0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,
      0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,
      0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1);
  }
  p.catch_phrase_1{
      position: absolute;
      top: 70px;
      left: 30%;
  /* filter:grayscale(50%) sepia(100%) brightness(50%); */
  }
  p.catch_phrase_2{
      position: absolute;
      top: 200px;
      left: 20%;
  /* filter:grayscale(50%) sepia(100%) brightness(50%); */
  /* filter:sepia(100%) brightness(50%); */
  }
#mainvisual #human_gp .wp-block-group{
  position: absolute;
  top: 0px;
  display: block;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  z-index: 100;
}
#human_gp{
  display: none;
}

#human_gp img{
  /* filter:grayscale(100%) sepia(60%) brightness(50%) contrast(80%); */
}

.image-container {
  display: inline-block; /* 親要素の幅を画像に合わせる */
  position: relative; 
}
.image-container::after {
  content: '';
  position: absolute;
  bottom: -30px; /* 画像の下に影を配置 */
  left: 50%;
  transform: translateX(-70%) rotateX(85deg); /* 影を斜めにする */
  width: 80%; /* 影の幅 */
  height: 60px; /* 影の高さ */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(10px); /* 影をぼかす */
  /* z-index: -1;  */
  /* 画像の下に配置 */
}

#img_01{
  position: absolute;
  bottom: 20%;
  left: 12%;
  width: 100px;
}
#img_02{
  position: absolute;
  bottom: 23%;
  left: 25%;
  width: 45px;
}
#img_03{
  position: absolute;
  bottom: 28%;
  left: 30%;
  width: 45px;
}
#img_04{
  position: absolute;
  bottom: 24%;
  left: 40%;
  width: 50px;
}
#img_05{
  position: absolute;
  bottom: 20%;
  left: 50%;
  width: 50px;
}
#img_06{
  position: absolute;
  bottom: 18%;
  left: 75%;
  width: 50px;
}
#img_07{
  position: absolute;
  bottom: 15%;
  left: 91%;
  width: 50px;
  /* filter:grayscale() sepia(); */
}
#car01{
    position: absolute;
    bottom: 10%;
    left: 0px;
    display: block;
    width: 130px;
}
#bycle01{
    position: absolute;
    bottom: 14%;
    right: 0px;
    display: block;
    width: 100px;
}
#frog {
    position: absolute; /* または relative と display: block; など、配置に合わせて調整 */
    bottom: 20%;
    left: 60%;
    /* transform: translateX(-50%); */
    display: block;
    width: 50px;
}
.button{
  position: absolute;
  bottom:20%;
  z-index: 2000;
}
  /*  footer領域  */
  div.site-bottom{
    position: absolute;
    top: 900px;
    display: block;
    width: 100%;
    text-align: center;
  }

}
/* @media screen and  (max-width:768px){ */
@media screen and  (max-width:979px){
/* 768pxまでの幅の場合に適応される */

body{
  width: 99%;
  height: 1300px;
  box-sizing: border-box;
  overflow: hidden;
}
  #mainvisual{
      position: relative;
      top: -50px;
      left: 0px;
      display: block;
      width: 100%;
      height: 1300px;
      margin: 0px;
      padding: 0px;
      background-color: #9fa6b0;
      overflow-x: hidden;
}
    #mainvisual img{
      /* filter: sepia(70%) blur(1px) saturate(90%); */
    }
    #mainvisual .yoru{
      /* filter: brightness(80%); */
    }
    #mainvisual .yoake{
      /* filter: brightness(100%); */
    }
    #mainvisual .hiru{
      /* filter: brightness(120%); */
    }
    #mainvisual .yuuake{
      /* filter: brightness(100%); */
    }
  #base{
    visibility: hidden;
  }
  #base_sp{
    visibility: visible;
  }
  #ground_sp{
    position: absolute;
    top :0px;
  }
  .image{
    display: none;
  }

  .image_sp{
    display: block;
  }
  #catch_copy_pc{
    display: none;
  }
  #catch_copy_sp{
    display: block;
  }

  .page_title{
      position: absolute;
      top: 90px;
      left: 0%;
      font-family: "BIZ UDPGothic", sans-serif;
      font-weight: bold;
      color: #fff;
  }
    .catch_all{
      font-family: 'Noto Sans JP', sans-serif;
      /* font-family: 'Noto Serif JP', sans-serif; */
      font-weight: 600;
      font-size:calc((100vw - 320px) / 24 + 14px);
      line-height: 2em;
      letter-spacing: 0.3em;
      color: #fff;
      width: 100%;
      display: inline-block;
      text-align: center;
      text-shadow: 0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,
      0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,0px 0px 10px #45301C,
      0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1),0px 0px 20px hsla(60,70%,100%,1);
  }

  p.catch_phrase_1{
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%,0%);
      padding: 0px;
      font-family: "BIZ UDPGothic", sans-serif;
      font-size:calc((100vw - 320px) / 24 + 36px);
      line-height: 2em;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: beige;
      /* color: #494949; */
      text-shadow: 0px 0px 5px hsla(60,100%,25%,1);
  }
  p.catch_phrase_2{
      position: absolute;
      top: 110px;
      left: 50%;
      transform: translate(-50%,0%);
      font-family: "BIZ UDPGothic", sans-serif;
      font-size:calc((100vw - 320px) / 24 + 36px);
      line-height: 2em;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: beige;
      /* color: #494949; */
      text-shadow: 0px 0px 5px hsla(60,100%,25%,1);
  }
  p.catch_phrase_3{
      position: absolute;
      top: 190px;
      left: 50%;
      transform: translate(-50%,0%);
      font-family: "BIZ UDPGothic", sans-serif;
      font-size:calc((100vw - 320px) / 24 + 36px);
      line-height: 2em;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: beige;
      /* color: #494949; */
      text-shadow: 0px 0px 5px hsla(60,100%,25%,1);
  }
  p.catch_phrase_4{
      position: absolute;
      top: 270px;
      left: 50%;
      transform: translate(-50%,0%);
      font-family: "BIZ UDPGothic", sans-serif;
      font-size:calc((100vw - 320px) / 24 + 36px);
      line-height: 2em;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: beige;
      /* color: #494949; */
      text-shadow: 0px 0px 5px hsla(60,100%,25%,1);
  }
#mainvisual #human_gp .wp-block-group{
  position: absolute;
  top: 0px;
  display: block;
  width: 100%;
  height: 1300px;
  z-index: 100;

}
#human_gp img{
  /* filter:grayscale(100%) sepia(60%) brightness(50%); */
  filter:grayscale(100%) sepia(60%);

}

#mainvisual #human_gp .wp-block-group::-webkit-scrollbar{
  display:none;
}
.image-container {
  display: inline-block; /* 親要素の幅を画像に合わせる */
  position: relative; 
}
.image-container::after {
  content: '';
  position: absolute;
  bottom: -30px; /* 画像の下に影を配置 */
  left: 50%;
  transform: translateX(-70%) rotateX(85deg); /* 影を斜めにする */
  width: 80%; /* 影の幅 */
  height: 60px; /* 影の高さ */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(10px);
  /* z-index: -1;  */
  /* 画像の下に配置 */
}


#img_01{
  position: absolute;
  bottom: 20%;
  left: 0%;
  width: 100px;
  display: none;
}
#img_02{
  position: absolute;
  bottom: 23%;
  left: 10%;
  width: 100px;
  display: none;
}
#img_03{
  position: absolute;
  bottom: 28%;
  left: 30%;
  width: 100px;
  display: none;
}
#img_04{
  position: absolute;
  bottom: 24%;
  left: 50%;
  width: 100px;
  display: none;
}
#img_05{
  position: absolute;
  bottom: 40%;
  left: 60%;
  width: 50px;
}
#img_06{
  position: absolute;
  bottom: 40%;
  left: 30%;
  width: 100px;
}
#img_07{
  position: absolute;
    bottom: 10%;
  left: 45%;
  width: 50px;
  display: none;
}
  #car01{
      position: absolute;
      bottom: 20%;
      left: 0px;
      display: block;
      width: 100px;
  }
  #bycle01{
      position: absolute;
    bottom: 30%;
      right: 0px;
      display: block;
      width: 100px;
  }
  #frog {
      position: absolute; /* または relative と display: block; など、配置に合わせて調整 */
    bottom: 35%;
      left: 70%;
      /* transform: translateX(-50%); */
      display: block;
      width: 50px;
  }
.button{
  position: absolute;
  bottom:25%;
  z-index: 2000;
}
  /*  footer領域  */
  div.site-bottom{
    position: absolute;
    top: 1100px;
    display: block;
    width: 100%;
    text-align: center;
    z-index: 1000;
  }
  
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */

}