@charset "UTF-8";

body{
  background:#C2F4F9;
  margin: 0;
  width: 100vw;
  padding: 0;
  overflow-x: hidden;
  background-image: url('pc背景3_アートボード\ 1.png'),url('pc背景3_アートボード\ 1.png');
  background-color: #c2f4f9;
  background-repeat: no-repeat,repeat;
  animation: diagonalMove 80s linear infinite;
  background-size: 5px 5px, 30%;
  overflow-x: hidden;
  padding-right:0;
  }


  /* アニメーションの基本設定 */
@keyframes diagonalMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }

}

.logo{
  text-align:center;
  margin:0 auto;
}

.logo-image{
    width:96vw;
    position: relative;
    margin-top:6vw;
}

.fixed-header{
  position: fixed;
  width: 100vw;
  height: 6vw;
  transition: 2.5s;
  z-index: 115;
  background-color: #00aeef;
  box-shadow: 0 3px 6px #fffa39;
  padding-top:0 auto;
  padding-bottom:0 auto;
  padding-left:3vw;
top:0vw;
left:0vw;
}



.logo2-image{
  height:5vw;
position:left;
margin-top:0.5vw;

}

ul{
  font-family: "rocknroll-one", sans-serif;
  font-weight: 400;
  font-style: normal; 
  list-style: none;
  display: flex;
  margin-top:-4vw;
  margin-left:20vw;
}

a {	
  text-decoration: none;
  color:#e9fffe;
  font-size:2vw;

}

li{
  margin:1vw 0 0 5vw;
}

nav {
  margin: 0 0 0 auto;
}

.gra{
  background: -moz-linear-gradient(top, #00aeef, #c2f4f9);
  background: -webkit-linear-gradient(top, #00aeef, #c2f4f9);
  background: linear-gradient(to bottom, #00aeef, #c2f4f9);
}
@keyframes fadeIn {
  0% {
    top: 45%;
    opacity: 0;
  }
  
  100% {
    top: 50%;
    opacity: 1;}
  }



.koumoku{
    border-top:#00aeef 1vw double;
    border-bottom:#00aeef 1vw double;
    text-align:center;
    font-family: "rocknroll-one", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color:#e9fffe;
}

.odai{
    width:20vw;
    height:8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:3vw;
    
    margin-left:5vw;
    margin-top:5vw;
    margin-bottom:5vw;

    font-family: "rocknroll-one", sans-serif;
    font-weight: 400;
    font-style: normal;


    color:#193554;
    border-radius:2vw;
    text-align: center;
    z-index:1;
    padding: 0.2em 0.5em;
    background: #e9fffe;
    border-left: solid 2.5vw #FFBC36;
    border-RIGHT: solid 2.5vw #ffbc36;
    box-shadow: 0px 2px 3px #193554;
}


.odai2{
  width:20vw;
  height:8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:3vw;
  
  margin-left:5vw;
  margin-top:20vw;
  margin-bottom:5vw;

  font-family: "rocknroll-one", sans-serif;
  font-weight: 400;
  font-style: normal;


  color:#193554;
  border-radius:2vw;
  text-align: center;
  z-index:1;
  padding: 0.2em 0.5em;
  background: #e9fffe;
  border-left: solid 2.5vw #FFBC36;
  border-RIGHT: solid 2.5vw #ffbc36;
  box-shadow: 0px 2px 3px #193554;
}

.odai3{
  width:20vw;
  height:8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:3vw;
  
  margin-left:5vw;
  margin-top:12vw;
  margin-bottom:2vw;

  font-family: "rocknroll-one", sans-serif;
  font-weight: 400;
  font-style: normal;


  color:#193554;
  border-radius:2vw;
  text-align: center;
  z-index:1;
  padding: 0.2em 0.5em;
  background: #e9fffe;
  border-left: solid 2.5vw #FFBC36;
  border-RIGHT: solid 2.5vw #ffbc36;
  box-shadow: 0px 2px 3px #193554;
}


.odai4{
  width:20vw;
  height:8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:3vw;
  
  margin-left:3vw;
  margin-top:30vw;
  margin-bottom:5vw;

  font-family: "rocknroll-one", sans-serif;
  font-weight: 400;
  font-style: normal;


  color:#193554;
  border-radius:2vw;
  text-align: center;
  z-index:1;
  padding: 0.2em 0.5em;
  background: #e9fffe;
  border-left: solid 2.5vw #FFBC36;
  border-RIGHT: solid 2.5vw #ffbc36;
  box-shadow: 0px 2px 3px #193554;
}




  .honbun2{
    font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:3vw;
    color:#193554;
    text-shadow:0.5px 0.5px 0.5px #00aeef;
    text-align:center;
    margin-bottom:10vw;
    line-height:2;
  }

  .honbun3{
    font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:2vw;
    color:#193554;
    text-shadow:0.5px 0.5px 0.5px #00aeef;
    text-align:center;
    line-height:2;
    position:relative;
  }

  .honbun4{
    position: absolute;/*絶対配置*/
        top: -8%;
        left: 0;
        right:0;
        margin:0 auto; 
        font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:1.5vw;
    color:#193554;
    text-shadow:0.1vw 0.1vw 0.5px #E9FFFE;
    margin-bottom:5vw;
    margin-right:1.5vw;
    line-height:2;
    z-index:3;
  }

  .honbun5{
        font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:1.8vw;
    color:#193554;
    text-shadow:0.1vw 0.1vw 0.5px #fffa39;
    margin-bottom:5vw;
    position:relative;
width:22vw;
margin-right:auto;
margin-left:auto;
display:block;
    line-height:2;
  }


  .memo-image{
    width:40vw;
    margin-top:-15vw;
    z-index:2;
    position:relative;
  }

  .info{
    font-size:3vw;
  }

.hinichi{
    border:#fffa39 1vw solid;
    border-radius: 2vw;;
    background-color: #fffa39;
    text-shadow:#193554 1px 1px 1px;
    color:#00aeef;
    width:25vw;
    font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align:center;
    height:27vw;
    line-height:2;
}

.hinichi2{
font-size:3.5vw;
font-family: "rocknroll-one", sans-serif;
font-weight: 400;
font-style: normal;
padding-top:0.5vw;
}

.hinichi3{
    font-family: "rocknroll-one", sans-serif;
font-weight: 400;
font-style: normal;
font-size:2vw;
margin-top:3vw;
margin-bottom:0.5vw;
margin-left:1.15vw;
width:22vw;
}

.hinichi4{
  font-family: "rocknroll-one", sans-serif;
font-weight: 400;
font-style: normal;
font-size:2vw;
margin-bottom:3vw;
margin-left:auto;
margin-right:auto;
width:22vw;
}

.kaijo{
    border:#f225b8 1vw solid;
    border-radius: 2vw;;
    background-color: #f225b8;
    text-shadow:#193554 1.5px 1.5px 1px;
    color:#fffa39;
    width:25vw;
    font-family: "biz-udpgothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align:center;
    height:27vw;
    margin-left:5vw;
    line-height:2;
}

.kaijo2{
font-size:3.5vw;
font-family: "rocknroll-one", sans-serif;
font-weight: 400;
font-style: normal;
padding-top:0.5vw;
}

.kaijo3{
    margin-top:3vw;
    font-family: "rocknroll-one", sans-serif;
font-weight: 400;
font-style: normal;
font-size:2.5vw;
}

.free{
    border:#00aeef 1vw solid;
    border-radius: 2vw;
    background-color: #00aeef;
    color:#193554;
    text-shadow:#E9FFFE 1.5px 1.5px 1px;
    width:25vw;
    font-size:3.5vw;
    font-family: "rocknroll-one", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align:center;
    height:27vw;
    margin-left:5vw;
    padding:0 auto;
    line-height:6;

    display: flex;
    align-items: center;
    justify-content: center;
}


.flex-container {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    width: 85%;

    margin: 0 auto; /* コンテナを中央に配置 */
    margin-top:10vw;
}

.flex-item {
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
}

.flex-container2 {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    width: 75%;

    margin-right: auto;
    margin-left:auto; /* コンテナを中央に配置 */
    margin-bottom:10vw;
}

.flex-item2 {
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
    margin-right: auto;
    margin-left:auto;
    margin-bottom:5vw;
}

.flex-item3 {
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
    width:30vw;
    vertical-align: top;
}


.flex-item6 {
  text-align: center;
  box-sizing: border-box; /* パディングを含めたサイズを計算 */
height:30vw;
  margin:0 auto;
  vertical-align: top;
}

.flex-container3 {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
   /* align-items: center; /* 要素を縦方向の中央に揃える */
    width:70vw;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10vw;
}

.flex-container4 {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    width: 90%;
    margin: 0 auto; /* コンテナを中央に配置 */
}

.flex-container5 {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    width: 55%;
    margin-left:12vw;
}

.flex-item5 {
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
}

.flex-item4 {
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
}

.theme {/*親div*/
    position: relative;/*相対配置*/
    }
  
  .theme p {
    position: absolute;/*絶対配置*/
    font-family: "rocknroll-one", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:3vw;
    }

  .theme-image {
    width: 40vw;
    margin-top:2.5vw;
    margin-right:5vw;
    }

    .guest2{
      background-color:#fffa39;
      box-shadow:#193554 1vw 1vw;
      color:#f225b8;
      text-align:center;
      font-family: "rocknroll-one", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size:2.9vw;
      text-shadow: 2px 2px 2px #e9fffe;
      margin-top:10vw;
      margin-right:auto;
      margin-left:auto;
      width:35vw;
      height:5vw;
      align-items: center;
      padding:1vw 2vw;
      transition: .3s;
      position:relative;
      z-index:4;

      
  }

  .botton{
    text-align: center;
    margin-top:-8.5vw;
  }



.guest2:hover {
  box-shadow: unset;
  transform: translate(4px,4px);
}

.guest2:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px #00aeef;
  border-bottom: none;
}

      .guest3{
        background-color:#00aeef;
        box-shadow:#193554 1vw 1vw;
        color:#c2f4f9;
        text-align:center;
        font-family: "rocknroll-one", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:2.2vw;
        text-shadow: 1px 1px 1px #f225b8;
        margin-top:-3vw;
        margin-right:auto;
        margin-left:auto;
        margin-bottom:4vw;
        height:5vw;
        align-items: center;
        padding:1vw 2vw;
        transition: .3s;
        text-decoration:none;
        position:absolute;
        top:333vw;
        right:14vw;
        width:22vw
    }



.guest3:hover {
    box-shadow: unset;
    transform: translate(4px,4px);
  }

.guest3:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px #00aeef;
    border-bottom: none;
  }

  .up{
    font-family: "rocknroll-one", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    height:90;
    position: relative;
}


.name{
  height: 20vw;
  z-index: 20;
  font-size:6.5vw;
  margin-top: 2.5vw;
  margin-left: 4vw;
  font-family: "rocknroll-one", sans-serif;
  font-weight:400;
  font-style: normal;
  color:#E9FFFE;
  text-shadow:3px 3px 1px#FFBC36;
}

.sawabig{
  z-index: 30;
  margin-top: -2vw;
  margin-left: 6vw;
  width:20vw;
  position:absolute;
  top:0%;
  left:10%;
}

.building{
  z-index: 10;
  position: absolute; 
  margin-top: -5vw;
  left: 0vw;
  width:95vw;
  height:40vw;
}

.mario{
  text-align: center;
  margin:0 auto;
  position: relative;
}

.gameback{
  margin-top: 12vw;
  text-align: center;
  width:69vw;
  position:relative;
  z-index:1;
}

.introduce{
  position: absolute;
  margin-top: 14vw;
  margin-left: 29vw;
  margin-right: 15vw;
  font-size:2.7vw;
  font-family: "rocknroll-one", sans-serif;
  font-style: normal;
  width:48vw;
  height:27vw;
  padding: 8vw;
  color:#e9fffe;
  text-shadow: #193554 0.2vw 0.2vw 1px;
  z-index:2;
}

.sawamozi{
  z-index: 50;
  height: 25.5vw;
  color: #FFF24B;
  font-size: 5vw;
  margin-top: 8vw;
  margin-left: 18vw;
  background-color: #193F62;
}

.kouichi{
  z-index: 40;
  color: #FFF24B;
  font-size: 5vw;
  margin-top: -4vw;
  margin-left: 10vw;
  background-color: #193554;
}

    .cm-image{
        width:60vw;
        margin: auto;
        display: block;
      }

      .smart-image{
        width:63vw;
        position:absolute;
        top:357.5vw;
        right: 0;
        left: 0;
        margin: 0 auto;
        z-index:1;
      }
  
      .smart-image2{
        width:63vw;
        position:absolute;
        top:397.6vw;
        right: 0;
        left: 0;
        margin: 0 auto;
        z-index:1;
      }

      .ohana {/*親div*/
        position: relative;/*相対配置*/
        transition: transform .3s;
        }
      
        .ohana-image{
            width:15vw;
            transition: transform .3s;
        }

        .ohana:hover .ohana-image {
            transform: scale(1.4, 1.4); /* カーソルが乗った時に画像を拡大 */
        }

        .ohana p {
            position: absolute;/*絶対配置*/
            font-family: "rocknroll-one", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size:2.3vw;
            }

            .twitter{
              position: relative;
              bottom:5vw;
              padding-right:10vw;
              width:20vw;
            }

            .insta{
              position:relative;
              margin-right:5vw;
              width:20vw;
            }

            .insta-image{
              width:20vw;
              margin-right:13vw;
            }

            .x-image{
              width:20vw;
              margin-left:3vw;
            }

            .twitter-tweet{
              width:30vw;
            }


          video{
            width:43vw;
            text-align:center;
            position:relative;
            z-index:2;
            margin-top:3.2vw;
          }

          .cm1{
            text-align: center;
            display: block;
            margin-bottom:12vw;
          }

          .cm2{
            text-align: center;
            display: block;
          }

          .under{
            background: linear-gradient(transparent 65%, #fffa39 20%);
          }

          .pen-image{
            width:15vw;
            position:absolute;
            top:13vw;
            left:7vw;
            z-index:3;
            transform:rotate(-85deg);
          }

          .pen-image2{
            width:15vw;
            position:absolute;
            top:-6vw;
            right:4vw;
            z-index:3;
            transform:rotate(30deg);
          }

          .marker-image{
            width:20vw;
            position:absolute;
            top:-6.2vw;
            right:20vw;
            transform:rotate(-15deg);
            z-index:2;
          }

          .memo-image2{
            width:8vw;
            position:absolute;
            top:6vw;
            right:10vw;
            transform:rotate(15deg);
            z-index:2;
          }

          .memo-image3{
            width:10vw;
            position:absolute;
            top:10vw;
            left:17vw;
            transform:rotate(10deg);
            z-index:2;
          }

          .memo-image4{
            width:6vw;
            position:absolute;
            top:15vw;
            right:15vw;
            transform:rotate(-5deg);
            z-index:2;
          }

          .memo-image5{
            width:6vw;
            position:absolute;
            top:8vw;
            left:8vw;
            transform:rotate(-7deg);
            z-index:2;
          }

          .memo-image6{
            width:10vw;
            position:absolute;
            top:-3vw;
            left:15vw;
            transform:rotate(15deg);
            z-index:2;
          }

          .clip-image{
            width:4vw;
            position:absolute;
            top:10vw;
            right:22vw;
            transform:rotate(-15deg);
            z-index:2;
          }

          .tuta-image{
            height:20vw;
            position:absolute;
            top:45vw;
            left:1vw;
            z-index:3;
          }

          .tuta-image2{
            height:25vw;
            position:absolute;
            top:40vw;
            left:0vw;
            z-index:1;
          }

          
          .tuta-image3{
            height:15vw;
            position:absolute;
            top:50vw;
            left:4vw;
            z-index:2;
          }

          .tuta-image4{
            height:20vw;
            position:absolute;
            top:45vw;
            right:1vw;
            z-index:3;
            transform: scale(-1, 1); 
          }

          .tuta-image5{
            height:25vw;
            position:absolute;
            top:40vw;
            right:0vw;
            z-index:1;
            transform: scale(-1, 1); 
          }

          
          .tuta-image6{
            height:15vw;
            position:absolute;
            top:50vw;
            right:4vw;
            z-index:2;
            transform: scale(-1, 1); 
          }

          .prumeria-image{
            width:5vw;
            position:absolute;
            top:63vw;
            left:5vw;
            z-index:3;
            transform:rotate(-15deg);  
          }

          .prumeria-image2{
            width:3vw;
            position:absolute;
            top:65vw;
            left:10vw;
            z-index:3;
            transform:rotate(5deg);  
          }

          .prumeria-image3{
            width:3vw;
            position:absolute;
            top:67vw;
            left:8vw;
            z-index:3;
            transform:rotate(5deg);  
          }

          .prumeria-image4{
            width:8vw;
            position:absolute;
            top:65.5vw;
            left:25vw;
            z-index:13;
            transform:rotate(5deg);  
          }

          .prumeria-image1{
            width:5vw;
            position:absolute;
            top:63vw;
            right:5vw;
            z-index:3;
            transform:rotate(15deg);  
          }

          .prumeria-image21{
            width:3vw;
            position:absolute;
            top:65vw;
            right:10vw;
            z-index:3;
            transform:rotate(-5deg);  
          }

          .prumeria-image31{
            width:3vw;
            position:absolute;
            top:67vw;
            right:8vw;
            z-index:3;
            transform:rotate(-5deg);  
          }

          .prumeria-image41{
            width:8vw;
            position:absolute;
            top:65.5vw;
            right:25vw;
            z-index:13;
            transform:rotate(-5deg);  
          }

          .haibis-image{
            width:10vw;
            position:absolute;
            top:65vw;
            left:0;
            right:0;
            margin:0 auto;
            z-index:5;
            transform:rotate(5deg);  
          }

          .haibis-image2{
            width:4.5vw;
            position:absolute;
            top:66vw;
            left:40vw;
            z-index:3;
            transform:rotate(-10deg);  
          }

          .haibis-image3{
            width:5vw;
            position:absolute;
            top:66vw;
            right:40vw;
            z-index:3;
            transform:rotate(13deg);  
          }

          .haibis-image4{
            width:4vw;
            position:absolute;
            top:69.5vw;
            left:20vw;
            z-index:5;
            transform:rotate(-43deg);  
          }

          .haibis-image5{
            width:3vw;
            position:absolute;
            top:64vw;
            left:15vw;
            z-index:5;
            transform:rotate(3deg);  
          }

          .haibis-image6{
            width:7.5vw;
            position:absolute;
            top:67vw;
            left:10vw;
            z-index:5;
            transform:rotate(-13deg);  
          }

          .haibis-image41{
            width:4vw;
            position:absolute;
            top:69.5vw;
            right:20vw;
            z-index:5;
            transform:rotate(43deg);  
          }

          .haibis-image51{
            width:3vw;
            position:absolute;
            top:64vw;
            right:15vw;
            z-index:5;
            transform:rotate(-3deg);  
          }

          .haibis-image61{
            width:7.5vw;
            position:absolute;
            top:67vw;
            right:10vw;
            z-index:5;
            transform:rotate(13deg);  
          }

          .leaf-image{
            width:10vw;
            position:absolute;
            top:66vw;
            left:30vw;
            z-index:2;
            transform:rotate(45deg);  
            transform: scale(-1, 1); 
          }

          
          .leaf-image2{
            width:13vw;
            position:absolute;
            top:63vw;
            left:25vw;
            z-index:3;
            transform:rotate(45deg);  
            transform: scale(-1, 1); 
          }

          .leaf-image3{
            width:8vw;
            position:absolute;
            top:61vw;
            left:32vw;
            z-index:4;
          }
          .leaf-image4{
            width:5vw;
            position:absolute;
            top:62vw;
            left:24vw;
            z-index:4;
            transform:rotate(-85deg); 
          }

          .leaf-image5{
            width:10vw;
            position:absolute;
            top:60vw;
            left:22vw;
            z-index:2;
            transform:rotate(-85deg); 
          }

          .leaf-image6{
            width:15vw;
            position:absolute;
            top:64vw;
            left:20vw;
            z-index:3;
            transform:rotate(45deg);  
            transform: scale(-1, 1); 
          }

          .leaf-image7{
            width:12vw;
            position:absolute;
            top:62vw;
            left:15vw;
            z-index:1;
            transform: scale(-1,1);
          }

          .leaf-image8{
            width:15vw;
            position:absolute;
            top:63.5vw;
            left:12vw;
            z-index:2;
            transform: scale(-1,1);
          }

          .leaf-image9{
            width:5vw;
            position:absolute;
            top:60vw;
            left:10vw;
            z-index:2;
            transform:rotate(-85deg); 
          }

          
          .leaf-image10{
            width:4vw;
            position:absolute;
            top:62.5vw;
            left:43vw;
            z-index:1;
            transform:rotate(-50deg);  
          }

                 
          .leaf-image11{
            width:6vw;
            position:absolute;
            top:67.5vw;
            left:39vw;
            z-index:1;
            transform:rotate(-70deg);  
          }

          .leaf-image12{
            width: 6vw;
            position:absolute;
            top:65vw;
            left:35vw;
            z-index:1;
            transform:rotate(-60deg); 
          }

          .leaf-image1{
            width:10vw;
            position:absolute;
            top:66vw;
            right:30vw;
            z-index:2;
            transform:rotate(-5deg);  
          }

          
          .leaf-image21{
            width:13vw;
            position:absolute;
            top:63vw;
            right:25vw;
            z-index:3;
            transform:rotate(-5deg);  
          }

          .leaf-image31{
            width:8vw;
            position:absolute;
            top:61vw;
            right:32vw;
            z-index:4;
            transform:rotate(75deg); 
          }
          .leaf-image41{
            width:5vw;
            position:absolute;
            top:62vw;
            right:24vw;
            z-index:4;
            transform:rotate(35deg); 
          }

          .leaf-image51{
            width:10vw;
            position:absolute;
            top:60vw;
            right:22vw;
            z-index:2;
            transform:rotate(45deg); 
          }

          .leaf-image61{
            width:15vw;
            position:absolute;
            top:63vw;
            right:20vw;
            z-index:3;
            transform:rotate(-15deg);  
          }

          .leaf-image71{
            width:12vw;
            position:absolute;
            top:62vw;
            right:15vw;
            z-index:1;
          }

          .leaf-image81{
            width:15vw;
            position:absolute;
            top:63.5vw;
            right:12vw;
            z-index:2;
          }

          .leaf-image91{
            width:5vw;
            position:absolute;
            top:60vw;
            right:10vw;
            z-index:2;
            transform:rotate(85deg); 
          }

          
          .leaf-image101{
            width:4vw;
            position:absolute;
            top:62.5vw;
          right:43vw;
            z-index:1;
          }

                 
          .leaf-image111{
            width:6vw;
            position:absolute;
            top:67.5vw;
            right:39vw;
            z-index:1;
            transform:rotate(-5deg);  
          }

          .leaf-image121{
            width: 6vw;
            position:absolute;
            top:65vw;
            right:35vw;
            z-index:1;
            transform:rotate(60deg); 
          }

          .clock-image{
            width:4vw;
            position:absolute;
            top:40vw;
            left:9vw;
            transform:rotate(-20deg);  
          }

          .cloud-image{
            width:20vw;
            position:absolute;
            left:5vw;
            top:305vw;
            z-index:2;
          }  
          
          .cloud-image2{
            width:30vw;
            position:absolute;
            left:25vw;
            top:295vw;
            z-index:2;
          }

          .cloud-image3{
            width:18vw;
            position:absolute;
            left:32vw;
            top:305vw;
            z-index:2;
          }

          
          .cloud-image4{
            width:25vw;
            position:absolute;
            right:22vw;
            top:300vw;
            z-index:2;
            transform:scale(-1,1 )
          }

          .cloud-image5{
            width:20vw;
            position:absolute;
            right:13vw;
            top:297vw;
            z-index:2;
            transform:scale(-1,1 )
          }  

          .cloud-image6{
            width:10vw;
            position:absolute;
            right:5vw;
            top:297vw;
            z-index:2;
            transform:scale(-1,1 )
          }  

          .cloud-image7{
            width:15vw;
            position:absolute;
            right:10vw;
            top:298vw;
            z-index:2;
            transform:scale(-1,1 )
          }  

          .cloud-image8{
            width:22vw;
            position:absolute;
            right:30vw;
            top:294vw;
            z-index:2;
            transform:scale(-1,1 )
          }  

          .cloud-image9{
            width:12vw;
            position:absolute;
            left:20vw;
            top:302vw;
            z-index:2;
            transform:scale(-1,1 )
          }  

          .cloud-imageBL{
            width:13vw;
            position:absolute;
            left:22vw;
            top:297vw;
            z-index:1;
          }

          .cloud-imageBL2{
            width:13vw;
            position:absolute;
            right:2vw;
            top:303vw;
            z-index:1;
          }

          .tori-image{
            width:13vw;
            position:absolute;
            left:32vw;
            top:302vw;
            z-index:3;
          }

          .tori-image2{
            width:13vw;
            position:absolute;
            right:12vw;
            top:302vw;
            z-index:3;
            transform:scale(-1,1 )
          }

          .tori-image3{
            width:9vw;
            position:absolute;
            left:24vw;
            top:305vw;
            z-index:3;
          }


         /* .bill-image{
            width:20vw;
            z-index:1;
            position:absolute;
            right:5vw;
            top:0vw;
          }

          .bill-image3{
            width:20vw;
            z-index:1;
            position:absolute;
            left:5vw;
            top:0vw;
          }
        
          .bill-image2{
            width:10vw;
            z-index:1;
            position:absolute;
            right:20vw;
          }

          .bill-image5{
            width:10vw;
            z-index:1;
            position:absolute;
            left:20vw;
          }
          .bill{
            display:flex;
          }*/
          /* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the main element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */



/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd em font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */



/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd em font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent sub and sup elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}