body {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans JP', sans-serif !important;
}

#headerwrap {
   position: relative;
}

#headerwrap #hbar-top {
   height: 55px;
   background-color: #f2f2f2;
}

#headerwrap #hbar-middle {
   margin-top: -12px;
   height: 22px;
   background-color: #d9eefd;
   -webkit-clip-path: polygon(0 0, 85% 0, 88% 40%, 100% 40%, 100% 100%, 0 100%);
   clip-path: polygon(0 0, 85% 0, 88% 40%, 100% 40%, 100% 100%, 0 100%);
}

#headerwrap #hbar-bottom {
   height: 20px;
   background-color: #a0d5fa;
}

#headerwrap img:nth-of-type(1) {
   position: absolute;
   top: 10px;
   left: calc(50vw - 95px);
   width: 190px;
   height: auto;
}

#headerwrap img:nth-of-type(2) {
   position: absolute;
   top: 11px;
   right: 10px;
   width: 105px;
   height: auto;
}

@media(max-width: 1050px) {
   #headerwrap #hbar-middle {
      -webkit-clip-path: polygon(0 0, 80% 0, 83% 40%, 100% 40%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 80% 0, 83% 40%, 100% 40%, 100% 100%, 0 100%);
   }
}

@media(max-width: 720px) {
   #headerwrap #hbar-middle {
      -webkit-clip-path: polygon(0 0, 75% 0, 78% 40%, 100% 40%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 75% 0, 78% 40%, 100% 40%, 100% 100%, 0 100%);
   }
}

@media(max-width: 580px) {
   #headerwrap #hbar-top {
      height: 45px;
   }

   #headerwrap #hbar-middle {
      height: 17px;
      -webkit-clip-path: polygon(0 0, 75% 0, 78% 50%, 100% 50%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 75% 0, 78% 50%, 100% 50%, 100% 100%, 0 100%);
   }

   #headerwrap img:nth-of-type(1) {
      top: 8px;
      left: calc(50vw - 70px);
      width: 140px;
   }

   #headerwrap img:nth-of-type(2) {
      top: 8px;
      right: 8px;
      width: 85px;
   }
}

@media(max-width: 450px) {
   #headerwrap #hbar-middle {
      -webkit-clip-path: polygon(0 0, 70% 0, 73% 50%, 100% 50%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 70% 0, 73% 50%, 100% 50%, 100% 100%, 0 100%);
   }

   #headerwrap img:nth-of-type(1) {
      top: 6px;
      left: 2%;
      width: 120px;
   }
}

@media(max-width: 380px) {
   #headerwrap #hbar-middle {
      -webkit-clip-path: polygon(0 0, 65% 0, 68% 50%, 100% 50%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 65% 0, 68% 50%, 100% 50%, 100% 100%, 0 100%);
   }
}

#wlwrap {
   position: relative;
   background: #a0d5fa;
   padding-top: 22vh;
   padding-bottom: 10vh;
   min-height: calc(100vh - 76px);
   height: auto;
   border-bottom: 10px solid #d9eefd;
   overflow: hidden;
   -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 5px 6px -6px;
   box-shadow: rgba(33, 35, 38, 0.1) 0px 5px 6px -6px;
}

#wlwrap #wlbox {
   position: relative;
   max-width: 650px;
   margin: auto;
   padding: 45px 110px 50px 110px;
   background: rgba(255, 255, 255, .79);
   border-radius: 300px;
   border: 4px solid rgba(255, 255, 255, .5);
   z-index: 3;
}

#wlwrap h3 {
   height: 50px;
   margin: 0;
   padding: 0;
   text-align: center;
   font-size: 22px;
   font-weight: 400;
   color: #4d4d4d;
   line-height: 45px;
   letter-spacing: 0.1em;
}

#wlwrap #wlbox p {
   font-size: 18px;
   line-height: 1.7em;
   letter-spacing: 0.07em;
}

#wlwrap #wlbox p:nth-of-type(1) {
   margin: 20px 0 0 0;
}

#wlwrap #wlbox p:nth-last-of-type(1) {
   margin: 12px 0 0 0;
}

#wlwrap #wlbox p:nth-last-of-type(1) span {
   display: block;
}

#wlwrap #welcomeill {
   display: block;
   position: absolute;
   top: 35px;
   left: 50px;
   width: 128px;
   height: auto;
}

#wlwrap #enpituill {
   display: block;
   position: absolute;
   bottom: 40px;
   right: 85px;
   width: 50px;
   height: auto;
}

@media(max-width:700px) {
   #wlwrap #wlbox {
      width: 600px;
      padding: 45px 85px 50px 85px;
      border-radius: 130px;
   }

   #wlwrap #welcomeill {
      top: 10px;
      left: 50px;
      width: 128px;
   }
}

@media(max-width:650px) {
   #wlwrap #wlbox {
      width: 96%;
      padding: 35px 0 50px 0;
   }

   #wlwrap #welcomeill {
      top: 20px;
      left: 25px;
      width: 110px;
   }

   #wlwrap #enpituill {
      bottom: 25px;
      right: 50px;
      width: 40px;
   }

   #wlwrap h3 {
      width: 400px;
      margin: 0 auto;
   }

   #wlwrap #wlbox p {
      width: 400px;
   }

   #wlwrap #wlbox p:nth-of-type(1) {
      margin: 20px auto 0 auto;
   }

   #wlwrap #wlbox p:nth-last-of-type(1) {
      margin: 12px auto 0 auto;
   }
}

@media(max-width:580px) {
   #wlwrap {
      height: calc(100vh - 61px);
   }

   #wlwrap #wlbox {
      padding: 35px 0 50px 0;
      border-radius: 70px;
   }

   #wlwrap #welcomeill {
      top: 13px;
      width: 100px;
   }

   #wlwrap h3 {
      height: 45px;
      font-size: 20px;
      line-height: 40px;
      letter-spacing: 0.07em;
   }

   #wlwrap #wlbox p {
      font-size: 16px;
      line-height: 1.7em;
      letter-spacing: 0.05em;
   }

   #wlwrap #enpituill {
      bottom: 20px;
      width: 35px;
   }
}

@media(max-width:500px) {
   #wlwrap #wlbox {
      padding: 35px 0 50px 0;
   }

   #wlwrap #welcomeill {
      top: 11px;
      width: 90px;
   }

   #wlwrap h3 {
      width: 90%;
      margin: 0 auto;
   }

   #wlwrap #wlbox p {
      width: 90%;
      margin: 0 auto;
   }
}

@media(max-width:450px) {
   #wlwrap #wlbox {
      padding: 40px 0 60px 0;
      border-radius: 60px;
   }

   #wlwrap #welcomeill {
      top: 8px;
      width: 90px;
   }

   #wlwrap #wlbox p {
      font-size: 15px;
      line-height: 1.6em;
      letter-spacing: 0.03em;
   }

   #wlwrap #enpituill {
      bottom: 15px;
   }
}

@media(max-width:380px) {
   #wlwrap #wlbox p:nth-last-of-type(1) span {
      display: inline;
   }
}

#wlwrap #cloudsunbox {
   position: absolute;
   top: 55px;
   left: 16%;
   width: 143px;
   height: 83px;
}

#wlwrap #sun {
   position: absolute;
   top: 0px;
   left: 65px;
   z-index: 1;
   width: 55px;
   height: 55px;
   -webkit-animation-name: rotate;
   animation-name: rotate;
   -webkit-animation-duration: 16000ms;
   animation-duration: 16000ms;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
}

@-webkit-keyframes rotate {
   0% {
      -webkit-transform: rotateZ(0deg);
      transform: rotateZ(0deg);
   }

   100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
   }
}

@keyframes rotate {
   0% {
      -webkit-transform: rotateZ(0deg);
      transform: rotateZ(0deg);
   }

   100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
   }
}

#wlwrap #cloud1 {
   position: absolute;
   top: 5px;
   left: 0;
   z-index: 2;
   width: 143px;
   height: 83px;
   -webkit-animation-name: cloudmove;
   animation-name: cloudmove;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-duration: 23s;
   animation-duration: 23s;
   -webkit-animation-delay: 0;
   animation-delay: 0;
}

#wlwrap #cloud2box {
   position: absolute;
   top: 130px;
   right: 17%;
   width: 110px;
   height: 66px;
}

#wlwrap #cloud2 {
   width: 110px;
   height: 66px;
   -webkit-animation-name: cloudmove;
   animation-name: cloudmove;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-duration: 17s;
   animation-duration: 17s;
   -webkit-animation-delay: 0;
   animation-delay: 0;
}

@-webkit-keyframes cloudmove {
   0% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }

   25% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
   }

   50% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }

   75% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
   }

   100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }
}

@keyframes cloudmove {
   0% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }

   25% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
   }

   50% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }

   75% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
   }

   100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }
}

@media(max-width:1350px) {
   #wlwrap #cloudsunbox {
      left: 11%;
   }

   #wlwrap #cloud2box {
      right: 11%;
   }
}

@media(max-width:1200px) {
   #wlwrap #cloudsunbox {
      top: 35px;
      left: 8%;
   }

   #wlwrap #cloud2box {
      top: 80px;
      right: 7%;
   }
}

@media(max-width:700px) {
   #wlwrap #cloudsunbox {
      left: 5%;
   }

   #wlwrap #sun {
      top: 0px;
      left: 55px;
      width: 45px;
      height: 45px;
   }

   #wlwrap #cloud1 {
      width: 110px;
      height: 64px;
   }

   #wlwrap #cloud2box {
      top: 108px;
      right: 3%;
      width: 75px;
      height: 45px;
   }

   #wlwrap #cloud2 {
      width: 75px;
      height: 45px;
   }
}